/* =========================================================
           ROOT
        ========================================================= */

        :root {
            --navy: #011b3c;
            --navy-2: #0a2133;
            --navy-3: #102d40;

            --orange: #f36b35;
            --orange-dark: #d94e1f;

            --lime: #b8d83e;
            --cyan: #38d8df;

            --white: #ffffff;
            --soft: #f5f8f9;
            --soft-2: #eef4f5;

            --text: #011b3c;
            --muted: #6e6961;

            --border: rgba(6, 21, 34, .09);

            --shadow:
                0 20px 60px rgba(6, 21, 34, .10);

            --shadow-lg:
                0 30px 90px rgba(6, 21, 34, .16);

            --radius: 26px;
        }


        /* =========================================================
           GLOBAL
        ========================================================= */

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            background: #fff;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Manrope', sans-serif;
        }

        a {
            text-decoration: none;
        }

        .container {
            max-width: 1240px;
        }



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

        /* .btn-main {
            background: var(--orange);
            color: #fff;
            border: 1px solid var(--orange);
            padding: 13px 22px;
            border-radius: 50px;
            font-weight: 700;
            transition: .3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-main:hover {
            background: var(--orange-dark);
            border-color: var(--orange-dark);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(243,107,53,.25);
        } */

        .btn-outline-main {
            background: transparent;
            color: var(--navy);
            border: 1px solid rgba(6,21,34,.15);
            padding: 13px 22px;
            border-radius: 50px;
            font-weight: 700;
            transition: .3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-outline-main:hover {
            background: var(--navy);
            color: #fff;
            transform: translateY(-3px);
        }


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

        .about-hero {
            min-height: 690px;
            padding: 175px 0 90px;
            position: relative;
            overflow: hidden;
            color: #fff;

            background:
                radial-gradient(
                    circle at 85% 20%,
                    rgba(56,216,223,.18),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 10% 85%,
                    rgba(184,216,62,.10),
                    transparent 25%
                ),
                linear-gradient(
                    135deg,
                    #061522 0%,
                    #0a2133 55%,
                    #061522 100%
                );
        }

        .about-hero::before {
            content: "";
            position: absolute;
            inset: 0;

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

            background-size: 60px 60px;

            mask-image:
                linear-gradient(
                    to bottom,
                    black,
                    transparent
                );
        }

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

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

            padding: 9px 15px;

            border: 1px solid rgba(184,216,62,.25);
            background: rgba(184,216,62,.08);

            border-radius: 50px;

            color: var(--lime);

            font-size: 14px;
            font-weight: 800;
            letter-spacing: 1.2px;
            text-transform: uppercase;

            margin-bottom: 24px;
        }

        .pulse {
            width: 7px;
            height: 7px;
            background: var(--lime);
            border-radius: 50%;

            box-shadow:
                0 0 0 7px rgba(184,216,62,.08);

            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                box-shadow:
                    0 0 0 5px rgba(184,216,62,.05);
            }

            50% {
                box-shadow:
                    0 0 0 11px rgba(184,216,62,.13);
            }
        }

        .hero-title {
            font-size: clamp(3rem, 6vw, 5.8rem);
            line-height: .98;
            letter-spacing: -4px;
            font-weight: 800;
            max-width: 900px;
            margin-bottom: 27px;
        }

        .hero-title span {
            color: var(--orange);
        }

        .hero-description {
            color: #ffffff;
            font-size: 17px;
            line-height: 1.8;
            max-width: 690px;
        }

        .hero-year {
            margin-top: 45px;

            display: inline-flex;
            align-items: center;
            gap: 18px;

            padding: 15px 20px;

            border-radius: 18px;

            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.10);

            backdrop-filter: blur(15px);
        }

        .hero-year strong {
            font-family: 'Manrope';
            font-size: 17px;
        }

        .hero-year small {
            display: block;
            color: #ffffff;
            font-size: 11px;
        }


        /* HERO VISUAL */

        .hero-visual {
            position: relative;
            min-height: 430px;
        }

        .hero-glow {
            position: absolute;
            width: 400px;
            height: 400px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(56,216,223,.16),
                    transparent 65%
                );

            top: 10px;
            left: 50%;

            transform: translateX(-50%);
        }

        .aqua-circle {
            width: 360px;
            height: 360px;

            border-radius: 50%;

            border: 1px solid rgba(56,216,223,.25);

            position: absolute;

            top: 40px;
            left: 50%;

            transform: translateX(-50%);
        }

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

            position: absolute;
            inset: 35px;

            border-radius: 50%;

            border: 1px dashed rgba(184,216,62,.35);

            animation: rotate 18s linear infinite;
        }

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

        .fish-icon {
            position: absolute;

            width: 160px;
            height: 160px;

            border-radius: 45px;

            display: grid;
            place-items: center;

            left: 50%;
            top: 140px;

            transform: translateX(-50%);

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    #ff9b57
                );

            box-shadow:
                0 30px 70px rgba(243,107,53,.3);

            font-size: 65px;
            color: #fff;
        }

        .floating-info {
            position: absolute;

            padding: 14px 17px;

            border-radius: 16px;

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

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

            backdrop-filter: blur(15px);

            box-shadow: 0 20px 40px rgba(0,0,0,.2);
        }

        .floating-info strong {
            display: block;
            font-size: 18px;
        }

        .floating-info span {
            color: #ffffff;
            font-size: 10px;
        }

        .floating-one {
            top: 45px;
            right: 0;
        }

        .floating-two {
            bottom: 40px;
            left: 10px;
        }


        /* =========================================================
           SECTION COMMON
        ========================================================= */

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

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;

            padding: 8px 13px;

            border-radius: 50px;

            background: rgba(243,107,53,.09);

            color: var(--orange);

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

            letter-spacing: 1.3px;

            text-transform: uppercase;

            margin-bottom: 18px;
        }

        .section-title {
            font-size: clamp(2rem,4vw,3.2rem);
            line-height: 1.12;
            font-weight: 800;
            letter-spacing: -1.5px;
        }

        .section-text {
            color: var(--text);
            font-size: 15px;
            line-height: 1.85;
        }


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

        .intro-section {
            background: #fff;
        }

      .intro-image {
    height: 590px;
    min-height: 0;

    position: relative;
    overflow: hidden;

    border-radius: 30px;

    background: #061522;
}

.intro-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;
}

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

    background: linear-gradient(
        135deg,
        rgba(6, 21, 34, .55),
        rgba(10, 33, 51, .25)
    );

    z-index: 1;
}

.intro-badge {
    position: absolute;

    left: 28px;
    bottom: 28px;

    z-index: 2;
}
.intro-badge strong {
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    color: #0d6efd;
}

.intro-badge span {
    max-width: 150px;

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

    font-weight: 700;
    letter-spacing: 1px;

    color: #061522;
}

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

            position: absolute;
            inset: 0;

            background:
                radial-gradient(
                    circle at 70% 30%,
                    rgba(56,216,223,.25),
                    transparent 30%
                );
        }

        .intro-badge {
            position: absolute;

            left: 28px;
            bottom: 28px;

            padding: 20px 23px;

            border-radius: 20px;

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

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

        .intro-badge strong {
            font-family: 'Inter', sans-serif;
            display: block;
            font-size: 32px;
            color: var(--orange);
        }

        .intro-badge span {
            color: var(--navy);
            font-size: 11px;
            font-weight: 700;
        }

        .intro-content {
            padding-left: 30px;
        }

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

        .intro-content p {
            color: var(--text);
            line-height: 1.85;
            font-size: 15px;
            margin-bottom: 18px;
        }


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

        .feature-section {
            background: var(--soft);
        }

        .feature-card {
            height: 100%;

            padding: 32px;

            border-radius: 24px;

            background: #fff;

            border: 1px solid rgba(6,21,34,.06);

            transition: .35s ease;

            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow);
            border-color: rgba(243,107,53,.18);
        }

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

            position: absolute;

            width: 150px;
            height: 150px;

            border-radius: 50%;

            right: -70px;
            bottom: -70px;

            background: rgba(243,107,53,.05);
        }

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

            border-radius: 19px;

            display: grid;
            place-items: center;

            font-size: 24px;

            background: rgba(243,107,53,.09);

            color: var(--orange);

            margin-bottom: 24px;
        }

        .feature-card.green .feature-icon {
            color: #789317;
            background: rgba(184,216,62,.15);
        }

        .feature-card.blue .feature-icon {
            color: #159eaa;
            background: rgba(56,216,223,.12);
        }

        .feature-card h3 {
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 14px;
        }

        .feature-card p {
            color: var(--text);
            font-size: 15px;
            line-height: 1.75;
            margin: 0;
        }


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

        .capability-section {
            background: #fff;
        }

        .capability-list {
            margin-top: 35px;
        }

        .capability-item {
            display: flex;
            gap: 18px;

            padding: 20px 0;

            border-bottom: 1px solid #edf0f1;
        }

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

        .capability-number {
            width: 42px;
            height: 42px;

            flex: 0 0 42px;

            border-radius: 13px;

            display: grid;
            place-items: center;

            background: var(--navy);

            color: var(--lime);

            font-size: 14px;
            font-weight: 800;
        }

        .capability-item h4 {
            font-size: 16px;
            font-weight: 800;

            margin-bottom: 5px;
        }

        .capability-item p {
            color: var(--text);
            font-size: 15px;
            line-height: 1.65;
            margin: 0;
        }

        .capability-panel {
            background: var(--navy);

            border-radius: 30px;

            padding: 45px;

            color: #fff;

            min-height: 520px;

            position: relative;
            overflow: hidden;
        }

        .capability-panel::before {
            content: "";

            position: absolute;

            width: 350px;
            height: 350px;

            border-radius: 50%;

            border: 1px solid rgba(56,216,223,.13);

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

        .capability-panel::after {
            content: "";

            position: absolute;

            width: 220px;
            height: 220px;

            border-radius: 50%;

            border: 1px dashed rgba(184,216,62,.20);

            right: 50px;
            bottom: -100px;
        }

        .capability-panel-content {
            position: relative;
            z-index: 2;
        }

        .capability-panel .mini-label {
            color: var(--lime);

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

            letter-spacing: 1.3px;

            text-transform: uppercase;
        }

        .capability-panel h3 {
            font-size: 34px;

            line-height: 1.15;

            font-weight: 800;

            margin: 16px 0;
        }

        .capability-panel p {
            color: #ffffff;

            font-size: 15px;

            line-height: 1.8;

            max-width: 480px;
        }

        .location-grid {
            display: grid;

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

            gap: 10px;

            margin-top: 35px;
        }

        .location-box {
            padding: 17px 10px;

            border-radius: 15px;

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

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

            text-align: center;
        }

        .location-box i {
            color: var(--orange);

            margin-bottom: 8px;
        }

        .location-box strong {
            display: block;

            font-size: 14px;
        }

        .location-box span {
            display: block;

            color: #ffffff;

            font-size: 9px;

            margin-top: 3px;
        }


        /* =========================================================
           CERTIFICATIONS
        ========================================================= */

        .trust-section {
            background: var(--soft);
        }

        .trust-header {
            max-width: 720px;
            margin: 0 auto 50px;
            text-align: center;
        }

        .cert-card {
            background: #fff;

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

            border-radius: 22px;

            padding: 32px 25px;

            text-align: center;

            height: 100%;

            transition: .3s ease;
        }

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

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

            border-radius: 50%;

            display: grid;
            place-items: center;

            margin: 0 auto 20px;

            background: rgba(243,107,53,.09);

            color: var(--orange);

            font-size: 23px;
        }

        .cert-card h4 {
            font-size: 17px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .cert-card p {
            color: var(--text);
            font-size: 15px;
            line-height: 1.65;
            margin: 0;
        }


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

        .vision-section {
            background: #fff;
        }

        .vision-card {
            height: 100%;

            padding: 45px;

            border-radius: 30px;

            position: relative;

            overflow: hidden;
        }

        .vision-card.vision {
            background:
                linear-gradient(
                    135deg,
                    #f7faf2,
                    #ffffff
                );

            border: 1px solid rgba(184,216,62,.25);
        }

        .vision-card.mission {
            background:
                linear-gradient(
                    135deg,
                    #fff7f3,
                    #ffffff
                );

            border: 1px solid rgba(243,107,53,.18);
        }

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

            position: absolute;

            width: 220px;
            height: 220px;

            border-radius: 50%;

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

            border: 1px solid rgba(6,21,34,.05);
        }

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

            border-radius: 20px;

            display: grid;
            place-items: center;

            font-size: 25px;

            margin-bottom: 25px;
        }

        .vision .vm-icon {
            background: rgba(184,216,62,.18);
            color: #789317;
        }

        .mission .vm-icon {
            background: rgba(243,107,53,.12);
            color: var(--orange);
        }

        .vision-card h3 {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .vision-card p {
            color: var(--text);
            font-size: 15px;
            line-height: 1.85;
            margin: 0;
            max-width: 570px;
        }


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

        .journey-section {
            background: var(--navy);
            color: #fff;

            position: relative;
            overflow: hidden;
        }

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

            position: absolute;

            width: 600px;
            height: 600px;

            border-radius: 50%;

            border: 1px solid rgba(56,216,223,.08);

            right: -250px;
            top: -250px;
        }

        .journey-title {
            max-width: 650px;
        }

        .journey-title .section-label {
            background: rgba(184,216,62,.08);
            color: var(--lime);
        }

        .journey-title h2 {
            font-size: clamp(2rem,4vw,3.3rem);
            font-weight: 800;
        }

        .journey-title p {
            color: #ffffff;
            line-height: 1.8;
        }

        .timeline {
            margin-top: 60px;

            position: relative;
        }

        .timeline::before {
            content: "";

            position: absolute;

            left: 50%;

            top: 0;
            bottom: 0;

            width: 1px;

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

        .timeline-item {
            width: 50%;

            padding: 0 50px 55px;

            position: relative;
        }

        .timeline-item:nth-child(odd) {
            margin-left: 0;
            text-align: right;
        }

        .timeline-item:nth-child(even) {
            margin-left: 50%;
        }

        .timeline-dot {
            position: absolute;

            top: 0;

            width: 13px;
            height: 13px;

            border-radius: 50%;

            background: var(--orange);

            box-shadow:
                0 0 0 7px rgba(243,107,53,.12);
        }

        .timeline-item:nth-child(odd) .timeline-dot {
            right: -6px;
        }

        .timeline-item:nth-child(even) .timeline-dot {
            left: -6px;
        }

        .timeline-year {
            color: var(--lime);

            font-size: 14px;

            font-weight: 800;

            letter-spacing: 1px;

            margin-bottom: 8px;
        }

        .timeline-item h4 {
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .timeline-item p {
            color: #ffffff;

            font-size: 14px;

            line-height: 1.7;

            margin: 0;
        }


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

        .cta-section {
            padding: 100px 0;

            background: var(--soft);
        }

        .cta-box {
            background: var(--navy);

            color: #fff;

            border-radius: 30px;

            padding: 65px;

            position: relative;

            overflow: hidden;
        }

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

            position: absolute;

            width: 300px;
            height: 300px;

            border-radius: 50%;

            background: rgba(243,107,53,.12);

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

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

        .cta-title {
            font-size: clamp(2rem,4vw,3.3rem);

            font-weight: 800;

            letter-spacing: -1px;
        }

        .cta-text {
            color:#ffffff;

            max-width: 650px;

            line-height: 1.8;
        }



        /* =========================================================
           BACK TO TOP
        ========================================================= */

        .back-top {
            position: fixed;

            right: 20px;
            bottom: 20px;

            width: 45px;
            height: 45px;

            border-radius: 14px;

            border: 0;

            background: var(--orange);

            color: #fff;

            display: grid;
            place-items: center;

            z-index: 1000;

            opacity: 0;
            visibility: hidden;

            transform: translateY(20px);

            transition: .3s;

            box-shadow:
                0 12px 30px rgba(243,107,53,.25);
        }

        .back-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }


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

        .reveal {
            opacity: 0;
            transform: translateY(25px);
            transition: .8s ease;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }


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

        @media (max-width: 991px) {

           

            .hero-visual {
                margin-top: 50px;
            }

            .intro-content {
                padding-left: 0;
                margin-top: 45px;
            }

            .timeline::before {
                left: 12px;
            }

            .timeline-item,
            .timeline-item:nth-child(even) {
                width: 100%;
                margin-left: 0;
                text-align: left;
                padding-left: 45px;
                padding-right: 0;
            }

            .timeline-item:nth-child(odd) .timeline-dot,
            .timeline-item:nth-child(even) .timeline-dot {
                left: 6px;
                right: auto;
            }

        }


        @media (max-width: 767px) {

            .about-hero {
                min-height: auto;
                padding: 150px 0 70px;
            }

            .hero-title {
                font-size: 3rem;
                letter-spacing: -2px;
            }

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

            .aqua-circle {
                width: 300px;
                height: 300px;
            }

            .fish-icon {
                width: 125px;
                height: 125px;
                font-size: 48px;
                top: 125px;
            }

            .floating-one {
                right: 0;
            }

            .floating-two {
                left: 0;
            }

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

            .intro-image {
                min-height: 430px;
            }

            .capability-panel {
                padding: 32px;
            }

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

            .vision-card {
                padding: 32px;
            }

            .cta-box {
                padding: 40px 28px;
            }

            .timeline {
                margin-top: 40px;
            }

        }