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

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: black;
        font-family: 'Helvetica-Bold', 'Helvetica Bold', 'Helvetica', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 14px;
        color: #FFFFFF;
    }

    html {
        height: 100%;
    }

    #menu-menu-principale {
        gap: 2rem;
        z-index: 1; /* Adjust z-index if needed */
    }

    header {
        z-index: 3; /* Ensure the header is above other content */
    }

    #menu-menu-principale a {
        font-size: 0.875rem;
    }

    #hero {
        /* Your existing styles for #hero */
        position: relative;
        overflow: hidden; /* Ensures nothing spills outside the section */
    }

    #hero {
        /*z-index: 0;*/
        /*position: relative;*/
        /*width: 100%;*/
        height: 70vh; /* This should be the height of your slides */
    }

    /*#hero > * {*/
    /*    position: relative;*/
    /*    height: 100%;*/
    /*    z-index: 0;*/
    /*}*/
    .hero-slide {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        width: 85%;
        height: 99%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        transition: opacity 1s ease-in-out; /* Transition effect for fading */
        opacity: 0; /* Slides are initially transparent */
        display: block; /* Keep display block so they can fade in */
        /*z-index: 1; !* Start with a lower z-index *!*/
    }

    .shadow-hero {
        position: absolute;
        top: 0;
        height: 70vh;
        width: 100%;
        z-index: 2;
    }

    .shadow-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse 65% 78% at center, transparent 10%, black 65%);
        z-index: 2; /* Ensure it's above the background but below the content */
        pointer-events: none; /* Allows interaction with the section content */
    }

    .dmood {
        font-family: Montserrat !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    .wpcf7 form input, .wpcf7 form textarea, .wpcf7 form input :not(.wpcf7-submit) {
        color: white;
        background: transparent;
        border: solid red 0.125rem;
        border-top: none;
    }

    .wpcf7 form input:focus, .wpcf7 form textarea:focus {
        outline: none;
    }

    .wpcf7-submit {
        color: black !important;
        background: unset;
        border: unset !important;
    }

    .wpcf7 form p {
        display: flex;
        justify-content: center;
    }

    #footer .menu-item a[aria-current=page] {
        color: white;
    }

    .wpcf7-spinner {
        display: none;
    }

    /* The active slide will fade in */
    .hero-slide.active-slide {
        opacity: 1;
    }

    .ingredients {
        font-size: 1.25rem;
        font-weight: 400;
    }

    .line {
        width: 6.55rem; /* Adjust as needed */
        height: 0.188rem;
        margin: 0; /* Centers the line with a bit of space from the paragraph above */
        background-color: #484848;

    }

    .line.active {
        background-color: #ff0000;
    }

    .gap3_5 {
        gap: 3.5rem;
    }

    .pos-element-hero {
        width: 100vw;
        position: absolute;
        bottom: 2.5rem;
        z-index: 1;
        left: 0;
        right: 0;
        transition: opacity 1s ease-in-out; /* Effetto di transizione per lo sfumato */
        opacity: 0;
    }

    .pos-element-hero.active {
        opacity: 1;
        z-index: 3;
    }

    .pos-element-hero > * {
        text-align: left;
        /* Transition effect for fading */

    }

    .position {
        width: 25%;
        position: absolute;
        bottom: 2.5rem;
        z-index: 2;
        left: 0;
    }

    .evidence {
        width: 7.125rem;
        background-color: #d20101;
        border-radius: 4px;
        text-align: center;
        padding: 0.5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details-button {
        cursor: pointer;
        display: flex;
        height: 3.063rem;
        width: 9.813rem;
        justify-content: center;
        align-content: center;
        align-items: center;
        font-weight: 700;
        background-color: #FFFFFF;
    }

    .details-button-mini {
        height: 2rem;
        width: 8.1rem;
    }

    .title-drink {
        padding-top: 0.2rem;
        font-size: 2.5rem;
        font-weight: 700;
    }

    #footer {
        padding-top: 4rem;
        background-color: transparent;
    }

    .logo-footer img {
        width: 7rem;
    }

    .copyrigth {
        margin-top: 1rem;
    }

    .first_footer_area ul {
        list-style: none;
        line-height: 1.5rem;
        text-align: end;
    }

    .first_footer_area ul a {
        color: #FFFFFF;
    }

    .card {
        position: relative;
        background-position: center;
        background-size: cover;
        width: 18rem; /* or the width you prefer */
        height: 22.813rem;
        border-radius: 8px;
        overflow: hidden;
        border: none;
        transition: transform 0.3s ease-in-out;
    }

    /*.card:hover {*/
    /*    transform: translateY(-10px);*/
    /*}*/

    .card-image {
        width: 100%;
        display: block;
        height: auto;
    }

    .card-content {
        z-index: 2;
        padding: 1.2rem;
        position: absolute;
        bottom: 0.5rem;
    }

    .card-title {
        margin: 0;
        color: #FFFFFF;
        font-size: 1.15rem;
    }

    .card-description {
        color: #FFFFFF;
        font-size: 0.9rem;
        font-weight: 400;
        letter-spacing: -0.03rem;
    }

    .card-button {
        cursor: pointer;
        display: inline-block;
        padding: 10px 15px;
        background-color: #FFFFFF; /* your primary blue color */
        color: #0c0c0c;
        /*border-radius: 5px;*/
        text-decoration: none;
        text-align: center;
        margin-top: 8px;
    }

    /*.card-button:hover {*/
    /*    background-color: darken(#00a0f7, 10%); !* slightly darker on hover *!*/
    /*}*/
    .collection-title {
        font-weight: 700;
        font-size: 1.375rem;
    }

    #hero {
        margin-bottom: 2rem;
    }

    section {
        padding-bottom: 2rem !important;
    }

    .collection, .collection2, .collection3, .collection-sponsor {
        margin-top: 4.7rem;
    }

    .first-collection {
        margin-top: 0 !important;
    }

    .card2 {
        position: relative;
        background-position: center;
        background-size: cover;
        width: 11rem;
        height: 15rem;
        border-radius: 0.5rem;
        overflow: hidden;
        border: none;
        transition: transform 0.3s ease-in-out;
        /*margin: 1rem 0;*/
    }

    .card2-content {
        z-index: 2;
        padding: 1rem;
        position: absolute;
        bottom: 0.6rem;
    }

    .card2-title {
        margin: 0;
        color: #FFFFFF;
        font-size: 1.25rem;
        letter-spacing: -0.05rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .card2-description {
        color: #FFFFFF;
        font-size: 1rem;
    }

    .card2-button {
        display: inline-block;
        padding: 10px 15px;
        background-color: #FFFFFF; /* your primary blue color */
        color: #0c0c0c;
        /*border-radius: 5px;*/
        text-decoration: none;
        margin-top: 8px;
        text-align: center;
    }

    .number-card {
        position: absolute;
        top: -5rem;
        /*left: -1.5rem;*/
        color: #353535;
        font-size: 17.5rem;
        font-family: 'HelveticaNeue-Bold', 'Helvetica Neue Bold', 'Helvetica Neue', sans-serif;
    }

    .number-container {
        overflow: hidden;
        position: relative;
        height: 15rem;
        width: 6.3rem;
    }

    .card3 {
        position: relative;
        background-position: center;
        background-size: cover;
        width: 48.688rem; /* or the width you prefer */
        height: 31.438rem;
        border-radius: 8px;
        overflow: hidden;
        border: none;
        transition: transform 0.3s ease-in-out;
    }

    .card3-content {
        z-index: 3;
        display: flex;
        padding: 1rem;
        position: absolute;
        bottom: 0;
        width: 100%;
        justify-content: space-between;
    }

    .shadow-card3 {
        content: '';
        height: 10rem;
        z-index: 1;
        width: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        background-image: linear-gradient(to bottom, transparent 0%, #000000cc 28%);
    }

    .shadow-card2 {
        content: '';
        height: 5rem;
        z-index: 1;
        width: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        background-image: linear-gradient(to bottom, transparent 0%, #000000cc 28%);
    }

    .card3-title {
        margin: 0;
        color: #FFFFFF;
        font-size: 1.6rem;
        font-weight: 700;
    }

    .card3-description {
        color: #FFFFFF;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .card3-button {
        display: inline-block;
        padding: 10px 15px;
        background-color: #FFFFFF; /* your primary blue color */
        color: #0c0c0c;
        /*border-radius: 5px;*/
        text-decoration: none;
        margin-top: 8px;
        width: 9.5rem;
        height: 2.75rem;
        text-align: center;
    }

    .collection .swiper-slide {
        width: 18.75rem !important;
    }

    .collection2 .swiper-slide {
        width: 18.55rem !important;
    }

    .collection3 .swiper-slide {
        width: 49.5rem !important;
    }

    .collection-sponsor .swiper-slide {
        width: 7rem !important;
    }

    .modal .swiper-slide {
        width: 22.5rem !important;
    }


    .modal {
        /*overflow: hidden;*/
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4); /* Overlay semi-trasparente */
        transition: opacity 1s ease-in-out; /* Transizione per l'opacità */
    }

    /* Stili per il contenuto del modale */
    .modal-content {
        background-color: #fefefe;
        margin: 6% auto;
        width: 65%;
        overflow: auto;
    }

    /* Nasconde la scrollbar su WebKit browsers */
    .modal::-webkit-scrollbar {
        display: none;
    }

    /* Per Internet Explorer 11 */
    .modal-content {
        -ms-overflow-style: none;
    }

    .shadow-modal {
        width: 100%;
        height: 100%;
        background:linear-gradient(to bottom, black -25%, transparent 15%), linear-gradient(to top, black 0%, transparent 40%);
    }

    /* Per Firefox */
    .modal-content {
        scrollbar-width: none;
    }

    /* Animazione slideUp quando si apre il modale */
    .modal-content.slideUp {
        animation: slideUp 1s ease-in-out;
    }

    /* Animazione slideDown quando si chiude il modale */
    .modal-content.slideDown {
        animation: slideDown 1s ease-in-out; /* Stessa durata di slideUp */
        animation-fill-mode: forwards;
    }

    /* Definizione dell'animazione slideUp */
    @keyframes slideUp {
        from {
            transform: translateY(99vh);
        }
        to {
            transform: translateY(0);
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(99vh);
        }
    }

    .modal-closing {
        animation-name: slideDown;
        animation-duration: 1s; /* Modifica la durata dell'animazione se necessario */
        animation-fill-mode: forwards; /* Mantiene lo stato finale dell'animazione */
    }


    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 0;
        height: 30.75rem;
        border: none;
        background-size: 65rem;
        background-position: top center;
    }

    .modal-header-element {
        display: flex;
        width: 100%;
        position: absolute;
        bottom: 1rem;
        padding: 0 1.25rem;
        justify-content: space-between;
        align-items: center;
    }

    #modalBody {
        background-color: #2D2D2D;
        padding: 2rem 1.25rem;
    }

    .modal-description {
        font-size: 1rem;
        margin-bottom: 2rem;
        font-weight: 400;
    }

    .modal-swiper .swiper-slide {
        height: 15rem;
        background-position: center;
        background-size: cover;
    }

    .modal-video {
        margin: 2rem 0;
        font-size: 1.125rem;
    }

    .video-description {
        font-size: 1rem;
        font-weight: 400;
        padding: 1rem 0;
    }

    .video-poster {
        height: 12.375rem;
        background-size: cover;
    }

    .video-duration {
        font-size: 1.125rem;
    }

    .modal-corelation {
        font-size: 1.125rem;
    }

    .modal-corelation .swiper-slide {
        width: 18rem !important;
    }

    .image-drink-text {
        position: absolute;
        padding: 0 2rem;
        width: 100%;
        bottom: 1rem;
        display: flex;
        z-index: 4;
        justify-content: center;
    }

    .image-ingredients {
        width: 50%;
    }

    .image-drink-shadow {
        content: '';
        height: 7rem;
        z-index: 1;
        width: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        background-image: linear-gradient(to bottom, transparent 0%, #000000cc 59%);
    }

    .price {
        font-size: 1.5rem;
    }

    .container-ingredients-2 {
        margin: 0 2rem;
        width: 100%;
    }

    .play-svg {
        position: absolute;
        width: 6rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    .iframe {
        height: calc(100vh - 10rem);
    }

    .ingredients-list {
        list-style: none;
        padding: 0;
        font-size: 1rem;
    }

    .search {
        /*right: 15px;*/
        /*top: 30px;*/
        position: relative;
        /*display: inline-block;*/
    }

    .search input {
        width: 0px;
        height: 2.125rem;
        background-color: #000;
        box-shadow: none;
        color: #fff;
        border: 0.063rem solid transparent;
        outline: none;
        padding-left: 2.188rem;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .search input.toggle, .search2 input {
        width: 15rem;
        border-color: #fff;
    }

    .search2 {
        display: flex;
        justify-content: center;
    }

    .search2 input {
        padding-left: 1.5rem;
        background-color: white;
    }

    .search img {
        width: 1.125rem;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none; /* Hide the default clear button */
        appearance: none;
    }

    /* Style for your custom clear button */
    .custom-clear {
        position: absolute;
        cursor: pointer;
        color: #FFFFFF;
        right: 0.4rem;
        top: 0.4rem;
    }

    .first_footer_area nav {
        display: flex;
        align-items: center;
    }

    .margin-top-content {
        margin-top: 5.5rem;
    }

    .wpcf7-submit {
        display: flex;
        height: 3.063rem;
        width: 9.813rem;
        justify-content: center;
        align-content: center;
        align-items: center;
        font-weight: 700;
        background-color: #FFFFFF !important;
    }

    .new-content {
        height: 8%;
        background: red;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
    }

    #mobile-menu {
        background-color: #000000d9;
    }

    .ghost {
        display: flex;
        align-items: center;
        height: 100vh;
        justify-content: center;
        background-color: black;
    }

    .ghost img {
        width: 3rem;
    }

    .admin-bar .mobile-nav {
        margin-top: 4rem !important;

    }

    #mobile-menu ul {
        list-style: none;
        font-size: 1.5rem;
    }

    #mobile-menu ul li a {
        color: white;

    }

    .search-mobile {
        display: none;
    }

    .search-mobile input.toggle {
        width: 94vw;
        height: 3rem;
    }
    .ingredients-list li{
        font-weight: 500;
    }
    .close-modal {
        padding: 0 1rem;
        font-size: 2rem;
        color: white;
        position: fixed;
        top: 0rem;
        right: 1rem;
        z-index: 5;

    }


    .search-mobile .custom-clear {
        position: absolute;
        cursor: pointer;
        color: #FFFFFF;
        right: 0.4rem;
        top: 50%;
        transform: translate(0, -50%);
    }

    #search-div {
        position: absolute;
        top: 0;
        left: 100%;
        height: 100vh;
        width: 100vw;
        z-index: 5;
        background: black;
        transition: 1s ease-in-out;
    }

    .arrow-back {
        width: 2rem;
        margin: 1rem;
    }

    #events, #search-results.open, .page-content {
        margin-top: 5.375rem;
    }

    #events #event-container, #search-results .collection, .page-content .page-header {
        padding: 4.7rem 0;
    }

    .bg-events {
        background-size: cover;
        background-repeat: no-repeat;
        height: 25rem;
        border-radius: 0.5rem;
    }

    .event-title {
        margin: 0;
        color: #FFFFFF;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .pos-element {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
    }

    .date-text {
        font-weight: 400;
        font-size: 1rem;
    }

    #loader img {
        height: 2.5rem;
    }

    .container-ingredients {
        max-width: 25rem;
        word-wrap: normal;
    }

    .sponsor {
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 8rem;
    }

    @media (min-width: 1400px) {
        .shadow-hero::before {
            /*margin: 0 14rem;*/
        }
    }

    @media (max-width: 1199px) {
        #hero {
            height: 62vh;
        }

    }

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


.overlay{
    background-color: rgba(242, 242, 246, 0.9);
    
}

.logo img{
    height: 4.375rem;
}