/* 1. GLOBAL STYLES & LIGHT MODE VARIABLES
-------------------------------------------------- */
:root {
    /* Main Colors */
    --yale-blue: #1B4079;
    --air-force-blue: #4D7C8A;
    --mindaro-accent: #CBDF90;
    --text-light: #FFFFFF;
    
    /* Theme Variables (Light Mode) */
    --bg-main: #FAFAFA;
    --bg-content: #FFFFFF;
    --bg-header-footer: #FFFFFF;
    --text-primary: #111111;
    --text-secondary: #555555;
    --border-color: #ddd;
    --logo-color: var(--yale-blue);
    --heading-color: var(--yale-blue);
}

html { 
    scroll-behavior: smooth; 
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
    background-color: var(--bg-main);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

main { 
    padding-top: 80px;
   
}

h1, h2, h3, h4 { 
    color: var(--heading-color); 
}

p { 
    color: var(--text-secondary); 
}


/* 2. DARK MODE THEME
-------------------------------------------------- */
body.dark-mode {
    --bg-main: #0A192F;
    --bg-content: #1a2a44;
    --bg-header-footer: #0A192F;
    --text-primary: #E5E5E5;
    --text-secondary: #bbbbbb;
    --border-color: #333;
    --logo-color: var(--mindaro-accent);
    --heading-color: var(--mindaro-accent);
}


/* 3. HEADER & NAVIGATION
-------------------------------------------------- */
.main-header {
    background-color: var(--bg-header-footer);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}
.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.logo { 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: var(--logo-color); 
    text-decoration: none; 
}
.main-nav { 
    flex-grow: 1; 
    text-align: center; 
}
.main-nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline-flex; 
    gap: 30px; 
}
.main-nav a { 
    text-decoration: none; 
    color: var(--air-force-blue); 
    font-weight: bold; 
}
/* --- Logo and Theme Switching --- */

/* Logo container ke liye basic styling */
.logo img {
    height: 40px; /* Aap apne hisaab se height adjust kar sakte hain */
    width: auto;
}

/* Default (Light Mode) Behavior */
/* Dark mode logo ko chhupayein */
body:not(.dark-mode) .logo-dark {
    display: none;
}
/* Light mode logo ko dikhayein */
body:not(.dark-mode) .logo-light {
    display: block;
}

/* Dark Mode Behavior */
/* Light mode logo ko chhupayein */
.dark-mode .logo-light {
    display: none;
}
/* Dark mode logo ko dikhayein */
.dark-mode .logo-dark {
    display: block;
}

/* 4. THEME TOGGLE ICON
-------------------------------------------------- */
.theme-toggle {
    background: none; 
    border: none; 
    font-size: 1.2rem; 
    cursor: pointer; 
    position: relative; 
    width: 24px; 
    height: 24px;
}
.theme-toggle .fa-sun { color: #f39c12; }
.theme-toggle .fa-moon { color: #f1c40f; }
.theme-toggle i { 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: transform 0.3s, opacity 0.3s; 
}
.dark-mode .theme-toggle .fa-sun { transform: scale(0); opacity: 0; }
.dark-mode .theme-toggle .fa-moon { transform: scale(1); opacity: 1; }
.dark-mode .theme-toggle .fa-moon:hover { text-shadow: 0 0 10px var(--mindaro-accent); }
body:not(.dark-mode) .theme-toggle .fa-sun { transform: scale(1); opacity: 1; }
body:not(.dark-mode) .theme-toggle .fa-sun:hover { text-shadow: 0 0 10px var(--yale-blue); }
body:not(.dark-mode) .theme-toggle .fa-moon { transform: scale(0); opacity: 0; }


/* 5. FOOTER
-------------------------------------------------- */
.main-footer {
    padding: 20px 0;
    background-color: var(--bg-header-footer);
    border-top: 1px solid var(--border-color);
}

.footer-container {
    /* This creates the horizontal layout */
    display: flex;
    justify-content: space-between; /* Pushes items to the ends and center */
    align-items: center;          /* Vertically aligns items in the middle */
    
    /* To keep it centered and with some padding on the sides */
    max-width: 1200px; /* Or your site's max-width */
    margin: 0 auto;
    padding: 0 20px;
}

.footer-socials {
    display: flex;
    gap: 15px; /* Space between social icons */
}

.footer-socials a {
    color: var(--air-force-blue);
    font-size: 1.5rem;
    text-decoration: none;
}

.footer-center {
    text-align: center;
}

/* 6. LANDING PAGE SECTIONS
-------------------------------------------------- */
.hero { 
    position: relative; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: var(--text-light); 
    background-image: url('../images/hero-image.webp'); 
    background-size: cover; 
    background-position: center; 
    margin-top: -80px; 
}
.hero-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(27, 64, 121, 0.7); 
}
.hero-content { 
    position: relative; 
    z-index: 1; 
}
.hero h1, .hero p { color: var(--text-light); }
.cta-button { 
    display: inline-block; 
    padding: 15px 35px; 
    background-color: var(--air-force-blue); 
    color: var(--text-light); 
    text-decoration: none; 
    font-size: 1.2rem; 
    font-weight: bold; 
    border-radius: 8px; 
    border: 2px solid var(--air-force-blue);
    transition: all 0.3s ease; 
}
.cta-button:hover { 
    background-color: transparent;
    color: var(--air-force-blue);
}
body.dark-mode .cta-button:hover {
    color: var(--mindaro-accent);
    border-color: var(--mindaro-accent);
}
.how-it-works, .features, .final-cta { background-color: var(--bg-content); }
body.dark-mode .how-it-works, body.dark-mode .features { background-color: transparent; }
.steps-container { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.step { max-width: 300px; text-align: center; }
.step-icon { width: 60px; height: 60px; margin: 0 auto 20px; background-color: var(--yale-blue); color: var(--text-light); font-size: 1.8rem; font-weight: bold; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--air-force-blue); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.feature-card { background-color: var(--bg-content); border: 1px solid var(--border-color); padding: 30px; border-radius: 8px; text-align: center; }
.final-cta { text-align: center; }
body.dark-mode .final-cta { background-color: transparent; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }


/* 7. PUBLIC ITINERARIES PAGE (GALLERY)
-------------------------------------------------- */
.itineraries-page-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}
.itineraries-page-container h1 { font-size: 2.8rem; text-align: center; margin-bottom: 10px; }
.itineraries-page-container > p { text-align: center; font-size: 1.1rem; margin-bottom: 40px; }
.controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}
#search-input, #sort-select {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--air-force-blue);
    background-color: var(--bg-content);
    color: var(--text-primary);
    font-size: 1rem;
}
#search-input { 
    flex-grow: 1; 
}
.itinerary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}
.itinerary-card {
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--bg-content);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.itinerary-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
body.dark-mode .itinerary-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.card-image-container { width: 100%; height: 200px; overflow: hidden; }
.card-image-container img { width: 100%; height: 100%; object-fit: cover; }
.card-content { padding: 20px; }
.card-title { font-size: 1.3rem; margin-top: 0; }
.card-actions { display: flex; border-top: 1px solid var(--border-color); }
.card-actions .action-btn { flex: 1; text-align: center; padding: 12px; text-decoration: none; font-weight: bold; color: var(--air-force-blue); background: none; border: none; border-radius: 0; cursor: pointer; font-size: 1rem; transition: background-color 0.3s; }
.card-actions .action-btn.view-btn { border-right: 1px solid var(--border-color); }
.card-actions .action-btn:hover { background-color: var(--bg-main); }
.load-more-container { text-align: center; margin-top: 40px; }
#load-more-btn { padding: 12px 30px; font-size: 1rem; font-weight: bold; cursor: pointer; background-color: var(--air-force-blue); color: #fff; border: none; border-radius: 6px; display: inline-flex; align-items: center; gap: 10px; }


/* 8. ITINERARY VIEW PAGE
-------------------------------------------------- */
.itinerary-page-container {
    max-width: 900px;
}
.trip-summary-card, .destination-overview-card, .itinerary-display-card {
    background-color: var(--bg-content);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px 40px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}
.summary-item strong, .summary-interests strong { color: var(--text-secondary); }
.summary-item span { color: var(--text-primary); }
.itinerary-day { font-size: 1.6rem; border-bottom: 2px solid var(--air-force-blue); padding-bottom: 8px; margin-top: 25px; }
.map-link { color: var(--air-force-blue); display: inline-block; margin: 5px 0 15px 5px; font-size: 0.9rem; text-decoration: none; font-weight: bold; }
.map-link:hover { text-decoration: underline; }
.map-link i { margin-right: 5px; }
.itinerary-period { font-size: 0.9rem; text-transform: uppercase; font-weight: 600; margin-top: 20px; color: var(--text-secondary); }
.itinerary-display-card ul, .itinerary-page-container ul { list-style: none; padding-left: 5px; margin: 0; }
.itinerary-activity { padding: 10px 5px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); }
.itinerary-activity:last-child { border-bottom: none; }
.itinerary-activity i { color: var(--air-force-blue); }
/* Container for the buttons */
.itinerary-actions { 
    display: flex; 
    justify-content: flex-start; 
    gap: 15px; 
    margin-top: 30px; 
}

/* Base style for all action buttons */
.action-btn { 
    flex-grow: 1;
    padding: 12px 25px; 
    border-radius: 8px; 
    border: 2px solid var(--air-force-blue); 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 1rem;
    transition: all 0.3s ease; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
}

/* Secondary Button Style (Share with Friend) */
.action-btn:not(.book-btn) {
    background: transparent;
    color: var(--air-force-blue);
}
.action-btn:not(.book-btn):hover {
    background: var(--air-force-blue);
    color: #fff;
}

/* Primary Button Style (Book This Trip) */
.action-btn.book-btn { 
    background: var(--air-force-blue); 
    color: #fff; 
}
.action-btn.book-btn:hover {
    background: #3b6672; /* Darker shade */
    border-color: #3b6672;
}
body:not(.dark-mode) .action-btn:not(.book-btn):hover { background-color: var(--air-force-blue); color: #fff; }


/* 9. SHARE MODAL
-------------------------------------------------- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 25, 47, 0.7);
    display: none; justify-content: center; align-items: center;
    z-index: 2000; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(5px);
}
.modal-content {
    position: relative; background-color: var(--bg-main); color: var(--text-primary);
    padding: 30px; border-radius: 12px; width: 90%; max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); transform: scale(0.9); transition: transform 0.3s ease;
    border-top: 5px solid var(--air-force-blue);
}
.close-modal-btn {
    position: absolute; top: 10px; right: 10px; background: var(--bg-content);
    border: 1px solid var(--border-color); width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    color: var(--text-secondary); cursor: pointer; transition: all 0.3s;
}
.close-modal-btn:hover { transform: rotate(90deg) scale(1.1); }
.modal-overlay.visible { display: flex; opacity: 1; }
.modal-overlay.visible .modal-content { transform: scale(1); }
#user-details-view form { margin-top: 20px; display: flex; flex-direction: column; }
#user-details-view label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: bold; }
#user-details-view input { width: 100%; padding: 12px; border: 1px solid var(--border-color); background-color: var(--bg-content); color: var(--text-primary); border-radius: 6px; box-sizing: border-box; margin-bottom: 15px; font-family: inherit; font-size: 1rem; }
.share-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.share-option-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; font-size: 1rem; font-weight: bold; color: var(--text-primary); background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
.share-option-btn:hover { border-color: var(--air-force-blue); color: var(--air-force-blue); transform: translateY(-3px); }
.share-option-btn i { font-size: 2rem; color: var(--air-force-blue); }
.generate-button { width: 100%; padding: 12px; background-color: var(--air-force-blue); color: #FFFFFF; border: none; border-radius: 6px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; }
.generate-button:hover { background-color: #5a9aaa; }



/* 10. MOBILE RESPONSIVENESS
-------------------------------------------------- */
@media (max-width: 768px) {
    /* ✅ यह कोड लोगो और बर्गर को एक लाइन में लाएगा */
    .header-container {
        flex-direction: row; /* आइटम्स को कॉलम की जगह पंक्ति में रखें */
        justify-content: space-between; /* लोगो को बाईं और मेनू को दाईं ओर धकेलें */
        align-items: center; /* दोनों को वर्टिकली सेंटर करें */
    }

    /* 🛠️ हेडर की ऊंचाई कम हो गई है, इसलिए पेज के टॉप पैडिंग को एडजस्ट करें */
    main {
        padding-top: 80px; 
    }
    
    .footer-container {
        flex-direction: column;
        gap: 15px;
    }
    
    /* डेस्कटॉप नेविगेशन और थीम टॉगल को छिपाएं */
    .main-nav,
    .desktop-only {
        display: none;
    }
    
    /* बर्गर मेनू आइकन दिखाएं */
    .mobile-only {
        display: block;
    }
}

/* General container for the entire page */
.contact-page-wrapper {
    background-color: var(--bg-main); /* Assuming a light background for the whole page */
    color: var(--text-primary);
    font-family: Arial, sans-serif; /* Or your preferred font */
}

/* --- Contact Form Section --- */
.contact-form-section {
    background-color: var(--bg-content); /* White-ish background for form area */
    padding: 60px 0;
    text-align: center;
}

.contact-form-section h1 {
    font-size: 3rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.contact-form-section p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.modern-contact-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.modern-contact-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.modern-contact-form .form-group {
    flex: 1;
    text-align: left;
}

.modern-contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: normal;
    font-size: 0.95rem;
    color: var(--text-secondary); /* Lighter text for labels */
}

.modern-contact-form input[type="email"],
.modern-contact-form input[type="text"],
.modern-contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color); /* Light border */
    border-radius: 5px;
    background-color: var(--bg-main); /* Slightly off-white input fields */
    color: var(--text-primary);
    font-size: 1rem;
    box-sizing: border-box;
}

.modern-contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
    margin-bottom: 20px;
}

.modern-contact-form input::placeholder,
.modern-contact-form textarea::placeholder {
    color: var(--text-secondary); /* Lighter placeholder text */
    opacity: 0.7;
}

.modern-contact-form input:focus,
.modern-contact-form textarea:focus {
    outline: none;
    border-color: var(--air-force-blue);
    box-shadow: 0 0 5px rgba(77, 124, 138, 0.3);
}

.modern-contact-form .submit-button {
    background-color: var(--air-force-blue); /* Teal color */
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Full width as in design */
    max-width: 300px; /* Adjust as needed */
    margin-top: 10px;
}

.modern-contact-form .submit-button:hover {
    background-color: #38a7bd; /* Slightly darker teal on hover */
}

.modern-contact-form .submit-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.modern-form-status {
    margin-top: 20px;
    font-size: 1.1rem;
    min-height: 25px; /* Prevent layout shift */
}

/* --- Contact Info Section --- */
.contact-info-section {
    background-color: #F0F2F5; /* Light grey background for the info section */
    background-color: var(--bg-secondary); /* Use your secondary background variable */
    padding: 60px 0;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    text-align: center;
}

.info-card {
    background-color: transparent; /* No specific card background */
    padding: 20px;
}

.info-card .icon-circle {
    width: 80px;
    height: 80px;
    background-color: var(--air-force-blue); /* Teal circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.info-card .icon-circle i {
    font-size: 2.5rem;
    color: white;
}

.info-card h3 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.info-card p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
    line-height: 1.4;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .modern-contact-form .form-row {
        flex-direction: column;
        gap: 0; /* Remove gap for single column */
    }

    .modern-contact-form .form-group {
        margin-bottom: 20px; /* Add margin back for vertical stacking */
    }

    .modern-contact-form .submit-button {
        max-width: 100%; /* Full width on smaller screens */
    }

    .contact-info-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
    }
}
/* 11. BURGER MENU & MOBILE NAVIGATION
-------------------------------------------------- */

/* पहले, मोबाइल और डेस्कटॉप पर दिखने वाले एलिमेंट्स को कंट्रोल करें */
.mobile-only {
    display: none; /* डिफ़ॉल्ट रूप से छिपा हुआ */
}

/* बर्गर मेनू आइकन की स्टाइल */
.burger-menu {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1002;
}

/* मोबाइल नेविगेशन पैनल जो साइड से आएगा */
.mobile-nav-panel {
    position: fixed;
    top: 0;
    right: -100%; /* स्क्रीन के दाईं ओर छिपा हुआ */
    width: 280px;
    height: 100%;
    background-color: var(--bg-content);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 1001;
    transition: right 0.3s ease-in-out;
    padding: 60px 20px 20px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* जब मेनू खुलेगा, तो यह क्लास body में जुड़ेगी */
body.mobile-nav-open .mobile-nav-panel {
    right: 0; /* पैनल को स्क्रीन पर लाएं */
}

/* मेनू बंद करने का बटन */
.close-menu-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: var(--text-secondary);
    cursor: pointer;
}

/* मोबाइल मेनू के लिंक्स */
.mobile-nav-panel ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.mobile-nav-panel li a {
    display: block;
    padding: 15px 10px;
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--text-primary);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
}

/* मोबाइल मेनू के अंदर थीम टॉगल */
.mobile-theme-toggle-container {
    margin-top: auto; /* इसे नीचे धकेलें */
    padding: 20px 10px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}


/* RESPONSIVE MEDIA QUERY (यह सब कुछ कंट्रोल करेगा) */
@media (max-width: 768px) {
    /* डेस्कटॉप नेविगेशन और थीम टॉगल को छिपाएं */
    .main-nav,
    .desktop-only {
        display: none;
    }
    
    /* बर्गर मेनू आइकन दिखाएं */
    .mobile-only {
        display: block;
    }

    /* हेडर में आइटम्स को ठीक से अलाइन करें */
    .header-container {
        justify-content: space-between;
    }

    main {
        padding-top: 80px; /* हेडर की हाइट कम होने पर एडजस्ट करें */
    }
}
/* Sunishchit karein ki yeh CSS aapki file mein hai */
.overview-image-container {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
    border-radius: 8px; /* Sets rounded corners for the container */
    overflow: hidden;   /* This hides the sharp corners of the image inside */
}

.overview-image-container img {
    width: 100%;
    display: block;
    
    /* 1. Fixes the image size */
    height: 220px; /* You can change this value (e.g., 200px, 250px) */
    object-fit: cover; /* This prevents the image from stretching */
    
    /* 2. Ensures rounded corners on the image itself */
    border-radius: 8px;
}