/* =====================================================
   DHARTI AANJANEYA | PREMIUM CURTAIN NAVBAR
   CSS START
===================================================== */

:root {
    --dha-maroon-50: #F9EEEE;
    --dha-maroon-100: #EFD5D3;
    --dha-maroon-200: #DDAAA7;
    --dha-maroon-300: #C9827F;
    --dha-maroon-400: #B75F5D;
    --dha-maroon-500: #963A39;
    --dha-maroon-600: #690F10;
    --dha-maroon-700: #580D0E;
    --dha-maroon-800: #470B0C;
    --dha-maroon-900: #350809;
    --dha-maroon-950: #240506;

    --dha-gold-300: #DCC18D;
    --dha-gold-400: #CBA45F;
    --dha-gold-500: #B58A45;
    --dha-gold-600: #9B7135;

    --dha-ivory: #FFFEFA;
    --dha-cream: #F4F0E9;
    --dha-text: #352E29;

    --dha-nav-height: 94px;
}

/* MAIN NAVBAR */

.dha-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--dha-nav-height);
    z-index: 9999;

    background: rgba(255, 254, 250, 0.96);
    border-bottom: 1px solid rgba(181, 138, 69, 0.25);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transform: translateY(-110%);
    opacity: 0;

    transition:
        transform 0.75s cubic-bezier(.22, 1, .36, 1),
        opacity 0.5s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

/* CURTAIN REVEAL */

.dha-nav.dha-nav-visible {
    transform: translateY(0);
    opacity: 1;
}

.dha-nav.dha-nav-scrolled {
    background: rgba(255, 254, 250, 0.97);
    box-shadow: 0 8px 35px rgba(53, 8, 9, 0.09);
    border-bottom-color: rgba(181, 138, 69, 0.35);
}

/* NAVBAR INNER */

.dha-nav-inner {
    width: min(1380px, calc(100% - 70px));
    height: 100%;
    margin: auto;

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

/* LOGO */

.dha-nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 10001;
}

.dha-nav-logo img {
    display: block;
    width: 175px;
    height: 68px;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
}

.dha-nav-logo:hover img {
    transform: scale(1.04);
}

@media(max-width: 480px) {
    .dha-nav-logo img {
        width: 130px;
        height: 55px;
    }
}
.dha-nav-logo:hover img {
    transform: scale(1.045);
    filter: drop-shadow(0 5px 8px rgba(105, 15, 16, 0.12));
}

/* DESKTOP NAVIGATION */

.dha-nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 2.5vw, 39px);
    margin-left: auto;
}

.dha-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;

    padding: 12px 0;

    color: var(--dha-maroon-900);
    text-decoration: none;

    font-family: "DM Sans", sans-serif;
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: 0.1px;

    transition: color 0.35s ease;
}

/* GOLD UNDERLINE */

.dha-nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--dha-gold-600),
        var(--dha-gold-300)
    );

    transform: scaleX(0);
    transform-origin: right;

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

.dha-nav-link::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: var(--dha-maroon-600);

    opacity: 0;
    transform: translateX(-50%) scale(0);

    transition: all 0.35s ease;
}

.dha-nav-link:hover,
.dha-nav-link.dha-active {
    color: var(--dha-maroon-500);
}

.dha-nav-link:hover::before,
.dha-nav-link.dha-active::before {
    transform: scaleX(1);
    transform-origin: left;
}

.dha-nav-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* CONTACT BUTTON */

.dha-nav-contact {
    position: relative;
    overflow: hidden;

    min-width: 136px;
    height: 48px;
    padding: 0 10px 0 22px;

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

    background: var(--dha-gold-400);
    color: var(--dha-maroon-950);

    border: 1px solid var(--dha-gold-400);
    border-radius: 5px;

    text-decoration: none;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 750;

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

    z-index: 1;
}

.dha-nav-contact::before {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--dha-maroon-600);

    transform: scaleX(0);
    transform-origin: right;

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

.dha-nav-contact:hover {
    color: white;
    border-color: var(--dha-maroon-600);
    box-shadow: 0 8px 22px rgba(105, 15, 16, 0.2);
    transform: translateY(-3px);
}

.dha-nav-contact:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.dha-contact-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    color: var(--dha-maroon-600);
    background: var(--dha-ivory);

    border-radius: 3px;

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

.dha-nav-contact:hover .dha-contact-icon {
    transform: rotate(45deg);
    background: var(--dha-gold-300);
    color: var(--dha-maroon-950);
}

/* MOBILE TOGGLE */

.dha-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;

    border: 1px solid var(--dha-gold-300);
    border-radius: 4px;
    background: var(--dha-cream);

    cursor: pointer;
    position: relative;
    z-index: 10002;
}

.dha-menu-toggle span {
    position: absolute;
    left: 11px;

    width: 20px;
    height: 2px;

    background: var(--dha-maroon-600);

    transition:
        transform 0.4s ease,
        top 0.4s ease,
        width 0.4s ease;
}

.dha-menu-toggle span:first-child {
    top: 16px;
}

.dha-menu-toggle span:last-child {
    top: 24px;
    width: 14px;
}

.dha-menu-toggle:hover span:last-child {
    width: 20px;
}

/* TOGGLE ACTIVE */

.dha-menu-toggle.dha-toggle-active span:first-child {
    top: 20px;
    transform: rotate(45deg);
}

.dha-menu-toggle.dha-toggle-active span:last-child {
    top: 20px;
    width: 20px;
    transform: rotate(-45deg);
}

/* MOBILE OVERLAY */

.dha-mobile-overlay {
    display: none;
}

/* =====================================================
   TABLET & MOBILE
===================================================== */

@media (max-width: 991px) {

    :root {
        --dha-nav-height: 82px;
    }

    .dha-nav-inner {
        width: calc(100% - 40px);
        gap: 15px;
    }

    .dha-nav-logo img {
        width: 155px;
        height: 60px;
    }

    .dha-menu-toggle {
        display: block;
    }

    .dha-nav-contact {
        margin-left: auto;
        min-width: 120px;
        height: 44px;
    }

    /* CURTAIN MENU */

    .dha-nav-menu {
        position: fixed;
        top: 0;
        right: 0;

        width: min(420px, 100%);
        height: 100dvh;

        margin: 0;
        padding: 120px 45px 50px;

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

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(220, 193, 141, 0.16),
                transparent 38%
            ),
            var(--dha-ivory);

        border-left: 1px solid rgba(181, 138, 69, 0.25);

        transform: translateY(-105%);
        opacity: 0;
        visibility: hidden;

        transition:
            transform 0.75s cubic-bezier(.77, 0, .18, 1),
            opacity 0.5s ease,
            visibility 0.75s ease;

        z-index: 10000;
        overflow-y: auto;
    }

    .dha-nav-menu.dha-menu-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .dha-nav-menu::before {
        content: "DHARTI AANJANEYA";
        position: absolute;
        top: 55px;
        left: 45px;

        font-family: Georgia, serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 3px;

        color: var(--dha-gold-600);
    }

    .dha-nav-link {
        width: 100%;
        padding: 18px 0;

        font-family: Georgia, serif;
        font-size: 25px;
        font-weight: 500;

        border-bottom: 1px solid rgba(181, 138, 69, 0.2);

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

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

    .dha-nav-menu.dha-menu-open .dha-nav-link {
        opacity: 1;
        transform: translateY(0);
    }

    .dha-nav-menu.dha-menu-open .dha-nav-link:nth-child(1) {
        transition-delay: .15s;
    }

    .dha-nav-menu.dha-menu-open .dha-nav-link:nth-child(2) {
        transition-delay: .22s;
    }

    .dha-nav-menu.dha-menu-open .dha-nav-link:nth-child(3) {
        transition-delay: .29s;
    }

    .dha-nav-menu.dha-menu-open .dha-nav-link:nth-child(4) {
        transition-delay: .36s;
    }

    .dha-nav-menu.dha-menu-open .dha-nav-link:nth-child(5) {
        transition-delay: .43s;
    }

    .dha-nav-menu.dha-menu-open .dha-nav-link:nth-child(6) {
        transition-delay: .50s;
    }

    /* OVERLAY */

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

        display: block;

        background: rgba(36, 5, 6, 0.5);
        backdrop-filter: blur(5px);

        opacity: 0;
        visibility: hidden;

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

        z-index: 9998;
    }

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

    body.dha-menu-lock {
        overflow: hidden;
    }
}

/* SMALL MOBILE */

@media (max-width: 480px) {

    :root {
        --dha-nav-height: 74px;
    }

    .dha-nav-inner {
        width: calc(100% - 28px);
    }

    .dha-nav-logo img {
        width: 130px;
        height: 54px;
    }

    .dha-nav-contact {
        min-width: 0;
        height: 40px;
        padding: 0 7px 0 12px;
        gap: 8px;
        font-size: 11px;
    }

    .dha-contact-icon {
        width: 26px;
        height: 26px;
    }

    .dha-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .dha-menu-toggle span {
        left: 9px;
    }

    .dha-nav-menu {
        padding: 110px 28px 40px;
    }

    .dha-nav-menu::before {
        left: 28px;
    }

    .dha-nav-link {
        font-size: 23px;
    }
}

/* REDUCE MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .dha-nav,
    .dha-nav *,
    .dha-mobile-overlay {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =====================================================
   DHARTI AANJANEYA | NAVBAR CSS END
===================================================== */

/* ============================================================
   DHARTI AANJANEYA | LUXURY REAL ESTATE HERO
   PREMIUM ARCHITECTURAL CURTAIN DESIGN
   CSS START
============================================================ */

:root {
    --dha-brand-50: #F9EEEE;
    --dha-brand-100: #EFD5D3;
    --dha-brand-200: #DDAAA7;
    --dha-brand-300: #C9827F;
    --dha-brand-400: #B75F5D;
    --dha-brand-500: #963A39;
    --dha-brand-600: #690F10;
    --dha-brand-700: #580D0E;
    --dha-brand-800: #470B0C;
    --dha-brand-900: #350809;
    --dha-brand-950: #240506;

    --dha-gold-300: #DCC18D;
    --dha-gold-400: #CBA45F;
    --dha-gold-500: #B58A45;
    --dha-gold-600: #9B7135;

    --dha-ivory: #FFFEFA;
    --dha-cream: #F4F0E9;
    --dha-text: #352E29;

    --dha-navy: #101E40;
}

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


/* ===============================================
   DHARTI GROUP - ARCHITECTURAL PORTAL HERO
   Dark Burgundy / Gold / 3D / Pure CSS
=============================================== */

body {
    margin: 0;
}

.da-hero,
.da-hero * {
    box-sizing: border-box;
}

.da-hero {
    --da-gold: #d8b078;
    --da-gold-light: #efcd94;
    --da-cream: #f8f1e8;
    --da-wine: #240d16;

    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: 790px;
    color: var(--da-cream);

    font-family: Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            ellipse at 80% 44%,
            rgba(114,35,48,.4),
            transparent 46%
        ),
        radial-gradient(
            ellipse at 10% 85%,
            rgba(115,66,36,.19),
            transparent 44%
        ),
        linear-gradient(
            115deg,
            #120e11 3%,
            #251217 52%,
            #360e19 100%
        );
}

/* Subtle architectural background grid */

.da-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(226,174,109,.034) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(226,174,109,.034) 1px,
            transparent 1px
        );

    background-size: 95px 95px;

    mask-image: linear-gradient(
        90deg,
        transparent,
        black 37%,
        black 90%,
        transparent
    );
}

.da-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #87603c 23%,
        #ecc88d 52%,
        #804037 78%,
        transparent
    );
}

/* ===============================================
   ANIMATED BACKGROUND ATMOSPHERE
=============================================== */

.da-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.da-glow {
    position: absolute;
    display: block;

    width: 640px;
    height: 640px;
    border-radius: 50%;
    filter: blur(34px);

    animation: da-glow 9s ease-in-out infinite alternate;
}

.da-glow-left {
    left: -375px;
    bottom: -360px;

    background: radial-gradient(
        circle,
        rgba(182,111,64,.18),
        transparent 66%
    );
}

.da-glow-right {
    right: -280px;
    top: -150px;

    background: radial-gradient(
        circle,
        rgba(188,53,74,.17),
        transparent 70%
    );

    animation-delay: -4s;
}

/* Floating glowing dots */

.da-spark {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: #e8bc7c;

    box-shadow:
        0 0 13px 3px rgba(239,176,100,.4);

    animation:
        da-twinkle 4.8s ease-in-out infinite,
        da-drift 10s ease-in-out infinite alternate;
}

.da-spark-a {
    left: 7%;
    top: 22%;
    animation-delay: 0s, -2s;
}

.da-spark-b {
    left: 22%;
    top: 80%;
    animation-delay: -2.6s, -1s;
}

.da-spark-c {
    left: 43%;
    top: 13%;
    animation-delay: -3s, -7s;
}

.da-spark-d {
    left: 59%;
    top: 74%;
    animation-delay: -1.4s, -4s;
}

.da-spark-e {
    left: 84%;
    top: 14%;
    animation-delay: -3.8s, -3s;
}

.da-spark-f {
    left: 94%;
    top: 67%;
    animation-delay: -1.8s, -5s;
}

.da-spark-g {
    left: 69%;
    top: 91%;
    animation-delay: -.9s, -6s;
}

.da-spark-h {
    left: 35%;
    top: 49%;
    animation-delay: -4.1s, -8s;
}

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

.da-shell {
    position: relative;

    width: min(1470px, 100%);
    min-height: 790px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    padding:
        29px
        clamp(28px, 5.4vw, 88px)
        23px;
}

.da-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.da-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    letter-spacing: .19em;
    white-space: nowrap;
}

.da-brand-symbol {
    font-size: 27px;
    line-height: 1;
    color: var(--da-gold);
    animation: da-symbol 19s linear infinite;
}

.da-brand strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
}

.da-brand small {
    font-size: 10px;
    color: #c0a799;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.da-brand-separator {
    height: 19px;
    width: 1px;

    background: rgba(224,171,107,.38);
    margin: 0 6px;
}

.da-top-location {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #c7b0a3;
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 700;
}

.da-location-dot {
    height: 7px;
    width: 7px;

    background: var(--da-gold);
    border-radius: 50%;

    animation: da-pulse 3s infinite;
}

/* ===============================================
   TWO-COLUMN HERO LAYOUT
=============================================== */

.da-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, .94fr);

    align-items: center;
    gap: clamp(16px, 3.5vw, 55px);

    flex: 1;
}

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

.da-copy {
    position: relative;
    z-index: 4;

    padding: 58px 0 44px;

    animation: da-reveal .95s both;
}

.da-kicker {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 29px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .23em;

    color: var(--da-gold-light);
}

.da-kicker-rule {
    width: 40px;
    height: 1px;
    background: var(--da-gold);
}

/* Premium serif heading */

.da-heading {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;

    font-size: clamp(64px, 6.15vw, 96px);
    line-height: 1.015;

    letter-spacing: -.058em;
    text-wrap: balance;
}

.da-heading span {
    display: block;
    color: #f6eee2;
}

.da-heading em {
    display: block;
    margin-top: 6px;

    font-weight: 400;
    color: var(--da-gold-light);

    letter-spacing: -.065em;
    white-space: nowrap;
}

.da-description {
    max-width: 520px;
    margin: 29px 0 0;

    color: #d0bdb4;

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

/* Property advantages */

.da-traits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px 22px;

    max-width: 540px;

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

    border-top:
        1px solid rgba(219,171,114,.25);
}

.da-traits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #f0dfcf;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.da-traits i {
    font-size: 11px;
    font-style: normal;
    color: var(--da-gold);
}

/* ===============================================
   CALL-TO-ACTION BUTTONS
=============================================== */

.da-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 34px;
}

.da-actions a {
    min-height: 56px;

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

    padding: 0 24px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;

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

.da-actions a:hover {
    transform: translateY(-4px);
}

/* Premium gold button */

.da-primary {
    position: relative;
    overflow: hidden;

    color: #291619;

    background: linear-gradient(
        105deg,
        #f0cb8d,
        #c29156
    );

    border: 1px solid #eac284;

    box-shadow:
        0 15px 35px rgba(213,154,80,.16);
}

.da-primary::before {
    content: "";
    position: absolute;

    top: -80%;
    bottom: -80%;
    left: -40%;

    width: 32%;

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

    transform: rotate(25deg);

    animation: da-shimmer 6.5s ease-in-out infinite;
}

.da-primary span,
.da-primary b {
    position: relative;
    z-index: 1;
}

.da-primary b {
    font-size: 21px;
    font-weight: 400;
}

.da-primary:hover {
    color: #291619;

    box-shadow:
        0 17px 42px rgba(221,158,88,.34);
}

/* Transparent secondary CTA */

.da-secondary {
    color: #f9eadd;

    border:
        1px solid rgba(217,167,111,.5);

    background: rgba(255,255,255,.015);
}

.da-secondary b {
    color: var(--da-gold);
    font-size: 20px;
    font-weight: 400;
}

.da-secondary:hover {
    color: #fff;
    border-color: #eac284;
    background: rgba(220,168,105,.08);
}

/* Signature statement */

.da-whisper {
    margin: 37px 0 0;

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

    font-size: 9px;
    color: #af978f;
    font-weight: 700;
    letter-spacing: .18em;
}

.da-whisper span {
    width: 33px;
    height: 1px;
    background: #b48c5d;
}

/* ===============================================
   RIGHT SIDE - ARCHITECTURAL PORTAL
=============================================== */

.da-art {
    position: relative;
    isolation: isolate;

    min-width: 0;
    height: 640px;

    perspective: 1200px;
    transform-style: preserve-3d;
}

.da-art-halo {
    position: absolute;

    width: 630px;
    height: 625px;

    left: 50%;
    top: 51%;

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

    border-radius: 50%;

    background: radial-gradient(
        ellipse,
        rgba(212,127,92,.2),
        rgba(125,44,49,.11) 43%,
        transparent 67%
    );

    filter: blur(20px);

    animation:
        da-halo 7s ease-in-out infinite alternate;
}

/* ===============================================
   ROTATING ORBIT RINGS
=============================================== */

.da-orbit {
    position: absolute;

    left: 50%;
    top: 49%;

    border:
        1px solid rgba(235,178,102,.21);

    border-radius: 50%;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

.da-orbit-outer {
    width: 570px;
    height: 570px;

    border-style: dashed;
    border-color: rgba(228,173,109,.16);

    animation: da-orbit 70s linear infinite;
}

.da-orbit-inner {
    width: 480px;
    height: 560px;

    border-color: rgba(236,185,119,.23);

    animation:
        da-orbit-reverse 51s linear infinite;
}

/* Dots attached to rings */

.da-orbit span {
    position: absolute;

    top: 8%;
    left: 15%;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #f0c68b;

    box-shadow:
        0 0 0 7px rgba(232,175,105,.08),
        0 0 25px #e7bb81;
}

.da-orbit-inner span {
    top: auto;
    left: auto;
    right: 12%;
    bottom: 17%;

    width: 5px;
    height: 5px;
}

/* Animated dotted circle */

.da-dotted-ring {
    position: absolute;

    width: 520px;
    height: 540px;

    left: 50%;
    top: 51%;

    border-radius: 50%;

    background: repeating-conic-gradient(
        from 0deg,
        rgba(226,178,116,.3) 0deg 1deg,
        transparent 1deg 8deg
    );

    mask-image: radial-gradient(
        transparent 67%,
        black 67.4%,
        black 67.8%,
        transparent 68.2%
    );

    opacity: .75;

    animation: da-orbit 100s linear infinite;
}

/* ===============================================
   OUTER GOLD ARCH OUTLINE
=============================================== */

.da-back-arch {
    position: absolute;

    width: 390px;
    height: 528px;

    left: 50%;
    top: 49%;

    border:
        1px solid rgba(225,176,109,.27);

    border-radius:
        49% 49% 10% 10% /
        35% 35% 8% 8%;

    box-shadow:
        0 0 35px rgba(238,169,98,.05);

    animation: da-back-float 9s ease-in-out infinite;
}

/* ===============================================
   MAIN 3D CURVED PHOTO FRAME
=============================================== */

.da-portal-depth {
    position: absolute;
    z-index: 2;
    inset: 0;

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

    transform-style: preserve-3d;

    animation:
        da-portal-hover 9s ease-in-out infinite;
}

.da-portal-frame {
    position: relative;

    width: min(408px, 86%);
    height: 548px;

    padding: 3px;

    border-radius:
        49% 49% 10% 10% /
        35% 35% 8% 8%;

    background: linear-gradient(
        140deg,
        #fff3ca 0%,
        #a97646 21%,
        #ebbc7f 49%,
        #76472e 79%,
        #e2b37a 100%
    );

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14),
        0 26px 75px rgba(0,0,0,.49),
        0 0 68px rgba(216,139,78,.09);
}

/* Photo clipping boundary */

.da-portal-inside {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
    isolation: isolate;

    border-radius: inherit;

    background:
        radial-gradient(
            ellipse at 50% 54%,
            rgba(210,142,105,.55),
            transparent 62%
        ),
        linear-gradient(
            180deg,
            #4d2529 0%,
            #6d3632 47%,
            #2b151c 82%,
            #170f16 100%
        );
}

/* ===============================================
   BACKGROUND IMAGE INSIDE THE CURVED FRAME

   Place the uploaded photo at:
   public/assets/images/consultation.png

   The image will not extend beyond the gold border.
=============================================== */

.da-portrait {
    position: absolute;
    z-index: 1;

    left: 0;
    right: 0;
    top: 10%;
    bottom: -3%;

    background-image:
        url("../images/logos/consultation.png");

    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;

    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 59%,
        rgba(0,0,0,.97) 72%,
        transparent 97%
    );

    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 59%,
        rgba(0,0,0,.97) 72%,
        transparent 97%
    );

    animation:
        da-portrait-breathe 8s ease-in-out infinite alternate;
}

/* Animated light passes over the photo */

.da-portrait-light {
    position: absolute;
    z-index: 2;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        112deg,
        transparent 29%,
        rgba(255,234,198,.14) 47%,
        transparent 61%
    );

    mix-blend-mode: screen;

    transform: translateX(-100%);

    animation:
        da-light-pass 10s ease-in-out infinite;
}

/* Dark gradient beneath the photo */

.da-portal-inside::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(20,8,17,.32),
        transparent 28%,
        transparent 70%,
        rgba(20,9,16,.9)
    );
}

/* Photo text */

.da-portrait-topline {
    position: absolute;
    z-index: 3;

    top: 77px;
    left: 0;
    right: 0;

    text-align: center;

    font-size: 9px;
    color: #f7ddb0;
    letter-spacing: .21em;
    font-weight: 700;

    text-shadow:
        0 2px 14px rgba(0,0,0,.6);
}

.da-gold-star {
    font-size: 13px;
    color: #f4d094;
    margin-right: 6px;
}

.da-portrait-caption {
    position: absolute;
    z-index: 3;

    bottom: 30px;
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;

    text-align: center;
}

.da-portrait-caption span {
    font-size: 9px;
    letter-spacing: .28em;
    font-weight: 700;
    color: #e5b87c;
}

.da-portrait-caption strong {
    font:
        normal 30px/1.1
        Georgia, "Times New Roman", serif;

    color: #fff4e7;
    letter-spacing: -.025em;
}

.da-portrait-caption i {
    display: block;

    width: 44px;
    height: 1px;

    margin-top: 5px;

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

/* ===============================================
   FLOATING CIRCULAR STAMP
=============================================== */

.da-seal {
    position: absolute;
    z-index: 4;

    right: -22px;
    bottom: 94px;

    width: 115px;
    height: 115px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;

    text-align: center;

    border:
        1px solid rgba(242,195,131,.72);

    background: radial-gradient(
        circle at 30% 20%,
        #593132,
        #29161f 76%
    );

    box-shadow:
        0 0 0 8px rgba(235,170,94,.055),
        0 18px 33px rgba(0,0,0,.4);

    animation:
        da-seal-float 6.5s ease-in-out infinite;
}

.da-seal span {
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: .17em;

    color: #f3dcbd;
    font-weight: 700;
}

.da-seal strong {
    font: normal 26px Georgia, serif;
    color: var(--da-gold);
}

/* Vertical architectural label */

.da-side-note {
    position: absolute;
    z-index: 3;

    top: 43%;
    right: -43px;

    writing-mode: vertical-rl;

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

    color: #c29b74;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .25em;
}

.da-side-note i {
    width: 1px;
    height: 54px;

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

/* Additional gold sparkle */

.da-art-star {
    position: absolute;
    z-index: 1;

    color: #e0b87e;

    text-shadow:
        0 0 17px #dbac70;

    animation: da-twinkle 4.5s infinite;
}

.da-art-star-one {
    top: 14%;
    left: 11%;
    font-size: 24px;
    animation-delay: -2s;
}

.da-art-star-two {
    bottom: 14%;
    left: 8%;
    font-size: 13px;
    animation-delay: -3.5s;
}

/* ===============================================
   BOTTOM SIGNATURE
=============================================== */

.da-footerline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding-top: 18px;

    border-top:
        1px solid rgba(225,171,102,.2);

    font-size: 9px;
    letter-spacing: .19em;
    font-weight: 700;
    color: #c3a99c;
}

.da-footer-claim {
    display: flex;
    align-items: center;
    gap: 11px;
}

.da-footer-diamond {
    color: var(--da-gold);
    font-size: 13px;
}

.da-scroll {
    display: flex;
    align-items: center;
    gap: 15px;

    color: #dbbb94;
    text-decoration: none;
}

.da-scroll-line {
    display: inline-flex;
    align-items: center;

    width: 50px;
    height: 1px;

    background: rgba(225,177,116,.3);

    position: relative;
    overflow: hidden;
}

.da-scroll-line i {
    position: absolute;
    left: -15px;

    height: 1px;
    width: 16px;

    background: #fce1b4;

    animation: da-scroll 2.4s linear infinite;
}

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

@keyframes da-reveal {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes da-glow {
    from {
        opacity: .58;
        transform: scale(.9);
    }
    to {
        opacity: 1;
        transform: scale(1.11);
    }
}

@keyframes da-twinkle {
    0%, 100% {
        opacity: .12;
        transform: scale(.65);
    }
    50% {
        opacity: .85;
        transform: scale(1.2);
    }
}

@keyframes da-drift {
    from { translate: 0 7px; }
    to { translate: 9px -11px; }
}

@keyframes da-symbol {
    to { transform: rotate(360deg); }
}

@keyframes da-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 5px rgba(213,161,95,.09);
    }
    50% {
        box-shadow:
            0 0 0 12px rgba(213,161,95,0);
    }
}

@keyframes da-shimmer {
    0%, 58%, 100% {
        left: -48%;
    }
    73% {
        left: 135%;
    }
}

@keyframes da-halo {
    from {
        opacity: .5;
        scale: .96;
    }
    to {
        opacity: 1;
        scale: 1.06;
    }
}

@keyframes da-orbit {
    from {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes da-orbit-reverse {
    from {
        transform:
            translate(-50%, -50%) rotate(-18deg);
    }
    to {
        transform:
            translate(-50%, -50%) rotate(-378deg);
    }
}

@keyframes da-back-float {
    0%, 100% {
        transform:
            translate(calc(-50% + 19px), calc(-50% - 6px))
            rotate(6deg);
    }
    50% {
        transform:
            translate(calc(-50% + 26px), calc(-50% - 16px))
            rotate(8deg);
    }
}

/* Main 3D motion */

@keyframes da-portal-hover {
    0%, 100% {
        transform:
            rotateY(-8deg)
            rotateX(1deg)
            translateY(0);
    }
    50% {
        transform:
            rotateY(3deg)
            rotateX(-1deg)
            translateY(-12px);
    }
}

/* Gentle internal photo movement */

@keyframes da-portrait-breathe {
    from {
        transform: scale(1);
    }
    to {
        transform:
            scale(1.04)
            translateY(-4px);
    }
}

@keyframes da-light-pass {
    0%, 56%, 100% {
        transform: translateX(-130%);
    }
    70% {
        transform: translateX(130%);
    }
}

@keyframes da-seal-float {
    0%, 100% {
        transform:
            translateY(0) rotate(-7deg);
    }
    50% {
        transform:
            translateY(-13px) rotate(2deg);
    }
}

@keyframes da-scroll {
    to { left: 55px; }
}

/* ===============================================
   LAPTOP RESPONSIVENESS
=============================================== */

@media (max-width: 1240px) {

    .da-shell {
        padding-inline: clamp(30px, 4vw, 55px);
    }

    .da-heading {
        font-size: clamp(62px, 6vw, 82px);
    }

    .da-art {
        height: 600px;
    }

    .da-portal-frame {
        width: 365px;
        height: 515px;
    }

    .da-back-arch {
        width: 349px;
        height: 492px;
    }

    .da-orbit-outer {
        width: 520px;
        height: 520px;
    }

    .da-orbit-inner {
        width: 440px;
        height: 515px;
    }

    .da-dotted-ring {
        width: 480px;
        height: 500px;
    }

    .da-side-note {
        right: -18px;
    }

    .da-seal {
        right: -12px;
    }
}

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

@media (max-width: 960px) {

    .da-shell {
        min-height: auto;
        padding: 28px 30px 25px;
    }

    .da-top-location {
        font-size: 9px;
    }

    .da-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .da-copy {
        text-align: center;
        padding: 75px 0 15px;
    }

    .da-kicker,
    .da-traits,
    .da-actions,
    .da-whisper {
        justify-content: center;
    }

    .da-heading {
        font-size: clamp(60px, 9vw, 88px);
    }

    .da-description,
    .da-traits {
        margin-inline: auto;
    }

    .da-art {
        height: 585px;
        width: min(600px, 100%);
        margin: 0 auto;
    }

    .da-seal { right: 1%; }
    .da-side-note { right: 0; }
}

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

@media (max-width: 600px) {

    .da-shell {
        padding: 23px 19px 22px;
    }

    .da-topbar {
        justify-content: center;
    }

    .da-brand { gap: 9px; }

    .da-brand strong { font-size: 11px; }

    .da-brand small { font-size: 9px; }

    .da-top-location { display: none; }

    .da-brand-separator { margin-inline: 2px; }

    .da-copy {
        padding: 58px 0 5px;
    }

    .da-kicker {
        gap: 9px;
        font-size: 8px;
        letter-spacing: .17em;
        margin-bottom: 23px;
    }

    .da-kicker-rule { width: 22px; }

    .da-heading {
        font-size: clamp(48px, 11vw, 68px);
        line-height: 1.06;
    }

    .da-heading em {
        white-space: normal;
    }

    .da-description {
        font-size: 13px;
        line-height: 1.75;
        margin-top: 24px;
    }

    .da-traits {
        gap: 10px 16px;
        padding-top: 18px;
        margin-top: 23px;
    }

    .da-traits span { font-size: 10px; }

    .da-actions {
        margin-top: 28px;
        gap: 10px;
    }

    .da-actions a {
        min-height: 49px;
        font-size: 11px;
        gap: 13px;
        padding: 0 16px;
    }

    .da-actions a b { font-size: 17px; }

    .da-whisper {
        margin-top: 27px;
        font-size: 8px;
        letter-spacing: .11em;
    }

    .da-whisper span { width: 19px; }

    .da-art {
        height: 485px;
        width: 100%;
    }

    .da-portal-frame {
        width: min(300px, 76%);
        height: 407px;
        padding: 2px;
    }

    .da-back-arch {
        width: 285px;
        height: 391px;
    }

    .da-portrait-topline {
        top: 54px;
        font-size: 7px;
    }

    .da-portrait-caption {
        bottom: 21px;
        gap: 7px;
    }

    .da-portrait-caption span { font-size: 8px; }

    .da-portrait-caption strong { font-size: 24px; }

    .da-orbit-outer {
        width: 410px;
        height: 420px;
    }

    .da-orbit-inner {
        width: 340px;
        height: 404px;
    }

    .da-dotted-ring {
        width: 368px;
        height: 400px;
    }

    .da-seal {
        width: 88px;
        height: 88px;
        right: -7px;
        bottom: 73px;
    }

    .da-seal span { font-size: 7px; }

    .da-seal strong { font-size: 20px; }

    .da-side-note {
        right: -10px;
        top: 41%;
        font-size: 7px;
    }

    .da-art-star-one { left: 0; }

    .da-footerline {
        gap: 13px;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        font-size: 8px;
        letter-spacing: .12em;
    }

    .da-scroll { font-size: 8px; }
}

/* Small mobile devices */

@media (max-width: 380px) {

    .da-heading { font-size: 47px; }

    .da-portal-frame {
        width: 255px;
        height: 363px;
    }

    .da-back-arch {
        width: 246px;
        height: 349px;
    }

    .da-art { height: 420px; }

    .da-seal {
        right: -12px;
        width: 79px;
        height: 79px;
    }

    .da-orbit-outer {
        width: 350px;
        height: 380px;
    }

    .da-orbit-inner {
        width: 300px;
        height: 350px;
    }

    .da-dotted-ring {
        width: 325px;
        height: 360px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .da-hero *,
    .da-hero *::before,
    .da-hero *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* ============================================================
   DHARTI AANJANEYA | LUXURY HERO CSS END
============================================================ */

/* ==========================================================
   DHARTI GROUP | PREMIUM 3D LEGACY SECTION
   CSS START
========================================================== */

:root {
    --dgl-maroon-50: #F9EEEE;
    --dgl-maroon-100: #EFD5D3;
    --dgl-maroon-200: #DDAAA7;
    --dgl-maroon-300: #C9827F;
    --dgl-maroon-400: #B75F5D;
    --dgl-maroon-500: #963A39;
    --dgl-maroon-600: #690F10;
    --dgl-maroon-700: #580D0E;
    --dgl-maroon-800: #470B0C;
    --dgl-maroon-900: #350809;
    --dgl-maroon-950: #240506;

    --dgl-gold-300: #DCC18D;
    --dgl-gold-400: #CBA45F;
    --dgl-gold-500: #B58A45;
    --dgl-gold-600: #9B7135;

    --dgl-neutral-50: #FFFEFA;
    --dgl-neutral-100: #F4F0E9;
    --dgl-neutral-200: #E8DFD2;
    --dgl-neutral-300: #D8CCBD;
    --dgl-neutral-500: #827568;
    --dgl-neutral-700: #4B4139;
    --dgl-neutral-900: #211C19;
}


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

.dgl-legacy-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 120px 0 115px;

    background: var(--dgl-neutral-50);

    perspective: 1400px;
}


/* BACKGROUND GRADIENT */

.dgl-bg-gradient {
    position: absolute;
    inset: 0;
    z-index: -5;

    background:
        radial-gradient(
            ellipse at 100% 50%,
            rgba(105, 15, 16, .085),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 0% 100%,
            rgba(181, 138, 69, .12),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #FFFEFA,
            #F4F0E9 55%,
            #FFFEFA
        );

    animation: dglBackgroundMovement 15s ease-in-out infinite alternate;
}

@keyframes dglBackgroundMovement {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}


/* ==========================================================
   DOT MATRIX
========================================================== */

.dgl-dot-matrix {
    position: absolute;
    top: 0;
    right: 0;

    width: 47%;
    height: 100%;

    z-index: -3;
    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(105, 15, 16, .25) 1px,
            transparent 1px
        );

    background-size: 17px 17px;

    mask-image: linear-gradient(
        to left,
        rgba(0,0,0,.8),
        transparent 90%
    );

    animation: dglDotsMove 22s linear infinite;
}

@keyframes dglDotsMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 34px 34px;
    }
}


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

.dgl-background-orbit {
    position: absolute;

    border: 1px solid rgba(181, 138, 69, .22);
    border-radius: 50%;

    pointer-events: none;
    z-index: -2;
}

.dgl-orbit-a {
    width: 430px;
    height: 430px;

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

    animation: dglOrbitRotate 45s linear infinite;
}

.dgl-orbit-b {
    width: 570px;
    height: 570px;

    right: -260px;
    bottom: -310px;

    border-style: dashed;

    animation: dglOrbitRotate 65s linear infinite reverse;
}

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


/* ==========================================================
   FLOATING GOLD PARTICLES
========================================================== */

.dgl-particle {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--dgl-gold-500);

    box-shadow:
        0 0 8px rgba(181, 138, 69, .6),
        0 0 20px rgba(181, 138, 69, .3);

    pointer-events: none;
    z-index: -1;

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

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

.dgl-particle-2 {
    top: 32%;
    left: 52%;
    animation-delay: -2s;
}

.dgl-particle-3 {
    top: 72%;
    left: 8%;
    animation-delay: -4s;
}

.dgl-particle-4 {
    top: 18%;
    right: 15%;
    animation-delay: -1s;
}

.dgl-particle-5 {
    bottom: 15%;
    right: 35%;
    animation-delay: -3s;
}

.dgl-particle-6 {
    bottom: 43%;
    right: 7%;
    animation-delay: -5s;
}

@keyframes dglParticleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(.7);
        opacity: .3;
    }

    50% {
        transform: translate3d(12px, -28px, 0) scale(1.5);
        opacity: 1;
    }
}


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

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

    width: min(1320px, calc(100% - 100px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: .92fr 1.08fr;

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


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

.dgl-content {
    position: relative;
    z-index: 3;

    animation: dglContentReveal 1.2s .2s both cubic-bezier(.22, 1, .36, 1);
}

@keyframes dglContentReveal {
    from {
        opacity: 0;
        transform: translate3d(-45px, 30px, 0);
        filter: blur(7px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}


/* SECTION LABEL */

.dgl-section-label {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 35px;

    color: var(--dgl-gold-600);

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

.dgl-label-line {
    width: 34px;
    height: 1px;

    background: var(--dgl-gold-500);
}

.dgl-label-star {
    font-size: 14px;

    animation: dglStarSpin 8s linear infinite;
}

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


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

.dgl-heading-small {
    display: block;

    margin-bottom: 10px;

    color: var(--dgl-maroon-500);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
}

.dgl-main-title {
    margin: 0;

    color: var(--dgl-maroon-950);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(65px, 7vw, 100px);

    font-weight: 400;
    line-height: .95;

    letter-spacing: -5px;
}

.dgl-main-title span {
    display: block;

    color: var(--dgl-maroon-600);

    font-style: italic;
    font-weight: 400;
}


/* TITLE DECORATION */

.dgl-title-decoration {
    width: 170px;

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

    margin: 26px 0 27px;

    color: var(--dgl-gold-500);
}

.dgl-title-decoration span {
    flex: 1;
    height: 1px;

    background: var(--dgl-gold-500);
}

.dgl-title-decoration i {
    font-style: normal;
    font-size: 15px;

    animation: dglStarSpin 9s linear infinite;
}


/* SUBTITLE */

.dgl-subtitle {
    max-width: 430px;

    margin: 0;

    color: var(--dgl-neutral-900);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(29px, 3.1vw, 41px);

    font-weight: 400;
    line-height: 1.25;
}

.dgl-subtitle span {
    display: block;

    color: var(--dgl-gold-600);
    font-style: italic;
}


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

.dgl-description-wrap {
    display: flex;
    gap: 19px;

    margin-top: 28px;
    max-width: 510px;
}

.dgl-description-line {
    flex-shrink: 0;

    width: 2px;

    background: linear-gradient(
        to bottom,
        var(--dgl-gold-500),
        var(--dgl-maroon-500),
        transparent
    );
}

.dgl-description {
    margin: 0;

    color: var(--dgl-neutral-700);

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 2.05;
}


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

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

    gap: 14px;

    margin-top: 35px;
}

.dgl-highlight-card {
    position: relative;
    overflow: hidden;

    min-height: 95px;

    padding: 19px 15px;

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

    background: rgba(255, 254, 250, .78);

    border: 1px solid rgba(181, 138, 69, .35);

    box-shadow: 0 8px 25px rgba(36, 5, 6, .045);

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

.dgl-highlight-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        110deg,
        transparent,
        rgba(181, 138, 69, .15),
        transparent
    );

    transform: translateX(-110%);
    transition: transform .7s ease;
}

.dgl-highlight-card:hover {
    transform: translateY(-8px) rotateX(5deg);

    background: var(--dgl-maroon-950);

    border-color: var(--dgl-gold-500);

    box-shadow: 0 18px 35px rgba(36, 5, 6, .16);
}

.dgl-highlight-card:hover::before {
    transform: translateX(110%);
}

.dgl-highlight-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: var(--dgl-gold-600);

    background: var(--dgl-neutral-100);

    border: 1px solid var(--dgl-gold-300);
    border-radius: 50%;

    font-size: 17px;

    transition: transform .5s ease;
}

.dgl-highlight-card:hover .dgl-highlight-icon {
    transform: rotateY(180deg);

    background: var(--dgl-gold-500);
    color: var(--dgl-maroon-950);
}

.dgl-highlight-info strong {
    display: block;

    color: var(--dgl-maroon-700);

    font-family: Georgia, serif;
    font-size: 29px;
    font-weight: 500;
    line-height: 1;
}

.dgl-highlight-info span {
    display: block;

    margin-top: 6px;

    color: var(--dgl-neutral-500);

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

.dgl-highlight-card:hover .dgl-highlight-info strong,
.dgl-highlight-card:hover .dgl-highlight-info span {
    color: var(--dgl-neutral-50);
}

.dgl-highlight-corner {
    position: absolute;
    right: 12px;
    top: 10px;

    color: var(--dgl-gold-500);
    font-size: 12px;

    transition: transform .4s ease;
}

.dgl-highlight-card:hover .dgl-highlight-corner {
    transform: rotate(90deg) scale(1.4);
}


/* ==========================================================
   LOCATION STRIP
========================================================== */

.dgl-location-strip {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 27px;
    padding: 16px 17px;

    border-top: 1px solid var(--dgl-neutral-200);
    border-bottom: 1px solid var(--dgl-neutral-200);

    transition: background .4s ease;
}

.dgl-location-strip:hover {
    background: rgba(181, 138, 69, .08);
}

.dgl-location-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: var(--dgl-neutral-50);

    background: var(--dgl-maroon-600);

    border-radius: 50%;

    font-size: 13px;
}

.dgl-location-strip small,
.dgl-location-strip strong {
    display: block;
}

.dgl-location-strip small {
    margin-bottom: 5px;

    color: var(--dgl-gold-600);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.dgl-location-strip strong {
    color: var(--dgl-maroon-900);

    font-size: 11px;
    font-weight: 750;
}

.dgl-location-arrow {
    margin-left: auto;

    color: var(--dgl-gold-600);
    font-size: 20px;

    transition: transform .35s ease;
}

.dgl-location-strip:hover .dgl-location-arrow {
    transform: translate(4px, -4px);
}


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

.dgl-visual {
    position: relative;

    min-width: 0;
    height: 590px;

    perspective: 1400px;

    animation: dglVisualReveal 1.4s .45s both cubic-bezier(.22, 1, .36, 1);
}

@keyframes dglVisualReveal {
    from {
        opacity: 0;
        transform: translate3d(45px, 35px, 0) scale(.94);
        filter: blur(8px);
    }

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




/* ==========================================================
   MAIN IMAGE STAGE
========================================================== */

.dgl-image-stage {
    position: absolute;

    top: 0;
    right: 35px;

    width: 84%;
    height: 91%;

    padding: 12px;

    background: var(--dgl-neutral-50);

    border: 1px solid rgba(181, 138, 69, .55);

    box-shadow:
        0 35px 80px rgba(36, 5, 6, .17),
        0 10px 25px rgba(36, 5, 6, .07);

    transform: rotateY(-6deg) rotateX(2deg);

    transform-style: preserve-3d;

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        box-shadow .8s ease;
}

.dgl-visual:hover .dgl-image-stage {
    transform: rotateY(0deg) rotateX(0deg) translateY(-7px);

    box-shadow:
        0 45px 90px rgba(36, 5, 6, .22),
        0 10px 25px rgba(36, 5, 6, .08);
}


/* IMAGE HEADER AND FOOTER */

.dgl-image-top-bar,
.dgl-image-bottom-bar {
    height: 30px;

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

    color: var(--dgl-maroon-600);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}


/* IMAGE HOLDER */

.dgl-image-holder {
    position: relative;

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

    overflow: hidden;

    background: var(--dgl-maroon-950);
}

.dgl-building-image {
    display: block;

    width: 100%;
    height: 100%;

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

    filter: grayscale(28%) brightness(.73) contrast(1.12) saturate(.82);

    transform: scale(1.03);

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

    transition:
        filter 1s ease,
        transform 1.2s ease;
}

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

    to {
        transform: scale(1.15);
    }
}

.dgl-visual:hover .dgl-building-image {
    filter: grayscale(0%) brightness(.88) contrast(1.06) saturate(1.05);
}


/* CINEMATIC DARK FILTER */

.dgl-image-dark-filter {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(36, 5, 6, .08) 0%,
            rgba(36, 5, 6, .05) 35%,
            rgba(36, 5, 6, .82) 100%
        ),
        linear-gradient(
            110deg,
            rgba(36, 5, 6, .26),
            transparent 65%
        );

    pointer-events: none;
}


/* IMAGE DOTS */

.dgl-image-dots {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(255, 254, 250, .35) .8px,
            transparent .8px
        );

    background-size: 16px 16px;

    opacity: .32;

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

    animation: dglImageDotsMove 20s linear infinite;

    pointer-events: none;
}

@keyframes dglImageDotsMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 32px 32px;
    }
}


/* MOVING GOLD LIGHT */

.dgl-image-light-sweep {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255, 231, 181, .24) 48%,
        transparent 70%
    );

    transform: translateX(-120%);

    animation: dglImageSweep 8s 2s ease-in-out infinite;

    pointer-events: none;
}

@keyframes dglImageSweep {
    0%, 30% {
        transform: translateX(-120%);
    }

    65%, 100% {
        transform: translateX(120%);
    }
}


/* IMAGE CAPTION */

.dgl-image-caption {
    position: absolute;

    left: 30px;
    bottom: 37px;

    z-index: 2;

    color: var(--dgl-neutral-50);
}

.dgl-image-caption span {
    display: block;

    color: var(--dgl-gold-300);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.dgl-image-caption strong {
    display: block;

    margin-top: 9px;

    font-family: Georgia, serif;
    font-size: clamp(25px, 3vw, 37px);
    font-weight: 400;
    letter-spacing: 1px;
}

.dgl-caption-line {
    width: 55px;
    height: 2px;

    margin: 14px 0;

    background: var(--dgl-gold-400);

    transform-origin: left;

    animation: dglCaptionLine 3s ease-in-out infinite alternate;
}

@keyframes dglCaptionLine {
    from {
        transform: scaleX(.5);
    }

    to {
        transform: scaleX(1.4);
    }
}

.dgl-image-caption small {
    color: rgba(255, 254, 250, .8);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}


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

.dgl-floating-years {
    position: absolute;

    top: 105px;
    left: -5px;

    z-index: 5;

    min-width: 180px;

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

    padding: 17px;

    background: var(--dgl-maroon-950);

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

    box-shadow: 0 15px 40px rgba(36, 5, 6, .25);

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

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

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

.dgl-floating-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid var(--dgl-gold-500);
    border-radius: 50%;

    color: var(--dgl-gold-300);

    font-size: 21px;
}

.dgl-floating-years strong,
.dgl-floating-years span {
    display: block;
}

.dgl-floating-years strong {
    color: var(--dgl-neutral-50);

    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
}

.dgl-floating-years span {
    margin-top: 4px;

    color: var(--dgl-gold-300);

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

.dgl-floating-glow {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 60px;
    height: 60px;

    background: radial-gradient(
        circle,
        rgba(181, 138, 69, .25),
        transparent 70%
    );

    pointer-events: none;
}


/* ==========================================================
   FLOATING PROJECT CARD
========================================================== */

.dgl-floating-projects {
    position: absolute;

    right: -20px;
    bottom: 70px;

    z-index: 5;

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

    padding: 16px 21px;

    background: var(--dgl-neutral-50);

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

    box-shadow: 0 18px 40px rgba(36, 5, 6, .14);

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

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

    50% {
        transform: translateY(-15px) rotate(-1deg);
    }
}

.dgl-project-icon {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    background: var(--dgl-neutral-100);

    color: var(--dgl-maroon-600);

    border-radius: 50%;

    font-size: 18px;
}

.dgl-floating-projects strong {
    display: block;

    color: var(--dgl-maroon-700);

    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: 500;
}

.dgl-floating-projects small {
    display: block;

    color: var(--dgl-neutral-500);

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


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

.dgl-vertical-label {
    position: absolute;

    right: -39px;
    top: 38%;

    writing-mode: vertical-rl;

    color: var(--dgl-maroon-500);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
}


/* ==========================================================
   CORNER DECORATIONS
========================================================== */

.dgl-corner-decoration {
    position: absolute;

    width: 60px;
    height: 60px;

    border-color: var(--dgl-gold-500);
    border-style: solid;

    z-index: 4;

    pointer-events: none;
}

.dgl-corner-top {
    top: -20px;
    left: 12%;

    border-width: 1px 0 0 1px;
}

.dgl-corner-bottom {
    right: 10%;
    bottom: -18px;

    border-width: 0 1px 1px 0;
}


/* ==========================================================
   BOTTOM BORDER
========================================================== */

.dgl-section-bottom-line {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--dgl-maroon-600),
        var(--dgl-gold-500),
        var(--dgl-maroon-600)
    );

    background-size: 200% 100%;

    animation: dglBottomLine 6s linear infinite;
}

@keyframes dglBottomLine {
    to {
        background-position: 200% 0;
    }
}


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

@media (max-width: 1100px) {

    .dgl-container {
        width: calc(100% - 65px);
        gap: 45px;
    }

    .dgl-main-title {
        font-size: 75px;
    }

    .dgl-subtitle {
        font-size: 32px;
    }

    .dgl-visual {
        height: 530px;
    }

    .dgl-floating-years {
        left: -15px;
    }

    .dgl-floating-projects {
        right: -12px;
    }

}


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

@media (max-width: 767px) {

    .dgl-legacy-section {
        padding: 85px 0 90px;
    }

    .dgl-container {
        width: calc(100% - 36px);

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .dgl-section-label {
        margin-bottom: 25px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    .dgl-main-title {
        font-size: clamp(65px, 16vw, 85px);
        letter-spacing: -3px;
    }

    .dgl-subtitle {
        font-size: 30px;
    }

    .dgl-description {
        font-size: 12px;
        line-height: 1.95;
    }

    .dgl-highlights {
        gap: 10px;
    }

    .dgl-highlight-card {
        padding: 14px 10px;
        min-height: 85px;
        gap: 9px;
    }

    .dgl-highlight-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .dgl-highlight-info strong {
        font-size: 25px;
    }

    .dgl-highlight-info span {
        font-size: 9px;
    }

    .dgl-location-strip {
        padding: 13px 8px;
    }

    .dgl-location-strip strong {
        font-size: 10px;
    }

    .dgl-visual {
        height: 520px;
        width: 100%;
    }

    .dgl-image-stage {
        width: 86%;
        height: 91%;
        right: 17px;
        padding: 8px;
        transform: none;
    }

    .dgl-image-caption {
        left: 18px;
        bottom: 25px;
    }

    .dgl-image-caption strong {
        font-size: 26px;
    }

    .dgl-floating-years {
        top: 90px;
        left: -5px;
        min-width: 155px;
        padding: 12px;
        gap: 9px;
    }

    .dgl-floating-icon {
        width: 35px;
        height: 35px;
        font-size: 17px;
    }

    .dgl-floating-years strong {
        font-size: 23px;
    }

    .dgl-floating-projects {
        right: -7px;
        bottom: 55px;
        padding: 12px;
        gap: 9px;
    }

    .dgl-floating-projects strong {
        font-size: 23px;
    }

    .dgl-vertical-label {
        right: -10px;
    }


    .dgl-background-orbit {
        opacity: .5;
    }

}


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

@media (max-width: 420px) {

    .dgl-container {
        width: calc(100% - 28px);
    }

    .dgl-main-title {
        font-size: 62px;
    }

    .dgl-subtitle {
        font-size: 27px;
    }

    .dgl-highlights {
        grid-template-columns: 1fr 1fr;
    }

    .dgl-highlight-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .dgl-visual {
        height: 450px;
    }

    .dgl-image-caption strong {
        font-size: 22px;
    }

    .dgl-floating-years {
        left: -7px;
    }

    .dgl-floating-projects {
        right: -5px;
    }

}


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

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

    .dgl-legacy-section *,
    .dgl-legacy-section *::before,
    .dgl-legacy-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

/* ==========================================================
   DHARTI GROUP | PREMIUM 3D LEGACY SECTION CSS END
========================================================== */
/* =========================================================
   DHARTI AANJANEYA | PREMIUM INTRO SECTION
   CSS START
========================================================= */

:root {
    --daa-maroon-50: #F9EEEE;
    --daa-maroon-100: #EFD5D3;
    --daa-maroon-200: #DDAAA7;
    --daa-maroon-300: #C9827F;
    --daa-maroon-400: #B75F5D;
    --daa-maroon-500: #963A39;
    --daa-maroon-600: #690F10;
    --daa-maroon-700: #580D0E;
    --daa-maroon-800: #470B0C;
    --daa-maroon-900: #350809;
    --daa-maroon-950: #240506;

    --daa-gold-300: #DCC18D;
    --daa-gold-400: #CBA45F;
    --daa-gold-500: #B58A45;
    --daa-gold-600: #9B7135;

    --daa-cream: #FFFEFA;
    --daa-cream-dark: #F4F0E9;
    --daa-neutral-200: #E8DFD2;
    --daa-neutral-500: #827568;
    --daa-neutral-700: #4B4139;
    --daa-neutral-900: #211C19;
}


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

.daa-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 115px 0 120px;

    background: var(--daa-cream);

    perspective: 1600px;
}


/* BACKGROUND GLOW */

.daa-bg-glow {
    position: absolute;
    inset: 0;
    z-index: -5;

    background:
        radial-gradient(
            circle at 85% 45%,
            rgba(105, 15, 16, .09),
            transparent 35%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(181, 138, 69, .13),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #FFFEFA,
            #F4F0E9 55%,
            #FFFEFA
        );

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

@keyframes daaBackgroundPulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}


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

.daa-dot-pattern {
    position: absolute;
    top: 0;
    right: 0;

    width: 52%;
    height: 100%;

    z-index: -3;
    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(105, 15, 16, .28) 1px,
            transparent 1.5px
        );

    background-size: 19px 19px;

    mask-image: linear-gradient(
        120deg,
        transparent 0%,
        black 100%
    );

    animation: daaDotMove 25s linear infinite;
}

@keyframes daaDotMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 38px 38px;
    }
}


/* ARCHITECTURAL GRID */

.daa-grid-pattern {
    position: absolute;
    inset: 0;

    z-index: -4;

    background-image:
        linear-gradient(
            rgba(105, 15, 16, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(105, 15, 16, .025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

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

    pointer-events: none;
}


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

.daa-orbit {
    position: absolute;

    border: 1px solid rgba(181, 138, 69, .28);
    border-radius: 50%;

    pointer-events: none;
    z-index: -2;
}

.daa-orbit-one {
    width: 460px;
    height: 460px;

    top: -240px;
    left: -200px;

    animation: daaOrbitRotate 45s linear infinite;
}

.daa-orbit-two {
    width: 570px;
    height: 570px;

    right: -300px;
    bottom: -330px;

    border-style: dashed;

    animation: daaOrbitRotate 65s linear infinite reverse;
}

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


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

.daa-particle {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--daa-gold-500);

    box-shadow:
        0 0 8px rgba(181, 138, 69, .7),
        0 0 18px rgba(181, 138, 69, .4);

    pointer-events: none;

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

.daa-particle-one {
    top: 12%;
    left: 12%;
}

.daa-particle-two {
    top: 25%;
    left: 48%;
    animation-delay: -2s;
}

.daa-particle-three {
    top: 75%;
    left: 7%;
    animation-delay: -4s;
}

.daa-particle-four {
    top: 15%;
    right: 14%;
    animation-delay: -1s;
}

.daa-particle-five {
    top: 62%;
    right: 9%;
    animation-delay: -3s;
}

.daa-particle-six {
    bottom: 10%;
    right: 32%;
    animation-delay: -5s;
}

.daa-particle-seven {
    top: 45%;
    left: 53%;
    animation-delay: -6s;
}

.daa-particle-eight {
    bottom: 25%;
    left: 35%;
    animation-delay: -2.5s;
}

@keyframes daaParticleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(.7);
        opacity: .25;
    }

    50% {
        transform: translate3d(12px, -27px, 0) scale(1.6);
        opacity: 1;
    }
}


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

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

    width: min(1350px, calc(100% - 100px));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr .95fr;

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


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

.daa-content {
    position: relative;
    z-index: 3;

    animation: daaContentReveal 1.2s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes daaContentReveal {
    from {
        opacity: 0;
        transform: translate3d(-55px, 25px, 0);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}


/* EYEBROW */

.daa-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 35px;

    color: var(--daa-gold-600);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

.daa-eyebrow-line {
    width: 38px;
    height: 1px;

    background: var(--daa-gold-500);
}

.daa-eyebrow-star {
    font-size: 14px;

    animation: daaStarRotate 8s linear infinite;
}

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


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

.daa-title-overline {
    display: block;

    margin-bottom: 12px;

    color: var(--daa-maroon-500);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 5px;
}

.daa-title {
    margin: 0;

    color: var(--daa-maroon-950);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 6.5vw, 88px);

    font-weight: 400;
    line-height: .98;

    letter-spacing: -4px;
}

.daa-title span {
    display: block;

    color: var(--daa-maroon-600);

    font-style: italic;
    font-weight: 400;
}


/* DIVIDER */

.daa-title-divider {
    display: flex;
    align-items: center;
    gap: 13px;

    width: 180px;

    margin: 26px 0;
}

.daa-title-divider span {
    flex: 1;

    height: 1px;

    background: var(--daa-gold-500);
}

.daa-title-divider i {
    color: var(--daa-gold-500);

    font-size: 14px;
    font-style: normal;

    animation: daaStarRotate 8s linear infinite;
}


/* SUBTITLE */

.daa-subtitle {
    margin: 0;

    color: var(--daa-neutral-900);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3.3vw, 42px);

    font-weight: 400;
    line-height: 1.3;
}

.daa-subtitle span {
    display: block;

    color: var(--daa-gold-600);

    font-style: italic;
}


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

.daa-description {
    max-width: 590px;

    margin-top: 30px;
    padding-left: 20px;

    border-left: 2px solid var(--daa-gold-500);
}

.daa-description p {
    margin: 0 0 15px;

    color: var(--daa-neutral-700);

    font-size: 12px;
    font-weight: 400;
    line-height: 2;

    transition: color .35s ease;
}

.daa-description p:last-child {
    margin-bottom: 0;
}

.daa-description p:hover {
    color: var(--daa-maroon-700);
}


/* =========================================================
   LOCATION
========================================================= */

.daa-location {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 32px;
    padding: 16px 18px;

    border-top: 1px solid var(--daa-neutral-200);
    border-bottom: 1px solid var(--daa-neutral-200);

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

.daa-location:hover {
    background: rgba(181, 138, 69, .09);
    transform: translateX(5px);
}

.daa-location-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: var(--daa-cream);

    background: var(--daa-maroon-600);

    border-radius: 50%;

    font-size: 16px;
}

.daa-location-text span {
    display: block;

    margin-bottom: 5px;

    color: var(--daa-gold-600);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.daa-location-text strong {
    display: block;

    color: var(--daa-maroon-900);

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

.daa-location-arrow {
    margin-left: auto;

    color: var(--daa-gold-600);

    font-size: 21px;

    transition: transform .35s ease;
}

.daa-location:hover .daa-location-arrow {
    transform: translate(5px, -5px);
}


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

.daa-visual {
    position: relative;

    min-width: 0;
    min-height: 620px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    perspective: 1500px;

    animation: daaVisualReveal 1.3s .25s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes daaVisualReveal {
    from {
        opacity: 0;
        transform: translate3d(35px, 35px, 0);
        filter: blur(7px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}


/* VISUAL HEADING */

.daa-visual-heading {
    position: relative;
    z-index: 3;

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

    margin-bottom: 22px;
    padding: 0 8px;

    color: var(--daa-gold-600);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.daa-visual-number {
    color: var(--daa-maroon-500);
}


/* =========================================================
   CIRCULAR DECORATION
========================================================= */

.daa-circle-decoration {
    position: absolute;

    top: 8%;
    right: 4%;

    width: 190px;
    height: 190px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(181, 138, 69, .55);
    border-radius: 50%;

    animation: daaCircleRotate 25s linear infinite;

    z-index: 0;
}

.daa-circle-decoration::before {
    content: "";

    position: absolute;
    inset: 12px;

    border: 1px dashed rgba(105, 15, 16, .3);
    border-radius: 50%;
}

.daa-circle-inner {
    position: absolute;

    width: 70%;
    height: 70%;

    border: 1px solid rgba(181, 138, 69, .4);
    border-radius: 50%;
}

.daa-circle-center {
    color: rgba(105, 15, 16, .13);

    font-family: Georgia, serif;
    font-size: 90px;
    font-style: italic;
}

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


/* =========================================================
   FLIP CARDS LAYOUT
========================================================= */

.daa-flip-card {
    position: relative;

    width: 100%;
    height: 175px;

    margin-bottom: 15px;

    perspective: 1200px;

    cursor: pointer;
}

.daa-flip-inner {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

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


/* FLIP ON HOVER AND KEYBOARD FOCUS */

.daa-flip-card:hover .daa-flip-inner,
.daa-flip-card:focus-within .daa-flip-inner {
    transform: rotateY(180deg);
}


/* FRONT AND BACK */

.daa-flip-front,
.daa-flip-back {
    position: absolute;
    inset: 0;

    overflow: hidden;

    padding: 20px 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    border: 1px solid rgba(181, 138, 69, .55);

    box-shadow: 0 14px 35px rgba(36, 5, 6, .07);
}


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

.daa-flip-front {
    color: var(--daa-cream);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(181, 138, 69, .24),
            transparent 35%
        ),
        linear-gradient(
            125deg,
            var(--daa-maroon-950),
            var(--daa-maroon-700)
        );

    transform: rotateY(0deg);
}


/* FRONT CARD TEXTURE */

.daa-flip-front::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(255, 254, 250, .3) 1px,
            transparent 1px
        );

    background-size: 17px 17px;

    opacity: .24;

    mask-image: linear-gradient(
        130deg,
        transparent,
        black
    );

    animation: daaCardDots 15s linear infinite;
}

@keyframes daaCardDots {
    to {
        background-position: 34px 34px;
    }
}


/* SHIMMER EFFECT */

.daa-flip-front::after {
    content: "";

    position: absolute;
    top: -100%;
    left: -40%;

    width: 40%;
    height: 300%;

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

    transform: rotate(25deg) translateX(-150%);

    transition: transform 1s ease;
}

.daa-flip-card:hover .daa-flip-front::after {
    transform: rotate(25deg) translateX(600%);
}


/* CARD TOP */

.daa-card-top,
.daa-card-bottom {
    position: relative;
    z-index: 2;

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

.daa-card-top {
    color: var(--daa-gold-300);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.daa-card-top i {
    font-size: 18px;

    transition: transform .4s ease;
}

.daa-flip-card:hover .daa-card-top i {
    transform: rotate(45deg);
}


/* CARD ICON */

.daa-card-icon {
    position: absolute;

    top: 48px;
    right: 65px;

    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    color: var(--daa-gold-300);

    border: 1px solid rgba(220, 193, 141, .55);
    border-radius: 50%;

    font-size: 28px;

    transition:
        transform .6s ease,
        background .6s ease;
}

.daa-flip-card:hover .daa-card-icon {
    transform: rotateY(180deg) scale(1.1);

    background: rgba(181, 138, 69, .17);
}


/* CARD MAIN */

.daa-card-main {
    position: relative;
    z-index: 2;
}

.daa-card-main > span {
    display: block;

    margin-bottom: 7px;

    color: var(--daa-gold-300);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.daa-card-main h3 {
    margin: 0;

    color: var(--daa-cream);

    font-family: Georgia, serif;
    font-size: 29px;
    font-weight: 400;
    line-height: 1.03;
}


/* CARD BOTTOM */

.daa-card-bottom {
    color: rgba(255, 254, 250, .8);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.daa-card-bottom span:last-child {
    color: var(--daa-gold-300);

    font-size: 14px;
}


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

.daa-flip-back {
    align-items: flex-start;
    justify-content: center;

    color: var(--daa-maroon-950);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(181, 138, 69, .22),
            transparent 40%
        ),
        var(--daa-cream-dark);

    transform: rotateY(180deg);

    border-color: var(--daa-gold-500);
}

.daa-flip-back > span {
    position: relative;
    z-index: 2;

    color: var(--daa-gold-600);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.daa-flip-back h3 {
    position: relative;
    z-index: 2;

    margin: 8px 0;

    color: var(--daa-maroon-700);

    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.05;
}

.daa-flip-back p {
    position: relative;
    z-index: 2;

    max-width: 75%;

    margin: 0;

    color: var(--daa-neutral-700);

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

.daa-back-number {
    position: absolute;

    right: 20px;
    bottom: -30px;

    color: rgba(105, 15, 16, .09);

    font-family: Georgia, serif;
    font-size: 110px;
    font-weight: 700;

    pointer-events: none;
}


/* =========================================================
   CARD POSITIONS AND 3D DEPTH
========================================================= */

.daa-card-one {
    z-index: 3;

    transform: translateX(-18px) rotate(-1deg);

    animation: daaCardEntrance 1s .35s both;
}

.daa-card-two {
    z-index: 2;

    transform: translateX(15px) rotate(1deg);

    animation: daaCardEntrance 1s .55s both;
}

.daa-card-three {
    z-index: 1;

    transform: translateX(-8px) rotate(-.5deg);

    animation: daaCardEntrance 1s .75s both;
}

@keyframes daaCardEntrance {
    from {
        opacity: 0;
        translate: 0 40px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}


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

.daa-visual-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-top: 10px;

    color: var(--daa-gold-600);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.daa-footer-line {
    width: 45px;
    height: 1px;

    background: var(--daa-gold-500);
}


/* =========================================================
   BOTTOM BORDER
========================================================= */

.daa-bottom-border {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--daa-maroon-600),
        var(--daa-gold-500),
        var(--daa-maroon-600)
    );

    background-size: 200% 100%;

    animation: daaBorderMove 6s linear infinite;
}

@keyframes daaBorderMove {
    to {
        background-position: 200% 0;
    }
}


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

@media (max-width: 1100px) {

    .daa-container {
        width: calc(100% - 65px);
        gap: 45px;
    }

    .daa-title {
        font-size: 69px;
    }

    .daa-subtitle {
        font-size: 32px;
    }

    .daa-visual {
        min-height: 590px;
    }

    .daa-card-icon {
        right: 35px;
    }

}


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

@media (max-width: 767px) {

    .daa-intro {
        padding: 80px 0 85px;
    }

    .daa-container {
        width: calc(100% - 36px);

        grid-template-columns: 1fr;

        gap: 65px;
    }

    .daa-eyebrow {
        margin-bottom: 25px;

        font-size: 8px;
        letter-spacing: 2px;
    }

    .daa-title {
        font-size: clamp(58px, 14vw, 76px);
        letter-spacing: -3px;
    }

    .daa-title-overline {
        font-size: 9px;
    }

    .daa-subtitle {
        font-size: 30px;
    }

    .daa-description {
        margin-top: 25px;
        padding-left: 15px;
    }

    .daa-description p {
        font-size: 11px;
        line-height: 1.9;
    }

    .daa-visual {
        min-height: auto;
    }

    .daa-visual-heading {
        margin-bottom: 20px;
    }

    .daa-circle-decoration {
        width: 120px;
        height: 120px;

        top: -35px;
        right: -10px;
    }

    .daa-circle-center {
        font-size: 65px;
    }

    .daa-flip-card {
        height: 170px;
        margin-bottom: 13px;
    }

    .daa-flip-front,
    .daa-flip-back {
        padding: 18px;
    }

    .daa-card-icon {
        right: 25px;
        top: 48px;

        width: 55px;
        height: 55px;

        font-size: 22px;
    }

    .daa-card-main h3 {
        font-size: 26px;
    }

    .daa-card-one,
    .daa-card-two,
    .daa-card-three {
        transform: none;
    }

    .daa-visual-footer {
        margin-top: 13px;
        font-size: 7px;
    }

}


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

@media (max-width: 420px) {

    .daa-container {
        width: calc(100% - 28px);
    }

    .daa-title {
        font-size: 57px;
    }

    .daa-subtitle {
        font-size: 27px;
    }

    .daa-flip-card {
        height: 165px;
    }

    .daa-card-icon {
        width: 48px;
        height: 48px;

        right: 18px;
    }

    .daa-card-main h3 {
        font-size: 24px;
    }

    .daa-flip-back p {
        max-width: 85%;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .daa-flip-card:active .daa-flip-inner {
        transform: rotateY(180deg);
    }

}


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

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

    .daa-intro *,
    .daa-intro *::before,
    .daa-intro *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

/* =========================================================
   DHARTI AANJANEYA | PREMIUM INTRO CSS END
========================================================= */
/* =========================================================
   DHARTI AANJANEYA | PREMIUM HERO CSS START
========================================================= */

:root {
    --dah-maroon: #690F10;
    --dah-maroon-dark: #240506;
    --dah-maroon-mid: #470B0C;

    --dah-gold: #B58A45;
    --dah-gold-light: #E8D2A5;

    --dah-cream: #FFFEFA;
    --dah-neutral: #F4F0E9;
    --dah-text: #352E29;
}


/* MAIN */

.dah-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 100vh;
    padding: 100px 0 110px;

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

    perspective: 1400px;
}


/* BACKGROUND IMAGE */

.dah-hero-image {
    position: absolute;
    inset: -2%;

    z-index: -5;

    background-image: url("../images/dharti-aanjaneya-hero.jpg");
    background-size: cover;
    background-position: center 48%;
    background-repeat: no-repeat;

    transform: scale(1.08);

    animation: dahImageReveal 2s ease-out forwards,
               dahImageFloat 24s ease-in-out 2s infinite alternate;
}

@keyframes dahImageReveal {
    from {
        transform: scale(1.2);
        filter: blur(8px);
    }

    to {
        transform: scale(1.08);
        filter: blur(0);
    }
}

@keyframes dahImageFloat {
    from {
        transform: scale(1.08) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.15) translate3d(-1%, -1%, 0);
    }
}


/* DARK MAROON FILTER */

.dah-image-overlay {
    position: absolute;
    inset: 0;
    z-index: -4;

    background:
        linear-gradient(
            90deg,
            rgba(36, 5, 6, .94) 0%,
            rgba(36, 5, 6, .86) 42%,
            rgba(36, 5, 6, .72) 100%
        ),
        linear-gradient(
            180deg,
            rgba(36, 5, 6, .35),
            rgba(36, 5, 6, .8)
        );
}


/* ANIMATED GRID */

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

    z-index: -3;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(232, 210, 165, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 210, 165, .045) 1px, transparent 1px);

    background-size: 65px 65px;

    mask-image: linear-gradient(
        90deg,
        transparent,
        black 50%,
        transparent
    );

    animation: dahGridMove 30s linear infinite;
}

@keyframes dahGridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 65px 65px;
    }
}


/* DOT FIELD */

.dah-dot-field {
    position: absolute;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    background-image: radial-gradient(
        rgba(232, 210, 165, .42) 1px,
        transparent 1.5px
    );

    background-size: 25px 25px;

    opacity: .22;

    mask-image: radial-gradient(
        ellipse at 80% 45%,
        black,
        transparent 70%
    );

    animation: dahDotFlow 20s linear infinite;
}

@keyframes dahDotFlow {
    to {
        background-position: 50px 50px;
    }
}


/* PARTICLES */

.dah-particle {
    position: absolute;
    z-index: -1;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--dah-gold-light);

    box-shadow: 0 0 15px var(--dah-gold);

    pointer-events: none;

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

.dah-particle-1 { top: 12%; left: 10%; }
.dah-particle-2 { top: 30%; left: 48%; animation-delay: -2s; }
.dah-particle-3 { top: 65%; left: 25%; animation-delay: -4s; }
.dah-particle-4 { top: 18%; right: 15%; animation-delay: -1s; }
.dah-particle-5 { bottom: 20%; right: 10%; animation-delay: -3s; }
.dah-particle-6 { bottom: 12%; left: 55%; animation-delay: -5s; }

@keyframes dahParticleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(.6);
        opacity: .25;
    }

    50% {
        transform: translate(15px, -35px) scale(1.7);
        opacity: 1;
    }
}


/* CONTAINER */

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

    width: min(1320px, calc(100% - 80px));
    margin: auto;

    display: grid;
    grid-template-columns: 1.25fr .75fr;

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


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

.dah-content {
    min-width: 0;
}

.dah-top-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 30px;

    color: var(--dah-gold-light);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.dah-label-line {
    width: 38px;
    height: 1px;

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


/* TITLE */

.dah-heading-small {
    display: block;

    margin-bottom: 12px;

    color: var(--dah-gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 5px;
}

.dah-title {
    margin: 0;

    color: var(--dah-cream);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(55px, 6vw, 83px);

    font-weight: 400;
    letter-spacing: -3px;
    line-height: .95;
}

.dah-title span {
    display: block;

    color: var(--dah-gold-light);

    font-style: italic;
}


/* TITLE DECORATION */

.dah-title-decoration {
    width: 190px;

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

    margin: 25px 0;
}

.dah-title-decoration span {
    flex: 1;
    height: 1px;

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

.dah-title-decoration i {
    color: var(--dah-gold-light);
    font-size: 15px;

    animation: dahStarSpin 10s linear infinite;
}

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


/* LOCATION */

.dah-project-location {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--dah-gold-light);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.dah-project-location i {
    font-size: 16px;
}


/* INTRO */

.dah-intro {
    max-width: 660px;
    margin: 35px 0 30px;
}

.dah-intro h2 {
    margin: 0 0 12px;

    color: var(--dah-cream);

    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
}

.dah-intro h2 span {
    display: block;

    color: var(--dah-gold-light);
    font-style: italic;
}

.dah-intro p {
    margin: 0;

    color: rgba(255, 254, 250, .82);

    font-size: 12px;
    line-height: 1.9;
}


/* SECTION HEADING */

.dah-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 12px;
}

.dah-heading-icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    color: var(--dah-gold-light);

    border: 1px solid rgba(181, 138, 69, .65);
    border-radius: 50%;
}

.dah-section-heading h3 {
    margin: 0;

    color: var(--dah-gold-light);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.dah-heading-rule {
    flex: 1;
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(181, 138, 69, .8),
        transparent
    );
}


/* DETAILS */

.dah-details {
    padding: 19px 0;

    border-top: 1px solid rgba(232, 210, 165, .25);
}

.dah-details-intro {
    margin: 0 0 12px 43px;

    color: var(--dah-cream);

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

.dah-detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 20px;
}

.dah-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: rgba(255, 254, 250, .86);

    font-size: 10px;
    line-height: 1.65;

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

.dah-detail-item:hover {
    color: var(--dah-gold-light);
    transform: translateX(4px);
}

.dah-detail-item i {
    flex-shrink: 0;

    margin-top: 2px;

    color: var(--dah-gold);
}


/* =========================================================
   CONFIGURATION
========================================================= */

.dah-configurations {
    margin: 20px 0;

    padding: 18px;

    border: 1px solid rgba(181, 138, 69, .45);

    background: rgba(36, 5, 6, .36);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dah-config-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}

.dah-config-heading > span {
    color: var(--dah-gold);

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

.dah-config-heading h3 {
    margin: 0;

    color: var(--dah-cream);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.dah-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.dah-config-card {
    position: relative;
    overflow: hidden;

    padding: 17px;

    border: 1px solid rgba(232, 210, 165, .22);

    background: rgba(255, 254, 250, .055);

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

.dah-config-card:hover {
    transform: translateY(-7px);

    border-color: var(--dah-gold);

    background: rgba(181, 138, 69, .14);
}

.dah-config-featured {
    border-color: rgba(181, 138, 69, .65);
}

.dah-config-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--dah-gold-light);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.dah-config-top i {
    font-size: 19px;
}

.dah-config-card h4 {
    margin: 10px 0;

    color: var(--dah-cream);

    font-family: Georgia, serif;
    font-size: 29px;
    font-weight: 400;
}

.dah-config-area {
    display: flex;
    align-items: baseline;
    gap: 7px;

    color: rgba(255, 254, 250, .75);
}

.dah-config-area strong {
    color: var(--dah-gold-light);
    font-size: 17px;
}

.dah-config-area span {
    font-size: 9px;
}

.dah-config-price {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 13px;
    padding-top: 12px;

    border-top: 1px solid rgba(232, 210, 165, .2);
}

.dah-config-price span {
    color: rgba(255, 254, 250, .6);

    font-size: 9px;
}

.dah-config-price strong {
    color: var(--dah-gold-light);
    font-size: 16px;
}


/* =========================================================
   AMENITIES
========================================================= */

.dah-amenities {
    padding: 16px 0;

    border-top: 1px solid rgba(232, 210, 165, .25);
}

.dah-amenities p {
    margin: 0;

    color: rgba(255, 254, 250, .8);

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


/* PROJECT HIGHLIGHTS */

.dah-progress {
    margin-top: 12px;
    padding-top: 17px;

    border-top: 1px solid rgba(232, 210, 165, .25);
}

.dah-progress-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 13px;
}

.dah-progress-heading i {
    color: var(--dah-gold-light);
    font-size: 18px;
}

.dah-progress-heading h3 {
    margin: 0;

    color: var(--dah-cream);

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

.dah-progress-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
}

.dah-progress-list span {
    display: flex;
    align-items: center;
    gap: 7px;

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

    font-size: 10px;
}

.dah-progress-list i {
    color: var(--dah-gold-light);
}


/* CTA */

.dah-content-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 28px;
}

.dah-primary-btn {
    position: relative;
    overflow: hidden;

    min-width: 175px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 15px 19px;

    color: var(--dah-maroon-dark);

    background: var(--dah-gold-light);

    text-decoration: none;

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

    transition: .4s ease;
}

.dah-primary-btn::before {
    content: "";

    position: absolute;
    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

    background: rgba(255, 255, 255, .4);

    transform: skewX(-25deg);

    transition: left .6s ease;
}

.dah-primary-btn:hover::before {
    left: 150%;
}

.dah-primary-btn:hover {
    color: var(--dah-cream);
    background: var(--dah-maroon-600);

    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);

    transform: translateY(-4px);
}

.dah-primary-btn i {
    font-size: 17px;
}

.dah-action-note {
    color: rgba(255, 254, 250, .7);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* =========================================================
   RIGHT ENQUIRY FORM
========================================================= */

.dah-form-side {
    position: relative;
    z-index: 4;

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

    justify-self: end;

    perspective: 1000px;

    animation: dahFormEntrance 1.2s .35s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes dahFormEntrance {
    from {
        opacity: 0;
        transform: translate3d(60px, 35px, 0) rotateY(-8deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateY(0);
    }
}


/* FORM DECORATION */

.dah-form-decoration {
    position: absolute;
    inset: -14px;

    border: 1px solid rgba(181, 138, 69, .65);

    transform: rotate(3deg);

    transition: transform .5s ease;
}

.dah-form-side:hover .dah-form-decoration {
    transform: rotate(0deg);
}


/* FORM CARD */

.dah-form-card {
    position: relative;
    z-index: 2;

    padding: 35px 30px 27px;

    color: var(--dah-text);

    background: var(--dah-cream);

    border: 1px solid rgba(255, 255, 255, .65);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .3),
        0 5px 20px rgba(0, 0, 0, .12);

    transition: transform .5s ease;
}

.dah-form-side:hover .dah-form-card {
    transform: translateY(-5px);
}


/* FORM HEADER */

.dah-form-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
}

.dah-form-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    color: var(--dah-gold-light);

    background: var(--dah-maroon-600, #690F10);

    border: 4px solid var(--dah-cream-dark);
    border-radius: 50%;

    font-size: 21px;

    box-shadow: 0 0 0 1px var(--dah-gold);
}

.dah-form-top > span {
    color: var(--dah-gold-600, #9B7135);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.dah-form-card > h2 {
    margin: 0;

    color: var(--dah-maroon-dark);

    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.25;

    text-align: center;
}

.dah-form-card > h2 span {
    display: block;

    color: var(--dah-maroon-600, #690F10);

    font-style: italic;
}

.dah-form-description {
    margin: 12px 0 25px;

    color: var(--dah-neutral-700, #4B4139);

    font-size: 11px;
    line-height: 1.7;

    text-align: center;
}


/* INPUT GROUP */

.dah-input-group {
    margin-bottom: 17px;
}

.dah-input-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--dah-maroon-800, #470B0C);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}

.dah-input-wrap {
    position: relative;
}

.dah-input-wrap > i {
    position: absolute;

    top: 50%;
    left: 15px;

    transform: translateY(-50%);

    color: var(--dah-gold-600, #9B7135);

    font-size: 15px;

    transition: color .3s ease;
}

.dah-input-wrap input {
    width: 100%;
    height: 49px;

    padding: 0 15px 0 43px;

    color: var(--dah-maroon-dark);

    background: var(--dah-neutral);

    border: 1px solid transparent;
    border-radius: 2px;

    outline: none;

    font-family: inherit;
    font-size: 11px;

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.dah-input-wrap input::placeholder {
    color: var(--dah-neutral-500, #827568);
}

.dah-input-wrap input:focus {
    background: white;

    border-color: var(--dah-gold);

    box-shadow: 0 0 0 3px rgba(181, 138, 69, .12);
}

.dah-input-wrap:focus-within > i {
    color: var(--dah-maroon-600, #690F10);
}


/* SUBMIT BUTTON */

.dah-submit-btn {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 51px;

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

    padding: 0 18px;

    margin-top: 23px;

    color: var(--dah-cream);

    background: var(--dah-maroon-600, #690F10);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition: .4s ease;
}

.dah-submit-btn::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        110deg,
        transparent,
        rgba(232, 210, 165, .3),
        transparent
    );

    transform: translateX(-120%);

    transition: transform .7s ease;
}

.dah-submit-btn:hover::before {
    transform: translateX(120%);
}

.dah-submit-btn:hover {
    background: var(--dah-maroon-dark);
    box-shadow: 0 10px 25px rgba(105, 15, 16, .25);

    transform: translateY(-3px);
}

.dah-submit-btn i {
    font-size: 18px;

    transition: transform .3s ease;
}

.dah-submit-btn:hover i {
    transform: translate(4px, -4px);
}


/* FORM SECURITY */

.dah-form-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 19px;

    color: var(--dah-neutral-500, #827568);

    font-size: 9px;
}

.dah-form-security i {
    color: var(--dah-gold-600, #9B7135);
}


/* FORM BOTTOM */

.dah-form-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 25px;
}

.dah-form-bottom span {
    width: 50px;
    height: 1px;

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

.dah-form-bottom i {
    color: var(--dah-gold);
}


/* FLOATING LABEL */

.dah-floating-label {
    position: absolute;

    right: -35px;
    bottom: -30px;

    z-index: 3;

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

    padding: 13px 18px;

    color: var(--dah-cream);

    background: var(--dah-maroon-700, #580D0E);

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

    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);

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

.dah-floating-label > i {
    color: var(--dah-gold-light);
    font-size: 22px;
}

.dah-floating-label strong,
.dah-floating-label span {
    display: block;
}

.dah-floating-label strong {
    font-size: 10px;
}

.dah-floating-label span {
    margin-top: 4px;

    color: rgba(255, 254, 250, .7);

    font-size: 8px;
}

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

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


/* SCROLL INDICATOR */

.dah-scroll-indicator {
    position: absolute;

    left: 50%;
    bottom: 23px;

    z-index: 3;

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

    transform: translateX(-50%);

    color: rgba(255, 254, 250, .6);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.dah-scroll-line {
    width: 45px;
    height: 1px;

    background: var(--dah-gold-light);

    animation: dahScrollLine 2s ease-in-out infinite;
}

@keyframes dahScrollLine {
    0%, 100% {
        transform: scaleX(.3);
        transform-origin: left;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left;
    }
}


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

.dah-reveal {
    opacity: 0;

    transform: translateY(30px);

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

.dah-reveal.dah-visible {
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 1100px) {

    .dah-container {
        width: calc(100% - 55px);
        grid-template-columns: 1.1fr .9fr;
        gap: 35px;
    }

    .dah-title {
        font-size: 62px;
    }

    .dah-form-card {
        padding: 28px 22px;
    }

    .dah-detail-list {
        grid-template-columns: 1fr;
    }

    .dah-floating-label {
        right: -15px;
    }
}


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

@media (max-width: 767px) {

    .dah-hero {
        min-height: auto;
        padding: 85px 0 90px;
    }

    .dah-hero-image {
        background-position: 55% center;
    }

    .dah-image-overlay {
        background: linear-gradient(
            180deg,
            rgba(36, 5, 6, .91),
            rgba(36, 5, 6, .87)
        );
    }

    .dah-container {
        width: calc(100% - 34px);

        grid-template-columns: 1fr;

        gap: 65px;
    }

    .dah-top-label {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .dah-title {
        font-size: clamp(52px, 12vw, 72px);
        letter-spacing: -2px;
    }

    .dah-intro h2 {
        font-size: 25px;
    }

    .dah-detail-list {
        grid-template-columns: 1fr;
    }

    .dah-config-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dah-form-side {
        max-width: 430px;
        justify-self: center;
    }

    .dah-form-card {
        padding: 30px 23px;
    }

    .dah-floating-label {
        right: -5px;
        bottom: -38px;
    }

    .dah-scroll-indicator {
        display: none;
    }
}


/* SMALL MOBILE */

@media (max-width: 420px) {

    .dah-container {
        width: calc(100% - 26px);
    }

    .dah-title {
        font-size: 49px;
    }

    .dah-project-location {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .dah-config-grid {
        grid-template-columns: 1fr;
    }

    .dah-form-card {
        padding: 26px 17px;
    }

    .dah-form-card > h2 {
        font-size: 25px;
    }

}


/* REDUCED MOTION */

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

    .dah-hero *,
    .dah-hero *::before,
    .dah-hero *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

/* =========================================================
   DHARTI AANJANEYA | PREMIUM HERO CSS END
========================================================= */
/* =====================================================
   START: DHARTI AANJANEYA ABOUT SECTION STYLES
===================================================== */


/* -----------------------------------------------------
   START: Scoped foundation and brand colours
----------------------------------------------------- */

.dga-about {
    --dga-maroon: #690F10;
    --dga-maroon-dark: #350809;
    --dga-maroon-deep: #240506;

    --dga-gold: #B58A45;
    --dga-gold-light: #E8D2A5;

    --dga-paper: #FFFEFA;
    --dga-ivory: #F4F0E9;
    --dga-line: #E8DFD2;
    --dga-muted: #65594E;
    --dga-ink: #211C19;

    --dga-cut: polygon(
        0 0,
        calc(100% - 52px) 0,
        100% 52px,
        100% 100%,
        52px 100%,
        0 calc(100% - 52px)
    );

    position: relative;
    box-sizing: border-box;
    isolation: isolate;
    overflow: hidden;

    padding: 100px 24px 30px;

    color: var(--dga-ink);

    background:
        radial-gradient(
            ellipse at 90% 28%,
            #F0E1C480,
            transparent 48%
        ),
        linear-gradient(
            120deg,
            var(--dga-paper),
            var(--dga-ivory)
        );

    font: 400 16px/1.65 Arial, Helvetica, sans-serif;
}

.dga-about *,
.dga-about *::before,
.dga-about *::after {
    box-sizing: border-box;
}

.dga-about button,
.dga-about a {
    -webkit-tap-highlight-color: transparent;
}

.dga-about button {
    font: inherit;
}

.dga-about a {
    text-decoration: none;
}

.dga-about button:focus-visible,
.dga-about a:focus-visible {
    outline: 3px solid var(--dga-gold);
    outline-offset: 5px;
}

.dga-sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.dga-shell {
    position: relative;
    width: min(1200px, 100%);
    margin: auto;
}

.dga-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);

    gap: clamp(44px, 7vw, 100px);
    align-items: center;
}

/* END: Scoped foundation */


/* -----------------------------------------------------
   START: Motion control and animated background dots
----------------------------------------------------- */

.dga-motion-control {
    position: absolute;

    top: 26px;
    right: max(24px, calc((100% - 1200px) / 2));
    z-index: 3;

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

    padding: 5px;

    color: var(--dga-muted);
    font-size: 11px;
    cursor: pointer;
}

.dga-motion-control::before {
    content: "";

    width: 13px;
    height: 13px;

    border: 1px solid var(--dga-gold);
    border-radius: 3px;
}

.dga-motion-toggle:checked + .dga-motion-control::before {
    background: var(--dga-maroon);
    box-shadow: inset 0 0 0 2px var(--dga-paper);
}

.dga-motion-toggle:focus-visible + .dga-motion-control {
    outline: 2px solid var(--dga-maroon);
    outline-offset: 3px;
}

.dga-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Subtle decorative dot pattern */

.dga-atmosphere::before {
    content: "";

    position: absolute;
    right: 1%;
    top: 16%;

    width: 260px;
    height: 280px;

    background: radial-gradient(
        circle,
        #B58A4545 1px,
        transparent 1.6px
    );

    background-size: 22px 22px;

    mask-image: radial-gradient(
        ellipse,
        #000,
        transparent 70%
    );
}

/* Individually animated gold dots */

.dga-dot {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: var(--dga-gold);

    box-shadow: 0 0 0 5px #B58A4512;

    animation: dga-dot-drift 6s ease-in-out infinite;
}

.dga-dot:nth-child(1) {
    left: 5%;
    top: 19%;
    animation-delay: -1s;
}

.dga-dot:nth-child(2) {
    left: 46%;
    top: 9%;
    animation-delay: -3s;
}

.dga-dot:nth-child(3) {
    left: 94%;
    top: 58%;
    animation-delay: -2s;
}

.dga-dot:nth-child(4) {
    left: 55%;
    top: 86%;
    animation-delay: -4s;
}

.dga-dot:nth-child(5) {
    left: 8%;
    top: 82%;
    animation-delay: -5s;
}

/* END: Motion control and animated background dots */


/* -----------------------------------------------------
   START: Editorial about content
----------------------------------------------------- */

.dga-copy {
    min-width: 0;
    animation: dga-reveal .8s ease both;
}

.dga-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 25px;

    color: var(--dga-maroon);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
}

.dga-eyebrow > span {
    color: var(--dga-gold);
    font-size: 20px;
}

.dga-heading {
    margin: 0;
    font-weight: 400;
}

.dga-welcome {
    display: block;
    margin-bottom: 13px;

    color: var(--dga-muted);
    font-size: 15px;
    letter-spacing: .05em;
}

.dga-name {
    display: block;

    color: var(--dga-maroon);

    font:
        400
        clamp(40px, 4.35vw, 65px)/1.04
        Georgia, "Times New Roman", serif;

    letter-spacing: -.045em;
}

.dga-address {
    display: block;

    max-width: 440px;
    margin-top: 20px;

    color: var(--dga-muted);

    font: 600 11px/1.8 Arial, Helvetica, sans-serif;
    letter-spacing: .14em;
}

.dga-subtitle {
    display: block;
    margin-top: 16px;

    color: #765322;

    font:
        italic 400
        clamp(23px, 2.3vw, 31px)/1.3
        Georgia, serif;

    letter-spacing: -.02em;
}

.dga-intro {
    max-width: 430px;
    margin: 23px 0 24px;

    color: var(--dga-muted);

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

.dga-preview-list {
    list-style: none;

    padding: 22px 0 0;
    margin: 0;

    border-top: 1px solid var(--dga-line);
}

.dga-preview-list li {
    position: relative;

    padding-left: 22px;
    margin: 0 0 12px;

    color: #4B4139;

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

.dga-preview-list li::before {
    content: "";

    position: absolute;
    left: 2px;
    top: .6em;

    width: 6px;
    height: 6px;

    background: var(--dga-gold);
    transform: rotate(45deg);
}

/* END: Editorial about content */


/* -----------------------------------------------------
   START: Project highlights button and brochure link
----------------------------------------------------- */

.dga-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 28px;
}

.dga-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    min-height: 54px;
    padding: 14px 22px;

    border: 1px solid var(--dga-maroon);
    border-radius: 3px;

    background: var(--dga-maroon);
    color: var(--dga-paper);

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

    cursor: pointer;

    box-shadow: 0 12px 26px #690F1020;

    transition:
        transform .25s ease,
        background .25s ease;
}

.dga-primary > span {
    position: relative;
    z-index: 1;
}

.dga-primary > span:last-child {
    color: var(--dga-gold-light);
    font-size: 21px;
}

.dga-primary::before {
    content: "";

    position: absolute;
    inset: -50% 0;
    width: 40%;

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

    transform: translateX(-250%) skewX(-20deg);

    animation: dga-sheen 8s ease-in-out infinite;
}

.dga-primary:hover {
    background: var(--dga-maroon-dark);
    transform: translateY(-3px);
}

.dga-brochure {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 44px;
    padding: 4px 0;

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

    color: var(--dga-maroon);

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

    transition: color .2s ease;
}

.dga-brochure:hover {
    color: #765322;
}

.dga-brochure span {
    font-size: 19px;
}

/* END: Project highlights button and brochure link */


/* -----------------------------------------------------
   START: Layered architectural image
----------------------------------------------------- */

.dga-figure {
    min-width: 0;
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
}

.dga-visual {
    position: relative;
    perspective: 1200px;
}

/* Offset maroon architectural layer */

.dga-backplate {
    position: absolute;
    inset: 20px -19px -20px 20px;

    clip-path: var(--dga-cut);

    background: linear-gradient(
        145deg,
        var(--dga-maroon),
        var(--dga-maroon-dark)
    );
}

.dga-backplate::after {
    content: "";

    position: absolute;
    inset: 13px;

    border: 1px solid #E8D2A560;
    clip-path: var(--dga-cut);
}

/* Rotating decorative orbit */

.dga-orbit {
    position: absolute;

    width: 118%;
    aspect-ratio: 1;

    left: 50%;
    top: 50%;

    border: 1px solid #B58A4533;
    border-radius: 50%;

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

    pointer-events: none;

    animation: dga-orbit 38s linear infinite;
}

.dga-orbit::after {
    content: "";

    position: absolute;

    top: -4px;
    left: calc(50% - 4px);

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--dga-gold);

    box-shadow: 0 0 0 7px #B58A4514;
}

/* Clickable gold image frame */

.dga-picture-button {
    position: relative;
    display: block;

    width: 100%;
    padding: 7px;

    border: 0;
    text-align: left;
    cursor: pointer;

    clip-path: var(--dga-cut);

    background: linear-gradient(
        135deg,
        #E8D2A5,
        #B58A45 60%,
        #765322
    );

    animation: dga-image-float 8s ease-in-out infinite;
}

.dga-photo {
    position: relative;
    display: block;
    overflow: hidden;

    clip-path: var(--dga-cut);
}

.dga-photo img {
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 456 / 562;

    object-fit: contain;
    background: #E8DFD2;

    transition: transform .6s ease;
}

.dga-picture-button:hover {
    animation-play-state: paused;
}

.dga-picture-button:hover img {
    transform: scale(1.015);
}

.dga-picture-button:focus-visible {
    background: var(--dga-maroon);
}

.dga-picture-button:focus-visible .dga-photo {
    outline: 3px solid #FFFEFA;
    outline-offset: -9px;
}

/* Bottom image overlay */

.dga-photo-shade {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        transparent 62%,
        #24050633 77%,
        #240506ED
    );

    pointer-events: none;
}

/* Moving light reflection */

.dga-photo::after {
    content: "";

    position: absolute;
    inset: 0;
    width: 40%;

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

    transform: translateX(-250%) skewX(-20deg);

    animation: dga-sheen 11s ease-in-out infinite;
    pointer-events: none;
}

.dga-photo-caption {
    position: absolute;
    z-index: 1;

    inset: auto 24px 28px 31px;

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

    color: var(--dga-paper);

    font-size: 11px;
    letter-spacing: .13em;
}

.dga-photo-caption small {
    display: block;
    margin-top: 6px;

    color: var(--dga-gold-light);

    font-size: 11px;
    letter-spacing: .025em;
}

.dga-plus {
    display: grid;
    place-items: center;

    flex: 0 0 42px;
    height: 42px;

    border: 1px solid #E8D2A580;
    border-radius: 50%;

    background: #24050640;
    color: var(--dga-gold-light);

    font-size: 28px;
    font-weight: 400;
    line-height: 1;

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

.dga-picture-button:hover .dga-plus {
    transform: rotate(90deg);
    background: var(--dga-maroon);
}

.dga-image-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;

    margin: 39px 0 0;

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

.dga-image-note > span {
    width: 33px;
    height: 1px;
    background: var(--dga-gold);
}

/* END: Layered architectural image */


/* -----------------------------------------------------
   START: Bottom section signature
----------------------------------------------------- */

.dga-signature {
    display: flex;
    align-items: center;
    gap: 24px;

    margin-top: 65px;
    padding-top: 22px;

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

    color: var(--dga-muted);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
}

.dga-signature-rule {
    flex: 1;
}

.dga-signature b {
    color: var(--dga-gold);
    margin-left: 13px;
    font-size: 15px;
}

/* END: Bottom section signature */


/* -----------------------------------------------------
   START: Native project highlights popover
----------------------------------------------------- */

.dga-panel {
    position: fixed;
    inset: 0;
    margin: auto;

    width: min(900px, calc(100% - 36px));

    max-height: 86vh;
    max-height: 86svh;

    padding: clamp(24px, 4vw, 46px);

    overflow-y: auto;
    overscroll-behavior: contain;

    border: 1px solid #B58A45A6;
    border-radius: 16px;

    color: var(--dga-paper);

    background:
        radial-gradient(
            ellipse at 100% 0,
            #690F10,
            transparent 65%
        ),
        var(--dga-maroon-deep);

    box-shadow: 0 35px 120px #120F0D66;
}

.dga-panel:popover-open {
    animation: dga-panel-in .35s ease both;
}

.dga-panel::backdrop {
    background: #120F0D96;
    backdrop-filter: blur(7px);
}

.dga-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dga-panel .dga-eyebrow {
    color: var(--dga-gold-light);
    margin: 0;
    font-size: 10px;
}

.dga-close {
    display: grid;
    place-items: center;

    flex: 0 0 42px;
    height: 42px;
    padding: 0;

    border: 1px solid #E8D2A566;
    border-radius: 50%;

    background: #FFFEFA08;
    color: var(--dga-paper);

    cursor: pointer;
    line-height: 1;

    transition:
        transform .25s ease,
        background .25s ease;
}

.dga-close > span {
    font-size: 27px;
}

.dga-close:hover {
    background: #FFFEFA18;
    transform: rotate(90deg);
}

.dga-panel-title {
    margin: 24px 0 11px;
    color: var(--dga-paper);

    font:
        400
        clamp(33px, 5vw, 53px)/1.15
        Georgia, serif;

    letter-spacing: -.04em;
}

.dga-panel-title em {
    color: var(--dga-gold-light);
    font-weight: 400;
}

.dga-panel-location {
    margin: 0;
    color: #D8CCBD;
    font-size: 13px;
}

/* Original project text */

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

    gap: 0 28px;

    list-style: none;
    margin: 29px 0 0;
    padding: 0;
}

.dga-highlights li {
    position: relative;

    padding: 18px 0 18px 24px;
    border-top: 1px solid #E8D2A52E;

    color: var(--dga-paper);

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

.dga-highlights li::before {
    content: "\2713";

    position: absolute;
    left: 0;
    top: 18px;

    color: var(--dga-gold-light);
    font-weight: 700;
}

.dga-highlights li:last-child {
    grid-column: 1 / -1;
}

.dga-panel-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;

    padding-top: 20px;
    border-top: 1px solid #E8D2A52E;
}

.dga-panel-bottom > span {
    font: italic 23px/1.4 Georgia, serif;
    color: var(--dga-gold-light);
}

.dga-panel .dga-brochure {
    color: var(--dga-paper);
}

.dga-panel .dga-brochure:hover {
    color: var(--dga-gold-light);
}

/* END: Native project highlights popover */


/* -----------------------------------------------------
   START: CSS animations
----------------------------------------------------- */

@keyframes dga-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes dga-dot-drift {
    0%, 100% {
        transform: translateY(0);
        opacity: .3;
    }

    50% {
        transform: translateY(-16px);
        opacity: .85;
    }
}

@keyframes dga-orbit {
    from {
        transform:
            translate(-50%, -50%)
            rotate(-30deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(330deg);
    }
}

@keyframes dga-image-float {
    0%, 100% {
        transform:
            translateY(0)
            rotateY(-2deg);
    }

    50% {
        transform:
            translateY(-8px)
            rotateY(1deg);
    }
}

@keyframes dga-sheen {
    0%, 65% {
        transform:
            translateX(-250%)
            skewX(-20deg);
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    85% {
        transform:
            translateX(380%)
            skewX(-20deg);
        opacity: 1;
    }

    86%, 100% {
        transform:
            translateX(380%)
            skewX(-20deg);
        opacity: 0;
    }
}

@keyframes dga-panel-in {
    from {
        opacity: 0;

        transform:
            translateY(16px)
            scale(.98);
    }

    to {
        opacity: 1;

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

/* END: CSS animations */


/* -----------------------------------------------------
   START: Responsive layouts
----------------------------------------------------- */

@media (max-width: 1000px) {

    .dga-about {
        padding-top: 80px;
    }

    .dga-grid {
        gap: 38px;
    }

    .dga-name {
        font-size: 43px;
    }

    .dga-preview-list li {
        font-size: 12px;
    }

    .dga-actions {
        gap: 13px;
    }

    .dga-primary {
        padding-inline: 17px;
    }

    .dga-photo-caption {
        inset-inline: 23px;
        font-size: 9px;
    }

    .dga-photo-caption small {
        font-size: 10px;
    }
}

@media (max-width: 760px) {

    .dga-grid {
        grid-template-columns: 1fr;
        gap: 49px;
    }

    .dga-name {
        font-size: clamp(42px, 8.4vw, 62px);
    }

    .dga-copy {
        max-width: 570px;
        margin: auto;
        width: 100%;
    }

    .dga-intro {
        max-width: none;
    }

    .dga-preview-list li {
        font-size: 13px;
    }

    .dga-figure {
        width: calc(100% - 22px);
        max-width: 440px;
    }

    .dga-photo-caption {
        font-size: 11px;
    }

    .dga-signature {
        margin-top: 42px;
        gap: 16px;
        font-size: 8px;
    }

    .dga-highlights {
        grid-template-columns: 1fr;
    }

    .dga-highlights li {
        padding-block: 15px;
    }

    .dga-highlights li::before {
        top: 15px;
    }
}

@media (max-width: 420px) {

    .dga-about {
        padding: 76px 20px 24px;
    }

    .dga-name {
        font-size: clamp(35px, 10.2vw, 43px);
    }

    .dga-eyebrow {
        margin-bottom: 20px;
        font-size: 10px;
    }

    .dga-address {
        font-size: 10px;
        letter-spacing: .1em;
    }

    .dga-subtitle {
        font-size: 25px;
    }

    .dga-intro {
        font-size: 14px;
    }

    .dga-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dga-brochure {
        align-self: flex-start;
    }

    .dga-photo-caption {
        inset: auto 15px 22px 25px;
        font-size: 9px;
        gap: 8px;
    }

    .dga-photo-caption small {
        font-size: 9px;
    }

    .dga-plus {
        flex-basis: 34px;
        height: 34px;
        font-size: 23px;
    }

    .dga-signature {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dga-signature-rule {
        display: none;
    }

    .dga-signature > span:last-child {
        width: 100%;
    }

    .dga-panel {
        padding: 23px 20px;
        width: calc(100% - 24px);
    }

    .dga-panel-title {
        font-size: 35px;
    }

    .dga-panel-bottom > span {
        font-size: 21px;
    }
}

/* END: Responsive layouts */


/* -----------------------------------------------------
   START: Motion accessibility
----------------------------------------------------- */

.dga-motion-toggle:checked ~ .dga-shell *,
.dga-motion-toggle:checked ~ .dga-shell *::before,
.dga-motion-toggle:checked ~ .dga-shell *::after,
.dga-motion-toggle:checked ~ .dga-atmosphere * {
    animation-play-state: paused !important;
}

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

    .dga-about *,
    .dga-about *::before,
    .dga-about *::after {
        animation: none !important;
        transition: none !important;
    }

    .dga-orbit {
        transform: translate(-50%, -50%);
    }

    .dga-motion-toggle,
    .dga-motion-control {
        display: none;
    }
}

/* END: Motion accessibility */


/* =====================================================
   END: DHARTI AANJANEYA ABOUT SECTION STYLES
===================================================== */

/* =====================================================
   START: DHARTI AANJANEYA PROPERTY DETAILS CSS
===================================================== */

/* START: Brand variables and section foundation */

.dap-section {
    --maroon: #690F10;
    --maroon-dark: #350809;
    --maroon-deep: #240506;

    --gold: #B58A45;
    --gold-light: #E8D2A5;
    --gold-dark: #765322;

    --ivory: #FFFEFA;
    --paper: #F4F0E9;
    --line: #E8DFD2;
    --muted: #65594E;
    --text: #211C19;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 105px 24px 100px;

    background:
        radial-gradient(
            ellipse at 90% 9%,
            rgba(232,210,165,.27),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #FFFEFA,
            #F4F0E9
        );

    color: var(--text);

    font-family: Arial, Helvetica, sans-serif;
}

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

.dap-section button {
    font: inherit;
}

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

    width: min(1240px, 100%);
    margin: auto;
}

/* END: Brand variables and section foundation */


/* START: Animated background */

.dap-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dap-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(40px);

    animation: dap-glow-animation 9s ease-in-out infinite alternate;
}

.dap-glow-one {
    left: -350px;
    top: 100px;
    background: radial-gradient(
        circle,
        rgba(181,138,69,.1),
        transparent 70%
    );
}

.dap-glow-two {
    right: -350px;
    bottom: 0;
    background: radial-gradient(
        circle,
        rgba(105,15,16,.08),
        transparent 70%
    );
    animation-delay: -4s;
}

.dap-floating-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: var(--gold);
    box-shadow: 0 0 12px rgba(181,138,69,.35);

    animation: dap-dot-animation 6s ease-in-out infinite;
}

.dap-floating-dot:nth-of-type(3) {
    top: 12%; left: 8%;
}

.dap-floating-dot:nth-of-type(4) {
    top: 28%; left: 90%;
    animation-delay: -2s;
}

.dap-floating-dot:nth-of-type(5) {
    top: 50%; left: 5%;
    animation-delay: -3s;
}

.dap-floating-dot:nth-of-type(6) {
    top: 70%; left: 95%;
    animation-delay: -4s;
}

.dap-floating-dot:nth-of-type(7) {
    top: 88%; left: 20%;
    animation-delay: -1s;
}

.dap-floating-dot:nth-of-type(8) {
    top: 15%; left: 55%;
    animation-delay: -5s;
}

/* END: Animated background */


/* START: Section heading */

.dap-header {
    display: grid;
    grid-template-columns: 1fr 170px;
    align-items: center;
    gap: 40px;

    margin-bottom: 35px;
}

.dap-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
}

.dap-eyebrow-line {
    width: 42px;
    height: 1px;
    background: var(--gold);
}

.dap-heading {
    max-width: 850px;
    margin: 20px 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.6vw, 63px);
    font-weight: 400;
    line-height: 1.13;
    letter-spacing: -.045em;

    color: var(--maroon-dark);
}

.dap-heading em {
    display: block;
    margin-top: 7px;

    color: var(--gold);
    font-weight: 400;
}

.dap-lead {
    max-width: 780px;
    margin: 0;

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

/* END: Section heading */


/* START: Animated circular ornament */

.dap-ornament {
    position: relative;
    width: 160px;
    height: 160px;
    margin: auto;
}

.dap-ornament-ring {
    position: absolute;
    inset: 0;

    border: 1px solid rgba(181,138,69,.38);
    border-radius: 50%;

    animation: dap-rotate 30s linear infinite;
}

.dap-ornament-ring::after {
    content: "";
    position: absolute;

    top: 10px;
    left: 25px;
    width: 8px;
    height: 8px;

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

    box-shadow: 0 0 0 7px rgba(181,138,69,.1);
}

.dap-ring-inner {
    inset: 23px;
    border-style: dashed;
    animation-direction: reverse;
}

.dap-ornament-core {
    position: absolute;
    inset: 54px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--maroon);
    color: var(--gold-light);

    box-shadow: 0 15px 35px rgba(105,15,16,.2);
}

.dap-ornament-core span {
    font-size: 27px;
    animation: dap-pulse 4s ease-in-out infinite;
}

.dap-orbit-dot {
    position: absolute;
    right: 8px;
    bottom: 12px;

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

/* END: Animated circular ornament */


/* START: Feature strip */

.dap-feature-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 38px;

    padding: 22px 0;
    margin-bottom: 35px;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.dap-feature-strip span {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--maroon);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.dap-feature-strip i {
    font-size: 16px;
    color: var(--gold);
    font-style: normal;
}

/* END: Feature strip */


/* START: Card grid */

.dap-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;
    align-items: start;
}

.dap-card {
    position: relative;
    min-width: 0;
    overflow: hidden;

    border: 1px solid #E8DFD2;
    border-radius: 16px;

    background: #FFFEFA;

    box-shadow:
        0 12px 35px rgba(53,8,9,.055);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .3s ease;

    animation: dap-card-reveal .7s ease both;
}

.dap-card:nth-child(2) { animation-delay: .08s; }
.dap-card:nth-child(3) { animation-delay: .16s; }
.dap-card:nth-child(4) { animation-delay: .24s; }
.dap-card:nth-child(5) { animation-delay: .32s; }
.dap-card:nth-child(6) { animation-delay: .4s; }
.dap-card:nth-child(7) { animation-delay: .48s; }

.dap-card:hover {
    transform: translateY(-8px);

    border-color: rgba(181,138,69,.6);

    box-shadow:
        0 25px 50px rgba(53,8,9,.13);
}

.dap-card[open] {
    border-color: var(--gold);
    box-shadow: 0 17px 42px rgba(53,8,9,.12);
}

/* Animated gold line */

.dap-card::before {
    content: "";
    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;
    right: 0;
    height: 3px;

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

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .45s ease;
}

.dap-card:hover::before,
.dap-card[open]::before {
    transform: scaleX(1);
}

/* Featured card */

.dap-card-featured {
    grid-column: span 2;

    background:
        radial-gradient(
            ellipse at 95% 10%,
            rgba(181,138,69,.18),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #690F10,
            #350809
        );

    border-color: #765322;
}

.dap-card-featured,
.dap-card-featured .dap-card-title,
.dap-card-featured .dap-card-intro,
.dap-card-featured .dap-card-open {
    color: #FFFEFA;
}

.dap-card-featured .dap-card-label {
    color: #E8D2A5;
}

.dap-card-featured .dap-icon {
    color: #E8D2A5;
    border-color: rgba(232,210,165,.36);
    background: rgba(255,255,255,.06);
}

/* END: Card grid */


/* START: Card content */

.dap-card-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 325px;
    padding: 29px;

    cursor: pointer;
    list-style: none;
}

.dap-card-summary::-webkit-details-marker {
    display: none;
}

.dap-card-summary::marker {
    content: "";
}

.dap-card-summary:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: -5px;
}

.dap-icon {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    border: 1px solid rgba(105,15,16,.16);
    border-radius: 14px;

    background: #F9EEEE;
    color: var(--maroon);

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

    margin-bottom: 23px;

    transition:
        transform .45s ease,
        background .35s ease;
}

.dap-card:hover .dap-icon {
    transform: rotateY(18deg) rotate(-5deg) scale(1.06);
}

.dap-card-label {
    display: block;
    margin-bottom: 10px;

    color: var(--gold-dark);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.dap-card-title {
    display: block;

    margin-bottom: 17px;

    color: var(--maroon-dark);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(23px, 2vw, 29px);
    line-height: 1.25;
    letter-spacing: -.03em;
}

.dap-card-intro {
    display: block;

    margin-bottom: 20px;

    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.dap-card-featured .dap-card-intro {
    color: #E8DFD2;
    max-width: 640px;
}

.dap-card-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;

    margin-top: auto;
    padding-top: 21px;

    border-top: 1px solid rgba(181,138,69,.25);

    color: var(--maroon);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.dap-card-open b {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid var(--gold);
    border-radius: 50%;

    color: var(--gold);
    font-size: 20px;
    font-weight: 400;

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

.dap-card[open] .dap-card-open b {
    transform: rotate(45deg);
    background: var(--gold);
    color: #FFFEFA;
}

/* END: Card content */


/* START: Specifications, prices and highlights */

.dap-specifications {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    margin: 7px 0 22px;
}

.dap-specifications > span {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 135px;
    padding: 14px 18px;

    border: 1px solid rgba(232,210,165,.25);
    border-radius: 9px;

    background: rgba(255,255,255,.06);

    color: #E8D2A5;
    font-size: 17px;
    font-family: Georgia, serif;
}

.dap-specifications b {
    color: #FFFEFA;

    font-size: 10px;
    font-family: Arial, sans-serif;
    letter-spacing: .1em;
}

.dap-price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

    margin: 4px 0 21px;
}

.dap-price-row > span {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dap-price-row small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
}

.dap-price-row strong {
    color: var(--maroon);

    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
}

.dap-mini-highlight {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;

    color: var(--gold-dark);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

.dap-mini-highlight i {
    color: var(--gold);
    font-size: 15px;
    font-style: normal;
}

/* END: Specifications, prices and highlights */


/* START: Expanded card content */

.dap-card-expanded {
    padding: 0 29px 26px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.85;

    animation: dap-expand .3s ease both;
}

.dap-card-expanded p {
    margin: 0 0 11px;
}

.dap-card-expanded p:last-child {
    margin-bottom: 0;
}

.dap-card-expanded strong {
    color: var(--maroon);
}

.dap-card-featured .dap-card-expanded {
    color: #E8DFD2;
}

.dap-card-featured .dap-card-expanded strong {
    color: #E8D2A5;
}

/* END: Expanded card content */


/* START: Bottom CTA */

.dap-bottom-cta {
    position: relative;
    overflow: hidden;

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

    margin-top: 42px;
    padding: 36px 42px;

    border-radius: 17px;
    border: 1px solid #B58A4560;

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(181,138,69,.2),
            transparent 40%
        ),
        linear-gradient(
            110deg,
            #350809,
            #690F10
        );

    box-shadow: 0 24px 45px rgba(53,8,9,.15);
}

.dap-bottom-cta::after {
    content: "✦";

    position: absolute;
    right: 22%;
    top: -65px;

    color: rgba(232,210,165,.07);
    font-size: 240px;

    animation: dap-rotate 45s linear infinite;
}

.dap-bottom-copy {
    position: relative;
    z-index: 1;
}

.dap-small-eyebrow {
    color: var(--gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.dap-bottom-copy h3 {
    margin: 12px 0;

    color: #FFFEFA;

    font-family: Georgia, serif;
    font-size: clamp(25px, 2.6vw, 37px);
    font-weight: 400;
    line-height: 1.2;
}

.dap-bottom-copy h3 em {
    display: block;
    color: var(--gold-light);
}

.dap-bottom-copy p {
    max-width: 570px;
    margin: 0;

    color: #E8DFD2;

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

.dap-main-button {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

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

    min-height: 55px;
    padding: 14px 25px;

    border: 1px solid var(--gold-light);
    border-radius: 3px;

    background: linear-gradient(
        110deg,
        #E8D2A5,
        #B58A45
    );

    color: #350809;

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

    cursor: pointer;

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

.dap-main-button span {
    font-size: 19px;
    font-weight: 400;
}

.dap-main-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(181,138,69,.35);
}

/* END: Bottom CTA */


/* START: Details modal */

.dap-modal {
    position: fixed;
    inset: 0;

    margin: auto;

    width: min(900px, calc(100% - 32px));
    max-height: 86vh;
    max-height: 86dvh;

    overflow-y: auto;

    padding: clamp(23px, 4vw, 44px);

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

    background: #FFFEFA;

    color: var(--text);

    box-shadow: 0 35px 100px rgba(18,15,13,.38);
}

.dap-modal:popover-open {
    animation: dap-modal-enter .4s ease both;
}

.dap-modal::backdrop {
    background: rgba(18,15,13,.73);
    backdrop-filter: blur(8px);
}

.dap-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 29px;
}

.dap-modal-eyebrow {
    color: var(--gold-dark);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.dap-modal-header h3 {
    margin: 12px 0 0;

    color: var(--maroon);

    font-family: Georgia, serif;
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 400;
}

.dap-modal-header h3 em {
    display: block;
    color: var(--gold);
}

.dap-modal-close {
    display: grid;
    place-items: center;

    flex: 0 0 42px;
    height: 42px;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: var(--paper);
    color: var(--maroon);

    font-size: 26px;
    cursor: pointer;

    transition: transform .3s ease;
}

.dap-modal-close:hover {
    transform: rotate(90deg);
}

.dap-modal-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 25px;
}

.dap-modal-content article {
    padding: 20px;

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

    background: #FFFEFA;
}

.dap-modal-content h4 {
    margin: 0 0 13px;

    color: var(--maroon);

    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
}

.dap-modal-content p {
    margin: 0 0 12px;

    color: var(--muted);

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

.dap-modal-content p:last-child {
    margin-bottom: 0;
}

.dap-modal-content b {
    color: var(--maroon);
}

/* END: Details modal */


/* START: Animation keyframes */

@keyframes dap-glow-animation {
    from {
        opacity: .5;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes dap-dot-animation {
    0%, 100% {
        opacity: .3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-17px);
    }
}

@keyframes dap-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes dap-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}

@keyframes dap-card-reveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes dap-expand {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

@keyframes dap-modal-enter {
    from {
        opacity: 0;
        transform: translateY(17px) scale(.98);
    }

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

/* END: Animation keyframes */


/* START: Tablet responsiveness */

@media (max-width: 1050px) {

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

    .dap-card-summary {
        min-height: 340px;
    }

    .dap-card-featured {
        grid-column: span 2;
    }

    .dap-heading {
        font-size: 49px;
    }
}

/* END: Tablet responsiveness */


/* START: Mobile responsiveness */

@media (max-width: 650px) {

    .dap-section {
        padding: 67px 18px 70px;
    }

    .dap-header {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .dap-ornament {
        display: none;
    }

    .dap-heading {
        font-size: clamp(35px, 8.6vw, 45px);
    }

    .dap-lead {
        font-size: 13px;
    }

    .dap-feature-strip {
        gap: 14px 20px;
    }

    .dap-feature-strip span {
        font-size: 9px;
    }

    .dap-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dap-card-featured {
        grid-column: auto;
    }

    .dap-card-summary {
        min-height: auto;
        padding: 25px;
    }

    .dap-card-title {
        font-size: 26px;
    }

    .dap-card-intro {
        font-size: 12px;
    }

    .dap-card-open {
        margin-top: 20px;
    }

    .dap-card-expanded {
        padding: 0 25px 23px;
    }

    .dap-bottom-cta {
        flex-direction: column;
        align-items: flex-start;

        padding: 29px 24px;
        gap: 25px;
    }

    .dap-main-button {
        width: 100%;
    }

    .dap-modal-content {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .dap-modal-content article {
        padding: 17px;
    }
}

/* END: Mobile responsiveness */


/* START: Accessibility and reduced motion */

.dap-section button:focus-visible,
.dap-section summary:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

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

    .dap-section *,
    .dap-section *::before,
    .dap-section *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* END: Accessibility and reduced motion */


/* =====================================================
   END: DHARTI AANJANEYA PROPERTY DETAILS CSS
===================================================== */

/* ===================================================
 START: DHARTI AANJANEYA FLOOR PLANS CSS
 Premium Maroon, Antique Gold, Curtain & 3D Animation
=================================================== */

/* START: Foundation */
.dfp-section {
  --maroon: #690F10;
  --dark: #350809;
  --gold: #B58A45;
  --light-gold: #E8D2A5;
  --ivory: #FFFEFA;
  --paper: #F4F0E9;
  --line: #E8DFD2;
  --muted: #65594E;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 95px 24px 70px;
  color: #211C19;
  font: 400 15px/1.65 Arial, sans-serif;

  background:
    radial-gradient(
      ellipse at 82% 8%,
      #E8D2A554,
      transparent 36%
    ),
    linear-gradient(155deg, #FFFEFA, #F4F0E9);
}

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

.dfp-section button,
.dfp-dialog button {
  font: inherit;
  cursor: pointer;
}

.dfp-section a,
.dfp-dialog a {
  text-decoration: none;
}

.dfp-section :focus-visible,
.dfp-dialog :focus-visible {
  outline: 3px solid #B58A45;
  outline-offset: 3px;
}

.dfp-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}
/* END: Foundation */


/* START: Animated background dots */
.dfp-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(#B58A4509 1px, transparent 1px),
    linear-gradient(90deg, #B58A4509 1px, transparent 1px);
  background-size: 100px 100px;
}

.dfp-dots i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B58A45;
  box-shadow:
    0 0 0 7px #B58A451B,
    0 0 18px #B58A4570;
  animation: dfp-drift 7s ease-in-out infinite alternate;
}

.dfp-dots i:nth-child(1) {
  top: 13%;
  left: 8%;
}

.dfp-dots i:nth-child(2) {
  top: 35%;
  right: 5%;
  animation-delay: -1s;
}

.dfp-dots i:nth-child(3) {
  top: 54%;
  left: 5%;
  animation-delay: -4s;
}

.dfp-dots i:nth-child(4) {
  top: 78%;
  right: 11%;
  animation-delay: -3s;
}

.dfp-dots i:nth-child(5) {
  bottom: 7%;
  left: 24%;
  animation-delay: -5s;
}
/* END: Animated background dots */


/* START: Main heading */
.dfp-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 195px;
  gap: 40px;
  align-items: center;
  margin-bottom: 45px;
}

.dfp-kicker {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  color: #765322;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

.dfp-kicker span {
  width: 40px;
  height: 1px;
  background: #B58A45;
}

.dfp-kicker b {
  color: #B58A45;
}

.dfp-overline {
  margin: 24px 0 8px;
  color: #690F10;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.dfp-heading-copy h2 {
  max-width: 850px;
  margin: 0 0 19px;
  color: #350809;
  font: 400 clamp(42px, 5vw, 70px)/1.09 Georgia, serif;
  letter-spacing: -.05em;
}

.dfp-heading-copy h2 em {
  display: block;
  color: #B58A45;
  font-weight: 400;
}

.dfp-lead {
  max-width: 740px;
  margin: 0;
  color: #65594E;
  font-size: 14px;
  line-height: 1.9;
}

.dfp-lead strong {
  color: #690F10;
}
/* END: Main heading */


/* START: Rotating architectural gold rings */
.dfp-rings {
  position: relative;
  width: 180px;
  height: 180px;
  justify-self: end;
}

.dfp-ring {
  position: absolute;
  inset: 0;
  border: 1px solid #B58A456B;
  border-radius: 50%;
  animation: dfp-spin 40s linear infinite;
}

.dfp-ring::after {
  content: "";
  position: absolute;
  top: 13%;
  left: 9%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B58A45;
  box-shadow: 0 0 0 7px #B58A4520;
}

.dfp-ring-b {
  inset: 22px;
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 55s;
}

.dfp-ring-b::after {
  top: auto;
  left: auto;
  right: 10%;
  bottom: 8%;
}

.dfp-ring-center {
  position: absolute;
  inset: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #690F10;
  color: #E8D2A5;
  border: 2px solid #DCC18D;
  font-size: 29px;
  box-shadow: 0 18px 40px #35080926;
  animation: dfp-pulse 4s ease-in-out infinite;
}
/* END: Rotating architectural gold rings */


/* START: Premium 3D residence cards */
.dfp-residences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  align-items: start;
  perspective: 1400px;
}

.dfp-home {
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  min-width: 0;
  overflow: hidden;
  background: #FFFEFA;
  border: 1px solid #E8DFD2;
  border-radius: 12px;
  box-shadow: 0 15px 40px #35080912;

  transform:
    perspective(1200px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));

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

.dfp-home:nth-child(2) {
  margin-top: 36px;
}

.dfp-home:hover {
  border-color: #B58A4588;
  box-shadow: 0 30px 65px #35080920;
}

.dfp-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #350809;
  color: #E8D2A5;
  padding: 15px 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}

.dfp-topline span {
  font-size: 17px;
  animation: dfp-pulse 4s infinite;
}

.dfp-media {
  position: relative;
  display: block;
  width: 100%;
  height: 310px;
  padding: 0;
  border: 0;
  background: #E8DFD2;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}

.dfp-media img,
.dfp-gallery-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .7s ease;
}

.dfp-media:hover img,
.dfp-gallery-card:hover img {
  transform: scale(1.055);
}

.dfp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 35%;
  pointer-events: none;

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

  transform: translateX(-180%) skewX(-18deg);
  animation: dfp-shine 8s ease-in-out infinite;
}

.dfp-media-label {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  color: #FFFEFA;
  background: #350809ED;
  border: 1px solid #E8D2A5A0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
}

.dfp-media-label b {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #B58A45;
  border-radius: 50%;
  color: #E8D2A5;
  font-size: 18px;
}
/* END: Premium 3D residence cards */


/* START: Curtain reveal animation */
.dfp-curtain {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 50.1%;
  pointer-events: none;

  background: repeating-linear-gradient(
    90deg,
    #350809 0,
    #690F10 27px,
    #470B0C 52px,
    #240506 72px,
    #690F10 100px
  );

  box-shadow: inset 0 0 32px #120F0D70;

  transition:
    transform 1.25s cubic-bezier(.24, .7, .1, 1),
    opacity .35s ease 1.05s;
}

.dfp-curtain-left {
  left: 0;
  border-right: 2px solid #B58A45;
}

.dfp-curtain-right {
  right: 0;
  border-left: 2px solid #B58A45;
}

.dfp-section.dfp-animated .dfp-curtain {
  display: block;
}

.dfp-section.dfp-animated
.dfp-reveal.dfp-visible .dfp-curtain-left {
  transform: translateX(-104%);
  opacity: 0;
}

.dfp-section.dfp-animated
.dfp-reveal.dfp-visible .dfp-curtain-right {
  transform: translateX(104%);
  opacity: 0;
}
/* END: Curtain reveal animation */


/* START: Apartment information */
.dfp-home-body {
  padding: 25px 26px;
}

.dfp-label {
  font-size: 10px;
  color: #9B7135;
  font-weight: 700;
  letter-spacing: .17em;
}

.dfp-home-body h3 {
  margin: 8px 0;
  color: #350809;
  font: 400 35px Georgia, serif;
  letter-spacing: -.04em;
}

.dfp-home-body p {
  margin: 4px 0 0;
  color: #65594E;
  font-size: 13px;
  line-height: 1.7;
}

.dfp-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 23px 0 16px;
  border-top: 1px solid #E8DFD2;
  padding-top: 18px;
}

.dfp-specs > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}

.dfp-specs > span + span {
  padding-left: 18px;
  border-left: 1px solid #E8DFD2;
}

.dfp-specs small {
  font-size: 9px;
  color: #827568;
  font-weight: 700;
  letter-spacing: .08em;
}

.dfp-specs strong {
  color: #690F10;
  font: 400 clamp(23px, 2.3vw, 32px) Georgia, serif;
  white-space: nowrap;
}

.dfp-specs strong em {
  font: 400 12px Arial, sans-serif;
  color: #765322;
}

.dfp-detail-link {
  border: 0;
  border-top: 1px solid #F4F0E9;
  padding: 18px 0 0;
  width: 100%;

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

  color: #690F10;
  background: transparent;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left;
}

.dfp-detail-link span {
  color: #B58A45;
  font-size: 20px;
  transition: transform .3s;
}

.dfp-detail-link:hover span {
  transform: translate(4px, -3px);
}
/* END: Apartment information */


/* START: Five-image architectural gallery */
.dfp-gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin: 72px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #D8CCBD;
}

.dfp-gallery-heading > div > span {
  font-size: 10px;
  color: #765322;
  font-weight: 700;
  letter-spacing: .17em;
}

.dfp-gallery-heading h3 {
  margin: 7px 0 0;
  font: 400 clamp(28px, 3.1vw, 41px) Georgia, serif;
  color: #350809;
}

.dfp-gallery-heading p {
  max-width: 230px;
  margin: 0;
  color: #65594E;
  font-size: 12px;
  text-align: right;
}

.dfp-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 19px;
}

.dfp-gallery-card {
  grid-column: span 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 8px 8px 0;
  background: #FFFEFA;
  border: 1px solid #E8DFD2;
  border-radius: 10px;
  box-shadow: 0 9px 24px #3508090D;
  overflow: hidden;

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

.dfp-gallery-card:hover {
  transform: translateY(-8px);
  border-color: #B58A45;
  box-shadow: 0 19px 44px #35080922;
}

.dfp-gallery-wide {
  grid-column: span 3;
}

.dfp-gallery-image {
  position: relative;
  display: block;
  height: 205px;
  background: #EEE8E0;
  overflow: hidden;
  isolation: isolate;
}

.dfp-gallery-wide .dfp-gallery-image {
  height: 248px;
}

.dfp-gallery-caption {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  gap: 4px;
  padding: 17px 10px 18px;
}

.dfp-gallery-caption strong {
  grid-column: 1;
  font-size: 11px;
  color: #350809;
  letter-spacing: .1em;
}

.dfp-gallery-caption small {
  grid-column: 1;
  font-size: 11px;
  color: #65594E;
}

.dfp-gallery-caption b {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #B58A45;
  border-radius: 50%;
  color: #690F10;
  font-size: 17px;
}
/* END: Five-image architectural gallery */


/* START: Premium brochure CTA */
.dfp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 45px;
  padding: 35px 38px;
  border: 1px solid #B58A4566;
  border-radius: 10px;

  background:
    radial-gradient(
      circle at right top,
      #963A3944,
      transparent 47%
    ),
    linear-gradient(110deg, #350809, #690F10);

  box-shadow: 0 18px 38px #35080920;
}

.dfp-cta small {
  color: #E8D2A5;
  font-size: 10px;
  letter-spacing: .15em;
}

.dfp-cta h3 {
  margin: 8px 0 0;
  color: #FFFEFA;
  font: 400 clamp(27px, 2.7vw, 39px) Georgia, serif;
}

.dfp-cta h3 em {
  color: #E8D2A5;
}

.dfp-cta a,
.dfp-dialog-text > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 50px;
  padding: 12px 20px;

  background: linear-gradient(110deg, #E8D2A5, #B58A45);
  color: #350809;

  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .3s;
}

.dfp-cta a:hover,
.dfp-dialog-text > a:hover {
  transform: translateY(-3px);
}

.dfp-cta a span {
  font-size: 18px;
}

.dfp-fineprint {
  margin: 13px 2px 0;
  color: #827568;
  font-size: 11px;
}
/* END: Premium brochure CTA */


/* START: Full-screen image viewer */
.dfp-dialog {
  inset: 0;
  width: min(1100px, calc(100% - 25px));
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  border: 1px solid #B58A45;
  border-radius: 12px;

  background: #FFFEFA;
  color: #211C19;
  box-shadow: 0 25px 85px #120F0D88;
  overflow: auto;
}

.dfp-dialog::backdrop {
  background: #120F0DBB;
  backdrop-filter: blur(7px);
}

.dfp-dialog[open] {
  animation: dfp-open .35s ease both;
}

.dfp-dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 12px 22px;

  background: #350809;
  color: #E8D2A5;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.dfp-dialog-top b {
  margin: 0 7px;
  color: #B58A45;
}

.dfp-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #E8D2A576;
  border-radius: 50%;
  background: transparent;
  color: #FFFEFA;
  font-size: 27px !important;
  line-height: 1 !important;
}

.dfp-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  min-height: 480px;
}

.dfp-dialog-photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0;
  padding: 18px;
  background: #F4F0E9;
  cursor: zoom-in;
}

.dfp-dialog-photo img {
  width: 100%;
  height: 100%;
  max-height: 650px;
  object-fit: contain;
  pointer-events: none;
  transition: transform .35s ease;
}

.dfp-dialog-photo.dfp-zoomed {
  cursor: zoom-out;
}

.dfp-dialog-photo.dfp-zoomed img {
  transform: scale(1.9);
}

.dfp-dialog-photo small {
  position: absolute;
  left: 22px;
  bottom: 16px;
  padding: 6px 10px;
  background: #350809DD;
  color: #E8D2A5;
  font-size: 9px;
  letter-spacing: .08em;
}

.dfp-dialog-text {
  padding: 45px 32px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.dfp-dialog-text h3 {
  margin: 13px 0;
  color: #350809;
  font: 400 clamp(32px, 3.1vw, 48px)/1.15 Georgia, serif;
}

.dfp-dialog-text p {
  margin: 0;
  color: #65594E;
  font-size: 13px;
  line-height: 1.9;
}

.dfp-dialog-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  width: 100%;
  margin: 26px 0;
}

.dfp-dialog-facts > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
  padding: 14px;
  background: #F4F0E9;
  border: 1px solid #E8DFD2;
}

.dfp-dialog-facts small {
  font-size: 9px;
  color: #65594E;
  font-weight: 700;
  letter-spacing: .1em;
}

.dfp-dialog-facts strong {
  font: 400 20px Georgia, serif;
  color: #690F10;
}

.dfp-dialog-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid #E8DFD2;
  padding-top: 18px;
}

.dfp-dialog-nav button {
  background: transparent;
  border: 1px solid #E8DFD2;
  padding: 9px 10px;
  color: #690F10;
}

.dfp-dialog-nav span {
  font-size: 10px;
  color: #65594E;
}

.dfp-dialog-text > a {
  margin-top: 22px;
}
/* END: Full-screen image viewer */


/* START: Animation keyframes */
@keyframes dfp-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dfp-pulse {
  50% {
    transform: scale(1.12);
    filter: brightness(1.15);
  }
}

@keyframes dfp-drift {
  to {
    transform: translate(7px, -17px);
    opacity: .35;
  }
}

@keyframes dfp-shine {
  0%, 57%, 100% {
    transform: translateX(-180%) skewX(-18deg);
  }

  73% {
    transform: translateX(480%) skewX(-18deg);
  }
}

@keyframes dfp-open {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* END: Animation keyframes */


/* START: Responsive layouts */
@media (max-width: 950px) {
  .dfp-header {
    grid-template-columns: 1fr 130px;
  }

  .dfp-rings {
    width: 130px;
    height: 130px;
  }

  .dfp-ring-center {
    inset: 42px;
    font-size: 22px;
  }

  .dfp-home-body h3 {
    font-size: 29px;
  }

  .dfp-media {
    height: 270px;
  }

  .dfp-specs strong {
    font-size: 24px;
  }

  .dfp-gallery-image {
    height: 165px;
  }

  .dfp-gallery-wide .dfp-gallery-image {
    height: 220px;
  }
}

@media (max-width: 700px) {
  .dfp-section {
    padding: 65px 17px;
  }

  .dfp-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dfp-rings {
    display: none;
  }

  .dfp-heading-copy h2 {
    font-size: clamp(38px, 9vw, 55px);
  }

  .dfp-residences {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dfp-home:nth-child(2) {
    margin-top: 0;
  }

  .dfp-media {
    height: 275px;
  }

  .dfp-gallery-heading {
    align-items: start;
    flex-direction: column;
    gap: 9px;
    margin-top: 50px;
  }

  .dfp-gallery-heading p {
    text-align: left;
    max-width: none;
  }

  .dfp-gallery-card {
    grid-column: span 3;
  }

  .dfp-gallery-wide {
    grid-column: span 6;
  }

  .dfp-gallery-image {
    height: 170px;
  }

  .dfp-gallery-wide .dfp-gallery-image {
    height: 220px;
  }

  .dfp-cta {
    flex-direction: column;
    align-items: start;
    padding: 28px 23px;
  }

  .dfp-cta a {
    width: 100%;
    white-space: normal;
  }

  .dfp-dialog-grid {
    grid-template-columns: 1fr;
  }

  .dfp-dialog-photo {
    height: 42vh;
    min-height: 240px;
  }

  .dfp-dialog-text {
    padding: 24px;
  }

  .dfp-dialog {
    width: calc(100% - 16px);
    max-height: 95dvh;
  }
}

@media (max-width: 420px) {
  .dfp-topline {
    padding: 12px 15px;
    font-size: 9px;
  }

  .dfp-home-body {
    padding: 21px 19px;
  }

  .dfp-specs strong {
    font-size: 23px;
  }

  .dfp-specs > span + span {
    padding-left: 12px;
  }

  .dfp-media {
    height: 240px;
  }

  .dfp-gallery-image {
    height: 145px;
  }

  .dfp-gallery-wide .dfp-gallery-image {
    height: 205px;
  }

  .dfp-gallery-caption strong {
    font-size: 9px;
  }

  .dfp-gallery-caption small {
    font-size: 10px;
  }

  .dfp-dialog-top {
    padding: 10px 13px;
    font-size: 8px;
  }
}
/* END: Responsive layouts */


/* START: Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .dfp-section *,
  .dfp-section *::before,
  .dfp-section *::after,
  .dfp-dialog *,
  .dfp-dialog *::before,
  .dfp-dialog *::after {
    animation: none !important;
    transition: none !important;
  }

  .dfp-curtain {
    display: none !important;
  }

  .dfp-home {
    transform: none !important;
  }
}
/* END: Reduced motion accessibility */

/* ===================================================
 END: DHARTI AANJANEYA FLOOR PLANS CSS
=================================================== */

/* ==================================================
   START: DHARTI AANJANEYA AMENITIES CSS
================================================== */

/* START: Brand Colour System */
.dham-amenities {
    --dham-maroon: #690F10;
    --dham-maroon-dark: #350809;
    --dham-gold: #B58A45;
    --dham-gold-light: #E8D2A5;
    --dham-ivory: #FFFEFA;
    --dham-paper: #F4F0E9;
    --dham-line: #E8DFD2;
    --dham-muted: #65594E;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 105px 24px 76px;

    background:
        radial-gradient(
            ellipse at 88% 5%,
            rgba(232,210,165,.30),
            transparent 40%
        ),
        linear-gradient(150deg, #FFFEFA, #F4F0E9);

    color: #211C19;
    font-family: Arial, sans-serif;
}

.dham-amenities *,
.dham-amenities *::before,
.dham-amenities *::after {
    box-sizing: border-box;
}

.dham-container {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: auto;
}

.dham-amenities a {
    text-decoration: none;
}

.dham-amenities a:focus-visible {
    outline: 3px solid #B58A45;
    outline-offset: 5px;
}
/* END: Brand Colour System */


/* START: Animated Background */
.dham-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(181,138,69,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(181,138,69,.035) 1px,
            transparent 1px
        );

    background-size: 100px 100px;
}

.dham-glow {
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    filter: blur(28px);

    animation: dham-breathe 9s ease-in-out infinite alternate;
}

.dham-glow--one {
    top: -320px;
    right: -250px;

    background: radial-gradient(
        circle,
        rgba(181,138,69,.13),
        transparent 70%
    );
}

.dham-glow--two {
    bottom: -390px;
    left: -180px;

    background: radial-gradient(
        circle,
        rgba(105,15,16,.09),
        transparent 70%
    );

    animation-delay: -4s;
}

.dham-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #B58A45;

    box-shadow:
        0 0 0 6px rgba(181,138,69,.09),
        0 0 15px rgba(181,138,69,.32);

    animation: dham-spark 5.6s ease-in-out infinite;
}

.dham-dot:nth-of-type(3) { top: 13%; left: 5%; }
.dham-dot:nth-of-type(4) { top: 26%; right: 5%; animation-delay: -1.8s; }
.dham-dot:nth-of-type(5) { top: 48%; left: 3%; animation-delay: -3.4s; }
.dham-dot:nth-of-type(6) { top: 63%; right: 8%; animation-delay: -2.6s; }
.dham-dot:nth-of-type(7) { bottom: 13%; left: 9%; animation-delay: -4s; }
.dham-dot:nth-of-type(8) { bottom: 6%; right: 17%; animation-delay: -1s; }
/* END: Animated Background */


/* START: Header Typography */
.dham-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 325px;
    align-items: center;
    gap: 38px;
    margin-bottom: 36px;
}

.dham-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    color: #765322;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .21em;
}

.dham-eyebrow-line {
    width: 40px;
    height: 1px;
    background: #B58A45;
}

.dham-subhead {
    margin: 29px 0 13px;
    color: #690F10;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
}

.dham-title {
    max-width: 830px;
    margin: 0;

    color: #350809;

    font-family: Georgia, serif;
    font-size: clamp(41px, 4.7vw, 68px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.052em;
}

.dham-title em {
    display: block;
    margin-top: 7px;

    color: #B58A45;
    font-weight: 400;
}

.dham-lead {
    max-width: 690px;
    margin: 24px 0 20px;

    color: #65594E;
    font-size: 14px;
    line-height: 1.95;
}

.dham-location {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #765322;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}

.dham-location-star {
    font-size: 15px;
    color: #B58A45;
}
/* END: Header Typography */


/* START: Animated 3D Architectural Rings */
.dham-art {
    position: relative;

    width: 315px;
    height: 295px;
    margin: auto;

    perspective: 950px;
    transform-style: preserve-3d;
}

.dham-art-aura {
    position: absolute;
    inset: 10%;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(181,138,69,.20),
        transparent 67%
    );

    filter: blur(11px);

    animation: dham-breathe 5s ease-in-out infinite alternate;
}

.dham-ring {
    position: absolute;
    top: 50%;
    left: 50%;

    border: 1px solid rgba(181,138,69,.38);
    border-radius: 50%;

    pointer-events: none;
}

.dham-ring--outer {
    width: 286px;
    height: 286px;

    margin: -143px 0 0 -143px;

    border-style: dashed;

    animation: dham-ring-spin 45s linear infinite;
}

.dham-ring--middle {
    width: 246px;
    height: 246px;

    margin: -123px 0 0 -123px;

    border-color: rgba(181,138,69,.50);

    animation: dham-ring-reverse 31s linear infinite;
}

.dham-ring--inner {
    width: 194px;
    height: 194px;

    margin: -97px 0 0 -97px;

    border-color: rgba(181,138,69,.23);

    animation: dham-ring-spin 22s linear infinite;
}

.dham-ring--outer::before,
.dham-ring--middle::after {
    content: "";

    position: absolute;
    top: 12%;
    left: 11%;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #B58A45;

    box-shadow:
        0 0 0 7px rgba(181,138,69,.10),
        0 0 20px rgba(181,138,69,.42);
}

.dham-ring--middle::after {
    top: auto;
    left: auto;
    right: 12%;
    bottom: 9%;
    width: 6px;
    height: 6px;
}

/* Layered glass architectural sculpture */

.dham-art-object {
    position: absolute;
    inset: 49px 66px 62px;

    transform-style: preserve-3d;

    animation: dham-core-float 8s ease-in-out infinite;
}

.dham-art-layer {
    position: absolute;
    inset: 11px;

    border: 1px solid rgba(181,138,69,.7);

    background: linear-gradient(
        140deg,
        rgba(255,254,250,.85),
        rgba(232,210,165,.18)
    );

    clip-path: polygon(
        50% 0,
        100% 20%,
        100% 80%,
        50% 100%,
        0 80%,
        0 20%
    );

    box-shadow: 0 17px 36px rgba(53,8,9,.1);
}

.dham-art-layer--back {
    transform:
        translateZ(-25px)
        translate(15px, -12px)
        scale(1.05);

    background: rgba(181,138,69,.22);
}

.dham-art-layer--mid {
    transform:
        translateZ(8px)
        translate(-8px, 5px);

    background: rgba(105,15,16,.12);
}

.dham-art-layer--front {
    transform: translateZ(36px) scale(.73);

    border-color: #DCC18D;

    background: linear-gradient(
        145deg,
        #690F10,
        #350809
    );

    box-shadow: 0 19px 36px rgba(53,8,9,.32);
}

.dham-art-diamond {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        translateZ(60px);

    font-size: 55px;
    color: #E8D2A5;

    text-shadow: 0 0 24px rgba(232,210,165,.28);

    animation: dham-gem-shine 4s ease-in-out infinite;
}

.dham-art-caption {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;

    text-align: center;

    color: #765322;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .19em;
}
/* END: Animated 3D Architectural Rings */


/* START: Premium Amenity Cards */
.dham-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
    align-items: stretch;
    perspective: 1500px;
}

.dham-card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 390px;

    padding: 27px 27px 23px;

    overflow: hidden;

    border: 1px solid #E8DFD2;
    border-radius: 15px;

    background: rgba(255,254,250,.96);

    box-shadow: 0 14px 32px rgba(53,8,9,.055);

    transform-style: preserve-3d;

    transition:
        transform .45s ease,
        box-shadow .4s ease,
        border-color .4s ease;

    animation: dham-card-enter .75s ease backwards;
}

.dham-card:nth-child(2) { animation-delay: .1s; }
.dham-card:nth-child(3) { animation-delay: .2s; }
.dham-card:nth-child(4) { animation-delay: .3s; }
.dham-card:nth-child(5) { animation-delay: .4s; }
.dham-card:nth-child(6) { animation-delay: .5s; }

/* Animated golden top line */

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

    position: absolute;
    inset: 0 0 auto;
    height: 3px;

    background: linear-gradient(
        90deg,
        #690F10,
        #B58A45,
        #690F10
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .55s ease;
}

/* Hover light sweep */

.dham-card::after {
    content: "";

    position: absolute;
    inset: -50%;

    background: linear-gradient(
        110deg,
        transparent 43%,
        rgba(255,255,255,.30) 50%,
        transparent 57%
    );

    transform: translateX(-85%) rotate(5deg);
    pointer-events: none;

    transition: transform 1s ease;
}

.dham-card:hover {
    transform:
        translateY(-10px)
        rotateX(2deg)
        rotateY(-2deg);

    border-color: rgba(181,138,69,.58);

    box-shadow: 0 28px 55px rgba(53,8,9,.14);
}

.dham-card:hover::before {
    transform: scaleX(1);
}

.dham-card:hover::after {
    transform: translateX(85%) rotate(5deg);
}

/* Card heading and icon */

.dham-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 21px;
}

.dham-card-icon {
    display: grid;
    place-items: center;

    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    border: 1px solid rgba(105,15,16,.12);
    border-radius: 13px;

    background: #F9EEEE;
    color: #690F10;

    font: 400 29px/1 Georgia, serif;

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

.dham-card:hover .dham-card-icon {
    transform:
        rotateY(20deg)
        rotate(-7deg)
        scale(1.08);

    background: #F0E1C4;
}

.dham-card-tag {
    text-align: right;

    color: #765322;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.6;
}

.dham-card h3 {
    margin: 0 0 17px;

    color: #350809;

    font: 400 29px/1.14 Georgia, serif;
    letter-spacing: -.035em;
}

.dham-card h3 em {
    display: block;
    margin-top: 4px;

    color: #9B7135;
    font-weight: 400;
}

/* Amenity bullet list */

.dham-list {
    display: grid;
    gap: 11px;

    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.dham-list li {
    position: relative;
    padding-left: 20px;

    color: #4B4139;

    font-size: 12px;
    line-height: 1.58;
}

.dham-list li::before {
    content: "✦";

    position: absolute;
    top: 1px;
    left: 0;

    color: #B58A45;
    font-size: 10px;
}

/* Card footer */

.dham-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    margin-top: auto;
    padding-top: 16px;

    border-top: 1px solid #E8DFD2;

    color: #827568;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.dham-card-foot span:last-child {
    color: #B58A45;
    font-size: 14px;
}

.dham-card-emblem {
    position: absolute;
    right: 13px;
    bottom: 48px;
    z-index: -1;

    color: rgba(181,138,69,.09);
    font-size: 140px;

    transform: rotate(-17deg);
    pointer-events: none;
}
/* END: Premium Amenity Cards */


/* START: Dark Maroon Lifestyle Card */
.dham-card--signature {
    background:
        radial-gradient(
            ellipse at 90% 0%,
            rgba(181,138,69,.20),
            transparent 45%
        ),
        linear-gradient(142deg, #690F10, #350809 85%);

    border-color: #765322;

    box-shadow: 0 19px 42px rgba(53,8,9,.18);
}

.dham-card--signature .dham-card-icon {
    background: rgba(232,210,165,.09);
    border-color: rgba(232,210,165,.35);
    color: #E8D2A5;
}

.dham-card--signature .dham-card-tag,
.dham-card--signature h3 em {
    color: #E8D2A5;
}

.dham-card--signature h3 {
    color: #FFFEFA;
}

.dham-card--signature .dham-list li {
    color: #F4F0E9;
}

.dham-card--signature .dham-list li::before {
    color: #E8D2A5;
}

.dham-card--signature .dham-card-foot {
    color: #E8D2A5;
    border-color: rgba(232,210,165,.22);
}

.dham-card--signature:hover {
    border-color: #B58A45;
    box-shadow: 0 30px 60px rgba(53,8,9,.26);
}
/* END: Dark Maroon Lifestyle Card */


/* START: Closing CTA */
.dham-signature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-top: 36px;
    padding-top: 26px;

    border-top: 1px solid #D8CCBD;
}

.dham-signature > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.dham-signature-spark {
    color: #B58A45;
    font-size: 18px;

    animation: dham-gem-shine 4s ease-in-out infinite;
}

.dham-signature strong {
    color: #690F10;
    font-size: 12px;
    letter-spacing: .12em;
}

.dham-signature small {
    color: #827568;
    font-size: 9px;
    letter-spacing: .12em;
}

.dham-enquire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    min-height: 48px;
    padding: 12px 22px;

    border: 1px solid #690F10;
    border-radius: 3px;

    background: #690F10;
    color: #FFFEFA;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;

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

.dham-enquire span {
    color: #E8D2A5;
    font-size: 19px;
}

.dham-enquire:hover {
    background: #350809;
    color: #FFFEFA;

    transform: translateY(-3px);

    box-shadow: 0 12px 27px rgba(105,15,16,.22);
}
/* END: Closing CTA */


/* START: CSS Animation Keyframes */

@keyframes dham-breathe {
    from {
        opacity: .52;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes dham-spark {
    0%, 100% {
        opacity: .25;
        transform: translateY(6px) scale(.75);
    }

    50% {
        opacity: 1;
        transform: translateY(-10px) scale(1.22);
    }
}

@keyframes dham-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dham-ring-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes dham-core-float {
    0%, 100% {
        transform:
            rotateY(-17deg)
            rotateX(11deg)
            translateY(3px);
    }

    50% {
        transform:
            rotateY(15deg)
            rotateX(-4deg)
            translateY(-13px);
    }
}

@keyframes dham-gem-shine {
    0%, 100% {
        opacity: .75;
        filter: brightness(.95);
    }

    50% {
        opacity: 1;
        filter: brightness(1.25);
    }
}

@keyframes dham-card-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* END: CSS Animation Keyframes */


/* START: Tablet Responsive */
@media (max-width: 1050px) {

    .dham-header {
        grid-template-columns: minmax(0, 1fr) 245px;
        gap: 20px;
    }

    .dham-art {
        width: 245px;
        height: 245px;
        transform: scale(.85);
    }

    .dham-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dham-card {
        min-height: 340px;
    }

    .dham-card h3 {
        font-size: 28px;
    }
}
/* END: Tablet Responsive */


/* START: Mobile Responsive */
@media (max-width: 670px) {

    .dham-amenities {
        padding: 66px 18px 55px;
    }

    .dham-header {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 31px;
    }

    .dham-title {
        font-size: clamp(37px, 9vw, 53px);
    }

    .dham-subhead {
        margin-top: 21px;
    }

    .dham-lead {
        font-size: 13px;
        line-height: 1.85;
    }

    .dham-location {
        font-size: 9px;
        letter-spacing: .1em;
    }

    .dham-art {
        width: 260px;
        height: 205px;
        transform: scale(.7);
        margin: -20px auto -28px;
    }

    .dham-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .dham-card {
        min-height: 0;
        padding: 23px 22px;
    }

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

    .dham-list {
        gap: 9px;
    }

    .dham-signature {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .dham-enquire {
        width: 100%;
        white-space: normal;
    }
}
/* END: Mobile Responsive */


/* START: Accessibility */
@media (prefers-reduced-motion: reduce) {

    .dham-amenities *,
    .dham-amenities *::before,
    .dham-amenities *::after {
        animation: none !important;
        transition: none !important;
    }

    .dham-card:hover {
        transform: none !important;
    }

    .dham-art-object {
        transform: rotateY(-10deg) rotateX(8deg);
    }
}
/* END: Accessibility */


/* ==================================================
   END: DHARTI AANJANEYA AMENITIES CSS
================================================== */

/* ===========================================================
   START: DHARTI AANJANEYA - 3D FLIP AMENITIES STYLES
   No JavaScript, images or third-party libraries required
=========================================================== */

/* START: Palette, Section and Grid */

.dna-section {
    --dna-maroon: #690F10;
    --dna-maroon-dark: #350809;
    --dna-maroon-deep: #240506;

    --dna-gold: #B58A45;
    --dna-gold-light: #E8D2A5;

    --dna-ivory: #FFFEFA;
    --dna-paper: #F4F0E9;
    --dna-line: #E8DFD2;
    --dna-muted: #65594E;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 94px clamp(18px, 4vw, 60px) 70px;

    color: #211C19;
    font: 400 15px/1.6 Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            ellipse at 92% 8%,
            rgba(232, 210, 165, .35),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 3% 82%,
            rgba(105, 15, 16, .07),
            transparent 34%
        ),
        linear-gradient(
            125deg,
            #FFFEFA 7%,
            #F4F0E9 100%
        );
}

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

.dna-container {
    position: relative;
    z-index: 1;

    width: min(1230px, 100%);
    margin-inline: auto;
}

.dna-section a {
    text-decoration: none;
}

.dna-section :focus-visible {
    outline: 3px solid var(--dna-gold);
    outline-offset: 4px;
}

/* END: Palette, Section and Grid */


/* START: Floating Gold 3D Bubbles */

.dna-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.dna-ambient::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            circle,
            #B58A4530 1px,
            transparent 1.8px
        );

    background-size: 36px 36px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 35%,
            transparent 100%
        );

    opacity: .4;
}

.dna-bubble {
    position: absolute;

    width: var(--size, 22px);
    aspect-ratio: 1;
    border-radius: 50%;

    border: 1px solid #B58A4570;

    background:
        radial-gradient(
            circle at 30% 25%,
            #FFF9E9C9 1%,
            #E8D2A568 28%,
            #B58A4514 66%,
            transparent 75%
        );

    box-shadow:
        inset -7px -9px 20px #76532216,
        0 9px 30px #76532212;

    animation:
        dna-bubble-rise
        var(--speed, 9s)
        ease-in-out infinite alternate;
}

.dna-bubble--one {
    --size: 42px;
    --speed: 10s;

    left: 5%;
    top: 18%;
}

.dna-bubble--two {
    --size: 17px;
    --speed: 7s;

    right: 7%;
    top: 11%;

    animation-delay: -3s;
}

.dna-bubble--three {
    --size: 25px;
    --speed: 12s;

    left: 47%;
    top: 42%;

    animation-delay: -4s;
}

.dna-bubble--four {
    --size: 51px;
    --speed: 11s;

    right: 1%;
    top: 60%;

    animation-delay: -7s;
}

.dna-bubble--five {
    --size: 14px;
    --speed: 8s;

    left: 2%;
    bottom: 20%;

    animation-delay: -5s;
}

.dna-bubble--six {
    --size: 31px;
    --speed: 13s;

    left: 68%;
    bottom: 5%;

    animation-delay: -2s;
}

/* END: Floating Gold 3D Bubbles */


/* START: Editorial Header */

.dna-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 290px;

    gap: clamp(20px, 5vw, 80px);

    align-items: center;
    margin-bottom: 46px;
}

.dna-header-copy {
    max-width: 800px;
}

.dna-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0 0 22px;

    color: #765322;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .21em;
}

.dna-eyebrow span {
    width: 43px;
    height: 1px;

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

.dna-project-name {
    margin: 0 0 14px;

    font-size: 11px;
    color: var(--dna-maroon);
    font-weight: 800;
    letter-spacing: .095em;
    line-height: 1.65;
}

.dna-header h2 {
    margin: 0;

    color: var(--dna-maroon-dark);

    font: 400
        clamp(42px, 5vw, 68px)/1.09
        Georgia, "Times New Roman", serif;

    letter-spacing: -.055em;
}

.dna-header h2 em {
    color: var(--dna-gold);
    font-weight: 400;
}

.dna-header-description {
    max-width: 680px;
    margin: 23px 0;

    color: var(--dna-muted);
    font-size: 14px;
    line-height: 1.85;
}

.dna-howto {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;

    color: #765322;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.dna-howto-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--dna-gold);

    box-shadow:
        0 0 0 6px #B58A4520;

    animation:
        dna-glimmer 3s ease-in-out infinite;
}

/* END: Editorial Header */


/* START: 3D Architectural Sculpture and Rings */

.dna-art {
    position: relative;

    width: 285px;
    height: 285px;

    perspective: 1000px;
    transform-style: preserve-3d;
}

.dna-art-halo {
    position: absolute;
    inset: 13%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #B58A4545,
            transparent 72%
        );

    filter: blur(13px);

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

.dna-orbit {
    position: absolute;
    inset: 0;

    border: 1px solid #B58A4550;
    border-radius: 50%;

    animation: dna-spin 48s linear infinite;
}

.dna-orbit--outer {
    border-style: dashed;
}

.dna-orbit--middle {
    inset: 21px;

    animation:
        dna-spin 29s linear infinite reverse;
}

.dna-orbit--inner {
    inset: 46px;

    border-color: #B58A4535;
    animation-duration: 17s;
}

.dna-orbit i {
    position: absolute;

    top: 14%;
    left: 13%;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: var(--dna-gold);

    box-shadow:
        0 0 0 7px #B58A4525,
        0 0 24px #B58A4570;
}

.dna-orbit--middle i {
    top: auto;
    left: auto;

    right: 11%;
    bottom: 12%;

    width: 6px;
    height: 6px;
}

/* 3D central sculpture */

.dna-art-sculpture {
    position: absolute;
    inset: 67px;

    transform-style: preserve-3d;

    animation:
        dna-sculpture-turn 10s ease-in-out infinite;
}

.dna-sculpture-layer {
    position: absolute;
    inset: 5px;

    clip-path: polygon(
        50% 0,
        96% 23%,
        96% 76%,
        50% 100%,
        4% 76%,
        4% 23%
    );

    border: 1px solid #B58A45;

    box-shadow:
        0 15px 40px #35080925;
}

.dna-sculpture-layer--back {
    background: #B58A4588;

    transform:
        translate3d(19px, -15px, -48px)
        scale(1.14);
}

.dna-sculpture-layer--mid {
    background:
        linear-gradient(
            125deg,
            #F0E1C4CC,
            #B58A4590
        );

    transform:
        translate3d(-9px, 9px, 3px);
}

.dna-sculpture-layer--front {
    display: grid;
    place-items: center;

    background:
        linear-gradient(
            140deg,
            #690F10,
            #350809
        );

    color: #E8D2A5;

    font: 57px Georgia, serif;

    transform:
        translateZ(40px)
        scale(.78);
}

/* Additional floating sculptural bubbles */

.dna-art-bubble {
    position: absolute;

    width: 29px;
    height: 29px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 28% 22%,
            #FFFEFA,
            #E8D2A5 31%,
            #B58A45 80%
        );

    border: 1px solid #E8D2A5;

    box-shadow:
        0 8px 25px #7653223B;

    animation:
        dna-bubble-rise 6s ease-in-out infinite alternate;
}

.dna-art-bubble--a {
    right: 7%;
    top: 20%;
}

.dna-art-bubble--b {
    left: 6%;
    bottom: 25%;

    width: 16px;
    height: 16px;

    animation-delay: -3s;
}

.dna-art-caption {
    position: absolute;
    bottom: -23px;

    width: 100%;

    text-align: center;

    color: #765322;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}

/* END: 3D Architectural Sculpture and Rings */


/* START: 3D Flip Grid and Card Structure */

.dna-grid {
    display: grid;

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

    gap: 23px;
    align-items: start;
}

.dna-card {
    min-width: 0;
    height: 427px;

    perspective: 1500px;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.dna-card:hover {
    transform: translateY(-7px);

    filter:
        drop-shadow(0 18px 26px #35080915);
}

/* Summary is the clickable flip surface */

.dna-flip {
    position: relative;
    display: block;

    width: 100%;
    height: 100%;
    margin: 0;

    cursor: pointer;
    list-style: none;

    border-radius: 17px;

    transform-style: preserve-3d;

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

.dna-flip::-webkit-details-marker {
    display: none;
}

.dna-flip::marker {
    content: "";
}

/* Flip occurs automatically when details opens */

.dna-card[open] > .dna-flip {
    transform: rotateY(180deg);
}

.dna-face {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    padding: 27px;

    border-radius: 17px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* END: 3D Flip Grid and Card Structure */


/* START: Front Face */

.dna-face--front {
    border: 1px solid #E8DFD2;

    background:
        linear-gradient(
            155deg,
            #FFFEFA,
            #F4F0E9
        );

    box-shadow:
        0 12px 37px #3508090C;
}

/* Animated top accent */

.dna-face--front::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    height: 3px;
    width: 100%;

    transform: scaleX(.3);
    transform-origin: left;

    background:
        linear-gradient(
            90deg,
            #690F10,
            #B58A45,
            transparent
        );

    transition: transform .5s ease;
}

.dna-card:hover .dna-face--front::before {
    transform: scaleX(1);
}

/* Background luxury symbol */

.dna-face--front::after {
    content: "✧";

    position: absolute;
    top: 102px;
    right: 7px;

    font: 160px Georgia, serif;
    line-height: 1;

    color: #B58A4510;

    transform: rotate(-15deg);
    pointer-events: none;
}

.dna-face-top {
    position: relative;
    z-index: 1;

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

.dna-icon {
    flex: 0 0 57px;

    width: 57px;
    height: 57px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    border: 1px solid #B58A4540;
    background: #F9EEEE;
    color: var(--dna-maroon);

    font: 32px/1 Georgia, serif;

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

.dna-card:hover .dna-icon {
    transform:
        rotate(-9deg)
        scale(1.1);

    background: #F0E1C4;
}

.dna-category {
    font-size: 10px;
    font-weight: 800;

    text-align: right;
    letter-spacing: .12em;
    line-height: 1.6;

    color: #765322;
}

.dna-face-heading {
    position: relative;
    z-index: 1;

    display: block;
    margin: 27px 0 14px;

    font: 400
        clamp(25px, 2.25vw, 31px)/1.12
        Georgia, "Times New Roman", serif;

    letter-spacing: -.04em;
    color: var(--dna-maroon-dark);
}

.dna-face-heading em {
    color: #9B7135;
    font-weight: 400;
}

.dna-face-description {
    position: relative;
    z-index: 1;

    font-size: 12.5px;
    line-height: 1.72;

    color: var(--dna-muted);
}

.dna-face-facts {
    position: relative;
    z-index: 1;

    display: grid;
    gap: 9px;

    margin: 17px 0 19px;

    color: #4B4139;

    font-size: 11px;
    line-height: 1.45;
}

.dna-face-facts span {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.dna-face-facts span::before {
    content: "✦";

    color: var(--dna-gold);

    font-size: 10px;
    margin-top: 1px;
}

/* Bottom flip indicator */

.dna-face-action {
    position: relative;
    z-index: 1;

    margin-top: auto;

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

    border-top: 1px solid #E8DFD2;
    padding-top: 16px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;

    color: var(--dna-maroon);
}

.dna-face-action b {
    display: grid;
    place-items: center;

    flex: 0 0 34px;
    height: 34px;

    border: 1px solid #B58A45;
    border-radius: 50%;

    color: var(--dna-gold);

    font: 21px Georgia, serif;

    animation:
        dna-arrow-pulse 3.5s ease-in-out infinite;
}

/* END: Front Face */


/* START: Back Face with Complete Text */

.dna-face--back {
    transform: rotateY(180deg);

    background:
        radial-gradient(
            circle at 100% 0%,
            #963A3970,
            transparent 49%
        ),
        linear-gradient(
            145deg,
            #690F10,
            #350809 80%
        );

    border: 1px solid #B58A45;

    box-shadow:
        0 17px 40px #35080935;

    color: #FFFEFA;

    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #B58A45 #350809;
}

.dna-face--back::before {
    content: "";

    position: absolute;
    inset: 10px;

    border: 1px solid #B58A4535;
    border-radius: 11px;

    pointer-events: none;
}

.dna-back-eyebrow {
    position: relative;
    z-index: 1;

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

    color: #E8D2A5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.dna-back-eyebrow b {
    font-size: 16px;
    font-weight: 400;
}

.dna-back-heading {
    position: relative;
    z-index: 1;

    margin: 14px 0 13px;

    font: 400 23px/1.15 Georgia, serif;

    color: #FFFEFA;
    letter-spacing: -.02em;
}

.dna-back-copy {
    position: relative;
    z-index: 1;

    color: #F4F0E9;

    font-size: 11.6px;
    line-height: 1.63;
}

.dna-back-list {
    position: relative;
    z-index: 1;

    display: grid;
    gap: 9px;

    margin: 14px 0 10px;

    color: #F0E1C4;

    font-size: 11.3px;
    line-height: 1.5;
}

.dna-back-list > span {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.dna-back-list > span::before {
    content: "✦";

    color: #E8D2A5;
    font-size: 10px;

    flex: none;
}

.dna-return {
    position: relative;
    z-index: 1;

    margin-top: auto;
    padding-top: 13px;

    color: #E8D2A5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

/* END: Back Face with Complete Text */


/* START: Signature Maroon Cards */

.dna-card--signature .dna-face--front {
    background:
        radial-gradient(
            circle at 100% 0%,
            #B58A4535,
            transparent 53%
        ),
        linear-gradient(
            140deg,
            #690F10,
            #350809
        );

    border-color: #B58A45;
}

.dna-card--signature .dna-face-heading {
    color: #FFFEFA;
}

.dna-card--signature .dna-face-heading em {
    color: #E8D2A5;
}

.dna-card--signature .dna-category,
.dna-card--signature .dna-face-description,
.dna-card--signature .dna-face-facts,
.dna-card--signature .dna-face-action {
    color: #F4F0E9;
}

.dna-card--signature .dna-face-action {
    border-color: #B58A4560;
}

.dna-card--signature .dna-icon {
    background: #FFFEFA12;
    color: #E8D2A5;
    border-color: #B58A4588;
}

.dna-card--signature .dna-face--front::after {
    color: #E8D2A511;
}

/* END: Signature Maroon Cards */


/* START: Closing CTA */

.dna-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    margin-top: 43px;
    padding: 29px 35px;

    border-radius: 16px;
    border: 1px solid #B58A4570;

    background:
        radial-gradient(
            circle at right,
            #963A393C,
            transparent 45%
        ),
        linear-gradient(
            108deg,
            #350809,
            #690F10
        );

    box-shadow:
        0 15px 40px #3508091D;
}

.dna-footer-eyebrow {
    color: #E8D2A5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .19em;
}

.dna-footer-text p {
    margin: 7px 0 0;

    color: #FFFEFA;

    font: 400
        clamp(24px, 2.5vw, 34px)/1.25
        Georgia, serif;
}

.dna-footer-text p em {
    color: #E8D2A5;
    font-weight: 400;
}

.dna-cta {
    flex: none;

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

    min-height: 52px;
    padding: 12px 21px;

    background:
        linear-gradient(
            115deg,
            #F0E1C4,
            #B58A45
        );

    color: #350809;

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

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

.dna-cta:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px #B58A4555;
}

.dna-cta > span {
    font-size: 21px;
    font-weight: 400;
}

.dna-disclaimer {
    margin: 15px 2px 0;

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

/* END: Closing CTA */


/* START: Animation Keyframes */

@keyframes dna-bubble-rise {
    from {
        transform:
            translate3d(0, 7px, 0)
            scale(.92);

        opacity: .55;
    }

    to {
        transform:
            translate3d(11px, -17px, 0)
            scale(1.12);

        opacity: 1;
    }
}

@keyframes dna-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dna-sculpture-turn {
    0%, 100% {
        transform:
            rotateY(-22deg)
            rotateX(13deg)
            translateY(5px);
    }

    50% {
        transform:
            rotateY(22deg)
            rotateX(-6deg)
            translateY(-10px);
    }
}

@keyframes dna-aura {
    from {
        transform: scale(.85);
        opacity: .5;
    }

    to {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes dna-glimmer {
    50% {
        box-shadow:
            0 0 0 12px #B58A4500;
    }
}

@keyframes dna-arrow-pulse {
    50% {
        transform: translate(3px, -3px);
    }
}

/* END: Animation Keyframes */


/* START: Tablet Responsive */

@media (max-width: 1100px) {

    .dna-header {
        grid-template-columns:
            minmax(0, 1fr) 245px;
    }

    .dna-art {
        width: 235px;
        height: 235px;
    }

    .dna-art-sculpture {
        inset: 55px;
    }

    .dna-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dna-face-heading {
        font-size: 30px;
    }
}

/* END: Tablet Responsive */


/* START: Mobile Responsive */

@media (max-width: 710px) {

    .dna-section {
        padding: 67px 18px 55px;
    }

    .dna-header {
        grid-template-columns: 1fr;

        gap: 12px;
        margin-bottom: 34px;
    }

    .dna-header h2 {
        font-size: clamp(39px, 9vw, 58px);
    }

    .dna-project-name {
        font-size: 10px;
    }

    .dna-art {
        justify-self: center;

        width: 222px;
        height: 222px;

        margin: 7px 0 22px;
    }

    .dna-art-sculpture {
        inset: 51px;
    }

    .dna-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .dna-card {
        height: 410px;
    }

    .dna-face-heading {
        font-size: 29px;
    }

    .dna-footer {
        flex-direction: column;
        align-items: flex-start;

        padding: 27px 24px;
    }

    .dna-cta {
        width: 100%;
    }
}

@media (max-width: 380px) {

    .dna-face {
        padding: 22px;
    }

    .dna-card {
        height: 430px;
    }

    .dna-face-heading {
        font-size: 27px;
    }

    .dna-back-copy {
        font-size: 11.2px;
    }

    .dna-back-heading {
        font-size: 21px;
    }

    .dna-back-list {
        font-size: 10.8px;
    }
}

/* END: Mobile Responsive */


/* START: Reduced Motion Accessibility */

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

    .dna-section *,
    .dna-section *::before,
    .dna-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .dna-card:hover {
        transform: none;
    }

    .dna-art-sculpture {
        transform:
            rotateY(-14deg)
            rotateX(8deg);
    }
}

/* END: Reduced Motion Accessibility */


/* ===========================================================
   END: DHARTI AANJANEYA - 3D FLIP AMENITIES STYLES
=========================================================== */

/* ======================================================
 START: DHARTI AANJANEYA GALLERY CSS
 Theme: Heritage Maroon, Antique Gold, Ivory
====================================================== */

/* START: Foundation */

.dhr-gallery {
  --maroon: #690F10;
  --dark: #350809;
  --gold: #B58A45;
  --lightgold: #E8D2A5;
  --cream: #FFFEFA;
  --paper: #F4F0E9;
  --muted: #65594E;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 22px 75px;
  color: #211C19;

  background:
    radial-gradient(
      ellipse at 92% 8%,
      #E8D2A566,
      transparent 41%
    ),
    linear-gradient(130deg, #FFFEFA, #F4F0E9);

  font: 400 15px/1.7 Arial, Helvetica, sans-serif;
}

.dhr-gallery *,
.dhr-gallery *::before,
.dhr-gallery *::after,
.dhr-modal *,
.dhr-modal *::before,
.dhr-modal *::after {
  box-sizing: border-box;
}

.dhr-gallery button,
.dhr-modal button {
  font: inherit;
  cursor: pointer;
}

.dhr-gallery a,
.dhr-modal a {
  text-decoration: none;
}

.dhr-gallery :focus-visible,
.dhr-modal :focus-visible {
  outline: 3px solid #B58A45;
  outline-offset: 3px;
}

.dhr-wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}

/* END: Foundation */


/* START: Background particles */

.dhr-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    radial-gradient(#B58A4515 1px, transparent 1px);

  background-size: 44px 44px;
}

.dhr-bg i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B58A45;

  box-shadow:
    0 0 0 7px #B58A4520,
    0 0 20px #B58A4566;

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

.dhr-bg i:nth-child(1) {
  top: 9%;
  left: 8%;
}

.dhr-bg i:nth-child(2) {
  top: 29%;
  right: 5%;
  animation-delay: -2s;
}

.dhr-bg i:nth-child(3) {
  top: 57%;
  left: 4%;
  animation-delay: -4s;
}

.dhr-bg i:nth-child(4) {
  top: 80%;
  right: 8%;
  animation-delay: -1s;
}

.dhr-bg i:nth-child(5) {
  bottom: 6%;
  left: 20%;
  animation-delay: -3s;
}

/* END: Background particles */


/* START: Heading and rotating rings */

.dhr-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 36px;
  margin-bottom: 40px;
}

.dhr-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #765322;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  margin: 0 0 22px;
}

.dhr-eyebrow span {
  width: 38px;
  height: 1px;
  background: #B58A45;
}

.dhr-location {
  margin: 0 0 12px;
  color: #690F10;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
}

.dhr-heading h2 {
  margin: 0;
  color: #350809;

  font: 400 clamp(41px, 4.9vw, 66px)/1.11
    Georgia, "Times New Roman", serif;

  letter-spacing: -.045em;
}

.dhr-heading h2 em {
  display: block;
  color: #B58A45;
  font-weight: 400;
}

.dhr-intro {
  max-width: 700px;
  color: #65594E;
  line-height: 1.85;
  margin: 20px 0 0;
  font-size: 14px;
}

/* Animated concentric rings */

.dhr-orbits {
  position: relative;
  width: 170px;
  height: 170px;
  justify-self: end;
}

.dhr-orbits span:first-child,
.dhr-orbits span:nth-child(2) {
  position: absolute;
  inset: 0;

  border: 1px dashed #B58A4580;
  border-radius: 50%;

  animation: dhr-orbit 32s linear infinite;
}

.dhr-orbits span:first-child::before {
  content: "";
  position: absolute;
  top: 11%;
  left: 12%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B58A45;
  box-shadow: 0 0 0 6px #B58A4522;
}

.dhr-orbits span:nth-child(2) {
  inset: 22px;
  border-style: solid;
  animation-duration: 21s;
  animation-direction: reverse;
}

.dhr-orbits span:nth-child(3) {
  position: absolute;
  inset: 57px;
  display: grid;
  place-items: center;
  border-radius: 50%;

  background: #690F10;
  color: #E8D2A5;
  font-size: 27px;

  box-shadow: 0 12px 28px #35080935;

  animation: dhr-pulse 4s ease-in-out infinite;
}

/* END: Heading and rotating rings */


/* START: Building and apartment feature */

.dhr-lead-grid {
  display: grid;
  grid-template-columns:
    minmax(0, .91fr)
    minmax(0, 1.09fr);
  align-items: center;
  gap: 60px;
  margin-bottom: 70px;
}

.dhr-building-wrap {
  position: relative;
  min-width: 0;
  padding: 20px 18px 32px;
  perspective: 1000px;
}

.dhr-building-ring {
  position: absolute;
  inset: 7% -7% 0;
  border: 1px solid #B58A4577;
  border-radius: 50%;
  animation: dhr-orbit 60s linear infinite;
  pointer-events: none;
}

.dhr-building-ring::before {
  content: "";
  position: absolute;
  top: 9%;
  right: 15%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #B58A45;
  box-shadow: 0 0 0 8px #B58A4520;
}

/* Building image uses vertical architectural proportions */

.dhr-building {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #B58A45;
  border-radius: 15px;
  overflow: hidden;

  background:
    linear-gradient(120deg, #E8D2A5, #FFFEFA);

  box-shadow: 0 25px 50px #35080925;

  transform: perspective(1000px) rotateY(-3deg);

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

.dhr-building:hover {
  transform:
    perspective(1000px)
    rotateY(1deg)
    translateY(-6px);

  box-shadow: 0 35px 65px #35080930;
}

.dhr-building img {
  display: block;
  width: 100%;
  height: 480px;

  object-fit: cover;
  object-position: center top;
  border-radius: 9px;

  transition: transform .65s ease;
}

.dhr-building:hover img {
  transform: scale(1.025);
}

.dhr-building-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;

  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 5px;
  padding: 18px 20px;

  background:
    linear-gradient(90deg, #350809F5, #690F10F0);

  color: #FFFEFA;
  text-align: left;

  border-radius: 0 0 9px 9px;
}

.dhr-building-caption small {
  grid-column: 1;
  letter-spacing: .15em;
  color: #E8D2A5;
  font-size: 9px;
}

.dhr-building-caption strong {
  grid-column: 1;
  font: 400 25px Georgia, serif;
}

.dhr-building-caption b {
  grid-column: 2;
  grid-row: 1 / 3;

  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border: 1px solid #B58A45;
  border-radius: 50%;

  font-size: 21px;
  color: #E8D2A5;
  font-weight: 400;
}

.dhr-stamp {
  position: absolute;
  z-index: 2;
  right: -6px;
  bottom: 3px;

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

  width: 98px;
  height: 98px;
  border-radius: 50%;

  border: 1px solid #E8D2A5;
  background: #350809;
  color: #E8D2A5;
  font-size: 25px;

  box-shadow: 0 10px 25px #35080950;
  animation: dhr-float 6s ease-in-out infinite;

  pointer-events: none;
}

.dhr-stamp small {
  font-size: 9px;
  letter-spacing: .08em;
  text-align: center;
  line-height: 1.3;
}

/* Apartment information */

.dhr-lead-copy {
  min-width: 0;
}

.dhr-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .19em;
  color: #9B7135;
  margin: 0 0 14px;
}

.dhr-lead-copy h3,
.dhr-gallery-head h3 {
  font: 400 clamp(30px, 3.2vw, 43px)/1.14
    Georgia, serif;

  letter-spacing: -.035em;
  color: #350809;
  margin: 0 0 17px;
}

.dhr-lead-copy h3 em,
.dhr-gallery-head h3 em {
  font-weight: 400;
  color: #B58A45;
}

.dhr-lead-copy > p:not(.dhr-kicker) {
  max-width: 570px;
  font-size: 13px;
  line-height: 1.85;
  color: #65594E;
  margin: 0 0 23px;
}

.dhr-residences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dhr-residence {
  display: block;
  min-width: 0;
  padding: 8px;
  text-align: left;

  background: #FFFEFA;
  border: 1px solid #E8DFD2;
  border-radius: 12px;
  overflow: hidden;

  box-shadow: 0 10px 26px #3508090F;

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

.dhr-residence:hover {
  transform: translateY(-7px);
  border-color: #B58A45;
  box-shadow: 0 20px 40px #35080920;
}

.dhr-res-photo {
  display: block;
  height: 155px;
  overflow: hidden;
  border-radius: 7px;
  background: #EEE9E2;
}

/* Important: floor plans must not be cropped */

.dhr-res-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s;
}

.dhr-residence:hover img {
  transform: scale(1.05);
}

.dhr-res-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 9px 8px;
  color: #350809;
}

.dhr-res-info small {
  color: #765322;
  font-size: 9px;
  letter-spacing: .12em;
  font-weight: 800;
}

.dhr-res-info strong {
  font: 400 clamp(22px, 2.2vw, 27px) Georgia, serif;
}

.dhr-res-info > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;

  border-top: 1px solid #E8DFD2;
  padding-top: 10px;

  font-size: 11px;
  color: #690F10;
  font-weight: 700;
}

.dhr-res-info b {
  font-size: 19px;
  font-weight: 400;
  color: #B58A45;
}

.dhr-brochure {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  margin-top: 26px;
  padding: 15px 20px;

  background: #690F10;
  color: #FFFEFA;

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

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

.dhr-brochure:hover {
  transform: translateY(-3px);
  background: #350809;
  color: #FFFEFA;
}

.dhr-brochure span {
  color: #E8D2A5;
  font-size: 19px;
}

/* END: Building and apartment feature */


/* START: 3D lifestyle gallery */

.dhr-gallery-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;

  border-bottom: 1px solid #D8CCBD;
  padding-bottom: 20px;
  margin-bottom: 23px;
}

.dhr-gallery-head h3 {
  margin-bottom: 0;
}

.dhr-gallery-head > p {
  max-width: 280px;
  margin: 0;
  color: #65594E;
  font-size: 12px;
  text-align: right;
}

/* Proper mosaic layout */

.dhr-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 215px;
  gap: 16px;
}

.dhr-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  text-align: left;

  border: 1px solid #B58A4559;
  border-radius: 12px;
  overflow: hidden;

  background: #E8DFD2;
  perspective: 900px;

  box-shadow: 0 10px 25px #35080912;

  transition: transform .35s, box-shadow .35s;
}

.dhr-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 36px #35080925;
}

.dhr-tile-wide {
  grid-column: span 2;
}

/* 3D image flipping */

.dhr-tile-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;

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

.dhr-front,
.dhr-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.dhr-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dhr-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px;

  background:
    radial-gradient(
      circle at 100% 0%,
      #963A3980,
      transparent 55%
    ),
    linear-gradient(125deg, #690F10, #350809);

  color: #FFFEFA;

  transform: rotateY(180deg);
}

.dhr-back small {
  font-size: 9px;
  color: #E8D2A5;
  letter-spacing: .17em;
  font-weight: 800;
}

.dhr-back strong {
  font: 400 clamp(19px, 2vw, 27px)/1.17
    Georgia, serif;
}

.dhr-back em {
  font-size: 11px;
  font-style: normal;
  color: #E8D2A5;
}

/* Bottom image labels */

.dhr-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;

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

  padding: 18px 15px 13px;

  background:
    linear-gradient(transparent, #350809E8);

  color: #FFFEFA;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;

  pointer-events: none;
  transition: opacity .3s;
}

.dhr-caption b {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 50%;
  border: 1px solid #B58A45;

  background: #350809AD;
  color: #E8D2A5;

  font-size: 18px;
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
  .dhr-tile:hover .dhr-tile-inner,
  .dhr-tile:focus-visible .dhr-tile-inner {
    transform: rotateY(180deg);
  }

  .dhr-tile:hover .dhr-caption,
  .dhr-tile:focus-visible .dhr-caption {
    opacity: 0;
  }
}

/* END: 3D lifestyle gallery */


/* START: Bottom CTA */

.dhr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  margin-top: 38px;
  padding: 33px 36px;

  background:
    linear-gradient(120deg, #350809, #690F10);

  border: 1px solid #B58A4566;
  border-radius: 15px;

  box-shadow: 0 15px 35px #35080920;
}

.dhr-footer small {
  color: #E8D2A5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.dhr-footer h3 {
  font: 400 clamp(25px, 2.5vw, 36px)/1.25
    Georgia, serif;

  color: #FFFEFA;
  margin: 8px 0 0;
}

.dhr-footer h3 em {
  color: #E8D2A5;
  font-weight: 400;
}

.dhr-footer a,
.dhr-modal-details > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;

  min-height: 50px;
  padding: 12px 21px;

  background:
    linear-gradient(115deg, #E8D2A5, #B58A45);

  color: #350809;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;

  transition: transform .3s;
}

.dhr-footer a:hover,
.dhr-modal-details > a:hover {
  transform: translateY(-3px);
}

.dhr-footer a span {
  font-size: 20px;
}

.dhr-fineprint {
  color: #827568;
  margin: 14px 2px 0;
  font-size: 11px;
}

/* END: Bottom CTA */


/* START: Image viewer modal */

.dhr-modal {
  position: fixed;
  inset: 0;
  margin: auto;

  width: min(1080px, calc(100% - 24px));
  max-height: 91dvh;

  padding: 0;
  overflow: auto;

  border: 1px solid #B58A45;
  border-radius: 15px;

  background: #FFFEFA;
  color: #211C19;

  box-shadow: 0 30px 100px #120F0D88;
}

.dhr-modal::backdrop {
  background: #120F0DBB;
  backdrop-filter: blur(7px);
}

.dhr-modal[open] {
  animation: dhr-modal-in .25s ease both;
}

.dhr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 19px;

  background: #350809;
  color: #E8D2A5;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.dhr-modal-head b {
  margin: 0 6px;
}

.dhr-modal-head button {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 1px solid #E8D2A566;
  border-radius: 50%;

  background: transparent;
  color: #FFFEFA;

  font-size: 29px;
  line-height: 1;
}

.dhr-modal-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(0, .7fr);

  min-height: 500px;
}

.dhr-modal-image-wrap {
  position: relative;
  display: grid;
  place-items: center;

  overflow: hidden;
  min-width: 0;
  min-height: 410px;

  background: #F4F0E9;
  cursor: zoom-in;
}

.dhr-modal-image-wrap.is-zoomed {
  cursor: grab;
  touch-action: none;
}

.dhr-modal-image-wrap.is-dragging {
  cursor: grabbing;
}

.dhr-modal-image-wrap img {
  display: block;

  max-width: 100%;
  max-height: 620px;
  width: auto;
  height: auto;

  object-fit: contain;
  user-select: none;
  pointer-events: none;

  will-change: transform;
}

/* Zoom controls */

.dhr-zoom {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;

  border: 1px solid #B58A4599;
  border-radius: 30px;

  background: #350809EE;
  color: #FFFEFA;

  white-space: nowrap;
}

.dhr-zoom button {
  height: 32px;
  min-width: 32px;

  border: 1px solid #E8D2A547;
  border-radius: 20px;

  background: #ffffff10;
  color: #E8D2A5;

  font-size: 18px;
  line-height: 1;
}

.dhr-zoom button:last-child {
  padding: 0 12px;
  font-size: 11px;
}

.dhr-zoom output {
  min-width: 39px;
  text-align: center;
  font-size: 11px;
}

/* Image details */

.dhr-modal-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 36px 29px;
}

.dhr-modal-details h3 {
  font: 400 clamp(30px, 3.1vw, 43px)/1.15
    Georgia, serif;

  margin: 7px 0 15px;
  color: #350809;
}

.dhr-modal-details p {
  margin: 0;
  color: #65594E;
  font-size: 13px;
  line-height: 1.9;
}

.dhr-modal-specs {
  display: grid;
  gap: 10px;
  margin: 21px 0;
}

.dhr-modal-specs > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;

  background: #F4F0E9;
  border: 1px solid #E8DFD2;
}

.dhr-modal-specs small {
  font-size: 9px;
  letter-spacing: .1em;
  font-weight: 800;
  color: #827568;
}

.dhr-modal-specs strong {
  font: 400 20px Georgia, serif;
  color: #690F10;
}

.dhr-modal-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  border-top: 1px solid #E8DFD2;
  padding-top: 19px;
  margin-top: auto;
}

.dhr-modal-navigation button {
  background: transparent;
  border: 1px solid #E8DFD2;

  padding: 10px;
  color: #690F10;

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

.dhr-modal-navigation span {
  font-size: 10px;
  color: #65594E;
}

.dhr-modal-details > a {
  align-self: start;
  margin-top: 22px;
}

/* END: Image viewer modal */


/* START: Animation keyframes */

@keyframes dhr-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dhr-drift {
  to {
    transform: translate(9px, -18px);
    opacity: .28;
  }
}

@keyframes dhr-float {
  50% {
    transform: translateY(-12px) rotate(8deg);
  }
}

@keyframes dhr-pulse {
  50% {
    transform: scale(1.13);
  }
}

@keyframes dhr-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }

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

/* END: Animation keyframes */


/* START: Responsive design */

@media (max-width: 1050px) {

  .dhr-lead-grid {
    gap: 28px;
  }

  .dhr-building img {
    height: 430px;
  }

  .dhr-res-photo {
    height: 128px;
  }

  .dhr-mosaic {
    grid-auto-rows: 185px;
  }

  .dhr-orbits {
    transform: scale(.8);
  }
}

@media (max-width: 780px) {

  .dhr-gallery {
    padding: 65px 18px;
  }

  .dhr-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dhr-orbits {
    display: none;
  }

  .dhr-lead-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .dhr-building-wrap {
    width: min(490px, 100%);
    margin: auto;
  }

  .dhr-building img {
    height: 420px;
  }

  .dhr-lead-copy {
    max-width: 650px;
    margin: auto;
    width: 100%;
  }

  .dhr-res-photo {
    height: 160px;
  }

  .dhr-gallery-head {
    margin-top: 55px;
  }

  .dhr-mosaic {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows: 205px;
  }

  .dhr-tile-wide {
    grid-column: span 2;
  }

  .dhr-modal-layout {
    grid-template-columns: 1fr;
  }

  .dhr-modal-image-wrap {
    min-height: 290px;
    height: min(48vh, 440px);
  }

  .dhr-modal-image-wrap img {
    max-height: 100%;
  }

  .dhr-modal-details {
    padding: 24px;
  }

  .dhr-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 460px) {

  .dhr-heading h2 {
    font-size: clamp(34px, 9vw, 45px);
  }

  .dhr-location {
    font-size: 10px;
  }

  .dhr-intro {
    font-size: 13px;
  }

  .dhr-building-wrap {
    padding: 12px 10px 18px;
  }

  .dhr-building img {
    height: 360px;
  }

  .dhr-building-caption strong {
    font-size: 21px;
  }

  .dhr-stamp {
    width: 76px;
    height: 76px;
    right: 0;
    bottom: -8px;
    font-size: 18px;
  }

  .dhr-stamp small {
    font-size: 7px;
  }

  .dhr-residences {
    gap: 9px;
  }

  .dhr-res-photo {
    height: 102px;
  }

  .dhr-res-info {
    padding: 10px 4px 5px;
  }

  .dhr-res-info strong {
    font-size: 20px;
  }

  .dhr-res-info > span {
    font-size: 9px;
  }

  .dhr-gallery-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dhr-gallery-head > p {
    text-align: left;
  }

  .dhr-mosaic {
    gap: 10px;
    grid-auto-rows: 155px;
  }

  .dhr-caption {
    padding: 15px 9px 8px;
    font-size: 8px;
    letter-spacing: .04em;
  }

  .dhr-caption b {
    width: 25px;
    height: 25px;
    font-size: 15px;
  }

  .dhr-back {
    padding: 12px;
  }

  .dhr-back strong {
    font-size: 19px;
  }

  .dhr-footer {
    padding: 27px 23px;
  }

  .dhr-footer a {
    width: 100%;
  }

  .dhr-modal {
    width: calc(100% - 12px);
    max-height: 95dvh;
  }

  .dhr-modal-head {
    padding: 9px 12px;
    font-size: 9px;
  }

  .dhr-modal-image-wrap {
    height: 38vh;
    min-height: 230px;
  }

  .dhr-modal-details {
    padding: 20px;
  }

  .dhr-modal-details h3 {
    font-size: 30px;
  }

  .dhr-modal-navigation button {
    padding: 9px 7px;
    font-size: 10px;
  }
}

/* END: Responsive design */


/* START: Reduced-motion accessibility */

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

  .dhr-gallery *,
  .dhr-gallery *::before,
  .dhr-gallery *::after,
  .dhr-modal *,
  .dhr-modal *::before,
  .dhr-modal *::after {
    animation: none !important;
    transition: none !important;
  }

  .dhr-building:hover,
  .dhr-tile:hover,
  .dhr-residence:hover {
    transform: none !important;
  }
}

/* END: Reduced-motion accessibility */

/* ======================================================
 END: DHARTI AANJANEYA GALLERY CSS
====================================================== */

/* =========================================================
 START: DHARTI AANJANEYA CONNECTIVITY CSS
 Maroon / Gold / Ivory / CSS Only
========================================================= */

/* START: Base layout and theme */

.dnc-section {
    --dnc-maroon: #690F10;
    --dnc-ink: #240506;
    --dnc-dark: #350809;
    --dnc-gold: #B58A45;
    --dnc-soft-gold: #E8D2A5;
    --dnc-ivory: #FFFEFA;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    color: var(--dnc-ivory);

    background:
        radial-gradient(
            ellipse at 78% 26%,
            #963A3947,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 8% 84%,
            #B58A451F,
            transparent 41%
        ),
        linear-gradient(
            125deg,
            #170A0C 3%,
            #350809 54%,
            #240506 100%
        );

    padding: 0 22px 48px;

    font: 400 15px/1.7 Arial, Helvetica, sans-serif;
}

.dnc-section *,
.dnc-section *::before,
.dnc-section *::after,
.dnc-photo-overlay *,
.dnc-photo-overlay *::before,
.dnc-photo-overlay *::after {
    box-sizing: border-box;
}

/* Architectural grid */

.dnc-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .4;

    background-image:
        linear-gradient(
            #E8D2A50C 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #E8D2A50C 1px,
            transparent 1px
        );

    background-size: 96px 96px;
}

.dnc-section::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #B58A45 48%,
        transparent
    );
}

.dnc-container {
    position: relative;
    z-index: 1;

    max-width: 1240px;
    margin: auto;
}

.dnc-section a,
.dnc-photo-overlay a {
    text-decoration: none;
}

.dnc-section a:focus-visible,
.dnc-photo-overlay a:focus-visible {
    outline: 3px solid #E8D2A5;
    outline-offset: 4px;
}

/* END: Base layout and theme */


/* START: Floating glass bubble animations */

.dnc-atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.dnc-bubble {
    position: absolute;

    width: var(--sz, 22px);
    aspect-ratio: 1;

    border-radius: 50%;
    border: 1px solid #E8D2A558;

    background: radial-gradient(
        circle at 30% 26%,
        #FFF7EBD9 0%,
        #E8D2A573 17%,
        #B58A451C 44%,
        #690F1005 72%
    );

    box-shadow:
        inset -8px -10px 15px #24050633,
        0 0 32px #B58A4520;

    animation:
        dnc-bubble-drift
        var(--dur, 8s)
        ease-in-out infinite alternate;
}

/* Glass reflection */

.dnc-bubble::after {
    content: "";

    position: absolute;

    left: 19%;
    top: 15%;

    width: 28%;
    height: 17%;

    border-radius: 50%;
    background: #FFFDF0AC;

    filter: blur(3px);
}

.dnc-bubble-a {
    --sz: 56px;
    --dur: 9s;

    top: 13%;
    left: 3%;
}

.dnc-bubble-b {
    --sz: 19px;
    --dur: 7s;

    top: 41%;
    left: 44%;

    animation-delay: -2s;
}

.dnc-bubble-c {
    --sz: 88px;
    --dur: 11s;

    top: 28%;
    right: -38px;

    animation-delay: -4s;
}

.dnc-bubble-d {
    --sz: 26px;
    --dur: 6s;

    top: 59%;
    right: 7%;

    animation-delay: -3s;
}

.dnc-bubble-e {
    --sz: 42px;
    --dur: 10s;

    bottom: 18%;
    left: 6%;

    animation-delay: -5s;
}

.dnc-bubble-f {
    --sz: 15px;
    --dur: 7.5s;

    bottom: 8%;
    left: 55%;

    animation-delay: -1s;
}

.dnc-bubble-g {
    --sz: 65px;
    --dur: 12s;

    bottom: 5%;
    right: 2%;

    animation-delay: -6s;
}

/* END: Floating glass bubble animations */


/* START: Top identification */

.dnc-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    padding: 27px 0 22px;

    border-bottom: 1px solid #E8D2A524;
}

.dnc-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    letter-spacing: .18em;
    font-size: 10px;
    font-weight: 800;
}

.dnc-brand > span {
    font-size: 20px;
    color: var(--dnc-gold);

    animation: dnc-glimmer 4s ease-in-out infinite;
}

.dnc-brand i {
    width: 30px;
    height: 1px;

    background: #B58A4599;
}

.dnc-toplocation {
    color: #D8CCBD;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;

    text-align: right;
}

/* END: Top identification */


/* START: Left hero content */

.dnc-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, .94fr);

    align-items: center;
    gap: clamp(24px, 4vw, 65px);

    min-height: 630px;
}

.dnc-copy {
    padding: 65px 0 60px;

    animation: dnc-enter .85s both;
}

.dnc-kicker {
    display: flex;
    align-items: center;
    gap: 13px;

    color: var(--dnc-soft-gold);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;

    margin: 0 0 24px;
}

.dnc-kicker span {
    display: inline-block;

    width: 36px;
    height: 1px;

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

.dnc-copy h2 {
    max-width: 690px;
    margin: 0;

    color: #FFFEFA;

    font: 400
        clamp(49px, 5.3vw, 79px)/1.045
        Georgia, "Times New Roman", serif;

    letter-spacing: -.052em;
}

.dnc-copy h2 em {
    display: block;

    color: #DCC18D;
    font-weight: 400;
    letter-spacing: -.057em;
}

.dnc-subtitle {
    margin: 23px 0 0;

    color: #F0E1C4;

    font: italic 400
        clamp(22px, 2.3vw, 29px)/1.3
        Georgia, serif;
}

.dnc-description {
    max-width: 540px;
    margin: 20px 0 0;

    color: #E8DFD2;

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

/* START: Buttons */

.dnc-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 33px;
}

.dnc-primary {
    min-height: 53px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 13px 20px;

    background: linear-gradient(
        110deg,
        #E8D2A5,
        #B58A45
    );

    color: #350809;

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

    position: relative;
    overflow: hidden;

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

.dnc-primary::before {
    content: "";

    position: absolute;
    inset: -40% auto -40% -40%;

    width: 24%;

    transform: skewX(-23deg);

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

    animation: dnc-sweep 7s ease-in-out infinite;
}

.dnc-primary:hover {
    transform: translateY(-4px);

    box-shadow: 0 15px 35px #B58A4555;

    color: #350809;
}

.dnc-primary span,
.dnc-text-link span {
    font-size: 20px;
    font-weight: 400;
}

.dnc-text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: #F0E1C4;

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

    border-bottom: 1px solid #B58A4599;
    padding-bottom: 8px;

    transition: color .25s;
}

.dnc-text-link:hover {
    color: #FFFEFA;
}

.dnc-undertext {
    display: flex;
    gap: 10px;
    align-items: center;

    color: #BBAA98;

    letter-spacing: .17em;
    font-size: 9px;
    font-weight: 700;

    margin: 39px 0 0;
}

.dnc-undertext span {
    color: var(--dnc-gold);
    font-size: 14px;
}

/* END: Buttons */
/* END: Left hero content */


/* START: 3D architectural image and rings */

.dnc-art {
    position: relative;

    height: 610px;
    min-width: 0;

    perspective: 1200px;
    isolation: isolate;

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

/* Golden glowing background */

.dnc-aura {
    position: absolute;
    inset: 8% 3%;
    z-index: -2;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        #B58A4544,
        transparent 67%
    );

    filter: blur(22px);

    animation: dnc-aura 7s ease-in-out infinite alternate;
}

/* Rotating rings */

.dnc-orbit {
    position: absolute;

    left: 50%;
    top: 48%;

    border-radius: 50%;

    pointer-events: none;
    z-index: -1;

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

.dnc-orbit-one {
    width: 520px;
    height: 520px;

    border: 1px dashed #B58A4552;

    animation: dnc-orbit-cw 48s linear infinite;
}

.dnc-orbit-two {
    width: 440px;
    height: 540px;

    border: 1px solid #B58A4566;

    animation: dnc-orbit-ccw 38s linear infinite;
}

.dnc-orbit-three {
    width: 365px;
    height: 470px;

    border: 1px solid #E8D2A52E;

    animation: dnc-orbit-cw 29s linear infinite;
}

/* Orbiting dots */

.dnc-orbit-one::after,
.dnc-orbit-two::after {
    content: "";

    position: absolute;
    top: 10%;
    left: 13%;

    width: 8px;
    height: 8px;

    background: #E8D2A5;
    border-radius: 50%;

    box-shadow:
        0 0 0 8px #B58A4522,
        0 0 24px #E8D2A5A3;
}

.dnc-orbit-two::after {
    top: auto;
    left: auto;

    right: 10%;
    bottom: 15%;

    width: 5px;
    height: 5px;
}

/* Outer decorative gold arch */

.dnc-arch-echo {
    position: absolute;

    width: min(365px, 77%);
    height: 495px;

    top: 52%;
    left: 53%;

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

    border: 1px solid #B58A45A0;

    border-radius:
        48% 48% 16px 16px /
        33% 33% 16px 16px;

    pointer-events: none;
}

/* Main curved 3D building frame */

.dnc-arch {
    display: block;
    position: relative;

    width: min(360px, 75%);
    height: 485px;

    padding: 5px;
    z-index: 2;

    border-radius:
        49% 49% 17px 17px /
        35% 35% 17px 17px;

    background: linear-gradient(
        132deg,
        #F0E1C4,
        #B58A45 40%,
        #765322 70%,
        #E8D2A5
    );

    box-shadow:
        0 32px 55px #120F0D88,
        0 0 0 1px #E8D2A54A;

    transform:
        perspective(1200px)
        rotateY(-5deg);

    animation:
        dnc-arch-float 8s ease-in-out infinite;

    transition: filter .3s;
}

.dnc-arch:hover {
    filter: brightness(1.12);
}

.dnc-arch-inner {
    display: block;
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;
    background: #B8D4ED;
}

.dnc-arch-inner img {
    display: block;

    width: 100%;
    height: 100%;

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

    transition: transform .65s ease;
}

.dnc-arch:hover img {
    transform: scale(1.035);
}

/* Bottom image shading */

.dnc-arch-shade {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        transparent 54%,
        #35080933 72%,
        #240506F5 100%
    );

    pointer-events: none;
}

.dnc-arch-text {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 23px;

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

    color: #FFFEFA;
    gap: 5px;
}

.dnc-arch-text small {
    font-size: 9px;
    letter-spacing: .16em;

    color: #E8D2A5;
    font-weight: 800;
}

.dnc-arch-text strong {
    font: 400 29px Georgia, serif;
}

.dnc-arch-text > span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;

    color: #F0E1C4;

    margin-top: 7px;
}

/* Floating label */

.dnc-float-label {
    position: absolute;
    z-index: 3;

    right: -4px;
    bottom: 104px;

    width: 145px;
    height: 94px;

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

    padding: 14px;

    background: linear-gradient(
        130deg,
        #690F10F0,
        #240506F5
    );

    border: 1px solid #B58A45;

    box-shadow: 0 18px 35px #120F0D83;

    backdrop-filter: blur(14px);

    animation:
        dnc-card-float 6s ease-in-out infinite;
}

.dnc-float-label b {
    font: 400 30px Georgia, serif;
    color: #E8D2A5;
}

.dnc-float-label span {
    font-size: 10px;
    font-weight: 800;

    color: #F0E1C4;

    letter-spacing: .10em;
    line-height: 1.6;
}

.dnc-art-caption {
    position: absolute;

    bottom: 15px;
    left: 50%;

    transform: translateX(-50%);

    color: #D8CCBD;

    font-size: 9px;
    letter-spacing: .18em;
    font-weight: 800;

    white-space: nowrap;
}

/* END: 3D architectural image and rings */


/* START: Connectivity cards */

.dnc-connections {
    scroll-margin-top: 30px;

    padding-top: 35px;

    border-top: 1px solid #E8D2A52A;
}

.dnc-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 27px;
}

.dnc-section-label {
    margin: 0 0 6px;

    color: #DCC18D;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.dnc-section-label > span {
    font-size: 14px;
    margin-right: 7px;
}

.dnc-section-heading h3 {
    margin: 0;

    color: #FFFEFA;

    font: 400
        clamp(34px, 3.4vw, 46px)/1.18
        Georgia, serif;

    letter-spacing: -.035em;
}

.dnc-section-heading h3 em {
    color: #DCC18D;
    font-weight: 400;
}

.dnc-section-heading > p {
    max-width: 260px;
    margin: 0;

    color: #D8CCBD;

    font-size: 12px;
    text-align: right;
}

/* Card grid */

.dnc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.dnc-point {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 235px;

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

    padding: 22px 23px 24px;

    border: 1px solid #E8D2A52B;
    border-radius: 14px;

    background: linear-gradient(
        140deg,
        #FFFEFA0C,
        #FFFEFA04
    );

    box-shadow: 0 14px 38px #120F0D28;

    backdrop-filter: blur(10px);

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

/* Gold hover line */

.dnc-point::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        #B58A45,
        #E8D2A5,
        transparent
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .5s;
}

/* Decorative circular geometry */

.dnc-point::after {
    content: "";

    position: absolute;

    right: -27px;
    top: 45px;

    width: 93px;
    height: 93px;

    border-radius: 50%;

    border: 1px solid #B58A452A;

    box-shadow: 0 0 0 20px #B58A4507;

    pointer-events: none;
}

.dnc-point:hover {
    transform:
        translateY(-8px)
        rotateX(2deg);

    border-color: #B58A458F;

    box-shadow: 0 22px 48px #120F0D55;
}

.dnc-point:hover::before {
    transform: scaleX(1);
}

.dnc-point-top {
    width: 100%;

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

    color: #BBAA98;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.dnc-point-top > span:last-child {
    font-size: 16px;
    color: #B58A45;

    animation: dnc-glimmer 4s ease-in-out infinite;
}

.dnc-time {
    display: flex;
    align-items: baseline;
    gap: 9px;

    margin: 17px 0 2px;

    color: #E8D2A5;

    font: 400
        clamp(39px, 4.6vw, 60px)/1
        Georgia, serif;

    letter-spacing: -.045em;
}

.dnc-time > span {
    font: 700 11px Arial, Helvetica, sans-serif;
    letter-spacing: .03em;

    color: #F4F0E9;
}

.dnc-time-word {
    font-size: clamp(36px, 3.8vw, 51px);
}

.dnc-point h4 {
    margin: 7px 0 0;

    color: #FFFEFA;

    font: 400 20px/1.25 Georgia, serif;
}

.dnc-point-desc {
    margin: 13px 0 0;

    color: #D8CCBD;

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

/* Featured school card */

.dnc-point-gold {
    background:
        radial-gradient(
            circle at 90% 0%,
            #B58A4540,
            transparent 45%
        ),
        linear-gradient(
            140deg,
            #690F10,
            #350809
        );

    border-color: #B58A4580;
}

/* END: Connectivity cards */


/* START: Closing quote */

.dnc-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    text-align: center;

    margin: 46px 0 5px;
    padding: 26px 20px 0;

    border-top: 1px solid #E8D2A52A;
}

.dnc-footer > span {
    color: #B58A45;
    font-size: 18px;
}

.dnc-footer p {
    margin: 0;

    color: #FFFEFA;

    font: italic 400
        clamp(18px, 2.1vw, 27px)/1.5
        Georgia, serif;
}

.dnc-footer em {
    color: #E8D2A5;
}

/* END: Closing quote */


/* START: CSS-only building image popup */

.dnc-photo-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    place-items: center;

    padding: 18px;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity .3s,
        visibility .3s;
}

.dnc-photo-overlay:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.dnc-overlay-bg {
    position: absolute;
    inset: 0;

    background: #120F0DDF;

    backdrop-filter: blur(9px);
}

.dnc-overlay-panel {
    position: relative;
    z-index: 1;

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

    overflow: auto;

    width: min(890px, 100%);
    max-height: 92dvh;

    border: 1px solid #B58A45;
    border-radius: 16px;

    background: #240506;
    color: #FFFEFA;

    box-shadow: 0 35px 90px #0009;

    transform:
        translateY(18px)
        scale(.985);

    transition: transform .35s;
}

.dnc-photo-overlay:target .dnc-overlay-panel {
    transform:
        translateY(0)
        scale(1);
}

.dnc-overlay-close {
    position: absolute;
    z-index: 4;

    right: 13px;
    top: 13px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid #E8D2A599;
    border-radius: 50%;

    background: #350809;
    color: #FFFEFA;

    font-size: 29px;
    line-height: 1;
}

.dnc-overlay-image {
    background: #E8DFD2;
    min-width: 0;
    min-height: 400px;
}

.dnc-overlay-image img {
    display: block;

    width: 100%;
    height: 100%;
    max-height: 660px;

    object-fit: contain;
}

.dnc-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: clamp(25px, 4vw, 50px);

    min-width: 0;
}

.dnc-overlay-content .dnc-kicker {
    font-size: 9px;
    line-height: 1.6;
}

.dnc-overlay-content h3 {
    margin: 0 0 13px;

    font: 400
        clamp(32px, 3.7vw, 48px)/1.12
        Georgia, serif;
}

.dnc-overlay-content h3 em {
    color: #E8D2A5;
}

.dnc-overlay-content p {
    color: #E8DFD2;

    font-size: 13px;
    line-height: 1.85;

    margin: 0 0 16px;
}

.dnc-overlay-content .dnc-overlay-location {
    color: #E8D2A5;

    letter-spacing: .1em;
    font-size: 10px;
    font-weight: 700;
}

.dnc-overlay-cta {
    display: inline-block;

    background: linear-gradient(
        110deg,
        #E8D2A5,
        #B58A45
    );

    color: #350809;

    padding: 12px 17px;

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

    margin-top: 12px;
}

/* END: CSS-only building image popup */


/* START: CSS animation keyframes */

@keyframes dnc-bubble-drift {
    from {
        transform:
            translate3d(0, 12px, 0)
            scale(.92);

        opacity: .5;
    }

    to {
        transform:
            translate3d(15px, -19px, 0)
            scale(1.08);

        opacity: .9;
    }
}

@keyframes dnc-orbit-cw {
    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes dnc-orbit-ccw {
    to {
        transform:
            translate(-50%, -50%)
            rotate(-360deg);
    }
}

@keyframes dnc-aura {
    from {
        opacity: .4;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes dnc-arch-float {
    0%, 100% {
        transform:
            perspective(1200px)
            rotateY(-5deg)
            translateY(4px);
    }

    50% {
        transform:
            perspective(1200px)
            rotateY(3deg)
            translateY(-9px);
    }
}

@keyframes dnc-card-float {
    50% {
        transform:
            translateY(-11px)
            rotate(-3deg);
    }
}

@keyframes dnc-glimmer {
    50% {
        filter: brightness(1.45);
        opacity: .55;
    }
}

@keyframes dnc-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes dnc-sweep {
    0%, 60%, 100% {
        left: -40%;
    }

    76% {
        left: 128%;
    }
}

/* END: CSS animation keyframes */


/* START: Tablet responsive */

@media (max-width: 980px) {

    .dnc-hero {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dnc-copy {
        padding: 65px 0 8px;
        max-width: 750px;
    }

    .dnc-art {
        height: 585px;
        max-width: 590px;
        width: 100%;
        margin: 0 auto;
    }

    .dnc-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dnc-toplocation {
        max-width: 280px;
    }
}

/* END: Tablet responsive */


/* START: Mobile responsive */

@media (max-width: 620px) {

    .dnc-section {
        padding: 0 16px 37px;
    }

    .dnc-topbar {
        padding: 19px 0 15px;
    }

    .dnc-brand {
        gap: 8px;
        font-size: 9px;
        letter-spacing: .10em;
    }

    .dnc-brand i {
        width: 18px;
    }

    .dnc-toplocation {
        display: none;
    }

    .dnc-copy {
        padding: 53px 0 7px;
    }

    .dnc-kicker {
        font-size: 9px;
        margin-bottom: 19px;
        letter-spacing: .13em;
    }

    .dnc-copy h2 {
        font-size: clamp(41px, 10.2vw, 57px);
    }

    .dnc-subtitle {
        font-size: 22px;
    }

    .dnc-description {
        font-size: 13px;
        line-height: 1.85;
    }

    .dnc-action-row {
        gap: 16px;
        margin-top: 27px;
    }

    .dnc-primary {
        font-size: 11px;
        padding: 12px 15px;
    }

    .dnc-undertext {
        font-size: 8px;
        letter-spacing: .1em;
        margin-top: 26px;
    }

    .dnc-art {
        height: 492px;
    }

    .dnc-arch {
        width: min(300px, 76%);
        height: 410px;
    }

    .dnc-arch-echo {
        width: min(300px, 76%);
        height: 420px;
    }

    .dnc-orbit-one {
        width: 440px;
        height: 440px;
    }

    .dnc-orbit-two {
        width: 360px;
        height: 450px;
    }

    .dnc-orbit-three {
        width: 310px;
        height: 390px;
    }

    .dnc-arch-text {
        left: 16px;
        bottom: 18px;
    }

    .dnc-arch-text strong {
        font-size: 23px;
    }

    .dnc-float-label {
        right: 0;
        bottom: 66px;

        width: 117px;
        height: 76px;

        padding: 11px;
        gap: 7px;
    }

    .dnc-float-label b {
        font-size: 22px;
    }

    .dnc-float-label span {
        font-size: 8px;
    }

    .dnc-art-caption {
        bottom: 0;
        font-size: 8px;
    }

    .dnc-section-heading {
        display: block;
    }

    .dnc-section-heading > p {
        margin-top: 10px;
        text-align: left;
    }

    .dnc-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dnc-point {
        min-height: 0;
        padding: 20px 21px;
    }

    .dnc-time {
        font-size: 49px;
        margin-top: 10px;
    }

    .dnc-point h4 {
        font-size: 20px;
    }

    .dnc-footer {
        gap: 12px;
        margin-top: 30px;
    }

    .dnc-footer p {
        font-size: 18px;
    }

    .dnc-overlay-panel {
        grid-template-columns: 1fr;
    }

    .dnc-overlay-image {
        min-height: 0;
        height: 38vh;
    }

    .dnc-overlay-image img {
        max-height: 100%;
    }

    .dnc-overlay-content {
        padding: 25px 23px 30px;
    }
}

@media (max-width: 360px) {

    .dnc-primary {
        width: 100%;
    }

    .dnc-art {
        height: 450px;
    }

    .dnc-arch {
        height: 378px;
    }

    .dnc-arch-echo {
        height: 388px;
    }

    .dnc-float-label {
        right: -3px;
        bottom: 63px;
    }
}

/* END: Mobile responsive */


/* START: Reduced motion accessibility */

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

    .dnc-section *,
    .dnc-section *::before,
    .dnc-section *::after,
    .dnc-photo-overlay *,
    .dnc-photo-overlay *::before,
    .dnc-photo-overlay *::after {
        animation: none !important;
        transition: none !important;
    }

    .dnc-arch {
        transform: none !important;
    }
}

/* END: Reduced motion accessibility */


/* =========================================================
 END: DHARTI AANJANEYA CONNECTIVITY CSS
========================================================= */