.stripe-shadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.mat-shadow {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #80b1f7;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 .25rem rgba(1, 99, 238, .35);
}
.navbar {
    background-color: #18a0d4;
}
.nav-link,
.nav-brand,
.nav-text {
    color: white;
}
.nav-link.active {
    color: orange !important;
}
.nav-link:hover, .nav-link:focus {
    color: orange !important;
  }
  .dropdown-item:hover, .dropdown-item:focus {
    color: #066ac9;
    background-color: rgba(6, 106, 201,0.1);
}
.my-brand-image {
    object-position: center;
    object-fit: cover;
    height: 50% !important;
    width: 100%;
}
.img-fluid {
    max-width: 100% !important;
    height: auto !important;
  }
/* .nav-link {
    color: white;
}
.dropdown-menu {
    background-color: #047cd2 !important;
    color: white;
} */
.navbar-sticky-on .navbar-brand .navbar-brand-item {
    height: 50px !important;
}

.smooth-shadow-md {
    box-shadow: 0 1px 2px rgba(21, 30, 40, .07), 0 2px 4px rgba(21, 30, 40, .07), 0 4px 8px rgba(21, 30, 40, .07), 0 8px 16px rgba(21, 30, 40, .07), 0 16px 32px rgba(21, 30, 40, .07), 0 32px 64px rgba(21, 30, 40, .07) !important;
}

body {
    background-color: #f1f5f9;
}

.page-link {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.page-link a {
    margin: 0 5px;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #333;
    border-radius: 4px;
}

.page-link a.active {
    background-color: #007BFF;
    color: white;
    border-color: #007BFF;
}

.page-link a:hover {
    background-color: #f1f1f1;
}

.media-popup {
    cursor: pointer;
    margin-bottom: 25px;
}

#results {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    border: 1px solid #ccc;
}
.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

#results li {
    padding: 5px;
    border-bottom: 1px solid #eee;
}

#results li:last-child {
    border-bottom: none;
}

#results li a {
    text-decoration: none; /* removes underline for link */
    color: black; /* for link in text */
    display: block; /* This ensures the entire li area is clickable */
}
.card-hover:hover {
    /*-webkit-transform: scale(1.02);*/
    /*-ms-transform: scale(1.02);*/
    /*transform: scale(1.02);*/
    transform: scale(1.05); /* Scales the card up by 5% on hover */

    transition: transform 0.3s ease; /* Smooth transition effect */
}