* { margin: 0; padding: 0; box-sizing: border-box;}
.main-title { font-size: 34px; margin: 10px 0;  font-weight: 600; }
@media(max-width: 768px) { .main-title { font-size: 24px; }}
body { font-family: 'Poppins', sans-serif; line-height: 1.6; }
.top-bar { background: #111; color: #fff; padding: 8px 30px; display: flex; justify-content: space-between; font-size: 14px; }

/* ==========================PREMIUM NAVBAR========================== */
.navbar {
    position: sticky;top: 0;z-index: 9999;display: flex;justify-content: space-between;align-items: center;padding: 10px 5%;background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.08);box-shadow: 0 4px 20px rgba(0,0,0,0.05);}
/* ========================== LOGO STYLING ========================== */
.logo a { display: flex; align-items: center; text-decoration: none; }
.logo-img {  height: auto; max-width: 170px; object-fit: contain; }
.mobile-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px;margin-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,0.1);}
.mobile-logo-img { height: 40px;  width: auto;object-fit: contain; }
.mobile-top span { font-size: 24px;cursor: pointer;  color: #333; }
/* Desktop Menu */
.nav-links { display: flex; gap: 40px;}
.nav-links a { text-decoration: none; color: #333;  font-size: 18px;  font-weight: 500;  position: relative; transition: .3s;}
.nav-links a:hover { color: #d88a00; }
.nav-links a::after { content: "";position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: #d88a00; transition: .3s; }
.nav-links a:hover::after { width: 100%; }
.header-right { display: flex; align-items: center; gap: 20px; }
.hd-book-btn { background: linear-gradient( 135deg,#d88a00, #f8b133 ); color: white;text-decoration: none;padding: 12px 28px;
    border-radius: 50px;font-size: 15px;font-weight: 600; transition: .3s; }
.hd-book-btn:hover {transform: translateY(-2px);}
.menu-toggle { display: none; border: none;background: transparent; font-size: 34px;cursor: pointer; color: #222;}

/* ========================== MOBILE MENU========================== */

.mobile-menu { position: fixed;top: 0;right: -100%;width: 300px;max-width: 90%;height: 100vh; background: white;
    padding: 25px;z-index: 10000; transition: .4s ease;box-shadow: -5px 0 30px rgba(0,0,0,.15);}
.mobile-menu.active {right: 0; }
.mobile-top { display: flex;  justify-content: space-between; align-items: center;  margin-bottom: 40px; }
.mobile-top h3 { margin: 0; font-size: 28px; color: #222;}
.mobile-top span { cursor: pointer;  font-size: 28px; }
.mobile-menu a { display: block;  text-decoration: none; color: #333; font-size: 20px; margin-bottom: 25px; transition: .3s; }
.mobile-menu a:hover {color: #d88a00;padding-left: 8px;}
.mobile-btn { margin-top: 30px;  text-align: center; background: #d88a00;color: white !important;padding: 14px;border-radius: 40px;}

/* Overlay */
.overlay { position: fixed;inset: 0; background: rgba(0,0,0,.45); opacity: 0;visibility: hidden; transition: .3s;z-index: 9999;}
.overlay.active {opacity: 1;visibility: visible;}

/* ==========================TABLET========================== */

@media (max-width: 992px) {
    .nav-links,
    .hd-book-btn {
        display: none;
    }
    .menu-toggle { display: block;}
    .logo a {font-size: 28px;}
}

/* ========================== MOBILE========================== */

@media (max-width: 768px) {
    .navbar { padding: 14px 20px; }
    .logo a {  font-size: 24px; }
    .menu-toggle {  font-size: 30px; }
    .mobile-menu {  width: 280px; }
}

@media (max-width: 480px) {
    .logo a { font-size: 22px;   }
    .mobile-menu a {  font-size: 18px;  }
}


/* ===== HERO ===== */
.hero { height: 100vh;position: relative;display: flex;justify-content: center;align-items: center; }
/* Overlay */
.hero::before {content: '';position: absolute;width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
.hero-content {position: relative;color: #fff;text-align: center;max-width: 600px;}
.hero h1 {font-size: 48px;margin-bottom: 10px;}
.hero p {margin-bottom: 20px;font-size: 18px;}

/* ===== SECTION ===== */
.section {padding: 70px 20px; text-align: center;}
.section h2 {font-size: 32px;margin-bottom: 20px;}
/* ===== ROOMS ===== */
.rooms {display: flex;justify-content: center;gap: 25px;flex-wrap: wrap;}
.room-card { background: #fff; border-radius: 10px; overflow: hidden;
    width: 260px;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);transition: 0.3s;
}
.room-card:hover { transform: translateY(-8px);}
/* Add image */
.room-card img {width: 100%; height: 160px;object-fit: cover;}
.room-card h3 {margin: 10px 0;}
.room-card p { padding: 0 10px 15px;}
@media(max-width: 768px) {
    .hero h1 {font-size: 32px;}
    .hero p {font-size: 16px;}
}
/* ================= banner  ==================== */

.hero-new { min-height: 75vh; position: relative;display: flex; align-items: center;overflow: hidden;}
.hero-bg { position: absolute;inset: 0; background: url('img/banner-3.jpg') center center no-repeat; background-size: cover; z-index: 1;}
.hero-bg::after { content: "";position: absolute;  inset: 0;background: rgba(0, 0, 0, .45); }

/* Content */
.hero-box { position: relative;z-index: 2; max-width: 650px;color: #fff;}
.hero-box h1 {font-size: 40px;font-weight: 700;line-height: 1.2;}
.hero-box span {color: #f0b429;}
.hero-box p {margin: 20px 0 30px;font-size: 18px; line-height: 1.7;}
.hero-btns {display: flex; flex-wrap: wrap; gap: 12px;}
.hero-btns a { padding: 12px 25px; border-radius: 30px;text-decoration: none;}
.btn-main {background: linear-gradient(45deg, #d88a00, #f0b429); color: #fff;}
.btn-outline {border: 2px solid #fff; color: #fff;}
/* Tablet */
@media (max-width:991px) {
    .hero-new {min-height: 80vh;}
    .hero-box h1 { font-size: 40px; }
    .hero-box p {font-size: 16px;}
}

/* Mobile */
@media (max-width:767px) {
    .hero-new { min-height: 50vh; text-align: center;padding: 50px 0; }
    .hero-bg {background-position: center center;background-size: cover;}
    .hero-box { max-width: 100%; padding: 0 15px;}
    .hero-box h1 {font-size: 30px; line-height: 1.3;}
    .hero-box p { font-size: 15px;margin: 15px 0 25px; }
    .hero-btns { justify-content: center; }
    .hero-btns a { padding: 10px 20px;font-size: 14px;}
}

/* HERO SLIDER STYLES */
.hero-slider-section { position: relative; width: 100%;}
.hero-slide { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat;height: 75vh; 
    display: flex;align-items: center; padding: 100px 0;}
.hero-slide .hero-overlay { position: absolute; top: 0; left: 0;width: 100%; height: 100%;  background: rgba(0, 0, 0, 0.6); z-index: 1;}
.hero-slide .container { position: relative;   z-index: 2;}
.hero-slider .owl-dots { position: absolute; bottom: 20px;width: 100%;text-align: center;}
.hero-slider .owl-dot span { background: rgba(255, 255, 255, 0.5) !important; width: 12px !important; height: 12px !important;}
.hero-slider .owl-dot.active span { background: #d88a00 !important; width: 16px !important; height: 16px !important;}
@media (max-width: 768px) {
    .hero-slide { height:30rem; text-align: center; padding:50px 0;}
    .hero-box { text-align: center !important; }
}

/* ======================== about =============================== */
.about-advanced .row { align-items: center;}
.about-images {position: relative; display: flex; justify-content: center;}
.img-main {width: 100%;max-width: 100%; height: 420px;object-fit: cover;border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);}
.img-small { position: absolute;width: 350px; height: 230px; object-fit: cover; bottom: -30px;right: 20px; border-radius: 15px;  border: 5px solid #fff;}
.about-text h6 {color: #d88a00; letter-spacing: 2px; }
.about-text h2 { font-size: 34px; margin: 10px 0; }
.about-text span {color: #d88a00; }
.about-text p {color: #555; line-height: 1.6; }

/* ===== FEATURES (NEW DESIGN 🔥) ===== */
.features-box { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.feature-item {display: flex; align-items: center; gap: 12px;background: #fff; padding: 12px 15px; border-radius: 30px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);transition: 0.3s;  cursor: pointer;}
.feature-item::before {content: "➜"; background: linear-gradient(45deg, #d88a00, #f0b429);color: #fff;
    font-size: 14px;width: 28px; height: 28px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.feature-item:hover { transform: translateX(8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}
.about-btn {display: inline-block; padding: 12px 30px; border-radius: 30px; background: linear-gradient(45deg, #d88a00, #f0b429);
    color: #fff;text-decoration: none;transition: 0.3s;}
.about-btn:hover {  transform: translateY(-3px);  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);}
/* RESPONSIVE */
@media(max-width: 768px) {
    .img-main { height: 300px; }
    .img-small { display: none; }
    .about-text h2 { font-size: 26px;}
}

/* ================= SERVICES ================= */
.services-section {background: #f8fafc;}
.section-title {font-size: 42px; font-weight: 700;color: #1f2937;margin-bottom: 10px;}
.section-subtitle {color: #6b7280; margin: 0 auto 50px;}
.service-card {position: relative; overflow: hidden; border-radius: 8px; height: 350px; transition: .4s;}
.service-card img { width: 100%;height: 100%;object-fit: fill; transition: .6s;}
.service-overlay { position: absolute;left: 0;right: 0;bottom: 0;padding: 25px;color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .65),transparent);}
.service-overlay h3 {font-size: 22px;font-weight: 700;margin-bottom: 8px;}
.service-overlay p {font-size: 14px; margin-bottom: 15px;color: #e5e7eb;}
.book-btn { display: inline-block; padding: 10px 22px;background: #198754; color: #fff; text-decoration: none;
    border-radius: 30px;font-size: 14px; font-weight: 600;transition: .3s;}
.book-btn:hover { background: #146c43; color: #fff;}
.service-card:hover { transform: translateY(-10px);}
.service-card:hover img { transform: scale(1.12);}
/* Mobile */
@media(max-width:768px) {
    .section-title {font-size: 30px;}
    .service-card { height: 300px;}
    .service-overlay {padding: 18px;}
    .service-overlay h3 { font-size: 18px; }
    .image-box{margin-top:20px;}
}

/* ================  FACILITY CLEAN DESIGN ==================== */
.facility-clean { background: #f9f9f9; padding: 60px 0;}
.facility-clean .top-title { color: #d88a00;  letter-spacing: 2px;  font-weight: 600; text-transform: uppercase;font-size: 15px;margin-bottom: 10px;}
.facility-clean .facility-box { background: #ffffff;  border: 1px solid #e5e5e5; border-radius: 8px; padding: 15px 20px; transition: all 0.3s ease;
    display: flex; align-items: center; text-align: left;  gap: 15px;  height: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);}
.facility-clean .facility-box .icon {font-size: 24px;margin-bottom: 0;  min-width: 45px; height: 45px; background: #fff8eb; display: flex;
    align-items: center;justify-content: center;border-radius: 8px;}
.facility-clean .facility-box h6 { font-size: 15px; color: #333333; font-weight: 600;margin: 0;line-height: 1.4;}
.facility-clean .facility-box:hover {  border-color: #d88a00; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); transform: translateY(-3px);}

/* ================= explore-section  ==================== */
.explore-section { padding: 80px 0; background: linear-gradient(120deg, #0f2027, #203a43, #2c5364);color: #fff;}
.explore-content h2 {font-size: 42px;font-weight: 700;margin-bottom: 20px;}
.explore-content h2 span {color: #f0b429;}
.explore-content ul {list-style: none; padding: 0;}
.explore-content ul li { margin-bottom: 12px;position: relative; padding-left: 25px;}
.explore-content ul li::before { content: "✔"; position: absolute; left: 0;  color: #f0b429;}
.explore-btn { display: inline-block; margin-top: 20px; padding: 12px 28px; background: linear-gradient(45deg, #d88a00, #f0b429);
    color: #fff; border-radius: 30px;text-decoration: none;}
.image-box { position: relative; }
.image-box img { width: 100%;  border-radius: 20px; }
.image-box::after {  content: ""; position: absolute;
    top: 20px; left: -20px; width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 20px;}
.image-box:hover img { transform: scale(1.05); transition: 0.4s; }

@media(max-width:768px) { .explore-content h2 {  font-size: 28px; } }

/* =================================== gallery-section ================================ */
.gallery-section { padding: 50px 0 30px 0; }
/* Heading */
.sub-title {  color: #d88a00; font-weight: 600; }
.main-title { font-size: 36px; font-weight: 700; }
.gallery-item { position: relative; overflow: hidden; border-radius: 15px; }
.gallery-item img { width: 100%; height: 280px; object-fit: fill; transition: 0.4s; }

/* Overlay */
.overlay { position: absolute; bottom: 0;  width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    display: flex; align-items: flex-end;  justify-content: center;  opacity: 0; transition: 0.4s;
}
.overlay h4 { color: #fff; margin-bottom: 20px; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item:hover .overlay { opacity: 1; }
.owl-dots { text-align: center; margin-top: 20px; }
.owl-dots .owl-dot span { width: 10px; height: 10px;  background: #ccc; display: block;  margin: 5px;  border-radius: 50%; }
.owl-dots .owl-dot.active span { background: #d88a00; }
/* =========================CONTACT SECTION========================= */
.contact-section {  padding: 50px 0; background: #f7f9fc;}
.contact-info-card { height: 100%; padding: 40px; border-radius: 24px; background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); color: #fff; }

.contact-info-card h3 { font-size: 28px;margin-bottom: 35px; font-weight: 700; }
.contact-item { display: flex; gap: 18px;padding-bottom: 25px; margin-bottom: 25px;border-bottom: 1px solid rgba(255, 255, 255, .15);}
.contact-item .icon {width: 55px;height: 55px;min-width: 55px;border-radius: 50%; background: #d88a00;
    display: flex;align-items: center;justify-content: center; }
.contact-item .icon i { color: white;font-size: 20px; }
.contact-item h6 { font-weight: 600;margin-bottom: 6px;}
.contact-item p {margin: 0;opacity: .9;line-height: 1.7; font-size: 14px;}

/* =========================FORM CARD========================= */
.contact-form-card { height: 100%; background: white;padding: 45px; border-radius: 24px; box-shadow: 0 15px 50px rgba(0, 0, 0, .08);}
.contact-form-card h3 { margin-bottom: 30px;font-size: 28px; font-weight: 700; color: #222; }
.form-control { border: 1px solid #e5e7eb; border-radius: 12px; padding: 15px 18px; font-size: 15px; box-shadow: none !important; }
.form-control:focus { border-color: #d88a00; }
textarea.form-control { resize: none; }
.btn-submit {width: 100%;border: none;padding: 16px; border-radius: 50px; background: linear-gradient(135deg,  #d88a00, #f0b429);
    color: white;font-weight: 600;font-size: 16px;transition: .3s;
}
.btn-submit:hover { transform: translateY(-3px);}

/* ========================= TABLET========================= */

@media(max-width:991px) {
    .contact-section { padding: 70px 0; }
    .contact-info-card { margin-bottom: 20px; }
    .section-heading h2 { font-size: 34px; }
    .contact-form-card,
    .contact-info-card {
        padding: 30px;
    }
}

/* =========================MOBILE========================= */

@media(max-width:576px) {
    .contact-section {  padding: 40px 0; }
    .contact-form-card,
    .contact-info-card {
        padding: 22px;
        border-radius: 18px;
    }
    .contact-form-card h3,
    .contact-info-card h3 {
        font-size: 22px;
    }
    .contact-item { gap: 12px; }
    .contact-item .icon {width: 45px;height: 45px; min-width: 45px; }
    .btn-submit { padding: 14px; }
}


/* MAP DESIGN */
.map-section { position: relative;}
.map-section iframe {width: 100%;height: 450px;border: 0; filter: grayscale(20%);}
/* Optional Overlay */
.map-section::after {content: "";position: absolute;top: 0;left: 0; width: 100%; height: 100%;background: rgba(0, 0, 0, 0.1);pointer-events: none;}
/* ========================== FOOTER ========================== */
.footer {background: #1a2a32;  color: #ffffff;padding: 70px 0 20px; font-family: 'Arial', sans-serif;}
/* Headings */
.footer-box h3 {font-size: 24px;font-weight: 700; margin-bottom: 20px; color: #ffffff;}
.footer-box h3 span {color: #f0b429; }
.footer-box h4 { font-size: 20px;font-weight: 600;margin-bottom: 25px; position: relative;  padding-bottom: 10px;}
.footer-box h4::after {  content: '';  position: absolute; left: 0; bottom: 0;width: 40px; height: 2px;background: #f0b429;}
.footer-box p { color: #a0aec0; font-size: 15px;  line-height: 1.8; margin-bottom: 20px; }
/* Lists & Links */
.footer-box ul { list-style: none;  padding: 0; margin: 0; }
.footer-box ul li {  margin-bottom: 15px; }
.footer-box ul li a { text-decoration: none;  color: #a0aec0;  transition: all 0.3s ease; display: inline-block; }
.footer-box ul li a:hover { color: #f0b429;  transform: translateX(5px); }
/* Fix for Contact Info Alignment */
.contact-widget ul li { display: flex; align-items: flex-start; gap: 15px; color: #a0aec0; font-size: 15px; line-height: 1.6;}
.contact-widget ul li i { color: #f0b429;   font-size: 18px;  margin-top: 4px; }
.social-icons { display: flex;  gap: 12px; margin-top: 20px; }
.social-icons a { display: flex;  align-items: center;  justify-content: center;
    width: 40px; height: 40px;  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;  color: #ffffff; font-size: 16px;  text-decoration: none;  transition: all 0.3s ease;
}
.social-icons a i { display: flex; align-items: center; justify-content: center; line-height: 1; }
.social-icons a:hover { background: #fff; border-color: #f0b429; color: #1a2a32;  transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 40px; padding-top: 20px; }
.footer-bottom p { font-size: 14px; color: #8892a0; margin: 0; }
.footer-bottom a.dw-link { color: #f0b429;  text-decoration: none; font-weight: 600; transition: 0.3s ease; }
.footer-bottom a.dw-link:hover { color: #ffffff; }

/* RESPONSIVE */
    @media(max-width:768px) {
    .main-title { font-size: 28px; }
    .contact-form { padding: 25px; }
    }
    .whatsapp-icon { position: fixed; bottom: 50px; right: 20px; z-index: 9999;padding: 10px;transition: transform 0.3s ease;}
    .whatsapp-icon img { width: 50px; height: 50px; filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2)); }
    .whatsapp-icon:hover {transform: scale(1.1); }
    /* ----- Mobile Responsive Styles ----- */
    @media (max-width: 768px) { .whatsapp-icon {bottom: 50px;  right: 15px;   padding: 5px; } }