/* Updated Navigation Styles */
      .desktop-nav-wrapper {
        background-color: #019fcb;
        width: 100%;
      }

      .desktop-nav {
        background-color: #019fcb;
      }

      .desktop-nav .nav-link {
        color: white !important;
      }

      .desktop-nav .nav-link:hover,
      .desktop-nav .nav-link:focus {
        color: #e6f7fb !important;
        background-color: rgba(255, 255, 255, 0.1);
      }

      .desktop-nav .dropdown-menu {
        background-color: white;
        border: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .desktop-nav .dropdown-item {
        color: #333;
      }

      .desktop-nav .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #019fcb;
      }

      /* Chevron rotation for dropdown */
      .nav-item.dropdown:hover .chevron-icon,
      .nav-item.dropdown.show .chevron-icon {
        transform: rotate(180deg);
      }

      .chevron-icon {
        transition: transform 0.3s ease;
      }

      /* Mobile navigation */
      .mobile-nav {
        background-color: #019fcb;
      }

      .mobile-header-container {
        background-color: #019fcb;
      }

      .mobile-contact-icon {
        color: white !important;
      }

      .hamburger-bar {
        background-color: white;
      }

      .mobile-menu-overlay {
        background-color: #ffffff; /* Changed to white for better contrast */
      }

      .mobile-menu-list a {
        color: #333; /* Changed to dark for better visibility */
      }

      .mobile-submenu {
        background-color: rgba(0, 0, 0, 0.05); /* Light gray for submenu */
      }

      .mobile-submenu a {
        color: #333; /* Dark text for submenu items */
      }

      /* Search and contact button styles */
      #searchToggle {
        color: white !important;
      }

      .contact-btn {
        background-color: white;
        color: #019fcb !important;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .contact-btn:hover {
        background-color: #e6f7fb;
        color: #019fcb;
      }

      /* Custom styles for the Rotary Club banner */
      .rotary-banner {
        background-color: #25302f; /* Fallback color */
        color: white;
        /* padding: 80px 0 60px; */
        padding: 260px 0 60px;
        display: flex;
        align-items: center;
        min-height: 500px;
        position: relative;
        overflow: hidden;
      }

      .banner-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
      }

      /* Dark overlay for better text readability */
      .rotary-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
          37,
          48,
          47,
          0.5
        ); /* Dark overlay with transparency */
        z-index: 2;
      }

      .banner-details-content {
        color: white;
        position: relative;
        z-index: 3;
      }

      .banner-details-content h1.name {
        font-size: 2.8rem;
        font-weight: bold;
        margin-bottom: 1.5rem;
      }

      .banner-details-content h5 {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
      }

      .banner-details-content .club-details,
      .banner-details-content .date-and-time {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
      }

      .banner-details-content .club-details span,
      .banner-details-content .date-and-time span {
        display: flex;
        align-items: center;
      }

      .banner-details-content i {
        margin-right: 0.5rem;
        color: #0d6efd;
      }

      .banner-details-content big {
        font-size: 1.2rem;
        margin: 0 0.5rem;
      }

      /* About Club Section */
      .about-club {
        padding: 80px 0;
        background-color: #f8f9fa;
      }

      .about-club h1 {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 2.5rem;
        color: #25302f;
        text-align: center;
      }

      .two-column-text {
        column-count: 2;
        column-gap: 2rem;
        font-size: 1.15rem;
        line-height: 1.8;
      }

      .two-column-text p {
        margin-bottom: 1.5rem;
        break-inside: avoid;
      }

      /* Rotary Milestone Section */
      .rotary-milestone {
        padding: 80px 0;
        background-color: #1e4a7c;
        color: white;
        text-align: center;
      }

      .milestone-item {
        margin-bottom: 2rem;
      }

      .milestone-number {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        color: #ffc107;
      }

      .milestone-label {
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      /* Rotary Leaders Section */
      .rotary-leaders {
        padding: 80px 0;
        background-color: white;
      }

      .section-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 3rem;
        color: #1e4a7c;
        text-align: center;
      }

      .leader-card {
        text-align: center;
        padding: 2rem 1rem;
        transition: transform 0.3s ease;
      }

      .leader-card:hover {
        transform: translateY(-5px);
      }

      /* Updated leader image to rectangular */
      .leader-image {
        width: 100%;
        height: 350px; /*increased height from 250px to 350px*/
        object-fit: cover;
        margin: 0 auto 1.5rem;
      }

      .leader-name {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        color: #1e4a7c;
      }

      .leader-position {
        font-size: 1.1rem;
        color: #666;
        margin-bottom: 0.5rem;
        font-weight: 600;
      }

      .leader-tenure {
        font-size: 1rem;
        color: #888;
      }

      /* Featured Section with Random Background Colors */
      .featured-container {
        position: relative;
        overflow: hidden;
      }

      .featured-wrapper {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: 1.5rem;
        padding: 1rem 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
      }

      .featured-wrapper::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
      }

      .feature-card {
        flex: 0 0 auto;
        width: 280px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        background: white;
      }

      .feature-card:hover {
        transform: translateY(-5px);
      }

      .feature-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
      }

      .feature-img-placeholder {
        width: 100%;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
      }

      .feature-text {
        padding: 1.5rem;
        background: white;
      }

      .feature-text h3 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: #333;
      }

      .scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.8);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
      }

      .scroll-btn:hover {
        background: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      }

      .scroll-btn.left {
        left: 10px;
      }

      .scroll-btn.right {
        right: 10px;
      }

      /* Background color for sections without images */
      #recent-3 {
        background-color: #ffffff;
      }

      #blog {
        background-color: #f8f9fa;
      }

      #featured-3 {
        background-color: #ffffff;
      }

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

      footer {
        background-color: #2c3e50;
        color: white;
      }

      .footer-nav a {
        color: #bdc3c7;
        text-decoration: none;
      }

      .footer-nav a:hover {
        color: white;
      }

      .social-icon {
        color: #bdc3c7;
        font-size: 1.2rem;
        transition: color 0.3s ease;
      }

      .social-icon:hover {
        color: white;
      }

      /* Custom hamburger button styles */
      .hamburger-button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
      }

      /* Mobile responsive fixes */
      @media (max-width: 768px) {
        /* Banner padding fix */
        .rotary-banner .container {
          padding-left: 35px; /*increased padding from 15px to 35px*/
          padding-right: 15px;
        }

        .rotary-banner {
          min-height: 400px;
          padding: 60px 0 40px;
        }

        .banner-details-content h1.name {
          font-size: 2rem;
        }

        .banner-details-content h5 {
          font-size: 1rem;
        }

        .banner-details-content .club-details,
        .banner-details-content .date-and-time {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
        }

        .banner-details-content big {
          display: none;
        }

        /* About club padding fix */
        .about-club .container {
          padding-left: 15px;
          padding-right: 15px;
        }

        .about-club {
          padding: 60px 0;
        }

        .about-club h1 {
          font-size: 2rem;
          margin-bottom: 2rem;
        }

        .two-column-text {
          column-count: 1;
          font-size: 1rem;
        }

        .rotary-milestone {
          padding: 60px 0;
        }

        .milestone-number {
          font-size: 2.5rem;
        }

        .milestone-label {
          font-size: 1rem;
        }

        .rotary-leaders {
          padding: 60px 0;
        }

        .section-title {
          font-size: 2rem;
          margin-bottom: 2rem;
        }

        .leader-card {
          margin-bottom: 2rem;
        }

        .feature-img,
        .feature-img-placeholder {
          height: 160px;
        }

        .scroll-btn {
          width: 35px;
          height: 35px;
        }

        /* Mobile menu fixes */
        .mobile-menu-list a {
          color: #333; /* Ensure black text on white background */
        }

        .mobile-submenu a {
          color: #333; /* Black text for submenu items */
        }

        .mobile-menu-item.has-dropdown.active > a {
          background-color: rgba(0, 0, 0, 0.05);
        }

        .mobile-submenu.active {
          background-color: rgba(0, 0, 0, 0.05);
        }

        .close-button {
          color: #333; /* Dark close button for white background */
        }
      }

      @media (max-width: 576px) {
        .feature-img,
        .feature-img-placeholder {
          height: 140px;
        }
      }