/* ============================================================
   JGS LANKA CO. — EDITORIAL MINIMAL LUXURY (PURE MONOCHROME)
   100% Solid Black & White | ZERO Background Gradients Everywhere
   Subtle Dotted / Noise Film Grain Texture Across Whole Site
   3D Holographic Animated Color Tilt on Hero Main Title
   ============================================================ */

@font-face {
    font-family: "Mona Sans";
    src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"),
         url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
    font-weight: 100 1000;
    font-display: swap;
}

@property --bg-1-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 25;
}
@property --bg-2-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 35;
}
@property --bg-2-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 40;
}
@property --bg-3-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 45;
}
@property --bg-3-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 20;
}

:root {
    --bg-page: #08080a;
    --bg-surface: #0e0e11;
    --bg-card: #111115;
    --border-hairline: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.12);
    --border-hover: rgba(255, 255, 255, 0.18);
    --text-pure: #ffffff;
    --text-muted: #8e8e98;
    --text-faint: #52525c;
    --primary-color: #ffffff !important;
    --accent-color: #ffffff !important;

    --bg-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    --bg-1-x: 25;
    --bg-2-y: 40;
    --bg-2-x: 35;
    --bg-3-y: 20;
    --bg-3-x: 45;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL SCROLL & SOLID FLAT OBSIDIAN BLACK (ZERO GRADIENTS)
   ══════════════════════════════════════════════════════════════ */
html {
    background-color: #08080a !important;
    background-image: none !important;
    scroll-behavior: smooth !important;
    color-scheme: dark !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
}

body {
    background-color: #08080a !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
}

/* Subtle Grain/Noise Dotted Texture Across Entire Website Background (No Gradient Lighting) */
.bg-grain-noise-overlay {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
    background-size: 24px 24px, 200px 200px !important;
    background-repeat: repeat, repeat !important;
    opacity: 0.12 !important;
    mix-blend-mode: screen !important;
}

/* CRITICAL: GUARANTEE AOS NEVER HIDES TITLES OR SUBTITLES */
[data-aos],
[data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
}

/* DESTROY ALL BACKGROUND GRADIENTS, PSEUDO-ELEMENTS AND SIDE BLOBS */
.animated-background,
.snow-layer-1,
.snow-layer-2,
.snow-layer-3,
section::before,
section::after,
main::before,
main::after,
#home::before,
#home::after,
#gallery::before,
#gallery::after,
#portfolio::before,
#portfolio::after,
#event-management::before,
#event-management::after,
#company-branding::before,
#company-branding::after,
#web-dev::before,
#web-dev::after,
#process::before,
#process::after,
#testimonials::before,
#testimonials::after,
#faq::before,
#faq::after,
#projects::before,
#projects::after,
#packages::before,
#packages::after,
#order-now::before,
#order-now::after,
#about-me::before,
#about-me::after,
#contact-me::before,
#contact-me::after,
.portfolio-card::before,
.portfolio-card::after,
.testimonial-card::before,
.testimonial-card::after,
.brand-gallery-page-container::after,
.multi-color-line {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ENFORCE SAME SOLID FLAT BLACK ACROSS ALL SECTIONS */
main,
section,
header,
footer,
#home,
#gallery,
#portfolio,
#event-management,
#company-branding,
#web-dev,
#process,
#testimonials,
#faq,
#projects,
#packages,
#order-now,
#about-me,
#contact-me,
#main-footer {
    background: #08080a !important;
    background-color: #08080a !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ffffff;
}

/* ZERO PILLARBOX / TRANSPARENT CONTAINERS ACROSS ALL PAGES */
.container,
.gallery-section,
#reg-section,
.brand-gallery-page-container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* NATURAL SECTION PADDING & FULL WIDTH ARCHITECTURE */
section {
    scroll-margin-top: 85px !important;
    padding: 75px 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip !important;
}

/* STANDARDIZED 1200PX INNER CONTENT CONTAINERS */
.gallery-container,
.gallery-grid,
.portfolio-grid,
.portfolio-filters,
#portfolio .section-title,
#portfolio .section-subtitle,
.em-header,
.em-cards-grid,
#company-branding .section-title,
#company-branding .project-intro,
#company-branding .branding-tabs,
#company-branding .branding-content-wrapper,
#company-branding .brand-gallery-trigger-wrap,
#company-branding .branding-footer-text,
#web-dev .portfolio-grid,
#web-dev .section-title,
#web-dev .project-intro,
.process-grid,
#process .section-title,
#process .process-intro,
.testimonials-container,
.faq-container,
#faq .section-title,
#faq .faq-intro,
.projects-container,
#projects .section-title,
.packages-grid,
#packages .section-title,
#packages .packages-intro,
.order-container,
.about-container,
.contact-container,
#contact-me .section-title,
#contact-me .contact-intro,
.footer-top,
.footer-bottom,
.floating-profile {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Minimalist Dark Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #08080a;
}
::-webkit-scrollbar-thumb {
    background: #24242a;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #44444c;
}

/* Hide Light Theme Toggles */
#theme-toggle,
.theme-toggle,
.theme-switch,
.theme-btn,
button[id*="theme"],
div[class*="theme-toggle"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════
   TOP RIGHT TOOLBAR (PARALLEL, TRANSPARENT BLUR, NO BACKGROUND BOX)
   ══════════════════════════════════════════════════════════════ */
.jgs-service-launcher {
    position: fixed !important;
    top: 20px !important;
    right: 24px !important;
    z-index: 10005 !important;
    display: flex !important;
    align-items: center !important;
}

.floating-search-wrapper,
.nav-search-wrapper {
    position: fixed !important;
    top: 20px !important;
    right: 88px !important;
    z-index: 10005 !important;
    display: flex !important;
    align-items: center !important;
}

.service-launcher-btn {
    width: 52px !important; /* Slightly larger */
    height: 52px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    font-size: 1.42rem !important; /* Larger icon */
    cursor: pointer !important;
}

.service-launcher-btn:hover {
    border: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.floating-search-bar {
    height: 52px !important; /* Slightly larger */
    width: 52px !important;
    border-radius: 30px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
}

.search-toggle-btn {
    width: 52px !important; /* Slightly larger */
    height: 52px !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.35rem !important; /* Larger icon */
    flex-shrink: 0 !important;
    transition: background 0.25s ease !important;
}

.floating-search-bar:hover {
    border: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.floating-search-bar.expanded {
    width: 350px !important;
    border: none !important;
    background: rgba(18, 18, 22, 0.92) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 30px !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 4px !important;
}

/* KEEP SEARCH ICON VISIBLE ON THE LEFT WHEN EXPANDED */
.floating-search-bar.expanded .search-toggle-btn {
    background: transparent !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 52px !important;
    order: 1 !important;
    flex-shrink: 0 !important;
    cursor: default !important;
}

.floating-search-bar.expanded .search-toggle-btn i {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.floating-search-bar.expanded .search-toggle-btn .btn-text {
    display: none !important;
}

.search-input {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 14.5px !important;
    order: 2 !important;
    flex-grow: 1 !important;
    padding-right: 18px !important;
    padding-left: 4px !important;
}

.search-input::placeholder {
    color: #71717a !important;
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR (LARGER & TRANSPARENT BLUR)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .navbar {
        background: rgba(10, 10, 14, 0.72) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        border-radius: 40px !important;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4) !important;
        padding: 12px 34px !important;
        top: 22px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: 920px !important;
        position: fixed !important;
        z-index: 1000 !important;
    }

    .navbar .menu-toggle {
        display: none !important;
    }

    #nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 32px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #nav-links li.mobile-nav-logo,
    #nav-links li.close-btn-li {
        display: none !important;
    }

    #nav-links li a {
        color: #a1a1aa !important;
        font-weight: 600 !important;
        font-size: 14.5px !important;
        letter-spacing: 0.8px !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }

    #nav-links li a:hover,
    #nav-links li.active a {
        color: #ffffff !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   ANIMATED SHINING EFFECT ON TEXT ONLY (SILVER / GRAY CONTRAST)
   ZERO RECTANGLE / ZERO BOX / ZERO BACKGROUND OVERLAYS
   ══════════════════════════════════════════════════════════════ */
@keyframes textSilverShineSweep {
    0% {
        background-position: -150% 0;
    }
    100% {
        background-position: 150% 0;
    }
}

@property --bg-1-x {
    syntax: '<number>';
    inherits: false;
    initial-value: 25;
}
@property --bg-2-x {
    syntax: '<number>';
    inherits: false;
    initial-value: 35;
}
@property --bg-2-y {
    syntax: '<number>';
    inherits: false;
    initial-value: 40;
}
@property --bg-3-x {
    syntax: '<number>';
    inherits: false;
    initial-value: 45;
}
@property --bg-3-y {
    syntax: '<number>';
    inherits: false;
    initial-value: 20;
}

@keyframes heroColorMorph {
    0% {
        --bg-1-x: 25;
        --bg-2-y: 40;
        --bg-2-x: 35;
        --bg-3-y: 20;
        --bg-3-x: 45;
        background-position: 0% 50%, 0% 50%, 0% 50%, 0% 0%;
    }
    25% {
        --bg-1-x: 30;
        --bg-2-y: 50;
        --bg-2-x: 80;
        --bg-3-y: 20;
        --bg-3-x: 70;
    }
    50% {
        --bg-1-x: 10;
        --bg-2-y: 40;
        --bg-2-x: 30;
        --bg-3-y: 80;
        --bg-3-x: 50;
        background-position: 100% 50%, 100% 50%, 100% 50%, 0% 0%;
    }
    75% {
        --bg-1-x: 70;
        --bg-2-y: 10;
        --bg-2-x: 50;
        --bg-3-y: 30;
        --bg-3-x: 40;
    }
    100% {
        --bg-1-x: 25;
        --bg-2-y: 40;
        --bg-2-x: 35;
        --bg-3-y: 20;
        --bg-3-x: 45;
        background-position: 0% 50%, 0% 50%, 0% 50%, 0% 0%;
    }
}

.hero-shimmer-title,
.hero-main-title {
    font-family: "Mona Sans", "Poppins", sans-serif !important;
    font-size: clamp(2.5rem, 4.6vw, 4.4rem) !important;
    font-weight: 850 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
    margin: 0 0 20px 0 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    display: inline-flex !important;
    flex-direction: column !important;
    background: var(--bg-grain),
      conic-gradient(
        from 140deg at calc(var(--bg-1-x, 25) * 1%) 90%,
        #ffffff 0%,
        #ffffff 25%,
        rgba(255, 230, 240, 0.14) 38%,
        #ffffff 50%,
        rgba(220, 240, 255, 0.14) 65%,
        rgba(255, 250, 230, 0.10) 80%,
        #ffffff 100%
      ),
      radial-gradient(
        ellipse at calc(var(--bg-2-x, 35) * 1%) calc(var(--bg-2-y, 40) * 1%),
        rgba(255, 255, 255, 1) 40%,
        transparent 70%
      ),
      radial-gradient(
        ellipse at calc(var(--bg-3-x, 45) * 1%) calc(var(--bg-3-y, 20) * 1%),
        rgba(220, 240, 255, 0.10) 10%,
        transparent 50%
      ) !important;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
    background-size: 240px 240px, 200% 200%, 160% 160%, 160% 160% !important;
    background-blend-mode: overlay, normal, normal !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: heroColorMorph 16s linear infinite alternate !important;
    position: relative !important;
    overflow: visible !important;
    cursor: default !important;
    transform: none !important;
    text-shadow: none !important;
    filter: none !important;
}

.hero-shimmer-title::after {
    display: none !important;
    content: none !important;
}

.hero-shimmer-title span,
.hero-shimmer-title .title-row-1,
.hero-shimmer-title .title-row-2 {
    background: inherit !important;
    background-size: inherit !important;
    background-repeat: inherit !important;
    background-blend-mode: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: block !important;
}

.hero-shimmer-title .title-row-1 {
    white-space: nowrap !important;
}

.section-title,
.em-title,
#gallery .section-title,
#portfolio .section-title,
#event-management .section-title,
#company-branding .section-title,
#web-dev .section-title,
#projects .section-title,
#about-me .section-title,
#contact-me .section-title,
#process .section-title,
#testimonials .section-title,
#faq .section-title,
#packages .section-title,
#order-now .section-title {
    font-family: "Mona Sans", "Poppins", sans-serif !important;
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
    font-size: clamp(1.75rem, 2.5vw, 2.35rem) !important;
    font-weight: 850 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    background: var(--bg-grain),
      conic-gradient(
        from 140deg at calc(var(--bg-1-x, 25) * 1%) 90%,
        #ffffff 0%,
        #ffffff 25%,
        rgba(255, 230, 240, 0.14) 38%,
        #ffffff 50%,
        rgba(220, 240, 255, 0.14) 65%,
        rgba(255, 250, 230, 0.10) 80%,
        #ffffff 100%
      ),
      radial-gradient(
        ellipse at calc(var(--bg-2-x, 35) * 1%) calc(var(--bg-2-y, 40) * 1%),
        rgba(255, 255, 255, 1) 40%,
        transparent 70%
      ),
      radial-gradient(
        ellipse at calc(var(--bg-3-x, 45) * 1%) calc(var(--bg-3-y, 20) * 1%),
        rgba(220, 240, 255, 0.10) 10%,
        transparent 50%
      ) !important;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
    background-size: 240px 240px, 200% 200%, 160% 160%, 160% 160% !important;
    background-blend-mode: overlay, normal, normal !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: heroColorMorph 16s linear infinite alternate !important;
    text-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
}

.section-title span,
.em-title span {
    background: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   ALL SECTION SUBTITLES & DESCRIPTIONS (VISIBLE, CRISP & ELEGANT)
   ══════════════════════════════════════════════════════════════ */
.section-subtitle,
.em-subtitle,
.project-intro,
.testimonials-subtitle,
.branding-footer-text p {
    font-size: 1.05rem !important;
    color: #a1a1aa !important;
    text-align: center !important;
    max-width: 680px !important;
    margin: 12px auto 46px auto !important;
    line-height: 1.68 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ══════════════════════════════════════════════════════════════
   SHOWCASE PORTFOLIO BUTTON UNDER NAVBAR (DESKTOP)
   ══════════════════════════════════════════════════════════════ */
.showcase-final-container {
    display: none !important;
}

@media (min-width: 769px) {
    header#home > .showcase-final-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: absolute !important;
        top: 86px !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 501 !important;
        pointer-events: auto !important;
    }

    .line-segment {
        height: 1px !important;
        width: 130px !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .button-wrapper {
        position: relative !important;
        margin: 0 16px !important;
    }

    .showcase-button {
        display: inline-block !important;
        padding: 8px 30px !important;
        border-radius: 50px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: rgba(14, 14, 18, 0.85) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 13.5px !important;
        letter-spacing: 1px !important;
        transition: all 0.25s ease !important;
    }

    .button-wrapper:hover .showcase-button {
        border-color: rgba(255, 255, 255, 0.28) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    .showcase-card {
        position: absolute !important;
        top: calc(100% + 14px) !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(15px) !important;
        width: 380px !important;
        background: rgba(14, 14, 18, 0.95) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
        padding: 18px 20px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 1000 !important;
    }

    .button-wrapper:hover .showcase-card {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) !important;
    }

    .showcase-card .card-content {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        text-align: left !important;
    }

    .showcase-card img {
        width: 52px !important;
        height: 52px !important;
        object-fit: contain !important;
        border: none !important;
        border-radius: 8px !important;
    }

    .showcase-card .card-text h4 {
        color: #ffffff !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
    }

    .showcase-card .card-text p {
        color: #8e8e98 !important;
        font-size: 0.84rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   HERO SECTION (LARGER PHOTO, TEXT & BUTTONS)
   ══════════════════════════════════════════════════════════════ */
.editorial-hero,
header#home {
    min-height: calc(100vh - 65px) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    padding: 85px 4% 35px 4% !important;
    position: relative !important;
    background: #08080a !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Home Section Background: hero_bg.png at 85% opacity */
.hero-backdrop-image,
.editorial-hero::before,
header#home::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('/hero_bg.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Dark Contrast Overlay: dims background so text, badges and portrait stand out */
.hero-dark-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(8, 8, 10, 0.62) 0%, rgba(8, 8, 10, 0.75) 55%, rgba(8, 8, 10, 0.95) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Smooth fade out at the bottom of hero into next sections */
.editorial-hero::after,
header#home::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 120px !important;
    background: linear-gradient(to bottom, transparent, #08080a) !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.hero-inner-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    gap: 48px !important;
}

@media (min-width: 1600px) {
    .hero-inner-container {
        margin-left: auto !important;
        margin-right: 50px !important;
        padding-left: 110px !important;
    }
}

.hero-photo-wrap {
    width: 44% !important;
    max-width: 500px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    position: relative !important;
}

.hero-portrait-img,
.hero-bg-img {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    max-height: 77vh !important;
    object-fit: contain !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    display: block !important;
    pointer-events: none !important;
}

.hero-text-wrap {
    width: 56% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.hero-status-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #a1a1aa !important;
    text-transform: uppercase !important;
    margin-bottom: 22px !important;
}

.status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
}

.hero-lead-text {
    font-size: clamp(1.06rem, 1.22vw, 1.25rem) !important;
    line-height: 1.72 !important;
    color: #8e8e98 !important;
    max-width: 580px !important;
    margin: 0 0 34px 0 !important;
    text-align: left !important;
}

.hero-btn-row {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.ref-btn-capsule,
.hero-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 38px !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

.primary-capsule,
.primary-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid transparent !important;
}

.primary-capsule:hover,
.primary-btn:hover {
    background: #d4d4d8 !important;
    transform: translateY(-2px) !important;
}

.secondary-capsule,
.secondary-btn,
.ref-btn-capsule:not(.primary-capsule) {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.secondary-capsule:hover,
.secondary-btn:hover,
.ref-btn-capsule:not(.primary-capsule):hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.scroll-down {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #111115 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    animation: bounce 2s infinite !important;
}

.scroll-down:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    transform: translateX(-50%) translateY(3px) !important;
}

/* ══════════════════════════════════════════════════════════════
   CLIENT STRIP (HERO BOTTOM SERVICES BAR - 100% VISIBLE ON SCREEN)
   ══════════════════════════════════════════════════════════════ */
.ref-client-strip {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 !important;
    background: #08080a !important;
    box-shadow: none !important;
    margin: 0 0 65px 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 6 !important;
}

.ref-client-strip-inner {
    max-width: 1320px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 0 24px !important;
}

.ref-client-strip-inner span:nth-child(n+6) {
    display: none !important;
}

.ref-client-logo {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #8e8e98 !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    user-select: none !important;
}

.ref-client-logo:hover {
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO SECTION (4 CARDS PER ROW DESKTOP GRID - LARGER & BALANCED)
   ══════════════════════════════════════════════════════════════ */
#portfolio {
    max-width: 100% !important;
    width: 100% !important;
    padding: 75px 0 !important;
}

.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1360px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }
}

@media (max-width: 680px) {
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 0 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM EDITORIAL PORTFOLIO CARDS (CUSTOM LUXURY DESIGN)
   ══════════════════════════════════════════════════════════════ */
.portfolio-card {
    background: #101014 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease, 
                box-shadow 0.35s ease !important;
}

.portfolio-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 255, 255, 0.06) !important;
}

/* Top Media Visual Area */
.portfolio-img-wrap {
    position: relative !important;
    overflow: hidden !important;
    height: 240px !important;
    width: 100% !important;
    background: #09090c !important;
    flex-shrink: 0 !important;
}

.portfolio-img-wrap .portfolio-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.94 !important;
    filter: none !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
    display: block !important;
}

.portfolio-card:hover .portfolio-img-wrap .portfolio-img {
    transform: scale(1.05) !important;
    opacity: 1 !important;
}

/* Clean neutral dark transition at bottom of image (NO purple) */
.portfolio-img-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(10, 10, 14, 0.2) 65%, rgba(16, 16, 20, 0.95) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Bottom Content Area */
.portfolio-card .portfolio-content {
    background: #101014 !important;
    padding: 16px 24px 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    text-align: left !important;
}

/* Floating Icon Badge Overlapping the Seam */
.portfolio-card-badge {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 12px !important;
    background: #141418 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 1.45rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.75) !important;
    margin-top: -42px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    z-index: 5 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease,
                background 0.3s ease !important;
}

.portfolio-card:hover .portfolio-card-badge {
    transform: scale(1.08) translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    background: #181820 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 255, 255, 0.12) !important;
}

/* Title */
.portfolio-card .portfolio-title {
    font-family: var(--font-heading, 'Poppins', sans-serif) !important;
    font-size: 1.42rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
}

/* Description */
.portfolio-card .portfolio-description {
    font-size: 0.88rem !important;
    color: #9ca3af !important;
    line-height: 1.62 !important;
    margin: 0 0 18px 0 !important;
    flex-grow: 1 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
}

/* Footer / Action Button Row */
.portfolio-card-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

.portfolio-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #151519 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    padding: 7px 15px !important;
    color: #ffffff !important;
    font-family: var(--font-heading, 'Poppins', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.portfolio-action-btn i {
    font-size: 0.85rem !important;
    transition: transform 0.22s ease !important;
}

.portfolio-card:hover .portfolio-action-btn {
    background: #ffffff !important;
    color: #08080a !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3) !important;
}

.portfolio-card:hover .portfolio-action-btn i {
    transform: translateX(2px) !important;
}

/* Hide legacy button */
.portfolio-card .portfolio-card-btn {
    display: none !important;
}

.em-card,
.accordion-item,
.about-card,
.contact-form-container,
.contact-info-card,
.brand-gallery-trigger-card,
.project-card,
.info-table-container,
.skills-container {
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}

.em-card:hover,
.brand-gallery-trigger-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

.em-card-title,
.project-card-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em !important;
}

/* Gallery Swiper Cards */
#gallery .swiper-slide img {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

#gallery .swiper-slide:hover img {
    border-color: rgba(255, 255, 255, 0.18) !important;
    transform: scale(1.01) !important;
}

/* ══════════════════════════════════════════════════════════════
   EVENT MANAGEMENT (LARGER CARDS)
   ══════════════════════════════════════════════════════════════ */
.em-header {
    text-align: center !important;
    margin-bottom: 45px !important;
}

.em-label {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #a1a1aa !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.em-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.em-card-inner {
    position: relative !important;
    width: 100% !important;
    height: 440px !important; /* Larger card height */
    overflow: hidden !important;
    border-radius: 16px !important;
}

.em-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.em-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 28px !important;
    z-index: 2 !important;
}

.em-card-title {
    font-size: 1.45rem !important; /* Larger title */
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}

.em-card-desc {
    font-size: 0.96rem !important;
    color: #a1a1aa !important;
    line-height: 1.65 !important;
}

.em-tier-badge {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 5px 14px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.em-card-default-info {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   COMPANY BRANDING (LARGER PREVIEW CARDS)
   ══════════════════════════════════════════════════════════════ */
#company-branding {
    text-align: center !important;
}

.branding-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 40px !important;
}

.tab-btn {
    background: #111115 !important;
    color: #8e8e98 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important;
    padding: 10px 28px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

.tab-btn.active,
.tab-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.branding-slider-brand,
.branding-slider-logo {
    width: 100% !important;
    max-width: 1600px !important;
    padding: 36px 0 !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}

#company-branding .swiper-slide {
    width: 56% !important; /* SUBSTANTIALLY LARGER */
    min-width: 540px !important;
    height: 480px !important; /* TALL & PROMINENT */
    position: relative !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    opacity: 0.3 !important;
    filter: blur(2px) !important;
    transform: scale(0.92) !important;
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease, border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

#company-branding .swiper-slide-active {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.03) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 768px) {
    #company-branding .swiper-slide {
        width: 88% !important;
        min-width: 0 !important;
        height: 320px !important;
    }
}

.branding-slider-brand .swiper-slide-bg,
.branding-slider-logo .swiper-slide-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    border-radius: 18px !important;
}

.branding-slider-brand .swiper-slide .card-footer,
.branding-slider-logo .swiper-slide .card-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 22px 28px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
}

.branding-slider-brand .swiper-slide .card-footer span,
.branding-slider-logo .swiper-slide .card-footer span {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 1.5px !important;
}

.branding-slider-brand .swiper-slide .card-footer i,
.branding-slider-logo .swiper-slide .card-footer i {
    color: #ffffff !important;
    opacity: 0.75 !important;
}

.branding-slider-brand .swiper-slide .new-badge,
.branding-slider-logo .swiper-slide .new-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    z-index: 3 !important;
    backdrop-filter: blur(8px) !important;
}

/* Brand Gallery Showcase Trigger Card */
.brand-gallery-trigger-wrap {
    max-width: 1280px !important;
    margin: 45px auto 30px auto !important;
    padding: 0 10px !important;
}

.brand-gallery-trigger-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 28px 34px !important;
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.brand-gallery-trigger-card:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: #141419 !important;
    transform: translateY(-3px) !important;
}

.bg-trigger-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    text-align: left !important;
}

.bg-trigger-icon {
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    color: #ffffff !important;
}

.bg-trigger-badge {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #a1a1aa !important;
    margin-bottom: 4px !important;
}

.bg-trigger-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
}

.bg-trigger-desc {
    font-size: 0.92rem !important;
    color: #8e8e98 !important;
    margin: 0 !important;
}

.bg-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 26px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    transition: all 0.25s ease !important;
}

.brand-gallery-trigger-card:hover .bg-trigger-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: transparent !important;
}

.branding-footer-text {
    text-align: center !important;
    margin-top: 35px !important;
}

.branding-footer-text h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   DEVELOPMENT SECTION (LARGER CARDS)
   ══════════════════════════════════════════════════════════════ */
#web-dev .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

#web-dev .portfolio-img {
    height: 260px !important; /* Larger image */
}

#web-dev .portfolio-content {
    padding: 28px 26px 22px 26px !important;
}

#web-dev .portfolio-title {
    font-size: 1.35rem !important;
    margin-bottom: 12px !important;
}

#web-dev .portfolio-description {
    font-size: 0.95rem !important;
    line-height: 1.68 !important;
}

/* ══════════════════════════════════════════════════════════════
   MY DESIGN PROCESS (ALL 4 IN ONE HORIZONTAL ROW ON DESKTOP)
   ══════════════════════════════════════════════════════════════ */
#process {
    text-align: center !important;
}

#process .process-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* ALL 4 IN A SINGLE ROW */
    gap: 22px !important;
    max-width: 1340px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

@media (max-width: 1024px) {
    #process .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.process-card {
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 38px 24px 30px 24px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}

.process-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.process-number {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    color: rgba(255, 255, 255, 0.08) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 1 !important;
}

.process-icon {
    font-size: 2.4rem !important;
    color: #ffffff !important;
    margin-bottom: 18px !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
}

.process-title {
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 2 !important;
}

.process-description {
    font-size: 0.9rem !important;
    color: #8e8e98 !important;
    line-height: 1.65 !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   WHAT SAYS OUR HAPPY CLIENTS (NO TRANSFORM ON HOVER)
   ══════════════════════════════════════════════════════════════ */
#testimonials {
    text-align: center !important;
}

.testimonials-header {
    text-align: center !important;
    margin-bottom: 45px !important;
}

.testimonials-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 7px 18px !important;
    border-radius: 50px !important;
    margin: 0 auto 18px auto !important;
}

.testimonials-badge i {
    color: #ffffff !important;
    font-size: 0.72rem !important;
}

.testimonials-subtitle {
    color: #a1a1aa !important;
    font-size: 1.05rem !important;
    margin: 12px auto 45px auto !important;
    text-align: center !important;
    max-width: 600px !important;
    line-height: 1.65 !important;
}

.testimonials-slider {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-bottom: 50px !important;
    position: relative !important;
}

.testimonial-card {
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 34px 30px 26px 30px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.25s ease !important;
}

/* NO TRANSFORM ON HOVER AS SPECIFICALLY REQUESTED */
.testimonial-card:hover {
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

.testimonial-quote-icon {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.testimonial-quote-icon i {
    color: #ffffff !important;
    font-size: 1.15rem !important;
}

.rating {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.rating i {
    color: #ffffff !important;
    font-size: 0.92rem !important;
}

.rating-text {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #a1a1aa !important;
    margin-left: 6px !important;
}

.testimonial-text {
    color: #d4d4d8 !important;
    font-style: italic !important;
    line-height: 1.78 !important;
    font-size: 0.98rem !important;
    flex-grow: 1 !important;
    margin: 0 !important;
    min-height: 80px !important;
}

.testimonial-client-strip {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: auto !important;
}

#testimonials .testimonial-card .client-photo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.client-info {
    flex-grow: 1 !important;
}

.client-name {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin: 0 0 3px 0 !important;
}

.client-company {
    color: #8e8e98 !important;
    font-size: 0.82rem !important;
    margin: 0 !important;
}

.testimonial-verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.75rem !important;
    color: #22c55e !important;
    font-weight: 600 !important;
    background: rgba(34, 197, 94, 0.1) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-left: auto !important;
}

.testimonials-cta {
    text-align: center !important;
    margin-top: 30px !important;
}

.testimonials-review-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 28px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

.testimonials-review-btn:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ══════════════════════════════════════════════════════════════ */
.accordion-item {
    margin-bottom: 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.accordion-item:hover,
.accordion-item.active {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.accordion-header {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.accordion-content-inner p {
    color: #8e8e98 !important;
    line-height: 1.65 !important;
}

/* ══════════════════════════════════════════════════════════════
   PROJECTS SECTION
   ══════════════════════════════════════════════════════════════ */
.project-card {
    padding: 24px !important;
    text-align: left !important;
}

/* ══════════════════════════════════════════════════════════════
   PACKAGES SECTION
   ══════════════════════════════════════════════════════════════ */
.packages-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 28px !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.package-card {
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 36px 30px !important;
    text-align: center !important;
    box-shadow: none !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.package-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.package-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
}

.package-price {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
}

.package-description {
    color: #8e8e98 !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    margin-bottom: 25px !important;
}

.package-btn {
    display: inline-block !important;
    padding: 12px 32px !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.package-btn:hover {
    background: #d4d4d8 !important;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT ME SECTION (FREE PORTRAIT, ZERO BORDERS/SHADOWS)
   ══════════════════════════════════════════════════════════════ */
#about-me.about-redesign-section {
    padding: 75px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

.about-redesign {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 48px !important;
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    box-sizing: border-box !important;
}

.about-left {
    flex: 0 0 46% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    position: relative !important;
}

.about-portrait {
    width: 100% !important;
    max-width: 530px !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
    outline: none !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.portrait-fade {
    display: none !important;
}

.about-right {
    flex: 0 0 54% !important;
    text-align: left !important;
}

.about-name {
    font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}

.about-title-blue {
    color: #a1a1aa !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
}

.about-para {
    color: #8e8e98 !important;
    line-height: 1.8 !important;
    font-size: 1.05rem !important;
    margin-bottom: 30px !important;
}

.about-exp-heading {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    text-align: left !important;
}

.about-exp-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 28px !important;
}

.about-exp-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}

.exp-company {
    color: #a1a1aa !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.exp-sep {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.exp-role {
    color: #ffffff !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT US SECTION
   ══════════════════════════════════════════════════════════════ */
.contact-redesign {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 0 !important;
}

.contact-content {
    display: flex !important;
    gap: 32px !important;
}

.contact-form-container input,
.contact-form-container textarea,
.contact-form-container select {
    background: #141419 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.contact-form-container input:focus,
.contact-form-container textarea:focus,
.contact-form-container select:focus {
    border-color: rgba(255, 255, 255, 0.2) !important;
    outline: none !important;
}

.contact-form-container .submit-btn,
.contact-submit-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

.contact-form-container .submit-btn:hover,
.contact-submit-btn:hover {
    background: #d4d4d8 !important;
    transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════
   CHATBOT (FULL DARK & CRISP WHITE LUXURY FINISH)
   ══════════════════════════════════════════════════════════════ */
.chatbot-container {
    position: fixed !important;
    bottom: 35px !important;
    left: 35px !important;
    z-index: 10001 !important;
}

/* ══════════════════════════════════════════════════════════════
   CHATBOT BUTTON & FULL DARK & CRISP WHITE LUXURY PANEL
   ══════════════════════════════════════════════════════════════ */
.chatbot-button {
    color: #ffffff !important;
    background: rgba(14, 14, 20, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 255, 255, 0.08) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.45rem !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.chatbot-button i {
    color: #ffffff !important;
    font-size: 1.45rem !important;
    transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.chatbot-button:hover {
    transform: scale(1.1) translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(24, 24, 34, 0.98) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 255, 255, 0.22) !important;
}

.chatbot-button:hover i,
.chatbot-button.pulse:hover i {
    color: #ffffff !important;
    transform: scale(1.12) !important;
}

.chatbot-panel {
    width: 370px !important;
    max-width: 90vw !important;
    height: 530px !important;
    max-height: 80vh !important;
    background: rgba(12, 12, 18, 0.98) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    bottom: 80px !important;
    left: 0 !important;
    z-index: 10003 !important;
}

/* Disable old legacy rotating border animation */
.chatbot-panel::after {
    display: none !important;
    animation: none !important;
}

.chatbot-header {
    background: rgba(8, 8, 12, 0.98) !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.chatbot-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.chatbot-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    position: relative !important;
}

.online-indicator {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    border: 2px solid #08080c !important;
    box-shadow: 0 0 8px #10b981 !important;
}

.chatbot-header-text h3 {
    color: #ffffff !important;
    font-family: var(--font-heading, 'Poppins', sans-serif) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.chatbot-header-text p {
    color: #10b981 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin: 2px 0 0 0 !important;
    letter-spacing: 0.2px !important;
}

.chatbot-close {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #a1a1aa !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}

.chatbot-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

.chatbot-messages {
    flex: 1 !important;
    padding: 16px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
}

.chatbot-messages::-webkit-scrollbar {
    width: 4px !important;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}

.bot-message {
    background: rgba(20, 20, 28, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e4e4e7 !important;
    border-radius: 14px 14px 14px 4px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 88% !important;
    align-self: flex-start !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.bot-message strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.bot-message::before {
    display: none !important;
}

.user-message {
    background: #ffffff !important;
    color: #08080a !important;
    border-radius: 14px 14px 4px 14px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    max-width: 85% !important;
    align-self: flex-end !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15) !important;
}

/* Category Cards Inside Bot Messages */
.category-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

.category-card {
    background: rgba(16, 16, 22, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
    color: #e4e4e7 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    text-align: center !important;
}

.category-card i {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    transition: transform 0.2s ease !important;
}

.category-card span {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #f4f4f5 !important;
}

.category-card:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.08) !important;
}

.category-card:hover i {
    transform: scale(1.15) !important;
}

/* Options List & Reset / WhatsApp Links */
.options-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

.option-item {
    background: rgba(16, 16, 22, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

.option-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Suggestion Chips */
.chatbot-chips {
    background: rgba(8, 8, 12, 0.98) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.chatbot-chips::-webkit-scrollbar {
    display: none !important;
}

.chatbot-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d4d4d8 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.chatbot-chip:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Thinking Animation */
.thinking {
    display: inline-flex !important;
    gap: 5px !important;
    align-items: center !important;
    padding: 4px 6px !important;
}

.thinking .dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    animation: thinkingBounce 1.4s infinite ease-in-out both !important;
}

.thinking .dot:nth-child(1) { animation-delay: -0.32s !important; }
.thinking .dot:nth-child(2) { animation-delay: -0.16s !important; }

@keyframes thinkingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* Chatbot Input Area */
.chatbot-input {
    background: rgba(8, 8, 12, 0.98) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 14px !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.chatbot-input input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    outline: none !important;
    flex: 1 !important;
    transition: border-color 0.2s ease !important;
}

.chatbot-input input:focus {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.chatbot-input input::placeholder {
    color: #71717a !important;
}

.chatbot-input button {
    background: #ffffff !important;
    color: #08080a !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.chatbot-input button:hover {
    background: #e4e4e7 !important;
    transform: scale(1.08) !important;
}

/* 📱 Chatbot Mobile Responsive */
@media (max-width: 768px) {
    .chatbot-container {
        left: 20px !important;
        bottom: 20px !important;
    }

    .chatbot-button {
        width: 54px !important;
        height: 54px !important;
        font-size: 1.35rem !important;
    }

    .chatbot-panel {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        left: 0 !important;
        bottom: 75px !important;
        max-height: 72vh !important;
        border-radius: 18px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
#main-footer {
    background: #08080a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #71717a !important;
    box-shadow: none !important;
}

.footer-credit span {
    color: #ffffff !important;
}

.footer-social-icon {
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.footer-social-icon:hover {
    background: #ffffff !important;
    border-color: transparent !important;
    color: #000000 !important;
}

/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE CLEAN MOBILE RESPONSIVENESS (≤ 768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .navbar {
        position: fixed !important;
        top: 15px !important;
        right: 16px !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        z-index: 10005 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar nav {
        display: flex !important;
        align-items: center !important;
    }

    .navbar .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        font-size: 1.15rem !important;
        cursor: pointer !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    #nav-links {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(8, 8, 10, 0.98) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        list-style: none !important;
        padding: 40px 20px !important;
        margin: 0 !important;
        z-index: 10010 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    #nav-links.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #nav-links li.close-btn-li {
        display: block !important;
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 10025 !important;
    }

    .menu-close-btn {
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        font-size: 1.6rem !important;
        line-height: 1 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.2s ease, transform 0.2s ease !important;
    }

    .menu-close-btn:hover,
    .menu-close-btn:active {
        background: rgba(255, 255, 255, 0.18) !important;
        transform: scale(1.05) !important;
    }

    #nav-links li a {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        color: #8e8e98 !important;
        text-decoration: none !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        transition: color 0.2s ease !important;
    }

    #nav-links li a:hover,
    #nav-links li.active a {
        color: #ffffff !important;
    }

    /* TOP RIGHT TOOLBAR ON MOBILE */
    .jgs-service-launcher,
    #service-launcher-popup,
    .service-launcher-btn {
        display: none !important;
    }

    .floating-search-wrapper,
    .nav-search-wrapper {
        top: 15px !important;
        right: 68px !important;
        z-index: 1000 !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }

    /* When mobile navigation drawer is opened, put search underneath it */
    body.menu-open .floating-search-wrapper,
    body.menu-open .nav-search-wrapper,
    .menu-open .floating-search-wrapper,
    .menu-open .nav-search-wrapper,
    #nav-links.active ~ .nav-search-wrapper {
        z-index: 1 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .floating-search-bar,
    .search-toggle-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .floating-search-bar.expanded {
        width: calc(100vw - 80px) !important;
        max-width: 280px !important;
    }

    /* MOBILE HERO */
    .editorial-hero,
    header#home {
        padding: 95px 20px 40px 20px !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .hero-inner-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .hero-photo-wrap {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto 12px auto !important;
    }

    .hero-portrait-img,
    .hero-bg-img {
        max-width: 280px !important;
        max-height: 44vh !important;
        margin: 0 auto !important;
    }

    .hero-text-wrap {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .hero-status-tag {
        margin: 0 auto 16px auto !important;
        font-size: 10px !important;
        padding: 6px 14px !important;
    }

    .hero-shimmer-title,
    .hero-main-title {
        font-size: clamp(2.2rem, 8.8vw, 2.9rem) !important;
        text-align: center !important;
        align-items: center !important;
        margin-bottom: 18px !important;
    }

    .hero-lead-text {
        font-size: 0.95rem !important;
        line-height: 1.68 !important;
        text-align: center !important;
        margin: 0 auto 28px auto !important;
        max-width: 90% !important;
    }

    .hero-btn-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .ref-btn-capsule,
    .hero-action-btn {
        width: 100% !important;
        max-width: 290px !important;
        padding: 15px 22px !important;
        font-size: 13.5px !important;
        letter-spacing: 1.5px !important;
    }

    header#home .scroll-down,
    .scroll-down {
        display: none !important;
    }

    /* MOBILE CLIENT LOGOS (SMOOTH INFINITE MARQUEE TICKER) */
    .ref-client-strip {
        height: 48px !important;
        min-height: 48px !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin-bottom: 40px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    .ref-client-strip-inner {
        max-width: none !important;
        width: max-content !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 36px !important;
        padding: 0 !important;
        animation: clientMarqueeMobile 18s linear infinite !important;
    }

    .ref-client-strip-inner span:nth-child(n+6) {
        display: inline-flex !important;
    }

    .ref-client-logo {
        font-size: 0.85rem !important;
        letter-spacing: 1.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* MOBILE SECTIONS & CARDS (ELEGANT GUTTERS & BREATHING ROOM) */
    section,
    #gallery,
    #portfolio,
    #web-dev,
    #event-management,
    #company-branding,
    #process,
    #testimonials,
    #about-me,
    #contact-me {
        padding: 50px 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .gallery-container,
    .gallery-grid,
    .portfolio-grid,
    .em-cards-grid,
    #process .process-grid,
    #web-dev .portfolio-grid,
    .packages-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .portfolio-card,
    .em-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    .portfolio-img {
        height: 200px !important;
    }

    .em-card-inner {
        height: 380px !important;
    }

    .portfolio-content {
        padding: 18px 16px 14px 16px !important;
    }

    .portfolio-title {
        font-size: 1.15rem !important;
    }

    .portfolio-description {
        font-size: 0.86rem !important;
    }

    .portfolio-card-btn {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 12px !important;
    }

    .branding-tabs {
        gap: 8px !important;
        margin-bottom: 24px !important;
    }

    .tab-btn {
        padding: 8px 18px !important;
        font-size: 12px !important;
    }

    #company-branding .swiper-slide {
        width: 82% !important;
        height: 220px !important;
        aspect-ratio: 16 / 10 !important;
    }

    .brand-gallery-trigger-card {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
        padding: 20px 16px !important;
    }

    .bg-trigger-left {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .process-card,
    .testimonial-card,
    .package-card {
        padding: 26px 20px !important;
        border-radius: 16px !important;
    }

    /* ──────────────────────────────────────────
       MOBILE ABOUT US SECTION (CLEAN & CENTERED)
       ────────────────────────────────────────── */
    /* ──────────────────────────────────────────
       MOBILE ABOUT US SECTION (CLEAN & CENTERED)
       ────────────────────────────────────────── */
    #about-me.about-redesign-section {
        padding: 35px 20px 75px 20px !important;
    }

    .about-header {
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .about-redesign {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .about-left {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
    }

    .about-portrait {
        width: 195px !important;
        max-width: 195px !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .about-right {
        flex: 0 0 100% !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }

    .about-name {
        font-size: clamp(1.4rem, 5.2vw, 1.75rem) !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-align: center !important;
        margin-bottom: 6px !important;
        word-break: break-word !important;
    }

    .about-title-blue {
        font-size: 0.78rem !important;
        letter-spacing: 1.5px !important;
        color: #a1a1aa !important;
        text-align: center !important;
        margin-bottom: 14px !important;
    }

    .about-para {
        font-size: 0.86rem !important;
        line-height: 1.6 !important;
        color: #8e8e98 !important;
        text-align: center !important;
        margin-bottom: 18px !important;
        padding: 0 4px !important;
    }

    .about-experience-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .about-exp-heading {
        font-size: 0.88rem !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .about-exp-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .about-exp-item {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .exp-company {
        color: #a1a1aa !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .exp-sep {
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    .exp-role {
        color: #ffffff !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }

    .about-social-icons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
        margin-top: 6px !important;
    }

    .contact-redesign {
        padding: 40px 18px !important;
    }

    .contact-content {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* DISABLE HEAVY 3D CANVAS & UNLOCK ULTRA SMOOTH HARDWARE SCROLL ON MOBILE */
    .ribbon-3d-canvas-wrap,
    .stylus-3d-canvas-wrap {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html, body {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   ANIMATED DIAGONAL SIDE SHOWCASE CARDS (DESKTOP ONLY)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1599px) {
    .side-diagonal-card {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (min-width: 1600px) {
    /* Ensure Sections with Side Cards Span 100% of Screen Width */
    #home,
    header#home,
    #event-management,
    #company-branding,
    #web-dev {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: clip !important;
        position: relative !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    header#home {
        padding-bottom: 0 !important;
    }

    /* Inner containers remain centered and neat without being obstructed */
    #event-management .em-header,
    #event-management .em-cards-grid,
    #company-branding .section-title,
    #company-branding .project-intro,
    #company-branding .branding-tabs,
    #company-branding .branding-content-wrapper,
    #company-branding .brand-gallery-trigger-wrap,
    #company-branding .branding-footer-text {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .side-diagonal-card {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        width: 370px !important;
        max-width: 370px !important;
        z-index: 5 !important;
        pointer-events: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        opacity: 0 !important;
        transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease !important;
    }

    /* Left-anchored Cards */
    .hero-diagonal-card {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-120%) !important;
    }

    .hero-diagonal-card.is-visible {
        transform: translateX(var(--hero-card-x, 0)) !important;
        opacity: var(--hero-card-opacity, 1) !important;
        transition: transform 0.15s ease-out, opacity 0.15s ease-out !important;
    }

    /* Left-anchored Branding Card (Contained Floating Animated Rectangle) */
    .branding-diagonal-card {
        top: 50% !important;
        bottom: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 480px !important;
        left: 30px !important;
        right: auto !important;
        transform: translateY(-50%) translateX(-130%) !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
        transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease !important;
    }

    .branding-diagonal-card.is-visible {
        transform: translateY(-50%) translateX(0) !important;
        opacity: 1 !important;
    }

    /* Dark Origami Geometric Underlayer Accent */
    .side-card-dark-accent {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
        background: #27272a !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .hero-diagonal-card .side-card-dark-accent {
        clip-path: polygon(0 45%, 98% 100%, 0 100%) !important;
    }

    .branding-diagonal-card .side-card-dark-accent {
        display: none !important;
    }

    /* White Primary Polygon Card Body */
    .side-card-white-polygon {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 520px !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Left Slanted Hero Card */
    .hero-diagonal-card .side-card-white-polygon {
        clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
        padding: 48px 44px 40px 36px !important;
        box-shadow: 15px 0 35px rgba(0, 0, 0, 0.35) !important;
    }

    /* Branding Card (Clean Contained Rounded Rectangle) */
    .branding-diagonal-card .side-card-white-polygon {
        height: auto !important;
        min-height: 0 !important;
        clip-path: none !important;
        border-radius: 20px !important;
        padding: 38px 34px !important;
        box-shadow: none !important;
    }

    /* Content Area - Safe width and margins so text is 100% nestled inside the shape */
    .side-card-content {
        max-width: 100% !important;
        width: 100% !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    .hero-diagonal-card .side-card-content,
    .branding-diagonal-card .side-card-content {
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
    }

    /* Outlined SVG Icons (56px x 56px) */
    .side-card-icon-wrap {
        margin-bottom: 20px !important;
        display: flex !important;
        align-items: center !important;
    }

    .side-card-bulb-icon {
        width: 60px !important;
        height: 60px !important;
        display: block !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .side-diagonal-card:hover .side-card-bulb-icon {
        transform: scale(1.05) rotate(2deg) !important;
    }

    /* Refined Side Card Headline */
    .side-card-headline {
        font-family: 'Poppins', sans-serif !important;
        font-size: 1.35rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: -0.02em !important;
        margin: 0 0 16px 0 !important;
        text-transform: none !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    /* Smooth Liquid Color Flow Animation */
    @keyframes sideCardColorFlow {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    /* 1. Hero Side Headline: Royal Sapphire to Electric Violet to Vivid Cyan */
    .hero-side-headline {
        background: linear-gradient(135deg, #1e1b4b 0%, #1d4ed8 25%, #7c3aed 50%, #0284c7 75%, #1e1b4b 100%) !important;
        background-size: 250% 250% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        animation: sideCardColorFlow 4.5s ease-in-out infinite !important;
    }

    /* 2. Events Side Headline: Deep Imperial Purple to Vivid Magenta to Rose Ruby */
    .events-side-headline {
        background: linear-gradient(135deg, #3b0764 0%, #9333ea 25%, #e11d48 50%, #db2777 75%, #3b0764 100%) !important;
        background-size: 250% 250% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        animation: sideCardColorFlow 4.5s ease-in-out infinite !important;
    }

    /* 3. Branding Side Headline: Deep Emerald Pine to Vivid Jade to Radiant Teal & Cyan */
    .branding-side-headline {
        background: linear-gradient(135deg, #022c22 0%, #059669 25%, #0d9488 50%, #0284c7 75%, #022c22 100%) !important;
        background-size: 250% 250% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        animation: sideCardColorFlow 4.5s ease-in-out infinite !important;
    }

    /* Body Paragraph */
    .side-card-paragraph {
        font-family: 'Poppins', sans-serif !important;
        font-size: 1.02rem !important;
        line-height: 1.65 !important;
        color: #374151 !important;
        font-weight: 500 !important;
        margin: 0 0 24px 0 !important;
    }

    /* Footer Brand / Contact */
    .side-card-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        border-top: 1.5px solid rgba(0, 0, 0, 0.12) !important;
        padding-top: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Brand Name with Animated Golden Amber Gradient */
    .side-card-brand-title {
        font-family: 'Poppins', sans-serif !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        background: linear-gradient(135deg, #78350f 0%, #d97706 25%, #f59e0b 50%, #b45309 75%, #78350f 100%) !important;
        background-size: 240% 240% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        animation: sideCardColorFlow 3.8s ease-in-out infinite !important;
        display: inline-block !important;
    }

    .side-card-email-link {
        font-size: 0.98rem !important;
        color: #18181b !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        letter-spacing: -0.01em !important;
        transition: color 0.2s ease !important;
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .side-card-email-link:hover {
        color: #2563eb !important;
        text-decoration: underline !important;
    }

    /* Staggered Text Fade-In / Slide-Up on Card Entry */
    .side-diagonal-card .side-card-top-bar,
    .side-diagonal-card .side-card-icon-wrap,
    .side-diagonal-card .side-card-headline,
    .side-diagonal-card .side-card-paragraph,
    .side-diagonal-card .side-card-footer,
    .side-diagonal-card .side-card-social-links {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .side-diagonal-card.is-visible .side-card-top-bar {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.12s;
    }

    .side-diagonal-card.is-visible .side-card-icon-wrap {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.22s;
    }

    .side-diagonal-card.is-visible .side-card-headline {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.35s;
    }

    .side-diagonal-card.is-visible .side-card-paragraph {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.48s;
    }

    .side-diagonal-card.is-visible .side-card-footer {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.6s;
    }

    .side-diagonal-card.is-visible .side-card-social-links {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.72s;
    }

    /* ══════════════════════════════════════════════════════════════
       HERO SIDE DIAGONAL CARD - SOLID BLACK, PURE WHITE & GRAY
       (NO GLOW / NO LIGHTING EFFECT - CLEAN EDITORIAL LUXURY)
       ══════════════════════════════════════════════════════════════ */
    .hero-diagonal-card .side-card-white-polygon {
        background: #000000 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.9) !important;
    }

    .hero-diagonal-card .side-card-dark-accent {
        background: #09090b !important;
    }

    /* Pure White Icon (අයිකන් සුදුපාට - NO GLOW) */
    .hero-diagonal-card .side-card-bulb-icon {
        filter: none !important;
    }

    .hero-diagonal-card .side-card-bulb-icon line {
        stroke: #ffffff !important;
        filter: none !important;
    }

    .hero-diagonal-card .side-card-bulb-icon path {
        stroke: #ffffff !important;
        fill: transparent !important;
        filter: none !important;
    }

    .hero-diagonal-card .side-card-bulb-icon circle {
        fill: #ffffff !important;
        stroke: #ffffff !important;
        filter: none !important;
    }

    /* Pure White Headline (මාතෘකා සුදුපාට - NO GLOW) */
    .hero-diagonal-card .hero-side-headline {
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
        text-shadow: none !important;
        filter: none !important;
        animation: none !important;
    }

    /* Gray Description (ඩිස්ක්රිප්ශන් අලුපාට - NO GLOW) */
    .hero-diagonal-card .side-card-paragraph {
        color: #a1a1aa !important;
        text-shadow: none !important;
        filter: none !important;
    }

    /* Pure White Brand Title */
    .hero-diagonal-card .side-card-brand-title {
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
        text-shadow: none !important;
        filter: none !important;
        animation: none !important;
    }

    /* Gray Email Link */
    .hero-diagonal-card .side-card-email-link {
        font-size: 0.98rem !important;
        color: #a1a1aa !important;
        text-shadow: none !important;
        filter: none !important;
        transition: color 0.2s ease !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
    }

    .hero-diagonal-card .side-card-email-link:hover {
        color: #ffffff !important;
        text-decoration: underline !important;
    }

    .hero-diagonal-card .side-card-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
    }

    /* Position 1: Side Card Top Bar (Official Logo) */
    .side-card-top-bar {
        position: absolute !important;
        top: 36px !important;
        left: 60px !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    .side-card-logo-link {
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    .side-card-logo-img {
        height: 48px !important;
        width: auto !important;
        max-width: 175px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .side-card-logo-link:hover .side-card-logo-img {
        transform: scale(1.06) !important;
    }

    /* Position 2: Side Card Social Media Links */
    .side-card-social-links {
        margin-top: 22px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        pointer-events: auto !important;
    }

    .side-card-social-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        text-decoration: none !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .side-card-social-btn:hover {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: #ffffff !important;
        transform: translateY(-3px) scale(1.08) !important;
        box-shadow: 0 6px 16px rgba(255, 255, 255, 0.3) !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER ENHANCEMENTS: BRAND DESCRIPTION & PROFILE POSITION
   ══════════════════════════════════════════════════════════════ */
.footer-brand-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.68 !important;
    color: #a1a1aa !important;
    margin-top: 18px !important;
    max-width: 320px !important;
    letter-spacing: 0.2px !important;
}

#main-footer .floating-profile,
.floating-profile {
    bottom: 85px !important;
    right: 2.5% !important;
    z-index: 5 !important;
}



.editorial-hero .hero-inner-container {
    position: relative !important;
    z-index: 5 !important;
}

.editorial-hero .side-diagonal-card {
    z-index: 25 !important;
}

.editorial-hero .showcase-final-container {
    z-index: 15 !important;
}

.editorial-hero .ref-client-strip {
    position: relative !important;
    z-index: 6 !important;
}

/* ══════════════════════════════════════════════════════════════
   3D BACKGROUND GRAPHIC DESIGN STUDIO (ULTRA-SUBTLE WATERMARK)
   ══════════════════════════════════════════════════════════════ */
.ribbon-3d-canvas-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.025 !important; /* ultra-subtle whisper ambient watermark */
}

.ribbon-3d-canvas-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════
   3D DIGITAL STYLUS / DESIGNER PEN (DESKTOP ONLY)
   ══════════════════════════════════════════════════════════════ */
.stylus-3d-canvas-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

.stylus-3d-canvas-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

/* ENFORCE DESKTOP-ONLY FOR 3D STYLUS */
@media (max-width: 1024px) {
    .stylus-3d-canvas-wrap {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   FREE COURSES & TUTORIALS SECTION (NEWS & UPDATES)
   ══════════════════════════════════════════════════════════════ */
.news-events-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 80px 0 !important;
    background: #08080a !important;
    box-sizing: border-box !important;
    text-align: center !important;
    position: relative !important;
}

.news-events-section .section-header {
    max-width: 1200px !important;
    margin: 0 auto 36px auto !important;
    padding: 0 24px !important;
    text-align: center !important;
}

.news-events-section .section-subtitle {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #8e8e98 !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.news-events-section .section-title {
    margin: 0 auto 16px auto !important;
}

.news-events-section .section-intro {
    max-width: 720px !important;
    margin: 0 auto 36px auto !important;
    font-size: 1.02rem !important;
    color: #8e8e98 !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

.news-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

@media (max-width: 1024px) {
    .news-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .news-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

.news-card {
    background: #111115 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.3s ease !important;
}

.news-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

.news-card-video-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* 16:9 Aspect Ratio */
    overflow: hidden !important;
    background: #000000 !important;
}

.news-card-video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

.news-card-content {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.news-card-category {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    align-self: flex-start !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-transform: uppercase !important;
}

.news-card-category.category-youtube {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.news-card-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
    color: #ffffff !important;
}

.news-card-description {
    font-size: 0.9rem !important;
    color: #8e8e98 !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
    flex-grow: 1 !important;
}

.news-card-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: auto !important;
    transition: color 0.2s ease, gap 0.2s ease !important;
}

.news-card-link:hover {
    color: #ffffff !important;
    gap: 12px !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE CLIENT MARQUEE KEYFRAMES
   ══════════════════════════════════════════════════════════════ */
@keyframes clientMarqueeMobile {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ══════════════════════════════════════════════════════════════
   CHATBOT NOTIFICATION (DARK LUXURY EDITORIAL THEME)
   ══════════════════════════════════════════════════════════════ */
/* ── Chatbot Notification Popup Card (Sleek Luxury Dark Theme - NEXT TO CHATBOT BUTTON ON BOTTOM-LEFT) ── */
.chatbot-notification {
    position: fixed !important;
    bottom: 35px !important;
    left: 108px !important; /* Positioned directly to the RIGHT of chatbot icon at left: 35px */
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 320px !important;
    background: rgba(14, 14, 20, 0.96) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 255, 255, 0.06) !important;
    padding: 10px 14px !important;
    z-index: 10002 !important;
    box-sizing: border-box !important;
}

/* Pointer arrow pointing LEFT towards chatbot icon button (Desktop) */
.chatbot-notification::after {
    content: '' !important;
    position: absolute !important;
    left: -6px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) rotate(45deg) !important;
    width: 10px !important;
    height: 10px !important;
    background: rgba(14, 14, 20, 0.96) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-right: none !important;
    border-top: none !important;
    pointer-events: none !important;
}

.chatbot-notification-content {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 18px 0 0 !important; /* Leaves room for close button */
}

.chatbot-notification-avatar {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

.chatbot-notification-message {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.chatbot-notif-title,
.chatbot-notification-message strong {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    display: block !important;
}

.chatbot-notif-sub,
.chatbot-notification-message span:not(.chatbot-notif-title) {
    color: #a1a1aa !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Close button pinned cleanly to TOP-RIGHT corner */
.chatbot-notification-close {
    position: absolute !important;
    top: 7px !important;
    right: 8px !important;
    color: #71717a !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    z-index: 2 !important;
    background: transparent !important;
    border: none !important;
}

.chatbot-notification-close:hover {
    color: #ffffff !important;
}

/* 📱 MOBILE RESPONSIVE FIX (Positioned cleanly ABOVE the chatbot button on bottom-left) */
@media (max-width: 768px) {
    .chatbot-notification {
        position: fixed !important;
        bottom: 85px !important; /* Floats ABOVE chatbot icon at bottom: 20px */
        left: 20px !important;
        right: auto !important;
        width: auto !important;
        max-width: calc(100vw - 40px) !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
    }

    /* Pointer arrow pointing DOWN towards chatbot icon on mobile */
    .chatbot-notification::after {
        left: 20px !important;
        right: auto !important;
        top: auto !important;
        bottom: -6px !important;
        transform: rotate(45deg) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-top: none !important;
        border-left: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL LIGHTBOX IMAGE CLEANUP (No Outer Box Borders / Outline)
   ══════════════════════════════════════════════════════════════ */
.lightbox-img,
.lightbox-content,
#lb-img,
#lightbox-img {
    border: none !important;
    outline: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95) !important;
    border-radius: 8px !important;
    max-width: 82vw !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .lightbox-img,
    .lightbox-content,
    #lb-img,
    #lightbox-img {
        max-width: 92vw !important;
        max-height: 72vh !important;
    }
}