body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  transition: background 0.3s, color 0.3s;
}

html {
  scroll-behavior: smooth;
}




/* NAVBAR */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8%;
  background: #f0eeee32;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);

  position: relative;
  z-index: 1000; /* ✅ ek hi rakho */
  gap: 20px;
    flex-wrap: nowrap;
}

/* LOGO */
.logo img {
  height: 130px; /* 👈 thoda balanced */
  width: auto;
  object-fit: contain;
   transition: 0.3s ease;
}

/* LINKS */
.nav-links {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto; /* 👈 ye important hai */
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.nav-links a:hover {
  color: #ff6600;
}
.nav-links a.active {
  color: #ff6600;
  font-weight: 600;
}
/* Dark/light theme toggle */

/* ================= THEME BUTTON ================= */
.theme-toggle {
  margin-left: 15px;
  padding: 8px 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #222;
  color: #fff;
  font-size: 16px;
}

/* ================= DARK MODE BASE ================= */
body.dark-mode {
  background: #121212;
  color: #ffffff;
}

/* ================= NAVBAR ================= */
body.dark-mode .nav {
  background: #1e1e1e;
}
/* DARK MODE NAV LINKS */
body.dark-mode .nav-links a {
  color: #ddd; /* light text */
}

/* HOVER */
body.dark-mode .nav-links a:hover {
  color: #ff6600;
}

/* ACTIVE LINK */
body.dark-mode .nav-links a.active {
  color: #ff6600;
  font-weight: 600;
}
body.dark-mode .nav-links a {
  color: #fff;
}

body.dark-mode .nav-links a:hover {
  color: #ff6600;
}

body.dark-mode .btn-enquire {
  background: #ff6600;
}

body.dark-mode .theme-toggle {
  background: #fff;
  color: #000;
}
/* DARK MODE - FEATURE BUTTONS */
body.dark-mode .room-features span {
  background: #2a2a2a; /* 👈 dark bg */
  color: #fff;         /* 👈 text visible */
  border: 1px solid #444;
}
/* price span color */
body.dark-mode .price span{
  color: white !important;
}
body.dark-mode .btn-outline-dark {
  color: black;
  border: 1px solid #888;
}

body.dark-mode .btn-outline-dark:hover {
  background: #245446; /* tumhara theme color */
  border-color: #245446;
  color: #fff;
}
/* Hover effect */
body.dark-mode .room-features span:hover {
  background: #245446; /* same theme color */
  color: #fff;
}
/* ================= SECTIONS ================= */
body.dark-mode section {
  background: #121212; /* 👈 transparent hata diya */
}

/* ================= CARDS ================= */
body.dark-mode .card,
body.dark-mode .custom-card,
body.dark-mode .service-card,
body.dark-mode .testimonial-box,
body.dark-mode .room-card,
body.dark-mode .why-card {
  background: #1e1e1e;
  color: #fff;
  border-color: #333;
}

/* ================= TEXT ================= */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode li {
  color: #ffffff;
}

/* Muted text */
body.dark-mode .text-muted {
  color: #bbbbbb !important;
}

/* ================= LINKS ================= */
body.dark-mode a {
  color: #ffffff;
}

/* ================= INPUT ================= */
body.dark-mode input,
body.dark-mode textarea {
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
}

/* ================= BUTTON ================= */
body.dark-mode .btn-secondary {
  background: #444;
  color: #fff;
}

/* ================= FOOTER ================= */
body.dark-mode .footer {
  background: #1e1e1e;
  color: #fff;
}

body.dark-mode .footer p,
body.dark-mode .footer li {
  color: #ccc;
}

body.dark-mode .footer .social a {
  color: #fff;
}

body.dark-mode .footer .social a:hover {
  color: #ff6600;
}

/* ================= WHATSAPP ICON ================= */
body.dark-mode .whatsapp-btn img {
  filter: brightness(1.2);
}
/* End Dark/light theme */

/* Available rooms page Dark/light theme */
body.dark-mode .section-badge {
  background: #1e1e1e;
  color: white;
}

body.dark-mode .main-heading {
  color: #fff;
}

body.dark-mode .section-subtext {
  color: #aaa;
}

/* FILTER BOX DARK MODE */
body.dark-mode .filter-box {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
}

/* INPUT */
body.dark-mode .form-control {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

body.dark-mode .form-control::placeholder {
  color: #aaa;
}

/* SELECT */
body.dark-mode .form-select {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

/* REMOVE DEFAULT ARROW */
body.dark-mode .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;

  /* CUSTOM WHITE ARROW */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='M7.247 11.14 2.451 5.658c-.566-.65-.106-1.658.753-1.658h9.592c.86 0 1.32 1.008.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* BUTTON */
body.dark-mode .btn-orange {
  background: #ff6600;
  color: #fff;
  border: none;
}

body.dark-mode .btn-orange:hover {
  background: #e65c00;
}

/* CONTACT BOX */
body.dark-mode .contact-box {
  background: #1e1e1e;
  color: #fff;
  border-radius: 12px;
  border: 1px solid #333;
}

body.dark-mode .contact-box p {
  color: #bbb;
}

/* MAP BOX (optional styling) */
body.dark-mode .map-box iframe {
  filter: grayscale(1) invert(0.9); /* 👈 dark feel map */
}

/* LOCATION BOX */
body.dark-mode .location-box {
  background: #1e1e1e;
  color: #fff;
  border-radius: 12px;
  border: 1px solid #333;
}

body.dark-mode .location-box p {
  color: #bbb;
}

/* ICON */
body.dark-mode .location-box i {
  color: #ff6600;
}
/* contact page dark thenme */
/* INFO CARD DARK MODE */
body.dark-mode .info-card {
  background: #1e1e1e;
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #333;
  transition: 0.3s;
}

/* TEXT */
body.dark-mode .info-card p {
  color: #bbb;
}

/* ICON */
body.dark-mode .info-card i {
  color: #ff6600;
  font-size: 20px;
  margin-bottom: 10px;
}

/* HOVER EFFECT */
body.dark-mode .info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
/* FORM BOX */
body.dark-mode .form-box {
  background: #1e1e1e;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #333;
}

/* HEADING */
body.dark-mode .form-box h5 {
  color: #fff;
}

/* INPUT + TEXTAREA */
body.dark-mode .form-control {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

/* PLACEHOLDER */
body.dark-mode .form-control::placeholder {
  color: #aaa;
}

/* SELECT */
body.dark-mode select.form-control {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

/* BUTTON */
body.dark-mode .btn-green {
  background: #245446;
  color: #fff;
  border: none;
}

body.dark-mode .btn-green:hover {
  background: #000;
}
/* BUTTON */
.btn-enquire {
  padding: 10px 18px;
  border-radius: 25px;
  border: none;

  background: #ff6600;
  color: #fff;
  cursor: pointer;
}

.btn-enquire:hover {
    background: #000;
}

/* MENU ICON */
.menu-icon{
    display:none;
    font-size:28px;
    cursor:pointer;
}

.mobile-btn {
  display: none;
}

/* ================= DARK MODE FIX ================= */

body.dark-mode .feature-slider{
  background:#121212;
}

body.dark-mode .feature-card{
  background:#1e1e1e;
  color:#fff;
  box-shadow: 0 5px 15px rgba(255,255,255,0.05);
}

body.dark-mode .feature-card h4{
  color:#ffffff;
}

body.dark-mode .feature-card p{
  color:#cccccc;
}

/* OPTIONAL: hover effect */
body.dark-mode .feature-card:hover{
  transform: translateY(-5px);
}


/* ================= TESTIMONIAL DARK MODE ================= */

body.dark-mode .testimonials{
  background:#121212;
  color:#fff;
}

body.dark-mode .testimonials h2{
  color:#fff;
}

body.dark-mode .testimonials .text-muted{
  color:#aaa !important;
}

/* CARD */
body.dark-mode .testimonial-card{
  background:#1e1e1e;
  color:#fff;
  border-radius:12px;
  box-shadow: 0 5px 15px rgba(255,255,255,0.05);
}

/* ACTIVE CARD (center wala highlight) */
body.dark-mode .testimonial-card.active{
  background:#2a2a2a;
  transform: scale(1.05);
}

/* TEXT */
body.dark-mode .testimonial-card p{
  color:#ccc;
}

/* NAME */
body.dark-mode .testimonial-card h6{
  color:#fff;
}

/* AVATAR */
body.dark-mode .avatar{
  background:#2ecc71;
  color:#fff;
}

/* ================= MOBILE ================= */


@media (max-width: 1130px) {

  .menu-icon {
    display: block;
  }

  .desktop-btn {
    display: none;
  }

  .nav-links {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    display: none;
    padding: 20px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  }

  .nav-links.active {
    display: flex;
  }

  .mobile-btn {
    display: block;
    margin-top: 10px;
  }
}


.footer {
  background: linear-gradient(135deg, #006B3C, #1c5c47);
  color: #fff;
  padding: 60px 0 20px;
}

.footer-logo img {
  height: 130px;
  margin-bottom: 15px;
}

.footer p {
  font-size: 14px;
  color: #cfd8dc;
  margin-bottom: 5px;
}

.footer h5 {
  margin-bottom: 20px;
  font-weight: 600;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer ul li {
  margin-bottom: 10px;

}

.footer ul li a {
  color: #cfd8dc;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.footer ul li a:hover {
  color: #fff;
}

/* SOCIAL ICONS */
.social {
  margin-top: 20px;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background:white;
  border-radius: 50%;
  margin-right: 10px;
  color:  rgba(255,255,255,0.1);
  transition: 0.3s;
}

.social a:hover {
  background: #2ecc71;
}

/* CONTACT ICON */
.footer i {
  margin-right: 8px;
}

/* SUBSCRIBE BOX */
.subscribe-box {
  display: flex;
  margin-top: 15px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
}

.subscribe-box input {
  flex: 1;
  border: none;
  padding: 10px;
  background: transparent;
  color: #fff;
  outline: none;
}

.subscribe-box input::placeholder {
  color: #ccc;
}

.subscribe-box button {
  background: #2ecc71;
  border: none;
  padding: 10px 15px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.subscribe-box button:hover {
  background: #27ae60;
}

/* FOOTER BOTTOM */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  font-size: 13px;
  color: #aaa;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 15px;
}

.whatsapp-btn{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.whatsapp-btn img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  transition: 0.3s;
}

.whatsapp-btn img:hover{
  transform: scale(1.1);
}
.whatsapp-btn::after{
  content:"";
  position:absolute;
  width:60px;
  height:60px;
  border-radius:50%;
  background:rgba(37,211,102,0.4);
  top:0;
  left:0;
  animation:pulse 2s infinite;
  z-index:-1;
}

@keyframes pulse{
  0%{
    transform:scale(1);
    opacity:1;
  }
  100%{
    transform:scale(1.8);
    opacity:0;
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .foot-part {
    text-align: center;
  }

  .social {
    justify-content: center;
  }

  .subscribe-box {
    flex-direction: column;
  }

  .subscribe-box button {
    width: 100%;
  }
  .footer h5 {
    margin-top:20px;
  }
}



