@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&family=Syne:wght@400..800&display=swap');



@font-face {
    font-family: "ClashDisplay-Medium";
    src: url('../fonts/clash-display-font/ClashDisplay-Medium.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "ClashDisplay-Bold";
    src: url('../fonts/clash-display-font/ClashDisplay-Semibold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}


:root {
    /* Fonts */
    --font-lexend: "Lexend", sans-serif;
    --font-syne: "Syne", sans-serif;
    --font-inter: "Inter", sans-serif;

    --clashDisplay-bold: "ClashDisplay-Bold";
    --ClashDisplay-medium: "ClashDisplay-Medium";

    /* Colors */
    --color-white: #ffff;
    --color-light-gray: #f6f6f6;
    --color-dark: #1f1f1f;
    --color-charcol: #1f1f1f;
    --accent: #383838;
    --text-secondary-color: #0000;
    --overlay-bg: rgba(15, 31, 53, 0.18);


    /* Transitions ( Navbar ) */
    --trans-ease: cubic-bezier(0.76, 0, 0.24, 1);
    --trans-soft: cubic-bezier(0.4, 0, 0.2, 1);


    /* Other */
    --nav-h: 80px;
    --nav-border: #e4eef8;
    --mega-item-hover: #f0f7ff;
    --pad: 5.5rem;

}



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


/* UTILITIES */
.cat-name {
    text-transform: uppercase;
    /* Converts text to ALL CAPS */
    text-decoration: none;
    font-weight: 600;
    color: #ffffff;
    display: inline-block;
}


/* - - - - - - - - - - BUTTONS - - - - - - - - - - */

/* - - - - -  { PRIMARY BTN } - - - - */
.primary-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0.5em 0.5em 1.4em;
    background: var(--color-charcol);
    color: #fff;
    border: 1px solid var(--color-charcol);
    border-radius: 3em;
    cursor: pointer;
    font-family: var(--font-lexend);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    position: relative;
    overflow: hidden;
    transition: color 0.35s ease;
    z-index: 1;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* LIQUID FILLING ANIMATION */
.primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12%;
    width: 0;
    height: 100%;
    background: #fff;
    transform: skewX(-15deg);
    transition: width 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
}

.primary-btn:hover::before {
    width: 130%;
}

.primary-btn:hover {
    color: var(--color-charcol);
}

/* ICON */
.primary-btn .icon {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #fff;
    color: #000;
    transition: background 0.35s ease, color 0.35s ease;
}

.primary-btn .icon-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform: translateY(18px);
    transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}

.primary-btn .icon svg {
    width: 18px;
    flex-shrink: 0;
}

.primary-btn:hover .icon-slide {
    transform: translateY(-18px);
}

.primary-btn:hover .icon {
    background: var(--color-charcol);
    color: #fff;
}


/* - - - - -  { SECONDARY BTN } - - - - */
.secondary-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0.5em 0.5em 1.4em;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 3em;
    cursor: pointer;
    font-family: var(--font-syne);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    position: relative;
    overflow: hidden;
    transition: color 0.35s ease;
    z-index: 1;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* LIQUID FILLING ANIMATION */
.secondary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12%;
    width: 0;
    height: 100%;
    background: #000;
    transform: skewX(-15deg);
    transition: width 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
}

.secondary-btn:hover::before {
    width: 130%;
}

.secondary-btn:hover {
    color: #fff;
}

/* ICON */
.secondary-btn .icon {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #000;
    color: #fff;
    transition: background 0.35s ease, color 0.35s ease;
}

.secondary-btn .icon-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform: translateY(18px);
    transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}

.secondary-btn .icon svg {
    width: 18px;
    flex-shrink: 0;
}

.secondary-btn:hover .icon-slide {
    transform: translateY(-18px);
}

.secondary-btn:hover .icon {
    background: #fff;
    color: #000;
}



/* - - - - -  { HERO CTA BTN } - - - - */
.hero-cta-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0.5em 0.5em 1.4em;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 3em;
    cursor: pointer;
    font-family: var(--font-syne);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
    outline: none;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    -webkit-tap-highlight-color: transparent;
}

.hero-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12%;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, #ffffff, #ffffff);
    transform: skewX(-15deg);
    transition: width 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
}

.hero-cta-btn:hover::before {
    width: 130%;
}

.hero-cta-btn:hover {
    color: #000;
    border-color: #000;
    box-shadow: 0 15px 30px rgba(234, 234, 241, 0.3);
    transform: translateY(-2px);
}

.hero-cta-btn .icon {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #fff;
    color: #0f172a;
    transition: background 0.35s ease, color 0.35s ease;
}

.hero-cta-btn .icon-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform: translateY(18px);
    transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}

.hero-cta-btn .icon svg {
    width: 18px;
    flex-shrink: 0;
}

.hero-cta-btn:hover .icon-slide {
    transform: translateY(-18px);
}

.hero-cta-btn:hover .icon {
    background: #000;
    color: #fff;
}



/*  - - - - - - - - - - NAVBAR - - - - - - - - - - */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--trans-soft);
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/*  Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    height: var(--nav-h);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 1px solid transparent;
}

.navbar.scrolled {
    background: #ffffff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1em 2.5em 1em 2.5em;
}

.nav-logo {
    width: fit-content;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-logo img {
    width: 12em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;

}

.nav-item {
    position: relative;
}

.nav-link,
.nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-syne);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-charcol);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    position: relative;
}

/* Chevron */
.nav-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.55;
    transition: transform 0.35s var(--trans-ease), opacity 0.2s ease;
    flex-shrink: 0;
}

.has-dropdown.active .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* MEGA MENU */
.mega-menu {
    position: absolute;
    top: calc(100% + 19px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 600px;
    background: #fff;
    padding: 24px 20px 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--trans-ease), transform 0.3s var(--trans-ease);
    z-index: 999;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.has-dropdown.active .mega-menu {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.mega-menu--fullwidth {
    position: fixed;
    top: calc(var(--nav-h) + 4px);
    left: 40px;
    right: 40px;
    width: auto;
    max-width: 1360px;
    margin: 0 auto;
    transform: translateY(-15px);
    padding: 32px 32px;
    background: #fff;
}

.has-dropdown.active .mega-menu--fullwidth {
    transform: translateY(0);
}

/* MEGA LINKS Label */
.mega-label {
    display: block;
    font-family: var(--font-lexend);
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding-bottom: 0.5em;
    color: var(--color-dark);
    width: 100%;
    border-bottom: 2px solid #000;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
}

.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-dark);
    transition: background 0.18s ease;
}

.mega-item:hover {
    background: var(--mega-item-hover);
}

.mega-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.mega-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.18s ease;
    line-height: 1.3;
}

.mega-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

.mega-item:hover .mega-title {
    color: var(--accent);
}

/* DEVIDER */
.mega-divider,
.mega-footer {
    display: none;
}


/* - - - - - PRODUCTS MEGA MENU - - - - - */
.products-mega-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: stretch;
}

.products-image-panel {
    background: #f6f6f6;
    height: 100%;
    min-height: 350px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    border-radius: 0.5em;
}

.products-image-panel img {
    width: 95%;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1.8em;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
}

.product-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    margin-bottom: 0.8em;
}

.product-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.product-card__name {
    font-family: var(--font-lexend);
    font-size: 0.95em;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.3;
    transition: color 0.18s ease;
}

.product-card:hover .product-card__name {
    color: #3030fb;
}


.product-card:hover .product-card__desc {
    color: #6363fc;
}

.product-card__desc {
    font-family: var(--font-inter);
    font-size: 0.8em;
    color: var(--color-charcol);
    line-height: 1.5;
}

.product-card {
    display: flex;
    align-items: center;
}


/* - - HAMBURGER - - */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px 10px;
    z-index: 1001;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--color-dark);
    transition: transform 0.4s var(--trans-ease), opacity 0.3s ease, width 0.3s ease;
    transform-origin: center;
    border-radius: 2px;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    width: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}



/* - - - - - - - - - - MOBILE MENU - - - - - - - - - - */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--color-white);
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-h) + 28px) 28px 40px;
    transform: translateX(100%);
    transition: transform 0.5s var(--trans-ease);
    overflow-y: auto;
    /* border-left: 3px solid var(--accent-light); */
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Mobile nav list */
.mobile-nav-list {
    list-style: none;
    flex: 1;
}

.mobile-nav-list>li {
    border-bottom: 1px solid var(--nav-border);
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.4s ease, transform 0.4s var(--trans-ease);
}

.mobile-menu.open .mobile-nav-list>li:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 0.08s;
}

.mobile-menu.open .mobile-nav-list>li:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 0.13s;
}

.mobile-menu.open .mobile-nav-list>li:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: 0.18s;
}

.mobile-menu.open .mobile-nav-list>li:nth-child(4) {
    opacity: 1;
    transform: none;
    transition-delay: 0.23s;
}

.mobile-menu.open .mobile-nav-list>li:nth-child(5) {
    opacity: 1;
    transform: none;
    transition-delay: 0.28s;
}

.mobile-menu.open .mobile-nav-list>li:nth-child(6) {
    opacity: 1;
    transform: none;
    transition-delay: 0.33s;
}

.mobile-link,
.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    font-family: 'Syne', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-charcol);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    letter-spacing: -0.3px;
    transition: color 0.2s ease;
}

.mobile-link:hover,
.mobile-dropdown-toggle:hover {
    color: var(--accent);
}

/* Mobile arrow icon */
.mob-arrow {
    width: 22px;
    height: 22px;
    opacity: 0.4;
    flex-shrink: 0;
    transition: transform 0.33s var(--trans-ease), opacity 0.25s ease, color 0.25s ease;
}

.mobile-dropdown-toggle.open .mob-arrow {
    transform: rotate(45deg);
    opacity: 1;
    color: var(--accent);
}

/* Mobile sub panel */
.mobile-sub {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s var(--trans-ease), opacity 0.35s ease;
}

.mobile-sub.open {
    max-height: 640px;
    opacity: 1;
}

.mobile-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 20px;
}

.mobile-sub-item {
    display: flex;
    flex-direction: column;
    padding: 8px 14px 5px 14px;
    text-decoration: none;
}


.mob-sub-title {
    font-size: 0.98em;
    font-family: var(--font-lexend);
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--color-charcol);
}

.mob-sub-desc {
    font-size: 0.8em;
    font-family: var(--font-inter);
    color: gray;
    line-height: 1.45;
}

/* Mobile CTA */
.mobile-cta {
    margin-top: 28px;
    opacity: 0;
    transition: opacity 0.4s ease 0.38s;
}

.mobile-menu.open .mobile-cta {
    opacity: 1;
}

/* - - - - -  BODY OFFSET - - - - - */
body {
    padding-top: var(--nav-h);
}

/* - - - - - RESPONSIVE - - - - - */
@media (max-width: 1100px) {
    .nav-logo img {
        width: 11em;
    }

    .mega-nav-quotation-btn {
        display: none;
    }

    .nav-inner {
        padding: 0px 10px;
    }

    .nav-link,
    .nav-btn {
        padding: 8px 12px;
        font-size: 14px;
    }
}

@media (max-width: 820px) {

    .nav-links,
    .nav-inner>.btn-quote {
        display: none;
    }

    .hamburger {
        display: flex;
    }
}

@media (max-width: 520px) {

    .mobile-link,
    .mobile-dropdown-toggle {
        font-size: 22px;
    }

    .mobile-sub-grid {
        grid-template-columns: 1fr;
    }

    .mobile-menu {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.mega-nav-quotation-btn {
    width: 15%;
    padding: 0.4em;
    font-family: var(--font-syne);
    padding-left: 1em;
}

.mega-nav-quotation-btn .icon {
    width: 30px;
    height: 30px;
}



/* - - - - - - - - - - - HERO SECTION - - - - - - - - - - - */
body {
    background: var(--color-dark);
    overflow-x: hidden;
}

/* - - - - HERO SHELL - - - - */
.hero-container {
    position: relative;
    width: 100%;
    height: 500vh;
    margin-top: -5em;
    background: linear-gradient(to right, #fafafa, #fcfcfc);
}

/* - - - - STICKY WRAPPER - - - - */
.sticky-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* - - - - - CANVAS - - - - - */
#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    object-fit: cover;
    margin-top: 2.5em;
}

/* - - - - - OVERLAYS - - - - - */
.dark-overlay {
    position: absolute;
    inset: 0;
    background: rgba(251, 251, 251, 0);
    z-index: 2;
    pointer-events: none;
}

.blur-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.15);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity;
}

.text-group {
    position: absolute;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
    max-width: 340px;
}

/* Re-enable pointer events on interactive children inside text groups */
.text-group button,
.text-group a,
.text-group .cta-wrapper {
    pointer-events: auto;
}

.side-left {
    left: var(--pad);
    top: 50%;
    transform: translateY(calc(-50% + 30px));
}

.side-right {
    right: var(--pad);
    top: 50%;
    transform: translateY(calc(-50% + 30px));
    text-align: right;
}

.side-left.is-visible,
.side-right.is-visible {
    opacity: 1;
    transform: translateY(-50%);
}


.corner-top-right {
    right: var(--pad);
    top: calc(var(--nav-h) + 2rem);
    transform: translateY(-24px);
    text-align: right;
}

.corner-bottom-left {
    left: var(--pad);
    bottom: 2.5rem;
    transform: translateY(24px);
    text-align: left;
}

.corner-top-right.is-visible,
.corner-bottom-left.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.center-over {
    left: 50%;
    top: 55%;
    transform: translate(-50%, calc(-50% + 48px));
    text-align: center;
    max-width: 560px;
}

.center-over.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.corner-top-right {
    margin-top: 2em;
}

.eyebrow {
    font-family: monospace;
    font-size: 1.1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bbbaba;
    margin-bottom: 0.65rem;
}

.heading {
    font-family: var(--clashDisplay-bold);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 0.85rem;
    letter-spacing: -0.025em;
    color: #fff;
}

.heading--sm {
    font-size: clamp(1.4rem, 2.5vw, 2.4rem);
}

.heading--lg {
    font-size: clamp(2.6rem, 5.5vw, 5rem);
    text-shadow: none;
}

.description {
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    font-family: var(--font-lexend);
    color: var(--color-light-gray);
    line-height: 1.72;
    font-weight: 400;
    margin-top: -1em;
}

.description--center {
    text-align: center;
}

.text-gradient {
    background: linear-gradient(135deg, #09090b 20%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-blue {
    background: linear-gradient(135deg, #0f172a 20%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-container .eyebrow {
    color: #5d5d5d;
}

.hero-container .heading {
    color: #121212;
}

.hero-container .description {
    color: #333333;
}

/* Slide 3 (center-over) overrides — needs rich visible colors over blurred bg */
#text-5 .heading {
    color: #0f172a;
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.6);
}

#text-5 .text-gradient {
    background: rgb(2, 22, 242);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(79, 70, 229, 0.25));
}

#text-5 .description {
    color: #02070f;
    font-weight: 500;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7);
}


.cta-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}

.cta-btn {
    width: 60%;
    margin-top: 2em;
}

/* Hero section overrides for hero-cta-btn */
.center-over .hero-cta-btn {
    width: fit-content;
    padding: 0.5em 0.6em 0.5em 4em;
    gap: 40px;
    font-size: 1rem;
    letter-spacing: 0.3px;
}








/* - - BREADCRUM - - */
.bread-crum-section {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    padding-left: 7em;

    background: linear-gradient(rgba(0, 0, 0, 0.842), rgba(0, 0, 0, 0.75)),
        url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2070');

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.bread-crum-content h1 {
    font-family: var(--clashDisplay-bold);
    font-size: 80px;
    margin: 0;
    font-weight: 900;
    letter-spacing: 1px;
}

.breadcrumb-links {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding-top: 0.5em;
}

.breadcrumb-links a {
    font-family: var(--font-lexend);
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #fff;
}

.breadcrumb-links svg {
    width: 1.5em;
}


/* ABOUT CONTENT  */
body {
    background-color: #fff;
    font-family: var(--font-inter);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 1.5em;
}

.section-label {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 700;
    color: #3f6088;
    margin-bottom: 18px;
    font-family: var(--font-lexend);
}

/* ABOUT US CONTENT */
.story-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}

.story-text p {
    font-size: 1em;
    margin-bottom: 20px;
    color: #333;
    font-family: var(--font-inter);
    font-weight: 500;
}

.story-text span {
    font-family: var(--font-lexend);
    font-weight: 600;
}

.story-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 2px solid #eee;
    padding-left: 40px;
}

.stat-item span {
    font-family: var(--clashDisplay-bold);
    font-size: 40px;
    display: block;
}

.story-stats p {
    font-family: var(--font-lexend);
}


/* MISSION & VISION */
.mv-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 100px;
}

/* CARD */
.mv-card {
    position: relative;
    padding: 60px 40px;
    background: #ffffff;
    border-radius: 0.5em;
    overflow: hidden;
    border: 1px solid #bdd7f6;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ALL CIRCLES BASE */
.mv-card::before,
.mv-card::after,
.mv-card .circle-layer {
    content: "";
    position: absolute;
    border-radius: 50%;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.mv-card::before {
    width: 120px;
    height: 120px;
    top: -60px;
    right: -60px;
    background: rgba(0, 123, 255, 0.18);
    z-index: 3;
}

.mv-card::after {
    width: 220px;
    height: 220px;
    top: -110px;
    right: -110px;
    background: rgba(0, 123, 255, 0.08);
    z-index: 2;
}

.mv-card .circle-layer {
    width: 320px;
    height: 320px;
    top: -160px;
    right: -160px;
    background: rgba(0, 123, 255, 0.04);
    z-index: 1;
}

.mv-card:hover {
    border-color: rgba(0, 123, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* EXPAND ALL 3 CIRCLES */
.mv-card:hover::before,
.mv-card:hover::after,
.mv-card:hover .circle-layer {
    top: -25%;
    right: -25%;
    width: 150%;
    height: 150%;
}

/* SOFT COLOR FADE */
.mv-card:hover::before {
    background: rgba(0, 123, 255, 0.04);
}

.mv-card:hover::after {
    background: rgba(0, 123, 255, 0.02);
}

.mv-card:hover .circle-layer {
    background: rgba(0, 123, 255, 0.01);
}

/* TEXT ABOVE CIRCLES */
.mv-card h3,
.mv-card p {
    position: relative;
    z-index: 5;
}

.mv-card h3 {
    font-family: var(--clashDisplay-bold);
    font-size: 32px;
    margin-top: 0;
    color: #283e58;
}

.mv-card p {
    font-family: var(--font-lexend);
    color: #3f6088;
    font-size: 1em;
    line-height: 1.6;
}

/* STRENGTHS / CAPABILITIES */
.strengths-section h2 {
    font-family: var(--clashDisplay-bold);
    font-size: 40px;
    margin-bottom: 10px;
}

.subtitle {
    color: gray;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 1em;
    margin-bottom: 2em;
}




/* GRID LAYOUT */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding-top: 20px;
}

/* CARD BASE */
.cap-card {
    position: relative;
    padding: 60px 40px;
    background: #ffffff;
    border-radius: 0.5em;

    overflow: hidden;
    border: 1px solid #fdbbbba0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}


.cap-card::before,
.cap-card::after,
.cap-card .shape-layer {
    content: "";
    position: absolute;
    border-radius: 50%;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Layer 1: Smallest Red Circle */
.cap-card::before {
    width: 120px;
    height: 120px;
    top: -60px;
    left: -60px;
    background: rgba(211, 47, 47, 0.15);
    z-index: 3;
}

/* Layer 2: Medium Red Circle */
.cap-card::after {
    width: 220px;
    height: 220px;
    top: -110px;
    left: -110px;
    background: rgba(211, 47, 47, 0.08);
    z-index: 2;
}

/* Layer 3: Largest Red Circle */
.cap-card .shape-layer {
    width: 320px;
    height: 320px;
    top: -160px;
    left: -160px;
    background: rgba(211, 47, 47, 0.04);
    z-index: 1;
}

/* HOVER ANIMATION (Expanding from Top-Left) */
.cap-card:hover {
    border-color: rgba(211, 47, 47, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.cap-card:hover::before,
.cap-card:hover::after,
.cap-card:hover .shape-layer {
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
}

/* BULLET POINTS (Rounded Squares) */
.cap-card ul li {
    padding-left: 25px;
    position: relative;
    list-style: none;
    margin-bottom: 12px;
    color: #444;
}

.cap-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    background: #d32f2f;
    border-radius: 3px;
}

.cap-card h4,
.cap-card ul {
    position: relative;
    z-index: 10;
}

.cap-card h4 {
    font-family: var(--ClashDisplay-medium);
    font-size: 1.5em;
    padding-bottom: 1em;
}

.cap-card li {
    font-family: var(--font-lexend);
    font-size: 1em;
}



/* - - - - - - - - OUR SERVICES - - - - - - - - */
/* --- SERVICES SECTION --- */
.services-section {
    padding: 0px 1.5em;
    background-color: #f8fafc;
}

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

.services-grid {
    display: grid;
    /* FORCED: Exactly 2 columns on desktop */
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    /* Increased gap for the wider layout */
    align-items: stretch;
}

/* --- THE CARD --- */
.service-card {
    position: relative;
    background-color: #f0f9ff;

    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");

    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    height: 95%;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: #7dd3fc;
    background-color: #ffffff;
}

/* --- THREE CIRCLES --- */
.service-card::before,
.service-card::after,
.service-card .circle-layer {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

.service-card::before {
    width: 180px;
    height: 180px;
    top: -50px;
    right: -50px;
    background: rgba(125, 211, 252, 0.7);
}

.service-card::after {
    width: 320px;
    height: 320px;
    top: -100px;
    right: -100px;
    background: rgba(186, 230, 253, 0.6);
}

.circle-layer {
    width: 500px;
    height: 500px;
    top: -180px;
    right: -180px;
    background: rgba(224, 242, 254, 0.5);
}

/* --- RESPONSIVE OVERRIDES --- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: 1fr;
        /* 1 column for tablet and mobile */
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: 40px 15px;
    }

    .card-header {
        padding: 35px 25px 15px 25px !important;
    }

    .card-features {
        padding: 0 25px 35px 25px !important;
    }

    .circle-layer {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -100px;
    }
}

/* --- CONTENT STYLES --- */
.card-header {
    padding: 60px 45px 20px 45px;
    position: relative;
    z-index: 2;
}

.card-features {
    padding: 0 45px 60px 45px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.service-title {
    font-size: 28px;
    color: #021e2e;
    margin-bottom: 15px;
    font-weight: 700;
    font-family: var(--ClashDisplay-medium);
}

.service-description {
    font-size: 1rem;
    font-family: var(--font-lexend);
    color: #475569;
    line-height: 1.7;
}

.features-heading {
    font-family: var(--font-lexend);
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #0369a1;
    margin: 30px 0 20px 0;
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.service-list li {
    font-family: var(--font-inter);
    font-size: 1rem;
    color: #0c4a6e;
    margin-bottom: 12px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.service-list li::before {
    content: "✦";
    color: #38bdf8;
}

/* --- BUTTON --- */
.service-card-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6em 0.6em 0.6em 1.6em;
    background: #0ea5e9;
    color: #fff;
    border: 1px solid #0ea5e9;
    border-radius: 3em;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: color 0.35s ease;
    margin-top: 40px;
    z-index: 5;
}

.service-card-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12%;
    width: 0;
    height: 100%;
    background: #fff;
    transform: skewX(-15deg);
    transition: width 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
}

.service-card-button:hover::before {
    width: 130%;
}

.service-card-button:hover {
    color: #0ea5e9;
}

.service-card-button .icon {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #0ea5e9;
}










/* PRODUCT */
.product-content-wrapper {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
}

@media (min-width: 1024px) {
    .product-content-wrapper {
        padding: 0 10em;
    }

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

.product-page-card {
    display: flex;
    flex-direction: column;
    height: 400px;
    background: #ffffff;
    border-radius: 0.4em;
    overflow: hidden;
    border: 1px solid #749afc80;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s ease;
}

.product-page-card:hover {
    transform: translateY(-5px);
}

/* IMAGE PART */
.product-page-image-section {
    flex: 2.1;
    position: relative;
    background: #fff;
    overflow: hidden;
    /* border-bottom: 1px solid #f1f1f1; */
}

.product-page-slider-container {
    /* touch-action: pan-x; */
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.product-page-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;

    /* IMPORTANT FIX */
    flex-wrap: nowrap;
}

.product-page-slider::-webkit-scrollbar {
    display: none;
}

.product-page-slide {
    flex: 0 0 100%;
    /* stronger than min-width */
    width: 100%;
    height: 100%;
    padding: 1em;
}



.product-page-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    transform: scale(0.98);
    transition: transform 0.3s ease;
}

.product-page-slide img:hover {
    transform: scale(1);
}

.product-page-no-image {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #64748b;
    font-family: var(--font-inter);
    font-size: 0.95rem;
    font-weight: 500;
}



/* CARD DATA  */
.product-page-text-content {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: #f0f9ff;
    flex: 0.5;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.product-page-name {
    font-family: var(--font-lexend);
    font-size: 1.4rem;
    font-weight: 600;
    color: #121154;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.product-page-short-desc {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 5. SLIDER CONTROLS --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    color: #333;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s;
}

.product-page-card:hover .slider-btn {
    opacity: 1;
}

.slider-btn:hover {
    background: #90b8f9;
    color: #051e45;
    border-color: #97befd;
}

.prev {
    left: 15px;
}

.next {
    right: 15px;
}

.slider-status {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}

.dot {
    width: 7px;
    height: 7px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    background: #a9a9f2;
    width: 18px;
    border-radius: 10px;
}















/* - - - - - - - - CONTACT US - - - - - - - - */
.contact-page {
    padding: 80px 1.5em;
    background-color: #e3f2fd33;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");

}

.contact-container {
    max-width: 1150px;
    margin: 0 auto;
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

/* LEFT COLUMN STYLING */
.badge {
    font-family: var(--font-lexend);
    background: #fa3a3a;
    color: white;
    padding: 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.contact-info h1 {
    font-family: var(--clashDisplay-bold);
    font-size: 40px;
    margin-bottom: 0.5em;
    color: #1a1a1a;
    line-height: 1.2;
}

.contact-info .subtitle {
    font-size: 1em;
    font-family: var(--font-inter);
    font-weight: 500;
    color: #444;
    margin-bottom: 30px;
}

/* Fixture Image */
.fixture-image-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-left: 2em;
}

.fixture-image-container img {
    margin-top: -1em;
    width: 88%;
    object-fit: fill;
}


/* Contact Form */
.contact-form-wrapper {
    padding: 40px;
}

/* FORM ELEMENTS */
.form-group,
.form-row {
    margin-bottom: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

input,
select,
textarea {
    font-family: var(--font-lexend);
    font-size: 1em;
    width: 100%;
    padding: 14px;
    border: 1px solid #6b6b6b;
    border-radius: 0.5em;
    background-color: #fff;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}





/* STUDIO PAGE */
.explore-container {
    padding: 4rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    justify-content: center;
    margin-top: 3em;
}

.fixture-card {
    border: 1px solid #fecaca;
    background-color: #f0ebeb;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ff5f56' fill-opacity='0.25' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");

    cursor: pointer;
}

.gallery-card {
    border: 1px solid #bdd7f6;
    background-color: #f8f8f833;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23007bff' fill-opacity='0.25' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    cursor: pointer;
}

/* --- WINDOW DOTS --- */
.card-dots {
    position: absolute;
    top: 25px;
    left: 25px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.red {
    background: #ff5f56;
}

.yellow {
    background: #ffbd2e;
}

.green {
    background: #27c93f;
}

/* --- CIRCLE ANIMATION SYSTEM --- */
.mv-card::before,
.mv-card::after,
.mv-card .circle-layer {
    content: "";
    position: absolute;
    border-radius: 50%;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.mv-card::before {
    width: 180px;
    height: 180px;
    top: -90px;
    right: -90px;
    z-index: 3;
}

.mv-card::after {
    width: 280px;
    height: 280px;
    top: -140px;
    right: -140px;
    z-index: 2;
}

.mv-card .circle-layer {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    z-index: 1;
}

/* Gallery Circles */
.gallery-card::before {
    background: rgba(0, 123, 255, 0.18);
}

.gallery-card::after {
    background: rgba(0, 123, 255, 0.08);
}

.gallery-card .circle-layer {
    background: rgba(0, 123, 255, 0.04);
}

/* Fixture Circles */
.fixture-card::before {
    background: rgba(255, 95, 86, 0.18);
}

.fixture-card::after {
    background: rgba(255, 95, 86, 0.08);
}

.fixture-card .circle-layer {
    background: rgba(255, 95, 86, 0.04);
}

/* --- HOVER & ACTIVE STATES --- */
.mv-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.gallery-card:hover,
.gallery-card.active {
    border-color: #3b82f6;
    background-color: rgba(227, 242, 253, 0.8);
}

.fixture-card:hover,
.fixture-card.active {
    border-color: #ef4444;
    background-color: rgba(255, 245, 245, 0.8);
}

.mv-card:hover::before,
.mv-card:hover::after,
.mv-card:hover .circle-layer {
    top: -25%;
    right: -25%;
    width: 150%;
    height: 150%;
    opacity: 0.2;
}

.studio-qna-header {
    margin-top: 2em;
}

.studio-qna-header p {
    font-family: var(--font-lexend);
    font-size: 1em;
    color: gray;
}

.card-content {
    position: relative;
    z-index: 5;
    padding: 30px;
}

.card-content h3 {
    font-size: 2.2em;
    margin: 0;
}

.gallery-card h3 {
    color: #283e58;
}

.fixture-card h3 {
    color: #991b1b;
}

.card-content p {
    font-size: 1rem;
    margin-top: 10px;
}

.gallery-card p {
    color: #3f6088;
}

.fixture-card p {
    color: #b91c1c;
    opacity: 0.8;
}






/* FIXTURES */
.studio-container {
    padding: 3em 8em;
    min-height: 100vh;
    padding-top: 2rem;
}

.admin-page .studio-container {
    padding-top: 0;
}







/* Filter */
.studio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
}

.filter-container {
    width: 40%;
}

.modern-select {
    width: 100%;
    padding: 1em;
    border-radius: 0.4em;
    border: 1px solid #141111;
    cursor: pointer;
}

/* 3-Column Grid */
.fixture-grid {
    padding-top: 0.5em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}


/* The Glass Card */
.glass-card {
    position: relative;
    background: rgba(255, 95, 86, 0.04);
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f2b0b0' fill-opacity='0.25' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");

    border: 1px solid #f2b0b0;
    border-radius: 0.4em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);

}


.glass-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -15px rgba(241, 99, 99, 0.2);
}

.card-inner {
    padding: 1.5rem;
}

/* Visual Elements */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.pdf-blob {
    width: 55px;
    height: 70px;
    background: linear-gradient(135deg, #f16363, #f75555);
    border-radius: 4px 18px 4px 4px;
    font-family: var(--font-lexend);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
}

.industry-chip {
    padding: 0.6em 0.8em;
    font-family: var(--font-lexend);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #fba7a7;
    border-radius: 0.4em;
    color: rgb(66, 1, 1);
}

.fixture-name {
    font-family: var(--font-lexend);

}

.fixture-desc {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
    height: 3.2em;
    overflow: hidden;
    margin-bottom: 1rem;
}


.glass-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 1em 2em;
    box-sizing: border-box;
    background-color: rgb(243, 136, 136);
    text-decoration: none;
    font-family: var(--font-lexend);
    font-weight: 600;
    font-size: 1em;
    border-radius: 0.4em;
    color: rgb(57, 3, 3);
}

/* Admin Specifics */
.admin-delete-action {
    position: absolute;
    top: 1.1em;
    right: 1.1em;
    background: #161313;
    color: white;
    font-family: var(--font-lexend);
    font-size: 0.85em;
    border: none;
    width: auto;
    height: auto;
    padding: 0.6em 1em;
    border-radius: 0.4em;
    cursor: pointer;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    box-shadow: 0 4px 10px rgba(255, 71, 87, 0.2);
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-delete-action:hover {
    background: #ff2e43;
    transform: scale(1.1);
}

.admin-page .glass-card:hover .admin-delete-action {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.admin-page .glass-card:hover .card-inner {
    filter: blur(5px);
    opacity: 0.6;
    transition: all 0.3s ease;
}






/* CUSTOMER CROUSEL */
.review-section {
    height: 85vh;
    padding: 4rem 0;
    background: #ffffff;
    overflow: hidden;
}

.carousel-window {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: 7em 1.5em;
}

.carousel-track {
    display: flex;
    gap: 26px;
    transition: transform 0.8s cubic-bezier(0.45, 0, 0.55, 1);
    will-change: transform;
    transform: translateZ(0);
}

/* THE MV-CARD DESIGN */
.mv-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #7ba1ed;
    border-radius: 0.4em;
    padding: 2.5rem;
    overflow: hidden;
    flex: 0 0 100%;
    box-sizing: border-box;
    transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
}

@media (min-width: 1024px) {
    .mv-card {
        flex: 0 0 calc(33.333% - 16px);
    }
}

/* Typography Updates */
.mv-card p {
    font-family: var(--font-inter);
    font-weight: 500;
    font-style: italic;
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 5;
    /* Keep text above circles */
}

.reviewer {
    position: relative;
    z-index: 5;
    /* Removed border-top line as requested */
}

.reviewer strong {
    display: block;
    color: #111827;
    font-size: 1rem;
}

.reviewer span {
    font-size: 0.85rem;
    color: #9ca3af;
}


.carousel-header {
    width: 100%;
    text-align: center;
}

.sub-heading {
    font-family: var(--font-lexend);
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 700;
    color: #051e45;
    padding-bottom: 1em;
}

.carousel-header h2 {
    font-family: var(--clashDisplay-bold);
    font-size: 2.25rem;
    color: #111827;
    font-weight: 800;
    margin: 0;
}


/* Adjusting the review section padding to accommodate the header */
.review-section {
    padding: 5rem 1.5em;
    background: #ffffff;
}







/* FILLER */
.trust-section {
    padding: 70px 1.5em;
    background: #0d42e20f;
    font-family: 'Lexend', sans-serif;
}

.trust-container {
    max-width: 1180px;
    margin: 0 auto;
}

.trust-header {
    text-align: center;
    margin-bottom: 40px;
}

.trust-header h2 {
    font-family: var(--clashDisplay-bold);
    color: #111;
    font-size: 2.25rem;
    margin-bottom: 0.5em;
}

.trust-header p {
    font-size: 1.1em;
    font-family: var(--font-inter);
    font-weight: 500;
    line-height: 1.5em;
    color: #051e459c;
}

/* Impact Matrix */
.impact-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    background: #050534;
    border-radius: 0.4em;
    margin-bottom: 60px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(11, 11, 158, 0.2);
    padding: 40px;
}

.impact-box {
    padding: 20px;
    text-align: center;
    color: white;
    /* border: 0.5px solid rgba(255, 255, 255, 0.1); */
}

.impact-val {
    display: block;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
}

.impact-box p {
    font-family: var(--font-lexend);
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 10px;
}


/* THE CARDS */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.trust-node {
    position: relative;
    background: #e5e5fa;
    border: 1px solid #edf2f7;
    border-radius: 0.4em;
    padding: 45px 35px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* Concentric Circles - ONLY #0B0B9E Blue */
.node-circle {
    position: absolute;
    border-radius: 50%;
    transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    z-index: -1;
}

.c1 {
    width: 120px;
    height: 120px;
    top: -60px;
    right: -60px;
    background: rgba(8, 8, 252, 0.268);
}

.c2 {
    width: 220px;
    height: 220px;
    top: -110px;
    right: -110px;
    background: rgba(8, 8, 252, 0.189);
}

.c3 {
    width: 320px;
    height: 320px;
    top: -160px;
    right: -160px;
    background: rgba(8, 8, 252, 0.079);
}

/* Hover Effects */
.node-icon {
    font-size: 2.8rem;
    margin-bottom: 20px;
    display: block;
}

.trust-node h3 {
    font-family: var(--clashDisplay-bold);
    color: #09094a;
    font-size: 1.4rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.trust-node p {
    color: #4a5568;
    line-height: 1.7;
    font-size: 1rem;
}

.trust-node:hover {
    transform: translateY(-12px);
    border-color: #0B0B9E;
    box-shadow: 0 25px 50px -12px rgba(11, 11, 158, 0.15);
}

.trust-node:hover .node-circle {
    top: -30%;
    right: -30%;
    width: 160%;
    height: 160%;
}




/* FOOTER */
.main-footer {
    padding-top: 3rem;
    padding-bottom: 1rem;
    font-family: 'Lexend', sans-serif;
    color: #081424;
    background-color: #fff;
    background-image: radial-gradient(#151515 0.45px, #fff 0.45px);
    background-size: 9px 9px;

    border-top: 1px solid #dcdada;
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .footer-container {
        padding-left: 4em;
        padding-right: 4em;
    }
}

/* Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}


@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 1280px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr) 1.4fr;
        gap: 2rem;
    }
}



/* Typography & Links */
.footer-title {
    color: #111827;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a,
.contact-info a {
    font-family: var(--font-lexend);
    font-weight: 400;
    text-decoration: none;
    color: #4d4d4e;
    font-size: 1em;
    transition: color 0.2s;
    display: block;
}

.footer-links a:hover,
.contact-info a:hover {
    color: #2563eb;
}

/* Brand Section */
.logo-img {
    height: 3.8rem;
    width: auto;
    object-fit: contain;
}

.tagline {
    font-size: 0.9em;
    font-style: italic;
    color: #6b7280;
    margin: 0.5rem 0 1.5rem 0.8em;
}

.social-icons {
    display: flex;
    gap: 1rem;
    padding-left: 1em;
}

.social-link {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: white;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #242527;
    transition: all 0.3s ease;
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.social-link:hover {
    color: #2563eb;
    border-color: #2563eb;
}

/* Contact Section Specifics */
.contact-group {
    font-size: 1em;
    margin-bottom: 1.2rem;
}

.contact-label {
    font-family: var(--font-lexend);
    font-weight: 600;
    font-size: 0.9em;
    color: #192946b3;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

/* Address & Map */
.address-block {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.875rem;
}

.loc-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #d81f1f;
    flex-shrink: 0;
}

.map-box {
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    height: 14rem;
    width: 100%;
    margin-top: 1rem;
}

.map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Bottom Bar */
.footer-bottom {
    padding: 1em;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.copyright {
    font-size: 0.9rem;
    color: #7e8084;
    line-height: 1.5em;
}

.legal-nav {
    display: flex;
    gap: 1.5rem;
}

.legal-nav a {
    font-size: 0.9rem;
    color: #383838;
    text-decoration: none;
}

/* Add SVG to contact info */
.contact-info a::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 12px;
    margin-right: 0.6rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-1px);
}


/* Contact icons: default arrow, overridden for mailto and tel */
.contact-info a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M1%203h10v6H1z'%20fill='none'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-right: 0;
}

/* Email icon (envelope) */
.contact-info a[href^='mailto:']::before {
    /* Filled envelope SVG */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2zm0%204.5l-8%205-8-5V6l8%205%208-5v2.5z'%20fill='%236b7280'/%3E%3C/svg%3E");
}

/* Phone icon */
.contact-info a[href^='tel:']::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6.6%2010.2c1.6%203.1%204.1%205.6%207.2%207.2l2.2-2.2c.3-.3.7-.4%201-.3%201.1.4%202.3.7%203.6.7.6%200%201%20.5%201%201v3.5c0%20.6-.4%201-1%201C10.1%2022%202%2013.9%202%205.1%202%204.5%202.5%204%203.1%204H6.6c.6%200%201%20.4%201%201%200%201.3.2%202.5.7%203.6.1.4%200%20.8-.3%201L6.6%2010.2z'%20fill='%236b7280'/%3E%3C/svg%3E");
}

/* Add spacing between contact groups (emails & phone) */
.contact-info .contact-group+.contact-group {
    margin-top: 1.4rem;
}

/* Make email links use a different font and weight */
.contact-info a[href^='mailto:'] {
    font-family: var(--font-syne);
    font-weight: 600;
}

/* Align icon and text vertically and add consistent gap */
.contact-info a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: max-content;
    margin-bottom: 0.35rem;
}

.phone-code {
    margin-right: 0.35rem;
}


.footer-col:nth-child(2) {
    padding-left: 2.5em;
}







/* UTILITY  */
.studio-image-gallery-container {
    padding: 0 4em;
}




/* - - - - - - - - - - RESPONSIVE - - - { TAB } - - - - - - - - - - */
@media (max-width: 992px) {
    .capabilities-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* - - - - - - - - - - RESPONSIVE - - - { MOBILE } - - - - - - - - - - */
@media (max-width: 768px) {
    :root {
        --pad: 1.5rem;
    }

    #hero-canvas {
        margin-top: -1.5em;
    }

    .side-left,
    .side-right {
        right: auto;
        left: var(--pad);
        text-align: left;
        max-width: calc(100vw - 3rem);
    }

    .side-left {
        top: 15%;
    }

    .side-right {
        top: 72%;
    }

    .side-left.is-visible {
        transform: translateY(0);
    }

    .side-right.is-visible {
        transform: translateY(0);
    }

    .corner-top-right {
        top: calc(var(--nav-h) + 0.8rem);
        display: none;
    }

    .corner-bottom-left {
        top: 75%;
    }

    .center-over {
        max-width: calc(100vw - 3rem);
    }

    .eyebrow {
        font-size: 0.85em;
    }

    .heading {
        font-size: 1.8em;
        letter-spacing: 1px;
    }

    .heading--lg {
        width: 100%;
        font-size: 4em;
    }

    .cta-btn {
        width: 20em;
    }


    /* BREADCRUM SECTION */
    .bread-crum-section {
        padding-left: 1em;
        height: 180px;
    }

    .bread-crum-content h1 {
        font-size: 60px;
    }

    .breadcrumb-links {
        gap: 0.5em;
    }

    .breadcrumb-links a {
        font-size: 0.8em;
    }

    .breadcrumb-links svg {
        width: 1em;
    }

    /* ABOTU CONTENT */
    .container {
        padding: 3em 1.5em;
    }

    .story-stats,
    .contact-container {
        margin-top: -2em;
    }

    .story-grid,
    .mv-section {
        grid-template-columns: 1fr;
    }

    .bread-crum-content h1 {
        font-size: 40px;
    }

    .story-stats {
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        gap: 40px;
    }

    .strengths-section {
        margin-top: -1em;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
    }


    /* PRODUCTS CONTAINER */

    .product-content-wrapper {
        padding: 0 16px;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-grid:has(.product-page-card:only-child) {
        grid-template-columns: 1fr;
    }

    .product-grid:has(.product-page-card:only-child) .product-page-card {
        max-width: 100%;
        margin: 0;
    }

    .slider-btn {
        display: none;
    }


    /* CTA BUTTON ON PHONE HERO  */
    .center-over .hero-cta-btn {
        padding: 0.5em 0.8em 0.5em 1.1em;
        font-size: 0.9em;
    }

    #text-5 {
        margin-top: -3em;
    }


    /* CONTACT US */
    .contact-container {
        height: fit-content;
    }

    .fixture-image-container {
        display: none;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form-wrapper {
        padding: 0px;
    }


    /* GALLERY-CONTAINER */
    .studio-image-gallery-container {
        width: 100%;
        padding: 1.5em;
    }

    .studio-qna-header {
        margin-top: 1em;
    }

    .explore-container {
        padding: 1.5em 1.5em 3em 1.5em;
    }



    .fixture-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .studio-container {
        padding: 1rem 1.25rem 2rem 1.25rem;
    }

    .admin-page .studio-container {
        padding-top: 2rem;
    }



    .studio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .filter-container {
        width: 100%;
    }

    .pdf-blob {
        width: 45px;
        height: 60px;
        font-size: 0.85rem;
    }

    .industry-chip {
        padding: 0.4em 0.6em;
        font-size: 0.65rem;
    }





    /* FOOTER */

    .logo-img {
        margin-left: -0.5em;
    }

    .tagline {
        margin: 0.5rem 0 1.5rem 0em;
    }

    .social-icons {
        padding-left: 0em;
    }

    .footer-col:nth-child(2) {
        padding-left: 0em;
    }

    .footer-col:nth-child(3) {
        padding-left: 0em;
    }

    .map-box {
        height: 15rem;
        margin-bottom: -0.5em;
    }

    .footer-bottom {
        flex-direction: column;
        padding: 0.7em 0em;
    }

    .copyright {
        font-size: 0.8em;
    }

    .legal-nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .legal-nav a {
        font-size: 0.78em;
    }


    /* FILLER */
    .trust-section {
        padding: 3em 1.5em;
    }

    .trust-header p {
        text-align: start;
    }

    .impact-matrix {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        gap: 20px;
        padding: 25px 0 0 -0.5em;
    }

    .impact-box {
        text-align: center;
    }

    /* Center the last box */
    .impact-box:last-child {
        grid-column: 1 / -1;
        width: fit-content;
        margin: 0 auto;
    }

    .impact-val {
        font-size: 2.4rem;
    }

    .impact-box p {
        font-size: 0.85em;
    }


    /* CUSTOMER REVIEW */

    .carousel-header h2,
    .trust-header h2 {
        font-size: 1.8em;
    }

    .review-section {
        height: fit-content;
        padding: 3em 1.5em;
    }

    .carousel-track,
    .carousel-window {
        height: fit-content;
        padding: 0;
    }

    .carousel-track {
        margin-top: 2em;
    }

}