@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,600;1,14..32,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap');

*,*:focus,*:hover{
    outline:none;
}

HTML,BODY{
    margin: 0;padding: 0;font-size: 18px !important;
}

*:focus {
    outline: none;
}


.video-container {
    border: 0 !important;
    outline: none !important;
    background-color: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    clip-path: none;
    overflow: hidden;
    background-color: #ffffff;
}

#video-canvas{
    width: 100%;
    height: auto;

}

video {
    width: 100%;
    height: auto;
    border: none !important;
    border-style: none;
    border-color: transparent;
    outline: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    clip-path: none;
    padding: 0 !important;
    margin: 0 !important;
    mask-image: none;
    -webkit-mask-image: none;
    background-color: #ffffff !important;
    border: 2px solid #ffffff;
}



H1{
    font-size: 2.2em;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    color:#1E3C50 !important;
}

H3{
    font-size: 1.6em;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color:#1E3C50 !important;
}

H4{
    font-size: 1.2em !important;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:#1E3C50 !important;
}

H6{
    font-size: 0.8em;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color:#1E3C50 !important;
    text-transform: uppercase;
}

H6.green {
    color: #556B2F !important;
}

P{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 0.8em !important;
}

P.small{
    font-size: 0.7em !important;
}

.navbar_submenu_link {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 0.7em !important;
    color:#1E3C50 !important;
    text-decoration: none !important;
}

.oswald-font {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}


.inter-font {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.inter-font-semibold {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.top_bar_dropdown{
    font-size: 0.8em !important;
    color:#1E3C50 !important;
    text-decoration: none !important;
    border:0px !important;
}

.dropdown-menu{
    border-radius: 0px !important;
}

.top_bar_link {
    font-size: 0.8em !important;
    color:#1E3C50 !important;
    text-decoration: none !important;
}


.top_bar_link:hover{
    color:#1E3C50 !important;
    text-decoration: underline !important;
}

.top_bar_link:visited{
    color:#1E3C50 !important;
}

.bg-fulfilledone{
    background-color: #1E3C50 !important;
}



.dropdown-menu a:active {
    background-color: #1E3C50 !important;
    color:#FFFFFF;
}

#lang_dropdown > .dropdown-menu{
    background: #FFD428 !important;
    font-size: 0.8em !important;
}

#topbar{
    height:33px;
    background: #FFD428;
}

.yellow{
    background: #FFD428;
}

.bluenavy{
    color:#1E3C50 !important;
}

.social_icon{
    width: 14px !important;
    height: 14px !important;
}

.social_icon_footer{
    width: 24px !important;
    height: 24px !important;
}

.logo{
    max-width: 200px;
}

.navbar_link {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 0.8em !important;
    color:#FFFFFF !important;
    text-decoration: none !important;
}


.navbar_link:hover{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color:#FFFFFF !important;
    text-decoration: underline !important;
}

.navbar_link:visited{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color:#FFFFFF !important;
}

.bottom_shadow {
    -webkit-box-shadow: 0 4px 6px -6px #222;
    -moz-box-shadow: 0 4px 6px -6px #222;
    box-shadow: 0 4px 6px -6px #222;
}

.btn-yellow-rounded {
    font-size: 0.8em;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    background-color: #FFD428;
    color: #000; /* testo scuro per contrasto */
    border: none;
    border-radius: 2rem; /* angoli molto arrotondati */
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-yellow-rounded:hover {
    background-color: #e6bd21; /* leggermente più scuro al passaggio mouse */
    color: #000;
}


.btn-blue-rounded {
    font-size: 0.8em;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    background-color: #1E3C50;
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-blue-rounded:hover {
    background-color: #162d3f; /* leggermente più scuro al passaggio */
    color: #fff;
}


.scaffale-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.scaffale-img {
    width: 100%;
    display: block;
}

.ripiano {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ripiano-1 {
    top: 0%; /* Regola per allineare con il primo ripiano */
}

.ripiano-orizzontale-1 {
    top: -3%; /* Regola per allineare con il primo ripiano */
}

.ripiano-2 {
    top: 48%; /* Regola per il secondo ripiano */
}

.tablet-warehousing{
    background-image: url('/img/tablet.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 140vh;
}


.pacco_orizzontale {
    width: 400px;
    background-image: url('/img/pacco_orizzontale.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.pacco {
    width: 300px;
    background-image: url('/img/pacco.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.pacco-content {
    width: 100%;
    height: 90%;
    padding:2px;
}


.pacco-img {
    max-height: 80px;
    object-fit: contain;
}


.icona_scaffale{
    max-width:30%;
}



.carousel .card {
    height: 150px;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border:0px
}

.carousel .card-img-top {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.copy{
    color: #FFFFFF !important;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 0.7em !important;
}

.footer_links > LI > A {
    color: #FFFFFF !important;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    font-size: 0.9em !important;
    text-decoration: none !important;
}

.footer_links > LI > A:hover{
    text-decoration: underline !important;
}

.footer_links > LI > A:visited{
    color: #FFFFFF !important;
    text-decoration: none !important;
}

P.cartone{
    color:#587081 !important;
    font-size: 0.7em !important;
    font-weight: bold;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#tablet_area{
    margin-top: -220px;
}


@media (max-width: 575.98px) {

    #tablet_area{
        margin-top: 0px !important;
    }

    #scaffale_desktop{
        display: none;
    }

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }


    P{
        font-size: 14px;
        text-align: center;
    }

    .pacco_mobile{
        background: url('/img/pacco.png');
        background-size: cover;       /* Copre tutta la div */
        background-position: center;  /* Centra l'immagine */
        background-repeat: no-repeat; /* Non ripete l'immagine */
        min-height: 300px;
    }
}