/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
#global-header-section .et-menu a,
#global-header-section .et-menu a:hover,
#global-header-section .et-menu li,
#global-header-section .et_pb_menu *,
#global-header-section * {
	transition-property: none !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
	animation: none !important;
}


/*****************************/
/****** New Booking Form *****/
/*****************************/

/* Desktop: all fields in one line */
.booking-new .booking-form-box-new {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  margin: 0 auto;
  max-width: 100%;
  box-sizing: border-box;
}
@media only screen and (min-width: 481px) {
  .booking-new .booking-form-box-new > div {
    flex: 0 0 auto;
  }
}

/* Controls (inputs, selects, button-link) */
.booking-new .form-control-new {
  font-size: 14px !important;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #fff;
  color: #fff !important;
  background: transparent !important;
  text-align: center;
  height: 42px;
  box-sizing: border-box;
  display: inline-block;
  width: auto;
}
.booking-new .form-control-new.wide { width: 150px; }
.booking-new .form-control-new.small { width: 80px; text-align-last: center; }

/* Labels */
.booking-new .label-new {
  color: #fff;
  font-size: 12px;
  text-align: center;
  margin-bottom: 5px;
}

/* “Book Now” as link */
#button-new.form-control-new {
  background: #a6263b !important;
  border: 2px solid #fff;
  border-radius: 5px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  color: white;
  line-height: 22px;
}
#button-new.form-control-new:hover {
  background-color: #a6263b;
}

/* Placeholder color */
.booking-new input::placeholder {
  color: #fff !important;
}

/* Child-ages (desktop inline) */
#child-ages-container-new {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}


/* Remove any desktop top-margins */
.promo-wrapper,
.button-wrapper,
#child-ages-container-new {
  margin-top: 0;
}

/* ============================= */
/* Mobile Layout (max-width:480px) */
/* ============================= */
@media only screen and (max-width: 480px) {
  .booking-new .booking-form-box-new {
    justify-content: space-between;
    gap: 10px;
	width: 95%;  
  }

  /* Row 1: Arrival + Departure (2 cols) */
  .booking-new .booking-form-box-new > div:nth-child(1),
  .booking-new .booking-form-box-new > div:nth-child(2) {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

  /* Row 2: Adults / Children / Rooms (3 cols) */
  .booking-new .booking-form-box-new > div:nth-child(3),
  .booking-new .booking-form-box-new > div:nth-child(4),
  .booking-new .booking-form-box-new > div:nth-child(5) {
    flex: 1 1 calc(33.333% - 10px);
    max-width: calc(33.333% - 10px);
  }

  /* Row 3: Ages of children (full width, centered) */
 

  /* Row 4: Promo + Book Now (2 cols, equal) */
  .promo-wrapper,
  .button-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    gap: 5px;
  }

  /* Stretch inputs/selects to full column width */
  .booking-new input.form-control-new,
  .booking-new select.form-control-new {
    width: 100% !important;
  }

  /* Let the link-button flex out to fill its column */
  .button-wrapper a.form-control-new {
    flex: 1 1 auto;
    width: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}



/* Mobile Menu for languages */
/* Keep language flags visible on mobile */
@media (max-width: 980px) {

  /* Show normal desktop menu */
  #lang-switch .et_pb_menu__menu {
    display: flex !important;
  }

  /* Hide burger menu */
  #lang-switch .et_mobile_nav_menu {
    display: none !important;
  }

  /* Keep flags aligned nicely */
  #lang-switch .et-menu {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Remove weird spacing */
  #lang-switch .et-menu li {
    padding: 0 !important;
  }

  /* Prevent full-width mobile behaviour */
  #lang-switch .et_pb_menu__wrap {
    justify-content: flex-end;
  }

  /* Optional: slightly larger flags on mobile */
  #lang-switch .et-menu img {
    width: 18px;
    height: auto;
    display: block;
  }
}
.lang-item img {
	width: 24px !important;
	height: 16px !important;
	min-width: 24px;
	display: block;
	object-fit: contain;
}
 /********************************************/
/******** MOBILE CANVAS MENU ****************/
/********************************************/

@media (max-width: 980px) {

  /********************************************/
  /******** HIDE DESKTOP MENU *****************/
  /********************************************/

  .mobile-canvas-menu .et_pb_menu__menu {
    display: none !important;
  }

  /********************************************/
  /******** SHOW MOBILE MENU ONLY *************/
  /********************************************/

  .mobile-canvas-menu .et_mobile_nav_menu {
    display: block !important;
    width: 100%;
  }

  /* HIDE BURGER ICON */

  .mobile-canvas-menu .mobile_menu_bar {
    display: none !important;
  }

  /********************************************/
  /******** FORCE MENU VISIBLE ****************/
  /********************************************/

  .mobile-canvas-menu .mobile_nav {
    display: block !important;
  }

  .mobile-canvas-menu .et_mobile_menu {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    background: transparent !important;

    border: none !important;
    border-top: none !important;

    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /********************************************/
  /******** MAIN MENU ITEMS *******************/
  /********************************************/

  .mobile-canvas-menu .et_mobile_menu li {

    width: 100%;
    padding: 0;
    margin: 0;

    position: relative;

    background: transparent !important;
  }

  .mobile-canvas-menu .et_mobile_menu li a {

    display: block;

    width: 100%;

    padding: 18px 0 !important;

    font-size: 22px;
    line-height: 1.4em;

    border-bottom: 1px solid rgba(0,0,0,0.06);

    background: transparent !important;
  }

  /********************************************/
  /******** SUBMENUS **************************/
  /********************************************/

  .mobile-canvas-menu .et_mobile_menu .sub-menu {

    width: 100% !important;
    max-width: 100% !important;

    left: 0 !important;

    padding-left: 20px !important;

    background: transparent !important;

    border: none !important;
    box-shadow: none !important;
  }

  .mobile-canvas-menu .et_mobile_menu .sub-menu li a {

    font-size: 16px;

    padding: 10px 0 !important;

    opacity: 0.82;

    border-bottom: none;
  }

  /********************************************/
  /******** ACCORDION LOGIC *******************/
  /********************************************/

  /* HIDE SUBMENUS BY DEFAULT */

  .mobile-canvas-menu .et_mobile_menu .menu-item-has-children .sub-menu {

    display: none !important;
    visibility: hidden !important;
  }

  /* SHOW WHEN OPEN */

  .mobile-canvas-menu .et_mobile_menu .menu-item-has-children .sub-menu.visible {

    display: block !important;
    visibility: visible !important;
  }

 /********************************************/
/******** MOBILE MENU TOGGLES ***************/
/********************************************/

/* POSITION TOGGLE */

.mobile-canvas-menu ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.mobile-canvas-menu ul.et_mobile_menu li.page_item_has_children .mobile-toggle {

    width: 44px;
    height: 100%;

    padding: 0 !important;

    max-height: 44px;

    border: none;

    position: absolute;

    right: 0;
    top: 0;

    z-index: 999;

    background: transparent;
}

/* REQUIRED FOR ABSOLUTE POSITIONING */

.mobile-canvas-menu ul.et_mobile_menu > li.menu-item-has-children,
.mobile-canvas-menu ul.et_mobile_menu > li.page_item_has_children {

    position: relative;
}

/* HIDE SUBMENUS */

.mobile-canvas-menu ul.et_mobile_menu .menu-item-has-children .sub-menu {

    display: none !important;
    visibility: hidden !important;
}

/* SHOW OPEN SUBMENUS */

.mobile-canvas-menu ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {

    display: block !important;
    visibility: visible !important;
}

/* TOGGLE ICON */

.mobile-canvas-menu ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {

    position: relative;
    top: 18px;

    font-family: "ETmodules";

    content: '\33';

    color: #df784d;

    font-size: 44px;
	margin-left: 40px;
}

/* OPEN STATE ICON */

.mobile-canvas-menu ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {

    content: '\32';
}
}	

 



/* Custom Divider for Headings */
/* The container is inline-block so it only grows as wide as the heading */
.my-heading-container {
  display: inline-block; 
  /* optional: If you want to center this block in its column or row, 
     ensure the parent container is text-align: center; */
}

/* Remove default margins from the heading if you like */
.my-heading-container h2 {
  margin: 0; 
}

/* Make hr match container’s (and hence the heading’s) width. */
.my-heading-container hr {
  width: 100%;
  margin: 0.5em 0; /* Adjust spacing above/below */
  border: none; /* Remove default hr styling */
  border-top: 2px solid #0072ce; /* A custom line style */
}

/* FAQ Adjustment for spacings */
	ul.tabs {
	padding: 0 !important;
}
/****************************************************/
/******Amenity Icons (Homepage and Rooms Pages)******/
/****************************************************/

/*Homepage Slider Room Amenities */

.homepage-icons {
    display: flex;
    flex-wrap: wrap;
	justify-content: flex-end; /* Align icons to the right */

}

.homepage-amenity-item {
    margin-right: 10px; /* Margin between icons */
}

.homepage-amenity-icon {
    font-size: 14px; /* Adjust icon size */
    color: #0072CE; /* Icon color */
}

/* Room Amenities on Rooms Page */
.amenities-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Display 5 icons inline on larger screens */
    gap: 15px; /* Adjust spacing between items */
    row-gap: 20px; /* Adjust spacing between rows */
}

.amenity-item {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px; /* Adjust spacing between icon and word */
}

.amenity-icon {
    font-size: 28px; /* Adjust icon size */
    color: #0072CE;
    width: 25px;
}

.amenity-label {
    font-size: 15px; /* Adjust label size */
    color: #424242;
}
/* Room Details for Rooms Page */
.room-details {
    display: flex;
    
    gap: 20px; /* Adjust spacing between cards */
    justify-content: flex-start; /* Align the cards to the left */
}
@media (min-width: 980px) and (max-width: 1350px)  {
.amenities-in-room  {
	margin-left: 20px;
	margin-right: 20px;
}
}
.room-detail-card {
    width: 200px; /* Width of each card */
    background-color: #f0f0f0; /* Grey background color */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding inside the card */
    text-align: center; /* Center text and icon horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better aesthetics */
}

.room-detail-icon {
    font-size: 30px; /* Adjust icon size */
    color: #0072CE; /* Icon color */
    margin-bottom: 10px; /* Space between the icon and the divider */
}

.room-detail-divider {
    width: 50%;
    border: 1px solid #ddd; /* Divider color and thickness */
    margin-bottom: 10px; /* Space between the divider and the text */
}

.room-detail-text {
    font-size: 18px; /* Adjust text size */
    color: #424242; /* Text color */
}

.room-detail-text sup {
    font-size: 12px; /* Make the superscript smaller */
}
/* Adjust font size for smaller screens */
@media (max-width: 1170px) {
    .amenity-label {
        font-size: 17px;
    }
}

/* Adjust grid layout for smaller screens */
@media (max-width: 880px) {
    .amenities-icons {
        grid-template-columns: repeat(3, 1fr); /* Display 3 icons inline on screens smaller than 880px */
    }
}

/* Adjust grid layout for very small screens */
@media (max-width: 670px) {
    .amenities-icons {
        grid-template-columns: repeat(2, 1fr); /* Display 2 icons inline on screens smaller than 670px */
    }
}
/* Specific styling for fa-layers to match other icons */




/* Media query for screens smaller than 520px */
@media (max-width: 520px) {
    .room-detail-card {
    width: 160px; /* Width of each card */
    background-color: #f0f0f0; /* Grey background color */
    border-radius: 10px; /* Rounded corners */
    padding: 15px; /* Padding inside the card */
    text-align: center; /* Center text and icon horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better aesthetics */
}
	
	.room-details {
        gap: 20px; /* Adjust gap for smaller screens */
    }
    
    .room-detail-card {
        flex: 1 1 45%; /* Adjust to allow two cards per row */
        max-width: 45%; /* Max width to ensure two cards per row */
    }

    .room-detail-icon {
        font-size: 24px; /* Adjust icon size for smaller screens */
    }

    .room-detail-text {
        font-size: 16px; /* Adjust text size for smaller screens */
    }
}