/* ==========================================================
   LEGACY FITNESS ZONE
   HERO SECTION STYLE
========================================================== */



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


.hero{


    position:relative;


    width:100%;


    height:100vh;


    min-height:800px;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    overflow:hidden;


    padding-top:90px;


}







/* =========================
   HERO BACKGROUND IMAGE
========================= */


.hero-bg{


    position:absolute;


    inset:0;


    width:100%;


    height:100%;


    object-fit:cover;


    z-index:0;


    transform:scale(1.1);


}








/* =========================
   DARK OVERLAY
========================= */


.hero-overlay{


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    180deg,

    rgba(0,0,0,0.45),

    rgba(0,0,0,0.85)

    );


    z-index:1;


}








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


.hero-content{


    position:relative;


    z-index:2;


    width:90%;


    max-width:1000px;


    margin:auto;


}








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


.hero-badge{


    display:inline-block;


    padding:8px 22px;


    border-radius:50px;


    background:


    rgba(255,60,0,0.15);


    border:


    1px solid #ff3c00;


    color:#ff3c00;


    font-size:13px;


    font-weight:600;


    letter-spacing:2px;


    margin-bottom:25px;


}







/* =========================
   WELCOME TEXT
========================= */


.hero-content h4{


    font-size:18px;


    font-weight:500;


    letter-spacing:5px;


    color:#ddd;


    margin-bottom:15px;


}







/* =========================
   MAIN TITLE
========================= */


.hero-title{


    font-size:


    clamp(55px,8vw,100px);


    line-height:0.95;


    font-weight:800;


    letter-spacing:3px;


    text-transform:uppercase;


    margin-bottom:20px;


    background:


    linear-gradient(

    90deg,

    #ffffff,

    #ff3c00

    );


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}







/* =========================
   SUB TITLE
========================= */


.hero-content h2{


    font-size:


    clamp(22px,3vw,35px);


    font-weight:700;


    letter-spacing:2px;


    margin-bottom:20px;


}







/* =========================
   DESCRIPTION
========================= */


.hero-content p{


    max-width:750px;


    margin:0 auto 35px;


    font-size:16px;


    color:#ddd;


}







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


.hero-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


    margin-bottom:55px;


}







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


.hero-stats{


    display:flex;


    justify-content:center;


    gap:80px;


}








.stat{


    text-align:center;


}





.stat h3{


    font-size:40px;


    font-weight:800;


    color:white;


}





.stat span{


    font-size:14px;


    color:#aaa;


    text-transform:uppercase;


    letter-spacing:1px;


}








/* =========================
   SCROLL INDICATOR
========================= */


.scroll-indicator{


    position:absolute;


    bottom:-70px;


    left:50%;


    transform:translateX(-50%);


    width:30px;


    height:55px;


    border:2px solid white;


    border-radius:30px;


    display:flex;


    justify-content:center;


    padding-top:10px;


}





.scroll-indicator span{


    width:6px;


    height:12px;


    background:#ff3c00;


    border-radius:20px;


    animation:


    scrollMove 1.5s infinite;


}








@keyframes scrollMove{


    0%{

        transform:translateY(0);

        opacity:1;

    }



    100%{

        transform:translateY(20px);

        opacity:0;

    }


}








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


@media(max-width:900px){


.hero{


    min-height:750px;


}





.hero-stats{


    gap:40px;


}



.stat h3{


    font-size:32px;


}


}








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


@media(max-width:600px){



.hero{


    min-height:850px;


}





.hero-content p{


    font-size:14px;


}





.hero-buttons{


    flex-direction:column;


    align-items:center;


}





.hero-buttons a{


    width:220px;


}





.hero-stats{


    gap:20px;


    flex-wrap:wrap;


}





.stat{


    width:30%;


}





.stat h3{


    font-size:26px;


}





.hero-content h4{


    font-size:14px;


    letter-spacing:3px;


}


}