/* ==========================================================
   Living Kanyakumari Homepage Styles
   ----------------------------------------------------------
   Module 1 : Business Cards
   Module 2 : Header
   Module 3 : Hero Banner
   Module 4 : Search
   Module 5 : Premium Sponsors
   Module 6 : Offers
   Module 7 : Explore
   Module 8 : Responsive
========================================================== */
/* ==========================================================
   MODULE 1 : BUSINESS CARDS
========================================================== */

.featured-grid{
    display:grid !important;
    grid-template-columns:repeat(6,1fr) !important;
    gap:15px !important;
}
.featured-businesses{
    max-width:1400px;
    margin:40px auto;
    padding:20px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.featured-businesses h2{
    margin-bottom:20px;
    font-size:28px;
    font-weight:700;
}

.featured-grid{
    display:grid !important;
    grid-template-columns:repeat(6,1fr) !important;
    gap: 5px;
}
/* Container transition */
.featured-card {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.featured-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 107, 0, 0.15) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}


/* Image Wrapper Fix */
.featured-image {
  width: 100% !important;
  height: 210px !important;           /* Fixed height matching event card images */
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
/* Image zoom transition */
.featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

/* Image zoom on card hover */
.featured-card:hover .featured-image img,
.featured-card:hover img {
  transform: scale(1.08) !important;
}
.featured-card:hover img{
    transform:scale(1.05);
}
/* Content Area Padding */
.featured-content {
  padding: 10px !important;           /* Keeps padding inside text area only */
}

.featured-content h3 a{
    text-decoration:none;
    color:#222;
}

.featured-content h3 a:hover{
    color:#0d9ecc;
}


.business-category{
    font-size:13px;
    color:#0d9ecc;
    margin:4px 0;
    text-align:left;
}

.rating{
    color:#f5a623;
    font-size:13px;
    margin:4px 0;
    text-align:left;
}

.city{
    color:#666;
    font-size:13px;
    margin:4px 0;
    text-align:left;
}
.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.section-header h2{
    margin:0;
    font-size:28px;
    font-weight:700;
}
.view-all-link{
    color:#0d9ecc;
    text-decoration:none;
    font-weight:600;
    white-space:nowrap;
    transition:.3s;
}

.view-all-link:hover{
    color:#1166d9;
}
/* ==========================================================
   Business Near you
========================================================== */

.section-title-wrap{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.near-location{
margin-top:5px;
font-size:14px;
color:#666;
}
/* ===========================
   TOM SELECT - HERO SEARCH
=========================== */

.location-select-wrapper{
    width:220px;
    min-width:220px;
    flex-shrink:0;
}

.location-select-wrapper .ts-control{
    border:none !important;
    border-left:1px solid #e5e7eb !important;
    background:transparent !important;
    box-shadow:none !important;

    height:70px;
    display:flex;
    align-items:center;

    padding:0 16px !important;

    font-size:17px !important;
    font-weight:500;
    color:#333;
}
.location-select-wrapper .ts-control .item{
    font-size:17px !important;
    color:#333;
}
.location-select-wrapper .ts-control input{
    padding:0 !important;
    margin:0 !important;
    width:0 !important;
    min-width:0 !important;    
    font-size:17px;
}

.location-select-wrapper .ts-dropdown{
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    font-size:15px
}
.location-select-wrapper .ts-dropdown .option{
    font-size:17px !important;
    padding:12px 16px;
}
.location-select-wrapper .ts-control,
.location-select-wrapper .ts-control .item{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ==========================================================
   HOME DIRECTORY PANELS
========================================================== */

.home-directory-grid{
    max-width:1400px;
    margin:45px auto;
    padding:0 20px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.home-panel{

    background:#fff;
    border-radius:18px;

    border:1px solid #edf1f7;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    padding:22px;

    transition:.30s;
}

.home-panel:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.home-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;
}

.home-panel-header h2{

    font-size:32px;

    font-weight:700;

    margin:0;
}

.home-panel-header a{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;
}

.home-panel-item{

    display:flex;

    gap:15px;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #f1f3f6;
}

.home-panel-item:last-child{

    border-bottom:none;
}

.home-panel-item img{

    width:105px;

    height:72px;

    border-radius:10px;

    object-fit:cover;

    flex-shrink:0;
}

.home-panel-content{

    flex:1;
}

.home-panel-content h4{

    margin:0 0 8px;

    font-size:21px;

    font-weight:600;

    color:#222;
}

.home-panel-content p{

    margin:0;

    color:#777;

    font-size:15px;
}
.home-panel-thumb{
    width:105px;
    height:72px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
    display:block;
}
.home-panel-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 0;
    border-bottom:1px solid #eef2f7;
}

.home-panel-item:last-child{
    border-bottom:none;
}

.home-panel-thumb{
    width:110px;
    height:72px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
}

.home-panel-content{
    flex:1;
}
.home-panel-content h4{
    margin:0 0 6px;
    font-size:22px;
    font-weight:600;
    line-height:1.3;
    color:#222;
}
.home-panel-content p{
    margin:4px 0;
    font-size:13px;
    line-height:1.25;
    color:#666;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
   Global Sky Blue Hover Effect (Real Estate Style)
========================================================== */
.explore-card, 
.explore-column, 
.home-panel,
.real-estate-card,
.directory-box {
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid transparent; /* Ensures smooth border transition */
}

.explore-card:hover, 
.explore-column:hover, 
.home-panel:hover,
.real-estate-card:hover,
.directory-box:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 174, 239, 0.25) !important;
  border-color: rgba(0, 174, 239, 0.4) !important;
}
/* ==========================================================
   Global Sky Blue Hover Effect (Real Estate Style)
========================================================== */
.explore-card, 
.explore-column, 
.home-panel,
.real-estate-card,
.directory-box {
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid transparent; /* Ensures smooth border transition */
}

.explore-card:hover, 
.explore-column:hover, 
.home-panel:hover,
.real-estate-card:hover,
.directory-box:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 174, 239, 0.25) !important;
  border-color: rgba(0, 174, 239, 0.4) !important;
}
/* ==========================================================
   Universal Rich Sky Blue Hover Effect (All Homepage Elements)
========================================================== */
.home-panel,
.explore-card, 
.explore-column, 
.real-estate-card,
.directory-box,
.featured-card,
.event-card,
.offer-card,
.sponsor-card {
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid #edf1f7 !important;
}

.home-panel:hover,
.explore-card:hover, 
.explore-column:hover, 
.real-estate-card:hover,
.directory-box:hover,
.featured-card:hover,
.event-card:hover,
.offer-card:hover,
.sponsor-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.15), 0 0 25px rgba(0, 140, 204, 0.35) !important;
  border-color: rgba(0, 140, 204, 0.6) !important;
}
/* ==========================================================================
   MODERN HOVER EFFECT ENHANCEMENTS: HERO BANNER & POPULAR DIRECTORY PANELS
   ========================================================================== */

/* 1. HERO BANNER: BIG SEARCH BAR MODERN HOVER & FOCUS EFFECTS */
.lk-new-hero .big-search-bar {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.lk-new-hero .big-search-bar:hover {
  transform: translateY(-4px) scale(1.005) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 25px rgba(13, 158, 204, 0.4) !important;
  border-color: rgba(13, 158, 204, 0.7) !important;
}

.lk-new-hero .big-search-bar:focus-within {
  transform: translateY(-4px) scale(1.005) !important;
  box-shadow: 0 22px 45px rgba(37, 99, 235, 0.25), 0 0 30px rgba(13, 158, 204, 0.5) !important;
  border-color: #0d9ecc !important;
  background: #ffffff !important;
}

/* Smooth Interactive Zoom for Hero Search Button */
.lk-new-hero .big-search-bar .btn-search {
  transition: all 0.3s ease !important;
}

.lk-new-hero .big-search-bar:hover .btn-search {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(13, 158, 204, 0.4);
}

/* 2. POPULAR PANELS (Restaurants, Hotels, etc. / Home Directory Panels & Cards) */
.home-panel {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid #edf1f7 !important;
  position: relative;
  overflow: hidden;
}

/* Subtle, Modern Glow & Elevation on Hover */
.home-panel:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12), 0 0 25px rgba(13, 158, 204, 0.25) !important;
  border-color: rgba(13, 158, 204, 0.5) !important;
}

/* Individual Item Micro-Interactions inside Popular Panels */
.home-panel-item {
  transition: all 0.3s ease !important;
  border-radius: 10px;
  padding: 10px 8px !important;
  margin: 4px 0;
}

.home-panel-item:hover {
  background: #f4fbfd !important;
  transform: translateX(4px);
}

/* Thumbnail Scale Effect inside Panels */
.home-panel-item:hover .home-panel-thumb,
.home-panel-item:hover img {
  transform: scale(1.06);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.home-panel-thumb, 
.home-panel-item img {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

/* Panel Header Links Modern Highlight */
.home-panel-header a {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.home-panel-header a:hover {
  color: #0d9ecc !important;
  transform: translateX(3px);
}
/* ==========================================================================
   ENHANCED HERO BANNER "POPULAR" TAGS HOVER & MODERN LOOK
   ========================================================================== */

/* Container and alignment refinement for the popular tags row inside the hero */
.lk-new-hero .hero-popular-tags,
.lk-new-hero .popular-searches, 
.lk-new-hero div:has(> .btn, > a) {
  /* Targeting the row containing "Popular: Restaurants, Hotels, Hospitals..." */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Base style for individual popular filter pills inside the hero banner */
.lk-new-hero .hero-popular-tags a,
.lk-new-hero .hero-popular-tags button,
.lk-new-hero span ~ a,
.lk-new-hero .popular-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Modern Hover & Active Interaction Effects */
.lk-new-hero .hero-popular-tags a:hover,
.lk-new-hero .hero-popular-tags button:hover,
.lk-new-hero span ~ a:hover,
.lk-new-hero .popular-tag:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(13, 158, 204, 0.4) !important;
}

/* Click / Active micro-feedback */
.lk-new-hero .hero-popular-tags a:active,
.lk-new-hero .hero-popular-tags button:active {
  transform: translateY(-1px) scale(1.02) !important;
}

/* Styling for the leading "Popular:" text label to make it crisp against the background */
.lk-new-hero .popular-label,
.lk-new-hero span:has(+ a) {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-right: 4px;
}
 .header-top-custom .wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-height:74px;
    max-width:1400px;
    margin:auto;
    padding:0 32px;
    }

      #custom-logo h1 {
        margin: 0;
        font-size: 24px;
        color: white;
      }

      .nav-links {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .nav-links a {
        color: white;
        margin-left: 15px;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
      }

      .nav-links a:hover {
        text-decoration: underline;
      }

      .main-search {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .main-search .cell.c1,
      .main-search .cell.c2 {
        flex: 1 1 40%;
      }

      .main-search .cell.c3 {
        flex: 0 1 auto;
      }

      @media screen and (max-width: 768px) {
       .header-top-custom .wrapper{
        flex-direction:column;
        padding:12px;
        gap:12px;
      }

        .nav-links {
          margin-top: 10px;
        }

        .nav-links a {
          margin-left: 0;
          margin-right: 15px;
          font-size: 14px;
        }

        #custom-logo h1 {
          font-size: 20px;
        }

        .main-search {
          flex-direction: column;
        }

        .main-search .cell.c1,
        .main-search .cell.c2,
        .main-search .cell.c3 {
          flex: 1 1 100%;
        }
      }

/* Ensure category dropdown shows properly on mobile */
@media screen and (max-width: 768px) {
  .main-search {
    flex-direction: column;
  }

  .main-search .cell {
    width: 100% !important;
    display: block !important;
  }

  .main-search .cell.c2 select {
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .main-search .cell.c2 {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

.site-logo-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-logo-brand img {
  height: 60px;
  max-height: 60px;
  width: auto;
  display: block;
}

.site-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.banner-slider {
  width: 100%;
  height: 250px;  /* desktop height */
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 30px;
}

.banner-slider video {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* cover the container proportionally */
  position: absolute;
  top: 0;             /* fix invalid top */
  left: 0;
}
.banner-slider img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* center image */
  width: 100%;     /* fills width */
  height: auto;    /* keeps aspect ratio */
  max-height: 100%;/* ensures it doesn't overflow vertically */
}



.banner-slider img {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.banner-slider img.active {
  opacity: 1;
  z-index: 1;
}

/* Responsive heights */
@media screen and (max-width: 768px) {
  .banner-slider {
    height: 180px;
  }
}

@media screen and (max-width: 480px) {
  .banner-slider {
    height: 150px;
  }
}

      @media screen and (max-width: 768px) {
        .banner-slider {
          height: 180px;
        }
          .site-logo-brand img {
            height: 45px;
          }

          .site-title {
            font-size: 20px;
          }
      }

      @media screen and (max-width: 480px) {
        .banner-slider {
          height: 150px;
        }
      }
/* Add spacing between header and banner slider */
.home-search {
  margin-top: 40px; /* Desktop spacing */
}

/* For smaller screens, reduce the gap slightly */
@media screen and (max-width: 768px) {
  .home-search {
    margin-top: 35px;
  }
}

@media screen and (max-width: 480px) {
  .home-search {
    margin-top: 30px;
  }
}





/*New*/
/* ====== Modern Search Section ====== */
.search-section {
  background: transparent;
  text-align: center;
  margin-top: 60px;
}

/* ===== Banner ===== */
/*.banner-slider { width:100%; height:250px; position:relative; overflow:hidden; border-radius:12px; margin-bottom:30px; }*/
/*.banner-slider video { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }*/
/*.banner-slider img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }*/


/* Search bar */
/* ===== Search Bar ===== */
/* ====== Modern Search Section - Updated ====== */
/* ====== Modern Search Section - Updated ====== */
.big-search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 30px;        /* slightly bigger radius */
  padding: 15px 20px;         /* increase padding for height */
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  width: 95%;
  max-width: 1000px;           /* slightly wider */
  margin: 0 auto;
  transition: 0.3s;
  height: 70px;               /* slightly taller */
}


.popular-searches {
  margin-top: 15px;
  text-align: center;
}

.popular-searches span {
  font-weight: 600;
  margin-right: 8px;
}

.popular-searches a {
  display: inline-block;
  margin: 4px 6px;
  padding: 6px 12px;
  background: #f2f8fb;
  border-radius: 20px;
  text-decoration: none;
  color: #0d9ecc;
  font-size: 13px;
  transition: 0.3s;
}

.popular-searches a:hover {
  background: #0d9ecc;
  color: #fff;
}

.big-search-bar i.fa-magnifying-glass{
    color:#2563eb;
    font-size:18px;
    padding:0 18px;
    transition:all .3s ease;
}

.big-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 10px;
  font-size: 17px;
  color: #333;
  background: transparent;
  text-align: left; 
  margin-top: 20px; 
  padding-left:12px;   

}
/*
.location-select{
    border:none;
    border-left:1px solid #e5e7eb;
    background:transparent;

    height:100%;
    align-self:stretch;
    box-sizing:border-box;
    width:190px;

    padding:14px 40px 14px 16px;

    font-size:15px;
    font-weight:600;
    color:#374151;

    outline:none;
    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:14px;

    transition:.3s;
}

.location-select:hover{
    background:#f8fafc;
}*/

.location-select:focus{
    background:#eff6ff;
}

.location-select:hover{
    background:#f8fafc;
}

.big-search-bar .btn-search {
  background: transparent;    /* remove blue background */
  border: none;
  color: #0d9ecc;             /* arrow icon blue */
  font-size: 18px;            /* increase arrow size */
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 5px;
}

.big-search-bar .btn-search:hover {
  color: #007ba7;             /* slightly darker blue on hover */
}

.big-search-bar:hover {
  box-shadow: 0 8px 25px rgba(13,158,204,0.25);
  transform: translateY(-2px);
}

/* Mobile adjustments */
@media screen and (max-width:768px) {
  .big-search-bar {
    max-width: 90%;
    height: 40px;
    padding: 8px 15px;
  }

  .big-search-bar i.fa-magnifying-glass,
  .big-search-bar .btn-search {
    font-size: 16px;
  }

  .big-search-bar input {
    font-size: 14px;
  }
  .location-select {
  min-width: 100px;
  font-size: 12px;
}
}


/* ===== Category Icons ===== */
.category-icons {
  display:flex;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:10px;
  margin-top:25px;
  width:100%;
}
.cat-icon {
  flex:1;
  max-width:140px;
}
.cat-icon i { display:flex; align-items:center; justify-content:center; width:65px; height:65px; border-radius:50%; font-size:26px; color:#fff; margin:0 auto 8px; transition:0.3s; }
.cat-icon span { font-size:14px; font-weight:500; }
.cat-icon:hover i { transform:scale(1.1); box-shadow:0 4px 12px rgba(0,0,0,0.2); }

/* ===== Overlay ===== */
/* ===== Overlay Professional Style ===== */
.category-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.3s ease;
}

.category-overlay.show {
  display: flex;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.95);}
  to {opacity: 1; transform: scale(1);}
}

.overlay-inner {
  background: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  width: 90%;
  max-width: 1000px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  animation: slideUp 0.4s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Overlay header */
.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.overlay-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.overlay-header button {
  background: #f3f3f3;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  color: #555;
  transition: all 0.2s ease;
}

.overlay-header button:hover {
  background: #ff5252;
  color: white;
}

/* Search box */
.overlay-search-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 30px;
  padding: 8px 15px;
  margin-bottom: 20px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.overlay-search-box i {
  color: #0d9ecc;
  font-size: 16px;
  margin-right: 8px;
}

.overlay-search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #333;
}

/* Categories Grid */
.overlay-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  justify-items: center;
  padding-bottom: 20px;
}

.overlay-categories .cat-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.overlay-categories .cat-icon i {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #fff;
}

.overlay-categories .cat-icon span {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.overlay-categories .cat-icon:hover {
  transform: translateY(-5px);
}

/* Scrollbar styling */
.overlay-inner::-webkit-scrollbar {
  width: 8px;
}
.overlay-inner::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}
.overlay-inner::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .overlay-categories {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 15px;
  }

  .overlay-header h2 {
    font-size: 18px;
  }

  .overlay-search-box input {
    font-size: 14px;
  }
}

/* ===== Responsive ===== */
//@media screen and (max-width:768px) { .big-search-bar { flex-direction:row; padding:10px 15px; } }

/* ===== Refined Modern Header ===== */

/* Center promo */




/* Use transform for horizontal scroll */
@keyframes scrollPromo {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Logo */


.logo-brand img{
    width:58px;
    height:58px;
    border-radius:10px;
    object-fit:cover;
    transition:.35s;
}

.logo-brand:hover img{
    transform:rotate(-3deg) scale(1.05);
}

.logo-brand span{
    font-size:28px;
    font-weight:700;
    color:#fff;
    letter-spacing:.3px;
}

/* Smooth pulse animation for logo */
@keyframes smoothPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}



/* Small screens */
@media screen and (max-width: 768px) {
  .promo-banner {
    height: 20px;
    font-size: 12px;
  }
  #promoText {
    animation-duration: 15s;
  }
}
/* Header Right Icons */


.header-right a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.15);
    transition:.3s;
}

.header-right a:hover{
    background:#fff;
    color:#0d9ecc;
    transform:translateY(-2px);
}
.btn-post-ad{
    background:#FFD43B !important;
    color:#005e86 !important;
    font-weight:700;
}

.btn-post-ad:hover{
    background:#ffc800 !important;
}

/* Fade in header animation */
@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-15px);}
  100% { opacity: 1; transform: translateY(0);}
}

/* Responsive */
@media screen and (max-width:768px) {
  .header-top-custom .wrapper {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
  }

  .header-left, .header-center, .header-right {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
  }
  .header-center{

order:3;

width:100%;

}
.header-right{

justify-content:center;

width:100%;

}

  .logo-brand img {
    height: 40px;
  }
.logo-brand img{
  width:46px;
  height:46px;
  }

  .promo-banner {
    height: 20px;
    font-size: 12px;
  }

  #promoText {
    animation-duration: 20s; /* slower scroll on mobile */
  }

  .header-right a {
    width: 35px;
    height: 35px;
    font-size: 15px;
  }
  }
@media screen and (max-width:768px) 
{
  .featured-grid {
    grid-template-columns: 1fr !important;
  }
}










.fa-location-dot{
   color:#2563eb;
    font-size:11px;
    margin-right:5px;
    vertical-align:middle;
}
.view-btn{
    display:inline-block;
    background:#0d9ecc;
    color:#fff;
    padding:8px 14px;
    border-radius:6px;
    text-decoration:none;
    font-size:13px;
}

.categories-section{
    max-width:1400px;
    margin:40px auto;
    padding:0 20px;
    box-sizing:border-box;
}

.categories-section .section-title{
    display:block;
    width:100%;
    text-align:left;
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
}




/* Explore + Spiritual Section */
.explore-spiritual-wrap{
    max-width:1400px;
    margin:50px auto;
    padding:0 20px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.explore-column{
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.explore-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.explore-header h2{
    margin:0;
    font-size:24px;
}

.explore-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}







@media(max-width:1200px){
    .explore-list{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){

    .explore-spiritual-wrap{
        grid-template-columns:1fr;
    }

    .explore-list{
        grid-template-columns:repeat(2,1fr);
    }
}
/* =====================================
   PROMOTIONS SECTION
===================================== */

.promotions-section{
    max-width:1400px;
    margin:50px auto;
    padding:0 20px;
}

.promotions-list{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

.promotions-list .explore-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transition:.3s;
}

.promotions-list .explore-card:hover{
    transform:translateY(-5px);
}

.promotions-list img{
    width:100%;
    height:160px;
    object-fit:cover;
}

@media(max-width:1200px){

    .promotions-list{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:768px){

    .promotions-list{
        grid-template-columns:repeat(2,1fr);
    }

}
.promotions-section{
    max-width:1400px;
    margin:50px auto;
    padding:0 20px;
}

.promotions-list{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

@media(max-width:1200px){
    .promotions-list{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){
    .promotions-list{
        grid-template-columns:repeat(2,1fr);
    }
}
.offers-section{
    max-width:1400px;
    margin:40px auto;
    padding:20px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.offers-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

.offer-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.offer-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 107, 0, 0.15);
    border-color: rgba(255, 107, 0, 0.3);
}
/* Base style and hover effect for the View Offers button */
.offer-content a {
    color: #0284c7;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.offer-card:hover .offer-content a {
    background: linear-gradient(135deg, #ff6b00 0%, #e05600 100%);
    color: #ffffff !important;
    padding: 6px 14px;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.offer-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.offer-content{
    padding:12px 14px;
    text-align: left;
}

.offer-content h4{
    font-size:18px;
    font-weight:600;
    line-height:1.2;
    margin:0 0 10px;
    color:#222;
}

.offer-content p{
    margin:6px 0;
    font-size:14px;
    line-height:1.25;
    color:#666;
}

@media(max-width:768px){

    .offers-grid{
        grid-template-columns:repeat(2,1fr);
    }

}
.featured-content h3{
    margin:0 0 6px;
    font-size:15px;
    font-weight:600;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.featured-content h3 a{
    text-decoration:none;
    color:#222;
    display:block;
}

.featured-content h3 a:hover{
    color:#0d9ecc;
}
/* Living Kanyakumari Search Results */

.listing-card .listing-thumb img{
    width:220px !important;
    height:150px !important;
    object-fit:cover !important;
    border-radius:8px;
}
/* Search Listing Improvements */

.listing-card .title{
    font-size:18px !important;
    font-weight:700 !important;
    color:#222 !important;
    line-height:1.4;
}

.listing-details .location{
    color:#666;
    display:block;
    margin-bottom:5px;
}

.listing-details .category{
    display:inline-block;
    background:#f2f8fb;
    color:#0d9ecc;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
}
/* ==========================================
   LIVING KANYAKUMARI PREMIUM HEADER
========================================== */

.lk-header{
    position:sticky;
    top:0;
    z-index:9999;
    background:#fff;
    border-bottom:1px solid #ededed;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.lk-header-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1480px;
    height:82px;
    margin:auto;
    padding:0 45px;
}
/* Logo */

.lk-logo a{
    display:flex;
    align-items:center;
    text-decoration:none;
    transition:.35s;
}

.lk-logo img{
width:82px;
height:82px;
border-radius:50%;
transition:.4s ease;
}

.lk-logo:hover img{
transform:rotate(-5deg) scale(1.08);
box-shadow:0 12px 30px rgba(13,158,204,.25);
}

.brand-text{
    margin-left:15px;
}

.brand-text h2{
margin:0;
font-size:20px;
font-weight:700;
line-height:1;
color:#1166d9;
}
.lk-logo{
transition:.35s;
}

.lk-logo:hover{

transform:translateY(-2px);

}

.lk-logo:hover h2{
    color:#0d9ecc;
}

.brand-text span{
display:block;
margin-top:6px;
font-size:13px;
font-weight:600;
letter-spacing:.5px;
color:#666;
}

/* Navigation */
.lk-nav{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 50px;
}

.lk-nav ul{
    display:flex;
    align-items:center;
    justify-content:center;
    list-style:none;
    margin:0;
    padding:0;
    gap:42px;
}

.lk-nav li{
    margin:0;
    position:relative;
    white-space:nowrap;
}

.lk-nav a{
    display:flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:#222;
    font-size:17px;
    font-weight:700;
    white-space:nowrap;
    transition:.35s;
}


.lk-nav a:hover{
    color:#0d9ecc;
    transform:translateY(-2px);
}
.lk-nav li::after{
content:"";
position:absolute;
left:0;
bottom:-28px;
height:3px;
width:0;
background:#0d9ecc;
transition:.35s;
}
.lk-nav li:hover::after{

width:100%;

}

.lk-nav li.current-menu::after{

content:"";

position:absolute;

left:0;

bottom:-24px;

width:100%;

height:3px;

background:#0d9ecc;

border-radius:10px;

}
/* =========================================================
   HEADER NAVIGATION - PROFESSIONAL DROPDOWNS
   ========================================================= */
.lk-nav li.has-dropdown > a .fa-angle-down{
    font-size:12px;
    transition:transform .2s ease;
}
.lk-nav li.has-dropdown:hover > a .fa-angle-down,
.lk-nav li.has-dropdown:focus-within > a .fa-angle-down{
    transform:rotate(180deg);
}

.lk-nav .lk-dropdown{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    transform:translate(-50%, 8px);
    min-width:230px;
    padding:8px;
    margin:0;
    list-style:none;
    display:block;
    background:#fff;
    border:1px solid #e9eef5;
    border-radius:14px;
    box-shadow:0 18px 45px rgba(15,23,42,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:10050;
}
.lk-nav li.has-dropdown:hover > .lk-dropdown,
.lk-nav li.has-dropdown:focus-within > .lk-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%, 0);
}
.lk-nav .lk-dropdown li{
    position:static;
    margin:0;
    white-space:normal;
}
.lk-nav .lk-dropdown li::after{
    display:none;
}
.lk-nav .lk-dropdown a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    box-sizing:border-box;
    padding:11px 12px;
    border-radius:9px;
    color:#263241;
    font-size:14px;
    font-weight:600;
    line-height:1.25;
    transform:none !important;
}
.lk-nav .lk-dropdown a:hover,
.lk-nav .lk-dropdown a:focus{
    background:#f3f8fc;
    color:#0d9ecc;
}
.lk-nav .lk-dropdown .dropdown-label{
    display:flex;
    align-items:center;
    gap:10px;
}
.lk-nav .lk-dropdown .dropdown-label i{
    width:20px;
    text-align:center;
    color:#0d9ecc;
}
.lk-nav .lk-dropdown .dropdown-divider{
    height:1px;
    background:#edf1f5;
    margin:6px 4px;
}
.lk-nav .lk-dropdown .dropdown-view-all{
    color:#0d9ecc;
    font-weight:700;
}

.lk-header{
    position:relative;
    z-index:10000;
}
.lk-header-wrap{
    position:relative;
    z-index:10001;
}
.lk-right > a.icon-action{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    position:relative;
}
.lk-right > a.icon-action:hover{
    background:#f0f8fc;
    color:#0d9ecc;
    box-shadow:none;
}
.lk-right > a.icon-action .lk-icon-badge{
    position:absolute;
    top:3px;
    right:3px;
    min-width:7px;
    height:7px;
    padding:0;
    border-radius:999px;
    background:#ef4444;
    border:2px solid #fff;
}
.lk-header-tooltip{
    position:relative;
}

@media(max-width:992px){
    .lk-nav .lk-dropdown{
        display:none;
    }
}
/* =========================================================
   HEADER NAVIGATION - PROFESSIONAL DROPDOWNS
   ========================================================= */
.lk-nav li.has-dropdown > a .fa-angle-down{
    font-size:12px;
    transition:transform .2s ease;
}
.lk-nav li.has-dropdown:hover > a .fa-angle-down,
.lk-nav li.has-dropdown:focus-within > a .fa-angle-down{
    transform:rotate(180deg);
}

.lk-nav .lk-dropdown{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    transform:translate(-50%, 8px);
    min-width:230px;
    padding:8px;
    margin:0;
    list-style:none;
    display:block;
    background:#fff;
    border:1px solid #e9eef5;
    border-radius:14px;
    box-shadow:0 18px 45px rgba(15,23,42,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:10050;
}
.lk-nav li.has-dropdown:hover > .lk-dropdown,
.lk-nav li.has-dropdown:focus-within > .lk-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%, 0);
}
.lk-nav .lk-dropdown li{
    position:static;
    margin:0;
    white-space:normal;
}
.lk-nav .lk-dropdown li::after{
    display:none;
}
.lk-nav .lk-dropdown a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    box-sizing:border-box;
    padding:11px 12px;
    border-radius:9px;
    color:#263241;
    font-size:14px;
    font-weight:600;
    line-height:1.25;
    transform:none !important;
}
.lk-nav .lk-dropdown a:hover,
.lk-nav .lk-dropdown a:focus{
    background:#f3f8fc;
    color:#0d9ecc;
}
.lk-nav .lk-dropdown .dropdown-label{
    display:flex;
    align-items:center;
    gap:10px;
}
.lk-nav .lk-dropdown .dropdown-label i{
    width:20px;
    text-align:center;
    color:#0d9ecc;
}
.lk-nav .lk-dropdown .dropdown-divider{
    height:1px;
    background:#edf1f5;
    margin:6px 4px;
}
.lk-nav .lk-dropdown .dropdown-view-all{
    color:#0d9ecc;
    font-weight:700;
}

.lk-header{
    position:relative;
    z-index:10000;
}
.lk-header-wrap{
    position:relative;
    z-index:10001;
}
.lk-right > a.icon-action{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    position:relative;
}
.lk-right > a.icon-action:hover{
    background:#f0f8fc;
    color:#0d9ecc;
    box-shadow:none;
}
.lk-right > a.icon-action .lk-icon-badge{
    position:absolute;
    top:3px;
    right:3px;
    min-width:7px;
    height:7px;
    padding:0;
    border-radius:999px;
    background:#ef4444;
    border:2px solid #fff;
}
.lk-header-tooltip{
    position:relative;
}

@media(max-width:992px){
    .lk-nav .lk-dropdown{
        display:none;
    }
}
/* =========================================================
   UPCOMING EVENTS - SECTION & LAYOUT
   ========================================================= */

.events-section-wrapper {
    max-width: 1400px;
    margin: 40px auto;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.events-header-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 24px;
    margin: 0 0 4px 0;
}

.events-header-subtitle {
    color: #64748b;
    font-size: 14px;
    margin: 0 0 24px 0;
}

.events-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    align-items: stretch;
}

/* =========================================================
   PREMIUM CARD & HOVER EFFECTS
   ========================================================= */

.event-card-item {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.event-card-item:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 107, 0, 0.15);
    border-color: rgba(255, 107, 0, 0.3);
}

/* =========================================================
   IMAGE CONTAINER & BADGE
   ========================================================= */

.event-card-image-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: #f1f5f9;
    flex-shrink: 0;
}

.event-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-position: left center;
    object-fit: cover;
        display: block;
    transition: transform 0.3s ease;
}

.event-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    opacity: 1 !important;
    visibility: visible !important;
    background: linear-gradient(135deg, #ff6b00 0%, #ff8e53 100%);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card-item:hover .event-card-badge {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(255, 107, 0, 0.5);
}

/* =========================================================
   CARD BODY & TEXT CONTENT
   ========================================================= */

.event-card-body {
    padding: 28px 12px 16px 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    text-align: center;
    box-sizing: border-box;
}

.event-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.3;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 16px 0;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   BUTTON & HOVER ACTION
   ========================================================= */

.event-card-btn {
    color: #0284c7 !important;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
}

.event-card-item:hover .event-card-btn {
    background: linear-gradient(135deg, #ff6b00 0%, #e05600 100%);
    color: #ffffff !important;
    padding-left: 18px;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

@media (max-width: 1200px) {
    .events-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .events-section-wrapper {
        padding: 0 15px;
    }

    .events-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .event-card-image-wrap {
        height: 170px;
    }

    .event-card-body {
        padding: 24px 11px 14px 11px;
    }
}

@media (max-width: 480px) {
    .events-cards-grid {
        grid-template-columns: 1fr;
    }
}
/* Align the search button perfectly in line with the input fields */
.lk-horizontal-search-form {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.lk-h-submit-btn {
  margin-top: 0 !important;
  align-self: center !important;
}
/* Main Wrapper */
.offer-stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
}

/* Line 1: Total Offers (Matched to Card Title / Dark Charcoal) */
.stat-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9; /* Soft separator line */
    padding: 4px 2px 8px 2px;
    border-radius: 0;
}

.stat-row-top .stat-label-group i,
.stat-row-top .stat-label-group span {
    color: #334155; /* Dark slate matching card titles */
    font-size: 11px;
    font-weight: 600;
}

.stat-row-top .stat-number-main {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a; /* Deep charcoal for the main number */
}

/* Line 2: Today & Ending Soon Side-by-Side Grid */
.stat-row-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background: transparent;
    border: none;
    padding: 0;
}

/* Individual Pill Container */
.stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    text-align: center;
}

/* Label & Icon Group */
.stat-pill .stat-label-group {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    margin-bottom: 2px;
}

/* Sub Numbers Displayed Underneath */
.stat-pill .stat-number-sub {
    font-size: 15px;
    font-weight: 700;
}

/* Today Theme Color (Matched to the Orange Button/Badge Accent) */
.today-box .stat-label-group i,
.today-box .stat-label-group span {
    color: #ea580c; /* Homepage orange */
}
.today-box .stat-number-sub {
    color: #c2410c; /* Deep homepage orange */
}

/* Ending Soon Theme Color (Harmonious Warm Muted Red) */
.ending-box .stat-label-group i,
.ending-box .stat-label-group span {
    color: #e11d48; /* Sophisticated rose/red */
}
.ending-box .stat-number-sub {
    color: #be123c; /* Deep rose/red */
}


/* ==========================================================
   LIVING KANYAKUMARI HOMEPAGE — FINAL MOBILE SYSTEM
   ----------------------------------------------------------
   IMPORTANT:
   Desktop layout is not changed.
   This section is a final mobile/tablet override only.
   ========================================================== */

/* ---------- Global homepage safety ---------- */

.lk-new-hero,
.home-search,
.search-section,
.featured-businesses,
.home-directory-grid,
.explore-spiritual-wrap,
.promotions-section,
.offers-section,
.events-section-wrapper,
.categories-section,
.banner-slider {
    max-width: 100%;
    box-sizing: border-box;
}

.lk-new-hero *,
.home-search *,
.search-section *,
.featured-businesses *,
.home-directory-grid *,
.explore-spiritual-wrap *,
.promotions-section *,
.offers-section *,
.events-section-wrapper *,
.categories-section *,
.banner-slider * {
    box-sizing: border-box;
}

.lk-new-hero img,
.home-search img,
.search-section img,
.featured-businesses img,
.home-directory-grid img,
.explore-spiritual-wrap img,
.promotions-section img,
.offers-section img,
.events-section-wrapper img {
    max-width: 100%;
}

/* ---------- Tablet ---------- */

@media screen and (max-width: 1024px) {

    .featured-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .promotions-list,
    .offers-grid,
    .events-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .home-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .home-panel {
        min-width: 0;
    }

    .home-panel-header h2 {
        font-size: 24px;
    }

    .featured-image,
    .banner-slider {
        max-width: 100%;
    }
}

/* ---------- Main mobile layout ---------- */

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

    /* Remove horizontal overflow caused by old desktop rules. */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .featured-businesses,
    .home-directory-grid,
    .explore-spiritual-wrap,
    .promotions-section,
    .offers-section,
    .events-section-wrapper,
    .categories-section {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ---------- Header ---------- */

    .header-top-custom .wrapper {
        width: 100%;
        max-width: 100%;
        padding: 8px 10px;
        gap: 8px;
    }

    .site-logo-brand {
        max-width: 100%;
        min-width: 0;
    }

    .site-logo-brand img {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
    }

    .site-title {
        font-size: 18px;
        line-height: 1.15;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        gap: 6px;
        margin-top: 4px;
    }

    .nav-links a {
        margin: 0 6px;
        font-size: 13px;
    }

    .header-right {
        flex-wrap: wrap;
        gap: 7px;
    }

    .header-right a {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    /* ---------- Premium header, if present ---------- */

    .lk-header-wrap {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 64px;
        padding: 8px 12px;
        gap: 8px;
    }

    .lk-logo img {
        width: 52px;
        height: 52px;
    }

    .brand-text {
        margin-left: 8px;
        min-width: 0;
    }

    .brand-text h2 {
        font-size: 17px;
        line-height: 1.1;
    }

    .brand-text span {
        font-size: 11px;
        margin-top: 4px;
    }

    .lk-nav {
        min-width: 0;
        margin: 0;
    }

    /* ---------- Hero ---------- */

    .lk-new-hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .home-search,
    .search-section {
        width: 100%;
        max-width: 100%;
        margin-top: 22px;
        padding-left: 0;
        padding-right: 0;
    }

    .big-search-bar {
        width: calc(100% - 24px);
        max-width: 640px;
        min-height: 52px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 12px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .big-search-bar i.fa-magnifying-glass {
        flex: 0 0 auto;
        padding: 0 5px;
        font-size: 16px;
    }

    .big-search-bar input {
        min-width: 0;
        width: 100%;
        margin: 0 !important;
        padding: 7px 5px !important;
        font-size: 14px;
        line-height: 20px;
    }

    .big-search-bar .btn-search {
        flex: 0 0 auto;
        padding: 6px 5px;
        font-size: 16px;
    }

    .location-select-wrapper {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    .location-select-wrapper .ts-control {
        height: 48px;
        min-width: 0;
        padding: 0 10px !important;
        border-left: none !important;
        border-top: 1px solid #e5e7eb !important;
        font-size: 14px !important;
    }

    .location-select-wrapper .ts-control .item {
        font-size: 14px !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .location-select-wrapper .ts-dropdown {
        max-width: calc(100vw - 24px);
    }

    /* Popular tags must wrap instead of pushing the hero wider. */
    .popular-searches,
    .lk-new-hero .hero-popular-tags,
    .lk-new-hero .popular-searches {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden;
    }

    .popular-searches a,
    .lk-new-hero .hero-popular-tags a,
    .lk-new-hero .hero-popular-tags button,
    .lk-new-hero .popular-tag {
        max-width: 100%;
        white-space: nowrap;
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    /* ---------- Hero banner / advertisement image ---------- */

    .banner-slider {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 7;
        min-height: 120px;
        max-height: 220px;
        margin: 18px auto 20px;
        border-radius: 10px;
        overflow: hidden;
    }

    .banner-slider img,
    .banner-slider video {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center;
    }

    /* ---------- Category icons ---------- */

    .category-icons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px 8px;
        width: 100%;
        margin-top: 18px;
    }

    .cat-icon {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .cat-icon i {
        width: 54px;
        height: 54px;
        font-size: 21px;
    }

    .cat-icon span {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* ---------- Real Estate / featured cards ---------- */

    .featured-businesses {
        margin-top: 25px;
        margin-bottom: 25px;
        padding-top: 14px;
        padding-bottom: 14px;
        border-radius: 12px;
    }

    .section-header,
    .section-title-wrap,
    .explore-header,
    .home-panel-header {
        min-width: 0;
        gap: 10px;
    }

    .section-header h2,
    .section-title-wrap h2 {
        min-width: 0;
        font-size: 21px;
        line-height: 1.2;
    }

    .view-all-link,
    .home-panel-header a {
        flex: 0 0 auto;
        font-size: 12px;
    }

    .featured-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100%;
    }

    .featured-card {
        width: 100%;
        min-width: 0;
        transform: none !important;
    }

    .featured-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        min-height: 0;
        overflow: hidden;
    }

    .featured-image img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center;
    }

    .featured-content {
        width: 100%;
        min-width: 0;
        padding: 9px 8px 11px !important;
    }

    .featured-content h3 {
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .realestate-subtitle {
        font-size: 11px;
        line-height: 1.25;
        margin-top: 4px;
    }

    /* ---------- Explore Kanyakumari / directory panels ---------- */

    .home-directory-grid,
    .explore-spiritual-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .home-panel,
    .explore-column {
        width: 100%;
        min-width: 0;
        padding: 14px;
        border-radius: 14px;
        overflow: hidden;
    }

    .home-panel-header,
    .explore-header {
        margin-bottom: 12px;
        align-items: center;
    }

    .home-panel-header h2,
    .explore-header h2 {
        font-size: 20px;
        line-height: 1.2;
        min-width: 0;
    }

    .home-panel-item {
        width: 100%;
        min-width: 0;
        gap: 10px;
        padding: 9px 0 !important;
        margin: 0;
    }

    .home-panel-thumb,
    .home-panel-item img {
        width: 88px;
        height: 62px;
        flex: 0 0 88px;
        border-radius: 8px;
        object-fit: cover;
    }

    .home-panel-content {
        min-width: 0;
        overflow: hidden;
    }

    .home-panel-content h4 {
        font-size: 15px;
        line-height: 1.25;
        margin-bottom: 4px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .home-panel-content p {
        font-size: 12px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Disable desktop hover movement on touch screens. */
    .home-panel:hover,
    .explore-card:hover,
    .explore-column:hover,
    .featured-card:hover,
    .event-card:hover,
    .offer-card:hover,
    .sponsor-card:hover {
        transform: none !important;
    }

    /* ---------- Promotions ---------- */

    .promotions-section {
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .promotions-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        width: 100%;
    }

    .promotions-list .explore-card {
        min-width: 0;
        overflow: hidden;
    }

    .promotions-list img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    /* ---------- Offers ---------- */

    .offers-section {
        margin-top: 28px;
        margin-bottom: 28px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        width: 100%;
    }

    .offer-card {
        min-width: 0;
    }

    .offer-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .offer-content {
        padding: 9px 9px 11px;
        min-width: 0;
    }

    .offer-content h4 {
        font-size: 14px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .offer-content p {
        font-size: 12px;
    }

    /* ---------- Events ---------- */

    .events-section-wrapper {
        margin-top: 28px;
        margin-bottom: 28px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .events-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .event-card-image-wrap {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .event-card-body {
        padding: 14px 9px 12px;
    }

    .event-card-title {
        font-size: 13px;
        line-height: 1.25;
    }

    .event-card-desc {
        font-size: 11px;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .event-card-badge {
        top: 7px;
        right: 7px;
        padding: 4px 8px;
        font-size: 10px;
    }

    /* ---------- Generic homepage advertisements / sponsor cards ---------- */

    .sponsor-card,
    .search-ad-image,
    .search-right-box {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .sponsor-card img,
    .search-ad-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
        display: block;
    }
}

/* ---------- Small phones ---------- */

@media screen and (max-width: 480px) {

    .featured-businesses,
    .home-directory-grid,
    .explore-spiritual-wrap,
    .promotions-section,
    .offers-section,
    .events-section-wrapper,
    .categories-section {
        padding-left: 8px;
        padding-right: 8px;
    }

    .category-icons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 6px;
    }

    .cat-icon i {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .cat-icon span {
        font-size: 10.5px;
    }

    .big-search-bar {
        width: calc(100% - 16px);
        border-radius: 16px;
    }

    .banner-slider {
        aspect-ratio: 16 / 8;
        min-height: 105px;
        max-height: 180px;
        border-radius: 8px;
    }

    .featured-grid,
    .promotions-list,
    .offers-grid,
    .events-cards-grid {
        gap: 8px !important;
    }

    .featured-content {
        padding: 8px 7px 10px !important;
    }

    .featured-content h3 {
        font-size: 12px;
    }

    .realestate-subtitle {
        font-size: 10.5px;
    }

    .home-panel {
        padding: 12px;
    }

    .home-panel-header h2,
    .explore-header h2 {
        font-size: 18px;
    }

    .home-panel-thumb,
    .home-panel-item img {
        width: 76px;
        height: 56px;
        flex-basis: 76px;
    }

    .home-panel-content h4 {
        font-size: 14px;
    }

    .home-panel-content p {
        font-size: 11px;
    }

    .offer-content h4 {
        font-size: 13px;
    }

    .offer-content p {
        font-size: 11px;
    }

    .event-card-body {
        padding: 12px 7px 10px;
    }

    .event-card-title {
        font-size: 12px;
    }

    .event-card-desc {
        font-size: 10.5px;
    }
}

/* ---------- Very small phones ---------- */

@media screen and (max-width: 360px) {

    .featured-grid,
    .promotions-list,
    .offers-grid,
    .events-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .banner-slider {
        aspect-ratio: 16 / 9;
        min-height: 100px;
    }

    .category-icons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================
   LIVING KANYAKUMARI - MOBILE FEATURED LISTING CAROUSEL
   ----------------------------------------------------------
   Desktop: existing 6-card grid is unchanged.
   Mobile: 3 listing cards visible at a time and horizontally
   swipe/scrollable to reveal the remaining cards.
   No PHP, links or listing functionality are changed.
   ========================================================== */
@media screen and (max-width:768px){
    .featured-grid{
        display:grid !important;
        grid-template-columns:none !important;
        grid-auto-flow:column !important;
        grid-auto-columns:calc((100% - 16px) / 3) !important;
        gap:8px !important;
        width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding-bottom:4px;
    }

    .featured-grid::-webkit-scrollbar{
        display:none;
    }

    .featured-card{
        min-width:0 !important;
        width:100% !important;
        scroll-snap-align:start;
    }

    .featured-image{
        width:100% !important;
        height:auto !important;
        aspect-ratio:4 / 3;
        min-height:0 !important;
    }

    .featured-content{
        padding:8px 7px 9px !important;
        min-width:0;
    }

    .featured-content h3{
        font-size:12px !important;
        line-height:1.25 !important;
        margin:0;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .business-category,
    .rating,
    .realestate-subtitle{
        font-size:10px !important;
        line-height:1.25;
    }
}

@media screen and (max-width:480px){
    .featured-grid{
        grid-auto-columns:calc((100% - 16px) / 3) !important;
        gap:8px !important;
    }

    .featured-content{
        padding:7px 6px 8px !important;
    }

    .featured-content h3{
        font-size:11.5px !important;
    }

    .business-category,
    .rating,
    .realestate-subtitle{
        font-size:9.5px !important;
    }
}

@media screen and (max-width:360px){
    .featured-grid{
        grid-auto-columns:calc((100% - 16px) / 3) !important;
        gap:8px !important;
    }

    .featured-content{
        padding:6px 5px 7px !important;
    }

    .featured-content h3{
        font-size:10.5px !important;
    }

    .business-category,
    .rating,
    .realestate-subtitle{
        font-size:9px !important;
    }
}
/* ==========================================================
   MOBILE - 3 CARD HORIZONTAL SWIPE
   ========================================================== */

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

    .featured-grid,
    .offers-grid,
    .events-cards-grid,
    .promotions-list{
        display:grid !important;
        grid-template-columns:none !important;
        grid-auto-flow:column !important;
        grid-auto-columns:calc((100% - 16px) / 3) !important;
        gap:8px !important;
        width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
        padding-bottom:4px;
    }

    .featured-grid::-webkit-scrollbar,
    .offers-grid::-webkit-scrollbar,
    .events-cards-grid::-webkit-scrollbar,
    .promotions-list::-webkit-scrollbar{
        display:none;
    }

    .featured-card,
    .offer-card,
    .event-card-item,
    .promotions-list .explore-card{
        min-width:0 !important;
        width:100% !important;
        scroll-snap-align:start;
    }

    .featured-image,
    .offer-card img,
    .promotions-list img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:4 / 3;
        object-fit:cover;
    }

    .event-card-image-wrap{
        width:100% !important;
        height:auto !important;
        aspect-ratio:4 / 3;
    }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media screen and (max-width:480px){

    .featured-grid,
    .offers-grid,
    .events-cards-grid,
    .promotions-list{
        grid-auto-columns:calc((100% - 16px) / 3) !important;
        gap:8px !important;
    }

    .featured-content{
        padding:7px 6px 8px !important;
    }

    .featured-content h3{
        font-size:11.5px !important;
        line-height:1.25 !important;
    }

    .business-category,
    .rating,
    .realestate-subtitle{
        font-size:9.5px !important;
    }

    .offer-content{
        padding:7px 6px 8px !important;
    }

    .offer-content h4{
        font-size:11.5px !important;
        line-height:1.25 !important;
    }

    .offer-content p{
        font-size:9.5px !important;
        line-height:1.25 !important;
    }

    .event-card-body{
        padding:8px 6px 9px !important;
    }

    .event-card-title{
        font-size:11px !important;
        line-height:1.25 !important;
    }

    .event-card-desc{
        font-size:9px !important;
        line-height:1.25 !important;
    }

    .event-card-btn{
        font-size:9.5px !important;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media screen and (max-width:360px){

    .featured-grid,
    .offers-grid,
    .events-cards-grid,
    .promotions-list{
        grid-auto-columns:calc((100% - 16px) / 3) !important;
        gap:8px !important;
    }

    .featured-content{
        padding:6px 5px 7px !important;
    }

    .featured-content h3{
        font-size:10.5px !important;
    }

    .business-category,
    .rating,
    .realestate-subtitle{
        font-size:9px !important;
    }

    .offer-content{
        padding:6px 5px 7px !important;
    }

    .offer-content h4{
        font-size:10.5px !important;
    }

    .offer-content p{
        font-size:9px !important;
    }

    .event-card-body{
        padding:7px 5px 8px !important;
    }

    .event-card-title{
        font-size:10px !important;
    }

    .event-card-desc{
        font-size:8.5px !important;
    }

    .event-card-btn{
        font-size:9px !important;
    }
}
/* =========================================================
   MOBILE - STATISTICS BAR
   Keep all 5 statistics in ONE horizontal row
   ========================================================= */

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

    .lk-stats-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100%;
        overflow: hidden;
        gap: 0;
        padding: 8px 4px;
        box-sizing: border-box;
    }

    .lk-stat-item {
        flex: 1 1 20% !important;
        width: 20% !important;
        min-width: 0 !important;
        max-width: 20% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;

        padding: 4px 2px;
        box-sizing: border-box;
    }

    .lk-stat-icon {
        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 3px;
    }

    .lk-stat-icon i {
        font-size: 15px;
    }

    .lk-stat-text {
        min-width: 0;
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;
    }

    .lk-stat-text strong {
        display: block;
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .lk-stat-text span {
        display: block;
        width: 100%;

        font-size: 8px;
        line-height: 1.15;

        text-align: center;

        white-space: normal;
        overflow-wrap: break-word;
    }
}


/* ==========================================================
   MOBILE - EVENT / OFFER IMAGE BADGES + OFFER STAT FIX
   ----------------------------------------------------------
   Desktop is untouched.
   Applies only to Upcoming Events and Today's Offers & Promotions.
   ========================================================== */

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

    /* Smaller orange image badge - neatly fitted to the image. */
    .event-card-item .event-card-badge {
        top: 7px !important;
        right: 7px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 10 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: calc(100% - 14px) !important;
        min-width: 0 !important;
        height: auto !important;

        padding: 4px 8px !important;
        margin: 0 !important;
        border-radius: 999px !important;

        font-size: 9px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        box-sizing: border-box !important;
    }

    .event-card-item .event-card-badge span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
    }

    /* Keep the orange badge visually balanced on the image. */
    .event-card-item .event-card-image-wrap {
        position: relative !important;
    }

    /* ---------- Today's Offers: make the 2 statistics fit narrow cards ---------- */
    .offer-card .offer-stats-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .offer-card .stat-row-top {
        min-width: 0 !important;
        gap: 5px !important;
    }

    .offer-card .stat-row-top .stat-label-group,
    .offer-card .stat-row-top .stat-number-main {
        min-width: 0 !important;
    }

    .offer-card .stat-row-bottom {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .offer-card .stat-pill {
        min-width: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .offer-card .stat-pill .stat-label-group {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        gap: 3px !important;
        margin-bottom: 2px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    .offer-card .stat-pill .stat-label-group i {
        flex: 0 0 auto !important;
        font-size: 8px !important;
    }

    .offer-card .stat-pill .stat-label-group span {
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .offer-card .stat-pill .stat-number-sub {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }
}

@media screen and (max-width: 480px) {

    /* Extra-small badge for phone screens. */
    .event-card-item .event-card-badge {
        top: 6px !important;
        right: 6px !important;
        max-width: calc(100% - 12px) !important;
        padding: 3px 7px !important;
        font-size: 8px !important;
        border-radius: 999px !important;
    }

    .event-card-item .event-card-badge span {
        font-size: 8px !important;
    }

    /* Give "Ending Soon" enough room while keeping the number fully visible. */
    .offer-card .stat-row-bottom {
        gap: 2px !important;
    }

    .offer-card .stat-pill .stat-label-group {
        font-size: 7.5px !important;
        gap: 2px !important;
    }

    .offer-card .stat-pill .stat-label-group i {
        font-size: 7.5px !important;
    }

    .offer-card .stat-pill .stat-number-sub {
        font-size: 13px !important;
    }
}

@media screen and (max-width: 360px) {

    .event-card-item .event-card-badge {
        top: 5px !important;
        right: 5px !important;
        padding: 3px 6px !important;
        font-size: 7.5px !important;
    }

    .event-card-item .event-card-badge span {
        font-size: 7.5px !important;
    }

    .offer-card .stat-pill .stat-label-group {
        font-size: 7px !important;
    }

    .offer-card .stat-pill .stat-label-group i {
        font-size: 7px !important;
    }

    .offer-card .stat-pill .stat-number-sub {
        font-size: 12px !important;
    }
}