.mobile-center-title {
    display: none;
}

/* --- Desktop (1600px and up) --- */
@media only screen and (min-width: 1600px) {
}

/* --- Tablet / Small Desktop (992px to 1199px) --- */
@media only screen and (max-width: 1199.98px) and (min-width: 992px) {
    .top-info li {
        font-size: 13px;
    }
}

/* --- Tablets & Mobile Landscape (Up to 991px) --- */
@media only screen and (max-width: 991.98px) {
    /* Consolidated Sticky & General Mobile Row Fix */
    .sticky-wrapper .container .row,
    .th-header .container.th-container2 > .row {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Unified Logo Sizing */
    .sticky-wrapper .header-logo img {
        height: 65px !important; /* Adjusted based on your previous request */
        margin: 0 !important;
    }

    .sticky-wrapper .header-logo {
        text-align: left !important;
        width: auto !important;
    }

    /* Combined column logic */
    .sticky-wrapper .col-auto,
    .th-header .col-auto {
        width: auto !important;
        padding: 0 15px !important;
    }

    /* Top Info Centering */
    .top-info {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

/* --- Specific Tablet Range (768px to 991px) --- */
@media only screen and (max-width: 991.98px) and (min-width: 768px) {
    .mobile-logo img {
        height: 120px;
    }
}

/* --- Extra Small Mobile (Under 576px) --- */
@media only screen and (max-width: 575.98px) {
    /* Target ONLY the mobile center title and its spans */

    /* Use a combined selector to increase specificity */
    .th-header .th-container2 .mobile-center-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* THE FIX: Force White Color */
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important; /* Extra fix for Safari/iOS */

        text-align: center !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        padding: 5px 0 !important;
        width: 100% !important;
        margin-top: 15px;
    }

    /* Ensure the line break doesn't interfere with the color */
    .mobile-center-title br {
        display: block !important;
    }

    /* Force Logo and Menu Toggle to stay on the same line */
    .th-header .container.th-container2 > .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .th-header .header-logo {
        text-align: left !important;
        width: auto !important;
        margin-top: 15px;
    }

    .th-header .header-logo img {
        height: 75px !important; /* Increased from 50px */
        width: auto !important; /* Keeps aspect ratio */
        margin: 0 !important;
    }

    .th-header .col-auto {
        width: auto !important;
    }

    /* 1. TOP BANNER & HERO IMAGE FIX */
    .Service-innersec3,
    .service-innersec3-img2,
    .th-hero-wrapper,
    .about-sec .img-box {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        width: 100% !important;
        display: block !important;
        overflow: visible !important;
    }

    .Service-innersec3 img,
    .service-innersec3-img2 img,
    .th-hero-wrapper img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        border-radius: 10px !important;
    }

    .Nandanam-sec-mainee.cust-bg {
        background-image: none !important;
        background-color: #f8f8f8 !important;
        padding: 40px 15px !important;
    }

    .Nandanam-sec-mainee p {
        color: #333 !important;
    }

    /* 3. Header & Red Top Bar */
    .header-top {
        /* padding: 10px 0 !important; */
        /* height: auto !important; */
        /* background-color: #a91931; */

        display: none !important;
    }

    .header-top .container > .row {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .top-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
        list-style: none !important; /* Removes bullet points if any */
        /* margin-bottom: 5px !important; */
        width: 100%;
    }

    .top-info li {
        font-size: 12px !important;
        margin: 5px 0 !important; /* Gives breathing room between phone and email */
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100%;
        white-space: nowrap;
    }

    /* Fix for Icon Spacing */
    .top-info li i,
    .top-info li svg {
        margin-right: 10px !important; /* Space between icon and text */
        margin-left: 0 !important;
        display: inline-block !important;
        width: 16px; /* Gives icons a fixed width so text starts at same point */
        text-align: center;
    }

    /* Target only the 'text-white' span inside the 'sec-title' */
    span.cust-style1 {
        color: #a91931 !important;
        display: inline-block !important; /* Ensures it respects layout rules */
        text-align: center !important;
        width: 100%;

        /* If the 'split-text' library is hiding it with opacity */
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 35px;
    }

    .th-btn.cust-style2 {
        /* 1. Positioning & Display (The fix for width) */
        display: inline-block !important; /* Prevents full-width stretching */
        width: auto !important; /* Ensures it only stays as wide as the text */
        position: relative;
        text-align: center;
        vertical-align: middle;

        /* 2. Shape & Spacing */
        padding: 12px 22px;
        border-radius: 30px; /* Simplified shorthand for 30px all around */
        line-height: 1;

        /* 3. Colors & Border */
        background-color: transparent; /* Assuming a ghost button style based on your CSS */
        color: var(--theme-color);
        fill: var(--theme-color); /* For any SVG icons inside */
        border: 1px solid var(--theme-color);

        /* 4. Typography & Effects */
        font-weight: 500;
        font-size: 16px;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
        box-shadow: 0px 0px 0px -7px rgba(0, 0, 0, 0);
    }

    /* 5. Layout & Grid Fixes */
    .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .col-lg-4,
    .col-md-5,
    .col-lg-8,
    .col-md-7,
    .col-12,
    .col-auto {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 10px !important;
    }

    /* 6. Mobile Sidebar */
    .th-menu-wrapper {
        width: 290px !important;
    }
    .th-menu-area .mobile-logo img {
        height: 100px !important;
    }

    /* 7. NADANAM SLIDER IMAGE HEIGHT */
    .project-boxss1-ov {
        height: 350px !important;
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 15px;
    }

    .project-boxss1-ov img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* 8. GALLERY CARD HEIGHT */
    .gallery-card {
        margin-bottom: 20px !important;
    }
    .gallery-img {
        height: 380px !important;
        width: 100% !important;
        overflow: hidden !important;
        position: relative;
    }
    .gallery-img img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 9. SERVICE/BLOG CARD IMAGE FIX (New Section) */
    .blog-card {
        margin-bottom: 30px !important;
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
    }

    .box-img.global-img {
        height: 250px !important; /* Set a fixed height for service images */
        width: 100% !important;
        overflow: hidden !important;
    }

    .box-img.global-img img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important; /* Fills the container perfectly */
        display: block !important;
    }

    .box-content {
        padding: 15px !important;
        text-align: center !important;
    }

    .box-title {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    h2,
    .sec-title,
    .title-area h2 {
        font-size: 19px !important;
        text-align: center !important;
    }

    .Inner-banner img {
        height: 175px;
    }

    /* Footer Social Links Centering */
    .footer-social-links-gold {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 15px !important;
    }

    .footer-social-links-gold ul {
        display: flex !important;
        flex-direction: row !important; /* Keep icons side-by-side */
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important; /* Removes the left-side "ghost" padding */
        margin: 0 auto !important;
        list-style: none !important;
        gap: 15px; /* Spacing between social icons */
    }

    .footer-social-links-gold ul li {
        margin: 0 !important;
        display: inline-block !important;
    }

    /* Twitter Image Icon Fix */
    .footer-social-links-gold ul li img {
        height: 16px; /* Adjust based on your FontAwesome icon size */
        width: auto;
        vertical-align: middle;
    }

    /* 3. FOOTER GRID - UPDATED FOR SAME-ROW LAYOUT */
    .widget-area .container > .row {
        display: flex !important;
        flex-direction: row !important; /* Allow side-by-side */
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    /* Column 1: Logo Section (Full Width) */
    .widget-area .row > div:nth-child(1) {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-bottom: 30px;
    }

    /* Column 2: Quick Links & Column 3: Nadanam (Side-by-Side) */
    .widget-area .row > div:nth-child(2),
    .widget-area .row > div:nth-child(3) {
        width: 50% !important;
        flex: 0 0 50% !important;
        text-align: left !important;
        padding: 0 10px !important;
        margin-bottom: 30px !important;
    }

    /* Column 4: Activities & Column 5: Contact Us (Back to Full Width) */
    .widget-area .row > div:nth-child(4),
    .widget-area .row > div:nth-child(5) {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: left !important;
        margin-bottom: 30px !important;
    }

    /* Reset internal alignment for side-by-side menus */
    .widget-area div:nth-child(2) .menu-all-pages-container ul.menu,
    .widget-area div:nth-child(3) .menu-all-pages-container ul.menu {
        text-align: left !important;
        padding-left: 0 !important;
        list-style: none !important;
    }

    .widget-area .widget_title {
        font-size: 16px !important;
        text-align: left !important;
        margin-bottom: 25px !important;
    }

    /* 2. GLOBAL RESET (Other rows stay as columns) */
    body:not(.widget-area) .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. IMAGE FIXES (Gallery, Services, Nadanam) */
    .project-boxss1-ov,
    .gallery-img,
    .box-img.global-img {
        width: 100% !important;
        overflow: hidden !important;
    }

    .project-boxss1-ov {
        height: 350px !important;
    }
    .gallery-img {
        height: 380px !important;
    }
    .box-img.global-img {
        height: 250px !important;
    }

    .project-boxss1-ov img,
    .gallery-img img,
    .box-img.global-img img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .th-hero-wrapper img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .why-box1-imm img {
        height: 45vw !important;
    }

    /* 1. Global Spacing for Image Containers */
    .gallery-card,
    .blog-card,
    .Service-innersec3,
    .service-innersec3-img2,
    .project-boxss1-ov,
    .th-hero-wrapper {
        margin-bottom: 25px !important; /* Adjust this value for more or less space */
    }

    /* 2. Fix for Columns stacking too tight */
    .row > div[class*="col-"] {
        margin-bottom: 20px !important;
    }

    /* 3. Remove margin from the very last item in a row to prevent double spacing */
    .row > div[class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }

    /* 4. Spacing for the Service Section Image */
    .box-img.global-img {
        margin-bottom: 15px !important; /* Space between image and its title/content */
    }

    /* 5. Section Padding */
    section,
    .about-sec,
    .Nandanam-sec-mainee {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}