/* ==========================================================
   LEGACY FITNESS ZONE
   RESPONSIVE GLOBAL STYLE
========================================================== */


/*
   This file controls final adjustments
   across all sections:
   Navbar
   Hero
   About
   Programs
   Contact
   Footer
*/





/* ==========================================================
   LARGE TABLETS / SMALL LAPTOPS
========================================================== */


@media(max-width:1200px){



    :root{

        --section-padding:80px;

    }



    .navbar{

        width:92%;

    }




    .hero-content{

        max-width:900px;

    }



}









/* ==========================================================
   TABLETS
========================================================== */


@media(max-width:900px){



/* GLOBAL */


body{

    overflow-x:hidden;

}





section{

    padding:80px 0;

}






/* NAVBAR */


.nav-links{

    display:flex;

}





/* HERO */


.hero{

    height:auto;

    min-height:750px;

}





.hero-title{

    letter-spacing:1px;

}





.hero-stats{

    margin-top:20px;

}








/* ABOUT */


.about-container{

    text-align:center;

}





.about-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}





.about-content p{

    max-width:700px;

}





/* PROGRAMS */


.program-content{

    text-align:left;

}








/* CONTACT */


.contact-content{

    text-align:center;

}





.contact-details{

    align-items:center;

}





.contact-box{

    width:100%;

    max-width:500px;

}





/* FOOTER */


.footer-container{

    text-align:center;

}





.footer-brand p{

    margin:auto;

}





.social-links{

    justify-content:center;

}



}









/* ==========================================================
   MOBILE DEVICES
========================================================== */


@media(max-width:600px){



:root{

    --section-padding:65px;

}





/* GLOBAL */


.container,
.about-container,
.programs-container,
.contact-container,
.footer-container{

    width:92%;

}





p{

    font-size:14px;

}






/* HERO */


.hero{

    min-height:900px;

}





.hero-title{

    font-size:48px;

}





.hero-content h2{

    font-size:22px;

}





.hero-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}





.stat h3{

    font-size:24px;

}





.stat span{

    font-size:11px;

}








/* BUTTONS */


.btn-primary,
.btn-secondary,
.whatsapp-btn{


    padding:13px 25px;


    font-size:14px;


}








/* ABOUT */


.about-title{

    font-size:32px;

}





.about-image img{

    height:320px;

}





.about-stats{

    gap:15px;

}








/* PROGRAMS */


.section-heading h2{

    font-size:34px;

}





.program-card{

    border-radius:18px;

}








/* CONTACT */


.contact-content h2{

    font-size:30px;

}





.contact-buttons{

    width:100%;

}





.contact-buttons a{

    width:100%;

}





.contact-card h3{

    font-size:24px;

}





/* FOOTER */


.footer-logo{

    justify-content:center;

}





.footer-links ul{

    align-items:center;

}



}









/* ==========================================================
   EXTRA SMALL DEVICES
========================================================== */


@media(max-width:380px){



.hero-title{

    font-size:40px;

}





.hero-content h4{

    font-size:12px;

}





.hero-stats{

    grid-template-columns:1fr;

}





.stat{

    margin-bottom:15px;

}





.contact-icon{

    width:40px;

    height:40px;

}





.footer-logo img{

    width:50px;

    height:50px;

}



}