/* Hero */

.contact-hero{

    min-height:70vh;

    display:flex;
    align-items:flex-end;

    padding:12rem 0 6rem;

}

.contact-hero .container{

    max-width:900px;

}

.contact-hero .section-tag{

    display:inline-block;

    margin-bottom:2rem;

}

.contact-hero h1{

    margin-bottom:2rem;

}

.contact-hero .lead{

    max-width:620px;

    font-size:1.125rem;

}


/* Contact */

.contact{

    padding-top:0;

}

.contact-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:6rem;

    align-items:start;

}

.contact-info{

    position:sticky;

    top:120px;

}

.contact-info h2{

    margin:1rem 0 1.5rem;

}

.contact-info>p{

    margin-bottom:3rem;

    max-width:340px;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.contact-item{

    display:flex;

    flex-direction:column;

    gap:.5rem;

}

.contact-item span{

    font-size:.8rem;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--color-muted);

}

.contact-item a{

    font-size:1.1rem;

    color:var(--color-text);

    transition:var(--transition);

}

.contact-item a:hover{

    color:var(--color-accent);

}

.contact-item p{

    color:var(--color-text);

}


/* Form */

.contact-form{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2rem;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:.8rem;

}

.form-group.full{

    grid-column:1/-1;

}

.form-group label{

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:var(--color-muted);

}

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

    width:100%;

    padding:1.2rem 1.4rem;

    font:inherit;

    color:var(--color-text);

    background:transparent;

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

    outline:none;

    transition:var(--transition);

}

.form-group textarea{

    resize:vertical;

    min-height:220px;

}

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

    color:var(--color-muted);

}

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

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

}

.contact-form option{

    color:var(--color-text);

}
.contact-form .primary-btn{

    grid-column:1/-1;

    justify-content:center;

    margin-top:1rem;

}

.form-group select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;

    color:var(--color-text);

    background:
    linear-gradient(45deg,transparent 50%,var(--color-muted) 50%),
    linear-gradient(135deg,var(--color-muted) 50%,transparent 50%);

    background-position:
    calc(100% - 24px) calc(50% - 2px),
    calc(100% - 18px) calc(50% - 2px);

    background-size:6px 6px;

    background-repeat:no-repeat;

    padding-right:3.5rem;

}

.contact-form option{

    background:var(--color-bg);

    color:var(--color-text);

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

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

    box-shadow:
    0 0 0 4px rgba(75,123,255,.08);

}
input.error,
textarea.error,
select.error{

    border-color:#ff5c5c;

}
/* FAQ */

.faq{

    padding-top:2rem;

}

.section-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:4rem;

}

.faq-list{

    display:grid;

    gap:2rem;

}

.faq-item{

    padding:2rem 0;

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

}

.faq-item:last-child{

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

}

.faq-item h3{

    margin-bottom:1rem;

}

.faq-item p{

    max-width:700px;

}


/* CTA */

.contact-cta{

    text-align:center;

}

.contact-cta .container{

    max-width:900px;

}

.contact-cta h2{

    margin-bottom:2.5rem;

}

.contact-cta .primary-btn{

    display:inline-flex;

}

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

    transition:var(--transition);

}

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

    border-color:var(--color-text);

}

.faq-item{

    transition:var(--transition);

}

.faq-item:hover{

    padding-left:1rem;

}

/* 1200px */

@media (max-width:1200px){

    .contact-grid{

        grid-template-columns:340px 1fr;

        gap:4rem;

    }

    .contact-hero{

        padding:10rem 0 5rem;

    }

    .contact-hero .container{

        max-width:760px;

    }

    .contact-info>p{

        max-width:100%;

    }

    .contact-form{

        gap:1.5rem;

    }

    .faq-item p{

        max-width:100%;

    }

}

/* 768px */

@media (max-width:768px){

    .contact-hero{

        min-height:auto;

        padding:8rem 0 4rem;

    }

    .contact-hero h1{

        font-size:clamp(2.8rem,12vw,4.5rem);

    }

    .contact-hero .lead{

        font-size:1rem;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .contact-info{

        position:static;

    }

    .contact-info h2{

        margin:.75rem 0 1rem;

    }

    .contact-info>p{

        margin-bottom:2rem;

    }

    .contact-list{

        gap:1.5rem;

    }

    .contact-form{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .form-group.full{

        grid-column:auto;

    }

    .form-group textarea{

        min-height:180px;

    }

    .contact-form .primary-btn{

        width:100%;

    }

    .section-heading{

        flex-direction:column;

        align-items:flex-start;

        gap:1rem;

        margin-bottom:3rem;

    }

    .faq-item{

        padding:1.5rem 0;

    }

    .faq-item:hover{

        padding-left:0;

    }

    .contact-cta{

        text-align:left;

    }

    .contact-cta h2{

        margin-bottom:2rem;

    }

    .contact-cta .primary-btn{

        width:100%;

        justify-content:center;

    }

}

/* 480px */

@media (max-width:480px){

    .contact-hero{

        padding:7rem 0 3rem;

    }

    .contact-item a{

        font-size:1rem;

        word-break:break-word;

    }

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

        padding:1rem 1.1rem;

    }

    .contact-form{

        gap:1.25rem;

    }

}