/* =====================================
        RESPONSIVE CSS (PART 1)
        Navbar + Hero
===================================== */

@media (max-width:992px){

    .navbar{
        width:95%;
        flex-wrap:wrap;
        justify-content:center;
        gap:20px;
    }

    .nav-links{
        gap:20px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .logo-img{
        width:55px;
        height:55px;
    }

    .hero{
        flex-direction:column;
        text-align:center;
        margin:60px auto;
        gap:40px;
    }

    .hero-content h1{
        font-size:42px;
    }

    .hero-content p{
        font-size:17px;
        margin:auto;
        margin-bottom:30px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-image img{
        max-width:420px;
    }

}

@media (max-width:768px){

    .navbar{
        padding:15px 0;
    }

    .nav-links{
        flex-direction:column;
        width:100%;
        gap:15px;
    }

    .hero{
        margin:50px auto;
    }

    .hero-content h1{
        font-size:34px;
    }

    .hero-content p{
        font-size:16px;
    }

    .primary-btn,
    .secondary-btn,
    .trial-btn{
        width:100%;
        text-align:center;
    }

    .hero-image img{
        max-width:100%;
    }

}

@media (max-width:480px){

    .hero-content h1{
        font-size:28px;
    }

    .hero-content p{
        font-size:15px;
    }

    .logo-img{
        width:45px;
        height:45px;
    }

}
/* =====================================
        RESPONSIVE CSS (PART 2)
     Features + Courses + Stats
===================================== */

@media (max-width:992px){

    .features,
    .courses-preview,
    .stats{
        padding:70px 6%;
    }

    .feature-container{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .course-container{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .section-title h2{
        font-size:34px;
    }

    .section-title p{
        font-size:16px;
    }

    .feature-container{
        grid-template-columns:1fr;
    }

    .course-container{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:1fr;
        gap:20px;
    }

    .feature-box,
    .course-card,
    .stat-box{
        padding:30px 20px;
    }

    .course-card h3,
    .feature-box h3{
        font-size:22px;
    }

    .stat-box h2{
        font-size:40px;
    }

}

@media (max-width:480px){

    .features,
    .courses-preview,
    .stats{
        padding:60px 5%;
    }

    .section-title h2{
        font-size:28px;
    }

    .section-title p{
        font-size:15px;
    }

    .feature-box h3,
    .course-card h3{
        font-size:20px;
    }

    .feature-box p,
    .course-card p,
    .stat-box p{
        font-size:15px;
    }

    .stat-box h2{
        font-size:34px;
    }

}
/* =====================================
   RESPONSIVE CSS (PART 3)
   Testimonials + CTA + Footer
===================================== */

@media screen and (max-width: 992px) {

    .testimonials,
    .cta,
    footer {
        padding: 70px 6%;
    }

    .testimonial-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

}

@media screen and (max-width: 768px) {

    .testimonial-container {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: 30px 22px;
    }

    .cta h2 {
        font-size: 34px;
    }

    .cta p {
        font-size: 16px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo img {
        margin: 0 auto 20px;
    }

}

@media screen and (max-width: 480px) {

    .testimonials,
    .cta,
    footer {
        padding: 60px 5%;
    }

    .cta h2 {
        font-size: 28px;
    }

    .cta p {
        font-size: 15px;
    }

    .footer-logo h3 {
        font-size: 24px;
    }

    .footer-links h4,
    .footer-contact h4 {
        font-size: 20px;
    }

    .copyright p {
        font-size: 14px;
    }

}