/*==================================================
MAISON CINNAMONN
CONTACT
==================================================*/


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

.contact-hero {

    background: var(--color-background);

    padding-top: 180px;

}


.contact-heading {

    width: min(900px, 90%);

    margin: auto;

    text-align: center;

}


.contact-heading h1 {

    margin: 20px 0 24px;

}


.contact-heading p {

    font-family: var(--font-serif);

    font-size: 2rem;

    color: var(--color-text);

}


.contact-hero-image {

    width: min(1750px, 95%);

    margin: 120px auto 0;

    overflow: hidden;

}


.contact-hero-image img {

    width: 100%;

    height: 88vh;

    min-height: 720px;

    object-fit: cover;

}


/*==================================================
INTRO
==================================================*/

.contact-intro {

    padding: 220px 0;

    background: var(--color-background);

}


.container-sm {

    width: min(900px, 90%);

    margin: auto;

    text-align: center;

}


.contact-intro h2 {

    max-width: 820px;

    margin: 0 auto;

}


.contact-intro p {

    max-width: 580px;

    margin: 42px auto 0;

}


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

.contact-form-section {

    padding: 240px 0;

    background: var(--color-surface);

}


.contact-wrapper {

    width: min(900px, 90%);

    margin: auto;

}


.contact-form {

    display: flex;

    flex-direction: column;

    gap: 42px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

}


.form-group {

    display: flex;

    flex-direction: column;

}


.form-group label {

    margin-bottom: 14px;

    font-family: var(--font-sans);

    font-size: .72rem;

    letter-spacing: .20em;

    text-transform: uppercase;

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

}


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

    width: 100%;

    padding: 18px 0;

    border: none;

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

    background: transparent;

    font-family: var(--font-sans);

    font-size: 1rem;

    color: var(--color-text);

    outline: none;

    transition: border-color .35s ease;

}


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

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

}


.form-group textarea {

    resize: vertical;

    min-height: 180px;

}


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

    color: #A49A8F;

}


.contact-form .consultation-button {

    align-self: center;

    margin-top: 25px;

    padding: 15px 28px;

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

    background: transparent;

    color: var(--color-text);

    font-family: var(--font-sans);

    font-size: .72rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    cursor: pointer;

    transition: all .35s ease;

}


.contact-form .consultation-button:hover {

    background: var(--color-text);

    color: var(--color-background);

}


/*==================================================
CONTACT DETAILS
==================================================*/

.contact-details {

    padding: 220px 0;

    background: var(--color-background);

}


.contact-details .container-sm {

    width: min(900px, 90%);

    margin: auto;

    text-align: center;

}


.contact-details h2 {

    max-width: 850px;

    margin: 20px auto 35px;

}


.contact-details p {

    max-width: 560px;

    margin: 0 auto 45px;

}


.contact-details a {

    font-family: var(--font-serif);

    font-size: 2rem;

    color: var(--color-text);

    transition: .35s ease;

}


.contact-details a:hover {

    opacity: .55;

}


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

@media (max-width: 1200px) {

    .contact-hero {

        padding-top: 150px;

    }


    .contact-hero-image img {

        height: 70vh;

        min-height: 600px;

    }

}


@media (max-width: 768px) {

    .contact-hero {

        padding-top: 120px;

    }


    .contact-heading {

        width: 92%;

    }


    .contact-heading p {

        font-size: 1.5rem;

    }


    .contact-hero-image {

        margin-top: 70px;

    }


    .contact-hero-image img {

        height: 60vh;

        min-height: 420px;

    }


    .contact-intro,
    .contact-form-section,
    .contact-details {

        padding: 140px 0;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .contact-wrapper {

        width: 92%;

    }


    .form-group textarea {

        min-height: 160px;

    }


    .contact-details a {

        font-size: 1.6rem;

        word-break: break-word;

    }

}