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



/* =========================
   CONTACT SECTION
========================= */


.contact-section{


    background:#080808;


}








/* =========================
   CONTACT CONTAINER
========================= */


.contact-container{


    display:grid;


    grid-template-columns:1.3fr 0.7fr;


    gap:60px;


    align-items:center;


}








/* =========================
   CONTACT CONTENT
========================= */


.contact-content h2{


    font-size:


    clamp(35px,5vw,55px);


    font-weight:800;


    line-height:1.15;


    margin-bottom:25px;


}







.contact-content p{


    max-width:650px;


    margin-bottom:40px;


    color:#aaa;


}








/* =========================
   CONTACT DETAILS
========================= */


.contact-details{


    display:flex;


    flex-direction:column;


    gap:20px;


    margin-bottom:40px;


}








.contact-box{


    display:flex;


    align-items:center;


    gap:20px;


    padding:20px;


    background:#111;


    border-radius:18px;


    border:1px solid rgba(255,255,255,0.06);


    transition:0.4s ease;


}







.contact-box:hover{


    transform:translateX(10px);


    border-color:#ff3c00;


}








/* =========================
   CONTACT ICON
========================= */


.contact-icon{


    width:55px;


    height:55px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    background:#ff3c00;


    color:white;


    font-size:25px;


}








.contact-box h4{


    font-size:17px;


    margin-bottom:5px;


}







.contact-box span{


    color:#aaa;


    font-size:14px;


}








/* =========================
   CONTACT BUTTONS
========================= */


.contact-buttons{


    display:flex;


    gap:20px;


}








/* =========================
   WHATSAPP BUTTON
========================= */


.whatsapp-btn{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:15px 35px;


    border-radius:50px;


    background:#25D366;


    color:white;


    font-weight:600;


    transition:0.4s ease;


}







.whatsapp-btn:hover{


    transform:translateY(-5px);


    box-shadow:


    0 15px 30px rgba(37,211,102,0.35);


}








/* =========================
   WHY CHOOSE CARD
========================= */


.contact-card{


    background:


    linear-gradient(

    145deg,

    #161616,

    #0c0c0c

    );


    padding:40px;


    border-radius:25px;


    border:1px solid rgba(255,255,255,0.08);


    box-shadow:


    0 20px 50px rgba(0,0,0,0.3);


}








.contact-card h3{


    font-size:28px;


    margin-bottom:30px;


}








.contact-card ul{


    display:flex;


    flex-direction:column;


    gap:18px;


}







.contact-card li{


    color:#ddd;


    font-size:15px;


    padding-bottom:15px;


    border-bottom:


    1px solid rgba(255,255,255,0.08);


}







.contact-card li:last-child{


    border-bottom:none;


}








/* =========================
   GLOW EFFECT
========================= */


.contact-section::before{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    background:#ff3c00;


    filter:blur(180px);


    opacity:0.12;


    right:-200px;


    top:20%;


}








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


@media(max-width:900px){



.contact-container{


    grid-template-columns:1fr;


}





.contact-card{


    margin-top:20px;


}



}








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


@media(max-width:600px){



.contact-section{


    padding:70px 0;


}





.contact-content h2{


    font-size:32px;


}





.contact-buttons{


    flex-direction:column;


}





.contact-buttons a{


    width:100%;


}





.contact-box{


    padding:15px;


}





.contact-icon{


    width:45px;


    height:45px;


    font-size:20px;


}





.contact-card{


    padding:25px;


}



}