/* Contact page styles */

/* Import base styles and components */
@import "base-zW0DGQa.css";
@import "components/header-FQ0_1JI.css";
@import "components/hero_short-NUhh4ED.css";
@import "components/text_content-92yg7qr.css";
@import "components/form-x7x4_5J.css";
@import "components/responsive_image-CrAiLWk.css";
@import "components/footer-cxZLcZV.css";

/* ============================================ */
/* FORM VALIDATION STYLES */
/* ============================================ */

.required {
    color: var(--color-red);
    font-weight: bold;
}

.form-error {
    display: none;
    color: var(--color-red);
    font-size: 12px;
    margin-top: 4px;
    font-family: "Grantha Sangam MN";
}

.form-input--error,
.form-select.form-input--error {
    border-color: var(--color-red) !important;
}

/* ============================================ */
/* BASE MOBILE STYLES */
/* ============================================ */

/* Hero */
.contact-hero .hero-short__wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.responsive-image--landscape {
    aspect-ratio:unset;
}

/* Content Section */
.contact-content {
    padding: calc((100vw - 16px) * 522 / 626 + 21px) 16px 120px 16px;
    background-color: var(--color-white);
}

.contact-content__wrapper {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
}

/* Images - Base Styles */
.contact-detail-image {
    flex-shrink: 0;
}

.contact-detail-image--hero {
    display: block;
    position: relative;
    align-self: center;
    width: 100%;
    max-width: 100%;
    height: 0px;
}

.contact-right {
    display: block;
    position: relative;
    align-self: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 32px;
}

.contact-detail-image--hero .contact-detail-image__img,
.contact-right .responsive-image__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

.contact-detail-image__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
}

.contact-image {
    width: 100%;
}

/* Leaflet Map */
.contact-map {
    width: 100%;
    height: 400px;
    border-radius: 24px;
    z-index: 1;
}

.contact-map .leaflet-tile-pane {
    filter: grayscale(100%) brightness(1) contrast(1.5);
}

.contact-map-marker {
    background: transparent;
    border: none;
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: fit-content;

}

.contact-info__item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info__item .text-content__title,
.contact-info__item__title {
    font-family: 'Lora', serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-bordeaux);
}

.contact-info__link {
    font-family: "Grantha Sangam MN";
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-bordeaux);
    text-decoration: none;
    text-wrap: nowrap;
}

.contact-info__link:hover {
    text-decoration: underline;
}

.contact-info__socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* Contact Layout */
.contact-left {
    display: flex;
    flex-direction: column;
    gap: 24px;

    min-width: fit-content;
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-form__submit {
    width: fit-content;
    align-self: flex-start;
}

.contact-form__submit:hover {
    background-color: var(--color-dark-red);
}

.contact-info {
    display: flex;
    flex-direction: row;
    margin-top: 69px;
    justify-content: space-between;
    max-width: 255px;
}

/* ============================================ */
/* BELOW 1024px */
/* ============================================ */

@media (max-width: 1023px) {
    .contact-info {
        display: flex;
        flex-direction: row;
        margin-top: 69px;
        justify-content: space-between;
        max-width: 255px;
    }

    .contact-right.responsive-image--landscape {
        aspect-ratio: unset;
    }

    .contact-right .responsive-image__img {
        border-radius: 14px;
        margin-top: -45px;
    }
}

/* ============================================ */
/* MOBILE - BELOW 600px */
/* ============================================ */

@media (max-width: 599px) {
    .contact-content {
        padding-top: calc((100vw - 16px) * 352 / 529 - 30px);
    }

    .contact-detail-image--hero {
        width: 100%;
        max-width: 100%;
    }

    .contact-right {
        width: 100%;
        max-width: 100%;
    }

    .contact-detail-image--hero .contact-detail-image__img {
        border-radius: 14px;
        margin-top: -30px;
    }

    .contact-right .responsive-image__img {
        border-radius: 14px;
    }
}

/* ============================================ */
/* TABLET - 600px to 736px */
/* ============================================ */

@media (min-width: 600px) and (max-width: 736px) {
    .contact-content {
        padding-top: 235px;
    }

    .contact-hero .hero-short__wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .contact-content__wrapper {
        width: 100%;
    }

    .contact-detail-image--hero {
        width: 340px;
        max-width: 340px;
        flex-shrink: 0;
        margin-left: auto;
        margin-top: -45px;
        align-self: flex-end;
    }

    /* .contact-right {
        width: 340px;
        max-width: 340px;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-end;
    } */

    .contact-detail-image--hero .contact-detail-image__img {
        width: 100%;
        border-radius: 14px;
    }

    .contact-right .responsive-image__img {
        width: 100%;
        border-radius: 14px;
    }
}

/* ============================================ */
/* TABLET - 737px to 840px */
/* ============================================ */

@media (min-width: 737px) and (max-width: 840px) {
    .contact-content {
        padding-top: 160px;
    }

    .contact-hero .hero-short__wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .contact-content__wrapper {
        width: 100%;
    }

    .contact-detail-image--hero {
        width: 340px;
        max-width: 340px;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-end;
    }

    /* .contact-right {
        width: 340px;
        max-width: 340px;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-end;
    } */

    .contact-detail-image--hero .contact-detail-image__img {
        width: 100%;
        border-radius: 14px;
        margin-top: -82px;
    }

    .contact-right .responsive-image__img {
        width: 100%;
        border-radius: 14px;
    }
}

/* ============================================ */
/* TABLET - 841px to 1023px */
/* ============================================ */

@media (min-width: 841px) and (max-width: 1023px) {
    .contact-content {
        padding-top: 120px;
    }

    .contact-hero .hero-short__wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .contact-content__wrapper {
        width: 100%;
    }

    .contact-detail-image--hero {
        width: 340px;
        max-width: 340px;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-end;
    }

    /* .contact-right {
        width: 340px;
        max-width: 340px;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-end;
    } */

    .contact-detail-image--hero .contact-detail-image__img {
        width: 100%;
        border-radius: 14px;
        margin-top: -119px;
    }

    .contact-right .responsive-image__img {
        width: 100%;
        border-radius: 14px;
    }
}

/* ============================================ */
/* DESKTOP - 1024px to 1199px */
/* ============================================ */

@media (min-width: 1024px) and (max-width: 1199px) {
    .contact-hero {
        overflow: visible;
        min-height: 50vh;
    }

    .contact-hero .hero-short__wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }

    .contact-hero .hero-short__content {
        flex: 1;
        max-width: 54%;
        flex-shrink: 0;
        min-width: 0;
    }

    .contact-content {
        padding-top: 111px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .contact-content__wrapper {
        width: 100%;
    }

    .contact-detail-image--hero {
        width: 420px;
        max-width: 420px;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-start;
    }

    .contact-right {
        width: 420px;
        max-width: 420px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .contact-detail-image--hero .contact-detail-image__img {
        width: 100%;
        aspect-ratio: 626 / 522;
    }

    .contact-right .responsive-image__img {
        width: 100%;
    }
}

/* ============================================ */
/* DESKTOP - 1200px+ */
/* ============================================ */

@media (min-width: 1200px) {
    .contact-hero {
        overflow: visible;
        min-height: 50vh;
    }

    .contact-hero .hero-short__wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
    }

    .contact-hero .hero-short__content {
        flex: 1;
        max-width: 54%;
        flex-shrink: 0;
        min-width: 0;
    }

    .contact-content {
        padding: 111px 100px 172px 100px;
    }

    .contact-content__wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
    }

    .contact-main {
        flex: 1;
        min-width: 0;
    }

    .contact-form__submit {
        width: auto;
    }

    .contact-detail-image--hero {
        width: 495px;
        max-width: 495px;
        flex-shrink: 0;
        margin-left: auto;
        align-self: flex-start;
    }

    .contact-right {
        width: 495px;
        max-width: 495px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .contact-detail-image--hero .contact-detail-image__img {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 626 / 522;
        object-fit: cover;
    }

    .contact-right .responsive-image__img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .contact-form {
        width: 400px;
        flex-shrink: 0;
    }
}

/* ============================================ */
/* DESKTOP - 1400px+ */
/* ============================================ */

@media (min-width: 1400px) {
    .contact-content__wrapper {
        align-items: flex-end;
    }

    .contact-left {
        display: flex;
        flex-direction: row-reverse;
        gap: 40px;
        max-width: 495px;
    }
    

    .contact-info {
        flex: 0 0 150px;
        margin-top: 0px;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 32px;
        min-width: fit-content;
        justify-content: flex-start;
    }
    
    .contact-form {
        width: 387px;
        flex-shrink: 0;
    }

    .contact-right {
        margin-top: 0;
    }
}

/* ============================================ */
/* DESKTOP - 1600px+ */
/* ============================================ */

@media (min-width: 1600px) {
    .contact-content {
        padding-left: 192px;
        padding-right: 192px;
    }

    .contact-left {
        display: flex;
        flex-direction: row-reverse;
        gap: 98px;
        max-width: 495px;
    }
}

/* ============================================ */
/* DESKTOP - 1920px+ */
/* ============================================ */
@media (min-width: 1770px) {
    .contact-form {
        width: 491px;
    }
}
@media (min-width: 1920px) {
    .contact-content {
        padding-left: calc((100vw - 1550px) / 2);
        padding-right: calc((100vw - 1550px) / 2);
    }


}