/* =========================================================
   QUADRA FROYN
   MAIN WEBSITE STYLES
========================================================= */

:root {

    --black: #17161b;
    --dark: #211f26;

    --cream: #fffaf2;
    --white: #ffffff;

    --text: #19181d;
    --muted: #737079;

    --purple: #695cff;
    --purple-light: #eeeaff;

    --pink: #ff72b5;
    --orange: #ff9163;

    --green: #66d7a8;
    --yellow: #ffd85a;

    --line: #e9e5df;

    --radius: 28px;

    --shadow:
        0 25px 70px rgba(28, 23, 55, 0.10);

    --ease:
        cubic-bezier(.16, 1, .3, 1);
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    background: var(--cream);
    color: var(--text);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

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

::selection {
    background: var(--purple);
    color: white;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

.section-padding {
    padding: 120px 0;
}


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

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

.navbar {
    position: fixed;
    z-index: 1000;

    top: 20px;
    left: 50%;

    transform: translateX(-50%);

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

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

    padding: 0 12px 0 22px;

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

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

    border: 1px solid rgba(20, 20, 20, 0.08);

    border-radius: 999px;

    box-shadow:
        0 12px 40px rgba(30, 20, 60, 0.08);

    transition:
        top 0.35s var(--ease),
        box-shadow 0.35s var(--ease),
        width 0.35s var(--ease);
}

.navbar.scrolled {
    top: 12px;

    box-shadow:
        0 18px 55px rgba(30, 20, 60, 0.14);
}


/* =====================================================
   LOGO
===================================================== */

.logo-area {
    display: flex;
    align-items: center;

    gap: 11px;

    flex-shrink: 0;

    font-family: "Space Grotesk", sans-serif;
}

.logo-area img {
    width: 46px;
    height: 46px;

    object-fit: cover;

    border-radius: 13px;

    display: block;
}

.logo-area strong {
    display: block;

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

    white-space: nowrap;
}

.logo-area span {
    display: block;

    margin-top: 4px;

    font-size: 8px;

    color: #888;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* =====================================================
   DESKTOP NAVIGATION
===================================================== */

.desktop-nav {
    display: flex;
    align-items: center;

    gap: 30px;

    margin-left: auto;
    margin-right: 30px;

    font-size: 13px;

    font-weight: 600;
}

.desktop-nav a {
    position: relative;

    padding: 8px 0;

    white-space: nowrap;

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

.desktop-nav a:hover {
    color: var(--purple);
}

.desktop-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 2px;

    background: var(--purple);

    border-radius: 10px;

    transform: scaleX(0);

    transform-origin: right;

    transition: transform 0.3s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    transform: scaleX(1);

    transform-origin: left;
}


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

.nav-button {
    display: inline-flex;

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

    gap: 9px;

    flex-shrink: 0;

    background: var(--black);

    color: #fff;

    padding: 13px 20px;

    border-radius: 999px;

    font-weight: 700;

    font-size: 13px;

    white-space: nowrap;

    transition:
        background 0.35s var(--ease),
        transform 0.35s var(--ease),
        box-shadow 0.35s var(--ease);
}

.nav-button:hover {
    background: var(--purple);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(91, 54, 214, 0.22);
}


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

.menu-button {
    display: none;

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

    width: 44px;
    height: 44px;

    border: none;

    border-radius: 50%;

    background: var(--black);

    color: #fff;

    cursor: pointer;

    font-size: 18px;

    flex-shrink: 0;
}


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

.mobile-menu {
    position: fixed;

    z-index: 2000;

    inset: 0;

    width: 100%;
    height: 100vh;

    background: var(--cream);

    display: flex;

    flex-direction: column;

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

    gap: 20px;

    transform: translateY(-110%);

    visibility: hidden;

    transition:
        transform 0.65s var(--ease),
        visibility 0.65s ease;
}

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

    visibility: visible;
}

.mobile-menu a {
    font-family: "Space Grotesk", sans-serif;

    font-size: 42px;

    font-weight: 600;

    letter-spacing: -0.05em;

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

.mobile-menu a:hover,
.mobile-menu a.active {
    color: var(--purple);

    transform: translateX(5px);
}


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

.close-menu {
    position: absolute;

    top: 25px;
    right: 25px;

    width: 45px;
    height: 45px;

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

    border: none;

    background: var(--black);

    color: #fff;

    border-radius: 50%;

    cursor: pointer;

    font-size: 18px;

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

.close-menu:hover {
    background: var(--purple);

    transform: rotate(90deg);
}


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

@media (max-width: 1050px) {

    .navbar {
        width: calc(100% - 32px);

        padding-left: 18px;
    }

    .desktop-nav {
        gap: 20px;

        margin-right: 20px;
    }

    .desktop-nav a {
        font-size: 12px;
    }

    .nav-button {
        padding: 12px 16px;

        font-size: 12px;
    }
}


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

@media (max-width: 768px) {

    .navbar {
        top: 14px;

        width: calc(100% - 28px);

        min-height: 62px;

        padding: 0 9px 0 14px;
    }

    .navbar.scrolled {
        top: 10px;
    }

    .desktop-nav {
        display: none !important;
    }

    .navbar .nav-button {
        display: none;
    }

    .menu-button {
        display: flex;
    }

    .logo-area img {
        width: 42px;
        height: 42px;
    }

    .logo-area strong {
        font-size: 14px;
    }

    .logo-area span {
        font-size: 7px;
    }

    .mobile-menu a {
        font-size: 34px;
    }
}


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

@media (max-width: 480px) {

    .navbar {
        width: calc(100% - 20px);

        min-height: 58px;

        padding-left: 11px;
        padding-right: 7px;
    }

    .logo-area {
        gap: 8px;
    }

    .logo-area img {
        width: 39px;
        height: 39px;

        border-radius: 11px;
    }

    .logo-area strong {
        font-size: 13px;
    }

    .logo-area span {
        font-size: 6.5px;
    }

    .menu-button {
        width: 40px;
        height: 40px;
    }

    .mobile-menu {
        gap: 16px;
    }

    .mobile-menu a {
        font-size: 30px;
    }
}

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

.hero {
    position: relative;
    min-height: 100vh;

    overflow: hidden;

    padding: 155px 0 80px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 216, 90, .30),
            transparent 27%
        ),

        radial-gradient(
            circle at 90% 15%,
            rgba(166, 108, 255, .25),
            transparent 30%
        ),

        radial-gradient(
            circle at 70% 90%,
            rgba(102, 215, 168, .25),
            transparent 28%
        ),

        var(--cream);
}


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

.hero-container {
    width: min(1240px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

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

    gap: 70px;

    align-items: center;

    min-height: 680px;
}


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

.hero-content {
    position: relative;

    z-index: 5;

    max-width: 680px;
}

.availability {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 14px;

    background: #fff;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 8px 30px rgba(30, 20, 40, .07);

    margin-bottom: 25px;
}

.availability span {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 7px rgba(102, 215, 168, .18);

    animation: pulse 2s infinite;
}

@keyframes pulse {
    50% {
        box-shadow:
            0 0 0 13px transparent;
    }
}


.hero-small {
    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .14em;

    margin-bottom: 18px;
}


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

.hero h1 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    /*
       Desktop size is now controlled instead of
       growing too aggressively with viewport width.
    */
    font-size: clamp(58px, 6vw, 92px);

    line-height: .9;

    letter-spacing: -.075em;

    font-weight: 600;
}

.hero h1 .highlight {
    position: relative;

    display: inline-block;

    color: var(--purple);
}

.hero h1 .highlight::after {
    content: "";

    position: absolute;

    left: 4%;
    right: 2%;

    bottom: -7px;

    height: 8px;

    background: var(--yellow);

    border-radius: 50%;

    transform: rotate(-2deg);

    z-index: -1;
}

.hero h1 em {
    font-family: "Instrument Serif", serif;

    font-weight: 400;

    color: var(--pink);

    letter-spacing: -.02em;
}


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

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

    margin: 30px 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.7;
}


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

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}

.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 999px;

    padding: 15px 21px;

    font-weight: 700;

    font-size: 13px;

    white-space: nowrap;

    transition: .35s var(--ease);
}

.primary-button {
    background: var(--black);

    color: #fff;
}

.primary-button:hover {
    background: var(--purple);

    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(105, 92, 255, .25);
}

.secondary-button {
    background: #fff;

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

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

    box-shadow: var(--shadow);
}


/* =========================================================
   HERO STATS
========================================================= */

.hero-mini-stats {
    display: flex;

    align-items: flex-start;

    gap: 0;

    margin-top: 42px;
}

.hero-mini-stats div {
    padding-right: 28px;

    margin-right: 28px;

    border-right: 1px solid #ddd7ce;
}

.hero-mini-stats div:last-child {
    padding-right: 0;

    margin-right: 0;

    border-right: none;
}

.hero-mini-stats strong {
    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: 27px;

    line-height: 1;
}

.hero-mini-stats span {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .1em;
}


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

.hero-visual {
    position: relative;

    min-height: 580px;

    display: grid;

    place-items: center;

    z-index: 2;
}


/* =========================================================
   MAIN VISUAL CIRCLE
========================================================= */

.visual-circle {
    width: min(430px, 90%);

    aspect-ratio: 1 / 1;

    height: auto;

    position: relative;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #655cff,
            #a978ff 55%,
            #ff79b5
        );

    border-radius:
        55% 45% 60% 40% /
        45% 55% 45% 55%;

    box-shadow:
        0 35px 80px rgba(70, 50, 150, .22);

    animation:
        morph 9s ease-in-out infinite,
        float 6s ease-in-out infinite;
}

.visual-circle::before {
    content: "";

    position: absolute;

    inset: 30px;

    border: 2px dashed rgba(255, 255, 255, .6);

    border-radius: inherit;
}

@keyframes morph {
    0%, 100% {
        border-radius:
            55% 45% 60% 40% /
            45% 55% 45% 55%;
    }

    50% {
        border-radius:
            42% 58% 45% 55% /
            60% 40% 60% 40%;
    }
}

@keyframes float {
    50% {
        transform:
            translateY(-15px)
            rotate(2deg);
    }
}


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

.circle-content {
    position: relative;

    color: #fff;

    text-align: center;

    z-index: 2;
}

.sparkle {
    font-size: 62px;

    margin-bottom: 10px;
}

.circle-content h3 {
    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(34px, 4vw, 43px);

    line-height: .9;

    letter-spacing: -.06em;
}

.circle-content h3 span {
    color: var(--yellow);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    background: #fff;

    padding: 13px 17px;

    border-radius: 18px;

    box-shadow:
        0 20px 40px rgba(30, 20, 60, .13);

    z-index: 5;

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

@keyframes floatCard {
    50% {
        transform:
            translateY(-12px)
            rotate(2deg);
    }
}

.floating-card strong {
    display: block;

    font-size: 12px;
}

.floating-card span {
    display: block;

    color: var(--muted);

    font-size: 10px;
}

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

    display: grid;

    place-items: center;

    flex-shrink: 0;

    background: var(--purple-light);

    color: var(--purple);

    border-radius: 12px;
}


/* =========================================================
   FLOATING CARD POSITIONS
========================================================= */

.card-ai {
    top: 13%;

    left: 0;
}

.card-data {
    right: 0;

    bottom: 20%;

    animation-delay: -2s;
}

.card-web {
    left: 7%;

    bottom: 8%;

    background: var(--black);

    color: #fff;

    animation-delay: -3s;
}

.card-web i {
    color: var(--green);
}


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

.tiny-dot {
    position: absolute;

    border-radius: 50%;

    z-index: 1;

    animation:
        floatCard 5s infinite;
}

.dot-yellow {
    width: 80px;
    height: 80px;

    background: var(--yellow);

    top: 5%;
    right: 6%;
}

.dot-green {
    width: 100px;
    height: 100px;

    background: var(--green);

    bottom: 6%;
    right: 4%;
}

.dot-blue {
    width: 45px;
    height: 45px;

    background: var(--purple);

    bottom: 28%;
    left: 0;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .hero {
        padding-top: 170px;
    }

    .hero-container {
        width: min(1320px, calc(100% - 80px));

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

        gap: 90px;

        min-height: 720px;
    }

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

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

    .visual-circle {
        width: 460px;
    }
}


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

@media (max-width: 1100px) {

    .hero {
        padding-top: 145px;
    }

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

        gap: 45px;
    }

    .hero h1 {
        font-size: clamp(54px, 6.5vw, 78px);
    }

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

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

    .visual-circle {
        width: 370px;
    }

    .floating-card {
        padding: 11px 14px;
    }

    .card-ai {
        left: 0;
    }

    .card-data {
        right: -5px;
    }
}


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

@media (max-width: 900px) {

    .hero {
        padding: 135px 0 70px;
    }

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

        gap: 60px;

        min-height: auto;

        text-align: center;
    }

    .hero-content {
        max-width: 720px;

        margin: 0 auto;
    }

    .availability {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-mini-stats {
        justify-content: center;
    }

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

        width: 100%;

        max-width: 620px;

        margin: 0 auto;
    }

    .visual-circle {
        width: 390px;
    }
}


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

@media (max-width: 600px) {

    .hero {
        padding: 120px 0 55px;
    }

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

        gap: 40px;
    }

    .hero h1 {
        font-size: clamp(46px, 14vw, 68px);

        line-height: .92;
    }

    .hero-small {
        font-size: 9px;

        letter-spacing: .12em;
    }

    .hero-description {
        margin: 24px auto;

        font-size: 14px;

        line-height: 1.65;
    }

    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }

    .button {
        width: 100%;

        max-width: 280px;
    }

    .hero-mini-stats {
        gap: 0;

        margin-top: 35px;
    }

    .hero-mini-stats div {
        padding-right: 16px;

        margin-right: 16px;
    }

    .hero-mini-stats strong {
        font-size: 22px;
    }

    .hero-mini-stats span {
        font-size: 8px;
    }

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

    .visual-circle {
        width: min(310px, 82vw);
    }

    .visual-circle::before {
        inset: 22px;
    }

    .sparkle {
        font-size: 45px;
    }

    .circle-content h3 {
        font-size: 32px;
    }

    .floating-card {
        padding: 9px 11px;

        gap: 8px;

        border-radius: 14px;
    }

    .floating-card strong {
        font-size: 10px;
    }

    .floating-card span {
        font-size: 8px;
    }

    .card-icon {
        width: 31px;
        height: 31px;

        border-radius: 9px;
    }

    .card-ai {
        top: 10%;
        left: 2%;
    }

    .card-data {
        right: 0;
        bottom: 18%;
    }

    .card-web {
        left: 4%;
        bottom: 5%;
    }

    .dot-yellow {
        width: 50px;
        height: 50px;

        right: 3%;
    }

    .dot-green {
        width: 60px;
        height: 60px;

        right: 1%;
    }

    .dot-blue {
        width: 30px;
        height: 30px;

        left: 2%;
    }
}


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

@media (max-width: 400px) {

    .hero {
        padding-top: 110px;
    }

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

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

    .hero-mini-stats strong {
        font-size: 19px;
    }

    .hero-mini-stats span {
        font-size: 7px;
    }

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

    .visual-circle {
        width: 275px;
    }

    .floating-card {
        transform: scale(.9);
    }

    .card-data {
        right: -4px;
    }
}


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

.marquee-section {

    overflow: hidden;

    background: var(--black);

    color: white;

    transform:
        rotate(-1deg)
        scale(1.03);

    padding: 20px 0;
}

.marquee-track {

    display: flex;

    width: max-content;

    align-items: center;

    animation:
        marquee 28s linear infinite;
}

.marquee-track span {

    font-family: "Space Grotesk";

    font-size: 20px;

    white-space: nowrap;

    padding: 0 25px;
}

.marquee-track b {

    color: var(--yellow);

    font-size: 18px;
}

@keyframes marquee {

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


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

.section-label {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .14em;
}

.section-label span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--purple);
}


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

.intro {

    background: var(--cream);
}

.intro-grid {

    display: grid;

    grid-template-columns: .7fr 1.5fr;

    gap: 90px;

    margin-top: 55px;
}

.round-badge {

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background: var(--yellow);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-weight: 800;

    font-size: 13px;

    line-height: 1.05;

    transform: rotate(-8deg);
}

.round-badge b {

    margin-top: 8px;
}

.intro-left p {

    margin-top: 30px;

    color: var(--muted);

    max-width: 250px;

    line-height: 1.6;
}

.intro-right h2 {

    font-family: "Instrument Serif";

    font-size: clamp(40px, 5vw, 70px);

    font-weight: 400;

    line-height: 1.03;

    letter-spacing: -.02em;
}

.intro-right h2 .purple {

    color: var(--purple);
}

.intro-right h2 .pink {

    color: var(--pink);
}

.intro-right > p {

    max-width: 650px;

    color: var(--muted);

    line-height: 1.7;

    margin: 28px 0;
}

.text-link {

    display: inline-flex;

    gap: 10px;

    align-items: center;

    font-weight: 700;

    font-size: 13px;

    border-bottom: 2px solid var(--black);

    padding-bottom: 5px;
}


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

.services-section {

    background: white;
}

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 40px;

    margin-top: 18px;
}

.section-heading h2 {

    font-family: "Space Grotesk";

    font-size: clamp(45px, 6vw, 75px);

    line-height: .95;

    letter-spacing: -.06em;
}

.section-heading h2 em {

    font-family: "Instrument Serif";

    font-weight: 400;

    color: var(--purple);
}

.section-heading p {

    max-width: 420px;

    color: var(--muted);

    line-height: 1.6;
}

.service-grid {

    display: grid;

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

    gap: 14px;

    margin-top: 55px;
}

.service-card {

    min-height: 350px;

    padding: 27px;

    border-radius: var(--radius);

    position: relative;

    overflow: hidden;

    transition: .5s var(--ease);
}

.service-card:hover {

    transform: translateY(-9px) rotate(.5deg);

    box-shadow: var(--shadow);
}

.service-purple {
    background: #efedff;
}

.service-green {
    background: #e9f9f2;
}

.service-orange {
    background: #fff0e8;
}

.service-yellow {
    background: #fff7d9;
}

.service-number {

    position: absolute;

    top: 22px;
    right: 22px;

    color: #aaa;

    font-size: 11px;

    font-weight: 700;
}

.service-icon {

    width: 58px;
    height: 58px;

    border-radius: 18px;

    background: white;

    display: grid;

    place-items: center;

    font-size: 22px;

    color: var(--purple);

    margin-bottom: 80px;

    box-shadow:
        0 10px 25px rgba(20,20,20,.07);

    transition: .4s var(--ease);
}

.service-card:hover .service-icon {

    transform:
        rotate(-10deg)
        scale(1.1);
}

.service-card h3 {

    font-family: "Space Grotesk";

    font-size: 24px;

    letter-spacing: -.04em;

    margin-bottom: 12px;
}

.service-card p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;
}

.service-arrow {

    position: absolute;

    right: 25px;
    bottom: 25px;

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    background: white;

    border-radius: 50%;

    font-size: 12px;
}

.center-button {

    text-align: center;

    margin-top: 45px;
}


/* =========================================================
   WORK
========================================================= */

.work-section {

    background: var(--black);

    color: white;
}

.light-label {
    color: #aaa;
}

.light-label span {
    background: var(--yellow);
}

.work-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    margin-top: 18px;
}

.work-heading h2 {

    font-family: "Space Grotesk";

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

    line-height: .9;

    letter-spacing: -.06em;
}

.work-heading h2 em {

    font-family: "Instrument Serif";

    font-weight: 400;

    color: var(--yellow);
}

.light-link {

    display: flex;

    gap: 10px;

    align-items: center;

    font-size: 13px;

    font-weight: 700;

    color: #ddd;
}

.work-grid {

    display: grid;

    grid-template-columns:
        1.35fr
        .65fr;

    grid-template-rows:
        320px
        320px;

    gap: 14px;

    margin-top: 55px;
}

.work-card {

    position: relative;

    overflow: hidden;

    border-radius: 28px;

    background: #302d36;
}

.work-card.work-large {

    grid-row: span 2;
}

.work-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s var(--ease);
}

.work-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            rgba(0,0,0,.05) 70%
        );
}

.work-card:hover img {

    transform: scale(1.07);
}

.work-overlay {

    position: absolute;

    z-index: 2;

    left: 25px;
    right: 25px;
    bottom: 24px;
}

.work-overlay span {

    font-size: 9px;

    letter-spacing: .12em;

    color: #ddd;
}

.work-overlay h3 {

    max-width: 450px;

    font-family: "Space Grotesk";

    font-size: 27px;

    line-height: 1;

    letter-spacing: -.04em;

    margin-top: 7px;
}

.work-overlay > i {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: white;

    color: var(--black);

    font-size: 12px;
}


/* =========================================================
   PRODUCT
========================================================= */

.product-box {

    display: grid;

    grid-template-columns:
        1fr
        .9fr;

    gap: 60px;

    align-items: center;

    padding: 60px;

    background:
        linear-gradient(
            135deg,
            #eeebff,
            #fff7ef
        );

    border-radius: 35px;

    overflow: hidden;

    position: relative;
}

.product-box::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    background: #a891ff;

    opacity: .14;

    border-radius: 50%;

    right: -120px;
    top: -120px;
}

.product-label {

    color: #777;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;
}

.product-content h2 {

    font-family: "Space Grotesk";

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

    line-height: .9;

    letter-spacing: -.07em;

    margin: 15px 0;
}

.product-content h2 em {

    font-family: "Instrument Serif";

    color: var(--purple);

    font-weight: 400;
}

.product-content p {

    max-width: 480px;

    color: var(--muted);

    line-height: 1.7;

    margin-bottom: 25px;
}

.product-image {

    position: relative;

    transform: rotate(3deg);

    transition: .5s var(--ease);
}

.product-box:hover .product-image {

    transform: rotate(0) scale(1.03);
}

.browser-window {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(50,35,100,.15);
}

.browser-header {

    height: 35px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 0 12px;

    background: #f3f2f5;
}

.browser-header span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #c8c5cc;
}

.browser-content {

    min-height: 280px;

    padding: 35px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f4f0ff
        );
}

.fake-logo {

    font-family: "Space Grotesk";

    font-weight: 800;

    font-size: 12px;
}

.fake-heading {

    font-family: "Space Grotesk";

    font-size: 42px;

    line-height: .9;

    font-weight: 700;

    letter-spacing: -.07em;

    margin: 35px 0 25px;
}

.fake-button {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 999px;

    background: var(--purple);

    color: white;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   TRAINING
========================================================= */

.training-section {

    background: #fff0d8;
}

.training-grid {

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 80px;

    align-items: center;
}

.training-title {

    font-family: "Space Grotesk";

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

    line-height: .92;

    letter-spacing: -.07em;

    margin: 18px 0 25px;
}

.training-title em {

    font-family: "Instrument Serif";

    color: var(--purple);

    font-weight: 400;
}

.training-description {

    max-width: 520px;

    color: var(--muted);

    line-height: 1.7;

    margin-bottom: 28px;
}

.training-list {

    display: grid;

    gap: 10px;
}

.training-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 19px;

    background: white;

    border-radius: 20px;

    transition: .4s var(--ease);
}

.training-item:hover {

    transform: translateX(8px);

    box-shadow:
        0 15px 35px rgba(30,20,40,.08);
}

.training-icon {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: #efebff;

    color: var(--purple);
}

.training-item strong {

    display: block;

    font-size: 14px;
}

.training-item span {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   WHY
========================================================= */

.why-title {

    font-family: "Space Grotesk";

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

    line-height: .9;

    letter-spacing: -.07em;

    margin-top: 18px;
}

.why-title em {

    font-family: "Instrument Serif";

    color: var(--pink);

    font-weight: 400;
}

.why-grid {

    display: grid;

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

    gap: 12px;

    margin-top: 55px;
}

.why-card {

    min-height: 210px;

    padding: 25px;

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

    border-radius: 23px;

    background: white;

    transition: .4s var(--ease);
}

.why-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);
}

.why-card i {

    color: var(--purple);

    font-size: 20px;

    margin-bottom: 50px;
}

.why-card h3 {

    font-family: "Space Grotesk";

    font-size: 17px;

    margin-bottom: 8px;
}

.why-card p {

    color: var(--muted);

    font-size: 12px;

    line-height: 1.55;
}


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

.cta-section {

    padding: 0 0 120px;
}

.cta-box {

    position: relative;

    overflow: hidden;

    text-align: center;

    padding: 100px 30px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            #6259ff,
            #a56fff 50%,
            #ff74b2
        );

    color: white;
}

.cta-box > p:first-of-type {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .16em;
}

.cta-box h2 {

    font-family: "Space Grotesk";

    font-size: clamp(55px, 8vw, 100px);

    line-height: .85;

    letter-spacing: -.07em;

    margin: 18px 0 25px;
}

.cta-box h2 em {

    font-family: "Instrument Serif";

    font-weight: 400;

    color: var(--yellow);
}

.cta-text {

    max-width: 450px;

    margin: auto auto 30px;

    color: rgba(255,255,255,.8);

    line-height: 1.6;

    font-size: 14px;
}

.white-button {

    background: white;

    color: var(--black);
}

.white-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);
}

.cta-decoration {

    position: absolute;

    border-radius: 50%;

    border: 2px solid rgba(255,255,255,.18);
}

.decoration-one {

    width: 250px;
    height: 250px;

    left: -100px;
    top: -100px;
}

.decoration-two {

    width: 350px;
    height: 350px;

    right: -140px;
    bottom: -180px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background: var(--black);

    color: white;

    padding: 75px 0 25px;
}

.footer-grid {

    display: grid;

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

    gap: 50px;

    padding-bottom: 55px;

    border-bottom: 1px solid #35323a;
}

.footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: "Space Grotesk";

    font-weight: 700;

    font-size: 19px;
}

.footer-logo img {

    width: 40px;
    height: 40px;

    border-radius: 11px;

    object-fit: cover;
}

.footer-brand p {

    max-width: 350px;

    margin-top: 18px;

    color: #99959f;

    font-size: 13px;

    line-height: 1.7;
}

.social-links {

    display: flex;

    gap: 8px;

    margin-top: 22px;
}

.social-links a {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border: 1px solid #3b3841;

    border-radius: 50%;

    color: #aaa;

    transition: .3s;
}

.social-links a:hover {

    color: white;

    background: var(--purple);

    border-color: var(--purple);
}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;
}

.footer-column h4 {

    color: #777;

    font-size: 10px;

    letter-spacing: .13em;

    text-transform: uppercase;

    margin-bottom: 10px;
}

.footer-column a,
.footer-column span {

    color: #aaa;

    font-size: 12px;

    line-height: 1.7;

    transition: .3s;
}

.footer-column a:hover {

    color: white;
}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-top: 22px;

    color: #777;

    font-size: 10px;
}

.footer-bottom a:hover {

    color: white;
}


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

@media(max-width:1000px) {

    .desktop-nav,
    .nav-button {
        display: none;
    }

    .menu-button {
        display: block;
    }

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

    .hero-content {
        text-align: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-mini-stats {
        justify-content: center;
    }

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

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

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

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

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}


@media(max-width:700px) {

    .container {
        width: min(100% - 28px,1180px);
    }

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

    .navbar {
        top: 10px;
        width: calc(100% - 20px);
    }

    .hero {
        padding-top: 125px;
    }

    .hero h1 {
        font-size: clamp(55px,16vw,80px);
    }

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

    .visual-circle {
        width: 285px;
        height: 285px;
    }

    .circle-content h3 {
        font-size: 32px;
    }

    .sparkle {
        font-size: 45px;
    }

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

    .card-ai {
        left: 0;
    }

    .card-data {
        right: 0;
    }

    .dot-yellow {
        width: 55px;
        height: 55px;
    }

    .dot-green {
        width: 70px;
        height: 70px;
    }

    .hero-mini-stats {
        gap: 15px;
    }

    .hero-mini-stats div {
        padding-right: 15px;
    }

    .section-heading {
        display: block;
    }

    .section-heading p {
        margin-top: 20px;
    }

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

    .service-card {
        min-height: 300px;
    }

    .work-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 320px);
    }

    .work-card.work-large {
        grid-row: auto;
    }

    .work-heading {
        display: block;
    }

    .work-heading .light-link {
        margin-top: 20px;
    }

    .product-box {
        grid-template-columns: 1fr;

        padding: 30px;

        gap: 40px;
    }

    .training-grid {
        gap: 45px;
    }

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

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

    .footer-bottom {
        flex-direction: column;
    }

    .cta-box {
        padding: 75px 20px;
    }
}


@media(max-width:450px) {

    .logo-area span {
        display: none;
    }

    .hero-mini-stats strong {
        font-size: 22px;
    }

    .hero-mini-stats span {
        font-size: 8px;
    }

    .floating-card {
        padding: 10px;
    }

    .card-web {
        left: 0;
    }

    .card-data {
        right: -5px;
    }
}


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

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }
}
/* =====================================================
   ABOUT PAGE
===================================================== */

/* ABOUT HERO */

.page-hero {
    min-height: 90vh;
    padding: 155px 0 90px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255,216,92,.35),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(166,108,255,.25),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 90%,
            rgba(98,214,167,.25),
            transparent 30%
        ),
        var(--cream);
}

.about-hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-hero h1 {
    font:
        600 clamp(58px,7vw,100px)/.9
        "Space Grotesk";

    letter-spacing:-.075em;
    margin-top:22px;
    max-width:700px;
}

.about-hero .lead {
    margin:32px 0;
}

.about-hero-buttons {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}


/* ABOUT VISUAL */

.about-visual {
    height:560px;
    position:relative;
    display:grid;
    place-items:center;
}

.about-orbit {
    position:absolute;
    border:1px dashed rgba(91,85,255,.25);
    border-radius:50%;
    animation:aboutOrbit 15s linear infinite;
}

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

.orbit-two {
    width:310px;
    height:310px;
    animation-direction:reverse;
    animation-duration:11s;
}

@keyframes aboutOrbit {
    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }
}


.about-center {
    width:245px;
    height:245px;

    border-radius:
        48% 52% 45% 55%
        /
        55% 45% 55% 45%;

    background:
        linear-gradient(
            135deg,
            #7168ff,
            #b67aff 55%,
            #ff82b5
        );

    color:#fff;

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

    box-shadow:
        0 30px 70px rgba(60,40,130,.22);

    animation:
        aboutFloat 6s ease-in-out infinite,
        aboutMorph 9s ease-in-out infinite;
}

.about-center-icon {
    width:65px;
    height:65px;

    border-radius:20px;

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

    display:grid;
    place-items:center;

    font-size:25px;

    margin-bottom:15px;
}

.about-center strong {
    font:
        700 28px
        "Space Grotesk";
}

.about-center span {
    font:
        500 20px
        "Space Grotesk";

    opacity:.8;
}

.about-center small {
    margin-top:6px;
    letter-spacing:.15em;
    font-size:10px;
    opacity:.7;
}

@keyframes aboutFloat {

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

}

@keyframes aboutMorph {

    50% {
        border-radius:
            55% 45% 60% 40%
            /
            45% 55% 45% 55%;
    }

}


/* FLOATING LABELS */

.about-floating {
    position:absolute;

    background:#fff;

    padding:13px 17px;

    border-radius:16px;

    font-size:11px;
    font-weight:800;

    box-shadow:
        0 15px 40px rgba(30,20,60,.12);

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

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

.about-floating i {
    color:var(--blue);
}

.about-float-one {
    top:17%;
    left:8%;
    transform:rotate(-7deg);
}

.about-float-two {
    top:18%;
    right:7%;
    transform:rotate(6deg);
    animation-delay:-2s;
}

.about-float-three {
    bottom:18%;
    right:8%;
    transform:rotate(-5deg);
    animation-delay:-3s;
}

.about-float-four {
    bottom:16%;
    left:8%;
    transform:rotate(7deg);
    animation-delay:-1s;
}


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

.about-intro {
    background:#fff;
}

.about-intro-grid {
    display:grid;
    grid-template-columns:.7fr 1.6fr;
    gap:80px;
    align-items:start;
}

.about-badge {
    width:120px;
    height:120px;

    margin-top:35px;

    border-radius:50%;

    background:var(--yellow);

    display:grid;
    place-items:center;

    text-align:center;

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

    line-height:1.1;

    transform:rotate(-8deg);

    box-shadow:
        0 20px 45px rgba(80,60,10,.12);
}

.about-big-text {
    font:
        400 clamp(38px,5vw,68px)/1.1
        "Instrument Serif";

    letter-spacing:-.025em;
}

.highlight-blue {
    color:var(--blue);
}

.highlight-pink {
    color:var(--pink);
}


/* =====================================================
   STORY
===================================================== */

.story-section {
    background:var(--cream);
}

.story-heading {
    margin-bottom:55px;
}

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

.story-text {
    font-size:18px;
    line-height:1.75;
    color:var(--muted);
}

.story-text p {
    margin-bottom:25px;
}

.story-text strong {
    color:var(--ink);
}


.story-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.story-card {
    min-height:220px;
    padding:28px;

    border-radius:27px;

    position:relative;

    overflow:hidden;

    transition:
        .45s var(--ease);
}

.story-card:hover {
    transform:
        translateY(-8px)
        rotate(.7deg);

    box-shadow:var(--shadow);
}

.story-card span {
    position:absolute;
    right:22px;
    top:20px;

    font-size:11px;
    font-weight:700;
    opacity:.5;
}

.story-card i {
    font-size:25px;
    margin-bottom:45px;
}

.story-card h3 {
    font:
        600 28px
        "Space Grotesk";

    margin-bottom:8px;
}

.story-card p {
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
}

.story-card-yellow {
    background:#fff0a9;
}

.story-card-purple {
    background:#eee9ff;
}

.story-card-green {
    background:#ddf8ed;
    grid-column:1 / -1;
}


/* =====================================================
   ABOUT CAPABILITIES
===================================================== */

.about-services {
    background:#fff;
}

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

.center-lead {
    margin:
        25px
        auto
        0;
}

.about-capabilities {
    margin-top:60px;

    display:grid;

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

    gap:14px;
}

.capability {
    display:flex;
    gap:20px;

    align-items:flex-start;

    padding:28px;

    border-radius:24px;

    background:#f7f5f1;

    border:1px solid transparent;

    transition:.4s var(--ease);
}

.capability:hover {
    transform:translateY(-6px);

    background:#fff;

    border-color:var(--line);

    box-shadow:var(--shadow);
}

.capability-icon {
    width:58px;
    height:58px;

    flex:0 0 58px;

    border-radius:18px;

    display:grid;
    place-items:center;

    background:#fff;

    font-size:21px;
}

.capability-icon.blue {
    color:var(--blue);
}

.capability-icon.pink {
    color:var(--pink);
}

.capability-icon.green {
    color:#2da77a;
}

.capability-icon.orange {
    color:var(--orange);
}

.capability-icon.yellow {
    color:#c79d00;
}

.capability-icon.purple {
    color:#9259e9;
}

.capability h3 {
    font:
        600 22px
        "Space Grotesk";

    letter-spacing:-.03em;

    margin-bottom:8px;
}

.capability p {
    color:var(--muted);

    font-size:14px;

    line-height:1.55;
}


/* =====================================================
   MISSION
===================================================== */

.mission-section {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(166,108,255,.15),
            transparent 30%
        ),
        var(--cream);
}

.mission-grid {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:15px;

    margin-top:55px;
}

.mission-card {
    min-height:350px;

    padding:38px;

    border-radius:30px;

    position:relative;

    overflow:hidden;

    transition:.5s var(--ease);
}

.mission-card:hover {
    transform:translateY(-8px);
    box-shadow:var(--shadow);
}

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

    position:absolute;

    width:240px;
    height:240px;

    border-radius:50%;

    right:-90px;
    bottom:-100px;

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

.mission-card-green {
    background:#dff8ed;
}

.mission-card-purple {
    background:#eee9ff;
}

.mission-number {
    font-size:11px;
    font-weight:800;

    color:#777;
}

.mission-icon {
    width:65px;
    height:65px;

    border-radius:20px;

    background:#fff;

    display:grid;
    place-items:center;

    font-size:24px;

    margin:
        55px
        0
        25px;
}

.mission-card h3 {
    font:
        600 38px
        "Space Grotesk";

    letter-spacing:-.05em;

    margin-bottom:15px;
}

.mission-card p {
    max-width:530px;

    color:var(--muted);

    font-size:15px;

    line-height:1.7;
}


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

.values-section {
    background:#fff;
}

.values-heading {
    margin-bottom:55px;
}

.values-grid {
    display:grid;

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

    gap:13px;
}

.value-card {
    min-height:240px;

    padding:27px;

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

    border-radius:24px;

    transition:.4s var(--ease);
}

.value-card:hover {
    transform:translateY(-7px);
    box-shadow:var(--shadow);
}

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

    display:grid;
    place-items:center;

    border-radius:17px;

    background:#f1efff;

    color:var(--blue);

    margin-bottom:55px;
}

.value-card h3 {
    font:
        600 20px
        "Space Grotesk";

    margin-bottom:9px;
}

.value-card p {
    color:var(--muted);

    font-size:13px;

    line-height:1.55;
}


/* =====================================================
   WHY QUADRA FROYN
===================================================== */

.why-about-section {
    background:var(--ink);
    color:#fff;
}

.why-about-section .eyebrow {
    color:#aaa;
}

.why-about-section .section-title {
    color:#fff;
}

.why-about-grid {
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:100px;

    align-items:start;
}

.why-about-list {
    display:grid;
    gap:0;
}

.why-about-item {
    display:grid;

    grid-template-columns:
        45px 1fr;

    gap:20px;

    padding:
        25px 0;

    border-bottom:
        1px solid
        #343139;
}

.why-about-item:last-child {
    border-bottom:0;
}

.why-about-item > span {
    font-size:11px;
    color:#777;
    padding-top:5px;
}

.why-about-item h3 {
    font:
        600 23px
        "Space Grotesk";

    margin-bottom:7px;
}

.why-about-item p {
    color:#999;

    font-size:14px;

    line-height:1.6;

    max-width:520px;
}


/* =====================================================
   ABOUT CTA
===================================================== */

.about-cta {
    padding:80px 0;

    background:
        linear-gradient(
            135deg,
            #f0edff,
            #fff7ee
        );
}

.about-cta-box {
    background:#fff;

    border-radius:32px;

    padding:
        50px 55px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    box-shadow:var(--shadow);
}

.about-cta-box h2 {
    font:
        600 clamp(38px,5vw,65px)/1
        "Space Grotesk";

    letter-spacing:-.055em;

    margin-top:15px;
}

.about-cta-box h2 .serif {
    font-weight:400;
}


/* =====================================================
   ACTIVE NAV
===================================================== */

.nav-links a.active {
    color:var(--blue);
}

.nav-links a.active:after {
    transform:scaleX(1);
    transform-origin:left;
}


/* =====================================================
   ABOUT RESPONSIVE
===================================================== */

@media(max-width:950px) {

    .about-hero-grid {
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-visual {
        height:480px;
    }

    .about-intro-grid {
        grid-template-columns:1fr;
        gap:40px;
    }

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

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

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

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

    .why-about-grid {
        grid-template-columns:1fr;
        gap:50px;
    }

}


@media(max-width:620px) {

    .page-hero {
        padding-top:125px;
    }

    .about-hero h1 {
        font-size:
            clamp(
                52px,
                15vw,
                76px
            );
    }

    .about-visual {
        height:370px;
    }

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

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

    .about-center {
        width:175px;
        height:175px;
    }

    .about-center-icon {
        width:48px;
        height:48px;
        font-size:18px;
        border-radius:15px;
        margin-bottom:8px;
    }

    .about-center strong {
        font-size:20px;
    }

    .about-center span {
        font-size:15px;
    }

    .about-floating {
        padding:9px 11px;
        font-size:9px;
    }

    .about-float-one {
        left:0;
    }

    .about-float-two {
        right:0;
    }

    .about-float-three {
        right:0;
    }

    .about-float-four {
        left:0;
    }

    .about-big-text {
        font-size:40px;
    }

    .story-cards {
        grid-template-columns:1fr;
    }

    .story-card-green {
        grid-column:auto;
    }

    .capability {
        padding:22px;
    }

    .capability-icon {
        width:48px;
        height:48px;
        flex-basis:48px;
        border-radius:15px;
    }

    .capability h3 {
        font-size:19px;
    }

    .mission-card {
        min-height:320px;
        padding:28px;
    }

    .mission-card h3 {
        font-size:32px;
    }

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

    .value-card {
        min-height:200px;
    }

    .value-icon {
        margin-bottom:35px;
    }

    .about-cta-box {
        padding:32px 25px;

        flex-direction:column;

        align-items:flex-start;
    }

}
/* =====================================================
   NAVBAR FIX
===================================================== */

.nav {
    position: fixed;
    z-index: 1000;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    width: min(1160px, calc(100% - 30px));
    height: 68px;

    padding: 0 10px 0 18px;

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

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

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

    border: 1px solid rgba(20, 20, 20, 0.08);

    border-radius: 999px;

    box-shadow:
        0 10px 35px rgba(25, 20, 50, 0.06);

    transition:
        top 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}


/* Scrolled navbar */

.nav.scrolled {
    top: 10px;

    box-shadow:
        0 18px 50px rgba(25, 20, 50, 0.12);
}


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

.brand {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    font-family: "Space Grotesk", sans-serif;

    font-weight: 700;

    line-height: 1;
}


/* IMPORTANT:
   This prevents the giant logo problem.
*/

.brand img {
    width: 42px !important;
    height: 42px !important;

    max-width: 42px !important;
    max-height: 42px !important;

    min-width: 42px;
    min-height: 42px;

    object-fit: contain;

    display: block;

    border-radius: 12px;
}


.brand-text {
    display: flex;

    flex-direction: column;

    gap: 4px;

    white-space: nowrap;

    font-size: 15px;

    letter-spacing: -0.02em;
}


.brand small {
    display: block;

    color: #888;

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.08em;

    line-height: 1;

    text-transform: uppercase;
}


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

.nav-links {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-left: auto;
    margin-right: 25px;

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

    font-size: 14px;

    font-weight: 600;
}


.nav-links a {
    position: relative;

    display: inline-flex;

    align-items: center;

    height: 68px;

    color: var(--ink);

    white-space: nowrap;

    transition:
        color 0.3s ease;
}


.nav-links a:hover {
    color: var(--blue);
}


/* Underline */

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 18px;

    width: 100%;
    height: 2px;

    background: var(--blue);

    border-radius: 999px;

    transform: scaleX(0);

    transform-origin: right;

    transition:
        transform 0.3s var(--ease);
}


.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);

    transform-origin: left;
}


.nav-links a.active {
    color: var(--blue);
}


/* =====================================================
   LET'S TALK BUTTON
===================================================== */

.nav-cta {
    display: inline-flex;

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

    gap: 10px;

    flex-shrink: 0;

    padding: 12px 18px;

    background: var(--ink);

    color: #fff;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 0.35s var(--ease),
        background 0.35s var(--ease);
}


.nav-cta:hover {
    background: var(--blue);

    color: #fff;

    transform: translateY(-2px);
}


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

.menu-btn {
    display: none;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border: 0;

    border-radius: 50%;

    background: var(--ink);

    color: #fff;

    cursor: pointer;

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


.menu-btn i {
    font-size: 16px;
}


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

.mobile-menu {
    position: fixed;

    inset: 0;

    z-index: 900;

    background: rgba(255, 250, 241, 0.98);

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

    padding:
        120px
        30px
        40px;

    display: flex;

    flex-direction: column;

    gap: 22px;

    transform: translateY(-105%);

    transition:
        transform 0.65s var(--ease);
}


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


.mobile-menu a {
    font-family: "Space Grotesk", sans-serif;

    font-size: 38px;

    font-weight: 600;

    letter-spacing: -0.04em;

    color: var(--ink);

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.mobile-menu a:hover,
.mobile-menu a.active {
    color: var(--blue);

    transform: translateX(6px);
}


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

@media (max-width: 950px) {

    .nav-links,
    .nav-cta {
        display: none;
    }


    .menu-btn {
        display: inline-flex;
    }


    .nav {
        height: 62px;

        padding:
            0
            9px
            0
            14px;
    }


    .brand img {
        width: 40px !important;
        height: 40px !important;

        max-width: 40px !important;
        max-height: 40px !important;

        min-width: 40px;
        min-height: 40px;
    }


    .brand-text {
        font-size: 14px;
    }

}


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

@media (max-width: 500px) {

    .nav {
        width: calc(100% - 20px);

        top: 10px;

        height: 58px;
    }


    .brand {
        gap: 8px;
    }


    .brand img {
        width: 38px !important;
        height: 38px !important;

        max-width: 38px !important;
        max-height: 38px !important;

        min-width: 38px;
        min-height: 38px;

        border-radius: 10px;
    }


    .brand-text {
        font-size: 13px;
    }


    .brand small {
        font-size: 7px;
    }


    .menu-btn {
        width: 40px;
        height: 40px;
    }


    .mobile-menu {
        padding-top: 105px;
    }


    .mobile-menu a {
        font-size: 32px;
    }

}
/* =========================================================
   FOOTER FINAL FIX
   Keep this section at the VERY BOTTOM of style.css
========================================================= */

.footer {
    width: 100%;
    background: #16151a;
    color: #fff;
    padding: 75px 0 25px;
}

.footer .container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* MAIN FOOTER GRID */
.footer .footer-top {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;

    gap: 50px !important;

    padding-bottom: 50px;

    border-bottom: 1px solid #343139;
}

/* Each footer column */
.footer .footer-top > div {
    min-width: 0;
}

/* Brand heading */
.footer h3 {
    margin: 0 0 14px;

    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    font-weight: 700;

    color: #fff;
}

/* Description */
.footer p {
    margin: 0;

    max-width: 500px;

    color: #aaa;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

/* Small section headings */
.footer h5 {
    margin: 0 0 17px;

    color: #777;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Links */
.footer .footer-links {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 8px !important;
}

.footer .footer-links a {
    display: block;

    color: #aaa;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer .footer-links a:hover {
    color: #fff;
    transform: translateX(3px);
}

/* Social icons */
.footer .social {
    display: flex !important;
    align-items: center;

    gap: 8px !important;

    margin-top: 20px;
}

.footer .social a {
    width: 38px;
    height: 38px;

    display: grid !important;
    place-items: center;

    border: 1px solid #3a3840;
    border-radius: 50%;

    color: #aaa;

    font-size: 14px;

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

.footer .social a:hover {
    background: #5b55ff;
    border-color: #5b55ff;

    color: #fff;

    transform: translateY(-3px);
}

/* Bottom copyright */
.footer .bottom {
    width: 100%;

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

    gap: 20px;

    padding-top: 22px;

    color: #777;

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

.footer .bottom span {
    color: #777;
}

.footer .bottom a {
    color: #777;
    text-decoration: none;

    white-space: nowrap;

    transition: color .25s ease;
}

.footer .bottom a:hover {
    color: #fff;
}


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

@media (max-width: 950px) {

    .footer .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }

}


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

@media (max-width: 620px) {

    .footer {
        padding: 60px 0 22px;
    }

    .footer .container {
        width: min(100% - 28px, 1180px);
    }

    .footer .footer-top {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .footer .bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

}
/* =========================================================
   GLOBAL NAVBAR FIX
   Keep this at the VERY END of style.css
========================================================= */

.nav {
    position: fixed !important;
    z-index: 1000 !important;

    top: 18px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: min(1160px, calc(100% - 30px)) !important;
    height: 68px !important;

    padding: 0 10px 0 18px !important;

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

    background: rgba(255, 255, 255, 0.88) !important;

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

    border: 1px solid rgba(20, 20, 20, 0.08) !important;

    border-radius: 999px !important;

    box-shadow:
        0 10px 35px rgba(25, 20, 50, 0.06) !important;

    box-sizing: border-box !important;

    transition:
        top .4s var(--ease),
        box-shadow .4s var(--ease) !important;
}


/* Scrolled navbar */

.nav.scrolled {
    top: 10px !important;

    box-shadow:
        0 18px 50px rgba(25, 20, 50, 0.12) !important;
}


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

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

    gap: 10px !important;

    flex-shrink: 0 !important;

    font-family: "Space Grotesk", sans-serif !important;
    font-weight: 700 !important;

    line-height: 1 !important;
}


.nav .brand img {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    object-fit: contain !important;

    border-radius: 12px !important;

    display: block !important;
}


.nav .brand > div {
    white-space: nowrap !important;

    font-size: 16px !important;
}


.nav .brand small {
    display: block !important;

    margin-top: 3px !important;

    color: #888 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 9px !important;

    font-weight: 500 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
}


/* =========================================================
   NAV LINKS
========================================================= */

.nav .nav-links {
    display: flex !important;

    align-items: center !important;

    gap: 28px !important;

    margin-left: auto !important;
    margin-right: 28px !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    white-space: nowrap !important;
}


.nav .nav-links a {
    position: relative !important;

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

    height: 68px !important;

    color: var(--ink) !important;

    text-decoration: none !important;

    transition: color .3s ease !important;
}


.nav .nav-links a::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    bottom: 15px !important;

    width: 100% !important;
    height: 2px !important;

    background: var(--blue) !important;

    transform: scaleX(0) !important;

    transform-origin: right !important;

    transition: transform .3s ease !important;
}


.nav .nav-links a:hover::after,
.nav .nav-links a.active::after {
    transform: scaleX(1) !important;

    transform-origin: left !important;
}


/* =========================================================
   LET'S TALK BUTTON
========================================================= */

.nav .nav-cta {
    display: inline-flex !important;

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

    gap: 10px !important;

    flex-shrink: 0 !important;

    padding: 14px 20px !important;

    border-radius: 999px !important;

    background: var(--ink) !important;

    color: #fff !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transition:
        transform .35s var(--ease),
        background .35s var(--ease) !important;
}


.nav .nav-cta:hover {
    background: var(--blue) !important;

    color: #fff !important;

    transform: translateY(-2px) !important;
}


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

.nav .menu-btn {
    display: none;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border: 0;

    border-radius: 50%;

    background: var(--ink);

    color: #fff;

    cursor: pointer;
}


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

@media (max-width: 950px) {

    .nav {
        height: 62px !important;

        padding:
            0 9px 0 14px !important;
    }


    .nav .nav-links,
    .nav .nav-cta {
        display: none !important;
    }


    .nav .menu-btn {
        display: grid !important;

        place-items: center !important;
    }


    .nav .brand img {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;
    }


    .nav .brand > div {
        font-size: 15px !important;
    }
}


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

@media (max-width: 620px) {

    .nav {
        top: 12px !important;

        width: calc(100% - 24px) !important;

        height: 58px !important;
    }


    .nav .brand {
        gap: 8px !important;
    }


    .nav .brand img {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        border-radius: 10px !important;
    }


    .nav .brand > div {
        font-size: 14px !important;
    }


    .nav .brand small {
        font-size: 7px !important;
    }


    .nav .menu-btn {
        width: 40px !important;
        height: 40px !important;
    }
}


/* ================= SERVICES PAGE ================= */

/* SERVICES HERO */

.services-page-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 0;
}

.services-page-hero .container {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 2;
}

.services-page-hero-content {
    max-width: 650px;
}

.services-page-hero-content h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(52px, 6vw, 82px);
    line-height: 0.98;
    letter-spacing: -3px;
    margin: 25px 0;
}

.services-page-hero-content h1 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.services-page-hero-content > p:not(.hero-small) {
    max-width: 600px;
    font-size: 18px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 35px;
}

.services-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    pointer-events: none;
}

.glow-one {
    width: 400px;
    height: 400px;
    background: rgba(143, 104, 255, 0.12);
    top: -100px;
    right: 5%;
}

.glow-two {
    width: 300px;
    height: 300px;
    background: rgba(255, 190, 80, 0.10);
    bottom: -100px;
    left: 20%;
}


/* HERO IMAGE */

.services-hero-image {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-main {
    position: relative;
    width: 430px;
    height: 500px;
    overflow: hidden;
    border-radius: 220px 220px 35px 35px;
    transform: rotate(2deg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

.hero-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-image-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(20, 15, 35, 0.7),
        transparent 55%
    );
}

.hero-image-overlay {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 2;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hero-image-overlay span {
    font-size: 13px;
    opacity: 0.7;
}

.hero-image-overlay strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 24px;
    line-height: 1.1;
    text-align: right;
}

.hero-small-card {
    position: absolute;
    right: -15px;
    bottom: 50px;
    background: white;
    padding: 18px 22px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    z-index: 4;
}

.hero-small-card i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7f5dc;
    border-radius: 12px;
    color: #548d43;
}

.hero-small-card strong {
    display: block;
    font-size: 14px;
}

.hero-small-card span {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}


/* SERVICES INTRO */

.services-intro {
    background: #f8f7f4;
}

.services-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    margin-top: 45px;
    align-items: start;
}

.services-intro-grid h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -2px;
    margin: 0;
}

.services-intro-grid h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.services-intro-grid p {
    font-size: 18px;
    line-height: 1.8;
    color: #666;
    margin: 0;
    max-width: 550px;
}


/* VISUAL SERVICES */

.visual-services {
    background: #fff;
}

.visual-service {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    margin-bottom: 150px;
}

.visual-service:last-child {
    margin-bottom: 0;
}

.visual-service.reverse .visual-service-image {
    order: 2;
}

.visual-service.reverse .visual-service-content {
    order: 1;
}

.visual-service-image {
    position: relative;
    height: 520px;
    overflow: hidden;
    border-radius: 30px;
}

.visual-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.visual-service:hover .visual-service-image img {
    transform: scale(1.05);
}

.image-number {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    z-index: 2;
}

.visual-service-content {
    max-width: 560px;
}

.service-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #777;
    margin-bottom: 18px;
}

.visual-service-content h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -2px;
    margin: 0 0 25px;
}

.visual-service-content h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.visual-service-content > p {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
}

.service-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 35px;
}

.service-feature-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

.service-feature-list i {
    color: #8c6cf2;
    font-size: 12px;
}


/* SOFTWARE */

.software-service {
    margin-top: 40px;
    margin-bottom: 150px;
    padding: 70px;
    border-radius: 35px;
    background: #17151d;
    color: white;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
    overflow: hidden;
}

.software-content {
    max-width: 650px;
}

.software-content .service-kicker {
    color: #aaa;
}

.software-content h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 65px);
    line-height: 1;
    letter-spacing: -2px;
    margin: 0 0 25px;
}

.software-content h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.software-content > p {
    color: #aaa;
    line-height: 1.8;
    font-size: 17px;
    max-width: 560px;
}

.software-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.software-features div {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
}

.software-features i {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
}

.software-features strong {
    font-size: 14px;
}

.software-features span {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}


/* CODE VISUAL */

.software-visual {
    display: flex;
    justify-content: center;
}

.code-window {
    width: 100%;
    max-width: 420px;
    min-height: 310px;
    background: #24212d;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    transform: rotate(3deg);
}

.code-window-top {
    display: flex;
    gap: 7px;
    margin-bottom: 35px;
}

.code-window-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #777;
}

.code-lines {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.code-line {
    display: block;
    height: 8px;
    border-radius: 10px;
    background: #7160a8;
    opacity: 0.7;
}

.code-line.long {
    width: 85%;
}

.code-line.medium {
    width: 65%;
}

.code-line.short {
    width: 42%;
}


/* DIGITAL SOLUTIONS */

.digital-service {
    margin-bottom: 150px;
    padding: 70px;
    border-radius: 35px;
    background: #f1eee5;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 45px;
    align-items: start;
}

.digital-icon {
    width: 100px;
    height: 100px;
    border-radius: 28px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.digital-service h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 5vw, 60px);
    margin: 0 0 20px;
    line-height: 1;
}

.digital-service h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.digital-service p {
    max-width: 700px;
    color: #666;
    font-size: 17px;
    line-height: 1.8;
}


/* TRAINING */

.training-service {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}

.training-service-image {
    min-height: 420px;
    border-radius: 35px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #dcd3ff,
        #f4cfe8,
        #e9edca
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.training-service-image i {
    position: relative;
    z-index: 3;
    font-size: 100px;
    color: white;
    text-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.training-image-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.shape-one {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -80px;
}

.shape-two {
    width: 250px;
    height: 250px;
    right: -70px;
    bottom: -80px;
}

.training-service-content h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 65px);
    line-height: 1;
    letter-spacing: -2px;
    margin: 0 0 25px;
}

.training-service-content h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.training-service-content > p {
    color: #666;
    font-size: 17px;
    line-height: 1.8;
    max-width: 600px;
}

.training-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0;
}

.training-points span {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 13px;
    background: #fafafa;
}


/* PROCESS */

.process-section {
    background: #f8f7f4;
}

.process-heading {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;
    margin: 40px 0 60px;
    align-items: end;
}

.process-heading h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -2px;
    margin: 0;
}

.process-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.process-heading p {
    color: #666;
    line-height: 1.8;
    font-size: 17px;
    margin: 0;
}

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

.process-card {
    background: white;
    padding: 35px 28px;
    border-radius: 22px;
    position: relative;
    min-height: 250px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.process-card > span {
    position: absolute;
    top: 22px;
    right: 22px;
    font-size: 12px;
    color: #999;
}

.process-card > i {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #f1edff;
    color: #795be7;
    font-size: 21px;
    margin-bottom: 30px;
}

.process-card h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    margin-bottom: 12px;
}

.process-card p {
    color: #777;
    line-height: 1.7;
    font-size: 14px;
}


/* TEXT LINK */

.visual-service .text-link,
.digital-service .text-link,
.training-service .text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #17151d;
    font-weight: 600;
    transition: gap 0.3s ease;
}

.visual-service .text-link:hover,
.digital-service .text-link:hover,
.training-service .text-link:hover {
    gap: 16px;
}


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

@media (max-width: 1000px) {

    .services-page-hero .container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .services-page-hero-content {
        max-width: 750px;
    }

    .services-hero-image {
        min-height: 430px;
    }

    .hero-image-main {
        width: 380px;
        height: 430px;
    }

    .services-intro-grid {
        gap: 50px;
    }

    .visual-service {
        gap: 50px;
    }

    .software-service {
        grid-template-columns: 1fr;
    }

    .software-visual {
        order: -1;
    }

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

}


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

@media (max-width: 700px) {

    .services-page-hero {
        padding: 75px 0;
        min-height: auto;
    }

    .services-page-hero .container {
        display: flex;
        flex-direction: column;
        gap: 55px;
    }

    .services-page-hero-content h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .services-page-hero-content > p:not(.hero-small) {
        font-size: 16px;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

    .services-hero-image {
        width: 100%;
        min-height: 380px;
    }

    .hero-image-main {
        width: min(85vw, 350px);
        height: 400px;
    }

    .hero-small-card {
        right: 0;
        bottom: 20px;
    }

    .services-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 30px;
    }

    .services-intro-grid h2 {
        font-size: 42px;
    }

    .visual-service,
    .visual-service.reverse {
        display: flex;
        flex-direction: column;
        gap: 35px;
        margin-bottom: 90px;
    }

    .visual-service.reverse .visual-service-image,
    .visual-service.reverse .visual-service-content {
        order: initial;
    }

    .visual-service-image {
        width: 100%;
        height: 350px;
    }

    .visual-service-content h2 {
        font-size: 45px;
    }

    .service-feature-list {
        grid-template-columns: 1fr;
    }

    .software-service {
        padding: 40px 25px;
        border-radius: 25px;
        gap: 45px;
        margin-bottom: 90px;
    }

    .software-content h2 {
        font-size: 43px;
    }

    .software-features {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .code-window {
        transform: none;
    }

    .digital-service {
        grid-template-columns: 1fr;
        padding: 40px 25px;
        gap: 30px;
        border-radius: 25px;
        margin-bottom: 90px;
    }

    .digital-service h2 {
        font-size: 43px;
    }

    .training-service {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 80px;
    }

    .training-service-image {
        min-height: 330px;
    }

    .training-service-content h2 {
        font-size: 45px;
    }

    .process-heading {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 40px;
    }

    .process-heading h2 {
        font-size: 43px;
    }

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

    .process-card {
        min-height: auto;
    }

}


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

@media (max-width: 420px) {

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

    .hero-image-main {
        width: 280px;
        height: 340px;
    }

    .hero-small-card {
        padding: 13px 15px;
    }

    .hero-small-card i {
        width: 38px;
        height: 38px;
    }

    .visual-service-content h2,
    .software-content h2,
    .digital-service h2,
    .training-service-content h2 {
        font-size: 39px;
    }

    .service-feature-list {
        gap: 12px;
    }

}
/* =====================================================
   WORK PAGE
===================================================== */


/* =====================================================
   WORK HERO
===================================================== */

.work-page-hero {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 0;
    background: #f8f7ff;
}

.work-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 80px;
}

.work-hero-content {
    max-width: 680px;
}

.work-hero-content h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(55px, 6vw, 90px);
    line-height: 0.98;
    letter-spacing: -4px;
    margin: 20px 0 30px;
    color: #17151f;
}

.work-hero-content h1 .highlight {
    color: #7357ff;
}

.work-hero-content h1 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #e85c91;
}

.work-hero-content .hero-description {
    max-width: 600px;
}


/* =====================================================
   WORK HERO BACKGROUND
===================================================== */

.work-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.work-glow-one {
    width: 420px;
    height: 420px;
    background: rgba(120, 88, 255, 0.16);
    top: -160px;
    right: -100px;
}

.work-glow-two {
    width: 300px;
    height: 300px;
    background: rgba(255, 130, 180, 0.14);
    bottom: -120px;
    left: -100px;
}


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

.work-hero-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-project-image {
    position: relative;
    width: 430px;
    height: 420px;
    border-radius: 35px;
    overflow: hidden;
    transform: rotate(3deg);
    box-shadow: 0 30px 70px rgba(35, 25, 70, 0.18);
    background: #17151f;
}

.hero-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-project-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 80px 35px 30px;
    color: white;
    background: linear-gradient(
        transparent,
        rgba(20, 15, 35, 0.9)
    );
}

.hero-project-overlay span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.hero-project-overlay strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
    line-height: 1.1;
}

.hero-project-card {
    position: absolute;
    right: 0;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(25, 20, 50, 0.15);
    transform: rotate(-4deg);
}

.hero-project-card i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eeeaff;
    color: #7055ef;
}

.hero-project-card strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 21px;
}

.hero-project-card span {
    display: block;
    margin-top: 3px;
    color: #77727f;
    font-size: 12px;
}


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

.work-intro {
    background: #ffffff;
}

.work-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 100px;
    align-items: end;
    margin-top: 35px;
}

.work-intro-grid h2 {
    max-width: 800px;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -3px;
}

.work-intro-grid h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #7357ff;
}

.work-intro-grid p {
    max-width: 500px;
    margin: 0;
    color: #68636f;
    font-size: 17px;
    line-height: 1.8;
}


/* =====================================================
   PROJECTS SECTION
===================================================== */

.projects-section {
    background: #f8f7f4;
}

.projects-section .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 60px;
}

.projects-section .section-heading h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -3px;
    margin: 20px 0 0;
}

.projects-section .section-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #e65c91;
}

.projects-section .section-heading > p {
    max-width: 420px;
    margin: 0;
    color: #706b76;
    line-height: 1.7;
}


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

.project-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 520px;
    margin-bottom: 35px;
    border-radius: 30px;
    overflow: hidden;
    background: white;
    box-shadow: 0 15px 45px rgba(30, 25, 50, 0.07);
}

.project-card.project-reverse {
    grid-template-columns: 0.9fr 1.1fr;
}

.project-card.project-reverse .project-image {
    order: 2;
}

.project-card.project-reverse .project-content {
    order: 1;
}


/* =====================================================
   PROJECT IMAGE
===================================================== */

.project-image {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: #ddd8ee;
}

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

.project-card:hover .project-image img {
    transform: scale(1.06);
}

.project-number {
    position: absolute;
    top: 25px;
    left: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #201c29;
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
}


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

.project-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px;
}

.project-category {
    display: inline-block;
    margin-bottom: 18px;
    color: #7357ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.project-content h3 {
    max-width: 480px;
    margin: 0 0 22px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(34px, 4vw, 55px);
    line-height: 1.02;
    letter-spacing: -2px;
    color: #191620;
}

.project-content p {
    max-width: 500px;
    margin: 0 0 28px;
    color: #6e6875;
    font-size: 16px;
    line-height: 1.8;
}


/* =====================================================
   PROJECT TAGS
===================================================== */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 35px;
}

.project-tags span {
    padding: 8px 13px;
    border: 1px solid #e4e0e8;
    border-radius: 30px;
    color: #59535f;
    background: #faf9fb;
    font-size: 12px;
    font-weight: 600;
}


/* =====================================================
   PROJECT LINK
===================================================== */

.project-content .text-link {
    width: fit-content;
}


/* =====================================================
   DARK SOFTWARE PROJECT
===================================================== */

.project-dark {
    background: #191620;
}

.project-dark .project-content {
    color: white;
}

.project-dark .project-category {
    color: #a996ff;
}

.project-dark .project-content h3 {
    color: white;
}

.project-dark .project-content p {
    color: #b6b0bd;
}

.project-dark .project-tags span {
    border-color: #3a3442;
    background: #26212d;
    color: #d8d3dd;
}

.project-dark .text-link {
    color: white;
}


/* =====================================================
   SOFTWARE VISUAL
===================================================== */

.project-visual {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(123, 92, 255, 0.35),
            transparent 35%
        ),
        #211c2b;
}

.software-window {
    width: 80%;
    min-height: 300px;
    padding: 25px;
    border-radius: 20px;
    background: #302a3b;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.software-dots {
    display: flex;
    gap: 7px;
    margin-bottom: 40px;
}

.software-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #756c81;
}

.software-lines {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.software-lines span {
    display: block;
    height: 13px;
    border-radius: 20px;
    background: #514a5d;
}

.software-lines .line-large {
    width: 85%;
}

.software-lines .line-medium {
    width: 65%;
}

.software-lines .line-small {
    width: 40%;
}


/* =====================================================
   TECHNOLOGY SECTION
===================================================== */

.technology-section {
    background: white;
}

.technology-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 80px;
    align-items: end;
    margin: 30px 0 55px;
}

.technology-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -3px;
}

.technology-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #7357ff;
}

.technology-heading p {
    margin: 0;
    color: #6e6875;
    line-height: 1.7;
}


/* =====================================================
   TECHNOLOGY GRID
===================================================== */

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

.technology-card {
    min-height: 190px;
    padding: 30px;
    border: 1px solid #ece9ef;
    border-radius: 22px;
    transition: all 0.3s ease;
}

.technology-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(35, 25, 55, 0.08);
}

.technology-card i {
    display: block;
    margin-bottom: 25px;
    color: #7357ff;
    font-size: 30px;
}

.technology-card strong {
    display: block;
    margin-bottom: 7px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
}

.technology-card span {
    color: #77717d;
    font-size: 13px;
}


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

@media (max-width: 1000px) {

    .work-hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .work-hero-content {
        max-width: 750px;
    }

    .work-hero-visual {
        min-height: 400px;
    }

    .work-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .project-card,
    .project-card.project-reverse {
        grid-template-columns: 1fr;
    }

    .project-card.project-reverse .project-image {
        order: 1;
    }

    .project-card.project-reverse .project-content {
        order: 2;
    }

    .project-image,
    .project-visual {
        min-height: 400px;
    }

    .technology-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

}


@media (max-width: 700px) {

    .work-page-hero {
        min-height: auto;
        padding: 80px 0;
    }

    .work-hero-content h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .work-hero-visual {
        min-height: 350px;
    }

    .hero-project-image {
        width: 90%;
        height: 330px;
    }

    .hero-project-card {
        right: 0;
        bottom: 10px;
    }

    .work-intro-grid h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .projects-section .section-heading {
        display: block;
    }

    .projects-section .section-heading > p {
        margin-top: 25px;
    }

    .project-content {
        padding: 40px 28px;
    }

    .project-content h3 {
        font-size: 38px;
    }

    .project-image,
    .project-visual {
        min-height: 300px;
    }

    .project-visual {
        padding: 25px;
    }

    .software-window {
        width: 95%;
        min-height: 220px;
    }

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

}


@media (max-width: 480px) {

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

    .hero-project-image {
        width: 100%;
        height: 290px;
        transform: rotate(0);
    }

    .hero-project-card {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: -30px;
        z-index: 5;
        transform: rotate(0);
    }

    .work-hero-visual {
        min-height: 360px;
        display: block;
    }

    .project-content h3 {
        font-size: 34px;
    }

    .project-content {
        padding: 35px 22px;
    }

    .project-tags {
        margin-bottom: 25px;
    }

}
/* =========================================================
   TRAINING PAGE
========================================================= */


/* ================= TRAINING HERO ================= */

.training-page-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 110px 0 90px;
    background:
        radial-gradient(circle at 80% 20%, rgba(150, 90, 255, 0.14), transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(255, 180, 80, 0.10), transparent 30%),
        #f8f7f4;
}

.training-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 70px;
    align-items: center;
}

.training-hero-content {
    max-width: 680px;
}

.training-hero-content .hero-small {
    margin-top: 30px;
}

.training-hero-content h1 {
    margin: 18px 0 25px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(55px, 7vw, 92px);
    line-height: 0.95;
    letter-spacing: -4px;
    font-weight: 600;
}

.training-hero-content h1 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.training-hero-content .hero-description {
    max-width: 600px;
}


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

.training-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.training-glow-one {
    width: 350px;
    height: 350px;
    right: -120px;
    top: 80px;
    background: rgba(165, 110, 255, 0.15);
}

.training-glow-two {
    width: 280px;
    height: 280px;
    left: -100px;
    bottom: -100px;
    background: rgba(255, 190, 70, 0.12);
}


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

.training-hero-visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.training-main-image {
    position: relative;
    width: 430px;
    height: 500px;
    overflow: hidden;
    border-radius: 220px 220px 35px 35px;
    transform: rotate(2deg);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15);
}

.training-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.training-image-overlay {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    padding: 22px;
    border-radius: 20px;
    background: rgba(20, 20, 25, 0.78);
    backdrop-filter: blur(12px);
    color: white;
}

.training-image-overlay span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.training-image-overlay strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 24px;
    line-height: 1.1;
}


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

.training-floating-card {
    position: absolute;
    right: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    z-index: 4;
}

.training-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eee7ff;
    color: #7956d8;
    font-size: 20px;
}

.training-floating-card strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 15px;
}

.training-floating-card span {
    display: block;
    margin-top: 3px;
    color: #777;
    font-size: 12px;
}


/* ================= TRAINING STATS ================= */

.training-stats {
    display: flex;
    gap: 45px;
    margin-top: 45px;
}

.training-stats div {
    display: flex;
    flex-direction: column;
}

.training-stats strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
}

.training-stats span {
    margin-top: 4px;
    color: #777;
    font-size: 13px;
}


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

.training-intro {
    background: #fff;
}

.training-intro-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: 100px;
    align-items: center;
    margin-top: 45px;
}

.training-intro-grid h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1;
    letter-spacing: -3px;
}

.training-intro-grid h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.training-intro-grid p {
    max-width: 580px;
    margin: 0;
    color: #666;
    font-size: 18px;
    line-height: 1.8;
}


/* =========================================================
   TRAINING PROGRAMS
========================================================= */

.training-programs {
    background: #f5f3ef;
}

.training-programs .section-heading {
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 65px;
}

.training-programs .section-heading h2 {
    margin: 15px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(45px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -3px;
}

.training-programs .section-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.training-programs .section-heading > p {
    margin: 0;
    color: #6d6d6d;
    font-size: 17px;
    line-height: 1.7;
}


/* ================= PROGRAM CARD ================= */

.training-program-card {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    min-height: 440px;
    margin-bottom: 35px;
    overflow: hidden;
    border-radius: 30px;
    background: white;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
}

.training-program-reverse {
    grid-template-columns: 1.05fr 0.95fr;
}

.training-program-reverse .training-program-image {
    order: 2;
}

.training-program-reverse .training-program-content {
    order: 1;
}


/* ================= PROGRAM IMAGE ================= */

.training-program-image {
    position: relative;
    min-height: 440px;
    overflow: hidden;
}

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

.training-program-card:hover .training-program-image img {
    transform: scale(1.06);
}

.training-program-image > span {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    color: #222;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}


/* ================= PYTHON IMAGE ================= */

.training-python-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, #e6defe 0%, #cfc2f6 45%, #a995df 100%);
}

.python-symbol {
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: #4b3987;
    font-size: 90px;
}


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

.training-program-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px;
}

.training-category {
    color: #8062d6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.training-program-content h3 {
    margin: 15px 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.training-program-content p {
    max-width: 550px;
    margin: 0;
    color: #6d6d6d;
    font-size: 16px;
    line-height: 1.8;
}


/* ================= TRAINING TAGS ================= */

.training-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px 0 30px;
}

.training-tags span {
    padding: 8px 13px;
    border: 1px solid #e4e1dc;
    border-radius: 30px;
    color: #555;
    font-size: 12px;
    background: #faf9f7;
}


/* =========================================================
   LEARNING MODEL
========================================================= */

.learning-model {
    background: #18171b;
    color: white;
}

.learning-model .section-label {
    color: #aaa;
}

.learning-model-heading {
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    gap: 80px;
    align-items: end;
    margin: 40px 0 70px;
}

.learning-model-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1;
    letter-spacing: -3px;
}

.learning-model-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.learning-model-heading p {
    margin: 0;
    color: #aaa;
    line-height: 1.8;
    font-size: 17px;
}


/* ================= LEARNING STEPS ================= */

.learning-model-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.learning-step {
    position: relative;
    min-height: 280px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    transition: transform 0.3s ease,
                background 0.3s ease;
}

.learning-step:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.05);
}

.learning-step > span {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #777;
    font-size: 12px;
}

.learning-step i {
    margin-top: 55px;
    color: #c5a9ff;
    font-size: 30px;
}

.learning-step h3 {
    margin: 25px 0 10px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 23px;
}

.learning-step p {
    margin: 0;
    color: #aaa;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   INTERNSHIP SECTION
========================================================= */

.internship-section {
    background: #f8f7f4;
}

.internship-box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 70px;
    align-items: center;
    min-height: 500px;
    padding: 70px;
    overflow: hidden;
    border-radius: 35px;
    background:
        linear-gradient(135deg, #ece4ff, #f8eee2);
}

.internship-content {
    position: relative;
    z-index: 2;
}

.internship-label {
    color: #7050c7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.internship-content h2 {
    margin: 18px 0 22px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 0.98;
    letter-spacing: -3px;
}

.internship-content h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.internship-content p {
    max-width: 600px;
    margin-bottom: 30px;
    color: #666;
    font-size: 17px;
    line-height: 1.8;
}


/* ================= INTERNSHIP VISUAL ================= */

.internship-visual {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.internship-circle {
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1c1b20;
    color: white;
    font-size: 75px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}

.internship-small-card {
    position: absolute;
    top: 25px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-radius: 16px;
    background: white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.internship-small-card i {
    color: #7254cb;
}

.internship-small-card span {
    font-size: 13px;
    font-weight: 600;
}

.internship-card-two {
    top: auto;
    right: auto;
    bottom: 30px;
    left: 10px;
}


/* =========================================================
   CAREER SECTION
========================================================= */

.career-section {
    background: white;
}

.career-heading {
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    gap: 80px;
    align-items: end;
    margin: 40px 0 55px;
}

.career-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(45px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -3px;
}

.career-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.career-heading p {
    margin: 0;
    color: #707070;
    font-size: 17px;
    line-height: 1.7;
}


/* ================= CAREER GRID ================= */

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

.career-card {
    padding: 35px 28px;
    border: 1px solid #e9e6e1;
    border-radius: 24px;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.career-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.career-card i {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 15px;
    background: #eee8ff;
    color: #7655cf;
    font-size: 21px;
}

.career-card h3 {
    margin: 0 0 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 21px;
}

.career-card p {
    margin: 0;
    color: #707070;
    font-size: 14px;
    line-height: 1.7;
}


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

@media (max-width: 1100px) {

    .training-hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .training-hero-content {
        max-width: 750px;
    }

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

    .training-floating-card {
        right: 10%;
    }

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

    .training-intro-grid,
    .learning-model-heading,
    .career-heading {
        gap: 50px;
    }

}


@media (max-width: 800px) {

    .training-page-hero {
        min-height: auto;
        padding: 100px 0 70px;
    }

    .training-hero-content h1 {
        font-size: 55px;
        letter-spacing: -2.5px;
    }

    .training-hero-visual {
        min-height: 450px;
    }

    .training-main-image {
        width: 340px;
        height: 410px;
    }

    .training-intro-grid,
    .training-programs .section-heading,
    .learning-model-heading,
    .internship-box,
    .career-heading {
        grid-template-columns: 1fr;
    }

    .training-intro-grid {
        gap: 30px;
    }

    .training-program-card,
    .training-program-reverse {
        grid-template-columns: 1fr;
    }

    .training-program-reverse .training-program-image,
    .training-program-reverse .training-program-content {
        order: unset;
    }

    .training-program-image {
        min-height: 320px;
    }

    .training-program-content {
        padding: 45px 30px;
    }

    .learning-model-grid,
    .career-grid {
        grid-template-columns: 1fr 1fr;
    }

    .internship-box {
        padding: 45px 30px;
    }

}


@media (max-width: 600px) {

    .training-hero-content h1 {
        font-size: 45px;
    }

    .training-hero-content .hero-description {
        font-size: 15px;
    }

    .training-stats {
        gap: 25px;
        flex-wrap: wrap;
    }

    .training-stats strong {
        font-size: 23px;
    }

    .training-hero-visual {
        min-height: 400px;
    }

    .training-main-image {
        width: 280px;
        height: 350px;
    }

    .training-floating-card {
        right: 0;
        bottom: 20px;
        padding: 12px;
    }

    .training-card-icon {
        width: 40px;
        height: 40px;
    }

    .training-intro-grid h2,
    .training-programs .section-heading h2,
    .learning-model-heading h2,
    .internship-content h2,
    .career-heading h2 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    .training-program-content h3 {
        font-size: 32px;
    }

    .learning-model-grid,
    .career-grid {
        grid-template-columns: 1fr;
    }

    .learning-step {
        min-height: auto;
    }

    .internship-visual {
        min-height: 300px;
    }

    .internship-circle {
        width: 190px;
        height: 190px;
        font-size: 55px;
    }

    .internship-small-card {
        right: 0;
    }

    .internship-card-two {
        left: 0;
    }

}
/* =========================================================
   TRAINING HERO IMAGE
========================================================= */

.training-hero-visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.training-main-image {
    position: relative;
    width: 450px;
    height: 510px;
    overflow: hidden;

    border-radius: 35px 35px 160px 160px;

    transform: rotate(2deg);

    background: #ddd;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.16);
}

.training-main-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;
}

.training-main-image:hover img {
    transform: scale(1.06);
}


/* IMAGE OVERLAY */

.training-image-overlay {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    padding: 22px;

    border-radius: 20px;

    background: rgba(20, 20, 25, 0.78);

    backdrop-filter: blur(12px);

    color: white;
}

.training-image-overlay span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}

.training-image-overlay strong {
    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: 25px;

    line-height: 1.1;
}


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

.training-floating-card {
    position: absolute;

    right: -15px;
    bottom: 55px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 16px 20px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13);
}

.training-card-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 14px;

    background: #eee7ff;

    color: #7655cf;

    font-size: 20px;
}

.training-floating-card strong {
    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: 15px;
}

.training-floating-card span {
    display: block;

    margin-top: 3px;

    color: #777;

    font-size: 12px;
}


/* =========================================================
   STUDENT BADGE
========================================================= */

.training-student-badge {
    position: absolute;

    top: 45px;
    left: -25px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 18px;

    border-radius: 30px;

    background: #1c1b20;

    color: white;

    font-size: 12px;

    font-weight: 600;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18);
}

.training-student-badge i {
    color: #d3b8ff;
    font-size: 16px;
}


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

@media (max-width: 800px) {

    .training-hero-visual {
        min-height: 460px;
    }

    .training-main-image {
        width: 350px;
        height: 420px;
    }

    .training-floating-card {
        right: 5px;
        bottom: 25px;
    }

    .training-student-badge {
        left: 0;
        top: 25px;
    }

}


@media (max-width: 500px) {

    .training-hero-visual {
        min-height: 400px;
    }

    .training-main-image {
        width: 285px;
        height: 350px;

        border-radius: 25px 25px 100px 100px;
    }

    .training-floating-card {
        right: -5px;

        padding: 10px 13px;
    }

    .training-card-icon {
        width: 38px;
        height: 38px;
    }

    .training-floating-card strong {
        font-size: 13px;
    }

    .training-floating-card span {
        font-size: 10px;
    }

    .training-student-badge {
        left: -5px;
        padding: 10px 13px;
    }

}
/* =========================================================
   TRAINING HERO COLLAGE
========================================================= */

.training-hero-visual {
    position: relative;
    width: 100%;
    height: 560px;
}


/* ================= ALL IMAGE CARDS ================= */

.training-image-card {
    position: absolute;

    overflow: hidden;

    background: #ddd;

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

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.training-image-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;
}

.training-image-card:hover img {
    transform: scale(1.08);
}

.training-image-card:hover {
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.2);
}


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

.training-main-card {

    width: 310px;
    height: 390px;

    top: 55px;
    left: 90px;

    border-radius:
        35px
        35px
        120px
        35px;

    transform: rotate(-3deg);

    z-index: 2;
}

.training-main-card:hover {
    transform: rotate(-3deg) translateY(-8px);
}


/* ================= MAIN OVERLAY ================= */

.training-card-overlay {

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 20px;

    padding: 18px;

    border-radius: 18px;

    background:
        rgba(20, 20, 25, 0.78);

    backdrop-filter: blur(10px);

    color: white;
}

.training-card-overlay span {

    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #cdb8ff;
}

.training-card-overlay strong {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 25px;

    line-height: 0.95;
}


/* =========================================================
   AI IMAGE
========================================================= */

.training-ai-card {

    width: 190px;
    height: 150px;

    top: 15px;
    right: 45px;

    border-radius: 25px;

    transform: rotate(5deg);

    z-index: 3;
}

.training-ai-card:hover {
    transform:
        rotate(5deg)
        translateY(-8px);
}


/* =========================================================
   CODE IMAGE
========================================================= */

.training-code-card {

    width: 210px;
    height: 160px;

    right: 0;
    bottom: 75px;

    border-radius: 25px;

    transform: rotate(-5deg);

    z-index: 4;
}

.training-code-card:hover {
    transform:
        rotate(-5deg)
        translateY(-8px);
}


/* =========================================================
   DATA IMAGE
========================================================= */

.training-data-card {

    width: 175px;
    height: 140px;

    left: 15px;
    bottom: 25px;

    border-radius: 25px;

    transform: rotate(5deg);

    z-index: 4;
}

.training-data-card:hover {
    transform:
        rotate(5deg)
        translateY(-8px);
}


/* =========================================================
   MINI IMAGE LABEL
========================================================= */

.mini-image-label {

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 12px;

    border-radius: 12px;

    background:
        rgba(20, 20, 25, 0.78);

    backdrop-filter: blur(8px);

    color: white;

    font-size: 11px;

    font-weight: 600;
}

.mini-image-label i {
    color: #d0baff;
}


/* =========================================================
   FLOATING TEXT CARD
========================================================= */

.training-floating-text {

    position: absolute;

    right: 10px;
    top: 210px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 18px;

    border-radius: 18px;

    background: white;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13);

    z-index: 10;
}

.training-floating-icon {

    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 13px;

    background: #eee7ff;

    color: #7454cb;

    font-size: 18px;
}

.training-floating-text strong {

    display: block;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 14px;
}

.training-floating-text span {

    display: block;

    margin-top: 3px;

    color: #777;

    font-size: 10px;
}


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

.training-dot {

    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    z-index: 1;
}

.training-dot-one {

    top: 40px;
    left: 45px;

    background: #b69cff;
}

.training-dot-two {

    right: 250px;
    bottom: 35px;

    background: #ffb85c;
}

.training-dot-three {

    right: 20px;
    top: 145px;

    background: #7bcf9a;
}


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

@media (max-width: 1100px) {

    .training-hero-visual {
        transform: scale(0.9);
        transform-origin: center;
    }

}


@media (max-width: 800px) {

    .training-hero-visual {

        height: 500px;

        margin-top: 20px;

    }

    .training-main-card {

        width: 260px;
        height: 330px;

        left: 50px;
        top: 55px;

    }

    .training-ai-card {

        width: 160px;
        height: 125px;

        right: 25px;
        top: 15px;

    }

    .training-code-card {

        width: 175px;
        height: 135px;

        right: 0;
        bottom: 65px;

    }

    .training-data-card {

        width: 150px;
        height: 120px;

        left: 10px;
        bottom: 15px;

    }

    .training-floating-text {

        right: 0;
        top: 190px;

    }

}


@media (max-width: 550px) {

    .training-hero-visual {

        height: 430px;

        transform: scale(0.82);

        transform-origin: center;

        margin-top: -20px;

    }

    .training-main-card {

        left: 45px;

        width: 245px;
        height: 310px;

    }

    .training-ai-card {

        right: 5px;

        width: 145px;
        height: 115px;

    }

    .training-code-card {

        right: -5px;

        width: 155px;
        height: 120px;

        bottom: 45px;

    }

    .training-data-card {

        left: 0;

        width: 135px;
        height: 110px;

    }

    .training-floating-text {

        right: 0;

        top: 175px;

        padding: 10px 12px;

    }

    .training-floating-icon {

        width: 36px;
        height: 36px;

    }

}
/* =========================================================
   TRAINING PAGE
========================================================= */


/* =========================================================
   TRAINING HERO
========================================================= */

.training-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 110px 0 100px;
    background: #faf9ff;
}

.training-hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.training-ball-one,
.training-ball-two,
.training-ball-three {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.55;
}

.training-ball-one {
    width: 420px;
    height: 420px;
    background: #e8ddff;
    top: -180px;
    right: 5%;
}

.training-ball-two {
    width: 300px;
    height: 300px;
    background: #dff8e8;
    bottom: -120px;
    left: -80px;
}

.training-ball-three {
    width: 230px;
    height: 230px;
    background: #ffe4d2;
    top: 35%;
    right: 35%;
}

.training-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.training-hero-content {
    max-width: 650px;
}

.training-hero-content h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(55px, 6vw, 88px);
    line-height: 0.98;
    letter-spacing: -4px;
    margin: 20px 0 28px;
    color: #15121c;
}

.training-hero-content h1 .highlight {
    color: #7b4dff;
}

.training-hero-content h1 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #ef6c91;
}

.training-hero-content .hero-description {
    max-width: 580px;
    font-size: 18px;
    line-height: 1.75;
    color: #66616e;
}

.training-hero-content .hero-buttons {
    margin-top: 34px;
}

.training-hero-content .hero-mini-stats {
    margin-top: 45px;
}


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

.training-hero-visual {
    position: relative;
    min-height: 540px;
    width: 100%;
}

.training-image-card {
    position: absolute;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 25px 70px rgba(38, 24, 72, 0.16);
}

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

.training-image-card:hover img {
    transform: scale(1.08);
}


/* MAIN IMAGE */

.training-main-card {
    width: 380px;
    height: 460px;
    top: 30px;
    left: 90px;
    z-index: 3;
    transform: rotate(-3deg);
}

.training-main-card img {
    object-position: center;
}

.training-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 55px 28px 28px;
    background: linear-gradient(
        to top,
        rgba(15, 12, 25, 0.85),
        rgba(15, 12, 25, 0)
    );
    color: white;
}

.training-card-overlay span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.training-card-overlay strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 30px;
    line-height: 1.05;
}


/* AI IMAGE */

.training-ai-card {
    width: 175px;
    height: 145px;
    top: 0;
    right: 20px;
    z-index: 4;
    transform: rotate(5deg);
}

.training-ai-card img {
    opacity: 0.9;
}


/* DATA IMAGE */

.training-data-card {
    width: 185px;
    height: 145px;
    bottom: 55px;
    right: 0;
    z-index: 4;
    transform: rotate(4deg);
}


/* CODE IMAGE */

.training-code-card {
    width: 165px;
    height: 125px;
    bottom: 0;
    left: 0;
    z-index: 5;
    transform: rotate(-6deg);
}


/* MINI IMAGE LABEL */

.mini-image-label {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #201b28;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.mini-image-label i {
    color: #7b4dff;
}


/* FLOATING CARD */

.training-floating-text {
    position: absolute;
    right: 35px;
    bottom: 145px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 18px;
    background: white;
    box-shadow: 0 15px 40px rgba(30, 20, 50, 0.14);
}

.training-floating-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0eaff;
    color: #7b4dff;
}

.training-floating-text strong {
    display: block;
    font-size: 13px;
    color: #211d28;
}

.training-floating-text span {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #85808b;
}


/* DECORATIVE DOTS */

.training-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.training-dot-one {
    background: #7b4dff;
    top: 150px;
    left: 35px;
}

.training-dot-two {
    background: #ef6c91;
    bottom: 180px;
    right: 170px;
}

.training-dot-three {
    background: #55c98b;
    top: 50px;
    left: 270px;
}


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

.training-intro {
    background: #ffffff;
}

.training-intro-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr;
    gap: 100px;
    align-items: center;
}

.training-intro-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.training-intro-left > p {
    max-width: 300px;
    margin-top: 30px;
    font-family: "Instrument Serif", serif;
    font-size: 29px;
    line-height: 1.2;
    color: #29242f;
}

.training-intro-right h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.05;
    letter-spacing: -2px;
    color: #17141c;
    margin-bottom: 28px;
}

.training-intro-right h2 .purple {
    color: #7b4dff;
}

.training-intro-right h2 .pink {
    color: #ef6c91;
}

.training-intro-right p {
    max-width: 750px;
    font-size: 17px;
    line-height: 1.8;
    color: #6e6974;
    margin-bottom: 18px;
}


/* =========================================================
   PROGRAMS SECTION
========================================================= */

.training-programs {
    background: #f7f5fb;
}

.training-programs-heading {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 55px;
}

.training-programs-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 4vw, 62px);
    line-height: 1;
    letter-spacing: -2px;
    color: #19151f;
}

.training-programs-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #7b4dff;
}

.training-programs-heading > p {
    margin: 0;
    color: #706b76;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   PROGRAM GRID
========================================================= */

.training-program-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.training-program-card {
    overflow: hidden;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(40, 30, 55, 0.07);
    transition: transform 0.35s ease,
                box-shadow 0.35s ease;
}

.training-program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(40, 25, 70, 0.13);
}


/* PROGRAM IMAGE */

.training-program-image {
    position: relative;
    height: 230px;
    overflow: hidden;
}

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

.training-program-card:hover .training-program-image img {
    transform: scale(1.08);
}

.program-number {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #28222f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.program-image-icon {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    color: #7b4dff;
    font-size: 17px;
}


/* PROGRAM CONTENT */

.training-program-content {
    padding: 27px;
}

.program-category {
    display: block;
    margin-bottom: 11px;
    color: #7b4dff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.training-program-content h3 {
    margin: 0 0 14px;
    color: #201b26;
    font-family: "Space Grotesk", sans-serif;
    font-size: 24px;
    line-height: 1.15;
}

.training-program-content > p {
    margin: 0 0 20px;
    color: #77717c;
    font-size: 14px;
    line-height: 1.7;
}


/* TAGS */

.program-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px;
}

.program-tags span {
    padding: 7px 10px;
    border-radius: 8px;
    background: #f3f0f8;
    color: #68616f;
    font-size: 10px;
    font-weight: 600;
}


/* LINK */

.program-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #211b28;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.3s ease,
                color 0.3s ease;
}

.program-link:hover {
    gap: 14px;
    color: #7b4dff;
}


/* =========================================================
   TRAINING PROCESS
========================================================= */

.training-process {
    background: #ffffff;
}

.training-process .process-heading {
    max-width: 750px;
    margin-bottom: 55px;
}

.training-process .process-heading h2 {
    margin: 0 0 18px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1;
    letter-spacing: -2px;
}

.training-process .process-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #ef6c91;
}

.training-process .process-heading p {
    color: #716c76;
    font-size: 16px;
    line-height: 1.7;
}


/* PROCESS GRID */

.training-process .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.training-process .process-card {
    position: relative;
    padding: 32px 25px;
    min-height: 245px;
    border-radius: 22px;
    background: #f8f6fb;
    border: 1px solid rgba(40, 30, 55, 0.06);
    transition: transform 0.3s ease,
                background 0.3s ease;
}

.training-process .process-card:hover {
    transform: translateY(-7px);
    background: #f1ecff;
}

.training-process .process-card > span {
    position: absolute;
    top: 20px;
    right: 22px;
    color: #c2bdc8;
    font-size: 12px;
    font-weight: 700;
}

.training-process .process-card > i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 15px;
    background: #ffffff;
    color: #7b4dff;
    font-size: 19px;
    box-shadow: 0 8px 20px rgba(40, 25, 70, 0.07);
}

.training-process .process-card h3 {
    margin: 0 0 10px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 21px;
    color: #211c27;
}

.training-process .process-card p {
    margin: 0;
    color: #77717c;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   TRAINING WHY SECTION
========================================================= */

.why-section {
    background: #f8f6fb;
}

.why-section .why-title {
    margin-bottom: 50px;
}

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

.why-card {
    padding: 30px 25px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(30, 20, 45, 0.06);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.why-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(30, 20, 45, 0.09);
}

.why-card > i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 14px;
    background: #f0eaff;
    color: #7b4dff;
}

.why-card h3 {
    margin: 0 0 10px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
    color: #211c27;
}

.why-card p {
    margin: 0;
    color: #77717c;
    font-size: 13px;
    line-height: 1.7;
}


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

.training-page-cta {
    padding: 100px 0;
}


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

@media (max-width: 1100px) {

    .training-hero-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .training-hero-content {
        max-width: 750px;
    }

    .training-hero-visual {
        max-width: 650px;
        margin: 0 auto;
    }

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

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

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

}


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

@media (max-width: 768px) {

    .training-hero {
        min-height: auto;
        padding: 80px 0 70px;
    }

    .training-hero-content h1 {
        font-size: 54px;
        letter-spacing: -2.5px;
    }

    .training-hero-content .hero-description {
        font-size: 16px;
    }

    .training-hero-visual {
        min-height: 480px;
        transform: scale(0.9);
        transform-origin: top center;
        margin-bottom: -35px;
    }

    .training-main-card {
        width: 300px;
        height: 390px;
        left: 50%;
        transform: translateX(-50%) rotate(-3deg);
    }

    .training-ai-card {
        width: 140px;
        height: 120px;
        right: 0;
    }

    .training-data-card {
        width: 145px;
        height: 115px;
        right: 0;
        bottom: 45px;
    }

    .training-code-card {
        width: 140px;
        height: 105px;
        left: 5px;
        bottom: 10px;
    }

    .training-floating-text {
        right: 10px;
        bottom: 175px;
        transform: scale(0.85);
        transform-origin: right center;
    }

    .training-intro-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .training-intro-right h2 {
        font-size: 40px;
    }

    .training-programs-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .training-program-grid {
        grid-template-columns: 1fr;
    }

    .training-process .process-grid {
        grid-template-columns: 1fr;
    }

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

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .training-hero-content h1 {
        font-size: 45px;
    }

    .training-hero-content .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .training-hero-content .hero-buttons .button {
        justify-content: center;
    }

    .training-hero-visual {
        min-height: 420px;
        transform: scale(0.78);
        margin-left: -10%;
        margin-right: -10%;
        margin-bottom: -90px;
    }

    .training-main-card {
        width: 275px;
        height: 350px;
    }

    .training-ai-card {
        width: 125px;
        height: 105px;
    }

    .training-data-card {
        width: 130px;
        height: 100px;
    }

    .training-code-card {
        width: 125px;
        height: 95px;
    }

    .training-floating-text {
        display: none;
    }

    .training-card-overlay strong {
        font-size: 25px;
    }

    .training-programs-heading h2 {
        font-size: 42px;
    }

    .training-program-content h3 {
        font-size: 22px;
    }

    .training-program-image {
        height: 210px;
    }

    .training-intro-right h2 {
        font-size: 35px;
    }

    /* =========================================================
   WORK PAGE
========================================================= */

/* ================= WORK HERO ================= */

.work-page-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 110px 0 100px;
    background:
        radial-gradient(circle at 75% 25%, rgba(170, 120, 255, 0.16), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(255, 120, 180, 0.12), transparent 28%),
        #f8f7fb;
}

.work-hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 70px;
}

.work-hero-content {
    max-width: 650px;
}

.work-hero-content h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.98;
    letter-spacing: -4px;
    margin: 20px 0 30px;
    color: #18151d;
}

.work-hero-content h1 .highlight {
    color: #7655e8;
}

.work-hero-content h1 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #e85c91;
}

.work-hero-content .hero-description {
    max-width: 570px;
}


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

.work-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.work-glow-one {
    width: 280px;
    height: 280px;
    background: rgba(133, 91, 245, 0.14);
    top: 60px;
    right: 8%;
}

.work-glow-two {
    width: 200px;
    height: 200px;
    background: rgba(244, 105, 157, 0.12);
    bottom: 30px;
    left: 45%;
}


/* ================= HERO PROJECT ================= */

.work-hero-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-project-image {
    width: 440px;
    height: 430px;
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    transform: rotate(2deg);
    box-shadow: 0 30px 80px rgba(30, 20, 50, 0.18);
    background: #ddd;
}

.hero-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-project-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 90px 30px 30px;
    background: linear-gradient(
        transparent,
        rgba(15, 10, 25, 0.9)
    );
    color: white;
}

.hero-project-overlay span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.hero-project-overlay strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    line-height: 1.1;
}

.hero-project-card {
    position: absolute;
    right: 5px;
    bottom: 40px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 22px;
    border-radius: 18px;
    background: white;
    box-shadow: 0 20px 50px rgba(30, 20, 50, 0.15);
}

.hero-project-card > i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1eaff;
    color: #7655e8;
}

.hero-project-card strong,
.hero-project-card span {
    display: block;
}

.hero-project-card strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
}

.hero-project-card span {
    font-size: 12px;
    color: #77717f;
}


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

.work-intro {
    background: #ffffff;
}

.work-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 100px;
    align-items: end;
    margin-top: 35px;
}

.work-intro-grid h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -3px;
    margin: 0;
}

.work-intro-grid h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #7655e8;
}

.work-intro-grid p {
    color: #706a78;
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}


/* ================= PROJECT SECTION ================= */

.projects-section {
    background: #f7f5fa;
}

.projects-section .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 65px;
}

.projects-section .section-heading h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 65px);
    line-height: 1;
    letter-spacing: -3px;
    margin: 15px 0 0;
}

.projects-section .section-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #e45c92;
}

.projects-section .section-heading > p {
    max-width: 350px;
    color: #77717f;
    line-height: 1.7;
}


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

.project-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 470px;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 45px;
    box-shadow: 0 15px 45px rgba(30, 20, 50, 0.07);
}

.project-card.project-reverse {
    grid-template-columns: 1fr 1fr;
}

.project-card.project-reverse .project-image {
    order: 2;
}

.project-card.project-reverse .project-content {
    order: 1;
}


/* ================= PROJECT IMAGE ================= */

.project-image,
.project-visual {
    position: relative;
    min-height: 470px;
    overflow: hidden;
}

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

.project-card:hover .project-image img {
    transform: scale(1.06);
}

.project-number {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.92);
    color: #17131d;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}


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

.project-content {
    padding: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #7655e8;
    margin-bottom: 17px;
}

.project-content h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(30px, 3vw, 45px);
    line-height: 1.05;
    letter-spacing: -2px;
    margin: 0 0 22px;
    color: #1a1620;
}

.project-content p {
    color: #716b78;
    line-height: 1.8;
    max-width: 500px;
    margin-bottom: 25px;
}


/* ================= PROJECT TAGS ================= */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.project-tags span {
    padding: 8px 13px;
    border: 1px solid #e4e0e8;
    border-radius: 30px;
    color: #5e5865;
    font-size: 12px;
    background: #faf9fb;
}


/* ================= PROJECT LINK ================= */

.project-content .text-link {
    width: fit-content;
    color: #18151d;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
}

.project-content .text-link i {
    transition: transform 0.3s ease;
}

.project-content .text-link:hover {
    color: #7655e8;
}

.project-content .text-link:hover i {
    transform: translateX(5px);
}


/* ================= DARK SOFTWARE PROJECT ================= */

.project-dark {
    background: #17131d;
    color: white;
}

.project-dark .project-content h3 {
    color: white;
}

.project-dark .project-content p {
    color: #aaa4b2;
}

.project-dark .project-category {
    color: #c3a9ff;
}

.project-dark .project-tags span {
    color: #d3ced9;
    border-color: #3b3543;
    background: #211d27;
}

.project-dark .project-content .text-link {
    color: white;
}

.project-dark .project-content .text-link:hover {
    color: #c3a9ff;
}


/* ================= SOFTWARE VISUAL ================= */

.project-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(128, 86, 240, 0.45), transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(239, 89, 146, 0.3), transparent 30%),
        #17131d;
}

.software-window {
    width: 72%;
    min-height: 270px;
    padding: 25px;
    border-radius: 18px;
    background: #24202b;
    box-shadow: 0 25px 70px rgba(0,0,0,0.4);
}

.software-dots {
    display: flex;
    gap: 7px;
    margin-bottom: 35px;
}

.software-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #716a7c;
}

.software-lines {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.software-lines span {
    display: block;
    height: 10px;
    border-radius: 20px;
    background: #4a4354;
}

.software-lines .line-large {
    width: 85%;
}

.software-lines .line-medium {
    width: 65%;
}

.software-lines .line-small {
    width: 40%;
}


/* ================= TECHNOLOGY ================= */

.technology-section {
    background: white;
}

.technology-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 70px;
    align-items: end;
    margin: 30px 0 55px;
}

.technology-heading h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -3px;
    margin: 0;
}

.technology-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #7655e8;
}

.technology-heading p {
    color: #716b78;
    line-height: 1.8;
}


/* ================= TECHNOLOGY GRID ================= */

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

.technology-card {
    min-height: 190px;
    padding: 28px;
    border: 1px solid #e9e5ed;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.35s ease;
}

.technology-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(30, 20, 50, 0.08);
    border-color: #d6c9ee;
}

.technology-card > i {
    font-size: 25px;
    color: #7655e8;
    margin-bottom: 20px;
}

.technology-card strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
    margin-bottom: 7px;
}

.technology-card span {
    font-size: 13px;
    color: #817a88;
}


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

@media (max-width: 1000px) {

    .work-hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .work-hero-content {
        max-width: 750px;
    }

    .work-hero-visual {
        min-height: 430px;
    }

    .work-intro-grid {
        gap: 50px;
    }

    .project-content {
        padding: 45px;
    }

    .technology-heading {
        gap: 40px;
    }

}


@media (max-width: 768px) {

    .work-page-hero {
        padding: 80px 0;
    }

    .work-hero-content h1 {
        font-size: 50px;
        letter-spacing: -2.5px;
    }

    .work-hero-visual {
        min-height: 390px;
    }

    .hero-project-image {
        width: 90%;
        height: 360px;
    }

    .hero-project-card {
        right: 0;
        bottom: 20px;
    }

    .work-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .projects-section .section-heading {
        display: block;
    }

    .projects-section .section-heading > p {
        margin-top: 25px;
    }

    .project-card,
    .project-card.project-reverse {
        grid-template-columns: 1fr;
    }

    .project-card.project-reverse .project-image,
    .project-card.project-reverse .project-content {
        order: initial;
    }

    .project-image,
    .project-visual {
        min-height: 320px;
    }

    .project-content {
        padding: 38px 28px;
    }

    .technology-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

}


@media (max-width: 520px) {

    .work-page-hero {
        padding: 65px 0;
    }

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

    .work-hero-content .hero-description {
        font-size: 15px;
    }

    .work-hero-visual {
        min-height: 330px;
    }

    .hero-project-image {
        width: 100%;
        height: 300px;
        border-radius: 24px;
    }

    .hero-project-card {
        right: -5px;
        bottom: 5px;
        padding: 12px 15px;
    }

    .hero-project-card > i {
        width: 35px;
        height: 35px;
    }

    .hero-project-card strong {
        font-size: 18px;
    }

    .hero-project-card span {
        font-size: 10px;
    }

    .project-content {
        padding: 30px 22px;
    }

    .project-content h3 {
        font-size: 30px;
    }

    .project-image,
    .project-visual {
        min-height: 270px;
    }

    .software-window {
        width: 82%;
    }

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

}
}
/* =========================================================
   WORK PAGE
========================================================= */

/* ================= WORK HERO ================= */

.work-page-hero {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.12), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(236, 72, 153, 0.10), transparent 30%),
        #faf9ff;
}

.work-hero-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 2;
}

.work-hero-content {
    max-width: 700px;
}

.work-hero-content h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(3.5rem, 6vw, 6.2rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    margin: 20px 0 28px;
    color: #17151f;
}

.work-hero-content h1 .highlight {
    color: #7657e8;
}

.work-hero-content h1 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #ef4b91;
}

.work-hero-content .hero-description {
    max-width: 600px;
    font-size: 1.08rem;
    line-height: 1.8;
    color: #666273;
}


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

.work-hero-content .hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 35px;
}


/* ================= HERO GLOWS ================= */

.work-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.work-glow-one {
    width: 280px;
    height: 280px;
    background: rgba(124, 92, 246, 0.10);
    top: -100px;
    right: 18%;
}

.work-glow-two {
    width: 200px;
    height: 200px;
    background: rgba(244, 114, 182, 0.10);
    bottom: -80px;
    left: 8%;
}


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

.work-hero-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-project-image {
    position: relative;
    width: min(100%, 500px);
    height: 420px;
    overflow: hidden;
    border-radius: 32px;
    background: #191720;
    box-shadow: 0 30px 80px rgba(30, 20, 60, 0.18);
    transform: rotate(2deg);
}

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

.hero-project-image:hover img {
    transform: scale(1.06);
}

.hero-project-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 80px 30px 30px;
    color: #fff;
    background: linear-gradient(
        to top,
        rgba(10, 8, 20, 0.9),
        rgba(10, 8, 20, 0)
    );
}

.hero-project-overlay span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
    opacity: 0.75;
}

.hero-project-overlay strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.7rem;
    line-height: 1.15;
}


/* ================= HERO FLOATING CARD ================= */

.hero-project-card {
    position: absolute;
    right: -15px;
    bottom: 45px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 50px rgba(30, 20, 60, 0.15);
    backdrop-filter: blur(15px);
}

.hero-project-card > i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f1edff;
    color: #7657e8;
}

.hero-project-card strong,
.hero-project-card span {
    display: block;
}

.hero-project-card strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.35rem;
}

.hero-project-card span {
    margin-top: 3px;
    font-size: 0.78rem;
    color: #777282;
}


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

.work-intro {
    background: #ffffff;
}

.work-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;
    align-items: end;
    margin-top: 35px;
}

.work-intro-grid h2 {
    max-width: 750px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2.7rem, 5vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 0;
    color: #181620;
}

.work-intro-grid h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #7657e8;
}

.work-intro-grid p {
    margin: 0;
    color: #6e6978;
    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================================
   PROJECTS SECTION
========================================================= */

.projects-section {
    background: #f8f7fb;
}

.projects-section .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 65px;
}

.projects-section .section-heading h2 {
    margin: 15px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.projects-section .section-heading h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #ef4b91;
}

.projects-section .section-heading > p {
    max-width: 360px;
    margin: 0;
    color: #77717f;
    line-height: 1.7;
}


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

.project-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 500px;
    margin-bottom: 40px;
    overflow: hidden;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 12px 45px rgba(35, 25, 60, 0.07);
}

.project-card.project-reverse {
    grid-template-columns: 0.9fr 1.1fr;
}

.project-card.project-reverse .project-image {
    order: 2;
}

.project-card.project-reverse .project-content {
    order: 1;
}


/* ================= PROJECT IMAGE ================= */

.project-image {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: #ddd;
}

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

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

.project-number {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1c1925;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    backdrop-filter: blur(10px);
}


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

.project-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px;
}

.project-category {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #7657e8;
}

.project-content h3 {
    margin: 0 0 20px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #1b1922;
}

.project-content p {
    max-width: 520px;
    margin: 0;
    color: #706b79;
    font-size: 1rem;
    line-height: 1.8;
}


/* ================= PROJECT TAGS ================= */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0;
}

.project-tags span {
    padding: 8px 13px;
    border: 1px solid #e6e2eb;
    border-radius: 50px;
    background: #faf9fc;
    color: #66606f;
    font-size: 0.78rem;
    font-weight: 600;
}


/* ================= PROJECT LINK ================= */

.project-content .text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: #1b1922;
    text-decoration: none;
    font-weight: 700;
    transition: gap 0.3s ease;
}

.project-content .text-link:hover {
    gap: 15px;
}


/* =========================================================
   DARK SOFTWARE PROJECT
========================================================= */

.project-dark {
    background: #17151f;
    color: #fff;
}

.project-dark .project-content h3 {
    color: #fff;
}

.project-dark .project-content p {
    color: #b9b4c1;
}

.project-dark .project-category {
    color: #b49aff;
}

.project-dark .project-tags span {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #d4d0da;
}

.project-dark .text-link {
    color: #fff;
}


/* =========================================================
   SOFTWARE VISUAL
========================================================= */

.project-visual {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background:
        radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.35), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.25), transparent 35%),
        #111016;
}

.software-window {
    width: 90%;
    max-width: 500px;
    min-height: 320px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: #1d1b25;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.software-dots {
    display: flex;
    gap: 7px;
    margin-bottom: 40px;
}

.software-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #777;
}

.software-lines {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.software-lines span {
    display: block;
    height: 13px;
    border-radius: 10px;
    background: #34313e;
}

.software-lines .line-large {
    width: 90%;
}

.software-lines .line-medium {
    width: 65%;
}

.software-lines .line-small {
    width: 40%;
}


/* =========================================================
   TECHNOLOGY SECTION
========================================================= */

.technology-section {
    background: #ffffff;
}

.technology-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    align-items: end;
    gap: 60px;
    margin: 25px 0 50px;
}

.technology-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.technology-heading h2 em {
    font-family: "Instrument Serif", serif;
    color: #7657e8;
    font-weight: 400;
}

.technology-heading p {
    margin: 0;
    color: #706b79;
    line-height: 1.8;
}


/* ================= TECHNOLOGY GRID ================= */

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

.technology-card {
    min-height: 180px;
    padding: 28px;
    border: 1px solid #ebe8f0;
    border-radius: 22px;
    background: #fbfafc;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.technology-card:hover {
    transform: translateY(-7px);
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(40, 30, 70, 0.09);
}

.technology-card i {
    display: block;
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: #7657e8;
}

.technology-card strong {
    display: block;
    margin-bottom: 7px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.15rem;
}

.technology-card span {
    color: #77717f;
    font-size: 0.85rem;
}


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

@media (max-width: 1100px) {

    .work-hero-container {
        gap: 40px;
    }

    .project-content {
        padding: 45px;
    }

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

}


@media (max-width: 850px) {

    .work-page-hero {
        padding: 80px 0;
    }

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

    .work-hero-content {
        text-align: center;
        margin: 0 auto;
    }

    .work-hero-content .availability,
    .work-hero-content .hero-small {
        justify-content: center;
        text-align: center;
    }

    .work-hero-content .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .work-hero-content .hero-buttons {
        justify-content: center;
    }

    .work-hero-visual {
        min-height: 430px;
    }

    .work-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .projects-section .section-heading {
        display: block;
    }

    .projects-section .section-heading > p {
        margin-top: 20px;
    }

    .project-card,
    .project-card.project-reverse {
        grid-template-columns: 1fr;
    }

    .project-card.project-reverse .project-image,
    .project-card.project-reverse .project-content {
        order: initial;
    }

    .project-image,
    .project-visual {
        min-height: 380px;
    }

    .technology-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}


@media (max-width: 600px) {

    .work-page-hero {
        min-height: auto;
        padding: 65px 0;
    }

    .work-hero-content h1 {
        font-size: 3.2rem;
    }

    .work-hero-content .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .work-hero-content .hero-buttons .button {
        width: 100%;
        justify-content: center;
    }

    .work-hero-visual {
        min-height: 350px;
    }

    .hero-project-image {
        height: 330px;
        border-radius: 24px;
    }

    .hero-project-card {
        right: 0;
        bottom: 10px;
    }

    .hero-project-overlay {
        padding: 70px 20px 22px;
    }

    .hero-project-overlay strong {
        font-size: 1.35rem;
    }

    .work-intro-grid h2 {
        font-size: 2.7rem;
    }

    .projects-section .section-heading h2 {
        font-size: 2.7rem;
    }

    .project-content {
        padding: 35px 25px;
    }

    .project-content h3 {
        font-size: 2rem;
    }

    .project-image,
    .project-visual {
        min-height: 300px;
    }

    .project-visual {
        padding: 25px;
    }

    .software-window {
        width: 100%;
        min-height: 230px;
    }

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

    .technology-card {
        min-height: auto;
    }

}


/* =========================================================
   IMAGE FALLBACK / CONSISTENCY
========================================================= */

.project-image img,
.hero-project-image img {
    object-position: center;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.project-card:focus-within,
.technology-card:focus-within {
    outline: 3px solid rgba(118, 87, 232, 0.25);
    outline-offset: 3px;
}


/* =========================================================
   SMOOTH ANIMATION
========================================================= */

@media (prefers-reduced-motion: no-preference) {

    .hero-project-image {
        animation: workHeroFloat 5s ease-in-out infinite;
    }

    @keyframes workHeroFloat {

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

        50% {
            transform: rotate(2deg) translateY(-8px);
        }

    }

}
/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 0;
    background: #f7f5ff;
}

.contact-hero-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 2;
}

.contact-hero-content {
    max-width: 650px;
}

.contact-hero-content h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.02;
    margin: 20px 0;
    color: #11111a;
    letter-spacing: -3px;
}

.contact-hero-content h1 .highlight {
    color: #7657e8;
}

.contact-hero-content h1 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #7657e8;
}

.hero-small {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #7657e8;
    margin-top: 25px;
}

.hero-description {
    font-size: 17px;
    line-height: 1.8;
    color: #666675;
    max-width: 600px;
}


/* =========================================================
   CONTACT HERO GLOW
========================================================= */

.contact-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    pointer-events: none;
}

.contact-glow-one {
    width: 450px;
    height: 450px;
    background: rgba(120, 87, 232, 0.16);
    top: -150px;
    right: -100px;
}

.contact-glow-two {
    width: 300px;
    height: 300px;
    background: rgba(0, 200, 160, 0.12);
    bottom: -100px;
    left: -80px;
}


/* =========================================================
   CONTACT QUICK LINKS
========================================================= */

.contact-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.contact-quick-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 50px;
    background: white;
    color: #22222d;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(20, 20, 40, 0.08);
    transition: 0.3s ease;
}

.contact-quick-links a:hover {
    transform: translateY(-3px);
}

.contact-quick-links i {
    color: #7657e8;
}


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

.contact-hero-visual {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-circle {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    padding: 18px;
    background: linear-gradient(
        135deg,
        #7657e8,
        #a78bfa,
        #5eead4
    );
    box-shadow: 0 30px 80px rgba(118, 87, 232, 0.25);
    animation: contactFloat 5s ease-in-out infinite;
}

.contact-circle-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #17151f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.contact-circle-inner i {
    font-size: 50px;
    margin-bottom: 20px;
    color: #a78bfa;
}

.contact-circle-inner strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 30px;
}

.contact-circle-inner span {
    margin-top: 10px;
    font-size: 13px;
    color: #c9c6d5;
}

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

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


/* =========================================================
   FLOATING CARDS
========================================================= */

.contact-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(20, 20, 40, 0.13);
    font-weight: 700;
    color: #22222d;
}

.contact-floating-card i {
    color: #7657e8;
    font-size: 20px;
}

.contact-card-one {
    top: 45px;
    left: 10px;
}

.contact-card-two {
    top: 170px;
    right: -5px;
}

.contact-card-three {
    bottom: 45px;
    left: 35px;
}


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

.contact-section {
    background: #ffffff;
}

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

.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: start;
}

.contact-info h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.1;
    margin: 20px 0;
    color: #15151d;
}

.contact-info h2 em {
    font-family: "Instrument Serif", serif;
    color: #7657e8;
    font-weight: 400;
}

.contact-info > p {
    color: #6d6d7b;
    line-height: 1.8;
    font-size: 16px;
    max-width: 520px;
}


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

.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7657e8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-label span {
    width: 30px;
    height: 2px;
    background: #7657e8;
    display: inline-block;
}


/* =========================================================
   CONTACT INFO LIST
========================================================= */

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 35px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 18px;
    border-radius: 18px;
    background: #f7f6fb;
    text-decoration: none;
    color: #17171f;
    transition: 0.3s ease;
}

.contact-info-item:hover {
    transform: translateX(5px);
    background: #efecff;
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #7657e8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-item span {
    display: block;
    color: #888795;
    font-size: 12px;
    margin-bottom: 5px;
}

.contact-info-item strong {
    font-size: 14px;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.contact-social {
    margin-top: 35px;
}

.contact-social > span {
    font-size: 13px;
    color: #777784;
}

.contact-social > div {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.contact-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f0eef8;
    color: #33333e;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s ease;
}

.contact-social a:hover {
    background: #7657e8;
    color: white;
    transform: translateY(-3px);
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form-wrapper {
    padding: 40px;
    background: #ffffff;
    border: 1px solid #e9e7ef;
    border-radius: 25px;
    box-shadow: 0 25px 70px rgba(25, 20, 50, 0.08);
}

.contact-form-header span {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #7657e8;
}

.contact-form-header h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 32px;
    margin: 10px 0;
    color: #17171f;
}

.contact-form-header p {
    color: #777784;
    line-height: 1.6;
}


/* =========================================================
   FORM ROW
========================================================= */

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


/* =========================================================
   FORM GROUP
========================================================= */

.form-group {
    margin-top: 22px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #33333d;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dedce6;
    background: #faf9fc;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: #22222b;
    outline: none;
    transition: 0.3s ease;
}

.form-group input,
.form-group select {
    height: 50px;
}

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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #7657e8;
    background: white;
    box-shadow: 0 0 0 4px rgba(118, 87, 232, 0.08);
}


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

.form-submit {
    border: none;
    cursor: pointer;
    margin-top: 25px;
}

.form-note {
    margin-top: 15px;
    font-size: 12px;
    color: #888793;
}

.form-note i {
    margin-right: 5px;
    color: #7657e8;
}


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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s ease;
}

.primary-button {
    background: #7657e8;
    color: white;
}

.primary-button:hover {
    background: #6042d1;
    transform: translateY(-3px);
}

.secondary-button {
    border: 1px solid #d9d6e2;
    color: #22222b;
    background: white;
}


/* =========================================================
   CONTACT SERVICES
========================================================= */

.contact-services {
    background: #f7f6fb;
}

.contact-services-title {
    max-width: 850px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.1;
    margin: 25px 0 50px;
    color: #17171f;
}

.contact-services-title em {
    font-family: "Instrument Serif", serif;
    color: #7657e8;
    font-weight: 400;
}

.contact-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.contact-service-card {
    padding: 28px;
    border-radius: 20px;
    background: white;
    text-decoration: none;
    color: #17171f;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    transition: 0.3s ease;
    box-shadow: 0 10px 35px rgba(20, 20, 40, 0.05);
}

.contact-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(20, 20, 40, 0.1);
}

.contact-service-card i {
    font-size: 28px;
    color: #7657e8;
    margin-bottom: 25px;
}

.contact-service-card strong {
    font-size: 17px;
    margin-bottom: 10px;
}

.contact-service-card span {
    color: #777784;
    font-size: 13px;
    line-height: 1.6;
}


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

.cta-section {
    padding: 100px 0;
    background: #ffffff;
}

.cta-box {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 90px 30px;
    border-radius: 30px;
    background: #17151f;
    color: white;
}

.cta-box > p:first-child {
    color: #a78bfa;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cta-box h2 {
    position: relative;
    z-index: 2;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 6vw, 70px);
    margin: 15px 0;
}

.cta-box h2 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    color: #a78bfa;
}

.cta-text {
    position: relative;
    z-index: 2;
    max-width: 550px;
    margin: 0 auto 30px;
    color: #c8c5d1;
    line-height: 1.7;
}

.white-button {
    position: relative;
    z-index: 2;
    background: white;
    color: #17151f;
}

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

.cta-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.decoration-one {
    width: 300px;
    height: 300px;
    background: rgba(118, 87, 232, 0.25);
    top: -150px;
    left: -80px;
}

.decoration-two {
    width: 250px;
    height: 250px;
    background: rgba(94, 234, 212, 0.15);
    bottom: -120px;
    right: -60px;
}


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

@media (max-width: 1000px) {

    .contact-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-hero-content {
        max-width: 750px;
        margin: auto;
    }

    .contact-hero-content .availability,
    .hero-small {
        justify-content: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-quick-links {
        justify-content: center;
    }

    .contact-hero-visual {
        min-height: 400px;
    }

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

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


@media (max-width: 700px) {

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

    .contact-hero {
        padding: 80px 0;
    }

    .contact-hero-content h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .contact-circle {
        width: 280px;
        height: 280px;
    }

    .contact-circle-inner i {
        font-size: 35px;
    }

    .contact-circle-inner strong {
        font-size: 24px;
    }

    .contact-floating-card {
        padding: 11px 14px;
        font-size: 12px;
    }

    .contact-card-one {
        left: 0;
    }

    .contact-card-two {
        right: 0;
    }

    .contact-card-three {
        left: 10px;
    }

    .contact-form-wrapper {
        padding: 25px 20px;
    }

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

    .contact-service-grid {
        grid-template-columns: 1fr;
    }

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

    .cta-box {
        padding: 70px 20px;
    }
}
/* =========================================================
   COMPETITIONS NAVIGATION
========================================================= */

.competition-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.competition-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5c8a;
    display: inline-block;
    animation: competitionPulse 1.8s infinite;
}

@keyframes competitionPulse {

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

    50% {
        transform: scale(1.7);
        opacity: .5;
    }

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

}


/* =========================================================
   MOBILE COMPETITION LINK
========================================================= */

.mobile-competition-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.mobile-competition-link span {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .6;
}


/* =========================================================
   COMPETITION HOMEPAGE PREVIEW
========================================================= */

.competition-preview {
    position: relative;
    overflow: hidden;
}

.competition-preview-box {
    position: relative;
    min-height: 430px;
    border-radius: 30px;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;

    padding: 70px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(151, 71, 255, .20),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(255, 91, 145, .14),
            transparent 35%
        ),
        #111118;

    color: white;
}


/* CONTENT */

.competition-preview-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.competition-badge {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    margin-bottom: 22px;
}

.competition-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: .55;
    margin-bottom: 10px;
}

.competition-preview-content h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(60px, 8vw, 110px);
    line-height: .85;
    margin: 0 0 28px;
    letter-spacing: -5px;
}

.competition-preview-content h2 em {
    display: block;
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -2px;
}

.competition-preview-content > p:not(.competition-eyebrow) {
    max-width: 500px;
    font-size: 16px;
    line-height: 1.7;
    opacity: .7;
    margin-bottom: 30px;
}


/* VISUAL */

.competition-preview-visual {
    position: relative;
    height: 320px;

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

.competition-year {
    position: absolute;

    font-family: "Space Grotesk", sans-serif;
    font-size: 240px;
    font-weight: 700;

    line-height: 1;

    opacity: .07;
    letter-spacing: -20px;
}

.competition-symbol {
    width: 190px;
    height: 190px;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

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

    font-size: 70px;

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

    backdrop-filter: blur(12px);

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

.competition-preview-visual span {
    position: absolute;

    bottom: 15px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 14px;
    letter-spacing: 7px;

    opacity: .45;
}

@keyframes competitionFloat {

    0% {
        transform: translateY(0) rotate(0deg);
    }

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

    100% {
        transform: translateY(0) rotate(0deg);
    }

}


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

@media (max-width: 800px) {

    .competition-preview-box {
        grid-template-columns: 1fr;
        padding: 45px 30px;
    }

    .competition-preview-visual {
        height: 230px;
    }

    .competition-year {
        font-size: 150px;
    }

    .competition-symbol {
        width: 130px;
        height: 130px;
        font-size: 50px;
    }

    .competition-preview-content h2 {
        font-size: 65px;
    }

}
/* =========================================================
   SMART CHILD AWARENESS PROGRAM
========================================================= */

.awareness-section {
    position: relative;
    overflow: hidden;
    background: #f7f7f4;
}

.awareness-bg-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.awareness-shape-one {
    width: 420px;
    height: 420px;
    top: 5%;
    right: -180px;
    background: rgba(0, 0, 0, 0.035);
}

.awareness-shape-two {
    width: 300px;
    height: 300px;
    bottom: 10%;
    left: -160px;
    background: rgba(0, 0, 0, 0.025);
}


/* HEADING */

.awareness-heading {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 70px;
}

.awareness-eyebrow {
    display: block;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
    opacity: 0.55;
}

.awareness-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.awareness-heading h2 em {
    display: block;
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.awareness-intro p {
    margin: 0;
    max-width: 580px;
    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    line-height: 1.8;
    opacity: 0.7;
}


/* INFORMATION CARDS */

.awareness-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-bottom: 50px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.awareness-info-card {
    min-height: 190px;
    padding: 30px;
    background: #fff;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.awareness-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.awareness-info-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
}

.awareness-info-icon i {
    font-size: 18px;
}

.awareness-info-card > span {
    display: block;
    margin-bottom: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.45;
}

.awareness-info-card strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 17px;
    line-height: 1.35;
}


/* MAIN CARD */

.awareness-main-card {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    min-height: 580px;
    margin-bottom: 110px;
    background: #111;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.awareness-main-content {
    padding: 75px;
    position: relative;
    z-index: 2;
}

.awareness-main-content h3 {
    max-width: 650px;
    margin: 20px 0 25px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.awareness-main-content h3 em {
    display: block;
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.awareness-main-content > p {
    max-width: 650px;
    margin-bottom: 38px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.68;
}


/* POINTS */

.awareness-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 35px;
}

.awareness-points div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
}

.awareness-points i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    font-size: 10px;
}


/* VISUAL */

.awareness-main-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.awareness-main-visual::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
}

.awareness-main-visual::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
}

.awareness-circle {
    position: relative;
    z-index: 2;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.awareness-circle i {
    font-size: 58px;
    margin-bottom: 15px;
}

.awareness-circle span {
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
}

.awareness-floating-card {
    position: absolute;
    z-index: 4;
    bottom: 70px;
    right: 50px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    color: #111;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.awareness-floating-card i {
    font-size: 20px;
}

.awareness-floating-card strong,
.awareness-floating-card span {
    display: block;
}

.awareness-floating-card strong {
    font-family: "Space Grotesk", sans-serif;
}

.awareness-floating-card span {
    margin-top: 3px;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    opacity: 0.55;
}


/* HIGHLIGHTS */

.awareness-highlights {
    margin-bottom: 110px;
}

.awareness-highlight-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 45px;
}

.awareness-highlight-title h3 {
    margin: 15px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.awareness-highlight-title h3 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(0,0,0,0.12);
}

.highlight-item {
    padding: 35px 28px;
    border-right: 1px solid rgba(0,0,0,0.12);
    position: relative;
}

.highlight-item:last-child {
    border-right: none;
}

.highlight-item > span {
    display: block;
    margin-bottom: 35px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    opacity: 0.4;
}

.highlight-item i {
    font-size: 23px;
    margin-bottom: 22px;
}

.highlight-item h4 {
    margin: 0 0 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
}

.highlight-item p {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.6;
}


/* GALLERY */

.awareness-gallery-section {
    margin-bottom: 90px;
}

.gallery-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 40px;
}

.gallery-heading h3 {
    margin: 14px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(35px, 4vw, 55px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.gallery-heading h3 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.gallery-heading > p {
    max-width: 420px;
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.6;
}


/* MASONRY-STYLE GALLERY */

.smart-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 14px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background: #ddd;
}

.gallery-item.large {
    grid-row: span 2;
}

.gallery-item.wide {
    grid-column: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px;
    background: linear-gradient(
        transparent 50%,
        rgba(0,0,0,0.65)
    );
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay span {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
}

.gallery-overlay i {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* REPORT */

.awareness-report {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 42px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
}

.report-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 23px;
}

.report-content h3 {
    margin: 8px 0 8px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
}

.report-content h3 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.report-content p {
    margin: 0;
    max-width: 650px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.6;
}

.report-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.3s ease,
                background 0.3s ease;
}

.report-button:hover {
    transform: translateY(-3px);
    background: #333;
}


/* =========================================================
   SMART CHILD — PREMIUM 3D GALLERY
========================================================= */

.awareness-gallery-section {
    position: relative;
    perspective: 1600px;
    margin-bottom: 100px;
}

.gallery-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 55px;
}

.gallery-heading h3 {
    margin: 14px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(35px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.gallery-heading h3 em {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

.gallery-heading > p {
    max-width: 420px;
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.6;
}


/* =========================================================
   3D GALLERY GRID
========================================================= */

.smart-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 24px;

    perspective: 1800px;
}


/* =========================================================
   3D CARD
========================================================= */

.gallery-item {
    position: relative;
    overflow: hidden;

    background: #ddd;

    border-radius: 4px;

    transform-style: preserve-3d;

    transform:
        perspective(1000px)
        rotateX(0deg)
        rotateY(0deg)
        translateZ(0);

    box-shadow:
        0 15px 25px rgba(0, 0, 0, 0.08),
        0 30px 60px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.15s ease-out,
        box-shadow 0.4s ease,
        filter 0.4s ease;

    cursor: pointer;

    will-change: transform;
}


/* LARGE IMAGE */

.gallery-item.large {
    grid-row: span 2;
}


/* WIDE IMAGE */

.gallery-item.wide {
    grid-column: span 2;
}


/* =========================================================
   IMAGE
========================================================= */

.gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
        translateZ(0)
        scale(1);

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1),
        filter 0.5s ease;
}


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

.gallery-item:hover {

    box-shadow:
        0 25px 40px rgba(0, 0, 0, 0.16),
        0 50px 100px rgba(0, 0, 0, 0.13);

    filter: brightness(1.03);
}


.gallery-item:hover img {

    transform:
        translateZ(35px)
        scale(1.08);
}


/* =========================================================
   3D EDGE / DEPTH
========================================================= */

.gallery-item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    border: 1px solid rgba(255,255,255,0.25);

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.05);

    transform: translateZ(45px);
}


/* =========================================================
   LIGHT REFLECTION
========================================================= */

.gallery-item::after {

    content: "";

    position: absolute;

    top: -100%;

    left: -80%;

    width: 50%;

    height: 300%;

    z-index: 4;

    pointer-events: none;

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

    transform:
        rotate(20deg)
        translateZ(60px);

    opacity: 0;

    transition:
        left 0.8s ease,
        opacity 0.4s ease;
}


.gallery-item:hover::after {

    left: 140%;

    opacity: 1;
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gallery-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding: 22px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.75),
            rgba(0,0,0,0.08) 55%,
            transparent
        );

    color: #fff;

    opacity: 0;

    transform: translateZ(55px);

    transition:
        opacity 0.35s ease;
}


.gallery-item:hover .gallery-overlay {

    opacity: 1;
}


/* NUMBER */

.gallery-overlay span {

    font-family: "Space Grotesk", sans-serif;

    font-size: 12px;

    letter-spacing: 0.12em;

    transform: translateZ(20px);
}


/* EXPAND BUTTON */

.gallery-overlay i {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.5);

    border-radius: 50%;

    font-size: 13px;

    backdrop-filter: blur(8px);

    transform:
        translateZ(30px);

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


.gallery-overlay i:hover {

    transform:
        translateZ(40px)
        scale(1.1);

    background: rgba(255,255,255,0.15);
}


/* =========================================================
   3D FLOATING ANIMATION
========================================================= */

.gallery-item:nth-child(1) {
    animation: galleryFloat1 6s ease-in-out infinite;
}

.gallery-item:nth-child(2) {
    animation: galleryFloat2 7s ease-in-out infinite;
}

.gallery-item:nth-child(3) {
    animation: galleryFloat3 6.5s ease-in-out infinite;
}


@keyframes galleryFloat1 {

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

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


@keyframes galleryFloat2 {

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

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


@keyframes galleryFloat3 {

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

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


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(5,5,5,0.94);

    backdrop-filter: blur(15px);

    opacity: 0;

    visibility: hidden;

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


.gallery-lightbox.active {

    opacity: 1;

    visibility: visible;
}


.gallery-lightbox img {

    max-width: 90vw;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 5px;

    box-shadow:
        0 40px 100px rgba(0,0,0,0.6);

    transform:
        perspective(1200px)
        rotateX(0deg)
        rotateY(0deg)
        scale(0.92);

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


.gallery-lightbox.active img {

    transform:
        perspective(1200px)
        rotateX(0deg)
        rotateY(0deg)
        scale(1);
}


.lightbox-close {

    position: absolute;

    top: 25px;

    right: 30px;

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255,255,255,0.35);

    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

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


.lightbox-close:hover {

    transform: rotate(90deg);

    background: rgba(255,255,255,0.1);
}


.lightbox-counter {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 13px;

    letter-spacing: 0.1em;
}


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

@media (max-width: 1000px) {

    .smart-gallery {

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

        grid-auto-rows: 260px;

        gap: 18px;
    }

}


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

@media (max-width: 700px) {

    .gallery-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }


    .smart-gallery {

        grid-template-columns: 1fr;

        grid-auto-rows: 280px;

        gap: 16px;

        perspective: none;
    }


    .gallery-item.large {

        grid-row: span 1;
    }


    .gallery-item.wide {

        grid-column: span 1;
    }


    /* Disable mouse-style 3D on touch screens */

    .gallery-item {

        transform: none !important;

        animation: none !important;

        box-shadow:
            0 12px 25px rgba(0,0,0,0.1);
    }


    .gallery-item img {

        transform: scale(1.02);
    }


    .gallery-overlay {

        opacity: 1;

        transform: none;
    }


    .gallery-item::after {

        display: none;
    }

}

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

@media (max-width: 1000px) {

    .awareness-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    .awareness-main-card {
        grid-template-columns: 1fr;
    }

    .awareness-main-visual {
        min-height: 400px;
    }

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

    .highlight-item:nth-child(2) {
        border-right: none;
    }

    .highlight-item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(0,0,0,0.12);
    }

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

}


@media (max-width: 700px) {

    .awareness-heading {
        margin-bottom: 45px;
    }

    .awareness-info-grid {
        grid-template-columns: 1fr;
    }

    .awareness-info-card {
        min-height: auto;
        padding: 25px;
    }

    .awareness-main-content {
        padding: 40px 25px;
    }

    .awareness-points {
        grid-template-columns: 1fr;
    }

    .awareness-main-visual {
        min-height: 350px;
    }

    .awareness-main-visual::before {
        width: 330px;
        height: 330px;
    }

    .awareness-main-visual::after {
        width: 250px;
        height: 250px;
    }

    .awareness-circle {
        width: 170px;
        height: 170px;
    }

    .awareness-circle i {
        font-size: 40px;
    }

    .awareness-floating-card {
        right: 20px;
        bottom: 25px;
    }

    .awareness-highlight-title,
    .gallery-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

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

    .highlight-item,
    .highlight-item:nth-child(2) {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.12);
    }

    .highlight-item:last-child {
        border-bottom: none;
    }

    .smart-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 260px;
    }

    .gallery-item.large {
        grid-row: span 1;
    }

    .gallery-item.wide {
        grid-column: span 1;
    }

    .gallery-overlay {
        opacity: 1;
    }

    .awareness-report {
        grid-template-columns: 1fr;
        padding: 30px 25px;
    }

    .report-button {
        justify-content: center;
    }

    .gallery-lightbox {
        padding: 15px;
    }

    .gallery-lightbox img {
        max-width: 96vw;
        max-height: 80vh;
    }

}
/* =========================================================
   AWARENESS PROGRAM SERVICE CARD
========================================================= */

.awareness-service-card {

    position: relative;

    display: grid;

    grid-template-columns: auto auto 1fr;

    align-items: center;

    gap: 35px;

    margin-top: 25px;

    padding: 45px;

    background: #111;

    color: #fff;

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.awareness-service-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0,0,0,0.18);
}


/* NUMBER */

.awareness-service-number {

    position: absolute;

    top: 25px;

    right: 30px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 12px;

    letter-spacing: 0.15em;

    opacity: 0.4;
}


/* ICON */

.awareness-service-icon {

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 50%;

    font-size: 28px;

    transition:
        transform 0.4s ease;
}


.awareness-service-card:hover
.awareness-service-icon {

    transform:
        rotate(-8deg)
        scale(1.08);
}


/* CONTENT */

.awareness-service-content {

    max-width: 750px;
}


.awareness-service-content h2 {

    margin: 10px 0 18px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(36px, 4vw, 55px);

    line-height: 1;

    letter-spacing: -0.05em;
}


.awareness-service-content h2 em {

    font-family: "Instrument Serif", serif;

    font-weight: 400;
}


.awareness-service-content p {

    max-width: 680px;

    margin: 0 0 25px;

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

    font-size: 15px;

    line-height: 1.8;

    opacity: 0.65;
}


/* LINK */

.awareness-service-content .text-link {

    color: #fff;
}


@media (max-width: 700px) {

    .awareness-service-card {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 35px 25px;

    }

    .awareness-service-icon {

        width: 60px;

        height: 60px;

        font-size: 22px;

    }

}
/* =========================================================
   SMART CHILD AWARENESS PAGE
   QUADRA FROYN
========================================================= */


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

.awareness-page-hero {

    min-height: 88vh;

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    align-items: center;

    gap: 60px;

    padding: 120px 7% 100px;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(0,0,0,0.06),
            transparent 35%
        ),
        #f7f7f4;
}


/* subtle background circles */

.awareness-page-hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border: 1px solid rgba(0,0,0,0.07);

    border-radius: 50%;

    right: -250px;

    top: -180px;

}


.awareness-page-hero::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border: 1px solid rgba(0,0,0,0.06);

    border-radius: 50%;

    left: -180px;

    bottom: -150px;

}


/* HERO CONTENT */

.awareness-hero-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

}


.awareness-hero-content .section-label {

    margin-bottom: 30px;

}


.awareness-hero-content h1 {

    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(55px, 7vw, 105px);

    line-height: 0.88;

    letter-spacing: -0.065em;

}


.awareness-hero-content h1 em {

    display: block;

    font-family: "Instrument Serif", serif;

    font-size: 0.9em;

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.02em;

}


.awareness-hero-content > p {

    max-width: 650px;

    margin: 40px 0;

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

    font-size: 18px;

    line-height: 1.8;

    opacity: 0.65;

}


/* SCHOOL */

.awareness-school {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 18px 24px;

    border: 1px solid rgba(0,0,0,0.12);

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

    backdrop-filter: blur(10px);

}


.awareness-school > i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #111;

    color: #fff;

}


.awareness-school span {

    display: block;

    margin-bottom: 5px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.16em;

    opacity: 0.45;

}


.awareness-school strong {

    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: 16px;

}


/* =========================================================
   HERO 3D VISUAL
========================================================= */

.awareness-hero-visual {

    position: relative;

    height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;

}


/* MAIN CIRCLE */

.hero-child-icon {

    width: 270px;

    height: 270px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 4;

    border-radius: 50%;

    background: #111;

    color: #fff;

    box-shadow:

        0 30px 70px rgba(0,0,0,0.22),

        inset 0 0 0 1px rgba(255,255,255,0.12);

    transform:

        perspective(900px)

        rotateX(8deg)

        rotateY(-8deg);

    animation: childHeroFloat 5s ease-in-out infinite;

}


.hero-child-icon i {

    font-size: 90px;

}


@keyframes childHeroFloat {

    0%,
    100% {

        transform:
            perspective(900px)
            rotateX(8deg)
            rotateY(-8deg)
            translateY(0);

    }

    50% {

        transform:
            perspective(900px)
            rotateX(-5deg)
            rotateY(8deg)
            translateY(-15px);

    }

}


/* ORBITS */

.hero-orbit {

    position: absolute;

    border: 1px solid rgba(0,0,0,0.14);

    border-radius: 50%;

}


.orbit-one {

    width: 430px;

    height: 430px;

    transform:
        rotateX(68deg)
        rotateZ(15deg);

    animation:
        orbitRotate 18s linear infinite;

}


.orbit-two {

    width: 520px;

    height: 520px;

    transform:
        rotateX(68deg)
        rotateZ(-15deg);

    animation:
        orbitRotateReverse 25s linear infinite;

}


@keyframes orbitRotate {

    from {
        transform:
            rotateX(68deg)
            rotateZ(0deg);
    }

    to {
        transform:
            rotateX(68deg)
            rotateZ(360deg);
    }

}


@keyframes orbitRotateReverse {

    from {
        transform:
            rotateX(68deg)
            rotateZ(360deg);
    }

    to {
        transform:
            rotateX(68deg)
            rotateZ(0deg);
    }

}


/* FLOATING WORDS */

.awareness-hero-visual > span {

    position: absolute;

    z-index: 5;

    padding: 9px 15px;

    background: #fff;

    border: 1px solid rgba(0,0,0,0.1);

    box-shadow:
        0 12px 25px rgba(0,0,0,0.08);

    font-family: "Space Grotesk", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.18em;

}


.awareness-hero-visual > span:nth-of-type(1) {

    top: 80px;

    right: 20px;

}


.awareness-hero-visual > span:nth-of-type(2) {

    bottom: 120px;

    left: 30px;

}


.awareness-hero-visual > span:nth-of-type(3) {

    top: 230px;

    left: -10px;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.awareness-introduction {

    background: #fff;

}


.awareness-intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: start;

    margin-top: 50px;

}


.awareness-intro-grid h2 {

    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(40px, 5vw, 70px);

    line-height: 0.98;

    letter-spacing: -0.055em;

}


.awareness-intro-grid h2 em {

    display: block;

    font-family: "Instrument Serif", serif;

    font-weight: 400;

}


.awareness-intro-grid p {

    margin: 0;

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

    font-size: 17px;

    line-height: 1.9;

    opacity: 0.65;

}


/* =========================================================
   TOPICS
========================================================= */

.awareness-topics {

    background: #f7f7f4;

}


.awareness-topics-grid {

    display: grid;

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

    gap: 1px;

    margin-top: 55px;

    background: rgba(0,0,0,0.1);

    border: 1px solid rgba(0,0,0,0.1);

}


.awareness-topic {

    min-height: 310px;

    padding: 35px;

    position: relative;

    background: #fff;

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

}


.awareness-topic:hover {

    transform:
        translateY(-10px);

    z-index: 2;

    box-shadow:
        0 30px 60px rgba(0,0,0,0.12);

}


.awareness-topic > span {

    display: block;

    margin-bottom: 65px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 12px;

    opacity: 0.35;

}


.awareness-topic > i {

    font-size: 25px;

    margin-bottom: 25px;

}


.awareness-topic h3 {

    margin: 0 0 12px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 21px;

}


.awareness-topic p {

    margin: 0;

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

    font-size: 14px;

    line-height: 1.7;

    opacity: 0.55;

}


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

.awareness-gallery {

    background: #fff;

}


.gallery-title-row {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin: 35px 0 55px;

}


.gallery-title-row h2 {

    margin: 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(45px, 5vw, 75px);

    line-height: 0.9;

    letter-spacing: -0.06em;

}


.gallery-title-row h2 em {

    font-family: "Instrument Serif", serif;

    font-weight: 400;

}


.gallery-title-row p {

    max-width: 420px;

    margin: 0;

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

    font-size: 15px;

    line-height: 1.7;

    opacity: 0.55;

}


/* =========================================================
   3D PHOTO GRID
========================================================= */

.smart-gallery {

    display: grid;

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

    grid-auto-rows: 300px;

    gap: 22px;

    perspective: 1600px;

}


.gallery-item {

    position: relative;

    overflow: hidden;

    cursor: pointer;

    background: #ddd;

    border-radius: 3px;

    transform-style: preserve-3d;

    box-shadow:

        0 15px 30px rgba(0,0,0,0.08),

        0 30px 70px rgba(0,0,0,0.06);

    transition:

        transform 0.15s ease-out,

        box-shadow 0.4s ease;

}


.gallery-item.large {

    grid-row: span 2;

}


.gallery-item.wide {

    grid-column: span 2;

}


.gallery-item img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:

        transform 0.8s cubic-bezier(.2,.7,.2,1);

}


.gallery-item:hover img {

    transform:
        scale(1.08);

}


.gallery-item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    border: 1px solid rgba(255,255,255,0.3);

    transform:
        translateZ(40px);

}


.gallery-item::after {

    content: "";

    position: absolute;

    width: 60%;

    height: 250%;

    top: -80%;

    left: -100%;

    z-index: 4;

    pointer-events: none;

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

    transform:
        rotate(20deg)
        translateZ(60px);

    transition:
        left 0.9s ease;

}


.gallery-item:hover::after {

    left: 150%;

}


/* OVERLAY */

.gallery-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding: 22px;

    color: #fff;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.7),
            transparent 55%
        );

    opacity: 0;

    transform:
        translateZ(50px);

    transition:
        opacity 0.35s ease;

}


.gallery-item:hover .gallery-overlay {

    opacity: 1;

}


.gallery-overlay span {

    font-family: "Space Grotesk", sans-serif;

    font-size: 12px;

    letter-spacing: 0.15em;

}


.gallery-overlay i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.5);

    border-radius: 50%;

    backdrop-filter: blur(8px);

}


/* =========================================================
   REPORT
========================================================= */

.awareness-report-section {

    background: #f7f7f4;

}


.awareness-report-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 65px;

    overflow: hidden;

    background: #111;

    color: #fff;

}


.awareness-report-card::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 50%;

    right: -180px;

    top: -200px;

}


.awareness-report-card h2 {

    max-width: 700px;

    margin: 15px 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(38px, 5vw, 65px);

    line-height: 0.95;

    letter-spacing: -0.05em;

}


.awareness-report-card h2 em {

    font-family: "Instrument Serif", serif;

    font-weight: 400;

}


.awareness-report-card p {

    max-width: 650px;

    margin: 0;

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

    font-size: 15px;

    line-height: 1.7;

    opacity: 0.6;

}


.awareness-report-card .button {

    position: relative;

    z-index: 2;

    flex-shrink: 0;

}


/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.gallery-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(0,0,0,0.94);

    backdrop-filter: blur(18px);

    opacity: 0;

    visibility: hidden;

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

}


.gallery-lightbox.active {

    opacity: 1;

    visibility: visible;

}


.gallery-lightbox img {

    max-width: 90vw;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 4px;

    box-shadow:
        0 40px 100px rgba(0,0,0,0.6);

    transform:
        scale(0.88);

    transition:
        transform 0.4s ease;

}


.gallery-lightbox.active img {

    transform:
        scale(1);

}


.lightbox-close {

    position: absolute;

    top: 25px;

    right: 30px;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.35);

    border-radius: 50%;

    background: transparent;

    color: #fff;

    cursor: pointer;

    font-size: 18px;

    transition:
        transform 0.3s ease;

}


.lightbox-close:hover {

    transform:
        rotate(90deg);

}


.lightbox-counter {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform:
        translateX(-50%);

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 12px;

    letter-spacing: 0.15em;

}


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

@media (max-width: 1000px) {

    .awareness-page-hero {

        grid-template-columns: 1fr;

        min-height: auto;

        padding-top: 100px;

    }


    .awareness-hero-visual {

        height: 450px;

    }


    .awareness-intro-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .awareness-topics-grid {

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

    }


    .smart-gallery {

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

    }

}


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

@media (max-width: 700px) {

    .awareness-page-hero {

        padding:
            90px 25px 70px;

    }


    .awareness-hero-content h1 {

        font-size:
            clamp(48px, 15vw, 72px);

    }


    .awareness-hero-content > p {

        font-size: 16px;

    }


    .awareness-school {

        width: 100%;

        box-sizing: border-box;

    }


    .awareness-hero-visual {

        height: 360px;

    }


    .hero-child-icon {

        width: 190px;

        height: 190px;

    }


    .hero-child-icon i {

        font-size: 65px;

    }


    .orbit-one {

        width: 290px;

        height: 290px;

    }


    .orbit-two {

        width: 350px;

        height: 350px;

    }


    .awareness-hero-visual > span:nth-of-type(1) {

        right: 0;

        top: 35px;

    }


    .awareness-hero-visual > span:nth-of-type(2) {

        left: 0;

        bottom: 60px;

    }


    .awareness-hero-visual > span:nth-of-type(3) {

        left: 0;

        top: 150px;

    }


    .awareness-intro-grid {

        gap: 30px;

    }


    .awareness-topics-grid {

        grid-template-columns: 1fr;

    }


    .awareness-topic {

        min-height: auto;

    }


    .gallery-title-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .smart-gallery {

        grid-template-columns: 1fr;

        grid-auto-rows: 270px;

        gap: 15px;

        perspective: none;

    }


    .gallery-item.large {

        grid-row: span 1;

    }


    .gallery-item.wide {

        grid-column: span 1;

    }


    .gallery-item {

        transform: none !important;

    }


    .gallery-overlay {

        opacity: 1;

    }


    .awareness-report-card {

        flex-direction: column;

        align-items: flex-start;

        padding: 40px 25px;

    }


    .awareness-report-card .button {

        width: 100%;

        justify-content: center;

    }

}
/* =========================================================
   MOBILE MENU FIX
   ========================================================= */

.menu-button {
    display: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 23px;
    color: #171717;
    padding: 8px;
    z-index: 1002;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;

    width: min(85%, 360px);
    height: 100vh;

    background: #ffffff;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 90px 28px 40px;

    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.15);

    z-index: 1001;

    overflow-y: auto;

    transition: right 0.35s ease;
}

/* OPEN STATE */
.mobile-menu.open {
    right: 0;
}

/* CLOSE BUTTON */
.close-menu {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 50%;

    background: #f2f2f2;

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

    cursor: pointer;

    font-size: 19px;
    color: #171717;
}

/* MOBILE LINKS */
.mobile-menu a {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 15px 14px;

    border-radius: 12px;

    text-decoration: none;

    color: #171717;

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

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

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

.mobile-menu a:hover,
.mobile-menu a.active {
    background: #f2efff;
    color: #5b36d6;
    transform: translateX(4px);
}


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

@media (max-width: 768px) {

    .desktop-nav {
        display: none !important;
    }

    .navbar .nav-button {
        display: none;
    }

    .menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar {
        padding: 14px 20px;
    }

}


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

@media (max-width: 480px) {

    .navbar {
        padding: 12px 15px;
    }

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

    .mobile-menu a {
        font-size: 17px;
        padding: 14px 12px;
    }

}
/* =====================================================
   FORCE DESKTOP LAYOUT TEST
===================================================== */

@media (min-width: 1101px) {

    .hero-container {
        display: grid !important;
        grid-template-columns: 1.05fr 0.95fr !important;
        align-items: center !important;
    }

    .desktop-nav {
        display: flex !important;
    }

    .navbar .nav-button {
        display: inline-flex !important;
    }

    .menu-button {
        display: none !important;
    }

    .hero-content {
        display: block !important;
        text-align: left !important;
    }

    .hero-buttons {
        justify-content: flex-start !important;
    }

    .hero-mini-stats {
        justify-content: flex-start !important;
    }

    .hero-visual {
        display: grid !important;
        place-items: center !important;
    }

    .container {
        width: min(1180px, calc(100% - 40px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* =====================================================
   DESKTOP PAGE LAYOUT
===================================================== */

@media (min-width: 1101px) {

    /* Main sections */
    .container,
    .hero-container {
        width: min(1240px, calc(100% - 80px));
        margin-left: auto;
        margin-right: auto;
    }

    /* Hero must be two columns */
    .hero-container {
        display: grid !important;
        grid-template-columns: 1.05fr 0.95fr !important;
        gap: 80px !important;
        align-items: center !important;
    }

    /* Left side */
    .hero-content {
        max-width: 680px;
        text-align: left !important;
    }

    /* Right side */
    .hero-visual {
        width: 100%;
        min-height: 580px;
        display: grid !important;
        place-items: center !important;
    }

    /* Hero heading */
    .hero h1 {
        font-size: clamp(64px, 6vw, 92px) !important;
    }

    /* Buttons stay left */
    .hero-buttons {
        justify-content: flex-start !important;
    }

    /* Stats stay left */
    .hero-mini-stats {
        justify-content: flex-start !important;
    }

    /* Desktop circle */
    .visual-circle {
        width: 430px;
        height: 430px;
    }
}