.elementor-5983 .elementor-element.elementor-element-3374610{--display:flex;--overlay-opacity:0.5;--padding-top:1px;--padding-bottom:1px;--padding-left:1px;--padding-right:1px;}.elementor-5983 .elementor-element.elementor-element-3374610::before, .elementor-5983 .elementor-element.elementor-element-3374610 > .elementor-background-video-container::before, .elementor-5983 .elementor-element.elementor-element-3374610 > .e-con-inner > .elementor-background-video-container::before, .elementor-5983 .elementor-element.elementor-element-3374610 > .elementor-background-slideshow::before, .elementor-5983 .elementor-element.elementor-element-3374610 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5983 .elementor-element.elementor-element-3374610 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#02010173;--background-overlay:'';}.elementor-5983 .elementor-element.elementor-element-42eec00{width:100%;max-width:100%;}.elementor-5983 .elementor-element.elementor-element-d5b6162{--display:flex;--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;}/* Start custom CSS for html, class: .elementor-element-42eec00 *//* Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

.circle-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    height: 500px;
    margin: 0 auto;
    border: none;
    background-image: url('https://varushasouth.art/wp-content/uploads/2024/08/417686944_365752786148527_3209703705007305494_n-1.jpg');
    background-size: cover;
    background-position: center;
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

/* Transition pseudo-element */
.circle-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 0;
}

/* Dark overlay */
.circle-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Slight dark overlay */
    z-index: 1;
}

/* Position the menu items */
.circle-menu .menu-item {
    position: absolute;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    text-decoration: none !important; /* Force remove underline */
    color: #fff;
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s ease;
    z-index: 2; /* Ensure the menu items appear above the overlay */
}

/* Positioning items around the circle */
.circle-menu .menu-item:nth-child(1) { transform: rotate(0deg) translateY(-180px) rotate(0deg); }
.circle-menu .menu-item:nth-child(2) { transform: rotate(72deg) translateY(-180px) rotate(-72deg); }
.circle-menu .menu-item:nth-child(3) { transform: rotate(144deg) translateY(-180px) rotate(-144deg); }
.circle-menu .menu-item:nth-child(4) { transform: rotate(216deg) translateY(-180px) rotate(-216deg); }
.circle-menu .menu-item:nth-child(5) { transform: rotate(288deg) translateY(-180px) rotate(-288deg); }

/* Hover effect */
.circle-menu .menu-item:hover,
.circle-menu .menu-item:visited,
.circle-menu .menu-item:active,
.circle-menu .menu-item:link {
    text-decoration: none !important;
    color: #fff;
}/* End custom CSS */