/* =========================================================
   POLLARD CAD CONTACT PAGE SYSTEM
========================================================= */


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

.contact-hero {

    background:
    linear-gradient(
    rgba(15,23,42,.75),
    rgba(15,23,42,.75)
    ),
    url("../images/hero-contact.jpg");

    background-size:cover;

    background-position:center;

}



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


.contact-section {

    padding:80px 20px;

    background:#f8fafc;

}



.contact-wrapper {

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

    align-items:start;

}





/* =========================================================
   CONTACT INFORMATION
========================================================= */


.contact-information {

    padding:20px;

}



.contact-information h2 {

    font-size:36px;

    color:#0f172a;

    margin-bottom:20px;

}



.contact-information p {

    color:#475569;

    font-size:18px;

    line-height:1.8;

}





.contact-detail {

    margin-top:30px;

    padding-left:20px;

    border-left:
    4px solid #2563eb;

}



.contact-detail h3 {

    color:#0f172a;

    font-size:18px;

    margin-bottom:8px;

}



.contact-detail p {

    font-size:16px;

    margin:0;

}





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


.contact-form-card {

    background:white;

    padding:40px;

    border-radius:16px;

    box-shadow:
    0 15px 40px rgba(15,23,42,.12);

}





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


.form-group {

    margin-bottom:22px;

}



.form-group label {

    display:block;

    margin-bottom:8px;

    font-weight:700;

    color:#0f172a;

}



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

    width:100%;

    padding:14px 16px;

    border:

    1px solid #cbd5e1;

    border-radius:8px;

    font-size:15px;

    font-family:inherit;

    background:white;

    transition:
    border .2s ease,
    box-shadow .2s ease;

}



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

    outline:none;

    border-color:#2563eb;

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

}



.form-group textarea {

    resize:vertical;

}





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


.contact-form-card .btn-primary {

    width:100%;

    margin-top:10px;

}





/* =========================================================
   FINAL CTA
========================================================= */


.final-cta {

    background:#0f172a;

}



.final-cta h2 {

    color:white;

}



.final-cta p {

    color:#e2e8f0;

}





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


@media(max-width:900px){


.contact-wrapper {

    grid-template-columns:1fr;

}



.contact-information {

    text-align:center;

}



.contact-detail {

    text-align:left;

}



.contact-form-card {

    padding:30px;

}


}