/* =========================================================
   CONTACT PAGE
========================================================= */


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

.contact-hero {

    min-height: 72vh;

    display: flex;

    align-items: flex-end;

    background: var(--cream);

    position: relative;

    overflow: hidden;

}
/* =========================================================
   CONTACT BREADCRUMB
========================================================= */

.contact-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 35px;

    font-family: var(--display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--dark);
}

.contact-breadcrumb a {
    color: var(--dark);
    text-decoration: none;
    opacity: .65;
    transition: opacity .3s ease;
}

.contact-breadcrumb a:hover {
    opacity: 1;
}

.contact-breadcrumb span:last-child {
    color: var(--gold);
}

.contact-breadcrumb span:nth-child(2) {
    color: var(--gold);
    opacity: .65;
}


/* Mobile spacing */

@media (max-width: 650px) {
    .contact-breadcrumb {
        margin-bottom: 25px;
        font-size: 8px;
    }
}

.contact-hero::after {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

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

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

    pointer-events: none;

}


.contact-hero-inner {

    width: 100%;

    max-width: 1500px;

    /* margin: 0 auto; */

    padding:
        150px
        60px
        95px;

}


.contact-hero .section-number {

    color: var(--dark);

    margin-bottom: 30px;

}


.contact-hero h1 {

    max-width: 1050px;

    margin: 0;

    color: var(--dark);

    font-family: var(--display);

    font-size: clamp(58px, 7vw, 105px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -.055em;

}


.contact-hero h1 em {

    display: block;

    color: var(--gold);

    font-family: var(--serif);

    font-weight: 400;

    letter-spacing: -.04em;

}


.contact-hero p {

    max-width: 530px;

    margin: 38px 0 0;

    color: rgba(69, 75, 54, .68);

    font-family: var(--display);

    font-size: 13px;

    line-height: 1.9;

}


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

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

.contact-details {

    background: var(--white);

    padding:
        130px
        60px
        140px;

}


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

.contact-details-heading {

    max-width: 1500px;

    margin:
        0 auto
        75px;

}


.contact-details-heading .section-number {

    margin-bottom: 28px;

}


.contact-heading-row {

    display: grid;

    grid-template-columns:
        1.35fr .65fr;

    align-items: end;

    gap: 80px;

}


.contact-heading-row h2 {

    margin: 0;

    color: var(--dark);

    font-family: var(--display);

    font-size:
        clamp(
            52px,
            6vw,
            90px
        );

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.065em;

}


.contact-heading-row h2 em {

    color: var(--gold);

    font-family: var(--serif);

    font-weight: 400;

    letter-spacing: -.045em;

}


.contact-heading-row p {

    max-width: 390px;

    margin: 0 0 5px;

    color:
        rgba(
            69,
            75,
            54,
            .60
        );

    font-family: var(--display);

    font-size: 11px;

    line-height: 1.9;

}


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

.contact-grid {

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

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

    gap: 0;

}


/* =========================================================
   CONTACT BOX
========================================================= */

.contact-box {

    position: relative;

    min-height: 430px;

    padding:
        35px
        45px;

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

    background: var(--white);

    color: var(--dark);

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

    transition:
        background-color .6s cubic-bezier(.16,1,.3,1),
        color .6s cubic-bezier(.16,1,.3,1),
        border-color .6s cubic-bezier(.16,1,.3,1);

}


/* =========================================================
   TOP ROW
========================================================= */

.contact-box-top {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   SMALL ICON
========================================================= */

.contact-box-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        currentColor;

    border-radius: 50%;

    font-size: 14px;

    transition:
        background-color .5s ease,
        color .5s ease,
        transform .5s cubic-bezier(.16,1,.3,1);

}


/* =========================================================
   LABEL
========================================================= */

.contact-box-label {

    font-family: var(--display);

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .15em;

}


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

.contact-box-content {

    position: relative;

    z-index: 3;

    margin-top: 90px;

}


.contact-box-content h3 {

    margin: 0;

    color: currentColor;

    font-family: var(--display);

    font-size:
        clamp(
            30px,
            4vw,
            47px
        );

    font-weight: 500;

    line-height: .84;

    letter-spacing: -.065em;

    text-transform: uppercase;

    transition:
        color .5s ease;

}


.contact-box-content p {

    position: relative;

    z-index: 3;

    max-width: 300px;

    margin-top: 35px;

    color:
        rgba(
            69,
            75,
            54,
            .55
        );

    font-family: var(--display);

    font-size: 13px;

    line-height: 1.7;

    transition:
        color .5s ease;

}
.contact-box-content h3 a {

    color: inherit;

    text-decoration: none;

    transition: opacity .3s ease;

}

.contact-box-content h3 a:hover {

    opacity: .65;

}

/* =========================================================
   LARGE DECORATIVE ICON
========================================================= */

.contact-box-decor {

    position: absolute;

    right: -35px;

    bottom: -45px;

    width: 250px;

    height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        currentColor;

    border-radius: 50%;

    opacity: .13;

    font-size: 100px;

    transform:
        rotate(-12deg);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        opacity .5s ease;

    pointer-events: none;

}


/* =========================================================
   INNER CIRCLE
========================================================= */

.contact-box-decor::before {

    content: "";

    position: absolute;

    width: 160px;

    height: 160px;

    border:
        1px solid
        currentColor;

    border-radius: 50%;

}


/* =========================================================
   HOVER
========================================================= */

.contact-box:hover {

    background: var(--gold);

    color: var(--dark);

    border-color: var(--gold);

}


/* =========================================================
   HOVER ICON
========================================================= */

.contact-box:hover .contact-box-icon {

    background: var(--dark);

    color: var(--gold);

    transform:
        rotate(8deg);

}


/* =========================================================
   HOVER DESCRIPTION
========================================================= */

.contact-box:hover .contact-box-content p {

    color: var(--dark);

}


/* =========================================================
   HOVER DECOR
========================================================= */

.contact-box:hover .contact-box-decor {

    opacity: .22;

    transform:
        rotate(12deg)
        scale(1.08);

}


/* =========================================================
   DIFFERENT DECORATIVE POSITIONS
========================================================= */

.contact-phone .contact-box-decor {

    right: -45px;

    bottom: -55px;

}


.contact-email .contact-box-decor {

    right: -65px;

    bottom: -65px;

    transform:
        rotate(18deg);

}


.contact-location .contact-box-decor {

    right: -40px;

    bottom: -60px;

    transform:
        rotate(-20deg);

}


/* =========================================================
   HOVER — RESET ROTATIONS
========================================================= */

.contact-phone:hover .contact-box-decor {

    transform:
        rotate(5deg)
        scale(1.08);

}


.contact-email:hover .contact-box-decor {

    transform:
        rotate(-5deg)
        scale(1.08);

}


.contact-location:hover .contact-box-decor {

    transform:
        rotate(5deg)
        scale(1.08);

}


/* =========================================================
   WHATSAPP
========================================================= */

.contact-whatsapp {
    position:relative;
    min-height:430px;
    margin:28px auto 0;
    padding:35px 45px;
    background:var(--white);
    color:var(--dark);
    overflow:hidden;
    border:1px solid var(--line);
    transition:
        background-color .6s cubic-bezier(.16,1,.3,1),
        color .6s cubic-bezier(.16,1,.3,1),
        border-color .6s cubic-bezier(.16,1,.3,1);
}

.contact-whatsapp-icon {
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid currentColor;
    border-radius:50%;
    color:var(--dark);
    font-size:16px;
    transition:
        background-color .5s ease,
        color .5s ease,
        transform .5s cubic-bezier(.16,1,.3,1);
}

.contact-whatsapp-label {
    color:var(--dark);
    font-family:var(--display);
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.contact-whatsapp-content h3 {
    margin:0;
    color:var(--dark);
    font-family:var(--display);
    font-size:clamp(40px,4vw,67px);
    font-weight:500;
    line-height:.84;
    letter-spacing:-.065em;
    text-transform:uppercase;
    transition:color .5s ease;
}

.contact-whatsapp-content p {
    max-width:300px;
    margin-top:35px;
    color:rgba(69,75,54,.55);
    font-family:var(--display);
    font-size:10px;
    line-height:1.7;
    transition:color .5s ease;
}

.contact-whatsapp-link {
    position:absolute;
    left:45px;
    bottom:35px;
    z-index:4;

    display:inline-flex;
    align-items:center;
    gap:22px;

    padding:15px 20px;

    color:var(--dark);
    background:var(--cream);

    text-decoration:none;

    font-family:var(--display);
    font-size:8px;
    font-weight:700;
    letter-spacing:.13em;

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease;
}

.contact-whatsapp-link:hover {
    background:var(--dark);
    color:var(--cream);
    transform:translateY(-3px);
}

.contact-whatsapp-decor {
    position:absolute;
    right:-45px;
    bottom:-55px;
    width:250px;
    height:250px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid currentColor;
    border-radius:50%;

    color:var(--dark);
    opacity:.13;

    font-size:100px;
    transform:rotate(-12deg);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        opacity .5s ease;

    pointer-events:none;
}

.contact-whatsapp-decor::before {
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    border:1px solid currentColor;
    border-radius:50%;
}


/* SAME HOVER COMBINATION AS EMAIL CARD */

.contact-whatsapp:hover {
    background:var(--gold);
    color:var(--dark);
    border-color:var(--gold);
}

.contact-whatsapp:hover .contact-whatsapp-icon {
    background:var(--dark);
    color:var(--gold);
    transform:rotate(8deg);
}

.contact-whatsapp:hover .contact-whatsapp-content h3 {
    color:var(--dark);
}

.contact-whatsapp:hover .contact-whatsapp-content p {
    color:var(--dark);
}

.contact-whatsapp:hover .contact-whatsapp-decor {
    opacity:.22;
    transform:rotate(8deg) scale(1.08);
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .contact-details {

        padding-left: 45px;

        padding-right: 45px;

    }


    .contact-heading-row {

        gap: 50px;

    }


    .contact-box {

        padding:
            30px;

    }

}


@media (max-width: 950px) {

    .contact-details {

        padding:
            95px
            35px
            105px;

    }


    .contact-heading-row {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .contact-heading-row p {

        max-width: 500px;

    }


    .contact-grid {

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

    }


    .contact-location {

        grid-column:
            1 / -1;

    }


    .contact-whatsapp {

        padding:
            25px;

    }

}


@media (max-width: 650px) {

    .contact-details {

        padding:
            75px
            24px
            85px;

    }


    .contact-details-heading {

        margin-bottom: 50px;

    }


    .contact-heading-row h2 {

        font-size: 46px;

    }


    .contact-heading-row p {

        font-size: 10px;

        line-height: 1.8;

    }


    .contact-grid {

        grid-template-columns: 1fr;

    }


    .contact-box {

        min-height: 360px;

        padding:
            30px;

    }


    .contact-location {

        grid-column: auto;

    }


    .contact-box-content {

        margin-top: 75px;

    }


    .contact-box-content h3 {

        font-size: 43px;

    }


    .contact-box-decor {

        width: 220px;

        height: 220px;

        font-size: 85px;

    }


    .contact-whatsapp {

        min-height: auto;

        padding:
            25px 22px;

        flex-direction: column;

        align-items: stretch;

        gap: 25px;

    }


    .contact-whatsapp-link {

        justify-content: space-between;

    }

}


@media (max-width: 450px) {

    .contact-heading-row h2 {

        font-size: 41px;

    }


    .contact-box {

        min-height: 340px;

    }


    .contact-box-content h3 {

        font-size: 24px;

    }

}

/* =========================================================
   MAP
========================================================= */

.contact-map-section {

    background: var(--cream);

    padding:
        120px
        60px
        0;

}


.contact-map-heading {

    max-width: 1500px;

    margin: 0 auto 55px;

}


.contact-map-heading .section-number {

    margin-bottom: 25px;

}


.contact-map-heading h2 {

    margin: 0;

    color: var(--dark);

    font-family: var(--display);

    font-size: clamp(50px, 5vw, 78px);

    font-weight: 400;

    line-height: .95;

    letter-spacing: -.05em;

}


.contact-map-heading h2 em {

    color: var(--gold);

    font-family: var(--serif);

    font-weight: 400;

}


.contact-map-heading p {

    margin: 25px 0 0;

    color: rgba(69,75,54,.62);

    font-family: var(--display);

    font-size: 11px;

    line-height: 1.8;

}


.contact-map {

    width: 100%;

    height: 520px;

    overflow: hidden;

}


.contact-map iframe {

    display: block;

    width: 100%;

    height: 100%;

    filter:
        grayscale(.9)
        contrast(.95)
        sepia(.08);

}


/* =========================================================
   FINAL CTA
========================================================= */

.contact-final {

    /* background: var(--dark); */
    background-color: var(--white);

    color: var(--dark);

    padding:
        125px
        60px
        135px;

    text-align: center;

}


.contact-final-inner {

    max-width: 1000px;

    margin: 0 auto;

}


.contact-final .section-number {

    /* color: rgba(236,228,213,.55); */
    color: var(--dark);

    margin-bottom: 30px;

}


.contact-final h2 {

    margin: 0;

    font-family: var(--display);

    font-size: clamp(52px, 6vw, 88px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -.055em;

}


.contact-final h2 em {

    display: block;

    color: var(--gold);

    font-family: var(--serif);

    font-weight: 400;

}


.contact-final-button {

    display: inline-flex;

    align-items: center;

    gap: 35px;

    margin-top: 48px;

    padding: 18px 25px;

    color: var(--dark);

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

    text-decoration: none;

    font-family: var(--display);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    transition:
        background .35s ease,
        color .35s ease;

}


.contact-final-button:hover {

    background: var(--cream);

    color: var(--dark);

}


.contact-final-button span {

    color: var(--gold);

    font-size: 15px;

}


/* =========================================================
   REVEAL
========================================================= */

.reveal-contact {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.65,.25,1);

}


.reveal-contact.visible {

    opacity: 1;

    transform: translateY(0);

}


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

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

@media (max-width: 1200px) {

    .contact-hero-inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    .contact-details {
        padding-left: 45px;
        padding-right: 45px;
    }

    .contact-map-section {
        padding-left: 45px;
        padding-right: 45px;
    }

    .contact-final {
        padding-left: 45px;
        padding-right: 45px;
    }

}


@media (max-width: 950px) {

    .contact-hero {
        min-height: 70vh;
    }

    .contact-hero-inner {
        padding: 105px 35px 70px;
    }

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

    .contact-card {
        min-height: 300px;
    }

    .contact-card:last-child {
        grid-column: 1 / -1;
    }

    .contact-map {
        height: 450px;
    }

    .contact-details {
        padding: 90px 35px 100px;
    }

    .contact-map-section {
        padding: 90px 35px 0;
    }

    .contact-final {
        padding: 100px 35px 110px;
    }

}


@media (max-width: 650px) {

    .contact-hero {
        min-height: auto;
        height: auto;
        display: block;
        padding-top: 0;
    }

    .contact-hero-inner {
        width: 100%;
        max-width: 1500px;
        margin: 0 auto;
        padding: 95px 24px 55px;
    }

    .contact-hero .section-number {
        margin-bottom: 18px;
    }

    .contact-hero h1 {
        font-size: 50px;
        line-height: .92;
    }

    .contact-hero p {
        margin-top: 20px;
        font-size: 11px;
        line-height: 1.8;
    }

}

    .contact-details {
        padding: 75px 24px 85px;
    }

    .contact-details-heading {
        margin-bottom: 45px;
    }

    .contact-details-heading h2 {
        font-size: 45px;
    }

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

    .contact-card {
        min-height: 270px;
        padding: 25px;
    }

    .contact-card:last-child {
        grid-column: auto;
    }

    .contact-card h3 {
        font-size: 23px;
    }


    .whatsapp-button {
        min-height: 85px;
        padding: 20px 22px;
        grid-template-columns: 1fr auto;
        gap: 8px 20px;
    }

    .whatsapp-label {
        grid-column: 1 / -1;
    }

    .whatsapp-button strong {
        font-size: 16px;
    }


    .contact-map-section {
        padding: 75px 24px 0;
    }

    .contact-map-heading {
        margin-bottom: 40px;
    }

    .contact-map-heading h2 {
        font-size: 45px;
    }

    .contact-map {
        height: 390px;
    }


    .contact-final {
        padding: 80px 24px 90px;
    }

    .contact-final h2 {
        font-size: 46px;
    }

    .contact-final-button {
        margin-top: 35px;
        width: 100%;
        justify-content: space-between;
    }


    /* WHATSAPP CARD */

    .contact-whatsapp {
        min-height: 360px;
        margin-top: 20px;
        padding: 30px;
    }

    .contact-whatsapp-content {
        margin-top: 75px;
    }

    .contact-whatsapp-content h3 {
        font-size: 43px;
    }

    .contact-whatsapp-content p {
        max-width: 260px;
    }

    .contact-whatsapp-link {
        left: 30px;
        bottom: 30px;
    }

    .contact-whatsapp-decor {
        width: 220px;
        height: 220px;
        font-size: 85px;
        right: -45px;
        bottom: -55px;
    }



@media (max-width: 450px) {

    .contact-hero {
        min-height: auto;
        height: auto;
    }

    .contact-hero-inner {
        padding: 105px 24px 60px;
    }

    .contact-hero h1 {
        font-size: 43px;
    }

}