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

    body {
      font-family: 'Poppins', sans-serif;
      background: #f8f9fa;
      color: #000000;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== HEADER ===== */
    .osar-header {
      background: #ffffff;
      padding: 0.85rem 0;
      border-bottom: 1px solid #f0f0f0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    /* ---- BRAND / LOGO ---- */
    .navbar-brand {
      font-weight: 800;
      font-size: 1.7rem;
      color: #000000 !important;
      letter-spacing: -0.6px;
      display: flex;
      align-items: center;
      gap: 3px;
      text-decoration: none;
      line-height: 1;
    }

    .brand-orange {
      color: #ff7a00;
    }

    .brand-dot {
      width: 8px;
      height: 8px;
      background: #ff7a00;
      border-radius: 50%;
      display: inline-block;
      margin-left: 4px;
      box-shadow: 0 0 10px #ff7a00;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.3); }
    }

    /* ---- DESKTOP NAV ---- */
    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 0.2rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .desktop-nav .nav-link {
      color: #1a1a1a !important;
      font-weight: 500;
      font-size: 0.95rem;
      padding: 0.55rem 1.1rem !important;
      border-radius: 30px;
      transition: all 0.25s ease;
      text-decoration: none !important;
      position: relative;
    }

    .desktop-nav .nav-link:hover {
      color: #ff7a00 !important;
      background: rgba(255, 122, 0, 0.08);
    }

    .desktop-nav .nav-link.active {
      color: #ff7a00 !important;
      background: rgba(255, 122, 0, 0.1);
      font-weight: 600;
    }

    /* ---- JOIN BUTTON ---- */
    .btn-join {
      background: linear-gradient(135deg, #ff7a00, #ff9533);
      color: #ffffff;
      border: none;
      border-radius: 30px;
      padding: 0.6rem 1.7rem;
      font-weight: 600;
      font-size: 0.92rem;
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(255, 122, 0, 0.35);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-join:hover {
      background: linear-gradient(135deg, #e66e00, #ff7a00);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(255, 122, 0, 0.5);
    }

    .btn-join i {
      font-size: 0.82rem;
    }

    /* ---- MOBILE MENU BUTTON (RIGHT SIDE) ---- */
    .menu-btn {
      display: none; /* hidden on desktop */
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #ff7a00;
      border: none;
      color: #ffffff;
      font-size: 1.15rem;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      box-shadow: 0 6px 18px rgba(255, 122, 0, 0.35);
      flex-shrink: 0;
    }

    .menu-btn:hover {
      background: #e66e00;
      transform: translateY(-2px);
    }

    .menu-btn:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.4);
    }

    /* ===== OFF-CANVAS (LEFT SLIDE) ===== */
    .offcanvas-start {
      width: 310px;
      background: #ffffff;
      border-right: 3px solid #ff7a00;
      box-shadow: 12px 0 50px rgba(0, 0, 0, 0.15);
    }

    .offcanvas-header {
      padding: 1.4rem 1.5rem;
      border-bottom: 1px solid #f5f5f5;
      background: linear-gradient(135deg, #fff5eb, #ffffff);
    }

    .offcanvas-title {
      font-weight: 800;
      font-size: 1.5rem;
      color: #000000;
      letter-spacing: -0.5px;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .offcanvas-title span {
      color: #ff7a00;
    }

    .offcanvas-title .dot {
      width: 7px;
      height: 7px;
      background: #ff7a00;
      border-radius: 50%;
      display: inline-block;
      margin-left: 4px;
      box-shadow: 0 0 10px #ff7a00;
    }

    .btn-close:focus {
      box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.3);
    }

    .offcanvas-body {
      padding: 1.3rem 1.2rem;
    }

    /* Offcanvas nav links */
    .offcanvas-nav {
      list-style: none;
      padding: 0;
      margin: 0 0 1.5rem 0;
    }

    .offcanvas-nav li {
      margin-bottom: 0.35rem;
    }

    .offcanvas-nav a {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0.85rem 1rem;
      color: #1a1a1a;
      text-decoration: none;
      font-weight: 500;
      font-size: 1rem;
      border-radius: 12px;
      transition: all 0.25s ease;
      position: relative;
    }

    .offcanvas-nav a i {
      width: 22px;
      color: #ff7a00;
      font-size: 1.05rem;
      text-align: center;
    }

    .offcanvas-nav a:hover {
      background: rgba(255, 122, 0, 0.08);
      color: #ff7a00;
      transform: translateX(6px);
    }

    .offcanvas-nav a.active {
      background: rgba(255, 122, 0, 0.12);
      color: #ff7a00;
      font-weight: 600;
    }

    .offcanvas-nav a.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 20%;
      height: 60%;
      width: 4px;
      background: #ff7a00;
      border-radius: 0 4px 4px 0;
    }

    /* Offcanvas Join Button */
    .offcanvas-actions {
      padding-top: 1.3rem;
      border-top: 1px solid #f0f0f0;
    }

    .offcanvas-actions .btn-join {
      width: 100%;
      justify-content: center;
      padding: 0.85rem 1.5rem;
      font-size: 1rem;
    }

    /* ===== DEMO CONTENT ===== */
    .demo-content {
      padding: 5rem 2rem;
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
    }

    .demo-content h1 {
      font-weight: 800;
      font-size: 2.6rem;
      margin-bottom: 1rem;
      color: #000000;
      letter-spacing: -0.5px;
    }

    .demo-content h1 span {
      color: #ff7a00;
    }

    .demo-content p {
      color: #666666;
      font-size: 1.05rem;
      line-height: 1.7;
    }

    .demo-content p strong {
      color: #000000;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 991.98px) {
      /* Hide desktop nav + join button (right side) */
      .desktop-nav,
      .desktop-join {
        display: none !important;
      }

      /* Show mobile menu button */
      .menu-btn {
        display: flex;
      }

      .navbar-brand {
        font-size: 1.5rem;
      }
    }

    @media (max-width: 575.98px) {
      .navbar-brand {
        font-size: 1.35rem;
      }

      .menu-btn {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
      }

      .osar-header {
        padding: 0.7rem 0;
      }

      .demo-content h1 {
        font-size: 1.8rem;
      }

      .demo-content p {
        font-size: 0.95rem;
      }

      .offcanvas-start {
        width: 84%;
      }
    }
 


    /* sectione-1 */
/* =========================================================
   PREMIUM CHESS HERO
========================================================= */

.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #050505;
    isolation: isolate;
}


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

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

    background-image: url("../img/924a6c07-3eb2-4bff-b24e-430dd94c4dc7.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: -5;

    transform: scale(1.02);

    animation: heroZoom 14s ease-in-out infinite alternate;
}


@keyframes heroZoom {

    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.06);
    }

}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

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

    z-index: -4;

    background:

        /* Orange light */
        radial-gradient(
            circle at 75% 50%,
            rgba(255, 122, 0, 0.18),
            transparent 32%
        ),

        /* Bottom glow */
        radial-gradient(
            circle at 70% 100%,
            rgba(255, 122, 0, 0.12),
            transparent 35%
        ),

        /* Left dark area for text */
        linear-gradient(
            90deg,
            rgba(3, 3, 3, 0.96) 0%,
            rgba(3, 3, 3, 0.88) 28%,
            rgba(3, 3, 3, 0.58) 50%,
            rgba(3, 3, 3, 0.12) 76%,
            rgba(3, 3, 3, 0.30) 100%
        );
}


/* =========================================================
   EXTRA DARK GRADIENT
========================================================= */

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

    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.55) 0%,
            transparent 25%,
            transparent 72%,
            rgba(0, 0, 0, 0.85) 100%
        );
}


/* =========================================================
   GRID
========================================================= */

.hero-grid {
    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            black 0%,
            black 45%,
            transparent 85%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            black 0%,
            black 45%,
            transparent 85%
        );

    opacity: 0.35;
}


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

.hero-content {
    position: relative;

    max-width: 720px;

    padding-top: 30px;

    animation:
        heroContentIn 1s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


@keyframes heroContentIn {

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

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

}


/* =========================================================
   BADGE
========================================================= */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 16px;

    border: 1px solid rgba(255, 122, 0, 0.38);

    border-radius: 100px;

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

    color: #ffb36f;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    backdrop-filter: blur(12px);

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

    margin-bottom: 28px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.25),
        inset 0 0 20px rgba(255, 122, 0, 0.04);
}


.badge-icon {

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255, 122, 0, 0.14);

    color: #ff861c;

    font-size: 12px;
}


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

.hero-heading {

    margin: 0 0 25px;

    color: #ffffff;

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

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

    font-weight: 800;

    line-height: 0.99;

    letter-spacing: -4px;

    text-shadow:
        0 10px 50px rgba(0, 0, 0, 0.7);
}


.hero-heading span {

    display: inline-block;

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #ff7200 0%,
            #ff963c 45%,
            #ffd1a3 100%
        );

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

    position: relative;
}


/* Underline */

.hero-heading span::after {

    content: "";

    position: absolute;

    left: 3px;

    bottom: -10px;

    width: 65%;

    height: 4px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #ff7200,
            transparent
        );
}


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

.hero-text {

    max-width: 590px;

    margin: 0 0 34px;

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

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

    font-size: 15px;

    font-weight: 400;

    line-height: 1.85;
}


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

.hero-buttons {
    align-items: center;
}


/* Main */

.btn-main {

    min-height: 56px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ff6d00,
            #ff9638
        );

    color: #ffffff;

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

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 15px 40px
        rgba(255, 122, 0, 0.30);

    transition:
        all 0.35s ease;
}


.btn-main:hover {

    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 50px
        rgba(255, 122, 0, 0.48);

    background:
        linear-gradient(
            135deg,
            #ff7900,
            #ffad62
        );
}


.btn-arrow {

    font-size: 10px;

    transition:
        transform 0.3s ease;
}


.btn-main:hover .btn-arrow {

    transform:
        translateX(4px);
}


/* Ghost */

.btn-ghost {

    min-height: 56px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    border-radius: 14px;

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

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

    color: #ffffff;

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

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    backdrop-filter: blur(14px);

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

    transition:
        all 0.3s ease;
}


.btn-ghost:hover {

    color: #ffffff;

    border-color:
        rgba(255, 122, 0, 0.55);

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

    transform:
        translateY(-4px);
}


/* Play */

.play-icon {

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.18);
}


.play-icon i {

    font-size: 9px;

    margin-left: 2px;
}


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

.hero-stats {

    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 48px;
}


.hero-stat {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.hero-stat strong {

    color: #ffffff;

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

    font-size: 18px;

    font-weight: 700;
}


.hero-stat span {

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

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

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.stat-divider {

    width: 1px;

    height: 30px;

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


/* =========================================================
   RIGHT SIDE
========================================================= */

.hero-right-space {

    position: relative;

    height: 600px;

    pointer-events: none;
}


/* Extra glow over chess king */

.hero-focus-glow {

    position: absolute;

    width: 280px;
    height: 280px;

    right: 5%;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

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

    filter: blur(80px);

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


@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.55;
        transform:
            translateY(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform:
            translateY(-50%) scale(1.15);
    }

}


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

.hero-scroll {

    position: absolute;

    left: 50%;

    bottom: 22px;

    transform:
        translateX(-50%);

    flex-direction: column;

    align-items: center;

    gap: 7px;

    z-index: 10;

    opacity: 0.55;
}


.hero-scroll span {

    color: #ffffff;

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

    font-size: 8px;

    letter-spacing: 2px;
}


.scroll-line {

    width: 1px;

    height: 32px;

    background:
        linear-gradient(
            to bottom,
            #ff7a00,
            transparent
        );
}


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

@media (min-width: 1400px) {

    .hero-heading {
        font-size: 6rem;
    }

    .hero-content {
        padding-left: 20px;
    }

}


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

@media (max-width: 991.98px) {

    .hero-section {
        min-height: 100svh;
    }

    .hero-bg {
        background-position:
            62% center;
    }

    .hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(3, 3, 3, 0.94),
                rgba(3, 3, 3, 0.72)
            );

    }

    .hero-content {

        max-width: 650px;

        margin: 0 auto;

        text-align: center;

        padding-top: 80px;
    }

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

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

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

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

    .hero-right-space {
        display: none;
    }

}


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

@media (max-width: 767.98px) {

    .hero-section {

        min-height: 100svh;

    }


    .hero-bg {

        background-position:
            65% center;

        animation: none;

    }


    .hero-overlay {

        background:

            radial-gradient(
                circle at 70% 42%,
                rgba(255, 122, 0, 0.15),
                transparent 35%
            ),

            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.88),
                rgba(0, 0, 0, 0.82) 45%,
                rgba(0, 0, 0, 0.96) 100%
            );

    }


    .hero-grid {
        opacity: 0.15;
    }


    .hero-content {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .hero-badge {

        font-size: 8px;

        letter-spacing: 1px;

        padding: 8px 12px;

        margin-bottom: 22px;

    }


    .hero-heading {

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

        line-height: 1.02;

        letter-spacing: -2.5px;

        margin-bottom: 23px;

    }


    .hero-heading span::after {

        height: 3px;

        bottom: -7px;

    }


    .hero-text {

        font-size: 12.5px;

        line-height: 1.75;

        max-width: 430px;

        margin-bottom: 28px;

    }


    .hero-buttons {

        flex-direction: column;

        width: 100%;

        gap: 10px !important;

    }


    .btn-main,
    .btn-ghost {

        width: 100%;

        max-width: 340px;

        min-height: 52px;

    }


    .hero-stats {

        margin-top: 35px;

        gap: 13px;

    }


    .hero-stat strong {

        font-size: 14px;

    }


    .hero-stat span {

        font-size: 7px;

        letter-spacing: 0.5px;

    }


    .stat-divider {

        height: 24px;

    }


    .hero-scroll {
        display: none !important;
    }

}


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

@media (max-width: 400px) {

    .hero-content {
        padding-top: 55px;
    }

    .hero-heading {
        font-size: 2.65rem;
    }

    .hero-text {
        font-size: 12px;
    }

    .hero-stats {
        gap: 9px;
    }

}
    /* sectione0end-1 */





    /* sectione-3 */
/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    position: relative;
    width: 100%;
    padding: 120px 0 125px;
    overflow: hidden;
    background: #ffffff;
    isolation: isolate;
}


/* =========================================================
   SOFT BACKGROUND
========================================================= */

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

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(255, 122, 0, 0.06) 0%,
            rgba(255, 122, 0, 0.025) 35%,
            transparent 70%
        );

    z-index: -3;

    pointer-events: none;
}


/* =========================================================
   CHESS BACKGROUND
========================================================= */

.about-chess-bg {
    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

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

    z-index: -2;

    opacity: 0.035;

    pointer-events: none;
}


.about-chess-bg::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    border: 1px solid #ff7a00;

    border-radius: 50%;

    transform: rotate(45deg);
}


.about-chess-bg::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border: 1px dashed #ff7a00;

    border-radius: 50%;
}


.about-chess-bg i {
    color: #ff7a00;
    font-size: 280px;
}


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

.about-content {
    position: relative;

    max-width: 850px;

    margin: 0 auto;
}


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

.about-label {
    display: flex;

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

    gap: 14px;

    margin-bottom: 23px;

    color: #e86d00;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


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

    background: #ff7a00;
}


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

.about-heading {
    margin: 0 auto;

    color: #111111;

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

    font-size: clamp(2.7rem, 5vw, 4.6rem);

    font-weight: 750;

    line-height: 1.08;

    letter-spacing: -2.8px;
}


.about-heading span {
    color: #ff7a00;
}


/* =========================================================
   MAIN PARAGRAPH
========================================================= */

.about-description {
    max-width: 720px;

    margin: 30px auto 0;

    color: #606060;

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

    font-size: 15px;

    font-weight: 400;

    line-height: 1.9;
}


/* =========================================================
   FEATURES
========================================================= */

.about-features {
    margin-top: 48px;
}


.about-feature {
    height: 100%;

    padding: 27px 20px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 15px;

    transition: all 0.3s ease;
}


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

    border-color: rgba(255, 122, 0, 0.28);

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


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

.feature-icon {
    width: 50px;
    height: 50px;

    margin: 0 auto 16px;

    display: flex;

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

    border-radius: 14px;

    background: #fff1e5;

    color: #ff7a00;

    font-size: 17px;
}


.about-feature h4 {
    margin: 0 0 8px;

    color: #161616;

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

    font-size: 15px;

    font-weight: 700;
}


.about-feature p {
    margin: 0;

    color: #777777;

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

    font-size: 11px;

    line-height: 1.75;
}


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

.about-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 38px;

    padding: 12px 21px;

    border: 1px solid #ff7a00;

    border-radius: 8px;

    color: #e96f00;

    background: transparent;

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

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}


.about-link i {
    font-size: 10px;

    transition: transform 0.3s ease;
}


.about-link:hover {
    color: #ffffff;

    background: #ff7a00;

    transform: translateY(-2px);
}


.about-link:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991.98px) {

    .about-section {
        padding: 100px 0 110px;
    }

}


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

@media (max-width: 767.98px) {

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


    .about-label {
        font-size: 8px;
        letter-spacing: 1.7px;
        gap: 9px;
    }


    .label-line {
        width: 25px;
    }


    .about-heading {
        font-size: 2.45rem;
        letter-spacing: -1.5px;
    }


    .about-description {
        font-size: 13px;
        line-height: 1.8;

        margin-top: 23px;
    }


    .about-features {
        margin-top: 32px;
    }


    .about-feature {
        padding: 22px 15px;
    }


    .about-feature p {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }


    .about-chess-bg {
        width: 400px;
        height: 400px;
    }


    .about-chess-bg i {
        font-size: 170px;
    }

}


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

@media (max-width: 400px) {

    .about-heading {
        font-size: 2.2rem;
    }

}

    /* sectione-3 */





    /* sectione-3 */
/* =========================================================
   CHESS PROGRAMS SECTION
========================================================= */

.programs-section {
    position: relative;

    padding: 115px 0 125px;

    background: #f8f7f4;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

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

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -180px;

    border-radius: 50%;

    background:
        rgba(255, 122, 0, 0.045);

    filter: blur(10px);

    pointer-events: none;
}


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

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -200px;
    left: -150px;

    border-radius: 50%;

    background:
        rgba(255, 122, 0, 0.035);

    pointer-events: none;
}


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

.programs-header {
    position: relative;

    z-index: 2;
}


.programs-label {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    color: #e66d00;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.programs-label span {
    width: 32px;

    height: 1px;

    background: #ff7a00;
}


.programs-heading {
    margin: 0;

    color: #151515;

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

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

    font-weight: 750;

    line-height: 1.1;

    letter-spacing: -2px;
}


.programs-heading span {
    color: #ff7a00;
}


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

    margin: 22px auto 0;

    color: #737373;

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

    font-size: 14px;

    line-height: 1.8;
}


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

.program-card {
    position: relative;

    height: 100%;

    padding: 38px 32px 35px;

    background: #ffffff;

    border: 1px solid #e9e7e3;

    border-radius: 18px;

    overflow: hidden;

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


.program-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(255, 122, 0, 0.28);

    box-shadow:
        0 22px 55px
        rgba(35, 25, 15, 0.10);
}


/* =========================================================
   CARD TOP NUMBER
========================================================= */

.program-number {
    position: absolute;

    top: 22px;
    right: 25px;

    color:
        rgba(255, 122, 0, 0.10);

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

    font-size: 55px;

    font-weight: 800;

    line-height: 1;
}


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

.program-icon {
    width: 55px;
    height: 55px;

    display: flex;

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

    margin-bottom: 27px;

    border-radius: 15px;

    color: #ff7a00;

    background:
        #fff2e7;

    border:
        1px solid
        rgba(255, 122, 0, 0.10);

    font-size: 19px;
}


/* =========================================================
   LEVEL
========================================================= */

.program-level {
    display: block;

    margin-bottom: 9px;

    color: #ff7a00;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.program-card h3 {
    margin: 0 0 13px;

    color: #171717;

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

    font-size: 23px;

    font-weight: 700;

    letter-spacing: -0.5px;
}


/* =========================================================
   CARD TEXT
========================================================= */

.program-card p {
    min-height: 105px;

    margin: 0;

    color: #747474;

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

    font-size: 12px;

    line-height: 1.8;
}


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

.program-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 27px;

    color: #222222;

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

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}


.program-link i {
    color: #ff7a00;

    font-size: 9px;

    transition:
        transform 0.3s ease;
}


.program-link:hover {
    color: #ff7a00;
}


.program-link:hover i {
    transform:
        translateX(5px);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.program-card-featured {
    border-color:
        rgba(255, 122, 0, 0.28);

    box-shadow:
        0 12px 35px
        rgba(255, 122, 0, 0.08);
}


.program-card-featured::before {
    content: "";

    position: absolute;

    top: 0;
    left: 30px;
    right: 30px;

    height: 3px;

    border-radius:
        0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            #ff7200,
            #ffad65
        );
}


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

@media (max-width: 991.98px) {

    .programs-section {
        padding:
            95px 0 105px;
    }


    .program-card {
        padding:
            32px 27px;
    }

}


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

@media (max-width: 767.98px) {

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


    .programs-label {
        font-size: 8px;

        letter-spacing: 1.8px;
    }


    .programs-label span {
        width: 22px;
    }


    .programs-heading {
        font-size: 2.45rem;

        letter-spacing: -1.5px;
    }


    .programs-intro {
        font-size: 12px;

        line-height: 1.75;

        padding: 0 8px;
    }


    .program-card {
        padding:
            30px 24px;
    }


    .program-card p {
        min-height: auto;
    }


    .program-number {
        font-size: 45px;

        top: 18px;
        right: 20px;
    }

}
    /* sectione-3 */




    /* sectione-4 */
/* =========================================================
   KIDS LEARNING SECTION — MODERN DARK
========================================================= */

.kids-learning-section {
    position: relative;
    padding: 130px 0 110px;
    overflow: hidden;
    background: #0a0a0a;
}

.kids-learning-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -280px;
    top: 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 0, 0.12) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.kids-learning-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -220px;
    bottom: -150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 0, 0.08) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}

/* CONTENT */
.kids-content {
    position: relative;
    z-index: 2;
    padding-right: 35px;
}

/* LABEL */
.kids-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 8px 16px;
    color: #ff9533;
    background: rgba(255, 122, 0, 0.08);
    border: 1px solid rgba(255, 122, 0, 0.25);
    border-radius: 50px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.kids-label span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a00;
    box-shadow: 0 0 10px #ff7a00;
}

/* HEADING */
.kids-heading {
    margin: 0 0 25px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.6rem, 4.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
}

.kids-heading span {
    color: #ff7a00;
    position: relative;
    display: inline-block;
}

.kids-heading span::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7a00, #ff9533, transparent);
    border-radius: 4px;
    opacity: 0.5;
}

/* DESCRIPTION */
.kids-description {
    max-width: 590px;
    margin: 0 0 32px;
    color: rgba(255, 255, 255, 0.65);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.9;
}

/* BENEFITS */
.kids-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 600px;
    margin-bottom: 35px;
}

.kids-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.kids-benefit:hover {
    background: rgba(255, 122, 0, 0.08);
    border-color: rgba(255, 122, 0, 0.25);
    transform: translateY(-3px);
}

.kids-benefit-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ff7a00;
    background: rgba(255, 122, 0, 0.12);
    border: 1px solid rgba(255, 122, 0, 0.2);
    transition: all 0.3s ease;
}

.kids-benefit-icon svg {
    width: 20px;
    height: 20px;
}

.kids-benefit:hover .kids-benefit-icon {
    background: linear-gradient(135deg, #ff7a00, #ff9533);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(255, 122, 0, 0.35);
}

.kids-benefit strong {
    display: block;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.kids-benefit span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
}

/* ACTIONS */
.kids-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.kids-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 24px;
    border-radius: 50px;
    color: #ffffff;
    background: linear-gradient(135deg, #ff7200, #ff9b45);
    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(255, 122, 0, 0.28);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.kids-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(255, 122, 0, 0.45);
}

.kids-btn svg {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
}

.kids-btn:hover svg {
    transform: translateX(4px);
}

/* WATCH */
.kids-watch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.kids-play {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 122, 0, 0.4);
    border-radius: 50%;
    color: #ff7a00;
    background: rgba(255, 122, 0, 0.08);
    transition: all 0.3s ease;
}

.kids-play svg {
    width: 12px;
    height: 12px;
    margin-left: 2px;
}

.kids-watch:hover {
    color: #ffffff;
}

.kids-watch:hover .kids-play {
    border-color: #ff7a00;
    background: rgba(255, 122, 0, 0.2);
    transform: scale(1.08);
}

/* IMAGE AREA */
.kids-image-area {
    position: relative;
    min-height: 570px;
    z-index: 2;
}

/* MAIN IMAGE */
.kids-main-image {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 82%;
    height: 510px;
    overflow: hidden;
    border-radius: 28px 28px 80px 28px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.kids-main-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.4));
}

.kids-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.kids-image-area:hover .kids-main-image img {
    transform: scale(1.05);
}

/* SMALL IMAGE */
.kids-small-image {
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 180px;
    height: 205px;
    padding: 7px;
    background: #1a1a1a;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    transform: rotate(-5deg);
    z-index: 4;
    border: 1px solid rgba(255, 122, 0, 0.2);
}

.kids-small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

/* QUOTE */
.kids-quote {
    position: absolute;
    right: -10px;
    bottom: 15px;
    width: 205px;
    padding: 18px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 122, 0, 0.25);
    border-radius: 15px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.quote-icon svg {
    width: 18px;
    height: 18px;
    fill: #ff7a00;
}

.kids-quote p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.65;
}

/* CHESS DECORATION */
.kids-chess-decoration {
    position: absolute;
    top: -25px;
    right: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 122, 0, 0.15);
    z-index: 1;
}

.kids-chess-decoration svg {
    width: 70px;
    height: 70px;
}

/* STATS */
.kids-stats {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 85px;
    padding: 30px 25px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 122, 0, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.kids-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kids-stat > svg {
    width: 22px;
    height: 22px;
    color: #ff7a00;
    flex-shrink: 0;
}

.kids-stat strong {
    display: block;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.kids-stat span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.kids-stat-line {
    width: 1px;
    height: 40px;
    background: rgba(255, 122, 0, 0.2);
}

/* TABLET */
@media (max-width: 991.98px) {

    .kids-learning-section {
        padding: 100px 0 90px;
    }

    .kids-content {
        padding-right: 0;
        text-align: center;
    }

    .kids-label {
        justify-content: center;
    }

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

    .kids-benefits {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .kids-actions {
        justify-content: center;
    }

    .kids-image-area {
        max-width: 650px;
        margin: 45px auto 0;
    }

    .kids-stats {
        margin-top: 60px;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
}

/* MOBILE */
@media (max-width: 767.98px) {

    .kids-learning-section {
        padding: 80px 0 70px;
    }

    .kids-heading {
        font-size: 2.4rem;
        letter-spacing: -1.2px;
    }

    .kids-description {
        font-size: 12.5px;
        line-height: 1.8;
    }

    .kids-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .kids-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .kids-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .kids-image-area {
        min-height: 480px;
        margin-top: 30px;
    }

    .kids-main-image {
        width: 82%;
        height: 400px;
        right: 0;
        border-radius: 22px 22px 55px 22px;
    }

    .kids-small-image {
        width: 125px;
        height: 150px;
        bottom: 45px;
    }

    .kids-quote {
        width: 160px;
        right: 0;
        bottom: 5px;
        padding: 14px;
    }

    .kids-quote p {
        font-size: 8px;
    }

    .kids-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        margin-top: 50px;
        padding: 25px 15px;
    }

    .kids-stat-line {
        display: none;
    }

    .kids-stat {
        justify-content: center;
    }

    .kids-stat strong {
        font-size: 16px;
    }
}

/* SMALL MOBILE */
@media (max-width: 400px) {

    .kids-heading {
        font-size: 2.1rem;
    }

    .kids-main-image {
        height: 360px;
    }

    .kids-image-area {
        min-height: 430px;
    }

    .kids-small-image {
        width: 110px;
        height: 135px;
    }
}

    /* sectione-4 */






    /* sectione-5 */
/* =========================================================
   HOW WE TEACH — MODERN PREMIUM VERSION
========================================================= */

.how-we-teach-section {
    position: relative;
    padding: 130px 0;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255, 114, 0, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(255, 114, 0, 0.06),
            transparent 25%
        ),
        #0a0a0a;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.how-we-teach-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 114, 0, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 114, 0, 0.022) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 78%
        );

    pointer-events: none;
}


/* Orange Glow */

.how-we-teach-section::after {
    content: "";
    position: absolute;

    width: 650px;
    height: 650px;

    top: -350px;
    right: -220px;

    background:
        radial-gradient(
            circle,
            rgba(255, 114, 0, 0.17) 0%,
            rgba(255, 114, 0, 0.04) 38%,
            transparent 72%
        );

    filter: blur(30px);
    pointer-events: none;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.how-we-teach-section .container {
    position: relative;
    z-index: 2;
}


.teach-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;
    padding: 8px 15px;

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

    border: 1px solid rgba(255, 114, 0, 0.22);

    border-radius: 100px;

    color: #ff9533;

    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2.5px;
    text-transform: uppercase;

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


.teach-label span {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #ff7200;

    box-shadow:
        0 0 0 4px rgba(255, 114, 0, 0.08),
        0 0 18px rgba(255, 114, 0, 0.8);

    animation: teachDotPulse 2s ease-in-out infinite;
}


@keyframes teachDotPulse {

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

    50% {
        transform: scale(1.35);
        opacity: .65;
    }
}


/* Heading */

.teach-heading {
    margin: 0;

    color: #fff;

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

    font-size: clamp(
        2.4rem,
        4.5vw,
        4.2rem
    );

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2.8px;
}


.teach-heading span {
    position: relative;

    display: inline-block;

    color: #ff7200;
}


.teach-heading span::after {
    content: "";

    position: absolute;

    left: 4px;
    right: 8px;
    bottom: 1px;

    height: 7px;

    background:
        linear-gradient(
            90deg,
            #ff7200,
            #ff9533,
            transparent
        );

    border-radius: 20px;

    opacity: .35;

    z-index: -1;
}


/* Intro */

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

    margin: 24px auto 0;

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

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

    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   MAIN AREA
========================================================= */

.teach-main-row {
    position: relative;

    margin-top: 75px;

    z-index: 3;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.teach-visual {
    position: relative;

    padding: 20px 25px 25px 20px;
}


/* Main image */

.teach-image-main {
    position: relative;

    height: 590px;

    overflow: hidden;

    border-radius: 30px;

    background: #141414;

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

    box-shadow:
        0 35px 90px rgba(0, 0, 0, .65),
        0 0 0 1px rgba(255, 114, 0, .05);
}


.teach-image-main::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 114, 0, .10),
            transparent 35%
        );

    z-index: 1;

    pointer-events: none;
}


.teach-image-main::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(0, 0, 0, .15) 55%,
            rgba(0, 0, 0, .72) 100%
        );

    pointer-events: none;
}


.teach-image-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.22, 1, .36, 1),
        filter .6s ease;
}


.teach-image-main:hover img {
    transform: scale(1.055);

    filter: saturate(1.08);
}


/* =========================================================
   IMAGE BADGE
========================================================= */

.teach-image-badge {
    position: absolute;

    top: 20px;
    left: 20px;

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

    gap: 9px;

    padding: 9px 15px;

    background: rgba(10, 10, 10, .72);

    border: 1px solid rgba(255, 114, 0, .28);

    border-radius: 100px;

    color: #fff;

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

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

    letter-spacing: .5px;

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

    z-index: 5;
}


.badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, .10),
        0 0 12px rgba(34, 197, 94, .8);

    animation: livePulse 1.7s ease-in-out infinite;
}


@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* =========================================================
   IMAGE CORNERS
========================================================= */

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

    position: absolute;

    width: 155px;
    height: 155px;

    top: 0;
    left: 0;

    border-top: 2px solid #ff7200;
    border-left: 2px solid #ff7200;

    border-radius: 24px 0 0 0;

    opacity: .85;

    z-index: 4;

    pointer-events: none;
}


.teach-visual::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: 0;
    bottom: 0;

    border-right: 2px solid rgba(255, 114, 0, .55);
    border-bottom: 2px solid rgba(255, 114, 0, .55);

    border-radius: 0 0 24px 0;

    z-index: 4;

    pointer-events: none;
}


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

.teach-floating-card {
    position: absolute;

    left: -5px;
    bottom: 60px;

    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 225px;

    padding: 15px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(28, 28, 28, .96),
            rgba(14, 14, 14, .96)
        );

    border: 1px solid rgba(255, 114, 0, .28);

    border-radius: 18px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .55),
        0 0 30px rgba(255, 114, 0, .05);

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

    z-index: 8;

    animation: teachFloat 4.5s ease-in-out infinite;
}


@keyframes teachFloat {

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

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


.teach-floating-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ff7200,
            #ff9b45
        );

    color: #fff;

    box-shadow:
        0 10px 25px rgba(255, 114, 0, .28);
}


.teach-floating-icon svg {
    width: 21px;
    height: 21px;
}


.teach-floating-card strong {
    display: block;

    color: #fff;

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

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


.teach-floating-card span {
    display: block;

    margin-top: 3px;

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

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

    font-size: 10px;
}


/* =========================================================
   CHESS BOARD DECORATION
========================================================= */

.teach-board-decoration {
    position: absolute;

    right: -2px;
    top: 55px;

    width: 78px;
    height: 78px;

    display: grid;

    grid-template-columns:
        repeat(3, 26px);

    transform:
        perspective(400px)
        rotate(8deg)
        rotateX(8deg);

    z-index: 6;

    filter:
        drop-shadow(
            0 15px 25px rgba(0, 0, 0, .5)
        );
}


.teach-board-decoration span {
    width: 26px;
    height: 26px;

    background:
        rgba(255, 114, 0, .07);

    border:
        1px solid rgba(255, 114, 0, .16);
}


.teach-board-decoration span:nth-child(even) {
    background: #ff7200;

    border-color: #ff7200;

    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, .08);
}


/* =========================================================
   RIGHT SIDE — MODERN STEPS
========================================================= */

.teach-content {
    padding-left: 20px;
}


.teach-step {
    position: relative;

    display: flex;

    gap: 18px;

    padding: 20px;

    margin-bottom: 14px;

    border-radius: 20px;

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

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .035),
            rgba(255, 255, 255, .012)
        );

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


.teach-step:last-child {
    margin-bottom: 0;
}


.teach-step:hover {
    transform: translateX(7px);

    border-color:
        rgba(255, 114, 0, .30);

    background:
        linear-gradient(
            135deg,
            rgba(255, 114, 0, .075),
            rgba(255, 255, 255, .018)
        );

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


/* Step Number */

.teach-step-number {
    width: 47px;
    height: 47px;

    flex: 0 0 47px;

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

    margin-top: 2px;

    border-radius: 14px;

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

    border:
        1px solid rgba(255, 114, 0, .24);

    color: #ff7200;

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

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

    transition:
        .35s cubic-bezier(.22, 1, .36, 1);

    position: relative;

    z-index: 2;
}


.teach-step:hover .teach-step-number {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff7200,
            #ff9838
        );

    border-color: #ff7200;

    transform:
        translateY(-2px)
        rotate(-3deg);

    box-shadow:
        0 10px 25px rgba(255, 114, 0, .28);
}


/* Remove old connecting timeline */

.teach-step-line {
    display: none;
}


/* Step Content */

.teach-step-content {
    padding-top: 1px;
}


.teach-step-label {
    display: block;

    margin-bottom: 5px;

    color: #ff7200;

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

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

    letter-spacing: 2px;
}


.teach-step-content h3 {
    margin: 0 0 7px;

    color: #fff;

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

    font-size: 19px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -.3px;

    transition: color .3s ease;
}


.teach-step:hover .teach-step-content h3 {
    color: #ff9533;
}


.teach-step-content p {
    max-width: 510px;

    margin: 0;

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

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

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   BOTTOM FEATURES
========================================================= */

.teach-feature-strip {
    position: relative;

    z-index: 4;

    margin-top: 75px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .012)
        );

    border:
        1px solid rgba(255, 114, 0, .16);

    border-radius: 22px;

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

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .32);
}


.teach-feature {
    position: relative;

    min-height: 110px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 25px 28px;

    transition:
        background .35s ease;
}


.teach-feature::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ff7200,
            #ff9533,
            transparent
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}


.teach-feature:hover {
    background:
        rgba(255, 114, 0, .045);
}


.teach-feature:hover::after {
    transform: scaleX(1);
}


.teach-feature + .teach-feature {
    border-left:
        1px solid rgba(255, 255, 255, .055);
}


/* Feature Icon */

.teach-feature-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 14px;

    background:
        rgba(255, 114, 0, .075);

    border:
        1px solid rgba(255, 114, 0, .18);

    color: #ff7200;

    transition:
        all .4s cubic-bezier(.22, 1, .36, 1);
}


.teach-feature-icon svg {
    width: 20px;
    height: 20px;
}


.teach-feature:hover .teach-feature-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff7200,
            #ff9533
        );

    border-color: #ff7200;

    transform:
        scale(1.08)
        rotate(-4deg);

    box-shadow:
        0 10px 25px rgba(255, 114, 0, .28);
}


.teach-feature strong {
    display: block;

    color: #fff;

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

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


.teach-feature span {
    display: block;

    margin-top: 4px;

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

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

    font-size: 10px;
}


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

@media (max-width: 991px) {

    .how-we-teach-section {
        padding: 100px 0;
    }

    .teach-main-row {
        margin-top: 60px;
    }

    .teach-visual {
        padding: 15px;
    }

    .teach-image-main {
        height: 500px;
    }

    .teach-content {
        padding-left: 0;
        margin-top: 25px;
    }

    .teach-step {
        padding: 18px;
    }

    .teach-feature {
        padding: 22px 18px;
    }

}


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

@media (max-width: 767px) {

    .how-we-teach-section {
        padding: 80px 0;
    }

    .teach-heading {
        font-size: 2.15rem;
        line-height: 1.08;
        letter-spacing: -1.5px;
    }

    .teach-heading span::after {
        height: 5px;
    }

    .teach-intro {
        font-size: 12.5px;
        line-height: 1.75;
        padding: 0 8px;
    }

    .teach-main-row {
        margin-top: 48px;
    }

    .teach-visual {
        padding: 10px;
    }

    .teach-image-main {
        height: 410px;
        border-radius: 23px;
    }

    .teach-image-badge {
        top: 14px;
        left: 14px;
        padding: 7px 11px;
        font-size: 9px;
    }

    .teach-floating-card {
        left: -3px;
        bottom: 32px;

        min-width: 195px;

        padding: 12px 14px;

        border-radius: 15px;
    }

    .teach-floating-icon {
        width: 41px;
        height: 41px;
        flex-basis: 41px;
        border-radius: 12px;
    }

    .teach-floating-icon svg {
        width: 18px;
        height: 18px;
    }

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

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

    .teach-board-decoration {
        right: -3px;
        top: 25px;

        transform:
            scale(.68)
            rotate(8deg);
    }

    .teach-content {
        margin-top: 25px;
    }

    .teach-step {
        gap: 13px;

        padding: 16px;

        margin-bottom: 10px;

        border-radius: 17px;
    }

    .teach-step-number {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 12px;

        font-size: 10px;
    }

    .teach-step-label {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .teach-step-content h3 {
        font-size: 17px;
    }

    .teach-step-content p {
        font-size: 11px;
        line-height: 1.7;
    }

    .teach-step:hover {
        transform: translateX(3px);
    }

    .teach-feature-strip {
        margin-top: 45px;
        border-radius: 18px;
    }

    .teach-feature {
        min-height: auto;

        padding: 19px 18px;
    }

    .teach-feature + .teach-feature {
        border-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, .055);
    }

    .teach-feature-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;

        border-radius: 12px;
    }

    .teach-feature strong {
        font-size: 12px;
    }

    .teach-feature span {
        font-size: 9px;
    }

}


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

@media (max-width: 400px) {

    .how-we-teach-section {
        padding: 65px 0;
    }

    .teach-heading {
        font-size: 1.85rem;
    }

    .teach-image-main {
        height: 350px;
    }

    .teach-step {
        padding: 14px;
    }

    .teach-step-number {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .teach-step-content h3 {
        font-size: 16px;
    }

    .teach-step-content p {
        font-size: 10.5px;
    }

}
    /* sectione-5 */









    /* sectione -6 */
/* =========================================================
   INSIDE THE ACADEMY — WHITE PREMIUM
========================================================= */

.academy-life-section {
    position: relative;
    padding: 140px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Grid pattern */
.academy-life-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 122, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 0, 0.04) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    pointer-events: none;
}

/* Orange glow top-left */
.academy-life-section::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -300px;
    top: 25%;
    background: radial-gradient(circle, rgba(255, 114, 0, 0.07) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}

/* Bottom-right glow */
.academy-life-section .container::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(255, 114, 0, 0.05) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.academy-life-section .container {
    position: relative;
    z-index: 2;
}


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

.academy-life-header {
    margin-bottom: 70px;
}

.academy-life-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 9px 20px;
    background: rgba(255, 114, 0, 0.06);
    border: 1px solid rgba(255, 114, 0, 0.22);
    border-radius: 50px;
    color: #e66d00;
    font-family: "Poppins", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 122, 0, 0.06);
}

.academy-life-label span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7200;
    box-shadow: 0 0 10px rgba(255, 114, 0, 0.6);
    animation: dotPulse 2s infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.academy-life-heading {
    margin: 0;
    color: #151515;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -2.5px;
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

.academy-life-heading span {
    color: #ff7200;
    position: relative;
    /* display: inline-block; */
}

.academy-life-heading span::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff7200, #ff9533, transparent);
    border-radius: 5px;
    opacity: 0.35;
    z-index: -1;
}

.academy-life-intro {
    max-width: 390px;
    margin: 0 0 8px auto;
    color: #666666;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    line-height: 1.85;
}


/* =========================================================
   GALLERY
========================================================= */

.academy-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1.45fr 0.8fr;
    grid-template-rows: 275px 275px;
    gap: 16px;
    min-height: 566px;
}


/* MAIN IMAGE */
.academy-gallery-main {
    position: relative;
    grid-row: 1 / 3;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #edeae4;
    background: #f5f5f5;
    box-shadow: 
        0 1px 1px rgba(0, 0, 0, 0.02),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 15px 35px rgba(0, 0, 0, 0.06),
        0 30px 60px rgba(255, 122, 0, 0.06);
}

.academy-gallery-main img,
.academy-gallery-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.academy-gallery-main:hover img,
.academy-gallery-small:hover img {
    transform: scale(1.08);
}

.academy-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7));
    pointer-events: none;
}


/* Caption */
.academy-image-caption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 3;
}

.academy-image-caption > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff7200, #ff9533);
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(255, 114, 0, 0.4);
}

.academy-image-caption strong {
    display: block;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.academy-image-caption small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-family: "Poppins", sans-serif;
    font-size: 10.5px;
}


/* SMALL IMAGES */
.academy-gallery-small {
    position: relative;
    overflow: hidden;
    border-radius: 23px;
    border: 1px solid #edeae4;
    background: #f5f5f5;
    box-shadow: 
        0 1px 1px rgba(0, 0, 0, 0.02),
        0 4px 10px rgba(0, 0, 0, 0.04),
        0 15px 35px rgba(0, 0, 0, 0.05);
}

.academy-gallery-small::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.academy-small-label {
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 114, 0, 0.2);
    border-radius: 100px;
    color: #333333;
    font-family: "Poppins", sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 3;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.academy-small-label span {
    color: #ff7200;
    font-weight: 800;
}


/* =========================================================
   EXPERIENCE CARD
========================================================= */

.academy-experience-card {
    position: absolute;
    left: 42%;
    bottom: -32px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 22px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #edeae4;
    border-radius: 18px;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 25px 55px rgba(255, 122, 0, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 5;
    animation: floatCard 4s ease-in-out infinite;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.academy-experience-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #ff7200, #ff9838);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(255, 114, 0, 0.4);
}

.academy-experience-icon svg {
    width: 22px;
    height: 22px;
}

.academy-experience-card strong {
    display: block;
    color: #171717;
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
}

.academy-experience-card span {
    display: block;
    margin-top: 3px;
    color: #999999;
    font-family: "Poppins", sans-serif;
    font-size: 9.5px;
}


/* =========================================================
   MINI CHESS BOARD
========================================================= */

.academy-mini-board {
    position: absolute;
    right: -28px;
    top: -28px;
    width: 96px;
    height: 96px;
    display: grid;
    grid-template-columns: repeat(4, 24px);
    transform: rotate(8deg);
    z-index: 5;
    filter: drop-shadow(0 15px 25px rgba(255, 122, 0, 0.2));
}

.academy-mini-board span {
    width: 24px;
    height: 24px;
    background: rgba(255, 114, 0, 0.08);
    border: 1px solid rgba(255, 114, 0, 0.15);
}

.academy-mini-board span:nth-child(even) {
    background: #ff7200;
    border-color: #ff7200;
    box-shadow: 0 0 12px rgba(255, 114, 0, 0.3);
}


/* =========================================================
   BOTTOM POINTS
========================================================= */

.academy-life-bottom {
    margin-top: 85px;
}

.academy-life-point {
    display: flex;
    gap: 18px;
    padding: 0 35px 0 0;
    position: relative;
}

.academy-life-point::after {
    content: "";
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 114, 0, 0.25), transparent);
}

.academy-life-point:last-child::after {
    display: none;
}

.point-number {
    flex: 0 0 auto;
    color: #ff7200;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding-top: 2px;
}

.academy-life-point strong {
    display: block;
    color: #171717;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.academy-life-point:hover strong {
    color: #ff7200;
}

.academy-life-point p {
    margin: 6px 0 0;
    color: #777777;
    font-family: "Poppins", sans-serif;
    font-size: 10.5px;
    line-height: 1.75;
}


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

@media (max-width: 991px) {

    .academy-life-section {
        padding: 100px 0;
    }

    .academy-life-header {
        margin-bottom: 50px;
    }

    .academy-life-intro {
        margin: 20px 0 0;
    }

    .academy-gallery {
        grid-template-columns: 1.3fr 0.9fr;
        grid-template-rows: 230px 230px;
        min-height: 474px;
    }

    .academy-life-point {
        padding-right: 18px;
    }

    .academy-life-bottom {
        margin-top: 70px;
    }
}


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

@media (max-width: 767px) {

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

    .academy-life-heading {
        font-size: 2.2rem;
        letter-spacing: -1.5px;
    }

    .academy-life-intro {
        font-size: 12px;
        margin-top: 18px;
    }

    .academy-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 330px 190px;
        gap: 10px;
        min-height: auto;
        margin-top: 40px;
    }

    .academy-gallery-main {
        grid-column: 1 / 3;
        grid-row: 1;
        border-radius: 22px;
    }

    .academy-gallery-small {
        border-radius: 18px;
    }

    .academy-gallery-top {
        grid-column: 1;
        grid-row: 2;
    }

    .academy-gallery-bottom {
        grid-column: 2;
        grid-row: 2;
    }

    .academy-image-caption {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .academy-image-caption > span {
        width: 38px;
        height: 38px;
        font-size: 11px;
    }

    .academy-image-caption strong {
        font-size: 14px;
    }

    .academy-image-caption small {
        font-size: 9.5px;
    }

    .academy-experience-card {
        left: 50%;
        transform: translateX(-50%);
        bottom: -30px;
        width: max-content;
        max-width: 92%;
        padding: 13px 18px;
    }

    .academy-experience-icon {
        width: 42px;
        height: 42px;
    }

    .academy-experience-icon svg {
        width: 20px;
        height: 20px;
    }

    .academy-mini-board {
        width: 72px;
        height: 72px;
        grid-template-columns: repeat(4, 18px);
        right: -10px;
        top: -10px;
    }

    .academy-mini-board span {
        width: 18px;
        height: 18px;
    }

    .academy-life-bottom {
        margin-top: 70px;
    }

    .academy-life-point {
        padding: 18px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .academy-life-point::after {
        display: none;
    }

    .academy-life-point:last-child {
        border-bottom: 0;
    }

    .academy-life-point p {
        max-width: 290px;
    }
}


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

@media (max-width: 400px) {

    .academy-life-heading {
        font-size: 1.95rem;
    }

    .academy-gallery {
        grid-template-rows: 280px 160px;
    }

    .academy-experience-card {
        padding: 12px 16px;
    }

    .academy-experience-card strong {
        font-size: 10.5px;
    }
}
    
    /* sectione-6 */




    /* sectione-7 */

/* =========================================================
   TOPPERS / YOUNG CHAMPIONS
========================================================= */

.toppers-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 114, 0, 0.10), transparent 34%),
        #0a0a0a;
    color: #fff;
}

.toppers-bg-piece {
    position: absolute;
    right: -100px;
    top: 80px;
    font-size: 480px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.018);
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;
}

.toppers-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.35;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 70px 70px;
}

/* Header */
.toppers-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ff9533;
}

.toppers-label span {
    width: 35px;
    height: 1px;
    background: #ff7200;
}

.toppers-heading {
    margin: 0;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -3px;
}

.toppers-heading span {
    color: #ff7200;
}

.toppers-intro {
    max-width: 600px;
    margin: 25px auto 0;
    color: #999;
    font-size: 15px;
    line-height: 1.8;
}

/* Wrapper */
.toppers-carousel-wrap {
    position: relative;
    z-index: 2;
    margin-top: 75px;
    padding: 0 50px;
}

.toppers-carousel {
    position: relative;
}

.toppers-carousel .toppers-slide {
    padding: 40px 15px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================================
   ✅ CENTER MODE — SAB SAME, CENTER WALI BADI
========================================================= */

.toppers-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.toppers-carousel .owl-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Default: sab chhote */
.toppers-carousel .owl-item .topper-featured-card {
    transform: scale(0.85);
    opacity: 0.55;
    filter: brightness(0.6);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover pe side wali bright */
.toppers-carousel .owl-item:hover .topper-featured-card {
    opacity: 0.85;
    filter: brightness(0.85);
}

/* ✅ CENTER wali BADI */
.toppers-carousel .owl-item.center {
    z-index: 10;
}

.toppers-carousel .owl-item.center .topper-featured-card {
    transform: scale(1.1);
    opacity: 1;
    filter: brightness(1);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 114, 0, 0.22);
    border-color: rgba(255, 114, 0, 0.5);
}

/* =========================================================
   OWL NAV
========================================================= */

.toppers-carousel .owl-nav button.owl-prev,
.toppers-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid rgba(255, 114, 0, 0.3) !important;
    color: #ff7200 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    z-index: 10;
}

.toppers-carousel .owl-nav button.owl-prev { left: -10px; }
.toppers-carousel .owl-nav button.owl-next { right: -10px; }

.toppers-carousel .owl-nav button.owl-prev:hover,
.toppers-carousel .owl-nav button.owl-next:hover {
    background: #ff7200 !important;
    color: #fff !important;
    border-color: #ff7200 !important;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 15px 40px rgba(255, 114, 0, 0.45);
}

/* Dots */
.toppers-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.toppers-carousel .owl-dots .owl-dot span {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.35s ease;
    margin: 0;
}

.toppers-carousel .owl-dots .owl-dot.active span,
.toppers-carousel .owl-dots .owl-dot:hover span {
    background: linear-gradient(90deg, #ff7200, #ff9533);
    width: 50px;
    box-shadow: 0 0 15px rgba(255, 114, 0, 0.5);
}

/* =========================================================
   FEATURED CARD
========================================================= */

.topper-featured-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 480px;
    min-height: 380px;
    padding: 32px;
    border-radius: 30px;
    background: linear-gradient(145deg, #171717, #0e0e0e);
    border: 1px solid rgba(255,114,0,0.25);
    box-shadow:
        0 30px 90px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.04);
    text-align: center;
    transition: all 0.4s ease;
}

.featured-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    background: rgba(255,114,0,0.13);
    filter: blur(90px);
    pointer-events: none;
}

.featured-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.featured-number {
    font-size: 13px;
    font-weight: 700;
    color: #ff7200;
}

.featured-status {
    padding: 8px 13px;
    border-radius: 30px;
    background: rgba(255,114,0,0.1);
    border: 1px solid rgba(255,114,0,0.2);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ff9533;
}

.featured-crown {
    position: absolute;
    left: 50%;
    top: -5px;
    transform: translateX(-50%);
    color: #ff7200;
    font-size: 18px;
}

.featured-image-wrap {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 38px auto 25px;
}

.featured-ring {
    position: absolute;
    inset: -13px;
    border-radius: 50%;
    border: 1px solid rgba(255,114,0,0.35);
}

.featured-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px dashed rgba(255,114,0,0.3);
}

.featured-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #171717;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background: #222;
}

.featured-medal {
    position: absolute;
    z-index: 4;
    right: -8px;
    bottom: 12px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ff7200;
    color: #111;
    border: 5px solid #171717;
    box-shadow: 0 10px 30px rgba(255,114,0,0.35);
}

.featured-medal i {
    font-size: 20px;
}

.featured-info {
    position: relative;
    z-index: 2;
}

.featured-category {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff7200;
}

.featured-info h3 {
    margin: 8px 0 10px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1px;
}

.featured-info p {
    max-width: 380px;
    margin: 0 auto;
    color: #888;
    font-size: 12px;
    line-height: 1.7;
}

.featured-stats {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 22px;
}

.featured-stats div {
    min-width: 100px;
    border-right: 1px solid rgba(255,255,255,0.07);
}

.featured-stats div:last-child {
    border-right: 0;
}

.featured-stats strong {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.featured-stats span {
    display: block;
    margin-top: 4px;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #666;
}

/* Button */
.toppers-button {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 60px;
    padding: 15px 22px;
    border: 1px solid rgba(255,114,0,0.35);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.toppers-button i {
    color: #ff7200;
    transition: transform 0.3s ease;
}

.toppers-button:hover {
    background: #ff7200;
    border-color: #ff7200;
}

.toppers-button:hover i {
    color: #111;
    transform: translate(3px, -3px);
}

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

@media (max-width: 991px) {
    .toppers-section { padding: 100px 0; }
    .toppers-carousel-wrap { padding: 0 20px; margin-top: 55px; }

    .toppers-carousel .owl-item.center .topper-featured-card {
        transform: scale(1.05);
    }
}

@media (max-width: 767px) {
    .toppers-section { padding: 80px 0; }
    .toppers-heading { font-size: 48px; letter-spacing: -2px; }
    .toppers-intro { font-size: 13px; }
    .toppers-carousel-wrap { margin-top: 45px; padding: 0; }

    .topper-featured-card { padding: 25px 20px; border-radius: 24px; min-height: auto; }
    .featured-image-wrap { width: 200px; height: 200px; }
    .featured-info h3 { font-size: 26px; }
    .featured-stats div { min-width: 80px; }
    .featured-stats strong { font-size: 18px; }

    .toppers-carousel .owl-nav button.owl-prev,
    .toppers-carousel .owl-nav button.owl-next {
        width: 42px;
        height: 42px;
        font-size: 15px !important;
    }

    .toppers-carousel .owl-item.center .topper-featured-card {
        transform: scale(1.02);
    }
}

@media (max-width: 480px) {
    .toppers-heading { font-size: 40px; }
    .featured-image-wrap { width: 170px; height: 170px; }
    .featured-stats div { min-width: 70px; }
    .featured-stats strong { font-size: 16px; }
    .featured-stats span { font-size: 7px; }
    .toppers-carousel .owl-nav { display: none; }
}
    /* sectione-7 */

/* srctione-8 */
/* =========================================================
   CHESS JOURNEY — WHITE PREMIUM
========================================================= */

.chess-journey {
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    background: #ffffff;
    color: #151515;
}

/* Background Word */
.journey-bg-word {
    position: absolute;
    left: 50%;
    bottom: -95px;
    transform: translateX(-50%);
    font-size: clamp(130px, 18vw, 260px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -12px;
    color: rgba(255, 114, 0, 0.045);
    white-space: nowrap;
    pointer-events: none;
}

/* Subtle Grid */
.chess-journey::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 114, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 114, 0, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    pointer-events: none;
}

/* Orange glow top-right */
.chess-journey::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -280px;
    right: -220px;
    background: radial-gradient(circle, rgba(255, 114, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}


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

.journey-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 9px 20px;
    background: rgba(255, 114, 0, 0.06);
    border: 1px solid rgba(255, 114, 0, 0.22);
    border-radius: 50px;
    color: #e66d00;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 122, 0, 0.06);
}

.journey-eyebrow span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7200;
    box-shadow: 0 0 10px rgba(255, 114, 0, 0.6);
    animation: journeyPulse 2s infinite;
}

@keyframes journeyPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.journey-title {
    margin: 0;
    font-size: clamp(48px, 6vw, 60px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -3.5px;
    color: #151515;
}

.journey-title span {
    /* display: block; */
    color: #ff7200;
    position: relative;
}

.journey-title span::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff7200, #ff9533, transparent);
    border-radius: 5px;
    opacity: 0.35;
    z-index: -1;
}

.journey-description {
    max-width: 540px;
    margin: 25px auto 0;
    color: #666;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================================
   TIMELINE
========================================================= */

.journey-timeline {
    position: relative;
    max-width: 1120px;
    height: 680px;
    margin: 90px auto 0;
}

/* Track */
.journey-track {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: rgba(255, 114, 0, 0.12);
    border-radius: 2px;
}

.journey-progress {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #ff7200, transparent);
    box-shadow: 0 0 15px rgba(255, 114, 0, 0.45);
}


/* =========================================================
   CENTER VISUAL
========================================================= */

.journey-visual {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.journey-visual-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 114, 0, 0.18);
    filter: blur(80px);
}

/* Image Frame */
.journey-image-frame {
    position: absolute;
    left: 25px;
    top: 25px;
    width: 350px;
    height: 350px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(255, 114, 0, 0.4);
    box-shadow:
        0 35px 80px rgba(255, 114, 0, 0.15),
        0 15px 40px rgba(0, 0, 0, 0.12);
    background: #f5f5f5;
}

.journey-image-frame::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.journey-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.journey-visual:hover .journey-image-frame img {
    transform: scale(1.07);
}

.journey-image-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 114, 0, 0.22), transparent 55%);
}

/* Image Text */
.journey-image-label {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 45px;
    transform: translateX(-50%);
    width: 190px;
    text-align: center;
}

.journey-image-label small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.journey-image-label strong {
    font-size: 17px;
    line-height: 1.05;
    letter-spacing: 1px;
    color: #ffffff;
    font-weight: 800;
}

/* Orbits */
.journey-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    border: 1px dashed rgba(255, 114, 0, 0.2);
    pointer-events: none;
}

.orbit-1 {
    width: 395px;
    height: 185px;
}

.orbit-2 {
    width: 430px;
    height: 215px;
    transform: translate(-50%, -50%) rotate(62deg);
}

/* King Badge */
.journey-king {
    position: absolute;
    z-index: 7;
    right: -6px;
    bottom: 22px;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7200, #ff9533);
    color: #ffffff;
    border: 5px solid #ffffff;
    box-shadow: 0 15px 40px rgba(255, 114, 0, 0.35);
    animation: kingFloat 3s ease-in-out infinite;
}

@keyframes kingFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.journey-king i {
    font-size: 22px;
}


/* =========================================================
   STEP CARDS — 3D WHITE
========================================================= */

.journey-card {
    position: absolute;
    z-index: 8;
    width: 260px;
    padding: 24px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #f0ebe4;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.02),
        0 4px 10px rgba(0, 0, 0, 0.03),
        0 18px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 114, 0, 0.35);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.02),
        0 8px 16px rgba(0, 0, 0, 0.05),
        0 25px 55px rgba(255, 114, 0, 0.12);
}

/* Positions */
.journey-card-1 { left: 0; top: 45px; }
.journey-card-2 { right: 0; top: 45px; }
.journey-card-3 { left: 0; bottom: 45px; }
.journey-card-4 { right: 0; bottom: 45px; }

/* Icon */
.journey-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff5ec, #ffeee0);
    border: 1px solid rgba(255, 114, 0, 0.18);
    color: #ff7200;
    font-size: 19px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.08);
}

.journey-card:hover .journey-icon {
    background: linear-gradient(135deg, #ff7200, #ff9533);
    color: #ffffff;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 10px 25px rgba(255, 114, 0, 0.35);
}

/* Number */
.journey-card-number {
    position: absolute;
    top: 24px;
    right: 24px;
    color: rgba(255, 114, 0, 0.18);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Text */
.journey-card > span {
    color: #ff7200;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.journey-card h3 {
    margin: 7px 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #171717;
}

.journey-card p {
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.7;
}

/* Connector dots */
.journey-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: #ff7200;
    box-shadow:
        0 0 0 6px rgba(255, 114, 0, 0.12),
        0 0 20px rgba(255, 114, 0, 0.4);
}

.journey-card-1::after,
.journey-card-3::after {
    right: -33px;
}

.journey-card-2::after,
.journey-card-4::after {
    left: -33px;
}


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

.journey-footer {
    position: relative;
    max-width: 900px;
    margin: 15px auto 0;
}

.journey-footer-line {
    height: 1px;
    background: #f0ebe4;
}

.journey-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 26px;
}

.journey-footer-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.journey-footer-copy i {
    color: #ff7200;
    font-size: 16px;
}

.journey-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255, 114, 0, 0.35);
    color: #171717;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.journey-cta i {
    color: #ff7200;
    transition: all 0.3s ease;
}

.journey-cta:hover {
    background: #ff7200;
    border-color: #ff7200;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(255, 114, 0, 0.35);
    transform: translateY(-2px);
}

.journey-cta:hover i {
    color: #ffffff;
    transform: translateX(4px);
}


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

@media (max-width: 1199px) {

    .journey-timeline {
        max-width: 980px;
    }

    .journey-card {
        width: 230px;
    }

    .journey-visual {
        transform: translate(-50%, -50%) scale(0.9);
    }

    .journey-card-1 { left: 10px; }
    .journey-card-2 { right: 10px; }
    .journey-card-3 { left: 10px; }
    .journey-card-4 { right: 10px; }
}


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

@media (max-width: 767px) {

    .chess-journey {
        padding: 90px 0;
    }

    .journey-title {
        font-size: 44px;
        letter-spacing: -2.5px;
    }

    .journey-description {
        font-size: 12.5px;
    }

    .journey-timeline {
        height: auto;
        margin-top: 55px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    /* Hide desktop track */
    .journey-track {
        display: none;
    }

    /* Center visual first */
    .journey-visual {
        position: relative;
        left: auto;
        top: auto;
        order: 1;
        width: 320px;
        height: 340px;
        transform: none;
        margin-bottom: 15px;
    }

    .journey-image-frame {
        left: 20px;
        top: 10px;
        width: 280px;
        height: 280px;
    }

    .journey-orbit {
        display: none;
    }

    .journey-king {
        right: 5px;
        bottom: 18px;
        width: 58px;
        height: 58px;
    }

    /* Cards */
    .journey-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100%;
        max-width: 440px;
        order: 2;
        padding: 22px;
    }

    .journey-card::after {
        display: none;
    }

    .journey-card-2 { order: 3; }
    .journey-card-3 { order: 4; }
    .journey-card-4 { order: 5; }

    .journey-footer {
        margin-top: 45px;
    }

    .journey-footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .journey-bg-word {
        bottom: -30px;
        font-size: 110px;
        letter-spacing: -6px;
    }
}

@media (max-width: 480px) {
    .journey-title {
        font-size: 38px;
    }

    .journey-visual {
        width: 290px;
        height: 310px;
    }

    .journey-image-frame {
        width: 250px;
        height: 250px;
        left: 20px;
    }

    .journey-image-label {
        bottom: 34px;
    }

    .journey-image-label strong {
        font-size: 15px;
    }
}

/* sectione-8 */





/* sectione-9 */
/* =========================================================
   BOOK 1ST CLASS
========================================================= */

.book-class-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background: #0a0a0a;

    color: #fff;
}


.book-class-bg {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

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

    filter: blur(100px);

    pointer-events: none;
}


.book-class-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    pointer-events: none;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.book-class-label {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: #ff7200;

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

    letter-spacing: 2.5px;
}


.book-class-label span {
    width: 35px;
    height: 1px;

    background: #ff7200;
}


.book-class-heading {
    margin: 0;

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

    line-height: .98;

    font-weight: 700;

    letter-spacing: -3px;
}


.book-class-heading span {
    display: block;

    color: #ff7200;
}


.book-class-text {
    max-width: 480px;

    margin: 25px 0 35px;

    color: #888;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   BENEFITS
========================================================= */

.book-benefits {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.book-benefit {
    display: flex;

    align-items: center;

    gap: 13px;
}


.book-benefit-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 11px;

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

    border: 1px solid rgba(255,114,0,.18);

    color: #ff7200;

    font-size: 14px;
}


.book-benefit strong {
    display: block;

    font-size: 11px;

    font-weight: 600;
}


.book-benefit span {
    display: block;

    margin-top: 3px;

    color: #666;

    font-size: 9px;
}


/* =========================================================
   CONTACT INFO
========================================================= */

.book-contact-info {
    display: flex;

    gap: 30px;

    margin-top: 38px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.07);
}


.book-contact-info a {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    text-decoration: none;
}


.book-contact-info a > i {
    color: #ff7200;

    font-size: 14px;
}


.book-contact-info small {
    display: block;

    margin-bottom: 3px;

    color: #555;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;
}


.book-contact-info span {
    font-size: 10px;
}


/* =========================================================
   FORM
========================================================= */

.book-class-form-wrap {
    position: relative;

    padding: 35px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #101010
        );

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

    box-shadow:
        0 30px 70px rgba(0,0,0,.3);
}


.form-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 28px;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}


.form-top > div:first-child span {
    color: #ff7200;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;
}


.form-top h3 {
    margin: 7px 0 0;

    font-size: 25px;

    font-weight: 600;
}


.form-number {
    color: rgba(255,114,0,.35);

    font-size: 35px;

    font-weight: 700;

    line-height: 1;
}


/* Labels */

.book-class-form label:not(.form-check-custom) {
    display: block;

    margin-bottom: 7px;

    color: #fff;

    font-size: 9px;

    font-weight: 600;
}


/* Input */

.input-box {
    position: relative;

    display: flex;

    align-items: center;
}


.input-box > i {
    position: absolute;

    left: 14px;

    z-index: 2;

    color: #ff7200;

    font-size: 12px;
}


.input-box input,
.input-box select,
.input-box textarea {
    width: 100%;

    padding: 13px 14px 13px 40px;

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

    border-radius: 10px;

    outline: none;

    background: #0c0c0c;

    color: #fff;

    font-family: inherit;

    font-size: 11px;

    transition: .3s ease;
}


.input-box textarea {
    resize: vertical;

    min-height: 100px;

    padding-top: 14px;
}


.input-box input::placeholder,
.input-box textarea::placeholder {
    color: #555;
}


.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus {
    border-color: rgba(255,114,0,.55);

    box-shadow:
        0 0 0 3px rgba(255,114,0,.06);
}


/* Select */

.select-box select {
    appearance: none;

    cursor: pointer;
}


.select-box::after {
    content: "\f107";

    position: absolute;

    right: 15px;

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    color: #666;

    pointer-events: none;
}


/* =========================================================
   CHECKBOX
========================================================= */

.form-check-custom {
    display: flex !important;

    align-items: flex-start;

    gap: 10px;

    cursor: pointer;

    margin-top: 3px;
}


.form-check-custom input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.checkmark {
    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    margin-top: 1px;

    border-radius: 4px;

    border: 1px solid #444;

    background: #0c0c0c;

    transition: .2s ease;
}


.form-check-custom input:checked + .checkmark {
    background: #ff7200;

    border-color: #ff7200;
}


.form-check-custom input:checked + .checkmark::after {
    content: "\f00c";

    display: flex;

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

    height: 100%;

    font-family: "Font Awesome 6 Free";

    font-size: 8px;

    font-weight: 900;

    color: #fff;
}


.form-check-custom p {
    margin: 0;

    color: #666;

    font-size: 8px;

    line-height: 1.5;
}


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

.book-class-btn {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 18px;

    border: 0;

    border-radius: 10px;

    background: #ff7200;

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

    transition: .3s ease;
}


.book-class-btn i {
    font-size: 12px;

    transition: .3s ease;
}


.book-class-btn:hover {
    background: #ff9533;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(255,114,0,.2);
}


.book-class-btn:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 991px) {

    .book-class-section {
        padding: 100px 0;
    }

    .book-class-form-wrap {
        margin-top: 20px;
    }
}


@media (max-width: 767px) {

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

    .book-class-heading {
        font-size: 46px;

        letter-spacing: -2px;
    }

    .book-class-text {
        font-size: 12px;
    }

    .book-contact-info {
        flex-direction: column;

        gap: 15px;
    }

    .book-class-form-wrap {
        padding: 24px 20px;

        border-radius: 20px;
    }

    .form-top h3 {
        font-size: 22px;
    }

    .form-number {
        font-size: 28px;
    }
}


@media (max-width: 480px) {

    .book-class-heading {
        font-size: 39px;
    }

    .book-class-form-wrap {
        padding: 22px 16px;
    }
}
/* sectione-9 */











/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-hero {
    min-height: 430px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(8,8,8,0.96),
            rgba(8,8,8,0.75),
            rgba(8,8,8,0.45)
        ),
        url("../img/924a6c07-3eb2-4bff-b24e-430dd94c4dc7.png");

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

    position: relative;

    overflow: hidden;
}


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

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: #ff7200;

    opacity: .08;

    filter: blur(100px);

    right: -100px;
    bottom: -200px;
}


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

    position: relative;

    z-index: 2;
}


.contact-label {
    color: #ff7200;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.contact-hero h1 {
    color: #ffffff;

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

    line-height: 1.05;

    letter-spacing: -3px;

    font-weight: 700;

    margin: 18px 0;
}


.contact-hero h1 span {
    color: #ff7200;
}


.contact-hero p {
    color: rgba(255,255,255,.65);

    font-size: 16px;

    line-height: 1.8;

    max-width: 600px;

    margin: 0;
}


/* =====================================================
   CONTACT SECTION
===================================================== */

.contact-section {
    background: #f8f7f4;

    padding: 100px 0;
}


/* =====================================================
   LEFT INFO
===================================================== */

.contact-info {
    height: 100%;

    padding: 48px;

    background: #ffffff;

    border-radius: 25px;

    border: 1px solid #eeeeee;

    position: relative;

    overflow: hidden;
}


.contact-info::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    background: #ff7200;

    opacity: .035;

    border-radius: 50%;

    right: -120px;
    bottom: -120px;

    filter: blur(60px);
}


.small-label {
    color: #ff7200;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.contact-info h2 {
    font-size: 42px;

    line-height: 1.1;

    letter-spacing: -1.8px;

    color: #111111;

    margin: 16px 0;
}


.contact-info h2 span {
    color: #ff7200;
}


.contact-description {
    color: #777777;

    font-size: 14px;

    line-height: 1.8;

    max-width: 440px;

    margin-bottom: 38px;
}


/* =====================================================
   CONTACT INFO ITEMS
===================================================== */

.contact-info-item {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    position: relative;

    z-index: 2;
}


.contact-info-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    background: #fff3e9;

    color: #ff7200;

    border-radius: 13px;

    transition: .3s ease;
}


.contact-info-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.contact-info-item:hover .contact-info-icon {
    background: #ff7200;

    color: #ffffff;

    transform: translateY(-3px);
}


.contact-info-item span {
    display: block;

    color: #999999;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 3px;
}


.contact-info-item a,
.contact-info-item p {
    color: #333333;

    text-decoration: none;

    font-size: 14px;

    margin: 0;
}


.contact-info-item a:hover {
    color: #ff7200;
}


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

.contact-side-cta {
    background: #0a0a0a;

    border-radius: 18px;

    padding: 23px;

    margin-top: 35px;

    position: relative;

    z-index: 2;
}


.contact-side-cta strong {
    color: #ffffff;

    display: block;

    font-size: 16px;
}


.contact-side-cta p {
    color: #888888;

    font-size: 12px;

    margin: 6px 0 17px;
}


.contact-side-cta a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ff7200;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;
}


.contact-side-cta a span {
    font-size: 17px;

    transition: .3s ease;
}


.contact-side-cta a:hover span {
    transform: translate(3px,-3px);
}


/* =====================================================
   FORM CARD
===================================================== */

.contact-form-card {
    background: #ffffff;

    border-radius: 25px;

    padding: 48px;

    border: 1px solid #eeeeee;

    height: 100%;

    box-shadow:
        0 20px 60px rgba(0,0,0,.04);
}


.form-heading span {
    color: #ff7200;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.form-heading h3 {
    color: #111111;

    font-size: 30px;

    letter-spacing: -1px;

    margin: 10px 0 30px;
}


/* =====================================================
   FORM FIELDS
===================================================== */

.contact-form-card label {
    display: block;

    color: #333333;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 8px;
}


.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
    width: 100%;

    border: 1px solid #e6e6e6;

    background: #fafafa;

    border-radius: 10px;

    padding: 13px 15px;

    color: #222222;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition: .3s ease;
}


.contact-form-card input,
.contact-form-card select {
    height: 50px;
}


.contact-form-card textarea {
    resize: vertical;

    min-height: 130px;
}


.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: #aaaaaa;
}


.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
    border-color: #ff7200;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(255,114,0,.08);
}


/* =====================================================
   SUBMIT
===================================================== */

.contact-submit {
    width: 100%;

    height: 56px;

    border: 0;

    border-radius: 10px;

    background: #ff7200;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    cursor: pointer;

    transition: .3s ease;
}


.contact-submit svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.contact-submit:hover {
    background: #111111;

    transform: translateY(-2px);

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


/* =====================================================
   MAP
===================================================== */

.contact-map-wrapper {
    margin-top: 70px;
}


.map-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.map-heading span {
    color: #ff7200;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.map-heading h3 {
    color: #111111;

    font-size: 32px;

    letter-spacing: -1px;

    margin: 7px 0 0;
}


.map-heading a {
    color: #111111;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    display: flex;

    align-items: center;

    gap: 7px;

    transition: .3s ease;
}


.map-heading a span {
    color: #ff7200;

    font-size: 18px;

    letter-spacing: 0;
}


.map-heading a:hover {
    color: #ff7200;
}


/* MAP */

.contact-map {
    width: 100%;

    height: 430px;

    border-radius: 25px;

    overflow: hidden;

    border: 1px solid #e6e6e6;

    background: #eeeeee;
}


.contact-map iframe {
    width: 100%;
    height: 100%;

    border: 0;

    display: block;

    filter: grayscale(.15);
}


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

@media (max-width: 991px) {

    .contact-section {
        padding: 70px 0;
    }

    .contact-info,
    .contact-form-card {
        padding: 35px;
    }

}


@media (max-width: 767px) {

    .contact-hero {
        min-height: 380px;
    }

    .contact-hero h1 {
        font-size: 46px;

        letter-spacing: -2px;
    }

    .contact-section {
        padding: 55px 0;
    }

    .contact-info,
    .contact-form-card {
        padding: 28px;

        border-radius: 18px;
    }

    .contact-info h2 {
        font-size: 34px;
    }

    .form-heading h3 {
        font-size: 25px;
    }

    .map-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .map-heading h3 {
        font-size: 27px;
    }

    .contact-map {
        height: 350px;

        border-radius: 18px;
    }

}


@media (max-width: 480px) {

    .contact-hero h1 {
        font-size: 39px;
    }

    .contact-hero p {
        font-size: 14px;
    }

    .contact-info,
    .contact-form-card {
        padding: 23px;
    }

    .contact-map {
        height: 300px;
    }

}










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

.about-hero {
    background: #0a0a0a;

    padding: 90px 0 0;

    position: relative;

    overflow: hidden;
}


/* subtle background */

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

    position: absolute;

    width: 600px;
    height: 600px;

    background: #ff7200;

    opacity: .055;

    border-radius: 50%;

    filter: blur(130px);

    right: -250px;
    top: -200px;

    pointer-events: none;
}


/* =====================================================
   GRID
===================================================== */

.about-hero-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 80px;

    position: relative;

    z-index: 2;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.about-hero-content {
    padding-bottom: 70px;
}


.about-eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #ff7200;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 22px;
}


.about-eyebrow span {
    width: 30px;
    height: 2px;

    background: #ff7200;

    display: block;
}


.about-hero h1 {
    color: #ffffff;

    font-size: clamp(50px, 5.5vw, 82px);

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 700;

    margin: 0 0 28px;

    max-width: 620px;
}


.about-hero h1 span {
    display: block;

    color: #ff7200;
}


.about-hero-content > p {
    color: #999999;

    font-size: 15px;

    line-height: 1.8;

    max-width: 470px;

    margin: 0 0 35px;
}


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

.about-hero-buttons {
    display: flex;

    align-items: center;

    gap: 14px;
}


.about-primary-btn {
    min-height: 52px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: #ff7200;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    border-radius: 6px;

    transition: .3s ease;
}


.about-primary-btn svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.about-primary-btn:hover {
    background: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}


.about-secondary-btn {
    min-height: 52px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    border-radius: 6px;

    transition: .3s ease;
}


.about-secondary-btn:hover {
    border-color: #ff7200;

    color: #ff7200;
}


/* =====================================================
   RIGHT IMAGE
===================================================== */

.about-hero-visual {
    position: relative;

    padding-bottom: 50px;
}


.about-image-wrap {
    height: 590px;

    border-radius: 28px;

    overflow: hidden;

    position: relative;

    background: #151515;
}


.about-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 1s ease;
}


.about-image-wrap:hover img {
    transform: scale(1.035);
}


.image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.65)
        );
}


/* Orange frame */

.about-image-wrap::after {
    content: "";

    position: absolute;

    inset: 14px;

    border: 1px solid rgba(255,114,0,.45);

    border-radius: 20px;

    pointer-events: none;
}


/* =====================================================
   IMAGE BADGE
===================================================== */

.about-badge {
    position: absolute;

    left: 25px;
    bottom: 25px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 18px;

    background: rgba(10,10,10,.82);

    backdrop-filter: blur(12px);

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

    border-radius: 10px;
}


.badge-number {
    color: #ff7200;

    font-size: 21px;

    font-weight: 700;
}


.about-badge strong {
    display: block;

    color: #ffffff;

    font-size: 12px;
}


.about-badge span {
    display: block;

    color: #888888;

    font-size: 10px;

    margin-top: 3px;
}


/* =====================================================
   CHESS CARD
===================================================== */

.about-chess-card {
    position: absolute;

    right: -35px;
    bottom: 10px;

    z-index: 5;

    width: 245px;

    padding: 14px;

    background: #ffffff;

    border-radius: 13px;

    display: flex;

    align-items: center;

    gap: 13px;

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


/* mini board */

.mini-board {
    width: 68px;
    height: 68px;

    display: grid;

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

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 5px;
}


.mini-board span {
    background: #f1e4d5;
}


.mini-board span:nth-child(2n) {
    background: #9a6a42;
}


/* chess pieces */

.mini-board span:nth-child(1)::after {
    content: "♟";
    color: #111111;
}

.mini-board span:nth-child(6)::after {
    content: "♞";
    color: #ffffff;
}

.mini-board span:nth-child(11)::after {
    content: "♟";
    color: #111111;
}

.mini-board span:nth-child(16)::after {
    content: "♜";
    color: #ffffff;
}


.mini-board span::after {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 14px;
}


.chess-card-text small {
    display: block;

    color: #ff7200;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    margin-bottom: 5px;
}


.chess-card-text strong {
    display: block;

    color: #111111;

    font-size: 14px;

    line-height: 1.25;
}


/* =====================================================
   BOTTOM STATS
===================================================== */

.about-hero-bottom {
    position: relative;

    z-index: 4;

    min-height: 105px;

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

    display: grid;

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

    align-items: center;
}


.about-stat {
    min-height: 55px;

    padding: 0 25px;

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

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 4px;
}


.about-stat:first-child {
    padding-left: 0;
}


.about-stat:last-child {
    border-right: 0;
}


.about-stat strong {
    color: #ff7200;

    font-size: 18px;

    line-height: 1;
}


.about-stat span {
    color: #777777;

    font-size: 11px;

    letter-spacing: .3px;
}


.about-stat-highlight strong {
    color: #ffffff;

    font-size: 24px;
}


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

@media (max-width: 1100px) {

    .about-hero-grid {
        gap: 45px;
    }

    .about-chess-card {
        right: -15px;
    }

}


@media (max-width: 991px) {

    .about-hero {
        padding-top: 70px;
    }

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

        gap: 20px;
    }

    .about-hero-content {
        padding-bottom: 20px;
    }

    .about-hero h1 {
        max-width: 700px;
    }

    .about-image-wrap {
        height: 520px;
    }

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

        padding: 20px 0;
    }

    .about-stat:nth-child(2) {
        border-right: 0;
    }

    .about-stat:nth-child(3),
    .about-stat:nth-child(4) {
        margin-top: 20px;
    }

}


@media (max-width: 575px) {

    .about-hero {
        padding-top: 55px;
    }

    .about-hero h1 {
        font-size: 48px;

        letter-spacing: -2.5px;
    }

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

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

    .about-image-wrap {
        height: 430px;

        border-radius: 20px;
    }

    .about-chess-card {
        right: 10px;

        width: 220px;
    }

    .about-badge {
        left: 15px;
        bottom: 20px;
    }

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

    .about-stat {
        padding: 12px 15px;

        border-right: 0;
    }

    .about-stat:first-child {
        padding-left: 15px;
    }

}


@media (max-width: 400px) {

    .about-hero h1 {
        font-size: 41px;
    }

    .about-chess-card {
        width: 205px;
    }

}



/* =====================================================
   ABOUT — OUR STORY
===================================================== */

.about-story {
    background: #f8f7f4;

    padding: 120px 0;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   GRID
===================================================== */

.about-story-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}


/* =====================================================
   LEFT VISUAL
===================================================== */

.about-story-visual {
    position: relative;

    padding: 0 35px 35px 0;
}


.story-main-image {
    height: 600px;

    border-radius: 25px;

    overflow: hidden;

    position: relative;

    background: #ddd;
}


.story-main-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .8s ease;
}


.story-main-image:hover img {
    transform: scale(1.04);
}


/* Image gradient */

.story-main-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.72)
        );
}


/* =====================================================
   IMAGE TAG
===================================================== */

.story-image-tag {
    position: absolute;

    left: 28px;
    bottom: 28px;

    z-index: 2;
}


.story-image-tag span {
    display: block;

    color: #ff7200;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 7px;
}


.story-image-tag strong {
    display: block;

    max-width: 280px;

    color: #ffffff;

    font-size: 24px;

    line-height: 1.15;

    letter-spacing: -.5px;
}


/* =====================================================
   YEAR CARD
===================================================== */

.story-number {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 145px;
    height: 145px;

    background: #ff7200;

    color: #ffffff;

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-shadow:
        0 20px 50px rgba(255,114,0,.25);
}


.story-number span {
    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    opacity: .75;
}


.story-number strong {
    font-size: 38px;

    line-height: 1;

    margin-top: 5px;
}


/* =====================================================
   RIGHT CONTENT
===================================================== */

.story-label {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #ff7200;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 20px;
}


.story-label span {
    width: 30px;
    height: 2px;

    background: #ff7200;
}


.about-story-content h2 {
    color: #111111;

    font-size: clamp(45px, 4.5vw, 67px);

    line-height: 1;

    letter-spacing: -3px;

    margin: 0 0 25px;

    font-weight: 700;
}


.about-story-content h2 span {
    display: block;

    color: #ff7200;
}


.story-intro {
    color: #333333;

    font-size: 18px;

    line-height: 1.65;

    max-width: 520px;

    margin-bottom: 15px;
}


.story-text {
    color: #777777;

    font-size: 14px;

    line-height: 1.9;

    max-width: 520px;

    margin-bottom: 35px;
}


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

.story-values {
    border-top: 1px solid #deddd9;

    margin-top: 30px;

    padding-top: 5px;
}


.story-value {
    display: flex;

    align-items: center;

    gap: 17px;

    padding: 18px 0;

    border-bottom: 1px solid #deddd9;
}


.story-value-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #111111;

    color: #ff7200;

    font-size: 10px;

    font-weight: 700;
}


.story-value h4 {
    color: #111111;

    font-size: 15px;

    margin: 0 0 3px;
}


.story-value p {
    color: #888888;

    font-size: 12px;

    margin: 0;

    line-height: 1.5;
}


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

.story-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 32px;

    padding: 15px 22px;

    background: #111111;

    color: #ffffff;

    text-decoration: none;

    border-radius: 6px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

    transition: .3s ease;
}


.story-btn svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.story-btn:hover {
    background: #ff7200;

    color: #ffffff;

    transform: translateY(-3px);
}


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

@media (max-width: 991px) {

    .about-story {
        padding: 80px 0;
    }

    .about-story-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .story-main-image {
        height: 550px;
    }

}


@media (max-width: 575px) {

    .about-story {
        padding: 65px 0;
    }

    .about-story-visual {
        padding: 0 18px 25px 0;
    }

    .story-main-image {
        height: 430px;

        border-radius: 18px;
    }

    .story-image-tag {
        left: 20px;
        bottom: 20px;
    }

    .story-image-tag strong {
        font-size: 20px;
    }

    .story-number {
        width: 115px;
        height: 115px;

        border-radius: 15px;
    }

    .story-number strong {
        font-size: 30px;
    }

    .about-story-content h2 {
        font-size: 43px;

        letter-spacing: -2px;
    }

    .story-intro {
        font-size: 16px;
    }

}





















/* =========================================================
   OUR PHILOSOPHY — MODERN PREMIUM
========================================================= */

.about-philosophy {
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    background: #0a0a0a;
    color: #fff;
}

/* Big subtle background word */
.about-philosophy::before {
    content: "PHILOSOPHY";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Poppins", sans-serif;
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 900;
    letter-spacing: -10px;
    color: rgba(255, 255, 255, 0.015);
    white-space: nowrap;
    pointer-events: none;
}

/* Orange glow */
.about-philosophy::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    top: -300px;
    right: -250px;
    background: radial-gradient(circle, rgba(255, 114, 0, 0.14), transparent 70%);
    filter: blur(60px);
    border-radius: 50%;
    pointer-events: none;
}


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

.philosophy-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 80px;
    position: relative;
    z-index: 2;
}

.philosophy-tag {
    display: inline-block;
    padding: 9px 22px;
    background: rgba(255, 114, 0, 0.08);
    border: 1px solid rgba(255, 114, 0, 0.28);
    border-radius: 50px;
    color: #ff9533;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 26px;
    position: relative;
}

.philosophy-tag::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #ff7200;
    border-radius: 50%;
    box-shadow: 0 0 15px #ff7200;
    animation: tagPulse 2s infinite;
}

@keyframes tagPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.5; transform: translateY(-50%) scale(1.4); }
}

.philosophy-header h2 {
    margin: 0 0 24px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -3px;
    color: #ffffff;
}

.philosophy-header h2 span {
    color: #ff7200;
    position: relative;
    display: inline-block;
}

.philosophy-header h2 span::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #ff7200, #ff9533, transparent);
    border-radius: 6px;
    opacity: 0.5;
    z-index: -1;
}

.philosophy-header p {
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.85;
    max-width: 520px;
}


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

.philosophy-statement {
    position: relative;
    max-width: 920px;
    margin: 0 auto 100px;
    padding: 55px 70px;
    background: linear-gradient(145deg, rgba(255, 114, 0, 0.08), rgba(255, 114, 0, 0.02));
    border: 1px solid rgba(255, 114, 0, 0.2);
    border-radius: 28px;
    text-align: center;
    z-index: 2;
    backdrop-filter: blur(15px);
}

.statement-mark {
    position: absolute;
    top: -30px;
    left: 40px;
    font-family: Georgia, serif;
    font-size: 110px;
    line-height: 1;
    color: #ff7200;
    opacity: 0.35;
}

.philosophy-statement h3 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.philosophy-statement h3 span {
    color: #ff7200;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.philosophy-statement h3 span::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7200, transparent);
    border-radius: 4px;
    opacity: 0.5;
}


/* =========================================================
   GRID
========================================================= */

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
    z-index: 2;
}


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

.philosophy-card {
    position: relative;
    padding: 40px 30px 35px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Orange gradient border on hover */
.philosophy-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 114, 0, 0.7), transparent 40%, transparent 60%, rgba(255, 114, 0, 0.4));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.philosophy-card:hover::before,
.philosophy-card.active::before {
    opacity: 1;
}

.philosophy-card:hover,
.philosophy-card.active {
    transform: translateY(-10px);
    background: rgba(255, 114, 0, 0.05);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(255, 114, 0, 0.08);
}


/* Number */
.card-number {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 114, 0, 0.3);
    letter-spacing: 1px;
}

/* Chess Piece */
.card-piece {
    font-family: Georgia, serif;
    font-size: 80px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.12);
    margin-bottom: 24px;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block;
}

.philosophy-card:hover .card-piece,
.philosophy-card.active .card-piece {
    color: #ff7200;
    transform: scale(1.1);
    text-shadow: 0 0 40px rgba(255, 114, 0, 0.5);
}

/* Title */
.philosophy-card h4 {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #ffffff;
    transition: color 0.3s ease;
}

.philosophy-card:hover h4,
.philosophy-card.active h4 {
    color: #ff9533;
}

/* Text */
.philosophy-card p {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.5);
}

/* Bottom line */
.card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff7200, #ff9533);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.philosophy-card:hover .card-line,
.philosophy-card.active .card-line {
    transform: scaleX(1);
}


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

.philosophy-footer {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 70px;
    position: relative;
    z-index: 2;
}

.philosophy-footer span {
    color: rgba(255, 255, 255, 0.4);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    white-space: nowrap;
}

.footer-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #ff7200, rgba(255, 114, 0, 0.2), rgba(255, 255, 255, 0.08));
    position: relative;
}

.footer-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff7200;
    box-shadow: 0 0 15px rgba(255, 114, 0, 0.7);
}

.footer-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}


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

@media (max-width: 991px) {

    .about-philosophy {
        padding: 110px 0;
    }

    .philosophy-header {
        margin-bottom: 60px;
    }

    .philosophy-statement {
        padding: 45px 50px;
        margin-bottom: 80px;
    }

    .philosophy-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}


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

@media (max-width: 575px) {

    .about-philosophy {
        padding: 80px 0;
    }

    .philosophy-header h2 {
        font-size: 2.6rem;
        letter-spacing: -1.5px;
    }

    .philosophy-header p {
        font-size: 13.5px;
    }

    .philosophy-statement {
        padding: 40px 28px;
        margin-bottom: 65px;
        border-radius: 22px;
    }

    .statement-mark {
        font-size: 80px;
        top: -22px;
        left: 22px;
    }

    .philosophy-statement h3 {
        font-size: 1.35rem;
        line-height: 1.4;
    }

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

    .philosophy-card {
        padding: 32px 25px 28px;
    }

    .card-piece {
        font-size: 65px;
        margin-bottom: 18px;
    }

    .philosophy-card h4 {
        font-size: 20px;
    }

    .philosophy-footer {
        gap: 14px;
        margin-top: 50px;
    }

    .philosophy-footer span {
        font-size: 8px;
        letter-spacing: 1.8px;
    }
}







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

.about-cta-banner {
    min-height: 560px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #0a0a0a;
}


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

.about-cta-bg {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.about-cta-bg img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    transform: scale(1.03);
}


.about-cta-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.88) 38%,
            rgba(5,5,5,.52) 70%,
            rgba(5,5,5,.28) 100%
        );
}


/* Orange glow */

.about-cta-banner::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background: #ff7200;

    opacity: .08;

    border-radius: 50%;

    filter: blur(130px);

    right: -180px;
    top: -150px;

    z-index: 2;

    pointer-events: none;
}


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

.about-cta-content {
    max-width: 720px;

    position: relative;

    z-index: 5;
}


.about-cta-label {
    display: flex;

    align-items: center;

    gap: 11px;

    color: #ff7200;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.2px;

    margin-bottom: 22px;
}


.about-cta-label span {
    width: 32px;
    height: 2px;

    display: block;

    background: #ff7200;
}


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

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

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 700;

    margin: 0 0 25px;
}


.about-cta-content h2 span {
    display: block;

    color: #ff7200;
}


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

    max-width: 500px;

    font-size: 15px;

    line-height: 1.8;

    margin: 0 0 32px;
}


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

.about-cta-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


.about-cta-primary,
.about-cta-outline {
    min-height: 52px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

    transition: .3s ease;
}


.about-cta-primary {
    background: #ff7200;

    color: #ffffff;
}


.about-cta-primary svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.about-cta-primary:hover {
    background: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}


.about-cta-outline {
    border: 1px solid rgba(255,255,255,.25);

    color: #ffffff;
}


.about-cta-outline:hover {
    border-color: #ff7200;

    color: #ff7200;
}


/* =====================================================
   FLOATING KNIGHT
===================================================== */

.about-cta-piece {
    position: absolute;

    right: 13%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 4;

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

    font-family: Georgia, serif;

    font-size: 330px;

    line-height: 1;

    user-select: none;

    transition: .5s ease;
}


.about-cta-banner:hover .about-cta-piece {
    color: rgba(255,114,0,.14);

    transform:
        translateY(-50%)
        translateX(-10px);
}


/* =====================================================
   CORNER TEXT
===================================================== */

.about-cta-corner {
    position: absolute;

    right: 40px;
    bottom: 35px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 8px;

    letter-spacing: 2px;
}


.about-cta-corner strong {
    color: #ff7200;

    font-size: 9px;

    font-weight: 700;
}


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

@media (max-width: 991px) {

    .about-cta-banner {
        min-height: 520px;
    }

    .about-cta-piece {
        right: -30px;

        font-size: 270px;

        opacity: .7;
    }

}


@media (max-width: 575px) {

    .about-cta-banner {
        min-height: 560px;
    }

    .about-cta-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.94),
                rgba(5,5,5,.72)
            );
    }

    .about-cta-content h2 {
        font-size: 47px;

        letter-spacing: -2.5px;
    }

    .about-cta-content p {
        font-size: 14px;
    }

    .about-cta-actions {
        flex-wrap: wrap;
    }

    .about-cta-piece {
        right: -70px;

        bottom: -30px;
        top: auto;

        transform: none;

        font-size: 230px;
    }

    .about-cta-banner:hover .about-cta-piece {
        transform: none;
    }

    .about-cta-corner {
        right: 18px;
        bottom: 20px;
    }

}


/* =========================================
   ABOUT INTRO - CENTERED
========================================= */

.about-intro {
    position: relative;
    padding: 120px 0 125px;
    background: #fff;
    overflow: hidden;
}

.about-intro::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 114, 0, 0.045);
    filter: blur(20px);
    top: -180px;
    left: -180px;
}

.about-intro::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 114, 0, 0.035);
    filter: blur(15px);
    right: -140px;
    bottom: -140px;
}

.about-intro-inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

/* Label */

.about-intro-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;

    color: #ff7200;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.about-intro-label span {
    display: block;
    width: 34px;
    height: 1px;
    background: #ff7200;
}

/* Heading */

.about-intro h2 {
    margin: 0 auto;
    max-width: 850px;

    color: #111;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -2.5px;
}

.about-intro h2 span {
    display: block;
    color: #ff7200;
}

/* Text */

.about-intro-text {
    max-width: 720px;
    margin: 10px auto 0;

    color: #555;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;
}

.about-intro-small {
    max-width: 650px;
    margin-top: 12px;

    color: #777;
    font-size: 14px;
    line-height: 1.8;
}

/* Divider */

.about-intro-line {
    width: 1px;
    height: 55px;
    margin: 38px auto 32px;
    background: linear-gradient(
        to bottom,
        transparent,
        #ff7200,
        transparent
    );
}

/* Bottom Points */

.about-intro-points {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    max-width: 760px;
}

.about-intro-points > div {
    flex: 1;
    padding: 0 30px;
    position: relative;
}

.about-intro-points > div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: #ddd;
}

.about-intro-points strong {
    display: block;
    margin-bottom: 7px;

    color: #ff7200;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-intro-points span {
    color: #222;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}


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

@media (max-width: 767px) {

    .about-intro {
        padding: 85px 20px 90px;
    }

    .about-intro-label {
        font-size: 9px;
        letter-spacing: 2px;
        gap: 9px;
    }

    .about-intro-label span {
        width: 22px;
    }

    .about-intro h2 {
        font-size: 42px;
        line-height: 1.08;
        letter-spacing: -1.5px;
    }

    .about-intro-text {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.7;
    }

    .about-intro-small {
        font-size: 13px;
    }

    .about-intro-line {
        height: 40px;
        margin: 30px auto 25px;
    }

    .about-intro-points {
        display: block;
    }

    .about-intro-points > div {
        padding: 14px 0;
    }

    .about-intro-points > div:not(:last-child)::after {
        display: none;
    }

    .about-intro-points strong {
        display: inline-block;
        margin-right: 8px;
    }

    .about-intro-points span {
        font-size: 12px;
    }
}