/* FontAwesome */
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

  body {
      font-family: "Inter", sans-serif;
      line-height: 1.4;
      background-color: #fff;
      overflow-x: hidden;
  }

  a {
      text-decoration: none;
      ;
  }

  /* ====== Exhibition Banner Styles ====== */
  .exhibition-banner {
      background-color: #e72123;
      color: #ffffff;
  }

  /* Utility: vertical padding (10px top & bottom) */
  .py-10px {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
  }

  /* ================================
   Header: Main Logo + Sponsors
   ================================ */

  /* 1) Wrapper background/spacing */
  .header-sponsors {
      background-color: transparent;
      /* change if you want a solid color */
      /* you can also add a bottom border if desired, e.g.:
     border-bottom: 1px solid #ddd; */
  }

  /* 2) Main logo sizing */
  .header-sponsors .main-logo {
      max-height: 100px;
      height:auto;
      width:200px;
      /*max-width: 200px;*/
      /* desktop default */
      object-fit:contain;
      /* maintain aspect ratio */
  }
  
  .header-sponsors .aakar-logo {
      max-height: 80px !important;
      height:auto;
      width:120px !important;
      /*max-width: 200px;*/
      /* desktop default */
      object-fit:contain;
      /* maintain aspect ratio */
  }

  /* 3) Sponsor logo sizing */
  .header-sponsors .sponsor-logo {
      max-height: 60px;
      /* desktop default */
      width: 190px;
  }

  /* 4) Spacing around each sponsor wrapper */
  .header-sponsors .sponsor-wrapper {
      /* on mobile, each sponsor gets a tiny vertical gap */
      margin-right: 1rem;
      /* enough space between logos on md+ */
  }

  /* Remove right-margin on the last sponsor */
  .header-sponsors .sponsor-wrapper:last-child {
      margin-right: 0;
  }

  /* 5) Responsive logo adjustments */
  /* Laptop 1024 */
  @media (max-width: 1024px) {
      .header-sponsors .sponsor-logo {
          max-height: 40px;
      }

      .header-sponsors .main-logo {
          max-height: 60px;
      }

      .blob-btn {
          font-size: 11px !important;
          padding: 11px 17px !important;
      }
  }

  /* Tablet and below: slightly smaller logos */
  @media (max-width: 991.98px) {
      .header-sponsors .main-logo {
          max-height: 90px;
          margin-bottom:0px;
      }

      .header-sponsors .sponsor-logo {
          max-height: 29px;
      }
  }

  /* Mobile (<576px): stack/center and shrink more if needed */
  @media (max-width: 575.98px) {
      .header-sponsors .main-logo {
          max-height: 90px;
          margin-bottom:0px;
          /* small gap below logo before sponsors */
      }

      .header-sponsors .sponsor-logo {
          max-height: 40px;
      }
      .gradient-navbar .dropdown-menu {
    
     position: relative!important; 
   
}

      /* Center the .sponsor-wrapper children and add a bit of vertical gap */
      .header-sponsors .sponsor-wrapper {
          margin-right: 0.75rem;
          /* horizontal gap between sponsors */
          margin-bottom: 0.5rem;
          /* vertical gap if they wrap */
      }
  }

  /* ====================================================================
       SECOND HEADER: SOLID BACKGROUND + LEFT LINKS + RIGHT BUTTONS
       + SPACING + ACTIVE UNDERLINE
       ==================================================================== */

  /* ——————————————————————————————
       1) NAVBAR BACKGROUND AND GENERAL LINK STYLING
       —————————————————————————————— */
  .gradient-navbar {
      background-color: #e72123;
      border-radius: 100px;
      /*width: 80%;*/
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      /* margin-bottom: 1px; */
      margin-inline: auto;
      display: flex;
      position: relative;
      z-index: 5;
      /*margin-bottom: -25px;*/
  }

  /* Prevent wrapping, keep items on one line ≥ 1024px */
  .gradient-navbar .navbar-nav {
      white-space: nowrap;
      flex-wrap: nowrap;
  }

  /* Add horizontal spacing *between* menu items */
  .gradient-navbar .navbar-nav .nav-item {
      margin-right: 1rem;
      font-size:14px !important;
      /* adjust as needed */
  }

  /* Remove spacing after the last menu item to avoid extra gap */
  .gradient-navbar .navbar-nav .nav-item:last-child {
      margin-right: 0;
  }

  /* Nav-link styling */
  .gradient-navbar .nav-link {
      color: #ffffff;
      font-weight: 700;
      position: relative;
      /* for underline positioning */
      transition: color 0.2s ease;
      padding-left: 0.5rem;
      /* smaller side padding now */
      padding-right: 0.5rem;
  }

  .gradient-navbar .nav-link:hover {
      color: black;
      /* text turns purple on hover */
  }

  /* Underline at hover */
  .gradient-navbar .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 2px;
      background-color: #ffffff;
      /* white underline */
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s ease;
  }

  .gradient-navbar .nav-link:hover::after {
      transform: scaleX(1);
  }

  /* Persistent underline when .active is present */
  .gradient-navbar .nav-link.active {
      color: black;
      /* keep color purple when active */
  }

  .gradient-navbar .nav-link.active::after {
      transform: scaleX(1);
      /* show underline continuously */
  }

  /* ——————————————————————————————
       2) HAMBURGER TOGGLER (WHITE)
       —————————————————————————————— */
  .gradient-navbar .navbar-toggler-icon {
      filter: invert(100%);
      /* white hamburger icon */
  }

  /* ——————————————————————————————
       3) DROPDOWN ITEMS
       —————————————————————————————— */
  /* 1) Hide dropdowns by default */
  .gradient-navbar .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 12rem;
      padding: 0.5rem 0;
      border-radius: 0.25rem;
      background-color: white;
      z-index: 10;
  }

  /* 2) Show on hover */
  .gradient-navbar .nav-item.dropdown:hover>.dropdown-menu {
      display: block;
      padding: 0;
  }

  /* 3) Style the toggle icon */
  .gradient-navbar .dropdown-toggle {
      display: inline-flex;
      align-items: center;
  }

  /* Use a pseudo‑element to inject “+” by default */
  .gradient-navbar .dropdown-icon::before {
      content: "+";
      display: inline-block;
      margin-left: 0.25rem;
      transition: transform 0.2s ease, content 0.2s ease;
      font-weight: bold;
  }

  /* On hover (or focus) turn it into “–” */
  .gradient-navbar .nav-item.dropdown:hover .dropdown-icon::before,
  .gradient-navbar .nav-item.dropdown:focus-within .dropdown-icon::before {
      content: "−";
      /* minus sign */
  }

  /* Optional: shift icon up/down slightly */
  .gradient-navbar .nav-item.dropdown:hover .dropdown-icon::before {
      transform: translateY(-1px);
  }

  /* Ensure the parent is position: relative for absolute dropdowns */
  .gradient-navbar .nav-item.dropdown {
      position: relative;
  }

  /* Dropdown item hover styling (already in your CSS) */
  .gradient-navbar .dropdown-item {
      color: #000;
      padding: 0.5rem 1rem;
      font-weight: 600;
  }

  .gradient-navbar .dropdown-item:hover {
      background-color: #0997d4;
  }

  .gradient-navbar .nav-item.dropdown.show>.dropdown-menu {
      display: block;
  }

  .gradient-navbar .nav-item.dropdown.show .dropdown-icon::before {
      content: "-";
  }


  .gradient-navbar1 {
      /* background-color: #0997d4; */
      /* border-radius: 100px;
      width: 80%; */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      /* margin-bottom: 1px; */
      margin-inline: auto;
      display: flex;
      z-index: 5;
      /* margin-bottom: -25px; */
  }

  /* Prevent wrapping, keep items on one line ≥ 1024px */
  .gradient-navbar1 .navbar-nav {
      white-space: nowrap;
      flex-wrap: nowrap;
  }

  /* Add horizontal spacing *between* menu items */
  .gradient-navbar1 .navbar-nav .nav-item {
      margin-right: 1.5rem;
      /* adjust as needed */
  }


  /* Remove spacing after the last menu item to avoid extra gap */
  .gradient-navbar1 .navbar-nav .nav-item:last-child {
      margin-right: 0;
  }

  /* Nav-link styling */
  .gradient-navbar1 .nav-link {
      color: black;
      font-weight: 700;
      position: relative;
      /* for underline positioning */
      transition: color 0.2s ease;
      padding-left: 0.5rem;
      /* smaller side padding now */
      padding-right: 0.5rem;
  }

  /* .gradient-navbar1 .nav-link:hover {
      color: #0997d4;
      text turns purple on hover
  } */

  /* Underline at hover */
  .gradient-navbar1 .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 2px;
      background-color: #0997d4;
      /* white underline */
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s ease;
  }

  .gradient-navbar1 .nav-item:last-child .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 2px;
      /* white underline */
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s ease;
  }

  /* .gradient-navbar1 .nav-link:hover::after {
      transform: scaleX(1);
  } */

  /* Persistent underline when .active is present */
  .gradient-navbar1 .nav-link.active {
      color: #0997d4;
      /* keep color purple when active */
  }

  .gradient-navbar1 .nav-link.active::after {
      transform: scaleX(1);
      /* show underline continuously */
  }

  /* ——————————————————————————————
       2) HAMBURGER TOGGLER (WHITE)
       —————————————————————————————— */
  .gradient-navbar1 .navbar-toggler-icon {
      filter: invert(100%);
      /* white hamburger icon */
  }

  /* ——————————————————————————————
       3) DROPDOWN ITEMS
       —————————————————————————————— */
  .gradient-navbar1 .dropdown-menu {
      display: none;
      top: 100%;
      left: 0;
      min-width: 12rem;
      padding: 0;
      border-radius: 0.25rem;
      background-color: #eeecec;
      z-index: 10;
  }

  .gradient-navbar1 .nav-item.dropdown.show>.dropdown-menu {
      display: block;
  }

  /* icon default = “+” */
  .gradient-navbar1 .dropdown-icon::before {
      content: "+";
      margin-left: 0.25rem;
      font-weight: bold;
      transition: content 0.2s ease;
  }

  /* icon when open = “–” */
  .gradient-navbar1 .nav-item.dropdown.show .dropdown-icon::before {
      content: "−";
  }

  .gradient-navbar1 .dropdown-item:hover {
      background-color: #0997d4;
  }

  .gradient-navbar1 .dropdown-item {
      font-weight: 600;
  }

  /* ——————————————————————————————
       4) ANIMATED 3-COLOR GRADIENT BUTTONS
       —————————————————————————————— */
  /* .gradient-navbar .btn-nav {
     display: inline-block;
     color: #ffffff;
     font-size: 0.9rem;
     font-weight: 700;
     padding: 0.35rem 1rem;
     border: none;
     border-radius: 25px;
     background: linear-gradient(45deg, #0097d8, #e72123, #bb1a97);
     background-size: 300% 300%;
     animation: gradientShift 6s ease infinite;
     transition: color 0.2s ease, box-shadow 0.2s ease;
     text-decoration: none;
     text-align: center;
     margin-left: 0.75rem;
     spacing between the two buttons
 }

 .gradient-navbar .btn-nav:hover {
     color: black;
     invert text to solid orange on hover
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
     text-decoration: none;
 } */


  /* ——————————————————————
   1) Force Buttons Side by Side
   —————————————————————— */



  .button-group {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      /* small horizontal gap between the two buttons */
      flex-wrap: nowrap;
      /* never wrap to a new line */
  }

  /* ——————————————————————
   2) Blob Button: Remove bottom margin, keep inline-block
   —————————————————————— */

  .blob-btn {
      display: inline-block;
      /* so multiple buttons sit side by side */
      margin: 0;
      /* remove any vertical spacing */
      padding: 15px 15px;
      /* adjust as needed for size */
      position: relative;
      z-index: 1;
      text-align: center;
      text-transform: uppercase;
      color: #e72123;
      /* your cyan color */
      font-size: 13px;
      font-weight: bold;
      background-color: transparent;
      border: none;
      border-radius: 30px;
      outline: none;
      cursor: pointer;
      transition: color 0.5s;
      text-decoration: none;
  }

  .blob-btn::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #e72123;
      /* outline */
      border-radius: 30px;
      z-index: 1;
  }

  .blob-btn::after {
      content: "";
      position: absolute;
      left: 3px;
      /* 2px border × 1.5 */
      top: 3px;
      width: 100%;
      height: 100%;
      border-radius: 30px;
      z-index: -2;
      transition: all 0.3s 0.2s;
  }

  .blob-btn:hover {
      color: #fff;
      /* darken text on hover */
  }

  .blob-btn:hover::after {
      left: 0;
      top: 0;
      transition: all 0.3s;
  }

  .blob-btn__inner {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 30px;
      overflow: hidden;
      background: #fff;
      z-index: -1;
  }

  .blob-btn__blobs {
      position: relative;
      display: block;
      height: 100%;
      filter: url("#goo");
  }

  .blob-btn__blob {
      position: absolute;
      top: 2px;
      /* same as border thickness */
      width: 25%;
      /* four blobs share 100% */
      height: 100%;
      background: #e72123;
      border-radius: 50%;
      transform: translate3d(0, 150%, 0) scale(1.7);
      transition: transform 0.45s;
  }

  @supports (filter: url("#goo")) {
      .blob-btn__blob {
          transform: translate3d(0, 150%, 0) scale(1.4);
      }
  }

  .blob-btn__blob:nth-child(1) {
      left: 0%;
      transition-delay: 0s;
  }

  .blob-btn__blob:nth-child(2) {
      left: 30%;
      transition-delay: 0.08s;
  }

  .blob-btn__blob:nth-child(3) {
      left: 60%;
      transition-delay: 0.16s;
  }

  .blob-btn__blob:nth-child(4) {
      left: 90%;
      transition-delay: 0.24s;
  }

  .blob-btn:hover .blob-btn__blob {
      transform: translateZ(0) scale(1.7);
  }

  @supports (filter: url("#goo")) {
      .blob-btn:hover .blob-btn__blob {
          transform: translateZ(0) scale(1.4);
      }
  }

  /* ──────────────────────────────────────────────────────────────────────────── */
  /* 1) Make blob-buttons smaller on tablets & phones                          */
  /* ──────────────────────────────────────────────────────────────────────────── */

  /* Tablets / small screens (between 576px and 991.98px) */
  @media (max-width: 991.98px) {
      .blob-btn {
          font-size: 10px;
          /* was 16px */
          padding: 5px 10px;
          /* was 16px 32px */
      }
  }

  /* Phones / extra-small (<576px) */
  @media (max-width: 575.98px) {
      .blob-btn {
          font-size: 12px;
          /* even smaller */
          padding: 12px 24px;
      }
  }


  @keyframes gradientShift {
      0% {
          background-position: 0% 0%;
      }

      25% {
          background-position: 100% 0%;
      }

      50% {
          background-position: 100% 100%;
      }

      75% {
          background-position: 0% 100%;
      }

      100% {
          background-position: 0% 0%;
      }
  }

  /* ——————————————————————————————
       5) ENSURE ITEMS FIT SINGLE LINE ≥1024px
       —————————————————————————————— */
  @media (max-width: 1200px) {
      .gradient-navbar .nav-item {
          margin-right: 1rem;
      }

      .gradient-navbar .nav-link {
          padding-left: 0.4rem;
          padding-right: 0.4rem;
      }

      .gradient-navbar .btn-nav {
          padding: 0.3rem 0.8rem;
          font-size: 0.85rem;
      }
  }

  @media (max-width: 1024px) {
      .gradient-navbar .nav-item {
          margin-right: 0.8rem;
      }


      .gradient-navbar .nav-link {
          padding-left: 0.3rem;
          padding-right: 0.3rem;
      }

      .gradient-navbar .btn-nav {
          padding: 0.25rem 0.7rem;
          font-size: 0.8rem;
      }
  }

  .gradient-navbar1 {
      display: none;
  }

  /* ─────────────────────────────────────────────
   Custom Toggler Button (visible only ≤768px)
   ───────────────────────────────────────────── */
  .custom-toggler {
      display: none;
      /* hidden by default, shown in media query below */
      background-color: white;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 50px;
      color: black;
      font-size: 1.2rem;
  }

  /* ─────────────────────────────────────────────
   Mobile Dropdown Menu (positioned below navbar)
   ───────────────────────────────────────────── */
  .mobile-dropdown-menu {
      display: none;
      /* hidden by default */
      position: absolute;
      /* overlay below the navbar container */
      top: 100%;
      /* start immediately below navbar */
      left: 0;
      width: 100%;
      background-color: #ffffff;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      z-index: 1000;
  }

  .mobile-dropdown-menu.active {
      display: block;
  }

  /* Style each link in the dropdown */
  .mobile-dropdown-menu .nav-link {
      display: block;
      /* make links full-width */
      color: #000;
      padding: 0.75rem 1rem;
      font-weight: 600;
      /* border-bottom: 2px solid gray; */
  }

  .mobile-dropdown-menu .nav-link:last-child {
      border-bottom: none;
  }

  /* ─────────────────────────────────────────────
   Show toggler & hide desktop menu on small screens
   ───────────────────────────────────────────── */
  @media (max-width: 768px) {
      .custom-toggler {
          display: inline-block;
          position:absolute;
          right:0px;
      }

      .gradient-navbar1 {
          display: block;
      }

      .gradient-navbar {
          display: none;
      }
        .button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    position: absolute;
    left: 10px;
    z-index: 9;
}

      /* Hide the regular Bootstrap collapse menu on ≤768px */
      #navbarMenu {
          display: none !important;
      }

      .gradient-navbar .nav-link:hover {
          color: #0997d4;
          /* text turns purple on hover */
      }

      .gradient-navbar .nav-link:active {
          color: #0997d4;
          /* text turns purple on hover */
      }

      .gradient-navbar .nav-link::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -4px;
          height: 2px;
          background-color: #0997d4;
          /* white underline */
          transform: scaleX(0);
          transform-origin: center;
          transition: transform 0.3s ease;
      }

      .gradient-navbar .nav-item:last-child .nav-link::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -4px;
          height: 2px;
          /* white underline */
          transform: scaleX(0);
          transform-origin: center;
          transition: transform 0.3s ease;
      }
  }

  /* ─────────────────────────────────────────────
   Hide the mobile dropdown entirely on larger screens
   ───────────────────────────────────────────── */
  @media (min-width: 769px) {
      .mobile-dropdown-menu {
          display: none !important;
      }
  }

  /* =============================================================================
   1) Banner Container (background image + centering)
   ============================================================================= */
  .carousel-section .carousel {
      position: relative;
      width: 100%;
      min-height: 80vh;
      /* ~80% of viewport height */
      overflow-x: hidden;
      /* hide overflow when zooming */
      display: flex;
      align-items: center;
      /* center vertically */
      justify-content: center;
      /* center horizontally */
      color: #fff;
      /* default text color */
  }

  .carousel-item img {
      width: 100%;
      height: 100vh;
      display: block;
      margin: 0 auto;
  }

  /* ──────────────────────────────────────────────
       3. Centered overlay text (title, date/time, button):
          - Absolutely centered via top/left 50% + translate.
          - z-index high so it stays above sliding images.
    ────────────────────────────────────────────── */

  .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
      /* semi-transparent black */
      display: flex;
      align-items: center;
      /* vertical center */
      justify-content: center;
      /* horizontal center */
      padding: 20px;
      z-index: 1;

      /* small horizontal padding on mobile */
  }

  .banner-content {
      position: relative;
      /* above the overlay */
      z-index: 5;
      /* ensure text sits on top of dark overlay */
      text-align: center;
      max-width: 800px;
      /* so lines don’t stretch too wide on big screens */
      width: 100%;
      animation: fadeSlideIn 1s ease-in-out;
      pointer-events: auto;
  }

  .banner-title {
      font-size: 4rem;
      /* default desktop size */
      font-weight: bold;
      margin-bottom: 20px;
      line-height: 1.1;
      color: #fff;
      /* tighten up line height */
  }

  .banner-date,
  .banner-time {
      font-size: 1.8rem;
      margin: 6px 0;
      color: #fff;

  }

  .banner-date i,
  .banner-time i {
      margin-right: 8px;
      color: #fff;
  }


  .carousel-icon {
      font-size: 2rem;
      color: #fff;
      z-index: 10;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.4);
      padding: 10px;
      border-radius: 50%;
      transition: all 0.3s ease-in-out;
  }

  .carousel-control-prev .carousel-icon {
      left: 20px;
  }

  .carousel-control-next .carousel-icon {
      right: 20px;
  }

  /* ──────────────────────────────────────────────
       4. Style the prev/next buttons to use Bootstrap Icons:
          - Remove the default background of carousel controls.
          - Increase icon size and set a translucent circle behind.
    ────────────────────────────────────────────── */


  /* 4) Your existing .btn + .liquid CSS */
  .btn12 {
      position: relative;
      padding: 16px 30px;
      font-size: 25px;
      font-weight: 700;
      color: #fff;
      background: none;
      border: 3px solid #e72123;
      border-radius: 45px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;
  }


  .btn1 {
      position: relative;
      padding: 10px 20px;
      font-size: 20px;
      font-weight: 700;
      color: black;
      background: none;
      border: 3px solid #e72123;
      border-radius: 30px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;
  }

  .liquid {
      background: linear-gradient(#e72123 0 0) no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.2em);
      transition: 0.3s var(--t, 0s),
          background-position 0.3s calc(0.3s - var(--t, 0s));
      /* border-radius: 45px; */
  }

  .liquid:hover {
      --p: 100%;
      --t: 0.3s;
      color: #fff;
  }

  /* =============================================================================
   5) Responsive Adjustments for the Banner Itself
   ============================================================================= */

  .zoom-animation {
      animation: zoomEffect 7s ease-in-out infinite;
  }

  @keyframes zoomEffect {
      0% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.1);
      }

      100% {
          transform: scale(1);
      }
  }

  /* Large tablets & small desktops */
  @media (max-width: 992px) {
      .banner {
          min-height: 70vh;
          /* a bit shorter */
      }

      .banner-title {
          font-size: 2.2rem;
      }

      .banner-date,
      .banner-time {
          font-size: 1.1rem;
      }

      /* If you have a blob-btn inside, shrink it here, too: */
      .blob-btn {
          font-size: 0.9rem;
          padding: 12px 28px;
      }
  }

  /* Phones (extra small) */
  @media (max-width: 575.98px) {
      .banner {
          min-height: 40vh !important;
          /* much shorter to fit mobile */
      }

      .banner-title {
          font-size: 1.6rem;
          margin-bottom: 12px;
      }

      .banner-date,
      .banner-time {
          font-size: 0.9rem;
      }

      .blob-btn {
          width: 100%;
          /* make the button full-width on very small screens */
          padding: 12px 0;
          font-size: 0.85rem;
      }
  }


  /* =============================================================================
   0) ASSUMES the following selectors exist from your earlier code:
     .banner-content, .banner-title, .banner-date i, .banner-time i, .blob-btn
   ============================================================================ */

  /* ─────────────────────────────────────────────────────────────────────────────
   1) Fade & Slide-Down Animation for Title/Date/Time
   ───────────────────────────────────────────────────────────────────────────── */
  @keyframes fadeInDown {
      0% {
          opacity: 0;
          transform: translateY(-20px);
      }

      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Fade & Slide-Up Animation for the Button */
  @keyframes fadeInUp {
      0% {
          opacity: 0;
          transform: translateY(20px);
      }

      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* ─────────────────────────────────────────────────────────────────────────────
   2) Pulse Animation (“heartbeat”) for Icons
   ───────────────────────────────────────────────────────────────────────────── */
  @keyframes pulseIcon {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.15);
      }
  }

  /* ─────────────────────────────────────────────────────────────────────────────
   3) Text “Wave” Animation for Title (optional)
   Each letter in the title will wave up/down in sequence.
   To use this, wrap each character of the <h1> in a <span> (see HTML below).
   ───────────────────────────────────────────────────────────────────────────── */
  @keyframes wave {
      0% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-8px);
      }

      100% {
          transform: translateY(0);
      }
  }

  /* ─────────────────────────────────────────────────────────────────────────────
   4) APPLYING THE ANIMATIONS
   ───────────────────────────────────────────────────────────────────────────── */

  /* (A) Banner Title fades in 0.6s after page load */
  .banner-title {
      opacity: 0;
      /* start hidden */
      animation: fadeInDown 0.8s ease-out 0.6s both;
      /* delay 0.6s, duration 0.8s */
      /* If you want the “waveText” on each letter, add: */
      /* display: inline-block;  then see HTML note below */
  }

  /* (B) Banner Date fades in 0.8s after page load */
  .banner-date {
      opacity: 0;
      animation: fadeInDown 0.8s ease-out 0.8s both;
      /* delay 0.8s, duration 0.8s */
  }

  /* (C) Banner Time fades in 1.0s after page load */
  .banner-time {
      opacity: 0;
      animation: fadeInDown 0.8s ease-out 1.0s both;
      /* delay 1.0s */
  }

  /* (D) Pulse the icons in date/time continuously */
  .banner-date i,
  .banner-time i {
      display: inline-block;
      /* so transform: scale() works */
      animation: pulseIcon 2s ease-in-out infinite 2s;
      /* 2s duration, infinite loop, 2s initial delay */
  }

  /* (E) “Register Now” blob-btn fades in from below at 1.2s */


  /* ─────────────────────────────────────────────────────────────────────────────
   5) OPTIONAL: Letter-by-Letter “Wave” on the Title
   (Wrap each character of “Aakar Auto Show Expo 2025” in a <span>
    and then apply staggered delays)
   ───────────────────────────────────────────────────────────────────────────── */
  .wave-text span {
      display: inline-block;
      animation: wave 1s ease-in-out infinite;
  }

  /* delay each span by a small fraction to create a ripple effect */
  .wave-text span:nth-child(1) {
      animation-delay: 0.0s;
  }

  .wave-text span:nth-child(2) {
      animation-delay: 0.1s;
  }

  .wave-text span:nth-child(3) {
      animation-delay: 0.2s;
  }

  .wave-text span:nth-child(4) {
      animation-delay: 0.3s;
  }

  .wave-text span:nth-child(5) {
      animation-delay: 0.4s;
  }

  .wave-text span:nth-child(6) {
      animation-delay: 0.5s;
  }

  /* … continue for as many characters/spans as needed … */

  /* ─────────────────────────────────────────────────────────────────────────────
   6) RESPONSIVE TWEAKS (ensure animations still look good on small screens)
   ───────────────────────────────────────────────────────────────────────────── */
  /* On tablets & below, shorten delays slightly so things appear faster */
  @media (max-width: 768px) {
      .banner-title {
          animation-delay: 0.4s;
      }

      .banner-date {
          animation-delay: 0.6s;
      }

      .banner-time {
          animation-delay: 0.8s;
      }

      .blob-btn {
          animation-delay: 1.0s;
      }
  }

  /* On phones, make all text and animations finish sooner */
  @media (max-width: 576px) {
      .banner-title {
          animation-delay: 0.3s;
          font-size: 1.2rem;
          /* you already had this */
      }

      .banner-date,
      .banner-time {
          animation-delay: 0.5s;
          font-size: 0.7rem;
          /* you already had this */
      }

      .btn {
          position: relative;
          padding: 7px 15px;
          font-size: 15px;
          font-weight: 700;
          color: white;
          background: none;
          border: 3px solid #0997d4;
          border-radius: 45px;
          cursor: pointer;
          overflow: hidden;
          transition: all 0.3s ease;
          z-index: 10;
      }

      .blob-btn {
          animation-delay: 0.7s;
          width: 100%;
          /* you already had this */
      }

      .carousel-item img {
          height: 32vh;
          object-fit: cover;
          /* adjust image height for smaller screens */
      }

      .carousel-section .carousel {
          position: relative;
          width: 100%;
          min-height: 30vh;
      }
  }


  /* ──────────────────────────────────────────────────────────────────────────
  A) FADE-IN ON SCROLL
     Any element with class="fade-in" will start invisible/translated,
     then animate to fully visible when scrolled ≥ 30% into viewport
────────────────────────────────────────────────────────────────────────── */
  .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s ease-out,
          transform 0.9s ease-out;
  }

  .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
  }

  /* 1) Start “off to the right” */
  .slide-in-from-right {
      transform: translateX(100px);
      /* 100px to the right initially */
      transition: transform 0.8s ease-out;
  }

  /* 2) When .visible is added, slide back to original position */
  .slide-in-from-right.visible {
      transform: translateX(0);
  }

  /* 1) Start “off to the right” */
  .slide-in-from-left {
      transform: translateX(-100px);
      /* 100px to the left initially */
      transition: transform 0.8s ease-out;
  }

  /* 2) When .visible is added, slide back to original position */
  .slide-in-from-left.visible {
      transform: translateX(0);
  }

  /* ─────────────────────────────────────────────
       1) INITIAL STATE: “off above” and invisible
       ───────────────────────────────────────────── */
  .slide-in-from-top {
      transform: translateY(-100px);
      /* start 100px above */
      opacity: 0;
      /* start invisible if you want (optional) */
      transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  }

  /* ─────────────────────────────────────────────
       2) VISIBLE STATE: slide down into place
       ───────────────────────────────────────────── */
  .slide-in-from-top.visible {
      transform: translateY(0);
      opacity: 1;
      /* fade in as it slides down */
  }

  /* ──────────────────────────────────────────────────────────────────────────
  B) IMAGE-SPECIFIC ADJUSTMENT
     We want the image to also scale slightly as it fades in. */
  #about-image {
      transform: translateY(20px) scale(0.95);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      border-radius: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
  }


  #about-image.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
  }

  .text-color {
      font-weight: 700;
      color: #e72123;

  }

  .text-color1 {
      font-weight: 700;
      font-family: "Inter", sans-serif;
      color: #3243a2;
      font-size: 44px;
  }


  /* ──────────────────────────────────────────────────────────────────────────
  C) “READ MORE” BUTTON HOVER EFFECT
────────────────────────────────────────────────────────────────────────── */


  /* Optional: add a subtle “pulse” animation to attract attention */
  .read-more-btn.pulse {
      animation: pulse-btn 2s infinite;
  }

  @keyframes pulse-btn {
      0% {
          transform: scale(1);
          box-shadow: 0 0 0 rgba(0, 123, 255, 0.7);
      }

      50% {
          transform: scale(1.03);
          box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
      }

      100% {
          transform: scale(1);
          box-shadow: 0 0 0 rgba(0, 123, 255, 0);
      }
  }

  /* ──────────────────────────────────────────────────────────────────────────
  D) RESPONSIVE TWEAKS
────────────────────────────────────────────────────────────────────────── */
  /* On tablets & small desktops (≤ 992px), reduce text size slightly */
  @media (max-width: 992px) {
      #about h2 {
          font-size: 1.75rem;
      }

      #about p {
          font-size: 0.95rem;
      }
  }

  /* On phones (≤ 576px), ensure adequate spacing and readability */
  @media (max-width: 576px) {
      #about h6 {
          font-size: 0.85rem;
      }

      #about h2 {
          font-size: 1.5rem;
      }

      #about p {
          font-size: 0.9rem;
      }

      .read-more-btn {
          width: 100%;
          text-align: center;
      }
  }


  /* ─────────────────────────────────────────────────────────────────────────
   Floating “Book Stall” Button
───────────────────────────────────────────────────────────────────────── */
  .floating-book {
      position: fixed;
      top: 40%;
      /* vertically centered around 40% down */
      right: -20px;
      /* push 30px off the right edge */
      width: 180px;
      /* total visible width = 180px + 30px = 210px */
      padding: 10px 15px;
      /* vertical/horizontal padding */
      background-color: #e72123;
      color: #fff;
      border-radius: 50px 0 0 50px;
      /* round only top-left & bottom-left */
      text-align: left;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      z-index: 99900;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 1px solid white;
  }

  /* Icon styling */
  .floating-book i {
      margin-right: 8px;
      font-size: 1.2em;
      min-width: 24px;
      /* ensure alignment even if icon fails to load */
  }

  /* Hover / Focus effect */
  .floating-book:hover,
  .floating-book:focus {
      transform: translateY(-3px) translateX(2px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
      text-decoration: none;
      color: #fff;
  }

  /* Responsive tweaks */

  /* On tablets and smaller (≤ 768px), pull it in a bit and shrink text/icon */
  @media (max-width: 768px) {
      .floating-book {
          top: 45%;
          right: -6px;
          width: 160px;
          padding: 8px 12px;
          font-size: 15px;
          border-radius: 40px 0 0 40px;
      }

      .floating-book i {
          margin-right: 6px;
          font-size: 1.1em;
      }
  }

  .container1 {
      display: none;
      background-color: #fff;
  }

  /* On phones (≤ 576px), pull it in even more and shrink further */
  @media (max-width: 576px) {
      .floating-book {
          top: 50%;
          right: -20px;
          width: 140px;
          padding: 6px 10px;
          font-size: 13px;
          border-radius: 35px 0 0 35px;
          margin-right: 14px;

      }

      .gradient-navbar {
          display: block;
          width:100%;
          background:none !important;
          box-shadow:none !important;
      }

      .container1 {
          display: block !important;
          /* background-color: blue; */
      }

      .floating-book i {
          margin-right: 4px;
          font-size: 1em;
      }
  }




  .back-color {
      background-color: #b8dbea;
  }

  * {
      box-sizing: border-box;
  }

  .cards .card--1 .card__img,
  .card--1 .card__img--hover {
      background-image: url('../images/wheller4_parts.png');
  }

  .cards .card--2 .card__img,
  .card--2 .card__img--hover {
      background-image: url('../images/heavy_parts.png');
  }

  .cards .card--3 .card__img,
  .card--3 .card__img--hover {
      background-image: url('../images/auto_accessories.png');
  }

  .cards .card--4 .card__img,
  .card--4 .card__img--hover {
      background-image: url('../images/E_Vehicle.png');
  }

  .cards .card--5 .card__img,
  .card--5 .card__img--hover {
      background-image: url('../images/CNG_LPG.png');
  }

  .cards .card--6 .card__img,
  .card--6 .card__img--hover {
      background-image: url('../images/Lubricants.png');
  }

  .cards .card--7 .card__img,
  .card--7 .card__img--hover {
      background-image: url('../images/Batteries.png');
  }

  .cards .card--8 .card__img,
  .card--8 .card__img--hover {
      background-image: url('../images/Garage_Equipments.png');
  }

  .card__img {
      visibility: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 235px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
  }

  .card__info:hover {
      position: absolute;
      padding: 16px;
      width: 100%;
      opacity: 0;
      top: 0;
  }

  .card__img--hover {
      transition: 0.7s all ease-out;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      position: absolute;
      height: 235px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      top: 0;
  }

  .card {
      transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
      background-color: #fff;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
      height: 90%;
  }

  .card:hover {
      box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
      /* background-color: rgba(0, 0, 0, 0.1); */
      transform: scale(1);
  }

  .card__info {
      z-index: 2;
      background-color: #fff;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      padding: 16px 24px 24px 24px;
  }

  .card__category {
      font-family: 'Raleway', sans-serif;
      text-transform: uppercase;
      font-size: 13px;
      letter-spacing: 2px;
      font-weight: 500;
      color: #868686;
  }

  .card__title {
      margin-top: 5px;
      margin-bottom: 10px;
      /* font-family: 'Roboto Slab', serif; */
      font-weight: 600;
      color: #e72123;
      font-size: 22px;
  }

  .card__by {
      font-size: 12px;
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
  }

  .card__author {
      font-weight: 600;
      text-decoration: none;
      color: #AD7D52;
  }

  .card:hover .card__img--hover {
      height: 100%;
      opacity: 0.3;
  }

  .card:hover .card__info {
      background-color: transparent;
      position: relative;
  }

  .card:hover .card__info:hover {
      opacity: 1;
      /* background-color: #fff; */

  }

  .card:hover .card__title-hover {
      background-color: white;
  }

  @media (max-width: 991.98px) {
      .card {
          margin-bottom: 1rem;
      }
  }

  /* 1) This is the section that holds the background image */
  .exhibitor-section {
      position: relative;
      background: url('/assets/images') no-repeat center center/cover;
      overflow: hidden;
  }

  /* 2) A semi-transparent white overlay so content remains legible */
  .exhibitor-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Adjust the RGBA alpha (0.0 – 1.0) to tune transparency */
      background-color: rgba(255, 255, 255, 0.5);
      z-index: 0;
  }

  /* 3) Ensures the .container content sits above the overlay */
  .exhibitor-section .container {
      position: relative;
      z-index: 1;
  }



  /* Card box */
.exhibitor-card {
    background: #fff;
    border: 2px solid #e72123;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.35s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image area */
.exhibitor-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Bottom label */
.exhibitor-label {
    padding: 12px 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #222;
    background: #fff;
    text-transform: uppercase;
    border-top: 1px solid #eee;
}

/* Hover effects (same as reference image) */
.exhibitor-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(231, 33, 35, 0.35);
}

.exhibitor-card:hover img {
    transform: scale(1.05);
}

.exhibitor-card:hover .exhibitor-label {
    background: #e72123;
    color: #fff;
}


  /* 8) Make sure images/fonts scale nicely */
  @media (max-width: 1024px) {

      /* Example: reduce padding or font-size slightly on 1024px and below */
      .exhibitor-section {
          padding-bottom: 2rem;
          padding-top: 2rem;
      }

      .exhibitor-title {
          font-size: 1.75rem;
      }

      .exhibitor-card {
          padding: 0.75rem;
      }

      .exhibitor-label {
          font-size: 0.9rem;
      }
  }



  :root {
      --cover-timing: 0.5s;
      --cover-ease: cubic-bezier(0.66, 0.08, 0.19, 0.97);
      --cover-stagger: 0.15s;

      --text-timing: 0.75s;
      --text-stagger: 0.015s;
      --text-ease: cubic-bezier(0.38, 0.26, 0.05, 1.07);

      --title-stagger: 0.05s;
      --highlight: white;
  }

  .gallery-container .card {
      position: relative;
      overflow: hidden;
      aspect-ratio: 9/12;
      display: flex;
      flex-direction: column;
      border-radius: 7px;
      /* box-shadow:
          rgba(255, 255, 255, 0.3) 0 5vw 6vw -8vw,
          rgba(255, 255, 255, 0) 0 4.5vw 5vw -6vw,
          rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw,
          rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw; */
      transition: box-shadow 1s var(--cover-ease);
      max-height: 250px;
      width: 100%;
      /* or whatever you want */
      object-fit: cover;
  }

  .gallery-container .card>* {
      z-index: 2;
  }

  .gallery-container .card>img {
      z-index: 0;
      transition: all 0.8s cubic-bezier(0.66, 0.08, 0.19, 0.97);
  }

  .gallery-container .card::before,
  .gallery-container .card::after {
      content: "";
      width: 100%;
      height: 50%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      position: absolute;
      transform-origin: left;
      transform: scaleX(0);
      transition: all var(--cover-timing) var(--cover-ease);
      z-index: 1;
  }

  .gallery-container .card::after {
      transition-delay: var(--cover-stagger);
      top: 50%;
  }

  .gallery-container .card:hover,
  .gallery-container .card:focus {
      box-shadow:
          white 0 5vw 6vw -9vw,
          var(--highlight) 0 5.5vw 5vw -7.5vw,
          rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw,
          rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
  }

  .gallery-container .card:hover::before,
  .gallery-container .card:hover::after {
      transform: scaleX(1);
  }

  .gallery-container .card:hover h2 .char,
  .gallery-container .card:hover p .word {
      opacity: 1;
      transform: translateY(0);
      color: inherit;
  }

  .gallery-container .card:hover h2 .char {
      transition-delay: calc(0.1s + var(--char-index) * var(--title-stagger));
  }

  .gallery-container .card:hover p .word {
      transition-delay: calc(0.1s + var(--word-index) * var(--text-stagger));
  }

  .gallery-container .card:hover img {
      transform: scale(1.1);
  }

  .gallery-container .card:nth-of-type(1) {
      --highlight: coral;
  }

  .gallery-container .card:nth-of-type(2) {
      --highlight: #56ffe5;
  }

  /* .text {
      position: absolute;
      inset: 20px;
      top: auto;
  } */
  /*
  h2 {
      font-size: clamp(20px, 4vw, 40px);
      font-weight: 800;
      margin-bottom: 0.2em;
  }

  p {
      font-size: clamp(10px, 1.25vw, 14px);
      line-height: 1.4;
      text-align: justify;
      margin-top: 0.2em;
      margin-bottom: 0;
  }

  h2 .char,
  p .word {
      color: var(--highlight);
      display: inline-block;
      opacity: 0;
      position: relative;
      transform: translateY(20px);
      transition-property: transform, opacity, color;
      transition-timing-function: var(--text-ease);
      transition-duration: var(--text-timing), var(--text-timing), calc(var(--text-timing) * 2);
  } */

  .card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 7px;
  }

  /* Optional container styling for the gallery section */
  .gallery-container {
      padding: 2rem 1rem;
      max-width: 1200px;
      margin: 0 auto;
  }

  .gallery-container h1 {
      text-align: center;
      margin-bottom: 1.5rem;
      font-size: clamp(24px, 5vw, 36px);
  }

  /* Owl Carousel overrides (if needed) */
  .owl-carousel .item {
      padding: 0.5rem;
  }

  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next {
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
  }

  .owl-carousel .owl-nav button.owl-prev:hover,
  .owl-carousel .owl-nav button.owl-next:hover {
      background: rgba(0, 0, 0, 0.7);
  }

  .owl-carousel .owl-dots .owl-dot span {
      background: #888;
      width: 10px;
      height: 10px;
  }

  .owl-carousel .owl-dots .owl-dot.active span {
      background: #333;
  }


  .map-section {
      padding: 40px 20px;
      background-color: #fff;
      text-align: center;
  }



  .map-container {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  .map-container iframe {
      width: 100%;
      height: 400px;
      border: 0;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      .map-container iframe {
          height: 300px;
      }
  }

  @media (max-width: 480px) {
      .map-section h2 {
          font-size: 1.5rem;
      }

      .map-container iframe {
          height: 250px;
      }
  }

  /* ──────────────── footer background and padding ──────────────── */
  .site-footer footer {
      background-color: #e6f7fb;
      /* light blue */
  }

  /* ──────────────── Heading Styles ──────────────── */
  .site-footer .footer-heading {
      color: #003366;
      /* Dark blue for headings */
      font-weight: 700;
      font-size: 20px;
      padding-bottom: 0.5rem;
      /* space between text and underline */
      margin-bottom: 1rem;
      line-height: 30px !important;
      display: inline-block;
      /* shrink-wrap to text width */
      position: relative;
      /* space below underline before next content */

      /* Blue underline itself: */
      border-bottom: 3px solid #003366;
  }

  /* ──────────────── Column 1: Logo & Description ──────────────── */
  .site-footer .footer-logo {
      max-width: 240px;
      height: auto;
  }

  .site-footer .footer-description {
      margin-top: 0.75rem;
      font-size: 16px;
      color: black;
      line-height: 1.5;
  }

  /* ──────────────── Column 2: Quick Links ──────────────── */
  .site-footer .footer-links li {
      margin-bottom: 8px;
  }

  .site-footer .footer-links a {
      color: black;
      /* default link color = dark grey */
      font-size: 16px;
      text-decoration: none;
      /* remove underline by default */
      transition: color 0.2s, font-size 0.2s;
  }

  .site-footer .footer-links a:hover {
      color: #e72123;
      /* Dark blue on hover */
      text-decoration: underline;
      /* font-size:15px;         Increase font size by 10% on hover */
  }

  /* ──────────────── Column 3: Contact Info ──────────────── */
  .site-footer .footer-contact li {
      margin-bottom: 8px;
      font-size: 16px;
      color: black;
      line-height: 1.4 !important;
      /* ensure consistent spacing */
  }

  .site-footer .footer-contact i {
      color: #0997d4;
      /* Bootstrap primary blue for icons */
  }

  /* ──────────────── Column 4: Organiser Logo ──────────────── */
  .site-footer .footer-organiser-logo {
      max-width: 240px;
      height: auto;
  }

  /* ──────────────── Footer Bottom Bar ──────────────── */
  .footer-bottom {
      /* margin-top: 1rem; */
      padding: 0.75rem 0;
      background-color: black;
      /* black background */
      color: #fff;
      /* white text */
      font-size: 16px;
      /* padding-left: 100px; */
  }

  /* ──────────────── Responsive Adjustments ──────────────── */
  @media (max-width: 991.98px) {

      /* On tablets (≥768px and <992px), columns stack into two per row */
      .site-footer .text-lg-start {
          text-align: center !important;
      }

      .site-footer .col-lg-3 {
          margin-bottom: 20px;
      }
  }

  @media (max-width: 767.98px) {

      /* On mobile (<768px), all columns stack full-width */
      .site-footer footer {
          text-align: center;
      }

      .site-footer .footer-description,
      .site-footer .footer-contact,
      .site-footer .footer-links {
          text-align: center;
      }

      .footer-bottom {
          text-align: center;
      }
  }

  /* ABOUT US PAGE CSS  */
  .breadcrumb-section {
      /* max-width: 800px; */
      /* margin: 2rem auto; */
      /* padding: 0 60px 0 60px; */
      padding-block-start: 70px;
      padding-block-end: 20px;
      /* margin-top: -30px; */
      background-color: #003366;
  }

  .breadcrumb-title {
      /* font-size: 2rem; */
      margin-bottom: 0.5rem;
      color: #fff;
      font-weight: 700;
  }

  .breadcrumb {
      font-size: 0.9rem;
      color: #fff;
  }

  .breadcrumb-link {
      text-decoration: none;
      color: #fff;
  }

  .breadcrumb-separator {
      margin: 0 0.5em;
  }

  .breadcrumb-current {
      color: #fff;
      font-weight: 500;
  }

  /* Place this in your main CSS file */

  .info-section {
      background-color: #f8f9fa;
  }

  .info-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      padding: 1.5rem;
      height: 100%;
  }

  .info-icon {
      font-size: 1.75rem;
      color: #888;
      flex-shrink: 0;
  }

  /* Title in your brand red */
  .info-title {
      color: #0997d4;
      font-size: 1.25rem;
      margin: 0;
      font-weight: 600;
  }

  .info-text {
      color: #000;
      margin: 0.25rem 0 0;
      line-height: 1.5;
  }

  .info-text a {
      color: #000;
      text-decoration: none !important;
  }

  .info-text a:hover {
      color: #0997d4;

  }

  /* ======= Section Styles ======= */
  .contact-section {
      padding: 4rem 1rem;
      background-color: #f8f9fa;
  }

  .contact-section .section-header h2 {
      font-size: 2.5rem;
      font-weight: 700;
      color: #3243a2;
  }

  .contact-section .section-header p {
      color: #000;
      font-size: 1rem;
      margin-top: 0.5rem;
  }

  /* ======= Form Wrapper ======= */
  .contact-section .form-wrapper {
      border: 1px solid #dee2e6;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      padding: 2rem;
      border-radius: 1rem;
  }

  /* ======= Inputs & Textarea ======= */
  .contact-section .form-control {
      border: 1px solid #dee2e6;
      border-radius: 0.5rem;
      background-color: #fff;
      padding: 0.75rem 1rem;
      font-size: 0.95rem;
      color: #000;
  }

  .contact-section .form-control:focus {
      box-shadow: none;
      border-color: #ced4da;
  }

  .image-section {
      padding: 2rem 0;
      justify-content: center;
      align-items: center;
      display: flex;
  }

  .image-section img {
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 0.5rem;
      /* optional rounded corners */

  }

  /* Exhibitor Page  */
  /* Container & Gradient Background */
  .exhibitor-section {
      background: #f8f9fa;

  }

  .exhibitor-section .exhibitor-form {

      border-radius: 12px;
      padding: 2rem;
      color: #fff;
      border: 1px solid #dee2e6;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  /* Section title */
  .section-title {
      font-size: 2rem;
      color: #3c348e;
      font-weight: 700;
  }

  /* Section subtitles */
  .section-subtitle {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: #000;
      /* border-bottom: 1px solid rgba(255,255,255,0.6); */
      display: inline-block;
      padding-bottom: 0.25rem;
  }

  /* Form labels (for the first two selects/inputs) */
  .exhibitor-form .form-label {
      font-weight: 600;
      color: #000;
  }

  /* Inputs & selects */
  .exhibitor-form .form-control,
  .exhibitor-form .form-select {
      /* border: none;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem; */
      border: 1px solid #dee2e6;
      border-radius: 0.5rem;
      background-color: #fff;
      padding: 0.75rem 1rem;
      font-size: 0.95rem;
      color: #000;
  }

  /* Placeholder color */
  .exhibitor-form .form-control::placeholder,
  .exhibitor-form .form-select {
      color: #000;
  }

  /* Submit button */
  .btn-submit {
      background: transparent;
      border: 2px solid #fff;
      border-radius: 6px;
      padding: 0.6rem 1.6rem;
      font-weight: 600;
      color: #fff;
      transition: background 0.3s, color 0.3s;
  }

  .btn-submit:hover {
      background: #fff;
      color: #3c348e;
  }

  .form-select:focus {
      box-shadow: none;
      /* border: none; */
  }

  /* Responsive tweaks */
  @media (max-width: 575px) {
      .exhibitor-form {
          padding: 1.5rem;
      }
  }

  /* Why Exhibit Page */
  .feature-section {
      background-color: #f9f9f9;
  }

  /* Tick‑mark bullet list */
  .tick-list {
      list-style: none;
      padding-left: 0;
  }

  .tick-list li {
      position: relative;
      padding-left: 1.8rem;
      margin-bottom: 0.75rem;
      line-height: 1.4;
  }

  /* inject a green tick icon before each li */
  .tick-list li::before {
      content: "✔";
      position: absolute;
      left: 0;
      top: 0.1rem;
      color: #000;
      /* bootstrap success green */
      font-weight: bold;
  }

  /* Exhibition Benifits Page  */

  .benefits-section .card {
      border: 1px solid #e72123;
      border-radius: 0.25rem;
      overflow: hidden;
      height: 100%;
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .benefits-section .card-header {
      background-color: #e72123;
      color: #fff;
      font-weight: 600;
      text-align: center;
      padding: 16px;
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
      text-transform: uppercase;
      font-size: 20px;
  }

  .benefits-list {
      list-style: none;
      padding-left: 10px;
      margin: 0;
  }

  .heading-list {
      font-weight: 600;
      padding: 15px 0 0 20px;
  }

  .benefits-list li {
      margin-bottom: 0.75rem;
      color: #000;
      display: flex;
      align-items: flex-start;
  }

  .benefits-list li::before {
      content: "✔";
      color: #000;
      margin-right: 0.75rem;
      line-height: 1;
      margin-top: 0.15rem;
  }

  .charges-table {
      width: 100%;
      border-collapse: collapse;
      padding-left: 16px
  }

  .charges-table td {
      padding: 12px 30px 10px 15px;
      color: #000;
      vertical-align: middle;

  }

  .charges-table td:nth-child(2) {
      text-align: center;
      width: 1.5rem;
  }

  @media (max-width: 575.98px) {

      .benefits-list,
      .charges-table {
          padding-left: 0.75rem;
          padding-right: 0.75rem;
      }
  }

  /* Visitor Regictration Page */
  .registration-section .text-blue {
      color: #3243a2;
      padding-bottom: 20px;
  }

  .registration-section {
      padding: 2rem 0;
  }

  .registration-section h2 {
      font-weight: 600;
  }

  .registration-section .status {
      color: #e63946;
      font-weight: 600;
      margin-bottom: 1.5rem;
  }

  .registration-section .form-control,
  .registration-section .form-select {
      border-radius: 0.375rem;
      background-color: #f8f9fa;
      color: #000;
  }

  .registration-section .img-container {
      text-align: center;
  }

  .registration-section .img-container img {
      max-width: 100%;
      border-radius: 1.5rem;

  }

  .registration-section .dates .form-check {
      margin-bottom: .75rem;
  }

  .form-control:focus {

      box-shadow: none;

  }

  /* Exhibitor Login Page */
  /* CSS */
  /* make sure Bootstrap’s CSS is loaded first */

  .login-section {
      background: #f8f9fa;

  }

  /* Gradient box for the form */
  .login-form {
      background-color: #fff;
      border: 1px solid #dee2e6;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  /* Icon inside inputs */
  .input-icon {
      position: absolute;
      top: 50%;
      left: 1rem;
      transform: translateY(-50%);
      color: #fff;
      font-size: 1.1rem;
  }

  /* Remove native input padding on the left, add space for icon */
  .form-control.ps-5 {
      padding-left: 2.5rem !important;
      border-radius: 0.375rem;
  }

  /* White placeholder text */
  .login-form .form-control::placeholder {
      color: #555;
  }

  /* Gradient button with white border */
  .btn-gradient {
      background: linear-gradient(135deg, #ff7a18 0%, #ff512f 100%);
      border: 1px solid rgba(255, 255, 255, 0.8);
      color: #fff;
      padding: 0.75rem;
      border-radius: 0.375rem;
      font-weight: 500;
  }

  .text-color {
      color: #003366;
  }

  /* Ensure the image is fully responsive & rounded */
  .login-section img {
      display: block;
      max-width: 100%;
      height: auto;
  }

  .bi {
      font-size: 17px;
      color: #003366;
      padding-right: 10px;
  }

  /* Mobile tweaks */
  @media (max-width: 576px) {
      .login-form {
          padding: 2rem 1.5rem;
      }
  }


.med-img{
    /*padding:20px;*/
    /*padding-bottom:50px;*/
    height:120px!important;
     border:2px solid #000;
    border-radius:20px;
    margin:10px;
    align-content: center;
}
.med-img img{
  
    /*object-fit:cover;*/
    height:auto;
    width:auto;
    /*paddding:20px !important;*/
    margin-bottom:10px;
}


.client-logo-section{
    padding:40px 0;
    background:#fff;
}

.client-logo-carousel{
    width:100%;
}

.client-logo-carousel .owl-stage{
    display:flex;
}

.client-logo-carousel .owl-item{
    display:flex;
    justify-content:center;
}

.logo-item{
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-item img{
    max-width:140px;
    width:100%;
    filter:grayscale(0%);
    opacity:0.8;
    transition:0.3s ease;
}

.logo-item img:hover{
    filter:grayscale(100%);
    
    opacity:1;
    transform:scale(1.05);
}