/*==================================================
                LARGE LAPTOP
===================================================*/
@media (max-width:768px){

header{
    padding:10px 0;
}

.nav-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.logo{
    flex:1;
    min-width:0;
}

.logo img{
    height:42px;   /* adjust between 40–48px */
    width:auto;
    max-width:170px;
    object-fit:contain;
}

.header-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.btn{
    padding:10px 16px;
    font-size:14px;
    white-space:nowrap;
}

.menu-toggle{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

}

@media (max-width:991px){

.menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    border:none;
    background:transparent;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

}




@media (max-width:1200px){

.container{
    width:95%;
}

.hero h1,
.stats-left h2,
.section-heading h2,
.mentor-content h2,
.refund-content h2,
.cta-content h2{
    font-size:42px;
}

.hero-wrapper,
.stats-wrapper,
.mentor-wrapper,
.refund-wrapper,
.cta-wrapper{
    gap:50px;
}

.program-grid,
.roadmap-grid,
.testimonial-grid{
    gap:25px;
}

}


/*==================================================
                TABLET
===================================================*/

@media (max-width:992px){

.container{
    width:92%;
}

/*--------------------
Header
---------------------*/

header{
    padding:15px 0;
}

.nav-wrapper{
    height:auto;
}

nav{
    display:none;
}

.btn{
    padding:12px 24px;
}

/*--------------------
Hero
---------------------*/

.hero{
    padding:80px 0;
}

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

.hero-left,
.hero-right{
    width:100%;
}

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

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

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

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

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

.hero-right{
    margin-top:50px;
}

.hero-right img{
    width:380px;
}

/*--------------------
Why
---------------------*/

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

/*--------------------
Statistics
---------------------*/

.stats-wrapper{
    grid-template-columns:1fr;
}

.stats-left{
    text-align:center;
}

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

/*--------------------
Programs
---------------------*/

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

/*--------------------
Roadmap
---------------------*/

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

/*--------------------
Mentor
---------------------*/

.mentor-wrapper{
    grid-template-columns:1fr;
}

.mentor-image{
    max-width:450px;
    margin:auto;
}

.mentor-content{
    text-align:center;
}

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

.mentor-buttons{
    justify-content:center;
}

/*--------------------
Refund
---------------------*/

.refund-wrapper{
    grid-template-columns:1fr;
}

.refund-image{
    max-width:450px;
    margin:auto;
}

.refund-badge{
    left:20px;
}

/*--------------------
Testimonials
---------------------*/

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

/*--------------------
FAQ
---------------------*/

.faq-wrapper{
    width:100%;
}

/*--------------------
CTA
---------------------*/

.cta-wrapper{
    grid-template-columns:1fr;
}

.cta-card{
    max-width:500px;
    margin:auto;
}

/*--------------------
Footer
---------------------*/

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

.footer-bottom{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

}


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

@media (max-width:768px){

section{
    padding:70px 0 !important;
}

.section-heading{
    margin-bottom:45px;
}

.section-heading h2,
.hero h1,
.stats-left h2,
.mentor-content h2,
.refund-content h2,
.cta-content h2{

    font-size:34px;
}

.section-heading p,
.hero p,
.stats-left p,
.mentor-content p,
.refund-content p,
.cta-content p{

    font-size:16px;
    line-height:28px;
}

/*--------------------
Top Bar
---------------------*/

.top-bar{

    font-size:13px;
    padding:10px;
}

/*--------------------
Buttons
---------------------*/

.btn,
.primary-btn,
.outline-btn,
.whatsapp-btn{

    width:100%;
    text-align:center;
}

/*--------------------
Hero
---------------------*/

.market-list{

    grid-template-columns:1fr;
}

.hero-features{

    grid-template-columns:1fr;
}

.hero-buttons{

    flex-direction:column;
}

.hero-right img{

    width:100%;
}

.floating{

    position:relative;
    display:block;
    margin:15px auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
}

/*--------------------
Cards
---------------------*/

.why-grid,
.stats-grid,
.program-grid,
.roadmap-grid,
.testimonial-grid{

    grid-template-columns:1fr;
}

.mentor-info{

    grid-template-columns:1fr;
}

.cta-features{

    grid-template-columns:1fr;
}

/*--------------------
Refund
---------------------*/

.refund-badge{

    position:relative;
    left:0;
    bottom:0;
    margin-top:20px;
}

/*--------------------
Footer
---------------------*/

.footer-top{

    grid-template-columns:1fr;
}

.footer-links{

    flex-direction:column;
    gap:10px;
}

.social-icons{

    justify-content:center;
}

}


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

@media (max-width:480px){

.container{

    width:94%;
}

.hero h1{

    font-size:30px;
}

.section-heading h2,
.stats-left h2,
.mentor-content h2,
.refund-content h2,
.cta-content h2{

    font-size:28px;
}

.hero-right img{

    width:100%;
}

.program-card,
.why-card,
.stat-card,
.roadmap-card,
.testimonial-card,
.cta-card{

    padding:25px;
}

.footer{

    text-align:center;
}

.footer-logo{

    margin:auto auto 20px;
}

.experience-card{

    position:relative;
    right:0;
    bottom:0;
    margin-top:20px;
}

.hero-buttons,
.mentor-buttons{

    gap:15px;
}

}


@media (max-width: 991px) {

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:45px;
        height:45px;
        border:none;
        background:transparent;
        color:#fff;
        font-size:28px;
        cursor:pointer;
        z-index:10001;
    }

    #navbar{
        position:fixed;
        top:0;
        right:-320px;
        width:300px;
        height:100vh;
        background:#071739;
        transition:all .4s ease;
        z-index:10000;
        padding-top:90px;
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
    }

    #navbar.active{
        right:0;
    }

    #navbar ul{
        display:flex;
        flex-direction:column;
        gap:0;
        margin:0;
        padding:0;
    }

    #navbar ul li{
        list-style:none;
    }

    #navbar ul li a{
        display:block;
        color:#fff;
        padding:18px 30px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

}