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


:root{

    --primary:#0f172a;
    --secondary:#1e40af;
    --accent:#2563eb;

    --background:#f8fafc;
    --white:#ffffff;

    --border:#e2e8f0;

    --text:#1e293b;
    --muted:#64748b;

}



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


.contact-page{

    background:var(--background);

    min-height:100vh;

    padding:60px 20px 80px;

}



.container{

    width:min(1100px,100%);

    margin:auto;

}



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


.contact-hero{

    text-align:center;

    margin-bottom:40px;

}



.page-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(37,99,235,.12);

    color:var(--accent);

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

}



.contact-hero h1{

    margin-top:18px;

    font-size:3rem;

    color:var(--primary);

    font-weight:800;

}



.page-description{

    max-width:760px;

    margin:20px auto;

    color:var(--muted);

    line-height:1.8;

    font-size:1.08rem;

}





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


.contact-card{

    background:var(--white);

    padding:60px;

    border-radius:24px;

    border:1px solid var(--border);

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

}





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


.form-group{

    margin-bottom:25px;

}



.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:var(--primary);

}



.form-group label span{

    color:var(--muted);

    font-weight:400;

}





/* ==========================================
   INPUTS
========================================== */


.form-group input,
.form-group textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid var(--border);

    border-radius:12px;

    font-size:1rem;

    color:var(--text);

    outline:none;

    transition:.3s;

}



.form-group textarea{

    resize:vertical;

}



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

    border-color:var(--accent);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}







/* ==========================================
   DROPDOWN CSS
========================================== */


.dropdown-group select{

    width:100%;

    padding:15px 18px;

    border-radius:12px;

    border:1px solid var(--border);

    background:white;

    color:var(--text);

    font-size:1rem;

    cursor:pointer;

    outline:none;

    appearance:none;

    background-image:
    linear-gradient(45deg,transparent 50%,#64748b 50%),
    linear-gradient(135deg,#64748b 50%,transparent 50%);

    background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;

    background-size:
    5px 5px,
    5px 5px;

    background-repeat:no-repeat;

}



.dropdown-group select:focus{

    border-color:var(--accent);

}







/* ==========================================
   CUSTOM SUBJECT
========================================== */


.custom-subject{

    display:none;

}







/* ==========================================
   ATTACHMENT CSS
========================================== */


.attachment-box input[type="file"]{

    display:none;

}



.file-wrapper{

    display:flex;

    align-items:center;

    gap:15px;

}



.file-wrapper span{

    padding:12px 22px;

    border-radius:12px;

    background:#eff6ff;

    color:var(--accent);

    border:1px solid #bfdbfe;

    cursor:pointer;

    font-weight:600;

}





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


.submit-btn{


    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:var(--accent);

    color:white;

    font-size:1.05rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}



.submit-btn:hover{

    background:var(--secondary);

    transform:translateY(-2px);

}







/* ==========================================
   HOVER
========================================== */


.contact-card:hover{

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

    transition:.35s ease;

}







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


@media(max-width:992px){


    .contact-card{

        padding:40px;

    }


    .contact-hero h1{

        font-size:2.4rem;

    }

}



@media(max-width:768px){


    .contact-page{

        padding:40px 15px 60px;

    }


    .contact-card{

        padding:30px 24px;

    }


    .contact-hero h1{

        font-size:2rem;

    }


}



@media(max-width:480px){


    .contact-card{

        padding:24px 18px;

    }


    .contact-hero h1{

        font-size:1.7rem;

    }


}