:root {
            --burgundy: #7a1f3d;
            --burgundy-dark: #4a1028;
            --burgundy-deep: #260710;
            --burgundy-light: #9a3658;

            --cream: #f5f1ec;
            --white-soft: #fffaf7;
            --charcoal: #1c1c1e;
            --muted: #716268;

            --container: 1280px;

            --glass:
                rgba(255, 255, 255, 0.11);

            --glass-light:
                rgba(255, 255, 255, 0.18);

            --glass-border:
                rgba(255, 255, 255, 0.23);

            --shadow:
                0 30px 80px rgba(58, 6, 27, 0.18);

            --shadow-dark:
                0 35px 100px rgba(18, 0, 7, 0.38);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Tajawal", sans-serif;
            color: var(--charcoal);
            background: var(--cream);
            overflow-x: hidden;
        }

        body.menu-open {
            overflow: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        img {
            display: block;
            width: 100%;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        button {
            cursor: pointer;
        }

        .container {
            width: min(
                calc(100% - 40px),
                var(--container)
            );

            margin-inline: auto;
        }

        .section {
            position: relative;
            padding: 115px 0;
            overflow: hidden;
        }

        /* =========================================
           GLOBAL DECORATIONS
        ========================================= */

        .section-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(1px);
            pointer-events: none;
        }

        .section-orb.one {
            width: 280px;
            height: 280px;
            top: 10%;
            right: -150px;

            background:
                rgba(122, 31, 61, 0.07);

            animation:
                orbFloat 8s ease-in-out infinite;
        }

        .section-orb.two {
            width: 180px;
            height: 180px;
            bottom: 8%;
            left: -90px;

            border:
                1px solid rgba(122, 31, 61, 0.14);

            animation:
                orbFloat 7s -2s ease-in-out infinite;
        }

        @keyframes orbFloat {
            0%,
            100% {
                transform:
                    translate3d(0, 0, 0)
                    rotate(0deg);
            }

            50% {
                transform:
                    translate3d(0, -25px, 50px)
                    rotate(10deg);
            }
        }

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

        .section-header {
            max-width: 760px;
            margin: 0 auto 58px;
            text-align: center;
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            margin-bottom: 15px;
            padding: 9px 17px;

            color: var(--burgundy);
            background:
                rgba(122, 31, 61, 0.07);

            border:
                1px solid rgba(122, 31, 61, 0.11);

            border-radius: 100px;

            font-size: 13px;
            font-weight: 800;
        }

        .section-label::before,
        .section-label::after {
            content: "";

            width: 6px;
            height: 6px;

            background: var(--burgundy);
            border-radius: 2px;

            transform: rotate(45deg);
        }

        .section-title {
            color: var(--burgundy);

            font-family:
                "Aref Ruqaa", serif;

            font-size:
                clamp(43px, 5vw, 72px);

            line-height: 1.2;
        }

        .section-description {
            margin-top: 17px;

            color: var(--muted);
            font-size: 17px;
            line-height: 1.9;
        }

        /* =========================================
           NAVBAR
        ========================================= */

        .navbar {
            position: fixed;
            top: 20px;
            right: 0;
            left: 0;

            z-index: 1000;

            transition:
                top 0.4s ease;
        }

        .navbar.scrolled {
            top: 8px;
        }

        .nav-shell {
            min-height: 82px;

            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 25px;

            padding:
                10px 13px 10px 20px;

            background:
                rgba(255, 250, 247, 0.86);

            border:
                1px solid rgba(255, 255, 255, 0.58);

            border-radius: 29px;

            backdrop-filter:
                blur(24px)
                saturate(140%);

            -webkit-backdrop-filter:
                blur(24px)
                saturate(140%);

            box-shadow:
                0 22px 55px rgba(43, 4, 19, 0.16);

            transform-style: preserve-3d;

            transition:
                min-height 0.4s ease,
                border-radius 0.4s ease,
                box-shadow 0.4s ease,
                background 0.4s ease,
                transform 0.2s linear;
        }

        .navbar.scrolled .nav-shell {
            min-height: 68px;
            border-radius: 22px;

            background:
                rgba(255, 250, 247, 0.95);

            box-shadow:
                0 15px 45px rgba(43, 4, 19, 0.21);
        }

        .logo {
            width: 165px;
            height: 60px;

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

            perspective: 900px;
        }

        .logo img {
            width: 100%;
            height: 100%;

            object-fit: contain;

            transition:
                transform 0.55s cubic-bezier(.2, .8, .2, 1),
                filter 0.4s ease;
        }

        .logo:hover img {
            transform:
                rotateY(-12deg)
                rotateX(6deg)
                scale(1.06);

            filter:
                drop-shadow(
                    0 12px 17px
                    rgba(122, 31, 61, 0.24)
                );
        }

        .nav-list {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .nav-link {
            position: relative;

            min-height: 47px;

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

            padding: 0 18px;

            color: #55464c;
            border-radius: 100px;

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

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

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

            position: absolute;
            right: 50%;
            bottom: 6px;

            width: 6px;
            height: 6px;

            background: var(--burgundy);
            border-radius: 2px;

            transform:
                translateX(50%)
                rotate(45deg)
                scale(0);

            transition:
                transform 0.35s ease;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--burgundy);

            background:
                rgba(122, 31, 61, 0.07);

            transform:
                translateY(-3px)
                translateZ(20px);
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            transform:
                translateX(50%)
                rotate(45deg)
                scale(1);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .language-btn,
        .menu-btn {
            border: 0;
        }

        .language-btn {
            min-height: 47px;

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

            padding: 0 17px;

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

            border-radius: 100px;

            font-size: 14px;
            font-weight: 800;

            box-shadow:
                0 12px 27px rgba(122, 31, 61, 0.24);

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }

        .language-btn:hover {
            transform:
                translateY(-4px)
                rotate(-3deg)
                scale(1.03);

            box-shadow:
                0 18px 35px rgba(122, 31, 61, 0.32);
        }

        .menu-btn {
            display: none;

            width: 47px;
            height: 47px;

            position: relative;

            background: var(--burgundy);
            border-radius: 50%;

            box-shadow:
                0 12px 27px rgba(122, 31, 61, 0.25);
        }

        .menu-btn span {
            position: absolute;
            right: 13px;

            width: 21px;
            height: 2px;

            background: var(--cream);
            border-radius: 10px;

            transition:
                top 0.3s ease,
                transform 0.3s ease,
                opacity 0.3s ease;
        }

        .menu-btn span:nth-child(1) {
            top: 16px;
        }

        .menu-btn span:nth-child(2) {
            top: 22px;
        }

        .menu-btn span:nth-child(3) {
            top: 28px;
        }

        .menu-btn.active span:nth-child(1) {
            top: 22px;
            transform: rotate(45deg);
        }

        .menu-btn.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-btn.active span:nth-child(3) {
            top: 22px;
            transform: rotate(-45deg);
        }

        .mobile-overlay {
            position: fixed;
            inset: 0;

            z-index: 998;

            background:
                rgba(35, 3, 15, 0.56);

            backdrop-filter: blur(5px);

            opacity: 0;
            visibility: hidden;

            transition:
                opacity 0.3s ease,
                visibility 0.3s ease;
        }

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

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

        :root {
    --burgundy: #7a1f3d;
    --burgundy-dark: #4b1028;
    --burgundy-deep: #260710;
    --cream: #f5f1ec;
    --near-white: #fffaf7;
    --charcoal: #1c1c1e;
}

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

.hero-showcase {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    perspective: 1600px;
    background: var(--burgundy);
}

.hero-showcase-bg {
    position: absolute;
    inset: -5%;
    z-index: -6;

    background:
        url("assets/hero-main.jpg")
        center / cover no-repeat;

    filter:
        saturate(0.72)
        contrast(1.04);

    animation:
        heroBackgroundZoom
        24s ease-in-out
        infinite alternate;
}

.hero-showcase-overlay {
    position: absolute;
    inset: 0;
    z-index: -5;

    background:
        linear-gradient(
            100deg,
            rgba(30, 2, 13, 0.96) 0%,
            rgba(122, 31, 61, 0.90) 42%,
            rgba(72, 12, 35, 0.67) 70%,
            rgba(25, 2, 11, 0.91) 100%
        );
}

.hero-showcase-overlay::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 70% 24%,
            rgba(255, 245, 240, 0.22),
            transparent 25%
        ),
        radial-gradient(
            circle at 18% 80%,
            rgba(188, 77, 115, 0.28),
            transparent 33%
        );
}

.hero-showcase-overlay::after {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0.09;

    background-image:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(255, 255, 255, 0.26) 46%,
            transparent 48%
        );

    background-size: 72px 72px;
}

.hero-showcase-glow {
    position: absolute;
    top: 45%;
    left: 45%;

    width: 650px;
    height: 650px;

    z-index: -2;

    background:
        rgba(245, 241, 236, 0.12);

    border-radius: 50%;
    filter: blur(110px);

    transform:
        translate(-50%, -50%);

    animation:
        heroGlowPulse
        6s ease-in-out infinite;
}

@keyframes heroBackgroundZoom {
    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.13);
    }
}

@keyframes heroGlowPulse {
    0%,
    100% {
        opacity: 0.45;
        scale: 0.9;
    }

    50% {
        opacity: 1;
        scale: 1.14;
    }
}

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

.hero-showcase-container {
    position: relative;
    width: 100%;
    padding-top: 155px;
    padding-bottom: 70px;
}

.hero-showcase-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 60px;
}

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

.hero-copy {
    position: relative;
    z-index: 5;
    color: var(--cream);

    padding-right: 55px;

    transform-style: preserve-3d;
    transition: transform 0.18s linear;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 10px 17px;
    margin-bottom: 22px;

    color: var(--cream);

    background:
        rgba(255, 255, 255, 0.10);

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius: 100px;

    backdrop-filter: blur(16px);

    font-size: 14px;
    font-weight: 700;

    transform: translateZ(55px);

    animation:
        heroReveal 0.9s ease both,
        heroBadgeFloat 4s 1s ease-in-out infinite;
}

.hero-badge span {
    width: 7px;
    height: 7px;

    background: var(--cream);
    border-radius: 2px;

    transform: rotate(45deg);
}

.hero-main-title {
    max-width: 690px;

    font-family:
        "Aref Ruqaa", serif;

    font-size:
        clamp(58px, 6.8vw, 108px);

    line-height: 1.07;
    font-weight: 700;

    text-shadow:
        0 28px 55px
        rgba(0, 0, 0, 0.38);

    transform: translateZ(85px);

    animation:
        heroReveal
        1s 0.14s both;
}

.hero-main-title strong {
    position: relative;
    display: inline-block;
    color: var(--near-white);
}

.hero-main-title strong::after {
    content: "";
    position: absolute;

    right: 8%;
    bottom: -5px;

    width: 84%;
    height: 7px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cream),
            transparent
        );

    border-radius: 50%;
    opacity: 0.58;

    animation:
        titleUnderline
        3s ease-in-out infinite;
}

.hero-main-description {
    max-width: 650px;
    margin-top: 27px;

    color:
        rgba(245, 241, 236, 0.88);

    font-size:
        clamp(17px, 1.7vw, 20px);

    line-height: 1.95;

    transform: translateZ(55px);

    animation:
        heroReveal
        1s 0.29s both;
}

.hero-main-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;

    transform: translateZ(70px);

    animation:
        heroReveal
        1s 0.44s both;
}

.hero-cta {
    min-height: 59px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 0 29px;

    border-radius: 100px;

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

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.hero-cta:hover {
    transform:
        translateY(-6px)
        translateZ(25px)
        scale(1.04)
        rotateX(5deg);
}

.hero-cta-primary {
    color: var(--burgundy);
    background: var(--cream);

    box-shadow:
        0 18px 43px
        rgba(0, 0, 0, 0.25);
}

.hero-cta-primary:hover {
    background: var(--near-white);

    box-shadow:
        0 25px 50px
        rgba(0, 0, 0, 0.3);
}

.hero-cta-glass {
    color: var(--cream);

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid rgba(255, 255, 255, 0.26);

    backdrop-filter: blur(14px);
}

.hero-cta-glass:hover {
    background:
        rgba(255, 255, 255, 0.16);
}

.hero-cta i {
    transition: transform 0.35s ease;
}

.hero-cta:hover i {
    transform:
        translateX(-6px)
        rotate(-8deg);
}

/* ========================================
   3D PHOTO STAGE
======================================== */

.hero-visual-stage {
    position: relative;
    min-height: 620px;

    perspective: 1500px;
    transform-style: preserve-3d;

    transition: transform 0.18s linear;

    animation:
        heroReveal
        1.1s 0.3s both;
}

.visual-orbit {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 470px;
    height: 470px;

    border:
        1px solid rgba(245, 241, 236, 0.2);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(65deg);

    animation:
        visualOrbitRotate
        18s linear infinite;
}

.visual-orbit::before,
.visual-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.visual-orbit::before {
    inset: 38px;

    border:
        1px dashed
        rgba(245, 241, 236, 0.14);
}

.visual-orbit::after {
    width: 16px;
    height: 16px;

    top: 26px;
    left: 80px;

    background: var(--cream);

    box-shadow:
        0 0 28px
        rgba(255, 255, 255, 0.8);
}

.floating-photo {
    position: absolute;

    overflow: hidden;
    margin: 0;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 35px 80px
        rgba(18, 0, 8, 0.36);

    transform-style: preserve-3d;

    transition:
        transform 0.18s linear,
        box-shadow 0.4s ease;
}

.floating-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s
        cubic-bezier(.2, .8, .2, 1);
}

.floating-photo:hover {
    z-index: 20;

    box-shadow:
        0 48px 100px
        rgba(18, 0, 8, 0.5);
}

.floating-photo:hover img {
    transform: scale(1.1);
}

.photo-main {
    width: 390px;
    height: 500px;

    top: 58px;
    right: 80px;

    border-radius:
        190px 190px 38px 38px;

    transform:
        rotateY(-8deg)
        rotateX(3deg)
        translateZ(80px);

    animation:
        mainPhotoFloat
        7s ease-in-out infinite;
}

.photo-main::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(37, 2, 14, 0.82),
            transparent 48%
        );
}

.photo-main figcaption {
    position: absolute;

    right: 27px;
    left: 27px;
    bottom: 26px;

    z-index: 3;

    color: var(--cream);
}

.photo-main figcaption span {
    display: block;

    color:
        rgba(245, 241, 236, 0.72);

    font-size: 13px;
}

.photo-main figcaption strong {
    display: block;
    margin-top: 4px;

    font-family:
        "Aref Ruqaa", serif;

    font-size: 29px;
}

.photo-bride {
    width: 180px;
    height: 235px;

    top: 10px;
    left: 30px;

    border-radius:
        95px 95px 25px 25px;

    transform:
        rotate(-8deg)
        translateZ(150px);

    animation:
        smallPhotoFloatOne
        6s -2s ease-in-out infinite;
}

.photo-decoration {
    width: 210px;
    height: 175px;

    right: 8px;
    bottom: 10px;

    border-radius: 30px;

    transform:
        rotate(7deg)
        translateZ(120px);

    animation:
        smallPhotoFloatTwo
        7s -3s ease-in-out infinite;
}

.photo-couple {
    width: 175px;
    height: 220px;

    left: 15px;
    bottom: 40px;

    border-radius: 28px 100px 28px 28px;

    transform:
        rotate(6deg)
        translateZ(175px);

    animation:
        smallPhotoFloatThree
        6.5s -1s ease-in-out infinite;
}

.visual-badge {
    position: absolute;
    z-index: 12;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px 16px;

    color: var(--charcoal);

    background:
        rgba(255, 250, 247, 0.9);

    border:
        1px solid rgba(255, 255, 255, 0.52);

    border-radius: 19px;

    backdrop-filter: blur(18px);

    box-shadow:
        0 22px 45px
        rgba(30, 2, 12, 0.22);

    animation:
        visualBadgeFloat
        5s ease-in-out infinite;
}

.visual-badge i {
    width: 43px;
    height: 43px;

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

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

    border-radius: 14px;
}

.visual-badge strong {
    display: block;

    color: var(--burgundy);
    font-size: 14px;
}

.visual-badge span {
    display: block;
    margin-top: 2px;

    color: #796970;
    font-size: 11px;
}

.visual-badge-top {
    top: 85px;
    right: -5px;

    transform: translateZ(200px);
}

.visual-badge-bottom {
    left: 110px;
    bottom: 0;

    transform: translateZ(210px);
    animation-delay: -2s;
}

/* ========================================
   SEARCH
======================================== */

.hero-search-3d {
    position: relative;

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

    gap: 10px;

    max-width: 1120px;
    margin: 45px auto 0;
    padding: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.07)
        );

    border:
        1px solid rgba(255, 255, 255, 0.24);

    border-radius: 31px;

    backdrop-filter:
        blur(27px)
        saturate(135%);

    box-shadow:
        0 35px 90px
        rgba(18, 0, 8, 0.38);

    perspective: 1400px;
    transform-style: preserve-3d;

    transition: transform 0.18s linear;

    animation:
        heroReveal
        1s 0.65s both;
}

.hero-search-field {
    min-height: 80px;

    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    gap: 12px;

    padding: 0 17px;

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid transparent;

    border-radius: 20px;

    transform: translateZ(22px);

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

.hero-search-field:hover,
.hero-search-field:focus-within {
    background:
        rgba(255, 255, 255, 0.15);

    border-color:
        rgba(255, 255, 255, 0.21);

    transform:
        translateZ(43px)
        translateY(-4px);
}

.hero-search-icon {
    width: 45px;
    height: 45px;

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

    color: var(--cream);

    background:
        rgba(255, 255, 255, 0.1);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    transition: transform 0.45s ease;
}

.hero-search-field:hover .hero-search-icon {
    transform:
        rotateY(180deg)
        scale(1.08);
}

.hero-search-field label {
    display: block;
    margin-bottom: 4px;

    color:
        rgba(245, 241, 236, 0.62);

    font-size: 12px;
}

.hero-search-field select,
.hero-search-field input {
    width: 100%;

    color: var(--cream);
    background: transparent;
    border: 0;
    outline: 0;

    font-size: 15px;
    font-weight: 700;
}

.hero-search-field select {
    appearance: none;
    cursor: pointer;
}

.hero-search-field option {
    color: var(--charcoal);
}

.hero-search-field input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.hero-search-button {
    min-width: 165px;
    min-height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

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

    border: 0;
    border-radius: 20px;

    font-weight: 800;

    transform: translateZ(35px);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.hero-search-button:hover {
    transform:
        translateZ(58px)
        translateY(-6px)
        rotateX(5deg)
        scale(1.02);

    box-shadow:
        0 23px 42px
        rgba(0, 0, 0, 0.28);
}

.hero-search-button i {
    transition: transform 0.35s ease;
}

.hero-search-button:hover i {
    transform:
        rotate(-18deg)
        scale(1.15);
}

.hero-popular-cities {
    margin-top: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;

    color:
        rgba(245, 241, 236, 0.68);

    font-size: 13px;
}

.hero-popular-cities a {
    min-height: 38px;

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

    padding: 0 17px;

    color: var(--cream);

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 100px;

    backdrop-filter: blur(10px);

    font-weight: 700;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.hero-popular-cities a:hover {
    background:
        rgba(255, 255, 255, 0.17);

    transform:
        translateY(-5px)
        rotate(-3deg);
}

/* ========================================
   PARTICLES AND SHAPES
======================================== */

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
    overflow: hidden;
}

.hero-particle {
    position: absolute;

    width: 4px;
    height: 4px;

    background:
        rgba(245, 241, 236, 0.65);

    border-radius: 50%;

    box-shadow:
        0 0 17px
        rgba(255, 255, 255, 0.7);

    animation:
        heroParticleMove
        linear infinite;
}

.hero-shape {
    position: absolute;
    pointer-events: none;
}

.shape-one {
    width: 280px;
    height: 280px;

    top: 10%;
    right: -90px;

    border:
        1px solid rgba(245, 241, 236, 0.2);

    border-radius: 50%;

    animation:
        shapeFloat 8s ease-in-out infinite;
}

.shape-two {
    width: 110px;
    height: 110px;

    bottom: 15%;
    left: -30px;

    border:
        1px solid rgba(245, 241, 236, 0.2);

    border-radius: 25px;

    transform: rotate(45deg);

    animation:
        shapeRotate 14s linear infinite;
}

.shape-three {
    width: 45px;
    height: 45px;

    top: 30%;
    left: 7%;

    border:
        1px solid rgba(245, 241, 236, 0.27);

    transform: rotate(45deg);

    animation:
        shapePulse 4s ease-in-out infinite;
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes heroReveal {
    from {
        opacity: 0;
        transform:
            translateY(38px)
            scale(0.97);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }
}

@keyframes heroBadgeFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

@keyframes titleUnderline {
    0%,
    100% {
        scale: 0.84 1;
        opacity: 0.35;
    }

    50% {
        scale: 1.07 1;
        opacity: 0.78;
    }
}

@keyframes visualOrbitRotate {
    to {
        transform:
            translate(-50%, -50%)
            rotateX(65deg)
            rotateZ(360deg);
    }
}

@keyframes mainPhotoFloat {
    0%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }

    50% {
        translate: 0 -15px;
        rotate: 1deg;
    }
}

@keyframes smallPhotoFloatOne {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: -10px -18px;
    }
}

@keyframes smallPhotoFloatTwo {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 10px -14px;
    }
}

@keyframes smallPhotoFloatThree {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: -8px 15px;
    }
}

@keyframes visualBadgeFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -11px;
    }
}

@keyframes heroParticleMove {
    from {
        transform:
            translateY(115vh)
            scale(0.4);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    to {
        transform:
            translateY(-20vh)
            translateX(45px)
            scale(1.5);
        opacity: 0;
    }
}

@keyframes shapeFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -25px;
    }
}

@keyframes shapeRotate {
    to {
        transform: rotate(405deg);
    }
}

@keyframes shapePulse {
    0%,
    100% {
        scale: 0.8;
        opacity: 0.4;
    }

    50% {
        scale: 1.35;
        opacity: 1;
    }
}

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

@media (max-width: 1050px) {
    .hero-showcase-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-main-title,
    .hero-main-description {
        margin-inline: auto;
    }

    .hero-main-actions {
        justify-content: center;
    }

    .hero-visual-stage {
        min-height: 540px;
        max-width: 720px;
        width: 100%;
        margin-inline: auto;
    }

    .photo-main {
        right: 50%;
        transform:
            translateX(50%)
            rotateY(-5deg)
            translateZ(80px);
    }

    .photo-bride {
        left: 7%;
    }

    .photo-decoration {
        right: 5%;
    }

    .photo-couple {
        left: 10%;
    }

    .hero-search-3d {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .hero-search-button {
        grid-column: 1 / -1;
        min-height: 67px;
    }
}

@media (max-width: 700px) {
    .hero-showcase-container {
        padding-top: 135px;
    }

    .hero-showcase-grid {
        gap: 25px;
    }

    .hero-main-title {
        font-size: 53px;
    }

    .hero-main-description {
        font-size: 16px;
    }

    .hero-main-actions {
        flex-direction: column;
    }

    .hero-cta {
        width: 100%;
    }

    .hero-visual-stage {
        min-height: 440px;
    }

    .photo-main {
        width: 270px;
        height: 350px;

        top: 45px;

        border-radius:
            135px 135px 29px 29px;
    }

    .photo-bride {
        width: 120px;
        height: 155px;

        top: 5px;
        left: 0;
    }

    .photo-decoration {
        width: 145px;
        height: 120px;

        right: 0;
        bottom: 8px;
    }

    .photo-couple {
        width: 115px;
        height: 145px;

        left: 4px;
        bottom: 20px;
    }

    .visual-badge {
        display: none;
    }

    .visual-orbit {
        width: 350px;
        height: 350px;
    }

    .hero-search-3d {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .hero-search-button {
        grid-column: auto;
    }

    .hero-search-field,
    .hero-search-button {
        min-height: 69px;
        border-radius: 17px;
    }
}

        /* =========================================
           FLOATING DECORATIONS
        ========================================= */

        .floating-decoration {
            position: absolute;
            pointer-events: none;
            transform-style: preserve-3d;
        }

        .decoration-one {
            width: 320px;
            height: 320px;

            top: 14%;
            right: -110px;

            border:
                1px solid rgba(245, 241, 236, 0.24);

            border-radius: 50%;

            animation:
                floatOrbit 9s ease-in-out infinite;
        }

        .decoration-one::before {
            content: "";

            position: absolute;
            top: 62px;
            left: 40px;

            width: 18px;
            height: 18px;

            background: var(--cream);
            border-radius: 4px;

            transform: rotate(45deg);

            box-shadow:
                0 0 35px
                rgba(255, 255, 255, 0.7);
        }

        .decoration-two {
            width: 190px;
            height: 190px;

            bottom: 8%;
            left: -70px;

            border:
                1px solid rgba(245, 241, 236, 0.21);

            border-radius:
                44% 56% 48% 52%;

            animation:
                floatOrbit 7s -2s ease-in-out infinite;
        }

        .decoration-three {
            width: 86px;
            height: 86px;

            top: 28%;
            left: 14%;

            border:
                1px solid rgba(245, 241, 236, 0.29);

            border-radius: 22px;

            animation:
                rotateShape 14s linear infinite;
        }

        .decoration-four {
            width: 45px;
            height: 45px;

            right: 15%;
            bottom: 20%;

            border:
                1px solid rgba(245, 241, 236, 0.24);

            transform: rotate(45deg);

            animation:
                decorationPulse 4s ease-in-out infinite;
        }

        @keyframes floatOrbit {
            0%,
            100% {
                translate: 0 0;
                rotate: 0deg;
            }

            50% {
                translate: 0 -28px;
                rotate: 11deg;
            }
        }

        @keyframes rotateShape {
            from {
                transform:
                    rotate(0deg)
                    translateZ(0);
            }

            to {
                transform:
                    rotate(360deg)
                    translateZ(45px);
            }
        }

        @keyframes decorationPulse {
            0%,
            100% {
                scale: 0.85;
                opacity: 0.45;
            }

            50% {
                scale: 1.3;
                opacity: 1;
            }
        }

        /* =========================================
           PARTICLES
        ========================================= */

        .particles {
            position: absolute;
            inset: 0;

            overflow: hidden;
            pointer-events: none;

            z-index: 1;
        }

        .particle {
            position: absolute;

            width: 5px;
            height: 5px;

            background:
                rgba(245, 241, 236, 0.68);

            border-radius: 50%;

            box-shadow:
                0 0 18px
                rgba(255, 255, 255, 0.66);

            animation:
                particleMove linear infinite;
        }

        @keyframes particleMove {
            0% {
                transform:
                    translateY(120vh)
                    translateX(0)
                    scale(0.4);

                opacity: 0;
            }

            15% {
                opacity: 1;
            }

            85% {
                opacity: 0.7;
            }

            100% {
                transform:
                    translateY(-20vh)
                    translateX(50px)
                    scale(1.5);

                opacity: 0;
            }
        }

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

        .search-stage {
            position: relative;

            max-width: 1110px;

            margin:
                62px auto 0;

            perspective: 1400px;

            animation:
                revealUp 1s 0.65s both;
        }

        .search-stage::after {
            content: "";

            position: absolute;

            right: 7%;
            left: 7%;
            bottom: -30px;

            height: 60px;

            background:
                rgba(20, 0, 8, 0.38);

            filter: blur(27px);
            border-radius: 50%;

            z-index: -1;
        }

        .search-card {
            display: grid;

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

            gap: 10px;

            padding: 13px;

            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.19),
                    rgba(255, 255, 255, 0.07)
                );

            border:
                1px solid rgba(255, 255, 255, 0.26);

            border-radius: 31px;

            backdrop-filter:
                blur(28px)
                saturate(135%);

            -webkit-backdrop-filter:
                blur(28px)
                saturate(135%);

            box-shadow: var(--shadow-dark);

            transform-style: preserve-3d;

            transition:
                transform 0.16s linear;
        }

        .search-field {
            min-height: 82px;

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

            align-items: center;
            gap: 12px;

            padding: 0 18px;

            background:
                rgba(255, 255, 255, 0.09);

            border:
                1px solid transparent;

            border-radius: 21px;

            transform:
                translateZ(23px);

            transition:
                background 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }

        .search-field:hover,
        .search-field:focus-within {
            background:
                rgba(255, 255, 255, 0.15);

            border-color:
                rgba(255, 255, 255, 0.23);

            transform:
                translateZ(46px)
                translateY(-5px);

            box-shadow:
                0 18px 32px rgba(20, 0, 8, 0.2);
        }

        .field-icon {
            width: 47px;
            height: 47px;

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

            color: var(--cream);

            background:
                rgba(255, 255, 255, 0.1);

            border:
                1px solid rgba(255, 255, 255, 0.17);

            border-radius: 50%;

            transition:
                transform 0.5s ease;
        }

        .search-field:hover .field-icon {
            transform:
                rotateY(180deg)
                rotateZ(8deg)
                scale(1.1);
        }

        .field-control {
            min-width: 0;
        }

        .field-control label {
            display: block;

            margin-bottom: 3px;

            color:
                rgba(245, 241, 236, 0.63);

            font-size: 12px;
        }

        .field-control select,
        .field-control input {
            width: 100%;

            color: var(--cream);
            background: transparent;
            border: 0;
            outline: 0;

            font-size: 15px;
            font-weight: 700;
        }

        .field-control select {
            appearance: none;
            cursor: pointer;
        }

        .field-control option {
            color: var(--charcoal);
        }

        .field-control input::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
        }

        .search-submit {
            min-width: 165px;
            min-height: 82px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

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

            border: 0;
            border-radius: 21px;

            font-weight: 800;

            transform:
                translateZ(36px);

            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }

        .search-submit:hover {
            transform:
                translateZ(60px)
                translateY(-7px)
                rotateX(5deg)
                scale(1.02);

            box-shadow:
                0 22px 42px rgba(0, 0, 0, 0.29);
        }

        .search-submit i {
            transition:
                transform 0.35s ease;
        }

        .search-submit:hover i {
            transform:
                rotate(-20deg)
                scale(1.18);
        }

        .popular-cities {
            margin-top: 26px;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 9px;

            transform:
                translateZ(35px);
        }

        .popular-label {
            color:
                rgba(245, 241, 236, 0.69);

            font-size: 13px;
        }

        .city-pill {
            min-height: 39px;

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

            padding: 0 17px;

            color: var(--cream);

            background:
                rgba(255, 255, 255, 0.08);

            border:
                1px solid rgba(255, 255, 255, 0.19);

            border-radius: 100px;

            backdrop-filter: blur(10px);

            font-size: 13px;
            font-weight: 700;

            transition:
                transform 0.3s ease,
                background 0.3s ease,
                box-shadow 0.3s ease;
        }

        .city-pill:hover {
            background:
                rgba(255, 255, 255, 0.18);

            transform:
                translateY(-6px)
                rotate(-4deg)
                scale(1.03);

            box-shadow:
                0 14px 25px rgba(0, 0, 0, 0.18);
        }

        /* =========================================
           CITIES
        ========================================= */

       /* =========================================
   CREATIVE CITY SHOWCASE
========================================= */

.city-showcase-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #fffaf7 0%,
            #f5f1ec 48%,
            #fffdfb 100%
        );
}

.city-showcase-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.42;
    pointer-events: none;

    background-image:
        radial-gradient(
            circle at 18% 23%,
            rgba(122, 31, 61, 0.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 72%,
            rgba(122, 31, 61, 0.06),
            transparent 28%
        );
}

.city-background-shape {
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(122, 31, 61, 0.1);
}

.city-shape-one {
    width: 360px;
    height: 360px;
    top: 35px;
    right: -210px;
    border-radius: 50%;

    animation:
        cityShapeFloat
        9s ease-in-out infinite;
}

.city-shape-two {
    width: 150px;
    height: 150px;
    left: -65px;
    bottom: 90px;
    border-radius: 35px;
    transform: rotate(45deg);

    animation:
        cityShapeRotate
        16s linear infinite;
}

/* Heading */

.city-showcase-heading {
    position: relative;
    z-index: 2;
    max-width: 790px;
    margin: 0 auto 65px;
    text-align: center;
}

.city-showcase-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 17px;
    padding: 10px 18px;

    color: #7a1f3d;
    background: rgba(122, 31, 61, 0.07);

    border:
        1px solid rgba(122, 31, 61, 0.11);

    border-radius: 100px;

    font-size: 14px;
    font-weight: 800;
}

.city-showcase-label i {
    font-size: 13px;
}

.city-showcase-heading h2 {
    color: #7a1f3d;

    font-family:
        "Aref Ruqaa", serif;

    font-size:
        clamp(48px, 5.5vw, 78px);

    line-height: 1.2;
}

.city-showcase-heading p {
    max-width: 680px;
    margin: 17px auto 0;

    color: #74656a;
    font-size: 17px;
    line-height: 1.9;
}

/* Mosaic layout */

.city-mosaic {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.12fr 0.55fr 0.55fr;

    grid-template-rows:
        270px 300px;

    gap: 22px;

    perspective: 1600px;
}

/* Base card */

.city-mosaic-card {
    position: relative;
    overflow: hidden;

    border-radius: 32px;

    background: #7a1f3d;

    box-shadow:
        0 28px 65px
        rgba(75, 12, 37, 0.16);

    transform-style: preserve-3d;

    transition:
        transform 0.18s linear,
        box-shadow 0.45s ease;
}

.city-mosaic-card:hover {
    box-shadow:
        0 45px 90px
        rgba(75, 12, 37, 0.27);
}

/* Layout areas */

.city-card-large {
    grid-column: 1;
    grid-row: 1 / 3;
}

.city-card-small:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

.city-card-small:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
}

.city-card-wide {
    grid-column: 2 / 4;
    grid-row: 2;
}

/* Images */

.city-card-image {
    position: absolute;
    inset: -7%;

    transform: translateZ(0);
    transition: transform 0.2s linear;
}

.city-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.1s
        cubic-bezier(.2, .8, .2, 1),
        filter 0.6s ease;
}

.city-mosaic-card:hover .city-card-image img {
    transform: scale(1.11);
    filter:
        saturate(1.05)
        contrast(1.03);
}

/* Dark overlay */

.city-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(35, 2, 14, 0.95) 0%,
            rgba(66, 8, 31, 0.68) 42%,
            rgba(20, 2, 9, 0.08) 76%
        );
}

/* Animated light */

.city-card-light {
    position: absolute;
    z-index: 2;

    width: 260px;
    height: 260px;

    top: -150px;
    left: -150px;

    border-radius: 50%;

    background:
        rgba(255, 245, 239, 0.23);

    filter: blur(22px);

    opacity: 0;

    transition:
        opacity 0.45s ease,
        transform 0.18s linear;

    pointer-events: none;
}

.city-mosaic-card:hover .city-card-light {
    opacity: 1;
}

/* Card number */

.city-card-number {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 4;

    width: 44px;
    height: 44px;

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

    color: #7a1f3d;
    background: rgba(255, 250, 247, 0.91);

    border:
        1px solid rgba(255, 255, 255, 0.48);

    border-radius: 15px;

    backdrop-filter: blur(12px);

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 12px 26px
        rgba(20, 1, 8, 0.2);

    transform: translateZ(55px);

    transition:
        transform 0.4s ease;
}

.city-mosaic-card:hover .city-card-number {
    transform:
        translateZ(80px)
        rotate(-6deg)
        scale(1.08);
}

/* Content */

.city-card-content {
    position: absolute;

    right: 28px;
    left: 28px;
    bottom: 27px;

    z-index: 4;

    color: #f5f1ec;

    transform: translateZ(65px);

    transition:
        transform 0.45s ease;
}

.city-mosaic-card:hover .city-card-content {
    transform:
        translateZ(95px)
        translateY(-7px);
}

.city-card-tag {
    display: inline-flex;
    align-items: center;

    margin-bottom: 8px;
    padding: 7px 12px;

    color:
        rgba(245, 241, 236, 0.88);

    background:
        rgba(255, 255, 255, 0.1);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 100px;

    backdrop-filter: blur(10px);

    font-size: 12px;
}

.city-card-content h3 {
    font-family:
        "Aref Ruqaa", serif;

    font-size:
        clamp(32px, 3.5vw, 52px);

    line-height: 1.15;
}

.city-card-content p {
    max-width: 500px;
    margin-top: 8px;

    color:
        rgba(245, 241, 236, 0.74);

    font-size: 14px;
    line-height: 1.7;
}

.city-card-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 14px;

    color: #f5f1ec;

    font-size: 14px;
    font-weight: 800;
}

.city-card-button i {
    transition:
        transform 0.35s ease;
}

.city-card-button:hover i {
    transform:
        translateX(-7px);
}

/* Smaller card adjustments */

.city-card-small .city-card-content {
    right: 20px;
    left: 20px;
    bottom: 20px;
}

.city-card-small .city-card-content h3 {
    font-size: 32px;
}

.city-card-small .city-card-tag {
    font-size: 10px;
    padding: 5px 9px;
}

.city-card-small .city-card-number {
    top: 17px;
    left: 17px;
}

/* Footer */

.city-showcase-footer {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;

    margin-top: 42px;
}

.city-showcase-footer p {
    color: #74656a;
    font-weight: 600;
}

.all-cities-button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 24px;

    color: #f5f1ec;
    background: #7a1f3d;

    border-radius: 100px;

    font-weight: 800;

    box-shadow:
        0 15px 32px
        rgba(122, 31, 61, 0.23);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.all-cities-button:hover {
    transform:
        translateY(-5px)
        rotateX(5deg)
        scale(1.025);

    box-shadow:
        0 23px 42px
        rgba(122, 31, 61, 0.31);
}

.all-cities-button i {
    transition: transform 0.3s ease;
}

.all-cities-button:hover i {
    transform: translateX(-6px);
}

/* Background animations */

@keyframes cityShapeFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-25px)
            rotate(8deg);
    }
}

@keyframes cityShapeRotate {
    to {
        transform: rotate(405deg);
    }
}

/* Responsive */

@media (max-width: 1050px) {
    .city-mosaic {
        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            470px 250px 300px;
    }

    .city-card-large {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .city-card-small:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .city-card-small:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .city-card-wide {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

@media (max-width: 700px) {
    .city-showcase-section {
        padding: 85px 0;
    }

    .city-showcase-heading {
        margin-bottom: 42px;
    }

    .city-showcase-heading h2 {
        font-size: 48px;
    }

    .city-showcase-heading p {
        font-size: 15px;
    }

    .city-mosaic {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 17px;
    }

    .city-card-large,
    .city-card-small:nth-of-type(2),
    .city-card-small:nth-of-type(3),
    .city-card-wide {
        grid-column: auto;
        grid-row: auto;
    }

    .city-mosaic-card {
        min-height: 370px;
        border-radius: 25px;
    }

    .city-card-small {
        min-height: 300px;
    }

    .city-card-content {
        right: 21px;
        left: 21px;
        bottom: 22px;
    }

    .city-card-content h3 {
        font-size: 38px;
    }

    .city-showcase-footer {
        flex-direction: column;
    }

    .all-cities-button {
        width: 100%;
    }
}

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

        .about-section {
            background: var(--white-soft);
        }

        .about-grid {
            display: grid;

            grid-template-columns:
                1fr 1fr;

            align-items: center;
            gap: 70px;
        }

        .about-media {
            position: relative;

            min-height: 580px;

            perspective: 1400px;
        }

        .about-main-image {
            position: absolute;

            top: 0;
            right: 0;

            width: 78%;
            height: 86%;

            overflow: hidden;
            border-radius: 40px;

            box-shadow: var(--shadow);

            transform:
                rotateY(-5deg)
                rotateX(3deg)
                translateZ(30px);

            transition:
                transform 0.7s ease;
        }

        .about-main-image:hover {
            transform:
                rotateY(0deg)
                rotateX(0deg)
                translateY(-10px)
                translateZ(60px);
        }

        .about-main-image img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            transition:
                transform 0.9s ease;
        }

        .about-main-image:hover img {
            transform:
                scale(1.08);
        }

        .about-small-image {
            position: absolute;

            left: 0;
            bottom: 0;

            width: 48%;
            height: 46%;

            overflow: hidden;

            border:
                9px solid var(--white-soft);

            border-radius: 31px;

            box-shadow:
                0 25px 58px
                rgba(70, 8, 32, 0.21);

            animation:
                smallImageFloat
                5s ease-in-out infinite;
        }

        .about-small-image img {
            width: 100%;
            height: 100%;

            object-fit: cover;
        }

        @keyframes smallImageFloat {
            0%,
            100% {
                transform:
                    translate3d(0, 0, 50px)
                    rotate(-2deg);
            }

            50% {
                transform:
                    translate3d(0, -15px, 80px)
                    rotate(2deg);
            }
        }

        .about-stamp {
            position: absolute;

            top: 60px;
            left: 5px;

            width: 120px;
            height: 120px;

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

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

            border:
                7px solid var(--white-soft);

            border-radius: 50%;

            box-shadow:
                0 20px 45px
                rgba(70, 8, 32, 0.26);

            font-family:
                "Aref Ruqaa", serif;

            font-size: 23px;
            text-align: center;

            animation:
                stampRotate 16s linear infinite;
        }

        @keyframes stampRotate {
            to {
                transform:
                    rotate(360deg)
                    translateZ(40px);
            }
        }

        .about-content h2 {
            color: var(--burgundy);

            font-family:
                "Aref Ruqaa", serif;

            font-size:
                clamp(45px, 5vw, 72px);

            line-height: 1.25;
        }

        .about-content > p {
            margin-top: 21px;

            color: var(--muted);
            font-size: 17px;
            line-height: 1.95;
        }

        .about-features {
            margin-top: 30px;

            display: grid;
            gap: 16px;
        }

        .about-feature {
            display: flex;
            align-items: center;
            gap: 14px;

            padding: 15px;

            border-radius: 20px;

            transition:
                background 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }

        .about-feature:hover {
            background:
                rgba(122, 31, 61, 0.06);

            transform:
                translateX(-8px)
                translateZ(30px);

            box-shadow:
                0 18px 35px
                rgba(122, 31, 61, 0.08);
        }

        .about-feature-icon {
            width: 49px;
            height: 49px;

            flex: 0 0 49px;

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

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

            border-radius: 16px;

            box-shadow:
                0 12px 25px
                rgba(122, 31, 61, 0.21);

            transition:
                transform 0.4s ease;
        }

        .about-feature:hover .about-feature-icon {
            transform:
                rotateY(180deg)
                scale(1.08);
        }

        .about-feature h4 {
            color: var(--burgundy);
            font-size: 16px;
        }

        .about-feature p {
            margin-top: 3px;

            color: var(--muted);
            font-size: 14px;
        }

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

        .contact-section {
            background:
                linear-gradient(
                    135deg,
                    var(--burgundy-deep),
                    var(--burgundy),
                    #5d142f
                );
        }

        .contact-shell {
            display: grid;

            grid-template-columns:
                0.85fr 1.15fr;

            gap: 30px;

            padding: 30px;

            background:
                rgba(255, 255, 255, 0.08);

            border:
                1px solid rgba(255, 255, 255, 0.19);

            border-radius: 39px;

            backdrop-filter: blur(20px);

            box-shadow: var(--shadow-dark);

            transform-style: preserve-3d;
        }

        .contact-info {
            position: relative;

            padding: 45px;

            overflow: hidden;

            color: var(--cream);

            background:
                rgba(255, 255, 255, 0.07);

            border:
                1px solid rgba(255, 255, 255, 0.14);

            border-radius: 31px;

            transform:
                translateZ(25px);
        }

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

            position: absolute;

            width: 310px;
            height: 310px;

            top: -155px;
            left: -145px;

            background:
                rgba(255, 255, 255, 0.11);

            border-radius: 50%;

            animation:
                orbFloat 7s ease-in-out infinite;
        }

        .contact-info h2 {
            position: relative;
            z-index: 2;

            font-family:
                "Aref Ruqaa", serif;

            font-size:
                clamp(43px, 5vw, 68px);

            line-height: 1.2;
        }

        .contact-info > p {
            position: relative;
            z-index: 2;

            margin-top: 18px;

            color:
                rgba(245, 241, 236, 0.74);

            line-height: 1.9;
        }

        .contact-links {
            position: relative;
            z-index: 2;

            margin-top: 35px;

            display: grid;
            gap: 14px;
        }

        .contact-link {
            display: flex;
            align-items: center;
            gap: 13px;

            padding: 14px;

            border-radius: 18px;

            transition:
                background 0.3s ease,
                transform 0.3s ease;
        }

        .contact-link:hover {
            background:
                rgba(255, 255, 255, 0.1);

            transform:
                translateX(-8px)
                translateZ(35px);
        }

        .contact-link-icon {
            width: 47px;
            height: 47px;

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

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

            border-radius: 15px;

            transition:
                transform 0.4s ease;
        }

        .contact-link:hover .contact-link-icon {
            transform:
                rotateY(180deg)
                scale(1.08);
        }

        .contact-form {
            padding: 35px;

            background: var(--white-soft);
            border-radius: 31px;

            transform:
                translateZ(42px);
        }

        .form-grid {
            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 17px;
        }

        .form-group {
            display: grid;
            gap: 8px;
        }

        .form-group.full {
            grid-column: 1 / -1;
        }

        .form-group label {
            color: var(--burgundy);
            font-size: 14px;
            font-weight: 700;
        }

        .form-control {
            width: 100%;
            min-height: 55px;

            padding: 0 17px;

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

            border:
                1px solid rgba(122, 31, 61, 0.11);

            border-radius: 16px;
            outline: 0;

            transition:
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.3s ease;
        }

        textarea.form-control {
            min-height: 135px;
            resize: vertical;
            padding-top: 15px;
        }

        .form-control:focus {
            border-color: var(--burgundy);

            box-shadow:
                0 0 0 4px
                rgba(122, 31, 61, 0.09);

            transform:
                translateY(-3px)
                translateZ(20px);
        }

        .contact-submit {
            width: 100%;
            min-height: 58px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 11px;

            margin-top: 18px;

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

            border: 0;
            border-radius: 17px;

            font-weight: 800;

            box-shadow:
                0 16px 35px
                rgba(122, 31, 61, 0.25);

            transition:
                transform 0.35s ease,
                box-shadow 0.35s ease;
        }

        .contact-submit:hover {
            transform:
                translateY(-6px)
                translateZ(35px)
                scale(1.02)
                rotateX(4deg);

            box-shadow:
                0 22px 43px
                rgba(122, 31, 61, 0.34);
        }

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

        .footer {
            padding: 28px 0;

            color:
                rgba(245, 241, 236, 0.76);

            background: var(--burgundy-deep);
        }

        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .footer-socials {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .footer-social {
            width: 42px;
            height: 42px;

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

            color: var(--cream);

            background:
                rgba(255, 255, 255, 0.08);

            border:
                1px solid rgba(255, 255, 255, 0.14);

            border-radius: 50%;

            transition:
                transform 0.3s ease,
                background 0.3s ease;
        }

        .footer-social:hover {
            color: var(--burgundy);
            background: var(--cream);

            transform:
                translateY(-5px)
                rotate(-10deg)
                scale(1.08);
        }

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

        .reveal {
            opacity: 0;

            transform:
                translateY(45px)
                scale(0.96)
                rotateX(5deg);

            filter: blur(7px);

            transition:
                opacity 0.9s ease,
                transform 0.9s
                cubic-bezier(.2, .8, .2, 1),
                filter 0.9s ease;
        }

        .reveal.visible {
            opacity: 1;

            transform:
                translateY(0)
                scale(1)
                rotateX(0);

            filter: blur(0);
        }

        @keyframes revealUp {
            from {
                opacity: 0;

                transform:
                    translateY(38px);

                filter: blur(8px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);

                filter: blur(0);
            }
        }

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

        @media (max-width: 1050px) {
            .nav-link {
                padding-inline: 12px;
                font-size: 14px;
            }

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

            .search-card {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .search-submit {
                grid-column: 1 / -1;
                min-height: 68px;
            }
        }

        @media (max-width: 900px) {
            .menu-btn {
                display: block;
            }

            .nav-list {
                position: fixed;

                top: 105px;
                right: 17px;
                left: 17px;

                z-index: 999;

                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 7px;

                padding: 22px;

                background:
                    rgba(255, 250, 247, 0.98);

                border:
                    1px solid rgba(122, 31, 61, 0.11);

                border-radius: 28px;

                backdrop-filter: blur(25px);

                box-shadow:
                    0 30px 75px
                    rgba(42, 3, 17, 0.27);

                opacity: 0;
                visibility: hidden;

                transform:
                    translateY(-18px)
                    scale(0.97)
                    rotateX(-7deg);

                transition:
                    opacity 0.3s ease,
                    visibility 0.3s ease,
                    transform 0.3s ease;
            }

            .nav-list.active {
                opacity: 1;
                visibility: visible;

                transform:
                    translateY(0)
                    scale(1)
                    rotateX(0);
            }

            .nav-link {
                width: 100%;
                justify-content: flex-start;

                padding-inline: 18px;
            }

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

            .about-media {
                min-height: 520px;
            }
        }

        @media (max-width: 700px) {
            .container {
                width: min(
                    calc(100% - 26px),
                    var(--container)
                );
            }

            .navbar {
                top: 10px;
            }

            .nav-shell {
                min-height: 68px;

                padding:
                    7px 9px 7px 13px;

                border-radius: 22px;
            }

            .logo {
                width: 116px;
                height: 50px;
            }

            .language-btn span {
                display: none;
            }

            .hero-inner {
                padding-top: 135px;
            }

            .hero-title {
                font-size: 52px;
            }

            .hero-description {
                font-size: 16px;
            }

            .hero-actions {
                flex-direction: column;
            }

            .hero-btn {
                width: 100%;
            }

            .search-card,
            .cities-grid,
            .services-grid {
                grid-template-columns: 1fr;
            }

            .search-submit {
                grid-column: auto;
            }

            .search-card {
                border-radius: 24px;
            }

            .search-field,
            .search-submit {
                min-height: 70px;
                border-radius: 17px;
            }

            .section {
                padding: 85px 0;
            }

            .about-media {
                min-height: 430px;
            }

            .about-main-image {
                width: 88%;
            }

            .about-small-image {
                width: 52%;
            }

            .about-stamp {
                width: 95px;
                height: 95px;

                font-size: 18px;
            }

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

            .form-group.full {
                grid-column: auto;
            }

            .contact-shell {
                padding: 14px;
            }

            .contact-info,
            .contact-form {
                padding: 27px;
            }

            .footer-inner {
                justify-content: center;
                text-align: center;
            }

            .decoration-three,
            .decoration-four {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration:
                    0.01ms !important;

                animation-iteration-count:
                    1 !important;

                transition-duration:
                    0.01ms !important;

                scroll-behavior:
                    auto !important;
            }
        }


        /* =========================================
   CREATIVE SERVICES EXPERIENCE
========================================= */

.creative-services-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fffaf7 0%,
            #f5f1ec 50%,
            #fffdfb 100%
        );
}

.creative-services-section::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0.35;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(122, 31, 61, 0.08),
            transparent 23%
        ),
        radial-gradient(
            circle at 87% 72%,
            rgba(122, 31, 61, 0.07),
            transparent 25%
        );
}

.services-bg-orb {
    position: absolute;
    pointer-events: none;
}

.services-orb-one {
    width: 340px;
    height: 340px;

    top: -130px;
    right: -160px;

    border:
        1px solid rgba(122, 31, 61, 0.11);

    border-radius: 50%;

    animation:
        servicesOrbFloat
        9s ease-in-out infinite;
}

.services-orb-two {
    width: 130px;
    height: 130px;

    left: -55px;
    bottom: 70px;

    border:
        1px solid rgba(122, 31, 61, 0.11);

    border-radius: 30px;

    transform: rotate(45deg);

    animation:
        servicesOrbRotate
        18s linear infinite;
}

/* Heading */

.creative-services-heading {
    position: relative;
    z-index: 2;

    max-width: 820px;
    margin: 0 auto 70px;

    text-align: center;
}

.creative-services-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;
    padding: 10px 18px;

    color: #7a1f3d;
    background:
        rgba(122, 31, 61, 0.07);

    border:
        1px solid rgba(122, 31, 61, 0.11);

    border-radius: 100px;

    font-size: 14px;
    font-weight: 800;
}

.creative-services-heading h2 {
    color: #7a1f3d;

    font-family:
        "Aref Ruqaa", serif;

    font-size:
        clamp(48px, 5.5vw, 80px);

    line-height: 1.17;
}

.creative-services-heading h2 span {
    position: relative;
    display: inline-block;
}

.creative-services-heading h2 span::after {
    content: "";
    position: absolute;

    right: 8%;
    bottom: -4px;

    width: 84%;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #7a1f3d,
            transparent
        );

    border-radius: 50%;
    opacity: 0.3;
}

.creative-services-heading p {
    max-width: 680px;
    margin: 18px auto 0;

    color: #74656a;
    font-size: 17px;
    line-height: 1.9;
}

/* Main experience */

.services-experience {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        0.78fr 1.22fr;

    gap: 28px;

    align-items: stretch;

    perspective: 1500px;
}

/* Navigation */

.services-navigation {
    display: grid;
    gap: 12px;
}

.service-tab {
    position: relative;

    width: 100%;
    min-height: 90px;

    display: grid;

    grid-template-columns:
        48px 1fr 52px;

    align-items: center;
    gap: 14px;

    padding: 13px 15px;

    color: #44363b;
    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid rgba(122, 31, 61, 0.09);

    border-radius: 22px;

    text-align: right;

    box-shadow:
        0 12px 30px
        rgba(72, 10, 35, 0.06);

    transform-style: preserve-3d;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.service-tab::before {
    content: "";
    position: absolute;

    top: 50%;
    right: -1px;

    width: 4px;
    height: 0;

    background: #7a1f3d;
    border-radius: 10px;

    transform:
        translateY(-50%);

    transition:
        height 0.35s ease;
}

.service-tab:hover,
.service-tab.active {
    color: #7a1f3d;

    background: #fffaf7;

    border-color:
        rgba(122, 31, 61, 0.2);

    transform:
        translateX(-8px)
        translateZ(25px);

    box-shadow:
        0 22px 45px
        rgba(72, 10, 35, 0.12);
}

.service-tab.active::before {
    height: 52%;
}

.service-tab-number {
    color:
        rgba(122, 31, 61, 0.42);

    font-size: 13px;
    font-weight: 800;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.service-tab.active .service-tab-number {
    color: #7a1f3d;

    transform:
        rotate(-8deg)
        scale(1.08);
}

.service-tab-text strong {
    display: block;
    font-size: 17px;
}

.service-tab-text small {
    display: block;
    margin-top: 4px;

    color: #827278;
    font-size: 12px;
}

.service-tab-icon {
    width: 49px;
    height: 49px;

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

    color: #7a1f3d;
    background:
        rgba(122, 31, 61, 0.07);

    border-radius: 16px;

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

.service-tab.active .service-tab-icon {
    color: #f5f1ec;
    background: #7a1f3d;

    transform:
        rotateY(180deg)
        scale(1.07);
}

/* Preview */

.services-preview {
    position: relative;

    min-height: 625px;

    overflow: hidden;

    background: #7a1f3d;

    border-radius: 38px;

    box-shadow:
        0 38px 90px
        rgba(70, 8, 32, 0.22);

    transform-style: preserve-3d;

    transition:
        transform 0.18s linear;
}

.services-preview-orbit {
    position: absolute;
    z-index: 5;

    width: 430px;
    height: 430px;

    top: -190px;
    left: -170px;

    border:
        1px solid rgba(245, 241, 236, 0.2);

    border-radius: 50%;

    pointer-events: none;

    animation:
        servicesPreviewOrbit
        15s linear infinite;
}

.services-preview-orbit::after {
    content: "";

    position: absolute;
    top: 88px;
    right: 22px;

    width: 14px;
    height: 14px;

    background: #f5f1ec;
    border-radius: 4px;

    transform: rotate(45deg);

    box-shadow:
        0 0 25px
        rgba(255, 255, 255, 0.7);
}

.services-preview-glow {
    position: absolute;
    z-index: 3;

    width: 330px;
    height: 330px;

    top: 50%;
    left: 50%;

    background:
        rgba(255, 240, 234, 0.15);

    border-radius: 50%;
    filter: blur(70px);

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    animation:
        servicesGlow
        5s ease-in-out infinite;
}

.service-preview-panel {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-55px)
        rotateY(-7deg)
        scale(0.96);

    transition:
        opacity 0.65s ease,
        visibility 0.65s ease,
        transform 0.65s
        cubic-bezier(.2, .8, .2, 1);
}

.service-preview-panel.active {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0)
        rotateY(0)
        scale(1);
}

.service-preview-image {
    position: absolute;
    inset: 0;
}

.service-preview-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.92)
        contrast(1.05);

    transition:
        transform 1.2s
        cubic-bezier(.2, .8, .2, 1);
}

.service-preview-panel.active
.service-preview-image img {
    animation:
        activeServiceImage
        12s ease-in-out
        infinite alternate;
}

.service-preview-panel::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(35, 2, 14, 0.96) 0%,
            rgba(72, 10, 35, 0.78) 46%,
            rgba(35, 2, 14, 0.15) 100%
        );
}

.service-preview-content {
    position: absolute;

    right: 45px;
    bottom: 45px;

    z-index: 6;

    max-width: 520px;

    color: #f5f1ec;

    transform:
        translateZ(75px);
}

.service-preview-index {
    display: inline-flex;

    margin-bottom: 13px;
    padding: 8px 13px;

    color:
        rgba(245, 241, 236, 0.82);

    background:
        rgba(255, 255, 255, 0.1);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 100px;

    backdrop-filter: blur(10px);

    font-size: 12px;
    font-weight: 700;
}

.service-preview-content h3 {
    font-family:
        "Aref Ruqaa", serif;

    font-size:
        clamp(44px, 5vw, 70px);

    line-height: 1.1;
}

.service-preview-content > p {
    margin-top: 13px;

    color:
        rgba(245, 241, 236, 0.76);

    font-size: 15px;
    line-height: 1.85;
}

.service-preview-features {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 18px;
}

.service-preview-features span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 11px;

    color:
        rgba(245, 241, 236, 0.9);

    background:
        rgba(255, 255, 255, 0.09);

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 100px;

    backdrop-filter: blur(9px);

    font-size: 12px;
}

.service-preview-features i {
    font-size: 10px;
}

.service-preview-button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 22px;
    padding: 0 24px;

    color: #7a1f3d;
    background: #f5f1ec;

    border-radius: 100px;

    font-weight: 800;

    box-shadow:
        0 17px 35px
        rgba(20, 0, 8, 0.25);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.service-preview-button:hover {
    transform:
        translateY(-5px)
        translateZ(30px)
        scale(1.025);

    box-shadow:
        0 24px 45px
        rgba(20, 0, 8, 0.32);
}

.service-preview-button i {
    transition:
        transform 0.35s ease;
}

.service-preview-button:hover i {
    transform:
        translateX(-7px);
}

/* Floating secondary image */

.service-floating-image {
    position: absolute;
    z-index: 7;

    width: 175px;
    height: 220px;

    left: 34px;
    top: 45px;

    overflow: hidden;

    border:
        7px solid
        rgba(255, 250, 247, 0.85);

    border-radius:
        90px 90px 24px 24px;

    box-shadow:
        0 28px 60px
        rgba(20, 0, 8, 0.33);

    transform:
        rotate(-6deg)
        translateZ(110px);

    animation:
        serviceFloatingImage
        5s ease-in-out infinite;
}

.service-floating-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animations */

@keyframes servicesOrbFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-25px)
            rotate(9deg);
    }
}

@keyframes servicesOrbRotate {
    to {
        transform: rotate(405deg);
    }
}

@keyframes servicesPreviewOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes servicesGlow {
    0%,
    100% {
        opacity: 0.45;
        scale: 0.9;
    }

    50% {
        opacity: 1;
        scale: 1.15;
    }
}

@keyframes activeServiceImage {
    from {
        transform: scale(1.03);
    }

    to {
        transform:
            scale(1.12)
            translateX(-12px);
    }
}

@keyframes serviceFloatingImage {
    0%,
    100% {
        translate: 0 0;
        rotate: -2deg;
    }

    50% {
        translate: 0 -14px;
        rotate: 2deg;
    }
}

/* Responsive */

@media (max-width: 1050px) {
    .services-experience {
        grid-template-columns: 1fr;
    }

    .services-navigation {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .service-tab {
        grid-template-columns:
            1fr 48px;

        min-height: 105px;
    }

    .service-tab-number {
        display: none;
    }

    .services-preview {
        min-height: 570px;
    }
}

@media (max-width: 760px) {
    .creative-services-section {
        padding: 85px 0;
    }

    .creative-services-heading {
        margin-bottom: 45px;
    }

    .creative-services-heading h2 {
        font-size: 48px;
    }

    .creative-services-heading p {
        font-size: 15px;
    }

    .services-navigation {
        display: flex;

        overflow-x: auto;
        gap: 10px;

        padding-bottom: 7px;

        scroll-snap-type: x mandatory;
    }

    .services-navigation::-webkit-scrollbar {
        height: 4px;
    }

    .services-navigation::-webkit-scrollbar-thumb {
        background:
            rgba(122, 31, 61, 0.25);

        border-radius: 10px;
    }

    .service-tab {
        min-width: 225px;

        grid-template-columns:
            1fr 46px;

        scroll-snap-align: start;
    }

    .service-tab:hover,
    .service-tab.active {
        transform: translateY(-4px);
    }

    .services-preview {
        min-height: 590px;
        border-radius: 27px;
    }

    .service-preview-content {
        right: 22px;
        left: 22px;
        bottom: 25px;
    }

    .service-preview-content h3 {
        font-size: 46px;
    }

    .service-preview-content > p {
        font-size: 14px;
    }

    .service-floating-image {
        width: 120px;
        height: 155px;

        top: 25px;
        left: 20px;

        border-width: 5px;
    }
}

/* =========================================
   CINEMATIC VENUES SHOWCASE
========================================= */

.venues-showcase {
    position: relative;
    padding: 125px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(122, 31, 61, 0.09),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #fffaf7,
            #f5f1ec 50%,
            #fffdfb
        );
}

.venues-showcase::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0.32;
    pointer-events: none;

    background-image:
        linear-gradient(
            135deg,
            transparent 47%,
            rgba(122, 31, 61, 0.05) 48%,
            transparent 49%
        );

    background-size: 72px 72px;
}

/* Background decorations */

.venues-orbit {
    position: absolute;
    pointer-events: none;
}

.venues-orbit-one {
    width: 390px;
    height: 390px;

    top: -170px;
    right: -190px;

    border:
        1px solid rgba(122, 31, 61, 0.12);

    border-radius: 50%;

    animation:
        venueOrbitFloat
        10s ease-in-out infinite;
}

.venues-orbit-two {
    width: 145px;
    height: 145px;

    bottom: 70px;
    left: -60px;

    border:
        1px solid rgba(122, 31, 61, 0.12);

    border-radius: 34px;

    transform: rotate(45deg);

    animation:
        venueOrbitRotate
        16s linear infinite;
}

/* Heading */

.venues-heading {
    position: relative;
    z-index: 2;

    max-width: 820px;
    margin: 0 auto 70px;

    text-align: center;
}

.venues-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;
    padding: 10px 18px;

    color: #7a1f3d;
    background:
        rgba(122, 31, 61, 0.07);

    border:
        1px solid rgba(122, 31, 61, 0.12);

    border-radius: 100px;

    font-size: 14px;
    font-weight: 800;
}

.venues-heading h2 {
    color: #7a1f3d;

    font-family:
        "Aref Ruqaa", serif;

    font-size:
        clamp(50px, 5.7vw, 82px);

    line-height: 1.15;
}

.venues-heading h2 span {
    position: relative;
    display: inline-block;
}

.venues-heading h2 span::after {
    content: "";
    position: absolute;

    right: 8%;
    bottom: -4px;

    width: 84%;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #7a1f3d,
            transparent
        );

    border-radius: 50%;
    opacity: 0.3;

    animation:
        venueTitleLine
        3s ease-in-out infinite;
}

.venues-heading p {
    max-width: 690px;
    margin: 18px auto 0;

    color: #74656a;
    font-size: 17px;
    line-height: 1.9;
}

/* Slider stage */

.venues-stage {
    position: relative;
    z-index: 2;

    perspective: 1700px;
}

.venues-track {
    display: flex;
    gap: 26px;

    padding:
        35px
        calc((100% - 690px) / 2)
        45px;

    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    direction: rtl;

    scrollbar-width: none;
}

.venues-track::-webkit-scrollbar {
    display: none;
}

/* Main card */

.venue-card {
    position: relative;

    width: 690px;
    min-width: 690px;
    min-height: 660px;

    display: grid;
    grid-template-columns:
        1.12fr 0.88fr;

    overflow: hidden;

    background: #fffaf7;

    border:
        1px solid rgba(122, 31, 61, 0.1);

    border-radius: 38px;

    scroll-snap-align: center;

    box-shadow:
        0 30px 75px
        rgba(74, 9, 34, 0.14);

    opacity: 0.38;

    transform:
        perspective(1500px)
        rotateY(-14deg)
        scale(0.9)
        translateX(50px);

    transform-style: preserve-3d;

    transition:
        opacity 0.65s ease,
        transform 0.65s
        cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.65s ease;
}

.venue-card.active {
    opacity: 1;

    transform:
        perspective(1500px)
        rotateY(0deg)
        scale(1)
        translateX(0);

    box-shadow:
        0 45px 100px
        rgba(74, 9, 34, 0.23);
}

/* Image side */

.venue-card-media {
    position: relative;
    min-height: 660px;
    overflow: hidden;
}

.venue-card-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.08)
        translateX(35px);

    transition:
        transform 1.15s
        cubic-bezier(.2, .8, .2, 1),
        filter 0.6s ease;
}

.venue-card.active .venue-card-media img {
    transform:
        scale(1.02)
        translateX(0);

    animation:
        venueImageBreathing
        12s ease-in-out
        infinite alternate;
}

.venue-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(35, 2, 14, 0.84),
            transparent 54%
        );
}

.venue-pointer-light {
    position: absolute;

    width: 300px;
    height: 300px;

    top: -150px;
    left: -150px;

    border-radius: 50%;

    background:
        rgba(255, 242, 235, 0.28);

    filter: blur(25px);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        transform 0.16s linear;
}

.venue-card:hover .venue-pointer-light {
    opacity: 1;
}

/* Top badges */

.venue-top-badges {
    position: absolute;

    top: 20px;
    right: 20px;
    left: 20px;

    z-index: 3;

    display: flex;
    justify-content: space-between;
    gap: 10px;

    transform: translateZ(70px);
}

.venue-recommended,
.venue-price {
    min-height: 36px;

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

    padding: 0 13px;

    border-radius: 100px;

    backdrop-filter: blur(13px);

    font-size: 12px;
    font-weight: 800;
}

.venue-recommended {
    color: #f5f1ec;

    background:
        rgba(122, 31, 61, 0.77);

    border:
        1px solid rgba(255, 255, 255, 0.2);
}

.venue-price {
    color: #7a1f3d;

    background:
        rgba(255, 250, 247, 0.89);

    border:
        1px solid rgba(255, 255, 255, 0.45);
}

/* Rating and number */

.venue-rating {
    position: absolute;
    right: 20px;
    bottom: 20px;

    z-index: 3;

    min-height: 39px;

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

    padding: 0 13px;

    color: #f5f1ec;

    background:
        rgba(25, 2, 10, 0.72);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 13px;

    backdrop-filter: blur(12px);

    font-size: 13px;
    font-weight: 800;

    transform: translateZ(75px);
}

.venue-rating i {
    color: #ffd166;
}

.venue-number {
    position: absolute;

    left: 18px;
    bottom: 12px;

    z-index: 3;

    color:
        rgba(245, 241, 236, 0.55);

    font-family:
        "Aref Ruqaa", serif;

    font-size: 72px;
    line-height: 1;

    transform: translateZ(50px);
}

/* Content side */

.venue-card-content {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 38px 34px;

    background:
        linear-gradient(
            160deg,
            #fffdfb,
            #f5f1ec
        );

    transform-style: preserve-3d;
}

.venue-card-content::before {
    content: "";
    position: absolute;

    width: 190px;
    height: 190px;

    top: -95px;
    left: -95px;

    background:
        rgba(122, 31, 61, 0.06);

    border-radius: 50%;
}

.venue-card-header {
    position: relative;
    z-index: 2;

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

    opacity: 0;

    transform:
        translateX(45px)
        translateZ(45px);

    transition:
        opacity 0.5s 0.2s ease,
        transform 0.65s 0.2s ease;
}

.venue-card.active .venue-card-header {
    opacity: 1;

    transform:
        translateX(0)
        translateZ(45px);
}

.venue-city {
    color: #9b6a7c;
    font-size: 13px;
    font-weight: 700;
}

.venue-card-content h3 {
    margin-top: 5px;

    color: #7a1f3d;

    font-family:
        "Aref Ruqaa", serif;

    font-size: 42px;
    line-height: 1.15;
}

.venue-favorite {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    color: #7a1f3d;
    background:
        rgba(122, 31, 61, 0.07);

    border:
        1px solid rgba(122, 31, 61, 0.1);

    border-radius: 15px;

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

.venue-favorite:hover,
.venue-favorite.active {
    color: #f5f1ec;
    background: #7a1f3d;

    transform:
        rotateY(180deg)
        scale(1.08);
}

.venue-description {
    position: relative;
    z-index: 2;

    margin-top: 22px;

    color: #74656a;
    line-height: 1.9;

    opacity: 0;

    transform:
        translateX(50px)
        translateZ(35px);

    transition:
        opacity 0.55s 0.32s ease,
        transform 0.7s 0.32s ease;
}

.venue-card.active .venue-description {
    opacity: 1;

    transform:
        translateX(0)
        translateZ(35px);
}

.venue-info {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 10px;

    margin-top: 24px;

    opacity: 0;

    transform:
        translateX(55px)
        translateZ(30px);

    transition:
        opacity 0.55s 0.44s ease,
        transform 0.7s 0.44s ease;
}

.venue-card.active .venue-info {
    opacity: 1;

    transform:
        translateX(0)
        translateZ(30px);
}

.venue-info span {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #65565c;
    font-size: 14px;
}

.venue-info i {
    width: 18px;
    color: #7a1f3d;
}

.venue-tags {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 23px;

    opacity: 0;

    transform:
        translateX(60px)
        translateZ(25px);

    transition:
        opacity 0.55s 0.56s ease,
        transform 0.7s 0.56s ease;
}

.venue-card.active .venue-tags {
    opacity: 1;

    transform:
        translateX(0)
        translateZ(25px);
}

.venue-tags span {
    padding: 7px 12px;

    color: #7a1f3d;

    background:
        rgba(122, 31, 61, 0.06);

    border:
        1px solid rgba(122, 31, 61, 0.11);

    border-radius: 100px;

    font-size: 12px;
    font-weight: 700;
}

.venue-card-actions {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 55px;
    gap: 10px;

    margin-top: auto;
    padding-top: 30px;

    opacity: 0;

    transform:
        translateY(30px)
        translateZ(40px);

    transition:
        opacity 0.55s 0.68s ease,
        transform 0.7s 0.68s ease;
}

.venue-card.active .venue-card-actions {
    opacity: 1;

    transform:
        translateY(0)
        translateZ(40px);
}

.venue-main-button,
.venue-message-button {
    min-height: 55px;

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

    border-radius: 17px;

    font-weight: 800;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.venue-main-button {
    gap: 10px;

    color: #f5f1ec;
    background: #7a1f3d;

    box-shadow:
        0 15px 32px
        rgba(122, 31, 61, 0.22);
}

.venue-main-button:hover {
    transform:
        translateY(-5px)
        translateZ(25px)
        scale(1.02);

    box-shadow:
        0 22px 42px
        rgba(122, 31, 61, 0.32);
}

.venue-main-button i {
    transition: transform 0.3s ease;
}

.venue-main-button:hover i {
    transform: translateX(-7px);
}

.venue-message-button {
    color: #7a1f3d;

    background:
        rgba(122, 31, 61, 0.08);

    border:
        1px solid rgba(122, 31, 61, 0.12);

    font-size: 20px;
}

.venue-message-button:hover {
    color: #f5f1ec;
    background: #7a1f3d;

    transform:
        translateY(-5px)
        rotate(-7deg);
}

/* Navigation arrows */

.venue-slider-button {
    position: absolute;

    top: 50%;
    z-index: 10;

    width: 58px;
    height: 58px;

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

    color: #7a1f3d;
    background:
        rgba(255, 250, 247, 0.92);

    border:
        1px solid rgba(122, 31, 61, 0.1);

    border-radius: 50%;

    backdrop-filter: blur(15px);

    box-shadow:
        0 18px 42px
        rgba(74, 9, 34, 0.17);

    transform:
        translateY(-50%)
        translateZ(70px);

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

.venue-slider-button:hover {
    color: #f5f1ec;
    background: #7a1f3d;

    transform:
        translateY(-50%)
        scale(1.1)
        rotate(-7deg);
}

.venue-next {
    left: 28px;
}

.venue-prev {
    right: 28px;
}

/* Bottom controls */

.venues-controls {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    max-width: 900px;
    margin: 25px auto 0;
}

.venues-progress {
    display: flex;
    align-items: center;
    gap: 13px;

    color: #7a1f3d;
    font-size: 13px;
    font-weight: 800;
}

.venues-progress-line {
    position: relative;

    width: 190px;
    height: 3px;

    overflow: hidden;

    background:
        rgba(122, 31, 61, 0.14);

    border-radius: 10px;
}

.venues-progress-line span {
    position: absolute;
    top: 0;
    right: 0;

    width: 25%;
    height: 100%;

    background: #7a1f3d;

    border-radius: inherit;

    transition:
        width 0.55s ease;
}

.all-venues-link {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 22px;

    color: #7a1f3d;

    border:
        1px solid rgba(122, 31, 61, 0.15);

    border-radius: 100px;

    font-weight: 800;

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

.all-venues-link:hover {
    color: #f5f1ec;
    background: #7a1f3d;

    transform:
        translateY(-4px);
}

/* Entry animation from right */

.venue-reveal {
    opacity: 0;

    transform:
        translateX(90px)
        rotateY(-8deg);

    filter: blur(7px);

    transition:
        opacity 0.9s ease,
        transform 1s
        cubic-bezier(.2, .8, .2, 1),
        filter 0.9s ease;
}

.venue-reveal.visible {
    opacity: 1;

    transform:
        translateX(0)
        rotateY(0);

    filter: blur(0);
}

/* Animations */

@keyframes venueImageBreathing {
    from {
        transform:
            scale(1.02)
            translateX(0);
    }

    to {
        transform:
            scale(1.1)
            translateX(-12px);
    }
}

@keyframes venueOrbitFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-28px)
            rotate(8deg);
    }
}

@keyframes venueOrbitRotate {
    to {
        transform: rotate(405deg);
    }
}

@keyframes venueTitleLine {
    0%,
    100% {
        scale: 0.83 1;
        opacity: 0.22;
    }

    50% {
        scale: 1.07 1;
        opacity: 0.48;
    }
}

/* Tablet */

@media (max-width: 1000px) {
    .venue-card {
        width: 620px;
        min-width: 620px;

        grid-template-columns: 1fr;
        grid-template-rows: 360px auto;
    }

    .venue-card-media {
        min-height: 360px;
    }

    .venues-track {
        padding-inline:
            calc((100% - 620px) / 2);
    }

    .venue-card-content {
        min-height: 430px;
    }
}

/* Mobile */

@media (max-width: 700px) {
    .venues-showcase {
        padding: 85px 0;
    }

    .venues-heading {
        margin-bottom: 45px;
    }

    .venues-heading h2 {
        font-size: 48px;
    }

    .venues-heading p {
        font-size: 15px;
    }

    .venues-track {
        gap: 16px;

        padding:
            20px 14px
            35px;

        scroll-padding-inline: 14px;
    }

    .venue-card {
        width:
            calc(100vw - 42px);

        min-width:
            calc(100vw - 42px);

        min-height: auto;

        grid-template-columns: 1fr;
        grid-template-rows: 330px auto;

        border-radius: 27px;

        opacity: 0.65;

        transform:
            scale(0.94);
    }

    .venue-card.active {
        transform: scale(1);
    }

    .venue-card-media {
        min-height: 330px;
    }

    .venue-card-content {
        min-height: 420px;
        padding: 27px 22px;
    }

    .venue-card-content h3 {
        font-size: 37px;
    }

    .venue-number {
        font-size: 55px;
    }

    .venue-slider-button {
        display: none;
    }

    .venues-controls {
        flex-direction: column;
    }

    .all-venues-link {
        width: 100%;
    }

    .venues-progress-line {
        width: 145px;
    }
}



/* =========================================
   BRIDE & GROOM CATCHING WHATSAPP
========================================= */

.couple-whatsapp-widget {
    position: fixed;
    right: 22px;
    bottom: 20px;
    z-index: 99999;

    width: 185px;
    height: 205px;

    display: block;

    color: inherit;
    text-decoration: none;

    isolation: isolate;

    animation:
        fullCoupleWidgetFloat
        5s ease-in-out infinite;
}

/* Cartoon illustration */

.couple-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;

    width: 175px;
    height: 175px;

    display: block;

    transform-origin: bottom center;

    transition:
        transform 0.45s
        cubic-bezier(.2, .8, .2, 1);

    filter:
        drop-shadow(
            0 19px 25px
            rgba(62, 5, 27, 0.28)
        );
}

.couple-cartoon-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.couple-whatsapp-widget:hover
.couple-illustration {
    transform:
        translateY(-6px)
        scale(1.035)
        rotate(-1deg);
}

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

.catch-whatsapp-icon {
    position: absolute;
    top: 5px;
    right: 51px;
    z-index: 20;

    width: 58px;
    height: 58px;

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

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #41e37f,
            #16a34a
        );

    border: 5px solid #f5f1ec;
    border-radius: 50%;

    font-size: 30px;

    box-shadow:
        0 13px 28px
        rgba(15, 128, 61, 0.36),

        0 0 0 7px
        rgba(37, 211, 102, 0.11);

    animation:
        coupleCatchWhatsApp
        4.8s
        cubic-bezier(.42, 0, .2, 1)
        infinite;

    transform-origin: center;
}

.catch-whatsapp-icon::before {
    content: "";

    position: absolute;
    inset: -10px;

    border:
        2px solid
        rgba(37, 211, 102, 0.3);

    border-radius: 50%;

    animation:
        catchIconPulse
        2.3s ease-out infinite;
}

/* =========================================
   COUPLE ANIMATIONS
========================================= */

.svg-groom-cartoon {
    transform-origin: 102px 218px;

    animation:
        happyGroomMove
        4.8s ease-in-out infinite;
}

.svg-bride-cartoon {
    transform-origin: 165px 220px;

    animation:
        happyBrideMove
        4.8s ease-in-out infinite;
}

.groom-catching-arm {
    transform-box: fill-box;
    transform-origin: bottom left;

    animation:
        groomCatchArm
        4.8s ease-in-out infinite;
}

.bride-catching-arm {
    transform-box: fill-box;
    transform-origin: bottom left;

    animation:
        brideCatchArm
        4.8s ease-in-out infinite;
}

.bride-cartoon-veil {
    transform-origin: 160px 70px;

    animation:
        cartoonVeilFlow
        3.5s ease-in-out infinite;
}

.bride-cartoon-bouquet {
    transform-origin: 148px 150px;

    animation:
        cartoonBouquetMove
        3.2s ease-in-out infinite;
}

.couple-catch-glow {
    animation:
        catchingGlow
        4.8s ease-in-out infinite;
}

/* =========================================
   CELEBRATION HEARTS
========================================= */

.catch-heart,
.catch-star {
    position: absolute;
    z-index: 18;

    color: #7a1f3d;

    opacity: 0;

    pointer-events: none;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(74, 10, 37, 0.22)
        );

    animation:
        catchCelebration
        4.8s ease-out infinite;
}

.catch-heart-one {
    top: 59px;
    right: 23px;
    font-size: 13px;

    --heart-x: 19px;
    --heart-y: -35px;
}

.catch-heart-two {
    top: 48px;
    right: 121px;
    font-size: 10px;

    --heart-x: -22px;
    --heart-y: -31px;

    animation-delay: 0.08s;
}

.catch-heart-three {
    top: 78px;
    right: 87px;
    font-size: 8px;

    --heart-x: 5px;
    --heart-y: -42px;

    animation-delay: 0.14s;
}

.catch-star-one {
    top: 55px;
    right: 10px;

    --heart-x: 22px;
    --heart-y: -18px;
}

.catch-star-two {
    top: 38px;
    right: 143px;

    --heart-x: -18px;
    --heart-y: -25px;

    animation-delay: 0.15s;
}

/* =========================================
   TOOLTIP
========================================= */

.couple-whatsapp-tooltip {
    position: absolute;
    right: 171px;
    bottom: 44px;
    z-index: 30;

    min-width: 178px;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 18px;

    color: #f5f1ec;

    background:
        linear-gradient(
            145deg,
            #8d294d,
            #4a1028
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius:
        19px 19px 5px 19px;

    box-shadow:
        0 17px 35px
        rgba(74, 10, 37, 0.27);

    white-space: nowrap;

    font-size: 14px;
    font-weight: 800;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(18px)
        scale(0.91);

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

.couple-whatsapp-tooltip i {
    color: #ffbac8;

    animation:
        tooltipHeartBeat
        1.6s ease-in-out infinite;
}

.couple-whatsapp-tooltip::after {
    content: "";

    position: absolute;
    right: -9px;
    bottom: 7px;

    width: 18px;
    height: 18px;

    background: #4a1028;

    clip-path:
        polygon(
            0 0,
            100% 100%,
            0 100%
        );
}

.couple-whatsapp-widget:hover
.couple-whatsapp-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0)
        scale(1);
}

/* =========================================
   KEYFRAMES
========================================= */

@keyframes fullCoupleWidgetFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(1deg);
    }
}

/*
Sequence:
0%    WhatsApp floating above them
35%   WhatsApp falls toward their hands
45%   They catch it
55%   Couple celebrates
75%   Icon rises again
*/

@keyframes coupleCatchWhatsApp {
    0%,
    18% {
        transform:
            translateY(-7px)
            rotate(-8deg)
            scale(1);
    }

    32% {
        transform:
            translateY(18px)
            rotate(7deg)
            scale(0.96);
    }

    42%,
    57% {
        transform:
            translateY(41px)
            rotate(0deg)
            scale(0.9);
    }

    48% {
        transform:
            translateY(38px)
            scale(1.07);
    }

    70% {
        transform:
            translateY(8px)
            rotate(-5deg)
            scale(0.97);
    }

    82%,
    100% {
        transform:
            translateY(-7px)
            rotate(5deg)
            scale(1);
    }
}

@keyframes groomCatchArm {
    0%,
    23%,
    85%,
    100% {
        transform:
            rotate(0deg)
            translateY(0);
    }

    36%,
    60% {
        transform:
            rotate(-14deg)
            translateY(-7px);
    }

    48% {
        transform:
            rotate(-18deg)
            translateY(-10px);
    }
}

@keyframes brideCatchArm {
    0%,
    23%,
    85%,
    100% {
        transform:
            rotate(0deg)
            translateY(0);
    }

    36%,
    60% {
        transform:
            rotate(13deg)
            translateY(-7px);
    }

    48% {
        transform:
            rotate(17deg)
            translateY(-10px);
    }
}

@keyframes happyGroomMove {
    0%,
    32%,
    75%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    45% {
        transform:
            translateY(-5px)
            rotate(2deg);
    }

    53% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    61% {
        transform:
            translateY(-4px)
            rotate(2deg);
    }
}

@keyframes happyBrideMove {
    0%,
    32%,
    75%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    45% {
        transform:
            translateY(-5px)
            rotate(-2deg);
    }

    53% {
        transform:
            translateY(0)
            rotate(1deg);
    }

    61% {
        transform:
            translateY(-4px)
            rotate(-2deg);
    }
}

@keyframes catchingGlow {
    0%,
    35%,
    68%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }

    43%,
    57% {
        opacity: 0.32;
        transform: scale(1.6);
    }
}

@keyframes catchCelebration {
    0%,
    41% {
        opacity: 0;

        transform:
            translate(0, 0)
            scale(0.3)
            rotate(-12deg);
    }

    47% {
        opacity: 1;
    }

    68% {
        opacity: 0;

        transform:
            translate(
                var(--heart-x),
                var(--heart-y)
            )
            scale(1.2)
            rotate(14deg);
    }

    100% {
        opacity: 0;
    }
}

@keyframes catchIconPulse {
    0% {
        transform: scale(0.82);
        opacity: 0.65;
    }

    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

@keyframes cartoonVeilFlow {
    0%,
    100% {
        transform:
            rotate(0deg)
            scaleX(1);
    }

    50% {
        transform:
            rotate(3deg)
            scaleX(1.045);
    }
}

@keyframes cartoonBouquetMove {
    0%,
    100% {
        transform:
            rotate(-3deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(4deg)
            translateY(-3px);
    }
}

@keyframes tooltipHeartBeat {
    0%,
    100% {
        transform: scale(0.85);
    }

    50% {
        transform: scale(1.25);
    }
}

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

@media (max-width: 700px) {
    .couple-whatsapp-widget {
        right: 8px;
        bottom: 12px;

        width: 138px;
        height: 155px;

        transform-origin: bottom right;
    }

    .couple-illustration {
        width: 132px;
        height: 132px;
    }

    .catch-whatsapp-icon {
        top: 0;
        right: 37px;

        width: 47px;
        height: 47px;

        border-width: 4px;
        font-size: 24px;
    }

    .couple-whatsapp-tooltip {
        display: none;
    }

    .catch-heart-one {
        right: 17px;
    }

    .catch-heart-two {
        right: 94px;
    }

    .catch-heart-three {
        right: 64px;
    }
}

/* Disable animation for accessibility */

@media (prefers-reduced-motion: reduce) {
    .couple-whatsapp-widget,
    .catch-whatsapp-icon,
    .catch-whatsapp-icon::before,
    .svg-groom-cartoon,
    .svg-bride-cartoon,
    .groom-catching-arm,
    .bride-catching-arm,
    .bride-cartoon-veil,
    .bride-cartoon-bouquet,
    .couple-catch-glow,
    .catch-heart,
    .catch-star {
        animation: none !important;
    }
}