.elementor-321 .elementor-element.elementor-element-44e536b{--display:grid;--e-con-grid-template-columns:5fr 7fr;--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--align-items:center;--margin-top:60px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-321 .elementor-element.elementor-element-5ae2507 .elementor-nav-menu .elementor-item{font-size:30px;font-weight:900;text-transform:uppercase;line-height:50px;}.elementor-321 .elementor-element.elementor-element-5ae2507 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-321 .elementor-element.elementor-element-5ae2507{--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );}.elementor-321 .elementor-element.elementor-element-5ae2507 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}.elementor-321 .elementor-element.elementor-element-4565a60{--display:flex;}.elementor-321 .elementor-element.elementor-element-4565a60:not(.elementor-motion-effects-element-type-background), .elementor-321 .elementor-element.elementor-element-4565a60 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://arts2.gr/wp-content/uploads/2025/02/ARTS2_ExochikiKatoikiaNeapoli-main.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-321 .elementor-element.elementor-element-a589db4{--spacer-size:300px;}@media(max-width:1024px){.elementor-321 .elementor-element.elementor-element-44e536b{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-321 .elementor-element.elementor-element-44e536b{--e-con-grid-template-columns:1;--grid-auto-flow:row;}}/* Start custom CSS for nav-menu, class: .elementor-element-5ae2507 *//* Ensure the menu link has a position and size */
.elementor-321 .elementor-element.elementor-element-5ae2507 .menu-item .elementor-item {
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s ease;
    z-index: 1;
}

/* Background effect using ::after */
.elementor-321 .elementor-element.elementor-element-5ae2507 .menu-item .elementor-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%; /* Start with 50% width */
    background-color: #F1F1F1;
    transition: width 0.3s ease-in-out;
    z-index: -1;
    display: block; /* Ensures visibility */
    visibility: visible; /* Forces rendering */
    opacity: 1 !important; /* Ensures it's not transparent */
}

/* Expand background to 100% on hover */
.elementor-321 .elementor-element.elementor-element-5ae2507 .menu-item .elementor-item:hover::after {
    width: 100%;
}/* End custom CSS */