/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
li:focus,
ul:focus,
*:focus,
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
{
	outline: 2px solid #005fcc!important;							
	outline-offset: 2px !important;							
}
*:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex="0"]:focus-visible{
	outline: 2px solid #005fcc!important;							
	outline-offset: 2px !important;							
}
.input-checkin::placeholder,
.input-checkout::placeholder {
    color: #000 !important;
    opacity: 1 !important;
}

input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type=reset], input[type=tel], input[type=date], select {
    height: 56px;
}

.MinimizedWidget-root {

    right: 12px !important;
}

.input-checkin,
.input-checkout {
    display: block;
    height: 56px; /* Match the height of other form groups */
    padding: 10px; /* Consistent padding */
    font-size: 16px; /* Same font size as other fields */
    border: 1px solid #ccc; /* Match border style */
    border-radius: 5px; /* Match corner radius */
    background-color: #fff; /* Ensure consistent background */
    box-sizing: border-box;
    width: 100%;
	margin-bottom: 30px !important;
}

/* Adjust the calendar icons for proper alignment */
.icon-checkin, 
.icon-checkout {
    position: absolute;
    right: 10px;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Perfect vertical alignment */
    width: 20px; /* Consistent icon size */
    height: 20px;
    pointer-events: none; /* Prevent interaction issues */
}
#checkin-picker, #checkout-picker {
    width: 200px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 5px;
    z-index: 1;
}

.form-group-checkin .icon-checkin:hover,
.form-group-checkout .icon-checkout:hover {
    cursor: pointer;
}

/* Adults and Children Select Dropdowns */
.select-adults, .select-children {
    appearance: none;
    height: 50px;
    padding: 6px 1px;
    font-size: 16px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #000;
    box-sizing: border-box;
    width: 100%;
}

/* Media Queries */
@media (max-width: 480px) {
    .input-checkin, .input-checkout,
    .select-adults, .select-children {
        height: 55px;
        font-size: 18px;
    }

    .icon-checkin, .icon-checkout {
        width: 25px;
        height: 25px;
    }
}

@supports (-webkit-touch-callout: none) {
    .input-checkin, .input-checkout {
        height: 60px;
        font-size: 18px;
    }
}
.form-container-accommodation {
    background-color: #0e597c;
    padding: 40px; /* Increased padding for more height */
    border-radius: 10px;
    max-width: 600px; /* Larger width for PC */
    width: 100%; /* Ensures responsiveness */
    margin: auto;
	height: 452px;
    box-sizing: border-box;
    color: #fff;
    min-height: 400px; /* Set a minimum height */
}


.form-title {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    text-align: left;
    border-bottom: 2px solid #0078b7;
    padding-bottom: 10px;
}

.form-subtitle {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 10px;
    text-align: left;
}

/* Input Fields */
.input-field-checkin, 
.input-field-checkout {
    width: 100%;
    height: 50px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.input-field-checkin::placeholder, 
.input-field-checkout::placeholder {
    color: #000;
}

/* Calendar Icon Styling */
.icon-container-checkin,
.icon-container-checkout {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none; /* Prevent interference with clicks */
}

.icon-checkin,
.icon-checkout {
    display: block; /* Ensure it is visible */
    width: 20px;
    height: 20px;
}

#form-wrapper {
    display: none; /* Ensure the form is hidden on all screen sizes initially */
}
@media (min-width: 1025px) {
    #form-wrapper {
        display: block; /* Show on larger screens */
    }
}

.icon-checkin, 
.icon-checkout {
    width: 20px;
    height: 20px;
}

.row-dropdowns {
    display: flex
;
    gap: 77px;
    margin-bottom: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
}
.dropdown-adults, .dropdown-children {
    width: 167%;
    height: 50px;
    padding: 10px;
    gap: 50px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    box-sizing: border-box;
}
/* Button */
.btn-check-availability {
    width: 100%;
    height: 50px;
    background-color: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.btn-check-availability:hover {
    background-color: #005a91;
    color: #fff;
}
@media(max-width:768px){
.dropdown-adults, .dropdown-children {
    width: 112%;
    height: 50px;
    padding: 10px;
    gap: 50px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    box-sizing: border-box;
}}

@media(max-width:768px){
.row-dropdowns {
    display: flex
;
    gap: 68px;
    margin-bottom: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
}}
/* Mobile Styling */
@media (max-width: 480px) {
    .form-container-accommodation {
        padding: 15px;
        max-width: 90%;
    }

    .input-field-checkin, 
    .input-field-checkout, 
    .dropdown-adults, 
    .dropdown-children {
        height: 55px;
        font-size: 18px;
    }

    .icon-checkin, 
    .icon-checkout {
        width: 25px;
        height: 25px;
    }

    .btn-check-availability {
        height: 55px;
        font-size: 18px;
    }
}


/* For screens between 1025px and 1980px */
@media (min-width: 1025px) and (max-width: 2980px) {
    .form-container {
        display: flex; /* Use flex layout for these screen sizes */
        flex-wrap: nowrap; /* No wrapping */
        gap: 20px; /* Space between form groups */
    }

  
}
.form-container {
    display: flex
;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 24px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
    align-content: center;
}
/* Tablet and Laptop Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    .form-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px; /* Λιγότερο gap για πιο compact layout */
        max-width: 100%;
        margin: auto;
    }

    .form-group {
        width: 48%; /* Δύο στήλες, αλλά πιο στενές */
        margin-bottom: 15px;
    }

    .form-title {
        font-size: 16px; /* Μικρότερος τίτλος */
        margin-bottom: 15px;
    }

    .form-subtitle {
        font-size: 12px; /* Μικρότερη γραμματοσειρά για το υπότιτλο */
    }

    .input-field-checkin, .input-field-checkout, 
    .dropdown-adults, .dropdown-children {
        height: 45px; /* Μικρότερη ύψος για τα πεδία */
        font-size: 14px; /* Μικρότερη γραμματοσειρά */
    }

    .icon-checkin, .icon-checkout {
        width: 18px; /* Μικρότερη εικονίδιο */
        height: 18px;
    }

    .btn-check-availability {
        width: 100%;
        height: 45px; /* Μικρότερο κουμπί */
        font-size: 14px;
        padding: 0 15px;
        margin-top: 10px;
    }
}

/* For Tablets and Laptops (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .form-container {
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }

    .form-group {
        width: 48%; /* Στένεμα των ομάδων για μικρότερο μέγεθος */
        margin-bottom: 15px;
    }

    .input-field-checkin, .input-field-checkout, 
    .dropdown-adults, .dropdown-children {
        height: 45px; /* Μικρότερο ύψος πεδίων */
        font-size: 14px; /* Μικρότερη γραμματοσειρά */
    }

    .btn-check-availability {
        height: 45px; /* Μικρότερο κουμπί */
        font-size: 14px;
    }

    .icon-checkin, .icon-checkout {
        width: 18px; /* Μικρότερο μέγεθος για τα εικονίδια */
        height: 18px;
    }

    .form-title {
        font-size: 18px; /* Λιγότερο επιβλητικός τίτλος */
    }

    .form-subtitle {
        font-size: 14px; /* Κρατάμε μια ευανάγνωστη γραμματοσειρά */
    }
}



.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup {
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 600px;
    height: 400px;
    background-image: url(https://files.elfsightcdn.com/eafe4a4d-3436-495d-b748-5bdce62d911d/eb6a136e-7761-4229-860f-c68ee69a23df/DSA80003.webp);
    background-size: cover;
    background-position: center;
    background-color: rgb(41, 41, 41);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.popup h2 {
       margin-top: 0;
    color: #fff;
    text-align: left;
    font-size: 40px;
    margin-left: -209px;
}

.popup p {
    color: #fff;
    text-align: left;
    font-size: 23px;
    margin-left: -48px;
    position: relative;
    left: -101px;
}

/* ✅ FIX: Style ONLY "ROOMS & SUITES" Button */
.popup .redirect-btn {
    background: #0e597c;
    color: #fff;
    border: none;
    width: 308px;
    font-size: 16px;
    padding: 12px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
    top: 50px;
}

.popup .redirect-btn:hover {
    transform: scale(1.1);
}

/* ✅ FIX: Style the Close Button Separately */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    z-index: 10;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .popup {
        width: 90%;
        height: 300px;
        padding: 20px;
    }

        .popup h2 {
             font-size: 24px;
        left: 40px;
        position: relative;
    }

    .popup p {
        font-size: 20px;
        color: white;
        left: -13px;
        top: 11px;
    }

    .popup .redirect-btn {
           width: 220px;
        font-size: 12px;
        padding: 8px 15px;
        top: 18px;
    }

    .close-btn {
        font-size: 24px;
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .popup {
        width: 90%;
        height: 250px;
        padding: 15px;
    }

      .popup h2 {
        font-size: 24px;
        left: 40px;
        position: relative;
    }
    .popup p {
      font-size: 20px;
        color: white;
        left: -13px;
        top: 11px;
    }

    .popup .redirect-btn {
               width: 220px;
        font-size: 12px;
        padding: 8px 15px;
        top: 18px;
    }

    .close-btn {
        font-size: 22px;
        top: 8px;
        right: 8px;
    }
}

.homepage-custom-slider {
    touch-action: pan-y; /* Allow only vertical scrolling outside of the slider */
    overflow: hidden;    /* Ensure content doesn't overflow during swiping */
}



/* Prevent zooming on the lightbox */
.homepage-custom-lightbox {
    touch-action: none; /* Disable pinch and double-tap zoom */
}


/* Font size adjustments for mobile devices */
@media (max-width: 768px) {
    .homepage-heading {
        font-size: 26px !important; /* Smaller font for mobile */
    }
}
/* Common Heading Styles */
.homepage-custom-slider h2 {
    font-size: 26px !important;
    font-weight: bold;
    text-align: left;
}

.homepage-heading-suites{
   left: 11% !important;
}
.homepage-heading-rooms {
    color: #fff; /* Customize the color for rooms */
	left : 2% !important;
}

/* Suites Heading */
.homepage-heading-suites {
    color: #fff; /* Customize the color for suites */
}
/* Keyframes for right-to-left animation */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Heading Animation */
.homepage-heading {
    position: relative;
    opacity: 0;
    transform: translateX(100%);
    animation: none; /* No animation by default */
}

/* Activate animation when the parent slide is active */
.homepage-custom-slider-slide.active .homepage-heading {
    animation: slideInFromRight 0.7s ease-in-out forwards;
}

.homepage-custom-suite-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.homepage-custom-suite-lightbox-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.homepage-custom-suite-lightbox-slider img {
    max-width: 100%;
    max-height: 70vh;
    display: none;
    object-fit: contain;
    transition: opacity 0.5s ease-in-out;
}

.homepage-custom-suite-lightbox-prev,
.homepage-custom-suite-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.homepage-custom-suite-lightbox-prev {
    left: 10px;
}

.homepage-custom-suite-lightbox-next {
    right: 10px;
}

.homepage-custom-suite-lightbox-prev:hover,
.homepage-custom-suite-lightbox-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.homepage-custom-suite-lightbox-description {
    margin-top: 15px;
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    width: 100%;
}

.homepage-custom-suite-lightbox-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 25px;
    color: white;
    cursor: pointer;
    background: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homepage-custom-slider-slide {
    flex: 0 0 100%; /* Κάθε διαφάνεια καταλαμβάνει 100% */
    max-width: 100%; /* Εξασφαλίζει ότι δεν ξεπερνά το πλάτος */
}
.homepage-custom-slider-slide {
    display: none;
}
.homepage-custom-slider-slide.active {
    display: block;
}


/* Slider Container */
.homepage-slider-container {
  position: relative;
  overflow: hidden !important;
  width: 100%;
}

.homepage-slider-wrapper {
  display: flex;
      overflow: hidden;

  transition: transform 0.5s ease-in-out;
}


/* Pagination Bullets */
.homepage-pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: gray;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination-bullet.active {
  background-color: black;
}


/* Suites Grid Layout */
.homepage-custom-suites {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 2200px;
    margin: 0 auto;
    padding: 20px;
}
/* Tablets and smaller devices: 2 items per row */
@media (min-width: 1024px) {
   .homepage-custom-suite-container {
        width: calc(50% - 20px) !important; /* Two items per row */
    }
    
}

/* Suite Container */
.homepage-custom-suite-container {
    position: relative;
    width: calc(33.33% - 26.66px); /* Three items per row */
    max-width: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
}

/* Suite Slider */
.homepage-custom-suite-slider {
    position: relative;
    width: 100%;
    height: 400px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
}

.homepage-custom-suite-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Suite Overlay */
.homepage-custom-suite-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: white;
    text-align: center;
    z-index: 0;
}

/* Suite Title (Always Visible) */
.homepage-custom-suite-title {
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 80%;
    left: 20px;
    transform: translate(0, -50%);
    z-index: 2;
    color: white;
    text-align: left;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}



.homepage-custom-suite-size {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    position: absolute;
    margin-top: 13%;
    left: 20px;
    opacity: 0;
    z-index: 2;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.3)!important;
    padding: 5px 10px!important;
    border-radius: 5px!important;
    transition: none !important;
}
/* Hover Effect for m² Info */
.homepage-custom-suite-container:hover .homepage-custom-suite-size {
    opacity: 1;
    top: 65%;
}

/* Mobile Version */
@media (max-width: 768px) {
    .homepage-custom-suite-container,
    .homepage-custom-room-container {
        width: calc(100% - 20px); /* Full width with small padding */
        margin: 10px auto; /* Reduce gap between boxes */
        padding: 0; /* Remove internal padding */
    }

    .homepage-custom-suite-slider,
    .homepage-custom-room-slider {
        height: 350px; /* Adjust height for better proportion */
    }

    .homepage-custom-suite-title,
    .homepage-custom-room-title {
        font-size: 18px; /* Keep font size readable */
        top: 70%; /* Align vertically within the slider */
        left: 10px; /* Align to the left for consistent look */
        transform: translateY(-50%); /* Center vertically */

    }

    .homepage-custom-suite-size,
    .homepage-custom-room-size {
        font-size: 0.9rem; /* Smaller but readable text */
        top: 78%; /* Position below the title */
        left: 10px; /* Align with the title */
        color: #ddd; /* Subtle color for size info */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Ensure visibility */
    }

.homepage-custom-suite-buttons,
.homepage-custom-room-buttons {
    position: absolute;
   margin-top: 35px; /* Move further down */
    margin-right: -45px; /* Move further to the right */
    transform: rotate(90deg); /* Keep the rotation */
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}




    .homepage-custom-suite-overlay,
    .homepage-custom-room-overlay {
        opacity: 1; /* Make sure the overlay is visible */
    }

    .homepage-custom-suite-container:hover .homepage-custom-suite-size,
    .homepage-custom-room-container:hover .homepage-custom-room-size {
        opacity: 1; /* Ensure visibility when hovered (optional for mobile) */
    }
}


.homepage-custom-room {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}

/* Room Container */
.homepage-custom-room-container {
    position: relative;
        flex: 0 1 calc(25% - 20px); /* First row: 4 items (25% each) */
    max-width: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
}

/* Room Slider */
.homepage-custom-room-slider {
    position: relative;
    width: 100%;
    height: 400px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
}

.homepage-custom-room-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}


.homepage-custom-room-container:hover .homepage-custom-room-overlay {
    opacity: 1;
}

.homepage-custom-room-title {
    font-size: 18px; /* Smaller font size */
    font-weight: bold;
    position: absolute;
    top: 80%; /* Slightly lower */
    left: 20px; /* Move further to the left */
    transform: translate(0, -50%); /* Adjust centering */
    z-index: 2;
    color: white;
    text-align: left; /* Align text to the left */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Subtle shadow for better readability */
    transition: top 0.5s ease, opacity 0.5s ease;
}




.homepage-custom-suite-button{
    display: inline-block;
    padding: 8px 25px;
    font-size: 1.2em;
    color: white;
    font-weight: bold;
    text-decoration: none !important;
    border: 1px solid white;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: transparent;
    border-radius: 4px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 1px #00000078;
}

.homepage-custom-suite-buttons {
    position: absolute;
    top:70px; /* Move further down */
    right: -40px; /* Move further to the right */
    transform: rotate(90deg);
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}
.homepage-custom-room-buttons {
    position: absolute;
    top:70px; /* Move further down */
    right: -40px; /* Move further to the right */
    transform: rotate(90deg);
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}

.homepage-custom-room-button {
    display: inline-block;
    padding: 8px 25px;
    font-size: 1.2em;
    color: white;
    font-weight: bold;
    text-decoration: none !important;
    border: 1px solid white;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: transparent;
    border-radius: 4px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 1px #00000078;
}


.homepage-custom-suite-button:hover{
    background-color: white;
    color: #0e597c;
}
.homepage-custom-room-button:hover {
    background-color: white;
    color: #0e597c;
}

.homepage-custom-room-size {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    position: absolute;
    margin-top: 21%; /* Position it below the title */
    left: 20px; /* Align with the title */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease, top 0.5s ease;
    z-index: 2;
}

/* Show on hover */
.homepage-custom-room-container:hover .homepage-custom-room-size {
    opacity: 1;
    top: 65%; /* Slightly animate it into view */
}

/* Lightbox Styles */
.homepage-custom-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.homepage-custom-lightbox-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.homepage-custom-lightbox-slider img {
    max-width: 100%;
    max-height: 70vh;
    display: none;
    object-fit: contain;
    transition: opacity 0.5s ease-in-out;
}

.homepage-custom-lightbox-prev,
.homepage-custom-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.homepage-custom-lightbox-prev {
    left: 10px;
}

.homepage-custom-lightbox-next {
    right: 10px;
}

.homepage-custom-lightbox-prev:hover,
.homepage-custom-lightbox-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.homepage-custom-lightbox-description {
    margin-top: 15px;
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    width: 100%;
}

.homepage-custom-lightbox-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 25px;
    color: white;
    cursor: pointer;
    background: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .homepage-custom-room-container {
        width: calc(100% - 20px);
    }

    .homepage-custom-room-slider {
        height: 350px;
    }
}
@media (max-width: 768px) {

.pagination-bullet {
width: 15px;
height: 15px;
    
}
   .homepage-custom-room-title {
        font-size: 18px; /* Smaller font size for mobile */
        top: 78%; /* Positioned further down */
        left: 10px; /* Aligned to the left with padding */
        text-align: left; /* Align text to the left */
       
        color: white; /* Keep it readable on images */
        z-index: 2;
        transition: top 0.5s ease, opacity 0.5s ease;
    }

    /* Room size adjustments for mobile */
    .homepage-custom-room-size {
        font-size: 0.9em; /* Slightly smaller font for mobile */
margin-top: 7%;
left: 10px; /* Align with title */
        color: #ddd; /* Softer color for mobile */
        opacity: 0; /* Hidden by default */
        transition: opacity 0.5s ease, top 0.5s ease;
    }

    /* Show size on hover for mobile */
    .homepage-custom-room-container:hover .homepage-custom-room-size {
        opacity: 1;
        top: 78%; /* Animate into view */
    }

}

@media (min-width: 1024px) and (max-width: 1440px) {
    .homepage-custom-room-title {
        font-size: 19px;
    }

    .homepage-custom-room-container:hover .homepage-custom-room-title {
        margin-top:1%;
    }

    .homepage-custom-room-container:hover .homepage-custom-room-paragraph {
        bottom: 36%;
        opacity: 1;
    }
}


/* Για Tablets (δύο στήλες) */
@media (max-width: 1024px) {
    
  

    .homepage-custom-room-container {
        flex: 0 1 calc(50% - 20px); /* Δύο στήλες */
    }
	 .homepage-heading h2{
        font-size: 15px; /* Slightly smaller for tablets */
    }
	    .homepage-custom-room-container .homepage-custom-room-buttons,
    .homepage-custom-suite-container .homepage-custom-suite-buttons {
        position: absolute;
        right: 10px; /* Adjust right placement */
        transform: rotate(90deg); /* Keep the rotation */
        display: flex;
        justify-content: flex-end;
        z-index: 2;
    }

    .homepage-custom-room-container .homepage-custom-room-button,
    .homepage-custom-suite-container .homepage-custom-suite-button {
        font-size: 0.8rem; /* Smaller font for tablet */
        padding: 5px 15px; /* Compact button size */
        border: 1px solid white;
        border-radius: 4px;
        background-color: transparent;
        color: white;
        text-shadow: 1px 1px 1px #000;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .homepage-custom-room-container .homepage-custom-room-button:hover,
    .homepage-custom-suite-container .homepage-custom-suite-button:hover {
        background-color: white;
        color: black;
    }
}

/* Για Κινητά (μία στήλη) */
@media (max-width: 768px) {
    .homepage-custom-room-container {
        flex: 0 1 100%; /* Μία στήλη */
    }
	
}




@media(min-width:770px){
.text-content {
  padding: 20px;
  width: 100%; /* Set width for consistent alignment */
  margin: 0 auto; /* Center text content horizontally */
  line-height: 1.8; /* Improve line spacing for readability */
  overflow-wrap: break-word; /* Ensure long words break properly */
  word-break: break-word; /* Compatibility for older browsers */
}}

@media(max-width:769px){
.text-content {
  padding: 20px;
  width: 100%; /* Set width for consistent alignment */
  margin: 0 auto; /* Center text content horizontally */
  line-height: 1.8; /* Improve line spacing for readability */
  overflow-wrap: break-word; /* Ensure long words break properly */
  word-break: break-word; /* Compatibility for older browsers */
}}

.text-content p {
  font-size: 19px;
  margin-bottom: 15px; /* Add consistent spacing between paragraphs */
  line-height: 1.8; /* Ensure consistent spacing */
  word-break: break-word; /* Handle long words properly */
  overflow-wrap: break-word; /* Ensure text wrapping */
}


.image-grid {
  display: grid;
  grid-template-rows: repeat(1, 1fr); /* Arrange images in rows */
  gap: 10px; /* Small gap between images */
  margin-left: 50px; /* Push the image grid further right */
}

.image-grid img {
  width: 250% !important;
  height: 100%; /* Ensure images fill their grid cells */
  object-fit: cover; /* Ensure images maintain aspect ratio */
}

/* Adjust the first image (large image) */
.image-grid .large {
  grid-column: 1 / 2; /* Left column */
  grid-row: span 2; /* Span two rows */
  max-height: 600px; /* Reduce height to ensure balance */
}

.image-grid .medium {
  transform: scaleX(1.3); /* Increase the width by 30% */
  transform-origin: left center; /* Stretch from the left */
}

.image-grid .small {
  grid-column: 2 / 3; /* Right column */
  grid-row: 2; /* Second row */
  object-fit: cover; /* Maintain aspect ratio */
}

  .hours-section {
      display: flex;
      flex-wrap: wrap;
      max-width: 400px;
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .hours-section .details {
      flex: 1;
      background-color: #0e597c;
      color: white;
      padding: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hours-section .details h3 {
      font-size: 1.5rem;
      margin-bottom: 10px;
            color: white;

    }

    .hours-section .details ul {
      list-style-type: disc;
      margin-left: 20px;
      margin-bottom: 10px;
    }

    .hours-section .details ul li {
      margin-bottom: 8px;
      font-size: 19px;
    }

    .hours-section .details p {
      margin-top: 10px;
      font-size: 19px;
    }
    
    
    /* Responsive Design */
@media (max-width: 1524px) {
    .hours-section {
        height: 300px !important; 
    }

    .hours-section .details {
        padding: 30px; /* Adjust padding for smaller screens */
    }

    .hours-section .details h3 {
        font-size: 29px;
    }

    .hours-section .details ul li,
    .hours-section .details p {
        font-size: 0.9rem;
    }
}


    /* Responsive Design */
    @media (max-width: 768px) {
      .hours-section {
        flex-direction: column;
      }

      .hours-section .image {
        flex: none;
        height: 200px;
      }

      .hours-section .details {
        padding: 15px;
        text-align: center;
      }


    .hours-section .details p {
margin-left: -5%;
}

      .hours-section .details ul li {
font-size: 16px;
text-align: left;
margin-left: 2%;
      }

      .hours-section .details ul {
        margin-left: 0;
        padding-left: 0;
        list-style-type: none;
        
      }
    }
  
  .pdf-icon {
  width: 24px; /* Adjust size as needed */
  height: 24px;
}
/* Responsive Design for Mobile and Small Tablets */
@media (max-width: 768px) {
  /* Adjust text size for mobile */
  .breakfast-content p {
    font-size: 19px !important; /* Smaller text size for mobile */
    
  }

  .breakfast-time strong,
  .breakfast-certification,
  .breakfast-request {
    font-size: 16px; /* Adjust all text elements to 16px on mobile */
  }

 .breakfast-list {
    display: grid;
    grid-template-columns: 1fr; /* Stack list items in a single column on mobile */
    row-gap: 8px; /* Add spacing between rows */
    margin-left: 20px;
  }

  .breakfast-list li {
    font-size: 19px !important; /* Smaller font size for better fit */
    line-height: 1.4; /* Adjust line height for better spacing */
    white-space: normal; /* Allow text to wrap */
  } 
  /* Adjust link size */
  .certification-link {
    font-size: 16px;
  }
}


.breakfast-content {
  max-width: 600px;
  margin: 0; /* Remove centering */
  padding-left: 10px; /* Add left padding for slight spacing from the edge */
}

  .breakfast-list {
    grid-template-columns: 1fr; /* Switch to 1 column on mobile */
    padding-left: 10px; /* Add padding for readability */
    margin-left: 20px;
  }

  .breakfast-list li {
    white-space: normal; /* Allow wrapping for mobile */
    font-size: 19px; /* Smaller font size for better fit */
    line-height: 1.4; /* Adjust line height for readability */
  }
.breakfast-time strong {
  color: #0e587b; /* Apply the color specifically to the <strong> elements */
}

.breakfast-request {
  font-size: 16px !important; /* Set a smaller font size */
}
.breakfast-certification {
  font-size: 16px !important;
  margin-top: 10px;
}

.certification-link {
  font-weight: bold;
  color: #075985;
  text-decoration: none;
}

.certification-link:hover {
  text-decoration: underline;
  color: #003f6b;
}

.breakfast-content p {
  font-size: 19px;
  color: black;
  margin-bottom: 15px;
  padding-left: 10px; /* Align text to the left */
}

/* Main container */
.custom-services-container {
  display: grid;
  grid-template-columns: 2fr 2fr; /* Large image takes 2/3, right text takes 1/3 */
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.custom-image-large img {
    width: 100%;
    height: 740px;
    object-fit: cover;
}
/* Right text content */
.custom-text-right {
  display: flex;
  flex-direction: column;
  gap: 20px;

    margin-top: 50px; /* Move the text down for PC, laptop, and tablet */
}

.custom-text-right h4 {
  font-size: 26px;
  color: #0e587b;
  font-weight: bold;
  margin-bottom: 10px;
}

.custom-text-right p {
  font-size: 19px;
  text-align: justify;
  color: #333;
  line-height: 1.6;
}


.custom-small-image-text {
    margin-top: 18px !important;
    margin-bottom: 150px !important;
    display: flex
;
    align-items: center;
    gap: 20px;
}
.custom-image-small img {
  width: 1400px; /* Adjust size */
  margin-right: 250px;
}

.custom-text-next {
  min-width: calc(100% - 20px); /* Adjust 20px based on the padding/margin */

}

.custom-text-next h4 {
  font-size: 26px;
  color: #0e587b;
  font-weight: bold;
}

.custom-text-next p {
  font-size: 19px;
  color: #333;
  line-height: 1.6;
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .custom-services-container {
grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .custom-text-right {
    margin-top: 20px; /* Add spacing */
  }

  .custom-small-image-text {
          flex-direction: unset;
        align-items: self-end;
  }

  .custom-image-small img {
    width: 80%; /* Scale small image */
  }

  .custom-text-next {
        text-align: center;
        /* margin-left: -47px; */
        /* width: 164px; */
        /* max-width: 300px; */
        min-width: calc(76% - 20px);
	}
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .custom-services-container {
    grid-template-columns: 1fr; /* Stack all elements */
	  	  overflow: hidden;

  }

  .custom-image-large img {
    width: 100%;
    height: auto; /* Adjust large image for mobile */
  }

  .custom-text-right {
    text-align: center; /* Center text */
    gap: 15px; /* Adjust spacing */
  }

  .custom-text-right h4 {
    font-size: 20px; /* Adjust heading size */
  }

  .custom-text-right p {
    font-size: 16px; /* Adjust paragraph size */
  }

  .custom-small-image-text {
    flex-direction: column; /* Stack small image and text */
    align-items: center;
    gap: 15px;
  }

  .custom-image-small img {
    width: 70%; /* Make small image responsive */
    margin-left: 50px;
  }

  .custom-text-next {
    text-align: center; /* Center text */
    font-size: 14px;
  }

  .custom-text-next h4 {
    font-size: 18px; /* Adjust heading size */
  }

  .custom-text-next p {
    font-size: 16px;
  }
}


.new-lightbox-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    display: flex; /* Add this */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    overflow: hidden;
}
.new-lightbox-slider img {
    display: block;
    max-width: 100%;
    max-height: 70vh; /* Ensure the image fits within the viewport */
    margin: 0 auto;
    object-fit: contain; /* Maintain aspect ratio */
}
.new-lightbox-prev,
.new-lightbox-next {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.new-lightbox-prev {
    left: 10px;
}

.new-lightbox-next {
    right: 10px;
}
.new-lightbox-description {
    margin-top: 15px;
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    width: 100%; /* Stretch across the container */
}



 body.lightbox-active {
        overflow: hidden !important;
    }






@media (max-width: 768px) {
    .new-lightbox-slider img {
               max-width: 100% !important;
        max-height: 47vh !important;
        object-fit: contain;
    }
}







.unique-room {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        max-width: 2200px;
        margin: 0 auto;
        padding: 20px;
    }

    .unique-room-container {
        position: relative;
        width: calc(33.33% - 26.66px); 
        max-width:600px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
		margin-right: auto;
    }

    .unique-room-slider {
        position: relative;
        width: 100%;
        height: 200px;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 8px;
    }

    .unique-room-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }


/* Small Images (narrow or tall) */
.lightbox-content img.small-image {
    max-width: 20%; /* Shrink for specific aspect ratio */
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .lightbox-content img.small-image {
        max-width: 20%; /* Same for mobile */
    }
}

.unique-room-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: white;
    text-align: center;
    z-index: 0; 
    opacity: 0;
}
.unique-room-title {
    font-size: 20px !important;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    color: black;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: top 0.5s ease, opacity 0.5s ease;
    text-shadow: none !important;
    display: inline-block;
    padding: 8px 25px;
    /* font-size: 0.9em; */
    color: black !important;
    font-weight: bold;
    text-decoration: none !important;
    border: 1px solid white;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: white;
    border-radius: 4px;
    letter-spacing: 2px;
}

/* Hover Effects */
.unique-room-container:hover .unique-room-title {
    top:30%; /* Move slightly up on hover */
    opacity: 1; /* Ensure it's fully visible */
}

.homepage-room-title {
      font-size: 29px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: top 0.5s ease, opacity 0.5s ease;
    text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.7); 
}





.unique-room-container:hover .unique-room-paragraph {
    bottom: 30%; /* Bring the paragraph text up */
    transform: translateY(0); /* Adjust for centering */
    opacity: 1; /* Ensure visibility */
}




    .unique-room-paragraph {
        font-size: 19px;
    line-height: 1.4;
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: 10px;
		    background-color: rgba(17, 17, 17, 0.5);
    color: white;
    text-align: center;
    transition: bottom 0.5s ease, opacity 0.5s ease;
    text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.7); 

    }





    .unique-room-buttons {
     position: absolute;
        bottom: 40px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 130px;
    }

.unique-room-button {
    display: inline-block;
    padding: 8px 25px;
    font-size: .9em;
    color: #000;
    font-weight: 700;
    text-decoration: none !important;
    border: 1px solid #fff;
    transition: background-color .3s ease, color .3s ease;
    background-color: transparent;
    border-radius: 4px;
    letter-spacing: 2px;
    text-shadow: none;
}



    .unique-room-button:hover {
        background-color: white;
        color: #0E597C;
    }
    /* Show overlay on hover */
    .unique-room-container:hover .unique-room-overlay {
        opacity: 1;
    }

@media(min-width: 770px){
.unique-room-size {
      font-size: 16px;
    color: #fff;
    font-weight: 800;
    width: 100%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	}}


@media(max-width: 769px){
	     .unique-room-size {
            font-size: 16px;
			    color: #000;

        }
}

    @media (max-width: 768px) {
        .unique-room-container {
            width: calc(100%); 
        }



        .unique-room-slider {
        height: 350px;
        }

        .unique-room-title {
            font-size: 15px !important;
			
        }

        .unique-room-paragraph {
            font-size: 16px;
        }

  

        .unique-room-buttons {
            gap: 10px;
        }

        .unique-room-button {
            font-size: 0.8em;
            padding: 6px 10px;
        }
    }
    
    /* Laptops: 2 items per row */
@media (min-width: 1024px) and (max-width: 1440px) {
    .unique-room-title {
        font-size:25px;
        
    }
    /* Hover Effects */
.unique-room-container:hover .unique-room-title {
    top:23%; /* Move slightly up on hover */
    opacity: 1; /* Ensure it's fully visible */
}

.unique-room-container:hover .unique-room-paragraph {
    bottom: 36%; /* Bring the paragraph text up */
    transform: translateY(0); /* Adjust for centering */
    opacity: 1; /* Ensure visibility */
}

}

/* Tablets and smaller devices: 2 items per row */
@media (max-width: 1024px) {
    .custom-suite-container {
        width: calc(50% - 20px); /* Two items per row */
    }
    
}


    .unique-room {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        max-width: 2200px;
        margin: 0 auto;
        padding: 20px;
    }

    .unique-room-container {
        position: relative;
        width: calc(33.33% - 26.66px); 
        max-width:600px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .unique-room-slider {
        position: relative;
        width: 100%;
        height: 400px;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 8px;
    }

    .unique-room-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

.unique-room-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: white;
    text-align: center;
    z-index: 0; 
    opacity: 0;
}



/* Hover Effects */
.unique-room-container:hover .unique-room-title {
    top:30%; /* Move slightly up on hover */
    opacity: 1; /* Ensure it's fully visible */
}

.unique-room-container:hover .unique-room-paragraph {
    bottom: 30%; /* Bring the paragraph text up */
    transform: translateY(0); /* Adjust for centering */
    opacity: 1; /* Ensure visibility */
}




    .unique-room-paragraph {
        font-size: 19px;
    line-height: 1.4;
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: 10px;
    color: white;
    text-align: center;
    transition: bottom 0.5s ease, opacity 0.5s ease;
    text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.7); 

    }





    .unique-room-buttons {
     position: absolute;
        bottom: 40px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 130px;
    }

    .unique-room-button {
            display: inline-block;
        padding: 8px 25px;
        font-size: 0.9em;
        color: white;
        font-weight: bold;
        text-decoration: none !important;
        border: 1px solid white;
        transition: background-color 0.3s ease, color 0.3s ease;
        background-color: transparent;
        border-radius: 4px;
letter-spacing: 2px;
    }




    .unique-room-button:hover {
        background-color: white;
        color: black;
    }
    /* Show overlay on hover */
    .unique-room-container:hover .unique-room-overlay {
        opacity: 1;
    }

    /* m² detail always visible below the image */
    .unique-room-size {
        font-size: 16px;

        width: 100%;
    }

    @media (max-width: 768px) {
        .unique-room-container {
            width: calc(100% - 20px); 
        }



        .unique-room-slider {
        height: 350px;
        }

        .unique-room-title {
            font-size: 1.2em;
        }

        .unique-room-paragraph {
            font-size: 16px;
        }

        .unique-room-size {
            font-size: 16px;
        }

        .unique-room-buttons {
            gap: 10px;
        }

        .unique-room-button {
            font-size: 0.8em;
            padding: 6px 10px;
        }
    }
    
    /* Laptops: 2 items per row */
@media (min-width: 1024px) and (max-width: 1440px) {
    .unique-room-title {
        font-size:25px;
        
    }
    /* Hover Effects */
.unique-room-container:hover .unique-room-title {
    top:23%; /* Move slightly up on hover */
    opacity: 1; /* Ensure it's fully visible */
}

.unique-room-container:hover .unique-room-paragraph {
    bottom: 30%; /* Bring the paragraph text up */
    transform: translateY(0); /* Adjust for centering */
    opacity: 1; /* Ensure visibility */
}
 .unique-room-button {
        padding: 10px 30px; /* Slightly larger padding for laptops */
        font-size: 1em; /* Slightly larger font size */
    }
}

/* Tablets and smaller devices: 2 items per row */
@media (max-width: 1024px) {
    .custom-suite-container {
        width: calc(50% - 20px); /* Two items per row */
    }
    
}
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Dark background */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 9999 !important; /* High z-index to ensure it stays on top */
}


/* Lightbox content */
.lightbox-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000 !important; /* Ensure lightbox content is above everything */
}

/* Ensure images inside the lightbox are also visible */
.lightbox-slider img {
    max-width: 100%;
    max-height: 70vh;
    display: none;
    object-fit: contain;
    transition: opacity 0.5s ease-in-out;
    z-index: 10001; /* Ensure images stay above other content */
}
/* Prev and Next buttons */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.lightbox-prev {
    left: 10px;
}

.lightbox-next {
    right: 10px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 25px;
    color: white;
    cursor: pointer;
    background: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* Responsive adjustments for mobile (max-width: 768px) */
@media (max-width: 768px) {
    .lightbox-content {
        max-width: 100%;
        max-height: 100%;
        padding: 10px;
    }

    .lightbox-slider img {
        max-height: 50vh; /* Adjust image size for mobile */
    }

    .lightbox-prev,
    .lightbox-next {
        font-size: 1.5em;
        padding: 8px;
    }

    .lightbox-close {
        font-size: 1.8em;
    }
}

/* For tablets and smaller laptops (768px to 1024px) */
@media (max-width: 1024px) {
    .lightbox-content {
        max-width: 90%;
        max-height: 90%;
    }

    .lightbox-prev,
    .lightbox-next {
        font-size: 1.5em;
        padding: 8px;
    }

    .lightbox-close {
        font-size: 1.8em;
    }
}


/* Tablet-Specific Styles (768px - 1024px) */
@media (max-width: 1504px) and (min-width: 768px) {
    .unique-room-container {
        width: calc(50% - 20px); /* Two items per row */
        margin: 10px auto; /* Center the containers */
    }

    .unique-room-slider {
        height: 300px; /* Adjust slider height for tablets */
    }

    .unique-room-title {
        font-size: 1.5em; /* Slightly smaller font size */
        top: 50%; /* Ensure centered alignment */
    }

    .unique-room-paragraph {
        font-size: 16px;
        bottom: -100%; /* Initially hidden */
        transition: bottom 0.5s ease, opacity 0.5s ease;
        opacity: 0; /* Hidden by default */
    }

    .unique-room-container:hover .unique-room-paragraph {
        bottom: 36%; /* Slide up on hover */
        opacity: 1; /* Make visible */
    }

    .unique-room-buttons {
        position: absolute;
        bottom: 50px; /* Adjust position to be higher */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 10px; /* Reduce gap between buttons */
    }

    .unique-room-button {
        padding: 8px 20px; /* Adjust padding for tablets */
        font-size: 0.9em; /* Adjust font size */
        border: 1px solid white;
        background-color: transparent; /* Remove background color */
        color: white;
        text-transform: uppercase;
        border-radius: 4px;
        transition: color 0.3s ease, border-color 0.3s ease;
    }

    .unique-room-button:hover {
        color: black; /* Change text color on hover */
        border-color: black; /* Change border color on hover */
    }
}




.custom-suite {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to next row */
    justify-content: center; /* Center-align the items */
    gap: 20px; /* Add spacing between items */
    max-width: 2200px;
    margin: 0 auto;
    padding: 20px;
}

.custom-suite-container {
    position: relative;
    width: calc(50% - 20px); /* Two items per row */
    max-width: 600px; /* Limit max width */
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Stack internal elements */
    align-items: center; /* Center-align contents */
    border-radius: 8px;
    height: auto; /* Allow height to adjust */
}

.custom-suite-slider {
    position: relative;
    width: 100%;
    height: 400px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
}

.custom-suite-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.custom-suite-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 10px;
    color: white;
    text-align: center;
}

.custom-suite-title {
    font-size: 20px !important;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    color: black;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: top 0.5s ease, opacity 0.5s ease;
    text-shadow: none !important;
    display: inline-block;
    padding: 8px 25px;
    /* font-size: 0.9em; */
    color: black !important;
    font-weight: bold;
    text-decoration: none !important;
    border: 1px solid white;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: white;
    border-radius: 4px;
    letter-spacing: 2px;

}

.custom-suite-details {
    font-size: 19px;
    line-height: 1.4;
    position: absolute;
    bottom: -100%; /* Initially hidden */
    left: 0;
			    background-color: rgba(17, 17, 17, 0.5);

    width: 100%;
    padding: 10px;
    color: white;
    text-align: center;
    transition: bottom 0.5s ease, opacity 0.5s ease;
    text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.7);
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Prevents interaction when hidden */
}

/* Hover Effect for Desktop */
.custom-suite-container:hover .custom-suite-details {
    bottom: 20%; /* Slide up the paragraph on hover */
    opacity: 1; /* Make it visible */
    pointer-events: auto; /* Enable interaction */
}

/* Click-like Effect for Mobile using :focus-within */
.custom-suite-container:focus-within .custom-suite-details {
    bottom: 20%; /* Slide up the paragraph */
    opacity: 1; /* Make it visible */
    pointer-events: auto; /* Enable interaction */
}

.custom-suite-buttons {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 130px;
}

.custom-suite-button {
    display: inline-block;
    padding: 8px 25px;
    font-size: 0.9em;
    color: white;
    font-weight: bold;
    text-decoration: none !important;
    border: 1px solid white;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: transparent;
    border-radius: 4px;
    letter-spacing: 2px;
}

.custom-suite-button:hover {
    background-color: white;
    color: black;
}
.custom-suite-container:hover .custom-suite-title {
    top: 30%; /* Move slightly up on hover */
    opacity: 1; /* Ensure visibility */
    transition: top 0.5s ease, opacity 0.5s ease;
}

/* Mobile and tablet responsiveness */
@media (max-width: 1024px) {
    .custom-suite-container {
        width: calc(50% - 20px); /* Two items per row on tablets */
    }
}

@media (max-width: 768px) {
    .custom-suite-container {
        width: calc(100% - 20px); /* Full width on mobile */
    }

    .custom-suite-slider {
        height: 550px;
    }

    .custom-suite-title {
        font-size: 1.5em;
    }


  .custom-suite-slider img {
        width: 100%;
        height: 600px !important;
        object-fit: cover; /* Ensure the image maintains aspect ratio */
        border-radius: 8px; /* Keep rounded corners */
    }



    .custom-suite-details {
        font-size: 16px;
    }

    .custom-suite-buttons {
        gap: 10px;
    }

    .custom-suite-button {
        font-size: 0.8em;
        padding: 6px 10px;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .custom-suite-container {
        width: calc(50% - 20px); /* Two items per row */
        margin: 10px auto; /* Center containers */
    }

    .custom-suite-slider {
        height: 300px; /* Adjust slider height for tablets */
    }

    .custom-suite-title {
        font-size: 1.5em; /* Slightly smaller font size for tablets */
        top: 29%; /* Centered alignment */
        transition: top 0.5s ease, opacity 0.5s ease;
    }

    .custom-suite-container:hover .custom-suite-title {
        top: 35%; /* Move slightly up on hover */
    }

    .custom-suite-details {
        font-size: 15px; /* Slightly smaller font for tablets */
        line-height: 1.6; /* Better readability */
        padding: 10px 15px; /* Adjust padding */
        bottom: -100%; /* Initially hidden */
        opacity: 0; /* Hidden by default */
        background-color: rgba(17, 17, 17, 0.6); /* Semi-transparent background */
        color: white;
        text-align: center;
        border-radius: 5px; /* Smooth corners */
        transition: bottom 0.5s ease, opacity 0.5s ease;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Subtle shadow */
    }

    .custom-suite-container:hover .custom-suite-details {
        bottom: 15%; /* Slide up on hover */
        opacity: 1; /* Make visible */
    }

    .custom-suite-buttons {
        position: absolute;
        bottom: 107px; /* Move buttons higher */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 10px; /* Reduce gap between buttons */
    }

    .custom-suite-button {
        padding: 8px 20px; /* Adjust padding for tablets */
        font-size: 0.9em; /* Adjust font size */
        border: 1px solid white;
        background-color: transparent; /* Remove background color */
        color: white;
        text-transform: uppercase;
        border-radius: 4px;
        transition: color 0.3s ease, border-color 0.3s ease;
    }

    .custom-suite-button:hover {
        color: black; /* Change text color on hover */
        border-color: black; /* Change border color on hover */
    }

    .unique-room-size {
        font-size: 14px; /* Adjust font size */
        color: #fff; /* Subtle color for size details */
        text-align: center;
        margin-top: 10px; /* Add spacing */
    }
}


@media (max-width: 480px) {
    .custom-suite {
        flex-direction: column; /* Stack items vertically */
        gap: 20px; /* Adjust gap for smaller screens */
    }

    .custom-suite-container {
        width: 100%; /* Full width for smaller devices */
    }
}

/* Updated Lightbox Styling */
.new-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.new-lightbox-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    overflow: hidden;
}

.new-lightbox-slider img {
    max-width: 100%;
    max-height: 70vh;
    display: none;
        transition: opacity 0.5s ease-in-out; /* Smooth fade transition */

}

.new-lightbox-description {
    margin-top: 15px;
    font-size: 1.2rem;
        transition: opacity 0.5s ease-in-out; /* Smooth fade for text */

    color: #333;
}

.new-lightbox-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 25px;
    color: white;
    cursor: pointer;
    background: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.new-lightbox-prev,
.new-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.new-lightbox-prev {
    left: 10px;
}

.new-lightbox-next {
    right: 10px;
}

.new-lightbox-prev:hover,
.new-lightbox-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 1024px) {
    .new-lightbox-content {
        max-width: 90%;
        max-height: 90%;
    }
    .new-lightbox-prev,
    .new-lightbox-next {
        font-size: 1.5em;
    }
    .new-lightbox-close {
        font-size: 1.8em;
    }
}

@media (max-width: 768px) {
    .new-lightbox-content {
        max-width: 100%;
        max-height: 100%;
    }
    .new-lightbox-prev,
    .new-lightbox-next {
        font-size: 1.2em;
    }
    .new-lightbox-close {
        font-size: 1.5em;
    }
}
@media (max-width: 768px) {

    /* Make sure the lightbox content stays fixed on mobile */
    .new-lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .new-lightbox-content {
        position: relative;
        max-width: 100%;
        max-height: 100%;
        padding: 10px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
}

.room-features {
    color: black !important;
    text-align: center;
    padding: 20px;
}

.room-features h2 {
    font-size: 29px;
    margin-bottom: -5px;
    color: #005e7d !important;
    font-weight: normal;
    text-align: left;
    margin-left: 0px;
}

.room-features p {
    font-size: 29px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: left;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns for large screens */
    gap: 30px; /* Increased gap for spacing */
    text-align: left;
    max-width: 1800px; /* Wider container */
margin-left: 0px;
    
}

.feature-item {
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 15px; /* Increased gap between icon and text */
}

/* Image Icon Styling */
.feature-item img {
    width: 42px; /* Increased icon size */
    height: 42px; /* Maintain square aspect ratio */
    object-fit: contain;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for tablets */
    }
    .room-features h2 {
        font-size: 1.5rem;
    }
    .room-features p {
        font-size: 1.2rem;
    }
    .feature-item {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller tablets */
    }
    .feature-item {
        font-size: 16px;
    }
    .room-features h2 {
        font-size: 1.3rem;
    }
    .room-features p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: 1fr; /* 1 column for mobile */
    }
    .feature-item {
        font-size: 16px;
    }
    .room-features h2 {
        font-size: 1.2rem;
    }
    .room-features p {
        font-size: 16px;
        margin-top: 25px;
    }
}



@media(max-width:1024px){
.elementor-37579 .elementor-element.elementor-element-9c1e9e9 {
    top: -434px;
	}}

.room-info h3{
	text-shadow:none !important;
}
 .white-link {
    color: white;
    text-decoration: none;
}

.white-link:hover {
    text-decoration: underline;
color: white;
}

.homepage-custom-suite-title{
	text-decoration:none !important;
}
@media(min-width:820px){
	.container-welcome {
    display: flex
;
    gap: 10px;
    flex-direction: column;
}
}

  body {
            font-family: 'CenturyGothic', 'Century Gothic', Arial, sans-serif;
        }
        
  

/* Placeholder space για το widget */
.rate-parity-container {
    min-height: 100px !important; /* Ή όσο χρειάζεται */
    width: 300px!important;
}
/* Placeholder space για το widget */
.rate-parity-container {
    min-height: 100px; /* Ή όσο χρειάζεται */
    width: 300px;
}

/* Rate parity specific */
.MinimizedWidget-content {
    contain: layout size style;
}
/* Rate parity specific */
.MinimizedWidget-content {
    contain: layout size style;
}
.custom-review-text,
.custom-review-author,
.custom-review-response {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 5px;
}

.elementor-element-4479a71 .elementor-heading-title,
.elementor-element-92b5fd2 .elementor-heading-title {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
}
.unique-room-button { color: #2c3e50; 
	background-color: white; 
} 

.custom-suite-button{ color: #2c3e50; 
	background-color: white; 
} 

.custom-suite-button:hover {
	background-color: #0E597C; color: white; 

}
.unique-room-button:hover {
	background-color: #0E597C; color: white; 

}

.unique-room-size{
text-shadow:none !important;
color:#0E597C !important;}


.homepage-custom-room-size {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 5px;
	transition:none;
}

.highlight {
    color: #B8860B !important; /* Σκουρότερο χρυσαφί */
    background-color: #fff !important;
}
@media (max-width: 767px) {
    .elementor-37579 .elementor-element.elementor-element-6d9da8c .elementor-button {
        border-width: 1px 1px 1px 1px;
        background-color: #0E597C;
        font-size: 19px;
        font-weight: 500;
        color: #FFF;
        border-radius: 30px 30px 30px 30px;
    }
}

@media (max-width: 1924px) {
    .page-id-37579 .elementor-element-9c1e9e9 {
        top: auto !important;
        bottom: 20% !important; /* Απόσταση από το κάτω μέρος */
    }
}
.elementor-1632 .elementor-element.elementor-element-2869cbb .elementor-button:hover{
	font-weight: 800;
}
.elementor-21836 .elementor-element.elementor-element-6015165 .elementor-heading-title {
    color: #FFFFFF;
    font-family: 'Cinzel Decorative', sans-serif !important;
}
.elementor-37579 .elementor-element.elementor-element-a8b8bab .hfe-infocard-title {
    font-family: "Trebuchet MS", Sans-serif;
    font-size: 23px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding: 20px;
}

.hfe-infocard-text{
	margin-bottom: 50px;
	padding-left: 20px;
		padding-right: 20px;

}


@media (max-width: 767px) {
    .elementor-21836 .elementor-element.elementor-element-be04321 {
        position: relative;
        background-image: url(https://www.hellenicvibes.gr/wp-content/uploads/2025/04/1-2.webp);
        background-position: -240px 0px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .elementor-21836 .elementor-element.elementor-element-be04321::before {
            content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 1;
        pointer-events: none;
        transition: all 0.4s ease;
        background: linear-gradient(0deg, #0e587b75, rgba(255, 255, 255, 0));
    }
}






@media(max-width:768px){
    .page-id-37579 .form-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 20px 15px !important;
        background-color: #2c2c2c !important;
        border-radius: 10px !important;
        width: 90% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        margin-bottom: 80px;
        margin-top: 20px !important;
    }
}




.elementor-37579 .elementor-element.elementor-element-37f56a6 .hfe-infocard-title {
    font-family: "Trebuchet MS", Sans-serif;
    font-size: 23px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding: 20px;
}


.elementor-37579 .elementor-element.elementor-element-f7de32a .hfe-infocard-title {
    font-family: "Trebuchet MS", Sans-serif;
    font-size: 23px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding: 20px;
}
@media(max-width:820px){
.elementor-37579 .elementor-element.elementor-element-f7de32a .hfe-infocard-title , 
.elementor-37579 .elementor-element.elementor-element-a8b8bab .hfe-infocard-title ,
.elementor-37579 .elementor-element.elementor-element-37f56a6 .hfe-infocard-title{
    font-family: "Trebuchet MS", Sans-serif;
    font-size: 23px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding: 40px;
	    padding: 15px;
	}}




.salata-image img{

    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center 70% !important;
    border-radius: 44px 44px 44px 44px;

}

@media(max-width:820px){
	.menu-item span{
		font-size: 17px !important;
	}
}


.menu-effect-image img {
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 70%);
  mask-size: 20% 20%;
  -webkit-mask-size: 20% 20%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  transition: mask-size 2s ease-out, -webkit-mask-size 2s ease-out;
}

.menu-effect-image.revealed img {
  mask-size: 120% 120%;
  -webkit-mask-size: 120% 120%;
}


.page-id-36123 .hours-section .details {
    flex: 1;
    background-color: #fff;
    color: #0e597c;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.page-id-36123 #customPopup {
  display: none !important;
}

.elementor-31233 .elementor-element.elementor-element-3d4c5ef .elementor-image-box-title {
    margin-bottom: 0px;
    color: black;
    font-weight: normal;
    font-size: 18px !important;
}
  .menu-section {
    color: #ffffff;
    max-width: 500px;
    margin: auto;
    border-radius: 12px;
  }

.menu-section h2 {

display: inline-flex
;
    align-items: center;
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: 1px;
    gap: 10px;
    margin-bottom: 1.5rem;
    color: #fff;
    padding-bottom: 0.5rem;
    text-align: center;
    width: 100%;
    justify-content: flex-start !important;
}




  .menu-item-less {
    margin-bottom: 1.8rem;
  }


  .menu-item-less h3 {
    display: flex;
		width: 300px;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-weight: normal;
  }
.menu-item-little-less-krasia p {

    color: #cfdde5;
}
.menu-item-little-less-krasia h3{
    display: flex;
		width: 400px;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1.1rem;
    color: #ffffff;
	    margin-bottom: 0.5rem;

    font-weight: normal;
  }


.menu-item-little-less h3 {
    display: flex;
		width: 400px;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 0.8rem;
    font-weight: normal;
  }
.menu-section {
    color: #ffffff;
    max-width: 452px;
    margin: auto;
    border-radius: 12px;
}



.menu-section-less .drinks-section{
	    color: #ffffff;
    max-width: 452px;
    margin: auto;
    border-radius: 12px;
}

 .menu-section-less  {
    color: #ffffff;
    max-width: 400px;
    margin: auto;
    border-radius: 12px;
  }

.menu-section-less  h2 {

display: inline-flex
;
    align-items: center;
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: 1px;
    gap: 10px;
    margin-bottom: 1.5rem;
    color: #fff;
    padding-bottom: 0.5rem;
    text-align: center;
    width: 100%;
    justify-content: flex-start !important;
}


.menu-section-less  h2 .svg-icon {
  display: inline-block;
  width: 28px; /* or your desired width */
  height: 28px; /* or your desired height */
  background-image: url("https://www.hellenicvibes.gr/wp-content/uploads/2025/03/romvos.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}


.menu-tabs-mobile {
  display: flex;
  gap: 2rem;
  justify-content: center;
}
.menu-tab-mobile {
  cursor: pointer;
  font-size: 20px !important;
  color: white;
  position: relative;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  transition: 0.3s;
}
.menu-tab-mobile:hover {
  color: #fff;
}
.menu-tab-mobile:hover::before,
.menu-tab-mobile:hover::after {
  background: #0e597c;
}
.menu-tab-mobile::before,
.menu-tab-mobile::after {
  content: "";
  display: block;
  height: 2px;
  background: white;
  position: absolute;
  left: 0;
  right: 0;
}
.menu-tab-mobile::before {
  top: 0;
}
.menu-tab-mobile::after {
  bottom: 0;
}
@media (max-width: 820px) {
  .menu-tab-mobile {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
}
.page-id-36123 .hours-section .details h3 {
    color: #0e597c;
}

@media (max-width: 1524px) {
    .page-id-36123 .hours-section .details ul li {
        font-size: 18px;
        font-weight: normal !important; /* Just in case something else tries to make it bold */
    }

    .page-id-36123 .hours-section .details p {
        font-size: 18px;
        font-weight: bold !important;
    }
}

@media (max-width: 768px) {
    .page-id-36123 .hours-section .details p {
        margin-left: 0%;
    }

    .page-id-36123 .hours-section .details {
        padding: 15px;
        text-align: left;
    }
	.menu-item h3{
	font-size: 17px;
}
}

.menu-item h3{
	font-size: 19px;
}
.menu-item p{
	font-size: 17px !important;
}
.tabletcss {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 10px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    background: rgb(115 115 115) !important;
}

@media (min-width: 768px) {
  .background-grid-lines {
    position: relative;
    overflow: hidden;
  }

  .background-grid-lines::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
		opacity: 0.6;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.1); /* Change color as needed */
    left: 50%;
    transform: translateX(-380px); /* Half of 1300px */
    z-index: 0;
  }

  .background-grid-lines::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
				opacity: 0.6;

    width: 2px;
    background-color: rgba(255, 255, 255, 0.1); /* Change color as needed */
    left: 50%;
    transform: translateX(280px); /* Half of 1300px */
    z-index: 0;
  }
}
.circle-image-restaurant img {
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 300px !important;
    width: 400px !important;
    height: auto !important;
    display: block !important;
    text-align: left;
}

#rp-allinone{
    display: none !important;
    box-sizing: border-box;
}
:host(#rp-allinone) * {
    display: none !important;
    box-sizing: border-box;
}
/* Tablet screens (up to 1024px) */
@media (max-width: 1024px) {
  .circle-image-restaurant img {
    max-width:347px !important;
  }
}


a.footer-link svg {
    transform: rotate(90deg);
}
.top-bar .fa-phone-flip {
  transform: rotate(90deg);
  display: inline-block; /* ensures transform applies correctly */
}




#rank_math_dashboard_widget{
	display:none !important;
}
a.hfe-menu-item {
  position: relative !important;
  padding-left: 15px !important;
  padding-right: 15px !important;

  --underline-y: calc(100% - 2px); /* Distance from top — slightly above bottom */
  --underline-height: 1px;
  --underline-color: #0E597C;

  background-image: linear-gradient(var(--underline-color), var(--underline-color));
  background-repeat: no-repeat;
  background-size: 0% var(--underline-height);
  background-position: 15px var(--underline-y); /* Simulate left inset */
  transition: background-size 0.4s cubic-bezier(.26, .57, .14, .81) !important;
}

a.hfe-menu-item:hover {
  background-size: calc(100% - 30px) var(--underline-height); /* 15px left + 15px right */
}

.icon  {
    font-size: 1.2em;
    color: #0e587b !important; /* or your brand color */
    margin-left: 6px; /* spacing if needed */
}


@media (min-width: 1440px) { /* Apply only for large screens */
    .homepage-custom-room {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* First row has 4 columns */
        grid-template-rows: auto auto; /* Two rows */
        gap: 20px; /* Space between items */
        justify-content: center;
        max-width: 1800px; /* Ensures it fits well */
    }

    .homepage-custom-room-container {
        width: 100%; /* Allow full width per grid */
        max-width: none; /* Remove any previous max-width restrictions */
    }

    /* First 4 rooms in the first row */
    .homepage-custom-room-container:nth-child(-n+4) {
        grid-column: span 1; /* Each takes 1 column */
    }

    /* Next 3 rooms in the second row */
    .homepage-custom-room-container:nth-child(n+5):nth-child(-n+7) {
        grid-column: span 1;
    }

    /* Center the second row with 3 items */
    .homepage-custom-room-container:nth-child(5) {
        grid-column-start: 2;
    }
}
.page-not-found h2 {
    font-size: 140px;
    font-weight: 600;
    letter-spacing: -10px;
    line-height: 140px;
    text-align: center; /* Centers the text */
    margin-top: 100px; /* Optional: Adjust the vertical position */
}
@media (min-width: 490px) {
    .elementor-element.elementor-element-16e1dff .elementor-heading-title:after, .elementor-element.elementor-element-1a44293 .elementor-heading-title:after {
        position: absolute;
        height: 1px;
        content: '';
        right: 21px;
        width: 6%;
        color: #000;
        background-color: #fff;
        top: 64px !important;
    }
}
.elementor-26340 .elementor-element.elementor-element-d97d2b4 .elementor-icon i {
    transform: rotate(19deg) !important;
}
.page-id-31233 .elementor-element-17a2e99 .elementor-icon-box-wrapper {
    display: flex
;
    flex-direction: row!important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 130px;
    gap: 15px;
}
body{
direction: ltr !important;
}
.ast-container{display:none !important;}


.input-wrapper {
    position: relative;
}
.whatsapp {
    bottom: 40px;
    left: 40px;
    /* COLOR: WHITE ! IMPORTANT; */
    fill: #fff !important;
}
.elementor-22341 .elementor-element.elementor-element-d49e01e .elementor-button ,
.elementor-24127 .elementor-element.elementor-element-c49860c .elementor-button,
.elementor-24128 .elementor-element.elementor-element-6fde1d9 .elementor-button{
    /* background-color: #BEE4C300; */
    /* fill: #000000; */
    /* color: #000000; */
    background-color: #0E597C;
    font-size: 19px;
    font-weight: 500;
    color: #FFFFFF;
    border-radius: 30px 30px 30px 30px;
    /* border-style: solid; */
    /* border-color: var(--e-global-color-19bab7a7); */
}


/* Icon container styles */
.img-container-checkin,
.img-container-checkout {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust distance from the right */
    transform: translateY(-50%);
    pointer-events: none; /* Prevent the icon from blocking input clicks */
}

/* Icon styles */
.img-checkin,
.img-checkout {
    width: 20px; /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
}

#checkin-picker,
#checkout-picker {
    width: 200px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 5px;
    z-index: 1;
}



.room-suites-heading h2{
  color: #fff; /* Default color for PC, laptop, and tablet */
}

@media (max-width: 768px) {
  .room-suites-heading h2{
    color: #000 !important; /* Black for mobile */
  }
}

/* Base Styles */
.elementor-26324 .elementor-element.elementor-element-e4f0af5::before,
.elementor-26324 .elementor-element.elementor-element-1c56611::before,
.elementor-26324 .elementor-element.elementor-element-3e5f67a::before,
.elementor-26324 .elementor-element.elementor-element-19dceb4::before,
.elementor-26324 .elementor-element.elementor-element-39dd033::before,
.elementor-26324 .elementor-element.elementor-element-78aef71::before,
.elementor-26324 .elementor-element.elementor-element-1b53d23::before{
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%; /* Adjusted for better positioning on PC */
    border: 2px solid #0e587b;
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
}
@media (max-width: 480px) {
    .elementor-26324 .elementor-element.elementor-element-d7d72b5 img,
    .elementor-26324 .elementor-element.elementor-element-c0ba2a1 img,
    .elementor-26324 .elementor-element.elementor-element-c470eb7 img,
    .elementor-26324 .elementor-element.elementor-element-501b334 img,
    .elementor-26324 .elementor-element.elementor-element-7e35780 img,
    .elementor-26324 .elementor-element.elementor-element-ff346d1 img,
    .elementor-26324 .elementor-element.elementor-element-d4d6fcc img {
      outline: 2px solid #0E597C;
  outline-offset: -15px;
    }
}



@media (max-width: 768px) {
    .elementor-25845 .elementor-element.elementor-element-b588b95 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-25845 .elementor-element.elementor-element-b588b95 .elementor-swiper-button.elementor-swiper-button-next {
        font-size: 33px !important;
    }
}

.page-id-25845 .swiper {
  width: 100% !important;
  height: 100% !important;
}

.page-id-25845  .swiper .swiper-slide {
  height: 550px!important;
}

.page-id-25845  .swiper-slide img {
  display: block;
  width: 100%;
  height: 500px !important;
  object-fit: cover;
  border-radius: 15px;
}
@media (max-width: 768px) {
    /* Center the form container */
    .form-container {
        flex-direction: column !important;
        align-items: center !important; /* Center child elements horizontally */
        gap: 10px !important;
        padding: 20px 15px !important;
        background-color: #2c2c2c !important;
        border-radius: 10px !important;
        width: 90% !important; /* Adjust width to fit within the screen */
        max-width: 400px !important; /* Restrict max width for a cleaner look */
        margin: 0 auto !important; /* Center horizontally */
        box-sizing: border-box !important;
        margin-bottom: -106px;
    }

    /* Form group */
    .form-group {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Center child elements */
        padding: 10px 15px !important;
        background-color: #fff !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box !important;
        gap: 5px !important;
    }

.form-group label {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #0E597C  !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
    text-align: center !important;
    padding-left: 0 !important;  /* Remove left padding */
    padding-right: 0 !important; /* Ensure there's no right padding */
    width: 100%;
    display: block;  /* Ensures label takes full width */
}

input[type="text"], select {
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    width: 100%;              /* Full width of the container */
    max-width: 400px;         /* Optionally set a max-width if you want a specific size */
    display: block;           /* Ensures the element is block-level for centering */
	border: none;
}


    /* Icon (calendar) */
    .icon img {
        width: 44px !important;
        height: 44px !important;
        margin: 35px auto !important;
        right: 13%;
        position: absolute;
    }

    /* Adults/Children text styling */
    .form-group span {
        font-size: 16px !important; /* Slightly larger text */
        font-weight: bold !important;
        color: #0E597C !important; /* Blue color */
        text-transform: uppercase !important;
        margin-bottom: 5px !important;
        text-align: center !important; /* Center text */
    }

    /* Adults/Children value */
    .form-group .value {
        font-size: 24px !important;
        font-weight: bold !important;
        color: #333 !important; /* Black text */
        text-align: center !important;
        width: 100% !important;
    }

/* Target the specific dropdown */
#adults {
    text-align: left; /* Align text to the left */
    padding-left: 50px; /* Adjust spacing to move the text */
}

/* Target only the first option element (1 Adult) */
#adults:first-child {
  text-align: left !important;
        padding-left: 72px !important;
}





    /* Button */
    .search-button {
        width: 100% !important;
        font-size: 16px !important; /* Slightly larger text for better readability */
        font-weight: bold !important;
        text-transform: uppercase !important;
        padding: 14px !important;
        background-color: #0E597C !important;
        color: #fff !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        text-align: center !important;
        transition: background-color 0.3s ease !important;
    }

    .search-button:hover {
background-color: #2DA7DF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5) inset;
    color: white;    
}
}