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

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #f7fbff;
            color: #0b1b33;
            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.2;
            font-weight: 750;
            color: #0b1b33;
            margin-bottom: 20px;
        }

        .section-description {
            color: #64748b;
            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: #08b9df;
            color: #062039;

            font-weight: 700;

            border: 2px solid #08b9df;

            transition: all .35s ease;
        }

        .btn-vivastar:hover {
            background: #062039;
            border-color: #062039;
            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: #0b1b33;

            font-weight: 600;

            border: 2px solid #d5e2ec;

            transition: all .35s ease;
        }

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


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

        .services-hero {
            position: relative;

            padding: 175px 0 110px;

            background:
                radial-gradient(
                    circle at 90% 10%,
                    rgba(0, 190, 230, .15),
                    transparent 35%
                ),
                linear-gradient(
                    135deg,
                    #f5fbff 0%,
                    #ffffff 55%,
                    #eefaff 100%
                );

            overflow: hidden;
        }

        .services-hero::before {
            content: "";

            position: absolute;

            width: 400px;
            height: 400px;

            border-radius: 50%;

            background: rgba(0, 190, 230, .08);

            filter: blur(80px);

            right: -120px;
            bottom: -150px;
        }

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

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            padding: 9px 17px;

            border-radius: 50px;

            background: rgba(0, 181, 220, .08);

            border: 1px solid rgba(0, 181, 220, .25);

            color: #009fc8;

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

            margin-bottom: 25px;
        }

        .hero-badge span {
            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: #08b9df;

            box-shadow: 0 0 12px rgba(8, 185, 223, .6);
        }

        .services-hero h1 {
            font-size: 62px;
            line-height: 1.08;

            font-weight: 800;

            letter-spacing: -2px;

            color: #091b33;

            margin-bottom: 25px;
        }

        .services-hero h1 span {
            color: #08aace;
        }

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

            color: #60758a;

            font-size: 18px;

            line-height: 31px;

            margin-bottom: 35px;
        }

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


        /* Hero Visual */

        .services-hero-visual {
            position: relative;
        }

        .hero-image-wrapper {
            position: relative;

            padding: 15px;
        }

        .hero-image {
            width: 100%;
            height: 470px;

            object-fit: cover;

            border-radius: 30px;

            border: 1px solid #dceaf2;

            box-shadow:
                0 30px 70px rgba(22, 65, 92, .15);
        }

        .floating-card {
            position: absolute;

            left: -25px;
            bottom: 35px;

            width: 240px;

            padding: 22px;

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

            backdrop-filter: blur(15px);

            border-radius: 20px;

            border: 1px solid #dceaf2;

            box-shadow: 0 20px 45px rgba(17, 55, 80, .15);
        }

        .floating-card i {
            color: #00a9d4;
            font-size: 30px;
        }

        .floating-card h5 {
            margin: 10px 0 4px;

            font-size: 17px;

            color: #0b1b33;
        }

        .floating-card p {
            margin: 0;

            color: #718397;

            font-size: 13px;
        }


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

        .services-section {
            background: #ffffff;
        }

        .services-header {
            max-width: 760px;

            margin: 0 auto 60px;

            text-align: center;
        }

        .service-card {
            position: relative;

            height: 100%;

            padding: 35px;

            background: #ffffff;

            border-radius: 22px;

            border: 1px solid #e0eaf1;

            box-shadow:
                0 12px 35px rgba(26, 71, 99, .06);

            overflow: hidden;

            transition: all .4s ease;
        }

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

            position: absolute;

            width: 120px;
            height: 120px;

            border-radius: 50%;

            background: rgba(0, 185, 220, .07);

            top: -65px;
            right: -65px;

            transition: .4s ease;
        }

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

            border-color: rgba(0, 169, 212, .35);

            box-shadow:
                0 25px 55px rgba(22, 70, 96, .12);
        }

        .service-card:hover::before {
            transform: scale(2.2);
        }

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

            width: 65px;
            height: 65px;

            display: flex;

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

            border-radius: 17px;

            background: #eafaff;

            color: #00a9d4;

            font-size: 29px;

            margin-bottom: 25px;
        }

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

            font-size: 21px;

            color: #10243c;

            margin-bottom: 14px;
        }

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

            color: #718397;

            line-height: 27px;

            margin: 0;
        }


        /* =========================================================
           FEATURED SERVICE
        ========================================================= */

        .featured-section {
            background:
                linear-gradient(
                    135deg,
                    #f0faff,
                    #ffffff
                );
        }

        .featured-box {
            background: #ffffff;

            border: 1px solid #dceaf2;

            border-radius: 30px;

            padding: 55px;

            box-shadow:
                0 25px 70px rgba(23, 71, 98, .08);
        }

        .featured-icon {
            width: 75px;
            height: 75px;

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

            background: #e8faff;

            color: #00a9d4;

            border-radius: 20px;

            font-size: 35px;

            margin-bottom: 25px;
        }

        .featured-box h2 {
            color: #0b1b33;

            font-size: 40px;

            font-weight: 750;

            margin-bottom: 18px;
        }

        .featured-box p {
            color: #64788c;

            font-size: 16px;

            line-height: 28px;
        }

        .feature-list {
            list-style: none;

            padding: 0;

            margin: 25px 0;
        }

        .feature-list li {
            display: flex;

            align-items: flex-start;

            gap: 12px;

            margin-bottom: 15px;

            color: #445b70;
        }

        .feature-list i {
            color: #00a9d4;

            font-size: 19px;
        }


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

        .process-section {
            background: #ffffff;
        }

        .process-card {
            position: relative;

            text-align: center;

            padding: 30px 20px;
        }

        .process-number {
            width: 70px;
            height: 70px;

            display: flex;

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

            margin: 0 auto 22px;

            border-radius: 50%;

            background: #eafaff;

            border: 2px solid #08b9df;

            color: #009fc8;

            font-size: 18px;

            font-weight: 800;

            position: relative;

            z-index: 2;
        }

        .process-line {
            position: absolute;

            top: 64px;

            left: 15%;

            right: 15%;

            height: 2px;

            background: #d8edf4;
        }

        .process-card h5 {
            color: #10243c;

            margin-bottom: 10px;
        }

        .process-card p {
            color: #7a8b9b;

            font-size: 14px;

            line-height: 24px;
        }


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

        .why-section {
            background: #f5fbff;
        }

        .why-box {
            height: 100%;

            padding: 30px;

            background: #ffffff;

            border-radius: 20px;

            border: 1px solid #e0eaf1;

            transition: .35s ease;
        }

        .why-box:hover {
            transform: translateY(-7px);

            border-color: rgba(0, 169, 212, .3);

            box-shadow:
                0 20px 45px rgba(20, 67, 94, .08);
        }

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

            display: flex;

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

            border-radius: 15px;

            background: #eafaff;

            color: #00a9d4;

            font-size: 24px;

            margin-bottom: 20px;
        }

        .why-box h5 {
            color: #10243c;

            margin-bottom: 12px;
        }

        .why-box p {
            color: #748597;

            line-height: 26px;

            margin: 0;
        }


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

        .cta-section {
            padding: 100px 0;

            background: #f5fbff;
        }

        .cta-box {
            position: relative;

            padding: 75px 50px;

            text-align: center;

            border-radius: 30px;

            overflow: hidden;

            border: 1px solid rgba(0, 169, 212, .2);

            background:
                radial-gradient(
                    circle at top right,
                    rgba(0, 190, 230, .14),
                    transparent 35%
                ),
                linear-gradient(
                    135deg,
                    #eefaff,
                    #ffffff
                );
        }

        .cta-box h2 {
            color: #0b1b33;

            font-size: 45px;

            font-weight: 800;

            margin-bottom: 20px;
        }

        .cta-box p {
            max-width: 700px;

            margin: 0 auto 30px;

            color: #65798b;

            font-size: 17px;

            line-height: 28px;
        }


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

        @media (max-width: 1199px) {

            .services-hero h1 {
                font-size: 54px;
            }

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

        }

        @media (max-width: 991px) {

            .services-hero {
                text-align: center;

                padding-top: 155px;
            }

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

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

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

            .floating-card {
                left: 20px;
            }

            .process-line {
                display: none;
            }

            .featured-box {
                padding: 40px;
            }

        }

        @media (max-width: 767px) {

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

            .services-hero {
                padding: 130px 0 75px;
            }

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

                letter-spacing: -1px;
            }

            .hero-description {
                font-size: 16px;

                line-height: 27px;
            }

            .hero-image {
                height: 350px;
            }

            .floating-card {
                left: 10px;

                bottom: 20px;

                width: 205px;

                padding: 17px;
            }

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

            .service-card {
                padding: 28px;
            }

            .featured-box {
                padding: 30px;
            }

            .featured-box h2 {
                font-size: 32px;
            }

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

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

        }

        @media (max-width: 480px) {

            .services-hero h1 {
                font-size: 36px;
            }

            .hero-buttons {
                flex-direction: column;
            }

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

            .hero-image {
                height: 300px;
            }

        }