.elementor-22553 .elementor-element.elementor-element-6f4c666{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-22553 .elementor-element.elementor-element-6f4c666:not(.elementor-motion-effects-element-type-background), .elementor-22553 .elementor-element.elementor-element-6f4c666 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-22553 .elementor-element.elementor-element-e2781f4.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-e2781f4 *//* Import Bebas Neue font */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
    background-color: black; /* Container background is black */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 80px;
    padding: 50px 0;
}

.menu-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
}

.menu-item .word {
    display: inline-flex;
    gap: 2px;
    position: relative;
    z-index: 1; /* Ensures text is above the background */
}

.menu-item .letter {
    display: inline-block;
    font-family: 'Bebas Neue', Arial, sans-serif; /* Use Bebas Neue */
    font-size: 150px; /* Set text size to 150px */
    font-weight: bold;
    color: white; /* Text color is white */
    line-height: 1; /* Ensure no extra space is added between lines */
    transform-origin: center; /* Rotate around the center */
    transition: transform 0.8s ease-in-out, color 0.5s ease; /* Smooth rolling effect */
}

.menu-item:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0385FF; /* Highlight background is #0385FF */
    z-index: 0; /* Ensure it's behind the text */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-item:hover:after {
    transform: scaleX(1); /* Expands the highlight on hover */
}

.menu-item:hover .letter {
    transform: rotateX(360deg); /* Each letter rolls individually */
    transition-delay: calc(var(--index, 0) * 0.05s); /* Adds staggered animation */
}/* End custom CSS */