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

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #f7fbfe;
            color: #0b1f35;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
        }

        .text-cyan {
            color: #00a9d4 !important;
        }

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

        .section-label {
            color: #009fc8;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: 46px;
            line-height: 1.18;
            font-weight: 750;
            color: #0a1d34;
            margin-bottom: 20px;
        }

        .section-description {
            color: #60758a;
            font-size: 17px;
            line-height: 30px;
        }


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

        .btn-vivastar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 28px;
            border-radius: 50px;
            background: #08b8e2;
            color: #062036;
            font-weight: 700;
            border: 2px solid #08b8e2;
            transition: all .35s ease;
        }

        .btn-vivastar:hover {
            background: #062036;
            border-color: #062036;
            color: #ffffff;
            transform: translateY(-3px);
        }

        .btn-vivastar-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 28px;
            border-radius: 50px;
            background: transparent;
            color: #0b1f35;
            font-weight: 650;
            border: 2px solid #cbd8e2;
            transition: all .35s ease;
        }

        .btn-vivastar-outline:hover {
            border-color: #08b8e2;
            color: #009fc8;
            transform: translateY(-3px);
        }


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

        .about-hero {
            position: relative;
            min-height: 570px;
            display: flex;
            align-items: center;
            padding: 150px 0 90px;
            overflow: hidden;

            background:
                radial-gradient(
                    circle at 85% 20%,
                    rgba(0, 190, 230, .13),
                    transparent 30%
                ),
                linear-gradient(
                    135deg,
                    #f7fcff 0%,
                    #edf8fc 100%
                );
        }

        .about-hero::before {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: rgba(0, 181, 220, .07);
            filter: blur(70px);
            right: -120px;
            top: -130px;
        }

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

        .about-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 9px 17px;
            border-radius: 50px;
            background: rgba(0, 180, 220, .08);
            border: 1px solid rgba(0, 170, 210, .25);
            color: #009fc8;
            font-size: 14px;
            font-weight: 650;
            margin-bottom: 25px;
        }

        .about-badge span {
            width: 8px;
            height: 8px;
            background: #08b8e2;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 184, 226, .6);
        }

        .about-hero h1 {
            max-width: 850px;
            font-size: 64px;
            line-height: 1.08;
            letter-spacing: -2px;
            font-weight: 800;
            color: #091d35;
            margin-bottom: 25px;
        }

        .about-hero h1 span {
            color: #08a9d2;
        }

        .about-hero-description {
            max-width: 760px;
            color: #60758a;
            font-size: 18px;
            line-height: 31px;
            margin-bottom: 32px;
        }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 45px;
            margin-top: 40px;
        }

        .hero-stat h3 {
            color: #09213a;
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 3px;
        }

        .hero-stat p {
            color: #718497;
            margin: 0;
            font-size: 14px;
        }


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

        .who-section {
            background: #ffffff;
        }

        .about-image-wrapper {
            position: relative;
        }

        .about-main-image {
            width: 100%;
            height: 520px;
            object-fit: cover;
            border-radius: 28px;
            border: 1px solid #e1ebf1;
            box-shadow: 0 25px 70px rgba(20, 63, 90, .12);
        }

        .experience-card {
            position: absolute;
            right: -25px;
            bottom: 30px;
            width: 230px;
            padding: 25px;
            background: rgba(255,255,255,.95);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            border: 1px solid #dceaf1;
            box-shadow: 0 20px 50px rgba(24, 65, 92, .15);
        }

        .experience-card .icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: rgba(0, 184, 226, .1);
            color: #00a9d4;
            font-size: 23px;
            margin-bottom: 15px;
        }

        .experience-card h4 {
            font-size: 20px;
            font-weight: 750;
            color: #0a1d34;
            margin-bottom: 5px;
        }

        .experience-card p {
            color: #708497;
            font-size: 13px;
            line-height: 21px;
            margin: 0;
        }

        .about-points {
            list-style: none;
            padding: 0;
            margin: 28px 0 32px;
        }

        .about-points li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            color: #536a7e;
            margin-bottom: 15px;
            font-size: 16px;
        }

        .about-points i {
            color: #00a9d4;
            font-size: 19px;
            margin-top: 2px;
        }


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

        .mission-section {
            background: #f3f9fc;
        }

        .mission-card {
            height: 100%;
            padding: 42px;
            border-radius: 25px;
            background: #ffffff;
            border: 1px solid #e0ebf1;
            box-shadow: 0 15px 45px rgba(26, 71, 97, .06);
            transition: all .35s ease;
        }

        .mission-card:hover {
            transform: translateY(-8px);
            border-color: rgba(0, 174, 214, .35);
            box-shadow: 0 25px 60px rgba(26, 71, 97, .11);
        }

        .mission-icon {
            width: 65px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: rgba(0, 183, 225, .1);
            color: #00a9d4;
            font-size: 29px;
            margin-bottom: 25px;
        }

        .mission-card h3 {
            color: #0a1d34;
            font-size: 25px;
            font-weight: 750;
            margin-bottom: 15px;
        }

        .mission-card p {
            color: #667b8d;
            font-size: 16px;
            line-height: 28px;
            margin: 0;
        }


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

        .values-section {
            background: #ffffff;
        }

        .values-header {
            max-width: 750px;
            margin: 0 auto 55px;
            text-align: center;
        }

        .value-card {
            height: 100%;
            padding: 32px;
            border-radius: 22px;
            background: #f8fcfe;
            border: 1px solid #e2edf2;
            transition: all .35s ease;
        }

        .value-card:hover {
            transform: translateY(-8px);
            background: #ffffff;
            border-color: rgba(0, 174, 214, .35);
            box-shadow: 0 20px 50px rgba(29, 72, 97, .09);
        }

        .value-number {
            font-size: 35px;
            font-weight: 800;
            color: rgba(0, 166, 207, .25);
            margin-bottom: 12px;
        }

        .value-icon {
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background: rgba(0, 184, 226, .1);
            color: #00a9d4;
            font-size: 23px;
            margin-bottom: 20px;
        }

        .value-card h4 {
            color: #0b2138;
            font-size: 19px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .value-card p {
            color: #6b7f90;
            line-height: 26px;
            margin: 0;
            font-size: 14px;
        }


        /* =========================================================
           TECHNOLOGY APPROACH
        ========================================================= */

        .technology-section {
            background: #eef8fc;
        }

        .technology-image-wrapper {
            position: relative;
        }

        .technology-image {
            width: 100%;
            height: 480px;
            object-fit: cover;
            border-radius: 28px;
            box-shadow: 0 25px 65px rgba(28, 69, 94, .13);
        }

        .tech-floating-box {
            position: absolute;
            left: -25px;
            bottom: 25px;
            padding: 22px 25px;
            width: 245px;
            border-radius: 20px;
            background: rgba(255,255,255,.95);
            border: 1px solid #dceaf1;
            box-shadow: 0 20px 50px rgba(28, 69, 94, .15);
        }

        .tech-floating-box i {
            color: #00a9d4;
            font-size: 28px;
        }

        .tech-floating-box h5 {
            color: #0b2138;
            font-size: 17px;
            margin: 8px 0 3px;
        }

        .tech-floating-box p {
            color: #748798;
            font-size: 13px;
            margin: 0;
        }

        .tech-points {
            margin-top: 30px;
        }

        .tech-point {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 17px 0;
            border-bottom: 1px solid #dbe8ee;
        }

        .tech-point:last-child {
            border-bottom: none;
        }

        .tech-point-icon {
            min-width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 13px;
            background: #ffffff;
            color: #00a9d4;
            font-size: 20px;
            box-shadow: 0 6px 18px rgba(29, 72, 97, .06);
        }

        .tech-point h5 {
            color: #0b2138;
            font-size: 17px;
            margin: 0 0 5px;
        }

        .tech-point p {
            color: #6d8192;
            font-size: 14px;
            line-height: 23px;
            margin: 0;
        }


        /* =========================================================
           PARTNERSHIP
        ========================================================= */

        .partnership-section {
            background: #ffffff;
        }

        .partnership-box {
            position: relative;
            padding: 65px 55px;
            border-radius: 30px;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 90% 10%,
                    rgba(0, 190, 230, .15),
                    transparent 32%
                ),
                linear-gradient(
                    135deg,
                    #f2fbfe,
                    #e8f6fb
                );
            border: 1px solid #d6ebf2;
        }

        .partnership-box h2 {
            max-width: 800px;
            color: #092039;
            font-size: 43px;
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .partnership-box p {
            max-width: 760px;
            color: #627789;
            font-size: 17px;
            line-height: 29px;
            margin-bottom: 30px;
        }


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

        .cta-section {
            padding: 100px 0;
            background: #071b2e;
        }

        .cta-box {
            position: relative;
            text-align: center;
            padding: 70px 40px;
            border-radius: 30px;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at top right,
                    rgba(0, 211, 255, .15),
                    transparent 35%
                ),
                #0b253b;
            border: 1px solid rgba(0, 210, 255, .2);
        }

        .cta-box h2 {
            color: #ffffff;
            font-size: 44px;
            font-weight: 800;
            margin-bottom: 18px;
        }

        .cta-box p {
            max-width: 700px;
            margin: 0 auto 30px;
            color: #afc0cd;
            font-size: 17px;
            line-height: 29px;
        }

        .cta-box .section-label {
            color: #08c0ea;
        }


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

        @media (max-width: 1199px) {

            .about-hero h1 {
                font-size: 55px;
            }

            .section-title {
                font-size: 40px;
            }

        }

        @media (max-width: 991px) {

            .about-hero {
                text-align: center;
                padding-top: 145px;
            }

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

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

            .about-main-image {
                height: 450px;
                margin-bottom: 50px;
            }

            .experience-card {
                right: 15px;
            }

            .technology-image {
                margin-bottom: 50px;
            }

            .tech-floating-box {
                left: 15px;
            }

        }

        @media (max-width: 767px) {

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

            .about-hero {
                min-height: auto;
                padding: 130px 0 75px;
            }

            .about-hero h1 {
                font-size: 42px;
                letter-spacing: -1px;
            }

            .about-hero-description {
                font-size: 16px;
                line-height: 27px;
            }

            .hero-stats {
                gap: 25px;
            }

            .section-title {
                font-size: 34px;
            }

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

            .experience-card {
                width: 190px;
                padding: 18px;
            }

            .mission-card {
                padding: 30px;
            }

            .value-card {
                padding: 27px;
            }

            .technology-image {
                height: 350px;
            }

            .partnership-box {
                padding: 45px 25px;
            }

            .partnership-box h2 {
                font-size: 34px;
            }

            .cta-box {
                padding: 50px 25px;
            }

            .cta-box h2 {
                font-size: 34px;
            }

        }

        @media (max-width: 480px) {

            .about-hero h1 {
                font-size: 35px;
            }

            .hero-stats {
                flex-direction: column;
                gap: 18px;
            }

            .section-title {
                font-size: 30px;
            }

            .about-main-image {
                height: 300px;
            }

            .experience-card {
                position: relative;
                right: auto;
                bottom: auto;
                width: 100%;
                margin-top: -20px;
            }

            .tech-floating-box {
                position: relative;
                left: auto;
                bottom: auto;
                width: 100%;
                margin-top: -20px;
            }

        }