body {
    font-family: system-ui;
}

.img-fluid {
    transition: transform 0.3s ease;
    /* Add a smooth transition */
}

.img-fluid:hover {
    transform: scale(1.1);
    /* Increase the image size on hover */
}

/* Change title color on hover */
.text-dark {
    transition: color 0.3s ease;
    /* Add a smooth color transition */
}

/* Adjust alignment for the search button */
@media (max-width: 575.98px) {
    .input-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .input-group-append {
        margin-left: 0;
        /* Set margin-left to zero */
    }

    .btn {
        margin-top: 0.25rem;
        margin-left: 10px;
        /* Adjust this value as needed */
    }
}

.text-dark:hover {
    color: #E04F4F !important;
    /* Change to your preferred hover color */
}

/* Change button color and text */

.btn-outline {
    color: black;
    /* Set text color to black */
    border-color: #16324a;
    /* Match the navbar color */
}

.btn-outline:hover {
    color: white;
    /* Change text color on hover */
    background-color: #16324a;
    /* Match the navbar color on hover */
}

/* Change dropdown background and text color */
.dropdown-menu {
    background-color: #16324a;
    /* Same color as the navbar */
    color: white;
    /* Text color */
}

.dropdown-menu a {
    color: white;
    /* Anchor text color */
}

.dropdown-menu a:hover {
    background-color: white;
    /* Change to your preferred hover color */
}

.navbar {
    background-color: #16324a;
    padding: 10px;
    
    /* Change to your preferred color */
}

footer {
    padding: 20px 0;
    background-color: #16324a
}

footer .container {
    padding-bottom: 20px;
    /* Adjust this value as needed */
    padding-top: 20px;
    /* Adjust this value as needed */
}
.navbar-toggler-icon {
    background-color: #ffffff; /* Change to white */
    border-radius: 5px;
}
.price-container {
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    height: 50px;
    width: auto;
    line-height: 1.1; /* Adjust this value as needed */
}

.price-containerP {
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    height: 55px;
    width: auto;
    line-height: 1.1; /* Adjust this value as needed */
    
    margin-top: 10px; /* Adds space between the image and text */
    padding: 10px 0;  /* Adds vertical padding to center the text better */
}

.original-price {
    
    color: red;
    margin-right: 10px;
    text-decoration: line-through;
    font-size: 15px;
    
}
.amount {
    
    color: black;
    margin-right: 10px;
    font-weight: bold;
    
    
}
.no-offer {
    
    color: black;
    margin-right: 10px;
    font-weight: bold;
    
    
}

.discount-percentage {
    color: black;
    font-size: 15px;
    font-weight: bold;
}



  /* General submenu styling */
.dropdown-menu .dropdown-menu {
    left: 100%;
    top: 0;
    margin-left: 0.1rem;
}

/* Submenu hover behavior */
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/* Media query for wide screens */
@media (min-width: 992px) {
    /* Position submenu to the left on wide screens */
    .dropdown-menu .dropdown-menu {
        left: auto;
        right: 100%;
        margin-right: 0.1rem;
    }

    /* Ensure that the main dropdown doesn't overlap with the submenu */
    .dropdown-submenu:hover>.dropdown-menu {
        left: auto;
        right: 100%;
    }
}