.elementor-kit-7{--e-global-color-primary:#3B82F6;--e-global-color-secondary:#0E1115;--e-global-color-text:#000000;--e-global-color-accent:#F0ABFC;--e-global-color-c8e06dc:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Helvetica";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Custom styles for a modern look */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0A0A0A;
            color: #E2E8F0; /* slate-200 */
        }
        .gradient-text {
            background: linear-gradient(to right, #60A5FA, #A78BFA); /* blue-400 to violet-400 */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        .cta-button {
            transition: all 0.3s ease;
        }
        .cta-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.2), 0 4px 6px -2px rgba(96, 165, 250, 0.1);
        }
        .card {
            background-color: rgba(30, 41, 59, 0.5); /* slate-800 with opacity */
            border: 1px solid #334155; /* slate-700 */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        .card:hover {
            border-color: #60A5FA; /* blue-400 */
            transform: translateY(-4px);
        }

        /* Styles for scroll animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* Staggered delay for cards */
        #services .card:nth-child(2), #packs .card:nth-child(2), #portfolio .card:nth-child(2) { transition-delay: 100ms; }
        #services .card:nth-child(3), #packs .card:nth-child(3), #portfolio .card:nth-child(3) { transition-delay: 200ms; }
        #services .card:nth-child(4) { transition-delay: 300ms; }

        /* Animation for hero elements on load */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        #hero h2 { animation: fadeInUp 0.6s ease-out 0.2s backwards; }
        #hero h1 { animation: fadeInUp 0.6s ease-out 0.4s backwards; }
        #hero p { animation: fadeInUp 0.6s ease-out 0.6s backwards; }
        #hero .cta-button { animation: fadeInUp 0.6s ease-out 0.8s backwards; }

        /* Animated Gradient for Hero */
        @keyframes animated-gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        #hero {
            background: linear-gradient(-45deg, 
                rgba(167, 139, 250, 0.1), /* violet */
                rgba(96, 165, 250, 0.15), /* blue */
                rgba(249, 115, 22, 0.1),  /* orange glow */
                rgba(96, 165, 250, 0.15)  /* blue */
            );
            background-size: 300% 300%;
            animation: animated-gradient 18s ease infinite;
        }
        
        /* Style for header on scroll */
        #main-header.header-scrolled {
            background-color: rgba(10, 10, 10, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }/* End custom CSS */