/* Reset CSS */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: "Open Sans", sans-serif;

    height: 100%;

    margin: 0;

    padding-top: 70px;

}



html {

    height: 100%;

    margin: 0;

}



h1 {

    font-size: 36px;

}



h2 {

    font-size: 28px;

}

h3 {

    font-size: 24px;
    margin-bottom: 5px;

}

p{margin-bottom: 5px;}

h4 {

    font-size: 20px;

}



.pt {

    font-size: 16px;

}



/* Navbar Styling */

.navbar {

    width: 100%;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 15px; /* Desktop padding for left & right */

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;
    background-color: white;
    /* background: #FEE2D3; */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}



.logo {

    display: flex;

    align-items: center;

}



.logo img {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    margin-right: 8px;

}



.logo span {

    font-size: 16px;

    font-weight: bold;

}



.nav-links {

    display: flex;

    gap: 50px;

    align-items: center; /* Center vertically */

}

.menuitem {
    position: relative;
    display: inline-block;
    height: 28px;
    text-align: center;
   cursor: pointer;
}
.menuitem span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #e74c3c;
    transition: all 0.6s;
}
.menuitem:hover span {
    width: 100%;
}

.nav-links a {

    text-decoration: none;

    color: black;

    font-weight: bold;

    font-size: 16px;

    transition: color 0.3s ease;

}



.nav-links a:hover {

    color: #e74c3c;

}



/* Style for Login/Register/Logout buttons in the nav */

.nav-button {

    text-decoration: none;

    padding: 8px 16px;

    border: 1px solid #ff6f00;

    color: #ff6f00;

    border-radius: 20px;

    transition: all 0.3s ease;

    margin-left: 10px;

}



.nav-button:hover {

    background-color: #ff6f00;

    color: white;

}



/* For mobile view, make buttons look better */

.mobile-extra {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px; /* Add space between items */

    margin-top: 20px;

}



.dropdown {

    float: left;

    position: relative;

}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);

    z-index: 1;

}

.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}

.dropdown-content a:hover {

    background-color: #ddd;

}

.show {

    display: block;

}



/* Language & Profile */

.right-section {

    display: flex;

    align-items: center;

    gap: 15px;

}



select {

    padding: 5px;

    border-radius: 5px;

    border: 1px solid #ccc;

}



.profile-icon {

    /* width: 35px;

    height: 35px; */

    border-radius: 50%;

    background: #f0f0f0;

    display: flex;

    align-items: center;

    justify-content: center;

}

.profile-icon i{
color:#505050;
font-size:30px
}


/* मोबाइल मेनू के एक्स्ट्रा आइटम्स को डेस्कटॉप पर छिपाएं */

.mobile-extra {

    display: none;

}



/* Mobile Menu */

.menu-toggle {

    display: none;

    font-size: 24px;

    cursor: pointer;

}



/* Banner Container */

.banner {

    width: 100%;

    overflow: hidden;

    position: relative;

    background-color: #f9f9f9; /* fallback color while loading */

}



/* Banner Image */
.banner img {

    width: 100%;

    /* height: 60vh; */

    display: block;

    object-fit: cover; /* Ensures image covers container */

}


/* Desktop Height Control */

@media (min-width: 1200px) {

    /* .banner img { */

        /* height: 100vh;  */
        /* Prevent banner from being too tall */

    /* } */

}



/* Laptop */

@media (min-width: 992px) and (max-width: 1199px) {

    .banner img {

        /* height: 60vh; */

    }

}



/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {

    .banner img {

        /* height: 60vh; */

    }

}



/* Mobile */

@media (max-width: 767px) {

    .banner img {

        /* height: 60vh; */

    }

}



/* Live__Pujas__Home */

.live-pujas-section {

    background: #FFF7F0;

    padding: 25px 20px;

    /*margin: 40px auto 0px;*/

    max-width: 100%;

}



/* Section Title */

.live-pujas-section .section-title {

    text-align: center;

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 10px;

}



/* Section Description */

.live-pujas-section .section-desc {

    text-align: center;

    color: #555;

    max-width: 50%;

    margin: 0 auto 15px;

}



.section-desc .highlight {

    background-color: yellow;

    font-weight: 600;

}



/* View All Link */

.view-all-link {

    display: block;

    text-align: center;

    margin-bottom: 30px;

    color: #e74c3c;

    text-decoration: none;

    font-weight: 500;

}



/* Puja Cards Container */

.puja-cards {

    display: flex;

    gap: 20px;

    justify-content: center;

    flex-wrap: no-wrap;

}



/* Puja Card */

.puja-card,

.puja-card-special {

    background: white;

    border: 1px solid #ddd;

    border-radius: 12px;

    padding: 15px;

    width: 300px;

    text-align: left;

    transition: all 0.3s ease;

}



.carousel-container {

    position: relative;

}



.puja-card:hover {

    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);

}



.scroll-button {

    display: none;

}



/* Puja Image */

.puja-img img {

    width: 100%;

    height: 150px;

    object-fit: cover;

    border-radius: 8px;

}



/* Card Title */

.puja-card h3 {

    font-size: 1.2rem;

    font-weight: 700;

    margin-bottom: 5px;

}



/* Date & Location */

.puja-date, .puja-location {

    font-size: 0.9rem;

    color: #555;

}



.bodybg {

    /* background-image: url('../../images/bg-texture.png'); */

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  background-attachment: fixed;

}



/* Special__Pujas__Home */

.bodybg .special-pujas-section {

    /* background-color: #FEE2D3; */

    /* border-radius: 60px; */

    /* padding: 10px 20px; */

    margin: 10px auto 60px;

    max-width: 100%;

}



.special-pujas-section .section-title {

    text-align: center;

/*  font-size: 2rem;  */

    font-weight: 700;

    margin: 20px 0px;

}



.special-pujas-section .section-desc {

    text-align: center;

    max-width: 50%;

    margin: 0 auto 15px;

    color: #555;

}



.special-pujas-section .highlight {

    background: yellow;

    padding: 0 3px;

}



.view-all-link {

    display: block;

    text-align: center;

    color: #e74c3c;

    margin-bottom: 20px;

    text-decoration: none;

}



/* For making the entire puja card clickable */



/* ================================================= */

/* === CLICKABLE CARD STYLES FOR BOTH SECTIONS === */

/* ================================================= */



/* --- For live_pujas_home.php --- */

/* This will make the <a> tag behave like a block and take up space */

.live-pujas-section .puja-card-link {

    display: block;

    text-decoration: none;

    color: inherit; /* This will make sure the text color is not the default blue */

}





/* --- For special_pujas_home.php --- */

/* This uses the "stretchy link" technique */

.special-pujas-section .puja-card-special {

    position: relative; /* Container for the link */

}



.special-pujas-section .puja-card-link {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1; /* Puts the link on top */

}

/* --- Puja Card location css --- */

.puja-location span{
color: #e74c3c;
position: relative;
top: 6px;
}


/* --- Puja Card Content Spacing --- */

/* 1. Image ke neeche space add karein */
.puja-card .puja-img,
.puja-card-special .puja-img {
    margin-bottom: 15px; /* Image aur heading ke beech ka space */
}

/* 2. Heading ke neeche space badhayein */
.puja-card h3,
.puja-card-special h3 {
    margin-bottom: 10px; /* Heading aur pehle paragraph ke beech ka space */
}

/* 3. Paragraphs ke beech me space daalein */
.puja-card p,
.puja-card-special p {
    margin-bottom: 8px; /* Paragraphs ke beech ka space */
}

/* 4. (Optional but recommended) Aakhri element ke neeche se extra margin hata dein */
.puja-card p:last-child,
.puja-card-special p:last-child {
    margin-bottom: 0;
}

.puja-description {
    /* --- Main code --- */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Yahan 2 ka matlab hai 2 lines */
    -webkit-box-orient: vertical;
    /* --- End of Main code --- */

    /* Optional: Behtar spacing ke liye */
    min-height: 40px; /* Ek anumanit height, 2 line ke text ke liye */
}



/* Benefits__Devaseva__Home */

.benefits-section {

    background: #FFF7F0;

    text-align: center;

    padding: 25px 20px;

}



.benefits-title {

/*  font-size: 26px; */

    font-weight: bold;

    margin-bottom: 30px;

    color: #222;

}



.benefit-item {

    max-width: 600px;

    margin: 0 auto;

    padding-bottom: 30px;

}



.benefit-icon {

    width: 60px;

    height: 60px;

    margin-bottom: 15px;

}



.benefit-heading {

/*  font-size: 18px;  */

    font-weight: bold;

    color: #fff;

}



.benefit-desc {

/*  font-size: 15px; */

    color: #fff;

    max-width: 500px;

    margin: 0 auto;

}



.benefits-carousel {

    max-width: 600px; /* Adjust this value as needed */

    margin: 0 auto;

}



/* Custom CSS to fix pagination dots position */

.benefits-carousel .swiper-pagination {

    position: relative; /* Change from absolute to relative, or ensure it's not positioned absolutely within the slide */

    bottom: 0; /* Ensures it's at the bottom of its parent container */

    margin-top: 20px; /* Add some space between the description and the dots */

    padding-bottom: 20px; /* Optional: Add padding to the bottom of the section */

}



/* ========================= ABOUT SECTION STYLES ========================= */

.about-section {

    padding: 60px 20px;

    width: 100%;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

}




/* Centered Headings Styling */

.section-tagline {

    text-align: center; /* Heading ko center karega */

    color: #FF9933;

    font-weight: bold;

    font-size: 1.1rem;

    margin-bottom: 10px;

}



.section-heading {

    text-align: center; /* Heading ko center karega */

/*  font-size: 2.2rem;  */

    color: #333;

    margin-top: 0;

    margin-bottom: 40px; /* Headings aur columns ke beech me space */

}



/* This is the new flex container for the columns */

.about-columns-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px; /* Columns ke beech ka gap */

    flex-wrap: wrap;

}



/* Left Column: Text Content */

.about-content {

    flex: 1; /* Adjusts to take available space */

    min-width: 300px; /* Prevents it from getting too small */

    text-align: left; /* Text ko left align rakhe */

}



/* Right Column: Image */

.about-image {

    flex: 1;

    min-width: 300px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.about-image img {

    max-width: 100%;

    height: auto;

    display: block;

}



.about-content p {

    font-size: 16px;

    line-height: 1.6;

    color: #555;

    margin-bottom: 15px;

}



.works-list {

    margin-top: 20px;

    margin-bottom: 20px;

}



.works-list p {

    margin-bottom: 10px;

}



.works-list p strong {

    color: #333;

}



.read-more-btn {

    display: inline-block;

    background-color: #000;

    color: #fff;

    padding: 12px 28px;

    border-radius: 25px;

    text-decoration: none;

    font-weight: bold;

    font-size: 16px;

    margin-top: 15px;

    transition: background-color 0.3s ease;

}



.read-more-btn:hover {

    background-color: #333;

}



/* =========================== Testimonials =========================== */



.live-puja-section {

        background-color: #fdfaf3;

        padding: 60px 20px;

        /* font-family: sans-serif; */
        font-family: "Open Sans", sans-serif;

        text-align: center;

    }

    .live-puja-section h2 {

/*        font-size: 2rem;  */

        color: #333;

        margin-bottom: 15px;

    }

    .devotee-avatars {

        display: flex;

        justify-content: center;

        margin-bottom: 15px;

    }

    .devotee-avatars img {

        width: 40px;

        height: 40px;

        border-radius: 50%;

        border: 2px solid white;

        margin-left: -10px;

    }

    .devotee-avatars img:first-child {

        margin-left: 0;

    }

    .devotee-stats {

        color: #555;

        font-size: 1rem;

    }

    .devotee-stats .weekly-count {

        color: #e53935;

        font-weight: bold;

    }

    .testimonial-slider-container {

        max-width: 900px;

        margin: 40px auto 0;

        position: relative;

    }

    .swiper-slide {

        background-color: #a01303;

        padding: 40px;

        border-radius: 15px;

        text-align: center;

        box-sizing: border-box;

    }

    .star-rating {

        color: #ffc107;

        font-size: 1.5rem;

        margin-bottom: 20px;

    }

    .testimonial-quote {

        font-size: 1.2rem;

        color: #fff;

        line-height: 1.6;

        margin-bottom: 30px;

    }

    .reviewer-info img {

        width: 60px;

        height: 60px;

        border-radius: 50%;

        margin-bottom: 10px;

    }

    .reviewer-info .reviewer-name {

        font-weight: bold;

        color: #fff;

    }

    /* Custom Swiper pagination */

    .swiper-pagination-progressbar {

        background: #e0e0e0;

    }

    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

        background: #888;

    }



    /* ========================= FOOTER STYLES ========================= */

.site-footer {

    color: #333;

    /* font-family: Arial, sans-serif; */
    font-family: "Open Sans", sans-serif;

}



.footer-main {

    background-color: #FEE2D3; /* Saffron/Orange background */

    padding: 40px 0;

}



.footer-main .container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


    .footer-main .container, .footer-sub .container {
        max-width: 100%;
        padding-left: 12%;
        padding-right: 12%;
        box-sizing: border-box;
    }


.footer-logo {

    max-width: 100px;

    margin-bottom: 20px;

    background-color: #fff; /* White background for logo as in image */

    padding: 10px;

    border-radius: 25px;

}



.footer-col h4 {

    font-size: 1.2rem;

    font-weight: bold;

    margin-top: 0;

    margin-bottom: 10px;

    text-transform: capitalize;

}



.footer-col p {

    line-height: 1.7;

    margin-bottom: 0;

}



.footer-col ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-col ul li {

    margin-bottom: 6px;

}



.footer-col ul li a {

    color: #333;

    text-decoration: none;

    transition: color 0.3s ease;

}



.footer-col ul li a:hover {

    color: #000;

    text-decoration: underline;

}



.footer-col .address {

    margin-bottom: 20px;

}



.social-icons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}



.social-icon {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 1.1rem;

    text-decoration: none;

    transition: transform 0.3s ease;

}



.social-icon:hover {

    transform: translateY(-3px);

}



/* Individual Social Icon Colors */

.social-icon.youtube    { background-color: #FF0000; }

.social-icon.instagram  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

.social-icon.linkedin   { background-color: #0A66C2; }

.social-icon.whatsapp   { background-color: #25D366; }

.social-icon.x-twitter  { background-color: #000000; }

.social-icon.facebook   { background-color: #1877F2; }





/* Sub-Footer (Copyright Area) */

.footer-sub {

    background-color: #e65100;

    border-top: 2px #e65100 solid;

    padding: 20px 0;

    text-align: center;

}



.footer-sub .container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.footer-sub p {

    margin: 5px 0;

    font-size: 0.9rem;

    color: #fff;

}



.footer-sub a {

    color: #fff;

    text-decoration: none;

}



.footer-sub a:hover {

    text-decoration: underline;

    color: #fff;

}



/* ========================= NEW PROFILE DROPDOWN STYLES ========================= */



/* प्रोफाइल आइकॉन और ड्रॉपडाउन का कंटेनर */

.profile-dropdown {

    position: relative; /* यह बहुत जरूरी है ड्रॉपडाउन की पोजीशन के लिए */

    display: inline-block;

}



/* ड्रॉपडाउन का कंटेंट (यह ẩn रहेगा) */

.profile-dropdown-content {

    display: none; /* जावास्क्रिप्ट इसे 'block' करेगा */

    position: absolute;

    right: 0;

    top: calc(100% + 15px); /* आइकॉन के ठीक नीचे थोड़ा गैप के साथ */

    background-color: #ffffff;

    min-width: 320px;

    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);

    border-radius: 12px;

    z-index: 1001;

    border: 1px solid #f0f0f0;

}



/* ड्रॉपडाउन को दिखाने के लिए जावास्क्रिप्ट इस क्लास का उपयोग करेगा */

.profile-dropdown-content.show-dropdown {

    display: block;

}



/* ड्रॉपडाउन का हेडर */

.dropdown-header {

    padding: 20px;

    text-align: center;

    border-bottom: 1px solid #f0f0f0;

}

.dropdown-header p {

    margin: 0 0 12px 0;

    color: #555;

    font-size: 14px;

}

.login-btn-large {

    display: block;

    width: 100%;

    background-color: #a01303;

    color: white;

    padding: 12px;

    border: none;

    border-radius: 8px;

    font-size: 16px;

    font-weight: bold;

    text-decoration: none;

    cursor: pointer;

}



/* ड्रॉपडाउन के मेनू लिंक्स */

.dropdown-menu a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 20px;

    text-decoration: none;

    color: #333;

    font-size: 15px;

    transition: background-color 0.2s;

}

.dropdown-menu a:hover {

    background-color: #f7f7f7;

}

.dropdown-menu a i {

    font-size: 12px;

    color: #999;

}

.new-badge {

    background-color: #27ae60;

    color: white;

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 4px;

    font-weight: bold;

    margin-left: auto;

    margin-right: 10px;

}



/* हॉरिजॉन्टल लाइन */

.separator {

    border: 0;

    border-top: 1px solid #f0f0f0;

    margin: 0;

}



/* हेल्प और सपोर्ट सेक्शन */

.dropdown-support {

    padding: 20px;

}

.dropdown-support h4 {

    margin: 0 0 15px 0;

    font-size: 14px;

    color: #333;

}

.support-phone {

    display: flex;

    align-items: center;

    background-color: #f0f8ff;

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 15px;

}

.support-phone i {

    font-size: 20px;

    color: #a01303;

    margin-right: 12px;

}

.support-phone div {

    display: flex;

    flex-direction: column;

}

.support-phone strong {

    font-size: 16px;

    color: #333;

}

.support-phone span {

    font-size: 11px;

    color: #666;

}

.support-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}

.support-actions a {

    padding: 10px;

    text-align: center;

    border: 1px solid #ddd;

    border-radius: 8px;

    text-decoration: none;

    color: #333;

    /* font-weight: bold; */
    font-size:14px;

}

.support-actions a:hover{
background:#a01303;
color:white

}
.support-actions a:hover i{
    color:white
}


.support-actions a i {

    margin-right: 8px;

    color: #555;

}









/* ========================= RESPONSIVE STYLES ========================= */



/* For Tablets */

@media (max-width: 992px) {

    .footer-main .container {

        grid-template-columns: 1fr 1fr; /* 2 columns for tablets */

    }

}







/* ============================== Puja.PHP ============================== */

.puja-section {

    width: 100%;

    /*margin: 10px auto;*/

    font-family: sans-serif;

    /* background: #efefef; */

}

.puja-section-title {

    font-size: 24px;

    font-weight: bold;

    color: #333;

    text-align: left;

    padding: 10px 0px;

    margin: 14px 10px;

}

/* .splide__slide img {

    width: 100%;

    height: 450px;  */
    /* आप अपनी जरूरत के अनुसार हाइट सेट करें */

    /* object-fit: cover;  */
    /* यह इमेज को बिना बिगाड़े फिट करेगा */

    /* border-radius: 35px;  */
    /* इमेज के कोनों को गोल करने के लिए */

/* } */

/* Splide arrows and pagination styling (Optional) */

.splide__arrow {

    background: rgba(0, 0, 0, 0.5);

}

.splide__arrow svg {

    fill: #fff;

}

.splide__pagination__page.is-active {

    background: #d9534f;

}





/* For Mobile Phones */

@media (max-width: 768px) {

    .footer-main .container {

        grid-template-columns: 1fr; /* 1 column for mobile */

        text-align: center; /* Center align content on mobile */

    }

    

    .footer-logo {

        margin-left: auto;

        margin-right: auto;

    }



    .social-icons {

        justify-content: center; /* Center align social icons */

    }



    .footer-sub {

        font-size: 0.8rem;

    }



    .section-heading {

        font-size: 1.8rem;

        margin-bottom: 30px;

    }

    

    /* Mobile par columns ko ek ke neeche ek laaye */

    .about-columns-wrapper {

        flex-direction: column;

    }



    .about-image {

        order: 1; /* Image ko upar rakhe */

        margin-bottom: 30px; /* Image aur text ke beech me space */

    }



    .about-content {

        order: 2; /* Text ko neeche rakhe */

        text-align: center; /* Mobile par text ko center kar sakte hain */

    }



    .about-content p {

        text-align: left; /* Paragaphs ko left-aligned rakhein behtar readability ke liye */

    }



    /* Container for the carousel */

.carousel-container {

    position: relative;

    display: flex; /* This helps in positioning the arrows */

    align-items: center; /* Vertically centers the arrows */

    overflow: hidden; /* Hides the cards that are outside the view */

}



/* Make the puja-cards div horizontally scrollable */

.puja-cards {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto; /* This is the key property for horizontal scrolling */

    scroll-behavior: smooth; /* Adds a smooth scrolling effect */

    -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS devices */

    gap: 20px; /* Space between the cards */

    padding: 20px 0; /* Adds some vertical padding for better spacing */

    justify-content: flex-start;

    -ms-overflow-style: none; /* IE and Edge */

    scrollbar-width: none; /* Firefox */

}



/* Hide the scrollbar for a cleaner look */

.puja-cards::-webkit-scrollbar {

    display: none;

}



/* Style the navigation buttons */

.scroll-button {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: #fff;

    border: 1px solid #ccc;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    font-size: 24px;

    font-weight: bold;

    color: #333;

    cursor: pointer;

    z-index: 10; /* Ensures the buttons are above the cards */

    display: block;.

}



.left-arrow {

    left: 10px;

}



.right-arrow {

    right: 10px;

}



    /* Navbar structure for mobile */

    .navbar {

        padding: 8px 15px; /* Less padding on mobile */

    }



    /* Hide right-section from top bar */

    .right-section {

        display: none;

    }



    /* Show hamburger menu */

    .menu-toggle {

        display: block;

    }



    /* Hide nav links by default */

    .nav-links {

        display: none;

        flex-direction: column;

        align-items: center;

        text-align: center;

        background: white;

        position: absolute;

        top: 60px;

        left: 0;

        width: 100%;

        padding: 15px 0;

        border-top: 1px solid #ddd;

    }



    .nav-links.show {

        display: flex;

    }



    /* Language selector & profile icon inside mobile menu */

    .nav-links .mobile-extra {

        margin-top: 10px;

        display: flex;

        justify-content: center;

        gap: 10px;

        width: 100%;

    }



    .nav-button.desktop-only {

        display: none;

    }

    .section-desc {

    text-align: left;

    }



    .live-pujas-section .section-desc,

    .special-pujas-section .section-desc {

        text-align: left;

        max-width: 100%;

        margin: 0 auto 15px;

    }

}





/* ========================= MOBILE PROFILE MENU STYLES ========================= */



.mobile-profile-menu {

    width: 100%;

    padding: 10px 20px; /* थोड़ा स्पेस */

    margin-top: 15px;

    border-top: 1px solid #eee; /* ऊपर एक लाइन */

}



/* मोबाइल में ड्रॉपडाउन हेडर को थोड़ा छोटा करें */

.mobile-profile-menu .dropdown-header {

    padding: 15px 0;

}

.mobile-profile-menu .login-btn-large {

    font-size: 15px;

    padding: 10px;

}



/* मोबाइल में मेनू लिंक्स */

.mobile-profile-menu .dropdown-menu a {

    padding: 12px 0; /* वर्टिकल स्पेसिंग */

    font-size: 14px;

}



/* मोबाइल में सपोर्ट सेक्शन */

.mobile-profile-menu .dropdown-support {

    padding: 15px 0;

}

.mobile-profile-menu .dropdown-support h4 {

    font-size: 13px;

}

.mobile-profile-menu .support-phone {

    padding: 10px;

}

.mobile-profile-menu .support-phone strong {

    font-size: 15px;

}

.mobile-profile-menu .support-actions a {

    padding: 8px;

    font-size: 14px;

}



/* मोबाइल पर .mobile-extra को flex करें ताकि भाषा और मेनू सही दिखें */

@media (max-width: 768px) {

    .nav-links .mobile-extra {

    margin-top: 10px;

    display: flex;

    flex-direction: column; /* <<<--- यह लाइन बदली गई है */

    align-items: center;    /* <<<--- यह लाइन जोड़ी गई है */

    gap: 15px;              /* <<<--- यह लाइन जोड़ी गई है */

    width: 100%;

}

}



/*

================================================================

=== STYLE FOR VERY LARGE SCREENS (WIDER THAN 1400px) ===

================================================================

*/



@media (min-width: 1400px) {



    /* Navbar को 1400px की चौड़ाई (width) देकर स्क्रीन के बीच में लाएं */

    .navbar {

        width: 100%;

        padding: 10px 12%;

    }



    /* Banner को 1400px की चौड़ाई देकर स्क्रीन के बीच में लाएं */

    .banner {

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

        

        /* (Optional) बड़े स्क्रीन पर बैनर के कोने गोल कर सकते हैं,

           ताकि वह और अच्छा दिखे */

        border-radius: 15px;

        overflow: hidden; /* border-radius को इमेज पर लागू करने के लिए जरूरी है */

    }



    /* बाकी सभी मुख्य सेक्शन्स और फुटर को भी 1400px की चौड़ाई देकर सेंटर करें */

    .live-pujas-section .container,

    .special-pujas-section .container,

    .benefits-section .container,

    .about-section .container,

    .live-puja-section .container,

    .puja-section .container, { 

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

    }

    

    /* Live aur Special Puja cards ko bada karein */

    .live-pujas-section .puja-card,

    .special-pujas-section .puja-card-special {

        width: 450px; /* Original width se badhaya gaya hai */

        padding: 20px; /* Thoda padding bhi badha di hai */

    }



    /* Cards ke beech ka space thoda badhayein */

    .live-pujas-section .puja-cards,

    .special-pujas-section .puja-cards {

        gap: 30px; /* Original gap se badhaya gaya hai */

    }

    

    /* --- Puja Details Page ke liye styles --- */

    .puja-hero-section,

    .tabs-nav-sticky,

    .puja-page-content {

        max-width: 1400px;

        margin-left: auto;

        margin-right: auto;

        width: 100%; /* Yeh sunishchit karega ki element poori jagah le */

    }



    /* 1. Main container ko 12% left/right padding dein */

    .live-pujas-section,

    .special-pujas-section,

    .about-section {

        padding-left: 5%;

        padding-right: 5%;

        /* Yeh zaroori hai taki padding container ke size me shamil ho */

        box-sizing: border-box; 

    }



    /* 2. Cards ke container ko flex banayein */

    .live-pujas-section .puja-cards,

    .special-pujas-section .puja-cards {

        display: flex;

        /* flex-wrap: wrap;  */
        /* Safety ke liye */

        /* Cards ke beech me 2% screen width ka gap */

        gap: 1.5vw; 

    }



    /* 3. Har card ki width ko screen ka 24% karein */

    .live-pujas-section .puja-card,

    .special-pujas-section .puja-card,

    .special-pujas-section .puja-card-special {

        /* Purane flex, min-width, max-width ko hatakar yeh likhein */

        width: 24vw;

        /* Height ko responsive banane ke liye */

        height: auto;

    }

    

    /* 4. Card ke andar image ki height ko width ke anupaat me rakhein */

    .live-pujas-section .puja-img,

    .special-pujas-section .puja-img {

        aspect-ratio: 16 / 9; /* Image ka anupaat set karein */

        width: 100%;

        height: auto; /* Height apne aap adjust hogi */

        margin-bottom: 12px;

    }



    .live-pujas-section .puja-img img,

    .special-pujas-section .puja-img img {

        height: 100%; /* Base CSS ke 'height: 150px' ko override karega */

        object-fit: cover;

    }



    /* FIX #2 (HELPER): Heading ke upar ka sabhi margin hata dega */

    .live-pujas-section .puja-card h3,

    .special-pujas-section .puja-card h3,

    .special-pujas-section .puja-card-special h3 {

        margin-top: 0; /* Upar ka margin bilkul hata dein */

    }





    /* 1. Hero section ko full-width banayein */

.puja-section {

    /* Purane margin ko hatayein taki yeh poori jagah le */

    margin: 0; 

    padding: 0; /* Agar koi extra padding ho to use hatayein */

    width: 100%;

    max-width: 100vw; /* Sunishchit karein ki yeh screen se bahar na jaaye */

}



/* 2. Section ke title ko left se space dein */

.puja-section-title {

    /* Badi screen par 12% ka space, jaisa baki sections me hai */

    /* padding-left: 12%;

    padding-right: 12%; */

    /* padding ko element ki width me shamil karne ke liye */

    box-sizing: border-box; 

}



/* .footer-main,

.footer-sub {

    width: 100%; 

        padding-left: 5%;

        padding-right: 5%;

        box-sizing: border-box;

} */





}



/* ========================= RESPONSIVE STYLES ========================= */



/* For Mobile Phones */



@media (min-width: 768px){
.splide__slide img {

    width: 100%;

    height: 530px; 
    /* आप अपनी जरूरत के अनुसार हाइट सेट करें */

    /* object-fit: cover;  */
    /* यह इमेज को बिना बिगाड़े फिट करेगा */

    /* border-radius: 35px; */
     /* इमेज के कोनों को गोल करने के लिए */

}
}


@media (max-width: 768px) {



    /* ADD THIS CODE to prevent cards from shrinking */

    .live-pujas-section .puja-card,

    .special-pujas-section .puja-card-special {

        width: 300px;     /* Maintains the desktop width */

        flex-shrink: 0;   /* Prevents the card from shrinking */

    }

    /* END OF ADDED CODE */



    .footer-main .container {

        grid-template-columns: 1fr; /* 1 column for mobile */

        text-align: center; /* Center align content on mobile */

    }

    

    .footer-logo {

        margin-left: auto;

        margin-right: auto;

    }

}


@media screen and (max-width:992px){
    .container, .container1, .container-about{padding:0 20px;}
}


/*************About page ***********/

.container-about{
    max-width: 1024px;
    margin:60px auto
}

.about-main, .mission-section, .about-details, .why-choose, .contact-main{
    margin-bottom:60px;
    display: flex;
    flex-direction: column;
    gap: 30px
}

.why-choose ul{margin-left: 23px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/*************Contact page***************/

        .container-contact {max-width: 1024px; margin: 40px auto; padding: 20px;}

        /* .container1 h1 { color: #2c3e50; border-bottom: 2px solid #ff6f00; padding-bottom: 10px; margin-bottom: 20px; } */

        .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }

        .contact-form h3,.contact-info h3{margin-bottom:30px}

        .contact-form .form-group { margin-bottom: 20px; }

        .contact-form label { display: block; margin-bottom: 5px; font-weight: 600; }

        .contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }

        .contact-form button { background-color: #a01303; color: white; padding: 12px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }

        .contact-info p { line-height: 1.8; }

        .success-message { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 15px; border-radius: 5px; margin-bottom: 20px; }

        @media (max-width: 768px) { .contact-wrapper { grid-template-columns: 1fr; } }


    /*******************/

     .listing{margin-left: 18px;
    display: flex;
    gap: 20px;
    flex-direction: column;}