/* RESET */

:root {
  --primary: #8B0000;
  --primary-dark: #5a0000;

  --dark: #1a1a1a;
  --text-dark: #222;
  --text-light: #666;

  --white: #ffffff;
  --bg-light: #f8f8f8;
  --bg-soft: #F6EBEB;

  --border: #e5e5e5;
	
  --font-main: 'Poppins', sans-serif;

  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-small: 14px;

  --lh-tight: 1.3;
  --lh-normal: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: var(--font-main);
line-height: var(--lh-normal);
font-size: var(--fs-body);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.5px;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
}

p {
  line-height: 1.8;
  color: var(--text-light);
}

a{
  text-decoration:none;
  color:inherit;
}

/* text links */
p a{
  color:var(--primary);
  text-decoration:underline;
}

/* ONLY apply hover to normal text links */
p a:hover{
  color:var(--primary);
  text-decoration:underline;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

/* HEADER */

.header{
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(0,0,0,0.35);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
z-index:1000;
transition:0.3s;
}

.header.scrolled{
background:rgba(0,0,0,0.85);
}

.nav-container{
max-width:1200px;
margin:auto;
padding:0 20px;
display:flex;
align-items:center;
justify-content:space-between;
height:90px;
gap:20px;
}

.logo{
flex:1;
font-size:22px;
font-weight:600;
color:white;
}

/* MAIN MENU */

.nav-menu > ul{
display:flex;
gap:10px;
list-style:none;
}

.nav-menu ul li{
position:relative;
}

.nav-menu a{
text-decoration:none;
color:#fff;
font-size:15px;
}

/* DROPDOWN */

.dropdown-menu{
position:absolute;
top:120%;
left:0;

min-width:220px;
padding:10px 0;
border-radius:10px;

/* glass effect */
background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

box-shadow:0 10px 30px rgba(0,0,0,0.2);

opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:0.25s;
}

.dropdown-menu li{
display:block;
}

.dropdown-menu li a{
display:block;
padding:12px 22px;
color:#333;
transition:0.25s;
}

.dropdown-menu li a:hover{
background: var(--primary-dark);
color:white;
}

.nav-dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

/* MENU HOVER */

.nav-menu > ul > li > a{
position:relative;
padding:8px 10px;
transition:0.3s;
}

.header .nav-menu > ul > li > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:2px;
  background: #ff3b3b;
  transition:0.3s;
}

.header .nav-menu > ul > li > a:hover::after{
  width:100%;
}

/* BOOK NOW BUTTON */

.header-book-btn{
background: var(--primary);
color:white;
padding:10px 22px;
border-radius:6px;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:0.3s;
margin-left:20px;
}

.header-book-btn:hover{
background:var(--primary-dark);
transform:translateY(-2px);
box-shadow:0 6px 15px rgba(0,0,0,0.2);
}

/* MOBILE MENU BUTTON */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
color:#fff;
transition:0.3s;
}

.menu-toggle:hover{
color: var(--primary);
}

/* MOBILE MENU */

@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav-menu{
position:absolute;
top:90px;
left:0;
width:100%;

background:rgba(0,0,0,0.35);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

display:none;
}

.nav-menu.active{
display:block;
}

.nav-menu ul{
flex-direction:column;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.nav-menu a{
color:#fff;
display:block;
padding:15px 20px;
}

/* MOBILE DROPDOWN */

.dropdown-menu{
position:relative;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

border-radius:8px;
box-shadow:none;
opacity:1;
visibility:visible;
transform:none;
display:none;
}

.nav-dropdown.open .dropdown-menu{
display:block;
}

.dropdown-menu li a{
padding:12px 30px;
color:#ddd;
}

}

/* HERO */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* EACH SLIDE */
.hero-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
/* ACTIVE SLIDE */
.hero-slide.active {
  opacity: 1;
  z-index: 2;
}

/* IMAGE SETTINGS */
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 6s ease;
}

.hero-slide.active img {
  transform: scale(1.1);
}

/* OPTIONAL: DARK OVERLAY */
.hero::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.6)
  );
}

.hero-title,
.hero-subtitle,
.hero-trust {
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.hero-subtitle {
  color: rgba(255,255,255,0.9);
}

.hero-urgency {
  color: rgba(255,255,255,0.85);
}

.hero-content{
position:relative;
z-index:3;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
}

.hero-content h1{
font-size:30px;
font-weight: 500;
letter-spacing: 0.5px;
margin-bottom:10px;
}

/* HERO BUTTON CONTAINER */
.hero-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.hero-urgency {
  transition: opacity 0.4s ease;
}

/* PRIMARY BUTTON (MAIN CTA) */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

/* CLICK EFFECT */
.btn-primary:active {
  transform: scale(0.98);
}

/* SECONDARY BUTTON */
.btn-secondary {
  background: transparent;
  color: #fff;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 50px;
  border: 2px solid #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* HOVER SECONDARY */
.btn-secondary:hover {
  background: #fff;
  color: #333;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
	
.hero-subtitle{
    display:none;
  }
	
 .hero-content h1{
font-size:20px;
font-weight: 500;
letter-spacing: 0.5px;
margin-bottom:10px;
}

  .btn-primary,
  .btn-secondary {
    text-align: center;
    width: 100%;
  }
}

.btn-primary {
  animation:none;
}

@keyframes kenburns{
0%{transform:scale(1.1);}
100%{transform:scale(1.25);}
}

/* TRUST */

.trust-bar{
  background:#fff;
  border-bottom:1px solid #eee;
  padding:20px 0;
}

.trust-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#333;
}

.trust-icon svg {
  width:18px;
  height:18px;
  stroke: var(--primary);
}

.trust-icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(139,0,0,0.08);
  border-radius:50%;
}

@media(max-width:768px){

  .trust-bar{
    background:#f7f7f7;
    padding:18px 0;
  }

  .trust-container{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0 16px;
  }

  .trust-item{
    display:flex;
    align-items:center;
    gap:12px;

    background:#fff;
    padding:14px 16px;
    border-radius:999px; /* 🔥 pill shape */

    border:1px solid var(--border);
    box-shadow:0 3px 10px rgba(0,0,0,0.04);

    width:100%;
  }

  .trust-icon{
    width:36px;
    height:36px;
    min-width:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background: rgba(139,0,0,0.08);
  }

  .trust-icon svg{
    width:18px;
    height:18px;
    stroke: var(--primary);
  }

  .trust-item span{
    font-size:14px;
    font-weight:500;
    color: var(--text-dark);
  }
	
.trust-item:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

}

.btn-primary,
.header-book-btn,
.room-btn,
.parallax-btn,
.gallery-btn,
.mobile-book-btn {
  color: var(--white);
}

a, button {
  transition: all 0.3s ease;
}

/* DESCRIPTION */

.description{
padding:100px 30px;
background:#f9f9f9;
display:flex;
justify-content:center;
}

.description-box{
max-width:850px;
text-align:center;
}

.description h2{
font-size:36px;
margin-bottom:25px;
}

.description h2::after{
content:"";
width:60px;
height:3px;
background: var(--primary);
display:block;
margin:15px auto 0;
}

.desc-intro{
font-size:18px;
line-height:1.8;
margin-bottom:20px;
color:#555;
}

.description p{
font-size:16px;
line-height:1.8;
color:#666;
}

/* ROOMS */

.rooms{
padding:90px 0;
background:var(--bg-soft); /* your new background */
}

.rooms .container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.rooms-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
}

.rooms-header h2{
font-size:32px;
}

.room-arrows{
display:flex;
gap:10px;
}

.room-arrows button{
width:42px;
height:42px;
border:none;
background:#000;
color:#fff;
font-size:20px;
cursor:pointer;
border-radius:4px;
transition:.3s;
}

.room-arrows button:hover{
background: var(--primary);
}

.room-slider{
overflow:hidden;
}

.room-carousel{
display:flex;
gap:25px;
transition:transform .5s ease;
}

.room-card{
flex:0 0 calc(33.333% - 17px);
background:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.room-image{
overflow:hidden;
height:260px;
}

.room-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease;
}

.room-card:hover img{
transform:scale(1.1);
}

.room-info{
padding:20px;
text-align:center;
}

.room-info h3{
margin-bottom:10px;
font-size:20px;
}

.room-info p{
font-size:14px;
color:#666;
margin-bottom:15px;
}

.room-btn{
display:inline-block;
padding:10px 20px;
background: var(--primary);
color:#fff;
text-decoration:none;
border-radius:4px;
transition:.3s;
}

.room-btn-outline{
border: 2px solid black;
  color: black;
  padding: 10px 26px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}
.room-btn-outline:hover{ background:black; color:#FFF; }
.room-btn:hover{
background: var(--primary-dark);
}

.rooms-location {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-top: 5px;
  color: #777;
}

@media (max-width: 768px) {
  .rooms-location {
    display: none;
  }
}
@media(max-width:768px){

.room-card{
flex:0 0 100%;
}

.room-image{
height:220px;
}

.mobile-hide {
    display: none;
  }

}

/* PARALLAX SECTION */ 
.parallax{ background:url('../images/parallax.jpg') center/cover no-repeat; height:480px; position:relative; display:flex; align-items:center; justify-content:center; } 
.parallax-overlay{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; } 
.parallax-content{ max-width:800px; text-align:center; color:white; padding:20px; } 
/* QUOTE */ 
.parallax-quote{ font-size:36px; font-weight:600; margin-bottom:20px; line-height:1.4; } 
/* DESCRIPTION */ 
.parallax-text{ font-size:17px; line-height:1.8; margin-bottom:20px; color:#e6e6e6; } 
/* REVIEW */ 
.parallax-rating{ font-size:16px; margin-bottom:30px; color:#FFD700; } 
/* BUTTONS */ 
.parallax-buttons{ display:flex; gap:15px; justify-content:center; flex-wrap:wrap; } 
.parallax-btn{ background: var(--primary); color:white; padding:12px 28px; border-radius:6px; text-decoration:none; font-size:16px; transition:0.3s; } 
.parallax-btn:hover{ background:var(--primary-dark); transform:translateY(-3px); } 
.parallax-btn-outline{ border:2px solid white; color:white; padding:10px 26px; border-radius:6px; text-decoration:none; font-size:16px; transition:0.3s; } 
.parallax-btn-outline:hover{ background:white; color:#000; }

/* FACILITIES SECTION */

.facilities{
padding:80px 0;
background:#f8f8f8;
}

.facilities-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:50px;
}

/* Facility Card */

.facility{
background:#fff;
padding:30px 25px;
border-radius:12px;
text-align:left;
text-decoration:none;
color:#333;
position:relative;
transition:all 0.35s ease;
border:1px solid #eee;
}

.facility:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* Icon Circle */

.facility-icon{
width:60px;
height:60px;
border-radius:50%;
background:#f3f3f3;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
transition:0.3s;
}

.facility:hover .facility-icon{
background: var(--primary);
}

/* SVG icon */

.facility-icon svg{
width:28px;
height:28px;
stroke: var(--primary);
stroke-width:1.8;
fill:none;
transition:0.3s;
}

.facility:hover .facility-icon svg{
stroke:#fff;
}

/* Title */

.facility h3{
font-size:18px;
margin-bottom:10px;
font-weight:600;
}

/* Description */

.facility p{
font-size:14px;
color:#666;
line-height:1.5;
}

/* Arrow */

.facility-arrow{
position:absolute;
bottom:20px;
right:22px;
font-size:20px;
color:#bbb;
transition:0.3s;
}

.facility:hover .facility-arrow{
color: var(--primary);
transform:translateX(6px);
}

/* Tablet */

@media(max-width:992px){

.facilities-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* Mobile */

@media(max-width:600px){

.facilities-grid{
grid-template-columns:1fr;
}

}

/* GALLERY SECTION */
.gallery{
  padding:90px 20px;
  background:var(--bg-soft);
  text-align:center;
}

.gallery h2{
  font-size:32px;
  margin-bottom:40px;
}

/* GRID */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

/* ITEM */
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:8px;
}

/* IMAGE */
.gallery-item img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
  transition:0.4s;
}

/* HOVER ZOOM */
.gallery-item:hover img{
  transform:scale(1.08);
}

/* OVERLAY */
.gallery-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:0.3s;
}

.gallery-overlay span{
  color:#fff;
  font-size:14px;
  letter-spacing:1px;
}

.gallery-item:hover .gallery-overlay{
  opacity:1;
}

/* BUTTON */
.gallery-button{
  margin-top:40px;
}

.gallery-btn{
  display:inline-block;
  padding:12px 28px;
  background: var(--primary);
  color:white;
  text-decoration:none;
  border-radius:5px;
  font-size:15px;
  transition:0.3s;
}

.gallery-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

/* RESPONSIVE */
@media(max-width:768px){
  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .gallery-item img{
    height:180px;
  }
}

/* REVIEWS SECTION */ 
.reviews{ padding:80px 20px; background:#f9f9f9; text-align:center; } 
.reviews h2{ font-size:34px; margin-bottom:40px; } /* Google rating */ 
.google-rating{ margin-bottom:40px; } 
.rating-score{ font-size:28px; font-weight:bold; color: var(--primary); margin-bottom:5px; } 
.review-btn{ display:inline-block; margin-top:10px; padding:8px 18px; background: var(--primary); color:#fff; text-decoration:none; border-radius:4px; }
.review-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

/* slider */ 
.review-slider{ overflow:hidden; position:relative; } 
.review-track{ display:flex; width:100%; transition:transform 0.6s ease; } 
.review-card{ min-width:100%; } 
.review-card p{ font-size:17px; line-height:1.6; margin-bottom:15px; } 
.review-card h4{ font-weight:normal; color:#777; } /* tripadvisor */ 
.tripadvisor{ margin-top:40px; } 
.tripadvisor img{ width:120px; margin-bottom:10px;}

/* FOOTER */ /* ============================= */ 

/* Footer */ 
.footer{ background:#000; color:#ccc; padding:50px 20px 20px; font-size:14px; } 
.footer-container{ display:flex; flex-wrap:wrap; max-width:1200px; margin:auto; } 
/* Left column 50% */ 
.footer-col.contact{ flex:0 0 50%; } 
/* Other columns 25% */ 
.footer-col{ flex:0 0 25%; display:flex; flex-direction:column; } 
.footer h3{ color:#fff; margin-bottom:15px; font-size:16px; } 
.footer p{ margin:6px 0; color: rgba(255,255,255,0.75);} 
.footer a{ color:#ccc; text-decoration:none; margin:4px 0; } 
.footer a:hover{  color: #ff3b3b;;} 
.footer i{ color:#fff; margin-right:8px; } 
/* Social icons */ 
.footer-social a{ font-size:18px; margin-right:10px; color:#fff; } .footer-social a:hover{ color:orange; } 
/* Bottom copyright */ 
.footer-bottom{ text-align:center; margin-top:30px; border-top:1px solid #333; padding-top:15px; font-size:13px; } 

/* Mobile */ 
@media(max-width:768px){ 
.footer-col, .footer-col.contact{ flex:0 0 100%; margin-bottom:20px; } } 

/* RESPONSIVE */ 
@media(max-width:768px){ 
.nav-links { display: none; flex-direction: column; background: rgba(0,0,0,0.9); position: absolute; top: 60px; right: 0; width: 200px; padding: 10px 0; } 
.nav-links li { margin: 10px 0; } 
.hamburger { display: flex; } } 

/* MOBILE STICKY BOOKING BAR */ 
.mobile-booking-bar
{ position:fixed; bottom:0; left:0; width:100%; background:#000; color:#fff; display:none; align-items:center; justify-content:space-between; padding:12px 18px; z-index:9999; box-shadow:0 -3px 10px rgba(0,0,0,0.4); } /* price text */ 
.mobile-booking-info{ font-size:16px; font-weight:600; } 

/* button */ 
.mobile-book-btn{ background: var(--primary); color:white; text-decoration:none; padding:10px 20px; border-radius:6px; font-size:15px; transition:0.3s; } 
.mobile-book-btn:hover{ background: var(--primary-dark); } 

/* show only on mobile */ 
@media(max-width:768px){ 
.mobile-booking-bar{ display:flex; } } 

@media (max-width: 768px) {
 .header-book-btn{
    display:none;
  }
	
  .btn-secondary{
    display:none;
  }
	
  .hero-content {
    padding: 0 20px;
    gap:10px;
	text-align: center;
    align-items: center;
    justify-content: center;
  }

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

  .hero-subtitle {
    font-size: 13px;
  }

  .hero-trust {
    font-size: 14px;
  }
	
  .hero-urgency{
    font-size:12px;
    opacity:0.9;
  }
	
  .hero-buttons{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
    max-width:300px;
    padding:16px;
    font-size:15px;
  }

	.rooms-header h2 {
  font-size: 25px;
}
	

}

/* MOBILE TYPOGRAPHY SYSTEM */
@media (max-width: 768px) {

  h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  h3 {
    font-size: 18px;
    line-height: 1.4;
  }

  p {
    font-size: 15px;
    line-height: 1.7;
  }

}

@media(max-width:768px){

  .room-info{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .room-btn,
  .room-btn-outline{
    display:block;
    width:100%;
    text-align:center;
    padding:14px;
    font-size:15px;
  }

}

@media(max-width:768px){

.mobile-booking-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:12px;
  text-align:center;
}

.mobile-booking-info{
  font-size:14px;
}

.mobile-book-btn{
  width:100%;
  text-align:center;
  padding:14px;
  font-size:15px;
  margin-top: 5px;
}

}

.room-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:15px;
}

.room-actions a{
  width:100%;
  text-align:center;
  padding:14px;
  font-size:15px;
}

.room-btn-outline{
  white-space:nowrap;
}

/* CSS Document */