/* Ensure logo scales well */
        .navbar-brand img {
            max-width: 100%;
            height: auto;
        }

        /* Navbar styles to make it responsive */
        .navbar-nav {
            flex-wrap: wrap;
        }

        /* Join Now button stays at the corner */
        .navbar .ml-auto {
            margin-left: auto !important;
        }

        /* Adjust Join Now button on smaller screens */
        @media (max-width: 768px) {
            .btn-join-now {
                margin: 10px 0;
                text-align: right;
            }
        }

        /* Ensure dropdown menu collapses properly */
        .navbar-collapse {
            justify-content: flex-end;
        }

        /* Fix margins and paddings for better spacing */
        .navbar-nav .nav-link {
            padding-left: 15px;
            padding-right: 15px;
        }

        /* Dropdown styles */
        .navbar .dropdown-menu {
            width: 100%;
        }

        /* Make sure the dropdowns expand fully on smaller screens */
        @media (max-width: 768px) {
            .dropdown-menu {
                position: static;
                float: none;
            }
        }
    
    .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand img {
    max-width: 250px; /* Adjust the size as needed */
    height: auto;
}

.navbar-toggler {
    margin-left: auto;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

.btn-blink {
  animation: blink 1.5s infinite;
}


 /* Slider Container */
        .slider {
            position: relative;
            max-width: 100%;
            margin: auto;
            overflow: hidden; /* Ensure overflow is hidden */
        }

        /* Slides Wrapper */
        .slider .slides {
            display: flex;
            transition: transform 1.5s ease; 
        }

        /* Individual Slide */
        .slider .slide {
            min-width: 100%;
            position: relative;
        }

        /* Image Styling */
        .slider img {
            width: 100%;
            height: auto;
            display: block; /* Ensures no extra spacing below images */
            max-height: 750px; /* For large screens */
        }

        /* Dots Container */
        .slider .dots-container {
            text-align: center;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Individual Dot */
        .slider .dot {
            height: 25px;
            width: 25px;
            margin: 0 5px;
            background-color: #fbc0c0;
            border-radius: 50%;
            display: inline-block;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        /* Dot Hover Effect */
        .slider .dot:hover {
            background-color: #FF6600;
        }

        /* Active Dot Style */
        .slider .dot.active {
            background-color: #FF6600;
        }

        /* Arrow Styles */
        .slider .prev, .slider .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        }

        /* Next Arrow */
        .slider .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* Arrow Hover Effect */
        .slider .prev:hover, .slider .next:hover {
            background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .slider img {
                max-height: 400px; /* Adjust height for smaller screens */
            }

            .slider .dot {
                height: 15px;  /* Smaller dots for mobile */
                width: 15px;
            }

            .slider .prev, .slider .next {
                font-size: 14px; /* Smaller arrows for mobile */
                padding: 10px;
            }
        }
        
        
        
         .marqueediv {
        width: 100%;
        height: 45px;
        margin-bottom: 20px;
        background-color: #f1af00;
        display: flex; /* Use flexbox for better alignment */
        align-items: center; /* Center items vertically */
    }
    .marqueediv img {
        width: 20%;
        height: 45px;
        margin: 0;
    }
    .marqueediv marquee {
        width: 78%;
        line-height: 45px;
        background-color: #f1af00;
        color: black;
        font-weight: 500;
        font-size: 16px;
        margin-left: 2%; /* Changed margin-right to margin-left for better spacing */
    }
    
    
    .news-container {
        position: relative;
        width: 100%;
        max-width: 1200px; /* Limit width for better appearance */
        overflow: hidden;
        margin: auto; /* Center the container */
    }

    .news-slider {
        display: flex;
        position: relative;
        white-space: nowrap; /* Prevent items from wrapping */
        animation: scroll 20s linear infinite; /* Continuous scrolling animation */
        animation-play-state: running; /* Default state */
    }

    .news-slider:hover {
        animation-play-state: paused; /* Pause on hover */
    }

    .news-item {
        display: inline-block; /* Items next to each other */
        width: 16%; /* Display 6 items in a row */
        margin: 5px; /* Small margin for spacing */
        padding: 20px;
        background-color: #f4f4f4;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        text-align: center; /* Center-align the text */
    }

    .news-item a {
        text-decoration: none; /* Remove underline */
        color: inherit; /* Use the current color of the parent */
        display: block; /* Make the entire news item clickable */
    }

    .news-item a:hover {
        background-color: #e2e2e2; /* Change background on hover */
    }

    /* Keyframes for continuous scrolling */
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); } /* Scroll to the end of the slider */
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
        .news-item {
            width: 48%; /* 2 items in a row on small screens */
        }
    }

    @media (max-width: 480px) {
        .news-item {
            width: 100%; /* 1 item in a row on extra small screens */
        }
    }
    
     * {
      box-sizing: border-box;
    }

   

    .slider-container-custom {
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .slider-custom {
      display: flex;
      transition: transform 0.5s ease;
    }

    .slider-custom .event-custom {
      flex: 0 0 25%; /* 4 events at a time in desktop mode */
      box-sizing: border-box;
      padding: 10px;
    }

    .event-container-custom {
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 10px;
      position: relative;
    }

    .event-image-container-custom {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 75%; /* 4:3 aspect ratio */
      background-color: #f0f0f0;
    }

    .event-image-custom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .event-date-custom {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 5px;
      border-radius: 5px;
      font-size: 14px;
    }

    .event-name-custom {
      text-align: center;
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }

    .nav-buttons-custom {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }

    .nav-buttons-custom button {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      padding: 10px;
      cursor: pointer;
      font-size: 18px;
    }

    @media (max-width: 768px) {
      .slider-custom .event-custom {
        flex: 0 0 50%; /* 2 events at a time in mobile mode */
      }
    }

    @media (max-width: 480px) {
      .slider-custom .event-custom {
        flex: 0 0 100%; /* 1 event at a time in smaller mobile screens */
      }
    }
    
    
     #features {
    background-color: white; /* Change this to your desired background color */
    padding: 20px;
  }

  #features h1 {
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
    font-size: 2em; /* Increased font size for visibility */
    color: #333; /* Change text color if needed */
  }

  .row.count {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the content */
  }

  .con {
    width: 18%; /* Adjusted width for five items per row */
    text-align: center;
    margin: 15px; /* Adjusted margin for better spacing */
    transition: transform 0.3s; /* Smooth transition effect */
  }

  .con:hover {
    transform: scale(1.05); /* Scale up on hover for effect */
  }

  .con img {
    border-radius: 0%; /* Round image style */
    width: 100px; /* Set a fixed width for images */
    height: 100px; /* Set a fixed height for images */
    object-fit: cover; /* Maintain aspect ratio */
  }

  @media (max-width: 768px) {
    .con {
      width: 40%; /* Adjust width for smaller screens */
      float: none;
    }
  }
  
  .footer {
    background: url('images/logo.png') no-repeat center center/cover; /* Add your image URL here */
    color: #ecf0f1;
    padding: 40px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Black overlay with 70% opacity */
    z-index: 0;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: webkit-fill-available;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1; /* Position above the overlay */
}

.footer-section {
    margin: 10px 0;
}

.footer-heading {
    color: white; /* Set font color to white */
    font-size: 18px; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    margin-bottom: 10px; /* Space below the heading */
}

.quick-links ul {
    list-style: none;
    padding: 0;
}

.quick-links li {
    margin: 10px 0;
}

.quick-links a {
    color: #ecf0f1;
    text-decoration: none;
}

.address-contact address {
    font-style: normal;
}

.fb-feed .fb-widget {
    background-color: #34495e;
    padding: 10px;
    border-radius: 8px;
    height: 150px;
}

.google-map iframe {
    width: 100%;
    height: 250px; /* Match height of Facebook feed */
    border: none;
    border-radius: 8px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(26, 37, 47, 0.9); /* Slightly transparent for background visibility */
    padding: 15px 20px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap; /* Allows it to wrap onto multiple lines for smaller screens */
}

.footer-bottom p {
    margin: 0;
    padding-right: 20px; /* Adds space between text and other elements */
}

.footer-bottom .social-icons {
    margin-right: 20px; /* Space between social icons and payment icons */
}

.footer-bottom .social-icons img,
.footer-bottom .payment-icons img {
    width: 30px;
    margin: 0 10px; /* Increase the spacing between the icons */
}

.footer-bottom .social-icons img:hover,
.footer-bottom .payment-icons img:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
}

.footer-bottom .rights {
    width: 100%; /* Make sure the rights text spans the whole width */
    text-align: center;
    margin-top: 10px; /* Add some space above the text */
    font-size: 14px;
    color: #ccc; /* Subtle color for rights text */
}


/* Responsive Styles */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column; /* Stack elements vertically */
        gap: 10px;
    }

    .footer-bottom .social-icons,
    .footer-bottom .payment-icons {
        margin-top: 10px;
    }
}