/* ==========================================================================
   The Wild Hambantota - Main Stylesheet
   Author: Custom Designed
   ========================================================================== */

/* 1. Global Reset & Variables
========================================================================== */
:root {
    --primary-gold: #c5a880;
    --primary-gold-hover: #b09168;
    --dark-bg: #14181b;
    --card-bg: #1e2328;
    --text-light: #f8f9fa;
    --text-muted: #a0aab2;
    --border-color: rgba(197, 168, 128, 0.2);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;font-size: 16px;}
body {font-family: var(--font-body);background-color: var(--dark-bg);color: var(--text-light);line-height: 1.6;overflow-x: hidden;}
a {text-decoration: none;color: inherit;transition: var(--transition-smooth);}
ul {list-style: none;}

/* Helper Utility Classes */
.container {width: 90%;max-width: 1200px;margin: 0 auto;}
.btn {display: inline-block;padding: 14px 32px;border-radius: 4px;font-size: 0.95rem;font-weight: 600;letter-spacing: 1px;text-transform: uppercase;cursor: pointer;border: none;transition: var(--transition-smooth);}
.btn-primary {background-color: var(--primary-gold);color: #000;}

.btn-primary:hover {background-color: var(--primary-gold-hover);transform: translateY(-2px);box-shadow: 0 10px 20px rgba(197, 168, 128, 0.3);}
.btn-outline {background: transparent;color: var(--text-light);border: 1px solid var(--primary-gold);}
.btn-outline:hover {background: var(--primary-gold);color: #000;}

.section-padding {padding: 100px 0;}

.section-header {text-align: center;margin-bottom: 60px;}

.section-subtitle {color: var(--primary-gold);text-transform: uppercase;letter-spacing: 3px;font-size: 0.85rem;font-weight: 600;display: block;margin-bottom: 10px;}

.section-title {font-family: var(--font-heading);font-size: 2.8rem;font-weight: 400;}

/* 2. Navigation Header
========================================================================== */
.header-nav {position: fixed;top: 0;left: 0;width: 100%;z-index: 1000;padding: 25px 0;transition: var(--transition-smooth);}
.header-nav.scrolled {background-color: rgba(20, 24, 27, 0.95);backdrop-filter: blur(10px);padding: 15px 0;box-shadow: 0 5px 20px rgba(0,0,0,0.5);}
.nav-container {display: flex;justify-content: space-between;align-items: center;}
.logo-text {font-family: var(--font-heading);font-size: 1.6rem;color: var(--text-light);letter-spacing: 1px;}
.logo-text span {color: var(--primary-gold);}
.nav-menu {display: flex;gap: 35px;align-items: center;}
.nav-link {font-size: 0.9rem;letter-spacing: 1px;color: var(--text-muted);position: relative;color: var(--white);font-size: 0.9rem;font-weight: 500;letter-spacing: 0.5px;}
.nav-link:hover, .nav-link.active {color: var(--primary-gold);}
.nav-link::after {content: '';position: absolute;width: 0;height: 2px;bottom: -5px;left: 0;background-color: var(--primary-gold);transition: var(--transition-smooth);}
.hamburger {display: none;cursor: pointer;font-size: 1.5rem;color: var(--text-light);}

/* 3. Hero Slider Section
========================================================================== */
.hero-slider {position: relative;width: 100%;height: 100vh;overflow: hidden;}
.slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;visibility: hidden;transition: opacity 1s ease-in-out, visibility 1s ease-in-out;background-image: var(--bg-desktop);background-size: cover;background-position: center;background-repeat: no-repeat;}
.slide.active {opacity: 1;visibility: visible;}
.slide::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(180deg, rgba(20,24,27,0.4) 0%, rgba(20,24,27,0.8) 100%);}
.hero-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 90%;max-width: 900px;z-index: 2;}
.hero-subtitle {color: var(--primary-gold);text-transform: uppercase;letter-spacing: 4px;font-size: 1rem;font-weight: 600;margin-bottom: 20px;opacity: 0;transform: translateY(30px);transition: var(--transition-smooth);}
.hero-title {font-family: var(--font-heading);font-size: 4rem;line-height: 1.1;font-weight: 400;margin-bottom: 25px;opacity: 0;transform: translateY(30px);transition: var(--transition-smooth);transition-delay: 0.2s;}
.hero-desc {color: var(--text-muted);font-size: 1.1rem;max-width: 650px;margin: 0 auto 35px auto;opacity: 0;transform: translateY(30px);transition: var(--transition-smooth);transition-delay: 0.4s;}
.hero-btn-group {opacity: 0;transform: translateY(30px);transition: var(--transition-smooth);transition-delay: 0.6s;display: flex;gap: 20px;justify-content: center;}

/* Active Slide Text Animations */
.slide.active .hero-subtitle,
.slide.active .hero-title,
.slide.active .hero-desc,
.slide.active .hero-btn-group {opacity: 1;transform: translateY(0);}

/* Slider Navigation Controls */
.slider-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 50px;height: 50px;background: rgba(255, 255, 255, 0.05);border: 1px solid var(--border-color);color: var(--text-light);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 10;transition: var(--transition-smooth);}
.slider-arrow:hover {background: var(--primary-gold);color: #000;}
.slider-arrow.prev { left: 30px; }
.slider-arrow.next { right: 30px; }

/* 4. Page header Section
========================================================================== */
.page-header {height: 55vh;background-position:center;display: flex;align-items: center;justify-content: center;text-align: center;padding-top: 80px;}
.page-header h1 {font-family: var(--font-heading);font-size: 3.5rem;margin-bottom: 10px;}
.page-header p {color: var(--text-muted);font-size: 1.1rem;letter-spacing: 2px;text-transform: uppercase;}

/* 4. Feature Intro Section
========================================================================== */
.about-preview {display: grid;grid-template-columns: 1fr 1fr;gap: 60px;align-items: center;}
.about-img-box {position: relative;}
.about-img-box img {width: 100%;border-radius: 8px;box-shadow: 0 20px 40px rgba(0,0,0,0.5);}
.about-img-box::after {content: '';position: absolute;top: -20px;left: -20px;width: 100%;height: 100%;border: 1px solid var(--primary-gold);border-radius: 8px;z-index: -1;}
.about-text-box h2 {font-family: var(--font-heading);font-size: 2.5rem;margin-bottom: 20px;}
.about-text-box p {color: var(--text-muted);margin-bottom: 25px;}

/* 5. Rooms Preview Cards
========================================================================== */
.rooms-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 30px;}
.room-card {background-color: var(--card-bg);border-radius: 8px;overflow: hidden;border: 1px solid var(--border-color);transition: var(--transition-smooth);}
.room-card:hover {transform: translateY(-10px);box-shadow: 0 20px 30px rgba(0,0,0,0.4);}
.room-img-wrapper {height: 250px;overflow: hidden;}
.room-img-wrapper img {width: 100%;height: 100%;object-fit: cover;transition: var(--transition-smooth);}
.room-card:hover .room-img-wrapper img {transform: scale(1.08);}
.room-details {padding: 25px;}
.room-title {font-family: var(--font-heading);font-size: 1.5rem;margin-bottom: 10px;}
.room-features {display: flex;gap: 15px;color: var(--text-muted);font-size: 0.85rem;margin-bottom: 20px;}
.room-price {font-size: 1.2rem;color: var(--primary-gold);font-weight: 600;margin-bottom: 20px;}
.room-price span {font-size: 0.85rem;color: var(--text-muted);font-weight: 400;}



.main-slider{width:100%;position:relative;display:none;padding:0px;margin:0px auto;z-index:1;}
#demo1{padding:0;margin:0;list-style: none;}
#demo1 li{width:100%;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;}
#demo1 li img{width:100%;object-fit: cover;object-position:center;}

/* 6. Contact Page
========================================================================== */

.contact-grid {display: grid;grid-template-columns: 1fr 1.2fr;gap: 50px;}
.contact-info-box h2, .contact-form-box h2 {font-family: var(--font-heading);font-size: 2.2rem;margin-bottom: 20px;}        .contact-info-box p {color: var(--text-muted);margin-bottom: 30px;font-size: 0.98rem;}
.info-card-item {display: flex;gap: 20px;margin-bottom: 25px;align-items: flex-start;}
.info-icon {width: 50px;height: 50px;background-color: var(--card-bg);border: 1px solid var(--border-color);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--primary-gold);font-size: 1.2rem;flex-shrink: 0;}
.info-text h4 {font-family: var(--font-heading);font-size: 1.1rem;margin-bottom: 5px;color: var(--text-light);}
.info-text p, .info-text a {color: var(--text-muted);font-size: 0.95rem;}
.info-text a:hover {color: var(--primary-gold);}

/* Form Styling */
.contact-form-box {background-color: var(--card-bg);border: 1px solid var(--border-color);padding: 45px;border-radius: 12px;}
.form-group {margin-bottom: 20px;}
.form-row {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.form-control {width: 100%;padding: 14px 18px;background-color: rgba(20, 24, 27, 0.6);border: 1px solid var(--border-color);border-radius: 6px;color: var(--text-light);font-family: var(--font-body);font-size: 0.95rem;transition: var(--transition-smooth);}
.form-control:focus {outline: none;border-color: var(--primary-gold);background-color: rgba(20, 24, 27, 0.9);}
textarea.form-control {resize: vertical;height: 140px;}

/* Map Section */
.map-section {margin-top: 60px;border-radius: 12px;overflow: hidden;border: 1px solid var(--border-color);height: 400px;}
.map-section iframe {width: 100%;height: 100%;border: none;}


/*  Gallery Page
========================================================================== */
/* Filter Tabs */
.gallery-filter-tabs {display: flex;justify-content: center;gap: 15px;margin-bottom: 40px;flex-wrap: wrap;}
.filter-btn {background: var(--card-bg);border: 1px solid var(--border-color);color: var(--text-muted);padding: 10px 24px;border-radius: 30px;cursor: pointer;font-size: 0.9rem;font-weight: 500;transition: var(--transition-smooth);}
.filter-btn:hover, .filter-btn.active {background-color: var(--primary-gold);color: #000;border-color: var(--primary-gold);}

/* Album / Photo Grid */
.gallery-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));gap: 25px;}
.gallery-item {position: relative;height: 280px;border-radius: 8px;overflow: hidden;cursor: pointer;border: 1px solid var(--border-color);background-color: var(--card-bg);}
.gallery-item img {width: 100%;height: 100%;object-fit: cover;transition: var(--transition-smooth);}
.gallery-item:hover img {transform: scale(1.1);}
.gallery-overlay {position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(180deg, transparent 40%, rgba(14, 18, 21, 0.9) 100%);display: flex;flex-direction: column;justify-content: flex-end;padding: 25px;opacity: 0;transition: var(--transition-smooth);}
.gallery-item:hover .gallery-overlay {opacity: 1;}
.gallery-title {font-family: var(--font-heading);font-size: 1.3rem;color: var(--text-light);margin-bottom: 5px;}
.gallery-category {color: var(--primary-gold);font-size: 0.8rem;text-transform: uppercase;letter-spacing: 1px;}
.zoom-icon {position: absolute;top: 20px;right: 20px;width: 40px;height: 40px;background: rgba(0,0,0,0.6);border: 1px solid var(--primary-gold);color: var(--primary-gold);border-radius: 50%;display: flex;align-items: center;justify-content: center;transform: scale(0);transition: var(--transition-smooth);}
.gallery-item:hover .zoom-icon {transform: scale(1);}

/* Lightbox Fullscreen Modal */
.lightbox-modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(10, 13, 16, 0.95);backdrop-filter: blur(12px);z-index: 3000;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: var(--transition-smooth);}
.lightbox-modal.active {opacity: 1;visibility: visible;}
.lightbox-content {max-width: 85%;max-height: 85vh;text-align: center;position: relative;}
.lightbox-content img {max-width: 100%;max-height: 75vh;object-fit: contain;border-radius: 6px;border: 1px solid var(--primary-gold);box-shadow: 0 25px 50px rgba(0,0,0,0.8);}
.lightbox-caption {margin-top: 15px;font-family: var(--font-heading);font-size: 1.4rem;color: var(--text-light);}
.lightbox-close {position: absolute;top: 30px;right: 40px;font-size: 2.5rem;color: var(--text-light);cursor: pointer;transition: var(--transition-smooth);}
.lightbox-close:hover {color: var(--primary-gold);}
.lightbox-nav {position: absolute;top: 50%;transform: translateY(-50%);width: 55px;height: 55px;background: rgba(255,255,255,0.05);border: 1px solid var(--border-color);color: var(--text-light);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: 1.2rem;transition: var(--transition-smooth);}
.lightbox-nav:hover {background: var(--primary-gold);color: #000;}
.lightbox-prev { left: 40px; }
.lightbox-next { right: 40px; }
		
		
/*  Experience Page
========================================================================== */		
		
/* Experience Grid Layout */
.exp-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px; }
.exp-card {background-color: var(--card-bg);border: 1px solid var(--border-color);border-radius: 8px;overflow: hidden;transition: var(--transition-smooth);display: flex;flex-direction: column;}
.exp-card:hover {transform: translateY(-8px);border-color: var(--primary-gold);box-shadow: 0 20px 30px rgba(0,0,0,0.5);}
.exp-img-box {position: relative;height: 240px;overflow: hidden;}
.exp-img-box img {width: 100%;height: 100%;object-fit: cover;transition: var(--transition-smooth);}
.exp-card:hover .exp-img-box img {transform: scale(1.08);}
.exp-badge {position: absolute;top: 15px;right: 15px;background: rgba(20, 24, 27, 0.85);border: 1px solid var(--primary-gold);color: var(--primary-gold);padding: 4px 12px;font-size: 0.75rem;font-weight: 600;border-radius: 4px;text-transform: uppercase;letter-spacing: 1px;}
.exp-content {padding: 30px;display: flex;flex-direction: column;flex-grow: 1;}
.exp-title {font-family: var(--font-heading);font-size: 1.6rem;margin-bottom: 12px;}
.exp-desc {color: var(--text-muted);font-size: 0.95rem;margin-bottom: 20px;line-height: 1.6;flex-grow: 1;}
.exp-meta {display: flex;justify-content: space-between;align-items: center;border-top: 1px solid var(--border-color);padding-top: 15px;margin-top: 10px;gap: 10px;}
.exp-time {color: var(--text-muted);font-size: 0.85rem;}
.exp-time i {color: var(--primary-gold);margin-right: 5px;}

/*  Detailed Experience Page
========================================================================== */	
.exp-detail-container {padding: 80px 0;}
.exp-meta-box {display: grid;grid-template-columns: 2fr 1fr;gap: 50px;}
.exp-main-desc h2 {font-family: var(--font-heading);font-size: 2.2rem;margin-bottom: 20px;}
.exp-main-desc p {color: var(--text-muted);font-size: 1.05rem;line-height: 1.8;margin-bottom: 30px;}
.exp-detail-img {width: 100%;height: 400px;object-fit: cover;border-radius: 8px;border: 1px solid var(--border-color);margin-bottom: 30px;}
.inclusions-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;margin-top: 25px;}
.inclusion-item {display: flex;align-items: center;gap: 12px;color: var(--text-light);font-size: 0.95rem;background: var(--card-bg);padding: 15px;border-radius: 6px;border: 1px solid var(--border-color);}
.inclusion-item i {color: var(--primary-gold);font-size: 1.1rem;}

/* Booking Sidebar Box */
.booking-sidebar {background-color: var(--card-bg);border: 1px solid var(--border-color);padding: 35px;border-radius: 8px;position: sticky;top: 120px;height: fit-content;}
.sidebar-schedule {margin: 25px 0;display: flex;flex-direction: column;gap: 15px;}
.sidebar-schedule-item {display: flex;align-items: flex-start;gap: 12px;color: var(--text-light);font-size: 0.95rem;}
.sidebar-schedule-item i {color: var(--primary-gold);font-size: 1.1rem;margin-top: 3px;}

/*  Rooms Page
========================================================================== */	
/* Room Card Layout */
.room-long-card {display: grid;grid-template-columns: 1.2fr 1fr;background-color: var(--card-bg);border: 1px solid var(--border-color);border-radius: 8px;overflow: hidden;margin-bottom: 40px;transition: var(--transition-smooth);}
.room-long-card:hover {border-color: var(--primary-gold);transform: translateY(-5px);box-shadow: 0 20px 40px rgba(0,0,0,0.5);}
.room-long-card:nth-child(even) {grid-template-columns: 1fr 1.2fr;}
.room-long-card:nth-child(even) .room-gallery-img {order: 2;}
.room-gallery-img {position: relative;min-height: 380px;}
.room-gallery-img img {width: 100%;height: 100%;object-fit: cover;}
.room-badge {position: absolute;top: 20px;left: 20px;background-color: var(--primary-gold);color: #000;padding: 6px 14px;font-size: 0.8rem;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;border-radius: 4px;}
.room-info-content {padding: 40px;display: flex;flex-direction: column;justify-content: center;}
.room-info-content h2 {font-family: var(--font-heading);font-size: 2rem;margin-bottom: 15px;}
.room-info-content p {color: var(--text-muted);font-size: 0.95rem;margin-bottom: 25px;}
.amenities-list {display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;margin-bottom: 30px;}
.amenity-item {display: flex;align-items: center;gap: 10px;color: var(--text-light);font-size: 0.88rem;}
.amenity-item i {color: var(--primary-gold);font-size: 1rem;}
.price-booking-bar {display: flex;align-items: center;justify-content: space-between;border-top: 1px solid var(--border-color);padding-top: 20px;gap: 15px;}

/*  Rooms detail Page
========================================================================== */
.detail-header{height: 50vh;display: flex;align-items: center;justify-content: center;text-align: center;padding-top: 80px;}

.detail-header h1 {font-family: var(--font-heading);font-size: 3rem;margin-bottom: 10px;}
.room-detail-container {padding: 80px 0;}
.room-meta-box {display: grid;grid-template-columns: 2fr 1fr;gap: 50px;}
.room-main-desc h2 {font-family: var(--font-heading);font-size: 2.2rem;margin-bottom: 20px;}
.room-main-desc p {color: var(--text-muted);font-size: 1.05rem;line-height: 1.8;margin-bottom: 30px;}

/* Gallery Grid (10+ Photos: Bedroom, Bathroom, Amenities) */
.room-photo-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;margin-top: 40px;}
.room-photo-grid img {width: 100%;height: 200px;object-fit: cover;border-radius: 8px;border: 1px solid var(--border-color);transition: var(--transition-smooth);}
.room-photo-grid img:hover {transform: scale(1.03);border-color: var(--primary-gold);}

/* Booking Sidebar Box */
.booking-sidebar {background-color: var(--card-bg);border: 1px solid var(--border-color);padding: 35px;border-radius: 8px;position: sticky;top: 120px;height: fit-content;}
.sidebar-price {font-size: 2rem;color: var(--primary-gold);font-weight: 700;margin-bottom: 20px;}
.sidebar-price span {font-size: 0
.9rem;color: var(--text-muted);font-weight: 400;}
.sidebar-amenities {margin: 25px 0;display: flex;flex-direction: column;gap: 12px;}
.sidebar-amenity-item {display: flex;align-items: center;gap: 12px;color: var(--text-light);font-size: 0
.95rem;}
.sidebar-amenity-item i {color: var(--primary-gold);font-size: 1.1rem;}

/*  Aboutus Page
========================================================================== */	
/* Values Grid */
.values-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;margin-top: 50px;}
.value-card {background-color: var(--card-bg);border: 1px solid var(--border-color);padding: 40px 30px;border-radius: 8px;text-align: center;transition: var(--transition-smooth);}
.value-card:hover {transform: translateY(-5px);border-color: var(--primary-gold);}
.value-icon {font-size: 2.5rem;color: var(--primary-gold);margin-bottom: 20px;}
.value-card h3 {font-family: var(--font-heading);font-size: 1.3rem;margin-bottom: 15px;}
.value-card p {color: var(--text-muted);font-size: 0.95rem;}

/* 6. Footer Section
========================================================================== */
.site-footer {background-color: #0d1012;padding-top: 80px;border-top: 1px solid var(--border-color);}
.footer-grid {display: grid;grid-template-columns: 2fr 1fr 1fr 1.5fr;gap: 40px;margin-bottom: 60px;}
.footer-brand p {color: var(--text-muted);margin-top: 15px;margin-bottom: 20px;font-size: 0.95rem;}
.social-links {display: flex;gap: 15px;}
.social-links a {width: 40px;height: 40px;border-radius: 50%;border: 1px solid var(--border-color);display: flex;align-items: center;justify-content: center;color: var(--text-light);}
.social-links a:hover {background-color: var(--primary-gold);color: #000;}
.footer-title {font-family: var(--font-heading);font-size: 1.2rem;margin-bottom: 20px;color: var(--primary-gold);}
.footer-links li {margin-bottom: 12px;}
.footer-links a {color: var(--text-muted);font-size: 0.9rem;}
.footer-links a:hover {color: var(--primary-gold);}
.footer-contact-info li {display: flex;gap: 15px;color: var(--text-muted);font-size: 0.9rem;margin-bottom: 15px;}
.footer-bottom {padding: 25px 0;border-top: 1px solid rgba(255,255,255,0.05);text-align: center;color: var(--text-muted);font-size: 0.85rem;}


/* 7. Responsive Media Queries
========================================================================== */
@media (max-width: 992px) {
    .about-preview {grid-template-columns: 1fr;}
    .footer-grid {grid-template-columns: 1fr 1fr;}
    .hero-title {font-size: 3rem;}	
	
	.contact-grid {grid-template-columns: 1fr;}
	.form-row {grid-template-columns: 1fr;}
	
	.room-long-card, .room-long-card:nth-child(even) {grid-template-columns: 1fr;}
	.room-long-card:nth-child(even) .room-gallery-img {order: 1;}
	
	.room-meta-box {grid-template-columns: 1fr;}
	.room-photo-grid {grid-template-columns: repeat(2, 1fr);}
	
	.exp-meta-box {grid-template-columns: 1fr;}
	.inclusions-grid {grid-template-columns: 1fr;}
}

@media (max-width: 768px) {
    .hamburger {display: block;}
    .nav-menu {position: fixed;top: 0;right: -100%;width: 80%;height: 100vh;background-color: var(--dark-bg);flex-direction: column;justify-content: center;transition: var(--transition-smooth);box-shadow: -10px 0 30px rgba(0,0,0,0.8);}
    .nav-menu.active {right: 0;}
	.slide {background-image: var(--bg-mobile);}
    .footer-grid {grid-template-columns: 1fr;}
    .hero-title {font-size: 2.2rem;}
    .hero-btn-group {flex-direction: column;gap: 10px;}
}

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