/* Added during the Vercel migration. Kept at the top because the original
   stylesheet below has unclosed braces, which would swallow rules appended at the end. */
.visually-hidden-translate { display: none !important; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================
   MANSORA CONSULTING SERVICES
   GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
    --mansora-blue: #5c2d85;
    --mansora-blue-dark: #38145c;

    --mansora-purple: #c48b17;
    --mansora-purple-dark: #9a6a0b;

    --mansora-dark: #221634;
    --mansora-dark-blue: #2a1844;

    --mansora-text: #221634;
    --mansora-muted: #5e5269;

    --mansora-white: #ffffff;
    --mansora-light: #fffaf1;
    --mansora-border: #e1d7e8;

    --mansora-gradient:
        linear-gradient(
            135deg,
            #5c2d85 0%,
            #4a2370 50%,
            #c48b17 100%
        );

    --mansora-gradient-horizontal:
        linear-gradient(
            90deg,
            #5c2d85 0%,
            #c48b17 100%
        );

    --mansora-soft-gradient:
        linear-gradient(
            135deg,
            rgba(92, 45, 133, 0.08),
            rgba(196, 139, 23, 0.08)
        );

    --shadow-small:
        0 8px 25px rgba(92, 45, 133, 0.08);

    --shadow-medium:
        0 15px 45px rgba(92, 45, 133, 0.12);

    --shadow-large:
        0 25px 70px rgba(34, 22, 52, 0.16);
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    background: var(--mansora-white);
    color: var(--mansora-text);
    line-height: 1.7;
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   MANSORA PREMIUM TYPOGRAPHY
   ========================================================= */

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: "Manrope", sans-serif;
       line-height: 1.15;
       color: var(--mansora-dark);
       letter-spacing: -0.8px;
   }
   
   h1 {
       font-size: clamp(48px, 6vw, 78px);
       font-weight: 800;
       letter-spacing: -2px;
   }
   
   h2 {
       font-size: clamp(38px, 5vw, 60px);
       font-weight: 800;
       letter-spacing: -1.5px;
   }
   
   h3 {
       font-size: clamp(24px, 3vw, 30px);
       font-weight: 750;
       letter-spacing: -0.6px;
   }
   
   h4 {
       font-size: 22px;
       font-weight: 700;
   }
   
   p {
       color: var(--mansora-muted);
   }
   
   /* =========================================================
      SECTION HEADINGS
      ========================================================= */
   
   .section-heading h2 {
       position: relative;
       display: inline-block;
   
       margin-bottom: 25px;
   
       font-family: "Manrope", sans-serif;
       font-size: clamp(38px, 5vw, 60px);
       font-weight: 800;
       letter-spacing: -1.5px;
   
       background:
           linear-gradient(
               135deg,
               #6b6d71 0%,
               #dcd2e3 50%,
               #d7d7d8 100%
           );
   
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   /* Small gradient line underneath headings */
   
   .section-heading h2::after {
       content: "";
   
       display: block;
   
       width: 65px;
       height: 4px;
   
       margin-top: 16px;
   
       border-radius: 50px;
   
       background:
           linear-gradient(
               90deg,
               #e3d9ea,
               #bebebe
           );
   
       box-shadow:
           0 5px 15px rgba(92, 45, 133, 0.20);
   }
   
   /* Centered headings */
   
   .section-heading.centered h2::after {
       margin-left: auto;
       margin-right: auto;
   }
   
   /* =========================================================
      SECTION LABELS
      ========================================================= */
   
   .section-label {
       display: inline-flex;
       align-items: center;
       gap: 9px;
   
       margin-bottom: 18px;
   
       color: var(--mansora-purple);
   
       font-family: "Manrope", sans-serif;
       font-size: 13px;
       font-weight: 800;
   
       letter-spacing: 2.5px;
       text-transform: uppercase;
   }
   
   /* Small dot before labels */
   
   .section-label::before {
       content: "";
   
       width: 7px;
       height: 7px;
   
       border-radius: 50%;
   
       background:
           linear-gradient(
               135deg,
               #bec2c9,
               #9f99a9
           );
   
       box-shadow:
           0 0 0 5px rgba(196, 139, 23, 0.08);
   }

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

header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

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

    border-bottom:
        1px solid rgba(237, 230, 242, 0.8);

    box-shadow:
        0 5px 25px rgba(34, 22, 52, 0.04);

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

nav {
    width: min(1200px, 92%);
    min-height: 82px;

    margin: 0 auto;

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

    gap: 30px;
}


/* =========================================================
   MANSORA NAVBAR BRAND
   ========================================================= */

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

    gap: 10px;

    font-family: "Manrope", sans-serif;
    font-weight: 800;

    white-space: nowrap;
    text-decoration: none;

    transition:
        gap 0.45s ease,
        transform 0.45s ease;
}

.brand-main {
    font-size: 27px;
    font-weight: 800;

    background: var(--mansora-gradient);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    transition:
        font-size 0.45s ease,
        transform 0.45s ease;
}

.brand-service {
    font-size: 14px;

    color: var(--mansora-muted);

    font-weight: 700;

    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        width 0.45s ease;
}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

nav div {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 27px;
}

nav div a {
    position: relative;

    color: #475467;

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

    padding: 8px 0;

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

nav div a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background: var(--mansora-gradient-horizontal);

    transition:
        width 0.3s ease;
}

nav div a:hover {
    color: var(--mansora-purple);

    transform:
        translateY(-1px);
}

nav div a:hover::after {
    width: 100%;
}


/* =========================================================
   NAVBAR SCROLL STATE
   ========================================================= */

header.navbar-scrolled {
    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 8px 30px rgba(34, 22, 52, 0.10);
}

header.navbar-scrolled .brand-logo {
    gap: 0;
}

header.navbar-scrolled .brand-main {
    font-size: 23px;
}

header.navbar-scrolled .brand-service {
    opacity: 0;

    transform:
        translateX(-15px);

    width: 0;

    overflow: hidden;
}


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

main {
    min-height: 70vh;
}


/* =========================================================
   GENERAL SECTION
   ========================================================= */

section {
    position: relative;

    padding: 100px 0;
}

.container {
    width: min(1200px, 92%);

    margin: 0 auto;
}


/* =========================================================
   GRADIENT TEXT
   ========================================================= */

.gradient-text {
    background: var(--mansora-gradient);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


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

/* =========================================================
   PREMIUM MANSORA BUTTONS
   ========================================================= */

   .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 0 30px;

    border-radius: 14px;
    border: none;

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

    cursor: pointer;
    text-decoration: none;

    position: relative;
    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background-position 0.5s ease;
}

/* ---------------------------------------------------------
   PRIMARY BUTTON
   --------------------------------------------------------- */

.btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #5c2d85 0%,
            #4a2370 50%,
            #c48b17 100%
        );

    background-size: 200% 200%;
    background-position: 0% 50%;

    box-shadow:
        0 10px 25px rgba(92, 45, 133, 0.25),
        0 6px 18px rgba(196, 139, 23, 0.18);
}

/* Soft shine across the button */

.btn-primary::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}

/* Hover */

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

    background-position: 100% 50%;

    box-shadow:
        0 16px 35px rgba(92, 45, 133, 0.30),
        0 12px 28px rgba(196, 139, 23, 0.25);
}

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

/* ---------------------------------------------------------
   OUTLINE BUTTON
   --------------------------------------------------------- */

.btn-outline {
    color: var(--mansora-purple);

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

    border: 1px solid rgba(196, 139, 23, 0.25);

    box-shadow:
        0 8px 22px rgba(92, 45, 133, 0.08);
}

.btn-outline:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #505764,
            #c48b17
        );

    border-color: transparent;

    transform: translateY(-4px);

    box-shadow:
        0 15px 32px rgba(92, 45, 133, 0.25),
        0 10px 25px rgba(193, 188, 202, 0.2);
}

/* ---------------------------------------------------------
   LIGHT BUTTON — USED ON HERO
   --------------------------------------------------------- */

.btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 0 30px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.08)
        );

    border: 1px solid rgba(255, 255, 255, 0.40);

    color: #ffffff;

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

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

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);

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

.btn-light:hover {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f9f4fc
        );

    color: var(--mansora-purple);

    transform: translateY(-4px);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.20);
}

/* ---------------------------------------------------------
   BUTTON PRESS EFFECT
   --------------------------------------------------------- */

.btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* ---------------------------------------------------------
   HERO BUTTON SIZING
   --------------------------------------------------------- */

.hero-buttons .btn {
    min-width: 190px;
}
/* =========================================================
   CONSULTING IMAGE SECTION FOUNDATION
   ========================================================= */

.image-section {
    position: relative;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white;
}

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

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(34, 22, 52, 0.82),
            rgba(53, 56, 62, 0.6),
            rgba(204, 195, 219, 0.68)
        );

    z-index: 0;
}

.image-section > * {
    position: relative;
    z-index: 1;
}


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

.hero {
    position: relative;

    min-height: 780px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: white;
}


/* HERO BACKGROUND */

.hero-background {
    position: absolute;

    inset: 0;

    background-image:
        url("../images/consult.webp");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    transform:
        scale(1.03);

    z-index: 0;
}


/* HERO OVERLAY */

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            rgba(34, 12, 50, 0.96) 0%,
            rgba(92, 45, 133, 0.82) 45%,
            rgba(196, 139, 23, 0.82) 100%
        );

    z-index: 1;
}

.hero-overlay::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -180px;
    top: 80px;

    border-radius: 50%;

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

    filter:
        blur(10px);
}


/* HERO CONTAINER */

.hero-container {
    position: relative;

    width: min(1200px, 92%);

    margin: 0 auto;

    z-index: 2;
}


/* HERO CONTENT */

.hero-content {
    width: min(760px, 100%);

    padding: 80px 0;

    animation:
        heroSlideIn 1.2s ease-out forwards;
}


/* HERO ENTRANCE */

@keyframes heroSlideIn {

    from {
        opacity: 0;

        transform:
            translateX(-90px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* HERO TAG */

.hero-tag {
    display: inline-block;

    margin-bottom: 25px;

    padding: 8px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.30);

    border-radius: 50px;

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

    backdrop-filter:
        blur(10px);

    color: white;

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

    letter-spacing: 2px;
}


/* HERO TITLE */

.hero-title {
    color: white;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(52px, 7vw, 88px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -2px;

    margin-bottom: 24px;
}

.hero-title span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #efe3f8 45%,
            #e4d4ff 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* HERO SUBTITLE */

.hero-subtitle {
    color: white;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(21px, 3vw, 30px);

    font-weight: 600;

    margin-bottom: 20px;
}


/* HERO DESCRIPTION */

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

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 35px;
}


/* HERO BUTTONS */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;
}

.hero-buttons .btn {
    min-width: 190px;
}


/* LIGHT BUTTON */

.btn-light {
    display: inline-flex;

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

    min-height: 52px;

    padding: 0 27px;

    border-radius: 12px;

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

    border:
        1px solid rgba(255, 255, 255, 0.35);

    color: white;

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

    backdrop-filter:
        blur(10px);

    transition:
        all 0.3s ease;
}

.btn-light:hover {
    background: white;

    color:
        var(--mansora-purple);

    transform:
        translateY(-3px);

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


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

   .hero-logo {
    position: absolute;
    top: 38px;
    right: 5%;
    z-index: 3;

    width: 125px;
    height: 125px;

    padding: 3px;
    border-radius: 50%;

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

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

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        0 0 35px rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(6px);

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

    overflow: hidden;
}

.hero-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 50%;

    filter:
        drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25))
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.18));

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.hero-logo:hover img {
    transform: scale(1.06);

    filter:
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.28));
}

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

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

/* =========================================================
   HERO SCROLL INDICATOR
   ========================================================= */

.hero-scroll {
    position: absolute;

    bottom: 35px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 38px;

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

    animation:
        scrollPulse 1.8s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.35;

        transform:
            scaleY(0.7);
    }

    50% {
        opacity: 1;

        transform:
            scaleY(1);
    }
}


/* =========================================================
   ABOUT MANSORA
   ========================================================= */

.intro-section {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(92, 45, 133, 0.08),
            transparent 30%
        ),
        #ffffff;
}


/* ABOUT GRID */

.intro-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 80px;
}


/* ABOUT IMAGE AREA */

.intro-image {
    position: relative;

    width: 100%;

    isolation: isolate;
}


/* SOFT BLUE/PURPLE GLOW */

.intro-image::before {
    content: "";

    position: absolute;

    width: 85%;
    height: 85%;

    left: -25px;
    top: 35px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            rgba(92, 45, 133, 0.18),
            rgba(196, 139, 23, 0.20)
        );

    filter:
        blur(25px);

    z-index: -2;

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


/* IMAGE FRAME */

.intro-image-frame {
    position: relative;

    width: 100%;

    border-radius: 28px;

    overflow: hidden;

    background:
        #efe9f4;

    box-shadow:
        0 25px 70px rgba(34, 22, 52, 0.16);

    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s ease;
}


/* ABOUT IMAGE — MAN.png */

.intro-image-frame img {
    width: 100%;

    height: 520px;

    object-fit: cover;

    display: block;

    border-radius: 28px;

    position: relative;

    z-index: 2;

    filter:
        grayscale(100%)
        contrast(0.92)
        brightness(1.08);

    opacity: 0.86;

    transform:
        scale(1.02);

    transition:
        filter 0.8s ease,
        opacity 0.8s ease,
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* SOFT WHITE IMAGE LAYER */

.intro-image-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
        );
}


/* BLUE/PURPLE ACCENT */

.image-accent {
    position: absolute;

    width: 180px;
    height: 180px;

    right: -28px;
    bottom: -28px;

    border-radius: 32px;

    background:
        var(--mansora-gradient);

    z-index: -1;

    opacity: 0.9;

    transform:
        rotate(8deg);

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


/* IMAGE HOVER */

.intro-image-frame:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 35px 90px rgba(34, 22, 52, 0.22);
}

.intro-image-frame:hover img {
    filter:
        grayscale(100%)
        contrast(1)
        brightness(1);

    opacity: 1;

    transform:
        scale(1.06);
}


/* ABOUT GLOW ANIMATION */

@keyframes aboutGlow {

    0%,
    100% {
        transform:
            scale(1);

        opacity: 0.75;
    }

    50% {
        transform:
            scale(1.08);

        opacity: 1;
    }
}


/* ACCENT FLOAT */

@keyframes accentFloat {

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

    50% {
        transform:
            rotate(4deg)
            translateY(-8px);
    }
}


/* ABOUT CONTENT */

.intro-content {
    max-width: 560px;
}

.intro-content h2 {
    margin-bottom: 25px;
}

.intro-content p {
    margin-bottom: 20px;

    font-size: 16px;

    line-height: 1.85;
}

.intro-content .btn {
    margin-top: 12px;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-heading {
    max-width: 800px;
}

.section-heading.centered {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.section-label {
    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--mansora-purple);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}

.section-heading h2 {
    margin-bottom: 22px;
}

.section-heading p {
    max-width: 700px;

    font-size: 17px;

    line-height: 1.8;
}


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

.values-section {
    padding: 110px 0;

    background:
        var(--mansora-light);
}

.values-grid {
    display: grid;

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

    gap: 22px;

    margin-top: 55px;
}

.value-card {
    position: relative;

    padding: 35px 28px;

    background: white;

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

    border-radius: 20px;

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

    overflow: hidden;

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

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

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        var(--mansora-gradient);
}

.value-card:hover {
    transform:
        translateY(-10px);

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

.value-number {
    margin-bottom: 25px;

    color:
        var(--mansora-purple);

    font-family:
        "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}

.value-card h3 {
    margin-bottom: 13px;
}

.value-card p {
    font-size: 14px;

    line-height: 1.75;
}


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

.cta-section {
    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background:
        var(--mansora-gradient);

    text-align: center;
}

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

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    left: -150px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);
}

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

    position: absolute;

    width: 450px;
    height: 450px;

    right: -150px;
    bottom: -250px;

    border-radius: 50%;

    background:
        rgba(34, 22, 52, 0.10);
}

.cta-content {
    position: relative;

    z-index: 2;

    max-width: 750px;

    margin: 0 auto;
}

.cta-content .section-label {
    color:
        rgba(255, 255, 255, 0.78);
}

.cta-content h2 {
    color: white;

    margin-bottom: 20px;
}

.cta-content h2 span {
    color:
        #e1d7e8;
}

.cta-content p {
    color:
        rgba(255, 255, 255, 0.82);

    font-size: 17px;

    margin-bottom: 32px;
}


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

footer {
    position: relative;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(92, 45, 133, 0.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(196, 139, 23, 0.20),
            transparent 35%
        ),
        var(--mansora-dark);

    color: white;

    text-align: center;

    padding: 70px 20px;
}

footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--mansora-gradient);
}

footer p {
    margin: 7px 0;

    color:
        #d8c9e3;
}

footer p:first-child {
    font-family:
        "Manrope", sans-serif;

    color: white;

    font-size: 22px;

    font-weight: 800;
}

footer p:nth-child(2) {
    color:
        #e7dcef;

    font-size: 15px;
}

footer p:last-child {
    margin-top: 20px;

    color:
        #b19dc0;

    font-size: 13px;

    letter-spacing: 0.6px;
}


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

@media (max-width: 1050px) {

    nav {
        width:
            min(94%, 1200px);
    }

    nav div {
        gap: 18px;
    }

    nav div a {
        font-size: 13px;
    }
}


@media (max-width: 1000px) {

    .hero {
        min-height: 720px;
    }

    .hero-logo {
        width: 180px;

        top: 35px;
        right: 4%;
    }

    .hero-content {
        width:
            min(680px, 70%);
    }

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


@media (max-width: 850px) {

    nav {
        min-height: 75px;
    }

    nav div {
        gap: 13px;
    }

    nav div a {
        font-size: 12px;
    }

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

        gap: 55px;
    }

    .intro-content {
        max-width: 100%;
    }

    .intro-image {
        max-width: 650px;

        margin: 0 auto;
    }
}


@media (max-width: 700px) {

    header {
        position: relative;
    }

    nav {
        flex-direction: column;

        padding: 20px 0;

        gap: 18px;
    }

    .brand-main {
        font-size: 25px;
    }

    nav div {
        width: 100%;

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px 17px;
    }

    nav div a {
        font-size: 12px;
    }

    section {
        padding: 75px 0;
    }

    .hero {
        min-height: 760px;

        align-items: flex-end;
    }

    .hero-background {
        background-position:
            center;
    }

    .hero-content {
        width: 100%;

        padding:
            80px 0 110px;
    }

    .hero-title {
        font-size:
            clamp(43px, 12vw, 62px);

        letter-spacing:
            -1.5px;
    }

    .hero-subtitle {
        font-size: 20px;
    }

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

    .hero-logo {
        width: 180px;

        top: 25px;
        right: 25px;

        padding: 8px;

        border-radius: 14px;
    }

    .hero-scroll {
        display: none;
    }

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

    .intro-section,
    .values-section,
    .cta-section {
        padding: 80px 0;
    }

    .intro-image-frame img {
        height: 450px;
    }
}


@media (max-width: 480px) {

    nav div {
        gap: 7px 13px;
    }

    nav div a {
        font-size: 11px;
    }

    footer {
        padding:
            55px 18px;
    }

    .hero {
        min-height: 720px;
    }

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

        letter-spacing:
            1.5px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-logo {
        width: 125px;
    }

    .intro-image-frame img {
        height: 390px;
    }

    .image-accent {
        width: 120px;
        height: 120px;

        right: -18px;
        bottom: -18px;
    }
}
/* =========================================================
   ABOUT US PAGE
   ========================================================= */

   .about-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
}

/* About background image */

.about-hero-background {
    position: absolute;
    inset: 0;

    background-image: url("../images/about.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: grayscale(25%);
    transform: scale(1.04);

    z-index: 0;

    animation: aboutBackgroundReveal 1.6s ease-out forwards;
}

/* Professional blue + purple overlay */

.about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            110deg,
            rgba(30, 16, 46, 0.94) 0%,
            rgba(92, 45, 133, 0.78) 48%,
            rgba(196, 139, 23, 0.78) 100%
        );

    z-index: 1;
}

/* Subtle light effect */

.about-hero-overlay::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: 80px;

    border-radius: 50%;

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

    filter: blur(5px);
}


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

.about-hero-content {
    position: relative;

    width: min(1200px, 92%);

    margin: 0 auto;

    z-index: 2;

    max-width: 850px;

    padding: 100px 0;

    animation: aboutContentReveal 1.1s ease-out forwards;
}

.about-hero-label {
    display: inline-block;

    margin-bottom: 24px;

    padding: 9px 17px;

    border: 1px solid rgba(255, 255, 255, 0.30);

    border-radius: 50px;

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

    backdrop-filter: blur(10px);

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.about-hero-content h1 {
    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: clamp(48px, 7vw, 82px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -2.5px;

    margin-bottom: 25px;
}

.about-hero-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #efe3f8,
            #e4d4ff
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-hero-content p {
    max-width: 700px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 17px;

    line-height: 1.85;
}


/* =========================================================
   ABOUT SCROLL INDICATOR
   ========================================================= */

.about-scroll-indicator {
    position: absolute;

    bottom: 35px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    color: rgba(255, 255, 255, 0.70);

    font-size: 10px;

    letter-spacing: 2px;
}

.about-scroll-indicator div {
    width: 1px;

    height: 40px;

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

    animation: aboutScrollPulse 1.8s ease-in-out infinite;
}


/* =========================================================
   ABOUT INTRODUCTION
   ========================================================= */

.about-introduction {
    position: relative;

    padding: 115px 0;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(92, 45, 133, 0.07),
            transparent 30%
        ),
        #ffffff;
}

.about-intro-grid {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    align-items: center;

    gap: 90px;
}

.about-intro-content {
    max-width: 650px;
}

.about-intro-content h2 {
    margin-bottom: 27px;
}

.about-intro-content p {
    font-size: 16px;

    line-height: 1.85;

    margin-bottom: 18px;
}


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

.about-intro-card {
    position: relative;

    min-height: 390px;

    display: flex;

    align-items: flex-end;

    padding: 45px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #5c2d85,
            #4a2370,
            #c48b17
        );

    box-shadow:
        0 25px 65px rgba(92, 45, 133, 0.20);

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

.about-card-glow {
    position: absolute;

    width: 300px;
    height: 300px;

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

    border-radius: 50%;

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

    filter: blur(5px);
}

.about-card-content {
    position: relative;

    z-index: 2;
}

.about-card-content span {
    display: block;

    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.70);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.about-card-content h3 {
    color: #ffffff;

    font-size: 31px;

    margin-bottom: 15px;
}

.about-card-content p {
    color: rgba(255, 255, 255, 0.82);

    font-size: 15px;

    line-height: 1.8;
}


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

.about-values {
    padding: 115px 0;

    background: var(--mansora-light);
}

.about-values-grid {
    display: grid;

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

    gap: 22px;

    margin-top: 60px;
}

.about-value-card {
    position: relative;

    padding: 35px 28px;

    background: #ffffff;

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

    border-radius: 20px;

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

    overflow: hidden;

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

.about-value-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: var(--mansora-gradient);
}

.about-value-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(92, 45, 133, 0.12);
}

.about-value-number {
    display: block;

    margin-bottom: 25px;

    color: var(--mansora-purple);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}

.about-value-card h3 {
    margin-bottom: 13px;
}

.about-value-card p {
    font-size: 14px;

    line-height: 1.75;
}


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

.about-cta {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #5c2d85,
            #4a2370,
            #c48b17
        );

    text-align: center;
}

.about-cta-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(34, 22, 52, 0.12),
            transparent 35%
        );
}

.about-cta-content {
    position: relative;

    z-index: 2;

    max-width: 750px;

    margin: 0 auto;
}

.about-cta-content .section-label {
    color: rgba(255, 255, 255, 0.75);
}

.about-cta-content h2 {
    color: #ffffff;

    margin-bottom: 20px;
}

.about-cta-content h2 span {
    color: #e1d7e8;
}

.about-cta-content p {
    color: rgba(255, 255, 255, 0.82);

    font-size: 17px;

    margin-bottom: 32px;
}


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

@keyframes aboutBackgroundReveal {
    from {
        opacity: 0;
        transform: scale(1.10);
    }

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

@keyframes aboutContentReveal {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }

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

@keyframes aboutScrollPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scaleY(0.65);
    }

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

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

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


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

@media (max-width: 1000px) {

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

    .about-intro-grid {
        gap: 55px;
    }
}

@media (max-width: 800px) {

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

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

    .about-intro-card {
        max-width: 650px;

        margin: 0 auto;
    }
}

@media (max-width: 700px) {

    .about-hero {
        min-height: 700px;
    }

    .about-hero-content {
        padding: 80px 0 100px;
    }

    .about-hero-content h1 {
        font-size: clamp(43px, 12vw, 62px);

        letter-spacing: -1.5px;
    }

    .about-hero-content p {
        font-size: 15px;
    }

    .about-scroll-indicator {
        display: none;
    }

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

    .about-introduction,
    .about-values,
    .about-cta {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {

    .about-hero {
        min-height: 650px;
    }

    .about-hero-label {
        font-size: 9px;

        letter-spacing: 1.5px;
    }

    .about-intro-card {
        min-height: 330px;

        padding: 30px;
    }

    .about-card-content h3 {
        font-size: 26px;
    }
}
/* =========================================================
   ABOUT PAGE — PREMIUM LOWER SECTION ANIMATIONS
   ========================================================= */

/* Smooth entrance for the main About sections */

.about-introduction,
.about-values,
.values-section,
.about-cta {
    position: relative;
    overflow: hidden;
}


/* Soft background decorative glow */

.about-introduction::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -220px;
    top: 80px;

    border-radius: 50%;

    background: rgba(92, 45, 133, 0.07);

    filter: blur(20px);

    pointer-events: none;

    animation: aboutGlowMove 8s ease-in-out infinite;
}


.about-values::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -220px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(196, 139, 23, 0.08);

    filter: blur(20px);

    pointer-events: none;

    animation: aboutGlowMoveReverse 9s ease-in-out infinite;
}


/* =========================================================
   WHO WE ARE ANIMATION
   ========================================================= */

.about-intro-content {
    animation: aboutTextReveal 1s ease-out both;
}

.about-intro-card {
    animation:
        aboutCardReveal 1.1s ease-out both,
        aboutCardFloat 5s ease-in-out 1.2s infinite;
}


/* =========================================================
   VISION / MISSION CARDS
   ========================================================= */

.about-value-card {
    opacity: 0;

    animation: aboutValueReveal 0.8s ease-out forwards;
}

.about-value-card:nth-child(1) {
    animation-delay: 0.15s;
}

.about-value-card:nth-child(2) {
    animation-delay: 0.3s;
}

.about-value-card:nth-child(3) {
    animation-delay: 0.45s;
}

.about-value-card:nth-child(4) {
    animation-delay: 0.6s;
}


/* Premium hover effect */

.about-value-card::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(92, 45, 133, 0.05),
            rgba(196, 139, 23, 0.07)
        );

    opacity: 0;

    transition: opacity 0.4s ease;

    pointer-events: none;
}

.about-value-card:hover::after {
    opacity: 1;
}


/* =========================================================
   CIRI VALUE CARDS
   ========================================================= */

.values-section .value-card {
    opacity: 0;

    animation: valueCardReveal 0.8s ease-out forwards;
}

.values-section .value-card:nth-child(1) {
    animation-delay: 0.1s;
}

.values-section .value-card:nth-child(2) {
    animation-delay: 0.25s;
}

.values-section .value-card:nth-child(3) {
    animation-delay: 0.4s;
}

.values-section .value-card:nth-child(4) {
    animation-delay: 0.55s;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.about-values .section-heading,
.values-section .section-heading {
    animation: headingReveal 0.9s ease-out both;
}


/* =========================================================
   CIRI IN ACTION
   ========================================================= */

.about-cta {
    isolation: isolate;
}

.about-cta-content {
    animation: ctaReveal 1s ease-out both;
}

.about-cta .btn {
    animation: buttonFloat 3s ease-in-out 1.2s infinite;
}


/* Moving light across CTA */

.about-cta::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 700px;

    top: -150px;
    left: -250px;

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

    transform: rotate(25deg);

    filter: blur(15px);

    animation: ctaLightSweep 7s ease-in-out infinite;

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   ANIMATION KEYFRAMES
   ========================================================= */

@keyframes aboutTextReveal {

    from {
        opacity: 0;
        transform: translateX(-55px);
    }

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

}


@keyframes aboutCardReveal {

    from {
        opacity: 0;
        transform: translateX(55px) scale(0.95);
    }

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

}


@keyframes aboutValueReveal {

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

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

}


@keyframes valueCardReveal {

    from {
        opacity: 0;
        transform: translateY(35px) scale(0.97);
    }

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

}


@keyframes headingReveal {

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

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

}


@keyframes ctaReveal {

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

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

}


@keyframes aboutGlowMove {

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

    50% {
        transform: translate(100px, 80px);
    }

}


@keyframes aboutGlowMoveReverse {

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

    50% {
        transform: translate(-100px, -70px);
    }

}


@keyframes buttonFloat {

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

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

}


@keyframes ctaLightSweep {

    0% {
        left: -300px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        left: 110%;
        opacity: 0.8;
    }

    100% {
        left: 110%;
        opacity: 0;
    }

}


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

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

}
/* =========================================================
   PROFESSIONAL FOOTER
   ========================================================= */

   .footer-brand {
    font-family: "Manrope", sans-serif;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 0.5px;

    color: #ffffff;

    margin-bottom: 8px;
}


.footer-tagline {
    color: #e7dcef !important;

    font-size: 15px;

    margin: 0;
}


.footer-values {
    color: #c2aed0 !important;

    font-size: 13px;

    letter-spacing: 1px;

    margin-top: 16px !important;
}

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

   .footer-divider {
    width: 100%;
    height: 1px;
    margin: 30px 0 22px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
}


/* =========================================================
   FOOTER QUICK LINKS
   ========================================================= */

.footer-quick-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px 28px;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* LINKS */

.footer-quick-links a {
    position: relative;

    color: rgba(255,255,255,.62);
    text-decoration: none;

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

    letter-spacing: .5px;

    padding: 6px 0;

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


/* UNDERLINE ANIMATION */

.footer-quick-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #c79ae7;

    transition: width .3s ease;
}


/* HOVER */

.footer-quick-links a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.footer-quick-links a:hover::after {
    width: 100%;
}


/* =========================================================
   SEPARATORS BETWEEN LINKS
   ========================================================= */

.footer-quick-links a:not(:last-child)::before {
    content: "•";

    position: absolute;

    right: -17px;
    top: 50%;

    transform: translateY(-50%);

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

    font-size: 9px;
}


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

@media (max-width: 600px) {

    .footer-divider {
        margin: 25px 0 20px;
    }

    .footer-quick-links {
        gap: 8px 20px;
        padding: 0 10px;
    }

    .footer-quick-links a {
        font-size: 11px;
    }

    .footer-quick-links a:not(:last-child)::before {
        right: -12px;
    }
}

.footer-copyright {
    color: #8f9bb0 !important;

    font-size: 12px;

    margin: 0 !important;

    letter-spacing: 0.3px;
}


@media (max-width: 480px) {

    .footer-brand {
        font-size: 21px;
    }

    .footer-values {
        font-size: 11px;
    }

    .footer-copyright {
        font-size: 11px;
    }

}
/* =========================================================
   ABOUT PAGE — BACK HOME NAVIGATION
   ========================================================= */

   .nav-back-home {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mansora-purple) !important;
    font-weight: 800 !important;
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.nav-back-home::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: var(--mansora-gradient-horizontal);
    transition: width 0.3s ease;
}

.nav-back-home:hover {
    color: var(--mansora-blue) !important;
    transform: translateX(-4px);
}

.nav-back-home:hover::after {
    width: 100%;
}
/* =========================================================
   MANSORA SERVICES PAGE
   ========================================================= */

   .services-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
}

.services-hero-background {
    position: absolute;
    inset: 0;
    background: url("../images/services.webp") center/cover no-repeat;
    transform: scale(1.05);
    animation: servicesBackground 14s ease-in-out infinite alternate;
}

.services-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(30, 16, 46,.95),
        rgba(92, 45, 133,.78),
        rgba(196, 139, 23,.84)
    );
}

.services-hero-content {
    position: relative;
    z-index: 2;
    width: min(900px, 90%);
    padding: 100px 0;
    text-align: center;
    animation: servicesHeroReveal 1s ease forwards;
}

.services-hero-tag {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.services-hero h1 {
    color: white;
    font-size: clamp(55px,8vw,95px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 25px;
}

.services-hero h1 span {
    background: linear-gradient(90deg,#fff,#efe2f8,#eddff7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-hero p {
    max-width: 720px;
    margin: auto;
    color: rgba(255,255,255,.87);
    font-size: 18px;
    line-height: 1.8;
}

.services-hero-line {
    width: 80px;
    height: 4px;
    margin: 30px auto 0;
    border-radius: 50px;
    background: white;
}

.services-hero-scroll {
    position: absolute;
    z-index: 3;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgba(255,255,255,.75);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.services-hero-scroll div {
    width: 1px;
    height: 38px;
    margin: 8px auto 0;
    background: rgba(255,255,255,.7);
    animation: serviceScroll 1.8s ease-in-out infinite;
}


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

.services-intro {
    padding: 110px 0 80px;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(92, 45, 133,.08),
            transparent 30%
        ),
        white;
}

.services-intro-heading {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.services-intro-heading h2 {
    margin-bottom: 25px;
    font-size: clamp(40px,5vw,62px);
}

.services-intro-heading p {
    max-width: 800px;
    margin: 0 auto 18px;
    font-size: 17px;
    line-height: 1.9;
}


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

.services-section {
    padding: 40px 0 120px;
    background: #fffaf1;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
}


/* =========================================================
   FULL WIDTH SERVICE CARDS
   ========================================================= */

.service-card {
    position: relative;
    min-height: 620px;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 40px;
    align-items: center;

    padding: 75px;
    border-radius: 30px;
    overflow: hidden;

    color: white;

    background:
        linear-gradient(
            105deg,
            rgba(28, 14, 42,.94),
            rgba(63, 22, 93,.82),
            rgba(82,45,140,.72)
        ),
        var(--service-image) center/cover no-repeat;

    box-shadow: 0 25px 70px rgba(34, 22, 52,.16);

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

    animation: serviceReveal .9s ease forwards;

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


/* INDIVIDUAL BACKGROUNDS */

.service-card:nth-child(1) {
    --service-image: url("../images/finance.webp");
    animation-delay: .1s;
}

.service-card:nth-child(2) {
    --service-image: url("../images/tax.webp");
    animation-delay: .2s;
}

.service-card:nth-child(3) {
    --service-image: url("../images/management.webp");
    animation-delay: .3s;
}

.service-card:nth-child(4) {
    --service-image: url("../images/consult.webp");
    animation-delay: .4s;
}

.service-card:nth-child(5) {
    --service-image: url("../images/capacity.webp");
    animation-delay: .5s;
}


/* IMAGE DARKENING */

.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(28, 14, 42,.96),
            rgba(40, 14, 59,.80),
            rgba(70,35,125,.55)
        );
    z-index: 0;
}


/* GLOW */

.service-card::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -180px;
    top: -180px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    filter: blur(10px);
    transition: transform .6s ease;
}


/* HOVER */

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 35px 85px rgba(34, 22, 52,.25);
}

.service-card:hover::after {
    transform: scale(1.5);
}


/* =========================================================
   SERVICE NUMBER
   ========================================================= */

.service-number {
    position: relative;
    z-index: 2;

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

    width: 82px;
    height: 82px;

    border-radius: 22px;

    background: linear-gradient(
        135deg,
        #5c2d85,
        #c48b17
    );

    color: white;

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

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


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

.service-card-content {
    position: relative;
    z-index: 2;
}

.service-label {
    display: inline-block;
    margin-bottom: 15px;

    color: #e9d6f6;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.service-card h2 {
    max-width: 900px;
    margin-bottom: 25px;

    color: white;

    font-size: clamp(38px,5vw,64px);
    line-height: 1.1;
}

.service-description {
    max-width: 900px;
    margin-bottom: 20px;

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

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


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

.service-icon {
    position: absolute;
    z-index: 3;
    top: 35px;
    right: 40px;

    width: 60px;
    height: 60px;

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

    border-radius: 18px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);

    backdrop-filter: blur(12px);

    color: white;

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

    transition:
        transform .4s ease,
        background .4s ease;
}

.service-card:hover .service-icon {
    transform: rotate(-6deg) scale(1.1);
    background: rgba(255,255,255,.2);
}


/* =========================================================
   SERVICE LIST
   ========================================================= */

.service-list {
    position: relative;
    z-index: 2;

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

    gap: 12px 18px;

    max-width: 950px;
    margin-top: 30px;
}

.service-list div {
    position: relative;

    padding: 13px 15px 13px 38px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;

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

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

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

    backdrop-filter: blur(8px);

    transition:
        transform .3s ease,
        background .3s ease;
}

.service-list div::before {
    content: "✓";

    position: absolute;
    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #efe3f8;
    font-weight: 800;
}

.service-list div:hover {
    transform: translateX(6px);
    background: rgba(255,255,255,.14);
}


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

.training-heading {
    position: relative;
    z-index: 2;

    margin-top: 25px;
    margin-bottom: 15px;

    color: white;

    font-size: 17px;
    font-weight: 700;
}


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

.services-promise {
    position: relative;
    padding: 120px 0;
    overflow: hidden;

    background: var(--mansora-gradient);

    text-align: center;
}

.services-promise::before,
.services-promise::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.services-promise::before {
    width: 500px;
    height: 500px;
    left: -220px;
    top: -250px;
    background: rgba(255,255,255,.08);
}

.services-promise::after {
    width: 450px;
    height: 450px;
    right: -200px;
    bottom: -260px;
    background: rgba(34, 22, 52,.1);
}

.services-promise-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
    margin: auto;
}

.services-promise .section-label {
    color: rgba(255,255,255,.78);
}

.services-promise h2 {
    color: white;
    font-size: clamp(40px,5vw,64px);
    margin-bottom: 25px;
}

.services-promise h2 span {
    display: block;
    color: #e1d7e8;
}

.services-promise p {
    max-width: 700px;
    margin: auto auto 35px;

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

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

.services-promise .btn-primary {
    background: white;
    color: var(--mansora-purple);

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


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

@keyframes servicesHeroReveal {

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

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

}

@keyframes servicesBackground {

    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1.11);
    }

}

@keyframes serviceReveal {

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

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

}

@keyframes serviceScroll {

    0%,
    100% {
        opacity: .3;
        transform: scaleY(.6);
    }

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

}


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

@media (max-width: 850px) {

    .service-card {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 55px 40px;
    }

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

    .service-number {
        width: 70px;
        height: 70px;
    }

}


@media (max-width: 600px) {

    .services-hero {
        min-height: 560px;
    }

    .services-hero-content {
        padding: 80px 0;
    }

    .services-hero h1 {
        font-size: 52px;
        letter-spacing: -2px;
    }

    .services-hero p {
        font-size: 15px;
    }

    .services-hero-scroll {
        display: none;
    }

    .services-intro {
        padding: 80px 0 60px;
    }

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

    .service-card {
        min-height: 600px;
        padding: 45px 25px;
        border-radius: 22px;
    }

    .service-icon {
        top: 25px;
        right: 25px;
        width: 52px;
        height: 52px;
    }

    .service-card h2 {
        font-size: 36px;
    }

    .service-description {
        font-size: 16px;
    }

    .service-list div {
        font-size: 14px;
    }

    .services-promise {
        padding: 85px 0;
    }

}


@media (max-width: 420px) {

    .service-card {
        padding: 40px 20px;
    }

    .service-card h2 {
        font-size: 31px;
    }

    .service-number {
        width: 62px;
        height: 62px;
        font-size: 21px;
    }

}
/* =========================================================
   MANSORA APPROACH PAGE
/* =========================================================
   APPROACH HERO
========================================================= */

.approach-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #180824;

}


/* =====================================================
   BACKGROUND IMAGE
===================================================== */

.approach-hero-background {

    position: absolute;

    inset: -5%;

    background-image:
        url("../images/approach.webp");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    transform: scale(1.05);

    animation:
        approachBackgroundReveal 1.8s ease-out forwards,
        approachBackgroundMove 16s ease-in-out 1.8s infinite alternate;

    z-index: 0;

}


/* =====================================================
   DARK PREMIUM OVERLAY
===================================================== */

.approach-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(24, 12, 36, 0.88) 0%,
            rgba(28, 14, 42, 0.72) 45%,
            rgba(24, 8, 36, 0.58) 100%
        );

    z-index: 1;

    animation:
        approachOverlayReveal 1.5s ease forwards;

}


/* Additional subtle vignette */

.approach-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(0, 0, 0, 0.48) 100%
        );

    pointer-events: none;

    z-index: 2;

}


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

.approach-hero-content {

    position: relative;

    z-index: 3;

    width: min(900px, 90%);

    text-align: center;

    color: white;

    animation:
        approachContentReveal 1.2s
        cubic-bezier(.22,1,.36,1)
        0.35s both;

}


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

.approach-hero-tag {

    display: inline-block;

    margin-bottom: 22px;

    color: #d4ad62;

    font-family: Arial, sans-serif;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

    text-shadow:
        0 2px 12px rgba(0,0,0,0.65);

}


/* =====================================================
   MAIN TITLE
===================================================== */

.approach-hero h1 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(3.4rem, 8vw, 6.8rem);

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -2px;

    text-shadow:
        0 5px 25px rgba(0,0,0,0.65),
        0 2px 5px rgba(0,0,0,0.45);

}


/* Gold word */

.approach-hero h1 span {

    color: #d4ad62;

    text-shadow:
        0 4px 20px rgba(0,0,0,0.65);

}


/* =====================================================
   DECORATIVE LINE
===================================================== */

.approach-hero-line {

    width: 90px;

    height: 3px;

    margin: 28px auto 24px;

    background: #d4ad62;

    box-shadow:
        0 0 18px rgba(212,173,98,0.45);

    transform-origin: center;

    animation:
        heroLineReveal 1s ease
        1.1s both;

}


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

.approach-hero p {

    margin: 0;

    color: rgba(255,255,255,0.95);

    font-family: Arial, sans-serif;

    font-size:
        clamp(1rem, 2vw, 1.25rem);

    letter-spacing: 1.5px;

    text-shadow:
        0 3px 15px rgba(0,0,0,0.7);

}


/* =====================================================
   SCROLL INDICATOR
===================================================== */

.approach-scroll-indicator {

    position: absolute;

    z-index: 4;

    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: rgba(255,255,255,0.70);

}


.approach-scroll-indicator span {

    display: block;

    width: 1px;

    height: 42px;

    background: #d4ad62;

    animation:
        scrollIndicator 1.8s ease-in-out infinite;

}


.approach-scroll-indicator p {

    margin: 0;

    font-family: Arial, sans-serif;

    font-size: 0.65rem;

    letter-spacing: 2px;

    text-transform: uppercase;

}


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

@keyframes approachBackgroundReveal {

    from {

        opacity: 0;

        transform:
            scale(1.15)
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            scale(1.05)
            translateY(0);

    }

}


@keyframes approachBackgroundMove {

    from {

        background-position:
            center center;

    }

    to {

        background-position:
            54% 46%;

    }

}


@keyframes approachOverlayReveal {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


@keyframes approachContentReveal {

    from {

        opacity: 0;

        transform:
            translateY(45px)
            scale(0.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes heroLineReveal {

    from {

        opacity: 0;

        transform:
            scaleX(0);

    }

    to {

        opacity: 1;

        transform:
            scaleX(1);

    }

}


@keyframes scrollIndicator {

    0%,
    100% {

        opacity: 0.35;

        transform:
            translateY(0);

    }

    50% {

        opacity: 1;

        transform:
            translateY(8px);

    }

}


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

@media (max-width: 650px) {

    .approach-hero {

        min-height: 560px;

    }

    .approach-hero-background {

        background-position: center;

    }

    .approach-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(24, 12, 36,0.84),
                rgba(28, 14, 42,0.76),
                rgba(24, 12, 36,0.88)
            );

    }

    .approach-hero h1 {

        letter-spacing: -1px;

    }

    .approach-hero-tag {

        font-size: 0.65rem;

        letter-spacing: 2.5px;

    }

}


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

.approach-intro {

    position: relative;

    padding: 130px 0 105px;

    background: #ffffff;

    overflow: hidden;

}


/* subtle background light */

.approach-intro::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: -250px;

    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(74, 35, 112,0.08),
            transparent 70%
        );

    pointer-events: none;

}


.approach-intro-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;

    text-align: center;

}


.approach-intro-content h2 {

    font-size:
        clamp(42px, 5vw, 68px);

    line-height: 1.1;

    margin:
        15px 0 25px;

    letter-spacing: -2px;

}


.approach-intro-content p {

    max-width: 750px;

    margin: auto;

    color: #475467;

    font-size: 18px;

    line-height: 1.9;

}


/* =========================================================
   APPROACH PROCESS
========================================================= */

.approach-steps {

    position: relative;

    padding: 100px 0 130px;

    background:
        linear-gradient(
            180deg,
            #fffaf1 0%,
            #ffffff 100%
        );

    overflow: hidden;

}


/* =========================================================
   ANIMATED PROCESS LINE
========================================================= */

.approach-process-line {
    position: absolute;

    top: 520px;
    bottom: 170px;

    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(74, 35, 112,0.25),
            rgba(212,173,98,0.55),
            rgba(74, 35, 112,0.25),
            transparent
        );

    z-index: 0;
}

.approach-process-line::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 3px;

    height: 0;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            #4a2370,
            #d4ad62
        );

    box-shadow:
        0 0 18px rgba(74, 35, 112,0.35);

    animation:
        processLineGrow
        2.5s
        ease-out
        forwards;

}

@keyframes processLineGrow {

    from {
        height: 0;
    }

    to {
        height: 100%;
    }

}


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

.approach-section-heading {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin:
        0 auto 90px;

    text-align: center;

}


.approach-section-heading h2 {

    margin:
        15px 0 20px;

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

    line-height: 1.1;

    letter-spacing: -2px;

}


.approach-section-heading p {

    max-width: 650px;

    margin: auto;

    color: #5e5269;

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   APPROACH STEP CARD
========================================================= */

.approach-step {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 180px 1fr;

    align-items: center;

    gap: 55px;

    max-width: 1000px;

    margin:
        0 auto 45px;

    padding: 55px 60px;

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

    border:
        1px solid rgba(237, 231, 242,0.9);

    border-radius: 30px;

    box-shadow:
        0 15px 50px rgba(34, 22, 52,0.055);

    backdrop-filter:
        blur(10px);

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        box-shadow .55s ease,
        border-color .55s ease;

    overflow: hidden;

}


/* glowing sweep */

.approach-step::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 80%;

    height: 100%;

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

    transform:
        skewX(-20deg);

    transition:
        left .9s ease;

}


.approach-step:hover::before {

    left: 140%;

}


.approach-step:hover {

    transform:
        translateY(-10px)
        scale(1.01);

    border-color:
        rgba(74, 35, 112,0.18);

    box-shadow:
        0 30px 80px rgba(92, 45, 133,0.12);

}


/* =========================================================
   ELEGANT NUMBER
========================================================= */

.approach-step-number {

    position: relative;

    width: 145px;

    height: 145px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6f1fa
        );

    border:
        1px solid rgba(74, 35, 112,0.12);

    box-shadow:
        inset 0 0 0 10px rgba(255,255,255,0.8),
        0 18px 45px rgba(74, 35, 112,0.12);

}


.approach-step-number::before {

    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border:
        1px solid rgba(212,173,98,0.45);

    transform:
        rotate(45deg);

    transition:
        transform .7s ease;

}


.approach-step:hover
.approach-step-number::before {

    transform:
        rotate(225deg);

}


.approach-step-number::after {

    content: "";

    position: absolute;

    width: 9px;

    height: 9px;

    top: 10px;

    right: 24px;

    border-radius: 50%;

    background: #d4ad62;

    box-shadow:
        0 0 15px rgba(212,173,98,0.7);

}


.approach-step-number span {

    font-size: 42px;

    font-weight: 300;

    letter-spacing: -2px;

    color:
        var(--mansora-purple);

}


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

.approach-step-content {

    position: relative;

}


.approach-step-label {

    display: block;

    margin-bottom: 10px;

    color: #d4ad62;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}


.approach-step-content h2 {

    margin:
        0 0 15px;

    color: #1e1028;

    font-size:
        clamp(36px, 4vw, 54px);

    line-height: 1;

    letter-spacing: -1.5px;

}


.approach-step-content p {

    max-width: 680px;

    margin: 0;

    color: #5e5269;

    font-size: 16px;

    line-height: 1.85;

}


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

.approach-step-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 680px;

    margin-top: 28px;

    padding-top: 18px;

    border-top:
        1px solid #eaecf0;

}


.approach-step-footer > span:first-child {

    color: #98a2b3;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.approach-step-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    color: white;

    background:
        var(--mansora-gradient);

    font-size: 18px;

    transition:
        transform .4s ease;

}


.approach-step:hover
.approach-step-arrow {

    transform:
        translateX(8px);

}


/* =========================================================
   STEP REVEAL ANIMATION
========================================================= */

.approach-step {

    opacity: 0;

    transform:
        translateY(60px);

    animation:
        approachStepReveal
        .9s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


.approach-step:nth-of-type(2) {

    animation-delay: .15s;

}


.approach-step:nth-of-type(3) {

    animation-delay: .30s;

}


.approach-step:nth-of-type(4) {

    animation-delay: .45s;

}


.approach-step:nth-of-type(5) {

    animation-delay: .60s;

}


@keyframes approachStepReveal {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 700px) {

    .approach-intro {

        padding:
            85px 0 70px;

    }


    .approach-intro-content h2 {

        font-size: 42px;

        letter-spacing: -1.5px;

    }


    .approach-intro-content p {

        font-size: 16px;

    }


    .approach-steps {

        padding:
            80px 0 90px;

    }


    .approach-section-heading {

        margin-bottom: 60px;

    }


    .approach-section-heading h2 {

        font-size: 40px;

    }


    .approach-process-line {

        display: none;

    }


    .approach-step {

        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 30px;

        padding:
            38px 28px;

        border-radius: 25px;

    }


    .approach-step-number {

        width: 105px;

        height: 105px;

    }


    .approach-step-number span {

        font-size: 34px;

    }


    .approach-step-content h2 {

        font-size: 38px;

    }


    .approach-step-content p {

        font-size: 15px;

    }


    .approach-step-footer {

        align-items: center;

        gap: 15px;

    }


    .approach-step-footer > span:first-child {

        line-height: 1.5;

    }

}


/* =========================================================
   APPROACH STATEMENT
========================================================= */

.approach-statement {

    padding: 120px 0;

    background:
        var(--mansora-gradient);

    text-align: center;

    overflow: hidden;

}


.approach-statement-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;

}


.approach-statement .section-label {

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

}


.approach-statement h2 {

    color: white;

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

    line-height: 1.15;

    margin-bottom: 25px;

}


.approach-statement h2 span {

    display: block;

    color: #e1d7e8;

}


.approach-statement p {

    max-width: 700px;

    margin:
        0 auto 35px;

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

    font-size: 17px;

    line-height: 1.9;

}


.approach-statement .btn-primary {

    background: white;

    color:
        var(--mansora-purple);

}


/* =========================================================
   APPROACH ANIMATION
========================================================= */

@keyframes approachReveal {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 700px) {

    .approach-hero {

        min-height: 520px;

    }

    .approach-hero h1 {

        font-size: 52px;

        letter-spacing: -2px;

    }

    .approach-hero p {

        font-size: 17px;

    }

    .approach-intro {

        padding: 80px 0 60px;

    }

    .approach-step {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 30px 24px;

    }

    .approach-step-number {

        width: 70px;

        height: 70px;

        border-radius: 20px;

        font-size: 22px;

    }

    .approach-step-content h2 {

        font-size: 34px;

    }

    .approach-statement {

        padding: 85px 0;

    }

}
/* =========================================================
   WHY MANSORA — PREMIUM PAGE
   ========================================================= */
/* =========================================================
   WHY MANSORA PAGE
   ========================================================= */

   .why-mansora-page {
    position: relative;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(154, 75, 210, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 42%,
            rgba(158, 85, 210, 0.15),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #221634 0%,
            #1c0d27 42%,
            #170a20 72%,
            #100816 100%
        );
    color: #ffffff;
    overflow: hidden;
}


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

.why-hero {
    min-height: 92vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.why-hero-bg {
    position: absolute;
    inset: 0;

    /* YOUR IMAGE */
    background-image: url("../images/why.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.04);

    animation: whyHeroZoom 14s ease-out forwards;

    /*
       Makes the actual why.png image brighter
       and easier to see.
    */
    filter:
        brightness(1.18)
        contrast(1.02)
        saturate(1.08);

    z-index: 0;
}


/* =========================================================
   BRIGHT CINEMATIC GRADIENT
   ========================================================= */

.why-hero-overlay {
    position: absolute;
    inset: 0;

    background:

        /* Purple atmospheric glow */
        radial-gradient(
            circle at 78% 18%,
            rgba(188, 134, 226, 0.25),
            transparent 36%
        ),

        /* Blue atmospheric glow */
        radial-gradient(
            circle at 20% 58%,
            rgba(170, 101, 219, 0.20),
            transparent 42%
        ),

        /* Soft center gradient */
        linear-gradient(
            110deg,
            rgba(21, 9, 30, 0.52) 0%,
            rgba(28, 12, 40, 0.30) 45%,
            rgba(22, 12, 30, 0.10) 100%
        ),

        /* Bottom fade */
        linear-gradient(
            0deg,
            rgba(24, 12, 36, 0.78) 0%,
            rgba(24, 12, 36, 0.22) 38%,
            transparent 76%
        );

    z-index: 1;
}


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

.why-hero-content {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    width: 90%;

    margin: auto;
    padding-top: 80px;
}

.why-eyebrow,
.why-section-label {
    display: block;

    font-size: 0.72rem;
    letter-spacing: 0.28em;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.82);

    margin-bottom: 28px;
}

.why-hero h1 {
    margin: 0;

    font-size: clamp(4rem, 10vw, 9.5rem);
    line-height: 0.84;

    font-weight: 700;
    letter-spacing: -0.06em;

    color: #ffffff;

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

.why-hero h1 span {
    display: block;

    background:
        linear-gradient(
            110deg,
            #ffffff,
            #efe3f8,
            #ffffff,
            #e9d7f6,
            #ffffff
        );

    background-size: 300% auto;

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

    color: transparent;

    animation:
        whyTitleReveal
        1.4s
        .15s
        cubic-bezier(.16,1,.3,1)
        both,

        whyShimmer
        6s
        1.5s
        linear
        infinite;
}

.why-hero p {
    max-width: 520px;

    margin-top: 40px;

    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;

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

    animation:
        whyFadeUp
        1s
        .55s
        ease
        both;
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.why-scroll-indicator {
    margin-top: 75px;

    display: flex;
    align-items: center;

    gap: 18px;

    font-size: 0.62rem;
    letter-spacing: .2em;

    color: rgba(255, 255, 255, 0.75);

    animation:
        whyFadeUp
        1s
        .8s
        ease
        both;
}

.why-scroll-line {
    width: 75px;
    height: 1px;

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

    position: relative;
    overflow: hidden;
}

.why-scroll-line::after {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    background: #ffffff;

    left: -100%;

    animation:
        whyLineMove
        2.2s
        ease-in-out
        infinite;
}


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

.why-intro {
    max-width: 1000px;

    margin: auto;

    padding: 170px 5% 140px;
}

.why-intro h2 {
    margin: 0;

    font-size: clamp(3rem, 6vw, 6.5rem);

    line-height: .95;

    letter-spacing: -.055em;

    color: #ffffff;
}

.why-intro h2 span {
    opacity: .48;
}

.why-intro p {
    max-width: 620px;

    margin-top: 45px;

    font-size: 1.1rem;

    line-height: 1.9;

    color: rgba(255,255,255,.76);
}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.why-principles {
    position: relative;

    max-width: 1200px;

    margin: auto;

    padding: 60px 5% 150px;
}

.why-progress {
    position: absolute;

    left: 5%;
    top: 0;
    bottom: 0;

    width: 1px;

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

.why-progress-line {
    width: 100%;
    height: 0%;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #dbbdf0,
            #c9a9ff
        );

    transition: height .3s ease;
}

.why-progress-dot {
    position: absolute;

    left: 50%;
    top: 0;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #ffffff;

    transform: translate(-50%, 0);

    box-shadow:
        0 0 12px rgba(255,255,255,.8),
        0 0 35px rgba(176, 140, 210,.5);
}

.why-principle {
    position: relative;

    min-height: 65vh;

    display: grid;

    grid-template-columns: 130px 1fr;

    gap: 60px;

    padding: 120px 0 120px 100px;
}

.why-number {
    font-size: clamp(2rem, 4vw, 4rem);

    font-weight: 300;

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

    opacity: .7;

    letter-spacing: -.05em;

    transition:
        all .8s ease;
}

.why-principle-content {
    max-width: 760px;

    transform: translateY(50px);

    opacity: 0;

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        opacity 1s ease;
}

.why-principle-content > span {
    font-size: .65rem;

    letter-spacing: .24em;

    color: rgba(255,255,255,.72);
}

.why-principle-content h2 {
    margin: 25px 0;

    font-size: clamp(3rem, 6vw, 6.5rem);

    line-height: .92;

    letter-spacing: -.06em;

    font-weight: 600;

    color: #ffffff;
}

.why-principle-content h2 strong {
    display: block;

    font-weight: 600;

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

    transition:
        color .8s ease;
}

.why-principle-content p {
    max-width: 650px;

    font-size: 1.05rem;

    line-height: 1.9;

    color: rgba(255,255,255,.76);
}

.why-principle.why-visible
.why-principle-content {
    transform: translateY(0);

    opacity: 1;
}

.why-principle.why-visible
.why-number {
    opacity: 1;

    transform: translateX(12px);

    color: #ffffff;
}

.why-principle.why-visible
.why-principle-content h2 strong {
    color: rgba(255,255,255,.92);
}


/* =========================================================
   FINAL SECTION
   ========================================================= */

.why-final {
    position: relative;

    min-height: 80vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 120px 5%;

    overflow: hidden;
}

.why-final-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(188, 134, 226,.16),
            rgba(181, 121, 224,.08),
            transparent 70%
        );

    filter: blur(80px);

    animation:
        whyGlow
        7s
        ease-in-out
        infinite
        alternate;
}

.why-final > *:not(.why-final-glow) {
    position: relative;

    z-index: 2;
}

.why-final h2 {
    max-width: 1000px;

    margin: 0;

    font-size: clamp(3.2rem, 7vw, 7rem);

    line-height: .92;

    letter-spacing: -.06em;

    color: #ffffff;
}

.why-final h2 span {
    display: block;

    color: rgba(255,255,255,.45);
}

.why-final p {
    margin: 35px 0;

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

    font-size: 1.1rem;
}

.why-final-button {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 17px 25px;

    color: #ffffff;

    text-decoration: none;

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

    border-radius: 100px;

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

    backdrop-filter: blur(10px);

    transition:
        all .4s ease;
}

.why-final-button span {
    transition:
        transform .4s ease;
}

.why-final-button:hover {
    background: #ffffff;

    color: #0a070d;

    border-color: #ffffff;

    transform: translateY(-4px);
}

.why-final-button:hover span {
    transform: translateX(7px);
}


/* =========================================================
   REVEALS
   ========================================================= */

.reveal-why {
    opacity: 0;

    transform: translateY(70px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}

.reveal-why.why-active {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes whyHeroZoom {

    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1);
    }

}

@keyframes whyTitleReveal {

    from {
        opacity: 0;

        transform: translateY(80px);

        clip-path:
            inset(100% 0 0 0);
    }

    to {
        opacity: 1;

        transform: translateY(0);

        clip-path:
            inset(0 0 0 0);
    }

}

@keyframes whyFadeUp {

    from {
        opacity: 0;

        transform: translateY(30px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}

@keyframes whyShimmer {

    from {
        background-position: 200% center;
    }

    to {
        background-position: -200% center;
    }

}

@keyframes whyLineMove {

    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }

}

@keyframes whyGlow {

    from {
        transform: scale(.8);

        opacity: .4;
    }

    to {
        transform: scale(1.2);

        opacity: .9;
    }

}


/* =========================================================
   TEXT VISIBILITY
   ========================================================= */

.why-mansora-page h1,
.why-mansora-page h2,
.why-mansora-page h3 {
    color: #ffffff;
}

.why-mansora-page .why-eyebrow,
.why-mansora-page .why-section-label,
.why-mansora-page .why-principle-content > span {
    color: rgba(255,255,255,.82);
}

.why-mansora-page .why-hero p {
    color: rgba(255,255,255,.86);
}

.why-mansora-page .why-intro p {
    color: rgba(255,255,255,.76);
}

.why-mansora-page .why-principle-content p {
    color: rgba(255,255,255,.76);
}

.why-mansora-page .why-number {
    color: rgba(255,255,255,.48);
}

.why-mansora-page .why-final p {
    color: rgba(255,255,255,.78);
}

.why-mansora-page .why-scroll-indicator {
    color: rgba(255,255,255,.75);
}

.why-mansora-page .why-final-button {
    color: #ffffff;
}


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

@media (max-width: 768px) {

    .why-hero {
        min-height: 85vh;
    }

    .why-hero-content {
        width: 86%;
    }

    .why-hero h1 {
        font-size: clamp(3.8rem, 17vw, 6rem);
    }

    .why-hero p {
        font-size: .95rem;
    }

    .why-intro {
        padding: 110px 8% 80px;
    }

    .why-intro h2 {
        font-size: 3rem;
    }

    .why-principles {
        padding-left: 8%;
        padding-right: 8%;
    }

    .why-progress {
        left: 4%;
    }

    .why-principle {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 90px 0 90px 35px;
    }

    .why-number {
        font-size: 2rem;
    }

    .why-principle-content h2 {
        font-size: 3.2rem;
    }

    .why-principle-content p {
        font-size: .95rem;
    }

    .why-final {
        min-height: 70vh;
    }

    .why-final h2 {
        font-size: 3.3rem;
    }

}
/* =========================================================
/* =========================================================
   MANSORA — WHO WE SERVE
   PREMIUM LIGHT EDITION
   ========================================================= */

   .who-page {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #faf8fc 0%,
            #ffffff 45%,
            #f8f3fb 100%
        );

    color: #2a1844;
}


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

.who-hero {
    min-height: 92vh;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #eadff2;
}

.who-hero-image {
    position: absolute;
    inset: 0;

    background:
        url("../images/serve1.webp")
        center / cover
        no-repeat;

    transform: scale(1.04);

    filter:
        brightness(.96)
        contrast(1.02)
        saturate(.92);

    animation:
        whoHeroZoom
        16s
        ease-out
        forwards;
}

.who-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(34, 20, 52,.72),
            rgba(34, 20, 52,.38),
            rgba(34, 20, 52,.08)
        ),

        linear-gradient(
            0deg,
            rgba(34, 20, 52,.42),
            transparent 65%
        );
}

.who-hero-content {
    position: relative;

    z-index: 2;

    width: 88%;
    max-width: 1250px;

    margin: auto;

    padding-top: 70px;
}

.who-eyebrow {
    font-size: .68rem;

    letter-spacing: .32em;

    color: #dfc77a;

    margin-bottom: 28px;

    animation:
        whoFadeUp
        .9s
        ease
        both;
}

.who-hero h1 {
    margin: 0;

    font-size:
        clamp(
            4.5rem,
            11vw,
            10rem
        );

    line-height: .82;

    letter-spacing: -.075em;

    font-weight: 700;

    color: #fff;

    animation:
        whoTitleReveal
        1.1s
        cubic-bezier(.16,1,.3,1)
        both;
}

.who-hero h1 span {
    display: block;

    background:
        linear-gradient(
            110deg,
            #ffffff,
            #f2e9f8,
            #dfc77a,
            #ffffff
        );

    background-size: 300% auto;

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

    color: transparent;

    animation:
        whoShimmer
        8s
        linear
        infinite;
}

.who-hero-content > p {
    max-width: 590px;

    margin-top: 42px;

    font-size: 1.08rem;

    line-height: 1.85;

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

    animation:
        whoFadeUp
        .9s
        .35s
        ease
        both;
}

.who-scroll {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 65px;

    font-size: .62rem;

    letter-spacing: .22em;

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

    animation:
        whoFadeUp
        .9s
        .65s
        ease
        both;
}

.who-scroll-line {
    width: 90px;

    height: 1px;

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

    overflow: hidden;

    position: relative;
}

.who-scroll-line::after {
    content: "";

    position: absolute;

    inset: 0;

    background: #dfc77a;

    transform:
        translateX(-100%);

    animation:
        whoLine
        2.5s
        ease-in-out
        infinite;
}


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

.who-intro {
    max-width: 1100px;

    margin: auto;

    padding:
        150px
        7%
        130px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8f3fb
        );

    border-bottom:
        1px solid
        rgba(42, 24, 68,.08);
}

.who-intro-label,
.who-section-label,
.who-final-label {
    font-size: .66rem;

    letter-spacing: .30em;

    color: #b79a4c;

    margin-bottom: 25px;
}

.who-intro h2 {
    margin: 0;

    font-size:
        clamp(
            3.2rem,
            7vw,
            7rem
        );

    line-height: .92;

    letter-spacing: -.065em;

    color: #2a1844;
}

.who-intro h2 span {
    display: block;

    color:
        #8fa0b1;
}

.who-intro p {
    max-width: 670px;

    margin-top: 42px;

    font-size: 1.08rem;

    line-height: 1.9;

    color: #536577;
}


/* =========================================================
   CLIENT JOURNEY
   ========================================================= */

.who-clients {
    position: relative;

    max-width: 1200px;

    margin: auto;

    padding:
        50px
        6%
        150px;

    background:
        #fbf7fd;
}

.who-client-line {
    position: absolute;

    left: 6%;

    top: 0;

    bottom: 0;

    width: 2px;

    background:
        #e5dbec;

    overflow: hidden;
}

.who-client-progress {
    width: 100%;

    height: 0;

    background:
        linear-gradient(
            180deg,
            #c4a95e,
            #9b75b7
        );

    transition:
        height .35s ease;
}

.who-client-dot {
    position: absolute;

    left: 50%;

    top: 0;

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #c4a95e;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 0 7px
        rgba(196,169,94,.10);
}

.who-client {
    min-height: 48vh;

    display: grid;

    grid-template-columns:
        130px 1fr;

    gap: 55px;

    padding:
        90px
        0
        90px
        100px;
}

.who-client-number {
    font-size:
        clamp(
            2.2rem,
            4vw,
            4rem
        );

    font-weight: 400;

    color:
        #b3c0cc;

    transition:
        all .6s ease;
}

.who-client-content {
    max-width: 780px;

    /*
       IMPORTANT:
       Content is visible by default.
    */

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1);
}

.who-client-content > span {
    font-size: .62rem;

    letter-spacing: .25em;

    color: #b79a4c;
}

.who-client-content h2 {
    margin:
        22px
        0
        22px;

    font-size:
        clamp(
            3rem,
            6vw,
            6.5rem
        );

    line-height: .9;

    letter-spacing: -.06em;

    color: #2a1844;
}

.who-client-content h2 strong {
    display: block;

    color:
        #8ea0b1;

    font-weight: 600;
}

.who-client-content p {
    max-width: 650px;

    font-size: 1.04rem;

    line-height: 1.9;

    color: #526577;
}

.who-client-tag {
    display: inline-block;

    margin-top: 28px;

    padding:
        8px
        15px;

    border:
        1px solid
        rgba(183,154,76,.45);

    border-radius: 100px;

    font-size: .58rem;

    letter-spacing: .2em;

    color: #9b7f35;

    background:
        rgba(183,154,76,.05);
}

.who-client.who-active
.who-client-content {
    opacity: 1;

    transform:
        translateY(0);
}

.who-client.who-active
.who-client-number {
    color: #b59646;

    transform:
        translateX(10px);
}


/* =========================================================
   DIFFERENCE
   ========================================================= */

.who-difference {
    min-height: 78vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;
}

.who-difference-image {
    position: absolute;

    inset: 0;

    background:
        url("../images/serve2.webp")
        center / cover
        no-repeat;

    filter:
        brightness(.92)
        contrast(1.02)
        saturate(.90);

    transform:
        scale(1.03);
}

.who-difference-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(34, 20, 52,.78),
            rgba(34, 20, 52,.42),
            rgba(34, 20, 52,.10)
        ),

        linear-gradient(
            0deg,
            rgba(34, 20, 52,.52),
            transparent 65%
        );
}

.who-difference-content {
    position: relative;

    z-index: 2;

    width: 88%;

    max-width: 1150px;

    margin: auto;
}

.who-difference-content h2 {
    margin: 0;

    font-size:
        clamp(
            4rem,
            9vw,
            9rem
        );

    line-height: .84;

    letter-spacing: -.07em;

    color: #fff;
}

.who-difference-content h2 span {
    display: block;

    color:
        rgba(255,255,255,.55);
}

.who-difference-content p {
    max-width: 620px;

    margin-top: 38px;

    font-size: 1.08rem;

    line-height: 1.9;

    color:
        rgba(255,255,255,.86);
}

.who-difference-intro {
    font-size:
        1.25rem !important;

    color:
        #fff !important;
}


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

.who-values {
    max-width: 1200px;

    margin: auto;

    padding:
        150px
        6%;

    background: #ffffff;
}

.who-values-heading span {
    font-size: .65rem;

    letter-spacing: .3em;

    color: #b79a4c;
}

.who-values-heading h2 {
    margin:
        25px
        0
        80px;

    font-size:
        clamp(
            3rem,
            6vw,
            6.5rem
        );

    line-height: .9;

    letter-spacing: -.06em;

    color: #2a1844;
}

.who-values-heading h2 strong {
    display: block;

    color:
        #93a3b2;
}

.who-value-grid {
    display: grid;

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

    gap: 1px;

    background:
        #e5dceb;
}

.who-value {
    padding:
        55px
        45px;

    min-height: 300px;

    background:
        linear-gradient(
            135deg,
            #faf8fc,
            #f4eef8
        );

    transition:
        transform .45s ease,
        background .45s ease,
        box-shadow .45s ease;
}

.who-value:hover {
    transform:
        translateY(-7px);

    background:
        #ffffff;

    box-shadow:
        0 20px 45px
        rgba(42, 24, 68,.10);
}

.who-value span {
    color: #b59646;

    font-size: .68rem;

    letter-spacing: .2em;
}

.who-value h3 {
    margin:
        32px
        0
        20px;

    font-size:
        clamp(
            2.2rem,
            4vw,
            4rem
        );

    line-height: .9;

    letter-spacing: -.05em;

    color: #2a1844;
}

.who-value h3 strong {
    display: block;

    color:
        #91a2b2;
}

.who-value p {
    max-width: 450px;

    color: #596b7c;

    line-height: 1.8;
}


/* =========================================================
   PROMISE
   ========================================================= */

.who-promise {
    max-width: 1100px;

    margin: auto;

    padding:
        140px
        6%;

    display: grid;

    grid-template-columns:
        120px 1fr;

    gap: 70px;

    background:
        linear-gradient(
            135deg,
            #f8f4fb,
            #ffffff
        );

    border-top:
        1px solid
        #e9e2ee;
}

.who-promise-number {
    font-size: 5rem;

    color:
        rgba(183,154,76,.45);

    font-weight: 300;
}

.who-promise-content > span {
    color: #b59646;

    font-size: .65rem;

    letter-spacing: .3em;
}

.who-promise-content h2 {
    margin:
        25px
        0
        45px;

    font-size:
        clamp(
            3.5rem,
            7vw,
            7rem
        );

    line-height: .88;

    letter-spacing: -.065em;

    color: #2a1844;
}

.who-promise-content h2 strong {
    display: block;

    color:
        #91a2b2;
}

.who-promise-content p {
    max-width: 700px;

    font-size: 1.08rem;

    line-height: 1.9;

    color: #536577;
}

.who-promise-content p strong {
    color: #2a1844;
}


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

.who-final {
    position: relative;

    min-height: 82vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding:
        130px
        6%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(207,185,108,.16),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #f3edf7,
            #eadff1
        );
}

.who-final-glow {
    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(190,164,82,.15),
            transparent 70%
        );

    filter:
        blur(70px);

    animation:
        whoGlow
        8s
        ease-in-out
        infinite
        alternate;
}

.who-final-content {
    position: relative;

    z-index: 2;

    max-width: 1000px;
}

.who-final-label {
    color: #a3863d;
}

.who-final h2 {
    margin: 0;

    font-size:
        clamp(
            3.8rem,
            8vw,
            8rem
        );

    line-height: .86;

    letter-spacing: -.07em;

    color: #2a1844;
}

.who-final h2 span {
    display: block;

    color:
        #7f93a5;
}

.who-manifesto {
    margin:
        60px
        auto
        40px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    color: #627487;

    font-size: 1rem;
}

.who-manifesto div {
    transition:
        color .35s ease,
        transform .35s ease;
}

.who-manifesto div:hover {
    color: #2a1844;

    transform:
        translateX(8px);
}

.who-final-content > p {
    max-width: 700px;

    margin:
        20px auto;

    color: #526577;

    line-height: 1.9;
}

.who-cta {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    margin-top: 40px;

    padding:
        17px
        27px;

    border-radius: 100px;

    border:
        1px solid
        #b79a4c;

    color: #2a1844;

    text-decoration: none;

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

    transition:
        all .4s ease;
}

.who-cta b {
    font-size: 1.3rem;

    transition:
        transform .35s ease;
}

.who-cta:hover {
    background: #b79a4c;

    color: #fff;

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(183,154,76,.22);
}

.who-cta:hover b {
    transform:
        translateX(8px);
}


/* =========================================================
   CLOSING
   ========================================================= */

.who-closing {
    text-align: center;

    padding:
        90px
        6%
        65px;

    background:
        #2a1844;

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

.who-closing-brand {
    font-size:
        clamp(
            2.8rem,
            6vw,
            6rem
        );

    font-weight: 700;

    letter-spacing: -.06em;

    color: #fff;
}

.who-closing-service {
    margin-top: 5px;

    font-size: .65rem;

    letter-spacing: .4em;

    color: #d4bd72;
}

.who-closing-line {
    width: 100px;

    height: 1px;

    margin:
        35px
        auto;

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

.who-closing p {
    color:
        rgba(255,255,255,.78);
}

.who-closing span {
    display: block;

    margin-top: 15px;

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

    font-size: .75rem;

    letter-spacing: .08em;
}


/* =========================================================
   REVEAL
   ========================================================= */

/*
   We deliberately keep content visible.
   JS can still add/remove who-active,
   but the page does NOT depend on it.
*/

.reveal-who {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes whoHeroZoom {

    from {
        transform:
            scale(1.04);
    }

    to {
        transform:
            scale(1);
    }
}

@keyframes whoTitleReveal {

    from {
        opacity: 0;

        transform:
            translateY(70px);

        clip-path:
            inset(100% 0 0 0);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        clip-path:
            inset(0 0 0 0);
    }
}

@keyframes whoFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes whoShimmer {

    from {
        background-position:
            200% center;
    }

    to {
        background-position:
            -200% center;
    }
}

@keyframes whoLine {

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

    50%,
    100% {
        transform:
            translateX(100%);
    }
}

@keyframes whoGlow {

    from {
        transform:
            scale(.85);

        opacity: .45;
    }

    to {
        transform:
            scale(1.15);

        opacity: .85;
    }
}


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

@media (max-width: 768px) {

    .who-hero {
        min-height: 88vh;
    }

    .who-hero-content {
        width: 86%;
    }

    .who-hero h1 {
        font-size:
            clamp(
                4rem,
                18vw,
                6rem
            );
    }

    .who-hero-content > p {
        font-size: .95rem;
    }

    .who-intro {
        padding:
            110px
            8%
            80px;
    }

    .who-intro h2 {
        font-size: 3.2rem;
    }

    .who-client-line {
        left: 4%;
    }

    .who-client {
        min-height: auto;

        grid-template-columns:
            1fr;

        gap: 20px;

        padding:
            80px
            0
            80px
            35px;
    }

    .who-client-number {
        font-size: 2rem;
    }

    .who-client-content h2 {
        font-size: 3.2rem;
    }

    .who-client-content p {
        font-size: .95rem;
    }

    .who-value-grid {
        grid-template-columns:
            1fr;
    }

    .who-value {
        min-height: auto;

        padding:
            45px
            30px;
    }

    .who-promise {
        grid-template-columns:
            1fr;

        gap: 20px;

        padding:
            100px
            8%;
    }

    .who-promise-number {
        font-size: 3rem;
    }

    .who-final {
        min-height: 80vh;

        padding:
            100px
            8%;
    }

    .who-final h2 {
        font-size: 3.5rem;
    }

    .who-difference-content {
        width: 86%;
    }

    .who-difference-content h2 {
        font-size: 4rem;
    }
}
/* =========================================================
   WHO WE SERVE — CINEMATIC JS ANIMATION BRIDGE
   ========================================================= */

   .who-hero-image,
   .who-hero-content,
   .who-difference-image,
   .who-value,
   .who-cta,
   .who-final-glow {
       will-change: transform;
   }
   
   
   /* ---------------------------------------------------------
      PREMIUM REVEAL
      --------------------------------------------------------- */
   
   .who-reveal-ready {
       opacity: 0;
       transform: translateY(55px);
       transition:
           opacity .9s ease,
           transform 1s cubic-bezier(.16,1,.3,1);
   }
   
   .who-reveal-ready.who-reveal-active {
       opacity: 1;
       transform: translateY(0);
   }
   
   
   /* ---------------------------------------------------------
      HERO READY STATE
      --------------------------------------------------------- */
   
   .who-hero {
       perspective: 1200px;
   }
   
   .who-hero-ready .who-hero-content {
       animation:
           whoCinematicHero
           1.25s
           cubic-bezier(.16,1,.3,1)
           both;
   }
   
   
   @keyframes whoCinematicHero {
   
       0% {
           opacity: 0;
           transform:
               translate3d(0,80px,0)
               scale(.96);
           filter: blur(10px);
       }
   
       60% {
           opacity: 1;
           filter: blur(0);
       }
   
       100% {
           transform:
               translate3d(0,0,0)
               scale(1);
           filter: blur(0);
       }
   
   }
   
   
   /* ---------------------------------------------------------
      VALUE CARD DEPTH
      --------------------------------------------------------- */
   
   .who-value {
       transform-style: preserve-3d;
       will-change: transform;
   }
   
   
   /* ---------------------------------------------------------
      MOUSE LIGHT
      --------------------------------------------------------- */
   
   .who-values {
       position: relative;
       isolation: isolate;
   }
   
   .who-values::after {
       content: "";
       position: absolute;
       pointer-events: none;
       inset: 0;
   
       background:
           radial-gradient(
               circle at var(--mouse-x, 50%)
               var(--mouse-y, 50%),
               rgba(212,189,114,.10),
               transparent 28%
           );
   
       opacity: .8;
       z-index: 0;
   }
   
   .who-values > * {
       position: relative;
       z-index: 1;
   }
   
   
   /* ---------------------------------------------------------
      CTA
      --------------------------------------------------------- */
   
   .who-cta {
       will-change: transform;
   }
   
   
   /* ---------------------------------------------------------
      CLIENT JOURNEY
      --------------------------------------------------------- */
   
   .who-client {
       position: relative;
   }
   
   .who-client-number {
       transition:
           color .7s ease,
           transform .7s cubic-bezier(.16,1,.3,1),
           text-shadow .7s ease;
   }
   
   .who-client.who-active .who-client-number {
   
       text-shadow:
           0 0 25px
           rgba(212,189,114,.25);
   
   }
   
   
   /* ---------------------------------------------------------
      MOBILE SAFETY
      --------------------------------------------------------- */
   
   @media (max-width: 768px) {
   
       .who-reveal-ready {
           opacity: 1;
           transform: none;
       }
   
       .who-hero-image {
           transform: scale(1.02) !important;
       }
   
   }
   
  /* =========================================================
   MANSORA — CONTACT PAGE
   PREMIUM CONTACT EXPERIENCE
   ========================================================= */

.contact-page {
    position: relative;
    overflow: hidden;
    background: #faf7fc;
    color: #221634;
}

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

.contact-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(141, 48, 207, .25),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(141, 48, 207, .20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0f0516 0%,
            #200b2f 50%,
            #34124c 100%
        );
    color: white;
}

/* Animated grid */

.contact-grid {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image:
        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    animation: gridMove 18s linear infinite;
}

@keyframes gridMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(70px);
    }
}

/* Hero mouse light */

.contact-page .contact-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255,255,255,.08),
            transparent 60%
        );
    opacity: .8;
}

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

.contact-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.orb-1 {
    width: 420px;
    height: 420px;
    top: -160px;
    left: -120px;
    background:
        radial-gradient(
            circle,
            rgba(167, 95, 218,.35),
            transparent 70%
        );
    animation: orbFloat1 8s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    right: -180px;
    bottom: -200px;
    background:
        radial-gradient(
            circle,
            rgba(141, 48, 207,.28),
            transparent 70%
        );
    animation: orbFloat2 10s ease-in-out infinite;
}

.orb-3 {
    width: 250px;
    height: 250px;
    top: 30%;
    right: 20%;
    background:
        radial-gradient(
            circle,
            rgba(150,80,255,.15),
            transparent 70%
        );
    animation: orbFloat3 7s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(40px,30px) scale(1.08);
    }
}

@keyframes orbFloat2 {
    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-40px,-35px);
    }
}

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

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

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

.contact-hero-inner {
    position: relative;
    z-index: 5;
    width: min(900px, 90%);
    padding: 80px 25px;
    text-align: center;
}

.contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 100px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(15px);
    font-size: 11px;
    letter-spacing: 2px;
    animation: fadeDown 1s ease forwards;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b67ce0;
    box-shadow:
        0 0 0 0 rgba(182, 124, 224,.7);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    70% {
        box-shadow:
            0 0 0 12px rgba(243, 233, 250, 0);
    }
}
.contact-hero h1 {
    margin: 25px 0;
    font-size: clamp(70px, 12vw, 150px);
    line-height: .85;
    letter-spacing: -7px;
    font-weight: 800;
    color: #ffffff;

    text-shadow:
        0 0 15px rgba(255,255,255,.15),
        0 0 35px rgba(186, 129, 226,.12);

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

.contact-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #efe3f8 25%,
            #ffffff 50%,
            #e8d6f5 75%,
            #ffffff 100%
        );

    background-size: 300% 100%;

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

    -webkit-text-fill-color: transparent;
    color: transparent;

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

.contact-hero p {
    max-width: 650px;
    margin: 0 auto 35px;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 1.8;
    animation:
        fadeUp 1.2s .25s ease both;
}

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

.contact-scroll-btn {
    border: 0;
    padding: 17px 28px;
    border-radius: 100px;
    background: white;
    color: #20112b;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    transition: .35s ease;
    animation:
        fadeUp 1.2s .45s ease both;
}

.contact-scroll-btn span {
    font-size: 20px;
    transition: .3s ease;
}

.contact-scroll-btn:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow:
        0 15px 40px rgba(0,0,0,.3),
        0 0 30px rgba(186, 129, 226,.25);
}

.contact-scroll-btn:hover span {
    transform: translateY(5px);
}

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

.hero-floating-card {
    position: absolute;
    z-index: 4;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    color: rgba(255,255,255,.85);
    font-size: 11px;
    letter-spacing: 2px;
    box-shadow:
        0 20px 50px rgba(0,0,0,.2);
    transition:
        transform .25s ease,
        box-shadow .35s ease;
}

.hero-floating-card span {
    display: block;
    color: #c596e6;
    margin-bottom: 5px;
}

.hero-floating-card:hover {
    box-shadow:
        0 25px 60px rgba(0,0,0,.3);
}

.card-one {
    top: 23%;
    left: 8%;
    animation:
        cardFloat1 5s ease-in-out infinite;
}

.card-two {
    top: 42%;
    right: 8%;
    animation:
        cardFloat2 6s ease-in-out infinite;
}

.card-three {
    bottom: 15%;
    left: 14%;
    animation:
        cardFloat3 7s ease-in-out infinite;
}

@keyframes cardFloat1 {
    0%,100% {
        transform:
            rotate(-5deg) translateY(0);
    }

    50% {
        transform:
            rotate(-2deg) translateY(-18px);
    }
}

@keyframes cardFloat2 {
    0%,100% {
        transform:
            rotate(5deg) translateY(0);
    }

    50% {
        transform:
            rotate(2deg) translateY(20px);
    }
}

@keyframes cardFloat3 {
    0%,100% {
        transform:
            rotate(-3deg) translateY(0);
    }

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

/* =========================================================
   HERO SCROLL INDICATOR
   ========================================================= */

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 9px;
    letter-spacing: 2px;
    opacity: .5;
    z-index: 5;
}

.scroll-line {
    width: 45px;
    height: 1px;
    background: white;
    animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
    0%,100% {
        width: 20px;
    }

    50% {
        width: 55px;
    }
}

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

.contact-intro {
    max-width: 1200px;
    margin: auto;
    padding: 120px 30px 80px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 70px;
}

.contact-section-tag {
    font-size: 11px;
    letter-spacing: 2px;
    color: #5e5269;
}

.contact-section-tag span {
    display: block;
    font-size: 45px;
    font-weight: 800;
    color: #e6d8f0;
    margin-bottom: 10px;
}

.contact-intro-content {
    max-width: 750px;
}

.intro-mini-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: #ba82e2;
    margin-bottom: 20px;
}

.contact-intro h2 {
    font-size: clamp(45px,6vw,85px);
    line-height: .95;
    letter-spacing: -4px;
    margin: 0 0 30px;
}

.contact-intro h2 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #b173de,
            #9d5cff
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.contact-intro p {
    max-width: 650px;
    color: #5e5269;
    font-size: 18px;
    line-height: 1.8;
}

/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-form-section {
    padding: 110px 25px;
    background:
        linear-gradient(
            135deg,
            #fcf9fe,
            #f7f1fc
        );
}

.form-wrapper {
    position: relative;
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
}

.form-wrapper::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    left: var(--form-mouse-x, 50%);
    top: var(--form-mouse-y, 50%);
    transform: translate(-50%,-50%);
    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.12),
            transparent 65%
        );
    pointer-events: none;
    transition:
        left .25s ease,
        top .25s ease;
}

.form-heading {
    margin-bottom: 60px;
}

.form-heading > span {
    font-size: 10px;
    letter-spacing: 3px;
    color: #7a4aa8;
}

.form-heading h2 {
    font-size: clamp(45px,6vw,75px);
    line-height: 1;
    letter-spacing: -3px;
    margin: 15px 0;
}

.form-heading h2 strong {
    display: block;
    background:
        linear-gradient(
            90deg,
            #6b3a96,
            #9c56ff
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.form-heading p {
    color: #5e5269;
    max-width: 600px;
    line-height: 1.7;
}

.mansora-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-field {
    position: relative;
    transition:
        transform .35s ease,
        opacity .6s ease;
}

.form-field.field-active {
    transform: translateY(-3px);
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #5e5269;
}

.form-field label small {
    color: #9ca3af;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e8dfef;
    background: rgba(255,255,255,.85);
    padding: 18px;
    border-radius: 12px;
    outline: none;
    font: inherit;
    color: #221634;
    transition: .35s ease;
}

.form-field textarea {
    resize: vertical;
    min-height: 160px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #7a4aa8;
    background: white;
    transform: translateY(-2px);
    box-shadow:
        0 10px 35px rgba(175, 110, 221,.12),
        0 0 0 4px rgba(122, 74, 168,.08);
}

/* =========================================================
   FORM BOTTOM
   ========================================================= */

.form-bottom {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 10px;
}

.form-bottom p {
    max-width: 450px;
    color: #8a93a6;
    font-size: 12px;
    line-height: 1.6;
}

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

.mansora-submit {
    position: relative;
    min-width: 190px;
    padding: 18px 25px;
    border: 0;
    border-radius: 100px;
    background: #29113b;
    color: white;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1px;
    transition: .35s ease;
    overflow: hidden;
}

.mansora-submit:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 35px rgba(41, 17, 59,.25);
}

.mansora-submit::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    transition:
        width .5s ease,
        height .5s ease;
}

.mansora-submit.button-clicked::after {
    width: 400px;
    height: 400px;
}

.submit-icon {
    margin-left: 12px;
    transition: .3s ease;
}

.mansora-submit:hover .submit-icon {
    margin-left: 20px;
}

.submit-loader {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin-right: 8px;
}

.mansora-submit.loading .submit-loader {
    display: inline-block;
}

.mansora-submit.loading .submit-text,
.mansora-submit.loading .submit-icon {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.form-success {
    grid-column: 1 / -1;
    display: none;
    align-items: center;
    gap: 15px;
    padding: 25px;
    border-radius: 15px;
    background: #ecfdf3;
    border: 1px solid #b7ebcd;
    color: #137a45;
}

.form-success.show {
    display: flex;
    animation:
        successPop .6s cubic-bezier(.16,1,.3,1);
}

.success-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #19a463;
    color: white;
    font-size: 20px;
    animation: successSpin .7s ease;
}

.form-success span {
    display: block;
    color: #478063;
    font-size: 13px;
}

@keyframes successPop {
    from {
        opacity: 0;
        transform:
            translateY(15px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes successSpin {
    from {
        transform:
            scale(0) rotate(-90deg);
    }

    to {
        transform:
            scale(1) rotate(0);
    }
}
/* =========================================================
   MANSORA — CONTACT INFORMATION
   ========================================================= */

   .contact-info-section {
    position: relative;

    max-width: 1200px;
    margin: 80px auto;
    padding: 100px 30px;

    border-radius: 35px;
    overflow: hidden;

    background: transparent;
}


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

.contact-info-heading {
    position: relative;
    z-index: 5;
}

.contact-info-heading > span {
    display: inline-block;

    font-size: 10px;
    letter-spacing: 3px;

    color: #7a4aa8;

    margin-bottom: 18px;
}

.contact-info-heading h2 {
    font-size: clamp(45px, 6vw, 75px);

    letter-spacing: -3px;
    line-height: 1;

    margin: 0;

    color: #221634;
}

.contact-info-heading h2 strong {
    color: #7a4aa8;
}


/* =========================================================
   CARDS GRID
   ========================================================= */

.contact-info-grid {
    position: relative;
    z-index: 5;

    display: grid;

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

    gap: 20px;

    margin-top: 60px;
}


/* =========================================================
   INDIVIDUAL CARD
   ========================================================= */

.contact-info-card {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 230px;

    padding: 30px;

    box-sizing: border-box;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.30);

    background-size: cover;
    background-position: center;

    box-shadow:
        0 15px 40px rgba(55, 20, 80, 0.15);

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


/* =========================================================
   INDIVIDUAL PHOTOGRAPH BACKGROUNDS
   ========================================================= */

.contact-info-card:nth-child(1) {
    background-image: url("/static/images/loc.png");
}

.contact-info-card:nth-child(2) {
    background-image: url("/static/images/phone.png");
}

.contact-info-card:nth-child(3) {
    background-image: url("/static/images/email.png");
}

.contact-info-card:nth-child(4) {
    background-image: url("/static/images/time.png");
}


/* =========================================================
   DARK GLASS OVERLAY
   ========================================================= */

.contact-info-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(27, 10, 40, 0.78),
            rgba(56, 20, 92, 0.62)
        );

    z-index: 1;

    transition:
        background 0.45s ease;
}


/* =========================================================
   DECORATIVE LIGHT
   ========================================================= */

.contact-info-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

    background:
        rgba(194, 146, 229, 0.18);

    filter: blur(3px);

    z-index: 2;

    transition:
        transform 0.5s ease;
}


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

.contact-info-card:hover {
    transform:
        translateY(-12px)
        scale(1.02);

    border-color:
        rgba(122, 74, 168, 0.70);

    box-shadow:
        0 30px 65px rgba(55, 20, 80, 0.30);
}

.contact-info-card:hover::before {
    background:
        linear-gradient(
            135deg,
            rgba(27, 10, 40, 0.65),
            rgba(56, 20, 92, 0.50)
        );
}

.contact-info-card:hover::after {
    transform: scale(1.7);
}


/* =========================================================
   KEEP CARD CONTENT ABOVE IMAGE
   ========================================================= */

.contact-info-card > span,
.contact-info-card h3,
.contact-info-card p,
.contact-info-card .info-icon {
    position: relative;

    z-index: 4;
}


/* =========================================================
   SMALL GLASS ICON
   ========================================================= */
   /* =========================================================
   PREMIUM CONTACT ICON
   ========================================================= */

.info-icon {
    position: relative;
    z-index: 4;

    width: 58px;
    height: 58px;

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

    margin-bottom: 24px;

    padding: 9px;

    box-sizing: border-box;

    border-radius: 18px;

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

    border: 1px solid rgba(255, 255, 255, 0.28);

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

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(49, 20, 70, 0.20);

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


/* The actual photograph/icon */

.info-icon img {
    display: block;
 border-radius: 14px;
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 12px;

    /* Softens the raw image edges */
    clip-path: inset(0 round 12px);

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


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

.contact-info-card:hover .info-icon {
    transform: translateY(-5px) scale(1.06);

    border-color:
        rgba(208, 170, 235, 0.65);

    box-shadow:
        0 12px 30px rgba(122, 74, 168, 0.30);
}

.contact-info-card:hover .info-icon img {
    transform: scale(1.08);

    filter: brightness(1.08);
}

/* =========================================================
   CARD TEXT
   ========================================================= */

.contact-info-card > span {
    display: block;

    font-size: 9px;

    letter-spacing: 2px;

    color: #dfc5f2;
}

.contact-info-card h3 {
    margin: 10px 0;

    font-size: 17px;

    line-height: 1.4;

    color: #ffffff;
}

.contact-info-card p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   CARD ANIMATION
   ========================================================= */

.contact-info-card {
    animation:
        contactCardReveal 0.8s ease both;
}

.contact-info-card:nth-child(1) {
    animation-delay: 0.10s;
}

.contact-info-card:nth-child(2) {
    animation-delay: 0.20s;
}

.contact-info-card:nth-child(3) {
    animation-delay: 0.30s;
}

.contact-info-card:nth-child(4) {
    animation-delay: 0.40s;
}


@keyframes contactCardReveal {

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

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

}


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

@media (max-width: 900px) {

    .contact-info-section {
        margin: 60px 20px;

        padding:
            75px 25px;
    }

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

}


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

@media (max-width: 600px) {

    .contact-info-section {
        margin: 40px 15px;

        padding:
            60px 20px;

        border-radius: 25px;
    }

    .contact-info-heading h2 {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 40px;
    }

    .contact-info-card {
        min-height: 210px;

        padding: 25px;
    }

}
.social-section {
    padding: 100px 30px;
    background: #1c0a29;
    color: white;
}

.social-inner {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.social-inner > div:first-child > span {
    font-size: 10px;
    letter-spacing: 3px;
    color: #c79ae7;
}

.social-inner h2 {
    font-size: clamp(40px,5vw,65px);
    line-height: 1;
    letter-spacing: -3px;
}

.social-inner h2 strong {
    display: block;
    color: #c99ee8;
}

.social-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.social-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    color: white;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    border-radius: 15px;
    transition: .35s ease;
}

.social-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.09);
    border-color:
        rgba(176, 140, 210,.4);
}

.social-logo {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    font-weight: 800;
    font-size: 20px;
}

.social-card div:nth-child(2) {
    flex: 1;
}

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

.social-card span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}

.social-card b {
    color: #c79ae7;
    transition: .3s ease;
}

.social-card:hover b {
    transform: translate(4px,-4px);
}

/* =========================================================
   GOOGLE MAP
   ========================================================= */

.mansora-map-section {
    padding: 100px 30px;
    background: #faf7fc;
}

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

.map-heading {
    margin-bottom: 35px;
}

.map-heading span {
    font-size: 10px;
    letter-spacing: 3px;
    color: #7a4aa8;
}

.map-heading h2 {
    font-size: clamp(40px,5vw,65px);
    letter-spacing: -3px;
    margin: 10px 0;
}

.map-heading h2 strong {
    color: #7a4aa8;
}

.map-frame {
    position: relative;
    height: 450px;
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #e9e1ef;
    box-shadow:
        0 30px 80px rgba(55, 20, 80,.12);
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(.8);
    transition: .5s ease;
}

.map-frame:hover iframe {
    filter: saturate(1);
}

.map-overlay-card {
    position: absolute;
    left: 25px;
    bottom: 25px;
    padding: 20px 25px;
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(15px);
    box-shadow:
        0 15px 40px rgba(0,0,0,.15);
}

.map-overlay-card span {
    font-size: 9px;
    letter-spacing: 2px;
    color: #7a4aa8;
}

.map-overlay-card strong {
    display: block;
    margin-top: 7px;
}

/* =========================================================
   BOOKING CONSULTATION
   ========================================================= */

.booking-section {
    position: relative;
    padding: 130px 30px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #2b113d,
            #602988
        );
    color: white;
    text-align: center;
}

.booking-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 50%;
    transform:
        translate(-50%,-50%);
    background:
        radial-gradient(
            circle,
            rgba(190, 138, 227,.3),
            transparent 70%
        );
    animation: glowPulse 5s infinite;
}

@keyframes glowPulse {
    0%,100% {
        transform:
            translate(-50%,-50%) scale(1);
    }

    50% {
        transform:
            translate(-50%,-50%) scale(1.25);
    }
}

.booking-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: auto;
}

.booking-content > span {
    font-size: 10px;
    letter-spacing: 3px;
    color: #d9baef;
}

.booking-content h2 {
    font-size: clamp(45px,6vw,80px);
    line-height: .95;
    letter-spacing: -4px;
    margin: 20px 0;
}

.booking-content h2 strong {
    display: block;
    color: #d9baef;
}

.booking-content p {
    max-width: 600px;
    margin: 25px auto 35px;
    color: rgba(255,255,255,.7);
    line-height: 1.8;
}

.booking-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 18px 25px;
    border-radius: 100px;
    background: white;
    color: #2b113d;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .35s ease;
}

.booking-button:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}

.booking-button strong {
    font-size: 20px;
}

/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter-section {
    padding: 100px 30px;
    background: #faf7fc;
}

.newsletter-inner {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.newsletter-copy > span {
    font-size: 10px;
    letter-spacing: 3px;
    color: #7a4aa8;
}

.newsletter-copy h2 {
    font-size: clamp(45px,5vw,65px);
    line-height: .95;
    letter-spacing: -3px;
    margin: 15px 0;
}

.newsletter-copy h2 strong {
    color: #7a4aa8;
}

.newsletter-copy p {
    color: #5e5269;
    line-height: 1.7;
}

.newsletter-input {
    display: flex;
    background: white;
    padding: 7px;
    border-radius: 100px;
    border: 1px solid #e9e0ef;
    box-shadow:
        0 15px 40px rgba(55, 20, 80,.08);
    transition:
        box-shadow .3s ease,
        transform .3s ease;
}

.newsletter-input.newsletter-focused {
    transform: translateY(-2px);
    box-shadow:
        0 15px 40px rgba(0,0,0,.12);
}

.newsletter-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 20px;
    font: inherit;
    background: transparent;
}

.newsletter-input button {
    border: 0;
    border-radius: 100px;
    background: #2b113d;
    color: white;
    padding: 14px 20px;
    cursor: pointer;
    transition: .3s ease;
}

.newsletter-input button:hover {
    transform: scale(1.04);
}

.newsletter-input button b {
    margin-left: 8px;
}

.newsletter-form small {
    display: block;
    margin: 15px 20px;
    color: #8a93a6;
}

#newsletterMessage {
    transition:
        color .3s ease,
        opacity .3s ease;
}

.newsletter-message-success,
.newsletter-message-error {
    opacity: 1;
}

/* =========================================================
   SCROLL REVEAL — FIXED
   ========================================================= */

/*
   IMPORTANT:
   Sections stay visible even if JavaScript
   fails to add the .visible class.
*/

.contact-page .reveal-section {
    opacity: 1;
    transform: translateY(0);
}

.contact-page .reveal-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional individual reveal animation */

.contact-page .contact-reveal-ready {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}

.contact-page .contact-reveal-ready.contact-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Form reveal delays */

.contact-page
.form-field.contact-reveal-ready:nth-child(1) {
    transition-delay: .05s;
}

.contact-page
.form-field.contact-reveal-ready:nth-child(2) {
    transition-delay: .1s;
}

.contact-page
.form-field.contact-reveal-ready:nth-child(3) {
    transition-delay: .15s;
}

.contact-page
.form-field.contact-reveal-ready:nth-child(4) {
    transition-delay: .2s;
}

.contact-page
.form-field.contact-reveal-ready:nth-child(5) {
    transition-delay: .25s;
}

/* =========================================================
   HERO ACTIVE STATE
   ========================================================= */

.contact-page .contact-hero-inner,
.contact-page .hero-floating-card {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22,1,.36,1);
}

.contact-page .contact-hero-active
.contact-hero-inner,

.contact-page .contact-hero-active
.hero-floating-card {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FORM SENDING
   ========================================================= */

.contact-page
.mansora-contact-form.form-sending {
    pointer-events: none;
}

.contact-page
.mansora-contact-form.form-sending
.mansora-submit {
    opacity: .7;
    cursor: wait;
}

.contact-page
.mansora-contact-form.form-sent
.mansora-submit {
    box-shadow:
        0 0 0 2px rgba(50,180,100,.25),
        0 15px 40px rgba(50,180,100,.15);
}

.contact-page
.mansora-contact-form.form-error
.mansora-submit {
    box-shadow:
        0 0 0 2px rgba(220,70,70,.25),
        0 15px 40px rgba(220,70,70,.15);
}

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

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

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .contact-page .contact-reveal-ready {
        opacity: 1;
        transform: none;
    }
}

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

@media (max-width: 900px) {

    .hero-floating-card {
        display: none;
    }

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

    .contact-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .social-inner,
    .newsletter-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

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

@media (max-width: 650px) {

    .contact-hero {
        min-height: 80vh;
    }

    .contact-hero h1 {
        font-size: 70px;
        letter-spacing: -4px;
    }

    .contact-hero p {
        font-size: 15px;
    }

    .contact-page .contact-hero::after {
        display: none;
    }

    .contact-intro {
        padding:
            80px 25px 60px;
    }

    .contact-intro h2,
    .form-heading h2,
    .booking-content h2,
    .newsletter-copy h2 {
        letter-spacing: -2px;
    }

    .mansora-contact-form {
        grid-template-columns: 1fr;
    }

    .form-field-full,
    .form-bottom {
        grid-column: auto;
    }

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

    .mansora-submit {
        width: 100%;
    }

    .contact-info-section {
        padding:
            80px 25px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .social-section {
        padding:
            80px 25px;
    }

    .social-links {
        grid-template-columns: 1fr;
    }

    .mansora-map-section {
        padding:
            80px 25px;
    }

    .map-frame {
        height: 350px;
    }

    .map-overlay-card {
        left: 15px;
        bottom: 15px;
    }

    .booking-section {
        padding:
            100px 25px;
    }

    .newsletter-section {
        padding:
            80px 25px;
    }

    .newsletter-input {
        border-radius: 18px;
        flex-direction: column;
        padding: 10px;
        gap: 8px;
    }

    .newsletter-input input {
        padding: 15px;
    }

    .newsletter-input button {
        width: 100%;
        min-height: 50px;
    }

    .contact-page .contact-reveal-ready {
        opacity: 1;
        transform: none;
    }

    .contact-page .form-wrapper::before {
        display: none;
    }
}

/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 400px) {

    .contact-hero h1 {
        font-size: 58px;
    }

    .contact-hero-inner {
        padding:
            70px 15px;
    }

    .contact-hero-badge {
        font-size: 9px;
    }

    .contact-hero p {
        font-size: 14px;
    }

    .contact-scroll-btn {
        padding:
            15px 20px;
    }
}

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

@keyframes fadeDown {

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

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

@keyframes fadeUp {

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

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

@keyframes heroTitle {

    from {
        opacity: 0;
        transform:
            translateY(50px)
            scale(.95);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* =========================================================
   MANSORA — PREMIUM SOCIAL MEDIA CARDS
   ========================================================= */

   .social-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.social-card {
    position: relative;
    min-height: 150px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: #2a1844;
    color: white;
    text-decoration: none;
    isolation: isolate;
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

/* IMAGE BACKGROUNDS */
.social-facebook,
.social-instagram,
.social-linkedin,
.social-whatsapp {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* DARK OVERLAY */

.social-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            135deg,
            rgba(26, 14, 40,.92),
            rgba(26, 14, 40,.58),
            rgba(26, 14, 40,.82)
        );

    transition:
        background .45s ease;
}


/* CONTENT */

.social-content {
    position: relative;
    z-index: 2;

    min-height: 150px;
    padding: 22px;

    display: flex;
    align-items: center;
    gap: 16px;
}


/* PLATFORM IMAGE / LOGO */

.social-logo {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);

    backdrop-filter: blur(12px);

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .45s ease;
}

.social-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .5s cubic-bezier(.16,1,.3,1);
}


/* TEXT */

.social-content > div:nth-child(2) {
    flex: 1;
}

.social-card strong {
    display: block;

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

    letter-spacing: .3px;
}

.social-card span {
    display: block;

    margin-top: 5px;

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

    font-size: 10px;
    letter-spacing: .5px;
}


/* ARROW */

.social-card b {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

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

    color: white;

    font-size: 16px;

    transition:
        transform .4s ease,
        background .4s ease;
}


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

.social-card:hover {
    transform: translateY(-8px) scale(1.015);

    border-color: rgba(208, 170, 235,.45);

    box-shadow:
        0 25px 60px rgba(0,0,0,.28),
        0 0 35px rgba(186, 129, 226,.12);
}

.social-card:hover .social-overlay {
    background:
        linear-gradient(
            135deg,
            rgba(26, 14, 40,.78),
            rgba(26, 14, 40,.30),
            rgba(26, 14, 40,.65)
        );
}

.social-card:hover .social-logo {
    transform: translateY(-4px) scale(1.08);

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

.social-card:hover .social-logo img {
    transform: scale(1.12);
}

.social-card:hover b {
    transform: translate(4px,-4px);

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


/* =========================================================
   PLATFORM-SPECIFIC GLOW
   ========================================================= */

.social-facebook:hover {
    box-shadow:
        0 25px 60px rgba(24,119,242,.22),
        0 0 40px rgba(24,119,242,.12);
}

.social-instagram:hover {
    box-shadow:
        0 25px 60px rgba(225,48,108,.22),
        0 0 40px rgba(225,48,108,.12);
}

.social-linkedin:hover {
    box-shadow:
        0 25px 60px rgba(10,102,194,.22),
        0 0 40px rgba(10,102,194,.12);
}

.social-whatsapp:hover {
    box-shadow:
        0 25px 60px rgba(37,211,102,.22),
        0 0 40px rgba(37,211,102,.12);
}


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

@media (max-width: 650px) {

    .social-links {
        grid-template-columns: 1fr;
    }

    .social-card {
        min-height: 135px;
    }

    .social-content {
        min-height: 135px;
        padding: 18px;
    }

    .social-logo {
        width: 48px;
        height: 48px;
    }

    .social-card strong {
        font-size: 14px;
    }
}
/* =========================================================
   MANSORA — FLOATING CONNECT WIDGET
   ========================================================= */

   .mansora-connect-widget {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 99999;
    font-family: inherit;
}


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

.mansora-connect-toggle {
    position: relative;

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

    padding: 14px 20px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;

    background: rgba(20, 25, 30, 0.55);

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

    color: white;

    cursor: pointer;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.15);

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


.mansora-connect-toggle:hover {
    transform: translateY(-3px);

    background: rgba(30, 35, 40, 0.7);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.22);
}


/* ICON */

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

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    font-size: 17px;
}


/* TEXT */

.connect-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* ARROW */

.connect-arrow {
    font-size: 17px;

    transition:
        transform 0.4s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   OPEN ARROW
   ========================================================= */

.mansora-connect-widget.open .connect-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   SOCIAL MENU
   ========================================================= */

.mansora-connect-menu {
    position: absolute;

    right: 0;
    bottom: calc(100% + 12px);

    width: 250px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 10px;

    border-radius: 18px;

    background: rgba(42, 24, 68, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.12);

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

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.3);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(18px)
        scale(0.94);

    transform-origin: bottom right;

    transition:
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(.16,1,.3,1),
        visibility 0.3s ease;
}


/* =========================================================
   OPEN MENU
   ========================================================= */

.mansora-connect-widget.open .mansora-connect-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   SOCIAL LINKS
   ========================================================= */

.mansora-connect-menu a {

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px;

    border-radius: 13px;

    color: white;
    text-decoration: none;

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

    border: 1px solid rgba(255, 255, 255, 0.06);

    transform: translateY(10px);

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


/* Links animate upward */

.mansora-connect-widget.open
.mansora-connect-menu a:nth-child(1) {
    transition-delay: .04s;
    transform: translateY(0);
}

.mansora-connect-widget.open
.mansora-connect-menu a:nth-child(2) {
    transition-delay: .08s;
    transform: translateY(0);
}

.mansora-connect-widget.open
.mansora-connect-menu a:nth-child(3) {
    transition-delay: .12s;
    transform: translateY(0);
}

.mansora-connect-widget.open
.mansora-connect-menu a:nth-child(4) {
    transition-delay: .16s;
    transform: translateY(0);
}


/* HOVER */

.mansora-connect-menu a:hover {

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

    transform: translateX(-5px) !important;
}


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

.connect-platform-icon {

    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 10px;

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

    overflow: hidden;
}


.connect-platform-icon img {

    width: 22px;
    height: 22px;

    object-fit: contain;
}


/* PLATFORM BACKGROUNDS */

.connect-platform-icon.whatsapp {
    background: rgba(37, 211, 102, 0.16);
}

.connect-platform-icon.facebook {
    background: rgba(24, 119, 242, 0.16);
}

.connect-platform-icon.instagram {
    background: rgba(225, 48, 108, 0.16);
}

.connect-platform-icon.linkedin {
    background: rgba(10, 102, 194, 0.16);
}


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

.mansora-connect-menu a > span:nth-child(2) {
    flex: 1;
}

.mansora-connect-menu strong {
    display: block;

    font-size: 13px;
}

.mansora-connect-menu small {
    display: block;

    margin-top: 3px;

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

    font-size: 9px;
}


/* =========================================================
   LINK ARROW
   ========================================================= */

.mansora-connect-menu b {

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

    font-size: 15px;

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


.mansora-connect-menu a:hover b {

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

    color: white;
}


/* =========================================================
   PULSE
   ========================================================= */

.mansora-connect-toggle::before {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 100px;

    border: 1px solid rgba(186, 129, 226,.3);

    animation:
        connectPulse 2.5s ease-out infinite;

    pointer-events: none;
}


@keyframes connectPulse {

    0% {
        opacity: .8;
        transform: scale(1);
    }

    70% {
        opacity: 0;
        transform: scale(1.12);
    }

    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}


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

@media (max-width: 650px) {

    .mansora-connect-widget {
        right: 16px;
        bottom: 16px;
    }

    .mansora-connect-toggle {
        padding: 13px 17px;
    }

    .connect-label {
        font-size: 9px;
    }

    .mansora-connect-menu {
        width: 220px;
    }
}
   
/* =========================================================
   GLOBAL CONTACT BUTTON
   ========================================================= */

   /* SETTINGS BUTTON */

/* =========================================================
   MANSORA SETTINGS BUTTON
   ========================================================= */

   .global-settings-btn {
    position: fixed !important;
    right: 145px !important;
    bottom: 30px !important;

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

    padding: 0 !important;
    margin: 0 !important;

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

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 50% !important;

    background: rgba(42, 24, 68,.35) !important;

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

    color: white !important;

    font-size: 16px !important;
    line-height: 1 !important;

    cursor: pointer;

    z-index: 999999 !important;

    transition: all .35s ease;
}

.global-settings-btn:hover {
    transform: rotate(45deg) scale(1.08);
    border-color: rgba(176, 140, 210,.6);
    background: rgba(59, 30, 80,.55);
}


/* MOBILE */

@media (max-width: 600px) {

    .global-settings-btn {
        right: 125px !important;
        bottom: 18px !important;

        width: 35px !important;
        height: 35px !important;

        font-size: 15px !important;
    }
}
/* ================================
   MANSORA SETTINGS ICON
================================ */

.nav-settings {
    width: 32px;
    height: 32px;

    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;

    margin-left: 10px;

    border: 1px solid rgba(107, 58, 150,.25);
    border-radius: 9px;

    background: rgba(107, 58, 150,.07);

    text-decoration: none;

    transition: .3s ease;
}

.nav-settings span {
    width: 15px;
    height: 2px;

    border-radius: 10px;

    background: #6b3a96;

    transition: .3s ease;
}

.nav-settings:hover {
    background: #6b3a96;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(107, 58, 150,.25);
}

.nav-settings:hover span {
    background: white;
}
/* =========================================
   MANSORA PREMIUM SETTINGS
========================================= */

.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(24, 8, 35, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .45s ease,
        visibility .45s ease;

    z-index: 9998;
}

.settings-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================
   SETTINGS PANEL
========================================= */

.settings-panel {
    position: fixed;
    top: 18px;
    right: 18px;

    width: 390px;
    max-width: calc(100vw - 36px);
    height: calc(100vh - 36px);

    padding: 42px 32px;

    box-sizing: border-box;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(90, 42, 125, 0.94),
            rgba(58, 25, 82, 0.94)
        );

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

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

    color: white;

    box-shadow:
        -20px 25px 80px rgba(0,0,0,.35),
        0 0 50px rgba(181, 121, 224,.12);

    transform:
        translateX(110%)
        scale(.96);

    opacity: 0;

    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        opacity .4s ease;

    z-index: 9999;

    overflow-y: auto;
}


/* OPEN ANIMATION */

.settings-panel.active {
    transform:
        translateX(0)
        scale(1);

    opacity: 1;
}


/* =========================================
   DECORATIVE LIGHT
========================================= */

.settings-panel::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -120px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(176, 140, 210,.35),
            transparent 70%
        );

    pointer-events: none;
}

.settings-panel::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -100px;
    left: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(170,100,255,.25),
            transparent 70%
        );

    pointer-events: none;
}


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

.settings-close {
    position: absolute;

    top: 22px;
    right: 22px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

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

    color: white;

    font-size: 24px;

    cursor: pointer;

    transition:
        transform .35s ease,
        background .35s ease;
}

.settings-close:hover {
    background: rgba(255,255,255,.20);

    transform:
        rotate(90deg)
        scale(1.08);
}


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

.settings-label {
    position: relative;
    z-index: 2;

    display: inline-block;

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

    letter-spacing: 4px;

    color: #dbbdf0;
}

.settings-panel h2 {
    position: relative;
    z-index: 2;

    margin: 12px 0 8px;

    font-size: 46px;

    letter-spacing: -2px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #e0c6f2
        );

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

    color: transparent;
}

.settings-panel > p {
    position: relative;
    z-index: 2;

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

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 35px;
}


/* =========================================
   SETTING ITEMS
========================================= */

.setting-item {
    position: relative;
    z-index: 2;

    display: flex;

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

    padding: 20px 18px;

    margin-bottom: 12px;

    border-radius: 16px;

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

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

    cursor: pointer;

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

.setting-item:hover {
    transform:
        translateX(-6px);

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

    border-color:
        rgba(212, 178, 237,.45);

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);
}

.setting-item strong {
    display: block;

    color: white;

    font-size: 15px;

    margin-bottom: 5px;
}

.setting-item small {
    display: block;

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

    font-size: 11px;

    line-height: 1.5;
}

.setting-item > span {
    color: #dbbdf0;

    font-size: 27px;

    transition:
        transform .3s ease;
}

.setting-item:hover > span {
    transform: translateX(5px);
}


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

@media (max-width: 600px) {

    .settings-panel {
        top: 10px;
        right: 10px;

        width: calc(100vw - 20px);
        height: calc(100vh - 20px);

        padding: 35px 22px;

        border-radius: 24px;
    }

    .settings-panel h2 {
        font-size: 38px;
    }
}
/* =========================================
   REMOVE SETTINGS SCROLLBARS
========================================= */

.settings-panel {
    overflow: hidden;
}

.settings-panel {
    scrollbar-width: none;
}

.settings-panel::-webkit-scrollbar {
    display: none;
}

.settings-overlay {
    overflow: hidden;
}
/* =========================================
   LANGUAGE DROPDOWN
========================================= */
/* =========================================================
   MANSORA — PREMIUM LANGUAGE SELECTOR
   ========================================================= */

   .language-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 12px;
    z-index: 10000;
}

/* LANGUAGE BUTTON */
.language-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 58px;
    height: 38px;
    padding: 0 12px;

    border: 1px solid rgba(107, 58, 150, 0.35);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: #6b3a96;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

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

.language-toggle:hover {
    background: rgba(107, 58, 150, 0.10);
    border-color: rgba(107, 58, 150, 0.65);

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(107, 58, 150, 0.18);
}

/* ARROW */
.language-arrow {
    font-size: 14px;
    line-height: 1;

    transition:
        transform .4s cubic-bezier(.16,1,.3,1);
}

.language-toggle.active .language-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.language-menu {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 190px;
    padding: 8px;

    display: flex;
    flex-direction: column;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(251, 247, 253,.98)
        );

    border: 1px solid rgba(107, 58, 150,.18);

    box-shadow:
        0 18px 50px rgba(63, 25, 90,.18),
        0 4px 15px rgba(0,0,0,.08);

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

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-12px)
        scale(.96);

    transform-origin: top right;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .4s cubic-bezier(.16,1,.3,1);
}


/* OPEN STATE */
.language-dropdown.active .language-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   LANGUAGE ITEMS
   ========================================================= */

.language-menu a {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 39px;

    box-sizing: border-box;

    padding: 9px 12px;
    margin: 2px 0;

    border-radius: 10px;

    color: #38184f;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;

    opacity: 0;

    transform: translateY(-6px);

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


/* STAGGERED ANIMATION */
.language-dropdown.active .language-menu a {
    opacity: 1;
    transform: translateY(0);
}

.language-dropdown.active .language-menu a:nth-child(1) {
    transition-delay: .04s;
}

.language-dropdown.active .language-menu a:nth-child(2) {
    transition-delay: .07s;
}

.language-dropdown.active .language-menu a:nth-child(3) {
    transition-delay: .10s;
}

.language-dropdown.active .language-menu a:nth-child(4) {
    transition-delay: .13s;
}

.language-dropdown.active .language-menu a:nth-child(5) {
    transition-delay: .16s;
}

.language-dropdown.active .language-menu a:nth-child(6) {
    transition-delay: .19s;
}

.language-dropdown.active .language-menu a:nth-child(7) {
    transition-delay: .22s;
}

.language-dropdown.active .language-menu a:nth-child(8) {
    transition-delay: .25s;
}

.language-dropdown.active .language-menu a:nth-child(9) {
    transition-delay: .28s;
}

.language-dropdown.active .language-menu a:nth-child(10) {
    transition-delay: .31s;
}


/* HOVER */
.language-menu a:hover {
    background:
        linear-gradient(
            90deg,
            rgba(107, 58, 150,.11),
            rgba(107, 58, 150,.04)
        );

    color: #6b3a96;

    transform: translateX(5px);
}


/* LEFT ACCENT LINE */
.language-menu a::before {
    content: "";

    position: absolute;
    left: 0;

    width: 3px;
    height: 0;

    border-radius: 5px;

    background: #6b3a96;

    transition:
        height .25s ease;
}

.language-menu a:hover::before {
    height: 55%;
}


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

@media (max-width: 600px) {

    .language-dropdown {
        margin-left: 6px;
    }

    .language-toggle {
        min-width: 52px;
        height: 35px;
        padding: 0 9px;
        font-size: 11px;
    }

    .language-menu {
        width: 175px;
        right: -4px;
    }
}
/* =========================================================
   MANSORA — LANGUAGE MENU SCROLL
   Supports 350+ languages
   ========================================================= */

   .language-menu {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;

    /* Hide scrollbar — Firefox */
    scrollbar-width: none;

    /* Keep the menu clean */
    overscroll-behavior: contain;
}

/* Hide scrollbar — Chrome, Edge, Safari */
.language-menu::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
/* =========================================================
   HIDE GOOGLE TRANSLATE TOP BAR
   ========================================================= */

/* Hide Google's top translation banner */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

/* Prevent Google Translate from pushing the website down */
body {
    top: 0 !important;
}

/* Hide the Google Translate toolbar */
.goog-te-banner-frame {
    display: none !important;
}

/* Hide Google Translate popup/branding where possible */
.goog-te-gadget {
    font-size: 0 !important;
}

/* Hide the original Google Translate element */
#google_translate_element {
    display: none !important;
}

/* Remove the extra space Google sometimes creates */
body > .skiptranslate {
    display: none !important;
}

/* =========================================================
   LANGUAGE MENU — MAKE SURE ALL LANGUAGES ARE VISIBLE
   ========================================================= */

   .language-menu {
    display: none;
    max-height: 500px;
    overflow-y: auto;
}

.language-dropdown.active .language-menu {
    display: block;
}

.language-menu a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.contact-page .mansora-connect-widget.open .mansora-connect-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}
/* =========================================================
   MANSORA — RESPONSIVE SYSTEM
   ========================================================= */

/* ---------------------------------------------------------
   LARGE LAPTOPS / SMALL DESKTOPS
   1200px and below
   --------------------------------------------------------- */

   @media (max-width: 1200px) {

    nav {
        width: 94%;
        gap: 20px;
    }

    nav div {
        gap: 20px;
    }

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

    .hero-container {
        width: 94%;
    }

    .container {
        width: 94%;
    }

    .intro-grid {
        gap: 50px;
    }

    .values-grid {
        gap: 18px;
    }

}


/* ---------------------------------------------------------
   LAPTOPS / TABLETS
   1024px and below
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    /* ---------- NAVIGATION ---------- */

    nav {
        min-height: 76px;
        width: 94%;
        gap: 15px;
    }

    .brand-main {
        font-size: 24px;
    }

    .brand-service {
        font-size: 12px;
    }

    nav div {
        gap: 15px;
    }

    nav div a {
        font-size: 13px;
    }


    /* ---------- GENERAL SECTIONS ---------- */

    section {
        padding: 85px 0;
    }

    .intro-section,
    .values-section,
    .cta-section {
        padding: 90px 0;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 700px;
    }

    .hero-content {
        width: min(680px, 100%);
        padding: 70px 0;
    }

    .hero-title {
        font-size: clamp(48px, 7vw, 72px);
    }

    .hero-subtitle {
        font-size: clamp(19px, 3vw, 26px);
    }

    .hero-description {
        max-width: 600px;
        font-size: 16px;
    }

    .hero-logo {
        width: 105px;
        height: 105px;
        top: 30px;
        right: 4%;
    }


    /* ---------- ABOUT ---------- */

    .intro-grid {
        gap: 45px;
    }

    .intro-image-frame img {
        height: 450px;
    }


    /* ---------- VALUES ---------- */

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


    /* ---------- CTA ---------- */

    .cta-content {
        max-width: 680px;
    }


    /* ---------- DECORATIVE ELEMENTS ---------- */

    .cta-section::before {
        width: 400px;
        height: 400px;
    }

    .cta-section::after {
        width: 350px;
        height: 350px;
    }

}


/* ---------------------------------------------------------
   TABLETS
   768px and below
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* ---------- NAVIGATION ---------- */

    nav {
        min-height: 72px;
        width: 92%;
        gap: 10px;
    }

    .brand-logo {
        gap: 6px;
    }

    .brand-main {
        font-size: 22px;
    }

    .brand-service {
        display: none;
    }

    nav div {
        gap: 12px;
    }

    nav div a {
        font-size: 12px;
    }

    .language-toggle {
        font-size: 12px;
    }


    /* ---------- GENERAL ---------- */

    section {
        padding: 75px 0;
    }

    .container,
    .hero-container {
        width: 92%;
    }

    .section-heading {
        max-width: 100%;
    }

    .section-heading p {
        font-size: 16px;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 650px;
    }

    .hero-content {
        width: 100%;
        max-width: 650px;
        padding: 75px 0 85px;
    }

    .hero-title {
        font-size: clamp(44px, 9vw, 64px);
        letter-spacing: -1.5px;
    }

    .hero-subtitle {
        font-size: clamp(18px, 4vw, 24px);
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.75;
        max-width: 580px;
    }

    .hero-logo {
        width: 90px;
        height: 90px;
        top: 25px;
        right: 5%;
    }

    .hero-scroll {
        bottom: 22px;
    }


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

    .hero-buttons {
        gap: 12px;
    }

    .hero-buttons .btn {
        min-width: 170px;
    }


    /* ---------- ABOUT ---------- */

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

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

    .intro-content {
        max-width: 100%;
    }

    .intro-image-frame img {
        height: 500px;
    }

    .image-accent {
        width: 140px;
        height: 140px;
        right: -18px;
        bottom: -18px;
    }


    /* ---------- VALUES ---------- */

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

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 40px;
    }

    .value-card {
        padding: 30px 24px;
    }


    /* ---------- CTA ---------- */

    .cta-section {
        padding: 85px 0;
    }

    .cta-content {
        max-width: 100%;
    }

    .cta-content p {
        font-size: 16px;
    }


    /* ---------- FOOTER ---------- */

    footer {
        padding: 60px 20px;
    }

}


/* ---------------------------------------------------------
   MOBILE PHONES
   600px and below
   --------------------------------------------------------- */

@media (max-width: 600px) {

    /* ---------- NAVIGATION ---------- */

    nav {
        width: 92%;
        min-height: 68px;
    }

    .brand-main {
        font-size: 20px;
    }

    nav div {
        gap: 9px;
    }

    nav div a {
        font-size: 11px;
    }


    /* ---------- GENERAL ---------- */

    section {
        padding: 65px 0;
    }

    .container,
    .hero-container {
        width: 90%;
    }

    h1 {
        letter-spacing: -1.5px;
    }

    h2 {
        letter-spacing: -1px;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding: 95px 0 75px;
    }

    .hero-tag {
        margin-bottom: 20px;
        padding: 7px 13px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .hero-title {
        font-size: clamp(40px, 11vw, 56px);
        line-height: 1.04;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 18px;
        line-height: 1.35;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .hero-logo {
        width: 72px;
        height: 72px;
        top: 20px;
        right: 5%;
    }


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

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
        min-width: 0;
    }


    /* ---------- ABOUT ---------- */

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

    .intro-grid {
        gap: 38px;
    }

    .intro-image-frame {
        border-radius: 22px;
    }

    .intro-image-frame img {
        height: 400px;
        border-radius: 22px;
    }

    .intro-image::before {
        left: -15px;
        top: 25px;
    }

    .image-accent {
        width: 110px;
        height: 110px;
        right: -12px;
        bottom: -12px;
        border-radius: 24px;
    }

    .intro-content p {
        font-size: 15px;
        line-height: 1.8;
    }


    /* ---------- SECTION HEADINGS ---------- */

    .section-label {
        font-size: 11px;
        letter-spacing: 1.8px;
    }

    .section-heading h2 {
        margin-bottom: 18px;
    }

    .section-heading p {
        font-size: 15px;
        line-height: 1.75;
    }


    /* ---------- VALUES ---------- */

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

    .values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 35px;
    }

    .value-card {
        padding: 28px 24px;
    }

    .value-card h3 {
        font-size: 23px;
    }


    /* ---------- CTA ---------- */

    .cta-section {
        padding: 75px 0;
    }

    .cta-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .cta-section::before {
        width: 300px;
        height: 300px;
    }

    .cta-section::after {
        width: 280px;
        height: 280px;
    }


    /* ---------- FOOTER ---------- */

    footer {
        padding: 55px 18px;
    }

    footer p:first-child {
        font-size: 20px;
    }

    footer p:nth-child(2) {
        font-size: 14px;
    }

}


/* ---------------------------------------------------------
   SMALL PHONES
   480px and below
   --------------------------------------------------------- */

@media (max-width: 480px) {

    /* ---------- NAVIGATION ---------- */

    nav {
        width: 94%;
        min-height: 64px;
    }

    .brand-main {
        font-size: 19px;
    }

    nav div {
        gap: 7px;
    }

    nav div a {
        font-size: 10px;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 590px;
    }

    .hero-container {
        width: 90%;
    }

    .hero-content {
        padding: 90px 0 70px;
    }

    .hero-title {
        font-size: clamp(36px, 12vw, 50px);
        letter-spacing: -1.2px;
    }

    .hero-subtitle {
        font-size: 17px;
    }

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

    .hero-logo {
        width: 64px;
        height: 64px;
        top: 18px;
        right: 4%;
    }

    .hero-scroll {
        display: none;
    }


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

    .btn,
    .btn-light {
        width: 100%;
        min-height: 50px;
        padding: 0 20px;
        font-size: 14px;
    }


    /* ---------- ABOUT ---------- */

    .intro-image-frame img {
        height: 340px;
    }

    .intro-content p {
        font-size: 14px;
    }


    /* ---------- VALUES ---------- */

    .value-card {
        padding: 25px 20px;
    }

    .value-card h3 {
        font-size: 21px;
    }

    .value-card p {
        font-size: 13.5px;
    }


    /* ---------- CTA ---------- */

    .cta-section {
        padding: 65px 0;
    }


    /* ---------- FOOTER ---------- */

    footer {
        padding: 50px 16px;
    }

}


/* ---------------------------------------------------------
   EXTRA SMALL PHONES
   380px and below
   --------------------------------------------------------- */

@media (max-width: 380px) {

    .brand-main {
        font-size: 17px;
    }

    nav div a {
        font-size: 9px;
    }

    .hero-title {
        font-size: 35px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

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

    .hero-logo {
        width: 58px;
        height: 58px;
    }

    .intro-image-frame img {
        height: 300px;
    }

}
/* =========================================================
   RESPONSIVE LANGUAGE SELECTOR
   ========================================================= */

   @media (max-width: 768px) {

    .language-dropdown {
        flex-shrink: 0;
    }

    .language-toggle {
        padding: 7px 8px;
        gap: 3px;
        white-space: nowrap;
    }

    .language-menu {
        right: 0;
        left: auto;
        min-width: 125px;
    }

}

@media (max-width: 480px) {

    .language-toggle {
        padding: 6px 6px;
        font-size: 10px;
    }

    .language-arrow {
        font-size: 10px;
    }

    .language-menu {
        min-width: 115px;
    }

}
@media (max-width: 768px) {

    .language-dropdown {
        flex-shrink: 0;
    }

    .language-toggle {
        padding: 7px 8px;
        gap: 3px;
        white-space: nowrap;
    }

    .language-menu {
        right: 0;
        left: auto;
        min-width: 125px;
    }

}

@media (max-width: 480px) {

    .language-toggle {
        padding: 6px 6px;
        font-size: 10px;
    }

    .language-arrow {
        font-size: 10px;
    }

    .language-menu {
        min-width: 115px;
    }
/* =========================================================
   MANSORA — MOBILE NAVIGATION
   ========================================================= */

   @media (max-width: 768px) {

    header {
        position: sticky;
        top: 0;
        z-index: 1000;

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

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

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

        box-shadow:
            0 8px 35px rgba(34, 22, 52, 0.10);
    }


    /* =========================
       MAIN NAV
       ========================= */

    nav {
        width: 96%;
        min-height: 68px;
        margin: 0 auto;

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

        gap: 14px;

        text-align: left;
    }


    /* =========================
       MANSORA — LEFT
       ========================= */

    nav > .brand-logo {
        flex: 0 0 auto;

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

        margin: 0;
        padding: 0;

        gap: 0;

        text-align: left;
    }

    .brand-main {
        font-size: 21px;
        line-height: 1;

        white-space: nowrap;
    }

    .brand-service {
        display: none;
    }
    
    @media (max-width: 768px) {

        /* =========================
           MOBILE GLASS HEADER
           ========================= */
    
        header {
            position: sticky;
            top: 0;
            z-index: 1000;
    
            background: rgba(255, 255, 255, 0.62);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
    
            border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    
            box-shadow:
                0 8px 35px rgba(34, 22, 52, 0.10);
        }
    
    
        /* =========================
           NAV
           ========================= */
    
        nav {
            width: 96%;
            min-height: 68px;
            margin: 0 auto;
    
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
    
            gap: 12px;
    
            white-space: nowrap;
        }
    
    
        /* =========================
           MANSORA
           ========================= */
    
        nav > .brand-logo {
            flex: 0 0 auto !important;
    
            display: flex !important;
            align-items: center !important;
    
            margin: 0;
            padding: 0;
        }
    
        .brand-main {
            font-size: 21px;
            line-height: 1;
            white-space: nowrap;
        }
    
        .brand-service {
            display: none;
        }
    
    
        @media (max-width: 768px) {

            /* =========================================
               MOBILE NAVIGATION — ONE HORIZONTAL ROW
               ========================================= */
        
            nav {
                display: flex !important;
                align-items: center !important;
                flex-wrap: nowrap !important;
                gap: 10px !important;
            }
        
            nav > .nav-links {
                flex: 1 1 auto !important;
                min-width: 0 !important;
        
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
        
                align-items: center !important;
                justify-content: flex-start !important;
        
                gap: 18px !important;
        
                margin: 0 !important;
                padding: 0 !important;
        
                white-space: nowrap !important;
        
                overflow-x: auto !important;
                overflow-y: hidden !important;
        
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }
        
            nav > .nav-links::-webkit-scrollbar {
                display: none !important;
            }
        
            nav > .nav-links > a {
                flex: 0 0 auto !important;
        
                display: inline-flex !important;
        
                width: max-content !important;
                min-width: max-content !important;
        
                white-space: nowrap !important;
        
                margin: 0 !important;
                padding: 6px 0 !important;
        
                font-size: 12px !important;
                line-height: 1 !important;
            }
        
        
            /* =========================================
               LANGUAGE BUTTON
               ========================================= */
        
            nav > .language-dropdown {
                flex: 0 0 auto !important;
        
                position: relative !important;
        
                display: flex !important;
                align-items: center !important;
        
                margin: 0 !important;
                padding: 0 !important;
        
                z-index: 10000 !important;
            }
        
        
            /* =========================================
               LANGUAGE MENU — FLOATING
               ========================================= */
        
            nav > .language-dropdown .language-menu {
                position: absolute !important;
        
                top: calc(100% + 10px) !important;
                right: 0 !important;
                left: auto !important;
        
                width: 175px !important;
        
                max-height: 420px !important;
        
                overflow-y: auto !important;
                overflow-x: hidden !important;
        
                z-index: 999999 !important;
            }
        
        }
        @media (max-width: 768px) {

            nav > .language-dropdown {
                position: relative !important;
                flex: 0 0 auto !important;
                z-index: 999999 !important;
            }
        
            nav > .language-dropdown .language-menu {
                position: fixed !important;
                top: 78px !important;
                right: 3% !important;
                left: auto !important;
        
                width: 175px !important;
                max-height: 420px !important;
        
                display: flex !important;
                flex-direction: column !important;
        
                padding: 8px !important;
                margin: 0 !important;
        
                overflow-y: auto !important;
        
                z-index: 9999999 !important;
        
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
        
                transform: translateY(-12px) scale(.96) !important;
            }
        
            nav > .language-dropdown.active .language-menu {
                opacity: 1 !important;
                visibility: visible !important;
                pointer-events: auto !important;
        
                transform: translateY(0) scale(1) !important;
            }
        
        }