/* ==================== index file css ==================== */
  /* ==================== TOP SECTION BACKGROUND ==================== */
    .top-section {
      background-image: url('../images/top_main_img.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      color: white;
    }
    .top-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 0;
    }
    .top-section > * {
      position: relative;
      z-index: 1;
    }
    /* ==================== HEADER ==================== */
    header {
      padding: 0px 0;
      text-align: center;
      animation: slideDownFade 1.2s ease-out;
    }
    @keyframes slideDownFade {
      from { opacity: 0; transform: translateY(-30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .header-logo img {
      max-width: 110px;
      height: auto;
      transition: transform 0.3s ease;
    }
    .header-logo img:hover {
      transform: scale(1.05) rotate(-2deg);
    }
    /* ==================== SEARCH FORM ==================== */
    .search-input {
      border: 2px solid #ddd;
      border-radius: 20px;
      padding: 8px 16px;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .search-input:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
      outline: none;
    }
    .search-btn {
      border-radius: 20px;
      padding: 8px 16px;
      background: linear-gradient(135deg, #007bff, #0056b3);
      border: none;
      transition: background 0.3s ease;
    }
    .search-btn:hover {
      background: linear-gradient(135deg, #0056b3, #003f7f);
    }
    @media (max-width: 576px) {
      .search-form {
        flex-direction: column;
        gap: 8px;
      }
      .search-input, .search-btn {
        width: 100%;
      }
    }
    /* ==================== NAVBAR ==================== */
    .navbar-custom {
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      border-radius: 12px;
      padding: 0.5rem 1rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
      transition: background 0.3s ease;
    }
    .navbar-custom a.nav-link {
      color: #fff;
      font-weight: 500;
      font-size: 14px;
      padding: 6px 10px;
      margin: 0 5px;
      transition: all 0.3s ease-in-out;
      border-radius: 6px;
      white-space: nowrap;
    }
    .navbar-custom a.nav-link:hover {
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
    }
    .navbar-custom a.nav-link.active {
      background-color: #fff;
      color: #007bff !important;
    }
    .navbar-toggler {
      border: none;
      background-color: rgba(255, 255, 255, 0.3);
    }
    .navbar-toggler-icon {
      filter: invert(1);
    }
    .navbar-wrapper {
      max-width: 800px;
      margin: 40px auto;
    }
    /* Dropdown styling for Trade Events */
    .dropdown-menu {
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      border: none;
      border-radius: 8px;
      margin-top: 6px;
    }
    .dropdown-item {
      color: white;
      font-size: 13px;
      padding: 8px 16px;
    }
    .dropdown-item:hover {
      background-color: rgba(255, 255, 255, 0.15);
    }
    /* ==================== HERO SECTION ==================== */
    .hero-section {
      width: 100%;
      height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      color: white;
      text-align: center;
    }
    .hero-text {
      max-width: 1200px;
    }
    .hero-text h1 {
      font-size: 3rem;
      font-weight: 700;
      text-shadow: 2px 2px 10px rgba(0,0,0,0.4);
    }
    .hero-text p {
      font-size: 1.2rem;
      text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
    }
    @media (max-width: 992px) {
      .hero-text h1 { font-size: 2.5rem; }
      .hero-text p { font-size: 1rem; }
    }
    @media (max-width: 768px) {
      .hero-section { height: 60vh; padding: 0 10px; }
      .hero-text h1 { font-size: 2rem; }
      .hero-text p { font-size: 0.9rem; }
    }
    @media (max-width: 576px) {
      .hero-section { height: 50vh; }
      .hero-text h1 { font-size: 1.8rem; }
      .hero-text p { font-size: 0.85rem; }
    }
    /* ==================== HERO BUTTON ==================== */
    .hero-btn {
      display: inline-block;
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      padding: 12px 30px;
      font-size: 1.1rem;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 500;
      margin-top: 15px;
      transition: all 0.3s ease;
    }
    .hero-btn:hover {
      background: linear-gradient(135deg, #0056b3, #003f7f);
      transform: translateY(-3px);
      text-decoration: none;
    }
    /* ==================== FLOATING AD BOX ==================== */
    #floating-box {
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      background: transparent;
      border-radius: 8px 0 0 8px;
      max-width: 200px;
      width: 90%;
      z-index: 1050;
      transition: all 0.3s ease;
    }
    #floating-box.hide {
      opacity: 0;
      transform: translateX(110%) translateY(-50%);
      pointer-events: none;
    }
    #floating-box img {
      width: 90%;
      height: 50vh;
      border-radius: 8px 0 0 8px;
      display: block;
    }
    #close-floating-box {
      position: absolute;
      top: 1px;
      right: 1px;
      background: rgba(0,0,0,0.5);
      border: none;
      color: white;
      border-radius: 50%;
      width: 25px;
      height: 25px;
      font-size: 16px;
      cursor: pointer;
      z-index: 2;
    }
    /* ====== Advertisement Card Styling ====== */
    .ad-card-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px auto;
      max-width: 900px;
    }
    .ad-card {
      position: relative;
      display: block;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      text-decoration: none;
    }
    .ad-card img {
      width: 100%;
      height: 160px;
      display: block;
      border-radius: 6px;
    }
    .ad-overlay {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0,0.55);
      color: white;
      text-align: center;
      padding: 20px 10px;
    }
    .ad-card:hover .ad-overlay {
      background: rgba(0,0,0,0.75);
    }
    .ad-overlay h4 {
      font-size: 1.2rem;
      margin-bottom: 5px;
    }
    .ad-overlay p {
      font-size: 0.9rem;
      margin: 0;
    }
    /* ===== Responsive ===== */
    @media (max-width: 576px) {
      .ad-card-container {
        max-width: 90%;
      }
    }
 
 /* browse_by_industries.php css */
 /* Scoped wrapper for all styles */
    .industries-module .heading-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 200px;
      text-align: center;
      margin-bottom: 2rem;
    }
    .industries-module .background-text {
      position: absolute;
      font-size: 10rem;
      color: rgba(0,0,0,0.05);
      z-index: 1;
      pointer-events: none;
      font-weight: bold;
      white-space: nowrap;
    }
    .industries-module .foreground-text {
      position: relative;
      z-index: 2;
      font-size: 4rem;
      font-weight: bold;
      color: #000;
    }

    /* Force exact 299:319 ratio using padding-bottom trick */
    .industries-module .category-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: all 0.4s ease;
      background: #000; /* fallback color while image loads */
    }
    .industries-module .category-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 35px rgba(0,0,0,0.25);
    }
    .industries-module .category-card::before {
      content: "";
      display: block;
      padding-bottom: 106.6889%; /* 319 ÷ 299 × 100 = 106.6889% → exact 299:319 ratio */
    }
    .industries-module .category-card img {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .industries-module .category-card:hover img {
      transform: scale(1.1);
    }

    /* Overlay & Text */
    .industries-module .category-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.52);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
    }
    .industries-module .category-title {
      color: #fff;
      font-size: 1.15rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.3px;
      margin: 0;
      text-shadow: 0 2px 10px rgba(0,0,0,0.8);
      line-height: 1.3;
    }

    /* Desktop view - show grid, hide carousel */
    .industries-module .desktop-grid {
      display: block;
    }
    .industries-module .mobile-carousel {
      display: none;
    }

    /* Optional: slightly larger text on larger screens */
    @media (min-width: 768px) {
      .industries-module .category-title { font-size: 1.25rem; }
    }

    /* Mobile and Tablet Styles */
    @media (max-width: 991px) {
      /* Hide desktop grid, show carousel */
      .industries-module .desktop-grid {
        display: none;
      }
      .industries-module .mobile-carousel {
        display: block;
      }

      /* Reduce heading size for mobile/tablet */
      .industries-module .foreground-text {
        font-size: 2.5rem;
      }
      .industries-module .background-text {
        font-size: 7rem;
      }
      .industries-module .heading-wrapper {
        height: 150px;
      }

      /* Scrollable carousel container */
      .industries-module .carousel-scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 20px;
        padding: 0 20px 15px 20px;
      }

      .industries-module .carousel-scroll-container::-webkit-scrollbar {
        display: none;
      }

      .industries-module .carousel-scroll-item {
        flex: 0 0 85%;
        scroll-snap-align: start;
      }

      .industries-module .carousel-scroll-item .category-card {
        height: 100%;
      }
    }

    @media (max-width: 576px) {
      .industries-module .foreground-text {
        font-size: 2rem;
      }
      .industries-module .background-text {
        font-size: 5rem;
      }
      .industries-module .heading-wrapper {
        height: 120px;
      }

      .industries-module .carousel-scroll-item {
        flex: 0 0 90%;
      }

      .industries-module .category-title {
        font-size: 1rem;
      }
    }
	
	
	/* latest_client_scrolling css */
	
	/* Scoped wrapper */
  .clients-module .heading-wrapper {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;text-align:center;margin-bottom:2rem}
  .clients-module .background-text1 {position:absolute;font-size:10rem;color:rgba(0,0,0,.05);z-index:1;pointer-events:none;font-weight:bold}
  .clients-module .foreground-text {position:relative;z-index:2;font-size:4rem;font-weight:bold;color:#000}

  /* ----- Carousel Wrapper ----- */
  .clients-module .carousel-wrapper {position:relative;max-width:100%;overflow:hidden;margin:0 auto}
  .clients-module .carousel {overflow:hidden;background:#f8f9fa;padding:30px 0;user-select:none;cursor:grab;margin:0}
  .clients-module .carousel:active {cursor:grabbing}
  .clients-module .carousel-track {display:flex;width:fit-content;margin:0;padding:0}

  /* ----- Cards ----- */
  .clients-module .cards {
    flex:0 0 180px;height:120px;margin-right:20px;background:#fff;border-radius:12px;overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;justify-content:center;align-items:center;
    transition:all .3s;
  }
  .clients-module .cards:hover {transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.2)}
  .clients-module .cards img {max-width:90%;max-height:90%;object-fit:contain;transition:transform .4s}
  .clients-module .cards:hover img {transform:scale(1.1)}

  .clients-module .ad-cards-container {
    display:flex;justify-content:center;align-items:center;margin:50px auto;max-width:1200px;padding:0 20px;
  }
  .clients-module .ad-cards {
    position:relative;display:block;border-radius:12px;overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.2);text-decoration:none;max-width:900px;width:100%;margin:0;
  }
  .clients-module .ad-cards img {
    width:100%;
    height:160px;
    object-fit:cover;
    display:block;border-radius:12px;margin:0;
  }
  

  /* ----- Responsive ----- */
  @media (max-width:991px) {
    .clients-module .foreground-text {font-size:2.5rem}
    .clients-module .background-text1 {font-size:5rem}
    .clients-module .heading-wrapper {height:150px}
  }

  @media (max-width:576px) {
    .clients-module .cards {flex:0 0 140px;height:100px;margin-right:15px}
    .clients-module .ad-cards img {height:130px}
    .clients-module .foreground-text {font-size:2rem}
    .clients-module .background-text1 {font-size:3.4rem}
    .clients-module .heading-wrapper {height:120px}
  }
	
	
	/* browse_by_listing css */
	/* ────────────────────────────────────────────────
       Your original styles + small improvements
    ──────────────────────────────────────────────── */
    .featured-module .image-wrapper {
      position: relative;
      height: 200px;
      overflow: hidden;
      background: #f8f9fa;           /* very light gray while loading */
    }

    .featured-module .image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      background: #f8f9fa;           /* fallback color during load */
    }

    .featured-module .business-card:hover .image-wrapper img {
      transform: scale(1.05);
    }

    /* Rest of your styles remain unchanged */
    .featured-module .heading-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 200px;
      text-align: center;
      margin-bottom: 2rem;
    }
    .featured-module .background-text {
      position: absolute;
      font-size: 10rem;
      color: rgba(0, 0, 0, 0.05);
      z-index: 1;
      pointer-events: none;
      font-weight: bold;
    }
    .featured-module .foreground-text {
      position: relative;
      z-index: 2;
      font-size: 4rem;
      font-weight: bold;
      color: #000;
    }
    .featured-module .business-grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;
      margin: 50px auto;
      max-width: 1200px;
      padding: 0 20px;
    }
    .featured-module .business-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .featured-module .business-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    .featured-module .overlay {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0,0.55);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 15px;
      font-size: 0.9rem;
    }
    .featured-module .overlay i {
      margin-right: 6px;
      color: #fff;
    }
    .featured-module .business-info {
      padding: 20px;
      text-align: left;
    }
    .featured-module .business-info h4 {
      font-size: 1.2rem;
      color: #000;
      margin-bottom: 8px;
    }
    .featured-module .business-info p {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 10px;
    }
    .featured-module .business-info h5 {
      font-size: 1rem;
      color: #000;
      margin: 15px 0 10px;
      font-weight: 600;
    }
    .featured-module .product-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .featured-module .product-links p {
      background: #e0e0e0;
      color: #000;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 0.9rem;
      margin: 0;
    }
    .featured-module .featured-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background: #d32f2f;
      color: white;
      font-size: 0.85rem;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 4px;
      z-index: 5;
      text-transform: uppercase;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    .featured-module .ad-card-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px auto;
      max-width: 900px;
    }
    .featured-module .ad-card {
      position: relative;
      display: block;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      text-decoration: none;
    }
    .featured-module .ad-card img {
      width: 100%;
      height: 160px;
      display: block;
      border-radius: 6px;
    }

    /* Desktop view - show grid, hide carousel */
    .featured-module .desktop-grid {
      display: block;
    }
    .featured-module .mobile-carousel {
      display: none;
    }

    /* Mobile and Tablet Styles */
    @media (max-width: 991px) {
      .featured-module .desktop-grid {
        display: none;
      }
      .featured-module .mobile-carousel {
        display: block;
      }
      .featured-module .foreground-text {
        font-size: 2.5rem;
      }
      .featured-module .background-text {
        font-size: 7rem;
      }
      .featured-module .heading-wrapper {
        height: 150px;
      }
      .featured-module .carousel-scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 20px;
        padding: 0 20px 15px 20px;
        margin: 50px auto;
      }
      .featured-module .carousel-scroll-container::-webkit-scrollbar {
        display: none;
      }
      .featured-module .carousel-scroll-item {
        flex: 0 0 85%;
        scroll-snap-align: start;
      }
      .featured-module .carousel-scroll-item .business-card {
        height: 100%;
      }
    }
    @media (max-width: 768px) {
      .featured-module .overlay {
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.85rem;
      }
    }
    @media (max-width: 576px) {
      .featured-module .foreground-text {
        font-size: 2rem;
      }
      .featured-module .background-text {
        font-size: 5rem;
      }
      .featured-module .heading-wrapper {
        height: 120px;
      }
      .featured-module .carousel-scroll-item {
        flex: 0 0 90%;
      }
    }
	
	/* automative_power_energy_news css */
	 /* All custom styles scoped under .ape-module */

            .ape-module .heading-wrapper {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 160px;
                text-align: center;
                margin-bottom: 1.8rem;
            }

            .ape-module .background-text {
                position: absolute;
                font-size: 7.5rem;
                color: rgba(0, 0, 0, 0.04);
                z-index: 1;
                pointer-events: none;
                font-weight: bold;
            }

            .ape-module .foreground-text {
                position: relative;
                z-index: 2;
                font-size: 2.8rem;
                font-weight: bold;
                color: black;
            }

            .ape-module .custom-title {
                font-size: 1.55rem;
                font-weight: 600;
                color: black;
                margin-bottom: 0.8rem;
            }

            /* === CARD – IMAGE LEFT + TEXT RIGHT === */
            .ape-module .news-card {
                border: none;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 3px 12px rgba(0,0,0,0.09);
                background: white;
                min-height: 160px;
                display: flex;
                flex-direction: row;
                transition: all 0.22s ease;
            }

            .ape-module .news-card-img-wrapper {
                flex: 0 0 42%;
                overflow: hidden;
            }

            .ape-module .news-card-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .ape-module .news-card-body {
                flex: 1;
                padding: 1rem 1.25rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .ape-module .news-card-title {
                font-size: 1.05rem;
                font-weight: 600;
                line-height: 1.32;
                margin-bottom: 0.4rem;
                color: #111;
            }

            .ape-module .news-card-date {
                font-size: 0.82rem;
                color: #6c757d;
                margin-bottom: 0.5rem;
            }

            .ape-module .news-card-text {
                font-size: 0.89rem;
                line-height: 1.42;
                color: #444;
                margin-bottom: 0.7rem;
                flex-grow: 1;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .ape-module .btn-read-more {
                font-size: 0.84rem;
                padding: 0.35rem 0.9rem;
                align-self: flex-start;
            }

            /* Desktop view - show normal layout */
            .ape-module .desktop-layout {
                display: block;
            }
            .ape-module .mobile-carousel {
                display: none;
            }

            /* Mobile and Tablet Styles */
            @media (max-width: 991px) {
                /* Hide desktop layout, show carousel */
                .ape-module .desktop-layout {
                    display: none;
                }
                .ape-module .mobile-carousel {
                    display: block;
                }

                /* Reduce heading size for mobile/tablet */
                .ape-module .foreground-text {
                    font-size: 2rem;
                }
                .ape-module .heading-wrapper {
                    height: 130px;
                }
                .ape-module .background-text {
                    font-size: 5.5rem;
                }

                .ape-module .custom-title {
                    font-size: 1.3rem;
                }

                /* Scrollable carousel container */
                .ape-module .carousel-scroll-container {
                    display: flex;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;
                    gap: 15px;
                    padding: 0 15px 10px 15px;
                }

                .ape-module .carousel-scroll-container::-webkit-scrollbar {
                    display: none;
                }

                .ape-module .carousel-scroll-item {
                    flex: 0 0 85%;
                    scroll-snap-align: start;
                }

                .ape-module .carousel-scroll-item .news-card {
                    height: 100%;
                }
            }

            /* Mobile → stack image on top */
            @media (max-width: 576px) {
                .ape-module .news-card {
                    flex-direction: column;
                    min-height: auto;
                }

                .ape-module .news-card-img-wrapper {
                    flex: 0 0 auto;
                    height: 140px;
                }

                .ape-module .news-card-body {
                    padding: 1rem;
                }

                .ape-module .foreground-text {
                    font-size: 1.5rem;
                }
                .ape-module .heading-wrapper {
                    height: 110px;
                }
                .ape-module .background-text {
                    font-size: 3.7rem;
                }

                .ape-module .custom-title {
                    font-size: 1.5rem;
                }
            }
			
	/* building_construction_interior_grids css */
	
        .bc-module .section-title {
          font-weight: bold;
          font-size: 1.4rem;
          margin: 20px 0;
          background: linear-gradient(90deg, #a0d468, #ffce54, #ac92ec);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .bc-module .news-card {
          position: relative;
          overflow: hidden;
          border-radius: 8px;
          cursor: pointer;
        }
        .bc-module .news-card img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.4s ease;
        }
        .bc-module .news-card:hover img {
          transform: scale(1.05);
        }
        .bc-module .news-overlay {
          position: absolute;
          bottom: 0;
          width: 100%;
          color: #fff;
          padding: 12px;
          font-size: 1rem;
          font-weight: bold;
        }
        .bc-module .custom-title {
          font-size: 2rem;
          color: black;
        }
        /* Reduced height for the first two cards */
        .bc-module .reduced-height {
          max-height: 300px;
          overflow: hidden;
        }
      
        /* Ensure image still fills the reduced space nicely */
        .bc-module .reduced-height img {
          height: 100%;
          object-fit: cover;
          object-position: center;
        }

        /* Desktop view - show grid, hide carousel */
        .bc-module .desktop-grid {
          display: block;
        }
        .bc-module .mobile-carousel {
          display: none;
        }

        /* Mobile and Tablet Styles */
        @media (max-width: 991px) {
          /* Hide desktop grid, show carousel */
          .bc-module .desktop-grid {
            display: none;
          }
          .bc-module .mobile-carousel {
            display: block;
          }

          /* Reduce heading size for mobile/tablet */
          .bc-module .custom-title {
            font-size: 1.8rem;
          }

          /* Carousel styles */
          .bc-module .carousel-inner {
            padding: 0 10px;
          }

          .bc-module .carousel-item {
            padding: 0 5px;
          }

          .bc-module .carousel-item .news-card {
            height: 350px;
            border-radius: 12px;
          }

          .bc-module .carousel-item .news-card img {
            height: 100%;
          }

          /* Hide carousel controls */
          .bc-module .carousel-control-prev,
          .bc-module .carousel-control-next {
            display: none;
          }

          /* Scrollable carousel container */
          .bc-module .carousel-scroll-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
            gap: 15px;
            padding: 0 15px 10px 15px;
          }

          .bc-module .carousel-scroll-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
          }

          .bc-module .carousel-scroll-item {
            flex: 0 0 85%;
            scroll-snap-align: start;
          }

          .bc-module .carousel-scroll-item .news-card {
            height: 350px;
            border-radius: 12px;
          }
        }

        @media (max-width: 576px) {
          /* Even smaller heading for mobile */
          .bc-module .custom-title {
            font-size: 1.5rem;
          }

          .bc-module .carousel-scroll-item .news-card {
            height: 300px;
          }

          .bc-module .news-overlay {
            font-size: 0.9rem;
            padding: 10px;
          }
        }