* {
    font-family: 'Roboto', sans-serif;
}

.sax {
    display: flex;
    align-items: center;
}

.sax hr {
    flex: 1;
    border-top: 1px solid #ccc;
}

.sax img {
    margin: 0 10px;
    max-width: 40px; /* You can adjust the width of the icon as needed */
}

#aboutSection {
    background-image: 
        linear-gradient(90deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 1) 85%),
        radial-gradient(ellipse at top left, rgba(0, 123, 255, 0.2), transparent 50%),
        radial-gradient(ellipse at top right, rgba(255, 0, 0, 0.5), transparent 50%),
        radial-gradient(ellipse at center right, rgba(0, 139, 139, 0.5), transparent 50%),
        radial-gradient(ellipse at center left, rgba(255, 192, 203, 0.5), transparent 50%);
}

.navbar-nav .nav-link {
    position: relative;
    transition: color 0.2s;
}

.navbar-nav .nav-link:hover {
    color: crimson; /* Change to your desired color (e.g., crimson) */
}

/* Optional: Add an underline effect on hover */
.navbar-nav .nav-link:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: crimson; /* Change to your desired color (e.g., crimson) */
    transform: scaleX(0);
    transition: transform 0.2s;
}

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

/* Apply the desired styles when the card is hovered */
.custom-card.shadow-on-hover:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.custom-card.border-0-on-hover:hover {
    border: 0;
}

footer {
    /* background-image: 
        linear-gradient(90deg, rgb(255, 255, 255), rgba(136, 197, 197, 0.075) 50%);
    border-top-left-radius: 50% 100px !important; */

    /* background-image: linear-gradient(#C7A3A5, white); */
}

#custom-navbar-top {
    max-height: 72px;
}

@media (min-width: 992px) {
    nav {
        max-height: 72px;
    }
}



@media (min-width: 992px) {
    .navbar-nav {
        width: 50% !important;
    }
    .navbar-brand {
        top: 20px;
    }
}

@media (min-width: 1200px) {
    .navbar-nav {
        width: 40% !important;
    }
}

@media (min-width: 1400px) {
    .navbar-nav {
        width: 30% !important;
    }
}

.navbar-toggler {
    border: none !important;
}

.navbar-toggler:focus {
    border: none !important;
    box-shadow: none !important;
}

@media (max-width: 992px) {
    #priceList {
        font-size: 0.8rem;
    }
}

.carousel-item img {
    object-fit: cover;
    height: 60vh;
}