.elementor-kit-5{--e-global-color-primary:#01253D;--e-global-color-secondary:#EDF2FF;--e-global-color-text:#01253D;--e-global-color-accent:#0170B9;--e-global-color-6cd69cc:#01253D;--e-global-color-cd30df0:#203264;--e-global-color-5f6e9f6:#0347FD12;--e-global-color-5f5c63d:#FF4500;--e-global-color-6c8ee17:#EDF2FF;--e-global-color-b102a51:#007F78;--e-global-color-4beda3a:#024D48;--e-global-color-2fbc3ab:#CBDAFF;--e-global-color-be9f29a:#FAFAFA;--e-global-color-874710f:#C2FF6D;--e-global-color-0c00fb0:#A8FF2F;--e-global-color-7418866:#01253D;--e-global-color-9951b0c:#020202;--e-global-color-b2f3987:#010D18;--e-global-color-390880c:#002244;--e-global-color-d87a6c9:#8D4BFF;--e-global-color-d5f8ba0:#7525FF;--e-global-color-2988598:#8D4BFF14;--e-global-color-554bfa2:#FF5555;--e-global-color-1097bd4:#FF3535;--e-global-typography-primary-font-family:"DM Sans";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );}.elementor-kit-5 h1{color:var( --e-global-color-cd30df0 );}.elementor-kit-5 h2{color:var( --e-global-color-cd30df0 );}.elementor-kit-5 h3{color:var( --e-global-color-cd30df0 );}.elementor-kit-5 h4{color:var( --e-global-color-cd30df0 );}.elementor-kit-5 h5{color:var( --e-global-color-cd30df0 );}.elementor-kit-5 h6{color:var( --e-global-color-cd30df0 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end: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:1200px){.elementor-kit-5{--e-global-typography-primary-font-size:35px;}}@media(max-width:1024px){.elementor-kit-5{--e-global-typography-primary-font-size:35px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Add blur effect to the header on scroll */

.elementor-sticky--effects {
    backdrop-filter: blur(10px); 
    

    background: rgba(255, 255, 255, 0.4); 
    

transition: backdrop-filter 0.3s ease, background 0.3s ease;
} 

/**************************/
#free-quote-button-gradient {
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.3), rgba(255, 0, 255, 0.3));
    backdrop-filter: blur(10px);
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
}
#free-quote-button-gradient:hover {
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.6), rgba(255, 0, 255, 0.6));
}
/***************************/

#login-button-gradient:hover {
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.3), rgba(255, 0, 255, 0.3));
    border-radius: 25px;
}

/**************************/

/*Gradient Heading H1, H2 etc Color With Diffrent Color Combination*/

.gradient-heading-color-linear {
    background: linear-gradient(90deg, #E13CEF, #45A0FF);/*Static Purple color combination*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.second-gradient-heading-color-linear {
    background: linear-gradient(270deg, #ff5555, #ff0000);/*Purple color combination*/
    background-size: 400% 400%;
    animation: gradientAnimation 6s infinite alternate;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.third-gradient-heading-color-linear {
    background: linear-gradient(270deg,#00BFFF,#0039a6);/*Blue color combination*/
    background-size: 400% 400%;
    animation: gradientAnimation 6s infinite alternate;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/************************/

/*For Gradient Background Of Button*/

#icon-button-gradient-background {
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.3), rgba(255, 0, 255, 0.3));
    backdrop-filter: blur(10px);
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
}
#icon-button-gradient-background:hover {
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.4), rgba(255, 0, 255, 0.4));
}

/*For Gradient Background Of Button in Round Shape*/

#icon-button-gradient-background-round {
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.3), rgba(255, 0, 255, 0.3));
    backdrop-filter: blur(10px);
    width: 40px; /* Adjust width */
    height: 40px; /* Adjust height */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Perfectly round */
    transition: all 0.3s ease-in-out;
    border: none; /* Remove any unwanted border */
    padding: 0; /* Ensure no extra padding */
}

#icon-button-gradient-background-round:hover {
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.4), rgba(255, 0, 255, 0.4));
}


/*For Gradient Border Of Button*/

#icon2-button-gradient-border {
    position: relative;
    padding: 0px 5px;
}

#icon2-button-gradient-border::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 25px;
    padding: 2px;

    /* DesignVx brand gradient border */
    background: linear-gradient(45deg,
        #000000,
        #ff5555,
        #000000
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

/* Hover animation with brighter highlights */
#icon2-button-gradient-border:hover::before {
    background: linear-gradient(45deg,
        #000000,
        #ff5555,
        #ff8888,
        #ff5555,
        #000000
    );
}


/***************************/

/*Elementor Form Button Style*/

.elementorbutton[type="submit"] {
    background: linear-gradient(33deg,  #E946FF, #7525FF);
    border: none;
    color: white;
    transition: all 0.3s ease-in-out;
}

.elementorbutton[type="submit"]:hover {
    background: linear-gradient(44deg, #7525FF, #E946FF);
    
}

/**************************/


/*Gradient animation when someone hover on container*/


@keyframes hoverGradientAnimationDesignvx {
    0% {
        background: linear-gradient(45deg, rgba(0, 204, 255, 0.1), rgba(255, 0, 255, 0.1));
    }
    50% {
        background: linear-gradient(45deg, rgba(255, 0, 255, 0.1), rgba(0, 204, 255, 0.1));
    }
    100% {
        background: linear-gradient(45deg, rgba(0, 204, 255, 0.1), rgba(255, 0, 255, 0.1));
    }
}


#hover-gradient-container-designvx:hover {
    animation: hoverGradientAnimationDesignvx 4s infinite alternate ease-in-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* Gradient Static Background of Container*/


@keyframes glassGradientAnimationDesignvx {
    0% {
        background: linear-gradient(45deg,
            rgba(0, 204, 255, 0.12),
            rgba(255, 85, 85, 0.12)
        );
    }
    50% {
        background: linear-gradient(45deg,
            rgba(255, 85, 85, 0.12),
            rgba(255, 0, 255, 0.12)
        );
    }
    100% {
        background: linear-gradient(45deg,
            rgba(0, 204, 255, 0.12),
            rgba(255, 85, 85, 0.12)
        );
    }
}

#glass-container-designvx {
    position: relative;
    background: linear-gradient(45deg,
        rgba(0, 204, 255, 0.12),
        rgba(255, 85, 85, 0.12)
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    animation: glassGradientAnimationDesignvx 8s infinite alternate ease-in-out;
}


/**************************/


/* Round Border Gradient Background of Container*/

@keyframes roundglassGradientAnimationDesignvx {
    0% {
        background: linear-gradient(45deg, rgba(0, 204, 255, 0.1), rgba(255, 0, 255, 0.1));
    }
    50% {
        background: linear-gradient(45deg, rgba(255, 0, 255, 0.1), rgba(0, 204, 255, 0.1));
    }
    100% {
        background: linear-gradient(45deg, rgba(0, 204, 255, 0.1), rgba(255, 0, 255, 0.1));
    }
}

#round-glass-container-designvx {
    position: relative;
    background: linear-gradient(45deg, rgba(0, 204, 255, 0.1), rgba(255, 0, 255, 0.1));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
   
       animation: roundglassGradientAnimationDesignvx 8s infinite alternate ease-in-out;
       border-radius: 10px;
}

/*************************/


/*Animated  Container For Blue Gradient Background Animation*/

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#animated-gradient-customer { 
    background: linear-gradient(90deg, #002244, #010d18);
    background-size: 200% 200%;
    animation: gradientAnimation 3s ease-in-out infinite;
}


/*************************/

/*Hide navigation button of carousel for tablet and mobile device*/

@media (max-width: 1024px) {
    .designvx-hide-nav-mobile .elementor-swiper-button {
        display: none !important;
    }
}


/*************************//* End custom CSS */