body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}
/*.carousel-item img {*/
    /*height: 500px;*/
    /* fixed height */
    /*object-fit: cover;*/
    /* keeps aspect ratio, crops edges */
/*}*/

.carousel-item img {
    width: 100%;
    height: 40vh;          /* 70% of viewport height */
    object-fit: cover;     /* keeps aspect ratio, crops edges */
}

.category-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #f0f0f0;
    transition: transform 0.3s ease;
}

.category-img:hover {
    transform: scale(1.05);
}

.category-title {
    margin-top: 10px;
    font-weight: 500;
    font-size: 1rem;
}

.product-img {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-img:hover {
    transform: scale(1.05);
}


@media (max-width: 576px) {
    .carousel-item img {
        height: 40vh;
    }
}

@media (min-width: 768px) {
    .carousel-item img {
        height: 50vh;
    }

    /* Main dropdown hover */
    .dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0;
        /* Adjusts position slightly */
    }

    /* Submenu positioning and hover */
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        display: none;
        /* Hide submenu by default */
    }

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
        /* Show submenu on hover */
    }

    /* Add a caret to submenus */
    .dropdown-submenu>a:after {
        content: '›';
        font-size: 1.2rem;
        float: right;
        font-weight: bold;
        margin-left: 10px;
    }
}

@media (min-width: 992px) {
    .carousel-item img {
        height: 70vh;
    }
}


.dropdown-menu .dropdown-menu {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.dropdown-menu .show {
  display: block;
}