.font-Montserrat {
font-family: "Montserrat", serif;
}
.font-prata {
font-family: "prata", serif;
}
.w-700{
  max-width:700px;
}
.w-800{
  max-width:800px;
}
.w-1000{
  max-width:1000px;
}
.w-1200{
  max-width:1200px;
}
.navbar-custom {
background-color: transparent;
transition: background-color 0.3s ease;
/* backdrop-filter: blur(6px); */
color: #fff;
z-index: 1030;
}
.navbar-custom.scrolled {
  background-color: rgba(0, 0, 0, 0.7); /* or any color you like */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
color: #fff;
font-family: "Montserrat", serif;
}
.navbar-custom .nav-link:hover {
color: #ddd;
}
.navbar-brand .highlight {
color: #d32f2f;
}

.hero {
height: 70vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.hero-content {
position: relative;
color: white;
text-align: center;
z-index: 1;
}
.navbar-toggler {
border-color: rgba(255, 255, 255, 0.6);
}
.navbar-toggler-icon {
filter: invert(1);
}
.desktop-booking {
flex-wrap: nowrap;
gap: 0.5rem;
border: 1px solid white;
padding: 0.5rem;
border-radius: 5px;
}
.desktop-booking input,
.desktop-booking select {
background: transparent;
color: white;
border: 1px solid #fff;
}
.desktop-booking input:focus,
.desktop-booking select:focus {
background: transparent;
color: white;
border-color: #fff;
outline: none;
}
.desktop-booking select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
color: white;
border: 1px solid #fff;
padding-right: 2rem; /* leave space for your custom icon */
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1rem;
}
.desktop-booking select:focus {
background: transparent;
color: white;
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1rem;
}
.desktop-booking select option {
background-color: white;
color: black;
}
.desktop-booking button {
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.desktop-booking {
width: 100%;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.desktop-booking input,
.desktop-booking select,
.desktop-booking button {
flex: 1 1 100%;
margin-bottom: 0.5rem;
}
.desktop-booking button {
margin-bottom: 0;
}
}
@media (max-width: 991.98px) {
.desktop-links {
display: none !important;
}
.desktop-booking {
display: none !important;
}
.mobile-toggler {
display: flex !important;
}
}
@media (min-width: 992px) {
.mobile-toggler {
display: none !important;
}
#mobileNavbar {
display: none !important;
}
}
#mobileNavbar input,
#mobileNavbar select {
background: transparent;
color: white;
border: 1px solid #fff;
}
#mobileNavbar select:focus {
color: #000 !important;
}
#mobileNavbar .mobile-booking {
border: 1px solid white;
padding: 0.5rem;
border-radius: 5px;
margin-top: 1rem;
}
#mobileNavbar {
width: 70%;
margin: 0 auto;
text-align: center;
}
#mobileNavbar .navbar-nav {
align-items: center;
}
#mobileNavbar .nav-item {
width: 100%;
}
#mobileNavbar .nav-link {
display: inline-block;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}

/* Discreet Luxury & Modern Comfort */
.highlight-red {
color: #d32f2f; /* similar to red in your image */
}
.divider {
width: 50px;
height: 2px;
background-color: #d32f2f;
margin: 1rem auto;
}

/* Our Suites */
.suites-section {
position: relative;
}
.red-border {
position: absolute;
top: 0;
left: 70px;
width: 90%;
height: 90%;
border: 1px solid #d32f2f;
z-index: 1;
}
.suite-card {
position: relative;
overflow: hidden;
border: 3px solid white;
z-index: 2;
}
.suite-card img {
width: 100%;
height: auto;
display: block;
}
.suite-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.35);
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
}
.suite-title {
font-size: 1.2rem;
font-family: "prata", serif;
}
.suite-type {
font-size: 0.9rem;
font-family: "prata", serif;
}
.book-now {
align-self: end;
font-size: 0.8rem;
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-family: "Montserrat", serif;
}
@media (max-width: 767.98px) {
.suites-section {
padding: 1rem 0;
}
.red-border {
position: static;
width: 100%;
height: auto;
margin-bottom: 1rem;
border: 1px solid #d32f2f;
}
.suite-card {
margin-bottom: 1rem;
height: auto !important;
}
.suite-card img {
height: auto;
object-fit: cover;
}
.suite-overlay {
padding: 0.75rem;
}
.suite-title {
font-size: 1rem;
}
.suite-type {
font-size: 0.8rem;
}
.book-now {
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
}
}

/* Book Now CTA */
#iconh-booknow {
background: url("../../assets/img/banners/hero-banner1.webp") top fixed;
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding: 100px 0;
color: #fff;
}
#iconh-booknow .sep-background-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.iconh-booknow .container {
position: relative;
z-index: 2;
text-align: left;
max-width: calc(100% - 15%);
}
.iconh-booknow h4 {
font-weight: 700;
color: #fff;
font-family: "prata", serif;
text-transform: uppercase;
}
.iconh-booknow span {
display: block;
font-family: "Montserrat", serif;
}
.iconh-booknow .btn {
color: var(--orange-color, #fff);
border: 1.5px solid var(--orange-color, #fff);
background: var(--background-color, transparent);
border-radius: 20px;
padding: 10px 40px;
font-family: "Montserrat", serif;
font-weight: 600;
transition: all 0.3s ease;
}
.iconh-booknow .btn:hover {
background: var(--orange-color, #000);
border: 1.5px solid var(--orange-color, #000);
color: #fff;
}

/* Our Amenities */
.feature-icon {
text-align: center;
margin-bottom: 1.5rem;
font-family: "Montserrat", serif;
transition: transform 0.3s ease;
}
.feature-icon:hover {
transform: scale(1.1);
}
.image-wrapper {
position: relative;
display: inline-block;
max-width: 100%;
}
.image-red-border {
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid #d32f2f;
z-index: 1;
}
.image-inner {
position: relative;
z-index: 2;
border: 3px solid white;
}
.image-inner img {
width: 100%;
height: auto;
display: block;
}