:root {
    --panna: #f6e8b7;
    --white: #ffffffff;
    --black: #212121;
    --black-trasparent: #00000084;
    --violaetto: #4d434c;
    --bluastro: #4b6676;
    --giallo: yellow;
    --ocra: #e4b465;
    --verde: #5a9090;
    --ocra-darker: #eba93e;
    --white-trasparent: #e5dcc4b3;
}

body {
    margin: 0;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    background-color: var(--panna);
    font-family: "Urbanist", sans-serif;
}

.navbar {
    background-color: var(--ocra);
}

.navbar-orari{
    padding-left:0;
    list-style: none;
}
.animated {
    animation-duration: 2s;
}
.back-black-trasperent{
    background-color: var(--black-trasparent);
}
.back-giallo {

    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    background-color: var(--panna);
}

.back-panna {
    background-color: var(--panna);
}

.title {
    font-family: "Alfa Slab One", serif;
    font-weight: 500;
    font-size: calc(78px + 6 * ((2560px - 320px) / 680));
}

.violetto {
    color: var(--violaetto);
}

.verdastro {
    color: var(--bluastro);
}

.subtitle {
    font-family: "Alfa Slab One", serif;
}

.subtitle-box {
    font-weight: 600;

    color: var(--ocra);
    text-transform: uppercase;

}

.subtitle-mini {
    font-size: calc(18px + 6 * ((2560px - 320px) / 680));
    font-family: "Alfa Slab One", serif;
}

.text,
.text-box {
    
    font-family: "Urbanist", sans-serif;
    font-size: calc(11px + 2.5 * ((2560px - 320px) / 680));
}
.text-box{
    color:var(--white);
}
.back-black {
    background-color: var(--black);
}

.back-sede {
    background-image: url("../img/sede.jpg");
    aspect-ratio: 16/9;
    background-position: top center;
    background-size: cover;
}

.back-pulizia {
    background-attachment: fixed;
    position: relative;
    z-index: -1;
    background-image: url("../img/macchian-2.jpg");
    background-size: cover;
    background-position: center;

}

.back-ocra {
    background-color: var(--ocra);
}

.back-curva {
    background-image: url("../img/curva.svg");
    background-size: cover;
    height: 95vh;
}

.back-white-trasparent,
.back-pulizia {
    height: 75vh;
}

.back-white-trasparent {
    background-color: var(--white-trasparent);
}

/* box*/
.dati-aziendali {
    color: var(--white);
}

.dati-aziendali a {
    text-decoration: none;
    color: var(--white);
}

.dati-aziendali a:hover {
    text-decoration: none;
    color: var(--ocra);
}

.back-bolle {
    background-image: url("../img/bolle.svg");
    background-size: cover;
    background-position: 0% 50%;
}

/* box*/
.back-black-trasperent {
    height: 100%;
    background-color: var(--black-trasparent);
}

.back-white {
    background-color: var(--white);
}

#video-header {
    object-fit: cover;
    width: 100%;
    max-width: 100%;
    height: 75vh;

}

.back-team {
    background-image: url("../img/team.jpg");
    background-size: cover;
    aspect-ratio: 16/9;

}

.link-footer {
    color: var(--black);
    text-decoration: none;
    font-size: calc(11px + 2.5 * ((2560px - 320px) / 680));

}

.back-donna {
    background-image: url("../img/donna.svg");
    background-size: cover;
    background-position: right;
}

.button {
    white-space: nowrap;
    background-color: var(--ocra);
    color: var(--violaetto);
    padding: 0.4em;
    border-radius: 20px;
    text-decoration: none;
}

.button:hover {}

.nav-link {
    font-size: calc(16px + 2 * ((2560px - 320px) / 680));
}

.logo-nav {
    max-width: 250px;
}
@media only screen and (max-width:1650px) {
    .carousel-item img {
        aspect-ratio: 5/6;
        object-fit: cover;
        height: 100%;
    }
}
@media only screen and (max-width:800px) {
    .carousel-item img {
        aspect-ratio: 16/9;
        object-fit: cover;
        height: 100%;
    }
    .back-team {
        background-image: url("../img/team.jpg");
        background-size: cover;
        min-height:35vh;
        background-position: -34% 50%;
    
    }
    #map {
        aspect-ratio: 16/9;
    }

    .back-bolle {
        background-position: 28% 50%;
    }
}

@media only screen and (max-width:580px) {
    .logo-footer{
        max-width:97%;
    }
    .back-donna {
        background-image: unset;
    }

    .logo-nav {
        max-width: 150px;
    }

    .title {
        font-size: calc(28px + 6 * ((2560px - 320px) / 680));
    }

    .text {
        font-size: calc(11px + 2.5 * ((2560px - 320px) / 680));
    }

    #video-header {
        object-fit: contain;
        width: 100%;
        height: unset;

    }

    .back-bolle {
        background-size: 38vh;
        background-position: 264% 104%;
        background-repeat: no-repeat;
    }

    .link-footer {
        color: var(--black);
        text-decoration: none;
    }

    .subtitle-mini {
        font-size: calc(18px + 5 * ((2560px - 320px) / 680));
    }
}
@media only screen and (max-width:375px) {
   
    body::-webkit-scrollbar {
        display: none;
    }
    body {
        
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    .title {
        font-size: calc(14px + 4 * ((2560px - 320px) / 680));
    }
    .text{
        font-size: calc(5px + 2.5 * ((2560px - 320px) / 680)); 
    }
    .text-box{
        
        font-size: calc(7px + 2 * ((2560px - 320px) / 680));
    }
    .link-footer {
        white-space: nowrap;
        font-size: calc(6px + 2 * ((2560px - 320px) / 680));
    }
    .subtitle-mini{
        font-size: calc(6px + 2 * ((2560px - 320px) / 680));
    }
    .subtitle-box{
        font-size: calc(14px + 2 * ((2560px - 320px) / 680));
    }
    .dati-aziendali  {
        font-size: calc(7px + 2 * ((2560px - 320px) / 680));
        
    }
    .nav-link{
        font-size: calc(7px + 2 * ((2560px - 320px) / 680));
        
    }
    .testo-mappa{
        font-size: calc(5px + 2 * ((2560px - 320px) / 680));
    }
  }