.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

/* Ensure the cards are the same height */
.carousel-item .card {
    margin: 0 auto;             /* Center the card */
    height: 500px;              /* Set a fixed height for the cards */
}

.carousel-item .card-img-top {
    width: 100%;                /* Ensure the image takes up the full width of the card */
    height: auto;               /* Automatically adjust the height to maintain aspect ratio */
    max-height: 300px;          /* Set a max height for the image */
    object-fit: cover;          /* Ensure the image covers the space without distortion */
}
  
.carousel-item .card-body {
    padding: 15px;              /* Ensure consistent padding inside the card */
    display: flex;              /* Use flexbox to control layout */
    flex-direction: column;     /* Stack content vertically */
    justify-content: space-between; /* Space out the content (push button to bottom) */
    height: 200px;              /* Set the height for the bottom part of the card */
}

/* Move the button to the bottom */
.carousel-item .card-body .btn {
    margin-top: auto;           /* This pushes the button to the bottom of the card body */
}

/* Carousel Navigation Arrows (increased size) */
.card-controls .carousel-control-prev,
.card-controls .carousel-control-next {
    position: absolute !important;  /* Force the arrows to be positioned absolutely */
    top: 25% !important;            /* Set them to be 25% from the top of the image */
    transform: translateY(-50%) !important;  /* Center them vertically */
    z-index: 1 !important;          /* Ensure they stay on top of the carousel */
    width: 10%;                     /* Increase width of the arrows */
    height: auto;                   /* Keep the aspect ratio of the arrows */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Container for the two columns */
.container {
    display: flex;
    flex-wrap: wrap;
}

/* Solid border */
hr.solid {
    border-top: 3px solid #bbb;
  }

/* Optional: Adjust carousel item size for smaller screens */
@media (max-width: 767px) {
    .card-controls .carousel-control-prev,
    .card-controls .carousel-control-next {
        width: 12%;                 /* Increase width of arrows on smaller screens */
        top: 25% !important;        /* Keep them 25% down from the top of the image */
        transform: translateY(-50%) !important; /* Keep arrows centered */
    }
    .container {
        flex-direction: column;
    }

    .play{
        display: none;
    }
}

@media (max-width: 991px) {
    .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        background-color: white;
        z-index: 9999;
        max-width: 100vw; /* Prevent the dropdown from extending beyond the viewport */
        overflow-x: auto; /* Allow horizontal scrolling if necessary */
        word-wrap: break-word; /* Ensure words wrap properly */
    }

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

    /* Optional: If you want to make the dropdown scrollable when content is too long */
    .navbar-nav .dropdown-menu {
        max-height: 300px; /* Set a max height for the dropdown */
        overflow-y: auto; /* Allow vertical scrolling if the dropdown is too long */
    }

    .navbar-nav .dropdown-menu a {
        white-space: normal; /* Allow the text to wrap within the menu items */
    }
}