/* =====================================================
   CH DIGITAL MARKETING HEADER
   BLACK + GOLD PREMIUM DESIGN
===================================================== */


/*=================------> 
    Header Section Css Start
<------=================*/


.ch-header-a11 {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(201, 164, 92, 0.12);

    opacity: 0;
    transform: translateY(-70px);

    animation: chHeaderEnter-i99 1.1s cubic-bezier(.16,1,.3,1) forwards;

    transition:
        background 0.4s ease,
        box-shadow 0.4s ease;
}


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

.ch-header-container-b22 {
    width: 90%;
    max-width: 1400px;
    min-height: 92px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}


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

.ch-logo-c33 {
    position: relative;
    display: flex;
    align-items: center;

    text-decoration: none;

    opacity: 0;
    transform: translateX(-45px);

    animation: chLogoEnter-j10 1s 0.25s cubic-bezier(.16,1,.3,1)
        forwards;
}

.ch-logo-c33::before {
    content: "";

    position: absolute;
    width: 85px;
    height: 85px;

    left: 20px;
    top: 50%;

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

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(201, 164, 92, 0.18),
        transparent 68%
    );

    filter: blur(10px);

    opacity: 0;

    animation: chLogoGlow-k11 2s 1.2s ease forwards;
}

.ch-logo-c33 img {
    position: relative;

    width: 210px;
    height: auto;

    display: block;

    filter:
        drop-shadow(0 0 0 rgba(201, 164, 92, 0));

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.ch-logo-c33:hover img {
    transform: scale(1.04);

    filter:
        drop-shadow(0 0 12px rgba(201, 164, 92, 0.42));
}


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

.ch-nav-d44 {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 38px;

    opacity: 0;
    transform: translateY(-20px);

    animation: chNavEnter-l22 0.9s 0.45s ease forwards;
}

.ch-nav-link-e55 {
    position: relative;

    padding: 8px 0;

    text-decoration: none;

    color: #e8e0d0;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;

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

.ch-nav-link-e55::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -3px;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        #c9a45c,
        #f0d58a,
        #c9a45c,
        transparent
    );

    box-shadow: 0 0 8px rgba(201, 164, 92, 0.55);

    transition: width 0.4s cubic-bezier(.16,1,.3,1);
}

.ch-nav-link-e55:hover,
.ch-nav-link-e55.active {
    color: #d7b66d;

    transform: translateY(-2px);
}

.ch-nav-link-e55:hover::before,
.ch-nav-link-e55.active::before {
    width: 100%;
}


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

.ch-header-btn-f66 {
    position: relative;

    overflow: hidden;

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

    gap: 13px;

    min-width: 135px;

    padding: 13px 20px;

    border: 1px solid #c9a45c;
    border-radius: 4px;

    background: linear-gradient(
        135deg,
        #c9a45c,
        #e1c477
    );

    color: #ffffff;

    text-decoration: none;

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

    box-shadow:
        0 0 0 rgba(201, 164, 92, 0);

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

    animation: chButtonEnter-m33 0.9s 0.65s ease forwards;

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

.ch-header-btn-f66::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.55),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.7s ease;
}

.ch-header-btn-f66:hover::before {
    left: 150%;
}

.ch-header-btn-f66:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow:
        0 8px 25px rgba(201, 164, 92, 0.28),
        0 0 18px rgba(201, 164, 92, 0.12);
}

.ch-header-btn-f66 b {
    font-size: 19px;

    transition:
        transform 0.35s ease;
}

.ch-header-btn-f66:hover b {
    transform: translate(4px, -4px);
}


/* =====================================================
   GOLD LINE
===================================================== */

.ch-header-line-h88 {
    width: 0;
    height: 1px;

    margin: auto;

    background: linear-gradient(
        90deg,
        transparent,
        #8d6b31,
        #f0d58a,
        #8d6b31,
        transparent
    );

    box-shadow:
        0 0 8px rgba(201, 164, 92, 0.3);

    animation: chLineReveal-n44 1.4s 0.9s ease forwards;
}


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

.ch-menu-btn-g77 {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(201, 164, 92, 0.5);
    border-radius: 3px;

    background: transparent;

    cursor: pointer;

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

    flex-direction: column;

    gap: 5px;
}

.ch-menu-btn-g77 span {
    display: block;

    width: 23px;
    height: 2px;

    background: #d7b66d;

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


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

.ch-header-a11.ch-scrolled-o55 {
    background: rgba(4, 4, 4, 0.97);

    box-shadow:
        0 8px 35px rgba(0, 0, 0, 0.45);

    border-bottom-color:
        rgba(201, 164, 92, 0.25);
}

.ch-header-a11.ch-scrolled-o55
.ch-header-container-b22 {
    min-height: 78px;
}

.ch-header-a11.ch-scrolled-o55
.ch-logo-c33 img {
    width: 185px;
}


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

@keyframes chHeaderEnter-i99 {

    0% {
        opacity: 0;
        transform: translateY(-70px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes chLogoEnter-j10 {

    0% {
        opacity: 0;
        transform: translateX(-45px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


@keyframes chLogoGlow-k11 {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


@keyframes chNavEnter-l22 {

    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes chButtonEnter-m33 {

    0% {
        opacity: 0;
        transform: translateX(35px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes chLineReveal-n44 {

    0% {
        width: 0;
    }

    100% {
        width: 90%;
    }
}


/* =====================================================
   MOBILE
   ONLY MAX-WIDTH 768px
===================================================== */

@media (max-width: 768px) {

    .ch-header-container-b22 {
        width: 90%;
        min-height: 75px;
    }

    .ch-logo-c33 img {
        width: 175px;
    }

    .ch-nav-d44 {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        padding: 18px 0 22px;

        flex-direction: column;
        gap: 2px;

        background: rgba(5, 5, 5, 0.98);

        border-top:
            1px solid rgba(201, 164, 92, 0.15);

        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.4);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-20px);

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

    .ch-nav-d44.ch-mobile-open-p66 {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ch-nav-link-e55 {
        width: 100%;

        text-align: center;

        padding: 13px 0;

        font-size: 15px;
    }

    .ch-nav-link-e55::before {
        display: none;
    }

    .ch-header-btn-f66 {
        display: none;
    }

    .ch-menu-btn-g77 {
        display: flex;
    }

    /* Mobile hamburger animation */

    .ch-menu-btn-g77.ch-menu-active-q77 span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .ch-menu-btn-g77.ch-menu-active-q77 span:nth-child(2) {
        opacity: 0;
        transform: translateX(-8px);
    }

    .ch-menu-btn-g77.ch-menu-active-q77 span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .ch-header-a11.ch-scrolled-o55
    .ch-header-container-b22 {
        min-height: 68px;
    }

    .ch-header-a11.ch-scrolled-o55
    .ch-logo-c33 img {
        width: 165px;
    }
}


/* =====================================================
   LARGE SCREEN
   ONLY MIN-WIDTH 1440px
===================================================== */

@media (min-width: 1440px) {

    .ch-header-container-b22 {
        max-width: 1500px;
        min-height: 105px;
    }

    .ch-logo-c33 img {
        width: 235px;
    }

    .ch-nav-d44 {
        gap: 48px;
    }

    .ch-nav-link-e55 {
        font-size: 16px;
    }

    .ch-header-btn-f66 {
        min-width: 150px;
        padding: 15px 23px;
    }
}



/*=================------> 
    Header Section Css End
<------=================*/











/*==========================------> 
    Banner Section Css start
<------=========================*/

.luxury-hero {

    --black: #050505;
    --black-soft: #0b0907;

    --gold: #dfc77b;
    --gold-light: #f5e9ad;
    --gold-bright: #ffe9a6;
    --gold-dark: #9d7038;

    --white: #faf7ed;
    --muted: #b4afa2;

    position: relative;

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

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

    overflow: hidden;

    background:
        #050505;

    color: var(--white);

    font-family:
        "DM Sans",
        sans-serif;
}


/* =========================================
   BOX SIZING
========================================= */

.luxury-hero *,
.luxury-hero *::before,
.luxury-hero *::after {

    box-sizing: border-box;

}


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

.luxury-hero a {

    text-decoration: none;

    color: inherit;

}


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

.hero-video {

    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

}


.hero-video-element {

    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.08);

    filter:
        saturate(0.75)
        contrast(1.08)
        brightness(0.55);

    animation:
        videoZoom 18s ease-in-out infinite alternate;

}


@keyframes videoZoom {

    0% {

        transform:
            scale(1.08);

    }

    100% {

        transform:
            scale(1.16);

    }

}


/* =========================================
   CINEMATIC OVERLAY
========================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(2, 2, 2, 0.93) 0%,
            rgba(4, 4, 3, 0.75) 35%,
            rgba(4, 4, 3, 0.48) 65%,
            rgba(2, 2, 2, 0.82) 100%
        );

}


/* =========================================
   VIGNETTE
========================================= */

.hero-vignette {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(0, 0, 0, 0.42) 72%,
            rgba(0, 0, 0, 0.92) 100%
        );

    pointer-events: none;

}


/* =========================================
   GOLD CINEMATIC LIGHT
========================================= */

.hero-light {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(100px);

    opacity: 0.22;

    z-index: 2;

}


.hero-light-one {

    width: 420px;
    height: 420px;

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

    background:
        var(--gold-dark);

    animation:
        lightFloatOne 9s ease-in-out infinite;

}


.hero-light-two {

    width: 320px;
    height: 320px;

    bottom: -170px;
    left: -80px;

    background:
        var(--gold);

    opacity: 0.12;

    animation:
        lightFloatTwo 11s ease-in-out infinite;

}


@keyframes lightFloatOne {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0);

    }

    50% {

        transform:
            translate3d(-60px, 50px, 0);

    }

}


@keyframes lightFloatTwo {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0);

    }

    50% {

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

    }

}


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

.hero-grid {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    opacity: 0.4;

    background-image:

        linear-gradient(
            rgba(223, 199, 123, 0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(223, 199, 123, 0.035) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}


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

.hero-particles {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

}


.hero-particles span {

    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 8px var(--gold);

    animation:
        particleFloat 5s ease-in-out infinite;

}


.hero-particles span:nth-child(1) {

    top: 18%;
    left: 12%;

}


.hero-particles span:nth-child(2) {

    top: 28%;
    left: 84%;

    animation-delay: -1s;

}


.hero-particles span:nth-child(3) {

    top: 72%;
    left: 17%;

    animation-delay: -2s;

}


.hero-particles span:nth-child(4) {

    top: 82%;
    left: 77%;

    animation-delay: -3s;

}


.hero-particles span:nth-child(5) {

    top: 14%;
    left: 58%;

    animation-delay: -4s;

}


.hero-particles span:nth-child(6) {

    top: 57%;
    left: 92%;

    animation-delay: -1.5s;

}


.hero-particles span:nth-child(7) {

    top: 86%;
    left: 44%;

    animation-delay: -2.5s;

}


.hero-particles span:nth-child(8) {

    top: 38%;
    left: 7%;

    animation-delay: -3.5s;

}


.hero-particles span:nth-child(9) {

    top: 48%;
    left: 73%;

    animation-delay: -1.8s;

}


.hero-particles span:nth-child(10) {

    top: 68%;
    left: 58%;

    animation-delay: -4.5s;

}


@keyframes particleFloat {

    0%,
    100% {

        opacity: 0.15;

        transform:
            translateY(0)
            scale(0.7);

    }

    50% {

        opacity: 1;

        transform:
            translateY(-30px)
            scale(1.4);

    }

}


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

.hero-container {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 150px 40px 90px;

    text-align: center;

}


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

.hero-logo {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 24px;

}


.hero-logo img {

    width: 235px;

    height: auto;

    display: block;

    filter:
        drop-shadow(
            0 0 22px
            rgba(223, 199, 123, 0.22)
        );

    animation:
        logoFloat 5s ease-in-out infinite;

}


@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


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

.hero-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-bottom: 28px;

}


.hero-label span:not(.label-line) {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 6px;

    color:
        var(--gold-light);

}


.label-line {

    width: 65px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );

}


.hero-label .label-line:last-child {

    background:

        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

}


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

.hero-title {

    margin: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    line-height: 0.98;

}


.title-small {

    margin-bottom: 12px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 9px;

    color:
        rgba(250, 247, 237, 0.7);

}


.title-main {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(60px, 8vw, 115px);

    font-weight: 600;

    letter-spacing: -4px;

    color:
        var(--white);

}


h4.title-main {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(40px, 8vw, 70px);

    font-weight: 600;

    letter-spacing: -4px;

    color:
        var(--white);

}



.title-gold {
    padding: 30px 0;

    position: relative;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(65px, 8.5vw, 125px);

    font-weight: 600;

    letter-spacing: -4px;

    background:

        linear-gradient(
            115deg,
            var(--gold-dark),
            var(--gold-light),
            var(--gold-bright),
            var(--gold-dark)
        );

    background-size:
        250% auto;

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    animation:
        goldShimmer 5s linear infinite;

}


.title-gold::after {

    content: "";

    position: absolute;

    left: 10%;

    right: 10%;

    bottom: 0px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(223, 199, 123, 0.5);

}


@keyframes goldShimmer {

    0% {

        background-position:
            0% center;

    }

    100% {

        background-position:
            250% center;

    }

}


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

.hero-description {

    max-width: 690px;

    margin: 42px auto 0;

    color:
        rgba(250, 247, 237, 0.68);

    font-size: 16px;

    line-height: 1.9;

    letter-spacing: 0.2px;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 38px;

}


.hero-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    min-width: 205px;

    padding: 17px 24px;

    border: 1px solid
        rgba(223, 199, 123, 0.55);

    overflow: hidden;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    transition:
        0.5s
        cubic-bezier(.16, 1, .3, 1);

}


.hero-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        var(--gold);

    transform:
        translateY(105%);

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

    z-index: -1;

}


.hero-button:hover::before {

    transform:
        translateY(0);

}


.hero-button:hover {

    color:
        var(--black);

    border-color:
        var(--gold);

    box-shadow:
        0 0 35px
        rgba(223, 199, 123, 0.2);

}


.hero-button i {

    font-style: normal;

    font-size: 16px;

    transition:
        transform 0.4s ease;

}


.hero-button:hover i {

    transform:
        translate(4px, -4px);

}


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

.hero-button-primary {

    color:
        var(--black);

    background:
        var(--gold);

    border-color:
        var(--gold);

}


.hero-button-primary::before {

    background:
        var(--black);

}


.hero-button-primary:hover {

    color:
        var(--gold-light);

}


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

.hero-stats {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 35px;

    margin-top: 65px;

}


.hero-stat {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.hero-stat strong {

    font-family:
        "Playfair Display",
        serif;

    font-size: 18px;

    font-weight: 600;

    color:
        var(--gold-light);

}


.hero-stat span {

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

    color:
        rgba(250, 247, 237, 0.45);

}


.stat-divider {

    width: 1px;

    height: 35px;

    background:
        rgba(223, 199, 123, 0.28);

}


/* =========================================
   SCROLL INDICATOR
========================================= */

.hero-scroll {

    position: absolute;

    z-index: 20;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

}


.hero-scroll span {

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 3px;

    color:
        rgba(250, 247, 237, 0.45);

}


.scroll-line {

    position: relative;

    width: 1px;

    height: 45px;

    overflow: hidden;

    background:
        rgba(223, 199, 123, 0.2);

}


.scroll-line i {

    position: absolute;

    top: -100%;

    left: 0;

    width: 100%;

    height: 50%;

    background:
        var(--gold-light);

    animation:
        scrollMove 2s ease-in-out infinite;

}


@keyframes scrollMove {

    0% {

        top: -60%;

    }

    100% {

        top: 120%;

    }

}


/* =========================================
   CORNER DETAILS
========================================= */

.corner-detail {

    position: absolute;

    z-index: 15;

    width: 45px;

    height: 45px;

    opacity: 0.45;

}


.corner-top-left {

    top: 35px;

    left: 35px;

    border-top:
        1px solid var(--gold);

    border-left:
        1px solid var(--gold);

}


.corner-top-right {

    top: 35px;

    right: 35px;

    border-top:
        1px solid var(--gold);

    border-right:
        1px solid var(--gold);

}


.corner-bottom-left {

    bottom: 35px;

    left: 35px;

    border-bottom:
        1px solid var(--gold);

    border-left:
        1px solid var(--gold);

}


.corner-bottom-right {

    bottom: 35px;

    right: 35px;

    border-bottom:
        1px solid var(--gold);

    border-right:
        1px solid var(--gold);

}


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

.reveal-item {

    opacity: 0;

    transform:
        translateY(35px);

    animation:
        heroReveal 1.1s
        cubic-bezier(.16, 1, .3, 1)
        forwards;

}


.hero-logo {

    animation-delay:
        0.15s;

}


.hero-label {

    animation-delay:
        0.3s;

}


.hero-title {

    animation-delay:
        0.45s;

}


.hero-description {

    animation-delay:
        0.65s;

}


.hero-actions {

    animation-delay:
        0.85s;

}


.hero-stats {

    animation-delay:
        1.05s;

}


@keyframes heroReveal {

    0% {

        opacity: 0;

        transform:
            translateY(35px);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================
   ONLY MOBILE
   MAX-WIDTH: 768PX
========================================= */

@media (max-width: 768px) {

    .luxury-hero {

        min-height: 100svh;

    }


    .hero-video-element {

        object-position:
            center center;

        transform:
            scale(1.12);

    }


    .hero-container {

        padding:
            95px 22px 100px;

    }


    .hero-logo {

        margin-bottom: 20px;

    }


    .hero-logo img {

        width: 185px;

    }


    .hero-label {

        gap: 9px;

        margin-bottom: 25px;

    }


    .hero-label span:not(.label-line) {

        font-size: 8px;

        letter-spacing: 3px;

    }


    .label-line {

        width: 28px;

    }


    .title-small {

        font-size: 10px;

        letter-spacing: 5px;

        margin-bottom: 12px;

    }


    .title-main {

        font-size: 51px;

        letter-spacing: -2px;

    }


    .title-gold {

        font-size: 57px;

        letter-spacing: -2px;

    }


    .title-gold::after {

        bottom: -9px;

    }


    .hero-description {

        margin-top: 35px;

        max-width: 520px;

        font-size: 13px;

        line-height: 1.75;

    }


    .hero-actions {

        flex-direction: column;

        width: 100%;

        margin-top: 32px;

    }


    .hero-button {

        width: 100%;

        max-width: 320px;

        padding: 16px 20px;

    }


    .hero-stats {

        gap: 15px;

        margin-top: 48px;

    }


    .hero-stat strong {

        font-size: 14px;

    }


    .hero-stat span {

        font-size: 7px;

        letter-spacing: 1px;

    }


    .stat-divider {

        height: 28px;

    }


    .hero-scroll {

        bottom: 15px;

    }


    .hero-scroll span {

        font-size: 6px;

        letter-spacing: 2px;

    }


    .corner-detail {

        width: 25px;

        height: 25px;

    }


    .corner-top-left {

        top: 18px;

        left: 18px;

    }


    .corner-top-right {

        top: 18px;

        right: 18px;

    }


    .corner-bottom-left {

        bottom: 18px;

        left: 18px;

    }


    .corner-bottom-right {

        bottom: 18px;

        right: 18px;

    }


    .hero-light-one {

        width: 240px;
        height: 240px;

    }


    .hero-light-two {

        width: 200px;
        height: 200px;

    }

}


/* =========================================
   ONLY LARGE DESKTOP
   MIN-WIDTH: 1440PX
========================================= */

@media (min-width: 1440px) {

    .hero-container {

        max-width: 1400px;

        padding-top: 120px;

        padding-bottom: 110px;

    }


    .hero-logo img {

        width: 275px;

    }


    .hero-label {

        margin-bottom: 32px;

    }


    .hero-label span:not(.label-line) {

        font-size: 12px;

        letter-spacing: 7px;

    }


    .title-main {

        font-size: 115px;

    }


    .title-gold {

        font-size: 125px;

    }


    .hero-description {

        max-width: 760px;

        font-size: 17px;

    }


    .hero-button {

        min-width: 225px;

        padding:
            19px 28px;

    }


    .hero-stats {

        margin-top: 72px;

    }


    .hero-stat strong {

        font-size: 20px;

    }


    .hero-stat span {

        font-size: 10px;

    }

}


/*==========================------> 
    Banner Section Css End
<------=========================*/













/*==========================------> 
    About Section Css start
<------=========================*/


/* =====================================================
   CH DIGITAL MARKETING
   ABOUT US SECTION
   COLOR: BLACK + GOLD + CREAM
===================================================== */


/* ================= MAIN SECTION ================= */

.dm-about-section-a17 {
    position: relative;

    width: 100%;

    padding: 115px 0;

    background: #050505;

    overflow: hidden;
}


/* GOLD BACKGROUND GLOW */

.dm-about-section-a17::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    background: rgba(190, 150, 75, 0.08);

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


/* SECOND GLOW */

.dm-about-section-a17::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    bottom: -220px;
    left: -180px;

    background: rgba(190, 150, 75, 0.06);

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


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

.dm-about-container-a17 {
    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    align-items: center;

    gap: 80px;
}


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

.dm-about-content-a17 {
    opacity: 0;

    transform: translateX(-60px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


.dm-about-section-a17.dm-about-visible-a17
.dm-about-content-a17 {

    opacity: 1;

    transform: translateX(0);
}


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

.dm-about-label-a17 {

    display: inline-block;

    position: relative;

    padding-left: 45px;

    margin-bottom: 22px;

    color: #c9a45c;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.dm-about-label-a17::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 32px;

    height: 1px;

    background: #c9a45c;
}


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

.dm-about-content-a17 h2 {

    margin: 0;

    color: #ffffff;

    font-size: 54px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -2px;
}


.dm-about-content-a17 h2 span {

    display: block;

    color: #c9a45c;

    text-shadow:
        0 0 25px rgba(201, 164, 92, 0.12);
}


/* ================= MAIN TEXT ================= */

.dm-about-main-text-a17 {

    max-width: 600px;

    margin: 28px 0 15px;

    color: #e5e5e5;

    font-size: 17px;

    line-height: 1.8;
}


/* ================= SUB TEXT ================= */

.dm-about-sub-text-a17 {

    max-width: 600px;

    margin: 0 0 32px;

    color: #999999;

    font-size: 15px;

    line-height: 1.8;
}


/* ================= FEATURES ================= */

.dm-about-features-a17 {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 35px;
}


/* FEATURE */

.dm-about-feature-a17 {

    display: flex;

    align-items: center;

    gap: 17px;
}


/* FEATURE ICON */

.dm-feature-icon-a17 {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #9f7c3e;

    border-radius: 50%;

    background: rgba(201, 164, 92, 0.06);

    color: #c9a45c;

    font-size: 11px;

    font-weight: 700;

    transition: all 0.35s ease;
}


.dm-about-feature-a17:hover
.dm-feature-icon-a17 {

    background: #c9a45c;

    color: #050505;

    transform: rotate(10deg);

    box-shadow:
        0 0 20px rgba(201, 164, 92, 0.25);
}


/* FEATURE TITLE */

.dm-about-feature-a17 h3 {

    margin: 0 0 4px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;
}


/* FEATURE DESCRIPTION */

.dm-about-feature-a17 p {

    margin: 0;

    color: #858585;

    font-size: 13px;
}


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

.dm-about-btn-a17 {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 14px 26px;

    border: 1px solid #c9a45c;

    border-radius: 50px;

    background: #c9a45c;

    color: #050505;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: all 0.35s ease;
}


.dm-about-btn-a17 span {

    font-size: 20px;

    line-height: 0;

    transition: transform 0.35s ease;
}


.dm-about-btn-a17:hover {

    background: transparent;

    color: #c9a45c;

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(201, 164, 92, 0.12);
}


.dm-about-btn-a17:hover span {

    transform: translateX(5px);
}


/* ================= RIGHT VISUAL ================= */

.dm-about-visual-a17 {

    position: relative;

    opacity: 0;

    transform: translateX(60px);

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

    transition-delay: 0.2s;
}


.dm-about-section-a17.dm-about-visible-a17
.dm-about-visual-a17 {

    opacity: 1;

    transform: translateX(0);
}


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

.dm-about-image-wrap-a17 {

    position: relative;

    width: 100%;

    height: 570px;

    overflow: hidden;

    border-radius: 5px;

    border: 1px solid rgba(201, 164, 92, 0.35);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.5);
}


.dm-about-image-wrap-a17 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 1s ease;
}


.dm-about-image-wrap-a17:hover img {

    transform: scale(1.06);
}


/* IMAGE OVERLAY */

.dm-about-image-overlay-a17 {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.05) 65%
        );

    pointer-events: none;
}


/* GOLD IMAGE BORDER EFFECT */

.dm-about-image-wrap-a17::after {

    content: "";

    position: absolute;

    inset: 12px;

    border: 1px solid rgba(201, 164, 92, 0.45);

    pointer-events: none;
}


/* ================= EXPERIENCE CARD ================= */

.dm-experience-card-a17 {

    position: absolute;

    left: -35px;

    bottom: 40px;

    width: 155px;

    height: 155px;

    border: 1px solid #b38b45;

    border-radius: 50%;

    background: #080808;

    color: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 25px rgba(201, 164, 92, 0.06);

    z-index: 3;
}


/* GOLD RING */

.dm-experience-card-a17::before {

    content: "";

    position: absolute;

    inset: 7px;

    border: 1px dashed rgba(201, 164, 92, 0.45);

    border-radius: 50%;
}


/* NUMBER */

.dm-experience-number-a17 {

    display: flex;

    align-items: baseline;

    justify-content: center;
}


.dm-experience-card-a17 strong {

    color: #c9a45c;

    font-size: 46px;

    line-height: 1;

    font-weight: 800;
}


.dm-experience-card-a17
.dm-experience-number-a17 span {

    color: #c9a45c;

    font-size: 24px;

    font-weight: 700;
}


.dm-experience-card-a17 p {

    margin: 7px 0 0;

    color: #aaaaaa;

    font-size: 11px;

    line-height: 1.4;

    z-index: 2;
}


/* ================= GROWTH CARD ================= */

.dm-growth-card-a17 {

    position: absolute;

    right: -25px;

    top: 40px;

    width: 190px;

    padding: 18px;

    border: 1px solid rgba(201, 164, 92, 0.4);

    border-radius: 12px;

    background: rgba(8, 8, 8, 0.92);

    backdrop-filter: blur(12px);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.5);

    animation:
        dmGrowthFloat-a17 3s ease-in-out infinite;
}


/* TITLE */

.dm-growth-title-a17 {

    margin-bottom: 12px;

    color: #8d8d8d;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* GRAPH */

.dm-growth-line-a17 {

    height: 45px;

    display: flex;

    align-items: end;

    gap: 7px;

    margin-bottom: 12px;
}


.dm-growth-line-a17 span {

    width: 9px;

    border-radius: 5px 5px 2px 2px;

    background: #c9a45c;

    box-shadow:
        0 0 10px rgba(201, 164, 92, 0.15);

    animation:
        dmBarAnimation-a17
        1.5s ease-in-out infinite alternate;
}


.dm-growth-line-a17 span:nth-child(1) {
    height: 20%;
}

.dm-growth-line-a17 span:nth-child(2) {
    height: 35%;
}

.dm-growth-line-a17 span:nth-child(3) {
    height: 50%;
}

.dm-growth-line-a17 span:nth-child(4) {
    height: 42%;
}

.dm-growth-line-a17 span:nth-child(5) {
    height: 70%;
}

.dm-growth-line-a17 span:nth-child(6) {
    height: 100%;
}


/* GROWTH TEXT */

.dm-growth-text-a17 {

    display: flex;

    flex-direction: column;
}


.dm-growth-text-a17 strong {

    color: #c9a45c;

    font-size: 24px;
}


.dm-growth-text-a17 small {

    margin-top: 2px;

    color: #888888;

    font-size: 11px;
}


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

@keyframes dmGrowthFloat-a17 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


@keyframes dmBarAnimation-a17 {

    from {
        opacity: 0.45;
    }

    to {
        opacity: 1;
    }

}


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

@media (max-width: 768px) {

    .dm-about-section-a17 {

        padding: 75px 0;

    }


    .dm-about-container-a17 {

        width: 88%;

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .dm-about-content-a17 h2 {

        font-size: 40px;

        line-height: 1.12;

        letter-spacing: -1px;

    }


    .dm-about-main-text-a17 {

        font-size: 15px;

        line-height: 1.7;

    }


    .dm-about-sub-text-a17 {

        font-size: 14px;

        line-height: 1.7;

    }


    .dm-about-label-a17 {

        font-size: 10px;

        letter-spacing: 2px;

    }


    .dm-about-features-a17 {

        gap: 17px;

    }


    .dm-about-image-wrap-a17 {

        height: 450px;

    }


    .dm-experience-card-a17 {

        left: -10px;

        bottom: 25px;

        width: 125px;

        height: 125px;

    }


    .dm-experience-card-a17 strong {

        font-size: 36px;

    }


    .dm-growth-card-a17 {

        right: -5px;

        top: 25px;

        width: 150px;

    }

}


/* ================= LARGE DESKTOP ================= */

@media (min-width: 1440px) {

    .dm-about-container-a17 {

        max-width: 1350px;

        gap: 110px;

    }


    .dm-about-content-a17 h2 {

        font-size: 64px;

    }


    .dm-about-main-text-a17 {

        font-size: 18px;

    }


    .dm-about-image-wrap-a17 {

        height: 620px;

    }

}

/*==========================------> 
    About Section Css End
<------=========================*/










/*==========================------> 
    Service Section Css start
<------=========================*/


.services-section {
    /* Global variables moved inside section */
    --black: #050505;
    --black-soft: #0b0a08;

    --gold: #dfd08f;
    --gold-light: #f5e9ad;
    --gold-dark: #a0713d;

    --gold-transparent: rgba(223, 208, 143, 0.16);
    --gold-border: rgba(223, 208, 143, 0.28);

    --white: #f8f5ec;
    --muted: #aaa79d;

    --transition: 0.5s cubic-bezier(.16, 1, .3, 1);

    position: relative;
    min-height: 100vh;
    padding: 130px 7%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(223, 208, 143, 0.08),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #030303 0%,
            #0a0907 48%,
            #020202 100%
        );

    color: var(--white);
    font-family: "DM Sans", sans-serif;

    box-sizing: border-box;
}


/* =========================================
   SECTION BOX SIZING
========================================= */

.services-section *,
.services-section *::before,
.services-section *::after {
    box-sizing: border-box;
}


/* =========================================
   SECTION LINKS
========================================= */

.services-section a {
    text-decoration: none;
    color: inherit;
}


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

.luxury-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;
    overflow: hidden;
}


.grid-overlay {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(223, 208, 143, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(223, 208, 143, 0.025) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 85%
    );
}


/* =========================================
   GOLD ORBS
========================================= */

.gold-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.15;

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


.orb-one {
    width: 420px;
    height: 420px;

    background: var(--gold-dark);

    left: -220px;
    top: 15%;
}


.orb-two {
    width: 360px;
    height: 360px;

    background: var(--gold);

    right: -180px;
    top: 35%;

    animation-delay: -3s;
}


.orb-three {
    width: 280px;
    height: 280px;

    background: #80602f;

    left: 45%;
    bottom: -170px;

    animation-delay: -6s;
}


@keyframes orbFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(30px, -35px, 0);
    }
}


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

.particle {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--gold);

    box-shadow:
        0 0 10px var(--gold),
        0 0 20px rgba(223, 208, 143, 0.5);

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


.particle-1 {
    top: 20%;
    left: 12%;
}


.particle-2 {
    top: 30%;
    left: 82%;

    animation-delay: -1s;
}


.particle-3 {
    top: 70%;
    left: 18%;

    animation-delay: -2s;
}


.particle-4 {
    top: 80%;
    left: 75%;

    animation-delay: -3s;
}


.particle-5 {
    top: 15%;
    left: 55%;

    animation-delay: -4s;
}


.particle-6 {
    top: 60%;
    left: 92%;

    animation-delay: -1.5s;
}


.particle-7 {
    top: 90%;
    left: 45%;

    animation-delay: -2.5s;
}


.particle-8 {
    top: 40%;
    left: 5%;

    animation-delay: -3.5s;
}


@keyframes particleMove {

    0%,
    100% {
        opacity: 0.15;
        transform: translateY(0) scale(0.7);
    }

    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.3);
    }
}


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

.services-container {
    position: relative;

    z-index: 5;

    max-width: 1450px;

    margin: auto;
}


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

.services-heading {
    max-width: 850px;

    margin: 0 auto 80px;

    text-align: center;
}


.heading-top {
    display: flex;

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

    gap: 18px;

    margin-bottom: 28px;
}


.heading-label {
    color: var(--gold);

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

    letter-spacing: 5px;
}


.heading-line {
    width: 55px;
    height: 1px;

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


.heading-line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}


.services-heading h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

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

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -2px;
}


.services-heading h2 span {
    display: inline-block;

    background:
        linear-gradient(
            120deg,
            var(--gold-dark),
            var(--gold-light),
            var(--gold)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    position: relative;
}


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

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 100%;
    height: 1px;

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

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


@keyframes goldLine {

    0%,
    100% {
        transform: scaleX(0.35);
        opacity: 0.3;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}


.services-heading p {
    max-width: 650px;

    margin: 35px auto 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8;
}


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

.services-grid {
    display: grid;

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

    gap: 24px;
}


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

.service-card {
    position: relative;

    min-height: 400px;

    padding: 42px 38px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.008)
        );

    backdrop-filter: blur(18px);

    overflow: hidden;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);

    transform-style: preserve-3d;
}


.service-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(223, 208, 143, 0.12),
            transparent 40%
        );

    opacity: 0;

    transition:
        opacity var(--transition);
}


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

    border-color:
        rgba(223, 208, 143, 0.75);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.65),
        0 0 35px rgba(223, 208, 143, 0.08),
        inset 0 0 30px rgba(223, 208, 143, 0.035);
}


.service-card:hover::before {
    opacity: 1;
}


/* =========================================
   CARD NUMBER
========================================= */

.card-number {
    position: absolute;

    top: 28px;
    right: 30px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 14px;

    color:
        rgba(223, 208, 143, 0.45);
}


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

.service-icon {
    position: relative;

    width: 70px;
    height: 70px;

    display: flex;

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

    margin-bottom: 40px;

    border:
        1px solid
        rgba(223, 208, 143, 0.3);

    background:
        radial-gradient(
            circle,
            rgba(223, 208, 143, 0.1),
            transparent 70%
        );

    transition:
        var(--transition);
}


.service-icon::before {
    content: "";

    position: absolute;

    inset: -7px;

    border:
        1px solid
        rgba(223, 208, 143, 0.08);

    transform: rotate(45deg);

    transition:
        var(--transition);
}


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

    border-color:
        var(--gold);

    box-shadow:
        0 0 30px
        rgba(223, 208, 143, 0.15);
}


.service-card:hover .service-icon::before {
    transform: rotate(135deg);
}


.service-icon svg {
    width: 28px;
    height: 28px;

    fill: none;

    stroke: var(--gold);

    stroke-width: 1.4;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.card-content {
    position: relative;

    z-index: 2;
}


.service-tag {
    color: var(--gold-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


.card-content h3 {
    margin: 12px 0 17px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 27px;

    font-weight: 600;

    line-height: 1.2;

    color: var(--white);

    transition:
        color var(--transition);
}


.service-card:hover .card-content h3 {
    color: var(--gold-light);
}


.card-content p {
    color: #918f87;

    font-size: 14px;

    line-height: 1.8;

    max-width: 330px;
}


/* =========================================
   SERVICE LINK
========================================= */

.service-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    color: var(--gold);

    transition:
        var(--transition);
}


.service-link span {
    width: 27px;
    height: 27px;

    display: flex;

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

    border:
        1px solid
        rgba(223, 208, 143, 0.35);

    transition:
        var(--transition);
}


.service-link:hover {
    gap: 17px;
}


.service-link:hover span {
    background: var(--gold);

    color: var(--black);

    border-color: var(--gold);

    transform: rotate(45deg);
}


/* =========================================
   CARD SHINE
========================================= */

.card-shine {
    position: absolute;

    width: 180px;
    height: 500px;

    top: -200px;
    left: -300px;

    transform: rotate(30deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );

    transition:
        left 0.8s ease;
}


.service-card:hover .card-shine {
    left: 130%;
}


/* =========================================
   BOTTOM CTA
========================================= */

.services-bottom {
    margin-top: 85px;

    display: flex;

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

    gap: 30px;

    flex-wrap: wrap;
}


.bottom-line {
    width: 60px;
    height: 1px;

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


.services-bottom p {
    color: #a5a198;

    font-size: 14px;

    letter-spacing: 0.4px;
}


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

.luxury-button {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 22px;

    padding: 17px 25px;

    border:
        1px solid
        rgba(223, 208, 143, 0.55);

    overflow: hidden;

    color: var(--gold-light);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.2px;

    transition:
        var(--transition);
}


.luxury-button::before {
    content: "";

    position: absolute;

    inset: 0;

    transform: translateX(-100%);

    background: var(--gold);

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

    z-index: -1;
}


.luxury-button:hover::before {
    transform: translateX(0);
}


.luxury-button:hover {
    color: var(--black);

    border-color:
        var(--gold);

    box-shadow:
        0 0 30px
        rgba(223, 208, 143, 0.15);
}


.luxury-button i {
    font-style: normal;

    font-size: 17px;

    transition:
        transform var(--transition);
}


.luxury-button:hover i {
    transform:
        translate(4px, -4px);
}


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

.reveal {
    opacity: 0;

    transform:
        translateY(45px);

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


.reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   ONLY MOBILE
   MAX-WIDTH: 768PX
========================================= */

@media (max-width: 768px) {

    .services-section {
        padding: 90px 20px;
    }


    .services-heading {
        margin-bottom: 55px;
    }


    .heading-top {
        gap: 10px;
    }


    .heading-label {
        font-size: 9px;

        letter-spacing: 3px;
    }


    .heading-line {
        width: 30px;
    }


    .services-heading h2 {
        font-size: 43px;

        letter-spacing: -1px;
    }


    .services-heading p {
        font-size: 14px;

        line-height: 1.7;

        margin-top: 28px;
    }


    .services-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .service-card {
        min-height: 370px;

        padding: 34px 28px;
    }


    .service-icon {
        width: 62px;
        height: 62px;

        margin-bottom: 32px;
    }


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


    .services-bottom {
        margin-top: 60px;

        flex-direction: column;

        gap: 20px;

        text-align: center;
    }


    .bottom-line {
        width: 45px;
    }


    .gold-orb {
        filter: blur(70px);
    }


    .orb-one {
        width: 260px;
        height: 260px;
    }


    .orb-two {
        width: 220px;
        height: 220px;
    }
}


/* =========================================
   ONLY LARGE DESKTOP
   MIN-WIDTH: 1440PX
========================================= */

@media (min-width: 1440px) {

    .services-section {
        padding-top: 160px;

        padding-bottom: 160px;
    }


    .services-container {
        max-width: 1500px;
    }


    .services-heading {
        margin-bottom: 95px;
    }


    .services-grid {
        gap: 28px;
    }


    .service-card {
        min-height: 430px;

        padding: 48px 42px;
    }


    .service-icon {
        width: 76px;
        height: 76px;
    }


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


    .card-content p {
        font-size: 15px;

        max-width: 360px;
    }


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

/*==========================------> 
    Service Section Css End
<------=========================*/











/*==========================------> 
    Achievements Section Css start
<------=========================*/


.achievements-section {
    position: relative;
    width: 100%;
    padding: 120px 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(201, 157, 72, 0.12),
            transparent 45%
        ),
        #050505;

    color: #ffffff;
}


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

.achievement-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}


.gold-dot {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d5a64d;

    box-shadow:
        0 0 10px rgba(213, 166, 77, 0.8);

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


.dot-1 {
    top: 18%;
    left: 8%;
}

.dot-2 {
    top: 70%;
    left: 24%;

    animation-delay: 1s;
}

.dot-3 {
    top: 25%;
    right: 15%;

    animation-delay: 2s;
}

.dot-4 {
    bottom: 15%;
    right: 7%;

    animation-delay: 3s;
}


@keyframes floatingDot {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: .3;
    }

    50% {
        transform: translateY(-20px) scale(1.7);
        opacity: 1;
    }
}


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

.achievements-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: auto;
}


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

.achievement-heading {
    max-width: 800px;

    margin: 0 auto 65px;

    text-align: center;

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

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.achievement-heading.show {
    opacity: 1;
    transform: translateY(0);
}


.section-tag {
    position: relative;

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

    margin-bottom: 18px;

    color: #d4a34e;

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

    letter-spacing: 4px;
}


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

    width: 35px;
    height: 1px;

    background: #c99840;
}


.achievement-heading h2 {
    margin: 0;

    font-size: 56px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1px;
}


.achievement-heading h2 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #b9822e,
            #f5d995,
            #b9822e
        );

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    animation: goldTextMove 4s linear infinite;
}


@keyframes goldTextMove {

    to {
        background-position: 200% center;
    }
}


.achievement-heading p {
    max-width: 650px;

    margin: 20px auto 0;

    color: rgba(255,255,255,.55);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   CARDS
========================================= */

.achievement-cards {
    display: grid;

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

    gap: 25px;
}


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

.achievement-card {
    position: relative;

    height: 520px;

    overflow: hidden;

    border-radius: 20px;

    border: 1px solid
        rgba(207, 160, 71, .28);

    background: #111;

    opacity: 0;

    transform:
        translateY(70px)
        scale(.95);

    transition:
        opacity .8s ease,
        transform .8s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


.achievement-card.show {
    opacity: 1;

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


.achievement-card:nth-child(1) {
    transition-delay: .1s;
}

.achievement-card:nth-child(2) {
    transition-delay: .25s;
}

.achievement-card:nth-child(3) {
    transition-delay: .4s;
}


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

.achievement-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

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


.achievement-card:hover img {
    transform: scale(1.10);

    filter:
        saturate(1.1)
        contrast(1.05);
}


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

.achievement-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 5%,
            rgba(0,0,0,.15) 25%,
            rgba(0,0,0,.65) 60%,
            rgba(0,0,0,.96) 100%
        );

    transition:
        background .5s ease;
}


.achievement-card:hover .achievement-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 5%,
            rgba(0,0,0,.18) 30%,
            rgba(0,0,0,.70) 65%,
            rgba(0,0,0,.98) 100%
        );
}


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

.achievement-content {
    position: absolute;

    left: 32px;
    right: 32px;
    bottom: 32px;

    z-index: 3;

    transform: translateY(35px);

    transition:
        transform .5s ease;
}


.achievement-card:hover
.achievement-content {
    transform: translateY(0);
}


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

.achievement-number {
    display: block;

    margin-bottom: 12px;

    color: #d5a64d;

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

    letter-spacing: 3px;
}


/* =========================================
   GOLD LINE
========================================= */

.gold-line {
    width: 45px;
    height: 2px;

    margin-bottom: 16px;

    background:
        linear-gradient(
            90deg,
            #d5a64d,
            #f2d18a
        );

    transition:
        width .4s ease;
}


.achievement-card:hover
.gold-line {
    width: 85px;
}


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

.achievement-content h3 {
    margin: 0 0 12px;

    color: #ffffff;

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

    letter-spacing: -.5px;
}


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

.achievement-content p {
    max-width: 390px;

    margin: 0 0 20px;

    color:
        rgba(255,255,255,.68);

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


/* =========================================
   LINK
========================================= */

.achievement-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #e0bc6c;

    text-decoration: none;

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

    letter-spacing: 1px;

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity .4s ease .1s,
        transform .4s ease .1s,
        color .3s ease;
}


.achievement-card:hover
.achievement-link {
    opacity: 1;

    transform: translateY(0);
}


.achievement-link i {
    transition:
        transform .3s ease;
}


.achievement-link:hover {
    color: #f4d99b;
}


.achievement-link:hover i {
    transform: translateX(6px);
}


/* =========================================
   GOLD BORDER GLOW
========================================= */

.achievement-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    border-radius: inherit;

    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(232,192,105,.5),
            transparent 30%,
            transparent 70%,
            rgba(232,192,105,.3)
        ) border-box;

    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}


.achievement-card:hover::before {
    opacity: 1;
}


/* =========================================
   LARGE DESKTOP
   MIN WIDTH: 1440px
========================================= */

@media (min-width: 1440px) {

    .achievements-section {
        padding-top: 145px;
        padding-bottom: 145px;
    }

    .achievements-container {
        max-width: 1500px;
    }

    .achievement-heading {
        margin-bottom: 75px;
    }

    .achievement-heading h2 {
        font-size: 64px;
    }

    .achievement-cards {
        gap: 30px;
    }

    .achievement-card {
        height: 560px;
    }

    .achievement-content {
        left: 38px;
        right: 38px;
        bottom: 38px;
    }

    .achievement-content h3 {
        font-size: 34px;
    }
}


/* =========================================
   MOBILE
   MAX WIDTH: 768px
========================================= */

@media (max-width: 768px) {

    .achievements-section {
        padding: 80px 18px;
    }

    .achievement-heading {
        margin-bottom: 45px;
    }

    .section-tag {
        font-size: 11px;
        letter-spacing: 2.5px;
        gap: 8px;
    }

    .section-tag::before,
    .section-tag::after {
        width: 20px;
    }

    .achievement-heading h2 {
        font-size: 36px;
        line-height: 1.2;
    }

    .achievement-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .achievement-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .achievement-card {
        height: 440px;
        border-radius: 16px;
    }

    .achievement-content {
        left: 24px;
        right: 24px;
        bottom: 25px;

        transform: translateY(0);
    }

    .achievement-content h3 {
        font-size: 26px;
    }

    .achievement-content p {
        font-size: 13px;
    }

    .achievement-link {
        opacity: 1;
        transform: translateY(0);
    }

    .gold-dot {
        display: none;
    }
}

/*==========================------> 
    Achievements Section Css End
<------=========================*/









/*==========================------> 
    Plan Section Css start
<------=========================*/


.plans-section {
    position: relative;

    width: 100%;

    padding: 110px 30px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(211, 169, 82, .10),
            transparent 40%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(211, 169, 82, .06),
            transparent 35%
        ),
        #080808;

    color: #ffffff;
}


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

.plans-bg {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    opacity: .8;
}


.plans-bg::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    top: 15%;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220, 181, 94, .08),
            transparent 65%
        );

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


@keyframes backgroundPulse {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.15);
    }
}


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

.plan-particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #dfc06c;

    box-shadow:
        0 0 10px rgba(223, 192, 108, .7);

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


.particle-1 {
    top: 15%;
    left: 8%;
}

.particle-2 {
    top: 30%;
    left: 30%;
    animation-delay: 1s;
}

.particle-3 {
    top: 20%;
    right: 12%;
    animation-delay: 2s;
}

.particle-4 {
    bottom: 20%;
    left: 18%;
    animation-delay: 3s;
}

.particle-5 {
    bottom: 15%;
    right: 30%;
    animation-delay: 1.5s;
}

.particle-6 {
    bottom: 30%;
    right: 8%;
    animation-delay: 4s;
}


@keyframes planParticle {

    0%,
    100% {
        opacity: .2;

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

    50% {
        opacity: 1;

        transform:
            translateY(-25px)
            scale(1.8);
    }
}


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

.plans-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


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

.plans-heading {
    max-width: 800px;

    margin:
        0 auto
        70px;

    text-align: center;

    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.plans-heading.show {
    opacity: 1;

    transform:
        translateY(0);
}


.plans-tag {
    display: inline-block;

    margin-bottom: 20px;

    color: #dfc875;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 2px;
}


.plans-heading h2 {
    margin: 0;

    font-size: 60px;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1px;
}


.plans-heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #b88a32,
            #f4df9d,
            #c69a43
        );

    background-size: 200% auto;

    -webkit-background-clip: text;

    background-clip: text;

    animation:
        plansGoldText 4s linear infinite;
}


@keyframes plansGoldText {

    to {
        background-position:
            200% center;
    }
}


.plans-heading p {
    max-width: 650px;

    margin:
        22px auto 0;

    color:
        rgba(255,255,255,.55);

    font-size: 16px;

    line-height: 1.8;
}


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

.plans-grid {
    display: grid;

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

    gap: 28px;

    align-items: start;
}


/* =========================================
   PLAN CARD
========================================= */

.plan-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(218, 181, 94, .20);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.40);

    opacity: 0;

    transform:
        translateY(70px)
        scale(.96);

    transition:
        opacity .8s ease,
        transform .8s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


.plan-card.show {
    opacity: 1;

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


.plan-card:nth-child(1) {
    transition-delay: .1s;
}


.plan-card:nth-child(2) {
    transition-delay: .25s;
}


.plan-card:nth-child(3) {
    transition-delay: .4s;
}


.plan-card:hover {

    transform:
        translateY(-12px)
        scale(1.01);

    border-color:
        rgba(231, 201, 119, .55);

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.55),
        0 0 35px
        rgba(209, 165, 68, .08);
}


/* =========================================
   POPULAR BADGE
========================================= */

.popular-badge {
    position: absolute;

    top: 17px;
    left: 17px;

    z-index: 10;

    padding:
        7px 12px;

    border:
        1px solid
        rgba(239, 210, 139, .6);

    border-radius: 30px;

    background:
        rgba(0,0,0,.65);

    color: #f0d58b;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    backdrop-filter: blur(8px);
}


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

.plan-image {
    position: relative;

    width: 100%;

    height: 290px;

    overflow: hidden;
}


.plan-image > img:first-child {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

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


.plan-card:hover
.plan-image > img:first-child {

    transform:
        scale(1.08);

    filter:
        brightness(1.08)
        saturate(1.05);
}


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

.plan-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.35) 45%,
            rgba(0,0,0,.90) 100%
        );

    z-index: 2;
}


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

.plan-logo {
    position: absolute;

    top: 35px;
    right: 28px;

    z-index: 5;

    width: 78px !important;
    height: 78px !important;

    object-fit: contain !important;

    filter:
        drop-shadow(
            0 5px 12px
            rgba(0,0,0,.6)
        );

    transition:
        transform .4s ease;
}


.plan-card:hover
.plan-logo {

    transform:
        scale(1.08)
        rotate(3deg);
}


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

.plan-image-content {
    position: absolute;

    left: 32px;
    right: 32px;
    bottom: 30px;

    z-index: 5;
}


.plan-service {
    display: block;

    margin-bottom: 18px;

    color:
        rgba(255,255,255,.95);

    font-size: 22px;

    font-weight: 600;
}


.plan-image-content h3 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 46px;

    line-height: 1;

    font-weight: 700;
}


.plan-price {

    color: #ffffff;

    font-size: 25px;

    font-weight: 700;
}


.plan-price span {

    color:
        rgba(255,255,255,.85);

    font-size: 18px;

    font-weight: 500;
}


.plan-image-content p {

    margin:
        30px 0 0;

    color:
        rgba(255,255,255,.80);

    font-size: 15px;
}


/* =========================================
   BODY
========================================= */

.plan-body {

    padding:
        32px 30px 30px;
}


/* =========================================
   FEATURES
========================================= */

.plan-features {

    margin: 0;

    padding: 0;

    list-style: none;
}


.plan-features li {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 18px;

    color:
        rgba(255,255,255,.88);

    font-size: 16px;

    line-height: 1.55;
}


.plan-features li i {

    flex-shrink: 0;

    margin-top: 5px;

    color: #ead17c;

    font-size: 14px;

    transition:
        transform .3s ease;
}


.plan-features li:hover i {

    transform:
        scale(1.25)
        rotate(8deg);
}


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

.plan-button {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 100%;

    min-height: 58px;

    margin-top: 30px;

    overflow: hidden;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #e0c979,
            #f0dc96
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.plan-button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;
}


.plan-button:hover::before {
    left: 150%;
}


.plan-button:hover {

    transform:
        translateY(-3px);
    color: #fff;
    box-shadow:
        0 12px 35px
        rgba(218, 183, 92, .20);
}


.plan-button i {

    font-size: 12px;

    transition:
        transform .3s ease;
}


.plan-button:hover i {

    transform:
        translateX(5px);
}


/* =========================================
   PREMIUM PLAN
========================================= */

.premium-plan {

    border-color:
        rgba(224, 190, 103, .32);
}


/* =========================================
   LARGE DESKTOP
   MIN WIDTH: 1440px
========================================= */

@media (min-width: 1440px) {

    .plans-section {

        padding-top: 140px;
        padding-bottom: 140px;
    }


    .plans-container {

        max-width: 1500px;
    }


    .plans-heading {

        margin-bottom: 80px;
    }


    .plans-heading h2 {

        font-size: 68px;
    }


    .plans-grid {

        gap: 32px;
    }


    .plan-image {

        height: 420px;
    }


    .plan-image-content {

        left: 38px;
        right: 38px;
        bottom: 35px;
    }


    .plan-image-content h3 {

        font-size: 52px;
    }


    .plan-service {

        font-size: 23px;
    }


    .plan-price {

        font-size: 28px;
    }


    .plan-body {

        padding:
            38px 36px 36px;
    }


    .plan-features li {

        font-size: 17px;

        margin-bottom: 20px;
    }


    .plan-button {

        min-height: 62px;
    }
}


/* =========================================
   MOBILE
   MAX WIDTH: 768px
========================================= */

@media (max-width: 768px) {

    .plans-section {

        padding:
            80px 18px;
    }


    .plans-heading {

        margin-bottom: 45px;
    }


    .plans-tag {

        font-size: 13px;

        letter-spacing: 1.5px;
    }


    .plans-heading h2 {

        font-size: 40px;

        line-height: 1.15;
    }


    .plans-heading p {

        font-size: 14px;

        line-height: 1.7;
    }


    .plans-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }


    .plan-card {

        border-radius: 14px;
    }


    .plan-image {

        height: 360px;
    }


    .plan-logo {

        top: 25px;
        right: 22px;

        width: 65px !important;
        height: 65px !important;
    }


    .plan-image-content {

        left: 24px;
        right: 24px;
        bottom: 25px;
    }


    .plan-service {

        font-size: 18px;

        margin-bottom: 14px;
    }


    .plan-image-content h3 {

        font-size: 39px;
    }


    .plan-price {

        font-size: 21px;
    }


    .plan-price span {

        font-size: 15px;
    }


    .plan-image-content p {

        margin-top: 22px;

        font-size: 13px;
    }


    .plan-body {

        padding:
            28px 22px 24px;
    }


    .plan-features li {

        gap: 11px;

        margin-bottom: 16px;

        font-size: 14px;
    }


    .plan-button {

        min-height: 55px;

        margin-top: 25px;

        font-size: 12px;

        letter-spacing: 2.5px;
    }


    .popular-badge {

        top: 13px;
        left: 13px;
    }


    .plan-particle {

        display: none;
    }

}


/*==========================------> 
    Plan Section Css End
<------=========================*/









/*==========================------> 
    Internship Section Css start
<------=========================*/


.internship-section {
    position: relative;
    width: 100%;
    min-height: 780px;
    padding: 70px 40px 50px;
    overflow: hidden;
    background: #080808;
    color: #ffffff;
}


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

.internship-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-size: cover;
    background-position: center;

    transform: scale(1.05);

    animation:
        internshipBgMove 12s
        ease-in-out
        infinite alternate;
}


@keyframes internshipBgMove {

    0% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1.12);
    }
}


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

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

    background:
        linear-gradient(
            180deg,
            rgba(5, 5, 5, .82),
            rgba(5, 5, 5, .90)
        );
}


/* =========================================
   GOLD LIGHT
========================================= */

.internship-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 35%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(222, 188, 102, .09),
            transparent 65%
        );

    filter: blur(10px);

    pointer-events: none;

    z-index: 1;

    animation:
        internshipGlow 6s
        ease-in-out
        infinite alternate;
}


@keyframes internshipGlow {

    from {
        opacity: .4;

        transform:
            translate(-50%, -50%)
            scale(.85);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.15);
    }
}


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

.internship-container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


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

.internship-heading {
    text-align: center;

    margin-bottom: 45px;

    animation:
        internshipHeadingIn
        1s
        ease forwards;
}


@keyframes internshipHeadingIn {

    from {
        opacity: 0;

        transform:
            translateY(-35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


.internship-tag {
    display: inline-block;

    margin-bottom: 20px;

    color: #dfc875;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: 2px;
}


.internship-heading h2 {
    margin: 0;

    font-size: 68px;

    line-height: 1.1;

    font-weight: 700;

    color: #ffffff;
}


.internship-heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #b88a32,
            #f1dd99,
            #c59a43
        );

    background-size: 200% auto;

    -webkit-background-clip: text;

    background-clip: text;

    animation:
        internshipGoldText 4s
        linear
        infinite;
}


@keyframes internshipGoldText {

    to {
        background-position:
            200% center;
    }
}


/* =========================================
   TABS
========================================= */

.internship-tabs {
    display: grid;

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

    gap: 20px;

    margin-bottom: 80px;
}


/* =========================================
   TAB TEXT - CENTER ALIGN
========================================= */

.internship-tab {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding:
        10px 20px 20px;

    border: none;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .15);

    outline: none;

    background: transparent;

    color:
        rgba(255, 255, 255, .48);

    font-family: inherit;

    font-size: 25px;

    font-weight: 700;

    text-align: center;

    cursor: pointer;

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


/* =========================================
   GOLD ACTIVE LINE
========================================= */

.internship-tab::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -1px;

    width: 0;

    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #a87826,
            #f0d77f
        );

    box-shadow:
        0 0 15px
        rgba(224, 190, 103, .5);

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


.internship-tab:hover {
    color: #ffffff;
}


.internship-tab:hover::after {
    width: 55%;
}


.internship-tab.active {
    color: #ffffff;
}


.internship-tab.active::after {
    width: 100%;
}


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

.internship-content {
    position: relative;

    min-height: 330px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;
}


/* =========================================
   PANEL
========================================= */

.internship-panel {
    display: none;

    width: 100%;

    max-width: 1000px;

    opacity: 0;
}


.internship-panel.active {
    display: block;

    animation:
        internshipPanelIn
        .7s
        cubic-bezier(.2, .8, .2, 1)
        forwards;
}


@keyframes internshipPanelIn {

    from {
        opacity: 0;

        transform:
            translateY(45px)
            scale(.97);

        filter:
            blur(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}


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

.internship-panel h3 {
    margin:
        0 0 25px;

    color: #ffffff;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 700;
}


.internship-panel p {
    max-width: 900px;

    margin:
        0 auto 18px;

    color:
        rgba(255, 255, 255, .72);

    font-size: 20px;

    line-height: 1.6;
}


/* =========================================
   POINTS
========================================= */

.internship-points {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    margin-top: 10px;
}


.internship-points div {
    color:
        rgba(255, 255, 255, .78);

    font-size: 18px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.internship-points div::before {
    content: "✦";

    margin-right: 10px;

    color: #e2c873;

    font-size: 13px;
}


.internship-points div:hover {
    color: #ffffff;

    transform:
        translateX(5px);
}


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

.internship-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 30px;

    min-width: 180px;

    padding:
        15px 28px;

    border:
        1px solid
        #d8b963;

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #bba051,
            #f3d265
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.internship-button span {
    font-size: 20px;

    line-height: 0;

    transition:
        transform .3s ease;
}


.internship-button:hover {
    transform:
        translateY(-4px);
    color: #fff;
    box-shadow:
        0 12px 35px
        rgba(221, 188, 100, .25);
}


.internship-button:hover span {
    transform:
        translateX(6px);
}


/* =========================================
   BOTTOM LINE
========================================= */

.internship-line {
    width: 100%;

    height: 1px;

    margin-top: 65px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .3),
            transparent
        );
}


/* =========================================
   DESKTOP
   MIN WIDTH: 1440px
========================================= */

@media (min-width: 1440px) {

    .internship-section {
        min-height: 850px;

        padding-top: 80px;
    }


    .internship-container {
        max-width: 1500px;
    }


    .internship-heading {
        margin-bottom: 55px;
    }


    .internship-heading h2 {
        font-size: 76px;
    }


    .internship-tag {
        font-size: 18px;
    }


    .internship-tabs {
        margin-bottom: 90px;

        gap: 30px;
    }


    .internship-tab {
        font-size: 28px;

        text-align: center;
    }


    .internship-content {
        min-height: 360px;
    }


    .internship-panel h3 {
        font-size: 44px;
    }


    .internship-panel p {
        font-size: 21px;
    }


    .internship-points div {
        font-size: 19px;
    }

}


/* =========================================
   MOBILE
   MAX WIDTH: 768px
========================================= */

@media (max-width: 768px) {

    .internship-section {
        min-height: auto;

        padding:
            70px 18px 80px;
    }


    .internship-heading {
        margin-bottom: 40px;
    }


    .internship-tag {
        font-size: 13px;

        letter-spacing: 1.5px;
    }


    .internship-heading h2 {
        font-size: 40px;

        line-height: 1.15;
    }


    /* =====================================
       MOBILE TABS CENTER
    ====================================== */

    .internship-tabs {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 50px;
    }


    .internship-tab {
        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        padding:
            15px 5px;

        font-size: 19px;

        text-align: center;
    }


    .internship-tab::after {
        left: 50%;

        transform:
            translateX(-50%);
    }


    .internship-tab.active::after {
        width: 70%;
    }


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

    .internship-content {
        min-height: 450px;

        align-items: flex-start;
    }


    .internship-panel h3 {
        margin-bottom: 20px;

        font-size: 29px;

        line-height: 1.3;
    }


    .internship-panel p {
        font-size: 15px;

        line-height: 1.7;
    }


    .internship-points {
        gap: 14px;

        margin-top: 25px;
    }


    .internship-points div {
        font-size: 14px;

        line-height: 1.5;
    }


    .internship-button {
        margin-top: 28px;

        min-width: 160px;

        padding:
            13px 22px;

        font-size: 11px;
    }


    .internship-line {
        margin-top: 40px;
    }

}


/*==========================------> 
  Internship Section Css End
<------=========================*/












/*==========================------> 
    Faqs Section Css Start
<------=========================*/


.faq-section {
    position: relative;
    width: 100%;
    overflow: hidden;

    padding: 100px 70px;

    background: #050505;

    color: #ffffff;
}


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

.faq-bg {
    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(201, 163, 72, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(201, 163, 72, 0.05),
            transparent 35%
        );

    pointer-events: none;
}


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

.faq-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        40% 60%;

    gap: 50px;
}


/* =========================================
   LEFT SIDE
========================================= */

.faq-left {
    padding-top: 5px;

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


.faq-section.show .faq-left {
    opacity: 1;

    transform:
        translateY(0);
}


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

.faq-label {
    display: inline-block;

    margin-top: 50px;

    margin-bottom: 45px;

    color: #e4cf82;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: .3px;
}


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

.faq-left h2 {
    margin: 0;

    max-width: 600px;

    font-size: 65px;

    line-height: 1.04;

    font-weight: 700;

    letter-spacing: -2px;

    color: #ffffff;
}


.faq-left h2 span {
    display: block;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #bdbdbd 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


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

.faq-right {
    width: 100%;

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 1s ease .2s,
        transform 1s ease .2s;
}


.faq-section.show .faq-right {
    opacity: 1;

    transform:
        translateY(0);
}


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

.faq-item {
    position: relative;

    width: 100%;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .32);

    overflow: hidden;
}


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

.faq-question {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 20px 0;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    text-align: left;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

    cursor: pointer;

    transition:
        color .35s ease;
}


.faq-question:hover {
    color: #e5ce80;
}


/* =========================================
   GOLD HOVER LINE
========================================= */

.faq-question::before {
    content: "";

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #a77a2c,
            #f0d783
        );

    transition:
        width .5s ease;

    z-index: 2;
}


.faq-item:hover .faq-question::before {
    width: 100%;
}


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

.faq-icon {
    position: relative;

    flex-shrink: 0;

    width: 25px;
    height: 25px;

    margin-left: 20px;
}


.faq-icon i,
.faq-icon i::after {
    position: absolute;

    content: "";

    left: 50%;
    top: 50%;

    width: 12px;
    height: 2px;

    background: #ffffff;

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

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


.faq-icon i::after {
    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


.faq-item.active .faq-icon i {
    background: #e5cd7d;
}


.faq-item.active .faq-icon i::after {
    background: #e5cd7d;

    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


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

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .55s
        cubic-bezier(.2, .8, .2, 1);
}


.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}


.faq-answer-inner {
    min-height: 0;

    overflow: hidden;

    max-width: 900px;

    padding-right: 50px;

    color:
        rgba(255, 255, 255, .67);

    font-size: 18px;

    line-height: 1.7;

    transform:
        translateY(-10px);

    opacity: 0;

    transition:
        opacity .35s ease,
        transform .45s ease;

    padding-bottom: 0;
}


.faq-item.active .faq-answer-inner {
    opacity: 1;

    transform:
        translateY(0);

    padding-bottom: 28px;
}


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

.faq-item.active .faq-question {
    color: #e6cf83;
}


/* =========================================
   DESKTOP
   MIN WIDTH: 1440px
========================================= */

@media (min-width: 1440px) {

    .faq-section {
        padding:
            110px 70px 120px;
    }


    .faq-container {
        max-width: 1600px;

        grid-template-columns:
            41% 59%;

        gap: 70px;
    }


    .faq-label {
        font-size: 19px;

        margin-bottom: 48px;
    }


    .faq-left h2 {
        font-size: 76px;

        line-height: 1.02;
    }


    .faq-question {
        min-height: 97px;

        font-size: 27px;
    }


    .faq-answer-inner {
        font-size: 19px;

        max-width: 950px;
    }

}


/* =========================================
   MOBILE
   MAX WIDTH: 768px
========================================= */

@media (max-width: 768px) {

    .faq-section {
        padding:
            70px 20px 80px;
    }


    .faq-container {
        display: block;
    }


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

    .faq-left {
        padding: 0;

        margin-bottom: 55px;

        text-align: left;
    }


    .faq-label {
        margin-bottom: 25px;

        font-size: 14px;

        letter-spacing: .2px;
    }


    .faq-left h2 {
        max-width: 100%;

        font-size: 44px;

        line-height: 1.08;

        letter-spacing: -1px;
    }


    /* =====================================
       QUESTIONS
    ====================================== */

    .faq-question {
        min-height: 76px;

        padding:
            18px 0;

        font-size: 18px;

        line-height: 1.4;
    }


    .faq-icon {
        width: 22px;
        height: 22px;

        margin-left: 12px;
    }


    .faq-icon i,
    .faq-icon i::after {
        width: 10px;
    }


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

    .faq-answer-inner {
        padding-right: 20px;

        font-size: 15px;

        line-height: 1.7;
    }


    .faq-item.active .faq-answer-inner {
        padding-bottom: 23px;
    }

}




/*==========================------> 
    Faqs Section Css End
<------=========================*/













/*==========================------> 
    Featured Case Studies Section Css start
<------=========================*/

.case-studies-section {
    --black: #050505;
    --black-soft: #0b0907;

    --gold: #dfc77b;
    --gold-light: #f5e9ad;
    --gold-bright: #ffe8a0;
    --gold-dark: #9d7038;

    --white: #faf7ed;
    --muted: #a7a398;

    --border: rgba(223, 199, 123, 0.24);

    --transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

    width: 100%;

    padding: 140px 5%;

    overflow: hidden;

    background: radial-gradient(circle at 50% 0%, rgba(223, 199, 123, 0.07), transparent 32%),
        linear-gradient(145deg, #030303, #0a0907 50%, #030303);

    color: var(--white);

    font-family: "DM Sans", sans-serif;
}

/* =========================================
   ALL CHILD ELEMENTS
========================================= */

.case-studies-section *,
.case-studies-section *::before,
.case-studies-section *::after {
    box-sizing: border-box;
}

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

.case-studies-section a {
    color: inherit;

    text-decoration: none;
}

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

.case-bg {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.case-grid {
    position: absolute;

    inset: 0;

    background-image: linear-gradient(rgba(223, 199, 123, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(223, 199, 123, 0.025) 1px, transparent 1px);

    background-size: 85px 85px;

    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

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

.case-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.13;

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

.case-orb-one {
    width: 430px;
    height: 430px;

    top: 8%;
    left: -250px;

    background: var(--gold-dark);
}

.case-orb-two {
    width: 350px;
    height: 350px;

    right: -180px;
    bottom: 10%;

    background: var(--gold);

    animation-delay: -4s;
}

@keyframes caseOrbFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(40px, -35px, 0);
    }
}

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

.case-particle {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--gold-light);

    box-shadow: 0 0 12px var(--gold);

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

.p1 {
    top: 15%;
    left: 10%;
}

.p2 {
    top: 25%;
    right: 14%;

    animation-delay: -1s;
}

.p3 {
    top: 62%;
    left: 6%;

    animation-delay: -2s;
}

.p4 {
    top: 82%;
    right: 18%;

    animation-delay: -3s;
}

.p5 {
    top: 48%;
    left: 92%;

    animation-delay: -4s;
}

@keyframes caseParticle {
    0%,
    100% {
        opacity: 0.15;

        transform: translateY(0) scale(0.7);
    }

    50% {
        opacity: 1;

        transform: translateY(-25px) scale(1.4);
    }
}

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

.case-container {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1500px;

    margin: auto;
}

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

.case-heading {
    max-width: 850px;

    margin: 0 auto 85px;

    text-align: center;
}

.case-eyebrow {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    margin-bottom: 28px;
}

.case-eyebrow span {
    width: 55px;

    height: 1px;

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

.case-eyebrow span:last-child {
    background: linear-gradient(90deg, var(--gold), transparent);
}

.case-eyebrow p {
    margin: 0;

    color: var(--gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 5px;
}

.case-heading h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

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

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -2px;
}

.case-heading h2 span {
    display: block;

    background: linear-gradient(120deg, var(--gold-dark), var(--gold-light), var(--gold));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    position: relative;
}

.case-heading h2 span::after {
    content: "";

    position: absolute;

    width: 70%;

    height: 1px;

    left: 15%;

    bottom: -14px;

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

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

@keyframes headingLine {
    0%,
    100% {
        transform: scaleX(0.35);

        opacity: 0.25;
    }

    50% {
        transform: scaleX(1);

        opacity: 1;
    }
}

.case-intro {
    max-width: 650px;

    margin: 38px auto 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.9;
}

/* =========================================
   THREE CARD HORIZONTAL ROW
========================================= */

.case-list {
    display: grid;

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

    gap: 25px;

    align-items: stretch;
}

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

.case-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

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

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));

    backdrop-filter: blur(18px);

    transform-style: preserve-3d;

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

.case-card:hover {
    border-color: rgba(223, 199, 123, 0.72);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(223, 199, 123, 0.08);
}

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

.case-image {
    position: relative;

    width: 100%;

    height: 270px;

    overflow: hidden;

    background: #111;
}

.case-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    /* filter: saturate(0.75) contrast(1.08) brightness(0.68); */

    transition:
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s ease;
}

.case-card:hover .case-image img {
    transform: scale(1.1);

    filter: saturate(0.95) contrast(1.08) brightness(0.82);
}

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

.image-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.78));
}

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

.image-number {
    position: absolute;

    top: 22px;

    left: 23px;

    font-family: "Playfair Display", serif;

    font-size: 15px;

    color: var(--gold-light);

    letter-spacing: 2px;
}

/* =========================================
   VIEW CASE
========================================= */

.image-view {
    position: absolute;

    left: 23px;

    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--gold-light);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    opacity: 0.75;

    transition: var(--transition);
}

.image-view i {
    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(223, 199, 123, 0.5);

    font-style: normal;

    font-size: 15px;

    transition: var(--transition);
}

.case-card:hover .image-view {
    opacity: 1;
}

.case-card:hover .image-view i {
    background: var(--gold);

    color: var(--black);

    transform: rotate(45deg);
}

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

.case-content {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 31px 30px 32px;
}

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

.case-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 20px;
}

.case-category {
    color: var(--gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;
}

.case-year {
    color: rgba(250, 247, 237, 0.4);

    font-size: 8px;

    letter-spacing: 2px;
}

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

.case-content h3 {
    margin: 0;

    min-height: 82px;

    font-family: "Playfair Display", serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;

    color: var(--white);

    transition: var(--transition);
}

.case-card:hover .case-content h3 {
    color: var(--gold-light);
}

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

.case-description {
    margin: 17px 0 0;

    color: #918f87;

    font-size: 12px;

    line-height: 1.75;
}

/* =========================================
   RESULTS
========================================= */

.case-results {
    display: grid;

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

    gap: 10px;

    margin-top: 25px;

    padding: 18px 0;

    border-top: 1px solid rgba(223, 199, 123, 0.13);

    border-bottom: 1px solid rgba(223, 199, 123, 0.13);
}

.result-item {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.result-item strong {
    font-family: "Playfair Display", serif;

    font-size: 23px;

    font-weight: 600;

    color: var(--gold-light);
}

.result-item span {
    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: rgba(250, 247, 237, 0.4);
}

/* =========================================
   CASE LINK
========================================= */

.case-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    margin-top: auto;

    padding-top: 23px;

    color: var(--gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    transition: var(--transition);
}

.case-link span {
    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(223, 199, 123, 0.4);

    font-size: 14px;

    transition: var(--transition);
}

.case-link:hover {
    gap: 17px;
}

.case-link:hover span {
    background: var(--gold);

    color: var(--black);

    transform: rotate(45deg);
}

/* =========================================
   CARD SHINE
========================================= */

.case-shine {
    position: absolute;

    top: -220px;

    left: -350px;

    width: 160px;

    height: 800px;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);

    transform: rotate(28deg);

    transition: left 1s ease;

    pointer-events: none;
}

.case-card:hover .case-shine {
    left: 130%;
}

/* =========================================
   BOTTOM CTA
========================================= */

.case-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 75px;

    padding: 40px 45px;

    border: 1px solid rgba(223, 199, 123, 0.2);

    background: rgba(255, 255, 255, 0.02);
}

.case-bottom-line {
    width: 3px;

    height: 70px;

    flex-shrink: 0;

    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

.case-bottom-text {
    flex: 1;
}

.case-bottom-text span {
    color: var(--gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;
}

.case-bottom-text h3 {
    margin: 8px 0 0;

    font-family: "Playfair Display", serif;

    font-size: 29px;

    font-weight: 500;

    line-height: 1.25;
}

.case-cta {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    padding: 16px 23px;

    flex-shrink: 0;

    border: 1px solid rgba(223, 199, 123, 0.55);

    color: var(--gold-light);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    transition: var(--transition);
}

.case-cta i {
    font-style: normal;

    font-size: 15px;

    transition: var(--transition);
}

.case-cta:hover {
    background: var(--gold);

    color: var(--black);

    border-color: var(--gold);

    box-shadow: 0 0 30px rgba(223, 199, 123, 0.15);
}

.case-cta:hover i {
    transform: translate(4px, -4px);
}

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

.reveal {
    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;

    transform: translateY(0);
}

/* =========================================
   MOBILE
   MAX-WIDTH: 768PX
========================================= */

@media (max-width: 768px) {
    .case-studies-section {
        padding: 90px 20px;
    }

    .case-heading {
        margin-bottom: 55px;
    }

    .case-eyebrow {
        gap: 9px;
    }

    .case-eyebrow p {
        font-size: 8px;

        letter-spacing: 3px;
    }

    .case-eyebrow span {
        width: 28px;
    }

    .case-heading h2 {
        font-size: 43px;

        letter-spacing: -1px;
    }

    .case-intro {
        margin-top: 30px;

        font-size: 13px;

        line-height: 1.75;
    }

    /* Stack 3 cards */

    .case-list {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .case-image {
        height: 285px;
    }

    .case-content {
        padding: 30px 25px 32px;
    }

    .case-content h3 {
        min-height: auto;

        font-size: 31px;
    }

    .case-description {
        font-size: 13px;

        line-height: 1.75;
    }

    .case-results {
        margin-top: 25px;
    }

    .result-item strong {
        font-size: 22px;
    }

    .case-link {
        padding-top: 23px;
    }

    .case-bottom {
        align-items: flex-start;

        flex-direction: column;

        margin-top: 60px;

        padding: 30px 25px;

        gap: 20px;
    }

    .case-bottom-line {
        width: 55px;

        height: 1px;
    }

    .case-bottom-text h3 {
        font-size: 25px;
    }

    .case-cta {
        width: 100%;
    }

    .case-orb-one {
        width: 260px;

        height: 260px;
    }

    .case-orb-two {
        width: 220px;

        height: 220px;
    }
}

/* =========================================
   LARGE DESKTOP
   MIN-WIDTH: 1440PX
========================================= */

@media (min-width: 1440px) {
    .case-studies-section {
        padding-top: 170px;

        padding-bottom: 170px;
    }

    .case-container {
        max-width: 1550px;
    }

    .case-heading {
        margin-bottom: 105px;
    }

    .case-heading h2 {
        font-size: 82px;
    }

    .case-intro {
        font-size: 16px;
    }

    .case-list {
        gap: 30px;
    }

    .case-image {
        height: 310px;
    }

    .case-content {
        padding: 35px;
    }

    .case-content h3 {
        font-size: 31px;
    }

    .case-description {
        font-size: 13px;
    }

    .result-item strong {
        font-size: 25px;
    }

    .case-bottom {
        margin-top: 100px;

        padding: 50px 60px;
    }

    .case-bottom-text h3 {
        font-size: 36px;
    }
}

/*==========================------> 
    Featured Case Studies Section Css End
<------=========================*/











/*==========================------> 
   Industries We Serve Section css Start
<------=========================*/

.industries-section {
    --industry-black: #050505;
    --industry-black-soft: #0c0a08;

    --industry-gold: #dfc77b;
    --industry-gold-light: #f6eab0;
    --industry-gold-dark: #9e7139;

    --industry-white: #faf7ed;
    --industry-muted: #9d9a91;

    --industry-border: rgba(223, 199, 123, 0.22);

    position: relative;

    width: 100%;

    padding: 140px 5%;

    overflow: hidden;

    color: var(--industry-white);

    font-family: "DM Sans", sans-serif;

    background: radial-gradient(circle at 50% 0%, rgba(223, 199, 123, 0.065), transparent 34%),
        linear-gradient(145deg, #030303, #0b0907 50%, #030303);
}

/* =========================================
   SECTION ELEMENTS
========================================= */

.industries-section *,
.industries-section *::before,
.industries-section *::after {
    box-sizing: border-box;
}

.industries-section a {
    color: inherit;

    text-decoration: none;
}

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

.industries-background {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.industry-grid {
    position: absolute;

    inset: 0;

    background-image: linear-gradient(rgba(223, 199, 123, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(223, 199, 123, 0.025) 1px, transparent 1px);

    background-size: 80px 80px;

    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* =========================================
   GOLD ORBS
========================================= */

.industry-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    opacity: 0.12;

    animation: industryOrbFloat 11s ease-in-out infinite;
}

.industry-orb-one {
    width: 480px;

    height: 480px;

    top: 10%;

    left: -280px;

    background: var(--industry-gold-dark);
}

.industry-orb-two {
    width: 420px;

    height: 420px;

    right: -250px;

    bottom: 5%;

    background: var(--industry-gold);

    animation-delay: -5s;
}

@keyframes industryOrbFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(45px, -35px, 0);
    }
}

/* =========================================
   DECORATIVE RINGS
========================================= */

.industry-ring {
    position: absolute;

    border: 1px solid rgba(223, 199, 123, 0.08);

    border-radius: 50%;

    animation: ringRotate 20s linear infinite;
}

.ring-one {
    width: 500px;

    height: 500px;

    right: -280px;

    top: 15%;
}

.ring-two {
    width: 350px;

    height: 350px;

    left: -230px;

    bottom: 12%;

    animation-direction: reverse;
}

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

    to {
        transform: rotate(360deg);
    }
}

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

.industry-particle {
    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: var(--industry-gold-light);

    box-shadow: 0 0 12px var(--industry-gold);

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

.particle-one {
    top: 18%;

    left: 12%;
}

.particle-two {
    top: 32%;

    right: 10%;

    animation-delay: -1s;
}

.particle-three {
    top: 65%;

    left: 7%;

    animation-delay: -2s;
}

.particle-four {
    top: 80%;

    right: 15%;

    animation-delay: -3s;
}

@keyframes particleFloat {
    0%,
    100% {
        opacity: 0.15;

        transform: translateY(0) scale(0.7);
    }

    50% {
        opacity: 1;

        transform: translateY(-25px) scale(1.4);
    }
}

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

.industries-container {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1500px;

    margin: auto;
}

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

.industries-heading {
    max-width: 850px;

    margin: 0 auto 80px;

    text-align: center;
}

.industry-eyebrow {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    margin-bottom: 28px;
}

.industry-eyebrow span {
    width: 55px;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--industry-gold));
}

.industry-eyebrow span:last-child {
    background: linear-gradient(90deg, var(--industry-gold), transparent);
}

.industry-eyebrow p {
    margin: 0;

    color: var(--industry-gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 5px;
}

.industries-heading h2 {
    margin: 0;

    font-family: "Playfair Display", serif;

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

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -2px;
}

.industries-heading h2 span {
    display: block;

    background: linear-gradient(120deg, var(--industry-gold-dark), var(--industry-gold-light), var(--industry-gold));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    position: relative;
}

.industries-heading h2 span::after {
    content: "";

    position: absolute;

    width: 65%;

    height: 1px;

    left: 17.5%;

    bottom: -15px;

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

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

@keyframes titleLine {
    0%,
    100% {
        transform: scaleX(0.3);

        opacity: 0.2;
    }

    50% {
        transform: scaleX(1);

        opacity: 1;
    }
}

.industries-intro {
    max-width: 670px;

    margin: 38px auto 0;

    color: var(--industry-muted);

    font-size: 15px;

    line-height: 1.9;
}

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

.industries-grid {
    display: grid;

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

    gap: 24px;
}

/* =========================================
   INDUSTRY CARD
========================================= */

.industry-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

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

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));

    backdrop-filter: blur(18px);

    transform-style: preserve-3d;

    transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.6s ease,
        box-shadow 0.6s ease;
}

.industry-card:hover {
    border-color: rgba(223, 199, 123, 0.72);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(223, 199, 123, 0.08);
}

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

.industry-image {
    position: relative;

    height: 260px;

    overflow: hidden;

    background: #111;
}

.industry-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    filter: saturate(0.7) contrast(1.08) brightness(0.64);

    transition:
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s ease;
}

.industry-card:hover .industry-image img {
    transform: scale(1.1);

    filter: saturate(0.95) contrast(1.08) brightness(0.82);
}

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

.industry-image-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.8));
}

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

.industry-number {
    position: absolute;

    top: 20px;

    left: 22px;

    color: var(--industry-gold-light);

    font-family: "Playfair Display", serif;

    font-size: 15px;

    letter-spacing: 2px;
}

/* =========================================
   PLUS ICON
========================================= */

.industry-icon {
    position: absolute;

    right: 20px;

    bottom: 20px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(223, 199, 123, 0.5);

    color: var(--industry-gold-light);

    font-size: 20px;

    transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.industry-card:hover .industry-icon {
    background: var(--industry-gold);

    color: var(--industry-black);

    transform: rotate(90deg);
}

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

.industry-content {
    padding: 29px 29px 31px;
}

.industry-tag {
    color: var(--industry-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;
}

.industry-content h3 {
    margin: 12px 0 12px;

    font-family: "Playfair Display", serif;

    font-size: 29px;

    font-weight: 600;

    line-height: 1.1;

    transition: 0.5s ease;
}

.industry-card:hover .industry-content h3 {
    color: var(--industry-gold-light);
}

.industry-content p {
    min-height: 72px;

    margin: 0;

    color: #908d85;

    font-size: 12px;

    line-height: 1.75;
}

/* =========================================
   LINK
========================================= */

.industry-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    color: var(--industry-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    transition: 0.5s ease;
}

.industry-link span {
    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(223, 199, 123, 0.4);

    font-size: 14px;

    transition: 0.5s ease;
}

.industry-link:hover {
    gap: 17px;
}

.industry-link:hover span {
    background: var(--industry-gold);

    color: var(--industry-black);

    transform: rotate(45deg);
}

/* =========================================
   SHINE
========================================= */

.industry-shine {
    position: absolute;

    top: -220px;

    left: -350px;

    width: 150px;

    height: 800px;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);

    transform: rotate(28deg);

    transition: left 1s ease;

    pointer-events: none;
}

.industry-card:hover .industry-shine {
    left: 130%;
}

/* =========================================
   BOTTOM CTA
========================================= */

.industries-bottom {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 70px;

    padding: 40px 45px;

    border: 1px solid rgba(223, 199, 123, 0.2);

    background: rgba(255, 255, 255, 0.018);
}

.industry-bottom-line {
    width: 3px;

    height: 65px;

    flex-shrink: 0;

    background: linear-gradient(to bottom, transparent, var(--industry-gold), transparent);
}

.industry-bottom-content {
    flex: 1;
}

.industry-bottom-content span {
    color: var(--industry-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;
}

.industry-bottom-content h3 {
    margin: 8px 0 0;

    font-family: "Playfair Display", serif;

    font-size: 29px;

    font-weight: 500;

    line-height: 1.25;
}

.industry-bottom-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 16px 24px;

    border: 1px solid rgba(223, 199, 123, 0.55);

    color: var(--industry-gold-light);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.industry-bottom-btn i {
    font-style: normal;

    font-size: 15px;

    transition: 0.5s ease;
}

.industry-bottom-btn:hover {
    background: var(--industry-gold);

    color: var(--industry-black);

    border-color: var(--industry-gold);

    box-shadow: 0 0 30px rgba(223, 199, 123, 0.15);
}

.industry-bottom-btn:hover i {
    transform: translate(4px, -4px);
}

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

.industry-reveal {
    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.industry-reveal.active {
    opacity: 1;

    transform: translateY(0);
}

/* =========================================
   MOBILE
   MAX-WIDTH: 768PX
========================================= */

@media (max-width: 768px) {
    .industries-section {
        padding: 90px 20px;
    }

    .industries-heading {
        margin-bottom: 55px;
    }

    .industry-eyebrow {
        gap: 9px;
    }

    .industry-eyebrow span {
        width: 28px;
    }

    .industry-eyebrow p {
        font-size: 8px;

        letter-spacing: 3px;
    }

    .industries-heading h2 {
        font-size: 43px;

        letter-spacing: -1px;
    }

    .industries-intro {
        margin-top: 30px;

        font-size: 13px;

        line-height: 1.75;
    }

    /* One card per row */

    .industries-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .industry-image {
        height: 280px;
    }

    .industry-content {
        padding: 28px 25px 31px;
    }

    .industry-content h3 {
        font-size: 31px;
    }

    .industry-content p {
        min-height: auto;

        font-size: 13px;
    }

    .industries-bottom {
        align-items: flex-start;

        flex-direction: column;

        margin-top: 55px;

        padding: 30px 25px;

        gap: 20px;
    }

    .industry-bottom-line {
        width: 55px;

        height: 1px;
    }

    .industry-bottom-content h3 {
        font-size: 25px;
    }

    .industry-bottom-btn {
        width: 100%;
    }

    .industry-orb-one {
        width: 260px;

        height: 260px;
    }

    .industry-orb-two {
        width: 230px;

        height: 230px;
    }

    .industry-ring {
        display: none;
    }
}

/* =========================================
   LARGE DESKTOP
   MIN-WIDTH: 1440PX
========================================= */

@media (min-width: 1440px) {
    .industries-section {
        padding-top: 170px;

        padding-bottom: 170px;
    }

    .industries-container {
        max-width: 1550px;
    }

    .industries-heading {
        margin-bottom: 100px;
    }

    .industries-heading h2 {
        font-size: 82px;
    }

    .industries-intro {
        font-size: 16px;
    }

    .industries-grid {
        gap: 30px;
    }

    .industry-image {
        height: 310px;
    }

    .industry-content {
        padding: 35px;
    }

    .industry-content h3 {
        font-size: 32px;
    }

    .industry-content p {
        font-size: 13px;
    }

    .industries-bottom {
        margin-top: 95px;

        padding: 50px 60px;
    }

    .industry-bottom-content h3 {
        font-size: 36px;
    }
}


/*==========================------> 
   Industries We Serve Section css End
<------=========================*/








/*==========================------> 
    Counter & Clientd Logo Section css Start
<------=========================*/

.trusted-section {
    --trusted-black: #050505;
    --trusted-black-soft: #0b0b0b;
    --trusted-gold: #c9a227;
    --trusted-gold-light: #f0d477;
    --trusted-gold-dark: #8e7018;
    --trusted-white: #ffffff;
    --trusted-muted: #999999;
    --trusted-border: rgba(201, 162, 39, 0.18);

    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 100px 0;
    background: radial-gradient(circle at 50% 0%, rgba(201, 162, 39, 0.08), transparent 40%), var(--trusted-black);

    color: var(--trusted-white);
}

/* Background Grid */

.trusted-section .trusted-bg-grid {
    position: absolute;
    inset: 0;

    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);

    pointer-events: none;
}

/* Background Orbs */

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

.trusted-section .trusted-orb-one {
    width: 350px;
    height: 350px;
    top: 10%;
    left: -150px;
    background: rgba(201, 162, 39, 0.16);
}

.trusted-section .trusted-orb-two {
    width: 300px;
    height: 300px;
    bottom: 5%;
    right: -120px;
    background: rgba(201, 162, 39, 0.12);
}

/* Container */

.trusted-section .trusted-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 90%);
    margin: 0 auto;
}

/* Heading */

.trusted-section .trusted-heading {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.trusted-section .trusted-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;

    color: var(--trusted-gold-light);
}

.trusted-section .trusted-heading h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.95;
    font-weight: 500;
    letter-spacing: -3px;
}

.trusted-section .trusted-heading h2 em {
    color: var(--trusted-gold-light);
    font-style: normal;
}

.trusted-section .trusted-heading h2 span {
    display: block;
    background: linear-gradient(90deg, var(--trusted-gold-dark), var(--trusted-gold-light), var(--trusted-gold-dark));

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.trusted-section .trusted-heading p {
    max-width: 620px;
    margin: 28px auto 0;

    color: var(--trusted-muted);
    font-size: 16px;
    line-height: 1.8;
}

/* Marquee */

.trusted-section .trusted-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 90px;

    border-top: 1px solid var(--trusted-border);
    border-bottom: 1px solid var(--trusted-border);

    padding: 28px 0;
}

.trusted-section .trusted-marquee {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 28px;

    animation: trustedMarquee 28s linear infinite;
}

.trusted-section .trusted-brand {
    width: 250px;
    height: 130px;

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

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);

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

.trusted-section .trusted-brand:hover {
    transform: translateY(-6px);
    border-color: var(--trusted-border);
    background: rgba(201, 162, 39, 0.06);
}

.trusted-section .trusted-brand img {
    max-width: 100%;
    max-height: 100px;

    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;

    transition:
        filter 0.4s ease,
        opacity 0.4s ease,
        transform 0.4s ease;
}

.trusted-section .trusted-brand:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

@keyframes trustedMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Stats */

.trusted-section .trusted-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--trusted-border);
    border-bottom: 1px solid var(--trusted-border);

    margin-bottom: 110px;
}

.trusted-section .trusted-stat {
    position: relative;
    padding: 42px 25px;
    text-align: center;
}

.trusted-section .trusted-stat:not(:last-child)::after {
    content: "";
    position: absolute;

    top: 25%;
    right: 0;

    width: 1px;
    height: 50%;

    background: var(--trusted-border);
}

.trusted-section .trusted-stat-number {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2px;

    font-size: 50px;
    line-height: 1;

    font-weight: 500;

    background: linear-gradient(135deg, var(--trusted-gold-dark), var(--trusted-gold-light));

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.trusted-section .trusted-counter {
    display: inline-block;
    min-width: 1ch;
}

.trusted-section .trusted-stat p {
    margin: 14px 0 0;

    color: var(--trusted-muted);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* CTA */

.trusted-section .trusted-cta {
    text-align: center;
}

.trusted-section .trusted-cta-label {
    display: block;
    margin-bottom: 20px;

    color: var(--trusted-gold-light);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.trusted-section .trusted-cta h3 {
    margin: 0 0 35px;

    font-size: clamp(36px, 5vw, 65px);
    font-weight: 400;
    letter-spacing: -2px;
}

.trusted-section .trusted-cta h3 em {
    color: var(--trusted-gold-light);
    font-style: normal;
}

.trusted-section .trusted-cta-btn {
    position: relative;

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

    padding: 16px 24px 16px 28px;

    color: var(--trusted-black);
    background: var(--trusted-gold-light);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;

    overflow: hidden;

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

.trusted-section .trusted-cta-btn::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--trusted-white);

    transform: translateX(-105%);

    transition: transform 0.5s ease;
}

.trusted-section .trusted-cta-btn:hover::before {
    transform: translateX(0);
}

.trusted-section .trusted-cta-btn span,
.trusted-section .trusted-cta-btn i {
    position: relative;
    z-index: 2;
}

.trusted-section .trusted-cta-btn i {
    width: 35px;
    height: 35px;

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

    border: 1px solid rgba(0, 0, 0, 0.25);

    font-style: normal;
    font-size: 18px;
}

.trusted-section .trusted-cta-btn:hover {
    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(201, 162, 39, 0.2);
}

/* Reveal */

.trusted-section .trusted-reveal {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.trusted-section .trusted-reveal.trusted-visible {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 768px) {
    .trusted-section {
        padding: 90px 0;
    }

    .trusted-section .trusted-container {
        width: 88%;
    }

    .trusted-section .trusted-heading {
        margin-bottom: 50px;
    }

    .trusted-section .trusted-heading h2 {
        font-size: 45px;
        letter-spacing: -2px;
    }

    .trusted-section .trusted-heading p {
        font-size: 14px;
    }

    .trusted-section .trusted-marquee-wrapper {
        margin-bottom: 65px;
    }

    .trusted-section .trusted-brand {
        width: 140px;
        height: 75px;
    }

    .trusted-section .trusted-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 75px;
    }

    .trusted-section .trusted-stat {
        padding: 30px 15px;
    }

    .trusted-section .trusted-stat:nth-child(2)::after {
        display: none;
    }

    .trusted-section .trusted-stat:nth-child(1),
    .trusted-section .trusted-stat:nth-child(2) {
        border-bottom: 1px solid var(--trusted-border);
    }

    .trusted-section .trusted-stat-number {
        font-size: 38px;
    }

    .trusted-section .trusted-stat p {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .trusted-section .trusted-cta h3 {
        font-size: 40px;
    }
}

/* =========================
   LARGE DESKTOP
   ========================= */

@media (min-width: 1440px) {
    .trusted-section {
        padding: 170px 0;
    }

    .trusted-section .trusted-container {
        width: 1280px;
    }

    .trusted-section .trusted-heading h2 {
        font-size: 90px;
    }

    .trusted-section .trusted-brand {
        width: 190px;
        height: 95px;
    }

    .trusted-section .trusted-stat-number {
        font-size: 58px;
    }
}


/*==========================------> 
    Counter & Clientd Logo Section css End
<------=========================*/














/*==========================------> 
  Reviews Section css Start
<------=========================*/


.client-reviews {
    --review-black: #050505;
    --review-black-soft: #0b0b0b;
    --review-gold: #c9a227;
    --review-gold-light: #f1d477;
    --review-gold-dark: #8f711a;
    --review-white: #ffffff;
    --review-muted: #929292;
    --review-border: rgba(201, 162, 39, 0.18);

    position: relative;
    width: 100%;
    overflow: hidden;

    padding: 135px 0;

    background: radial-gradient(circle at 50% 0%, rgba(201, 162, 39, 0.09), transparent 38%), var(--review-black);

    color: var(--review-white);
    isolation: isolate;
}

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

.client-reviews__grid {
    position: absolute;
    inset: 0;

    z-index: -5;

    opacity: 0.25;

    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

    background-size: 70px 70px;
}

.client-reviews__orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -4;
}

.client-reviews__orb--one {
    width: 550px;
    height: 550px;

    left: -280px;
    top: 12%;

    background: radial-gradient(circle, rgba(201, 162, 39, 0.13), transparent 70%);

    filter: blur(5px);

    animation: reviewOrbOne 11s ease-in-out infinite;
}

.client-reviews__orb--two {
    width: 650px;
    height: 650px;

    right: -330px;
    bottom: -100px;

    background: radial-gradient(circle, rgba(201, 162, 39, 0.1), transparent 70%);

    filter: blur(5px);

    animation: reviewOrbTwo 13s ease-in-out infinite;
}

@keyframes reviewOrbOne {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(55px, 45px, 0);
    }
}

@keyframes reviewOrbTwo {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-60px, -45px, 0);
    }
}

.client-reviews__glow {
    position: absolute;

    width: 600px;
    height: 600px;

    top: 25%;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: radial-gradient(circle, rgba(201, 162, 39, 0.045), transparent 70%);

    pointer-events: none;

    z-index: -3;
}

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

.client-reviews__container {
    position: relative;

    width: min(1180px, 90%);

    margin: 0 auto;
}

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

.client-reviews__heading {
    max-width: 900px;

    margin: 0 auto 75px;

    text-align: center;
}

.client-reviews__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 23px;

    color: var(--review-gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;
}

.client-reviews__eyebrow::before,
.client-reviews__eyebrow::after {
    content: "";

    width: 38px;
    height: 1px;

    background: linear-gradient(90deg, transparent, var(--review-gold));
}

.client-reviews__eyebrow::after {
    background: linear-gradient(90deg, var(--review-gold), transparent);
}

.client-reviews__heading h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 82px);

    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -3px;
}

.client-reviews__heading h2 span {
    color: var(--review-gold-light);
}

.client-reviews__heading h2 em {
    display: block;

    margin-top: 8px;

    font-style: normal;

    background: linear-gradient(90deg, var(--review-gold-dark), var(--review-gold-light), var(--review-gold-dark));

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.client-reviews__heading p {
    max-width: 650px;

    margin: 30px auto 0;

    color: var(--review-muted);

    font-size: 15px;

    line-height: 1.8;
}

/* =========================================================
   SLIDER WRAPPER
   ========================================================= */

.client-reviews__slider-wrap {
    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;
}

/* =========================================================
   SLIDER
   ========================================================= */

.client-reviews__slider {
    width: 100%;

    overflow: hidden;

    cursor: grab;

    user-select: none;

    -webkit-user-select: none;
}

.client-reviews__slider:active {
    cursor: grabbing;
}

.client-reviews__track {
    display: flex;

    gap: 28px;

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

    will-change: transform;
}

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

.client-review-card {
    position: relative;

    flex: 0 0 calc((100% - 56px) / 3);

    min-height: 380px;

    padding: 32px;

    overflow: hidden;

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

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.client-review-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 1px;

    background: linear-gradient(90deg, transparent, var(--review-gold-light), transparent);

    transition: left 0.8s ease;
}

.client-review-card:hover::before {
    left: 100%;
}

.client-review-card:hover {
    border-color: rgba(201, 162, 39, 0.5);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(201, 162, 39, 0.07);

    transform: translateY(-8px);
}

/* =========================================================
   CARD TOP
   ========================================================= */

.client-review-card__top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.client-review-card__stars {
    display: flex;

    gap: 4px;

    color: var(--review-gold-light);

    font-size: 15px;

    filter: drop-shadow(0 0 7px rgba(201, 162, 39, 0.25));
}

.client-review-card__stars span {
    display: inline-block;

    transition: transform 0.3s ease;
}

.client-review-card:hover .client-review-card__stars span {
    transform: translateY(-2px);
}

.client-review-card__number {
    color: rgba(255, 255, 255, 0.2);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}

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

.client-review-card__quote {
    height: 75px;

    margin-top: 25px;

    color: rgba(201, 162, 39, 0.22);

    font-family: Georgia, serif;

    font-size: 105px;

    line-height: 0.85;

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

.client-review-card:hover .client-review-card__quote {
    color: rgba(201, 162, 39, 0.38);

    transform: translateX(5px);
}

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

.client-review-card__text {
    position: relative;

    z-index: 2;

    margin: 12px 0 30px;

    color: #d2d2d2;

    font-size: 14px;

    line-height: 1.8;
}

/* =========================================================
   CLIENT
   ========================================================= */

.client-review-card__client {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: auto;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.client-review-card__avatar {
    flex-shrink: 0;
}

.client-review-card__avatar img {
    display: block;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid rgba(201, 162, 39, 0.6);

    transition: transform 0.4s ease;
}

.client-review-card:hover .client-review-card__avatar img {
    transform: scale(1.08);
}

.client-review-card__info {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.client-review-card__info strong {
    color: var(--review-white);

    font-size: 13px;
}

.client-review-card__info span {
    color: var(--review-gold);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.client-review-card__verified {
    display: flex;

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

    width: 20px;
    height: 20px;

    margin-left: auto;

    border-radius: 50%;

    background: var(--review-gold);

    color: #050505;

    font-size: 11px;

    font-weight: 800;
}

/* =========================================================
   LUXURY ARROWS
   ========================================================= */

.client-reviews__arrow {
    position: relative;

    flex-shrink: 0;

    width: 54px;
    height: 54px;

    border: 1px solid rgba(201, 162, 39, 0.35);

    border-radius: 50%;

    background: rgba(201, 162, 39, 0.035);

    color: var(--review-gold-light);

    cursor: pointer;

    display: flex;

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

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

.client-reviews__arrow span {
    font-size: 20px;

    line-height: 1;

    transition: transform 0.35s ease;
}

.client-reviews__arrow:hover {
    background: var(--review-gold);

    border-color: var(--review-gold);

    color: #050505;

    transform: scale(1.08);

    box-shadow: 0 0 30px rgba(201, 162, 39, 0.18);
}

.client-reviews__arrow--prev:hover span {
    transform: translateX(-3px);
}

.client-reviews__arrow--next:hover span {
    transform: translateX(3px);
}

.client-reviews__arrow:active {
    transform: scale(0.95);
}

/* =========================================================
   CONTROLS
   ========================================================= */

.client-reviews__controls {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 35px;

    margin-top: 35px;
}

.client-reviews__dots {
    display: flex;

    align-items: center;

    gap: 8px;
}

.client-reviews__dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

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

    cursor: pointer;

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

.client-reviews__dot.is-active {
    width: 28px;

    border-radius: 20px;

    background: var(--review-gold);

    box-shadow: 0 0 15px rgba(201, 162, 39, 0.35);
}

.client-reviews__counter {
    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--review-muted);

    font-size: 10px;

    letter-spacing: 2px;
}

.client-reviews__counter span:first-child {
    color: var(--review-gold-light);
}

.client-reviews__counter i {
    display: block;

    width: 20px;
    height: 1px;

    background: var(--review-border);
}

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

.client-reviews__bottom {
    display: flex;

    align-items: center;

    gap: 45px;

    margin-top: 75px;

    padding-top: 38px;

    border-top: 1px solid var(--review-border);
}

.client-reviews__rating {
    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 260px;
}

.client-reviews__rating > strong {
    color: var(--review-gold-light);

    font-size: 48px;

    line-height: 1;

    font-weight: 500;
}

.client-reviews__rating > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.client-reviews__rating-stars {
    color: var(--review-gold-light);

    font-size: 13px;

    letter-spacing: 2px;
}

.client-reviews__rating span {
    color: var(--review-muted);

    font-size: 10px;
}

.client-reviews__line {
    width: 1px;
    height: 55px;

    background: var(--review-border);
}

.client-reviews__cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    flex: 1;

    gap: 25px;
}

.client-reviews__cta > span {
    color: var(--review-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}

.client-reviews__cta a {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 15px 23px;

    border: 1px solid var(--review-gold);

    color: var(--review-gold-light);

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

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

.client-reviews__cta a b {
    font-size: 17px;

    font-weight: 400;

    transition: transform 0.35s ease;
}

.client-reviews__cta a:hover {
    background: var(--review-gold);

    color: #050505;

    transform: translateY(-3px);
}

.client-reviews__cta a:hover b {
    transform: translateX(5px);
}

/* =========================================================
   MOBILE — MAX 768PX
   ========================================================= */

@media (max-width: 768px) {
    .client-reviews {
        padding: 85px 0;
    }

    .client-reviews__container {
        width: 88%;
    }

    .client-reviews__heading {
        margin-bottom: 50px;
    }

    .client-reviews__eyebrow {
        font-size: 9px;

        letter-spacing: 2.5px;
    }

    .client-reviews__eyebrow::before,
    .client-reviews__eyebrow::after {
        width: 20px;
    }

    .client-reviews__heading h2 {
        font-size: 44px;

        letter-spacing: -2px;
    }

    .client-reviews__heading p {
        font-size: 14px;
    }

    /* One card on mobile */

    .client-reviews__slider-wrap {
        gap: 8px;
    }

    .client-reviews__track {
        gap: 0;
    }

    .client-review-card {
        flex: 0 0 100%;

        min-height: 360px;

        padding: 27px 23px;
    }

    .client-reviews__arrow {
        position: absolute;

        z-index: 10;

        width: 44px;
        height: 44px;

        background: rgba(5, 5, 5, 0.8);

        backdrop-filter: blur(10px);
    }

    .client-reviews__arrow--prev {
        left: 10px;
    }

    .client-reviews__arrow--next {
        right: 10px;
    }

    .client-review-card__text {
        font-size: 13px;
    }

    .client-reviews__controls {
        margin-top: 28px;

        gap: 25px;
    }

    .client-reviews__bottom {
        flex-direction: column;

        align-items: stretch;

        gap: 28px;

        margin-top: 55px;
    }

    .client-reviews__line {
        width: 100%;
        height: 1px;
    }

    .client-reviews__cta {
        flex-direction: column;

        align-items: flex-start;
    }

    .client-reviews__cta a {
        width: 100%;

        justify-content: center;
    }
}

/* =========================================================
   LARGE DESKTOP — MIN 1440PX
   ========================================================= */

@media (min-width: 1440px) {
    .client-reviews {
        padding: 170px 0;
    }

    .client-reviews__container {
        width: 1320px;
    }

    .client-reviews__heading h2 {
        font-size: 92px;
    }

    .client-reviews__track {
        gap: 32px;
    }

    .client-review-card {
        flex-basis: calc((100% - 64px) / 3);

        min-height: 410px;

        padding: 36px;
    }

    .client-review-card__text {
        font-size: 15px;
    }

    .client-reviews__arrow {
        width: 60px;
        height: 60px;
    }

    .client-reviews__bottom {
        margin-top: 90px;
    }
}

/*==========================------> 
  Reviews Section css End
<------=========================*/










/*==========================------> 
    Blogs Section css Start
<------=========================*/

.blog-section {
    --blog-black: #050505;
    --blog-black-soft: #0a0a0a;
    --blog-gold: #c9a227;
    --blog-gold-light: #f1d477;
    --blog-gold-dark: #8f711a;
    --blog-white: #ffffff;
    --blog-muted: #999999;
    --blog-border: rgba(201, 162, 39, 0.18);

    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(201, 162, 39, 0.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #080808 50%,
            #050505 100%
        );
    color: var(--blog-white);
}


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

.blog-section__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(201, 162, 39, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(201, 162, 39, 0.08) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 15%,
        black 85%,
        transparent
    );
}


/* =========================================================
   GLOW ORBS
========================================================= */

.blog-section__orb {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.12;
}

.blog-section__orb--one {
    top: 12%;
    left: -180px;
    background: var(--blog-gold);
    animation: blogOrbOne 9s ease-in-out infinite;
}

.blog-section__orb--two {
    right: -180px;
    bottom: 8%;
    background: #b8860b;
    animation: blogOrbTwo 11s ease-in-out infinite;
}

@keyframes blogOrbOne {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(80px, 40px, 0) scale(1.12);
    }
}

@keyframes blogOrbTwo {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-70px, -40px, 0) scale(1.1);
    }
}


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

.blog-section__container {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 50px));
    margin: 0 auto;
}


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

.blog-section__heading {
    max-width: 850px;
    margin: 0 auto 75px;
    text-align: center;
}

.blog-section__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    margin-bottom: 25px;

    color: var(--blog-gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.blog-section__eyebrow span {
    width: 38px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--blog-gold)
    );
}

.blog-section__eyebrow span:last-child {
    background: linear-gradient(
        90deg,
        var(--blog-gold),
        transparent
    );
}

.blog-section__heading h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -3px;
}

.blog-section__heading h2 span {
    color: var(--blog-gold-light);
    font-style: italic;
    font-family: Georgia, serif;
}

.blog-section__heading h2 em {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
    font-family: Georgia, serif;
    font-weight: 400;
}

.blog-section__heading p {
    max-width: 650px;
    margin: 30px auto 0;

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


/* =========================================================
   BLOG CARDS
========================================================= */

.blog-section__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


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

.blog-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
        );

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

    transition:
        transform 0.7s cubic-bezier(.16, 1, .3, 1),
        border-color 0.5s ease,
        box-shadow 0.5s ease;

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

.blog-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.blog-card:hover {
    transform: translateY(-12px);
    border-color: rgba(201, 162, 39, 0.55);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.5),
        0 0 45px rgba(201, 162, 39, 0.07);
}


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

.blog-card__image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #111;
}

.blog-card__image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0, 0, 0, 0.8) 100%
        );

    pointer-events: none;
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: grayscale(20%);
    transition:
        transform 1s cubic-bezier(.16, 1, .3, 1),
        filter 0.6s ease;
}

.blog-card:hover .blog-card__image img {
    transform: scale(1.09);
    filter: grayscale(0%);
}


/* =========================================================
   CATEGORY
========================================================= */

.blog-card__category {
    position: absolute;
    z-index: 3;
    top: 20px;
    left: 20px;

    padding: 8px 13px;

    color: var(--blog-gold-light);
    background: rgba(5, 5, 5, 0.75);
    border: 1px solid rgba(201, 162, 39, 0.4);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    backdrop-filter: blur(10px);
}


/* =========================================================
   CARD NUMBER
========================================================= */

.blog-card__number {
    position: absolute;
    z-index: 3;
    right: 20px;
    bottom: 17px;

    color: rgba(255, 255, 255, 0.65);

    font-family: Georgia, serif;
    font-size: 12px;
    letter-spacing: 2px;
}


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

.blog-card__content {
    padding: 30px 28px 32px;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;

    color: var(--blog-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.blog-card__content h3 {
    margin: 0 0 17px;

    font-size: 23px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.blog-card__content p {
    margin: 0;

    color: var(--blog-muted);
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   READ ARTICLE
========================================================= */

.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;

    color: var(--blog-white);
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    transition: color 0.3s ease;
}

.blog-card__link span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: var(--blog-gold-light);

    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 50%;

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

.blog-card__link:hover {
    color: var(--blog-gold-light);
}

.blog-card__link:hover span {
    transform: rotate(45deg);
    background: rgba(201, 162, 39, 0.12);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.blog-section__bottom {
    display: flex;
    align-items: center;
    gap: 28px;

    margin-top: 70px;
}

.blog-section__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 162, 39, 0.35)
    );
}

.blog-section__line:last-child {
    background: linear-gradient(
        90deg,
        rgba(201, 162, 39, 0.35),
        transparent
    );
}

.blog-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    color: var(--blog-white);
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    white-space: nowrap;
}

.blog-section__cta strong {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: var(--blog-gold-light);

    border: 1px solid rgba(201, 162, 39, 0.4);
    border-radius: 50%;

    transition:
        transform 0.5s ease,
        background 0.4s ease;
}

.blog-section__cta:hover strong {
    transform: rotate(45deg);
    background: rgba(201, 162, 39, 0.12);
}


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

@media (max-width: 768px) {

    .blog-section {
        padding: 85px 0;
    }

    .blog-section__container {
        width: calc(100% - 32px);
    }

    .blog-section__heading {
        margin-bottom: 50px;
    }

    .blog-section__eyebrow {
        font-size: 9px;
        letter-spacing: 2.5px;
        gap: 10px;
    }

    .blog-section__eyebrow span {
        width: 25px;
    }

    .blog-section__heading h2 {
        font-size: 43px;
        letter-spacing: -2px;
        line-height: 1.05;
    }

    .blog-section__heading p {
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.8;
    }

    .blog-section__cards {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .blog-card__image {
        height: 245px;
    }

    .blog-card__content {
        padding: 25px 22px 28px;
    }

    .blog-card__content h3 {
        font-size: 21px;
    }

    .blog-section__bottom {
        gap: 15px;
        margin-top: 45px;
    }

    .blog-section__line {
        display: none;
    }

    .blog-section__cta {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;

        border: 1px solid rgba(201, 162, 39, 0.3);
    }

    .blog-section__orb {
        width: 250px;
        height: 250px;
        filter: blur(70px);
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {

    .blog-section {
        padding: 170px 0;
    }

    .blog-section__container {
        width: 1320px;
    }

    .blog-section__heading {
        max-width: 950px;
        margin-bottom: 90px;
    }

    .blog-section__heading h2 {
        font-size: 88px;
    }

    .blog-section__heading p {
        font-size: 16px;
        max-width: 720px;
    }

    .blog-section__cards {
        gap: 32px;
    }

    .blog-card__image {
        height: 330px;
    }

    .blog-card__content {
        padding: 35px 32px 38px;
    }

    .blog-card__content h3 {
        font-size: 26px;
    }
}


/*==========================------> 
  Blogs Section css End
<------=========================*/















/*==========================------> 
  Contact Form Section css Start
<------=========================*/

.luxury-contact {
    --contact-black: #050505;
    --contact-black-soft: #0b0b0b;
    --contact-gold: #c9a227;
    --contact-gold-light: #f1d477;
    --contact-gold-dark: #8f711a;
    --contact-white: #ffffff;
    --contact-muted: #929292;
    --contact-border: rgba(201, 162, 39, 0.18);

    position: relative;
    overflow: hidden;
    padding: 140px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(201, 162, 39, 0.09),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #050505,
            #090909 50%,
            #050505
        );

    color: var(--contact-white);
}


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

.luxury-contact__grid {
    position: absolute;
    inset: 0;

    opacity: 0.17;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(201, 162, 39, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(201, 162, 39, 0.07) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 12%,
        black 88%,
        transparent
    );
}


/* =========================================================
   ORBS
========================================================= */

.luxury-contact__orb {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(100px);
    opacity: 0.11;

    pointer-events: none;
}

.luxury-contact__orb--one {
    top: 8%;
    left: -220px;
    background: var(--contact-gold);

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

.luxury-contact__orb--two {
    right: -220px;
    bottom: 5%;
    background: #a97c13;

    animation:
        contactOrbTwo 12s ease-in-out infinite;
}

@keyframes contactOrbOne {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(100px, 50px) scale(1.12);
    }
}

@keyframes contactOrbTwo {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-90px, -50px) scale(1.12);
    }
}


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

.luxury-contact__container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 50px));
    margin: auto;
}


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

.luxury-contact__heading {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center;
}

.luxury-contact__eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 14px;
    margin-bottom: 25px;

    color: var(--contact-gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
}

.luxury-contact__eyebrow span {
    width: 40px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--contact-gold)
        );
}

.luxury-contact__eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--contact-gold),
            transparent
        );
}

.luxury-contact__heading h2 {
    margin: 0;

    font-size: clamp(50px, 6vw, 82px);
    line-height: 1;
    font-weight: 500;

    letter-spacing: -3px;
}

.luxury-contact__heading h2 span {
    display: block;

    color: var(--contact-gold-light);

    font-family: Georgia, serif;
    font-style: italic;
}

.luxury-contact__heading p {
    max-width: 650px;
    margin: 30px auto 0;

    color: var(--contact-muted);

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


/* =========================================================
   MAIN WRAPPER
========================================================= */

.luxury-contact__wrapper {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

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

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(20px);
}


/* =========================================================
   LEFT INFO
========================================================= */

.luxury-contact__info {
    position: relative;

    padding: 60px 48px;

    border-right: 1px solid var(--contact-border);
}

.luxury-contact__info-top {
    display: flex;
    align-items: center;
    gap: 15px;

    color: var(--contact-gold-light);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}

.luxury-contact__info-top div {
    flex: 1;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(201, 162, 39, 0.4),
            transparent
        );
}

.luxury-contact__info h3 {
    margin: 35px 0 20px;

    font-size: 42px;
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -1.5px;
}

.luxury-contact__info h3 em {
    color: var(--contact-gold-light);

    font-family: Georgia, serif;
    font-style: italic;
}

.luxury-contact__description {
    max-width: 450px;

    margin-bottom: 45px;

    color: var(--contact-muted);

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


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

.luxury-contact__item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 17px;

    padding: 19px 0;

    color: var(--contact-white);
    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    transition:
        padding 0.4s ease,
        border-color 0.4s ease;
}

.luxury-contact__item:hover {
    padding-left: 8px;
    border-color: rgba(201, 162, 39, 0.3);
}

.luxury-contact__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    color: var(--contact-gold-light);

    border: 1px solid var(--contact-border);
    border-radius: 50%;

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

.luxury-contact__item:hover
.luxury-contact__item-icon {
    background: rgba(201, 162, 39, 0.1);
    transform: rotate(-8deg);
}

.luxury-contact__item small {
    display: block;

    margin-bottom: 5px;

    color: var(--contact-muted);

    font-size: 8px;
    letter-spacing: 2px;
}

.luxury-contact__item strong {
    font-size: 13px;
    font-weight: 500;
}

.luxury-contact__item-arrow {
    margin-left: auto;

    color: var(--contact-gold-light);

    font-size: 18px;

    transition:
        transform 0.4s ease;
}

.luxury-contact__item:hover
.luxury-contact__item-arrow {
    transform: translate(4px, -4px);
}


/* =========================================================
   SOCIALS
========================================================= */

.luxury-contact__socials {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 42px;
}

.luxury-contact__socials > span {
    color: var(--contact-muted);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.luxury-contact__social-list {
    display: flex;
    gap: 8px;
}

.luxury-contact__social-list a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: var(--contact-white);

    border: 1px solid var(--contact-border);
    border-radius: 50%;

    text-decoration: none;

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

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

.luxury-contact__social-list a:hover {
    color: #050505;

    background: var(--contact-gold-light);

    transform: translateY(-4px);
}


/* =========================================================
   FORM BOX
========================================================= */

.luxury-contact__form-box {
    position: relative;

    padding: 60px 50px;

    overflow: hidden;
}

.luxury-contact__form-glow {
    position: absolute;

    width: 250px;
    height: 250px;

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

    border-radius: 50%;

    background: var(--contact-gold);

    opacity: 0.06;
    filter: blur(70px);

    pointer-events: none;
}

.luxury-contact__form-heading {
    position: relative;

    margin-bottom: 38px;
}

.luxury-contact__form-heading > span {
    color: var(--contact-gold);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}

.luxury-contact__form-heading h3 {
    margin: 14px 0 0;

    font-size: 30px;
    font-weight: 400;
}

.luxury-contact__form-heading h3 em {
    color: var(--contact-gold-light);

    font-family: Georgia, serif;
    font-style: italic;
}


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

.luxury-contact__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


/* =========================================================
   FIELDS
========================================================= */

.luxury-contact__field {
    position: relative;

    margin-bottom: 25px;
}

.luxury-contact__field label {
    display: block;

    margin-bottom: 10px;

    color: #777;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.luxury-contact__field input,
.luxury-contact__field select,
.luxury-contact__field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 14px 0;

    color: var(--contact-white);

    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);

    outline: none;

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color 0.35s ease;
}

.luxury-contact__field textarea {
    resize: vertical;
    min-height: 100px;
}

.luxury-contact__field select {
    cursor: pointer;
}

.luxury-contact__field select option {
    color: #ffffff;
    background: #0b0b0b;
}

.luxury-contact__field input::placeholder,
.luxury-contact__field textarea::placeholder {
    color: #555;
}

.luxury-contact__field input:focus,
.luxury-contact__field select:focus,
.luxury-contact__field textarea:focus {
    border-color: var(--contact-gold);
}


/* =========================================================
   FORM BOTTOM
========================================================= */

.luxury-contact__form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 8px;
}

.luxury-contact__form-bottom p {
    margin: 0;

    color: #777;

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

.luxury-contact__form-bottom p span {
    color: var(--contact-gold-light);
}


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

.luxury-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    min-width: 190px;

    padding: 15px 20px;

    color: #050505;

    background:
        linear-gradient(
            135deg,
            var(--contact-gold-light),
            var(--contact-gold)
        );

    border: 0;

    cursor: pointer;

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;

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

.luxury-contact__submit strong {
    font-size: 17px;
    font-weight: 400;

    transition:
        transform 0.4s ease;
}

.luxury-contact__submit:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(201, 162, 39, 0.2);
}

.luxury-contact__submit:hover strong {
    transform: translate(4px, -4px);
}


/* =========================================================
   SUCCESS
========================================================= */

.luxury-contact__success {
    display: none;

    margin-top: 20px;
    padding: 14px;

    color: var(--contact-gold-light);

    background: rgba(201, 162, 39, 0.07);

    border: 1px solid rgba(201, 162, 39, 0.2);

    font-size: 10px;
    letter-spacing: 0.5px;
}

.luxury-contact__success.show {
    display: block;
    animation: contactSuccess 0.5s ease both;
}

@keyframes contactSuccess {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.luxury-contact__bottom {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 65px;

    color: var(--contact-muted);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}

.luxury-contact__bottom-line {
    flex: 1;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 162, 39, 0.3),
            transparent
        );
}

.luxury-contact__bottom strong {
    color: var(--contact-gold-light);

    font-size: 9px;
}


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

@media (max-width: 768px) {

    .luxury-contact {
        padding: 90px 0;
    }

    .luxury-contact__container {
        width: calc(100% - 32px);
    }

    .luxury-contact__heading {
        margin-bottom: 55px;
    }

    .luxury-contact__eyebrow {
        gap: 9px;
        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .luxury-contact__eyebrow span {
        width: 24px;
    }

    .luxury-contact__heading h2 {
        font-size: 43px;
        letter-spacing: -2px;
        line-height: 1.05;
    }

    .luxury-contact__heading p {
        margin-top: 22px;
        font-size: 12px;
    }

    .luxury-contact__wrapper {
        grid-template-columns: 1fr;
    }

    .luxury-contact__info {
        padding: 40px 24px;

        border-right: 0;
        border-bottom: 1px solid var(--contact-border);
    }

    .luxury-contact__info h3 {
        font-size: 34px;
    }

    .luxury-contact__description {
        margin-bottom: 30px;
    }

    .luxury-contact__item strong {
        font-size: 11px;
    }

    .luxury-contact__form-box {
        padding: 40px 24px;
    }

    .luxury-contact__form-heading h3 {
        font-size: 25px;
    }

    .luxury-contact__form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .luxury-contact__form-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .luxury-contact__submit {
        width: 100%;
    }

    .luxury-contact__bottom {
        flex-direction: column;
        gap: 12px;

        text-align: center;
    }

    .luxury-contact__bottom-line {
        width: 70px;
        flex: none;
    }

    .luxury-contact__orb {
        width: 250px;
        height: 250px;
        filter: blur(70px);
    }
}


/* =========================================================
   LARGE DESKTOP ONLY
========================================================= */

@media (min-width: 1440px) {

    .luxury-contact {
        padding: 175px 0;
    }

    .luxury-contact__container {
        width: 1320px;
    }

    .luxury-contact__heading {
        max-width: 1000px;
        margin-bottom: 95px;
    }

    .luxury-contact__heading h2 {
        font-size: 90px;
    }

    .luxury-contact__heading p {
        font-size: 16px;
    }

    .luxury-contact__info {
        padding: 70px 60px;
    }

    .luxury-contact__form-box {
        padding: 70px 60px;
    }

    .luxury-contact__info h3 {
        font-size: 48px;
    }

    .luxury-contact__form-heading h3 {
        font-size: 34px;
    }
}



/*==========================------> 
  Contact Form Section css End
<------=========================*/












/*==========================------> 
  Footer Section css Start
<------=========================*/

.luxury-footer {

    --gold: #d8bd70;
    --gold-light: #f1d991;
    --gold-dark: #9f7d35;

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #020202;

    color: #fff;

    padding: 100px 70px 35px;

    isolation: isolate;

}


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

.lux-bg {

    position: absolute;

    inset: 0;

    z-index: -5;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(216,189,112,.11),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(216,189,112,.08),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #020202,
            #080705,
            #020202
        );

}


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

.lux-grid {

    position: absolute;

    inset: 0;

    z-index: -4;

    opacity: .16;

    background-image:

        linear-gradient(
            rgba(216,189,112,.09) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(216,189,112,.09) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

}


/* =====================================================
   CENTER GOLD LIGHT
===================================================== */

.luxury-footer::after {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: 50%;

    top: 45%;

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

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(220,190,108,.09),
            transparent 65%
        );

    filter: blur(20px);

    z-index: -3;

    animation:
        luxuryPulse 8s ease-in-out infinite alternate;

}


@keyframes luxuryPulse {

    0% {

        transform:
            translate(-50%, -50%)
            scale(.7);

        opacity: .45;

    }

    100% {

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

        opacity: 1;

    }

}


/* =====================================================
   MOUSE GLOW
===================================================== */

.mouse-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    left: var(--mouse-x, 50%);

    top: var(--mouse-y, 50%);

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

    pointer-events: none;

    z-index: -2;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(218,188,104,.09),
            transparent 68%
        );

    filter: blur(20px);

}


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

.lux-particles {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

}


.lux-particles i {

    position: absolute;

    width: 2px;

    height: 2px;

    border-radius: 50%;

    background: var(--gold-light);

    box-shadow:
        0 0 12px
        rgba(241,217,145,.8);

    animation:
        luxuryParticle
        linear infinite;

}


.lux-particles i:nth-child(1) {

    left: 8%;
    top: 80%;

    animation-duration: 9s;

}


.lux-particles i:nth-child(2) {

    left: 18%;
    top: 60%;

    animation-duration: 12s;

}


.lux-particles i:nth-child(3) {

    left: 30%;
    top: 90%;

    animation-duration: 10s;

}


.lux-particles i:nth-child(4) {

    left: 43%;
    top: 70%;

    animation-duration: 14s;

}


.lux-particles i:nth-child(5) {

    left: 57%;
    top: 88%;

    animation-duration: 11s;

}


.lux-particles i:nth-child(6) {

    left: 69%;
    top: 65%;

    animation-duration: 13s;

}


.lux-particles i:nth-child(7) {

    left: 78%;
    top: 82%;

    animation-duration: 9s;

}


.lux-particles i:nth-child(8) {

    left: 87%;
    top: 55%;

    animation-duration: 15s;

}


.lux-particles i:nth-child(9) {

    left: 94%;
    top: 85%;

    animation-duration: 10s;

}


.lux-particles i:nth-child(10) {

    left: 51%;
    top: 50%;

    animation-duration: 16s;

}


@keyframes luxuryParticle {

    0% {

        transform:
            translateY(100px)
            scale(.3);

        opacity: 0;

    }

    20% {

        opacity: .8;

    }

    80% {

        opacity: .5;

    }

    100% {

        transform:
            translateY(-500px)
            scale(1.5);

        opacity: 0;

    }

}


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

.lux-footer-container {

    position: relative;

    z-index: 5;

    max-width: 1650px;

    margin: auto;

}


/* =====================================================
   BRAND AREA
===================================================== */

.lux-brand-area {

    display: grid;

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

    gap: 80px;

    align-items: end;

}


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

.lux-mini-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: var(--gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

}


.lux-mini-title span {

    display: block;

    width: 25px;

    height: 1px;

    background:
        var(--gold);

}


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

.lux-logo {

    display: inline-block;

}


.lux-logo img {

    display: block;

    width: 250px;

    height: auto;

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

}


.lux-logo:hover img {

    transform:
        scale(1.035)
        translateY(-4px);

    filter:
        drop-shadow(
            0 0 25px
            rgba(218,188,104,.35)
        );

}


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

.lux-description {

    max-width: 570px;

    margin:
        28px 0 30px;

    color:
        rgba(255,255,255,.53);

    font-size: 16px;

    line-height: 1.9;

}


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

.lux-main-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding:
        15px 25px;

    overflow: hidden;

    border:
        1px solid
        rgba(216,189,112,.6);

    color: var(--gold-light);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
        color .45s ease,
        transform .45s ease,
        box-shadow .45s ease;

}


.lux-main-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            100deg,
            var(--gold-dark),
            var(--gold-light)
        );

    transform:
        translateX(-101%);

    transition:
        transform .5s cubic-bezier(.7,0,.2,1);

    z-index: -1;

}


.lux-main-btn:hover::before {

    transform:
        translateX(0);

}


.lux-main-btn:hover {

    color: #050505;

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(216,189,112,.16);

}


.lux-main-btn b {

    font-size: 18px;

    font-weight: 400;

    transition:
        transform .4s ease;

}


.lux-main-btn:hover b {

    transform:
        translate(5px,-5px);

}


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

.lux-brand-right {

    position: relative;

    padding-bottom: 10px;

}


.lux-small-heading {

    color:
        rgba(255,255,255,.35);

    font-size: 10px;

    letter-spacing: 4px;

}


.lux-brand-right h2 {

    margin:
        15px 0 25px;

    font-size: 55px;

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -2px;

}


.lux-brand-right h2 span {

    display: block;

    color: var(--gold-light);

    font-style: italic;

}


.lux-number {

    color:
        rgba(216,189,112,.5);

    font-size: 11px;

    letter-spacing: 4px;

}


/* =====================================================
   GOLD DIVIDER
===================================================== */

.lux-line {

    position: relative;

    width: 100%;

    height: 1px;

    margin:
        85px 0 55px;

    background:
        rgba(255,255,255,.1);

    overflow: hidden;

}


.lux-line-light {

    position: absolute;

    left: -20%;

    top: 0;

    width: 20%;

    height: 1px;

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

    animation:
        luxuryLine 5s ease-in-out infinite;

}


@keyframes luxuryLine {

    0% {
        left: -20%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }

}


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

.lux-navigation {

    display: grid;

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

    gap: 60px;

}


/* =====================================================
   NAV BLOCK
===================================================== */

.lux-nav-block {

    position: relative;

}


.lux-nav-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color:
        rgba(255,255,255,.35);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.lux-nav-title span {

    color: var(--gold);

}


/* =====================================================
   NAV LINKS
===================================================== */

.lux-nav-block > a:not(.lux-contact) {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding:
        9px 0;

    color:
        rgba(255,255,255,.55);

    text-decoration: none;

    font-size: 15px;

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

}


.lux-nav-block > a:not(.lux-contact)::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 3px;

    width: 0;

    height: 1px;

    background:
        var(--gold-light);

    transition:
        width .4s ease;

}


.lux-nav-block > a:not(.lux-contact):hover {

    padding-left: 10px;

    color:
        var(--gold-light);

}


.lux-nav-block > a:not(.lux-contact):hover::before {

    width: 45px;

}


.lux-nav-block > a:not(.lux-contact) small {

    color:
        rgba(216,189,112,.4);

    font-size: 13px;

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

}


.lux-nav-block > a:not(.lux-contact):hover small {

    color:
        var(--gold-light);

    transform:
        translate(4px,-4px);

}


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

.lux-contact {

    display: block;

    margin-bottom: 25px;

    text-decoration: none;

}


.lux-contact small {

    display: block;

    margin-bottom: 6px;

    color:
        rgba(216,189,112,.55);

    font-size: 9px;

    letter-spacing: 2px;

}


.lux-contact strong {

    color:
        rgba(255,255,255,.65);

    font-size: 14px;

    font-weight: 400;

    transition:
        color .3s ease;

}


.lux-contact:hover strong {

    color:
        var(--gold-light);

}


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

.lux-social {

    display: flex;

    flex-direction: column;

}


.lux-social a {

    display: grid;

    grid-template-columns:
        38px 1fr 20px;

    align-items: center;

    gap: 12px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.55);

    text-decoration: none;

    font-size: 14px;

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

}


.lux-social a span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border:
        1px solid
        rgba(216,189,112,.35);

    border-radius: 50%;

    color:
        var(--gold);

    font-size: 8px;

    font-weight: 700;

}


.lux-social a b {

    color:
        rgba(216,189,112,.45);

    font-size: 14px;

    font-weight: 400;

}


.lux-social a:hover {

    padding-left: 7px;

    color:
        var(--gold-light);

}


.lux-social a:hover span {

    background:
        var(--gold);

    color: #050505;

}


/* =====================================================
   HUGE CTA
===================================================== */

.lux-cta {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 260px;

    margin-top: 90px;

    padding:
        45px 55px;

    overflow: hidden;

    border:
        1px solid
        rgba(216,189,112,.22);

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.035),
            rgba(216,189,112,.025)
        );

}


.lux-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(216,189,112,.08),
            transparent 70%
        );

    transform:
        translateX(-100%);

    animation:
        ctaShine 7s ease-in-out infinite;

}


@keyframes ctaShine {

    0% {
        transform:
            translateX(-100%);
    }

    40% {
        transform:
            translateX(100%);
    }

    100% {
        transform:
            translateX(100%);
    }

}


.lux-cta-bg-text {

    position: absolute;

    right: -20px;

    bottom: -50px;

    color:
        rgba(216,189,112,.025);

    font-size: 180px;

    font-weight: 900;

    letter-spacing: -10px;

    pointer-events: none;

}


.lux-cta-content {

    position: relative;

    z-index: 2;

}


.lux-cta-content > span {

    color:
        rgba(255,255,255,.35);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

}


.lux-cta-content h3 {

    margin:
        15px 0 0;

    font-size: 52px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -2px;

}


.lux-cta-content h3 em {

    color:
        var(--gold-light);

    font-style: italic;

}


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

.lux-cta-arrow {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    width: 170px;

    height: 170px;

    border:
        1px solid
        rgba(216,189,112,.5);

    border-radius: 50%;

    color:
        var(--gold-light);

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
        background .5s ease,
        color .5s ease,
        transform .5s ease,
        box-shadow .5s ease;

}


.lux-cta-arrow b {

    font-size: 28px;

    font-weight: 300;

    transition:
        transform .4s ease;

}


.lux-cta-arrow:hover {

    background:
        var(--gold-light);

    color: #050505;

    transform:
        rotate(8deg);

    box-shadow:
        0 0 50px
        rgba(216,189,112,.2);

}


.lux-cta-arrow:hover b {

    transform:
        translate(5px,-5px);

}


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

.lux-bottom {

    display: grid;

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

    align-items: center;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

}


.lux-copyright {

    color:
        rgba(255,255,255,.3);

    font-size: 11px;

}


.lux-tagline {

    text-align: center;

    color:
        rgba(255,255,255,.35);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.lux-tagline span {

    color:
        var(--gold);

}


.lux-legal {

    display: flex;

    justify-content: flex-end;

    gap: 25px;

}


.lux-legal a {

    color:
        rgba(255,255,255,.3);

    text-decoration: none;

    font-size: 10px;

    transition:
        color .3s ease;

}


.lux-legal a:hover {

    color:
        var(--gold-light);

}


/* =====================================================
   BACK TO TOP
===================================================== */

.lux-top {

    position: absolute;

    right: 40px;

    bottom: 25px;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border:
        1px solid
        rgba(216,189,112,.45);

    border-radius: 50%;

    background:
        rgba(3,3,3,.8);

    color:
        var(--gold-light);

    cursor: pointer;

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease,
        box-shadow .4s ease;

}


.lux-top span {

    font-size: 20px;

}


.lux-top:hover {

    background:
        var(--gold-light);

    color: #050505;

    transform:
        translateY(-6px);

    box-shadow:
        0 10px 30px
        rgba(216,189,112,.18);

}


/* =====================================================
   MIN WIDTH 1440px
===================================================== */

@media (min-width: 1440px) {

    .luxury-footer {

        padding:
            125px 90px 40px;

    }


    .lux-footer-container {

        max-width: 1700px;

    }


    .lux-logo img {

        width: 360px;

    }


    .lux-description {

        font-size: 17px;

    }


    .lux-brand-right h2 {

        font-size: 68px;

    }


    .lux-navigation {

        gap: 80px;

    }


    .lux-nav-block > a:not(.lux-contact) {

        font-size: 16px;

    }


    .lux-cta {

        min-height: 300px;

        padding:
            55px 70px;

    }


    .lux-cta-content h3 {

        font-size: 64px;

    }


    .lux-cta-arrow {

        width: 190px;

        height: 190px;

    }

}


/* =====================================================
   MAX WIDTH 768px
===================================================== */

@media (max-width: 768px) {

    .luxury-footer {

        padding:
            70px 20px 30px;

    }


    .lux-brand-area {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .lux-logo img {

        width: 260px;

    }


    .lux-description {

        font-size: 14px;

        line-height: 1.8;

    }


    .lux-brand-right h2 {

        font-size: 43px;

        letter-spacing: -1px;

    }


    .lux-line {

        margin:
            60px 0 45px;

    }


    .lux-navigation {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .lux-nav-block > a:not(.lux-contact) {

        font-size: 14px;

    }


    .lux-cta {

        display: block;

        min-height: auto;

        margin-top: 65px;

        padding:
            35px 25px;

    }


    .lux-cta-bg-text {

        font-size: 80px;

        bottom: -15px;

    }


    .lux-cta-content h3 {

        font-size: 38px;

    }


    .lux-cta-arrow {

        width: 110px;

        height: 110px;

        margin-top: 35px;

    }


    .lux-cta-arrow b {

        font-size: 22px;

    }


    .lux-bottom {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .lux-tagline {

        text-align: left;

    }


    .lux-legal {

        justify-content: flex-start;

        gap: 18px;

    }


    .lux-top {

        right: 20px;

        bottom: 20px;

        width: 42px;

        height: 42px;

    }

}





/*==========================------> 
    Footer Section css End
<------=========================*/