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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", Arial, sans-serif;
    background: #f7f3ea;
    color: #171510;
}

a {
    text-decoration: none;
}








/* =========================
   PREMIUM GOLD SPLASH SCREEN
========================= */

#websiteSplash {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 999999;

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

    background:
        radial-gradient(
            circle at center,
            rgba(205, 170, 75, 0.16) 0%,
            rgba(205, 170, 75, 0.05) 30%,
            transparent 60%
        ),
        linear-gradient(
            135deg,
            #10140e 0%,
            #1b2117 50%,
            #0d110c 100%
        );

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

/* Gold border */
#websiteSplash::before {
    content: "";
    position: absolute;
    inset: 15px;

    border: 1px solid rgba(210, 174, 77, 0.2);

    pointer-events: none;
}

/* Center */
.splash-inner {
    width: 90%;
    max-width: 500px;

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

    text-align: center;
}

/* Logo */
.splash-logo {
    width: clamp(120px, 28vw, 210px);
    height: auto;

    object-fit: contain;

    margin-bottom: 28px;

    opacity: 0;
    transform: scale(0.8);

    filter:
        drop-shadow(0 0 15px rgba(210, 174, 77, 0.3))
        drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4));

    animation: splashLogo 1.2s cubic-bezier(.16,1,.3,1) forwards;
}

/* Brand text */
.splash-title {
    color: #d8b45c;

    font-size: clamp(18px, 4vw, 28px);
    font-weight: 500;

    letter-spacing: 5px;
    text-transform: uppercase;

    margin-bottom: 25px;

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

    animation: splashText 1s ease 0.5s forwards;
}

/* Loading line */
.splash-loader {
    width: clamp(120px, 30vw, 180px);
    height: 2px;

    background: rgba(216, 180, 92, 0.15);

    overflow: hidden;

    opacity: 0;

    animation: splashText 1s ease 0.8s forwards;
}

.splash-loader span {
    display: block;

    width: 40%;
    height: 100%;

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

    animation: splashLoading 1.5s ease-in-out infinite;
}

/* Hide splash */
#websiteSplash.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

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

@keyframes splashLogo {

    0% {
        opacity: 0;
        transform: scale(0.8);
        filter: blur(10px);
    }

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

@keyframes splashText {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes splashLoading {

    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(400%);
    }
}

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

@media (max-width: 480px) {

    #websiteSplash::before {
        inset: 10px;
    }

    .splash-logo {
        width: 145px;
        margin-bottom: 22px;
    }

    .splash-title {
        font-size: 16px;
        letter-spacing: 4px;
        margin-bottom: 22px;
    }

    .splash-loader {
        width: 130px;
    }
}

/* Small height devices */
@media (max-height: 600px) {

    .splash-logo {
        width: 110px;
        margin-bottom: 15px;
    }

    .splash-title {
        margin-bottom: 15px;
    }
}





#pledgedgold {
    scroll-margin-top: 285px;
}





.about-section,
.services-section,
.valuation-section,
.how-it-works-section,
.faq-section,
.testimonials-section {
    font-family: "Manjari", sans-serif;
    font-weight: 700;
}





/* =========================================
   MALAYALAM FONT — MANJARI
========================================= */

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

/* All Malayalam content */
.hero,
.about-section,
.process-section,
.services-section,
.trust-section,
.faq-section {

    font-family: "Manjari", sans-serif;
}


/* Keep English elements in DM Sans */
.hero .hero-primary-btn,
.hero .hero-secondary-btn,
.contact-section,
.site-header,
.site-footer {

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






/* =========================================
   HERO - MALAYALAM FONT
========================================= */

.hero .hero-eyebrow {
    font-family: "Manjari", sans-serif !important;
}

.hero h1 {
    font-family: "Manjari", sans-serif !important;
}

.hero .hero-description {
    font-family: "Manjari", sans-serif !important;
}

.hero .hero-primary-btn,
.hero .hero-secondary-btn {
    font-family: "Manjari", sans-serif !important;
}

.hero .hero-trust {
    font-family: "Manjari", sans-serif !important;
}

.hero .gold-card {
    font-family: "Manjari", sans-serif !important;
}

.hero .floating-badge {
    font-family: "Manjari", sans-serif !important;
}

.hero .hero-marquee {
    font-family: "Manjari", sans-serif !important;
}





/* =========================================
   MALAYALAM SPACING FIX
========================================= */

.hero h1,
.hero-description,
.about-section,
.services-section,
.valuation-section,
.how-it-works-section,
.faq-section,
.testimonials-section {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: left;
}




















/* =========================================================
   UNIVERSAL MALAYALAM TYPOGRAPHY FIX
   Add this at the VERY END of your CSS
========================================================= */

/* Malayalam sections */
.hero,
.about-section,
.services-section,
.valuation-section,
.how-it-works-section,
.process-section,
.trust-section,
.testimonials-section,
.faq-section,
.gold-info {

    font-family: "Manjari", sans-serif;
}


/* All text elements inside Malayalam sections */
.hero *,
.about-section *,
.services-section *,
.valuation-section *,
.how-it-works-section *,
.process-section *,
.trust-section *,
.testimonials-section *,
.faq-section *,
.gold-info * {

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}


/* Malayalam headings */
.hero h1,
.hero h2,
.hero h3,
.about-section h1,
.about-section h2,
.about-section h3,
.services-section h1,
.services-section h2,
.services-section h3,
.valuation-section h1,
.valuation-section h2,
.valuation-section h3,
.how-it-works-section h1,
.how-it-works-section h2,
.how-it-works-section h3,
.process-section h1,
.process-section h2,
.process-section h3,
.trust-section h1,
.trust-section h2,
.trust-section h3,
.testimonials-section h1,
.testimonials-section h2,
.testimonials-section h3,
.faq-section h1,
.faq-section h2,
.faq-section h3 {

    font-family: "Manjari", sans-serif !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}


/* Malayalam paragraphs, spans, labels, buttons */
.hero p,
.hero span,
.hero strong,
.hero small,
.about-section p,
.about-section span,
.about-section strong,
.about-section small,
.services-section p,
.services-section span,
.services-section strong,
.services-section small,
.valuation-section p,
.valuation-section span,
.valuation-section strong,
.valuation-section small,
.how-it-works-section p,
.how-it-works-section span,
.how-it-works-section strong,
.how-it-works-section small,
.process-section p,
.process-section span,
.process-section strong,
.process-section small,
.trust-section p,
.trust-section span,
.trust-section strong,
.trust-section small,
.testimonials-section p,
.testimonials-section span,
.testimonials-section strong,
.testimonials-section small,
.faq-section p,
.faq-section span,
.faq-section strong,
.faq-section small,
.gold-info span,
.gold-info strong {

    font-family: "Manjari", sans-serif !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}













/* =========================================
   ENGLISH TYPOGRAPHY
========================================= */

header,
header *,
.hero-section,
.hero-section *,
footer,
footer * {
    font-family: "DM Sans", sans-serif;
}





/* LOGO */
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    width: 80px;
    height: auto;
    display: block;
    object-fit: contain;
}










/* =========================================
   VARIABLES
========================================= */

:root {

    --black: #11100d;
    --black-soft: #181611;

    --gold: #c9a45c;
    --gold-light: #e4c77f;

    --cream: #f7f3ea;

    --white: #ffffff;

    --muted: #a9a398;

    --border: rgba(255, 255, 255, 0.11);
}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 16px 0;

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

}


/* HEADER AFTER SCROLL */

.site-header.scrolled {

    padding: 9px 0;

}


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

.header-container {

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

    margin: auto;

    position: relative;

}


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

.navbar {

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 8px 0 22px;

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

    border-radius: 18px;

    background: rgba(17, 16, 13, 0.82);

    backdrop-filter: blur(18px);

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

    transition: 0.4s ease;

}


/* =========================================
   BRAND
========================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    color: white;

    min-width: 190px;

}


/* LOGO CIRCLE */

.brand-symbol {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: grid;

    place-items: center;

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

    color: var(--gold-light);

    font-size: 18px;

    position: relative;

    overflow: hidden;

}


/* SHINE */

.brand-symbol::after {

    content: "";

    position: absolute;

    width: 60px;

    height: 100%;

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

    transform: translateX(-100%) skewX(-20deg);

    animation: logoShine 4s infinite;

}


@keyframes logoShine {

    0% {
        transform: translateX(-120%) skewX(-20deg);
    }

    70% {
        transform: translateX(-120%) skewX(-20deg);
    }

    90% {
        transform: translateX(120%) skewX(-20deg);
    }

    100% {
        transform: translateX(120%) skewX(-20deg);
    }

}


/* BRAND TEXT */

.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}

.brand-text strong {

    font-size: 15px;

    letter-spacing: 2px;

    font-weight: 600;

}

.brand-text small {

    margin-top: 6px;

    font-size: 8px;

    letter-spacing: 2.5px;

    color: var(--gold-light);

}


/* =========================================
   DESKTOP NAV
========================================= */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-link {

    position: relative;

    padding: 8px 0;

    font-size: 13px;

    color: #d7d2c9;

    transition: 0.3s ease;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    background: var(--gold-light);

    transition: width 0.3s ease;

}


.nav-link:hover,
.nav-link.active {

    color: var(--gold-light);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


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

.header-actions {

    display: flex;

    align-items: center;

    gap: 9px;

}


/* =========================================
   VALUATION STATUS
========================================= */

.valuation-status {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 10px 13px;

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

    border-radius: 100px;

    color: #d4cec4;

    font-size: 10px;

}


/* STATUS DOT */

.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #78c976;

    animation: statusPulse 2s infinite;

}


@keyframes statusPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(120,201,118,0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(120,201,118,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(120,201,118,0);
    }

}


/* =========================================
   MAIN CTA
========================================= */

.value-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 17px;

    border-radius: 100px;

    background: var(--gold);

    color: #17130d;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

    position: relative;

    overflow: hidden;

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

}


.value-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

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

    transform: skewX(-20deg);

}


.value-button:hover::before {

    animation: buttonShine 0.7s ease;

}


@keyframes buttonShine {

    from {
        left: -120%;
    }

    to {
        left: 150%;
    }

}


.value-button:hover {

    transform: translateY(-2px);

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

}


.value-button span {

    font-size: 15px;

    transition: transform 0.3s ease;

}


.value-button:hover span {

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

}


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

.menu-toggle {

    width: 43px;

    height: 43px;

    border-radius: 12px;

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

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

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

}


.menu-toggle span {

    width: 18px;

    height: 1px;

    background: white;

    transition: 0.3s ease;

}


.menu-toggle.active span:first-child {

    transform:
        translateY(3px)
        rotate(45deg);

}


.menu-toggle.active span:last-child {

    transform:
        translateY(-3px)
        rotate(-45deg);

}


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

.mobile-menu {

    position: absolute;

    top: 77px;

    left: 0;

    width: 100%;

    padding: 8px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-12px);

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

}


.mobile-menu.open {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.mobile-menu-inner {

    padding: 9px;

    background: rgba(20,18,14,0.98);

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

    border-radius: 18px;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.35);

}


.mobile-menu a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 14px;

    color: #e7e1d7;

    font-size: 14px;

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

}


.mobile-menu a small {

    color: var(--gold-light);

    font-size: 9px;

    letter-spacing: 1px;

}


.mobile-menu a:hover {

    color: var(--gold-light);

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

}


/* MOBILE CTA */

.mobile-menu .mobile-cta {

    margin-top: 8px;

    border: none;

    border-radius: 12px;

    justify-content: center;

    gap: 8px;

    background: var(--gold);

    color: #17130d;

    font-weight: 600;

}


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

.header-space {

    height: 100px;

}


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

@media (max-width: 1100px) {

    .desktop-nav {

        gap: 18px;

    }

    .desktop-nav .nav-link {

        font-size: 12px;

    }

    .valuation-status {

        display: none;

    }

}


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

@media (max-width: 850px) {

    .desktop-nav {

        display: none;

    }

    .value-button {

        display: none;

    }

    .menu-toggle {

        display: flex;

    }

    .navbar {

        height: 62px;

        padding:
            0 7px 0 13px;

        border-radius: 16px;

    }

    .brand {

        min-width: auto;

    }

}


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

@media (max-width: 500px) {

    .site-header {

        padding: 10px 0;

    }

    .site-header.scrolled {

        padding: 7px 0;

    }

    .header-container {

        width: calc(100% - 24px);

    }

    .navbar {

        height: 60px;

    }

    .brand-symbol {

        width: 35px;

        height: 35px;

        font-size: 15px;

    }

    .brand-text strong {

        font-size: 12px;

        letter-spacing: 1.7px;

    }

    .brand-text small {

        font-size: 6.5px;

        letter-spacing: 1.8px;

    }

    .menu-toggle {

        width: 40px;

        height: 40px;

    }

    .mobile-menu {

        top: 69px;

    }

    .header-space {

        height: 82px;

    }

}


/* =========================================
   VERY SMALL DEVICES
========================================= */

@media (max-width: 350px) {

    .brand-text small {

        display: none;

    }

}






.hero h1 {
    font-family: "Anek Malayalam", sans-serif;
}














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

.hero {
    min-height: calc(100vh - 20px);

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );

    color: #fff;

    padding: 90px 0 0;

    /* BLACKISH DEPTH */
    box-shadow:
        inset 0 -120px 140px rgba(0, 0, 0, .50),
        inset 0 80px 110px rgba(0, 0, 0, .20),
        0 25px 80px rgba(0, 0, 0, .55);
}


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

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

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255, 225, 170, .12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 225, 170, .12) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

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

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


/* =========================================
   GLOW
========================================= */

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


.hero-glow-1 {
    width: 380px;
    height: 380px;

    background:
        rgba(255, 210, 100, .25);

    top: 15%;
    right: 12%;
}


.hero-glow-2 {
    width: 300px;
    height: 300px;

    background:
        rgba(170, 0, 70, .40);

    bottom: 0;
    left: 3%;
}


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

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

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

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 60px;

    padding-bottom: 110px;
}


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

.hero-content {
    animation: heroContentIn 1s ease forwards;
}


@keyframes heroContentIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

}


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

.hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    border: 1px solid
        rgba(255, 220, 130, .60);

    border-radius: 100px;

    color: #FFE5A0;

    background:
        rgba(255, 220, 140, .10);

    font-size: 11px;

    letter-spacing: 2.5px;

    margin-bottom: 25px;

    box-shadow:
        inset 0 0 18px
        rgba(255, 210, 100, .08),

        0 0 20px
        rgba(255, 210, 100, .05);
}


.eyebrow-dot {
    width: 6px;
    height: 6px;

    background: #F2C85B;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(255, 210, 100, .12),

        0 0 12px
        rgba(255, 210, 100, .55);
}


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

.hero h1 {
    margin: 0;

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

    line-height: .94;

    letter-spacing: -4px;

    font-weight: 500;

    color: #FFF7E8;

    text-shadow:
        0 4px 30px
        rgba(0, 0, 0, .40);
}


.hero h1 span {
    color: transparent;
    background:
        linear-gradient(
            110deg,
            #B98532 0%,
            #FFE8A3 35%,
            #F3CF72 55%,
            #C4913B 78%,
            #FFE7A0 100%
        );

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

    filter:
        drop-shadow(
            0 5px 20px
            rgba(255, 210, 100, .20)
        );
}


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

.hero-description {
    max-width: 620px;

    margin-top: 27px;

    color: #F7E5EB;

    font-size: 20px;

    line-height: 1.8;

    font-weight: 400;

    text-shadow:
        0 2px 12px
        rgba(0, 0, 0, .30);
}


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

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 36px;
}


.hero-primary-btn,
.hero-secondary-btn {
    min-height: 58px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 0 28px;

    border-radius: 100px;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: .2px;

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


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

.hero-primary-btn {
    background:
        linear-gradient(
            135deg,
            #FFF1B8 0%,
            #F1D078 35%,
            #D5A447 65%,
            #A96F22 100%
        );

    color: #4A071F;

    border: 1px solid
        rgba(255, 240, 180, .80);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .35),

        0 0 25px
        rgba(255, 210, 100, .18),

        inset 0 1px 2px
        rgba(255,255,255,.80);

    text-shadow:
        0 1px 1px
        rgba(255,255,255,.25);
}


.hero-primary-btn:hover {
    transform:
        translateY(-4px)
        scale(1.025);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, .45),

        0 0 35px
        rgba(255, 210, 100, .28),

        inset 0 1px 2px
        rgba(255,255,255,.90);
}


.hero-primary-btn span {
    font-size: 18px;
}


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

.hero-secondary-btn {
    min-height: 58px;

    border: 1px solid
        rgba(255, 220, 150, .55);

    color: #FFF2D8;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(0,0,0,.25)
        );

    backdrop-filter: blur(14px);

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

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, .28),

        inset 0 1px
        rgba(255,255,255,.12);
}


.hero-secondary-btn:hover {
    transform:
        translateY(-4px);

    background:
        linear-gradient(
            135deg,
            rgba(255, 220, 140, .16),
            rgba(0, 0, 0, .28)
        );

    border-color:
        rgba(255, 220, 140, .85);

    color: #FFE9AF;

    box-shadow:
        0 16px 35px
        rgba(0, 0, 0, .38),

        0 0 25px
        rgba(255, 210, 100, .12);
}


.whatsapp-icon {
    font-size: 15px;

    color: #8EE39A;
}


/* =========================================
   TRUST
========================================= */

.hero-trust {
    display: flex;

    align-items: center;

    margin-top: 45px;
}


.trust-item {
    display: flex;

    align-items: center;

    gap: 9px;
}


.trust-item strong {
    display: block;

    font-size: 10px;

    font-weight: 600;

    color: #FFF0DF;
}


.trust-item small {
    display: block;

    margin-top: 3px;

    font-size: 8px;

    color: #DDBBC8;
}


.trust-icon {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border: 1px solid
        rgba(255, 215, 120, .48);

    border-radius: 50%;

    color: #F5D27B;

    background:
        rgba(255, 210, 100, .08);

    font-size: 10px;

    box-shadow:
        0 0 15px
        rgba(255, 210, 100, .06);
}


.trust-line {
    width: 1px;
    height: 28px;

    margin: 0 20px;

    background:
        rgba(255, 225, 200, .28);
}


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

.hero-visual {
    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;
}


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

.gold-card {
    width: min(430px, 90%);

    min-height: 500px;

    padding: 30px;

    border: 1.5px solid
        rgba(255, 215, 120, .55);

    border-radius: 28px;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background:
        linear-gradient(
            145deg,
            rgba(255, 240, 205, .18),
            rgba(20, 5, 12, .58)
        );

    backdrop-filter: blur(18px);

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

    box-shadow:

        0 40px 100px
        rgba(0, 0, 0, .60),

        0 0 60px
        rgba(255, 210, 100, .12),

        inset 0 1px
        rgba(255,255,255,.20);

    transform:
        perspective(1000px)
        rotateY(-7deg)
        rotateX(3deg);

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


/* =========================================
   CARD INNER BORDER
========================================= */

.gold-card::after {
    content: "";

    position: absolute;

    inset: 10px;

    border: 1px solid
        rgba(255, 220, 140, .16);

    border-radius: 20px;

    pointer-events: none;
}


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

@keyframes cardFloat {

    0%,100% {
        transform:
            perspective(1000px)
            rotateY(-7deg)
            rotateX(3deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1000px)
            rotateY(-4deg)
            rotateX(1deg)
            translateY(-12px);
    }

}


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

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

    position: absolute;

    width: 160%;
    height: 80px;

    left: -40%;
    top: 45%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 235, 180, .15),
            transparent
        );

    transform: rotate(-25deg);

    animation:
        cardShine 5s infinite;

    pointer-events: none;

    z-index: 2;
}


@keyframes cardShine {

    0%,45% {
        transform:
            translateX(-50%)
            rotate(-25deg);
    }

    70%,100% {
        transform:
            translateX(50%)
            rotate(-25deg);
    }

}


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

.card-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #E2C0CB;

    font-size: 8px;

    letter-spacing: 2px;

    position: relative;

    z-index: 3;
}


.live-status {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #F5DCE4;
}


.live-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #8EE39A;

    box-shadow:
        0 0 10px
        rgba(142, 227, 154, .65);
}


/* =========================================
   GOLD SYMBOL
========================================= */

.gold-symbol {
    width: 180px;
    height: 180px;

    margin: auto;

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-family: Georgia, serif;

    font-size: 75px;

    font-weight: 400;

    color: #5A0029;

    background:
        radial-gradient(
            circle at 30% 25%,
            #FFF2C5 0%,
            #F4D27B 28%,
            #D1A956 58%,
            #9A6B2F 100%
        );

    box-shadow:

        0 0 0 12px
        rgba(255, 215, 120, .08),

        0 0 80px
        rgba(255, 210, 100, .25),

        inset 0 0 25px
        rgba(255,255,255,.20);
}


.gold-symbol::after {
    content: "";

    position: absolute;

    inset: 13px;

    border: 1px solid
        rgba(255,255,255,.48);

    border-radius: 50%;
}


/* =========================================
   GOLD INFO
========================================= */

.gold-info {
    text-align: center;

    position: relative;

    z-index: 3;
}


.gold-info span {
    display: block;

    color: #E3C1CC;

    font-size: 8px;

    letter-spacing: 3px;
}


.gold-info strong {
    display: block;

    margin-top: 7px;

    color: #F5D37E;

    font-size: 23px;

    letter-spacing: 5px;

    font-weight: 400;

    text-shadow:
        0 0 20px
        rgba(255, 210, 100, .18);
}


/* =========================================
   DIVIDER
========================================= */

.gold-divider {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 120, .42),
            transparent
        );

    margin: 25px 0;
}


/* =========================================
   VALUATION ROW
========================================= */

.valuation-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

    position: relative;

    z-index: 3;
}


.valuation-row small {
    display: block;

    color: #D9AEBB;

    font-size: 8px;

    letter-spacing: 1px;
}


.valuation-row strong {
    display: block;

    margin-top: 7px;

    color: #FFF0D2;

    font-size: 14px;

    font-weight: 400;
}


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

.card-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #D9AEBB;

    font-size: 8px;

    position: relative;

    z-index: 3;
}


.card-arrow {
    width: 28px;
    height: 28px;

    border: 1px solid
        rgba(255, 215, 120, .45);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #F0CE7E;

    background:
        rgba(255, 210, 100, .06);

    font-size: 13px;

    box-shadow:
        0 0 15px
        rgba(255, 210, 100, .05);
}


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

.visual-orbit {
    position: absolute;

    border: 1px solid
        rgba(255, 215, 120, .22);

    border-radius: 50%;

    pointer-events: none;
}


.orbit-one {
    width: 500px;
    height: 500px;

    animation:
        orbitRotate 18s linear infinite;
}


.orbit-two {
    width: 620px;
    height: 620px;

    border-style: dashed;

    border-color:
        rgba(255, 225, 160, .18);

    opacity: .55;

    animation:
        orbitRotate 28s linear infinite reverse;
}


@keyframes orbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================
   FLOATING BADGES
========================================= */

.floating-badge {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(70, 5, 30, .92),
            rgba(12, 5, 9, .90)
        );

    border: 1px solid
        rgba(255, 215, 120, .42);

    backdrop-filter: blur(15px);

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

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, .45),

        0 0 25px
        rgba(255, 210, 100, .06),

        inset 0 1px
        rgba(255,255,255,.10);

    animation:
        badgeFloat 4s ease-in-out infinite;

    z-index: 5;
}


.badge-one {
    top: 90px;
    left: 0;
}


.badge-two {
    bottom: 90px;
    right: 0;

    animation-delay: 1.3s;
}


@keyframes badgeFloat {

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

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

}


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

.badge-icon {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255, 210, 100, .10);

    color: #F0CE7E;

    font-size: 9px;

    border: 1px solid
        rgba(255, 215, 120, .15);
}


.floating-badge strong {
    display: block;

    color: #FFF0DF;

    font-size: 10px;

    font-weight: 600;
}


.floating-badge small {
    display: block;

    color: #D5AEBB;

    font-size: 8px;

    margin-top: 3px;
}


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

.hero-marquee {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;

    overflow: hidden;

    border-top:
        1px solid
        rgba(255, 225, 190, .24);

    border-bottom:
        1px solid
        rgba(255, 225, 190, .24);

    padding: 14px 0;

    background:
        rgba(10, 3, 7, .48);

    backdrop-filter: blur(8px);

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


.marquee-track {
    display: flex;

    align-items: center;

    width: max-content;

    gap: 30px;

    animation:
        marqueeMove 30s linear infinite;
}


.marquee-track span {
    color: #E1BEC9;

    font-size: 8px;

    letter-spacing: 2.5px;

    white-space: nowrap;
}


.marquee-track b {
    color: #F0CE7E;

    font-size: 9px;
}


@keyframes marqueeMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


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

@media (max-width: 1050px) {

    .hero-container {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 30px;

        padding-top: 50px;
    }


    .hero-content {
        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .hero-description {
        max-width: 650px;
    }


    .hero-trust {
        justify-content: center;
    }


    .hero-visual {
        min-height: 500px;
    }

}


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

@media (max-width: 600px) {

    .hero {
        min-height: auto;

        padding-top: 80px;

        box-shadow:
            inset 0 -80px 100px rgba(0, 0, 0, .50),
            inset 0 50px 80px rgba(0, 0, 0, .20),
            0 20px 50px rgba(0, 0, 0, .50);
    }


    .hero-container {
        width: calc(100% - 30px);

        padding-bottom: 80px;

        gap: 10px;
    }


    .hero-eyebrow {
        font-size: 10.3px;

        letter-spacing: 2px;

        margin-bottom: 20px;
    }


    .hero h1 {
        font-size: clamp(
            44px,
            13vw,
            10px
        );

        letter-spacing: -3px;
    }


    .hero-description {
        font-size: 17px;

        line-height: 1.75;

        margin-top: 22px;

        max-width: 100%;
    }


    .hero-buttons {
        width: 100%;

        flex-direction: column;

        gap: 12px;

        margin-top: 30px;
    }


    .hero-primary-btn,
    .hero-secondary-btn {
        width: 100%;

        min-height: 58px;

        padding: 0 24px;

        font-size: 18px;
    }


    .hero-trust {
        width: 100%;

        justify-content: space-between;

        margin-top: 35px;
    }


    .trust-line {
        margin: 0 8px;
    }


    .trust-item {
        gap: 6px;
    }


    .trust-item strong {
        font-size: 8px;
    }


    .trust-item small {
        font-size: 7px;
    }


    .trust-icon {
        width: 26px;
        height: 26px;

        font-size: 8px;
    }


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

        margin-top: 10px;
    }


    .gold-card {
        width: 82%;

        min-height: 400px;

        padding: 22px;

        border-radius: 23px;

        box-shadow:
            0 30px 70px rgba(0, 0, 0, .65),
            0 0 40px rgba(255, 210, 100, .10),
            inset 0 1px rgba(255,255,255,.20);
    }


    .gold-symbol {
        width: 135px;
        height: 135px;

        font-size: 55px;
    }


    .gold-info strong {
        font-size: 18px;
    }


    .orbit-one {
        width: 380px;
        height: 380px;
    }


    .orbit-two {
        width: 460px;
        height: 460px;
    }


    .floating-badge {
        padding: 9px 11px;
    }


    .badge-one {
        left: -2px;
        top: 60px;
    }


    .badge-two {
        right: -2px;
        bottom: 60px;
    }


    .floating-badge strong {
        font-size: 8px;
    }


    .floating-badge small {
        font-size: 7px;
    }


    .badge-icon {
        width: 26px;
        height: 26px;
    }

}


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

@media (max-width: 380px) {

    .hero h1 {
        font-size: 42px;
    }


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


    .hero-trust {
        transform: scale(.9);

        width: 110%;

        margin-left: -5%;
    }


    .gold-card {
        width: 78%;
    }


    .floating-badge {
        transform: scale(.85);
    }

}







/* =========================================================
   NEST GOLD HERO — COMPACT BUT READABLE
========================================================= */


/* MAIN STATEMENT */
.hero-main-description {
    max-width: 680px;
    margin-top: 15px;

    font-size: 18px;
    line-height: 1.55;
}

.hero-main-description strong {
    color: #efca6c;
    font-weight: 800;
}


/* INTRO */
.hero-intro {
    max-width: 650px;
    margin-top: 8px;

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

.hero-intro strong {
    color: #efca6c;
    font-weight: 750;
}


/* DETAIL EXPLANATION */
.hero-detail-text {
    max-width: 680px;

    margin-top: 10px;
    padding: 9px 12px;

    border-left: 2px solid rgba(220,174,72,.55);

    background:
        linear-gradient(
            90deg,
            rgba(220,174,72,.055),
            transparent
        );

    border-radius: 0 9px 9px 0;
}

.hero-detail-text p {
    margin: 0;

    font-size: 12px;
    line-height: 1.6;

    color: #d0b8c1;
}

.hero-detail-text strong {
    color: #eac66b;
}


/* EVALUATION TITLE */
.hero-evaluation-title {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 14px;
    margin-bottom: 8px;
}

.title-line {
    width: 23px;
    height: 2px;
}

.hero-evaluation-title h3 {
    margin: 0;

    font-size: 15px;
    line-height: 1.35;

    color: #f0ddd5;
}

.hero-evaluation-title h3 strong {
    color: #efca6c;
    font-weight: 800;
}


/* KARAT LIST */
.karat-list {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    max-width: 680px;

    margin-bottom: 9px;
}

.karat-list span {
    min-height: 26px;

    padding: 4px 8px;

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

    border-radius: 30px;

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

    color: #e9c76d;

    background:
        rgba(220,174,72,.07);

    border:
        1px solid rgba(220,174,72,.17);
}


/* EVALUATION GRID */
.evaluation-grid {
    display: grid;

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

    gap: 6px;

    max-width: 680px;
}


/* EVALUATION ITEM */
.evaluation-item {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 53px;

    padding: 7px 8px;

    border-radius: 9px;

    background:
        rgba(255,230,200,.04);

    border:
        1px solid rgba(220,174,72,.11);
}


/* ICON */
.evaluation-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 7px;

    color: #eac66d;

    background:
        rgba(220,174,72,.08);

    font-size: 9px;
}


/* EVALUATION TEXT */
.evaluation-item strong {
    display: block;

    font-size: 12.5px;
    line-height: 1.3;

    color: #eadbd5;

    font-weight: 700;
}

.evaluation-item small {
    display: block;

    margin-top: 3px;

    font-size: 10.5px;
    line-height: 1.35;

    color: #c5adb7;
}


/* TRANSPARENCY */
.hero-transparency {
    display: flex;
    align-items: center;

    gap: 8px;

    max-width: 680px;

    margin-top: 9px;

    padding: 8px 10px;

    border-radius: 9px;

    background:
        rgba(220,174,72,.045);

    border:
        1px solid rgba(220,174,72,.11);
}

.transparency-icon {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #5a0025;

    background:
        linear-gradient(
            135deg,
            #ffe9a0,
            #bd872d
        );

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

.hero-transparency p {
    margin: 0;

    font-size: 13.5px;
    line-height: 1.5;

    color: #cdb5bf;
}

.hero-transparency strong {
    color: #edca70;
}


/* WARNING */
.hero-warning {
    display: flex;
    align-items: center;

    gap: 8px;

    max-width: 680px;

    margin-top: 8px;

    padding: 8px 10px;

    border-radius: 9px;

    background:
        rgba(220,174,72,.05);

    border:
        1px solid rgba(220,174,72,.12);
}

.warning-mark {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #5a0025;

    background:
        linear-gradient(
            135deg,
            #ffe9a0,
            #bd872d
        );

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

.hero-warning strong {
    font-size: 13px;
    line-height: 1.3;

    color: #efcc70;
}

.hero-warning span {
    margin-left: 5px;

    font-size: 13px;

    color: #c5adb7;
}


/* TRUST DESCRIPTION */
.hero-trust-description {
    max-width: 680px;

    margin-top: 8px;

    font-size: 12.5px;
    line-height: 1.6;

    color: #c8b0ba;
}

.hero-trust-description strong {
    color: #edca70;
}


/* FINAL MESSAGE */
.hero-final-message {
    max-width: 680px;

    margin-top: 10px;
    padding-top: 9px;

    border-top:
        1px solid rgba(220,174,72,.11);
}

.hero-final-message p {
    margin: 0 0 4px;

    font-size: 13px;
    line-height: 1.4;

    color: #c8b0ba;
}

.hero-final-message p strong {
    color: #edca70;
}

.hero-final-message h4 {
    margin: 0;

    font-size: 15px;
    line-height: 1.4;

    color: #f0ddd4;
}

.hero-final-message h4 span {
    color: #efca6c;
}


/* =========================================================
   RIGHT GOLD CARD
========================================================= */

.gold-card {
    min-height: 0;
}


/* Compress only the gap between valuation rows */
.gold-card .valuation-row + .valuation-row {
    margin-top: 8px;
}


/* MARKET HIGHLIGHT */
.valuation-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 9px;

    padding: 8px 10px;

    border-radius: 9px;

    background:
        rgba(220,174,72,.06);

    border:
        1px solid rgba(220,174,72,.12);
}

.valuation-highlight small {
    display: block;

    font-size: 10px;

    color: #c2aab5;
}

.valuation-highlight strong {
    display: block;

    margin-top: 3px;

    font-size: 15px;

    color: #efca6c;
}

.valuation-highlight > span {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 12px;

    color: #5a0025;

    background:
        linear-gradient(
            135deg,
            #fff0b0,
            #bd872d
        );
}


/* THIRD FLOATING BADGE */
.badge-three {
    right: -18px;
    top: 50%;

    transform: translateY(-50%);
}


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

@media (max-width: 1050px) {

    .evaluation-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hero-content {
        max-width: 760px;
    }

}


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

@media (max-width: 600px) {

    .hero-main-description {
        margin-top: 12px;

        font-size: 13.5px;
        line-height: 1.55;
    }

    .hero-intro {
        margin-top: 6px;

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


    .hero-detail-text {
        margin-top: 8px;

        padding: 7px 9px;
    }

    .hero-detail-text p {
        font-size: 12.5px;
        line-height: 1.6;
    }


    /* TITLE */

    .hero-evaluation-title {
        margin-top: 12px;
        margin-bottom: 7px;
    }

    .hero-evaluation-title h3 {
        font-size: 13px;
    }


    /* KARAT */

    .karat-list {
        gap: 3px;

        margin-bottom: 7px;
    }

    .karat-list span {
        min-height: 23px;

        padding: 3px 6px;

        font-size: 9px;
    }


    /* EVALUATION */

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

        gap: 5px;
    }

    .evaluation-item {
        min-height: 48px;

        padding: 6px;

        gap: 6px;
    }

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

        font-size: 15px;
    }

    .evaluation-item strong {
        font-size: 12px;
    }

    .evaluation-item small {
        font-size: 9.5px;
    }


    /* TRANSPARENCY */

    .hero-transparency {
        margin-top: 7px;

        padding: 7px 8px;
    }

    .transparency-icon {
        width: 21px;
        height: 21px;

        font-size: 8px;
    }

    .hero-transparency p {
        font-size: 11px;

        line-height: 1.55;
    }


    /* WARNING */

    .hero-warning {
        margin-top: 7px;

        padding: 7px 8px;
    }

    .warning-mark {
        width: 21px;
        height: 21px;

        font-size: 10px;
    }

    .hero-warning strong {
        font-size: 12px;
    }

    .hero-warning span {
        font-size: 12px;
    }


    /* TRUST */

    .hero-trust-description {
        margin-top: 7px;

        font-size: 12px;

        line-height: 1.6;
    }


    /* FINAL */

    .hero-final-message {
        margin-top: 8px;

        padding-top: 8px;
    }

    .hero-final-message p {
        font-size: 12px;
    }

    .hero-final-message h4 {
        font-size: 12px;
    }


    /* MARKET CARD */

    .valuation-highlight {
        margin-top: 7px;

        padding: 7px 8px;
    }

    .valuation-highlight small {
        font-size: 11px;
    }

    .valuation-highlight strong {
        font-size: 12px;
    }

    .valuation-highlight > span {
        width: 23px;
        height: 23px;

        font-size: 11px;
    }


    .badge-three {
        right: -5px;

        transform:
            translateY(-50%)
            scale(.8);
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

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

    .hero-intro {
        font-size: 10.5px;
    }

    .hero-detail-text p {
        font-size: 8.8px;
    }

    .evaluation-item strong {
        font-size: 7.5px;
    }

    .evaluation-item small {
        font-size: 6px;
    }

    .hero-final-message h4 {
        font-size: 11px;
    }

}

























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

.about-section {
    width: 100%;
    padding: 130px 0;
    background: #f7f3ea;
    position: relative;
    overflow: hidden;
}

/* subtle background detail */
.about-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    top: -180px;
    right: -120px;
    background: rgba(201, 164, 92, 0.08);
    filter: blur(70px);
    pointer-events: none;
}

.about-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    bottom: -160px;
    left: -100px;
    background: rgba(201, 164, 92, 0.05);
    filter: blur(70px);
    pointer-events: none;
}


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

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

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

    display: flex;
    justify-content: center;
}


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

.about-content {
    width: 100%;
    max-width: 1000px;
}


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

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

    margin-bottom: 22px;

    color: #a17c38;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.section-label span {
    width: 36px;
    height: 1px;
    background: #c9a45c;
    display: block;
}


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

.about-content h2 {
    margin: 0;

    max-width: 720px;

    color: #171510;

    font-size: clamp(50px, 6vw, 78px);
    line-height: 0.98;

    font-weight: 500;
    letter-spacing: -4px;
}

.about-content h2 span {
    display: block;
    color: #b28743;
    
}


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

.about-intro {
    max-width: 760px;

    margin-top: 30px;

    color: #39352d;

    font-size: 19px;
    line-height: 1.7;
    font-weight: 400;
}


/* =========================================
   SECONDARY TEXT
========================================= */

.about-text {
    max-width: 770px;

    margin-top: 16px;

    color: #787167;

    font-size: 18px;
    line-height: 1.9;
}


/* =========================================
   VALUES
========================================= */

.about-values {
    margin-top: 44px;

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

    gap: 16px;
}


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

.about-value {
    min-height: 190px;

    padding: 24px;

    border: 1px solid rgba(31, 27, 20, 0.09);
    border-radius: 20px;

     background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );

    display: flex;
    flex-direction: column;

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




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

.value-icon {
    width: 40px;
    height: 40px;

    margin-bottom: 28px;

    border-radius: 12px;

    background: #171510;
    color: #d9ba70;

    display: grid;
    place-items: center;

    font-size: 9px;
    letter-spacing: 1px;

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

.about-value:hover .value-icon {
    background: #c9a45c;
    color: #171510;

    transform: rotate(-5deg);
}


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

.about-value h3 {
    margin: 0;

    color: #eeece9;

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

    line-height: 1.4;
}


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

.about-value p {
    margin: 9px 0 0;

    color: #b1afad;

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


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

.about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 35px;

    min-height: 50px;

    padding: 0 21px;

    border-radius: 100px;

    background: #171510;
    color: #e4ca8e;

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

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

.about-button span {
    font-size: 15px;

    transition:
        transform 0.3s ease;
}

.about-button:hover {
    background: #c9a45c;
    color: #171510;

    transform: translateY(-3px);

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

.about-button:hover span {
    transform: translate(3px, -3px);
}


/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1100px) {

    .about-section {
        padding: 110px 0;
    }

    .about-container {
        width: min(1000px, calc(100% - 50px));
    }

    .about-content h2 {
        font-size: clamp(48px, 6vw, 68px);
    }

    .about-values {
        gap: 14px;
    }

    .about-value {
        padding: 21px;
    }
}


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

@media (max-width: 800px) {

    .about-section {
        padding: 95px 0;
    }

    .about-container {
        width: calc(100% - 40px);
    }

    .about-content {
        max-width: 720px;
    }

    .about-content h2 {
        font-size: clamp(45px, 8vw, 62px);
        letter-spacing: -3px;
    }

    .about-intro {
        font-size: 17px;
    }

    .about-values {
        grid-template-columns: 1fr 1fr;
    }

    .about-value {
        min-height: 175px;
    }

}


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

@media (max-width: 600px) {

    .about-section {
        padding: 80px 0;
    }

    .about-container {
        width: calc(100% - 30px);
    }

    .about-content {
        width: 100%;
    }

    /* label */

    .section-label {
        gap: 9px;

        margin-bottom: 18px;

        font-size: 8px;
        letter-spacing: 2.4px;
    }

    .section-label span {
        width: 26px;
    }

    /* heading */

    .about-content h2 {
        max-width: 100%;

        font-size: clamp(40px, 12vw, 54px);

        line-height: 0.98;

        letter-spacing: -2.5px;
    }

    /* intro */

    .about-intro {
        margin-top: 23px;

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

    /* text */

    .about-text {
        margin-top: 13px;

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

    /* cards */

    .about-values {
        margin-top: 32px;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .about-value {
        min-height: auto;

        padding: 19px;

        border-radius: 17px;
    }

    .value-icon {
        width: 36px;
        height: 36px;

        margin-bottom: 19px;

        border-radius: 10px;

        font-size: 8px;
    }

    .about-value h3 {
        font-size: 12px;
    }

    .about-value p {
        margin-top: 7px;

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

    /* button */

    .about-button {
        width: 100%;

        margin-top: 27px;

        min-height: 52px;

        font-size: 13px;
    }
}


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

@media (max-width: 380px) {

    .about-section {
        padding: 70px 0;
    }

    .about-container {
        width: calc(100% - 26px);
    }

    .about-content h2 {
        font-size: 39px;
        letter-spacing: -2px;
    }

    .about-intro {
        font-size: 14px;
    }

    .about-value {
        padding: 17px;
    }
}


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

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

    .about-value,
    .about-button,
    .value-icon {
        transition: none;
    }

}







/* ================================
   PRODUCTS SECTION
================================ */

.products-section {
    width: 100%;
    padding: 80px 20px;
    background: #ffffff;
    box-sizing: border-box;
}

.products-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* Heading */

.products-heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 45px;
}

.products-heading span {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.products-heading h2 {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.2;
}

.products-heading p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}


/* Product Grid */

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}


/* Product Card */

.product-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}


/* Product Image */

.product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}


/* Product Content */

.product-content {
    padding: 20px;
}

.product-content h3 {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.3;
}

.product-description {
    margin: 0 0 18px;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}


/* Bottom */

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-price {
    font-size: 20px;
    font-weight: 700;
}


/* Buy Button */

.buy-btn {
    border: none;
    outline: none;
    cursor: pointer;

    padding: 11px 18px;
    border-radius: 10px;

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

    background: #25D366;
    color: #fff;

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

.buy-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.buy-btn:active {
    transform: scale(0.97);
}


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

@media (max-width: 1000px) {

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

    .products-heading h2 {
        font-size: 34px;
    }
}


/* ================================
   MOBILE - 2 PRODUCTS PER ROW
================================ */

@media (max-width: 600px) {

    .products-section {
        padding: 50px 10px;
    }

    .products-heading {
        margin-bottom: 25px;
    }

    .products-heading h2 {
        font-size: 26px;
    }

    .products-heading p {
        font-size: 13px;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-card {
        border-radius: 12px;
    }

    .product-content {
        padding: 12px;
    }

    .product-content h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .product-description {
        font-size: 12px;
        margin-bottom: 12px;

        /* Limit description to 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .product-price {
        font-size: 16px;
    }

    .buy-btn {
        width: 100%;
        padding: 9px 8px;
        font-size: 12px;
        border-radius: 8px;
    }
}


/* Small Mobile */

@media (max-width: 380px) {

    .products-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .product-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .buy-btn {
        width: 100%;
    }
}


/* Hidden products */
.hidden-product {
    display: none;
}

/* View More Button */
.view-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 45px;
}

.view-more-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-more-btn:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}











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

.media-gallery {

    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );

}


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

.media-gallery-container {

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

    margin: auto;

}


/* =========================================
   SLIDER
========================================= */

.media-slider {

    position: relative;

}


.media-track {

    display: flex;

    gap: 22px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    padding: 10px 3px 25px;

}


.media-track::-webkit-scrollbar {

    display: none;

}


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

.media-card {

    flex: 0 0 380px;

    scroll-snap-align: start;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid
        rgba(255,215,120,.28);

    background:
        rgba(70,0,30,.25);

    box-shadow:

        0 25px 60px
        rgba(50,0,25,.28),

        inset 0 1px
        rgba(255,255,255,.08);

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

}


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

.media-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(255,215,120,.48);

    box-shadow:

        0 35px 75px
        rgba(50,0,25,.38);

}


/* =========================================
   MEDIA FRAME
========================================= */

.media-frame {

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #560027;

}


.media-frame img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;

}


.media-card:hover img {

    transform: scale(1.05);

}


/* =========================================
   YOUTUBE
========================================= */

.media-frame iframe {

    width: 100%;

    height: 100%;

    display: block;

    border: 0;

}


/* =========================================
   ARROWS
========================================= */

.media-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border: 1px solid
        rgba(255,215,120,.32);

    background:
        rgba(75,0,32,.88);

    color: #f1d58b;

    font-size: 17px;

    cursor: pointer;

    backdrop-filter: blur(12px);

    transition: .3s ease;

}


.media-arrow:hover {

    background: #c79a48;

    color: #560027;

    border-color: #c79a48;

    transform:
        translateY(-50%)
        scale(1.08);

}


.media-prev {

    left: -24px;

}


.media-next {

    right: -24px;

}


/* =========================================
   DOTS
========================================= */

.media-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

}


.media-dot {

    width: 6px;

    height: 6px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,215,120,.25);

    cursor: pointer;

    transition: .3s ease;

}


.media-dot.active {

    width: 24px;

    background: #e5bd65;

    border-radius: 20px;

}


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

@media (max-width: 900px) {

    .media-gallery {

        padding: 75px 0;

    }


    .media-card {

        flex: 0 0 330px;

    }


    .media-arrow {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .media-gallery {

        padding: 60px 0;

    }


    .media-gallery-container {

        width: calc(100% - 30px);

    }


    .media-track {

        gap: 14px;

        padding:
            5px 1px 18px;

        scroll-padding-left: 1px;

    }


    .media-card {

        flex: 0 0 88%;

        border-radius: 20px;

    }


    .media-frame {

        aspect-ratio: 4 / 3;

    }


    .media-dots {

        margin-top: 10px;

    }

}


/* =========================================
   EXTRA SMALL
========================================= */

@media (max-width: 380px) {

    .media-card {

        flex: 0 0 90%;

    }

}









/* =========================================
   GOLD VALUE SECTION
========================================= */

.gold-value-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(201,164,92,.11),
            transparent 28%
        ),
        #11100d;

    color: #fff;
}


/* Decorative ring */

.gold-value-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -100px;

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

    border-radius: 50%;
}

.gold-value-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    bottom: -200px;

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

    border-radius: 50%;
}


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

.gold-value-container {
    position: relative;
    z-index: 2;

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

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        430px;

    gap: 90px;

    align-items: center;
}


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

.value-section-label {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #d2b670;

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

.value-section-label span {
    width: 32px;
    height: 1px;
    background: #c9a45c;
}


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

.gold-value-content h2 {
    margin-top: 23px;

    max-width: 650px;

    font-size: clamp(
        50px,
        6vw,
        76px
    );

    line-height: .97;

    letter-spacing: -4px;

    font-weight: 500;
}

.gold-value-content h2 span {
    display: block;

    color: #d0aa60;
}


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

.gold-value-intro {
    max-width: 600px;

    margin-top: 28px;

    color: #99938a;

    font-size: 14px;

    line-height: 1.8;
}


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

.value-points {
    margin-top: 38px;

    display: grid;

    gap: 10px;

    max-width: 650px;
}


/* =========================================
   VALUE POINT
========================================= */

.value-point {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 15px 0;

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


.point-number {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        rgba(201,164,92,.08);

    color: #cfb06c;

    font-size: 8px;

    border:
        1px solid
        rgba(201,164,92,.14);
}


.value-point h3 {
    margin: 0;

    font-size: 12px;

    font-weight: 600;

    color: #e7dfd1;
}


.value-point p {
    margin-top: 5px;

    max-width: 500px;

    color: #777168;

    font-size: 9px;

    line-height: 1.7;
}


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

.value-main-btn {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    margin-top: 32px;

    min-height: 50px;

    padding: 0 21px;

    border-radius: 100px;

    background: #c9a45c;

    color: #17130d;

    font-size: 11px;

    font-weight: 600;

    transition: .3s ease;
}

.value-main-btn span {
    font-size: 15px;

    transition: .3s ease;
}

.value-main-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(201,164,92,.17);
}

.value-main-btn:hover span {
    transform:
        translate(3px,-3px);
}


/* =========================================
   VALUATION BOX
========================================= */

.valuation-box {
    position: relative;

    padding: 28px;

    border-radius: 26px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    backdrop-filter: blur(15px);

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.3);
}


/* top glow */

.valuation-box::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

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

    border-radius: 50%;

    background:
        rgba(201,164,92,.08);

    filter: blur(45px);

    pointer-events: none;
}


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

.valuation-box-top {
    display: flex;

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


.valuation-mini-label {
    display: block;

    color: #716b62;

    font-size: 7px;

    letter-spacing: 2px;
}


.valuation-box h3 {
    margin-top: 7px;

    color: #e8dfd0;

    font-size: 20px;

    font-weight: 400;
}


.valuation-badge {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 7px 9px;

    border-radius: 100px;

    border:
        1px solid
        rgba(122,203,118,.15);

    color: #9b9b91;

    font-size: 7px;

    letter-spacing: 1px;
}


.valuation-badge span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #79c976;
}


/* =========================================
   FIELD
========================================= */

.valuation-field {
    margin-top: 28px;
}


.valuation-field label {
    display: block;

    color: #8b857b;

    font-size: 8px;

    letter-spacing: 1px;
}


/* Weight */

.input-line {
    display: flex;

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

    margin-top: 9px;

    padding-bottom: 10px;

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


.input-line span {
    color: #e7dfd0;

    font-size: 21px;

    font-weight: 400;
}


.input-line small {
    color: #777168;

    font-size: 7px;

    letter-spacing: 1px;
}


/* =========================================
   PURITY
========================================= */

.purity-options {
    display: grid;

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

    gap: 7px;

    margin-top: 10px;
}


.purity-option {
    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.025);

    color: #888278;

    border-radius: 10px;

    min-height: 42px;

    cursor: pointer;

    font-size: 10px;

    transition: .3s ease;
}


.purity-option:hover {
    border-color:
        rgba(201,164,92,.28);

    color: #d7be7c;
}


.purity-option.active {
    background:
        rgba(201,164,92,.14);

    border-color:
        rgba(201,164,92,.45);

    color: #dfc47c;
}


/* =========================================
   RESULT
========================================= */

.valuation-result {
    display: flex;

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

    margin-top: 25px;

    padding: 18px;

    border-radius: 16px;

    background:
        rgba(201,164,92,.06);

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


.valuation-result span {
    display: block;

    color: #827a6c;

    font-size: 7px;

    letter-spacing: 2px;
}


.valuation-result strong {
    display: block;

    margin-top: 6px;

    color: #e4ca89;

    font-size: 26px;

    font-weight: 400;
}


.result-arrow {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    color: #d4b671;

    border:
        1px solid
        rgba(201,164,92,.2);
}


/* =========================================
   NOTE
========================================= */

.valuation-note {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 16px;
}


.valuation-note > span {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        rgba(255,255,255,.06);

    color: #999188;

    font-size: 8px;
}


.valuation-note p {
    margin: 0;

    color: #6d675f;

    font-size: 8px;

    line-height: 1.6;
}


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

.valuation-whatsapp {
    margin-top: 20px;

    min-height: 46px;

    border-radius: 12px;

    display: flex;

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

    gap: 9px;

    border:
        1px solid
        rgba(122,203,118,.18);

    background:
        rgba(122,203,118,.05);

    color: #a7c8a4;

    font-size: 10px;

    transition: .3s ease;
}


.valuation-whatsapp:hover {
    background:
        rgba(122,203,118,.1);

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .gold-value-section {
        padding: 100px 0;
    }

    .gold-value-container {
        width: calc(100% - 45px);

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .gold-value-content {
        max-width: 700px;
    }

    .valuation-box {
        width: min(500px, 100%);

        margin: auto;
    }
}


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

@media (max-width: 600px) {

    .gold-value-section {
        padding: 80px 0;
    }

    .gold-value-container {
        width: calc(100% - 30px);

        gap: 42px;
    }

    .value-section-label {
        font-size: 8px;

        letter-spacing: 2.3px;
    }

    .gold-value-content h2 {
        margin-top: 18px;

        font-size:
            clamp(40px, 12vw, 53px);

        letter-spacing: -2.5px;
    }

    .gold-value-intro {
        margin-top: 22px;

        font-size: 13px;

        line-height: 1.75;
    }

    .value-points {
        margin-top: 28px;
    }

    .value-point {
        gap: 11px;

        padding: 14px 0;
    }

    .point-number {
        width: 29px;
        height: 29px;
    }

    .value-point h3 {
        font-size: 11px;
    }

    .value-point p {
        font-size: 8px;
    }

    .value-main-btn {
        width: 100%;

        margin-top: 27px;
    }

    .valuation-box {
        padding: 22px;

        border-radius: 21px;
    }

    .valuation-box h3 {
        font-size: 18px;
    }

    .valuation-result strong {
        font-size: 22px;
    }
}


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

@media (max-width: 380px) {

    .gold-value-content h2 {
        font-size: 39px;

        letter-spacing: -2px;
    }

    .valuation-box {
        padding: 19px;
    }

    .valuation-result {
        padding: 15px;
    }
}







/* =========================================
   LIVE GOLD VALUATOR ADDITIONS
========================================= */


/* =========================================
   INPUT
========================================= */

.calculator-input-wrap {
    display: flex;
    align-items: center;

    margin-top: 9px;

    min-height: 48px;

    padding: 0 13px;

    border: 1px solid
        rgba(255,255,255,.09);

    border-radius: 11px;

    background:
        rgba(255,255,255,.035);

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

.calculator-input-wrap:focus-within {
    border-color:
        rgba(201,164,92,.45);

    background:
        rgba(255,255,255,.05);

    box-shadow:
        0 0 0 3px
        rgba(201,164,92,.05);
}


.calculator-input-wrap input {
    width: 100%;

    height: 44px;

    border: none;

    outline: none;

    background: transparent;

    color: #e7dfd0;

    font-family: inherit;

    font-size: 17px;

    font-weight: 400;
}


.calculator-input-wrap input::-webkit-outer-spin-button,
.calculator-input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calculator-input-wrap input[type="number"] {
    appearance: textfield;
}


.calculator-input-wrap > span {
    flex-shrink: 0;

    color: #777168;

    font-size: 7px;

    letter-spacing: 1px;
}


.calculator-input-wrap .currency-symbol {
    margin-right: 5px;

    color: #c9a45c;

    font-size: 14px;

    font-weight: 500;
}


/* =========================================
   RATE NOTE
========================================= */

.rate-note {
    display: block;

    margin-top: 7px;

    color: #676159;

    font-size: 7px;

    line-height: 1.5;
}


/* =========================================
   PURITY OPTIONS
========================================= */

.purity-options {
    display: grid;

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

    gap: 6px;

    margin-top: 10px;
}


.purity-option {
    min-height: 42px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.025);

    color: #888278;

    border-radius: 10px;

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;

    transition:
        border-color .3s ease,
        background .3s ease,
        color .3s ease,
        transform .2s ease;
}


.purity-option:hover {
    border-color:
        rgba(201,164,92,.28);

    color: #d7be7c;
}


.purity-option:active {
    transform: scale(.97);
}


.purity-option.active {
    background:
        rgba(201,164,92,.14);

    border-color:
        rgba(201,164,92,.45);

    color: #dfc47c;
}


/* =========================================
   CALCULATION SUMMARY
========================================= */

.calculation-summary {
    margin-top: 14px;

    padding: 13px;

    display: grid;

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

    gap: 8px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.06);
}


.calculation-summary > div {
    min-width: 0;
}


.calculation-summary span {
    display: block;

    color: #676159;

    font-size: 6px;

    letter-spacing: 1px;

    line-height: 1.4;
}


.calculation-summary strong {
    display: block;

    margin-top: 5px;

    color: #cfc6b6;

    font-size: 9px;

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================
   DISCLAIMER
========================================= */

.valuation-disclaimer {
    max-width: 610px;

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 25px;
}


.valuation-disclaimer > span {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(201,164,92,.08);

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

    color: #c6a35e;

    font-size: 8px;
}


.valuation-disclaimer p {
    margin: 0;

    color: #706a61;

    font-size: 8px;

    line-height: 1.7;
}


/* =========================================
   WHATSAPP BUTTON OVERRIDE
========================================= */

.valuation-whatsapp {
    width: 100%;

    border: none;

    cursor: pointer;

    font-family: inherit;

    margin-top: 20px;
}


.valuation-whatsapp:active {
    transform: scale(.99);
}


.whatsapp-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #79cb78;

    box-shadow:
        0 0 0 4px
        rgba(121,203,120,.08);
}


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

@media (max-width: 600px) {

    .calculator-input-wrap input {
        font-size: 16px;
    }

    .purity-options {
        grid-template-columns:
            repeat(4, 1fr);

        gap: 5px;
    }

    .purity-option {
        min-height: 40px;

        font-size: 8px;
    }

    .calculation-summary {
        padding: 11px;

        gap: 6px;
    }

    .calculation-summary span {
        font-size: 5.5px;
    }

    .calculation-summary strong {
        font-size: 8px;
    }

    .valuation-disclaimer p {
        font-size: 7.5px;
    }

}


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

@media (max-width: 380px) {

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

    .calculation-summary {
        grid-template-columns:
            1fr 1fr;
    }

    .calculation-summary > div:last-child {
        grid-column: span 2;
    }

}



















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

.process-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background: #f7f3ea;

    color: #171510;
}


/* subtle decorative circle */

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

    position: absolute;

    width: 500px;
    height: 500px;

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

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

    border-radius: 50%;

    pointer-events: none;
}

.process-section::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -190px;
    left: -150px;

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

    border-radius: 50%;

    pointer-events: none;
}


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

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

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

    margin: auto;
}


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

.process-heading {
    max-width: 720px;
}


.process-label {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #a17c38;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;
}


.process-label span {
    display: block;

    width: 32px;
    height: 1px;

    background: #c9a45c;
}


.process-heading h2 {
    margin-top: 22px;

    font-size: clamp(
        48px,
        6vw,
        73px
    );

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 500;
}


.process-heading h2 span {
    display: block;

    color: #b28845;
}


.process-heading p {
    max-width: 600px;

    margin-top: 25px;

    color: #777167;

    font-size: 18px;

    line-height: 1.8;
}


/* =========================================
   TIMELINE
========================================= */

.process-timeline {
    position: relative;

    margin-top: 70px;

    display: grid;

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

    gap: 18px;
}


/* horizontal line */

.process-timeline::before {
    content: "";

    position: absolute;

    left: 7%;
    right: 7%;

    top: 25px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,164,92,.4),
            transparent
        );

    z-index: 0;
}


/* =========================================
   STEP
========================================= */

.process-step {
    position: relative;

    z-index: 1;
}


.step-number {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #171510;

    color: #d8ba72;

    border:
        4px solid #f7f3ea;

    box-shadow:
        0 0 0 1px
        rgba(201,164,92,.3);

    font-size: 9px;

    position: relative;

    z-index: 2;
}


.step-line {
    display: none;
}


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

.step-content {
    margin-top: 24px;

    min-height: 230px;

    padding: 22px;

    border-radius: 19px;

    border:
        1px solid
        rgba(30,25,15,.08);

     background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );

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





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

.step-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #eee7d8;

    color: #9c7738;

    font-size: 15px;

    margin-bottom: 25px;
}


.step-content h3 {
    margin: 0;

    color: #f1f0ed;

    font-size: 15px;

    font-weight: 600;
}


.step-content p {
    margin-top: 10px;

    color: #b1afad;

    font-size: 14px;

    line-height: 1.75;
}


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

.process-bottom {
    margin-top: 65px;

    padding: 28px 30px;

    border-radius: 21px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );
    color: white;
}


.process-bottom-label {
    display: block;

    color: #ebe3d9;

    font-size: 12px;

    letter-spacing: 2.2px;
}


.process-bottom h3 {
    margin-top: 8px;

    color: #e5ded0;

    font-size: 20px;

    font-weight: 400;
}


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

.process-button {
    display: inline-flex;

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

    gap: 10px;

    min-height: 48px;

    padding: 0 20px;

    border-radius: 100px;

    background: #c9a45c;

    color: #17130d;

    font-size: 10px;

    font-weight: 600;

    transition: .3s ease;
}


.process-button span {
    font-size: 14px;

    transition: .3s ease;
}


.process-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 30px
        rgba(201,164,92,.2);
}


.process-button:hover span {
    transform:
        translate(3px,-3px);
}


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

@media (max-width: 950px) {

    .process-section {
        padding: 105px 0;
    }

    .process-container {
        width: calc(100% - 45px);
    }

    .process-timeline {
        grid-template-columns: 1fr 1fr;

        gap: 18px;

        margin-top: 55px;
    }

    .process-timeline::before {
        display: none;
    }

    .step-content {
        min-height: 210px;
    }

}


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

@media (max-width: 600px) {

    .process-section {
        padding: 80px 0;
    }

    .process-container {
        width: calc(100% - 30px);
    }

    .process-label {
        font-size: 8px;

        letter-spacing: 2.4px;
    }

    .process-label span {
        width: 26px;
    }

    .process-heading h2 {
        margin-top: 18px;

        font-size:
            clamp(40px, 12vw, 53px);

        letter-spacing: -2.5px;
    }

    .process-heading p {
        margin-top: 20px;

        font-size: 15px;

        line-height: 1.75;
    }

    .process-timeline {
        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 38px;
    }

    .process-step {
        display: grid;

        grid-template-columns: 42px 1fr;

        column-gap: 13px;

        padding-bottom: 25px;
    }

    .step-number {
        width: 42px;
        height: 42px;

        grid-column: 1;

        grid-row: 1;

        font-size: 8px;
    }

    .step-line {
        display: block;

        width: 1px;

        height: calc(100% - 42px);

        background:
            rgba(201,164,92,.22);

        position: absolute;

        top: 42px;
        left: 21px;

        z-index: -1;
    }

    .process-step:last-child .step-line {
        display: none;
    }

    .step-content {
        grid-column: 2;

        grid-row: 1;

        margin-top: 0;

        min-height: auto;

        padding: 20px;

        border-radius: 16px;
    }

    .step-icon {
        width: 34px;
        height: 34px;

        margin-bottom: 17px;

        font-size: 13px;
    }

    .step-content h3 {
        font-size: 14px;
    }

    .step-content p {
        font-size: 14px;

        line-height: 1.7;
    }

    .process-bottom {
        margin-top: 25px;

        padding: 22px 18px;

        flex-direction: column;

        align-items: stretch;

        gap: 19px;

        border-radius: 17px;
    }

    .process-bottom h3 {
        font-size: 20px;
    }

    .process-button {
        width: 100%;
    }

}


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

@media (max-width: 380px) {

    .process-heading h2 {
        font-size: 39px;

        letter-spacing: -2px;
    }

    .process-bottom {
        padding: 19px 16px;
    }

}





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

.services-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background: #ebe5d8;

    color: #171510;
}


/* Decorative background */

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

    position: absolute;

    width: 500px;
    height: 500px;

    top: -280px;
    left: -230px;

    border-radius: 50%;

    background:
        rgba(201,164,92,.08);

    filter: blur(70px);

    pointer-events: none;
}


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

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

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

    margin: auto;
}


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

.services-intro {
    max-width: 720px;
}


.services-label {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #9d7739;

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


.services-label span {
    width: 32px;
    height: 1px;

    background: #c9a45c;
}


.services-intro h2 {
    margin-top: 21px;

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

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 500;
}


.services-intro h2 span {
    display: block;

    color: #b18442;
}


.services-intro p {
    max-width: 620px;

    margin-top: 24px;

    color: #777167;

    font-size: 14px;

    line-height: 1.8;
}


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

.services-grid {
    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 18px;

    margin-top: 65px;
}


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

.service-card {
    position: relative;

    min-height: 560px;

    padding: 30px;

    border-radius: 26px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

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


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

    box-shadow:
        0 28px 60px
        rgba(31,25,15,.12);
}


/* =========================================
   MAIN GOLD CARD
========================================= */

.service-main {
    background:
        linear-gradient(
            140deg,
            #6a635b,
            #202020
        );

    border:
        1px solid
        rgba(85,65,25,.1);
}


/* gold glow */

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

    position: absolute;

    width: 280px;
    height: 280px;

    right: -70px;
    top: -80px;

    border-radius: 50%;

    background:
        rgba(201,164,92,.17);

    filter: blur(50px);
}


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

.service-dark {
    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );

    color: white;

    border:
        1px solid
        rgba(201,164,92,.16);
}


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

.service-card-top {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.service-number {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        rgba(23,21,16,.08);

    color: #8d6c35;

    font-size: 9px;
}


.service-dark .service-number {
    background:
        rgba(255,255,255,.06);

    color: #d3b56e;
}


.service-tag {
    color: #171717;

    font-size: 7px;

    letter-spacing: 2.5px;

    font-weight: 600;
}


.service-dark .service-tag {
    color: #82796d;
}


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

.service-icon {
    position: relative;
    z-index: 2;

    width: 145px;
    height: 145px;

    margin: 40px auto 20px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    font-family: Georgia, serif;

    font-size: 58px;

    color: #211807;

    background:
        radial-gradient(
            circle at 30% 25%,
            #f4dc9b,
            #c59d54 55%,
            #8a652d
        );

    box-shadow:
        0 0 0 11px
        rgba(201,164,92,.08),
        0 20px 60px
        rgba(117,88,35,.15);

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


@keyframes serviceGoldFloat {

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

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

}


/* =========================================
   PLEDGE VISUAL
========================================= */

.pledge-visual {
    position: relative;

    width: 145px;
    height: 145px;

    margin: 40px auto 20px;

    display: grid;
    place-items: center;
}


.pledge-circle {
    width: 105px;
    height: 105px;

    border-radius: 50%;

    display: grid;
    place-items: center;

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

    color: #d8bb72;

    background:
        rgba(201,164,92,.07);

    position: relative;

    z-index: 2;
}


.pledge-circle span {
    font-size: 34px;

    font-family: Georgia, serif;
}


.pledge-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(201,164,92,.18);
}


.ring-a {
    inset: 4px;

    animation:
        pledgeRotate 15s linear infinite;
}


.ring-b {
    inset: -12px;

    border-style: dashed;

    animation:
        pledgeRotate 20s linear infinite reverse;
}


@keyframes pledgeRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.service-card-content {
    position: relative;
    z-index: 2;

    margin-top: auto;
}


.service-card-content h3 {
    max-width: 500px;

    color: #ffffff;
text-shadow: #12070D;
    font-size: 28px;

    line-height: 1.15;

    font-weight: 500;

    letter-spacing: -.8px;
}


.service-dark .service-card-content h3 {
    color: #ebe2d1;
}


.service-card-content > p {
    max-width: 560px;

    margin-top: 13px;
text-shadow: #11100d;
    color: #e8e6e6;

    font-size: 15px;

    line-height: 1.8;
}


.service-dark .service-card-content > p {
    color: #b8b7b5;
}


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

.service-features {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 22px;
}


.service-features span {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 8px 10px;

    border-radius: 100px;

    background:
        rgba(23,21,16,.06);

    color: #efefee;

    font-size: 10px;
}


.service-features i {
    font-style: normal;

    color: #d7d6d3;
}


.dark-features span {
    background:
        rgba(255,255,255,.045);

    color: #bab9b7;
}


.dark-features i {
    color: #d4d3cf;
}


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

.service-link {
    position: relative;
    z-index: 2;

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

    gap: 9px;

    align-self: flex-start;

    margin-top: 27px;

    color: #d6d0d0;

    font-size: 13px;

    font-weight: 600;

    transition: .3s ease;
}


.service-link span {
    font-size: 14px;

    transition: .3s ease;
}


.service-link:hover {
    color: #5c421b;
}


.service-link:hover span {
    transform:
        translate(3px,-3px);
}


.light-link {
    color: #d4b770;
}


.light-link:hover {
    color: #f0d893;
}


/* =========================================
   TRUST STRIP
========================================= */

.services-trust {
    margin-top: 25px;

    padding: 20px 24px;

    border-radius: 18px;

    display: grid;

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

    gap: 20px;

    background:
        rgba(255,255,255,.34);

    border:
        1px solid
        rgba(30,25,15,.07);
}


.services-trust-item {
    display: flex;

    align-items: center;

    gap: 11px;
}


.services-trust-item span {
    color: #b08745;

    font-size: 8px;

    letter-spacing: 1px;
}


.services-trust-item p {
    color: #716a60;

    font-size: 9px;
}


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

@media (max-width: 950px) {

    .services-section {
        padding: 105px 0;
    }

    .services-container {
        width: calc(100% - 45px);
    }

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

        gap: 16px;

        margin-top: 50px;
    }

    .service-card {
        min-height: 500px;
    }

}


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

@media (max-width: 600px) {

    .services-section {
        padding: 80px 0;
    }

    .services-container {
        width: calc(100% - 30px);
    }

    .services-label {
        font-size: 8px;

        letter-spacing: 2.3px;
    }

    .services-label span {
        width: 25px;
    }

    .services-intro h2 {
        margin-top: 18px;

        font-size:
            clamp(40px, 12vw, 53px);

        letter-spacing: -2.5px;
    }

    .services-intro p {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.75;
    }

    .services-grid {
        margin-top: 38px;

        gap: 12px;
    }

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

        padding: 22px;

        border-radius: 20px;
    }

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

        margin-top: 35px;

        font-size: 48px;
    }

    .pledge-visual {
        width: 120px;
        height: 120px;

        margin-top: 35px;
    }

    .pledge-circle {
        width: 88px;
        height: 88px;
    }

    .pledge-circle span {
        font-size: 28px;
    }

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

    .service-card-content > p {
        font-size: 13px;

        line-height: 1.75;
    }

    .service-features {
        gap: 6px;
    }

    .service-features span {
        padding: 7px 8px;

        font-size: 9px;
    }

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

        gap: 12px;

        margin-top: 15px;

        padding: 17px;
    }

    .services-trust-item {
        padding-bottom: 10px;

        border-bottom:
            1px solid
            rgba(30,25,15,.06);
    }

    .services-trust-item:last-child {
        padding-bottom: 0;

        border-bottom: none;
    }

}


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

@media (max-width: 380px) {

    .services-intro h2 {
        font-size: 39px;

        letter-spacing: -2px;
    }

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

        padding: 19px;
    }

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

}







/* =========================================
   TRUST / TESTIMONIALS — LIGHT THEME
========================================= */

.trust-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background: #f7f3ea;

    color: #171510;
}


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

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

    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

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

    filter: blur(70px);

    pointer-events: none;
}

.trust-section::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -200px;
    left: -150px;

    border-radius: 50%;

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

    filter: blur(65px);

    pointer-events: none;
}


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

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

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

    margin: auto;
}


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

.trust-heading {
    max-width: 730px;
}


.trust-label {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #a17c3c;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 3px;
}


.trust-label span {
    width: 32px;
    height: 1px;

    background: #c9a45c;
}


.trust-heading h2 {
    margin-top: 22px;

    color: #171510;

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

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 500;
}


.trust-heading h2 span {
    display: block;

    color: #b28845;
}


.trust-heading p {
    max-width: 610px;

    margin-top: 24px;

    color: #777067;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   TRUST STATS
========================================= */

.trust-stats {
    margin-top: 58px;

    display: grid;

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

    border-top:
        1px solid
        rgba(30, 25, 15, 0.09);

    border-bottom:
        1px solid
        rgba(30, 25, 15, 0.09);
}


.trust-stat {
    padding: 22px 25px;

    display: flex;

    align-items: center;

    gap: 13px;

    border-right:
        1px solid
        rgba(30, 25, 15, 0.08);
}


.trust-stat:last-child {
    border-right: none;
}


.trust-stat strong {
    color: #b08643;

    font-size: 10px;

    font-weight: 600;
}


.trust-stat span {
    color: #7d766c;

    font-size: 8px;

    line-height: 1.55;
}


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

.testimonials-grid {
    margin-top: 24px;

    display: grid;

    grid-template-columns:
        1.12fr
        .94fr
        .94fr;

    gap: 15px;
}


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

.testimonial-card {
    position: relative;

    min-height: 300px;

    padding: 25px;

    border-radius: 20px;

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

    border:
        1px solid
        rgba(30, 25, 15, 0.08);

    display: flex;

    flex-direction: column;

    box-shadow:
        0 10px 35px
        rgba(45, 35, 20, 0.04);

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


.testimonial-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(201, 164, 92, 0.35);

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

    box-shadow:
        0 20px 45px
        rgba(45, 35, 20, 0.09);
}


/* FEATURED */

.featured-review {
    background:
        linear-gradient(
            145deg,
            rgba(225, 208, 169, 0.42),
            rgba(255, 255, 255, 0.72)
        );

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


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

.testimonial-top {
    display: flex;

    justify-content: space-between;

    align-items: center;
}


.quote-mark {
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 11px;

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

    color: #ad863f;

    font-family: Georgia, serif;

    font-size: 24px;

    line-height: 1;
}


.rating {
    color: #b78f48;

    font-size: 9px;

    letter-spacing: 2px;
}


/* =========================================
   TESTIMONIAL TEXT
========================================= */

.testimonial-text {
    margin-top: 35px;

    color: #696259;

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================
   USER
========================================= */

.testimonial-user {
    margin-top: auto;

    padding-top: 25px;

    display: flex;

    align-items: center;

    gap: 11px;
}


.user-avatar {
    width: 36px;
    height: 36px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            145deg,
            #e5d2a3,
            #c49c53
        );

    color: #2b2112;

    font-size: 8px;

    font-weight: 600;
}


.testimonial-user strong {
    display: block;

    color: #28231c;

    font-size: 11px;

    font-weight: 600;
}


.testimonial-user small {
    display: block;

    margin-top: 4px;

    color: #928b80;

    font-size: 9px;
}


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

.trust-cta {
    margin-top: 24px;

    padding: 25px 27px;

    border-radius: 21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background:
        linear-gradient(
            110deg,
            #eadcbd,
            #d0b172
        );

    border:
        1px solid
        rgba(145, 108, 46, 0.15);

    color: #1b160e;

    box-shadow:
        0 15px 40px
        rgba(80, 60, 25, 0.06);
}


/* CTA CONTENT */

.trust-cta-content > span {
    display: block;

    color: #80683b;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 600;
}


.trust-cta-content h3 {
    margin-top: 6px;

    color: #251f16;

    font-size: 20px;

    font-weight: 500;
}


.trust-cta-content p {
    margin-top: 5px;

    color: #756340;

    font-size: 11px;

    line-height: 1.6;
}


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

.trust-whatsapp {
    min-height: 47px;

    padding: 0 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 100px;

    background: #171510;

    color: #e7d4a2;

    font-size: 9px;

    font-weight: 600;

    white-space: nowrap;

    transition: .3s ease;
}


.trust-whatsapp:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.16);
}


.whatsapp-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #79cb78;
}


.trust-arrow {
    font-size: 13px;

    transition: .3s ease;
}


.trust-whatsapp:hover .trust-arrow {
    transform:
        translate(3px, -3px);
}


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

@media (max-width: 950px) {

    .trust-section {
        padding: 105px 0;
    }

    .trust-container {
        width: calc(100% - 45px);
    }

    .trust-stats {
        grid-template-columns:
            1fr 1fr;
    }

    .trust-stat:nth-child(2) {
        border-right: none;
    }

    .trust-stat:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(30, 25, 15, 0.08);
    }

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

    .featured-review {
        grid-column: span 2;
    }
}


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

@media (max-width: 600px) {

    .trust-section {
        padding: 80px 0;
    }

    .trust-container {
        width: calc(100% - 30px);
    }

    .trust-label {
        font-size: 8px;

        letter-spacing: 2.3px;
    }

    .trust-label span {
        width: 25px;
    }

    .trust-heading h2 {
        margin-top: 18px;

        font-size:
            clamp(40px, 12vw, 53px);

        letter-spacing: -2.5px;
    }

    .trust-heading p {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.75;
    }

    .trust-stats {
        margin-top: 38px;

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

    .trust-stat {
        padding: 17px 13px;

        gap: 9px;
    }

    .trust-stat strong {
        font-size: 8px;
    }

    .trust-stat span {
        font-size: 7px;
    }

    .testimonials-grid {
        margin-top: 12px;

        grid-template-columns: 1fr;

        gap: 10px;
    }

    .featured-review {
        grid-column: auto;
    }

    .testimonial-card {
        min-height: 250px;

        padding: 20px;

        border-radius: 17px;
    }

    .quote-mark {
        width: 33px;
        height: 33px;

        font-size: 21px;
    }

    .rating {
        font-size: 8px;
    }

    .testimonial-text {
        margin-top: 26px;

        font-size: 13px;

        line-height: 1.8;
    }

    .testimonial-user {
        padding-top: 20px;
    }

    .user-avatar {
        width: 33px;
        height: 33px;

        font-size: 7px;
    }

    .testimonial-user strong {
        font-size: 11px;
    }

    .testimonial-user small {
        font-size: 7.8px;
    }

    .trust-cta {
        margin-top: 12px;

        padding: 19px;

        flex-direction: column;

        align-items: stretch;

        gap: 17px;

        border-radius: 17px;
    }

    .trust-cta-content h3 {
        font-size: 17px;
    }

    .trust-cta-content p {
        font-size: 8px;
    }

    .trust-whatsapp {
        width: 100%;
    }
}


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

@media (max-width: 380px) {

    .trust-heading h2 {
        font-size: 39px;

        letter-spacing: -2px;
    }

    .trust-stat {
        padding: 15px 10px;
    }

    .testimonial-card {
        padding: 18px;
    }
}




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

.faq-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background: #ebe5d8;
    color: #171510;
}


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

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

    position: absolute;

    width: 430px;
    height: 430px;

    top: -230px;
    left: -170px;

    border-radius: 50%;

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

    filter: blur(70px);

    pointer-events: none;
}


.faq-section::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -180px;
    right: -120px;

    border-radius: 50%;

    background: rgba(178, 136, 69, 0.07);

    filter: blur(65px);

    pointer-events: none;
}


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

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

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

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.78fr)
        minmax(500px, 1.22fr);

    gap: 80px;

    align-items: start;
}


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

.faq-intro {
    position: sticky;

    top: 110px;
}


.faq-label {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #9c773a;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1.4;
}


.faq-label span {
    width: 32px;
    height: 1px;

    flex-shrink: 0;

    background: #c9a45c;
}


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

.faq-intro h2 {
    margin: 22px 0 0;

    max-width: 520px;

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

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 600;
}


.faq-intro h2 span {
    display: block;

    color: #b28845;
}


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

.faq-intro p {
    max-width: 460px;

    margin: 26px 0 0;

    color: #777066;

    font-size: 16px;

    line-height: 1.85;

    font-weight: 400;
}


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

.faq-contact-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 30px;

    min-height: 52px;

    padding: 0 22px;

    border-radius: 100px;

    background: #171510;

    color: #dfc589;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

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


.faq-contact-btn span {
    font-size: 17px;

    transition: transform .3s ease;
}


.faq-contact-btn:hover {
    background: #c9a45c;

    color: #171510;

    transform: translateY(-3px);
}


.faq-contact-btn:hover span {
    transform: translate(3px, -3px);
}


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

.faq-list {
    width: 100%;

    border-top:
        1px solid
        rgba(30, 25, 15, .12);
}


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

.faq-item {
    border-bottom:
        1px solid
        rgba(30, 25, 15, .12);
}


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

.faq-question {
    width: 100%;

    min-height: 88px;

    padding: 20px 0;

    border: 0;

    background: transparent;

    color: #252119;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    text-align: left;

    cursor: pointer;

    font-family: inherit;
}


.faq-question span {
    max-width: 90%;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.6;
}


.faq-question i {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    border-radius: 50%;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(30, 25, 15, .15);

    color: #9e7737;

    font-size: 20px;

    font-style: normal;

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


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

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .4s ease;
}


.faq-answer p {
    overflow: hidden;

    max-width: 720px;

    color: #716a61;

    font-size: 15px;

    line-height: 1.9;

    margin: 0;

    font-weight: 400;
}


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

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


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


.faq-item.active .faq-question i {
    transform: rotate(45deg);

    background: #171510;

    color: #d7bb74;

    border-color: #171510;
}


.faq-item.active .faq-answer p {
    padding-bottom: 28px;
}


/* =========================================
   LARGE SCREEN
========================================= */

@media (min-width: 1400px) {

    .faq-section {
        padding: 145px 0;
    }


    .faq-container {
        width: min(
            1280px,
            calc(100% - 100px)
        );

        gap: 110px;
    }


    .faq-intro h2 {
        font-size: 72px;

        letter-spacing: -3px;
    }


    .faq-intro p {
        font-size: 17px;

        max-width: 490px;
    }


    .faq-question {
        min-height: 94px;
    }


    .faq-question span {
        font-size: 18px;
    }


    .faq-answer p {
        font-size: 16px;
    }

}


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

@media (max-width: 1050px) {

    .faq-section {
        padding: 100px 0;
    }


    .faq-container {
        width: calc(100% - 50px);

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .faq-intro {
        position: relative;

        top: auto;

        max-width: 720px;
    }


    .faq-intro h2 {
        max-width: 650px;

        font-size: clamp(
            45px,
            7vw,
            62px
        );
    }


    .faq-intro p {
        max-width: 650px;

        font-size: 15px;
    }


    .faq-list {
        width: 100%;
    }

}


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

@media (max-width: 600px) {

    .faq-section {
        padding: 75px 0;
    }


    .faq-container {
        width: calc(100% - 32px);

        gap: 42px;
    }


    /* LABEL */

    .faq-label {
        gap: 8px;

        font-size: 10px;

        letter-spacing: 1.3px;
    }


    .faq-label span {
        width: 24px;
    }


    /* HEADING */

    .faq-intro h2 {

        margin-top: 18px;

        max-width: 100%;

        font-size:
            clamp(
                34px,
                10.5vw,
                47px
            );

        line-height: 1.12;

        letter-spacing: -1.5px;

        font-weight: 600;
    }


    /* DESCRIPTION */

    .faq-intro p {

        margin-top: 20px;

        max-width: 100%;

        font-size: 14px;

        line-height: 1.8;
    }


    /* BUTTON */

    .faq-contact-btn {

        width: 100%;

        min-height: 50px;

        margin-top: 22px;

        padding: 0 18px;

        font-size: 13px;
    }


    /* FAQ LIST */

    .faq-question {

        min-height: 74px;

        padding: 17px 0;

        gap: 12px;
    }


    .faq-question span {

        max-width: calc(100% - 45px);

        font-size: 14px;

        line-height: 1.55;

        font-weight: 600;
    }


    .faq-question i {

        width: 31px;

        height: 31px;

        font-size: 17px;
    }


    /* ANSWER */

    .faq-answer p {

        max-width: 100%;

        padding-right: 5px;

        font-size: 13px;

        line-height: 1.8;
    }


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

        padding-bottom: 22px;
    }

}


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

@media (max-width: 380px) {

    .faq-section {
        padding: 65px 0;
    }


    .faq-container {
        width: calc(100% - 26px);

        gap: 35px;
    }


    .faq-intro h2 {

        font-size: 32px;

        line-height: 1.13;

        letter-spacing: -1px;
    }


    .faq-intro p {

        font-size: 13px;

        line-height: 1.75;
    }


    .faq-question {

        min-height: 70px;

        gap: 10px;
    }


    .faq-question span {

        font-size: 13px;

        line-height: 1.5;
    }


    .faq-question i {

        width: 29px;

        height: 29px;

        font-size: 16px;
    }


    .faq-answer p {

        font-size: 12px;

        line-height: 1.75;
    }

}


/* =========================================
   VERY SMALL DEVICES
========================================= */

@media (max-width: 340px) {

    .faq-container {
        width: calc(100% - 22px);
    }


    .faq-intro h2 {
        font-size: 29px;
    }


    .faq-question span {
        font-size: 12px;
    }


    .faq-answer p {
        font-size: 11.5px;
    }

}





/* =========================================
   CONTACT SECTION — LIGHT THEME
========================================= */

.contact-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background: #ebe5d8;

    color: #171510;
}


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

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

    position: absolute;

    width: 600px;
    height: 600px;

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

    border-radius: 50%;

    background: #ebe5d8;

    filter: blur(100px);

    pointer-events: none;
}

.contact-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -250px;
    left: -200px;

    border-radius: 50%;

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

    filter: blur(80px);

    pointer-events: none;
}


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

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

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

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        470px;

    gap: 90px;

    align-items: center;
}


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

.contact-label {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #a17b39;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3px;
}


.contact-label span {
    width: 32px;
    height: 1px;

    background: #c9a45c;
}


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

.contact-content h2 {
    margin-top: 23px;

    max-width: 650px;

    color: #171510;

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

    line-height: .96;

    letter-spacing: -4px;

    font-weight: 500;
}


.contact-content h2 span {
    display: block;

    color: #b28845;
}


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

.contact-intro {
    max-width: 580px;

    margin-top: 27px;

    color: #777067;

    font-size: 14px;

    line-height: 1.85;
}


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

.contact-options {
    margin-top: 38px;

    display: grid;

    gap: 9px;

    max-width: 580px;
}


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

.contact-option {
    min-height: 70px;

    padding: 12px 15px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    border:
        1px solid
        rgba(30, 25, 15, 0.08);

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

    color: #171510;

    box-shadow:
        0 8px 25px
        rgba(40, 30, 15, 0.03);

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


.contact-option:hover {
    transform: translateX(5px);

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

    border-color:
        rgba(201, 164, 92, 0.32);

    box-shadow:
        0 12px 30px
        rgba(40, 30, 15, 0.07);
}


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

.contact-option-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;

    font-size: 13px;
}


.contact-option-icon.whatsapp {
    background:
        rgba(121, 203, 120, 0.10);

    color: #55a957;
}


.contact-option-icon.phone {
    background:
        rgba(201, 164, 92, 0.12);

    color: #a27b36;
}


.contact-option-icon.location {
    background:
        rgba(30, 25, 15, 0.06);

    color: #71695d;
}


.contact-option div:nth-child(2) {
    flex: 1;
}


.contact-option small {
    display: block;

    color: #9a9388;

    font-size: 8.5px;

    letter-spacing: 1.8px;
}


.contact-option strong {
    display: block;

    margin-top: 5px;

    color: #28231c;

    font-size: 10px;

    font-weight: 600;
}


.contact-arrow {
    color: #a17c3d;

    font-size: 14px;

    transition: .3s ease;
}


.contact-option:hover .contact-arrow {
    transform:
        translate(3px, -3px);
}


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

.contact-card {
    position: relative;

    padding: 28px;

    border-radius: 25px;

    border:
        1px solid
        rgba(30, 25, 15, 0.09);

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

    box-shadow:
        0 25px 70px
        rgba(45, 35, 20, 0.09);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);
}


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

    position: absolute;

    width: 200px;
    height: 200px;

    top: -100px;
    right: -100px;

    border-radius: 50%;

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

    filter: blur(45px);

    pointer-events: none;
}


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

.contact-card-header {
    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;
}


.contact-card-header > div:first-child > span {
    display: block;

    color: #9a9286;

    font-size: 9px;

    letter-spacing: 2px;
}


.contact-card-header h3 {
    margin-top: 7px;

    color: #252019;

    font-size: 21px;

    font-weight: 500;
}


.contact-card-mark {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    font-family: Georgia, serif;

    color: #211808;

    background:
        linear-gradient(
            145deg,
            #f1d895,
            #b88c42
        );

    font-size: 16px;

    box-shadow:
        0 8px 20px
        rgba(167, 124, 54, 0.18);
}


/* =========================================
   FORM
========================================= */

.gold-form {
    position: relative;

    margin-top: 30px;
}


.form-group {
    margin-bottom: 19px;
}


.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #777066;

    font-size: 9px;

    letter-spacing: 1px;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border:
        1px solid
        rgba(30, 25, 15, 0.10);

    outline: none;

    border-radius: 11px;

    background:
        rgba(247, 243, 234, 0.8);

    color: #29241c;

    font-family: inherit;

    font-size: 12px;

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


.form-group input,
.form-group select {
    height: 45px;

    padding: 0 13px;
}


.form-group textarea {
    min-height: 105px;

    resize: vertical;

    padding: 12px 13px;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa298;
}


.form-group select {
    appearance: none;

    cursor: pointer;
}


.form-group select option {
    background: #fff;

    color: #29241c;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:
        rgba(201, 164, 92, 0.55);

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(201, 164, 92, 0.08);
}


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

.form-submit {
    width: 100%;

    min-height: 50px;

    border: none;

    border-radius: 12px;

    background: #171510;

    color: #e5cd92;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

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


.form-submit span {
    font-size: 15px;

    transition: .3s ease;
}


.form-submit:hover {
    background: #c9a45c;

    color: #171510;

    transform: translateY(-3px);

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


.form-submit:hover span {
    transform:
        translate(3px, -3px);
}


.form-note {
    margin-top: 11px;

    text-align: center;

    color: #9a9288;

    font-size: 9px;
}


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

@media (max-width: 950px) {

    .contact-section {
        padding: 105px 0;
    }

    .contact-container {
        width: calc(100% - 45px);

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-content {
        max-width: 700px;
    }

    .contact-card {
        width: min(
            550px,
            100%
        );

        margin: auto;
    }
}


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

@media (max-width: 600px) {

    .contact-section {
        padding: 80px 0;
    }

    .contact-container {
        width: calc(100% - 30px);

        gap: 40px;
    }

    .contact-label {
        font-size: 10px;

        letter-spacing: 2.3px;
    }

    .contact-label span {
        width: 25px;
    }

    .contact-content h2 {
        margin-top: 18px;

        font-size:
            clamp(40px, 12vw, 53px);

        letter-spacing: -2.5px;
    }

    .contact-intro {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.75;
    }

    .contact-options {
        margin-top: 28px;
    }

    .contact-option {
        min-height: 64px;

        padding: 10px 12px;

        border-radius: 13px;
    }

    .contact-option-icon {
        width: 36px;
        height: 36px;
    }

    .contact-option strong {
        font-size: 11px;
    }

    .contact-card {
        padding: 21px;

        border-radius: 20px;
    }

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

    .contact-card-mark {
        width: 37px;
        height: 37px;

        font-size: 15px;
    }

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

    .form-group {
        margin-bottom: 16px;
    }

    .form-submit {
        min-height: 48px;
    }
}


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

@media (max-width: 380px) {

    .contact-content h2 {
        font-size: 40px;

        letter-spacing: -2px;
    }

    .contact-card {
        padding: 18px;
    }
}




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

.site-footer {

    position: relative;

   background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );

    color: #fff;

    overflow: hidden;

}


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

.site-footer::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -270px;
    right: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(255, 210, 100, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(160, 0, 65, .28),
            transparent 35%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 190, 80, .06),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #12070D 0%,
            #2A0718 25%,
            #570022 55%,
            #72002F 75%,
            #260712 100%
        );

    filter: blur(70px);

    pointer-events: none;

}


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

.footer-container {

    position: relative;

    z-index: 2;

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

    margin: auto;

}


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

.footer-top {

    padding: 80px 0 65px;

    display: grid;

    grid-template-columns:
        1.7fr
        .8fr
        .8fr
        1fr;

    gap: 60px;

}


/* =========================================
   BRAND
========================================= */

.footer-brand {

    max-width: 360px;

}


.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #fff;

}


.footer-logo-symbol {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: grid;

    place-items: center;

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

    color: #d7ba71;

    font-size: 17px;

}


.footer-logo-text {

    display: flex;

    flex-direction: column;

}


.footer-logo-text strong {

    font-size: 14px;

    letter-spacing: 2px;

    font-weight: 600;

}


.footer-logo-text small {

    margin-top: 5px;

    color: #c7a45f;

    font-size: 7px;

    letter-spacing: 2.2px;

}


.footer-brand > p {

    margin-top: 22px;

    max-width: 330px;

    color: white;

    font-size: 11px;

    line-height: 1.8;

}


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

.footer-whatsapp {

    margin-top: 25px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 43px;

    padding: 0 15px;

    border-radius: 100px;

    border:
        1px solid
        rgba(121,203,120,.18);

    background:
        rgba(121,203,120,.05);

    color: #a5c5a0;

    font-size: 9px;

    font-weight: 600;

    transition: .3s ease;

}


.footer-whatsapp span {

    color: #77c776;

}


.footer-whatsapp b {

    color: white;

    font-size: 13px;

    transition: .3s ease;

}


.footer-whatsapp:hover {

    background:
        rgba(121,203,120,.09);

    transform: translateY(-2px);

}


.footer-whatsapp:hover b {

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

}


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

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-column h3 {

    margin-bottom: 20px;

    color: #e5dbc8;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.footer-column a,
.footer-column > span {

    margin-bottom: 12px;

    color: white;

    font-size: 9px;

    line-height: 1.5;

    transition:
        color .25s ease,
        transform .25s ease;

}


.footer-column a:hover {

    color: #d2b36b;

    transform: translateX(3px);

}


.footer-contact a:first-of-type {

    color: #d3bc82;

    font-size: 11px;

}


/* HOURS */

.footer-hours {

    margin-top: 5px;

    color: white !important;

    font-size: 8px !important;

}


/* =========================================
   DIVIDER
========================================= */

.footer-divider {

    height: 1px;

    background:
        rgba(255,255,255,.07);

}


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

.footer-bottom {

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.footer-bottom > span {

    color: white;

    font-size: 7px;

}


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

.footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 20px;

}


.footer-bottom-links a {

    color: white;

    font-size: 7px;

    transition: .25s ease;

}


.footer-bottom-links a:hover {

    color: #c6a561;

}


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

.footer-social {

    display: flex;

    gap: 7px;

}


.footer-social a {

    width: 30px;
    height: 30px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.09);

    color: white;

    font-size: 7px;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;

}


.footer-social a:hover {

    background:
        rgba(201,164,92,.10);

    border-color:
        rgba(201,164,92,.3);

    color: #d1b26b;

    transform: translateY(-2px);

}


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

@media (max-width: 950px) {

    .footer-container {

        width: calc(100% - 45px);

    }

    .footer-top {

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

        gap: 45px;

    }

    .footer-contact {

        grid-column: span 3;

        padding-top: 10px;

    }

}


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

@media (max-width: 600px) {

    .footer-container {

        width: calc(100% - 30px);

    }

    .footer-top {

        padding: 60px 0 45px;

        grid-template-columns: 1fr 1fr;

        gap: 35px 25px;

    }

    .footer-brand {

        grid-column: span 2;

        max-width: 100%;

    }

    .footer-brand > p {

        max-width: 100%;

        font-size: 10px;

    }

    .footer-column h3 {

        margin-bottom: 15px;

        font-size: 8px;

    }

    .footer-column a,
    .footer-column > span {

        font-size: 8px;

        margin-bottom: 10px;

    }

    .footer-contact {

        grid-column: span 2;

        padding-top: 5px;

    }

    .footer-bottom {

        padding: 22px 0;

        min-height: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

    .footer-bottom-links {

        flex-wrap: wrap;

        gap: 12px 18px;

    }

    .footer-social {

        margin-top: 2px;

    }

}


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

@media (max-width: 380px) {

    .footer-top {

        gap: 30px 18px;

    }

    .footer-logo-text strong {

        font-size: 12px;

    }

    .footer-logo-text small {

        font-size: 6px;

    }

}





/* =========================================
   GLOBAL SECTION SPACING — FINAL
========================================= */

/* Remove unwanted default spacing */
section {
    margin: 0 !important;
}

/* Desktop / Laptop */
@media (min-width: 851px) {

    .about-section,
    .gold-value-section,
    .process-section,
    .services-section,
    .awareness-section,
    .trust-section,
    .faq-section,
    .contact-section {
        padding-top: 90px !important;
        padding-bottom: 90px !important;
    }

    /* Hero is slightly larger */
    .hero {
        padding-bottom: 90px !important;
    }

}


/* Tablet */
@media (max-width: 850px) {

    .about-section,
    .gold-value-section,
    .process-section,
    .services-section,
    .awareness-section,
    .trust-section,
    .faq-section,
    .contact-section {
        padding-top: 75px !important;
        padding-bottom: 75px !important;
    }

}


/* Mobile */
@media (max-width: 600px) {

    .about-section,
    .gold-value-section,
    .process-section,
    .services-section,
    .awareness-section,
    .trust-section,
    .faq-section,
    .contact-section {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    .hero {
        padding-bottom: 60px !important;
    }

}


/* Small mobile */
@media (max-width: 380px) {

    .about-section,
    .gold-value-section,
    .process-section,
    .services-section,
    .awareness-section,
    .trust-section,
    .faq-section,
    .contact-section {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

}



body {
    font-family: "Noto Sans Malayalam", sans-serif;
}

.site-header,
.hero,
.footer {
    font-family: "Inter", "Noto Sans Malayalam", sans-serif;
}







/* =========================================================
   NEST GOLD HERO H1 — SEPARATE FONT
========================================================= */

.hero .hero-main-title,
.hero .hero-main-title span,
.hero .hero-main-title strong {
    font-family: "Anek Malayalam", sans-serif !important;
    font-weight: 700;
    font-variation-settings: "wdth" 75;
    letter-spacing: -1.5px;
}




.hero-main-title strong {
  font-size: 0.65em; /* Reduces size relative to the main heading; adjust as needed */
}








/* =========================================================
   PREMIUM GOLD GRAPHICS
   STANDALONE ADD-ON
========================================================= */

.premium-gold-graphics {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}


/* =========================================================
   MOLTEN GOLD WAVES
========================================================= */

.gold-wave {
    position: absolute;

    width: 650px;
    height: 230px;

    border-radius: 50%;

    background:
        linear-gradient(
            110deg,
            transparent 5%,
            rgba(255, 226, 145, .08) 20%,
            rgba(244, 193, 75, .25) 42%,
            rgba(255, 229, 151, .10) 60%,
            transparent 80%
        );

    filter: blur(2px);

    transform:
        rotate(-17deg)
        skewX(-15deg);

    opacity: .55;
}


/* Main wave */

.gold-wave-1 {
    right: -150px;
    top: 18%;

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


/* Secondary wave */

.gold-wave-2 {
    right: -100px;
    top: 27%;

    width: 560px;
    height: 160px;

    opacity: .30;

    transform:
        rotate(-21deg)
        skewX(-18deg);

    animation:
        goldWaveMove2 11s ease-in-out infinite;
}


/* Fine wave */

.gold-wave-3 {
    right: 5%;
    top: 37%;

    width: 430px;
    height: 100px;

    opacity: .20;

    transform:
        rotate(-15deg);

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


/* =========================================================
   GOLD DUST
========================================================= */

.gold-dust {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #f8d77d;

    box-shadow:
        0 0 7px rgba(255,215,120,.8),
        0 0 16px rgba(255,200,80,.3);

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


/* Individual positions */

.dust-1 {
    top: 18%;
    right: 32%;
}

.dust-2 {
    top: 24%;
    right: 18%;

    width: 2px;
    height: 2px;

    animation-delay: .7s;
}

.dust-3 {
    top: 31%;
    right: 38%;

    width: 4px;
    height: 4px;

    animation-delay: 1.2s;
}

.dust-4 {
    top: 43%;
    right: 22%;

    animation-delay: 1.8s;
}

.dust-5 {
    top: 51%;
    right: 42%;

    width: 2px;
    height: 2px;

    animation-delay: 2.2s;
}

.dust-6 {
    top: 62%;
    right: 17%;

    width: 4px;
    height: 4px;

    animation-delay: .4s;
}

.dust-7 {
    top: 70%;
    right: 34%;

    width: 2px;
    height: 2px;

    animation-delay: 1.5s;
}

.dust-8 {
    top: 28%;
    left: 48%;

    animation-delay: 2.5s;
}

.dust-9 {
    top: 72%;
    left: 44%;

    width: 2px;
    height: 2px;

    animation-delay: 1s;
}

.dust-10 {
    top: 16%;
    left: 57%;

    width: 4px;
    height: 4px;

    animation-delay: 2s;
}


/* =========================================================
   VALUATION MEASUREMENT LINES
========================================================= */

.gold-measure {
    position: absolute;

    width: 150px;
    height: 30px;

    border-top:
        1px solid rgba(247,207,112,.22);

    border-bottom:
        1px solid rgba(247,207,112,.08);

    opacity: .55;

    transform: rotate(-18deg);
}


.gold-measure::before,
.gold-measure::after {
    content: "";

    position: absolute;

    top: -4px;

    width: 7px;
    height: 7px;

    border:
        1px solid rgba(247,207,112,.45);

    border-radius: 50%;

    background: #3a071d;
}


.gold-measure::before {
    left: 0;
}

.gold-measure::after {
    right: 0;
}


.gold-measure span {
    position: absolute;

    right: 18px;
    top: 7px;

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

    font-size: 8px;
    letter-spacing: 2px;

    color: #e9c66c;
}


.measure-1 {
    right: 8%;
    top: 49%;
}


.measure-2 {
    right: 15%;
    top: 56%;

    width: 110px;

    opacity: .35;

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


/* =========================================================
   ABSTRACT GOLD BAR
========================================================= */

.gold-bar-graphic {
    position: absolute;

    right: 4%;
    bottom: 13%;

    width: 150px;
    height: 75px;

    transform:
        perspective(500px)
        rotateX(15deg)
        rotateY(-18deg)
        rotateZ(-8deg);

    opacity: .24;

    filter:
        drop-shadow(
            0 15px 25px rgba(0,0,0,.45)
        );

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


.gold-bar-face {
    width: 100%;
    height: 100%;

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

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #fff0a9 0%,
            #e8c45f 30%,
            #b98228 70%,
            #805019 100%
        );

    border:
        1px solid rgba(255,239,164,.65);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.65),
        inset 0 -8px 15px rgba(100,50,0,.22),
        0 0 35px rgba(255,210,90,.12);
}


.gold-bar-face span {
    font-family: Georgia, serif;

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

    color: #704611;

    text-shadow:
        0 1px 1px rgba(255,255,255,.3);
}


.gold-bar-face small {
    margin-top: 3px;

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

    font-size: 7px;
    letter-spacing: 3px;

    color: #704611;
}


/* =========================================================
   GOLD REFLECTIONS
========================================================= */

.gold-reflection {
    position: absolute;

    width: 260px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,235,165,.5),
            transparent
        );

    filter: blur(1px);

    transform: rotate(-20deg);

    opacity: .4;
}


.reflection-1 {
    right: 15%;
    top: 23%;

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


.reflection-2 {
    right: 0;
    top: 67%;

    width: 190px;

    opacity: .22;

    animation:
        reflectionMove 8s ease-in-out infinite reverse;
}


/* =========================================================
   PREMIUM SPARKLES
========================================================= */

.premium-spark {
    position: absolute;

    color: #ffe8a0;

    text-shadow:
        0 0 8px rgba(255,220,130,.8),
        0 0 22px rgba(255,200,80,.4);

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


.sparkle-p1 {
    right: 27%;
    top: 20%;

    font-size: 17px;
}


.sparkle-p2 {
    right: 7%;
    top: 42%;

    font-size: 11px;

    animation-delay: 1.3s;
}


.sparkle-p3 {
    right: 37%;
    bottom: 19%;

    font-size: 13px;

    animation-delay: 2s;
}


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

@keyframes goldWaveMove1 {

    0%,100% {
        transform:
            translate3d(0,0,0)
            rotate(-17deg)
            skewX(-15deg);
    }

    50% {
        transform:
            translate3d(-35px,18px,0)
            rotate(-13deg)
            skewX(-15deg);
    }
}


@keyframes goldWaveMove2 {

    0%,100% {
        transform:
            translateX(0)
            rotate(-21deg)
            skewX(-18deg);
    }

    50% {
        transform:
            translateX(-45px)
            rotate(-17deg)
            skewX(-18deg);
    }
}


@keyframes goldWaveMove3 {

    0%,100% {
        transform:
            translateX(0)
            rotate(-15deg);
    }

    50% {
        transform:
            translateX(-25px)
            rotate(-10deg);
    }
}


@keyframes goldDustFloat {

    0%,100% {
        transform:
            translateY(0)
            scale(.7);

        opacity: .25;
    }

    50% {
        transform:
            translateY(-15px)
            scale(1.2);

        opacity: .9;
    }
}


@keyframes measureFloat {

    0%,100% {
        transform:
            translateY(0)
            rotate(-18deg);
    }

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


@keyframes goldBarFloat {

    0%,100% {
        transform:
            perspective(500px)
            rotateX(15deg)
            rotateY(-18deg)
            rotateZ(-8deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(500px)
            rotateX(18deg)
            rotateY(-12deg)
            rotateZ(-5deg)
            translateY(-12px);
    }
}


@keyframes reflectionMove {

    0%,100% {
        opacity: .15;
        transform:
            translateX(20px)
            rotate(-20deg);
    }

    50% {
        opacity: .55;
        transform:
            translateX(-30px)
            rotate(-20deg);
    }
}


@keyframes premiumSparkle {

    0%,100% {
        opacity: .2;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


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

@media (max-width: 600px) {

    .premium-gold-graphics {
        opacity: .55;
    }

    .gold-wave-1 {
        width: 400px;
        height: 130px;

        right: -150px;
        top: 20%;
    }

    .gold-wave-2 {
        width: 350px;
        height: 100px;

        right: -130px;
        top: 30%;
    }

    .gold-wave-3 {
        width: 280px;
        height: 70px;

        right: -80px;
        top: 40%;
    }

    .gold-bar-graphic {
        width: 95px;
        height: 48px;

        right: -10px;
        bottom: 19%;

        opacity: .16;
    }

    .gold-bar-face span {
        font-size: 19px;
    }

    .gold-bar-face small {
        font-size: 5px;
        letter-spacing: 2px;
    }

    .gold-measure {
        width: 90px;
    }

    .measure-1 {
        right: -10px;
        top: 47%;
    }

    .measure-2 {
        right: 3px;
        top: 54%;
        width: 75px;
    }

    .gold-reflection {
        width: 160px;
    }

    .sparkle-p1 {
        right: 28%;
        top: 18%;
        font-size: 12px;
    }

    .sparkle-p2 {
        right: 5%;
        top: 40%;
        font-size: 8px;
    }

    .sparkle-p3 {
        right: 35%;
        bottom: 18%;
        font-size: 9px;
    }

    .gold-dust {
        width: 2px;
        height: 2px;
    }
}


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

@media (max-width: 380px) {

    .premium-gold-graphics {
        opacity: .38;
    }

    .gold-bar-graphic {
        opacity: .10;
    }

    .gold-measure {
        opacity: .3;
    }

    .gold-wave {
        opacity: .25;
    }
}







/* =========================================================
   EXTRA VISIBLE GOLD BUSINESS GRAPHICS
========================================================= */


/* =========================================================
   GOLD INGOT
========================================================= */

.visible-gold-ingot {
    position: absolute;

    right: 5%;
    top: 16%;

    width: 205px;
    height: 105px;

    border-radius: 14px;

    transform:
        perspective(700px)
        rotateX(18deg)
        rotateY(-24deg)
        rotateZ(-7deg);

    background:
        linear-gradient(
            145deg,
            rgba(255,242,177,.48),
            rgba(224,178,63,.42) 35%,
            rgba(143,88,19,.38) 75%,
            rgba(255,213,100,.34)
        );

    border:
        1px solid rgba(255,226,139,.55);

    box-shadow:
        0 30px 55px rgba(0,0,0,.35),
        0 0 45px rgba(255,211,91,.13),
        inset 0 2px 5px rgba(255,255,255,.35);

    opacity: .55;

    z-index: 2;

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


/* Ingot inner border */

.visible-gold-ingot::before {
    content: "";

    position: absolute;

    inset: 9px;

    border:
        1px solid rgba(255,239,172,.30);

    border-radius: 9px;
}


/* Ingot shine */

.ingot-shine {
    position: absolute;

    width: 45px;
    height: 150px;

    top: -25px;
    left: 40px;

    transform: rotate(27deg);

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

    filter: blur(5px);

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


/* Au */

.ingot-logo {
    position: absolute;

    left: 50%;
    top: 30%;

    transform: translateX(-50%);

    font-family: Georgia, serif;

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

    color: rgba(94,55,12,.78);

    text-shadow:
        0 1px 1px rgba(255,255,255,.3);
}


/* Purity */

.ingot-purity {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

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

    font-size: 7px;

    letter-spacing: 4px;

    color: rgba(87,49,10,.75);
}


/* Ingot decorative line */

.ingot-line {
    position: absolute;

    width: 55px;
    height: 1px;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

    background:
        rgba(90,52,10,.35);
}


/* =========================================================
   GOLD JEWELLERY RING
========================================================= */

.gold-ring-graphic {
    position: absolute;

    right: 24%;
    top: 39%;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    border:
        9px solid rgba(235,194,91,.32);

    box-shadow:
        0 0 0 2px rgba(255,230,145,.12),
        0 0 35px rgba(255,210,90,.10),
        inset 0 0 15px rgba(255,240,180,.12);

    transform:
        rotateX(64deg)
        rotateZ(-15deg);

    opacity: .65;

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


/* Inner ring */

.ring-inner {
    position: absolute;

    inset: 13px;

    border-radius: 50%;

    border:
        2px solid rgba(255,226,135,.25);
}


/* Ring highlight */

.ring-highlight {
    position: absolute;

    width: 28px;
    height: 9px;

    border-radius: 50%;

    top: -4px;
    left: 20px;

    background:
        rgba(255,245,190,.65);

    filter: blur(2px);

    transform: rotate(-12deg);
}


/* =========================================================
   GOLD CHAIN ARC
========================================================= */

.gold-chain-graphic {
    position: absolute;

    right: -20px;
    top: 52%;

    width: 360px;
    height: 190px;

    border:
        1px solid rgba(255,216,111,.20);

    border-left: 0;
    border-bottom: 0;

    border-radius:
        0 100% 0 0;

    transform:
        rotate(-14deg);

    opacity: .45;
}


/* Chain links */

.gold-chain-graphic span {
    position: absolute;

    width: 18px;
    height: 11px;

    border:
        2px solid rgba(238,196,88,.55);

    border-radius: 50%;

    transform: rotate(28deg);

    box-shadow:
        0 0 8px rgba(255,210,90,.12);
}


/* Chain positions */

.gold-chain-graphic span:nth-child(1) {
    right: 5px;
    top: 2px;
}

.gold-chain-graphic span:nth-child(2) {
    right: 34px;
    top: 11px;
}

.gold-chain-graphic span:nth-child(3) {
    right: 62px;
    top: 23px;
}

.gold-chain-graphic span:nth-child(4) {
    right: 88px;
    top: 39px;
}

.gold-chain-graphic span:nth-child(5) {
    right: 112px;
    top: 57px;
}

.gold-chain-graphic span:nth-child(6) {
    right: 136px;
    top: 78px;
}

.gold-chain-graphic span:nth-child(7) {
    right: 158px;
    top: 99px;
}

.gold-chain-graphic span:nth-child(8) {
    right: 183px;
    top: 119px;
}

.gold-chain-graphic span:nth-child(9) {
    right: 210px;
    top: 135px;
}

.gold-chain-graphic span:nth-child(10) {
    right: 238px;
    top: 149px;
}

.gold-chain-graphic span:nth-child(11) {
    right: 266px;
    top: 159px;
}

.gold-chain-graphic span:nth-child(12) {
    right: 294px;
    top: 166px;
}


/* =========================================================
   VALUE SYMBOL
========================================================= */

.gold-value-symbol {
    position: absolute;

    right: 38%;
    top: 67%;

    width: 62px;
    height: 62px;

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(255,226,137,.34),
            rgba(184,128,33,.13)
        );

    border:
        1px solid rgba(255,220,120,.38);

    box-shadow:
        0 0 30px rgba(255,210,90,.10),
        inset 0 0 15px rgba(255,240,180,.08);

    opacity: .7;

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


.gold-value-symbol span {
    font-family: Georgia, serif;

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

    color: #f0cf76;

    line-height: 1;
}


.gold-value-symbol small {
    margin-top: 3px;

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

    font-size: 5px;

    letter-spacing: 2px;

    color: #dfc17a;
}


/* =========================================================
   LARGE GOLD SPARKS
========================================================= */

.gold-spark {
    position: absolute;

    color: #ffe59b;

    text-shadow:
        0 0 8px rgba(255,220,130,.8),
        0 0 25px rgba(255,200,80,.5);

    opacity: .7;

    z-index: 4;

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


.spark-1 {
    right: 12%;
    top: 20%;

    font-size: 27px;
}


.spark-2 {
    right: 34%;
    top: 28%;

    font-size: 17px;

    animation-delay: 1s;
}


.spark-3 {
    right: 8%;
    top: 61%;

    font-size: 21px;

    animation-delay: 1.7s;
}


.spark-4 {
    right: 28%;
    bottom: 20%;

    font-size: 25px;

    animation-delay: 2.4s;
}


.spark-5 {
    right: 43%;
    top: 14%;

    font-size: 14px;

    animation-delay: .6s;
}


/* =========================================================
   EXTRA GOLD PARTICLES
========================================================= */

.gold-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #e9c66d;

    box-shadow:
        0 0 12px rgba(255,215,120,.8),
        0 0 25px rgba(255,200,70,.3);

    opacity: .65;

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


.particle-1 {
    right: 19%;
    top: 26%;
}

.particle-2 {
    right: 45%;
    top: 35%;

    width: 3px;
    height: 3px;

    animation-delay: 1s;
}

.particle-3 {
    right: 11%;
    top: 48%;

    width: 4px;
    height: 4px;

    animation-delay: 2s;
}

.particle-4 {
    right: 30%;
    top: 55%;

    width: 3px;
    height: 3px;

    animation-delay: 3s;
}

.particle-5 {
    right: 47%;
    top: 65%;

    animation-delay: 1.5s;
}

.particle-6 {
    right: 18%;
    top: 75%;

    width: 3px;
    height: 3px;

    animation-delay: 2.5s;
}

.particle-7 {
    right: 40%;
    top: 78%;

    width: 4px;
    height: 4px;

    animation-delay: 3.5s;
}


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

.gold-light-beam {
    position: absolute;

    right: 5%;
    top: 5%;

    width: 430px;
    height: 700px;

    background:
        linear-gradient(
            105deg,
            transparent 38%,
            rgba(255,220,120,.055) 47%,
            rgba(255,235,160,.12) 50%,
            rgba(255,220,120,.04) 53%,
            transparent 62%
        );

    transform:
        rotate(7deg);

    filter: blur(4px);

    opacity: .7;

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


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

@keyframes visibleIngotFloat {

    0%,100% {
        transform:
            perspective(700px)
            rotateX(18deg)
            rotateY(-24deg)
            rotateZ(-7deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(700px)
            rotateX(20deg)
            rotateY(-18deg)
            rotateZ(-4deg)
            translateY(-12px);
    }
}


@keyframes ingotShineMove {

    0%,100% {
        transform:
            translateX(-35px)
            rotate(27deg);

        opacity: .15;
    }

    50% {
        transform:
            translateX(95px)
            rotate(27deg);

        opacity: .65;
    }
}


@keyframes ringFloat {

    0%,100% {
        transform:
            rotateX(64deg)
            rotateZ(-15deg)
            translateY(0);
    }

    50% {
        transform:
            rotateX(64deg)
            rotateZ(-8deg)
            translateY(-10px);
    }
}


@keyframes valueFloat {

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

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


@keyframes largeSparkle {

    0%,100% {
        transform:
            scale(.65)
            rotate(0deg);

        opacity: .25;
    }

    50% {
        transform:
            scale(1.3)
            rotate(25deg);

        opacity: 1;
    }
}


@keyframes particleRise {

    0%,100% {
        transform:
            translateY(15px)
            scale(.6);

        opacity: .15;
    }

    50% {
        transform:
            translateY(-28px)
            scale(1.15);

        opacity: .9;
    }
}


@keyframes lightBeamMove {

    0%,100% {
        transform:
            translateX(40px)
            rotate(7deg);

        opacity: .35;
    }

    50% {
        transform:
            translateX(-70px)
            rotate(7deg);

        opacity: .8;
    }
}


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

@media (max-width: 600px) {

    .visible-gold-ingot {
        width: 125px;
        height: 65px;

        right: -5px;
        top: 15%;

        opacity: .38;
    }

    .ingot-logo {
        font-size: 21px;
    }

    .ingot-purity {
        font-size: 5px;
        letter-spacing: 2px;
        bottom: 11px;
    }

    .ingot-line {
        width: 35px;
        bottom: 25px;
    }

    .gold-ring-graphic {
        width: 100px;
        height: 100px;

        right: 20%;
        top: 39%;

        border-width: 7px;

        opacity: .45;
    }

    .gold-chain-graphic {
        width: 240px;
        height: 125px;

        right: -70px;
        top: 55%;

        opacity: .30;
    }

    .gold-chain-graphic span {
        width: 13px;
        height: 8px;

        border-width: 1px;
    }

    .gold-value-symbol {
        right: 31%;
        top: 67%;

        width: 48px;
        height: 48px;
    }

    .gold-value-symbol span {
        font-size: 19px;
    }

    .gold-value-symbol small {
        font-size: 4px;
    }

    .gold-spark {
        opacity: .55;
    }

    .spark-1 {
        right: 8%;
        top: 19%;
        font-size: 18px;
    }

    .spark-2 {
        right: 35%;
        top: 28%;
        font-size: 12px;
    }

    .spark-3 {
        right: 5%;
        top: 60%;
        font-size: 15px;
    }

    .spark-4 {
        right: 28%;
        bottom: 20%;
        font-size: 17px;
    }

    .spark-5 {
        right: 42%;
        top: 14%;
        font-size: 10px;
    }

    .gold-particle {
        width: 3px;
        height: 3px;
    }

    .gold-light-beam {
        width: 280px;
        height: 550px;

        right: -70px;

        opacity: .35;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .visible-gold-ingot {
        width: 105px;
        height: 55px;

        opacity: .28;
    }

    .gold-ring-graphic {
        width: 80px;
        height: 80px;

        border-width: 6px;

        opacity: .32;
    }

    .gold-chain-graphic {
        opacity: .22;
    }

    .gold-value-symbol {
        opacity: .45;
    }

    .gold-light-beam {
        opacity: .20;
    }
}










/* =========================================
   EVALUATION DETAILS
========================================= */

.evaluation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: 24px;
}

.evaluation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 15px;
    min-height: 76px;

    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(180, 140, 60, 0.18);
    border-radius: 14px;

    transition: all 0.3s ease;
}

.evaluation-item:hover {
    transform: translateY(-2px);
    border-color: rgba(180, 140, 60, 0.4);
}

/* ICON */
.evaluation-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;

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

    border-radius: 10px;

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

    background: rgba(190, 145, 55, 0.10);
    color: #b4862c;
}

/* TEXT AREA */
.evaluation-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* TITLE */
.evaluation-item strong {
    display: block;

    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;

    color: #29251d;
}

/* DESCRIPTION */
.evaluation-item small {
    display: block;

    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;

    color: #29251d;
}


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

@media (max-width: 768px) {

    .evaluation-grid {
        gap: 11px;
        margin-top: 20px;
    }

    .evaluation-item {
        gap: 10px;
        padding: 13px 12px;
        min-height: 70px;
        border-radius: 12px;
    }

    .evaluation-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;

        font-size: 16px;
        border-radius: 9px;
    }

    .evaluation-item strong {
        font-size: 14px;
        line-height: 1.3;
    }

    .evaluation-item small {
        font-size: 11px;
        line-height: 1.4;
    }
}


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

@media (max-width: 480px) {

    .evaluation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 18px;
    }

    .evaluation-item {
        gap: 8px;
        padding: 12px 10px;
        min-height: 68px;
        border-radius: 11px;
    }

    .evaluation-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;

        font-size: 14px;
        border-radius: 8px;
    }

    .evaluation-item strong {
        font-size: 12.5px;
        line-height: 1.25;
    }

    .evaluation-item small {
        font-size: 10px;
        line-height: 1.35;
    }
}


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

@media (max-width: 360px) {

    .evaluation-grid {
        gap: 7px;
    }

    .evaluation-item {
        gap: 7px;
        padding: 10px 8px;
        min-height: 63px;
    }

    .evaluation-icon {
        flex: 0 0 27px;
        width: 27px;
        height: 27px;

        font-size: 12px;
    }

    .evaluation-item strong {
        font-size: 11.5px;
    }

    .evaluation-item small {
        font-size: 9px;
    }
}



/* =========================================
   CLICKABLE HERO DESCRIPTION
========================================= */

.hero-description-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.hero-description-link .hero-main-description {
    position: relative;
    display: inline-block;

    padding-bottom: 7px;

    cursor: pointer;

    transition: all 0.25s ease;
}

/* Underline to show it is clickable */
.hero-description-link .hero-main-description::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: currentColor;

    transform: scaleX(0.35);
    transform-origin: left;

    transition: transform 0.3s ease;
}

/* Arrow / CTA */
.hero-click-hint {
    display: inline-block;

    margin-left: 8px;

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

    opacity: 0.85;

    transition: all 0.25s ease;
}

/* Hover */
.hero-description-link:hover .hero-main-description {
    transform: translateX(3px);
}

.hero-description-link:hover .hero-main-description::after {
    transform: scaleX(1);
}

.hero-description-link:hover .hero-click-hint {
    transform: translateX(5px);
    opacity: 1;
}





















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

.hero-visual {
    position: relative;
    isolation: isolate;
}


/* =========================================
   MONEY GRAPHICS CONTAINER
========================================= */

.money-graphics {
    position: absolute;
    inset: -70px -80px -70px -80px;

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


/* =========================================
   GOLD COINS
========================================= */

.coin {
    position: absolute;

    width: 64px;
    height: 64px;

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

    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 800;

    color: #8a5d12;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff2a8 0%,
            #f6d66a 28%,
            #dcae35 58%,
            #a96f13 100%
        );

    border: 3px solid rgba(255, 226, 126, 0.85);

    box-shadow:
        0 8px 18px rgba(125, 82, 10, 0.20),
        inset 0 2px 4px rgba(255,255,255,0.7),
        inset 0 -3px 5px rgba(100,60,5,0.25);

    text-shadow:
        0 1px 1px rgba(255,255,255,0.5);

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


/* INNER CIRCLE */

.coin::before {
    content: "";

    position: absolute;

    width: 43px;
    height: 43px;

    border-radius: 50%;

    border: 1px solid rgba(126, 82, 12, 0.35);
}


/* =========================================
   COIN POSITIONS
========================================= */

.coin-1 {
    top: 5%;
    left: 5%;
    transform: rotate(-12deg);
    animation-delay: 0s;
}

.coin-2 {
    top: 18%;
    right: 2%;
    transform: scale(.75) rotate(15deg);
    animation-delay: 1s;
}

.coin-3 {
    bottom: 10%;
    left: 3%;
    transform: scale(.82) rotate(-18deg);
    animation-delay: 2s;
}

.coin-4 {
    bottom: 3%;
    right: 7%;
    transform: scale(.68) rotate(12deg);
    animation-delay: 1.5s;
}


/* SMALL COINS */

.coin-small {
    width: 40px;
    height: 40px;

    font-size: 16px;

    border-width: 2px;
}

.coin-small::before {
    width: 27px;
    height: 27px;
}

.coin-5 {
    top: 52%;
    left: -3%;
    animation-delay: 2.5s;
}

.coin-6 {
    top: 65%;
    right: -2%;
    animation-delay: 3s;
}


/* =========================================
   CASH NOTES
========================================= */

.cash-note {
    position: absolute;

    width: 145px;
    height: 72px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #d9c56b 0%,
            #f4e39a 35%,
            #c9ae4e 70%,
            #e7d47e 100%
        );

    border: 2px solid rgba(128, 94, 18, 0.30);

    box-shadow:
        0 14px 28px rgba(78, 55, 10, 0.16),
        inset 0 0 0 3px rgba(255,255,255,0.25);

    opacity: .78;

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


/* NOTE INNER BORDER */

.cash-note::before {
    content: "";

    position: absolute;

    inset: 7px;

    border: 1px solid rgba(113, 82, 12, 0.35);

    border-radius: 5px;
}


/* NOTE SYMBOL */

.cash-note span {
    position: relative;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    border: 2px solid rgba(113, 82, 12, 0.4);

    color: #8b6418;

    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 800;
}


/* =========================================
   CASH POSITIONS
========================================= */

.cash-1 {
    top: 8%;
    right: 12%;

    transform: rotate(15deg);

    animation-delay: 1s;
}

.cash-2 {
    bottom: 15%;
    left: 5%;

    transform: rotate(-13deg) scale(.9);

    animation-delay: 2.5s;
}

.cash-3 {
    top: 42%;
    right: -8%;

    transform: rotate(22deg) scale(.72);

    animation-delay: 3.5s;
}


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

@keyframes coinFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -10px;
    }
}


@keyframes cashFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -12px;
    }
}


/* =========================================
   MAKE CARD STAND ABOVE GRAPHICS
========================================= */

.gold-card {
    position: relative;
    z-index: 5;
}


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

@media (max-width: 768px) {

    .money-graphics {
        inset: -40px -35px -40px -35px;
    }

    .coin {
        width: 48px;
        height: 48px;

        font-size: 19px;
    }

    .coin::before {
        width: 32px;
        height: 32px;
    }

    .coin-small {
        width: 32px;
        height: 32px;

        font-size: 13px;
    }

    .coin-small::before {
        width: 22px;
        height: 22px;
    }

    .cash-note {
        width: 105px;
        height: 53px;

        border-radius: 7px;
    }

    .cash-note span {
        width: 28px;
        height: 28px;

        font-size: 14px;
    }

    .cash-1 {
        top: 5%;
        right: 4%;
    }

    .cash-2 {
        bottom: 10%;
        left: 0;
    }

    .cash-3 {
        right: -5%;
        transform: rotate(18deg) scale(.65);
    }
}


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

@media (max-width: 480px) {

    .money-graphics {
        inset: -25px -20px -25px -20px;
    }

    .coin-1 {
        left: 0;
        top: 8%;
    }

    .coin-2 {
        right: 0;
        top: 15%;
    }

    .coin-3 {
        left: 0;
        bottom: 12%;
    }

    .coin-4 {
        right: 2%;
        bottom: 5%;
    }

    .cash-1 {
        right: 0;
        top: 3%;
        transform: rotate(12deg) scale(.75);
    }

    .cash-2 {
        left: -5%;
        bottom: 5%;
        transform: rotate(-10deg) scale(.7);
    }

    .cash-3 {
        display: none;
    }
}






























/* =========================================
   PLEDGED GOLD VISUAL
========================================= */

.pledge-visual {
    position: relative;

    width: 100%;
    height: 280px;

    overflow: hidden;

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

    isolation: isolate;
}


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

.pledge-money-graphics {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;
}


/* =========================================
   GOLD COINS
========================================= */

.pledge-coin {
    position: absolute;

    width: 62px;
    height: 62px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #fff4b5 0%,
            #f3d66d 25%,
            #d3a32e 58%,
            #98610e 100%
        );

    border: 3px solid #dfbd50;

    color: #79500a;

    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 900;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, .18),
        inset 0 3px 5px rgba(255,255,255,.7),
        inset 0 -5px 7px rgba(90,50,0,.3);

    z-index: 2;

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


/* INNER COIN CIRCLE */

.pledge-coin::before {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border: 2px solid rgba(110, 70, 5, .32);
}


/* =========================================
   COIN POSITIONS
========================================= */

.pledge-coin-1 {
    top: 18px;
    left: 12%;

    transform: rotate(-15deg);
}

.pledge-coin-2 {
    top: 42px;
    right: 10%;

    width: 48px;
    height: 48px;

    font-size: 16px;

    animation-delay: 1s;
}

.pledge-coin-3 {
    bottom: 22px;
    left: 18%;

    width: 43px;
    height: 43px;

    font-size: 15px;

    animation-delay: 2s;
}


/* =========================================
   GOLD BAR
========================================= */

.pledge-gold-bar {
    position: absolute;

    right: 7%;
    bottom: 25px;

    width: 92px;
    height: 48px;

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

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #fff0a0 0%,
            #e7c65d 30%,
            #bd8b1d 65%,
            #f1d873 100%
        );

    border: 2px solid #d0a531;

    box-shadow:
        0 12px 22px rgba(0,0,0,.20),
        inset 0 2px 4px rgba(255,255,255,.7);

    transform: rotate(-8deg);

    z-index: 2;

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


.pledge-gold-bar span {
    font-family: Arial, sans-serif;

    font-size: 7px;
    letter-spacing: 2px;

    color: #76500b;
}


.pledge-gold-bar strong {
    font-family: Arial, sans-serif;

    font-size: 11px;
    letter-spacing: 1px;

    color: #6c4807;
}


/* =========================================
   MONEY NOTES
========================================= */

.pledge-note {
    position: absolute;

    width: 105px;
    height: 54px;

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

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #c9b45d,
            #eddd91 35%,
            #b99a37 70%,
            #dfcf70
        );

    border: 2px solid rgba(100,70,10,.28);

    box-shadow:
        0 14px 25px rgba(0,0,0,.16),
        inset 0 0 0 3px rgba(255,255,255,.20);

    opacity: .65;

    z-index: 1;

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


/* NOTE BORDER */

.pledge-note::before {
    content: "";

    position: absolute;

    inset: 6px;

    border: 1px solid rgba(100,70,10,.28);

    border-radius: 4px;
}


/* ₹ SYMBOL */

.pledge-note span {
    position: relative;

    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    border: 2px solid rgba(100,70,10,.30);

    color: #76500b;

    font-family: Arial, sans-serif;

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


/* NOTE POSITIONS */

.pledge-note-1 {
    top: 105px;
    left: -15px;

    transform: rotate(-18deg);
}


.pledge-note-2 {
    top: 90px;
    right: -20px;

    transform: rotate(18deg) scale(.75);

    animation-delay: 2s;
}


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

.pledge-dot {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #d5aa38;

    box-shadow:
        0 0 12px rgba(213,170,56,.8);

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


.dot-a {
    top: 30%;
    left: 25%;
}

.dot-b {
    top: 22%;
    right: 30%;

    animation-delay: 1s;
}

.dot-c {
    bottom: 28%;
    right: 25%;

    animation-delay: 2s;
}

.dot-d {
    bottom: 20%;
    left: 35%;

    animation-delay: 3s;
}


/* =========================================
   MAIN PLEDGE CIRCLE
========================================= */

.pledge-circle {
    position: relative;

    z-index: 10;

    width: 125px;
    height: 125px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff3a7,
            #e2bb47 45%,
            #a86d12 100%
        );

    border: 4px solid #e6c65e;

    box-shadow:
        0 18px 35px rgba(0,0,0,.25),
        inset 0 4px 7px rgba(255,255,255,.7),
        inset 0 -7px 10px rgba(80,45,0,.30);
}


.pledge-circle span {
    font-family: Arial, sans-serif;

    font-size: 48px;
    font-weight: 900;

    color: #76500a;
}


/* =========================================
   RINGS
========================================= */

.pledge-ring {
    position: absolute;

    z-index: 3;

    border-radius: 50%;

    pointer-events: none;
}


.ring-a {
    width: 165px;
    height: 165px;

    border: 1px solid rgba(218,177,67,.55);

    animation: pledgeRingRotate 12s linear infinite;
}


.ring-b {
    width: 205px;
    height: 205px;

    border: 1px dashed rgba(218,177,67,.28);

    animation: pledgeRingRotateReverse 18s linear infinite;
}


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

@keyframes pledgeCoinFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -10px;
    }
}


@keyframes goldBarFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }
}


@keyframes pledgeNoteFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -10px;
    }
}


@keyframes pledgeDotPulse {

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

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


@keyframes pledgeRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes pledgeRingRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* =========================================
   H3 — BALOO CHETTAN 2
========================================= */

.service-card-content h3 {
    font-family: "Baloo Chettan 2", sans-serif;

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: 0;

    margin-bottom: 18px;
}




@media (max-width: 480px) {

    .pledge-visual {
        height: 230px;
    }

    .pledge-circle {
        width: 105px;
        height: 105px;
    }

    .pledge-circle span {
        font-size: 40px;
    }

    .ring-a {
        width: 140px;
        height: 140px;
    }

    .ring-b {
        width: 175px;
        height: 175px;
    }

    .pledge-coin-1 {
        left: 5%;
        width: 48px;
        height: 48px;
    }

    .pledge-coin-2 {
        right: 5%;
        width: 40px;
        height: 40px;
    }

    .pledge-coin-3 {
        left: 10%;
        width: 35px;
        height: 35px;
    }

    .pledge-gold-bar {
        right: 3%;
        bottom: 15px;

        transform: rotate(-8deg) scale(.75);
    }

    .pledge-note-1 {
        left: -35px;

        transform: rotate(-18deg) scale(.7);
    }

    .pledge-note-2 {
        right: -40px;

        transform: rotate(18deg) scale(.6);
    }

    .service-card-content h3 {
        font-size: 24px;
        line-height: 1.4;
    }
}


.service-card.service-dark
.service-card-content#pledgedgold
h3 {
    font-family: "Baloo Chettan 2", sans-serif !important;
}










/* =====================================================
   FIRST SERVICE CARD — LAPTOP EMPTY AREA GRAPHICS
===================================================== */

.first-card-graphics {
    position: absolute;

    left: 0;
    right: 0;

    top: 180px;
    bottom: 170px;

    pointer-events: none;

    overflow: hidden;

    z-index: 1;
}


/* Make sure first card can contain the graphics */

.service-card:first-child {
    position: relative;
    overflow: hidden;
}


/* =====================================================
   COINS
===================================================== */

.first-card-graphics .floating-coin {
    position: absolute;

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

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #fff3ad,
            #e6c75c 35%,
            #c39228 65%,
            #9b6814 100%
        );

    border: 3px solid #d8b44c;

    color: #76500b;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 900;

    box-shadow:
        0 12px 25px rgba(120, 83, 20, .18),
        inset 0 3px 5px rgba(255,255,255,.75),
        inset 0 -5px 7px rgba(100,60,5,.25);

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


/* Inner circle */

.first-card-graphics .floating-coin::before {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border: 2px solid rgba(110, 75, 10, .28);
}


/* Coin positions */

.first-card-graphics .coin-one {
    left: 14%;
    top: 12%;
}

.first-card-graphics .coin-two {
    right: 15%;
    top: 30%;

    width: 45px;
    height: 45px;

    font-size: 16px;

    animation-delay: 1.2s;
}

.first-card-graphics .coin-three {
    left: 30%;
    bottom: 10%;

    width: 40px;
    height: 40px;

    font-size: 14px;

    animation-delay: 2s;
}


/* =====================================================
   GOLD BAR
===================================================== */

.first-card-graphics .floating-gold-bar {
    position: absolute;

    right: 18%;
    bottom: 15%;

    width: 100px;
    height: 52px;

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

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #fff0a0,
            #e6c45a 35%,
            #b98219 70%,
            #f0d875
        );

    border: 2px solid #d1a839;

    box-shadow:
        0 12px 25px rgba(90,60,10,.18),
        inset 0 2px 4px rgba(255,255,255,.7);

    transform: rotate(-8deg);

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


.first-card-graphics .floating-gold-bar span {
    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 2px;

    color: #76500b;
}


.first-card-graphics .floating-gold-bar strong {
    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 1px;

    color: #684508;
}


/* =====================================================
   MONEY NOTES
===================================================== */

.first-card-graphics .floating-note {
    position: absolute;

    width: 105px;
    height: 54px;

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

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #d1c06e,
            #eee09a 35%,
            #c0a34b 70%,
            #e1d37c
        );

    border: 2px solid rgba(110,80,15,.20);

    box-shadow:
        0 12px 25px rgba(80,60,15,.12),
        inset 0 0 0 3px rgba(255,255,255,.25);

    opacity: .45;

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


.first-card-graphics .floating-note::before {
    content: "";

    position: absolute;

    inset: 6px;

    border: 1px solid rgba(100,75,15,.25);

    border-radius: 4px;
}


.first-card-graphics .floating-note span {
    position: relative;

    width: 28px;
    height: 28px;

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

    border-radius: 50%;

    border: 2px solid rgba(100,75,15,.25);

    color: #76500b;

    font-family: Arial, sans-serif;

    font-weight: 900;
}


/* Note positions */

.first-card-graphics .note-one {
    left: 5%;
    bottom: 25%;

    transform: rotate(-14deg);
}


.first-card-graphics .note-two {
    right: 4%;
    top: 8%;

    transform: rotate(13deg) scale(.75);

    animation-delay: 2s;
}


/* =====================================================
   SMALL SPARKS
===================================================== */

.first-card-graphics .gold-spark {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #c99c2d;

    box-shadow:
        0 0 12px rgba(201,156,45,.6);

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


.first-card-graphics .spark-one {
    top: 28%;
    left: 38%;
}


.first-card-graphics .spark-two {
    top: 18%;
    right: 35%;

    animation-delay: 1s;
}


.first-card-graphics .spark-three {
    bottom: 28%;
    right: 32%;

    animation-delay: 2s;
}


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

@keyframes firstCoinFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -10px;
    }
}


@keyframes firstBarFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }
}


@keyframes firstNoteFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }
}


@keyframes firstSpark {

    0%,
    100% {
        opacity: .2;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}






/* ================================================================
   PERFECT FLOATING WHATSAPP BUTTON
   ================================================================ */

.floating-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;

    width: 54px;
    height: 54px;

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

    background: #25D366;
    color: #ffffff;

    border-radius: 50%;

    text-decoration: none;

    z-index: 9999;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);

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

.floating-whatsapp svg {
    width: 31px;
    height: 31px;

    display: block;
}

.floating-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}


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

@media (max-width: 700px) {

    .floating-whatsapp {
        right: 15px;
        bottom: 18px;

        width: 50px;
        height: 50px;
    }

    .floating-whatsapp svg {
        width: 29px;
        height: 29px;
    }
}