/*==============================================================
    PREMIUM GYM WEBSITE
    ------------------------------------------------------------
    Responsive Styles
==============================================================*/


/*==============================================================
    LARGE DEVICES
==============================================================*/

@media (max-width:1200px){




}

/*==============================================================
    DESKTOP
==============================================================*/

@media (min-width:992px){

    #mobileMenu{

        display:none;

    }

    .values-header h2{
        font-size:clamp(2rem,4vw,3.8rem);

    }

    #premiumMap {
        position: relative;
        height: 600px;
    }

    #locationContent {
        overflow-y: auto;
        padding-right: 8px;
    }

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

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:50px;

    }

}



/*==============================================================
    TABLETS
==============================================================*/

@media (max-width:991.98px){
    /*==========================================
        Navigation
    ==========================================*/

    .nav-menu{
        display:none;
    }

    .mobile-toggle{
        display:flex;
    }

    .hero-right{
        right:-12%;
    }

    .hero-athlete{
        width:500px;
    }

    .hero-left{

        max-width:520px;

    }

    #mobileMflex{
        display:flex;
    }

    .about-story{

        grid-template-columns:1fr;

        gap:70px;

    }

    .about-content{

        text-align:center;

    }

    .values-grid{

        grid-template-columns:1fr;

    }

    .values-header h2{
        font-size:clamp(2.2rem,4vw,3.8rem);

    }

    .timeline-line{

        left:20px;

    }

    .timeline-item{

        width:100%;

        margin-left:0;

        padding-left:70px;

        padding-right:0;

        text-align:left;

    }

    .timeline-item.left,

    .timeline-item.right{

        margin-left:0;
        padding-left:70px;
        padding-right:0;
        text-align:left;
    }

}



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

@media (max-width:768px){

    /*==========================================
        Navigation
    ==========================================*/

    .nav-menu{
        display:none;
    }

    .mobile-toggle{
        display:flex;
    }

    .brand-logo img{
        width:80px;
    }

    #navbar{
        padding:18px 0;
    }

    .nav-actions{
        gap:12px;
    }

    .nav-actions .btn-premium{
        padding:12px 22px;
        font-size:.9rem;
    }

    .hero-right{
        right:-25%;
        opacity:.45;
    }

    .hero-athlete{
        width:430px;
    }

    .hero-left{

        max-width:100%;

        text-align:center;

        margin:0 auto;

    }

    .hero-description{

        margin:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-social{
        display: none;
        justify-content:center;

    }

    .hero-tags{
        display: none;
        justify-content:center;

    }

    .about-section{
        padding:70px 0;
    }

    .section-description{
        font-size:1rem;
        line-height:1.9;
    }

    .about-story{
        margin-top: 70px;
    }

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

    .journey-section{

        padding:90px 0;

    }

    .timeline{

        margin-top:70px;

    }

    /* Left vertical line */

    .timeline-line{

        left:28px;

        transform:none;

    }

    /* All items become single column */

    .timeline-item,

    .timeline-item.left,

    .timeline-item.right{

        width:100%;

        margin-left:0;

        padding-left:80px;

        padding-right:0;

        text-align:left;

    }

    /* Less spacing */

    .timeline-item{

        margin-bottom:55px;

    }

    .timeline-item .timeline-dot{
        left:15px !important;
        right:auto;
        top:10px;
        width:20px;
        height:20px;
        border-width:4px;

    }

    .timeline-item.left .timeline-card::before,
    .timeline-item.right .timeline-card::before{

        left:-42px !important;

        right:auto;

        width:42px;

        height:2px;

        background:linear-gradient(

            to right,

            rgba(214,40,57,.75),

            rgba(255,255,255,.12)

        );

    }

    .timeline-card{
        padding:24px;
    }

    .timeline-card h4{
        font-size:1.2rem;
    }

    .timeline-card p{
        font-size:.96rem;
        line-height:1.8;
    }

    .timeline-year{

        margin-bottom:16px;

    }

    /*==============================================================
        SERVICES
    ==============================================================*/

    .services-header{

        margin-bottom:60px;

    }

    .services-experience{

        grid-template-columns:1fr;

        gap:30px;

    }

    .service-showcase,

    .services-selector{

        min-height:auto;

    }

    .service-showcase{

        min-height:580px;

    }

    .service-content-card{

        left:20px;
        right:20px;
        bottom:5px;
        width:auto;
        padding:26px;

    }

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

    .membership-header{

        margin-bottom:55px;

    }

    .billing-toggle-wrapper{

        margin-bottom:50px;

        gap:14px;

    }

    .membership-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .membership-card.featured{

        transform:none;

    }

    .membership-card{

        min-height:auto;

        padding:32px 26px;

    }

    .price{

        font-size:3rem;

    }

    .plan-title{

        font-size:2rem;

    }

    /*==============================================================
        LOCATIONS
    ==============================================================*/

    .location-stage{
        display:flex;
        flex-direction:column;
        min-height:auto;
    }

    #premiumMap{
        position:relative;
        height:300px;
    }

    .location-panel{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        top:auto;
        transform:none;
        width:auto;
        margin:25px 20px;
        overflow:hidden;
    }

    #locationContent{
        overflow-y:auto;
        height:100%;
        padding-right:8px;
    }

    .location-pin{
        width:52px;
        height:52px;
        font-size:1.1rem;
    }

    #branchOne{
        left:30%;
        top:58%;
    }

    #branchTwo{
        left:72%;
        top:20%;
    }

    .pin-label{
        font-size:.72rem;
        padding:7px 13px;
        bottom:60px;
    }

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

    .faq-wrapper{

        max-width:100%;

    }

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

    .faq-question{

        padding:22px;

        align-items:flex-start;

    }

    .faq-title{

        gap:14px;

    }

    .faq-title span{

        font-size:.96rem;

    }

    .faq-answer{

        padding:0 22px 22px 56px;

    }

    .faq-icon{

        width:40px;

        height:40px;

    }

    /*==============================================================
        SUPPORT CARD
    ==============================================================*/

    .support-card{

        flex-direction:column;

        padding:35px 25px;

        text-align:center;

    }

    .support-content h3{

        font-size:2rem;

    }

    .support-content p{

        margin:auto;

    }

    .support-actions{

        width:100%;

        min-width:unset;

    }

    .support-button{

        justify-content:center;

    }

    /*==============================================================
        SUPPORT BUTTONS
    ==============================================================*/

    .support-button{

        padding:20px;

        text-align:left;

    }

    .support-info h5{

        font-size:1rem;

    }

    .support-info small{

        font-size:.8rem;

    }

    .support-arrow{

        display:none;

    }

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

    .footer-section{

        padding:90px 0 35px;

    }

    .footer-glow{
        width:300px;
        height:300px;
        filter:blur(120px);
    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .footer-column{

        text-align:center;

    }

    .footer-column h4::after{

        margin:12px auto 0;

    }

    .footer-social{
        justify-content:center;
    }

    .footer-contact li{
        justify-content:center;
        text-align:left;
    }

    .footer-logo{
        display: flex;
        justify-content: center;
    }
}



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

@media (max-width:576px){

    .brand-logo img{

        width:70px;

    }

    .nav-actions .btn-premium{

        padding:11px 18px;

        font-size:.85rem;

    }

    .mobile-link{

        font-size:1.6rem;

    }

    .hero-right{
        right:-35%;
        opacity:.30;
    }

    .hero-athlete{
        width:360px;
    }

    .hero-title{

        font-size:clamp(2.7rem,12vw,4rem);

    }

    .hero-description{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-actions{
        flex-direction:column;
        gap:18px;
    }

    .hero-btn{
        width:100%;
        max-width:280px;
        justify-content:center;
    }

    .watch-video{
        justify-content:center;
    }

    .hero-social{
        display: none;
        flex-direction:column;
        text-align:center;
        gap:18px;

    }

    .hero-tag{
        display: none;
        font-size:.88rem;
        padding:11px 16px;

    }

    .years-card{

        left:10px;

    }

    .workout-card{

        right:10px;

    }

    .coach-badge{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;

        margin:25px auto 0;

        width:max-content;

    }

    .timeline{

        margin-top:55px;

    }

    .timeline-item,

    .timeline-item.left,

    .timeline-item.right{

        padding-left:65px;

    }

    .timeline-line{

        left:22px;

    }

    .timeline-item .timeline-dot{

        left:12px;

    }

    .timeline-item.left .timeline-card::before,
    .timeline-item.right .timeline-card::before{

        width:32px;

        left:-32px;

    }

    .service-content-card h3{

        font-size:2rem;

    }

    .service-content-card{

        padding:22px;

    }

    .auth-toast{

        bottom:20px;

        padding:14px 16px;

        font-size:.84rem;

    }

}