.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Inter", Sans-serif;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-family:"Playfair Display", Sans-serif;}.elementor-kit-7 h2{font-family:"Playfair Display", Sans-serif;}.elementor-kit-7 h3{font-family:"Playfair Display", Sans-serif;}.elementor-kit-7 h4{font-family:"Playfair Display", Sans-serif;}.elementor-kit-7 h5{font-family:"Playfair Display", Sans-serif;}.elementor-kit-7 h6{font-family:"Playfair Display", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 1. Smooth Transition for the Container */
.elementor-kit-7 {
    transition: all 0.4s ease;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Very subtle line initially */
}

/* 2. The "Active" Sticky State (When Scrolling) */
.elementor-kit-7.elementor-sticky--effects {
    background-color: #ffffff !important;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.1); /* Adds luxury shadow */
    padding-top: 5px !important;   /* Shrinks vertical space */
    padding-bottom: 5px !important; /* Shrinks vertical space */
}

/* 3. Force Full Logo Visibility & Scaling */

/* Target the image specifically inside the sticky header */
.elementor-kit-7.elementor-sticky--effects .elementor-widget-image img,
.elementor-kit-7.elementor-sticky--effects .logo-primary img {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Scale the logo down so it fits the smaller 5px padding header */
    max-height: 60px !important; 
    width: auto !important;
    
    /* profound transition to match the header shrink speed */
    transition: max-height 0.4s ease;
}

/* Optional: Smooth fade definition */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bre-room-hero .elementor-background-overlay{
  filter: saturate(1.05);
}
.bre-room-hero__text{
  max-width: 640px;
}
.bre-room-hero__text h1{
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* Booking Card polish */
.bre-booking-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  background: #fff;
}

/* Make button feel premium without shouting */
.bre-booking-card .elementor-button{
  width: 100%;
  border-radius: 14px;
  padding: 14px 16px;
}

/* Sticky behavior (only if you choose CSS sticky approach) */
@media (min-width: 1025px){
  .bre-sticky-card{
    position: sticky;
    top: 96px; /* adjust if header height differs */
  }
}

/* On mobile, avoid “sidebar feel” */
@media (max-width: 767px){
  .room-right{
    margin-top: 16px;
  }
  .bre-booking-card{
    border-radius: 18px;
  }
}
/* Packages section spacing */
.bre-packages-section {
  position: relative;
}

/* Dolphin: subtle + tucked into the corner */
.bre-packages-dolphin {
  opacity: 0.14;
  max-width: 260px;
}

/* Card hover polish */
.bre-package-card {
  transition: transform 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}
.bre-package-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

/* Make the whole card feel clickable (title link fills the intent) */
.bre-package-card a {
  text-decoration: none;
}
/* Container to handle alignment */
.booking-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Matches typical clean fonts */
}

.booking-form {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
    gap: 15px;
    align-items: flex-end; /* Aligns button with input boxes */
}

/* Individual Field Groups */
.form-group {
    flex: 1; /* Distribute space evenly */
    min-width: 150px;
}

/* Specific widths to match the "Guests" and "Promo" visual balance if needed */
.guests-field {
    flex: 0 0 100px; /* Keeps guests field smaller */
}

/* Label Styling */
.form-group label {
    display: block;
    color: #ffffff; /* White text per your image */
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 500;
    text-shadow: 0px 1px 3px rgba(0,0,0,0.5); /* Adds readability over images */
}

/* Input Styling */
.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    background-color: #ffffff;
    color: #333;
    font-size: 15px;
    box-sizing: border-box; /* Ensures padding doesn't break layout */
    border-radius: 2px; /* Slight edge softening */
    height: 45px;
}

/* Button Styling */
.submit-group {
    flex: 0 0 auto; /* Button doesn't stretch */
}

.booking-form button {
    background-color: #526F8B; /* The slate blue color from your image */
    color: white;
    border: none;
    padding: 0 35px; /* Wide padding like the image */
    height: 45px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 25px; /* Pill shape */
    transition: background-color 0.3s ease;
}

.booking-form button:hover {
    background-color: #3E546A; /* Darker shade on hover */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .booking-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .guests-field, .submit-group {
        flex: auto;
    }
    
    .booking-form button {
        width: 100%;
    }
}
/* --- Mobile & Tablet Adjustments --- */
@media (max-width: 991px) {
    
    /* Create a visible 'card' for the form */
    .booking-container {
        background-color: #f8f9fa; /* Light grey background */
        padding: 25px 20px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Soft shadow for depth */
        margin: 20px auto;
        width: 90%; /* Leaves some breathing room on sides */
    }

    /* Stack fields vertically */
    .booking-form {
        flex-direction: column;
        gap: 15px;
    }

    .form-group, 
    .guests-field, 
    .submit-group {
        width: 100%; /* Force full width */
        flex: none;
        min-width: 0;
    }

    /* Fix Label Visibility - Change from White to Dark Grey */
    .form-group label {
        color: #2c3e50 !important; /* Dark blue-grey for readability */
        text-shadow: none; /* Remove the shadow meant for photos */
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Improve Input Visibility */
    .form-group input {
        border: 1px solid #cbd5e0; /* distinct grey border */
        background-color: #ffffff;
        height: 50px; /* Taller is better for touch screens */
        font-size: 16px; /* Prevents iPhone from auto-zooming on tap */
        border-radius: 6px;
    }

    /* Make the button pop */
    .booking-form button {
        width: 100%;
        margin-top: 10px;
        height: 55px;
        font-size: 18px;
        font-weight: bold;
        box-shadow: 0 4px 6px rgba(82, 111, 139, 0.3);
    }
}/* End custom CSS */