Custom background color for the main sections

.hero-section {
    background-color: #cdff07; /* Orange/Yellow from the image */
    background-image: linear-gradient(to bottom, #252700, #6a6713); /* Optional gradient for depth */
    min-height: 80vh; /* Make the hero section take up most of the viewport height */
    display: flex;
    align-items: center;
    padding-top: 0 !important; /* Adjust padding if necessary */
    padding-bottom: 50px;
}

/* Specific styling for the Call to Action buttons */
.btn-primary {
    background-color: #007bff; /* Blue for CALL NOW */
    border-color: #007bff;
}
.btn-success {
    background-color: #28a745; /* Green for CHAT NOW */
    border-color: #28a745;
}

.cta-btn {
    background-color: #ff9800; /* सामान्य पीला रंग */
  
    color: #ffffff; /* टेक्स्ट का रंग */
    transition: background-color 0.3s, border-color 0.3s; /* स्मूथ ट्रांजिशन */
}

.cta-btn:hover {
    background-color: #6a6713; /* Hover करने पर गहरा पीला रंग */
    
    color: #ffffff;
}

/* 1. सुनिश्चित करें कि छोटे बटन (btn-sm) का साइज़ आइकॉन के लिए बिलकुल सही हो */
.btn-sm {
    /* सामान्य Bootstrap btn-sm साइज़ को आइकॉन के लिए ठीक करें */
    padding: 0.5rem; /* पैडिंग को थोड़ा बढ़ाएँ */
    font-size: 1rem; /* आइकॉन का साइज़ बढ़ाएँ */
    line-height: 1; /* यह सुनिश्चित करता है कि आइकॉन बीच में रहे */
}

/* 2. 'rounded-circle' को एक निश्चित और समान साइज़ दें */
.social-icons .rounded-circle {
    /* चौड़ाई और ऊँचाई को निश्चित साइज़ पर सेट करें */
    width: 35px;
    height: 35px;
    
    /* आइकॉन को बीच में (सेंटर) करने के लिए Flexbox का उपयोग करें */
    display: flex;
    align-items: center; /* ऊर्ध्वाधर केंद्र */
    justify-content: center; /* क्षैतिज केंद्र */
    
    /* यह सुनिश्चित करता है कि फॉन्ट ऑसम आइकॉन (i टैग) ओवरफ्लो न हों */
    font-size: 18px; /* आइकॉन का अंतिम साइज़ */
}

/* 3. होवर इफेक्ट जोड़ें (वैकल्पिक) */
.social-icons a:hover {
    opacity: 0.8;
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 10px;
    left: 10px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s;
}

/* Floating Call Button (above WhatsApp button) */
/* ============================= */
/* FLOATING CALL & WHATSAPP BASE */
/* ============================= */

.call-float,
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    left: 10px;
    color: #fff;
    border-radius: 50%;
    font-size: 30px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

/* Individual colors & position */
.call-float {
    bottom: 80px;
    background-color: #ff5722;
}

.whatsapp-float {
    bottom: 10px;
    background-color: #25d366;
}

/* ============================= */
/* HOVER EFFECT – YELLOW + SCALE */
/* ============================= */

.call-float:hover,
.whatsapp-float:hover {
    background-color: #ff9800; /* Yellow */
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}

/* ============================= */
/* PULSE ANIMATION */
/* ============================= */

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

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

@media (max-width: 768px) {
    .call-float,
    .whatsapp-float {
        width: 45px;
        height: 45px;
        font-size: 22px;
        left: 5px;
    }

    .call-float {
        bottom: 55px;
    }

    .whatsapp-float {
        bottom: 5px;
    }
}
/* Styling for the vehicle image container to replicate the image composition */
.vehicle-images {
    /* Set max width to control the vehicle image spread */
    max-width: 900px; 
    margin: 0 auto;
}

/* Custom button style for 'Pay Now' */
.custom-pay-btn {
    background-color: #6a6713; /* Specific reddish-orange */
    border: none !important;
    color: white;
}
/* Styling for Feature Icons */
.feature-icon-box {
    padding: 15px;
}

/* Styling for Offer Banner */
.offer-banner {
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* Custom button style for the banner link */
.custom-banner-btn {
    background-color: #ff9800; /* Orange color */
    border-color: #ff9800;
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Styling for Taxi Cards */
.custom-taxi-card {
    border-radius: 10px;
    border: 1px solid #eee;
    transition: transform 0.3s;
    position: relative;
}
.custom-taxi-card:hover {
    transform: translateY(-5px);
}

/* 1. पूरे कार्ड के टेक्स्ट का रंग सेट करें */
.custom-taxi-card {
    color:#6a6713 !important; /* !important सुनिश्चित करता है कि यह अन्य शैलियों को ओवरराइड करे */
}

/* 2. कार्ड टाइटल (Swift Dzire) को पीला करें (h5 टैग भी) */
.custom-taxi-card h5 {
    color: #6a6713!important;
}

/* 3. कीमत (₹2000) को पीला करें (यह text-success को ओवरराइड करेगा) */
.custom-taxi-card .text-success {
    color: #6a6713!important;
}

/* 4. Best Selling बैज के टेक्स्ट को पीला करें (यह text-dark को ओवरराइड करेगा) */
.custom-taxi-card .badge.bg-warning.text-dark {
    color: #6a6713 !important;
}

/* 5. टेबल डेटा को पीला करें */
.custom-taxi-card table,
.custom-taxi-card table td {
    color: #6a6713!important;
}

/* 6. पार्किंग और टोल चार्ज वाले छोटे टेक्स्ट को पीला करें */
.custom-taxi-card small {
    color: #6a6713 !important;
}

/* 7. बटन के अंदर के टेक्स्ट को वापस सफ़ेद या काला रखें ताकि वह दिख सके */
/* उदाहरण के लिए, हमने इसे सफ़ेद रखा है */
.custom-taxi-card .btn {
    color: white !important; /* बटन के अंदर के टेक्स्ट को सफ़ेद रखें */
}

/* सामान्य बटन (CHAT NOW और CALL NOW) को पीला रंग दें */
.custom-yellow-btn {
    background-color: #ff9800; /* पीला रंग */
    border-color: #ff9800;
    color: #212529; /* टेक्स्ट का रंग (काला/ग्रे) */
    transition: background-color 0.3s, border-color 0.3s; /* स्मूथ ट्रांजिशन */
}

/* Hover करने पर बटन को हरा रंग दें */
.custom-yellow-btn:hover {
    background-color: #6a6713; /* हरा रंग (Bootstrap success) */
    border-color: #6a6713;
    color: white; /* टेक्स्ट का रंग (सफ़ेद) */
}



/* Price Details Table Styling */
.price-details table td {
    font-size: 0.9rem;
    padding: 0.2rem 0.5rem !important; /* Adjust padding for compact look */
}
.price-details table {
    margin-bottom: 5px;
}
/* Styling for Outstation Section Background */
.outstation-section {
    /* Set a light background similar to the image (pale blue/grey landscape) */
    background-color: #f0f8ff;
    /* You would need to add the actual landscape image here as a background-image */
    background-image: url('img/artiga.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: Gives a parallex-like effect */
}

/* Styling for Outstation Cards */
.outstation-taxi-card {
    border-radius: 10px;
    border: 1px solid #ddd;
    background-color: white; /* Ensure cards are white over the background image */
    transition: transform 0.3s;
}
.outstation-taxi-card:hover {
    transform: translateY(-5px);
}
.outstation-taxi-card ul {
    padding-left: 15px; /* Adjust list padding */
}

/* Styling for Airport Transfer Cards (simple white cards) */
.airport-taxi-card {
    border-radius: 10px;
    border: 1px solid #eee;
    transition: transform 0.3s;
}
.airport-taxi-card:hover {
    transform: translateY(-5px);
}
/* Styling for Tour Packages Section */
.tour-packages-section {
    background-color: #f8f9fa; /* Light grey background for the entire section */
}

/* Package Card Styling (Side-by-side layout) */
.package-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.3s;
    background-color: white;
}
.package-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Price Table Styling */
.package-price-table {
    margin-bottom: 0.5rem;
}
.package-price-table td {
    padding: 0.1rem 0.5rem;
    border-top: none;
    font-size: 0.9rem;
}
/* Ensure the total card height adjusts nicely on smaller screens */
@media (max-width: 768px) {
    .package-card {
        flex-direction: column;
    }
    .package-img-container {
        width: 100% !important;
        height: 200px;
    }
}
/* Styling for FAQ Section */
.about-faq-section {
    background-color: #ffffff; /* White background */
}

/* FAQ Accordion Styling */
.accordion-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 5px;
}

.accordion-button {
    background-color: #f7f7f7;
    color: #333;
    font-size: 1rem;
}

.accordion-button:not(.collapsed) {
    color: #ff9800; /* Orange color when open */
    background-color: #ffe0b2; /* Light orange background when open */
    box-shadow: none;
}

.accordion-body {
    background-color: #ffffff;
    font-size: 0.95rem;
    color: #555;
}

/* Affiliation Logos Styling (ensure logos don't stretch too much) */
.affiliation-logos img {
    opacity: 0.8;
    transition: opacity 0.3s;
    filter: grayscale(100%);
}

.affiliation-logos img:hover {
    opacity: 1;
    filter: none;
}
/* Testimonial Section Styling */
.testimonial-section {
    background-color: #f8f9fa;
}
.testimonial-card {
    border-radius: 10px;
    background-color: white;
}
.review-text {
    line-height: 1.8;
}

/* Illustration Section Styling */
.illustration-section {
    position: relative;
    /* Optional: If the illustration image is very tall, you might want to control height */
    overflow: hidden; 
}
.illustration-image {
    display: block;
    /* Ensure the illustration covers the section, adjust based on your actual image */
    max-height: 400px; 
    object-fit: cover;
}


/* Detailed Footer Styling */
.detailed-footer {
    background-color: #333 !important; /* Dark charcoal color */
    color: white;
    font-size: 0.95rem;
}

.footer-contact-info p {
    font-size: 0.85rem;
}

.social-links a {
    transition: color 0.3s;
}

.social-links a:hover {
    color: #ff9800 !important; /* Hover effect */
}

/* Custom background color for the main sections */
.hero-section {
    background-color: #ff9800; /* Orange/Yellow from the image */
    background-image: linear-gradient(to bottom, #252700, #6a6713); /* Optional gradient for depth */
    min-height: 80vh; /* Make the hero section take up most of the viewport height */
    display: flex;
    align-items: center;
    padding-top: 0 !important; /* Adjust padding if necessary */
    padding-bottom: 50px;
}

/* Specific styling for the Call to Action buttons (यदि HTML में इनलाइन नहीं किया गया है) */
/*
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}
*/

/* ------------------------------------------------ */
/* 🛠️ 1. सोशल आइकॉन्स फिक्स (समान साइज़ और सेंटरिंग) */
/* ------------------------------------------------ */

/* सुनिश्चित करें कि छोटे बटन (btn-sm) का साइज़ आइकॉन के लिए बिलकुल सही हो */
.btn-sm {
    padding: 0.5rem; /* पैडिंग को थोड़ा बढ़ाएँ */
    font-size: 1rem; /* आइकॉन का साइज़ बढ़ाएँ */
    line-height: 1; /* यह सुनिश्चित करता है कि आइकॉन बीच में रहे */
}

/* 'rounded-circle' को एक निश्चित और समान साइज़ दें */
.social-icons .rounded-circle {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center; 
    justify-content: center; 
    font-size: 18px; /* आइकॉन का अंतिम साइज़ */
}

/* होवर इफेक्ट जोड़ें (वैकल्पिक) */
.social-icons a:hover {
    opacity: 0.8;
}

/* Custom button style for 'Pay Now' */
.custom-pay-btn {
    background-color: #6a6713; /* Specific reddish-orange */
    border: none !important;
    color: white;
}

/* ------------------------------------------------ */
/* 🛠️ 2. फ्लोटिंग बटन स्टाइलिंग */
/* ------------------------------------------------ */

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 10px;
    left: 10px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s;
}

/* Floating Call Button (above WhatsApp button) */
.call-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 80px; /* Positioned above the WhatsApp button */
    left: 10px;
    background-color: #ff5722; /* Orange color */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s;
}

/* ------------------------------------------------ */
/* 🛠️ 3. अन्य सेक्शन स्टाइलिंग (कोई बदलाव नहीं किया गया) */
/* ------------------------------------------------ */

.vehicle-images {max-width: 900px; margin: 0 auto;}
.feature-icon-box {padding: 15px;}
.offer-banner {border: 1px solid #ddd; box-shadow: 0 4px 8px rgba(0,0,0,0.1); position: relative; overflow: hidden;}
.custom-banner-btn {background-color: #ff9800; border-color: #ff9800; color: white !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
.custom-taxi-card {border-radius: 10px; border: 1px solid #eee; transition: transform 0.3s; position: relative;}
.custom-taxi-card:hover {transform: translateY(-5px);}
.price-details table td {font-size: 0.9rem; padding: 0.2rem 0.5rem !important;}
.price-details table {margin-bottom: 5px;}
.outstation-section {background-color: #f0f8ff; background-image: url('path/to/outstation_bg_landscape.jpg'); background-size: cover; background-position: center; background-attachment: fixed;}
.outstation-taxi-card {border-radius: 10px; border: 1px solid #ddd; background-color: white; transition: transform 0.3s;}
.outstation-taxi-card:hover {transform: translateY(-5px);}
.outstation-taxi-card ul {padding-left: 15px;}
.airport-taxi-card {border-radius: 10px; border: 1px solid #eee; transition: transform 0.3s;}
.airport-taxi-card:hover {transform: translateY(-5px);}
.tour-packages-section {background-color: #f8f9fa;}
.package-card {border-radius: 8px; overflow: hidden; position: relative; transition: box-shadow 0.3s; background-color: white;}
.package-card:hover {box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;}
.package-price-table {margin-bottom: 0.5rem;}
.package-price-table td {padding: 0.1rem 0.5rem; border-top: none; font-size: 0.9rem;}
.about-faq-section {background-color: #ffffff;}
.accordion-item {border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px;}
.accordion-button {background-color: #f7f7f7; color: #333; font-size: 1rem;}
.accordion-button:not(.collapsed) {color: #ff9800; background-color: #ffe0b2; box-shadow: none;}
.accordion-body {background-color: #ffffff; font-size: 0.95rem; color: #555;}
.affiliation-logos img {opacity: 0.8; transition: opacity 0.3s; filter: grayscale(100%);}
.affiliation-logos img:hover {opacity: 1; filter: none;}
.testimonial-section {background-color: #f8f9fa;}
.testimonial-card {border-radius: 10px; background-color: white;}
.review-text {line-height: 1.8;}
.illustration-section {position: relative; overflow: hidden;}
.illustration-image {display: block; max-height: 400px; object-fit: cover;}
.detailed-footer {background-color: #333 !important; color: white; font-size: 0.95rem;}
.footer-contact-info p {font-size: 0.85rem;}
.social-links a {transition: color 0.3s;}
.social-links a:hover {color: #ff9800 !important;}


/* ==================================================================== */
/* 📱 4. मोबाइल अनुकूलन (Mobile Responsiveness) - अस्त-व्यस्त फिक्स */
/* ==================================================================== */

@media (max-width: 768px) {
    
    /* A. हीरो सेक्शन और हेडिंग */
    .hero-section {
        min-height: auto; 
        padding-top: 30px !important;
    }
    .hero-section h1 {
        font-size: 1.8rem !important; 
    }
    
    /* B. टॉप हेडर/नेविगेशन बार फिक्स (फ़ोन, Pay Button, Social Icons) */
    .d-flex.align-items-center {
        flex-direction: column !important; /* सभी तत्वों को एक-दूसरे के नीचे लाएँ */
        justify-content: center !important;
        padding: 10px 0; 
    }
    
    /* फ़ोन नंबर, बटन, और सोशल आइकॉन्स के बीच की दूरी और चौड़ाई ठीक करें */
    .d-flex.align-items-center > span, 
    .d-flex.align-items-center > button,
    .d-flex.align-items-center > .social-icons {
        width: 100%; 
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 10px !important; 
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    /* C. मुख्य CTA बटन फिक्स (CALL NOW/CHAT NOW) */
    .d-flex.justify-content-center {
        flex-direction: column !important;
    }
    
    /* दोनों बटनों को पूरी चौड़ाई दें और मार्जिन ठीक करें */
    .d-flex.justify-content-center a {
        width: 80%; 
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 15px !important; 
        font-size: 1.1rem;
        padding: 10px !important;
    }

    /* D. टूर/टैक्सी पैकेज कार्ड्स (यदि आप flexbox या grid का उपयोग कर रहे हैं) */
    .row > [class*='col-'] {
        width: 100%; 
        margin-bottom: 20px;
    }
    .package-card {
        flex-direction: column !important; 
    }
    .package-img-container {
        width: 100% !important;
        height: 200px;
        object-fit: cover;
    }

    /* E. फ़्लोटिंग बटन फिक्स */
    .whatsapp-float,
    .call-float {
        width: 45px; 
        height: 45px;
        font-size: 22px;
        left: 5px; 
    }
    .call-float {
        bottom: 55px; 
    }
    .whatsapp-float {
        bottom: 5px;
    }

}
/* Custom CSS for Responsive Layout */

/* Image container styling for small screens (default for Bootstrap flex-column) */
.package-img-container-responsive {
    width: 100%; /* Full width on mobile */
    /* Ensure the image container has a set height on small screens 
       so the image displays correctly before the content is shown */
    max-height: 200px; 
}

/* Image container styling for medium and larger screens (md breakpoint) */
@media (min-width: 768px) {
    .package-img-container-responsive {
        width: 40%; /* 40% width on tablet/desktop */
        height: auto; /* Auto height on desktop, rely on card height */
    }

    /* Ensure the card is a row on medium/large screens */
    .card.package-card.d-md-flex.flex-md-row {
        height: 100%; /* Important for equal height rows in the column */
    }
}

/* Image inside the container to cover the space */
.package-img-container-responsive img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Optional: To make the table compact on mobile devices */
.package-price-table {
    font-size: 0.85rem; 
}
/* --- Responsive Fix for Tour Package Cards --- */

/* 1. Default (Mobile First): Stack Image and Content Vertically */
.package-card {
    /* Use flex-column by default (mobile view) */
    display: flex;
    flex-direction: column;
}

/* Image container takes full width on small screens */
.package-img-container-responsive {
    width: 100%;
    /* Gives a nice height to the image when stacked vertically */
    min-height: 180px; 
    overflow: hidden;
}

/* Ensure image covers the container */
.package-img-container-responsive img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* 2. Desktop/Tablet Fix: Side-by-Side Content within the Card */
@media (min-width: 768px) {
    .package-card {
        /* Switch to horizontal layout (row) on medium screens and up */
        flex-direction: row !important;
        height: 100%; /* Ensures cards in a row are equal height */
    }

    .package-img-container-responsive {
        /* Image container is 40% width when horizontal */
        width: 40% !important; 
        /* Reset min-height as it will now flex horizontally */
        min-height: 100%; 
    }
    
    /* Ensure the card body takes the remaining space (60%) */
    .package-card .card-body {
        flex-grow: 1; /* Takes up the remaining space */
        width: 60%;
    }
}