*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
html{scroll-behavior:smooth}
body{color:#333}

/* HEADER */
#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9999;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

header .wrap{
 max-width:1200px;margin:auto;
 display:flex;justify-content:space-between;align-items:center;
 padding:15px;
}
.logo{color:#f4b41a;font-size:24px;font-weight:700}
nav a{
 color:#fff;text-decoration:none;margin-left:20px;font-size:15px
}
nav a:hover{color:#f4b41a}

/* GENERAL */
section{padding:100px 15px}
.wrap{max-width:1200px;margin:auto}
h2{text-align:left;font-size:36px;margin-bottom:15px}
.sub{text-align:left;color:#777;margin-bottom:40px}

/* HERO */
#home{
 height:100vh;
 background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
 url("https://images.unsplash.com/photo-1566073771259-6a8506099945") center/cover;
 display:flex;align-items:center;color:#fff
}
.hero{
 max-width:650px
}
.hero h1{font-size:52px;margin-bottom:15px}
.hero p{font-size:18px;margin-bottom:30px}
.btn{
 background:#f4b41a;color:#000;
 padding:14px 30px;border-radius:4px;
 text-decoration:none;font-weight:600
}

/* ABOUT */
#about{background:#f9f9f9}
#about p{
 max-width:850px;margin:auto;
 text-align:left;font-size:17px
}

/* HOTELS */
.hotels{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:25px
}
.hotel-card{
 background:#fff;border-radius:6px;
 overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1)
}
.hotel-card img{
 width:100%;height:200px;object-fit:cover
}
.hotel-card .info{
 padding:20px;text-align:center
}
.hotel-card h3{margin-bottom:8px}
.hotel-card p{font-size:14px;color:#666}

/* GALLERY */
#gallery{background:#f9f9f9}
.gallery{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:15px
}
.gallery img{
 width:100%;height:220px;
 object-fit:cover;border-radius:6px;
 cursor:pointer;transition:.3s
}
.gallery img:hover{transform:scale(1.05)}

/* BOOKING */
#booking{
 background:#111;color:#fff
}
.booking-box{
 background:#fff;color:#000;
 padding:40px;border-radius:8px;
 box-shadow:0 10px 40px rgba(0,0,0,.3)
}
.booking-form{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:20px
}
.booking-form input,
.booking-form select{
 padding:14px;border:1px solid #ccc;border-radius:4px
}
.booking-form button{
 background:#f4b41a;border:none;
 padding:15px;font-weight:700;
 cursor:pointer;border-radius:4px
}

/* CONTACT */
#contact{text-align:center}
#contact p{margin:8px 0;font-size:16px}

/* FOOTER */
footer{
 background:#000;color:#fff;
 text-align:center;padding:15px;font-size:14px
}

/* MOBILE */
@media(max-width:768px){
 nav{display:none}
}

/* ABOUT SECTION */
#about {
  padding: 80px 0;
  background: #f8f8f8;
}

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Mobile fix */
@media (max-width: 768px) {
  .wrap {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* Flex Layout */
.about-flex {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* Content Side */
.about-content {
  flex: 1;
}

.about-content h2 {
  font-size: 30px;
  line-height: 1.3;
  margin-bottom: 10px;
  color: #2b2b2b;
}

.about-content h2 span {
  color: #b45f06;
  font-size:25px;
}

.about-content .sub {
  font-size: 16px;
  color: #777;
  margin-bottom: 20px;
  font-weight: 500;
}

.about-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 15px;
}

/* Image Side */
.about-image {
  flex: 1;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.about-image img {
  width: 100%;
  height: auto;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* Hover Effect */
.about-image:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Responsive */
@media (max-width: 900px) {
  .about-flex {
    flex-direction: column;
  }

  .about-content h2 {
    font-size: 28px;
  }
}

/* WHY CHOOSE US */
#why-choose {
  padding: 80px 0;
  background: linear-gradient(135deg, #fff8f0, #fdfdfd);
  text-align: center;
}

#why-choose h2 {
  font-size: 36px;
  color: #2b2b2b;
  margin-bottom: 10px;
}

.section-sub {
  color: #777;
  font-size: 16px;
  margin-bottom: 50px;
}

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

/* Card */
.choose-box {
  background: #fff;
  padding: 30px 25px;
  border-radius: 18px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  position: relative;
}

.choose-box span {
  font-size: 40px;
  display: block;
  margin-bottom: 15px;
}

.choose-box h4 {
  font-size: 20px;
  color: #b45f06;
  margin-bottom: 10px;
}

.choose-box p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Hover Effect */
.choose-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* Bottom Text + Button */
.choose-bottom {
  margin-top: 50px;
}

.choose-bottom p {
  font-size: 16px;
  color: #444;
  margin-bottom: 25px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.choose-btn {
  display: inline-block;
  padding: 14px 32px;
  background: #b45f06;
  color: #fff;
  font-size: 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.choose-btn:hover {
  background: #8f4a04;
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  #why-choose h2 {
    font-size: 28px;
  }
}
.choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Tablet */
@media (max-width: 1024px) {
  .choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .choose-grid {
    grid-template-columns: 1fr;
  }
}

 /* HOTEL GRID */
.hotel {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 25px;
 width: 100%;
}

/* CARD */
.hotel-card {
 position: relative;
 overflow: hidden;
 border-radius: 16px;
 box-shadow: 0 15px 30px rgba(0,0,0,0.15);
 background: #000;
}

.hotel-card img {
 width: 100%;
 height: 260px;
 object-fit: cover;
 display: block;
 transition: transform 0.5s ease;
}

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

/* BUTTON */
.book-btn {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 background: #b45f06;
 color: #fff;
 border: none;
 padding: 12px 26px;
 border-radius: 30px;
 cursor: pointer;
 font-size: 15px;
 transition: .3s;
 z-index: 2;
}

.book-btn:hover {
 background: #8f4a04;
}


@media (max-width: 992px) {
 .hotel {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 576px) {
 .hotel {
  grid-template-columns: 1fr;
 }
}


/* POPUP */
#bookingModal {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.7);
 z-index: 9999;
}

.modal-box {
 background: #fff;
 width: 420px;
 max-width: 90%;
 padding: 30px;
 margin: 80px auto;
 border-radius: 18px;
 position: relative;
}

.modal-box h3 {
 margin-bottom: 20px;
 color: #b45f06;
}

.modal-box input,
.modal-box button {
 width: 100%;
 padding: 12px;
 margin-bottom: 12px;
 border-radius: 8px;
 border: 1px solid #ddd;
}

.modal-box button {
 background: #b45f06;
 color: #fff;
 border: none;
 cursor: pointer;
}

.close {
 position: absolute;
 top: 12px;
 right: 16px;
 font-size: 24px;
 cursor: pointer;
}

    /* FOOTER */
footer{
    background:goldenrod;
    color:black;
    padding:60px 15px 20px;
}
.footer-wrap{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}
.footer-box h3{
    color:black;
    margin-bottom:15px;
}
.footer-box p,
.footer-box a{
    font-size:14px;
    color:black;
    text-decoration:none;
    line-height:1.8;
}
.footer-box a:hover{
    color:white;
}
.footer-bottom{
    text-align:center;
    margin-top:40px;
    border-top:1px solid #222;
    padding-top:15px;
    font-size:13px;
    color:#777;
}



.header-flex {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.logo {
 font-size: 18px;
 font-weight: 600;
 color: #b45f06;
}

/* NAV */
.nav-menu a {
 margin: 0 14px;
 color: #333;
 text-decoration: none;
 font-size: 15px;
}

.nav-menu a:hover {
 color: #b45f06;
}

/* BOOK NOW BUTTON */
.header-book-btn {
 margin-left: 20px;
 padding: 10px 22px;
 background: #b45f06;
 color: #fff;
 border: none;
 border-radius: 30px;
 cursor: pointer;
 font-size: 14px;
 transition: .3s;
}

.header-book-btn:hover {
 background: #8f4a04;
 transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 900px) {
 .header-flex {
  flex-direction: column;
 }
 .nav-menu {
  margin-top: 10px;
 }
}

/* HERO SLIDER */
#home{
 position:relative;
 height:100vh;
 overflow:hidden;
 color:#fff;
}

.slider{
 position:absolute;
 top:0;left:0;
 width:100%;height:100%;
}

.slide{
 position:absolute;
 width:100%;height:100%;
 background-size:cover;
 background-position:center;
 opacity:0;
 transition:opacity 1.5s ease-in-out;
}

.slide.active{
 opacity:1;
}

#home::after{
 content:"";
 position:absolute;
 inset:0;
 background:rgba(0, 0, 0, 0.238);
}

.hero{
 position:relative;
 z-index:2;
 max-width:650px;
}

.hero h1{font-size:52px;margin-bottom:15px}
.hero p{font-size:18px;margin-bottom:30px}

#feedbacks {
 padding: 80px 0;
 background: #f9f9f9;
 text-align: center;
}

#feedbacks h2 {
 font-size: 34px;
 color: #2b2b2b;
 margin-bottom: 10px;
}

#feedbacks .sub {
 color: #777;
 margin-bottom: 50px;
 font-size: 16px;
}

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

.feedback-card {
 background: #fff;
 padding: 30px 25px;
 border-radius: 18px;
 box-shadow: 0 15px 30px rgba(0,0,0,0.08);
 transition: transform .4s ease, box-shadow .4s ease;
}

.feedback-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 25px 45px rgba(0,0,0,0.15);
}

.feedback-card p {
 font-size: 15px;
 line-height: 1.7;
 color: #444;
 margin-bottom: 20px;
}

.feedback-card h4 {
 font-size: 18px;
 color: #b45f06;
 margin-bottom: 4px;
}

.feedback-card span {
 font-size: 14px;
 color: #777;
}

@media (max-width: 1024px) {
 .feedback-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 600px) {
 .feedback-grid {
  grid-template-columns: 1fr;
 }
}
/* HEADER BASE */
#siteHeader {
 position: fixed;
 top: 0;
 width: 100%;
 background: #fff;
 z-index: 9999;
 transition: all .3s ease;
 box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.header-flex {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 0;
 transition: padding .3s ease;
}

/* SHRINK ON SCROLL */
#siteHeader.shrink .header-flex {
 padding: 20px;
}

#siteHeader.shrink .logo {
 font-size: 16px;
}

/* LOGO */
.logo {
 font-size: 25px;
 font-weight: bold;
 color: #b45f06;
 transition: .3s;
}

/* NAV DESKTOP */
.nav-menu {
 display: flex;
 align-items: center;
}

.nav-menu a {
 margin: 0 14px;
 text-decoration: none;
 color: #333;
 font-size: 15px;
}

.nav-menu a:hover {
 color: #b45f06;
}

/* BOOK BUTTON */
.header-book-btn {
 margin-left: 18px;
 padding: 10px 22px;
 background: #b45f06;
 color: #fff;
 border: none;
 border-radius: 30px;
 cursor: pointer;
 transition: .3s;
}

.header-book-btn:hover {
 background: #8f4a04;
}

/* HAMBURGER */
.hamburger {
 display: none;
 flex-direction: column;
 cursor: pointer;
}

.hamburger span {
 width: 26px;
 height: 3px;
 background: #333;
 margin: 4px 0;
 transition: .3s;
}

/* MOBILE MENU */
@media (max-width: 900px) {
 .hamburger {
  display: flex;
 }

 .nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  flex-direction: column;
  display: none;
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
 }

 .nav-menu a {
  padding: 14px;
  width: 100%;
  border-bottom: 1px solid #eee;
 }

 .header-book-btn {
  margin: 15px;
 }

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

/* DESKTOP */
.hotels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* TABLET */
@media (max-width: 1024px) {
  .hotels {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE – 2 x 3 GRID */
@media (max-width: 600px) {
  .hotels {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .hotel-card img {
    height: 180px;
  }

  .book-btn {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* CORE FEATURES */
#core-features {
  padding: 80px 0;
  background: #fff;
}

.core-title {
  text-align: center;
  font-size: 42px;
  margin-bottom: 60px;
  color: #0b2a4a;
  font-weight: 700;
}

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

/* FEATURE ITEM */
.feature-item {
  display: flex;
  align-items: center;
  gap: 18px;
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-6px);
}

/* ICON BOX */
.icon-box {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #0b2a4a;
}

/* TEXT */
.feature-item h4 {
  font-size: 22px;
  line-height: 1.3;
  color: #000;
  font-weight: 600;
}

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

@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .core-title {
    font-size: 32px;
  }
}
#why-choose {
  padding: 80px 0;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.336), rgba(255,255,255,0.85)),
    url("images/g-5.avif") center / cover no-repeat;
}
.why-title {
  color: #fff !important;
  text-align: center;
  margin-bottom: 40px;
}

#gallery {
  position: relative;
  padding: 90px 0;
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url("images/g-3.avif") center / cover no-repeat;
}

#gallery h2,
#gallery .sub {
  color: #fff;
}

#gallery .sub {
  max-width: 900px;
}

/* Keep content above overlay */
#gallery .wrap {
  position: relative;
  z-index: 2;
}

/* Gallery images stay normal */
.gallery img {
  border-radius: 6px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}


.wrap.header-flex {
    max-width: 100%;
}







/* ================= MOBILE HEADER FIX ================= */
@media (max-width: 768px) {

 #siteHeader {
  height: auto;
 }

 .header-flex {
  padding: 10px 0;
  align-items: center;
 }

 .logo {
  font-size: 14px;
  line-height: 1.3;
  max-width: 80%;
  white-space: normal;
 }

 .hamburger {
  margin-left: auto;
 }

}





/* ================= HERO MOBILE HEIGHT FIX ================= */
@media (max-width: 768px) {

 #home {
  min-height: 65vh;
 }

 .slider {
  height: 65vh;
 }

 .slide {
  height: 65vh;
 }

 .hero {
  padding: 20px 15px;
 }

 .hero h1 {
  font-size: 22px;
  line-height: 1.25;
 }

 .hero p {
  font-size: 14px;
  margin: 8px 0 14px;
 }

 .hero .btn {
  font-size: 14px;
  padding: 10px 18px;
 }
}


@media (max-width: 768px) {
 #home {
  padding-top: 70px;
 }
}


@media (max-width: 768px) {
  .logo {
    margin-left: -25px;
  margin-bottom: -42px;
    font-size: 14px;
    line-height: 1.3;
    max-width: calc(100% - 50px);
    white-space: normal;
  }
}


@media (max-width: 768px) {
  section#home {
    height: 250px;
  }
}


.whatsapp-float{
 position: fixed;
 width: 55px;
 height: 55px;
 bottom: 220px;
 right: 20px;
 background: #25D366;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 20px rgba(0,0,0,0.3);
 z-index: 9999;
 transition: transform .3s;
}

.whatsapp-float:hover{
 transform: scale(1.1);
}

.whatsapp-float img{
 width: 30px;
 height: 30px;
}

img {
 max-width: 100%;
 height: auto;
}

/* ===============================
   BOOKING SECTION UI
================================ */

.booking-heading {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: Gold;
}

.booking-subtext {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 35px;
  font-size: 16px;
  color: #555;
}

.booking-card {
  max-width: 1000px;
  margin: auto;
  background: linear-gradient(135deg, #fff7f7, #ffffff);
  padding: 35px;
  border-radius: 18px;
  box-shadow: 0 15px 45px rgba(0,0,0,0.08);
}

/* FORM GRID */
.booking-form-ui {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.booking-field {
  display: flex;
  flex-direction: column;
}

.booking-field label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.booking-field input,
.booking-field select {
  padding: 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #d2d2d2;
  background: #fff;
  transition: 0.3s;
}

.booking-field input:focus,
.booking-field select:focus {
  outline: none;
  border-color: #b11c1c;
  box-shadow: 0 0 0 2px rgba(177,28,28,0.15);
}

/* BUTTON */
.booking-submit-btn {
  grid-column: span 3;
  padding: 16px;
  background: linear-gradient(135deg, #b11c1c, gold);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s;
}

.booking-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(177,28,28,0.35);
}

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

  .booking-submit-btn {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .booking-form-ui {
    grid-template-columns: 1fr;
  }

  .booking-submit-btn {
    grid-column: span 1;
  }

  .booking-heading {
    font-size: 26px;
  }
}