/*
 Theme Name: Elegant Menu Theme
 Text Domain: elegantmenutheme
Author: jbili-mu
Description: hotel fose khénifra 2.
Version: 2.0
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
/* #00a2c6  */
body {
    font-family: 'Roboto' !important;
    /* line-height: 1.6; */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

 .main-navigation ul li a:hover,
    .main-navigation ul li.current-menu-item > a {
         border-bottom: 2px solid #00a2c6; /* Couleur de la ligne */
/*  color: #ff4500;  Facultatif : change aussi la couleur du texte */
  padding-bottom: 4px;
    }

.main-navigation ul li a {
  text-decoration: none;
  position: relative;
  color: #333;
 
}

.container {
   /* width: 80%;  */
    margin: auto;
    overflow: hidden;
  /*  padding: 0 20px; */
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/* Top Bar styles (now in footer) */
.site-footer #top-bar {
    background-color: rgba(0, 0, 0, 0.2); /* Slightly darker for footer context */
    padding: 15px 30px;
    font-size: 14px;
    border-bottom: 1px solid #444;
    border-top: 1px solid #444;
    line-height: 1;
    margin-bottom: 30px;
}

.site-footer #top-bar a {
    color: #ccc;
    text-shadow: none;
}
.site-footer #top-bar a:hover {
    color: #fff;
}

#top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#top-bar a {
    color: #f0f0f0; /* Lighter color for top bar links */
    text-decoration: none;
    text-shadow: none; /* Remove main header shadow if too much */
    transition: color 0.3s ease;
}

#top-bar a:hover {
    color: #fff;
}

.social-media-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.social-media-icons li {
    margin-left: 15px;
}

.social-media-icons li:first-child {
    margin-left: 0;
}

.social-media-icons .social-icon {
    width: 18px; /* Adjust size as needed */
    height: 18px; /* Adjust size as needed */
    vertical-align: middle; /* Align icons nicely with any potential text or each other */
}

.site-header {
    /* background: #333; */ /* Removed for transparency */
    background:#fff ; /* Initially transparent */
    color: #060606; /* Default text color, good for dark hero images */
    /* padding: 20px 0; */ /* Padding will be on main-header-content now */
    /* border-bottom: #0779e4 3px solid; */ /* Remove or change for transparent look */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */ /* Moved to top-bar or remove if not needed */
    position: fixed; /* Make header fixed for transparency over hero */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure it's above other content */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for scroll */
}

.main-header-content.container {
	 background-color: #fff;
      position: relative;
  overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
   /* height: 56px;  Enforce Material Design height */
    padding: 0 20px; /* Adjust padding to be horizontal only */
    transition: padding 0.3s ease-in-out;
}

/* Scrolled state for the header */
.site-header.scrolled ..main-header-content {
    background-color: #2c3e50; /* Dark background when scrolled */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */
}
.site-header.scrolled #top-bar {
    background-color: rgba(0,0,0,0.2); /* Slightly darker top bar on scroll */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.site-header.scrolled .main-header-content.container {
	background-color: #00a2c6;
  /*  padding: 10px 0; /* Slightly reduce padding on scroll */
}


/* Adjust text color if needed for scrolled state, but white should still be fine on dark bg */
/* .site-header.scrolled a { color: #fff; } */

/* General link styling within .site-header, .main-header-content takes precedence for main links */
.site-header.scrolled  a {
    color: #fff; /* Default for top-bar, overridden by .main-header-content a if needed */
    text-decoration: none;
  /*  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);  Add shadow for better readability */
}



.site-header .site-branding {
    /* float: left; */ /* Replaced by flex properties */
    padding-left: 20px; /* This will be within the container now */
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text content */
    padding-top: 6px;
}

.site-branding-icon {
    max-width: 50px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Space between icon and title */
}

.site-header .site-branding h1,
.site-header .site-branding .site-title {
    margin: 0;
    font-size: 24px;
}

.site-header .site-branding .site-description {
    margin: 0;
    font-size: 14px;
    color: #f0f0f0; /* Lighter for better contrast on hero */
}

/* Adjustments for content starting below fixed header */
body {
    padding-top: 56px; /* Adjusted for new, shorter header */
}
#hero-image-section { /* Ensure hero is not pushed down by padding-top on body */
    margin-top: -56px; /* Counteract body padding-top */
}
/* Booking bar also needs adjustment if header is fixed */
#booking-bar-section {
    position: relative; /* Ensure it flows normally but respects z-index if needed */
    z-index: 2; /* Below header but above hero content if overlapping */
}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation {
    float: right;
    margin-top: 1px; /* Adjust as needed */
    padding-right: 2px; /* This will be within the container now */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
	align-items: center;
}

.main-navigation ul li {
    display: inline-block;
    margin-left: 20px;
}







/* Clearfix for floated elements */
.site-header::after {
    content: "";
    clear: both;
    display: table;
}

/*--------------------------------------------------------------
# Content Area
--------------------------------------------------------------*/
.site-content {
    padding: 20px;
    background: #fff;
    margin: 20px auto;
    width: 80%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

article {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px #eee solid;
}

article h2 {
    margin-top: 0;
}

article h2 a {
    text-decoration: none;
    color: #333;
}

article h2 a:hover {
    color: #0779e4;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    background: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

.site-footer .site-info {
    font-size: 14px;
    margin-top: 40px; /* Space above copyright line */
    padding-top: 20px; /* Line above copyright */
    border-top: 1px solid #444; /* Darker border for separation */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Gap between items if they wrap */
}

.footer-slogan {
    font-style: italic;
    color: #bbb; /* Slightly dimmer than main copyright */
    text-align: right;
    flex-grow: 1; /* Allow it to take space */
}
.copyright {
    text-align: left;
    flex-grow: 1; /* Allow it to take space */
}

@media (max-width: 768px) {
    .site-footer .site-info {
        flex-direction: column; /* Stack copyright and slogan */
        text-align: center; /* Center them when stacked */
    }
    .copyright, .footer-slogan, .footer-extra-links {
        text-align: center; /* Ensure all are centered */
        width: 100%; /* Take full width when stacked */
    }
    .footer-extra-links {
        margin-top: 8px; /* Add a little space when stacked after slogan */
    }
}

.footer-extra-links {
    font-size: 13px;
    /* text-align: right; // Let flexbox handle alignment */
    /* margin-left: auto; // This can push it right if other items don't fill space */
}
.footer-extra-links a {
    color: #aaa;
    text-decoration: none;
    margin-left: 7px; /* Space between links */
    margin-right: 7px;
}
.footer-extra-links a:first-child {
    margin-left: 0;
}
.footer-extra-links a:last-child {
    margin-right: 0;
}
.footer-extra-links a:hover {
    color: #fff;
    text-decoration: underline;
}

/*--------------------------------------------------------------
# Contact Page Template
--------------------------------------------------------------*/
.contact-page-template {
    background-color: #FDFBF5; /* Soft beige background */
}

.contact-page-template .page-title {
    margin-bottom: 50px;
}

.contact-section {
    margin-bottom: 60px; /* Space between contact page sections */
}
.contact-section:last-child {
    margin-bottom: 0;
}

.contact-section-title { /* Used for "Send Us a Message", "Meet Our Team" */
    font-size: 28px;
    font-weight: 500; /* Elegant typography */
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Primary Contact Details Section */
.contact-info-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Responsive 3 columns */
    gap: 30px;
    margin-bottom: 40px; /* Space before next section if any */
}

.contact-info-block {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Subtle shadow */
    text-align: center;
}
.contact-info-block .info-icon {
    font-size: 36px; /* Modern accent icons - placeholder size */
    color: #BF9A77; /* Beige accent */
    margin-bottom: 15px;
    display: block;
}
.contact-info-block h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}
.contact-info-block p,
.contact-info-block address {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
    font-style: normal; /* Reset address italic */
}
.contact-info-block address strong {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 5px;
}
.contact-info-block a {
    color: #BF9A77;
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact-info-block a:hover {
    color: #A98869; /* Darker beige */
    text-decoration: underline;
}

/* Contact Form Section */
.centered-form-section .contact-page-form {
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px 40px; /* More padding */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.contact-page-form .form-group {
    margin-bottom: 25px;
}
.contact-page-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Elegant typography */
    color: #444;
    font-size: 14px;
    text-align: left;
}
.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form textarea {
    width: 100%;
    padding: 14px; /* Slightly larger padding */
    border: 1px solid #ECE7E0;
    border-radius: 6px;
    font-size: 15px;
    color: #333;
    background-color: #fff; /* White input background */
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-page-form input[type="text"]:focus,
.contact-page-form input[type="email"]:focus,
.contact-page-form textarea:focus {
    border-color: #BF9A77;
    outline: none;
    box-shadow: 0 0 0 3px rgba(191, 154, 119, 0.15); /* Softer focus shadow */
}
.contact-page-form textarea {
    min-height: 120px;
    resize: vertical;
}
.contact-page-form .form-submit {
    text-align: center;
    margin-top: 10px;
}
.contact-page-form .button-primary {
    padding: 14px 35px; /* Larger button */
    font-size: 16px;
    font-weight: 500;
    background-color: #BF9A77;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.contact-page-form .button-primary:hover {
    background-color: #A98869;
}

/* Staff Profiles Section */
.staff-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}
.staff-profile-item {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.staff-profile-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.staff-photo img {
    width: 120px; /* Larger photo */
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px auto; /* Center and add margin */
    border: 4px solid #FDFBF5;
}
.staff-details .staff-name {
    font-size: 19px; /* Elegant typography */
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 5px;
}
.staff-details .staff-role {
    font-size: 14px;
    color: #BF9A77;
    margin-bottom: 10px;
    font-style: italic;
}
.staff-details .staff-phone {
    font-size: 14px;
    color: #555;
}
.staff-details .staff-phone a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}
.staff-details .staff-phone a:hover {
    color: #BF9A77;
}

/* Responsive adjustments for Contact Page */
@media (max-width: 992px) { /* Tablets */
    .contact-info-blocks {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Allow more flex on tablet */
    }
}
@media (max-width: 768px) { /* Smaller tablets / large mobiles */
    .contact-info-blocks,
    .staff-profiles-grid {
        grid-template-columns: 1fr;
    }
    .contact-section-title {
        font-size: 26px;
    }
    .contact-info-block h4, .staff-details .staff-name {
        font-size: 17px;
    }
    .centered-form-section .contact-page-form {
        padding: 25px;
    }
}
@media (max-width: 480px) { /* Small mobiles */
    .contact-page-form input[type="text"],
    .contact-page-form input[type="email"],
    .contact-page-form textarea,
    .contact-page-form .button-primary {
        font-size: 14px;
        padding: 12px;
    }
    .contact-page-form .button-primary {
        padding: 12px 25px;
    }
    .staff-photo img {
        width: 100px;
        height: 100px;
    }
}

/*--------------------------------------------------------------
# Contact Page Template
--------------------------------------------------------------*/
.contact-page-template {
    background-color: #FDFBF5; /* Soft beige background */
}

.contact-page-template .page-title {
    margin-bottom: 50px;
}

.contact-section {
    margin-bottom: 60px; /* Space between contact page sections */
}
.contact-section:last-child {
    margin-bottom: 0;
}

.contact-section-title {
    font-size: 28px;
    font-weight: 500;
    color: #333;
    margin-bottom: 30px;
    text-align: center; /* Default for section titles on this page */
}
.visually-hidden { /* For accessible hidden titles */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Primary Contact Details Section */
.contact-info-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center; /* Center content in blocks */
}

.contact-info-block {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.contact-info-block .info-icon {
    font-size: 32px; /* Modern accent icons - placeholder size */
    color: #BF9A77; /* Beige accent */
    margin-bottom: 15px;
    display: block;
}
.contact-info-block h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}
.contact-info-block p, .contact-info-block address {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}
.contact-info-block address strong {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 5px;
}
.contact-info-block a {
    color: #BF9A77;
    text-decoration: none;
}
.contact-info-block a:hover {
    text-decoration: underline;
}

/* Contact Form Section */
.centered-form-section .contact-page-form {
    max-width: 600px; /* Limit form width for centered look */
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    width: 90%;
	padding: 0;
  margin: 0;
}
.contact-page-form .form-group {
    margin-bottom: 20px;
	padding-left: 12px;
}
.contact-page-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #444;
    font-size: 14px;
}
.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ECE7E0; /* Light beige border */
    border-radius: 6px;
    font-size: 15px;
    color: #333;
    background-color: #FDFBF5; /* Light beige input background */
    box-sizing: border-box;
}
.contact-page-form input[type="text"]:focus,
.contact-page-form input[type="email"]:focus,
.contact-page-form textarea:focus {
    border-color: #BF9A77; /* Beige accent on focus */
    outline: none;
    box-shadow: 0 0 0 2px rgba(191, 154, 119, 0.2);
}
.contact-page-form .form-submit {
    text-align: center; /* Center the button */
}
.contact-page-form .button-primary {
    padding: 12px 30px;
    font-size: 16px;
    background-color: #BF9A77; /* Beige accent */
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.contact-page-form .button-primary:hover {
    background-color: #A98869; /* Darker beige */
}

/* Staff Profiles Section */
.staff-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.staff-profile-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
}
.staff-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #FDFBF5; /* Beige border for photo */
}
.staff-details .staff-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 5px;
}
.staff-details .staff-role {
    font-size: 14px;
    color: #BF9A77; /* Beige accent for role */
    margin-bottom: 8px;
    font-style: italic;
}
.staff-details .staff-phone {
    font-size: 14px;
    color: #666;
}
.staff-details .staff-phone a {
    color: #666;
    text-decoration: none;
}
.staff-details .staff-phone a:hover {
    color: #BF9A77;
    text-decoration: underline;
}

/* Responsive adjustments for Contact Page */
@media (max-width: 768px) {
    .contact-info-blocks, .staff-profiles-grid {
        grid-template-columns: 1fr; /* Stack info blocks and profiles */
    }
    .contact-section-title {
        font-size: 24px;
    }
    .contact-info-block h4, .staff-details .staff-name {
        font-size: 17px;
    }
}

/*--------------------------------------------------------------
# Gallery Page Template
--------------------------------------------------------------*/
.gallery-page-template {
    background-color: #FDFBF5; /* Soft beige background for the page */
}

.gallery-page-template .page-title {
    margin-bottom: 40px;
    /* Inherits .section-title style (centered, bold) */
}

.gallery-category-section {
    margin-bottom: 50px; /* Space between category sections */
}

.gallery-category-title {
    font-size: 28px; /* Elegant typography for category titles */
    font-weight: 500; /* Medium weight, not too bold */
    color: #333;
    margin-bottom: 25px;
    text-align: left; /* Or center, depending on preference */
    border-bottom: 1px solid #ECE7E0; /* Subtle separator */
    padding-bottom: 10px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid for thumbnails */
    gap: 20px; /* Gap between thumbnails */
}

.gallery-item {
    background-color: #fff; /* White background for item/padding if image doesn't fill */
    border: 1px solid #ECE7E0; /* Light border */
    border-radius: 6px; /* Slightly softer radius */
    overflow: hidden; /* Important for image border-radius and aspect ratio */
    box-shadow: 0 3px 10px rgba(0,0,0,0.04); /* Very subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4 / 3; /* Enforce aspect ratio for the item container */
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.07);
}

.gallery-item a {
    display: block;
    height: 100%; /* Make link fill the item for clickability */
}

.gallery-item img {
    width: 100%;
    height: 100%; /* Fill the aspect-ratio container */
    object-fit: cover; /* Cover the area, may crop */
    display: block;
    transition: transform 0.3s ease; /* Subtle zoom on image hover */
}

.gallery-item:hover img {
    transform: scale(1.05); /* Zoom image slightly on item hover */
}

/* Responsive adjustments for Gallery Page */
@media (max-width: 768px) {
    .gallery-category-title {
        font-size: 24px;
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Smaller min for more items per row on tablet */
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Even smaller for mobile */
        gap: 10px;
    }
    .gallery-category-title {
        font-size: 22px;
    }
}

/* New Footer Widgets Area */
.footer-widgets-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 30px;
	padding: 0px 15px;
    padding-bottom: 40px; /* Space before copyright */
}

.footer-column {
    /* Individual column styling if needed, e.g., padding */
}

.footer-widget-title {
    font-size: 18px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.footer-logo a {
    display: inline-block;
    margin-bottom: 15px;
    /* color is set inline, can be overridden here */
}

.footer-site-description {
    font-size: 14px;
    line-height: 1.6;
    color: #ccc; /* Lighter text for description */
}

.footer-contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #ccc;
}

.footer-contact-info li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.footer-contact-info .footer-icon {
    margin-right: 10px;
    color: #0779e4; /* Theme color for icons */
    flex-shrink: 0;
    width: 20px; /* Space for icon */
    text-align: center;
}

.footer-contact-info a {
    color: #ccc;
    text-decoration: none;
}

.footer-contact-info a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-email-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-email-form input[type="email"] {
    padding: 12px;
    border: 1px solid #555;
    background-color: #444;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
}

.footer-email-form input[type="email"]::placeholder {
    color: #999;
}

.footer-email-form .button-primary {
    padding: 12px 15px;
    font-size: 14px;
    background-color: #0779e4; /* Ensure it uses theme color */
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.footer-email-form .button-primary:hover {
    background-color: #055fa9;
}

/* Responsive adjustments for Footer Widgets */
@media (max-width: 768px) {
    .footer-widgets-container {
        grid-template-columns: 1fr; /* Stack to single column */
    }
    .footer-column {
        margin-bottom: 30px; /* Add space between stacked columns */
    }
    .footer-column:last-child {
        margin-bottom: 0;
    }
    .footer-widget-title {
        font-size: 17px; /* Slightly smaller titles on mobile */
    }
}

/*--------------------------------------------------------------
# Services Page Template & Service Cards
--------------------------------------------------------------*/
.services-page-template {
    background-color: #FDFBF5; /* Soft beige background for the page */
}

.services-page-template .page-title {
    margin-bottom: 40px; /* Space below page title */
}

.services-grid-container {
    /* Container for the grid if specific padding/margin is needed */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid, 2-3 columns */
    gap: 30px;
}

.service-card {
    background-color: #fff; /* White card background */
    border: 1px solid #ECE7E0; /* Lighter border for beige theme */
    border-radius: 8px;
    padding: 25px;
    text-align: center; /* Center content within the card */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.service-icon-container {
    margin-bottom: 20px;
}

.service-icon {
    font-size: 40px; /* Larger icon size */
    color: #BF9A77; /* Beige accent color for icons */
    display: inline-block;
    /* For more control if using actual icon fonts/SVGs:
    width: 70px;
    height: 70px;
    line-height: 70px;
    background-color: #FDFBF5;
    border-radius: 50%;
    */
}

.service-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.service-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 15px;
    min-height: 60px; /* Give some min height to align cards better if descriptions vary a lot */
}

.service-price {
    font-size: 16px;
    font-weight: bold;
    color: #BF9A77; /* Beige accent for price */
    margin-top: auto; /* Push price to bottom if card content is flex column */
}

/* Responsive adjustments for services grid */
@media (max-width: 992px) { /* Usually 2 columns here */
    .services-grid {
        /* Adjust minmax if you want to ensure 2 columns for longer before stacking */
        /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    }
}
@media (max-width: 768px) { /* Stack to single column for tablets */
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card {
        padding: 20px;
    }
    .service-description {
        min-height: auto; /* Reset min-height on mobile */
    }
}
@media (max-width: 480px) {
    .service-title {
        font-size: 18px;
    }
    .service-icon {
        font-size: 36px;
    }
}


/*--------------------------------------------------------------
# Hero Image Section
--------------------------------------------------------------*/
@-webkit-keyframes subtleZoom {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}

@keyframes subtleZoom {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
#contact-section {
    background-color: #fff; /* Or another subtle background */
}

.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 40px;
    align-items: center; /* Make columns equal height */
}

.contact-map-column iframe {
    width: 100%;
    min-height: 400px; /* Ensure map has a decent height */
    border-radius: 8px; /* Optional */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Optional */
}

.contact-details-column {
 
}

.contact-details-column h3 { /* Subtitle "Get In Touch" */
    font-size: 24px;
    color: #333;
    margin-top: 0; /* Remove top margin if map column determines height */
    margin-bottom: 20px;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
}

.contact-info-list .contact-icon {
    flex-shrink: 0;
    width: 30px; /* Space for icon */
    font-size: 20px; /* Emoji icon size */
    color: #0779e4; /* Theme color for icons */
    margin-right: 10px;
    text-align: center;
}

.contact-info-list strong {
    display: block;
    margin-bottom: 2px; /* Space between label and detail if detail is on new line */
    color: #333;
}
.contact-info-list p {
    margin: 0;
    color: #555;
}
.contact-info-list p a {
    color: #0779e4;
    text-decoration: none;
}
.contact-info-list p a:hover {
    text-decoration: underline;
}


/* Responsive adjustments for Contact Section */
@media (max-width: 992px) { /* Medium screens, like tablets */
    .contact-layout-grid {
        grid-template-columns: 1fr; /* Stack to single column */
    }
    .contact-map-column {
        margin-bottom: 30px; /* Space below map when stacked */
    }
    .contact-details-column h3 {
        text-align: center;
    }
    .contact-info-list li {
        /* Optional: Adjust alignment or text for centered layout */
    }
}

@media (max-width: 768px) { /* Smaller screens */
    .contact-details-column h3 {
        font-size: 22px;
    }
    .contact-info-list li {
        font-size: 15px;
    }
    .contact-map-column iframe {
        min-height: 300px; /* Reduce map height on smaller screens */
    }
}

/*--------------------------------------------------------------
# Media Slideshow Section
--------------------------------------------------------------*/
#media-slideshow-section {
    background-color: #fff; /* Or any other background */
    padding-top: 60px;
    padding-bottom: 60px;
}

#media-slideshow-section .slideshow-container {
    max-width: 1200px; /* Give it a larger max-width */
    margin: auto;
}

.slideshow-container .slide {
    position: relative; /* Needed for caption positioning */
}

.slideshow-container .slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 20px;
    text-align: center;
}

.slideshow-container .slide-caption .slide-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
}

.slideshow-container {
    position: relative;
    margin: auto;
    overflow: hidden; /* Hide slides that are not active if using sliding effect */
    border: 1px solid #ddd; /* Optional border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Optional shadow */
}

/* Slides */
.slide {
    display: none; /* Hidden by default */
    /* For fade effect, slides can be positioned on top of each other */
    /* position: absolute; width: 100%; */
}

.slide.active, .slide:first-child { /* First child active by default for no-JS, JS will handle .active */
    display: block;
}

.slide img, .slide video {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Remove bottom space from img/video */
    object-fit: cover; /* Ensure it covers the area, might crop */
    max-height: 500px; /* Limit max height of the slideshow content */
}


/* Fading animation (optional, can be simple show/hide via JS too) */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* Next & previous buttons */
.prev-slide, .next-slide {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px; /* Adjust based on padding and font size */
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.3);
}

.next-slide {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev-slide:hover, .next-slide:hover {
  background-color: rgba(0,0,0,0.6);
}

/* Dots (indicators) */
.slide-dots {
    text-align: center;
    padding-top: 15px;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.dot.active, .dot:hover {
  background-color: #717171;
}

/*--------------------------------------------------------------
# Restaurant Section
--------------------------------------------------------------*/
#restaurant-section {
    background-color: #f0f0f0; /* A slightly different background, or keep it white/grey as other sections */
    /* padding: 60px 0; */ /* Handled by .site-section */
}

.restaurant-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 40px; /* Gap between image and text column */
    align-items: center; /* Vertically align items in the center if they have different heights */
}

.restaurant-image-column img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: rounded corners for the image */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Optional: shadow for the image */
    display: block;
}

.restaurant-content-column {
    /* Padding or specific alignment can be added if needed */
}

/* Adjust section title if it's used here and needs different styling than centered */
#restaurant-section .section-title.text-left {
    text-align: left;
    margin-bottom: 20px; /* Adjust margin for titles in this context */
}

.restaurant-description {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
}

.learn-more-button {
    /* .button-primary styles are already defined. Add specific overrides if needed */
    /* Example: display: inline-block; */
}





/*--------------------------------------------------------------
# Features Highlight Section
--------------------------------------------------------------*/
#features-highlight-section {
    background-color: #fff; /* White background for this section */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Restored multi-column */
    gap: 30px; /* Restored gap for multi-column */
}

.feature-item {
    display: flex;
    align-items: flex-start; /* Align icon to the top of the text block */
    gap: 30px; /* Increased space between icon and content */
}

.feature-icon {
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 80px; /* Increased width for icon container */
    height: 80px; /* Increased height for icon container */
    background-color: #0779e4; /* Theme color for icon background */
    color: #fff;
    border-radius: 50%; /* Circular icon background */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px; /* Increased size of placeholder text/emoji */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Slightly enhanced shadow */
}

.feature-icon span { /* In case actual icon (e.g. <i>) is used later */
    line-height: 1;
}

.feature-content {
    flex-grow: 1;
}

.feature-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 8px;
    color: #333;
}

.feature-description {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 0; /* Remove default bottom margin from paragraph */
}

/* Responsive adjustments for features grid */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr; /* Stack to single column */
        gap: 40px; /* Adjust gap for stacked items */
    }
    /* Optional: Adjust .feature-item alignment if desired when stacked, e.g., center icon above text */
    /* .feature-item { flex-direction: column; align-items: center; text-align: center; } */
    /* .feature-item .feature-icon { margin-bottom: 15px; } */
}

@media (max-width: 480px) {
    .feature-icon {
       width: 100px;
       height: 100px; /* Adjusted for new larger base icon size */
        font-size: 26px; /* Adjusted for new larger base icon size */
    }
    .feature-title {
        font-size: 18px; /* Kept as is, or slightly adjust if needed */
    }
    .feature-description {
        font-size: 14px;
    }
}

/*--------------------------------------------------------------
# Site Sections (General)
--------------------------------------------------------------*/

.section-title {
    text-align: start;
    font-size: 32px;
    margin-bottom: 40px;
    color: #2b2424;
    font-weight: bold;
	padding-top: 40px;
}

/*--------------------------------------------------------------
# Rooms Page Template & Enhanced Room Cards
--------------------------------------------------------------*/


.rooms-page-template .page-title {
    margin-bottom: 40px; /* Space below page title */
}

/* Apply new aesthetic to rooms grid and cards */
#best-rooms-section, .rooms-page-template { /* Apply to both homepage section and new template */
    background-color: #FDFBF5; /* Clean beige background */
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 30px;
}

.room-card {
   
   /* border: 1px solid #ECE7E0; /* Lighter border for beige theme */
   /* border-radius: 8px; /* Softer radius */ 
    overflow: hidden;
   
    display: flex;
    flex-direction: column;
   
	align-items: center;
}

.room-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* Slightly more pronounced shadow on hover */
}

.room-image img {
    width: 100%;
    height: 220px; /* Fixed height for uniform card images */
    object-fit: cover;
    display: block;
   
}

.room-content {
    padding: 0px;
	padding-top: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  
   
}

.room-title {
    font-size: 20px; /* Slightly smaller for minimalist look */
    margin-top: 0;
    margin-bottom: 8px; /* Tighter spacing */
    font-weight: 600; /* Semi-bold */
}

.room-title a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

.room-title a:hover {
    color: #BF9A77; /* Beige accent color for hover */
}

.room-price {
    font-size: 18px;
    font-weight: bold;
    color: #BF9A77; /* Beige accent for price */
    margin-bottom: 15px;
}

.room-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Gap between icons */
    margin-bottom: 15px;
    color: #777; /* Icon color */
}

.amenity-icon {
    font-size: 18px; /* Adjust emoji/icon size */
    /* Add more specific styling if using font icons or SVGs */
}
.amenity-icon[title="Wi-Fi"] { color: #0779e4; } /* Example: specific color for Wi-Fi */
.amenity-icon[title="TV"] { color: #555; }


.room-description {
    font-size: 14px; /* Smaller for minimalist look */
    line-height: 1.6;
    color: #666; /* Softer text color */
    margin-bottom: 20px;
    flex-grow: 1;
    align-self: center;
}

.room-meta {
    margin-bottom: 15px;
    line-height: 1.5;
    display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


.room-meta .meta-icon svg{
    height: 3.5rem;
  width: 3.5rem;
    vertical-align: middle;
}

.room-actions, /* New class for consistency */
.room-booking-action { /* Keep old class for homepage section if not updated yet */
    display: flex;
    justify-content: flex-start; /* Align button to the left */
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #ECE7E0; /* Lighter border */
}

.room-actions .button-primary,
.room-booking-action .button-primary {
    padding: 10px 20px; /* Standardized padding */
    font-size: 14px;
    text-transform: uppercase;
    background-color: #BF9A77; /* Beige accent for button */
    color: #fff;
    border: none;
    border-radius: 4px;
}
.room-actions .button-primary:hover,
.room-booking-action .button-primary:hover {
    background-color: #A98869; /* Darker beige on hover */
}


/* Responsive adjustments for rooms grid */
@media (max-width: 768px) {
    .section-title, .room
	-page-template .page-title { /* Target both section titles and page template title */
        font-size: 28px;
    }
    .rooms-grid {
        grid-template-columns: 1fr; /* Stack to single column */
    }
    .room-image img {
        height: 200px; /* Adjust image height for mobile */
    }
}
@media (max-width: 480px) {
    .room-title {
        font-size: 18px;
    }
    .room-price {
        font-size: 16px;
    }
    .room-description {
        font-size: 13px;
    }
    .room-actions .button-primary,
    .room-booking-action .button-primary {
        padding: 8px 15px;
        font-size: 13px;
    }
}


#hero-image-section {
    /* background-image is now handled by inline style on the wrapper */
    background-size: cover; /* This will be on the wrapper */
    background-position: center center; /* This will be on the wrapper */
    height: 60vh; /* Adjust height as needed */
    overflow: hidden; /* Important to contain the zooming background */
    -webkit-animation: heroSectionFadeIn 1.5s ease-out forwards;
    animation: heroSectionFadeIn 1.5s ease-out forwards; /* subtleZoom removed, heroSectionFadeIn remains */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative; /* For pseudo-element overlay */
}

.hero-image-background-zoom-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-animation: subtleZoom 15s infinite alternate ease-in-out;
    animation: subtleZoom 15s infinite alternate ease-in-out;
    z-index: 0; /* Behind hero-content */
    /* The actual background-image will be set via inline style from header.php */
}

#hero-image-section::before { /* Optional: dark overlay for better text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust darkness */
    z-index: 1;
}

.hero-content {
    position: relative; /* To ensure content is above the overlay */
    z-index: 2;
    padding: 20px;
    display: flex; /* Use flexbox to center content */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
}

@-webkit-keyframes heroSectionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes heroSectionFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hero-main-title {
    font-size: 2.5rem; /* Adjust size as needed */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Enhanced text shadow for readability */
    margin-bottom: 15px; /* Space below this title */
    opacity: 0; /* Start transparent before animation */
    -webkit-animation: fadeIn 2s ease-in-out 1s forwards;
    animation: fadeIn 2s ease-in-out 1s forwards; /* Apply fade-in animation with 1s delay */
}

.hero-title {
    font-size: 48px;
    margin-bottom: 10px;
    font-weight: bold;
}

.hero-tagline {
    font-size: 24px;
    margin-bottom: 20px;
}

.hero-button {
    display: inline-block;
    background-color: #0779e4;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.hero-button:hover {
    background-color: #055fa9;
}


/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/

/* Mobile Menu Toggle Button */
.menu-toggle {
    display: none; /* Hidden by default, shown on small screens */
    background: #00a2c6; /* Make button background transparent */
    color: #fff; /* Lines will be this color */
    border: none;
    /* padding: 10px; Adjust padding for icon size */
    font-size: 20px; /* Base for relative units if any, not directly for icon lines */
    cursor: pointer;
    float: right;
    margin: 10px 15px 0 0; /* Adjusted margin slightly */
    width: 35px; /* Increased width */
    height: 26px; /* Increased height (3 * 3px lines + 2 * 5px gaps) */
    position: relative; /* For positioning lines if needed, and for consistent height */
    z-index: 1001; /* Ensure it's above other header items if overlapping */
}

.menu-toggle .line {
    display: block;
    background-color: #fff; /* Color of the lines */
    height: 3px; /* Increased thickness */
    width: 100%; /* Lines take full width of button */
    margin: 5px 0; /* Increased space between lines */
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 1.5px; /* Adjusted for new thickness */
}
.menu-toggle .line:first-child { margin-top: 0; }
.menu-toggle .line:last-child { margin-bottom: 0; }


/* Hamburger to X animation */
.menu-toggle[aria-expanded="true"] .line-1 {
    transform: translateY(8px) rotate(45deg); /* 5px margin + 3px height/2 = 6.5px. Use 8px to combine vertical shift */
}

.menu-toggle[aria-expanded="true"] .line-2 {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .line-3 {
    transform: translateY(-8px) rotate(-45deg);
}


@media (max-width: 768px) {


      /* ⚡ Version mobile - max 768px */
.pll-parent-menu-item {
    position: relative;
  }

  .pll-parent-menu-item .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    padding: 8px 0;
    width: 160px;
  }


  .pll-parent-menu-item.active .sub-menu {
    display: block;
  }

  .pll-parent-menu-item .sub-menu li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    background: transparent !important;
    border-bottom: 1px solid #eee;
    font-size: 16px;
  }

  .pll-parent-menu-item .sub-menu li:last-child a {
    border-bottom: none;
  }

  .pll-parent-menu-item .sub-menu li a:hover {
    background: #f0f0f0;
  }
/* fin  */

    .site-header .site-branding {
        float: none;
        text-align: center;
        padding-left: 0;
    }

    .main-navigation {
        float: none;
        width: 100%;
        margin-top: 0;
        padding-right: 40px;
    }

    .menu-toggle {
        display: block; /* Show hamburger button */
        /* Position menu toggle relative to main-header-content, not absolute to site-header */
        margin-top: 0; /* Reset margin if previously set */
        position: relative; /* Or static, ensure it's part of the flow of .main-header-content */
    }

    .main-navigation { /* Ensure it's below the branding on mobile */
        width: 100%;
        order: 3; /* If site-branding is order 1, menu-toggle order 2 */
    }
    .site-header .site-branding {
        order: 1;
        width: auto; /* Allow it to not take full width if toggle is beside it */
        margin-bottom: 0; /* if it was centered before */
    }
    .main-header-content.container {
        position: relative; /* For absolute positioning of menu toggle if needed, or just for flex layout */
        flex-wrap: wrap; /* Allow branding and toggle to wrap if needed */
        justify-content: space-between;
    }
	.site-header.scrolled .main-header-content.container {
  background-color: #fff;
  
}


    .main-navigation ul {
        display: none; /* Hide menu by default on small screens */
        width: 100%;
        background-color: #ffffff; /* Darker background for dropdown */
        padding-top: 60px;
        padding-bottom: 10px;
        box-sizing: border-box; /* Ensure padding doesn't add to width */
    }

    .main-navigation ul.toggled {
       /* display: block; /* Show when toggled */
       display: flex;
    flex-direction: column;
   
    align-items: start;
    padding-left: 50px;
    height: 97vh;
    padding-top: 129px;
  }
    }

    .main-navigation ul li {
        display: block;
        text-align: center;
        margin-left: 0;
        margin-bottom: 2px; /* Spacing between items */
    }

  

    

    .site-content, .container {
       /* width: 95%;  */
    }
 



    #hero-image-section {
        height: 95vh; /* Adjust hero height for smaller screens */
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-tagline {
        font-size: 18px;
    }

    /* No longer need to hide top bar on mobile */


/*--------------------------------------------------------------
# Booking Bar
--------------------------------------------------------------*/
#booking-bar-section {
    background-color: #2c3e50; /* Dark blue/grey background */
    padding: 20px 0;
    color: #fff;
}

.booking-form {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-around;
    align-items: flex-end; /* Align items to the bottom, useful for labels on top */
    gap: 15px; /* Spacing between form groups */
}

.booking-form .form-group {
    display: flex;
    flex-direction: column; /* Labels on top of inputs */
    flex-grow: 1; /* Allow groups to grow */
    min-width: 150px; /* Minimum width before wrapping */
}

.booking-form label {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
}

.booking-form input[type="date"],
.booking-form input[type="number"],
.booking-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: 100%; /* Make inputs take full width of their container */
    box-sizing: border-box;
}

.booking-form .button-primary {
    background-color: #0779e4; /* Blue to match theme */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    width: 100%; /* Full width in its group */
}

.booking-form .form-group.button-group { /* If you want button to have its own flex behavior */
    align-self: flex-end; /* Align button to bottom if other items are taller */
}


.booking-form .button-primary:hover {
    background-color: #055fa9;
}

/* Responsive adjustments for Booking Bar */
@media (max-width: 992px) { /* Tablet and below */
    .booking-form {
        flex-direction: column;
        align-items: stretch; /* Stretch items to full width */
    }

    .booking-form .form-group {
        min-width: 100%; /* Each group takes full width */
        margin-bottom: 10px;
    }

    .booking-form .button-primary {
        width: 100%; /* Button takes full width */
    }
}

@media (max-width: 768px) {
    #booking-bar-section {
        padding: 15px 0;
    }
    .booking-form input[type="date"],
    .booking-form input[type="number"],
    .booking-form select,
    .booking-form .button-primary {
        font-size: 14px; /* Slightly smaller font on mobile */
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .site-header .site-branding h1,
    .site-header .site-branding .site-title {
        font-size: 20px;
    }
    .site-header .site-branding .site-description {
        font-size: 12px;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-tagline {
        font-size: 16px;
    }

    .hero-button {
        font-size: 16px;
        padding: 8px 16px;
    }

    /* Responsive Top Bar */
    #top-bar .container {
        flex-direction: column;
        align-items: center;
    }
    .top-bar-left, .top-bar-right {
        width: 100%;
        text-align: center;
    }
    .top-bar-left {
        margin-bottom: 5px;
    }
    .social-media-icons {
        justify-content: center; /* Center icons when stacked */
    }
    .social-media-icons li {
        margin: 0 5px; /* Adjust spacing for centered icons */
    }
}

/* Page-specific animated header background */


/* Adjustments for main header when custom page header is active */
body.has-custom-page-header #masthead {
    background: transparent !important; /* Make main header transparent */
    box-shadow: none !important; /* Optional: remove shadow */
}

/* Adjust main content padding when has-custom-page-header is active */
body.has-custom-page-header .site-content {
    margin-top: 250px; /* Push content down by the height of the header bg */
}

/* Page-specific animated header background */
.page-specific-animated-header-bg {
    position: relative; /* Changed from fixed */
    height: 250px; /* As specified by user */
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transform: translateY(-100%);
    animation: slideDownAndFadeInHeaderBg 1.2s 0.3s ease-out forwards;
    margin-bottom: -250px; /* Pull subsequent content up */
    z-index: 0; /* Should be fine, but less critical with relative position */
}

@keyframes slideDownAndFadeInHeaderBg {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Adjustments for main header when custom page header is active */
body.has-custom-page-header #masthead {
    background: transparent !important; /* Make main header transparent */
    box-shadow: none !important; /* Optional: remove shadow */
}

body.has-custom-page-header .site-content {
    margin-top: 250px; /* Push content down by the height of the header bg */
}
/*
The #hero-image-section on the homepage also has margin-top: -85px;
We need to ensure this doesn't conflict or make sure body.has-custom-page-header is not on homepage
if homepage has its own hero. The body_class filter in functions.php correctly targets only page templates, so this should be fine.
*/

/*--------------------------------------------------------------
# Sticky Booking Button
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Booking Page Template
--------------------------------------------------------------*/
.booking-page-form {
   
   /* margin: 40px auto;
    padding: 40px; */
	margin:0;
	padding:0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.08);
}
.booking-page-form .form-grid {
    display: flex;
    flex-direction:column;
    gap: 25px;
}

.booking-confirmation-message {
    padding: 30px;
    background-color: #f0f8ff;
    border: 1px solid #b0e0e6;
    border-radius: 8px;
    text-align: center;
    max-width: 800px;
    margin: 40px auto;
}
.booking-confirmation-message .conf-icon {
    font-size: 48px;
}
.booking-confirmation-message h3 {
    font-size: 24px;
    color: #2e8b57;
    margin-top: 10px;
    margin-bottom: 10px;
}
.booking-confirmation-message p {
    font-size: 16px;
    color: #333;
}
.booking-page-form  {
    display: none; /* Hidden by default, toggled by JS */
}
.booking-page-form  {
    display: block;
}
.booking-page-form .form-group {
    display: flex;
    flex-direction: column;
}
.booking-page-form .form-group.full-width {
    grid-column: 1 / -1;
}
.booking-page-form label {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}
.booking-page-form input,
.booking-page-form select {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px; 
    font-size: 16px;
}
.booking-page-form .submit-button {
    background-color: #0779e4;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}
.booking-page-form .submit-button:hover {
    background-color: #055fa9;
}
@media (max-width: 600px) {
	.booking-page-form input,
.booking-page-form select {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px; 
    
	
}
    .booking-page-form .form-grid {
        grid-template-columns: 1fr;
    }
	#is-subscriberd{
		width:12px;
	}
}

/*--------------------------------------------------------------
# Booking CTA Section
--------------------------------------------------------------*/
.booking-cta-section {
    background-color: #2c3e50; /* Dark blue/grey background */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    /* Styles for scroll-reveal animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.booking-cta-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.booking-cta-section .cta-title {
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 25px;
}
.booking-cta-section .cta-button {
    padding: 12px 35px;
    font-size: 18px;
    background-color: #0779e4;
}
.booking-cta-section .cta-button:hover {
    background-color: #055fa9;
}

/*--------------------------------------------------------------
# Homepage About Summary Section
--------------------------------------------------------------*/
#home-about-summary {
    text-align: initial;
   background-color: #becac936; 
  /* background-image: url('imgs/bg5.png'); /* Adjust path if needed */
}

#home-about-summary .home-about-text {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    font-size: 16px;
    color: #1a1919;
	Text-align : justify;
}

/*--------------------------------------------------------------
# About Page Template
--------------------------------------------------------------*/
.about-page-template .about-section {
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}
.about-page-template .about-section:last-child {
    border-bottom: none;
}

/* Introduction Section */
.about-intro-grid {
    display: flex;
  flex-direction: column;
  align-items: center;
}
.about-image-column img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.about-text-column p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
	text-align: justify;
}

/* Core Values Section */
.core-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}
.value-item .value-icon {
    font-size: 40px;
    margin-bottom: 15px;
}
.value-item .value-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Team Section on About Page */
.about-team-section .staff-profiles-grid {
    /* Uses existing styles from contact page, can add overrides here if needed */
}

/* Call to Action Section */
.about-cta-section {
    background-color: #f0f0f0; /* Light grey background */
    padding: 50px 20px;
    text-align: center;
    border-radius: 8px;
}
.about-cta-section .cta-title {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 25px;
}
.about-cta-section .cta-button {
    padding: 12px 35px;
    font-size: 16px;
}

/* Responsive adjustments for About Page */
@media (max-width: 768px) {
    .about-intro-grid {
        grid-template-columns: 1fr; /* Stack columns */
    }
    .about-image-column {
        margin-bottom: 30px;
    }
}

/*--------------------------------------------------------------
# New Rooms Page Layout
--------------------------------------------------------------*/
.rooms-page-template .room-showcase-section {
    padding: 40px 0;
    /* border-bottom: 1px solid #eee; */
    background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}
.rooms-page-template .room-showcase-section:last-of-type {
    border-bottom: none;
}

.room-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.room-showcase-grid.reverse-grid .room-image-column {
    order: 2;
}
.room-showcase-grid.reverse-grid .room-content-column {
    order: 1;
}

.room-image-column img {
    width: 100%;
    height: 75%;
   /* border-radius: 8px; */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.room-section-title {
    font-size: 28px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
}

.fp {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .room-showcase-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .room-showcase-grid.reverse-grid .room-image-column {
        order: 1;
    }
    .room-content-column {
        order: 2;
        text-align: center;
    }
    .room-section-title {
        font-size: 24px;
    }
}

/*--------------------------------------------------------------
# Sticky Booking Widget
--------------------------------------------------------------*/


/* Responsive: Hide on mobile */
/* Using a class similar to Elementor's for compatibility/consistency */
.elementor-hidden-mobile {
    /* This class can be used to hide things on mobile */
}

@media (max-width: 767px) {
    .elementor-hidden-mobile {
      /*  display: none !important; */
      

    }
}

/*--------------------------------------------------------------
# Rooms Page Slider
--------------------------------------------------------------*/

.reveal-left,
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-left {
  transform: translateX(-50px);
}

.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
  text-align: start;
 padding-top: 18px;
}
.form-response.success {
    background-color: #d4edda;
    color: #155724;
    border-left: 5px solid #28a745;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}
.form-response.error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 5px solid #dc3545;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}
.pri{
    margin: 0;
  padding: 0;
  background-color: black;
  color: aliceblue;
  font-style: normal;
  padding: 15px;
}
/* Wrapper: flexbox layout */
.about-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 25px;
}

/* Image on the left side */
.about-image {
    flex: 1 1 40%;
    text-align: left;
    
}

/* Image styles: border, shadow, animation */
.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 3px solid var(--primary-color); /* Replace with #ffcc00 if needed */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.about-image img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Text on the right side */
.about-text {
    flex: 1 1 50%;
    color: #222;
	text-align: start;
}

/* Responsive: stack image and text vertically on small screens */
@media (max-width: 768px) {
    .about-content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .about-image {
        text-align: center;
    }
}
.fp{
    font-weight: 800;
}


.city-dropd {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.city-dropd.is-visible {
    max-height: 200px; /* Ajuste si nécessaire */
    opacity: 1;
}
#city-select{
    width: 100%;
}
/* design of mseg in booking */
.room-type-description {
     grid-column: 1 / -1;
}

.room-type-description h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: #333;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}

.room-option {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #555;
}

.room-option strong {
  display: inline-block;
  width: 120px;
  color: #222;
}
/* polylang design */
/* Align the entire language switcher to the right */
.pll-parent-menu-item {
    float: right;
    margin-left: auto;
    /* margin-right: 20px; */
    position: relative;
}

/* Style the main language button */
.pll-parent-menu-item > a {
   
   
    transition: background 0.3s;
    font-size: 14px;
}

.pll-parent-menu-item > a:hover {
    background-color: #e0e0e0;
}

/* Style the submenu (dropdown) */
.pll-parent-menu-item .sub-menu {
    display: none;
    position: absolute;
    right: -71px;
  top: 99%;
    background-color: #fff;
    
    
    padding: 10px; 
    z-index: 999;
    min-width: 130px;
    
}

/* Show submenu on hover */
.pll-parent-menu-item:hover .sub-menu {
    display: block;
}

/* Style each language item */
.pll-parent-menu-item .sub-menu li a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px; 
     font-size: 13px; 
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.pll-parent-menu-item .sub-menu li a:hover {
    background-color: #f0f0f0;
}

/* Optional: remove default list styles */
.pll-parent-menu-item,
.pll-parent-menu-item .sub-menu {
    list-style: none;
}
  .pll-parent-menu-item a{
    background-color: transparent !important;
  }
.hotel-title-mobile {
  display: none;
  text-align: center;
  padding: 30px 0;
  font-weight: bold;
  background: transparent;
}

.hotel-title-mobile p {
  margin: 0;
  font-size: 18px;
  display: none;
}

@media screen and (max-width: 768px) {

    .hotel-title-mobile p {
 margin: 0;
    font-size: 18px;
    display: block;
  
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  color: #333;
  }
  .hotel-title-mobile {
    display: block ;
    align-content: center;
position: absolute;
    top: 61px;
    left: 58px;
  
  }
}

/* the above header */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    color: #333;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 16px;
   /* border-bottom: 2px solid #eee; */
    flex-wrap: wrap;
}

.top-bar-left {
    
    min-width: 120px;
	display: flex;
  align-items: center;
}

.top-bar-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.top-bar-btn {
    background-color: #00a2c6;
    color: white !important;
    padding: 6px 14px;
    text-decoration: none;
    border-radius: 20px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    font-size: 15px;
}

.top-bar-btn:hover {
    background-color: #50a9fd;
}
.bandc{
    display: none;
}
.toph{
        display: block;
    }

@media (max-width: 768px) {
	.hero-main-title {
  font-size: 1.5rem;
	}
    .toph{
        display: none;
        background-color: aliceblue;
    }
    .logoinh{
        display: none;
    }
    .bandc{
    display: block;
}
    .top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 10px;
    }

    .top-bar-left,
    .top-bar-right {
        justify-content: space-between;
        width: 100%;
    }

    .top-bar-right {
        justify-content: flex-end;
    }

    .top-bar-btn {
     	padding:7px 20px;
        font-size: 14px;
    }

   

    /* effet of p */
   





/* polylang design */
/* Align the entire language switcher to the right */
.pll-parent-menu-item {
    float: right;
    margin-left: auto;
    /* margin-right: 20px; */
    position: relative;
}

/* Style the main language button */
.pll-parent-menu-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
     padding: 0px 0px; 
    
    background-color: #f5f5f5;
    transition: background 0.3s;
    font-size: 14px;
}

.pll-parent-menu-item > a:hover {
    background-color: #e0e0e0;
}

/* Style the submenu (dropdown) */
.pll-parent-menu-item .sub-menu {
    display: none;
    position: absolute;
    right: -43px;
  top: 130%;
    background-color: white;
    
    padding: 5px 0; 
    z-index: 999;
    min-width: 130px;
   
}

/* Show submenu on hover */
.pll-parent-menu-item:hover .sub-menu {
    display: block;
}

/* Style each language item */
.pll-parent-menu-item .sub-menu li a {
    display: flex;
    align-items: center;
    gap: 6px;
    /* padding: 6px 12px;  */
     font-size: 13px; 
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.pll-parent-menu-item .sub-menu li a:hover {
    background-color: #f0f0f0;
}

/* Optional: remove default list styles */
.pll-parent-menu-item,
.pll-parent-menu-item .sub-menu {
    list-style: none;
}
  .pll-parent-menu-item a{
    background-color: transparent !important;
  }
  .site-header.scrolled  a {
    color: #000000; /* Default for top-bar, overridden by .main-header-content a if needed */
    text-decoration: none;
  /*  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);  Add shadow for better readability */
}
.site-header.scrolled  span {
    color: #000000; /* Default for top-bar, overridden by .main-header-content a if needed */
    text-decoration: none;
  /*  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);  Add shadow for better readability */
}
}
 .hotel-title-mobile{
        display: none ;
    }

.contact-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 40px;
}

.contact-box {
  background-color: #fff;
  text-align: center;
  padding: 0;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-radius: 10px;
  position: relative;
}

.icon-circle {
  background-color: #455a64;
  color: white;
  font-size: 24px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
margin-top: 3px;
  position: inherit;
  top: -30px;
  left: 43%;
}

.contact-box h3 {
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.contact-box p {
  color: #555;
  font-size: 16px;
  line-height: 1.5;
}
.contact-box p a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.contact-box p a:hover {
  color: #ff4500; /* ou ta couleur secondaire */
  text-decoration: underline;
}
.room-image a{
    text-decoration: none;
}

/* same play  */
.room-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  font-size: 16px;
	padding-left: 16px;
}

.feature-item svg {
  flex-shrink: 0;
  stroke: #ff4500; /* Use your secondary theme color */
}

.feature-note {
  margin-top: 20px;
  font-style: italic;
  color: #666;
}
#top-bar .containerr {
    display: flex;
    justify-content: space-around;
  
}
.footer-column-2 ul{
    display: flex;
  flex-direction: column;
  align-items: center;
}
.about-image-column{
    max-width: 250px;
}
.about-text-column{

  padding: 1px;
  margin: 2px;
	
}
.meta-icon img{
	object-fit: cover;
 width: 2.5rem;
  height: 2.5rem;
}
.feature-icon img{
	object-fit: cover;
width: 100%;
  height: 100%;
	
}
.site-header.scrolled ul li.current-menu-item > a {
	border-bottom: 2px solid #fff;
}
.slider-container {
    width: 100%; /* Adjust as needed */
    overflow: hidden; /* Hides extra images */
    position: relative;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */
}

.slider img {
    width: 100%;
    flex-shrink: 0; /* Prevents images from shrinking */
    display: block;
}
/* add of booking page */