.elementor-kit-7{--e-global-color-primary:#01161E;--e-global-color-secondary:#DFD7BB;--e-global-color-text:#01161E;--e-global-color-accent:#022B3B;--e-global-color-1d86e53:#4B644A;--e-global-color-bf944c5:#D8D8D8;--e-global-color-707385a:#DFD7BB;--e-global-color-60780d8:#FFFFFF00;--e-global-color-278fe40:#F5F5F5;--e-global-color-dc022c7:#FFFFFF3D;--e-global-typography-primary-font-family:"Junge";--e-global-typography-secondary-font-family:"Work Sans";--e-global-typography-text-font-family:"Work Sans";--e-global-typography-text-font-size:clamp(1rem, 0.25rem + 1.5vw, 1rem);--e-global-typography-text-font-weight:normal;--e-global-typography-accent-font-family:"Work Sans";--e-global-typography-2d0dd3a-font-family:"Junge";--e-global-typography-2d0dd3a-font-size:clamp(2.25rem, 0.5rem + 5vw, 3rem);--e-global-typography-2d0dd3a-text-transform:uppercase;--e-global-typography-2d0dd3a-line-height:1.3em;--e-global-typography-563d10d-font-family:"Junge";--e-global-typography-563d10d-font-size:clamp(1.75rem, 0.25rem + 4vw, 2.5rem);--e-global-typography-563d10d-text-transform:none;--e-global-typography-563d10d-line-height:1.3em;--e-global-typography-12889ac-font-family:"Junge";--e-global-typography-12889ac-font-size:clamp(1.5rem, 0.25rem + 3vw, 2rem);--e-global-typography-12889ac-text-transform:none;--e-global-typography-12889ac-line-height:1.2em;--e-global-typography-c245210-font-family:"Junge";--e-global-typography-c245210-font-size:clamp(1.125rem, 0.25rem + 2vw, 1.25rem);--e-global-typography-c245210-line-height:1.3em;--e-global-typography-ec7995c-font-family:"Jungle";--e-global-typography-ec7995c-font-size:clamp(1rem, 0.125rem + 1.5vw, 1rem);--e-global-typography-ec7995c-line-height:1.3em;background-color:#F8F7F1;color:var( --e-global-color-text );font-size:1rem;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-1d86e53 );color:var( --e-global-color-278fe40 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-1d86e53 );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{color:var( --e-global-color-text );font-family:var( --e-global-typography-2d0dd3a-font-family ), Sans-serif;font-size:var( --e-global-typography-2d0dd3a-font-size );text-transform:var( --e-global-typography-2d0dd3a-text-transform );line-height:var( --e-global-typography-2d0dd3a-line-height );}.elementor-kit-7 h2{color:var( --e-global-color-text );font-family:"Junge", Sans-serif;font-size:2.5rem;line-height:1.3em;}.elementor-kit-7 h3{color:var( --e-global-color-1d86e53 );font-family:var( --e-global-typography-563d10d-font-family ), Sans-serif;font-size:var( --e-global-typography-563d10d-font-size );text-transform:var( --e-global-typography-563d10d-text-transform );line-height:var( --e-global-typography-563d10d-line-height );}.elementor-kit-7 h4{color:var( --e-global-color-1d86e53 );font-family:var( --e-global-typography-c245210-font-family ), Sans-serif;font-size:var( --e-global-typography-c245210-font-size );line-height:var( --e-global-typography-c245210-line-height );}.elementor-kit-7 h5{color:var( --e-global-color-text );font-family:"Jungle", Sans-serif;font-size:1.75rem;font-weight:400;line-height:1.3em;}.elementor-kit-7 h6{color:var( --e-global-color-text );}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-family:"Work Sans", Sans-serif;font-size:clamp(1rem, 0.25rem + 1.5vw, 1rem);text-transform:uppercase;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-1d86e53 );border-radius:0px 0px 0px 0px;padding:1em 1em 1em 1em;}.elementor-kit-7 img{border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:86rem;}.e-con{--container-max-width:86rem;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:2rem;}.elementor-element{--widgets-spacing:2rem 1.25rem;--widgets-spacing-row:2rem;--widgets-spacing-column:1.25rem;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{background-color:#2E2E2EE8;--lightbox-ui-color-hover:var( --e-global-color-accent );--lightbox-text-color:var( --e-global-color-text );--lightbox-header-icons-size:16px;--lightbox-navigation-icons-size:32px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{font-size:1rem;}.elementor-kit-7 h1{font-size:var( --e-global-typography-2d0dd3a-font-size );line-height:var( --e-global-typography-2d0dd3a-line-height );}.elementor-kit-7 h2{font-size:2rem;}.elementor-kit-7 h3{font-size:var( --e-global-typography-563d10d-font-size );line-height:var( --e-global-typography-563d10d-line-height );}.elementor-kit-7 h4{font-size:var( --e-global-typography-c245210-font-size );line-height:var( --e-global-typography-c245210-line-height );}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{border-width:1px 1px 1px 1px;padding:1em 1em 1em 1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7 h1{font-size:var( --e-global-typography-2d0dd3a-font-size );line-height:var( --e-global-typography-2d0dd3a-line-height );}.elementor-kit-7 h2{font-size:1.75rem;}.elementor-kit-7 h3{font-size:var( --e-global-typography-563d10d-font-size );line-height:var( --e-global-typography-563d10d-line-height );}.elementor-kit-7 h4{font-size:var( --e-global-typography-c245210-font-size );line-height:var( --e-global-typography-c245210-line-height );}.elementor-kit-7 h5{font-size:1.125rem;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{border-width:1px 1px 1px 1px;padding:1em 1em 1em 1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Add to Widget's Advanced > Custom CSS (requires Elementor Pro) */
.elementor-kit-7 .elementor-testimonial-content {
    display: flex;
    align-items: flex-start; /* Or center, baseline depending on desired vertical alignment */
    gap: 10px; /* Optional: Adjust space between icon and text */
}

/* Optional: Adjust icon display if needed, though flex usually handles it */
/* .elementor-kit-7 .elementor-testimonial__icon { */
/*   flex-shrink: 0; */ /* Prevent icon from shrinking */
/* } */

.elementor-icon-wrapper {
    line-height: 0px !important;
}

.elementor-widget-text-editor p:last-child{ margin-bottom:0px;}

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
}

::selection {
    background: #4B644A; 
    color: #fff;
}


/* Hide scrollbar*/
html, body {
  overflow-x: hidden;
  overflow-y: auto;
}



::-webkit-scrollbar:horizontal {
  height: 0;
}

html {
  scrollbar-width: auto;
  scrollbar-color: initial;
}

.loopCarouselRooms .swiper-slide:hover .roomTitleColorChange a {
    color: #4B644A !important;
}



.break {
    display: block;  
    width: 100%;
    height: 0;
}




/* ------------------- Hover Effect 9 Boxes Home ---------------*/

/* The main container */
.hover-group {
  position: relative;
  transition: background 0.2s ease-in-out;
  overflow: hidden;
}

/* Background fade effect */
.hover-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--hover-background);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0; /* Initially invisible */
  transition: opacity 0.4s ease-in-out; /* Smooth fade effect */
  z-index: 0; /* Ensure it's visible */
  background-color: rgba(0, 0, 0, 0); /* Ensure smooth transition */
}

/* Fade in effect when hovering */
.hover-group.fading-in::before {
  opacity: 1;
}

/* Fade out effect */
.hover-group.fading-out::before {
  opacity: 0;
}

/* All boxes */
.box {
  position: relative;
  transition: opacity 0.6s ease-in-out, background-color 0.6s ease-in-out;
  background-size: cover;
  background-position: center;
  border: 1px solid white;
  opacity: 1;
  z-index: 1;
}


.elementor-element.elementor-element-9794887.e-con-full.e-flex.e-con.e-parent.e-lazyloaded:last-child {
    /* Styles for the last child */
    margin-bottom: 0; /* Remove margin-bottom for the last item */
    border-bottom: none; /* Remove border for the last item */
}


/* Change background color smoothly when hovering over specific boxes */
.box.hover-box {
  background-color: #4B644A !important;
  transition: background-color 0.6s ease-in-out;
}

/* Make the other boxes transparent when one is hovered */
.box.transparent:not(.keep-visible) {
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0.8;
  transition: background-color 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Default background fade-in effect */
.box.default-fade-in {
  opacity: 0;
  animation: fadeInDefault 0.8s ease-in forwards;
}

/* Keyframes for default fade-in */
@keyframes fadeInDefault {
  0% { opacity: 0; }
  10% { opacity: 0; }
  100% { opacity: 1; }
}

/* ------------------- Title and Button Visibility ------------------- */

.box .box2-title,
.box .box4-title,
.box .box9-title,
.box .button-box2,
.box .button-box4,
.box .button-box9 {
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  pointer-events: auto;
}


/* hide all titles & buttons (except hovered one) */
.box:hover ~ .box .box2-title,
.box:hover ~ .box .box4-title,
.box:hover ~ .box .box9-title,
.box:hover ~ .box .button-box2,
.box:hover ~ .box .button-box4,
.box:hover ~ .box .button-box9,
.box:not(:hover) .box2-title,
.box:not(:hover) .box4-title,
.box:not(:hover) .box9-title,
.box:not(:hover) .button-box2,
.box:not(:hover) .button-box4,
.box:not(:hover) .button-box9 {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
}

.box:not(:hover) .button-box2 .elementor-icon svg,
.box:not(:hover) .button-box4 .elementor-icon svg,
.box:not(:hover) .button-box9 .elementor-icon svg {
  fill: var(--e-global-color-primary, #4B644A); /* Default color */
  transition: fill 0.4s ease-in-out;
}

.box:hover .button-box2 .elementor-icon svg,
.box:hover .button-box4 .elementor-icon svg,
.box:hover .button-box9 .elementor-icon svg {
  fill: white; /* The exact color you want */
    transition: fill 0.4s ease-in-out;
}



#box-4:hover .button-box4 {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* keep the title and button in the hovered box visible */
.box:hover .box2-title,
.box:hover .box4-title,
.box:hover .box9-title,
.box:hover .button-box2,
.box:hover .button-box4,
.box:hover .button-box9 {
  opacity: 1 !important;
  transition: opacity 0.6s ease-in-out;
  pointer-events: auto;
}

/* ✅ Fix: If no box is hovered, all titles & buttons should stay visible */
.hover-group:not(:hover) .box2-title,
.hover-group:not(:hover) .box4-title,
.hover-group:not(:hover) .box9-title,
.hover-group:not(:hover) .button-box2,
.hover-group:not(:hover) .button-box4,
.hover-group:not(:hover) .button-box9 {
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  pointer-events: auto;
}


/* Ensure smooth title color transition */
.box2-title,
.box4-title,
.box9-title {
  will-change: color, opacity; /* Optimize rendering */
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; /* 🔥 Slows down color change slightly */
}

/* Ensure smooth color change on hover */
.box:hover .box2-title,
.box:hover .box4-title,
.box:hover .box9-title,
.box.hover-box .box2-title,
.box.hover-box .box4-title,
.box.hover-box .box9-title {
  color: white !important;
  opacity: 1 !important;
}



/* ------------------- Text Inside Boxes ------------------- */

/* ✅ Hide the text inside the boxes initially */
.single-card-box2,
.single-card-box4,
.single-card-box9 {
  opacity: 0;
  display: none;
  color: white !important; 
  transition: opacity 0.6s ease-in-out; 
}


.box.hover-box:hover .single-card-box2,
.box.hover-box:hover .single-card-box4,
.box.hover-box:hover .single-card-box9 {
  display: block;
  opacity: 1;
  animation: fadeIn 0.6s ease-in-out; 
}

/* Fade out effect */
.box:not(:hover) .single-card-box2,
.box:not(:hover) .single-card-box4,
.box:not(:hover) .single-card-box9 {
  opacity: 0;
  animation: fadeOut 0.3s ease-in-out;
}

/* Override Elementor's heading styles */
.hover-group .elementor-widget-heading .elementor-heading-title {
  color: inherit !important;
    transition: color 0.4s ease-in-out;


}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Jungle';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://dev.talent.gr/wp-content/uploads/2024/12/Junge-Regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */