/*==========================
      NAVBAR
===========================*/

@media(max-width:992px){

    .menu-btn{

        width:42px;

        height:42px;

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .nav-btn{

        display:none;

    }

    .nav-menu{

        position:fixed;

        top:90px;

        right:0;

        width:300px;

        height:calc(100vh - 90px);

        background:#111;

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        align-items:center;

        padding-top:50px;

        gap:30px;

        transition:.4s;

        transform:translateX(100%);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        overflow-y:auto;

        z-index:1001;

    }

    .nav-menu.show{

        transform:translateX(0);

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }

    body.nav-open{

        overflow:hidden;

    }

    body.nav-open .whatsapp-float,
    body.nav-open #scrollTopBtn,
    body.nav-open .mobile-sticky-join{

        display:none;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

    }

}

@media(max-width:576px){

    .preloader-logo{

        font-size:36px;

    }

    .preloader-ring{

        width:50px;

        height:50px;

    }

    .logo{

        font-size:1.8rem;

    }

    .nav-menu{

        width:100%;

    }

}



/*==========================
        HERO
===========================*/

@media(max-width:992px){

    .hero h1{

        font-size:65px;

    }

}

@media(max-width:768px){

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-btns{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero h1{

        font-size:50px;

    }

}

@media(max-width:576px){

    .hero h1{

        font-size:40px;

    }

    .hero p{

        font-size:16px;

    }

}





/*==========================
    STATS & ABOUT
===========================*/

@media(max-width:992px){

    .stats-container{

        grid-template-columns:repeat(2,1fr);

    }

    .about-container{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .stats-container{

        grid-template-columns:1fr;

    }

    .about-content h2{

        font-size:34px;

    }

    .about-features{

        grid-template-columns:1fr;

    }

}





/*==========================
      PROGRAMS
===========================*/

@media(max-width:992px){

    .program-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .program-grid{

        grid-template-columns:1fr;

    }

    .section-heading h2{

        font-size:34px;

    }

}



/*==========================
        TRAINERS
===========================*/

@media(max-width:992px){

    .trainer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .trainer-grid{

        grid-template-columns:1fr;

    }

}




/*==========================
      MEMBERSHIP
===========================*/

@media(max-width:992px){

    .pricing-grid{

        grid-template-columns:1fr;

    }

    .active-plan{

        transform:none;

    }

    .pricing-card.active-plan[data-aos].aos-animate,
    .pricing-card.active-plan[data-aos].aos-animate:hover{

        transform:none;

    }

}



/*==========================
      TESTIMONIALS
===========================*/

@media(max-width:992px){

    .testimonial-grid{

        grid-template-columns:1fr;

    }

}



/*==========================
          CTA
===========================*/

@media(max-width:768px){

    .cta{

        padding:90px 0;

    }

    .cta-content h2{

        font-size:42px;

    }

}

@media(max-width:576px){

    .cta-content h2{

        font-size:34px;

    }

    .cta-content p{

        font-size:16px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

}


/*==========================
        FOOTER
===========================*/

@media(max-width:992px){

    .footer-container{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .footer-container{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-bottom-content{

        justify-content:center;

        text-align:center;

    }

}



    

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

@media(max-width:992px){

    .newsletter-section{

        padding:75px 0;

    }

    .newsletter-box{

        padding:54px 34px;

    }

    .newsletter-content h2{

        font-size:38px;

    }

}

@media (max-width:768px){

    .newsletter-section{

        padding:65px 0;

    }

    .newsletter-box{

        padding:42px 22px;

        border-radius:8px;

    }

    .newsletter-content h2{

        font-size:30px;

        line-height:1.2;

    }

    .newsletter-content p{

        font-size:15px;

        line-height:1.65;

    }

    .newsletter-form{

        display:flex;

        flex-direction:column;

        background:transparent;

        border:none;

        border-radius:0;

        overflow:visible;

        gap:14px;

        max-width:520px;

        margin-top:28px;

    }

    .newsletter-form input{

        flex:none;

        width:100%;

        height:55px;

        padding:0 18px;

        background:#111;

        border:1px solid #333;

        border-radius:8px;

        font-size:16px;

    }

    .newsletter-form button{

        flex:none;

        width:100%;

        height:55px;

        background:var(--primary);

        border-radius:8px;

        font-size:17px;

        font-weight:600;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        box-shadow:0 8px 20px rgba(229,9,20,.35);

    }

}

@media(max-width:480px){

    .newsletter-section{

        padding:55px 0;

    }

    .newsletter-box{

        padding:34px 16px;

    }

    .newsletter-content span{

        font-size:12px;

        letter-spacing:2px;

    }

    .newsletter-content h2{

        font-size:26px;

    }

    .newsletter-content p{

        font-size:14px;

    }

    .newsletter-form input{

        padding:0 15px;

        font-size:15px;

    }

    .newsletter-form button{

        font-size:16px;

    }

}




/*==========================
    SCROLL TO TOP
===========================*/

@media(max-width:768px){

    body.has-mobile-sticky{

        padding-bottom:78px;

    }

    .mobile-sticky-join{

        position:fixed;

        left:18px;

        right:82px;

        bottom:18px;

        height:50px;

        border-radius:8px;

        background:var(--primary);

        color:#fff;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:9px;

        font-size:16px;

        font-weight:700;

        box-shadow:0 10px 25px rgba(229,9,20,.42);

        z-index:1000;

        transition:all .35s ease;

    }

    .mobile-sticky-join:hover{

        background:#fff;

        color:var(--primary);

    }

    .whatsapp-float,
    #scrollTopBtn{

        width:50px;

        height:50px;

        right:18px;

        bottom:18px;

        font-size:18px;

    }

    .whatsapp-float{

        bottom:84px;

        font-size:26px;

    }

}

@media(max-width:360px){

    .mobile-sticky-join{

        left:14px;

        right:78px;

        font-size:15px;

    }

    .whatsapp-float,
    #scrollTopBtn{

        right:14px;

    }

}



@media(max-width:768px){

    .page-banner{

        height:300px;

    }

    .banner-content h1{

        font-size:46px;

    }

}


/*==========================
      WHO WE ARE
==========================*/

@media(max-width:992px){

    .about-story-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-story-image{

        order:1;

    }

    .about-story-content{

        order:2;

    }

}

@media(max-width:768px){

    .about-story{

        padding:70px 0;

    }

    .about-story-image img{

        height:350px;

    }

    .about-story-content{

        text-align:center;

    }

    .about-story-content h2{

        font-size:38px;

    }

    .about-features{

        grid-template-columns:1fr;

        gap:20px;

    }

    .about-feature{

        text-align:left;

    }

}





/*==========================
    MISSION RESPONSIVE
==========================*/

@media(max-width:992px){

    .mission-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .mission-image{

        order:1;

    }

    .mission-content{

        order:2;

    }

}

@media(max-width:768px){

    .mission-section{

        padding:70px 0;

    }

    .mission-image img{

        height:320px;

    }

    .mission-content{

        text-align:center;

    }

    .mission-content h2{

        font-size:38px;

    }

    .mission-text{

        margin-bottom:30px;

    }

    .mission-card{

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:25px 20px;

    }

    .mission-icon{

        margin-bottom:10px;

    }

    .mission-card h3{

        font-size:24px;

    }

}





/*==========================
      WHY CHOOSE RESPONSIVE
===========================*/

@media(max-width:992px){

.choose-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.choose-grid{

grid-template-columns:1fr;

}

.choose-card{

padding:35px 25px;

}

.choose-icon{

width:80px;

height:80px;

}

.choose-icon i{

font-size:30px;

}

.choose-card h3{

font-size:22px;

}

}



/*==========================
      COUNTER RESPONSIVE
===========================*/

@media(max-width:992px){

.counter-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.counter-grid{

grid-template-columns:1fr;

}

.counter-card{

padding:40px 25px;

}

.counter-card h2{

font-size:42px;

}

}




/*==========================
      TIMELINE
===========================*/

@media(max-width:768px){

.timeline::before{

left:20px;

}

.timeline-item{

width:100%;

left:0 !important;

padding:20px 0 20px 60px;

}

.timeline-item::before{

left:11px !important;

}

}




@media(max-width:992px){

.services-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

}




/*==========================
    PERSONAL TRAINING
===========================*/

@media(max-width:992px){

.training-wrapper{

grid-template-columns:1fr;

}

.training-image{

order:1;

}

.training-content{

order:2;

}

}

@media(max-width:768px){

.personal-training{

padding:70px 0;

}

.training-image img{

height:350px;

}

.training-content{

text-align:center;

}

.training-content h2{

font-size:38px;

}

.training-features{

grid-template-columns:1fr;

}

.training-features div{

justify-content:center;

}

}


/*==========================
      HOW IT WORKS
===========================*/

@media(max-width:992px){

.process-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

.process-card{

padding:40px 25px;

}

.process-card h3{

font-size:22px;

}

.process-number{

font-size:50px;

}

}

/*==========================
      MEMBERSHIP PLANS
===========================*/

@media(max-width:992px){

.pricing-grid{

grid-template-columns:1fr;

}

.active-plan{

transform:scale(1);

}

}



/*==========================
      FEATURED CLASS
===========================*/

@media(max-width:992px){

.featured-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.featured-class{

padding:70px 0;

}

.featured-image img{

height:350px;

}

.featured-content{

text-align:center;

}

.featured-content h2{

font-size:38px;

}

.class-info li{

justify-content:center;

}

}



/*==========================
      CLASS SCHEDULE
===========================*/

@media(max-width:992px){

.schedule-table{

overflow-x:auto;

-webkit-overflow-scrolling:touch;

scrollbar-width:thin;

}

.schedule-header,

.schedule-row{

min-width:760px;

}

}

@media(max-width:768px){

.class-schedule{

padding:70px 0;

}

.schedule-table{

margin-top:35px;

border-radius:12px;

}

.schedule-header div,

.schedule-row>div{

padding:14px 12px;

font-size:14px;

}

.schedule-row>div{

min-height:105px;

}

}




/*==========================
      TRAINERS
===========================*/

@media(max-width:992px){

.trainers-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.trainers-grid{

grid-template-columns:1fr;

}

.trainer-image img{

height:320px;

}

}



/*==========================
    TRAINER SPOTLIGHT
===========================*/

@media(max-width:992px){

.spotlight-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.trainer-spotlight{

padding:70px 0;

}

.spotlight-image img{

height:380px;

}

.spotlight-content{

text-align:center;

}

.spotlight-content h2{

font-size:38px;

}

.trainer-info{

grid-template-columns:1fr;

}

}


/*==========================
    CERTIFICATIONS & STATS
===========================*/

@media(max-width:992px){

    .certification-grid,
    .trainer-stats{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .certification-grid,
    .trainer-stats{

        grid-template-columns:1fr;

    }

    .trainer-achievements{

        padding:70px 0;

    }

}


/*==========================
      MEMBERSHIP PLANS
===========================*/

@media(max-width:992px){

    .plans-grid{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

    }

    .featured-plan{

        transform:scale(1);

    }

    .featured-plan:hover{

        transform:translateY(-10px);

    }

}

@media(max-width:768px){

    .membership-plans{

        padding:70px 0;

    }

    .plans-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .plan-card{

        padding:40px 25px;

    }

    .plan-card h3{

        font-size:28px;

    }

    .price{

        font-size:48px;

    }

    .plan-card ul li{

        font-size:15px;

    }

    .popular-tag{

        right:-42px;

        font-size:12px;

        padding:8px 45px;

    }

}

@media(max-width:480px){

    .plan-card{

        padding:35px 20px;

    }

    .price{

        font-size:42px;

    }

    .popular-tag{

        font-size:11px;

        right:-45px;

    }

}


/*==========================
    MEMBERSHIP BENEFITS
===========================*/

@media(max-width:992px){

    .benefits-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .benefits-image{

        order:1;

    }

    .benefits-content{

        order:2;

    }

}

@media(max-width:768px){

    .membership-benefits{

        padding:70px 0;

    }

    .benefits-image img{

        height:350px;

    }

    .benefits-content{

        text-align:center;

    }

    .benefits-content h2{

        font-size:38px;

    }

    .benefits-list{

        grid-template-columns:1fr;

    }

    .benefits-list div{

        justify-content:center;

    }

}


/*==========================
      PLAN COMPARISON
===========================*/

@media(max-width:768px){

.comparison-table{

overflow-x:auto;

}

}


/*==========================
      FAQ
===========================*/

@media(max-width:768px){

.faq-section{

padding:70px 0;

}

.faq-question{

font-size:16px;

padding:18px;

}

.faq-answer p{

padding:0 18px 18px;

}

}



/*==========================
      PHOTO GALLERY
===========================*/

@media(max-width:992px){

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.photo-gallery{

padding:70px 0;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item img{

height:260px;

}

}


/*==========================
      VIDEO GALLERY
===========================*/

@media(max-width:992px){

.video-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.video-gallery{

padding:70px 0;

}

.video-grid{

grid-template-columns:1fr;

gap:25px;

}

.video-card img{

height:250px;

}

.play-btn{

width:65px;

height:65px;

}

.play-btn i{

font-size:22px;

}

}



/*==========================
      TRANSFORMATIONS
===========================*/

@media(max-width:992px){

.transformation-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.transformations{

padding:70px 0;

}

.transformation-grid{

grid-template-columns:1fr;

}

.transform-image img{

height:420px;

}

}


/*==========================
      INSTAGRAM FEED
===========================*/

@media(max-width:992px){

.instagram-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.instagram-feed{

padding:70px 0;

}

.instagram-grid{

grid-template-columns:1fr;

}

.insta-item img{

height:260px;

}

}


/*==========================
      FEATURED BLOG
===========================*/

@media(max-width:992px){

.featured-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.featured-blog{

padding:70px 0;

}

.featured-image img{

height:350px;

}

.featured-content{

text-align:center;

}

.featured-content h2{

font-size:36px;

}

.blog-meta{

justify-content:center;

flex-wrap:wrap;

}

}


/*==========================
      LATEST BLOGS
===========================*/

@media(max-width:992px){

.blog-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.latest-blogs{

padding:70px 0;

}

.blog-grid{

grid-template-columns:1fr;

gap:30px;

}

.blog-image img{

height:230px;

}

.blog-info{

flex-direction:column;

gap:10px;

}

.blog-content h3{

font-size:22px;

}

}


/*==========================
      FITNESS CATEGORIES
===========================*/

@media(max-width:992px){

.category-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.fitness-categories{

padding:70px 0;

}

.category-grid{

grid-template-columns:1fr;

}

.category-card{

padding:35px 25px;

}

.category-icon{

width:75px;

height:75px;

font-size:30px;

}

.category-card h3{

font-size:24px;

}

}


/*==========================
      CONTACT INFO
===========================*/

@media(max-width:992px){

.contact-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.contact-info{

padding:70px 0;

}

.contact-grid{

grid-template-columns:1fr;

}

}


/*==========================
      CONTACT FORM
===========================*/

@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-image{

order:-1;

}

.contact-image img{

height:450px;

}

}

@media(max-width:768px){

.contact-form-section{

padding:70px 0;

}

.contact-form-box h2{

font-size:36px;

text-align:center;

}

.input-row{

grid-template-columns:1fr;

}

.contact-image img{

height:320px;

}

}


@media(max-width:768px){

.success-popup{

left:15px;

right:15px;

top:20px;

padding:15px 18px;

font-size:15px;

justify-content:center;

transform:translateY(-120px);

}

.success-popup.show{

transform:translateY(0);

}

}



@media(max-width:768px){

.map-section{

padding:70px 0;

}

.map-box iframe{

height:320px;

}

}



@media(max-width:992px){

.social-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.social-connect{

padding:70px 0;

}

.social-grid{

grid-template-columns:1fr;

}

}