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

.contact-section {
    background: #F8FAFC;
}



/* subtle pixel glow */
.contact-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -180px;
    right: -150px;
    background:
    radial-gradient(
        circle,
        rgba(23,92,221,.15),
        transparent 65%
    );
    filter: blur(40px);
    pointer-events:none;
}




/* =====================================
   HEADER
===================================== */


.contact-header {

    max-width:850px;

    margin:auto;

    margin-bottom:70px;

}


.contact-header span {

    display:inline-block;

    color:#175CDD;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}



.contact-header h1 {


    font-size:clamp(2.4rem,5vw,4rem);

    line-height:1.15;

    font-weight:700;

    color:#0F172A;

    margin-bottom:20px;


}



.contact-header p {


    color:#64748B;

    font-size:18px;

    line-height:1.7;


}




/* =====================================
   CONTACT WRAPPER
===================================== */


.contact-wrapper {

    position:relative;

    z-index:2;

}



/* =====================================
   CONTACT INFO CARD
===================================== */


.contact-info,
.contact-form {


    background:#ffffff;

    border-radius:24px;

    padding:45px;

    height:100%;


    box-shadow:
    0 20px 50px rgba(15,23,42,.08);


}



.contact-info h3 {


    color:#0F172A;

    font-size:32px;

    margin-bottom:20px;


}



.contact-info p {


    color:#64748B;

    line-height:1.8;

}





/* =====================================
   CONTACT ITEMS
===================================== */


.contact-item {


    display:flex;

    align-items:center;

    gap:20px;

    margin-top:30px;


}



.contact-item i {


    width:55px;

    height:55px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:#175CDD;

    color:#fff;


    border-radius:50%;


    font-size:22px;


}



.contact-item small {


    color:#94A3B8;

    display:block;

    margin-bottom:5px;


}



.contact-item h5 {


    margin:0;

    color:#0F172A;

    font-size:17px;

    font-weight:600;


}




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


.contact-form {


    padding:45px;


}



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


    width:100%;


    background:#F8FAFC;


    border:1px solid #E2E8F0;


    border-radius:14px;


    padding:16px 18px;


    margin-bottom:20px;


    font-size:15px;


    color:#0F172A;


    outline:none;


    transition:.3s ease;


}




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


    border-color:#175CDD;


    background:#fff;


}



.contact-form textarea {


    resize:none;

}



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


    color:#94A3B8;


}




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


.contact-form button {


    border:none;


    background:#175CDD;


    color:white;


    padding:16px 32px;


    border-radius:50px;


    font-size:16px;


    font-weight:600;


    display:inline-flex;


    align-items:center;


    gap:10px;


    transition:.3s ease;


}



.contact-form button:hover {


    transform:translateY(-3px);


    box-shadow:
    0 12px 30px rgba(23,92,221,.25);


}





/* =====================================
   SOCIAL LINKS
===================================== */


.contact-social {


    margin-top:35px;


    display:flex;

    gap:15px;


}



.contact-social a {


    width:40px;

    height:40px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:#EFF6FF;


    color:#175CDD;


    border-radius:50%;


    transition:.3s ease;


}



.contact-social a:hover {


    background:#175CDD;


    color:white;


}




/* =====================================
   RESPONSIVE
===================================== */



@media(max-width:991px){


    .contact-section {

        padding:90px 0;

    }



    .contact-header {

        margin-bottom:50px;

    }



    .contact-info,
    .contact-form {

        padding:35px;

    }



}




@media(max-width:767px){


    .contact-section {

        padding:70px 0;

    }



    .contact-header h1 {

        font-size:2.3rem;

    }



    .contact-header p {

        font-size:16px;

    }



    .contact-info,
    .contact-form {


        padding:25px;

        border-radius:20px;


    }



    .contact-info h3 {

        font-size:26px;

    }



    .contact-item {


        align-items:flex-start;

    }



    .contact-item i {


        width:45px;

        height:45px;

        font-size:18px;


    }



    .contact-form button {


        width:100%;

        justify-content:center;


    }


}