/* =========================
   CONTACT PAGE
========================= */



/* HERO */


.contact-hero{


    background:var(--light);

    padding:100px 10%;

    text-align:center;


}



.contact-hero h1{


    font-family:var(--font-heading);

    font-size:var(--heading-xl);

    color:var(--primary);


}




.contact-hero span{


    color:var(--accent);


}




.contact-hero p{


    max-width:800px;

    margin:25px auto;

    font-size:var(--text-lg);

}









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


.contact-section{


    padding:var(--section-padding);

    display:flex;

    justify-content:center;

    gap:60px;

    align-items:flex-start;


}






.contact-info{


    width:40%;


}



.contact-info h2,
.contact-form h2{


    font-family:var(--font-heading);

    color:var(--primary);

    font-size:var(--heading-lg);

    margin-bottom:35px;


}







.info-card{


    background:white;

    padding:25px;

    border-radius:20px;

    margin-bottom:20px;

    box-shadow:

    0 10px 30px rgba(0,7,68,.12);

    transition:.3s;


}


.social-icons{
    top: 25px;
    right: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-icons a{
    width: 42px;
    height: 42px;

    border:1px solid var(--primary);
    border-radius:20px;
    color:var(--primary);

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    color: var(--primary);

    border-radius: 50%;

    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.3);

    transition: all 0.3s ease;
}

.social-icons a:hover{
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-3px);
}

.social-icons i{
    font-size: 18px;
}




.info-card h3{


    font-family:var(--font-heading);

    color:var(--primary);

    margin-bottom:10px;


}


.info-card p{


    color:var(--text);


}

.mail{
    text-decoration:none;
    font-weight: bold;
    color: #222;
    transition: 0.3s;
}

.mail:hover{
    color: var(--accent);

}






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



.contact-form{


    width:45%;


}







.contact-form form{


    display:flex;

    flex-direction:column;

    gap:18px;


}






.contact-form input,
.contact-form textarea{


    width:100%;

    padding:16px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:16px;

    font-family:var(--font-body);

    outline:none;

    transition:.3s;


}





.contact-form input:focus,
.contact-form textarea:focus{


    border-color:var(--accent);

    box-shadow:

    0 0 0 3px rgba(14,165,164,.15);


}







.contact-form textarea{


    height:160px;

    resize:none;


}






.contact-form button{


    padding:16px;

    border:none;

    border-radius:30px;

    background:var(--accent);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;


}





.contact-form button:hover{


    background:var(--primary);


}





/* =========================
   CONTACT PAGE RESPONSIVE
========================= */


/* TABLET */

@media(max-width:1024px){



.contact-hero{


padding:80px 7%;


}





.contact-hero h1{


font-size:48px;


}




.contact-hero p{


font-size:18px;


}







.contact-section{


padding:70px 7%;

gap:40px;


}





.contact-info{


width:45%;


}





.contact-form{


width:50%;


}







.contact-info h2,
.contact-form h2{


font-size:36px;


}





.info-card{


padding:22px;


}





.contact-form input,
.contact-form textarea{


font-size:15px;


}




}









/* MOBILE */

@media(max-width:600px){



.contact-hero{


padding:60px 5%;


}





.contact-hero h1{


font-size:34px;

line-height:1.3;


}





.contact-hero p{


font-size:15px;

line-height:1.7;


}








.contact-section{


padding:50px 5%;

flex-direction:column;

gap:40px;


}





.contact-info,
.contact-form{


width:100%;


}





.contact-info h2,
.contact-form h2{


font-size:30px;

margin-bottom:25px;


}





.info-card{


padding:20px;

border-radius:18px;


}


.social-icons{
    gap: 8px;
}

.social-icons i{
font-size:15px;
}


.social-icons a{
width: 30px;
height: 30px;
}



.info-card h3{

font-size:15px;
}





.info-card p{


font-size:14px;


}







.contact-form form{


gap:15px;


}





.contact-form input,
.contact-form textarea{


padding:14px;

font-size:14px;


}





.contact-form textarea{


height:130px;


}





.contact-form button{


padding:14px;

font-size:15px;


}




}