body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background-color: #020617;
    }

    .nav-glass {
        background: rgba(2, 6, 23, 0.8);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .section-padding {
        padding: 100px 1.5rem;
    }

    .gradient-text {
        background: linear-gradient(-90deg, #60a5fa, #3b82f6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .card-navy {
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
    }

    .card-navy:hover {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(59, 130, 246, 0.5);
        transform: translateY(-5px);
    }

    .swiper-pagination-bullet {
        background: #334155 !important;
        width: 12px;
        height: 12px;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background: #3b82f6 !important;
        width: 30px;
        border-radius: 10px;
        transition: width 0.3s ease;
    }

    .hero-pagination {
        bottom: 40px !important;
        right: 50% !important;
        transform: translateX(50%);
        display: flex;
        gap: 20px;
    }

    .hero-pagination .swiper-pagination-bullet {
        background: transparent !important;
        color: rgba(255, 255, 255, 0.3);
        font-weight: 800;
        font-size: 14px;
        opacity: 1;
        width: auto;
        height: auto;
        transition: all 0.3s ease;
    }

    .hero-pagination .swiper-pagination-bullet-active {
        color: #3b82f6 !important;
        transform: scale(1.2);
    }


    .swiper-slide-active h1 {
        animation: fadeInUp 0.8s ease forwards;
    }

    .swiper-slide-active p {
        animation: fadeInUp 1s ease forwards 0.2s;
        opacity: 0;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes float {

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

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

    @keyframes float-slow {

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

        50% {
            transform: translate(50%, -50%) translateY(-30px);
        }
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    .animate-float-slow {
        animation: float-slow 8s ease-in-out infinite;
    }

    .gradient-text {
        background: linear-gradient(-90deg, #60a5fa, #3b82f6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .vision-card {
        @apply relative p-10 rounded-[2.5rem] bg-slate-900/40 border border-white/5 transition-all duration-500;
        backdrop-filter: blur(12px);
    }

    .vision-card:hover {
        @apply border-blue-500/30 -translate-y-4 bg-slate-900/60 shadow-[0_30px_60px_rgba(0, 0, 0, 0.5)];
    }

    .icon-box {
        @apply w-14 h-14 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-500 text-2xl mb-8 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500;
    }


    .check-icon {
        @apply absolute top-6 left-6 w-7 h-7 rounded-full bg-blue-500/10 text-blue-500 flex items-center justify-center text-[10px] border border-blue-500/20 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500;
    }


    .service-card {
        @apply relative p-10 rounded-[2.5rem] bg-slate-900/40 border border-white/5 backdrop-blur-md overflow-hidden transition-all duration-500 text-left;
    }

    .service-card:hover {
        @apply border-indigo-500/30 -translate-y-4 bg-slate-900/60 shadow-[0_30px_60px_rgba(0, 0, 0, 0.5)];
    }


    .service-icon {
        @apply w-16 h-16 rounded-3xl bg-gradient-to-br from-indigo-600/20 to-blue-600/5 flex items-center justify-center text-indigo-400 text-3xl mb-8 border border-indigo-500/20 transition-transform duration-500 group-hover:scale-110;
    }

    .service-card:hover .service-icon {
        @apply bg-indigo-600 text-white rotate-[10deg] shadow-[0_0_20px_rgba(79, 70, 229, 0.5)];
    }


    .service-text {
        @apply text-slate-400 text-sm leading-relaxed mb-6 font-light transition-colors group-hover:text-slate-100;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    .animate-fade-in {
        animation: fadeInUp 1s ease-out forwards;
    }

    .input-glass {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    .input-glass:focus {
        border-color: #3b82f6;
        background: rgba(255, 255, 255, 0.05);
        outline: none;
    }