/* ====================================
   TABLET (992px)
==================================== */

@media (max-width:992px){

.hero-content{
    flex-direction:column;
    text-align:center;
}

.hero-text h1{
    font-size:40px;
}

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

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

header .container{
    flex-direction:column;
    gap:20px;
}

nav ul{
    flex-wrap:wrap;
    justify-content:center;
}

}


/* ====================================
   MOBILE (768px)
==================================== */

@media (max-width:768px){

.logo img{
    height:60px;
}

.hero{
    padding:60px 0;
}

.hero-text h1{
    font-size:32px;
}

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

.hero-content{
    gap:30px;
}

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

.features{
    grid-template-columns:1fr;
}

nav ul{
    flex-direction:column;
    gap:15px;
    text-align:center;
}

header .container{
    padding:15px;
}

.btn{
    display:block;
    width:220px;
    margin:15px auto;
    text-align:center;
}

.btn2{
    margin-left:0;
}

section{
    padding:60px 20px;
}

section h2{
    font-size:28px;
}

.card{
    padding:25px;
}

.features div{
    padding:25px;
}

footer{
    padding:30px 15px;
}

}


/* ====================================
   SMALL MOBILE (480px)
==================================== */

@media (max-width:480px){

.hero-text h1{
    font-size:26px;
}

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

.logo img{
    height:50px;
}

section h2{
    font-size:24px;
}

.card i{
    font-size:40px;
}

.features i{
    font-size:35px;
}

footer h3{
    font-size:20px;
}

footer p{
    font-size:14px;
}

}

/* ==========================================
   Large Tablet (1200px)
========================================== */

@media (max-width:1200px){

.container{
    width:95%;
}

.hero-text h1{
    font-size:46px;
}

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

}

/* ==========================================
   Tablet (992px)
========================================== */

@media (max-width:992px){

.hero-content,
.about-container,
.contact-section{
    display:flex;
    flex-direction:column;
    text-align:center;
}

.hero-image,
.about-image{
    margin-top:40px;
}

.course-grid,
.course-box,
.features,
.why-grid,
.process-grid,
.stats-grid,
.testimonial-grid,
.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

.about-list{
    grid-template-columns:1fr 1fr;
}

nav ul{
    gap:18px;
}

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

}

/* ==========================================
   Mobile (768px)
========================================== */

@media (max-width:768px){

.container{
    width:92%;
}

/* Header */

header .container{
    flex-direction:column;
    gap:15px;
}

.logo img{
    height:60px;
}

nav{
    width:100%;
}

nav ul{
    flex-direction:column;
    gap:12px;
    text-align:center;
}

/* Hero */

.hero{
    padding:60px 0;
}

.hero-content{
    flex-direction:column;
}

.hero-text h1{
    font-size:32px;
    line-height:1.3;
}

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

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hero-buttons .btn{
    width:100%;
}

/* About */

.about{
    padding:70px 0;
}

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

.about-content h2{
    font-size:30px;
}

.about-list{
    grid-template-columns:1fr;
}

/* Cards */

.course-grid,
.course-box,
.features,
.why-grid,
.process-grid,
.stats-grid,
.testimonial-grid,
.gallery-grid,
.footer-grid{
    grid-template-columns:1fr;
}

/* Section */

section{
    padding:70px 0;
}

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

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

/* Counter */

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

/* Testimonials */

.testimonial-card{
    text-align:center;
}

.testimonial-card img{
    width:90px;
    height:90px;
    margin:auto;
}

/* FAQ */

.faq-item{
    padding:20px;
}

.faq-item h3{
    font-size:18px;
}

/* CTA */

.cta{
    text-align:center;
}

.cta-btn{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.cta-btn .btn{
    width:100%;
}

/* Footer */

.footer-grid{
    gap:40px;
    text-align:center;
}

footer ul{
    padding:0;
}

footer ul li{
    margin:8px 0;
}

iframe{
    height:280px;
}

}

/* ==========================================
   Small Mobile (576px)
========================================== */

@media (max-width:576px){

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

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

.section-title span{
    font-size:13px;
}

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

.about-content h2{
    font-size:26px;
}

.card,
.course-card,
.why-card,
.process-card,
.stat-card,
.testimonial-card{
    padding:25px;
}

.course-card .icon,
.why-card i,
.process-card i{
    font-size:36px;
}

.btn{
    width:100%;
}

.logo img{
    height:50px;
}

}

/* ==========================================
   Extra Small (400px)
========================================== */

@media (max-width:400px){

.hero-text h1{
    font-size:24px;
}

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

.about-content h2{
    font-size:22px;
}

.btn{
    padding:12px 20px;
    font-size:15px;
}

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

}

@media(max-width:768px){

    .navbar ul{
        flex-direction:column;
        gap:10px;
    }

    .dropdown{
        width:100%;
        text-align:center;
    }

    .dropdown-menu{
        position:static;

        transform:none;

        width:100%;

        box-shadow:none;

        border:1px solid #eee;

        margin-top:10px;

        opacity:1;
        visibility:visible;

        display:none;
    }

    .dropdown:hover .dropdown-menu{
        display:block;

        transform:none;
    }

    .dropdown-menu li a{
        justify-content:center;
    }

}

/* =================================
   MOBILE MENU
================================= */

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
    color: #222;
    z-index: 1001;
}


/* =================================
   MOBILE
================================= */

@media (max-width: 768px) {

    .header .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Logo */

    .logo img {
        width: 150px;
        height: auto;
    }

    /* Hamburger */

    .menu-toggle {
        display: block !important;
        margin-left: auto;
        margin-right: 5px;
        margin-top: -21%;
    }

    /* Navigation */

    .navbar {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 1000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .navbar.active {
        display: block !important;
    }

    .navbar > ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 8px 0;
    }

    .navbar > ul > li {
        width: 100%;
    }

    .navbar > ul > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 20px;
    }

    /* Courses dropdown */

    .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        box-shadow: none !important;
        background: #f7f7f7;
    }

    .dropdown.active .dropdown-menu {
        display: block !important;
    }

    .dropdown-menu li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 35px !important;
    }

    /* Admission button hide */

    .header-btn {
        display: none !important;
    }

}