html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Outfit', sans-serif;
        }

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

        /* Hero animated shapes */
        .hero-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {

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

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

        .fade-in {
            opacity: 0;
            animation: fadeIn 0.7s ease forwards;
        }

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

        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeIn 0.7s ease forwards;
        }

        .delay-1 {
            animation-delay: 0.15s;
        }

        .delay-2 {
            animation-delay: 0.3s;
        }

        .delay-3 {
            animation-delay: 0.45s;
        }

        .delay-4 {
            animation-delay: 0.6s;
        }

        .delay-5 {
            animation-delay: 0.75s;
        }

        /* Glowing feature cards */
        .feature-card:hover {
            box-shadow: 0 0 0 2px #2282ff33, 0 8px 40px 0 #2282ff18;
        }

        /* Domain search */
        .domain-glow:focus-within {
            box-shadow: 0 0 0 3px #2282ff55;
        }

        /* Pricing toggle */
        .plan-toggle {
            transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
        }

        /* Partner logos grayscale */
        .partner-logo {
            filter: grayscale(100%) opacity(0.5);
            transition: filter 0.3s;
        }

        .partner-logo:hover {
            filter: grayscale(0%) opacity(1);
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }

        ::-webkit-scrollbar-thumb {
            background: #2282ff;
            border-radius: 3px;
        }

        /* CTA banner gradient */
        .cta-banner {
            background: linear-gradient(90deg, #0d63f5 0%, #0f2460 100%);
        }

        /* Testimonial card active */
        .testimonial-active {
            border-color: #2282ff !important;
        }

        /* Testimonial section background with fixed parallax effect and soft overlay */
        .testimonial-section {
            position: relative;
            background-image: url('../img/testimonial_bg.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        /* Disable parallax scrolling on mobile screens to prevent performance issues and lag */
        @media (max-width: 768px) {
            .testimonial-section {
                background-attachment: scroll;
            }
        }

        /* Externalized inline styles classes */
        .grid-overlay {
            background-image: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .hero-slide-common {
            min-height: calc(100vh - 64px);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 0.7s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (min-width: 768px) {
            .hero-slide-common {
                height: calc(100vh - 64px);
                min-height: 600px;
            }
        }

        .hero-slide-0 {
            background-image: linear-gradient(to right, rgba(15, 36, 96, 0.9) 0%, rgba(15, 36, 96, 0.6) 50%, rgba(16, 96, 232, 0.15) 100%), url('../img/hosting_bg.png');
        }

        .hero-slide-1 {
            background-image: linear-gradient(to right, rgba(17, 24, 39, 0.9) 0%, rgba(17, 24, 39, 0.55) 50%, rgba(13, 148, 136, 0.1) 100%), url('../img/vps_banner.png');
        }

        .hero-slide-2 {
            background-image: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.55) 50%, rgba(30, 41, 59, 0.1) 100%), url('../img/dedicated_server_banner.png');
        }

        .hero-slide-3 {
            background-image: linear-gradient(to right, rgba(8, 15, 30, 0.92) 0%, rgba(8, 15, 30, 0.6) 50%, rgba(88, 28, 135, 0.15) 100%), url('../img/colocation_banner.png');
        }

        .hero-slide-4 {
            background-image: linear-gradient(to right, rgba(30, 27, 75, 0.9) 0%, rgba(30, 27, 75, 0.5) 50%, rgba(79, 70, 229, 0.1) 100%), url('../img/web_design_banner.png');
        }

        .hero-linuxvps {
            background-image: linear-gradient(135deg, rgba(15, 36, 96, 0.9) 0%, rgba(26, 59, 138, 0.85) 40%, rgba(16, 96, 232, 0.75) 100%), url('../img/hosting_bg.png');
            min-height: 540px;
        }

        .hero-cyberpanel {
            background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.93) 0%, rgba(15, 23, 42, 0.85) 40%, rgba(13, 148, 136, 0.3) 100%), url('../img/hosting_bg.png');
            min-height: 540px;
        }

        .hero-dedicated {
            background-image: linear-gradient(135deg, rgba(15, 36, 96, 0.92) 0%, rgba(26, 59, 138, 0.88) 40%, rgba(16, 96, 232, 0.78) 100%), url('../img/dedicated_server_banner.png');
            min-height: 500px;
        }

        .hero-colocation {
            background-image: linear-gradient(135deg, rgba(15, 36, 96, 0.92) 0%, rgba(26, 59, 138, 0.88) 40%, rgba(16, 96, 232, 0.78) 100%), url('../img/colocation_banner.png');
            min-height: 500px;
        }

        .hero-contact {
            background-image: linear-gradient(135deg, rgba(15, 36, 96, 0.95) 0%, rgba(26, 59, 138, 0.9) 40%, rgba(16, 96, 232, 0.8) 100%);
        }

        .delay-1-5s {
            animation-delay: 1.5s;
        }

        .delay-2s {
            animation-delay: 2s;
        }

        .delay-3s {
            animation-delay: 3s;
        }

        .perspective-800 {
            perspective: 800px;
        }

        .server-card-bg {
            background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
            border: 1px solid rgba(255,255,255,0.15);
        }

        .datacenter-panel {
            background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
            height: 360px;
        }

        .h-360 {
            height: 360px;
        }

        .no-border {
            border: 0;
        }

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

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

        .hero-about {
            background-image: linear-gradient(135deg, rgba(15, 36, 96, 0.95) 0%, rgba(26, 59, 138, 0.9) 40%, rgba(16, 96, 232, 0.8) 100%), url('../img/hosting_bg.png');
        }