/* =========================
   Contact Section
========================== */

.contact{

    background:var(--clr-bg-light);

}

.contact__grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:var(--space-3xl);

    align-items:start;

}

/* =========================
   Form
========================== */

.contact__form-wrapper{

    display:flex;

    flex-direction:column;

    gap:var(--space-2xl);

    padding:2rem;
    background:#fff;
    border-radius:var(--radius-card);
    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:var(--space-lg);

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}

.form-group label{

    font-size:.9rem;

    font-weight:600;

    color:var(--clr-heading);

}

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

    width:100%;

    padding:1rem 1.2rem;

    border:1px solid rgba(0,0,0,.08);

    border-radius:var(--radius-lg);

    background:var(--clr-white);

    color:var(--clr-text);

    font:inherit;

    transition:.3s ease;

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}

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

    color:var(--clr-text-light);

}

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

    outline:none;

    border-color:var(--clr-accent);

    box-shadow:0 0 0 3px rgba(22,85,127,.12);

}

.contact-form .btn{

    width:max-content;

    margin-top:var(--space-sm);

}

/* =========================
   Contact Information
========================== */

.contact__info{

    display:flex;

    flex-direction:column;

    gap:var(--space-xl);

}

.contact-card{

    background:var(--clr-white);

    border-radius:var(--radius-xl);

    padding:2rem;

    box-shadow:0 10px 40px rgba(0,0,0,.06);

}

.contact-card h3{

    margin-bottom:1rem;

}

.contact-card p{

    color:var(--clr-text-light);

}

/* =========================
   Contact List
========================== */

.contact-list{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

    list-style:none;

    padding:0;

    margin:0;

}

.contact-list li{

    display:flex;

    align-items:flex-start;

    gap:1rem;

}

.contact-list li svg{

    width:22px;

    height:22px;

    color:var(--clr-accent);

    stroke:var(--clr-accent);

    flex-shrink:0;

    margin-top:2px;

}

.contact-list strong{

    display:block;

    margin-bottom:.35rem;

}

.contact-list a{

    color:var(--clr-text-light);

    text-decoration:none;

    transition:.3s;

}

.contact-list a:hover{

    color:var(--clr-accent);

}

/* =========================
   Meta Information
========================== */

.contact-meta{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.contact-meta > div{

    display:flex;

    align-items:flex-start;

    gap:1rem;

}

.contact-meta svg{

    width:22px;

    height:22px;

    color:var(--clr-accent);

    stroke:var(--clr-accent);

    flex-shrink:0;

    margin-top:2px;

}

.contact-meta strong{

    display:block;

    margin-bottom:.4rem;

}

.contact-meta p{

    margin:0;

    color:var(--clr-text-light);

    line-height:1.7;

}

/* =========================
   Hover Effects
========================== */

.contact-card{

    transition:.35s ease;

}

.contact-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 50px rgba(0,0,0,.08);

}

.contact__form-wrapper .section-header{

    text-align:left;

    align-items:flex-start;
    margin-inline:0;
    max-width: 25vw;
    margin-bottom: 0;

}

.contact-list li i{

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:rgba(255,132,0,.10);

    color:var(--clr-accent);

    flex-shrink:0;

}

/* =========================
   Responsive
========================== */

@media (max-width:992px){

    .contact__grid{

        grid-template-columns:1fr;

    }

    .contact-form .btn{

        width:100%;

        justify-content:center;

    }

    .contact__form-wrapper .section-header{

    text-align:left;

    align-items:flex-start;
    margin-inline:0;
    max-width: 100%;

}

}