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

.contact{
    padding:90px 0;
    background:#f8fafc;
}


.contact .container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}


/* SECTION TITLE */

.section-title{
    text-align:center;
    margin-bottom:55px;
}


.section-title span{
    color:#2563eb;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
}


.section-title h2{
    font-size:38px;
    color:#0f172a;
    margin:15px 0;
}


.section-title p{
    color:#64748b;
    max-width:650px;
    margin:auto;
    line-height:1.7;
}



/* MAIN CONTACT WRAPPER */

.contact-wrapper{

    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:50px;
    align-items:center;

}



/* =========================
CONTACT INFO CARDS
========================= */


.contact-info{

    display:flex;
    flex-direction:column;
    gap:25px;
    width:100%;

}


.contact-card{

    display:flex;
    align-items:flex-start;
    gap:20px;

    background:#ffffff;

    padding:25px;

    width:100%;
    max-width:450px;

    margin:auto;

    border-radius:18px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

    transition:.3s;

}


.contact-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.12);

}



.contact-icon{

    min-width:55px;
    height:55px;

    border-radius:50%;

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

    background:
    linear-gradient(135deg,#2563eb,#06b6d4);

    color:white;

    font-size:22px;

}



.contact-card h3{

    margin:0 0 8px;

    font-size:20px;

    color:#0f172a;

}



.contact-card p{

    margin:0;

    color:#64748b;

    line-height:1.8;

}



.contact-card a{

    text-decoration:none;

    color:#64748b;

    transition:.3s;

}


.contact-card a:hover{

    color:#2563eb;

}



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


.contact-form{

    background:white;

    padding:40px;

    border-radius:22px;

    box-shadow:
    0 15px 45px rgba(0,0,0,.1);

}


.contact-form h3{

    font-size:28px;

    margin-bottom:25px;

    color:#0f172a;

}



.input-group{

    margin-bottom:18px;

}



.input-group input,
.input-group select,
.input-group textarea{


    width:100%;

    padding:15px 18px;

    border-radius:12px;

    border:1px solid #e2e8f0;

    font-size:15px;

    outline:none;

    transition:.3s;

}



.input-group textarea{

    height:120px;

    resize:none;

}



.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    border-color:#2563eb;

    box-shadow:
    0 0 0 3px rgba(37,99,235,.15);

}



/* BUTTON */


.submit-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:
    linear-gradient(135deg,#2563eb,#06b6d4);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.submit-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(37,99,235,.3);

}



/* =========================
FLOATING BUTTONS
========================= */


.contact-buttons{

    position:fixed;

    right:25px;

    bottom:25px;

    display:flex;

    flex-direction:column;

    gap:15px;

    z-index:999;

}



.contact-buttons a{

    width:145px;

    padding:14px 20px;

    border-radius:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:white;

    text-decoration:none;

    font-weight:600;

    box-shadow:
    0 10px 25px rgba(0,0,0,.2);

    transition:.3s;

}



.contact-buttons a:hover{

    transform:translateY(-5px);

}


.whatsapp-btn{

    background:#25D366;

}


.call-btn{

    background:#2563eb;

}



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


@media(max-width:900px){


.contact-wrapper{

    grid-template-columns:1fr;

}



.contact-card{

    max-width:100%;

}



.contact-form{

    padding:30px;

}


}




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


@media(max-width:480px){


.contact{

    padding:60px 0;

}



.section-title h2{

    font-size:26px;

}



.contact-card{

    padding:18px;

}



.contact-icon{

    min-width:45px;

    height:45px;

    font-size:18px;

}



.contact-card h3{

    font-size:18px;

}



.contact-form{

    padding:22px;

}



.contact-buttons{

    right:15px;

    bottom:15px;

}



.contact-buttons a{

    width:55px;

    height:55px;

    padding:0;

    border-radius:50%;

    font-size:0;

}



.contact-buttons i{

    font-size:22px;

}


}

.contact-card a{
    color:inherit;
    text-decoration:none;
}

.contact-card a:hover{
    color:#2563eb;
}