/* --- Core Reset & Palette --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #F4F7FA; 
    color: #2D3748;
}

/* --- Typography & Branding Global --- */
h1, h2, h3, .duration-badge {
    font-family: 'Cinzel', serif; 
}
.gold-text {
    color: #D4AF37; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- Header / Navigation --- */
header {
    background: linear-gradient(135deg, #0A192F 0%, #112240 50%, #1A365D 100%); 
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(10, 25, 47, 0.15);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand-logo h1 {
    font-size: 22px;
    letter-spacing: 2px;
    color: #D4AF37; 
    font-weight: 700;
}
.brand-logo span {
    font-size: 10px;
    letter-spacing: 4px;
    color: #EAD7BB;
    display: block;
    margin-top: 2px;
}
.nav-links a {
    color: #E2E8F0;
    text-decoration: none;
    margin: 0 14px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}
.nav-links a:hover {
    color: #D4AF37;
}
.nav-btn {
    background: linear-gradient(135deg, #D4AF37 0%, #C5A880 100%);
    color: #0A192F;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.nav-btn:hover { background: white; color: #0A192F; transform: translateY(-2px); }

/* --- Hero Section --- */
.hero {
    position: relative;
    height: 85vh;
    background: linear-gradient(180deg, rgba(10, 25, 47, 0.75) 0%, rgba(26, 54, 93, 0.85) 100%), url('images/logo.jpeg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
}
.hero-content {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    z-index: 10;
    color: white;
}
.badge {
    display: inline-block;
    border: 1px solid #D4AF37;
    color: #FFF;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    background: rgba(212, 175, 55, 0.12);
    backdrop-filter: blur(4px);
}
.hero h2 { font-size: 52px; margin-bottom: 24px; font-weight: 700; }
.hero p { font-size: 19px; color: #E2E8F0; margin-bottom: 45px; font-weight: 300; }
.hero-btns a {
    display: inline-block;
    padding: 16px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    margin: 8px 12px;
    transition: all 0.3s ease;
}
.btn-primary { background: linear-gradient(135deg, #D4AF37 0%, #B89324 100%); color: #0A192F; }
.btn-secondary { border: 1px solid white; color: white; }
.btn-primary:hover, .btn-secondary:hover { background: white; color: #0A192F; transform: translateY(-3px); }

/* --- Packages Section --- */
.packages-section { max-width: 1200px; margin: 100px auto; padding: 0 20px; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 { font-size: 36px; color: #0A192F; font-weight: 700; }
.divider { height: 3px; width: 70px; background: linear-gradient(90deg, transparent, #D4AF37, transparent); margin: 18px auto; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 35px; }
.package-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(10, 25, 47, 0.04); border: 1px solid #E2E8F0; transition: all 0.3s ease; }
.package-card:hover { transform: translateY(-8px); border-color: rgba(212, 175, 55, 0.3); }
.card-img { height: 250px; background-size: cover; background-position: center; position: relative; }
.duration-badge { position: absolute; bottom: 15px; right: 15px; background: #0A192F; color: #D4AF37; border: 1px solid rgba(212, 175, 55, 0.3); padding: 6px 14px; font-size: 11px; border-radius: 50px; }
.card-body { padding: 30px; }
.card-body h3 { font-size: 22px; color: #0A192F; margin-bottom: 12px; font-weight: 700; }
.price { color: #B89324; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.features { list-style: none; margin-bottom: 30px; font-size: 14px; color: #4A5568; }
.features li { margin-bottom: 10px; }
.card-btn { display: block; text-align: center; background: #0A192F; color: white; text-decoration: none; padding: 14px; border-radius: 6px; font-weight: 700; }
.card-btn:hover { background: #D4AF37; color: #0A192F; }
.disabled-btn { background: #e2e8f0 !important; color: #a0aec0 !important; cursor: not-allowed; }

/* --- Premium Amenities Grid --- */
.amenities-section { max-width: 1200px; margin: 100px auto; padding: 0 20px; }
.amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.amenity-card { background: white; padding: 35px 25px; border-radius: 16px; text-align: center; border: 1px solid #E2E8F0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: 0.3s; }
.amenity-card:hover { border-color: #D4AF37; transform: translateY(-5px); }
.amenity-icon { font-size: 40px; margin-bottom: 20px; }
.amenity-card h3 { font-size: 18px; color: #0A192F; margin-bottom: 10px; }
.amenity-card p { font-size: 14px; color: #666; line-height: 1.5; }

/* --- Route & Pickup Timeline --- */
.timeline-section { max-width: 800px; margin: 100px auto; padding: 0 20px; }
.timeline-container { position: relative; border-left: 3px solid #0A192F; padding-left: 30px; margin-left: 20px; }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-badge { position: absolute; left: -115px; top: 2px; background: #D4AF37; color: #0A192F; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 75px; text-align: center; }
.timeline-item::after { content: ''; position: absolute; left: -37px; top: 6px; width: 11px; height: 11px; background: #D4AF37; border: 3px solid #0A192F; border-radius: 50%; }
.timeline-content { background: white; padding: 20px 25px; border-radius: 12px; border: 1px solid #E2E8F0; }
.timeline-content h3 { font-size: 18px; color: #0A192F; margin-bottom: 5px; }
.timeline-content p { font-size: 14px; color: #555; }

/* --- Videos Gallery Section Styles --- */
.gallery-section { max-width: 1200px; margin: 100px auto; padding: 0 20px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 35px; }
.video-card { background: white; border-radius: 16px; overflow: hidden; border: 1px solid #E2E8F0; box-shadow: 0 10px 30px rgba(10,25,47,0.04); }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.video-info { padding: 22px; }
.video-info h3 { font-size: 18px; color: #0A192F; margin-bottom: 8px; font-weight: 700; }
.video-info p { font-size: 14px; color: #4A5568; line-height: 1.5; }

/* --- Devotional Image Photo Gallery Layout --- */
.photo-gallery-section { max-width: 1200px; margin: 100px auto; padding: 0 20px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.photo-item { height: 220px; background-size: cover; background-position: center; border-radius: 12px; border: 1px solid #E2E8F0; transition: transform 0.3s; }
.photo-item:hover { transform: scale(1.03); border-color: #D4AF37; }

/* --- Premium Reviews Section Styles --- */
.reviews-section { max-width: 1200px; margin: 100px auto; padding: 0 20px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.review-card { background: white; border-radius: 16px; padding: 35px; border: 1px solid #E2E8F0; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(10,25,47,0.03); }
.review-stars { color: #D4AF37; font-size: 16px; margin-bottom: 18px; }
.review-text { font-size: 15px; color: #4A5568; line-height: 1.6; font-style: italic; margin-bottom: 25px; }
.reviewer-info { display: flex; align-items: center; gap: 15px; border-top: 1px solid #E2E8F0; padding-top: 18px; }
.reviewer-avatar { width: 45px; height: 45px; background: linear-gradient(135deg, #0A192F 0%, #1A365D 100%); color: #D4AF37; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 1px solid rgba(212, 175, 55, 0.3); }
.reviewer-info h3 { font-size: 15px; color: #0A192F; font-weight: 700; }
.reviewer-info span { font-size: 12px; color: #718096; }

/* --- Accordion FAQs Layout --- */
.faq-section { max-width: 800px; margin: 100px auto; padding: 0 20px; }
.faq-container { display: flex; flex-direction: column; gap: 15px; }
.faq-item { background: white; border-radius: 8px; border: 1px solid #E2E8F0; overflow: hidden; }
.faq-question { padding: 20px; font-weight: 700; color: #0A192F; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
.faq-question:hover { background: #F8FAFC; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #F8FAFC; }
.faq-answer p { padding: 20px; font-size: 14.5px; color: #4A5568; line-height: 1.6; }
.faq-item.active .faq-answer { max-height: 200px; }
.faq-item.active .faq-question { background: #EDF2F7; border-bottom: 1px solid #E2E8F0; }

/* --- Booking Form & Live Seats Counter --- */
.booking-section { background-color: #EDF2F7; padding: 100px 20px; }
.live-seats-banner { max-width: 750px; margin: 0 auto 20px auto; background: #FFF5F5; border: 1px solid #FEB2B2; color: #C53030; padding: 14px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.live-pulse { width: 10px; height: 10px; background: #E53E3E; border-radius: 50%; display: inline-block; animation: pulseAnimation 1.5s infinite; }
@keyframes pulseAnimation { 0% { transform: scale(0.9); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.5; } 100% { transform: scale(0.9); opacity: 1; } }

.booking-card { max-width: 750px; margin: 0 auto; background: linear-gradient(135deg, #0A192F 0%, #1A365D 100%); color: white; padding: 50px 40px; border-radius: 20px; box-shadow: 0 20px 50px rgba(10, 25, 47, 0.3); border: 1px solid rgba(212, 175, 55, 0.25); }
.booking-card h2 { text-align: center; color: #D4AF37; margin-bottom: 12px; font-size: 32px; font-weight: 700; }
.booking-card p { text-align: center; color: #E2E8F0; font-size: 15px; margin-bottom: 40px; }
.form-group { margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #EAD7BB; margin-bottom: 10px; font-weight: 600; }
input, select { width: 100%; padding: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; color: white; font-size: 14px; outline: none; }
input:focus, select:focus { border-color: #D4AF37; background: rgba(255, 255, 255, 0.12); }
select option { background: #1A365D; color: white; }
.submit-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #D4AF37 0%, #B89324 100%); color: #0A192F; border: none; border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 15px; transition: all 0.3s ease; }
.submit-btn:hover { background: white; color: #0A192F;}

/* --- NEW: Premium Unified UPI & QR Style Area --- */
.qr-payment-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(212, 175, 55, 0.35);
    border-radius: 14px;
    padding: 30px;
    margin-top: 35px;
    text-align: center;
    backdrop-filter: blur(10px);
}
.qr-title {
    color: #D4AF37;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.qr-image-wrapper {
    background: white;
    padding: 12px;
    display: inline-block;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}
.upi-qr-img {
    width: 200px;
    height: 200px;
    display: block;
    object-fit: contain;
}
.qr-details-text {
    margin: 15px 0;
    font-size: 14px;
    color: #E2E8F0;
    line-height: 1.6;
}
.qr-details-text strong {
    color: #D4AF37;
}
.payable-amount-tag {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-top: 10px;
    background: rgba(212, 175, 55, 0.15);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}
.qr-note {
    font-size: 12px;
    color: #A0AEC0;
    margin-bottom: 20px;
}
.upi-direct-btn {
    display: none; /* कंप्यूटर पर गायब रहेगा */
    background: linear-gradient(135deg, #25D366 0%, #1cbd59 100%);
    color: white;
    text-decoration: none;
    padding: 15px 25px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
}
.upi-direct-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
.screenshot-alert {
    font-size: 12px;
    color: #FEB2B2;
    margin-top: 20px;
    line-height: 1.5;
}

/* --- Contact Us Section Layout --- */
.contact-section { max-width: 1200px; margin: 100px auto; padding: 0 20px; }
.contact-container { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.contact-info-grid { display: flex; flex-direction: column; gap: 24px; }
.info-card { background: white; padding: 25px 30px; border-radius: 16px; border: 1px solid #E2E8F0; display: flex; flex-direction: column; gap: 6px; transition: all 0.3s ease; }
.info-card:hover { border-color: rgba(212, 175, 55, 0.3); transform: translateX(5px); }
.info-icon { font-size: 26px; }
.info-card h3 { font-size: 17px; color: #0A192F; font-weight: 700; }
.info-card p { font-size: 14px; color: #4A5568; }
.map-wrapper { width: 100%; min-height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid #E2E8F0; }

/* --- Footer --- */
footer { background: #060F1E; color: #A0AEC0; padding: 70px 20px; font-size: 13px; border-top: 2px solid rgba(212, 175, 55, 0.15); }
.footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 45px; }
.footer-box h3 { color: #D4AF37; margin-bottom: 20px; font-weight: 700;}
.footer-box h4 { color: white; margin-bottom: 20px; font-weight: 600;}
.footer-box p { line-height: 1.7; }
.copy { margin-top: 25px; color: #4A5568; }

/* --- WhatsApp Buttons --- */
.whatsapp-floating { position: fixed; bottom: 30px; right: 30px; background-color: #25D366; color: white; text-decoration: none; padding: 12px 20px; border-radius: 50px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); z-index: 999; transition: transform 0.3s ease, background-color 0.3s ease; }
.whatsapp-floating:hover { transform: scale(1.05); background-color: #1ebd59; }
.whatsapp-icon { width: 20px; height: 20px; }
.wa-enquiry-btn { display: block; text-align: center; border: 1px solid #25D366; color: #25D366; text-decoration: none; padding: 12px; border-radius: 6px; font-weight: bold; font-size: 13px; margin-top: 10px; transition: 0.3s; }
.wa-enquiry-btn:hover { background: #25D366; color: white; }

/* --- Responsive Adaptations --- */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero h2 { font-size: 36px; }
    .hero p { font-size: 16px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-container { grid-template-columns: 1fr; }
    .map-wrapper { min-height: 300px; }
    .booking-card { padding: 35px 20px; }
    .timeline-container { margin-left: 110px; }
    
    /* मोबाइल व्यू के लिए QR कोड हाइड करके डायरेक्ट बटन इनेबल करना */
    .qr-image-wrapper, .qr-note { display: none; }
    .upi-direct-btn { display: inline-block; width: 100%; text-align: center; }
}