/* ==================================================
   GLOBAL RESET
================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: "Caghen";
    src: url("../Caghen_Demo.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Classy Vogue";
    src: url("../ClassyVoguePersonalUse.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    /* font-family: "Cormorant Garamond", Georgia, serif; */
    font-family: "Caghen";
    background: #F8E8CE;
}

h1,
h2,
h3,
.hero-title,
.section-title {
    font-family: "Caghen", Georgia, serif;
}


/* ==================================================
   AVELUXE PRELOADER
================================================== */

.aveluxe-preloader {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    background: #211111;

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

    z-index: 99999;

    overflow: hidden;

    /* GSAP will animate this */
    transform: translateY(0);
}


/* ==================================================
   PRELOADER LOGO
================================================== */

.preloader-logo {
    display: block;

    width: 300px;
    height: auto;

    opacity: 0;

    transform: scale(1.15);

    /*
       Your logo is dark, so make it visible
       against the maroon background.
    */
    /* filter: brightness(0) invert(1); */

    will-change:
        opacity,
        transform;
}


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

@media (max-width: 767px) {

    .preloader-logo {
        width: 125px;
    }

}

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

.hero-section {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 650px;

    overflow: hidden;
}


/* ==================================================
   BACKGROUND VIDEO
================================================== */

.hero-video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    z-index: 1;
}


/* ==================================================
   VIDEO OVERLAY
================================================== */

.hero-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgb(0 0 0 / 12%);

    z-index: 2;

    pointer-events: none;
}


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

.hero-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding: 55px 5.2%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    z-index: 10;
}


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

.hero-contact {
    color: #1d110d;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    transition: opacity 0.3s ease;
}

.hero-contact:hover {
    opacity: 0.55;
}


/* ==================================================
   LOGO
================================================== */

.hero-logo {
    position: absolute;

    top: 47px;
    left: 50%;

    transform: translateX(-50%);

    width: 145px;

    display: block;
}

.hero-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.hero-image {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    z-index: 1;
}


/* ==================================================
   MENU BUTTON
================================================== */

.hero-menu-btn {
    border: none;
    outline: none;

    padding: 0;

    background: transparent;

    color: #1d110d;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    font-weight: 500;

    line-height: 1;

    cursor: pointer;

    transition: opacity 0.3s ease;
}

.hero-menu-btn:hover {
    opacity: 0.55;
}


/* ==================================================
   MENU OVERLAY
================================================== */

.menu-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(20, 14, 11, 0.25);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;

    z-index: 90;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* ==================================================
   SLIDE-IN SIDE MENU
================================================== */

.side-menu {
    position: fixed;

    top: 0;
    right: 0;

    width: 450px;
    max-width: 90%;

    height: 100vh;

    padding: 52px 55px;

    background: #f4f0e9;

    transform: translateX(100%);

    transition:
        transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);

    z-index: 100;

    display: flex;
    flex-direction: column;
}

.side-menu.active {
    transform: translateX(0);
}


/* ==================================================
   SIDE MENU HEADER
================================================== */

.side-menu-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 28px;

    border-bottom: 1px solid rgba(29, 17, 13, 0.18);
}

.side-menu-header span {
    color: #1d110d;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;
}

.menu-close-btn {
    border: none;
    outline: none;

    padding: 0;

    background: transparent;

    color: #1d110d;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;

    cursor: pointer;

    transition: opacity 0.3s ease;
}

.menu-close-btn:hover {
    opacity: 0.5;
}


/* ==================================================
   SIDE MENU NAVIGATION
================================================== */

.side-menu-nav {
    display: flex;
    flex-direction: column;

    padding-top: 65px;
}

.side-menu-nav a {
    position: relative;

    width: fit-content;

    margin-bottom: 24px;

    color: #1d110d;

    /* font-family: "Cormorant Garamond", Georgia, serif; */
    font-size: 20px;
    font-weight: 400;

    line-height: 1.5;

    text-decoration: none;

    opacity: 0;
    transform: translateX(35px);

    transition:
        opacity 0.5s ease,
        transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.side-menu.active .side-menu-nav a {
    opacity: 1;
    transform: translateX(0);
}


/* Stagger menu items */

.side-menu.active .side-menu-nav a:nth-child(1) {
    transition-delay: 0.12s;
}

.side-menu.active .side-menu-nav a:nth-child(2) {
    transition-delay: 0.18s;
}

.side-menu.active .side-menu-nav a:nth-child(3) {
    transition-delay: 0.24s;
}

.side-menu.active .side-menu-nav a:nth-child(4) {
    transition-delay: 0.30s;
}

.side-menu.active .side-menu-nav a:nth-child(5) {
    transition-delay: 0.36s;
}


/* Menu underline */

.side-menu-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background: #1d110d;

    transition: width 0.35s ease;
}

.side-menu-nav a:hover::after {
    width: 100%;
}


/* ==================================================
   SIDE MENU BOTTOM
================================================== */

.side-menu-bottom {
    margin-top: auto;

    padding-top: 25px;

    border-top: 1px solid rgba(29, 17, 13, 0.18);
}

.side-menu-bottom p {
    margin-bottom: 18px;

    color: #766b64;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 400;

    letter-spacing: 0.5px;
}

.side-menu-socials {
    display: flex;

    gap: 22px;
}

.side-menu-socials a {
    color: #1d110d;

    font-family: "Montserrat", sans-serif;
    font-size: 20px;

    text-decoration: none;

    transition: opacity 0.3s ease;
}

.side-menu-socials a:hover {
    opacity: 0.5;
}


/* ==================================================
   BODY LOCK WHEN MENU IS OPEN
================================================== */

body.menu-open {
    overflow: hidden;
}

/* ==================================================
   ABOUT US SECTION
================================================== */

.about-section {
    position: relative;

    width: 100%;

    /*
       IMPORTANT:
       Do NOT use 100vh / 100svh here.
       The section needs enough natural height
       for all content + padding.
    */

    min-height: auto;

    background: #F8E8CE;

    overflow: hidden;

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


/* ==================================================
   ABOUT INNER
================================================== */

.about-inner {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    /*
       Comfortable spacing around the section
    */

    padding: 70px 5% 30px;

    text-align: center;
}


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

.about-heading {
    width: 100%;

    margin-bottom: 38px;
}

.about-heading h1 {
    margin: 0;
    color: #1e0f0d;
    font-size: clamp(35px, 3vw, 55px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* ==================================================
   PROPOSAL
================================================== */

.about-heading h1 span {
    font-family: "Carattere", cursive;
    font-size: 50px;
    /* font-style: italic; */
    font-weight: lighter;
    text-transform: none;
    letter-spacing: 1px;
}


/* ==================================================
   ABOUT IMAGE
================================================== */

.about-image {
    width: clamp(250px, 20vw, 330px);

    aspect-ratio: 3 / 4;

    overflow: hidden;

    flex-shrink: 0;
}

.about-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}


/* ==================================================
   ABOUT TAGLINE
================================================== */

.about-tagline {
    margin-top: 25px;

    color: #1e0f0d;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(12px, 0.95vw, 15px);

    font-weight: 500;

    letter-spacing: 1.5px;

    line-height: 1.3;

    text-transform: uppercase;
}


/* ==================================================
   ABOUT DESCRIPTION
================================================== */

.about-description {
    width: min(1150px, 90%);

    margin-top: 15px;
}

.about-description p {
    margin: 0;

    color: #1e0f0d;

    font-family: "Inter", sans-serif;

    font-size: clamp(10px, 0.78vw, 13px);

    font-weight: 300;

    line-height: 1.85;

    letter-spacing: 0.15px;
}


/* ==================================================
   KNOW MORE BUTTON
================================================== */

.about-button-wrap {
    margin-top: 25px;
}

.about-button {
    display: inline-flex;

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

    width: 174px;
    height: 42px;

    background: #24100e;

    color: #F8E8CE;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.6px;

    text-decoration: none;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.about-button:hover {
    background: #3a1c18;

    color: #ffffff;

    transform: translateY(-2px);
}

/* about animation */
/* ==================================================
   ABOUT SECTION — GSAP ANIMATION PREP
================================================== */

/*
   Important:
   Everything is kept inside the section boundaries
   so these animations do not create horizontal
   scrolling on desktop or mobile.
*/

.about-section {
    position: relative;
    overflow: hidden;
}

/* -----------------------------------------------
   HEADING
------------------------------------------------ */

.about-heading h1 {
    will-change: transform, opacity;
}

.about-heading h1 span {
    display: inline-block;
    will-change: transform, opacity;
}


/* -----------------------------------------------
   IMAGE
------------------------------------------------ */

.about-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.about-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    will-change: transform, clip-path;
}


/* -----------------------------------------------
   TAGLINE
------------------------------------------------ */

.about-tagline {
    will-change: transform, opacity, letter-spacing;
}


/* -----------------------------------------------
   DESCRIPTION
------------------------------------------------ */

.about-description {
    will-change: transform, opacity;
}


/* -----------------------------------------------
   BUTTON
------------------------------------------------ */

.about-button-wrap {
    will-change: transform, opacity;
}

.about-button {
    position: relative;
    overflow: hidden;
}


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

@media (max-width: 767px) {

    .about-section {
        overflow-x: hidden;
    }

    .about-image {
        overflow: hidden;
    }

    .about-image img {
        will-change: transform;
    }

    /*
       Keep movement smaller on mobile.
       This prevents the animation from ever
       feeling like it is pushing outside the screen.
    */

    .about-heading h1 {
        will-change: transform, opacity;
    }

    .about-tagline,
    .about-description,
    .about-button-wrap {
        will-change: transform, opacity;
    }

}

/* ==================================================
   SERVICES SECTION
================================================== */

.services-section-hp {
    position: relative;

    width: 100%;

    background: #24100e !important;

    color: #F8E8CE;

    overflow: hidden;
}


/* ==================================================
   SERVICES INNER
================================================== */

.services-inner {
    width: 100%;

    padding: 55px 5.3% 45px;
}


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

.services-title {
    display: flex;

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

    margin-bottom: 48px;

    overflow: hidden;
}

.services-title span {
    display: block;

    color: #F8E8CE;

    font-family: "Carattere", cursive;

    font-size: clamp(38px, 3vw, 52px);

    font-weight: 400;

    line-height: 1;

    transform: translateY(100%);

    opacity: 0;

    transition:
        transform 0.9s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.8s ease;
}


/* Title revealed */

.services-section-hp.is-visible .services-title span {
    transform: translateY(0);

    opacity: 1;
}


/* ==================================================
   SERVICES LIST
================================================== */

.services-list {
    width: 100%;
}


/* ==================================================
   SERVICE ITEM
================================================== */

.service-item {
    position: relative;

    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;

    overflow: hidden;
}


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

.service-content {
    position: relative;

    min-height: 190px;

    display: flex;

    align-items: center;

    padding: 20px 0;

    overflow: hidden;
}


/* ==================================================
   SERVICE NAME
================================================== */

.service-name {
    margin: 0;

    color: #F8E8CE;

    /* font-family: "Cormorant Garamond", Georgia, serif; */

    font-size: clamp(48px, 4vw, 68px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -1.5px;

    transform: translateX(-45px);

    opacity: 0;

    transition:
        transform 0.9s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.8s ease,
        letter-spacing 0.5s ease;

    will-change: transform, opacity;
}


/* ==================================================
   IMAGE WRAPPER
================================================== */

.service-image-wrap {
    position: absolute;

    right: 45px;

    top: 50%;

    width: 130px;
    height: 130px;

    transform:
        translateY(-50%)
        translateX(40px);

    opacity: 0;

    overflow: hidden;

    transition:
        transform 0.9s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.8s ease;

    will-change: transform, opacity;
}


/* ==================================================
   IMAGE
================================================== */

.service-image {
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;
    overflow: hidden;
}

.service-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.12);

    transition:
        transform 0.8s cubic-bezier(0.77, 0, 0.175, 1),
        filter 0.5s ease;

    will-change: transform;
}


/* ==================================================
   ARROW
================================================== */

.service-arrow {
    position: absolute;

    right: 0;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(20px);

    color: #F8E8CE;

    font-family: Arial, sans-serif;

    font-size: 28px;

    font-weight: 300;

    line-height: 1;

    opacity: 0;

    transition:
        transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.6s ease;
}


/* ==================================================
   HORIZONTAL LINE
================================================== */

.service-line {
    position: relative;

    width: 100%;

    height: 1px;

    background: rgba(248, 230, 206, 0.20);

    overflow: hidden;
}

.service-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: rgba(248, 230, 206, 0.55);

    transition:
        width 1s cubic-bezier(0.77, 0, 0.175, 1);
}


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

.service-item .service-name,
.service-item .service-image-wrap,
.service-item .service-arrow {
    opacity: 0;
}


/* First item */

.services-section-hp.is-visible .service-item:nth-child(1) .service-name {
    opacity: 1;
    transform: translateX(0);

    transition-delay: 0.15s;
}

.services-section-hp.is-visible .service-item:nth-child(1) .service-image-wrap {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 0.28s;
}

.services-section-hp.is-visible .service-item:nth-child(1) .service-arrow {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 0.4s;
}

.services-section-hp.is-visible .service-item:nth-child(1) .service-line::after {
    width: 100%;

    transition-delay: 0.45s;
}


/* Second item */

.services-section-hp.is-visible .service-item:nth-child(2) .service-name {
    opacity: 1;
    transform: translateX(0);

    transition-delay: 0.55s;
}

.services-section-hp.is-visible .service-item:nth-child(2) .service-image-wrap {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 0.68s;
}

.services-section-hp.is-visible .service-item:nth-child(2) .service-arrow {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 0.8s;
}

.services-section-hp.is-visible .service-item:nth-child(2) .service-line::after {
    width: 100%;

    transition-delay: 0.85s;
}


/* Third item */

.services-section-hp.is-visible .service-item:nth-child(3) .service-name {
    opacity: 1;
    transform: translateX(0);

    transition-delay: 0.95s;
}

.services-section-hp.is-visible .service-item:nth-child(3) .service-image-wrap {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 1.08s;
}

.services-section-hp.is-visible .service-item:nth-child(3) .service-arrow {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 1.2s;
}

.services-section-hp.is-visible .service-item:nth-child(3) .service-line::after {
    width: 100%;

    transition-delay: 1.25s;
}


/* Fourth item */

.services-section-hp.is-visible .service-item:nth-child(4) .service-name {
    opacity: 1;
    transform: translateX(0);

    transition-delay: 1.35s;
}

.services-section-hp.is-visible .service-item:nth-child(4) .service-image-wrap {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 1.48s;
}

.services-section-hp.is-visible .service-item:nth-child(4) .service-arrow {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

    transition-delay: 1.6s;
}

.services-section-hp.is-visible .service-item:nth-child(4) .service-line::after {
    width: 100%;

    transition-delay: 1.65s;
}


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

@media (min-width: 992px) {

    .service-item {
        cursor: pointer;
    }


    /* Text movement */

    .service-item:hover .service-name {
        transform: translateX(12px);

        letter-spacing: -0.5px;
    }


    /* Image expansion */

    .service-item:hover .service-image img {
        transform: scale(1.18);

        filter: brightness(1.08);
    }


    /* Image moves slightly */

    .service-item:hover .service-image-wrap {
        transform:
            translateY(-50%)
            translateX(-8px)
            scale(1.06);
    }


    /* Arrow */

    .service-item:hover .service-arrow {
        transform:
            translateY(-50%)
            translateX(8px);

        opacity: 1;
    }


    /* Line */

    .service-item:hover .service-line::after {
        width: 100%;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .services-title span,
    .service-name,
    .service-image-wrap,
    .service-arrow,
    .service-image img,
    .service-line::after {
        transition: none !important;

        transform: none !important;

        opacity: 1 !important;
    }

    .service-line::after {
        width: 100% !important;
    }
}

/* ==================================================
   CREATING MOMENTS SECTION
================================================== */

/* ==================================================
   CREATING MOMENTS SECTION
================================================== */

.moments-section {
    position: relative;

    width: 100%;
    height: 100svh;
    min-height: 620px;

    background: #F8E8CE;
    color: #24100e;

    overflow: hidden;
}


/* ==================================================
   MAIN AREA
================================================== */

.moments-main {
    position: relative;

    width: 100%;
    height: calc(100% - 66px);

    display: grid;
    grid-template-columns: 50% 50%;

    align-items: center;

    padding: 35px 5% 25px;

    overflow: hidden;
}


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

.moments-content {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding-right: 3%;
}


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

.moments-heading {
    width: 100%;
}


/* CREATING */

.moments-heading-main {
    margin: 0;

    color: #24100e;

    /* font-family: "Cormorant Garamond", Georgia, serif; */

    font-size: clamp(80px, 10vw, 135px);

    font-weight: 400;

    line-height: 1.3;

    letter-spacing: -4px;

    white-space: nowrap;

    opacity: 0;

    transform: translate3d(0, 35px, 0);

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform, opacity;
}


/* ==================================================
   THE + MOMENTS
================================================== */

.moments-heading-bottom {
    display: flex;

    align-items: center;

    gap: clamp(10px, 1.5vw, 22px);

    margin-top: 8px;

    opacity: 0;

    transform: translate3d(0, 30px, 0);

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* THE */

.moments-the {
    color: #24100e;

    font-family: "Caghen";

    font-size: clamp(55px, 8vw, 105px);

    /* font-weight: 400; */

    line-height: 0.85;

    letter-spacing: -3px;
}


/* MOMENTS */

.moments-script {
    color: #24100e;
    font-family: "Ballet", "Allura", cursive;
    font-size: clamp(60px, 9vw, 135px);
    font-weight: 400;
    line-height: 0.8;
    white-space: nowrap;
    transform: translate3d(-15px, 0, 0);
    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}


/* ==================================================
   ACTION LINKS
================================================== */

.moments-actions {
    display: flex;
    gap: clamp(45px, 5vw, 80px);
    margin-top: clamp(28px, 4vh, 50px);
    opacity: 0;
    transform: translate3d(0, 15px, 0);
    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    margin-left: auto;
}


.moments-link {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    color: #24100e;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-decoration: none;
}


/* Underline */

.moments-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: #24100e;

    transform: scaleX(1);

    transform-origin: right;

    transition:
        transform 0.4s ease;
}

.moments-link:hover::after {
    transform: scaleX(0);

    transform-origin: left;
}


/* ==================================================
   IMAGE AREA
================================================== */

.moments-image-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

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

    overflow: hidden;
}


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

.moments-image-reveal {
    position: relative;

    width: min(100%, 540px);

    /*
       This keeps the image inside the viewport.
    */

    height: min(100%, 680px);

    overflow: hidden;

    opacity: 0;

    transform: translate3d(35px, 0, 0);

    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform, opacity;
}


/* ==================================================
   IMAGE
================================================== */

.moments-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Small starting scale only.
       No clip-path.
       No masking.
    */

    transform: scale(1.06);

    transition:
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* ==================================================
   ACTIVE / REVEALED STATE
================================================== */

.moments-section.is-visible
.moments-heading-main {
    opacity: 1;

    transform: translate3d(0, 0, 0);
}


.moments-section.is-visible
.moments-heading-bottom {
    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition-delay: 0.12s;
}


.moments-section.is-visible
.moments-script {
    transform: translate3d(0, 0, 0);

    transition-delay: 0.18s;
}


.moments-section.is-visible
.moments-image-reveal {
    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition-delay: 0.15s;
}


.moments-section.is-visible
.moments-image {
    transform: scale(1);

    transition-delay: 0.15s;
}


.moments-section.is-visible
.moments-actions {
    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition-delay: 0.4s;
}


/* ==================================================
   BROWN MARQUEE
================================================== */

.moments-marquee {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 66px;

    display: flex;
    align-items: center;

    background: #24100e;

    overflow: hidden;

    z-index: 5;

    opacity: 0;

    transform: translate3d(0, 10px, 0);

    transition:
        opacity 0.6s ease,
        transform 0.7s ease;
}


.moments-section.is-visible
.moments-marquee {
    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition-delay: 0.5s;
}


/* ==================================================
   MARQUEE TRACK
================================================== */

.moments-marquee-track {
    display: flex;
    align-items: center;

    width: max-content;

    flex-shrink: 0;

    animation:
        momentsMarquee 35s linear infinite;

    will-change: transform;
}


/* ==================================================
   MARQUEE ITEMS
================================================== */

.moments-marquee-item {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-right: 120px;

    color: #F8E8CE;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    font-weight: 400;

    letter-spacing: 0.8px;

    white-space: nowrap;
}

.moments-marquee-item span {
    font-size: 14px;
}


/* ==================================================
   MARQUEE ANIMATION
================================================== */

@keyframes momentsMarquee {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }

}


/* ==================================================
   DESKTOP IMAGE HOVER
================================================== */

@media (min-width: 992px) {

    .moments-image-wrap:hover
    .moments-image {
        transform: scale(1.035);
    }


    .moments-link:hover {
        letter-spacing: 0.7px;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .moments-heading-main,
    .moments-heading-bottom,
    .moments-script,
    .moments-actions,
    .moments-image-reveal,
    .moments-image,
    .moments-marquee {
        transition: none !important;

        opacity: 1 !important;

        transform: none !important;
    }

    .moments-marquee-track {
        animation: none !important;
    }

}

/* ==================================================
   BY THE NUMBERS / COUNTER SECTION
================================================== */

.counter-section {
    position: relative;

    width: 100%;
    height: 100svh;

    min-height: 620px;

    overflow: hidden;

    background: #24100e;
    margin-top: 40px;
    color: #F8E8CE;
}


/* ==================================================
   BACKGROUND
================================================== */

.counter-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 0;
}


.counter-bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.04);

    transition:
        transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==================================================
   DARK OVERLAY
================================================== */

.counter-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(36, 16, 14, 0.04);

    z-index: 1;
}


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

.counter-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px 5% 60px;
}


/* ==================================================
   LOGO
================================================== */

.counter-brand {
    display: flex;

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

    margin-bottom: clamp(35px, 12vh, 97px);

    opacity: 0;

    transform: translate3d(0, -25px, 0);

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


.counter-brand img {
    display: block;

    width: clamp(130px, 11vw, 185px);

    height: auto;
}


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

.counter-heading {
    margin-bottom: clamp(15px, 5vh, 15px);

    opacity: 0;

    transform: translate3d(0, 20px, 0);

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.counter-heading span {
    display: block;

    color: #F8E8CE;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(11px, 0.85vw, 15px);

    font-weight: 500;

    letter-spacing: 2px;

    text-align: center;
}


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

.counter-grid {
    width: 100%;
    max-width: 1250px;

    display: grid;

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

    opacity: 0;

    transform: translate3d(0, 30px, 0);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==================================================
   COUNTER ITEM
================================================== */

.counter-item {
    position: relative;

    min-height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px 25px;

    text-align: center;
}


/* ==================================================
   VERTICAL DIVIDERS
================================================== */

.counter-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 15%;
    right: 0;

    width: 1px;
    height: 70%;

    background:
        rgba(248, 230, 206, 0.75);

    transform:
        scaleY(0);

    transform-origin: center;

    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==================================================
   COUNTER NUMBER
================================================== */

.counter-number {
    color: #F8E8CE;

  
    font-family: "Classy Vogue";
    font-size: clamp(80px, 7vw, 95px);

    /* font-weight: 400; */

    line-height: 0.85;

    letter-spacing: -3px;

    white-space: nowrap;
}


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

.counter-label {
    margin-top: 28px;

    color: #F8E8CE;

    font-family: "Inter", sans-serif;

    font-size: clamp(10px, 0.85vw, 14px);

    font-weight: 400;

    letter-spacing: 3px;

    line-height: 1.4;

    white-space: nowrap;
}


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

.counter-section.is-visible
.counter-brand {

    opacity: 1;

    transform:
        translate3d(0, 0, 0);
}


.counter-section.is-visible
.counter-heading {

    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    transition-delay: 0.15s;
}


.counter-section.is-visible
.counter-grid {

    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    transition-delay: 0.3s;
}


/* Dividers */

.counter-section.is-visible
.counter-item:not(:last-child)::after {

    transform:
        scaleY(1);
}


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

.counter-section.is-visible
.counter-bg img {

    transform:
        scale(1);

}


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

@media (min-width: 992px) {

    .counter-item {
        transition:
            transform 0.5s ease;
    }


    .counter-item:hover {

        transform:
            translateY(-5px);
    }


    .counter-item:hover
    .counter-number {

        transform:
            scale(1.02);
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .counter-brand,
    .counter-heading,
    .counter-grid,
    .counter-bg img {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .counter-item:not(:last-child)::after {

        transform: scaleY(1) !important;

        transition: none !important;
    }

}

/* ==================================================
   PORTFOLIO / RECENT MOMENTS
================================================== */

.portfolio-section {

    position: relative;

    width: 100%;

    height: 100svh;

    min-height: 650px;

    background: #F8E8CE;

    color: #24100e;

    overflow: hidden;

}


/* ==================================================
   PORTFOLIO HEADER
================================================== */

.portfolio-header {

    position: relative;

    z-index: 5;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    width: 100%;

    padding:
        55px
        5.5%
        40px;

}


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

.portfolio-title {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.portfolio-script {

    margin-left: 2px;

    color: #24100e;

    font-family:
        "Carattere", cursive;

    font-size: 30px;

    line-height: 0.8;

}


.portfolio-title h2 {

    margin: 0;

    color: #24100e;

    /* font-family:
        "Cormorant Garamond",
        Georgia,
        serif; */

    font-size:
        clamp(
            65px,
            6vw,
            105px
        );

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: 1px;

}


/* ==================================================
   VIEW PORTFOLIO
================================================== */

.portfolio-view-link {

    position: relative;

    margin-top: 15px;

    padding-bottom: 8px;

    color: #24100e;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 0.4px;

    text-decoration: none;

}


.portfolio-view-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background: #24100e;

    transform:
        scaleX(1);

    transform-origin: right;

    transition:
        transform 0.5s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        );

}


.portfolio-view-link:hover::after {

    transform:
        scaleX(0);

    transform-origin: left;

}


/* ==================================================
   PORTFOLIO VIEWPORT
================================================== */

.portfolio-viewport {

    position: relative;

    width: 100%;

    height:
        calc(
            100% - 190px
        );

    overflow: hidden;

}


/* ==================================================
   HORIZONTAL TRACK
================================================== */

.portfolio-track {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    width: max-content;

    height: 100%;

    padding:
        0
        0
        55px;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;

}


/* ==================================================
   PORTFOLIO CARD
================================================== */

.portfolio-card {

    position: relative;

    flex-shrink: 0;

    width:
        clamp(
            330px,
            28vw,
            480px
        );

    overflow: hidden;

    background: #e8d4ba;

}


/* ==================================================
   TALL IMAGE
================================================== */

.portfolio-card-tall {

    height:
        clamp(
            580px,
            72vh,
            760px
        );

}


/* ==================================================
   SHORT IMAGE
================================================== */

.portfolio-card-short {

    height:
        clamp(
            500px,
            62vh,
            650px
        );

    margin-top:
        clamp(
            80px,
            10vh,
            120px
        );

}


/* ==================================================
   IMAGE
================================================== */

.portfolio-card img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform:
        scale(1.03);

    transition:
        transform 1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


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

@media (min-width: 992px) {

    .portfolio-card:hover img {

        transform:
            scale(1.08);

    }

}


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

.portfolio-title,
.portfolio-view-link,
.portfolio-card {

    opacity: 0;

    transform:
        translate3d(
            0,
            35px,
            0
        );

    transition:
        opacity 0.8s ease,
        transform 1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.portfolio-section.is-visible
.portfolio-title {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.portfolio-section.is-visible
.portfolio-view-link {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition-delay:
        0.15s;

}


.portfolio-section.is-visible
.portfolio-card {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ==================================================
   CARD STAGGER
================================================== */

.portfolio-section.is-visible
.portfolio-card:nth-child(1) {
    transition-delay: 0.15s;
}

.portfolio-section.is-visible
.portfolio-card:nth-child(2) {
    transition-delay: 0.25s;
}

.portfolio-section.is-visible
.portfolio-card:nth-child(3) {
    transition-delay: 0.35s;
}

.portfolio-section.is-visible
.portfolio-card:nth-child(4) {
    transition-delay: 0.45s;
}


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

@media (max-width: 767px) {

    .portfolio-section {

        height: auto;

        min-height: 0;

        overflow: hidden;

    }


    .portfolio-header {

        padding:
            45px
            20px
            45px;

    }


    .portfolio-script {

        font-size: 24px;

    }


    .portfolio-title h2 {

        font-size:
            clamp(
                55px,
                16vw,
                75px
            );

        letter-spacing:
            -2px;

    }


    .portfolio-view-link {

        margin-top: 10px;

        font-size: 10px;

    }


    .portfolio-viewport {

        height: auto;

        overflow: hidden;

    }


    .portfolio-track {

        gap: 10px;

        padding-bottom:
            35px;

        transform:
            none !important;

    }


    .portfolio-card {

        width: 75vw;

    }


    .portfolio-card-tall {

        height: 75vh;

        min-height: 480px;

        max-height: 650px;

    }


    .portfolio-card-short {

        height: 65vh;

        min-height: 420px;

        max-height: 560px;

        margin-top: 70px;

    }

}


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

@media (max-width: 480px) {

    .portfolio-header {

        padding:
            40px
            18px
            35px;

    }


    .portfolio-card {

        width: 78vw;

    }


    .portfolio-card-tall {

        height: 500px;

        min-height: 0;

    }


    .portfolio-card-short {

        height: 430px;

        min-height: 0;

        margin-top: 60px;

    }

}

/* mobile portfolio slider */


/* ==========================================================
   AVELUXE — MOBILE PORTFOLIO SLIDER
========================================================== */

.portfolio-mobile-section {
    display: block;
    width: 100%;
    padding: 48px 0 40px;
    overflow: hidden;
    background: #F8E8CE;
}

/* Preserve the existing portfolio heading styles */
.portfolio-mobile-section .portfolio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 0 22px 28px;
    box-sizing: border-box;
}

.portfolio-mobile-section .portfolio-title {
    flex: 1 1 auto;
    min-width: 0;
}

.portfolio-mobile-section .portfolio-view-link {
    flex-shrink: 0;
    margin-top: 12px;
}

/* Smooth single-image slider */
.portfolio-mobile-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.portfolio-mobile-viewport::-webkit-scrollbar {
    display: none;
}

.portfolio-mobile-track {
    display: flex;
    width: 100%;
}

.portfolio-mobile-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    padding: 0 22px;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.portfolio-mobile-card img {
    display: block;
    width: 100%;
    height: 71vh;
    min-height: 320px;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

/* Elegant navigation arrows */
.portfolio-mobile-arrows {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 20px 22px 0;
}

.portfolio-mobile-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(36, 16, 16, 0.45);
    border-radius: 50%;
    background: transparent;
    color: #241010;
    font-family: Arial, sans-serif;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.portfolio-mobile-arrow:active {
    background: #241010;
    color: #F8E8CE;
}

@media (hover: hover) {
    .portfolio-mobile-arrow:hover {
        background: #241010;
        color: #F8E8CE;
        border-color: #241010;
    }
}

/* Mobile-only */
@media (min-width: 768px) {
    .portfolio-mobile-section {
        display: none !important;
    }
}

 
/* ==================================================
   CONTACT STORY SECTION
================================================== */

.contact-story-section {

    position: relative;

    width: 100%;

    height: 100svh;

    min-height: 650px;

    overflow: hidden;

    background: #F8E8CE;

    color: #24100e;

}


/* ==================================================
   MAIN INNER
================================================== */

.contact-story-inner {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}


/* ==================================================
   COMMON IMAGE
================================================== */

.contact-story-image {

    position: absolute;

    overflow: hidden;

    opacity: 0;

    will-change:
        transform,
        opacity;

}


/* IMAGE */

.contact-story-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* ==================================================
   LEFT IMAGE
================================================== */

.contact-image-left {

    top: 13%;

    left: 5.5%;

    width: 15.5%;

    height: 37%;

    transform:
        translate3d(
            0,
            90px,
            0
        );

}


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

/* ==================================================
   MAIN HEADING - DESIGN POSITION
================================================== */

.contact-story-heading {

    position: absolute;

    top: 20.5%;

    left: 28.5%;

    width: 55%;

    z-index: 3;

    opacity: 0;

    transform:
        translate3d(
            0,
            45px,
            0
        );

}


/* ==================================================
   JUST SAY
================================================== */

.contact-story-heading h2 {

    margin: 0;

    color: #24100e;

    /* font-family:
        "Cormorant Garamond",
        Georgia,
        serif; */

    font-size:
        clamp(
            75px,
            8vw,
            145px
        );

    font-weight: 400;

    line-height: 0.78;

    letter-spacing:
        -6px;

    white-space: nowrap;

}


/* ==================================================
   HELLO - SHIFT RIGHT
================================================== */

.contact-story-heading h2:nth-child(2) {

    margin-left:
        37%;

    margin-top:
        48px;
       font-size: 170px;
font-size: clamp(75px,8vw,145px);
}


/* ==================================================
   SMALL TOP TEXT
================================================== */

.contact-story-small-text {

    position: absolute;

    top: 28.2%;

    left: 61.5%;

    z-index: 3;

    color: #24100e;

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            9px,
            0.8vw,
            13px
        );

    font-weight: 400;

    letter-spacing:
        4px;

    white-space: nowrap;

    opacity: 0;

    transform:
        translate3d(
            0,
            25px,
            0
        );

}
/* -----------------------------------------------
   STEP 2 - I AM HERE TO
------------------------------------------------ */

.contact-story-section.is-step-2
.contact-story-small-text {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity 0.7s ease,
        transform 0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    transition-delay: 0.15s;
}

.contact-story-section.is-step-3
.contact-story-small-text,

.contact-story-section.is-step-4
.contact-story-small-text,

.contact-story-section.is-step-5
.contact-story-small-text,

.contact-story-section.is-step-6
.contact-story-small-text {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


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

.contact-story-description {

    position: absolute;

    top: 47%;

    left: 30.2%;

    z-index: 3;

    color: #24100e;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(
            9px,
            0.8vw,
            13px
        );

    font-weight: 400;

    letter-spacing:
        4px;

    white-space: nowrap;

    opacity: 0;

    transform:
        translate3d(
            0,
            25px,
            0
        );

}


/* ==================================================
   BOTTOM IMAGE
================================================== */

.contact-image-bottom {

    left: 27.5%;

    bottom: 10%;

    width: 12%;

    height: 30%;

    transform:
        translate3d(
            0,
            100px,
            0
        );

}


/* ==================================================
   RIGHT IMAGE
================================================== */

.contact-image-right {

    right: 7.5%;

    top: 31%;

    width: 15.5%;

    height: 37%;

    transform:
        translate3d(
            80px,
            0,
            0
        );

}


/* ==================================================
   INQUIRE BUTTON
================================================== */

.contact-inquire-btn {

    position: absolute;

    left: 64%;

    bottom: 29%;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 185px;

    height: 43px;

    background: #24100e;

    color: #F8E8CE;

    font-family:
        "Inter",
        sans-serif;

    font-size: 11px;

    font-weight: 400;

    letter-spacing:
        0.5px;

    text-decoration: none;

    opacity: 0;

    transform:
        translate3d(
            0,
            25px,
            0
        );

    transition:
        background 0.35s ease,
        color 0.35s ease;

}


/* BUTTON HOVER */

.contact-inquire-btn:hover {

    background: #3a1b18;

    color: #F8E8CE;

}


/* ==================================================
   DESKTOP REVEAL STATES
================================================== */


/* -----------------------------------------------
   STEP 1 - LEFT IMAGE
------------------------------------------------ */

.contact-story-section.is-step-1
.contact-image-left {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity 0.7s ease,
        transform 0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* -----------------------------------------------
   STEP 2 - HEADING
------------------------------------------------ */

.contact-story-section.is-step-2
.contact-story-heading {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity 0.7s ease,
        transform 0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* -----------------------------------------------
   STEP 3 - DESCRIPTION
------------------------------------------------ */

.contact-story-section.is-step-3
.contact-story-description {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity 0.65s ease,
        transform 0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* -----------------------------------------------
   STEP 4 - BOTTOM IMAGE
------------------------------------------------ */

.contact-story-section.is-step-4
.contact-image-bottom {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity 0.7s ease,
        transform 0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* -----------------------------------------------
   STEP 5 - RIGHT IMAGE
------------------------------------------------ */

.contact-story-section.is-step-5
.contact-image-right {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity 0.7s ease,
        transform 0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* -----------------------------------------------
   STEP 6 - BUTTON
------------------------------------------------ */

.contact-story-section.is-step-6
.contact-inquire-btn {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity 0.7s ease,
        transform 0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ==================================================
   IMPORTANT
   KEEP EVERYTHING VISIBLE ONCE REVEALED
================================================== */

.contact-story-section[class*="is-step-2"]
.contact-image-left,

.contact-story-section[class*="is-step-3"]
.contact-image-left,

.contact-story-section[class*="is-step-4"]
.contact-image-left,

.contact-story-section[class*="is-step-5"]
.contact-image-left,

.contact-story-section[class*="is-step-6"]
.contact-image-left {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.contact-story-section[class*="is-step-3"]
.contact-story-heading,

.contact-story-section[class*="is-step-4"]
.contact-story-heading,

.contact-story-section[class*="is-step-5"]
.contact-story-heading,

.contact-story-section[class*="is-step-6"]
.contact-story-heading {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.contact-story-section[class*="is-step-4"]
.contact-story-description,

.contact-story-section[class*="is-step-5"]
.contact-story-description,

.contact-story-section[class*="is-step-6"]
.contact-story-description {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.contact-story-section[class*="is-step-5"]
.contact-image-bottom,

.contact-story-section[class*="is-step-6"]
.contact-image-bottom {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.contact-story-section.is-step-6
.contact-image-right {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991px) {

    .contact-story-section {

        min-height: 600px;

    }


    .contact-story-heading {

        left: 27%;

    }


    .contact-story-heading h2 {

        font-size:
            clamp(
                65px,
                8vw,
                95px
            );

    }


    .contact-image-left {

        left: 5%;

        width: 18%;

    }


    .contact-image-right {

        right: 5%;

        width: 18%;

    }


    .contact-story-description {

        left: 27%;

    }


    .contact-story-small-text {

        left: 61%;

    }

}

/* ==================================================
   LOVE NOTES / TESTIMONIALS
================================================== */

.love-notes-section {

    position: relative;

    width: 100%;
    height: 70svh;

    min-height: 650px;

    overflow: hidden;

    /* background: #24100e; */

    color: #F8E8CE;

}


/* ==================================================
   BACKGROUND
================================================== */

.love-notes-bg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 0;

}


.love-notes-bg img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.02);

}


/* ==================================================
   DARK OVERLAY
================================================== */

.love-notes-overlay {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    /* background:
        rgba(30, 13, 12, 0.78); */

    z-index: 1;

}


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

.love-notes-inner {

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

}


/* ==================================================
   HEADER
================================================== */

.love-notes-header {

    position: absolute;

    top: 14%;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    text-align: center;

}


.love-notes-header h2 {

    margin: 0;

    color: #F8E8CE;

    /* font-family:
        "Cormorant Garamond",
        Georgia,
        serif; */

    font-size:
        clamp(
            50px,
            4.2vw,
            75px
        );

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -2px;

}


.love-notes-header span {

    display: block;

    margin-top: 18px;

    color: #F8E8CE;

    font-family:
        "Inter", sans-serif;

    font-size:
        clamp(
            9px,
            0.75vw,
            12px
        );

    font-weight: 400;

    letter-spacing: 1.5px;

}


/* ==================================================
   LEFT COUNTER
================================================== */

.love-notes-counter {

    position: absolute;

    left: 5.3%;

    top: 30%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


/* CURRENT NUMBER */

.love-notes-current,
.love-notes-total {
    color: #F8E8CE;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 200;
    line-height: 1;

}


/* VERTICAL LINE */

.love-notes-counter-line {

    width: 1px;

    height: 155px;

    margin:
        30px
        0
        30px
        11px;

    background:
        rgba(
            248,
            230,
            206,
            0.8
        );

}


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

.love-notes-content {

    position: absolute;

    top: 42%;

    left: 50%;

    transform: translateX(-50%);

    width: min(
        770px,
        48vw
    );

    text-align: center;

}


/* ==================================================
   QUOTE
================================================== */

.love-notes-quote {

    color: #F8E8CE;

    font-family:
       "Inter", sans-serif;

    font-size:
        clamp(
            15px,
            1.15vw,
            21px
        );

    font-weight: 100;

    line-height: 1.6;

    letter-spacing: 0.15px;

}


/* ==================================================
   NAME
================================================== */

.love-notes-name {

    margin-top: 105px;

    color: #F8E8CE;

    font-family:
        "Caghen", Georgia, serif;

    font-size:
        clamp(
            24px,
            1.7vw,
            34px
        );

    /* font-weight: 400; */

    line-height: 1;

}


/* ==================================================
   RIGHT NAVIGATION
================================================== */

.love-notes-navigation {

    position: absolute;

    right: 5.2%;

    top: 29%;

    height: 35%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

}


/* ==================================================
   PREV / NEXT BUTTONS
================================================== */

.love-notes-navigation button {

    border: none;

    outline: none;

    padding: 0;

    background: transparent;

    color: #F8E8CE;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 0.5px;

    writing-mode: vertical-rl;

    text-orientation: mixed;

    cursor: pointer;

    transition:
        opacity 0.3s ease,
        letter-spacing 0.3s ease;

}


.love-notes-navigation button:hover {

    opacity: 0.55;

    letter-spacing: 1.5px;

}


/* ==================================================
   TESTIMONIAL TRANSITION
================================================== */

.love-notes-content.is-changing
.love-notes-quote,

.love-notes-content.is-changing
.love-notes-name {

    opacity: 0;

    transform:
        translateY(15px);

}


.love-notes-quote,
.love-notes-name {

    transition:
        opacity 0.45s ease,
        transform 0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991px) {

    .love-notes-header {

        top: 12%;

    }


    .love-notes-counter {

        left: 4%;

    }


    .love-notes-navigation {

        right: 4%;

    }


    .love-notes-content {

        width: 58vw;

    }


    .love-notes-name {

        margin-top: 75px;

    }

}


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

@media (max-width: 767px) {

  


    .love-notes-header {

        top: 10%;

    }


    .love-notes-header h2 {

        font-size: 48px;

        letter-spacing: -1px;

    }


    .love-notes-header span {

        margin-top: 12px;

    }


    /* Counter */

    .love-notes-counter {

        left: 20px;

        top: 28%;

    }


    .love-notes-counter-line {

        height: 100px;

        margin:
            22px
            0
            22px
            9px;

    }


    .love-notes-current,
    .love-notes-total {

        font-size: 13px;

    }


    /* Content */

    .love-notes-content {

        top: 36%;

        width: calc(
            100% - 100px
        );

    }


    .love-notes-quote {

        font-size: 13px;

        line-height: 1.7;

    }


    .love-notes-name {

        margin-top: 60px;

        font-size: 25px;

    }


    /* Navigation */

    .love-notes-navigation {

        right: 20px;

        top: 27%;

        height: 45%;

    }


    .love-notes-navigation button {

        font-size: 10px;

    }

}


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

@media (max-width: 480px) {

    .love-notes-content {

        width: calc(
            100% - 90px
        );

    }


    .love-notes-header h2 {

        font-size: 42px;

    }


    .love-notes-quote {

        font-size: 12px;

    }


    .love-notes-name {

        margin-top: 45px;

        font-size: 22px;

    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .love-notes-quote,
    .love-notes-name {

        transition: none !important;

    }

}

/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {

    position: relative;

    width: 100%;

    min-height: 70svh;

    background: #f9e7cd;

    color: #24100e;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.faq-container {

    width: 100%;

    max-width: 1500px;

    min-height: 90svh;

    margin: 0 auto;

    padding:
        7vh
        5.5vw
        0;

}


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

.faq-heading {

    width: 100%;

    text-align: center;

    margin-bottom: 9vh;

}


.faq-heading h2 {

    margin: 0;

    /* font-family:
        "Cormorant Garamond",
        Georgia,
        serif; */

    font-size:
        clamp(
            48px,
            3.2vw,
            65px
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -2px;

}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-list {

    width: 100%;

}


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

.faq-item {

    position: relative;

    width: 100%;

    border-top:
        1px solid
        rgba(
            36,
            16,
            14,
            0.28
        );

}


.faq-item:last-child {

    border-bottom:
        1px solid
        rgba(
            36,
            16,
            14,
            0.28
        );

}


/* =========================================================
   QUESTION
========================================================= */

.faq-question {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 112px;

    padding:
        0
        3.2vw
        0
        2.5vw;

    border: none;

    outline: none;

    background: transparent;

    color: #24100e;

    text-align: left;

    cursor: pointer;

}


/* Question text */

.faq-question > span:first-child {

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            0.8vw,
            15px
        );

    font-weight: 500;

    letter-spacing: 3px;

}


/* =========================================================
   ARROW
========================================================= */

.faq-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    flex-shrink: 0;

    font-family:
        Arial,
        sans-serif;

    font-size: 24px;

    font-weight: 300;

    line-height: 1;

    transition:
        transform 0.45s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.faq-answer p {

    overflow: hidden;

    margin: 0;

    padding:
        0
        3.2vw
        0
        2.5vw;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            0.85vw,
            15px
        );

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 2px;

    opacity: 0;

    transform:
        translateY(-8px);

    transition:
        opacity 0.35s ease,
        transform 0.45s ease;

}


/* =========================================================
   ACTIVE FAQ
========================================================= */

.faq-item.active
.faq-answer {

    grid-template-rows: 1fr;

}


.faq-item.active
.faq-answer p {

    padding-bottom: 34px;

    opacity: 1;

    transform:
        translateY(0);

}


.faq-item.active
.faq-arrow {

    transform:
        rotate(180deg);

}


/* =========================================================
   IMAGE COLLAGE
========================================================= */

.faq-image-collage {

    position: relative;

    width: 100%;

    height: 480px;

    margin-left: 3vw;

}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.faq-image {

    position: absolute;

    overflow: hidden;

}


.faq-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   IMAGE 1
========================================================= */

.faq-image-one {

    top: 0;

    left: 3%;

    width: 220px;

    height: 310px;

    z-index: 1;

}


/* =========================================================
   IMAGE 2
========================================================= */

.faq-image-two {

    top: 165px;

    left: 38%;

    width: 220px;

    height: 310px;

    z-index: 2;

}


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

.faq-image img {

    transition:
        transform 0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.faq-image:hover img {

    transform:
        scale(1.04);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .faq-container {

        padding-left: 4vw;

        padding-right: 4vw;

    }


    .faq-heading {

        margin-bottom: 6vh;

    }


    .faq-question {

        min-height: 100px;

    }


    .faq-image-collage {

        margin-left: 1vw;

        height: 420px;

    }


    .faq-image-one {

        width: 180px;

        height: 260px;

    }


    .faq-image-two {

        top: 140px;

        width: 180px;

        height: 260px;

    }

}


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

@media (max-width: 767px) {

    .faq-section {

        min-height: auto;

    }


    .faq-container {

        min-height: auto;

        padding:
            70px
            20px
            80px;

    }


    /* Heading */

    .faq-heading {

        margin-bottom: 55px;

    }


    .faq-heading h2 {

        font-size: 48px;

        letter-spacing: -1px;

    }


    /* FAQ */

    .faq-question {

        min-height: 85px;

        padding:
            0
            10px
            0
            0;

    }



    .faq-arrow {

        font-size: 21px;

    }


    .faq-answer p {

        padding:
            0
            10px
            0
            0;

        font-size: 11px;

        line-height: 1.7;

        letter-spacing: 1.2px;

    }


    .faq-item.active
    .faq-answer p {

        padding-bottom: 28px;

    }


    /* Image collage */

    .faq-image-collage {

        width: 100%;

        height: 430px;

        margin:
            65px
            0
            0;

    }


    .faq-image-one {

        left: 10%;

        width: 45%;

        height: 275px;

    }


    .faq-image-two {

        top: 145px;

        left: 43%;

        width: 45%;

        height: 275px;

    }

}


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

@media (max-width: 480px) {

    .faq-container {

        padding:
            60px
            16px
            5px;

    }


    .faq-heading {

        margin-bottom: 40px;

    }


    .faq-heading h2 {

        font-size: 43px;

    }


    .faq-question {

        min-height: 78px;

    }


    /* .faq-question > span:first-child {

        font-size: 10px;

        letter-spacing: 1.6px;

    } */


    .faq-image-collage {

        height: 380px;

    }


    .faq-image-one {

        width: 48%;

        height: 240px;

    }


    .faq-image-two {

        top: 125px;

        left: 40%;

        width: 48%;

        height: 240px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .faq-answer,
    .faq-answer p,
    .faq-arrow,
    .faq-image img {

        transition: none !important;

    }

}

/* =========================================================
   AVELUXE FOOTER
========================================================= */

/* mobile footer */

footer#mobileFooter {
    display: none;
}

.aveluxe-footer {

    position: relative;

    width: 100%;

    background: #f9e7cd;

    color: #24100e;

    overflow: hidden;

}


/* =========================================================
   MAIN FOOTER
========================================================= */

.footer-main {

    width: 100%;

    display: grid;

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

    align-items: start;

    padding:
        70px
        5.5vw
        45px;

}


/* =========================================================
   COLUMNS
========================================================= */

.footer-column {

    display: flex;

    flex-direction: column;

}


.footer-column h4 {

    margin: 0 0 32px;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.3px;

}


/* =========================================================
   LEFT LINKS
========================================================= */

.footer-links-grid {

    display: grid;

    grid-template-columns:
        100px
        160px;

    gap: 20px;

}


.footer-links {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.footer-links a {

    width: fit-content;
    color: #24100e;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    transition: opacity 0.3s ease;
    font-weight: 400;

}


.footer-links a:hover {

    opacity: 0.55;

}


/* =========================================================
   CENTER
========================================================= */

.footer-center {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

}


/* LOGO */

.footer-logo img {

    display: block;

    width:
        clamp(
            180px,
            16vw,
            270px
        );

    height: auto;

}


/* TAGLINE */

.footer-tagline {

    margin:
        5px
        0
        25px;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    letter-spacing: 3px;

    color:
        rgba(
            36,
            16,
            14,
            0.65
        );

}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-socials {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    margin-top: 10px;

}


.footer-socials a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    color: #24100e;

    text-decoration: none;

    font-size: 20px;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;

}


.footer-socials a:hover {

    transform:
        translateY(-4px);

    opacity: 0.6;

}


/* =========================================================
   RIGHT SIDE
========================================================= */

.footer-connect {

    align-items: flex-end;

}


.footer-connect .footer-links {

    align-items: flex-start;

}


/* =========================================================
   GALLERY
========================================================= */

.footer-gallery {

    display: grid;

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

    gap: 14px;

    padding:
        0
        5.5vw;

}


.footer-gallery img {

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-bottom {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        42px
        20px
        35px;

}


.footer-bottom p {

    margin: 0;

    text-align: center;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            1vw,
            17px
        );

    letter-spacing: 1px;

}


.footer-bottom span {

    margin:
        0
        6px;

}


.footer-bottom a {

    color: #24100e;

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 3px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .footer-main {

        grid-template-columns:
            1fr
            1fr;

        gap: 55px;

        padding:
            65px
            5vw
            40px;

    }


    .footer-center {

        grid-column: 1 / -1;

        grid-row: 1;

        margin-bottom: 10px;

    }


    .footer-explore {

        grid-column: 1;

    }


    .footer-connect {

        grid-column: 2;

        align-items: flex-end;

    }


    .footer-gallery {

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

    }


    /* .footer-gallery img:nth-child(n + 6) {

        display: none;

    } */

}


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

@media (max-width: 767px) {

    .footer-main {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 45px;

        padding:
            60px
            25px
            40px;

    }


    /* CENTER FIRST */

    .footer-center {

        order: 1;

        width: 100%;

    }


    .footer-explore {

        order: 2;

        width: 100%;

        align-items: center;

    }


    .footer-connect {

        order: 3;

        width: 100%;

        align-items: center;

    }


    /* LOGO */

    .footer-logo img {

        width: 190px;

    }


    .footer-tagline {

        font-size: 10px;

        letter-spacing: 2px;

        margin-bottom: 20px;

    }


    /* SOCIALS */

    .footer-socials {

        gap: 18px;

    }


    .footer-socials a {

        width: 34px;

        height: 34px;

        font-size: 18px;

    }


    /* HEADINGS */

    .footer-column h4 {

        margin-bottom: 22px;

        font-size: 15px;

    }


    /* EXPLORE */

    .footer-links-grid {

        grid-template-columns:
            repeat(2, 120px);

        justify-content: center;

        gap: 25px;

    }


    .footer-links {

        gap: 15px;

    }


    .footer-links a {

        font-size: 15px;

    }


    /* RIGHT */

    .footer-connect .footer-links {

        align-items: center;

    }


    /* GALLERY */

    .footer-gallery {

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

        gap: 7px;

        padding:
            0
            15px;

    }


    .footer-gallery img {

        aspect-ratio: 1 / 1;

    }


    /* .footer-gallery img:nth-child(n + 7) {

        display: none;

    } */


    /* COPYRIGHT */

    .footer-bottom {

        padding:
            30px
            20px
            28px;

    }


    .footer-bottom p {

        font-size: 10px;

        line-height: 1.8;

    }

}


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

@media (max-width: 480px) {

    .footer-main {

        padding:
            50px
            18px
            35px;

        gap: 38px;

    }


    .footer-logo img {

        width: 170px;

    }


    .footer-links-grid {

        grid-template-columns:
            105px
            105px;

        gap: 15px;

    }


    .footer-links a {

        font-size: 14px;

    }


    .footer-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;

    }

}

/* end */

/* about us page */


/* ==================================================
ABOUT US HERO CONTENT
================================================== */
section.hero-section.other-pages .hero-logo img {
    filter: invert(1);
}

section.hero-section.other-pages .hero-contact {
    color: #ffffff;
}

section.hero-section.other-pages .hero-menu-btn {
    color: #ffffff;
}

.about-hero-content {
position: absolute;
left: 5%;
bottom: 13%;
z-index: 5;

max-width: 680px;

color: #ffffff;
}


.about-hero-content h1 {
margin: 0 0 18px;

/* font-family: var(--font-heading, serif); */
font-size: clamp(55px, 5vw, 90px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.04em;
}


.about-hero-content p {
margin: 0;

/* max-width: 500px; */

font-family: "Carattere", cursive;
font-size: clamp(16px, 3.15vw, 27px);
font-weight: 100;
line-height: 1.45;

color: #ffffff;
}



/* ==================================================
WHO WE ARE SECTION
================================================== */

.who-we-are-section {
position: relative;

width: 100%;
/* min-height: 100vh; */

background: #f9e7cd;

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

overflow: hidden;

padding: 110px 5%;
}


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

.who-content {

position: relative;

width: min(850px, 58vw);

text-align: center;

z-index: 3;

display: flex;
flex-direction: column;
align-items: center;
}


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

.who-eyebrow {

display: block;

margin-bottom: 34px;

font-family: "Inter", sans-serif;

font-size: 16px;
font-weight: 400;

letter-spacing: 0.02em;

color: #1f0d0d;

opacity: 0;

transform: translateY(20px);

transition:
opacity 0.8s ease,
transform 0.8s cubic-bezier(.22,1,.36,1);
}


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

.who-title-mask {

overflow: hidden;

width: 100%;

margin-bottom: 42px;
}


.who-title {

margin: 0;

/* font-family: var(--font-heading, "Times New Roman", serif); */

font-size: clamp(58px, 5vw, 92px);

font-weight: 400;

line-height: 0.95;

letter-spacing: 6px;

color: #241313;

opacity: 0;

transform: translateY(105%);

transition:
opacity 0.15s ease,
transform 1.15s cubic-bezier(.16,1,.3,1);
}


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

.who-intro {

max-width: 850px;
margin: 0 auto 42px;
font-family: "Inter", sans-serif;
font-size: clamp(15px, 0.25vw, 17px);
line-height: 1.95;
font-weight: 300;
color: #211515;

opacity: 0;

transform: translateY(35px);

transition:
opacity 0.9s ease,
transform 0.9s cubic-bezier(.22,1,.36,1);

transition-delay: 0.35s;
}


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

.who-description {

max-width: 900px;
margin: 0 auto 42px;
font-family: "Inter", sans-serif;
font-size: clamp(15px, 0.25vw, 17px);
line-height: 1.95;
font-weight: 300;
color: #211515;

opacity: 0;

transform: translateY(35px);

transition:
opacity 0.9s ease,
transform 0.9s cubic-bezier(.22,1,.36,1);

transition-delay: 0.5s;
}


/* ==================================================
BUTTON
================================================== */

.who-button {

position: relative;

display: inline-flex;

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

min-width: 230px;

height: 58px;

padding: 0 32px;

background: #241010;

color: #f9e7cd;

text-decoration: none;

font-family: Arial, sans-serif;

font-size: 14px;

letter-spacing: 0.04em;

overflow: hidden;

opacity: 0;

transform: translateY(35px);

transition:
opacity 0.8s ease 0.7s,
transform 0.8s cubic-bezier(.22,1,.36,1) 0.7s,
color 0.35s ease;
}


.who-button::before {

content: "";

position: absolute;

inset: 0;

background: #f9e7cd;

transform: translateY(100%);

transition: transform 0.45s cubic-bezier(.22,1,.36,1);
}


.who-button span {

position: relative;

z-index: 2;
}


.who-button:hover {

color: #241010;
}


.who-button:hover::before {

transform: translateY(0);
}


/* ==================================================
IMAGES
================================================== */

.who-image-wrap {

position: absolute;

width: clamp(190px, 16vw, 200px);
height: clamp(242px, 29vw, 257px);

overflow: hidden;

z-index: 2;

opacity: 0;

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


.who-image {

width: 100%;
height: 100%;

display: block;

object-fit: cover;

transform: scale(1.08);

transition:
transform 1.8s cubic-bezier(.16,1,.3,1);
}


/* LEFT */

.who-image-left {

left: 5.5%;

top: 70%;

transform: translate(-80px, -50%);
}


/* RIGHT */

.who-image-right {

right: 5.5%;

top: 70%;

transform: translate(80px, -50%);
}


/* ==================================================
ACTIVE ANIMATION
================================================== */

.who-we-are-section.is-visible
.who-eyebrow {

opacity: 1;

transform: translateY(0);
}


.who-we-are-section.is-visible
.who-title {

opacity: 1;

transform: translateY(0);

transition-delay: 0.15s;
}


.who-we-are-section.is-visible
.who-intro {

opacity: 1;

transform: translateY(0);
}


.who-we-are-section.is-visible
.who-description {

opacity: 1;

transform: translateY(0);
}


.who-we-are-section.is-visible
.who-button {

opacity: 1;

transform: translateY(0);
}


/* IMAGES ACTIVE */

.who-we-are-section.is-visible
.who-image-left {

opacity: 1;

transform: translate(0, -50%);

transition-delay: 0.15s;
}


.who-we-are-section.is-visible
.who-image-right {

opacity: 1;

transform: translate(0, -50%);

transition-delay: 0.3s;
}


.who-we-are-section.is-visible
.who-image {

transform: scale(1);

transition-delay: 0.35s;
}


/* ==================================================
VERY SUBTLE IMAGE HOVER
================================================== */

.who-image-wrap:hover .who-image {

transform: scale(1.035);
}


/* ==================================================
TABLET
================================================== */

@media (max-width: 1100px) {

.who-we-are-section {

padding: 80px 5%;
}

.who-content {

width: 62vw;
}

.who-image-left {

left: 2.5%;
}

.who-image-right {

right: 2.5%;
}

.who-intro {

max-width: 700px;
}

.who-description {

max-width: 700px;
}
}


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

@media (max-width: 767px) {

.who-we-are-section {

min-height: auto;

padding: 100px 22px 90px;

display: flex;
flex-direction: column;

overflow: hidden;
}


.who-content {

width: 100%;

order: 2;
}


/* Move images back into normal flow */

.who-image-wrap {

position: relative;

top: auto;
left: auto;
right: auto;

width: min(72vw, 280px);

height: min(95vw, 360px);

transform: translateY(45px);

margin: 0 auto 55px;

flex-shrink: 0;
}


.who-image-left {

order: 1;
}


.who-image-right {

order: 3;

margin-top: 55px;

margin-bottom: 0;
}


.who-we-are-section.is-visible
.who-image-left,
.who-we-are-section.is-visible
.who-image-right {

transform: translateY(0);
}


.who-eyebrow {

font-size: 14px;

margin-bottom: 24px;
}


.who-title-mask {

margin-bottom: 30px;
}


.who-title {

font-size: clamp(48px, 13vw, 72px);

letter-spacing: -0.045em;
}


.who-intro {

font-size: 16px;

line-height: 1.7;

margin-bottom: 30px;
}


.who-description {

font-size: 14px;

line-height: 1.8;

margin-bottom: 32px;
}


.who-button {

min-width: 210px;

height: 55px;
}
}


/* ==================================================
REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

.who-eyebrow,
.who-title,
.who-intro,
.who-description,
.who-button,
.who-image-wrap,
.who-image {

transition: none !important;

transform: none !important;

opacity: 1 !important;
}
}



/* ==================================================
OUR STORY SECTION
================================================== */

.our-story-section {

position: relative;

width: 100%;
height: 100vh;

display: flex;

background: #241010;

overflow: hidden;
margin-bottom: 80px;
}


/* ==================================================
LEFT VISUAL
================================================== */

.our-story-visual {

position: relative;

width: 50%;
height: 100vh;

flex-shrink: 0;

overflow: hidden;

background: #160909;
}


/* ==================================================
IMAGE WRAPPER
================================================== */

.our-story-image-wrap {

position: absolute;

inset: 0;

overflow: hidden;
}


/* ==================================================
IMAGE
================================================== */

.our-story-image {

width: 100%;
height: 100%;

display: block;

object-fit: cover;

transform: scale(1.08);

opacity: 0;

transition:
transform 1.8s cubic-bezier(.16, 1, .3, 1),
opacity 1.2s ease;
}


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

.our-story-content {

width: 50%;
height: 100vh;

/* overflow-y: auto;
overflow-x: hidden; */

scroll-behavior: smooth;

scrollbar-width: thin;
scrollbar-color: rgba(249, 231, 205, 0.45) transparent;

overscroll-behavior: contain;
}


/* Chrome / Safari scrollbar */

.our-story-content::-webkit-scrollbar {

width: 5px;
}


.our-story-content::-webkit-scrollbar-track {

background: transparent;
}


.our-story-content::-webkit-scrollbar-thumb {

background: rgba(249, 231, 205, 0.4);

border-radius: 20px;
}


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

.our-story-inner {

min-height: 100%;

padding: 105px 10% 100px;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

box-sizing: border-box;
}


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

.our-story-heading {

width: 100%;

margin-bottom: 62px;
}


.our-story-heading h2 {

margin: 0;

color: #f9e7cd;

/* font-family: var(
--font-heading,
"Times New Roman",
serif
); */

font-size: clamp(50px, 4vw, 72px);

font-weight: 400;

line-height: 1;

letter-spacing: 3px;
}


/* ==================================================
TEXT BLOCKS
================================================== */

.our-story-block {

width: 100%;

max-width: 620px;

margin-bottom: 72px;
}


.our-story-block p {

margin: 0;

color: #f2dfc5;

font-family: Arial, sans-serif;

font-size: clamp(16px, 1.15vw, 18px);

line-height: 1.95;

font-weight: 300;
}


/* ==================================================
FINAL LINE
================================================== */

.our-story-ending {

width: 100%;

margin-top: auto;

padding-top: 40px;
}


.our-story-ending p {

margin: 0;

color: #f2dfc5;

font-family: Arial, sans-serif;

font-size: clamp(15px, 1vw, 18px);

line-height: 1.6;

letter-spacing: 0.02em;
}


/* ==================================================
STORY REVEAL ANIMATION
================================================== */

.story-reveal {

opacity: 0;

transform: translateY(55px);

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


.our-story-section.is-visible
.story-reveal {

opacity: 1;

transform: translateY(0);
}


/* ==================================================
STAGGER
================================================== */

.our-story-section.is-visible
.our-story-heading {

transition-delay: 0.15s;
}


.our-story-section.is-visible
.our-story-block:nth-of-type(2) {

transition-delay: 0.35s;
}


.our-story-section.is-visible
.our-story-block:nth-of-type(3) {

transition-delay: 0.5s;
}


.our-story-section.is-visible
.our-story-block:nth-of-type(4) {

transition-delay: 0.65s;
}


.our-story-section.is-visible
.our-story-ending {

transition-delay: 0.8s;
}


/* ==================================================
IMAGE ACTIVE STATE
================================================== */

.our-story-section.is-visible
.our-story-image {

opacity: 1;

transform: scale(1);
}


/* ==================================================
SUBTLE IMAGE EFFECT WHILE SECTION IS ACTIVE
================================================== */

.our-story-section.is-visible
.our-story-image-wrap::after {

content: "";

position: absolute;

inset: 0;

pointer-events: none;

background:
linear-gradient(
180deg,
rgba(20, 7, 7, 0.04),
rgba(20, 7, 7, 0.12)
);
}


/* ==================================================
TABLET
================================================== */

@media (max-width: 991px) {

.our-story-inner {

padding-left: 7%;
padding-right: 7%;
}


.our-story-heading {

margin-bottom: 65px;
}


.our-story-block {

margin-bottom: 75px;
}
}


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

@media (max-width: 767px) {

.our-story-section {

height: auto;

min-height: auto;

display: flex;

flex-direction: column;

overflow: visible;
}


/* IMAGE */

.our-story-visual {

width: 100%;

height: 75vh;

min-height: 480px;

position: relative;

flex-shrink: 0;
}


.our-story-image-wrap {

position: absolute;

inset: 0;
}


/* CONTENT */

.our-story-content {

width: 100%;

height: auto;

overflow: visible;

scrollbar-width: none;
}


.our-story-content::-webkit-scrollbar {

display: none;
}


.our-story-inner {

min-height: auto;

padding: 85px 24px 90px;
}


.our-story-heading {

margin-bottom: 55px;
}


.our-story-heading h2 {

font-size: clamp(46px, 14vw, 68px);
}


.our-story-block {

max-width: 600px;

margin-bottom: 65px;
}


.our-story-block p {

font-size: 15px;

line-height: 1.8;
}


.our-story-ending {

margin-top: 10px;

padding-top: 20px;
}


.our-story-ending p {

font-size: 14px;

line-height: 1.7;
}


/* Mobile animation */

.story-reveal {

transform: translateY(35px);
}
}


/* ==================================================
REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

.story-reveal,
.our-story-image {

opacity: 1 !important;

transform: none !important;

transition: none !important;
}
}

/* ==================================================
INDIVIDUAL STORY SCROLL REVEAL
================================================== */

.our-story-content .story-reveal {

opacity: 0.25;

transform: translateY(35px);

transition:
opacity 0.8s ease,
transform 0.9s cubic-bezier(.16, 1, .3, 1);
}


.our-story-content .story-reveal.story-active {

opacity: 1;

transform: translateY(0);
}


/* Keep initial section animation working */

.our-story-section.is-visible
.our-story-heading.story-reveal {

opacity: 1;

transform: translateY(0);
}
/* end */

/* weddings */
/* ==================================================
   SERVICES SECTION
================================================== */

.about-hero-content.services-pages.weddings h1, .about-hero-content.services-pages.weddings p {
    color: #F8E8CE !important;
}

.services-section {
    position: relative;
    width: 100%;
    background: #f8e7ce;
    overflow: hidden;
}

.services-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 58px 5.2% 70px;
}


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

.services-intro {
    width: 100%;
    text-align: center;
    margin-bottom: 68px;
}

.services-heading {
    margin: 0;

    color: #21100e;

    /* font-family: "Cormorant Garamond", Georgia, serif; */
    font-size: clamp(48px, 4.25vw, 70px);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.035em;

    opacity: 0;
    transform: translateY(35px);
}

.services-description {
    max-width: 720px;
    margin: 29px auto 0;

    color: #514843;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 200;
    line-height: 1.55;

    opacity: 0;
    transform: translateY(25px);
}


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

.services-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 282px);

    margin: 0 auto;
}


/* ==================================================
   SERVICE CARD
================================================== */

.service-card {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;

    padding: 35px 55px;

    box-sizing: border-box;

    opacity: 0;
    transform: translateY(35px);

    will-change: transform, opacity;
}


/* ==================================================
   DARK / LIGHT COLORS
================================================== */

.service-card-dark {
    background: #21100e;
    color: #F8E8CE;
}

.service-card-light {
    background: #f8e7ce;
    color: #211111;
}


.service-card-dark p {
    color: #F8E8CE !important;
}
/* ==================================================
   CARD CONTENT
================================================== */

.service-card-content {
    width: 100%;
}

.service-number {
    display: block;

    margin-bottom: 23px;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.service-card h3 {
    margin: 0 0 23px;

    /* font-family: "Cormorant Garamond", Georgia, serif; */
    font-size: clamp(27px, 2.1vw, 36px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.025em;
}

.service-card p {
    max-width: 400px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 200;
    line-height: 1.5;
    letter-spacing: .3px;
    color: #2e2e2e;
}


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

.service-card {
    transition:
        transform 0.5s cubic-bezier(.22, .61, .36, 1),
        box-shadow 0.5s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card-dark:hover {
    box-shadow: 0 12px 35px rgba(33, 16, 14, 0.12);
}

.service-card-light:hover {
    box-shadow: 0 12px 35px rgba(33, 16, 14, 0.08);
}


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

@media (max-width: 991px) {

    .services-inner {
        padding: 60px 5% 65px;
    }

    .services-intro {
        margin-bottom: 50px;
    }

    .services-heading {
        font-size: clamp(42px, 7vw, 60px);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .service-card {
        min-height: 270px;
        padding: 45px 40px;
    }

}


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

@media (max-width: 767px) {

    .services-section {
        overflow-x: hidden;
    }

    .services-inner {
        padding: 55px 20px 60px;
    }

    .services-intro {
        margin-bottom: 42px;
    }

    .services-heading {
        font-size: clamp(40px, 11vw, 52px);
        line-height: 0.98;
        letter-spacing: -0.035em;
    }

    .services-description {
        max-width: 340px;
        margin-top: 23px;

        font-size: 13px;
        line-height: 1.6;
    }

    .services-desktop-break {
        display: none;
    }

    .services-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        width: 100%;
    }

    .service-card {
        width: 100%;
        min-height: 245px;

        padding: 40px 30px;

        transform: translateY(30px);
    }

    .service-number {
        font-size: 15px;
        margin-bottom: 19px;
    }

    .service-card h3 {
        font-size: 31px;
        line-height: 1;
        margin-bottom: 20px;
    }

    .service-card p {
        max-width: 330px;
        font-size: 13px;
        line-height: 1.55;
    }

    /*
       No hover movement on touch devices.
    */

    .service-card:hover {
        transform: none;
        box-shadow: none;
    }

}


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

@media (max-width: 420px) {

    .services-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .service-card {
        min-height: 235px;
        padding: 35px 25px;
    }

    .service-card h3 {
        font-size: 28px;
    }

}

/* ==================================================
   FEATURED GALLERY SECTION
================================================== */

.featured-gallery-section {
    position: relative;
    width: 100%;

    background: #f8e7ce;

    overflow: hidden;
}


/* ==================================================
   GALLERY INNER
================================================== */

.featured-gallery-inner {
    width: calc(100% - 9.5%);
    max-width: 1350px;

    margin: 0 auto;

    padding: 12px 0 40px;

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

    overflow: hidden;
}


/* ==================================================
   GALLERY ITEM
================================================== */

.featured-gallery-item {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;
}


/* ==================================================
   IMAGE WRAPPER
================================================== */

.featured-gallery-image-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 0.92 / 1;

    overflow: hidden;
}


/* ==================================================
   IMAGE
================================================== */

.featured-gallery-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    will-change: transform, opacity, clip-path;

    transform: scale(1.06);
}


/* ==================================================
   DESKTOP IMAGE POSITIONING
================================================== */

/*
   Both images touch each other exactly like
   the reference design.
*/

.featured-gallery-item:first-child
.featured-gallery-image {
    object-position: center center;
}

.featured-gallery-item:last-child
.featured-gallery-image {
    object-position: center center;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991px) {

    .featured-gallery-inner {
        width: calc(100% - 8%);

        padding-top: 65px;
        padding-bottom: 35px;
    }

}


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

@media (max-width: 767px) {

    .featured-gallery-section {
        overflow-x: hidden;
    }

    .featured-gallery-inner {
        width: calc(100% - 32px);

        padding-top: 45px;
        padding-bottom: 30px;

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

        gap: 0;
    }

    .featured-gallery-item {
        width: 100%;
    }

    .featured-gallery-image-wrap {
        width: 100%;
        aspect-ratio: 0.82 / 1;
    }

    /*
       The second image stays directly below
       the first one.
    */

    .featured-gallery-item + .featured-gallery-item {
        margin-top: 0;
    }

}


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

@media (max-width: 420px) {

    .featured-gallery-inner {
        width: calc(100% - 24px);

        padding-top: 35px;
        padding-bottom: 25px;
    }

}

/* ==================================================
   OUR PROCESS SECTION
================================================== */

.process-section {
    position: relative;

    width: 100%;

    background: #24100e;

    color: #f7e6cf;

    overflow: hidden;
}


/* ==================================================
   PROCESS INNER
================================================== */

.process-inner {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 48px 5.2% 20px;

    box-sizing: border-box;
}


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

.process-label {
    width: 100%;

    margin-bottom: 38px;

    text-align: center;

    color: #f7e6cf;

    /* font-family: "Cormorant Garamond", Georgia, serif; */

    font-size: 17px;
    font-weight: 400;

    line-height: 1;

    opacity: 0;
    transform: translateY(18px);
}


/* ==================================================
   PROCESS LIST
================================================== */

.process-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 35px;
}


/* ==================================================
   PROCESS ITEM
================================================== */

.process-item {
    position: relative;

    width: 100%;

    min-height: 100px;

    display: flex;

    align-items: flex-start;

    box-sizing: border-box;

    opacity: 0;
    transform: translateY(35px);

    will-change: transform, opacity;
}


/* ==================================================
   LEFT ITEMS
================================================== */

.process-item-left {
    justify-content: center;

    /* padding-right: 115px; */
}

.process-item-left .process-number {
    position: absolute;

    left: 29.5%;

    top: 0;
}


/* ==================================================
   RIGHT ITEMS
================================================== */

.process-item-right {
    justify-content: center;

    /* padding-left: 115px; */
}

.process-item-right .process-number {
    position: absolute;
    right: 29.5%;
    top: 0;
}


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

.process-content {
    width: 100%;

    max-width: 750px;

    text-align: center;
}


/* ==================================================
   PROCESS NUMBER
================================================== */

.process-number {
    color: #f7e6cf;

    font-family: "Inter", sans-serif;

    font-size: 18px;
    font-weight: 300;

    line-height: 1;

    white-space: nowrap;
}


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

.process-title {
    margin: 0;

    color: #F8E8CE;

    /* font-family: "Cormorant Garamond", Georgia, serif; */

    font-size: clamp(52px, 3.2vw, 82px);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: 2px;

    white-space: nowrap;
}


/* ==================================================
   PROCESS DESCRIPTION
================================================== */

.process-description {
    margin: 0 auto;

    max-width: 760px;

    color: #F8E8CE;

    font-family: "Inter", sans-serif;

    font-size: 15px;
    font-weight: 200;

    line-height: 1.5;

    letter-spacing: 0.01em;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991px) {

    .process-inner {
        padding: 45px 5% 70px;
    }

    .process-list {
        gap: 52px;
    }

    .process-item-left {
        padding-right: 85px;
    }

    .process-item-right {
        padding-left: 85px;
    }

    .process-item-left .process-number {
        left: 24%;
    }

    .process-item-right .process-number {
        right: 24%;
    }

    .process-title {
        font-size: clamp(52px, 7vw, 72px);
    }

}


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

@media (max-width: 767px) {

    .process-section {
        overflow-x: hidden;
    }

    .process-inner {
        width: 100%;

        padding: 42px 20px 65px;
    }

    .process-label {
        margin-bottom: 50px;

        font-size: 15px;
    }

    .process-list {
        gap: 55px;
    }

    /*
       Everything becomes centered on mobile.
       No left/right positioning is used.
    */

    .process-item,
    .process-item-left,
    .process-item-right {
        width: 100%;

        min-height: auto;

        display: flex;
        flex-direction: column;

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

        padding: 0;

        text-align: center;
    }


    /* Number moves above the title */

    .process-item-left .process-number,
    .process-item-right .process-number {
        position: static;

        order: 1;

        margin-bottom: 14px;
    }


    .process-content {
        order: 2;

        width: 100%;
        max-width: 100%;

        text-align: center;
    }


    .process-title {
        font-size: clamp(47px, 13vw, 65px);

        line-height: 0.92;

        white-space: normal;

        letter-spacing: -0.04em;
    }


    .process-description {
        max-width: 340px;

        margin-top: 20px;

        font-size: 13px;

        line-height: 1.55;
    }

}


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

@media (max-width: 420px) {

    .process-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .process-list {
        gap: 50px;
    }

    .process-title {
        font-size: 45px;
    }

    .process-description {
        max-width: 310px;

        font-size: 12.5px;
    }

}

/* ==================================================
   WEDDING GALLERY SECTION
================================================== */

.wedding-gallery-section {
    position: relative;

    width: 100%;

    background: #f8e7ce;

    overflow: hidden;
}


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

.wedding-gallery-grid {

    /*
       Main width of gallery.
       Matches the spacious editorial layout.
    */
    width: calc(100% - 9.2%);

    max-width: 1450px;

    margin: 0 auto;

    padding: 58px 0 70px;

    /*
       12-column grid.

       This gives us:

       ROW 1
       8 columns + 4 columns

       ROW 2
       4 columns + 4 columns + 4 columns
    */
    display: grid;

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

    grid-template-rows: 492px 492px;

    gap: 5px;

    box-sizing: border-box;
}


/* ==================================================
   ALL GALLERY ITEMS
================================================== */

.wedding-gallery-item {

    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    box-sizing: border-box;
}


/* ==================================================
   ROW 1
================================================== */


/*
   FIRST IMAGE
   col-md-8
*/

.wedding-gallery-large {

    grid-column: 1 / 9;

    grid-row: 1;
}


/*
   SECOND IMAGE
   col-md-4
*/

.wedding-gallery-top-right {

    grid-column: 9 / 13;

    grid-row: 1;
}


/* ==================================================
   ROW 2
================================================== */


/*
   THIRD IMAGE
   col-md-4
*/

.wedding-gallery-bottom-left {

    grid-column: 1 / 5;

    grid-row: 2;
}


/*
   FOURTH IMAGE
   col-md-4
*/

.wedding-gallery-bottom-center {

    grid-column: 5 / 9;

    grid-row: 2;
}


/*
   FIFTH IMAGE
   col-md-4
*/

.wedding-gallery-bottom-right {

    grid-column: 9 / 13;

    grid-row: 2;
}


/* ==================================================
   IMAGE WRAPPER
================================================== */

.wedding-gallery-image-wrap {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ead8bd;
}


/* ==================================================
   GALLERY IMAGE
================================================== */

.wedding-gallery-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    /*
       Animation preparation
    */
    opacity: 0;

    transform: scale(1.07);

    clip-path: inset(7% 0% 7% 0%);

    will-change:
        transform,
        opacity,
        clip-path;
}


/* ==================================================
   IMAGE POSITIONING
================================================== */

/*
   You can individually adjust these later
   if a particular photo needs a different crop.
*/

.wedding-gallery-large
.wedding-gallery-image {

    object-position: center center;
}


.wedding-gallery-top-right
.wedding-gallery-image {

    object-position: center center;
}


.wedding-gallery-bottom-left
.wedding-gallery-image {

    object-position: center center;
}


.wedding-gallery-bottom-center
.wedding-gallery-image {

    object-position: center center;
}


.wedding-gallery-bottom-right
.wedding-gallery-image {

    object-position: center center;
}


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

@media (min-width: 992px) {

    .wedding-gallery-item {
        cursor: pointer;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991px) {

    .wedding-gallery-grid {

        width: calc(100% - 7%);

        padding-top: 45px;
        padding-bottom: 55px;

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

        grid-template-rows:
            390px
            390px;

        gap: 4px;
    }


    /*
       Keep the exact same
       8 / 4 structure on tablet.
    */

    .wedding-gallery-large {

        grid-column: 1 / 9;

        grid-row: 1;
    }


    .wedding-gallery-top-right {

        grid-column: 9 / 13;

        grid-row: 1;
    }


    /*
       Bottom:
       4 / 4 / 4
    */

    .wedding-gallery-bottom-left {

        grid-column: 1 / 5;

        grid-row: 2;
    }


    .wedding-gallery-bottom-center {

        grid-column: 5 / 9;

        grid-row: 2;
    }


    .wedding-gallery-bottom-right {

        grid-column: 9 / 13;

        grid-row: 2;
    }

}


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

@media (max-width: 767px) {

    .wedding-gallery-section {

        width: 100%;

        overflow-x: hidden;
    }


    .wedding-gallery-grid {

        width: calc(100% - 30px);

        margin: 0 auto;

        padding-top: 35px;
        padding-bottom: 45px;

        display: grid;

        /*
           One column on mobile
        */

        grid-template-columns: 1fr;

        grid-template-rows: none;

        gap: 4px;
    }


    /*
       Reset desktop grid positions
    */

    .wedding-gallery-large,
    .wedding-gallery-top-right,
    .wedding-gallery-bottom-left,
    .wedding-gallery-bottom-center,
    .wedding-gallery-bottom-right {

        grid-column: 1;

        grid-row: auto;

        width: 100%;

        min-width: 0;
    }


    /*
       Mobile image height
    */

    .wedding-gallery-image-wrap {

        width: 100%;

        height: auto;

        aspect-ratio: 0.82 / 1;
    }


    .wedding-gallery-image {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transform: scale(1.05);
    }

}


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

@media (max-width: 420px) {

    .wedding-gallery-grid {

        width: calc(100% - 22px);

        padding-top: 28px;

        padding-bottom: 35px;

        gap: 3px;
    }


    .wedding-gallery-image-wrap {

        aspect-ratio: 0.82 / 1;
    }

}
/* end */

/* portfolio page */
section.portfolio-page {
    padding: 40px;
}

.portfolio-pg-img img {
    width: 100%;
    height: 620px;
    object-fit: cover;
}

.portfolio-pg-img.f-w img {
    height: 750px;
}

section.portfolio-page .col-md-8 {
    padding: 0;
}

section.portfolio-page .col-md-4 {
    padding: 0;
}

section.portfolio-page .col-md-12 {
    padding: 0;
}

.portfolio-pg-img {
    margin-bottom: 12px;
    padding: 0 6px;
}
/* =========================================
   PORTFOLIO SCROLL ANIMATIONS
========================================= */

/* Default: images are ALWAYS visible */
.portfolio-page .portfolio-pg-img {
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
}

/* Hide only when JavaScript has initialized */
html.portfolio-animations-ready
.portfolio-page .portfolio-pg-img:not(.portfolio-visible) {
    opacity: 0;
    transform: translateY(40px);
}

/* Reveal animation */
.portfolio-page .portfolio-pg-img.portfolio-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Image zoom */
.portfolio-page .portfolio-pg-img img {
    display: block;
    width: 100%;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-page .portfolio-pg-img:hover img {
    transform: scale(1.045);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .portfolio-page .portfolio-pg-img,
    .portfolio-page .portfolio-pg-img img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================
   AVELUXE — SHARED HERO ENTRANCE ANIMATION
   Scoped only to the hero header and hero content
========================================================== */

/* Initial states are enabled only when JavaScript runs */
.hero-section.hero-entrance-ready .hero-logo,
.hero-section.hero-entrance-ready .hero-contact,
.hero-section.hero-entrance-ready .hero-menu-btn,
.hero-section.hero-entrance-ready .about-hero-content.services-pages h1,
.hero-section.hero-entrance-ready .about-hero-content.services-pages p {
    opacity: 0;
}

/* Logo: soft fade and subtle scale */
.hero-section.hero-entrance-start .hero-logo {
    animation: aveluxeHeroLogoReveal 1.1s cubic-bezier(.22, 1, .36, 1) 0.1s both;
}

/* Contact: smooth entrance from the left */
.hero-section.hero-entrance-start .hero-contact {
    animation: aveluxeHeroContactReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.25s both;
}

/* Menu: smooth entrance from the right */
.hero-section.hero-entrance-start .hero-menu-btn {
    animation: aveluxeHeroMenuReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.35s both;
}

/* Hero heading */
.hero-section.hero-entrance-start .about-hero-content.services-pages h1 {
    animation: aveluxeHeroTextReveal 1.1s cubic-bezier(.22, 1, .36, 1) 0.35s both;
}

/* Hero description follows the heading */
.hero-section.hero-entrance-start .about-hero-content.services-pages p {
    animation: aveluxeHeroTextReveal 1.1s cubic-bezier(.22, 1, .36, 1) 0.55s both;
}

/* Animation keyframes */
@keyframes aveluxeHeroLogoReveal {
    from {
        opacity: 0;
        scale: 0.96;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes aveluxeHeroContactReveal {
    from {
        opacity: 0;
        translate: -14px 0;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes aveluxeHeroMenuReveal {
    from {
        opacity: 0;
        translate: 14px 0;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes aveluxeHeroTextReveal {
    from {
        opacity: 0;
        translate: 0 18px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* Accessibility: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-section.hero-entrance-ready .hero-logo,
    .hero-section.hero-entrance-ready .hero-contact,
    .hero-section.hero-entrance-ready .hero-menu-btn,
    .hero-section.hero-entrance-ready .about-hero-content.services-pages h1,
    .hero-section.hero-entrance-ready .about-hero-content.services-pages p {
        opacity: 1;
        animation: none !important;
        translate: none !important;
        scale: 1 !important;
    }
}

/* end */

/* proposals page */

.about-hero-content.services-pages {
    position: absolute;

    left: 50%;
    top: 78%;

    transform: translate(-50%, -50%);

    width: 100%;
    max-width: 950px;

    padding: 0 30px;

    text-align: center;

    z-index: 5;
    color: #F8E8CE;
    box-sizing: border-box;
}


/* Heading */

.about-hero-content.services-pages h1 {
    margin: 0 0 25px;

    /* color: #ffffff; */

    text-align: center;

    /* font-family: "Cormorant Garamond", Georgia, serif; */

    font-size: clamp(55px, 6vw, 95px);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.035em;
}


/* Description */

.about-hero-content.services-pages p {
    max-width: 600px;

    margin: 0 auto;

    color: #F8E8CE;

    text-align: center;

    font-family: "Carattere", cursive;

    font-size: clamp(24px, 1.8vw, 34px);

    font-weight: 400;

    line-height: 1.09;
}


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

@media (max-width: 767px) {

    .about-hero-content.services-pages {
        width: 100%;

        max-width: 100%;

        padding: 0 25px;
    }

    .about-hero-content.services-pages h1 {
        font-size: 52px;

        margin-bottom: 20px;
    }

    .about-hero-content.services-pages p {
        max-width: 340px;

        font-size: 23px;

        line-height: 1.4;
    }

}


/* ==========================================================
AVELUXE EVENTS
PROPOSAL EXPERIENCE SECTION
========================================================== */

.proposal-section {

    width: 100%;

    margin: 0;

    padding: 20px 0 70px;

    overflow: hidden;

    background: #F8E8CE;

    color: #241010;
}


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

.proposal-intro {

    width: 100%;

    min-height: 265px;

    padding: 66px 30px 55px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    border-bottom: 1px solid rgba(36, 16, 16, 0.55);
}


.proposal-intro h2 {

    margin: 0;



    font-size: clamp(48px, 4.15vw, 72px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.025em;

    color: #241010;
}


.proposal-intro p {

    margin: 25px 0 0;

    max-width: 700px;

    

    font-size: 14px;

    line-height: 1.45;

    letter-spacing: 0.015em;

    color: #4b4541;
}


/* ==========================================================
MAIN TWO-COLUMN AREA
========================================================== */

.proposal-main {

    width: 100%;

    display: grid;

    grid-template-columns: 51.3% 48.7%;

    align-items: stretch;
}


/* ==========================================================
LEFT SIDE
========================================================== */
.proposal-left {
    min-width: 0;
    padding: 51px 7.8vw 30px;
    box-sizing: border-box;
    background: #F8E8CE;

    display: flex;
    flex-direction: column;

    /* Center everything horizontally and vertically */
    align-items: center;
    justify-content: center;

    /* Allow the panel to stretch with the proposal content */
    align-self: stretch;
}


.proposal-left h3 {

    margin: 0 0 24px;
    letter-spacing: 2px;


    font-size: clamp(28px, 2.05vw, 38px);

    font-weight: 400;

    line-height: 1.1;

    text-align: center;

    color: #241010;
}


/* ==========================================================
IMAGE
========================================================== */

.proposal-image-wrap {

    width: 100%;

    max-width: 470px;

    aspect-ratio: 470 / 585;

    overflow: hidden;
}


.proposal-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


/* ==========================================================
PRICE + BOOK
========================================================== */

.proposal-bottom {

    width: 100%;

    max-width: 470px;

    margin-top: 18px;
    box-sizing: border-box;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
    font-family: "Inter";
    font-weight: 600;
}


.proposal-price {

    

    font-size: 15px;

    line-height: 1.3;

    color: #241010;
}


.proposal-book {

    position: relative;

    display: inline-block;

    padding-bottom: 5px;

    

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    color: #241010;

    text-decoration: none;

    white-space: nowrap;
}


.proposal-book::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background: #241010;

    transform-origin: left;

    transition: transform 0.35s ease;
}


.proposal-book:hover::after {

    transform: scaleX(0.55);
}


/* ==========================================================
RIGHT SIDE
========================================================== */

.proposal-right {

    min-width: 0;

    padding: 27px 3.5vw;

    box-sizing: border-box;

    background: #211111;

    color: #F8E8CE;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.proposal-package-title {

    margin: 0;



    font-size: clamp(43px, 3.15vw, 60px);

    font-weight: 400;

    line-height: 1.25;

    letter-spacing: 0.9px;
    color: #F8E8CE;
    text-transform: uppercase;
}


/* ==========================================================
INCLUDES
========================================================== */

.proposal-includes {
    /* font-weight: 300; */
    margin-top: 12px;
    font-family: "Inter";
}


.proposal-includes h4 {

    margin: 0 0 25px;

    

    font-size: 12px;

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: 0.07em;

    color: #F8E8CE;
}


.proposal-includes ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 21px;
}


.proposal-includes li {

    display: grid;

    grid-template-columns: 16px 1fr;

    column-gap: 5px;

    align-items: start;
font-weight: 300;
    

    font-size: 14px;

    line-height: 1.45;

    letter-spacing: 0.005em;

    color: #F8E8CE;
}


.proposal-bullet {

    font-size: 11px;

    line-height: 1.5;

    color: #F8E8CE;
}


/* ==========================================================
CLOSING TEXT
========================================================== */

.proposal-closing {

    margin: 20px 0 0;

    
    font-family: "Inter";
    font-size: 14px;

    font-weight: 400;

    line-height: 1.8;

    color: #F8E8CE;
}

.proposal-closing span {
    font-weight: 200;
}

p.proposal-description {
    font-family: "Inter";
    font-weight: 300;
    font-size: 13px;
    line-height: 1.8;
}

p.proposal-ending {
    font-family: "Inter";
    font-size: 14px;
    margin-top: 10px;
    font-weight: 400;
}


/* ==========================================================
AVELUXE — PROPOSAL SCROLL ANIMATIONS
Only affects the proposal section
========================================================== */

/* Keep everything visible by default.
Elements are hidden only after JavaScript initializes. */

html.proposal-scroll-ready .proposal-section .proposal-intro h2,
html.proposal-scroll-ready .proposal-section .proposal-intro p,
html.proposal-scroll-ready .proposal-section .proposal-main .proposal-left>*,
html.proposal-scroll-ready .proposal-section .proposal-main .proposal-right>* {
    opacity: 0;
    transform: translateY(35px);
}

/* Intro heading reveal */

html.proposal-scroll-ready .proposal-intro.is-in-view h2 {
    animation: proposalTextReveal 1s cubic-bezier(.22, 1, .36, 1) 0s forwards;
}

html.proposal-scroll-ready .proposal-intro.is-in-view p {
    animation: proposalTextReveal 1s cubic-bezier(.22, 1, .36, 1) .18s forwards;
}

/* Left side: heading, image, price and booking button */

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-left>* {
    animation: proposalTextReveal 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-left> :nth-child(1) {
    animation-delay: .05s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-left> :nth-child(2) {
    animation: proposalImageReveal 1.35s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-left> :nth-child(3) {
    animation-delay: .45s;
}

/* Right side: title, inclusions and closing text */

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-right>* {
    animation: proposalTextReveal 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-right> :nth-child(1) {
    animation-delay: .12s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-right> :nth-child(2) {
    animation-delay: .25s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-right> :nth-child(3) {
    animation-delay: .38s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-right> :nth-child(4) {
    animation-delay: .5s;
}

/* Package bullet points */

html.proposal-scroll-ready .proposal-section .proposal-includes li {
    opacity: 0;
    transform: translateY(15px);
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-includes li {
    animation: proposalTextReveal .75s cubic-bezier(.22, 1, .36, 1) forwards;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-includes li:nth-child(1) {
    animation-delay: .45s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-includes li:nth-child(2) {
    animation-delay: .55s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-includes li:nth-child(3) {
    animation-delay: .65s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-includes li:nth-child(4) {
    animation-delay: .75s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-includes li:nth-child(5) {
    animation-delay: .85s;
}

html.proposal-scroll-ready .proposal-main.is-in-view .proposal-includes li:nth-child(6) {
    animation-delay: .95s;
}

/* Text animation */

@keyframes proposalTextReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image animation */

@keyframes proposalImageReveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.96);
        clip-path: inset(8% 0 8% 0);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        clip-path: inset(0 0 0 0);
    }
}

/* Accessibility: respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {

    html.proposal-scroll-ready .proposal-section .proposal-intro h2,
    html.proposal-scroll-ready .proposal-section .proposal-intro p,
    html.proposal-scroll-ready .proposal-section .proposal-main .proposal-left>*,
    html.proposal-scroll-ready .proposal-section .proposal-main .proposal-right>*,
    html.proposal-scroll-ready .proposal-section .proposal-includes li {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}



/* ==========================================================
TABLET
========================================================== */

@media (max-width: 991px) {

    .proposal-main {

        grid-template-columns: 1fr;
    }


    .proposal-left {

        padding: 70px 7vw 55px;
    }


    .proposal-right {

        padding: 70px 7vw 65px;
    }


    .proposal-package-title {

        max-width: 750px;
    }


    .proposal-includes {

        max-width: 750px;
    }


    .proposal-closing {

        max-width: 750px;
    }

}


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

@media (max-width: 767px) {

    .proposal-intro {

        min-height: auto;

        padding: 55px 22px 48px;
    }


    .proposal-intro h2 {

        font-size: 42px;

        line-height: 1.05;
    }


    .proposal-intro p {

        margin-top: 20px;

        font-size: 13px;
    }


    .proposal-desktop-break {

        display: none;
    }


    .proposal-left {

        padding: 55px 24px 45px;
    }


    .proposal-left h3 {

        margin-bottom: 22px;

        font-size: 29px;
    }


    .proposal-image-wrap {

        width: 100%;

        max-width: 390px;
    }


    .proposal-bottom {

        max-width: 390px;

        margin-top: 16px;
    }


    .proposal-price,
    .proposal-book {

        font-size: 13px;
    }


    .proposal-right {

        padding: 58px 24px 55px;
    }


    .proposal-package-title {

        font-size: 40px;

        line-height: 1.1;
    }


    .proposal-includes {

        margin-top: 35px;
    }


    .proposal-includes ul {

        gap: 18px;
    }


    .proposal-includes li {

        font-size: 13px;

        line-height: 1.45;
    }


    .proposal-closing {

        margin-top: 32px;

        font-size: 13px;
    }

}


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

@media (max-width: 400px) {

    .proposal-intro h2 {

        font-size: 36px;
    }


    .proposal-package-title {

        font-size: 35px;
    }


    .proposal-bottom {

        gap: 12px;
    }

}

/* ==========================================
PROPOSAL HIGHLIGHT
========================================== */

.proposal-highlight {
    color: #d99a00;
    font-weight: 500;
    margin-top: 26px;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* other pages header styles  */
section.hero-section.other-pagess .hero-contact, section.hero-section.other-pagess .hero-menu-btn {
    color: #F8E8CE;
}

/* section.hero-section.other-pagess .hero-logo img {
    filter: invert(1);
} */

/* contact us page */


    .hero-section.contact-us-page .about-hero-content.services-pages h1, .hero-section.contact-us-page .about-hero-content.services-pages p {
        color: #211111;
    }
    /* ==================================================
   CONTACT FORM SECTION
================================================== */

.contact-form-section {

width: 100%;

min-height: 100vh;

display: grid;

grid-template-columns: 47% 53%;

background: #F8E8CE;

overflow: hidden;
}


/* ==================================================
LEFT IMAGE
================================================== */

.contact-form-image {

width: 100%;

height: 100vh;

overflow: hidden;
}


.contact-form-image img {

width: 100%;

height: 100%;

display: block;

object-fit: cover;

object-position: center;

filter: grayscale(100%);

}


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

.contact-form-content {

width: 100%;

min-height: 100vh;

padding: 7vh 6vw 6vh 3vw;

display: flex;

flex-direction: column;

justify-content: flex-start;

box-sizing: border-box;
}


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

.contact-form-heading {

margin-bottom: 30px;

}


.contact-form-heading h2 {

margin: 0 0 20px;

/* font-family:
    var(--font-heading,
    "Times New Roman",
    serif); */

font-size: clamp(42px, 3.1vw, 60px);

font-weight: 400;

line-height: 1;

letter-spacing: -0.04em;

color: #241010;
}


.contact-form-heading p {

max-width: 670px;

margin: 0;

font-family:
    var(--font-script,
    "Times New Roman",
    serif);

font-size: clamp(15px, 1.15vw, 20px);

font-style: italic;

line-height: 1.5;

color: #3a2824;
}


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

.aveluxe-contact-form {

width: 100%;

display: flex;

flex-direction: column;

gap: 10px;
}


/* ==================================================
INPUT FIELDS
================================================== */

.contact-field {

width: 100%;
}


.contact-field input,
.contact-field textarea {

width: 100%;

display: block;

box-sizing: border-box;

border: 1px solid #3b2b26;

border-radius: 0;

background: transparent;

color: #241010;

font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 15px;

font-weight: 400;

outline: none;

transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}


/* INPUT HEIGHT */

.contact-field input {

height: 48px;

padding: 0 15px;
}


/* ==================================================
MESSAGE
================================================== */

.contact-field textarea {

height: 335px;

padding: 16px 15px;

resize: none;

line-height: 1.5;
}


/* ==================================================
PLACEHOLDER
================================================== */

.contact-field input::placeholder,
.contact-field textarea::placeholder {

color: #302622;

opacity: 1;
}


/* ==================================================
FOCUS
================================================== */

.contact-field input:focus,
.contact-field textarea:focus {

border-color: #241010;

background: rgba(255, 255, 255, 0.08);
}


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

.contact-submit-btn {

width: 196px;

height: 48px;

margin-top: 32px;

border: none;

border-radius: 0;

background: #241010;

color: #F8E8CE;

font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 13px;

font-weight: 400;

letter-spacing: 0.04em;

cursor: pointer;

transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}


.contact-submit-btn:hover {

transform: translateY(-2px);

background: #321818;
}


/* ==================================================
TABLET
================================================== */

@media (max-width: 991px) {

.contact-form-section {

    grid-template-columns: 45% 55%;
}


.contact-form-content {

    padding:
        6vh
        4vw
        5vh
        3vw;
}


.contact-form-heading h2 {

    font-size: 42px;
}


.contact-field textarea {

    height: 300px;
}

}


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

@media (max-width: 767px) {

.contact-form-section {

    display: flex;

    flex-direction: column;

    min-height: auto;
}


/* IMAGE */

.contact-form-image {

    width: 100%;

    height: 55vh;

    min-height: 400px;
}


.contact-form-image img {

    height: 100%;

    object-position: center;
}


/* CONTENT */

.contact-form-content {

    width: 100%;

    min-height: auto;

    padding:
        60px
        22px
        70px;
}


/* HEADING */

.contact-form-heading {

    margin-bottom: 30px;
}


.contact-form-heading h2 {

    font-size: 42px;

    margin-bottom: 18px;
}


.contact-form-heading p {

    font-size: 15px;

    line-height: 1.55;
}


/* FORM */

.aveluxe-contact-form {

    gap: 10px;
}


.contact-field input {

    height: 52px;

    font-size: 14px;
}


.contact-field textarea {

    height: 260px;

    font-size: 14px;
}


/* BUTTON */

.contact-submit-btn {

    width: 180px;

    height: 50px;

    margin-top: 25px;
}

}


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

@media (max-width: 400px) {

.contact-form-content {

    padding:
        50px
        18px
        60px;
}


.contact-form-heading h2 {

    font-size: 36px;
}


.contact-form-heading p {

    font-size: 14px;
}

}

/* ==================================================
   CONTACT INFORMATION STRIP
================================================== */

.contact-info-strip {

grid-column: 1 / -1;

width: 100%;

min-height: 145px;

padding: 38px 6.5vw;

box-sizing: border-box;

display: grid;

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

align-items: start;

background: #F8E8CE;

/* border-top: 1px solid rgba(36, 16, 16, 0.75); */

}


/* ==================================================
INFO ITEM
================================================== */

.contact-info-item {

display: flex;

flex-direction: column;

gap: 14px;
}


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

.contact-info-label {

font-family: "Inter";

font-size: 15px;

font-weight: 600;

letter-spacing: 0.04em;

color: #241010;
}


/* ==================================================
VALUE
================================================== */

.contact-info-value {

font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 18px;

font-weight: 500;

letter-spacing: 0.12em;

color: #5a514d;

text-decoration: none;

transition: opacity 0.3s ease;
}


a.contact-info-value:hover {

opacity: 0.6;
}


/* ==================================================
CENTER
================================================== */

.contact-info-center {

align-items: center;

text-align: center;
}


/* ==================================================
RIGHT
================================================== */

.contact-info-right {

align-items: flex-start;

justify-self: end;

text-align: left;
}