/*
Theme Name: Custom Theme
Theme URI: https://example.com/
Author:  Custom Theme
Author URI: https://example.com/
Description: HTML template converted to WordPress theme.
Version: 1.0
*/

.about-content-scroll {
    height: 600px; /* Aap is height ko apni zaroorat ke hisab se kam ya zyada kar sakte hain */
    overflow-y: auto; /* Jab content height se zyada ho, tab vertical scrollbar dikhata hai */
    border: 1px solid #490D59; /* Optional: halka sa border tak box alag dikhe */
    padding: 20px; /* Box ke andar space tak content chipka hua na lage */
    margin-top: 20px; /* "About Us" heading aur is box ke beech mein space */
    background-color: #fdfdfd; /* Optional: halka sa background color */
    border-radius: 8px; /* Optional: kone gol karne ke liye */
}

/* Paragraphs ke beech mein space ke liye */
.about-content-scroll p {
    margin-bottom: 1rem;
}

/* Aakhri paragraph ke baad extra space hatane ke liye */
.about-content-scroll p:last-child {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .pt-lg-2 {
        padding-top: 3.5rem !important;
    }
}

.service-content {
    padding-top: 25px;
}

span.sec-subtitle_1 {
    display: block;
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 0.3em;
    color: var(--theme-color);
    font-weight: 700;
    font-family: var(--title-font);
    line-height: 1;
    margin-top: -0.1em;
    margin-bottom: 25px;
}

/* New styles for the simple service card layout */
.simple-service-card {
    text-align: center;
    text-decoration: none;
    display: block; /* Makes the whole area a block-level link */
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* Ensures image corners are rounded */
    transition: all 0.3s ease;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.simple-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    color: #0056b3; /* Optional: Change text color on hover */
}

.simple-service-card img {
    width: 100%;
    height: 450px; /* YE SABSE ZAROORI HAI: Sabhi images ko ek height deta hai */
    object-fit: cover; /* Image ko distort kiye bina area fill karne ke liye */
    display: block;
}

.simple-service-card .card-content {
    padding: 20px 15px;
}

.simple-service-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.simple-service-card .card-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0;
}
section.space-extra-bottom_1 {
    /* padding-bottom: 70px; */
    padding-top: 70px;
}
/* "Contact Us Now" Button ke liye naya style */
.contact-us-button {
    display: inline-block;
    background-color: #ff0000; /* Tez Lal Rang */
    color: #ffffff; /* Safed Text */
    font-size: 1.25rem; /* Bada Font Size */
    font-weight: 700; /* Bold Text */
    text-transform: uppercase; /* Sabhi akshar bade */
    text-decoration: none;
    padding: 15px 40px; /* Button ke andar space */
    border-radius: 50px; /* Kinare poori tarah gol karne ke liye (Pill shape) */
    border: 2px solid #000000; /* Screenshot jaisa kala border */
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Halki si parchhayi */
}

.contact-us-button:hover {
    background-color: #d60000; /* Hover par thoda gehra lal rang */
    transform: translateY(-3px); /* Hover par halka sa upar uthega */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* New styles for the red service link buttons */
.service-button-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Buttons ke beech mein space ke liye */
    width: 100%;
    max-width: 500px; /* Buttons ki max-width, aap ise adjust kar sakte hain */
    margin: 0 auto; /* Center align in mobile view */
}

@media (min-width: 992px) {
    .service-button-list {
        margin: 0; /* Un-center for desktop view */
    }
}

.service-link-button {
    display: block;
    background-color: #ff0000; /* Tez Lal Rang */
    color: #ffffff;
    font-size: 1.1rem; /* Font ka size */
    font-weight: 600; /* Thoda bold */
    text-align: center;
    text-decoration: none;
    padding: 16px 20px;
    border-radius: 50px; /* Pill shape */
    border: 2px solid #000000; /* Kala border */
    transition: all 0.3s ease;
}

.service-link-button:hover {
    background-color: #d60000; /* Hover par thoda gehra rang */
    transform: scale(1.03); /* Hover par halka sa bada hoga */
    color: #fff;
}


/* Google Map ke liye naye styles */
.map-container {
    position: relative;
    overflow: hidden;
    padding-top: 100%; /* 1:1 Aspect Ratio. Agar map ko lamba karna hai to 125% karein */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (min-width: 992px) {
    .pt-lg-2 {
        padding-top: 3.5rem !important;
        padding-left: 134px;
    }
}

.zing-summer-cta {
        padding: 80px 0; /* Section ke upar-neeche space */
        text-align: center;
        background-color: #ffffff; /* Safed background */
    }

    .zing-summer-cta .headline {
        color: #ff0000; /* Tez Lal Rang */
        font-size: 3rem; /* Aap font size adjust kar sakte hain */
        font-weight: 700; /* Bold */
        line-height: 1.3;
        margin-bottom: 40px; /* Heading aur button ke beech space */
    }

    .zing-summer-cta .cta-button {
        display: inline-block;
        background-color: #ff0000;
        color: #ffffff;
        font-size: 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        padding: 15px 45px;
        border-radius: 50px; /* Pill shape */
        border: 2px solid #000000; /* Kala border */
        transition: all 0.3s ease;
    }

    .zing-summer-cta .cta-button:hover {
        background-color: #d60000; /* Hover par thoda gehra lal */
        transform: scale(1.05); /* Hover par halka sa bada hoga */
    }

    /* Mobile screens ke liye font size chota karna */
    @media (max-width: 768px) {
        .zing-summer-cta .headline {
            font-size: 2.2rem;
        }
    }
.balloon-decor-section {
        padding: 80px 0; /* Section ke upar-neeche space */
        background-color: #f9f9f9; /* Halkha sa grey background */
    }

    .balloon-decor-section .section-title-red {
        color: #ff0000; /* Tez Lal Rang */
        font-weight: 700;
        margin-bottom: 50px; /* Heading aur content ke beech space */
    }

    .balloon-decor-section .sec-text {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #333;
    }

    .balloon-decor-section .cta-button-red {
        display: inline-block;
        background-color: #ff0000;
        color: #ffffff;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        padding: 15px 35px;
        border-radius: 50px; /* Pill shape */
        border: 2px solid #000000; /* Kala border */
        transition: all 0.3s ease;
    }

    .balloon-decor-section .cta-button-red:hover {
        background-color: #d60000;
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    }

section.space-extra-bottom_2{
        padding-top: 0px;
    padding-bottom: 100px;

}

/* =================================================
   Character Image Slider Section (Static)
   ================================================= */
.character-slider-section {
    background-color: #111; /* डार्क बैकग्राउंड */
    position: relative;
    overflow: hidden; /* Arrows ko section ke bahar jane se rokne ke liye */
}

.character-slider-heading {
    color: red; /* आपकी थीम का लाल रंग */
    font-family: 'Fredoka', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 40px;
    font-weight: 600;
}

/* Slider container */
.character-slider {
    max-width: 650px; /* स्लाइडर की चौड़ाई */
    margin: 0 auto;
    position: relative;
}

.character-slider .slide-item {
    position: relative;
    background-color: #000;
    border: 3px solid #fff; /* इमेज के चारों ओर सफेद बॉर्डर */
    border-radius: 8px;
    overflow: hidden;
}

.character-slider .slide-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption Overlay */
.character-slider .slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 30px 20px 15px 20px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
}

/* =================================================
   Character Image Slider Section (Static)
   ================================================= */
.character-slider-section {
    background-color: #111; /* डार्क बैकग्राउंड */
    position: relative;
    overflow: hidden; /* Arrows ko section ke bahar jane se rokne ke liye */
}

.character-slider-heading {
    color: red; /* आपकी थीम का लाल रंग */
    font-family: 'Fredoka', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 40px;
    font-weight: 600;
}

/* Slider container */
.character-slider {
    max-width: 650px; /* स्लाइडर की चौड़ाई */
    margin: 0 auto;
    position: relative;
}

.character-slider .slide-item {
    position: relative;
    background-color: #000;
    border: 3px solid #fff; /* इमेज के चारों ओर सफेद बॉर्डर */
    border-radius: 8px;
    overflow: hidden;
}

.character-slider .slide-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption Overlay */
.character-slider .slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 30px 20px 15px 20px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
}

/* =================================================
   Character Image Slider Section (Light & Improved)
   ================================================= */

/* Section Background */
.character-slider-section-light {
    background-color: #F0F6FA; /* आपका पसंदीदा हल्का नीला-ग्रे रंग */
    padding: 100px 0;
    overflow: hidden;
}

/* Heading with Red Accent Underline */
.character-slider-heading {
    color: #2d3748; /* एक गहरा, प्रोफेशनल नीला-ग्रे रंग */
    font-family: 'Fredoka', sans-serif;
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 600;
}
.character-slider-heading::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: red; /* आपकी थीम का लाल रंग */
    margin: 15px auto 50px;
    border-radius: 2px;
}

/* Slider Container */
.character-slider-v2 {
    position: relative;
}

/* Individual Slide Styling */
.character-slider-v2 .slide-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    /* हल्की छाया जो इसे पेज से ऊपर उठाती है */
    box-shadow: 0 10px 25px rgba(45, 55, 72, 0.1); 
    margin: 0 15px; /* स्लाइड्स के बीच थोड़ी जगह */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: scale(0.9); /* डिफ़ॉल्ट रूप से स्लाइड्स थोड़ी छोटी होंगी */
    opacity: 0.7;
}

/* Active (Center) Slide Styling */
.character-slider-v2 .slick-center .slide-item {
    transform: scale(1); /* बीच वाली स्लाइड अपने असली आकार में आ जाएगी */
    opacity: 1;
    box-shadow: 0 15px 40px rgba(45, 55, 72, 0.2);
}

.character-slider-v2 .slide-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption Overlay */
.character-slider-v2 .slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 40px 20px 20px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
    /* टेक्स्ट पर हल्की छाया ताकि वह और साफ दिखे */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Arrows (Next/Prev Buttons) Styling */
.character-slider-v2 .slick-arrow {
    background: #fff;
    color: #2d3748;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.2);
    transition: all 0.3s ease;
}
.character-slider-v2 .slick-arrow:hover {
    background: red; /* होवर पर लाल रंग */
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}
.character-slider-v2 .slick-prev {
    left: 0px;
}
.character-slider-v2 .slick-next {
    right: 0px;
}

/* Dots Styling */
.character-slider-v2 .slick-dots {
    bottom: -50px;
}
.character-slider-v2 .slick-dots li button:before {
    font-size: 12px;
    color: #a0aec0; /* हल्का ग्रे रंग */
    opacity: 1;
}
.character-slider-v2 .slick-dots li.slick-active button:before {
    color: red; /* एक्टिव डॉट के लिए लाल रंग */
}

/* CTA Button Styling */
.character-slider-cta {
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.3); /* लाल रंग की हल्की छाया */
    transition: all 0.3s ease;
    background-color:red;
    color: white;
}
.character-slider-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(255, 77, 77, 0.5);
}


/* Responsive adjustments for mobile */
@media (max-width: 991px) {
    .character-slider-section-light {
        padding: 80px 0;
    }
    .character-slider-v2 .slide-item {
        transform: scale(1); /* मोबाइल पर सभी स्लाइड एक ही आकार की होंगी */
        opacity: 1;
        margin: 0;
    }
    .character-slider-v2 .slick-arrow {
        width: 40px;
        height: 40px;
    }
    .character-slider-v2 .slick-prev {
        left: 15px;
    }
    .character-slider-v2 .slick-next {
        right: 15px;
    }
}

/* =================================================
   Fun Telegram Info Section
   ================================================= */
.fun-telegram-section {
    background-color: #fff;
}

.telegram-info-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(45, 55, 72, 0.12);
    position: relative;
}

.telegram-info-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Optional: Decorative element behind the image */
.telegram-info-img::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.1;
    border-radius: 12px;
    z-index: -1;
}

.info-title {
    color: red; /* Red color heading */
    font-family: 'Fredoka', sans-serif;
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.info-description {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 35px;
}

.info-description .text-red {
    color: red;
    font-weight: 500;
}

.info-features-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    /* On large screens, split the list into two columns */
    column-count: 2;
    column-gap: 40px;
}

.info-features-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    /* This helps prevent list items from breaking across columns */
    break-inside: avoid-column;
}

/* Custom checkmark icon for the list */
.info-features-list li::before {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid icon */
    color: red; /* Red icon */
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 6px;
}

/* Responsive: On mobile, use a single column for the list */
@media (max-width: 991px) {
    .info-features-list {
        column-count: 1;
    }
}
@media (max-width: 767px) {
    .info-title {
        font-size: 2.2rem;
    }
}
/* =================================================
   Character Showcase Section
   ================================================= */
.character-showcase-section {
    background-color: #F9FAFB; /* बहुत हल्का, साफ़ ग्रे बैकग्राउंड */
}

.showcase-title {
    color: #1a202c;
    font-family: 'Fredoka', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
}
.showcase-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: red;
    margin: 20px auto 0;
    border-radius: 2px;
}

.showcase-description {
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Character Grid */
.character-icon-grid {
    display: grid;
    gap: 30px;
    margin-top: 60px;
    /* यह जादुई लाइन ग्रिड को अपने आप रेस्पॉन्सिव बनाती है */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Individual Card Styling */
.character-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease-in-out;
}

/* Hover Effect */
.character-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(45, 55, 72, 0.2);
    border-color: red;
}

.card-icon {
    font-size: 3rem; /* बड़ा आइकन */
    color: red; /* लाल रंग */
    margin-bottom: 20px;
    line-height: 1;
}

.card-title {
    font-family: 'Jost', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: #2d3748;
    margin: 0;
}

/* Special styling for the "And More" card */
.and-more-card {
    background: linear-gradient(135deg, #ff6b6b, red);
    color: #fff;
}
.and-more-card .card-icon {
    color: #fff;
}
.and-more-card .card-title {
    color: #fff;
    font-weight: 700;
}
/* =================================================
   Delivery Process Section
   ================================================= */
.process-section {
    background-color: #fff;
}

.process-title {
    color: #1a202c;
    font-family: 'Fredoka', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 70px;
}
.process-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: red;
    margin: 20px auto 0;
    border-radius: 2px;
}

.process-list {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

/* The connecting vertical line */
.process-list::before {
    content: '';
    position: absolute;
    top: 25px; /* Start after the first circle's top half */
    left: 24px; /* Center of the 50px circle */
    bottom: 25px; /* End before the last circle's bottom half */
    width: 2px;
    background-color: #e2e8f0; /* Light grey line */
    z-index: 1;
}

.process-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    margin-bottom: 40px;
}
.process-item:last-child {
    margin-bottom: 0;
}

.process-number {
    flex-shrink: 0; /* Prevents the circle from shrinking */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red; /* Red circle */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
    z-index: 2; /* To be on top of the line */
    box-shadow: 0 5px 15px rgba(255, 77, 77, 0.4);
}

.process-text {
    padding-top: 5px;
}

.process-text h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4rem;
    color: #2d3748;
    margin-top: 0;
    margin-bottom: 8px;
}

.process-text p {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    margin: 0;
}

/* =================================================
   Themes & Events Section
   ================================================= */
.themes-events-section {
    background-color: #fff;
}

.themes-title {
    color: #1a202c;
    font-family: 'Fredoka', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
}
.themes-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: red;
    margin: 20px auto 0;
    border-radius: 2px;
}

.themes-description {
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid for the two categories */
.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* दो बराबर कॉलम */
    gap: 30px;
    margin-top: 60px;
}

/* Individual category block */
.category-block {
    background-color: #F9FAFB; /* हल्का ग्रे बैकग्राउंड */
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid red; /* लाल रंग का एक्सेंट */
}

.category-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.6rem;
    color: #2d3748;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

/* The list of tags/pills */
.theme-tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* टैग्स को अगली लाइन में ले जाने के लिए */
    gap: 12px;
}

.theme-tag-list li {
    background-color: #e2e8f0; /* टैग का बैकग्राउंड */
    color: #4a5568;
    padding: 8px 16px;
    border-radius: 50px; /* पूरी तरह से गोल किनारे */
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
    transition: all 0.3s ease;
    cursor: default; /* क्योंकि यह लिंक नहीं है */
}

/* Hover Effect for the tags */
.theme-tag-list li:hover {
    background-color: red;
    color: #fff;
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .category-grid {
        grid-template-columns: 1fr; /* मोबाइल पर 1 कॉलम */
    }
}

/* Video Section Styling */
.video-section {
    padding: 80px 0;
    /* Aap is image URL ko apne pasand ke pattern se badal sakte hain */
    background-image: url('https://www.transparenttextures.com/patterns/music.png');
    background-repeat: repeat;
    background-color: #ffffff; /* Fallback color */
}

.video-section .section-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.video-section .section-subtitle {
    font-size: 18px;
    color: #555;
}

/* Responsive video embed */
.ratio {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}


   

<!-- ==============================
    START: Holiday CTA Section
==============================-->
<style>
    .holiday-cta-section {
        background-color: #f8f9fa; /* A light, clean background color */
        padding-top: 100px;
        padding-bottom:100px;
    }
    .holiday-cta-content .title {
        font-family: 'Fredoka', sans-serif; /* Matching theme's heading font */
        font-size: clamp(2.2rem, 4vw, 2.8rem); /* Responsive font size */
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 25px;
        color: #141313; /* Dark text color */
    }
    .holiday-cta-content .title .text-brand-red {
        color: #E60026; /* A vibrant, festive red */
    }
    .holiday-cta-content .title .text-brand-green {
        color: #008A20; /* A rich, festive green */
    }
    .holiday-cta-img-wrapper {
        position: relative;
        border: 10px solid #008A20; /* Green border from source image */
        border-radius: 15px; /* Softer rounded corners */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        line-height: 0; /* Removes extra space below the image */
    }
    .holiday-cta-img-wrapper img {
        width: 100%;
        display: block;
        border-radius: 5px; /* Slight inner radius to not touch the outer border */
    }
    .holiday-cta-content .vs-btn {
        margin-top: 15px; /* Space between title and button */
        padding: 15px 35px;
        font-size: 18px;
    }

section.holiday-cta-section {
    padding-bottom: 100px;
}



span.ls-bottom-slidebuttons {
    display: none;
}


/* सभी ड्रॉपडाउन (पहला, दूसरा, तीसरा लेवल) पर स्क्रॉलर लागू करें */
        .main-menu .sub-menu {
            max-height: 450px; /* आप इस ऊंचाई को बदल सकते हैं */
            overflow-y: auto;
            overflow-x: hidden; /* यह साइड में निकलने वाले कंटेंट को क्लिप होने से बचाता है */
        }

        /* --- यह सबसे महत्वपूर्ण फिक्स है --- */
        /* यह सुनिश्चित करता है कि सब-सब-मेनू (दूसरे लेवल का ड्रॉपडाउन) सही से दिखे */
        .main-menu .sub-menu .menu-item-has-children:hover > .sub-menu {
            /* जब पहले ड्रॉपडाउन में स्क्रॉल होता है, तो दूसरे को साइड के बजाय नीचे दिखाएं */
            /* यह उसे क्लिप होने से बचाता है */
            position: static;  /* इसे 'absolute' से 'static' में बदलें */
            display: block;
            border: none;
            box-shadow: none;
            width: 100%;
            background-color: rgba(0,0,0,0.05); /* थोड़ा अलग रंग ताकि पता चले कि यह नेस्टेड है */
            transform: none; /* किसी भी तरह के एनिमेशन को हटाएं */
        }

        /* यह सुनिश्चित करता है कि सब-सब-मेनू के आइटम्स सही दिखें */
        .main-menu .sub-menu .sub-menu li a {
            padding-left: 30px; /* थोड़ा इंडेंटेशन ताकि यह अलग दिखे */
        }
        
        /* वैकल्पिक: बेहतर दिखने वाला स्क्रॉलबार */
        .main-menu .sub-menu::-webkit-scrollbar {
            width: 5px;
        }
        .main-menu .sub-menu::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .main-menu .sub-menu::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 5px;
        }
        .main-menu .sub-menu::-webkit-scrollbar-thumb:hover {
            background: #555;
        }



/* --- Feedback Section --- */
.feedback-section {
    justify-content: center;
    background-color: red; /* Image jaisa laal rang */
    padding: 50px 20px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif; /* Default font */
}



.feedback-icons {
    display: flex;
    justify-content: center; /* Icons ko center mein laane ke liye */
    gap: 60px; /* Icons ke beech mein space */
}

.feedback-icons a {
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

.feedback-icons a:hover {
    transform: scale(1.15); /* Hover par icon thoda bada hoga */
    opacity: 0.9;
}

.feedback-icons i {
    font-size: 10.5rem; /* Icon ka size */
}

/* Mobile phones ke liye adjustments */
@media (max-width: 768px) {
    .feedback-section h2 {
        font-size: 2rem;
    }
    .feedback-icons i {
        font-size: 3.5rem;
    }
}





.highlight-red {
    color: #ff0000;
    font-weight: bold;
}


/* --- The List Styling (Grid System) --- */
.character-list-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 20px;
}

.character-grid-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 Columns creates */
    gap: 15px 20px; /* Gap between items */
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Text align left matching image */
}

.character-grid-list li {
    color: black ;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding-left: 20px;
}

/* Bullet Point styling (white dot) */
.character-grid-list li::before {
    
    color:black;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: -5px;
}

/* Mobile Responsive (Mobile pe 1 column ho jayega) */
@media (max-width: 768px) {
    .character-grid-list {
        grid-template-columns: 1fr; /* 1 Column on mobile */
        text-align: center;
    }
    .character-grid-list li {
        padding-left: 0;
    }
    .character-grid-list li::before {
        display: none; /* Hide dots on mobile center align */
    }
}


/* =========================================
   ZING-A-GRAM SECTION STYLES
   ========================================= */

.zing-section {
    background-color: #ffffff;
    border-top: 6px solid #ff0000; /* Upar wali moti laal line */
    padding: 40px 20px 60px; /* Thoda bottom padding zyada side blocks ke liye */
    position: relative; /* Side blocks ko position karne ke liye */
    font-family: 'Arial', sans-serif; /* Bold look ke liye simple font */
    text-align: center;
    overflow: hidden; /* Taki side blocks bahar na nikle */
}

.zing-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Content ko red blocks ke upar rakhne ke liye */
}

/* Typography Styles */
.zing-title {
    font-size: 32px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 15px;
    line-height: 1.2;
}

.zing-subtitle {
    font-size: 28px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 15px;
    line-height: 1.3;
}

.zing-subtitle span.highlight {
    color: #ff0000; /* Zing-a-Gram Red Color */
}

.zing-booking-text {
    font-size: 24px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 30px;
}

/* Image Styling */
.zing-image-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.zing-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Thoda sa shadow depth ke liye */
}

/* Side Red Blocks (Decorative) */

}


/* Mobile Responsive */
@media (max-width: 768px) {
    .zing-title { font-size: 24px; }
    .zing-subtitle { font-size: 20px; }
    .zing-booking-text { font-size: 18px; }
    .red-block { width: 30px; height: 50px; } /* Mobile pe chote blocks */
}

/* =========================================
   MODERN PARTY SECTION (Clean Design)
   ========================================= */

.zing-party-section {
    background-color: #f8f9fa; /* Halka sa grey background professional look ke liye */
    padding: 80px 20px;
    font-family: 'Arial', sans-serif;
}

.zing-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Heading Styles */
.zing-heading {
    font-size: 38px;
    font-weight: 800;
    color: #000;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

/* Heading ke neeche choti si red line design ke liye */
.zing-heading::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: #d50000; /* Zing Red Color */
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Grid Layout */
.zing-content-wrapper {
    display: flex;
    align-items: center; /* Vertical center align */
    gap: 50px; /* Image aur Text ke beech gap */
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft shadow */
}

/* Image Styling */
.zing-image-box {
    flex: 1; /* 50% width */
    position: relative;
}

.zing-image-box img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Image shadow */
    transition: transform 0.3s ease;
}

.zing-image-box img:hover {
    transform: scale(1.02); /* Mouse le jane par thoda zoom hoga */
}

/* Text Styling */
.zing-text-box {
    flex: 1; /* 50% width */
}

.zing-text-box p {
    font-size: 17px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 25px;
}

/* Button Styling */
.zing-btn {
    display: inline-block;
    background-color: #d50000; /* Red Color */
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 45px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(213, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.zing-btn:hover {
    background-color: #b30000; /* Darker red on hover */
    transform: translateY(-3px); /* Button thoda upar uthega */
    box-shadow: 0 6px 20px rgba(213, 0, 0, 0.4);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .zing-content-wrapper {
        flex-direction: column; /* Mobile par stack ho jayega */
        padding: 20px;
        gap: 30px;
    }
    .zing-heading {
        font-size: 28px;
    }
    .zing-btn {
        display: block;
        text-align: center;
        width: 100%; /* Mobile par button full width */
    }
}

.contact-custom-dark0{
    padding-top: 100px;
}

/* =========================================
   MODERN FESTIVE SECTION
   ========================================= */

.festive-gallery-section {
    padding: 80px 0;
    background-color: #fffaf0; /* Warm White Background */
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

/* Header Styles */
.festive-header {
    text-align: center;
    margin-bottom: 50px;
}



.title-separator {
    color: #d42426;
    font-size: 20px;
    margin: 10px 0;
    opacity: 0.5;
}

.festive-subtitle {
    font-size: 22px;
    color: #555;
    font-weight: 600;
}

/* Slider Styles */
.festive-carousel {
    padding: 0 40px; /* Arrows ke liye jagah */
    margin-bottom: 60px;
}

.festive-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 15px; /* Cards ke beech gap */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.festive-card:hover {
    transform: translateY(-10px); /* Upar uthne ka effect */
    box-shadow: 0 15px 35px rgba(212, 36, 38, 0.15); /* Red glow shadow */
}

.card-image {
    height: 620px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.festive-card:hover .card-image img {
    transform: scale(1.1); /* Image zoom effect */
}

.card-details {
    padding: 20px;
    text-align: center;
    background: #fff;
    border-top: 4px solid #d42426; /* Red Top Border */
}

.card-details h4 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* Slider Arrows Customization */
.festive-carousel .slick-prev::before,
.festive-carousel .slick-next::before {
    color: #d42426;
    font-size: 30px;
    opacity: 1;
}

/* List / Tags Styles */
.festive-list-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.festive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.festive-tag {
    background: #fff;
    color: #444;
    padding: 12px 25px;
    border-radius: 50px; /* Pill Shape */
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Snowflake icon before text */
.festive-tag::before {
    content: '\f2dc'; /* FontAwesome Snowflake */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    color: #d42426;
    font-size: 14px;
}

.festive-tag:hover {
    background: #d42426;
    color: #fff;
    transform: scale(1.05);
    border-color: #d42426;
}

.festive-tag:hover::before {
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .festive-title { font-size: 36px; }
    .card-image { height: 250px; }
    .festive-carousel { padding: 0; } /* Mobile pe padding hatao */
}
/* =========================================
   MIME & PUPPET SHOW SECTION
   ========================================= */

.mime-show-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f8ff 100%); /* Light Blue Gradient */
    font-family: 'Comic Neue', 'Arial', sans-serif; /* Agar Google Font ho to best hai */
    overflow: hidden;
}

/* Header Styles */
.mime-header {
    text-align: center;
    margin-bottom: 60px;
}



.mime-divider span {
    font-size: 30px;
    color: red;
    background: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.mime-divider {
    position: relative;
    height: 20px;
}

.mime-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: red;
    z-index: 0;
}

/* Gallery Grid */
.mime-gallery-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

/* Polaroid Card Style */
.mime-card {
    background: #fff;
    padding: 15px 15px 50px 15px; /* Bottom padding zyada caption ke liye */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    width: 300px;
    transition: transform 0.3s ease;
    position: relative;
    border: 1px solid #eee;
}

/* Images */
.mime-img-box {
    height: 250px;
    width: 100%;
    overflow: hidden;
    background: #333;
}

.mime-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mime-card:hover .mime-img-box img {
    transform: scale(1.1);
}

/* Caption looks like handwriting */
.mime-caption {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Arial', cursive; /* Handwriting style fallback */
    font-size: 18px;
    color: #333;
    font-weight: 700;
}

.mime-caption.quote {
    color: #d32f2f;
    font-style: italic;
}

/* Rotation Effects for Playfulness */
.rotate-left {
    transform: rotate(-3deg);
    z-index: 1;
}

.rotate-right {
    transform: rotate(3deg);
    z-index: 1;
}

.center-card {
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.mime-card:hover {
    transform: scale(1.1) rotate(0deg); /* Hover pe seedha ho jayega */
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Description Box */
.mime-description-box {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border-left: 5px solid red; /* Blue accent */
    box-shadow: 0 5px 20px red;
    text-align: center;
}

.mime-description-box p {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.mime-description-box strong {
    color: red;
}

/* Button */
.mime-book-btn {
    display: inline-block;
    margin-top: 10px;
    background-color: #d32f2f;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size: 18px;
    transition: background 0.3s ease;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3);
}

.mime-book-btn:hover {
    background-color: #b71c1c;
    transform: translateY(-3px);
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .mime-gallery-grid {
        flex-direction: column;
        gap: 40px;
    }
    
    .rotate-left, .rotate-right, .center-card {
        transform: rotate(0deg) scale(1);
    }
    
    .mime-title { font-size: 32px; }
    
    .mime-card { width: 100%; max-width: 350px; }
}

/* =========================================
   STATIC GRID GALLERY (No Slider)
   ========================================= */

.portfolio-gallery-section {
    padding: 80px 20px;
    background-color: #fff; /* Clean White Background */
    font-family: 'Arial', sans-serif;
}

/* Category Container */
.portfolio-category {
    margin-bottom: 80px; /* Categories ke beech gap */
}

/* Header Design */
.cat-header {
    text-align: center;
    margin-bottom: 40px;
}

.cat-title {
    font-size: 36px;
    color: #333;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.cat-line {
    width: 80px;
    height: 4px;
    background: #d32f2f; /* Red Accent Line */
    margin: 0 auto;
    border-radius: 2px;
}

/* Grid Layout */
.gallery-grid {
    display: grid;
    /* Auto-fit: Screen size ke hisaab se jitne column fit honge utne banenge (Min 300px) */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px; /* Images ke beech gap */
}

/* Image Item Styling */
.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    cursor: pointer;
    aspect-ratio: 4/3; /* Image ka size fix rakhne ke liye (Rectangle) */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image crop karke fit hogi, stretch nahi */
    transition: transform 0.5s ease;
    display: block;
}

/* Hover Overlay Effect */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay on hover */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay i {
    color: #fff;
    font-size: 30px;
    transform: scale(0);
    transition: transform 0.3s ease;
}

/* Hover Actions */
.gallery-item:hover img {
    transform: scale(1.1); /* Image Zoom hogi */
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item:hover .overlay i {
    transform: scale(1); /* Icon pop up hoga */
}

/* Theme Colors for Headings (Optional - Agar color chahiye) */
.portfolio-category:nth-child(1) .cat-title { color: #d32f2f; } /* Red */
.portfolio-category:nth-child(2) .cat-title { color: #1976d2; } /* Blue */
.portfolio-category:nth-child(3) .cat-title { color: #d4af37; } /* Gold */
.portfolio-category:nth-child(2) .cat-line { background: #1976d2; }
.portfolio-category:nth-child(3) .cat-line { background: #d4af37; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Mobile pe ek ke neeche ek */
    }
    .cat-title {
        font-size: 26px;
    }
    .portfolio-category {
        margin-bottom: 50px;
    }
}
/* =========================================
   WEDDING TEXT SECTION STYLES
   ========================================= */

.wedding-text-container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.wedding-content {
    max-width: 1000px; /* Zyada faila hua text padhne me mushkil hota hai, isliye limit lagayi */
    background-color: #fbfbfb; /* Very light grey background */
    padding: 40px;
    border-top: 4px solid #d4af37; /* Elegant Gold Border on top */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center; /* Center align for elegance */
}

.wedding-content p {
    font-size: 17px;
    line-height: 1.8; /* Lines ke beech space */
    color: #555;
    margin-bottom: 20px;
    font-family: 'Georgia', serif; /* Serif font feels more like a wedding invite */
}

.wedding-content p:last-child {
    margin-bottom: 0;
}

.brand-name {
    color: #d4af37; /* Gold Color for Zing-A-Gram */
    font-weight: bold;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wedding-content {
        padding: 25px;
        text-align: left; /* Mobile pe left align easy to read hota hai */
    }
    .wedding-content p {
        font-size: 15px;
    }
}

/* --- Container Spacing --- */
.kids-entertainment-section {
    padding: 60px 0;
    background-color: #fff; /* Clean white background */
}

.mb-5 {
    margin-bottom: 60px;
}

/* --- SECTION 1: Features Grid Styles --- */
.features-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive Grid */
    gap: 20px;
    margin-top: 30px;
}

.feature-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
    border-color: #ddd;
}

.feature-icon {
    color: #ff4757; /* Main Theme Color - Change as needed */
    font-size: 24px;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

.feature-card span {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

/* Make the balloon item span full width on larger screens */
.full-width-card {
    grid-column: 1 / -1;
    background-color: #fff0f1; /* Slight pink tint for highlight */
    border-color: #ffccd0;
}

.highlight-note {
    margin-top: 25px;
    text-align: center;
    padding: 15px;
    background-color: #2f3542;
    color: #fff;
    border-radius: 6px;
}

.highlight-note p {
    margin: 0;
    font-size: 16px;
}

/* --- SECTION 2: Magician Split Layout Styles --- */
.magician-split-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-top: 30px;
}

.magician-img-box {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.magician-img-box img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: block;
}

.magician-content-box {
    flex: 1;
    min-width: 300px;
}

.sub-heading {
    font-size: 22px;
    color: #ff4757; /* Accent Color */
    font-weight: 700;
    margin-bottom: 20px;
    font-style: italic;
}

.description {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

.info-box {
    background: #f4f7f6;
    padding: 20px;
    border-left: 4px solid #2ed573; /* Green accent */
    border-radius: 4px;
}

.info-box ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.info-box ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    font-size: 15px;
}

.info-box ul li i {
    color: #2ed573;
    margin-right: 10px;
    margin-top: 4px;
}

/* --- Responsive Mobile Fixes --- */
@media (max-width: 768px) {
    .magician-split-layout {
        flex-direction: column;
    }
    
    .magician-img-box, 
    .magician-content-box {
        width: 100%;
    }
}

/* --- Ventriloquist Section Structure --- */
.ventriloquist-section {
    padding: 80px 0;
    background-color: #0a0a0a; /* Deep Black/Dark Background */
    position: relative;
    overflow: hidden;
}

.ventriloquist-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
}

/* --- Content Styling --- */
.vent-content {
    flex: 1;
    min-width: 300px;
    color: #fff;
}

.vent-subtitle {
    display: block;
    color: #ff4757; /* Vibrant Red */
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
}

.vent-title {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.vent-desc {
    font-size: 17px;
    color: #b2bec3; /* Soft Grey */
    line-height: 1.8;
    margin-bottom: 25px;
}

.vent-highlight {
    border-left: 4px solid #3742fa; /* Blue Accent */
    padding-left: 20px;
    margin-bottom: 30px;
    background: linear-gradient(to right, rgba(55, 66, 250, 0.1), transparent);
    padding: 15px 20px;
    border-radius: 0 10px 10px 0;
}

.vent-highlight p {
    margin: 0;
    color: #dfe6e9;
    font-style: italic;
}

/* --- Interactive Tags (Buttons) --- */
.vent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.v-tag {
    background: #2d3436;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hover Effect on Tags */
.v-tag:hover {
    background: #ff4757;
    border-color: #ff4757;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
}

/* --- Image Area (The Interactive Part) --- */
.vent-media {
    flex: 1;
    min-width: 300px;
    position: relative;
    display: flex;
    justify-content: center;
}

.vent-image-box {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 350px; /* Adjust height as needed */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 2px solid #333;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.vent-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

/* The Glow Blob behind the image */
.vent-blob {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(55, 66, 250, 0.4) 0%, rgba(0,0,0,0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: blur(40px);
    transition: all 0.5s ease;
}

/* --- Main Hover Interaction --- */
/* When hovering over the image box: */
.vent-image-box:hover {
    transform: scale(1.02) translateY(-5px);
    border-color: #3742fa; /* Border turns blue */
    box-shadow: 0 25px 60px rgba(55, 66, 250, 0.3); /* Blue Glow */
}

.vent-image-box:hover img {
    transform: scale(1.1); /* Image Zooms in */
}

.vent-image-box:hover ~ .vent-blob {
    background: radial-gradient(circle, rgba(255, 71, 87, 0.4) 0%, rgba(0,0,0,0) 70%); /* Blob turns Red */
    width: 400px;
    height: 400px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .ventriloquist-wrapper {
        flex-direction: column;
    }
    
    .vent-image-box {
        height: 250px;
    }
    
    .vent-title {
        font-size: 32px;
    }
}

/* --- Sticky Right Sidebar Container --- */
.sticky-right-sidebar {
    position: fixed;
    top: 50%;             /* स्क्रीन के बीच में */
    right: 15px;          /* राइट साइड से थोड़ा हटकर */
    transform: translateY(-50%);
    z-index: 9999;        /* सबसे ऊपर */
    display: flex;
    flex-direction: column; /* एक के नीचे एक */
    gap: 15px;            /* आइकन्स के बीच का गैप */
}

/* --- Red Icon Styling --- */
.red-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;          /* आइकन की चौड़ाई */
    height: 50px;         /* आइकन की ऊंचाई */
    background-color: #ff0000; /* लाल रंग (Red) */
    color: #ffffff !important; /* सफ़ेद आइकन */
    border-radius: 50%;   /* पूरा गोल (Circle) */
    text-decoration: none;
    font-size: 20px;      /* आइकन का साइज़ */
    
    /* Shadow Effect (जैसा स्क्रीनशॉट में है) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    
    transition: all 0.3s ease;
    border: 2px solid #fff; /* हल्का सफ़ेद बॉर्डर ताकि और उभरे */
}

/* --- Hover Effect --- */
.red-icon-box:hover {
    transform: scale(1.1); /* माउस ले जाने पर थोड़ा बड़ा होगा */
    background-color: #d60000; /* थोड़ा गहरा लाल */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* --- Mobile Responsive --- */
/* अगर मोबाइल पर साइज़ छोटा करना हो तो ये कोड रखें */
@media (max-width: 768px) {
    .sticky-right-sidebar {
        right: 10px;
        gap: 10px;
    }
    .red-icon-box {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* --- Footer Payment Strip (Red Background) --- */
.footer-payment-strip {
    background-color: #ff0000; /* लाल बैकग्राउंड */
    padding: 20px 0;
    width: 100%;
    border-top: 1px solid #cc0000;
}

.payment-icons-row {
    display: flex;
    justify-content: center; /* सेंटर में लाएगा */
    align-items: center;
    flex-wrap: wrap; /* मोबाइल पर नीचे खिसक जाएगा */
    gap: 15px; /* कार्ड्स के बीच का गैप */
}

/* --- Common Card Style --- */
.pay-card {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px; /* आइकॉन का साइज़ */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.pay-card:hover {
    transform: translateY(-3px);
}

/* --- White Cards (Visa, Mastercard, Amex, Discover, Venmo) --- */
.white-card {
    background-color: #ffffff;
}

/* --- Green Card (Cash) --- */
.green-card {
    background-color: #2d6a2d; /* गहरा हरा */
    color: #ffffff;
    font-size: 24px;
    border: 2px solid #1e4d1e;
}

/* --- Blue Card (Money Order) --- */
.blue-card {
    background-color: #1a1a50; /* गहरा नीला */
    color: #ffffff;
}

.blue-card span {
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
}

/* --- Venmo Text Styling --- */
.venmo-card span {
    font-size: 14px;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .footer-payment-strip {
        padding: 15px 0;
    }
    .pay-card {
        width: 50px;
        height: 35px;
        font-size: 22px;
    }
}


   /* Section Styling */
    .celebrity-section {
        padding: 60px 0;
        background: #f9f9f9;
    }

    /* Header Styling */
    .celebrity-header {
        text-align: center;
        margin-bottom: 40px;
        padding: 0 15px;
    }
    .section-title {
        font-size: 36px;
        color: #333;
        font-weight: 700;
        margin-bottom: 15px;
        text-transform: uppercase;
    }
    .section-desc {
        font-size: 18px;
        color: #666;
        max-width: 800px;
        margin: 0 auto;
    }

    /* Carousel Item Styling */
    .gallery-item {
        margin: 0 10px; /* Slides ke beech gap */
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    
    .gallery-item:hover {
        transform: translateY(-5px);
    }

    /* IMAGE WRAPPER - Yahan Magic Hai */
    .img-wrapper {
        width: 100%;
        height: 500px; /* Height badha di gayi hai taaki full image aaye */
        overflow: hidden;
        position: relative;
    }

    .img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Image ko box me fit karega bina stretch kiye */
        object-position: top center; /* Chehra hamesha dikhega */
        display: block;
    }

    /* Caption Styling */
    .gallery-caption {
        padding: 15px;
        text-align: center;
        background: #fff;
        color: #d63031; /* Red Color */
        font-weight: 700;
        font-size: 20px;
        border-top: 1px solid #eee;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .img-wrapper {
            height: 400px; /* Mobile par thoda chhota */
        }
        .section-title {
            font-size: 28px;
        }
    }

/* Card Design */
.text-card {
    background-color: rgba(255, 255, 255, 0.05); /* Slight transparent dark bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 25px;
    border-radius: 8px;
    height: 100%; /* Sab boxes same height ke rahenge */
    position: relative;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Hover Effect */
.text-card:hover {
    background-color: #ffffff; /* Hover pe white ho jayega */
    transform: translateY(-5px);
}

/* Number Styling (01, 02...) */
.count-number {
    font-size: 40px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1); /* Subtle number */
    display: block;
    margin-bottom: 15px;
    line-height: 1;
    transition: color 0.4s ease;
}

.text-card:hover .count-number {
    color: #e2e2e2; /* Light grey on hover */
}

/* Client Name Text */
.client-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
    transition: color 0.4s ease;
}

.text-card:hover .client-title {
    color: #1a1a1a; /* Text black on hover */
}

/* Decorative Line */
.line-dec {
    width: 40px;
    height: 3px;
    background-color: #ffc107; /* Yellow/Gold accent color - aap apni theme ka color use kar sakte hain */
    margin-top: 20px;
    transition: width 0.4s ease;
}

.text-card:hover .line-dec {
    width: 100%; /* Line expands on hover */
}

/* 1. Slider Card ki Height Badhana (Taaki photo lambi dikhe) */
.character-slider-v2 .slide-item {
    margin: 0 10px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 450px; /* Pehle shayad 300px tha, isko 450px ya 500px karein */
}

/* 2. Image ko 'Top' se align karna (Sabse Important) */
.character-slider-v2 .slide-item img {
    width: 100%;
    height: 100%; 
    object-fit: cover; /* Box ko fill karega */
    object-position: top center; /* YE MAIN LINE HAI: Isse Sar (Head) kabhi nahi katega */
    display: block;
}

/* 3. Caption ko thoda stylish banana taaki image ke upar saaf dikhe */
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Gradient taaki text padhne me aaye */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    color: #fff;
    padding: 30px 15px 15px; /* Upar thoda space */
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
/* List Container Styling */
.character-grid-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Responsive Grid: Desktop pe 4, Tablet pe 2, Mobile pe 1 */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 10px;
}

/* List Items (Buttons jaise dikhenge) */
.character-grid-list li {
    background: #ffffff;
    border: 1px solid #eee;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: default;
}

/* Hover Effect on List */
.character-grid-list li:hover {
    background: #e63946; /* Red Color */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(230, 57, 70, 0.3);
    border-color: #e63946;
}



.col-xl.col-xxl-6.align-self-center {
    padding-top: 60px;
}
@media (max-width: 767px) {
    /* Container ki setting: Center aur Padding ke liye */
    .footer-social {
        display: flex !important;           /* Flexbox taaki center ho sake */
        justify-content: center !important; /* Bilkul beech mein laane ke liye */
        padding-top: 20px !important;       /* Upar se gap (Padding) */
        width: 100% !important;
        margin-bottom: 15px !important;     /* Niche bhi thoda gap */
    }

    /* Icons ka size chota karne ke liye */
    .footer-social a {
        width: 35px !important;
        height: 35px !important;
        line-height: 35px !important;
        font-size: 14px !important;
        margin: 0 5px !important;           /* Icons ke beech thoda space */
    }
}