/* ============================================================
   ASTRO GURU — MAIN STYLESHEET
   Structure:
   1.  CSS Variables (Design Tokens)
   2.  Reset & Base
   3.  Starfield Canvas
   4.  Utility Classes
   5.  Buttons
   6.  Gold Divider
   7.  Top Bar
   8.  Navigation
   9.  Hero Section
   10. Trust Section
   11. Problems Section & Animations
   12. About Section
   13. Services Section
   14. Testimonials Section
   15. Why Choose Us Section
   16. CTA Banner
   17. Contact Form
   18. Footer
   19. Success Modal
   20. Scroll Reveal Animation
   21. Floating Action Buttons
   22. Responsive Breakpoints
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES — Design Tokens
   All colours, fonts, spacing and transitions in one place.
   Edit here to retheme the entire site instantly.
   ============================================================ */
:root {
    /* Colour palette */
    --black: #050508;
    --deep: #0d0b1a;
    --purple: #1a0d2e;
    --violet: #2d1054;
    --gold: #c9a84c;
    --gold-light: #f0d080;
    --gold-pale: #f8ebb0;
    --glow: #7c3aed;
    --white: #f5f0ff;
    --muted: #a89dc0;

    /* Component colours */
    --card-bg: rgba(255, 255, 255, 0.035);
    --border: rgba(201, 168, 76, 0.18);

    /* Typography */
    --font-head: 'Cinzel', serif;
    --font-body: 'Raleway', sans-serif;

    /* Spacing & shape */
    --radius: 12px;

    /* Global transition */
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2. RESET & BASE STYLES
   Normalise browser defaults and set global body styles.
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}

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

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


/* ============================================================
   3. STARFIELD CANVAS
   Fixed background canvas rendered via JS starfield animation.
   Sits behind all content at z-index 0.
   ============================================================ */
#stars-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}


/* ============================================================
   4. UTILITY CLASSES
   Reusable layout helpers, section wrappers, and text tags.
   ============================================================ */

/* Max-width content wrapper */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Standard section vertical spacing */
.section {
    padding: 88px 0;
    position: relative;
    z-index: 2;
}

/* Small pill label above section headings */
.section-tag {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 5px 16px;
    margin-bottom: 14px;
}

/* Primary section heading */
.section-title {
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 14px;
}

/* Gold accent word inside section titles */
.section-title span {
    color: var(--gold);
}

/* Section description text beneath the heading */
.section-sub {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 50px;
}

/* Centre-align helper */
.center {
    text-align: center;
}

/* Inline gold text helper */
.gold {
    color: var(--gold);
}


/* ============================================================
   5. BUTTONS
   All CTA button variants — gold, outline, WhatsApp, call.
   Uses ::after pseudo-element for a shared hover shine.
   ============================================================ */

/* Base button — shared across all variants */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 30px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

/* Shared white-shine hover overlay */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: var(--transition);
}

.btn:hover::after {
    opacity: 1;
}

/* Gold gradient CTA — primary action */
.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, #e8c060 50%, var(--gold) 100%);
    background-size: 200%;
    color: #1a0a00;
    box-shadow: 0 4px 24px rgba(201, 168, 76, 0.35);
}

.btn-gold:hover {
    background-position: right;
    box-shadow: 0 6px 32px rgba(201, 168, 76, 0.55);
    transform: translateY(-2px);
}

/* Transparent outlined button — secondary action */
.btn-outline {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
}

.btn-outline:hover {
    background: rgba(201, 168, 76, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(201, 168, 76, 0.2);
}

/* WhatsApp button — green gradient */
.btn-wa {
    background: linear-gradient(135deg, #25d366, #128c5e);
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}

.btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

/* Phone call button — red gradient */
.btn-call {
    background: linear-gradient(135deg, #e53935, #b71c1c);
    color: #fff;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.3);
}

.btn-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(229, 57, 53, 0.5);
}

/* Icon colours inside hero buttons */
.hero-btns .btn-call i {
    color: #7f1414;
    font-weight: 900;
    font-size: 1.2rem;
}

.hero-btns .btn-wa i {
    color: #128c5e;
    font-weight: 900;
    font-size: 1.7rem;
}


/* ============================================================
   6. GOLD DIVIDER
   Short decorative horizontal rule placed below section titles.
   ============================================================ */
.gold-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 18px auto 30px;
    border-radius: 4px;
}


/* ============================================================
   7. TOP BAR
   Slim announcement bar at the very top of the page.
   Contains the contact number and WhatsApp quick-link.
   ============================================================ */
#top-bar {
    background: linear-gradient(90deg, #0b0018, var(--violet), #0b0018);
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    position: relative;
    z-index: 100;
}

#top-bar .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

#top-bar .top-text {
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    color: var(--gold-pale);
}

#top-bar .top-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* Quick-link buttons inside the top bar */
#top-bar .top-btns a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.83rem;
    font-weight: 600;
    transition: var(--transition);
}

/* Call button — gold */
#top-bar .tb-call {
    background: var(--gold);
    color: #1a0a00;
}

#top-bar .tb-call:hover {
    background: var(--gold-light);
}

/* WhatsApp button — green */
#top-bar .tb-wa {
    background: #25d366;
    color: #fff;
}

#top-bar .tb-wa:hover {
    background: #1ebe5d;
}

/* Close / dismiss button for the top bar */
#x-mark {
    position: absolute;
    top: 0;
    right: 5px;
    color: var(--white);
    font-size: 1.2rem;
    padding: 4px;
    cursor: pointer;
}


/* ============================================================
   8. NAVIGATION BAR
   Sticky header with logo, nav links, CTA, and mobile hamburger.
   ============================================================ */
#navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(5, 5, 8, 0.92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

#navbar .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    max-width: 1180px;
    margin: 0 auto;
}

/* Logo mark + brand name */
.nav-logo {
    font-family: var(--font-head);
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Circular logo icon / avatar */
.nav-logo .logo-icon {
    width: 38px;
    background: radial-gradient(circle at 40% 40%, var(--gold-light), var(--gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #1a0a00;
    box-shadow: 0 0 14px rgba(201, 168, 76, 0.5);
    overflow: hidden;
}

.logo-icon img {
    border-radius: 50%;
}

/* Horizontal nav link list */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}

.nav-menu a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
    transition: color var(--transition);
    position: relative;
}

/* Animated underline on hover */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.nav-menu a:hover {
    color: var(--gold);
}

.nav-menu a:hover::after {
    transform: scaleX(1);
}

/* Nav CTA button — smaller than hero buttons */
.nav-cta {
    font-size: 0.85rem !important;
    padding: 10px 22px !important;
}

/* Hamburger icon — shown on mobile only */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transition: var(--transition);
}

/* Mobile dropdown menu — toggled by JS */
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    background: rgba(13, 11, 26, 0.98);
    border-top: 1px solid var(--border);
    padding: 10px 0 16px;
}

.mobile-menu a {
    padding: 12px 24px;
    font-size: 0.95rem;
    color: var(--muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: color var(--transition);
}

.mobile-menu a:hover {
    color: var(--gold);
}

.mobile-menu.open {
    display: flex;
}

/* ========== NAV DROPDOWN ========== */

/* Make nav item relative for dropdown positioning */
.nav-menu .has-dropdown {
    position: relative;
}

/* Dropdown menu panel */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background: rgba(13, 11, 26, 0.97);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 168, 76, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 1000;
    list-style: none;
}

/* Small arrow pointing up toward the nav link */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    background: var(--border);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Show dropdown on hover */
.has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Each dropdown item */
.nav-dropdown li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    transition: var(--transition);
    white-space: nowrap;
}

/* Remove the underline animation from dropdown items */
.nav-dropdown li a::after {
    display: none;
}

.nav-dropdown li a:hover {
    background: rgba(201, 168, 76, 0.08);
    color: var(--gold-pale);
    padding-left: 18px;
}

/* Icon beside each service name */
.nav-dropdown li a i {
    width: 28px;
    height: 28px;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid var(--border);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--gold);
    flex-shrink: 0;
    transition: background var(--transition);
}

.nav-dropdown li a:hover i {
    background: rgba(201, 168, 76, 0.18);
}

/* Divider line between groups */
.nav-dropdown-divider {
    height: 1px;
    background: rgba(201, 168, 76, 0.08);
    margin: 6px 8px;
}

/* "Services" trigger link — show chevron arrow */
.has-dropdown > a {
    display: flex;
    align-items: center;
    gap: 5px;
}
.has-dropdown > a .nav-chevron {
    font-size: 0.6rem;
    color: var(--muted);
    transition: transform 0.25s ease, color 0.25s ease;
}
.has-dropdown:hover > a .nav-chevron {
    transform: rotate(180deg);
    color: var(--gold);
}

/* ============================================================
   9. HERO SECTION
   Full-viewport opening section with orbiting rings,
   headline, problem tags, and CTA buttons.
   ============================================================ */
#hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 50px 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 30%, rgba(124, 58, 237, 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
        var(--black);
}

/* Rotating decorative rings around hero centre */
.hero-orbit {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(201, 168, 76, 0.08);
    pointer-events: none;
    animation: orbit-spin 40s linear infinite;
}

.hero-orbit:nth-child(1) {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-orbit:nth-child(2) {
    width: 750px;
    height: 750px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 65s;
    animation-direction: reverse;
}

.hero-orbit:nth-child(3) {
    width: 1000px;
    height: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 90s;
}

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

/* Small pill badge above the hero title */
.hero-badge {
    display: inline-block;
    padding: 7px 20px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 50px;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
    animation: fade-up 0.7s ease both;
}

/* Main hero headline */
.hero-title {
    font-family: var(--font-head);
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 10px;
    animation: fade-up 0.8s 0.15s ease both;
}

.hero-title .line1 {
    display: block;
    color: var(--white);
}

.hero-title .line2 {
    display: block;
    background: linear-gradient(135deg, var(--gold-light), var(--gold), #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Horizontal list of problems the astrologer solves */
.hero-problems {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 6px;
    margin: 22px 0 36px;
    animation: fade-up 0.8s 0.3s ease both;
}

.hero-problems span {
    font-size: 0.87rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Gold star bullet before each problem tag */
.hero-problems span::before {
    content: '✦';
    color: var(--gold);
    font-size: 0.65rem;
}

/* Dot separator between problem tags */
.sep {
    color: rgba(201, 168, 76, 0.3);
    padding: 0 4px;
}

/* Hero CTA button row */
.hero-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fade-up 0.8s 0.45s ease both;
}

/* Scroll-down indicator */
.hero-scroll {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fade-up 0.8s 0.6s ease both;
}

.hero-scroll span {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Animated vertical line below scroll text */
.scroll-dot {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    border-radius: 2px;
    animation: scroll-pulse 2s ease-in-out infinite;
}

/* Keyframes */
@keyframes scroll-pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(0.6);
    }

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

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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


/* ============================================================
   10. TRUST SECTION
   Four-column stat grid directly below the hero.
   Negative top margin pulls it flush with the hero.
   ============================================================ */
#trust {
    padding: 0;
    position: relative;
    z-index: 3;
    margin-top: -2px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: linear-gradient(135deg, rgba(45, 16, 84, 0.85), rgba(26, 13, 46, 0.95));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.trust-card {
    padding: 38px 24px;
    text-align: center;
    border-right: 1px solid var(--border);
    transition: background var(--transition);
}

.trust-card:last-child {
    border-right: none;
}

.trust-card:hover {
    background: rgba(201, 168, 76, 0.06);
}

.trust-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
    display: block;
    filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.5));
}

.trust-number {
    font-family: var(--font-head);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--gold);
    display: block;
    line-height: 1;
}

.trust-label {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 6px;
    letter-spacing: 0.05em;
}


/* ============================================================
   11. PROBLEMS SECTION
   Grid of clickable problem cards linking to WhatsApp.
   Each card has layered animations: entrance, bob, glow,
   shimmer, pulse rings, and sparkles.
   ============================================================ */

/* --- Keyframe Definitions --- */

/* Gold shimmer light sweep across a card on hover */
@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(250%) skewX(-15deg);
    }
}

/* Expanding ring that fades out — used around card images */
@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }

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

/* Gentle vertical bob for card images */
@keyframes float-bob {

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

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

/* Gold bar at card top pulses in width and brightness */
@keyframes border-glow {

    0%,
    100% {
        opacity: 0.4;
        width: 40%;
    }

    50% {
        opacity: 1;
        width: 90%;
    }
}

/* Card slides up on page load */
@keyframes card-entrance {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

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

/* Small dot twinkles on and off */
@keyframes sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

/* --- Section Background --- */
#problems {
    background:
        radial-gradient(ellipse 60% 50% at 80% 50%, rgba(45, 16, 84, 0.3) 0%, transparent 70%),
        var(--deep);
}

/* --- Grid Layout --- */
.problems-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* --- Base Card Styles --- */
.problem-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;

    /* Smooth transitions for interactive states */
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;

    /* Entrance animation — delay overridden per card below */
    animation: card-entrance 0.6s ease both;
}

/* Stagger each card's entrance by 100ms */
.problems-grid .problem-card:nth-child(1) {
    animation-delay: 0.05s;
}

.problems-grid .problem-card:nth-child(2) {
    animation-delay: 0.15s;
}

.problems-grid .problem-card:nth-child(3) {
    animation-delay: 0.25s;
}

.problems-grid .problem-card:nth-child(4) {
    animation-delay: 0.35s;
}

/* --- Gold Top Line (::before) --- */
/* Animating bar that pulses wider and brighter across the top edge */
.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: border-glow 3s ease-in-out infinite;
    border-radius: 0 0 4px 4px;
}

/* Stagger each card's glow pulse by 750ms */
.problems-grid .problem-card:nth-child(1)::before {
    animation-delay: 0s;
}

.problems-grid .problem-card:nth-child(2)::before {
    animation-delay: 0.75s;
}

.problems-grid .problem-card:nth-child(3)::before {
    animation-delay: 1.5s;
}

.problems-grid .problem-card:nth-child(4)::before {
    animation-delay: 2.25s;
}

/* --- Gold Shimmer Overlay (::after) --- */
/* Light beam that sweeps across the card on hover */
.problem-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 20%,
            rgba(201, 168, 76, 0.1) 50%,
            transparent 80%);
    pointer-events: none;
    opacity: 1;
    animation: shimmer 0.7s ease forwards;
}

/* --- Pulse Rings (span.pulse-ring) --- */
/* Two concentric rings that expand outward from behind the image */
.problem-card .pulse-ring {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 168, 76, 0.4);
    pointer-events: none;
    opacity: 1;
    animation: pulse-ring 1.2s ease-out infinite;
}

/* Second ring — larger, more transparent, delayed */
.problem-card .pulse-ring-2 {
    width: 100px;
    height: 100px;
    border-color: rgba(201, 168, 76, 0.25);
    animation-delay: 0.4s !important;
}

/* --- Sparkle Dots (span.sparkle) --- */
/* Three tiny gold dots that twinkle at card corners */
.problem-card .sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    opacity: 0;
    animation: sparkle 1.4s ease infinite;
}

.problem-card .sparkle-1 {
    top: 14%;
    left: 16%;
    animation-delay: 0s !important;
}

.problem-card .sparkle-2 {
    top: 18%;
    right: 14%;
    animation-delay: 0.5s !important;
}

.problem-card .sparkle-3 {
    bottom: 20%;
    left: 20%;
    animation-delay: 1.0s !important;
}

/* --- Hover State --- */
.problem-card:hover {
    border-color: rgba(201, 168, 76, 0.55);
    background: rgba(201, 168, 76, 0.07);
    transform: translateY(-8px) scale(1.03);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(201, 168, 76, 0.1),
        0 0 30px rgba(201, 168, 76, 0.06);
}

/* --- Problem Image (span.problem-icon > img) --- */
.problem-icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
    display: block;
    position: relative;
    z-index: 2;
}

.problem-icon img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(201, 168, 76, 0.25);
    margin: 0 auto;
    animation: float-bob 4s ease-in-out infinite;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Stagger each image's float timing so they bob at different phases */
.problems-grid .problem-card:nth-child(1) .problem-icon img {
    animation-delay: 0s;
}

.problems-grid .problem-card:nth-child(2) .problem-icon img {
    animation-delay: 0.5s;
}

.problems-grid .problem-card:nth-child(3) .problem-icon img {
    animation-delay: 1.0s;
}

.problems-grid .problem-card:nth-child(4) .problem-icon img {
    animation-delay: 1.5s;
}

/* Gold glow on images — always visible as a subtle accent */
.problem-card .problem-icon img {
    border-color: rgba(201, 168, 76, 0.7);
    box-shadow:
        0 0 20px rgba(201, 168, 76, 0.35),
        0 0 40px rgba(201, 168, 76, 0.15);
    animation-play-state: paused;
    /* bob pauses on hover for focus */
}

/* --- Problem Label --- */
.problem-name {
    font-family: var(--font-head);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.03em;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.problem-card:hover .problem-name {
    color: var(--gold-light, #f0d080);
}


/* ============================================================
   12. ABOUT SECTION
   Two-column layout — image frame on left, text on right.
   ============================================================ */
#about {
    background: var(--black);
}

.about-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: center;
}

/* Left column — image frame */
.about-img-wrap {
    position: relative;
}

.about-img-frame {
    width: 100%;
    aspect-ratio: 3/4;
    max-width: 360px;
    background: linear-gradient(145deg, rgba(45, 16, 84, 0.8), rgba(13, 11, 26, 0.9));
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

/* Radial glow overlay inside the image frame */
.about-img-frame::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.1) 0%, transparent 65%);
}

.about-avatar {
    font-size: 5rem;
    filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.4));
}

.about-name-tag {
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.05em;
}

/* Gold badge overlapping the image frame bottom-right */
.about-img-badge {
    position: absolute;
    bottom: 20px;
    right: -16px;
    background: linear-gradient(135deg, var(--gold), #b8860b);
    color: #1a0a00;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 20px rgba(201, 168, 76, 0.4);
}

/* Right column — text */
.about-text .section-title {
    text-align: left;
}

.about-text .gold-divider {
    margin-left: 0;
}

.about-desc {
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 18px;
}

/* Skill / expertise chips */
.about-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.about-feat {
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--gold-pale);
}


/* ============================================================
   13. SERVICES SECTION
   Three-column card grid. Each card has a diagonal gradient
   overlay that fades in on hover.
   ============================================================ */
#services {
    background:
        radial-gradient(ellipse 70% 60% at 20% 50%, rgba(45, 16, 84, 0.25) 0%, transparent 60%),
        var(--deep);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px 28px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

/* Diagonal gradient hover overlay */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 168, 76, 0.45);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(201, 168, 76, 0.08);
}

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

.service-icon {
    font-size: 2.6rem;
    margin-bottom: 16px;
    display: block;
}

.service-title {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold-pale);
    margin-bottom: 10px;
}

.service-desc {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.75;
}

/* "Consult Now →" inline text link */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.05em;
    transition: gap var(--transition);
}

.service-card:hover .service-link {
    gap: 10px;
}

/* WhatsApp anchor inside each service card */
.service-card a {
    cursor: pointer;
}

.service-card a:hover {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--gold);
}


/* ============================================================
   14. TESTIMONIALS SECTION
   Horizontally scrolling carousel of review cards.
   Controlled by JS prev/next buttons and dot indicators.
   ============================================================ */
#testimonials {
    background: var(--black);
    overflow: hidden;
}

/* Outer wrapper for positioning */
.testi-track-wrap {
    position: relative;
}

/* The sliding row of cards */
.testi-track {
    display: flex;
    gap: 22px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Individual review card — shows 3 at a time on desktop */
.testi-card {
    flex: 0 0 calc((100% - 44px) / 3);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 28px;
    position: relative;
}

/* Large decorative quote mark */
.testi-card::before {
    content: '"';
    position: absolute;
    top: 12px;
    left: 22px;
    font-family: var(--font-head);
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.2;
    line-height: 1;
}

.testi-stars {
    color: var(--gold);
    font-size: 0.95rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.testi-text {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 20px;
}

/* Author row — avatar + name + location */
.testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testi-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--glow));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gold-light);
    flex-shrink: 0;
}

.testi-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--white);
}

.testi-location {
    font-size: 0.78rem;
    color: var(--muted);
}

/* Prev / next navigation buttons */
.testi-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.testi-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--gold);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.testi-btn:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: var(--gold);
}

/* Dot position indicators */
.testi-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
    justify-content: center;
}

.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    cursor: pointer;
    transition: var(--transition);
}

.testi-dot.active {
    background: var(--gold);
    transform: scale(1.3);
}


/* ============================================================
   15. WHY CHOOSE US SECTION
   Two-column grid of reason cards with icon + text.
   ============================================================ */
#why {
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(45, 16, 84, 0.3) 0%, transparent 70%),
        var(--deep);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.why-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 22px;
    transition: var(--transition);
}

.why-item:hover {
    border-color: rgba(201, 168, 76, 0.4);
    background: rgba(201, 168, 76, 0.05);
    transform: translateX(4px);
    /* slides right on hover */
}

/* Square icon container */
.why-icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.why-title {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-pale);
    margin-bottom: 5px;
}

.why-desc {
    font-size: 0.85rem;
    color: var(--muted);
}


/* ============================================================
   16. CTA BANNER
   Full-width centre-aligned call-to-action strip between
   the Why section and Contact form.
   ============================================================ */
#cta-banner {
    background:
        linear-gradient(135deg,
            rgba(45, 16, 84, 0.95) 0%,
            rgba(13, 5, 26, 0.98) 50%,
            rgba(45, 16, 84, 0.95) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 72px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Decorative radial glows behind the CTA text */
#cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 50%, rgba(124, 58, 237, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 20% 30%, rgba(201, 168, 76, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.cta-label {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}

.cta-title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.15;
}

.cta-title span {
    color: var(--gold);
}

.cta-sub {
    color: var(--muted);
    margin-bottom: 36px;
}

/* CTA button row */
.cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

#cta-banner .btn {
    font-size: 1.05rem;
    padding: 16px 34px;
}


/* ============================================================
   17. CONTACT FORM SECTION
   Two-column layout — info on left, form card on right.
   ============================================================ */
#contact {
    background: var(--black);
}

.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: start;
}

/* Left column — contact details */
.contact-info .section-title {
    text-align: left;
}

.contact-info .gold-divider {
    margin-left: 0;
}

.contact-info p {
    color: var(--muted);
    margin-bottom: 28px;
}

/* Individual contact detail row */
.contact-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-detail:last-child {
    border-bottom: none;
}

/* Square icon for each contact method */
.cd-icon {
    width: 42px;
    height: 42px;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.cd-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.cd-value {
    font-weight: 600;
    color: var(--white);
    font-size: 0.95rem;
}

/* Right column — form card */
.form-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
    backdrop-filter: blur(10px);
}

.form-card h3 {
    font-family: var(--font-head);
    font-size: 1.3rem;
    color: var(--gold-pale);
    margin-bottom: 24px;
    text-align: center;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.05em;
    margin-bottom: 7px;
}

/* Shared styles for all form inputs */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 8px;
    padding: 13px 16px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.92rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group select {
    cursor: pointer;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

/* Gold focus ring on all inputs */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(168, 157, 192, 0.5);
}

/* Full-width submit button */
.form-submit {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
    font-family: var(--font-head);
    letter-spacing: 0.06em;
    margin-top: 6px;
    display: flex;
    justify-content: center;
}

/* Privacy note below the submit button */
.form-privacy {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(168, 157, 192, 0.5);
    margin-top: 14px;
}


/* ============================================================
   18. FOOTER
   Four-column grid with brand, quick links, services,
   and contact info. Collapses to 2 columns on tablet.
   ============================================================ */
footer {
    background: rgba(5, 5, 8, 0.98);
    border-top: 1px solid var(--border);
    padding: 60px 0 0;
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-brand .nav-logo {
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 260px;
}

/* Footer column heading */
.footer-col h4 {
    font-family: var(--font-head);
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    font-size: 0.85rem;
    color: var(--muted);
    transition: color var(--transition);
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Gold arrow bullet before footer links */
.footer-col ul li a::before {
    content: '›';
    color: var(--gold);
}

.footer-col ul li a:hover {
    color: var(--gold-pale);
}

/* Contact items in the last footer column */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--muted);
}

.footer-contact-item span:first-child {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Bottom copyright bar */
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: rgba(168, 157, 192, 0.5);
}

/* Social icon links */
.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-social {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: var(--transition);
    cursor: pointer;
}

.footer-social:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: var(--gold);
}


/* ============================================================
   19. SUCCESS MODAL
   Displayed after the contact form is submitted.
   Uses a spring-bounce entrance animation.
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

.modal-overlay.show {
    display: flex;
}

.modal-box {
    background: linear-gradient(145deg, var(--purple), var(--deep));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 48px 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    animation: modal-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modal-pop {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.modal-box h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 10px;
}

.modal-box p {
    color: var(--muted);
    margin-bottom: 28px;
}


/* ============================================================
   20. SCROLL REVEAL ANIMATION
   Applied by JS IntersectionObserver — elements start hidden
   and animate in when they enter the viewport.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   21. FLOATING ACTION BUTTONS
   Fixed WhatsApp and Call buttons in the bottom-right corner.
   Both pulse continuously to draw attention.
   ============================================================ */

/* Container stacks buttons vertically */
.float-ct {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 28px;
    right: 28px;
    gap: 15px;
    z-index: 9000;
}

/* Shared circular button style */
.float-wa {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: pointer;
    text-decoration: none;
    color: #fff;

    /* WhatsApp green */
    background: linear-gradient(135deg, #25d366, #128c5e);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    animation: float-pulse 3s ease-in-out infinite;
}

/* Phone call variant — red */
#float-ca {
    background: linear-gradient(135deg, #d32525, #b81616db);
    box-shadow: 0 4px 20px rgba(211, 37, 37, 0.5);
    animation: float-pulse-ca 3s ease-in-out infinite;
}

#float-ca i {
    font-size: 1.1rem;
}

/* Red pulse keyframes */
@keyframes float-pulse-ca {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(211, 37, 37, 0.5),
            0 0 0 0 rgba(211, 37, 37, 0.4);
    }

    50% {
        box-shadow: 0 6px 30px rgba(211, 37, 37, 0.6),
            0 0 0 12px rgba(211, 37, 37, 0);
    }
}

/* Green pulse keyframes */
@keyframes float-pulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5),
            0 0 0 0 rgba(37, 211, 102, 0.4);
    }

    50% {
        box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6),
            0 0 0 12px rgba(37, 211, 102, 0);
    }
}


/* ============================================================
   22. RESPONSIVE BREAKPOINTS
   Mobile-first adjustments at 1024px, 768px, 600px, 480px.
   ============================================================ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {

    /* Trust grid: 4 → 2 columns */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-card:nth-child(2) {
        border-right: none;
    }

    .trust-card:nth-child(3) {
        border-top: 1px solid var(--border);
    }

    .trust-card:nth-child(4) {
        border-top: 1px solid var(--border);
        border-right: none;
    }

    /* Services: 3 → 2 columns */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer: 4 → 2 columns */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-wrap {
        gap: 40px;
    }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {

    /* Hide desktop nav — show hamburger */
    .nav-menu,
    .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Reduce section padding */
    .section {
        padding: 64px 0;
    }

    /* About: 2-col → 1-col stacked */
    .about-wrap {
        grid-template-columns: 1fr;
    }

    .about-img-frame {
        max-width: 260px;
        margin: 0 auto;
    }

    /* Contact: 2-col → 1-col stacked */
    .contact-wrap {
        grid-template-columns: 1fr;
    }

    /* Problems: 4 → 2 columns */
    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why grid: 2 → 1 column */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Testimonials: show 1 card at a time */
    .testi-card {
        flex: 0 0 calc(100% - 22px);
    }

    /* Footer: collapse to single column */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Reduce top padding on problems section */
    #problems {
        padding-top: 15px;
    }
}

/* ── Small mobile (≤ 600px) ── */
@media (max-width: 600px) {

    /* Trust: 4 → 2 columns */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Services: 2 → 1 column */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce form card padding */
    .form-card {
        padding: 28px 20px;
    }

    /* Smaller hero buttons */
    .hero-btns .btn {
        padding: 12px 22px;
        font-size: 0.88rem;
    }

    /* Move badge higher on mobile */
    .about-img-badge {
        bottom: 50px;
    }
}

/* ── Extra small (≤ 480px) ── */
@media (max-width: 480px) {

    /* Shrink logo text */
    #navbar .nav-logo {
        font-size: 1rem;
    }

    /* Problems stays at 2 columns */
    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Top bar compactness */
    #top-bar .inner {
        gap: 10px;
    }

    #top-bar .top-text {
        font-size: 0.78rem;
        text-align: center;
        padding: 5px 25px;
    }

    /* Smaller hero badge */
    .hero-badge {
        font-size: 0.6rem;
        padding: 5px 10px;
    }

    /* Compact about chips */
    .about-feat {
        font-size: 0.78rem;
        padding: 8px 6px;
    }

    /* Tighter problem cards */
    .problem-card {
        padding: 10px;
    }

    /* Stack hero buttons vertically */
    .hero-btns {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .hero-btns a {
        max-width: fit-content;
    }

    /* Compact trust cards */
    .trust-card {
        padding: 5px;
    }

    .trust-card .trust-icon,
    .trust-number {
        font-size: 1.5rem;
    }

    .trust-card .trust-label {
        font-size: 0.85rem;
    }

    /* Smaller CTA banner buttons */
    #cta-banner .btn {
        padding: 12px;
        font-size: 1rem;
    }

    /* Reduce hero bottom padding */
    #hero {
        padding-bottom: 10px;
    }

    /* Footer logo size */
    .footer-brand .nav-logo {
        font-size: 1.3rem;
    }
}





.disclaimer {
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(90deg, #17173d, #07071c);
  border-radius: 8px;
  text-align: center;
  margin: 20px 0;
}

.disclaimer p {
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

.disclaimer strong {
  color: #ffd32a;
  font-weight: 600;
}