/*
<style> /* notice that this entire line is a comment in CSS */

@media (max-width:992px){
    #hero {

        height: 47vh;
    }
    .card3 {
        width: 45rem;
    }
    .modal-content {
        width: 90%;
    }
    .search-mobile {
        display: flex;
    }
    .search-mobile input.toggle{
        background-color: black;
    }
    .search-mobile input
    {
        background-color: transparent;
    }
    .container-ingredients-2{
        margin: 0 0rem;
        text-align: center;
        width: 100%;
    }
    .search img {
        width: 1.125rem;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
    .search input {
        padding-left: 3rem;
    }
    .search-mobile .custom-clear {
        display:block ;
        position: absolute;
        cursor: pointer;
        color: #FFFFFF;
        right: 1rem;
        top: 50%;
        transform: translate(0,-50%);
    }
}
@media (max-width: 768px) {
    #content{
        padding: 0;
    }
    #mobile-menu ul li {
        margin-top: 0.5rem;

    }
    .image-ingredients{
        width: 100%;
        margin-bottom: 2rem ;
    }
    .hero-slide{
        background-size: cover;
    }
    .card3 {
        width: 34rem;
    }
    .evidence {
        width: 5.7rem;
    }
    .title-drink {
        font-size: 2rem;
        font-weight: 700;
    }
    .details-button {
        height: 2.45rem;
        width: 7.85rem;

    }
    .ingredients{
        font-size: 1rem;
    }

}