@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(90deg, hsl(267, 86%, 59%), hsl(192, 70%, 51%));
        }

        .gradient-button {
            background-image: linear-gradient(90deg, #9152e8, #60A5FA);
            /* Blue gradient */
            color: white;
            /* Text color */
            font-weight: bold;
            font-size: 1rem;
            border: none;
            border-radius: 0.75rem;
            /* Rounded corners */
            cursor: pointer;
            padding: 0.5rem 1.5rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* Soft shadow */
        }

        .gradient-button:hover {
            background-image: linear-gradient(90deg, #78a8f6, #995aec);
            /* Darker blue on hover */
            transform: translateY(-2px);
        }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .card-hover-effect:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .tilt-effect:hover {
            transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
        }

        .progress-bar {
            height: 4px;
            background: linear-gradient(90deg, #e6c34d, #ffbf00);
            width: 0%;
            transition: width 0.4s ease;
        }

        /* Gallery item hover effect */
        .gallery-item {
            transition: all 0.5s ease;
            transform-style: preserve-3d;
        }

        .gallery-item:hover {
            transform: scale(1.05) rotateY(10deg);
            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }

        .input-animate {
            transition: all 0.3s ease;
        }

        .input-animate:focus {
            transform: scale(1.02);
            box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;
        }

        /* Service category colors */
        .service-proxy {
            border-left: 4px solid #3b82f6;
        }

        .service-esim {
            border-left: 4px solid #10b981;
        }

        .service-rdp {
            border-left: 4px solid #8b5cf6;
        }

        .service-digital {
            border-left: 4px solid #f59e0b;
        }

        .service-vpn {
            border-left: 4px solid #ef4444;
        }

        /* Loading animation */
        .loader {
            border: 3px solid #f1f1f1;
            border-top: 3px solid #1e40af;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Smooth transitions */
        .transition-all-custom {
            transition: all 0.3s ease;
        }