/* =========================================================
   ADMISSIONMANTRA
   CONTACT US PAGE

   IMPORTANT:
   All typography/colors/buttons/shadows/radius
   use master values from style.css
========================================================= */


/* =========================================================
   01. CONTACT MAIN SECTION
========================================================= */

.am-contact {
    position: relative;

    padding:
        var(--am-section-space)
        0;

    overflow: hidden;

    background:
        var(--am-gradient-soft-blue);
}


.am-contact::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -100px;

    background:
        var(--am-bg-blue);

    border-radius:
        var(--am-radius-circle);
}


.am-contact::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -180px;
    bottom: -100px;

    background:
        var(--am-accent-soft);

    border-radius:
        var(--am-radius-circle);
}


/* =========================================================
   GRID
========================================================= */

.am-contact__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    align-items: center;

    gap:
        var(--am-space-12);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.am-contact__content {
    max-width:
        560px;
}


/* =========================================================
   EYEBROW
========================================================= */

.am-contact__eyebrow {
    display: flex;
    align-items: center;

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

    margin-bottom:
        var(--am-space-5);

    color:
        var(--am-secondary);

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

    font-size:
        var(--am-fs-sm);

    font-weight:
        var(--am-fw-extrabold);

    line-height:
        var(--am-lh-small);

    letter-spacing:
        var(--am-ls-eyebrow);

    text-transform:
        uppercase;
}


.am-contact__eyebrow::after {
    content: "";

    width:
        var(--am-space-8);

    height:
        2px;

    background:
        var(--am-accent);

    border-radius:
        var(--am-radius-pill);
}


/* =========================================================
   TITLE
========================================================= */

.am-contact__title {
    max-width:
        560px;

    margin:
        0 0
        var(--am-space-5);

    color:
        var(--am-primary);

    font-family:
        var(--am-font-heading);

    font-size:
        var(--am-fs-h1);

    font-weight:
        var(--am-fw-extrabold);

    line-height:
        var(--am-lh-tight);

    letter-spacing:
        var(--am-ls-heading);
}


.am-contact__title span {
    display: block;

    color:
        var(--am-accent);
}


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

.am-contact__intro {
    max-width:
        var(--am-text-width);

    margin:
        0 0
        var(--am-space-8);

    color:
        var(--am-text);

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

    font-size:
        var(--am-fs-base);

    font-weight:
        var(--am-fw-regular);

    line-height:
        var(--am-lh-body);
}


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

.am-contact__details {
    display: flex;
    flex-direction: column;

    gap:
        var(--am-space-6);
}


/* =========================================================
   CONTACT INFO
========================================================= */

.am-contact-info {
    display: grid;

    grid-template-columns:
        auto 1fr;

    align-items: center;

    gap:
        var(--am-space-4);

    color:
        var(--am-text);

    text-decoration:
        none;
}


.am-contact-info:hover {
    color:
        var(--am-text);
}


/* ICON */

.am-contact-info__icon {
    width:
        var(--am-icon-lg);

    height:
        var(--am-icon-lg);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color:
        var(--am-secondary);

    background:
        var(--am-secondary-light);

    border-radius:
        var(--am-radius-circle);
}


.am-contact-info__icon svg {
    width:
        var(--am-icon-sm);

    height:
        var(--am-icon-sm);

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.am-contact-info__icon--orange {
    color:
        var(--am-accent);

    background:
        var(--am-accent-soft);
}


.am-contact-info__icon--green {
    color:
        var(--am-success);

    background:
        var(--am-success-soft);
}


/* TEXT */

.am-contact-info span {
    display: block;

    margin-bottom:
        var(--am-space-1);

    color:
        var(--am-heading);

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

    font-size:
        var(--am-fs-sm);

    font-weight:
        var(--am-fw-semibold);
}


.am-contact-info strong {
    display: block;

    color:
        var(--am-primary);

    font-family:
        var(--am-font-heading);

    font-size:
        var(--am-fs-lg);

    font-weight:
        var(--am-fw-bold);

    line-height:
        var(--am-lh-title);
}


.am-contact-info small {
    display: block;

    margin-top:
        var(--am-space-1);

    color:
        var(--am-text);

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

    font-size:
        var(--am-fs-sm);

    line-height:
        var(--am-lh-small);
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.am-contact-form-wrap {
    padding:
        var(--am-space-8);

    background:
        var(--am-white);

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

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

    box-shadow:
        var(--am-shadow-md);
}


/* =========================================================
   FORM HEADING
========================================================= */

.am-contact-form__heading {
    margin-bottom:
        var(--am-space-6);
}


.am-contact-form__heading h2 {
    margin:
        0 0
        var(--am-space-2);

    color:
        var(--am-primary);

    font-family:
        var(--am-font-heading);

    font-size:
        var(--am-fs-h3);

    font-weight:
        var(--am-fw-extrabold);

    line-height:
        var(--am-lh-heading);
}


.am-contact-form__heading p {
    margin: 0;

    color:
        var(--am-text);

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

    font-size:
        var(--am-fs-base);

    line-height:
        var(--am-lh-body);
}


/* =========================================================
   FORM ROW
========================================================= */

.am-contact-form__row {
    display: grid;

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

    gap:
        var(--am-space-4);
}


/* =========================================================
   FIELD
========================================================= */

.am-contact-form__field {
    margin-bottom:
        var(--am-space-4);
}


.am-contact-form__field label {
    display: block;

    margin-bottom:
        var(--am-space-2);

    color:
        var(--am-heading);

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

    font-size:
        var(--am-fs-sm);

    font-weight:
        var(--am-fw-semibold);
}


.am-contact-form__field label span {
    color:
        var(--am-error);
}


/* INPUTS */

.am-contact-form input,
.am-contact-form select,
.am-contact-form textarea {
    width: 100%;

    padding:
        var(--am-input-padding);

    color:
        var(--am-heading);

    background:
        var(--am-input-bg);

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

    border-radius:
        var(--am-input-radius);

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

    font-size:
        var(--am-fs-base);

    outline: none;

    transition:
        border-color var(--am-transition),
        box-shadow var(--am-transition);
}


.am-contact-form input,
.am-contact-form select {
    min-height:
        var(--am-input-height);
}


.am-contact-form textarea {
    resize:
        vertical;

    min-height:
        150px;
}


.am-contact-form input:focus,
.am-contact-form select:focus,
.am-contact-form textarea:focus {
    border-color:
        var(--am-secondary);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--am-secondary) 10%,
            transparent
        );
}


/* =========================================================
   SUBMIT
========================================================= */

.am-contact-form__submit {
    width: 100%;

    margin-top:
        var(--am-space-1);
}


/* =========================================================
   PRIVACY
========================================================= */

.am-contact-form__privacy {
    display: flex;
    align-items: center;
    justify-content: center;

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

    margin-top:
        var(--am-space-4);

    color:
        var(--am-muted);

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

    font-size:
        var(--am-fs-xs);

    line-height:
        var(--am-lh-small);

    text-align:
        center;
}


/* =========================================================
   FORM STATUS
========================================================= */

.am-contact-message {
    margin-bottom:
        var(--am-space-5);

    padding:
        var(--am-space-4);

    border-radius:
        var(--am-radius-md);

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

    font-size:
        var(--am-fs-sm);

    font-weight:
        var(--am-fw-semibold);

    line-height:
        var(--am-lh-small);
}


.am-contact-message--success {
    color:
        var(--am-success);

    background:
        var(--am-success-soft);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--am-success) 20%,
            transparent
        );
}


.am-contact-message--error {
    color:
        var(--am-error);

    background:
        var(--am-error-soft);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--am-error) 20%,
            transparent
        );
}



/* =========================================================
   02. FAQ SECTION
========================================================= */

.am-contact-faq {
    padding:
        var(--am-section-space)
        0;

    background:
        var(--am-bg-soft);
}


/* =========================================================
   FAQ GRID
========================================================= */

.am-contact-faq__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--am-space-5);
}


/* =========================================================
   FAQ ITEM
========================================================= */

.am-contact-faq__item {
    display: grid;

    grid-template-columns:
        auto 1fr;

    align-items:
        flex-start;

    gap:
        var(--am-space-4);

    padding:
        var(--am-space-6);

    background:
        var(--am-white);

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

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

    box-shadow:
        var(--am-shadow-xs);

    transition:
        transform var(--am-transition),
        box-shadow var(--am-transition);
}


.am-contact-faq__item:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--am-shadow-md);
}


/* =========================================================
   FAQ ICON
========================================================= */

.am-contact-faq__icon {
    width:
        var(--am-icon-lg);

    height:
        var(--am-icon-lg);

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink: 0;

    color:
        var(--am-secondary);

    background:
        var(--am-secondary-light);

    border-radius:
        var(--am-radius-circle);
}


.am-contact-faq__icon svg {
    width:
        var(--am-icon-sm);

    height:
        var(--am-icon-sm);

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.am-contact-faq__icon--orange {
    color:
        var(--am-accent);

    background:
        var(--am-accent-soft);
}


.am-contact-faq__icon--green {
    color:
        var(--am-success);

    background:
        var(--am-success-soft);
}


/* =========================================================
   FAQ CONTENT
========================================================= */

.am-contact-faq__item h3 {
    margin:
        0 0
        var(--am-space-2);

    color:
        var(--am-primary);

    font-family:
        var(--am-font-heading);

    font-size:
        var(--am-fs-lg);

    font-weight:
        var(--am-fw-bold);

    line-height:
        var(--am-lh-title);
}


.am-contact-faq__item p {
    margin: 0;

    color:
        var(--am-text);

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

    font-size:
        var(--am-fs-sm);

    font-weight:
        var(--am-fw-regular);

    line-height:
        var(--am-lh-body);
}


/* =========================================================
   FAQ BOTTOM
========================================================= */

.am-contact-faq__bottom {
    max-width:
        var(--am-container-small);

    margin:
        var(--am-space-9)
        auto
        0;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        var(--am-space-5);
}


.am-contact-faq__bottom span {
    height:
        1px;

    background:
        var(--am-border-dark);
}


.am-contact-faq__bottom strong {
    color:
        var(--am-secondary);

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

    font-size:
        var(--am-fs-xs);

    font-weight:
        var(--am-fw-bold);

    letter-spacing:
        var(--am-ls-eyebrow);

    text-transform:
        uppercase;
}



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

@media (max-width: 1000px) {

    .am-contact__grid {
        grid-template-columns:
            1fr;

        gap:
            var(--am-space-9);
    }


    .am-contact__content {
        max-width:
            var(--am-content-width);
    }


    .am-contact-faq__grid {
        grid-template-columns:
            1fr;
    }

}



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

@media (max-width: 700px) {

    .am-contact {
        padding:
            var(--am-section-space-mobile)
            0;
    }


    .am-contact__title {
        font-size:
            var(--am-fs-h1);
    }


    .am-contact-form-wrap {
        padding:
            var(--am-space-5);
    }


    .am-contact-form__row {
        grid-template-columns:
            1fr;
    }


    .am-contact-faq {
        padding:
            var(--am-section-space-mobile)
            0;
    }


    .am-contact-faq__item {
        padding:
            var(--am-space-5);
    }


    .am-contact-faq__bottom {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .am-contact-faq__bottom span {
        display: none;
    }

}