.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-kit-6 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){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 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 *//* Main container */
.marquee2-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /*padding: 20px 0;*/
}

/* Scrolling content */
.marquee2-content {
    display: flex;
    gap: 40px;
    animation: scroll2 30s linear infinite;
    justify-content: space-around;
    width: 200%; /* Double the width */
}

/* Individual heading styling with hover effect */
.marquee2-heading {
    flex-shrink: 0;
    width: fit-content;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 8px 16px; /* Add some padding for better hover area */
}

/* Hover effect on heading */
.marquee2-heading:hover {
    transform: scale(1.05); /* Slight scale effect on hover */
}

/* Pause animation when hovering over heading */
.marquee2-heading:hover ~ .marquee2-heading,
.marquee2-heading:hover {
    animation-play-state: paused;
}

/* When any heading is hovered, pause the marquee content */
.marquee2-content:has(.marquee2-heading:hover) {
    animation-play-state: paused;
}

@keyframes scroll2 {
    0% {
        transform: translateX(-50%); /* Start from left */
    }
    100% {
        transform: translateX(0); /* Move to right */
    }
}

/* Performance optimizations */
.marquee2-content {
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Optional: Add visual feedback on hover */
.marquee2-heading:hover {
    color: #FF8E16; /* Your brand color */
    text-shadow: 0 0 10px rgba(255, 142, 22, 0.3);
}/* End custom CSS */