:root{
    --bronzo: #B88363;
    --bronzo-trasparente: #b8846356;
    --panna: #FFEBC7;
    --panna-chiaro: #faf1df;
    --bronzo-scuro: #AD7959;
    --nero: #010101;
}
body{
    background-color:var(--panna-chiaro);
    font-family: "Urbanist", sans-serif;
}
.logo-nav{
    max-width: 250px;
}
.image-container {
    overflow: hidden;
    position: relative;
}
.white{
    color: white;
}
.dati-aziendali a{
    text-decoration: none;
    color: white;
}
.icon-cataloghi{
    transition: linear 0.5s;
}
.icon-cataloghi:hover{
    transition: linear 0.5s;
    transform: scale(1.1);
}
.header-monumenti, .header-provvisori{
    height:60dvh;
    background-image: url(../img/header-monumenti.jpg);
    background-size: cover;
    background-position: center;
}
.header-provvisori{
    background-image: url(../img/header-provvisori.jpg);
}
#map{
    height:40vh;
}
.navbar{
    background-color: var(--bronzo);
    padding:0.75em;
}
.nav-link{
    color: var(--panna);
    border-bottom:2px solid var(--bronzo);
    margin-right:2.5rem;
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.nav-link:hover{
    color: var(--panna);
    border-bottom:2px solid var(--panna);
    margin-right:2.5rem;
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.img-hover-zoom {
    /* [1.1] Set it as per your need */
    overflow: hidden;
    /* [1.2] Hide the overflowing of child elements */
}
.button {
    white-space: nowrap;
    margin-right:1rem;
    text-decoration: none;
    background-color: var(--bronzo-scuro);
    border: 1px solid var(--bronzo-scuro);
    color: var(--panna);
    padding: 0.5em;
    transition: 0.5s;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
.button:hover {
    background-color: var(--panna-chiaro);
    border: 1px solid var(--bronzo-scuro);
    color: var(--bronzo-scuro);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}
/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
    transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
    transform: scale(1.1);
}
.title{
    font-size: calc(45px + (45 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--bronzo);
}
.back-bronzo-trasparente{
    background-color: var(--bronzo-trasparente);
}
.back-bronzo{
    background-color: var(--bronzo);
}
.back-panna{
    background-color: var(--panna);
}
.subtitle {
    
    font-size: calc(35px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--bronzo);
}
.subtitle-icon {
    
    font-size: calc(14px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
    color: var(--bronzo);
}
.subtitle-footer {
    
    font-size: calc(30px + (30 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--bronzo);
}
.subtitle-contatti{
    color:var(--bronzo);
}
.subtitle-h3 {
    
    font-size: calc(28px + (28 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--bronzo);
}

.list-footer{
    
    margin-left:2rem;
    text-align: start;
}
.list-footer a{
    color:var(--bronzo);
    text-decoration: none;
}
.back-black{
    background-color:var(--nero);
}
.box-sfalsato{
    margin-top:4rem;
}
.box-icon{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    
    border:2px solid var(--panna);
    
}
.back-video{
    height:100dvh;
}
.logo-head{
    max-width: 80%;
    padding-top: 70%;
}
.sp-sez-pag{
    padding-top: 8rem;
}
.btn-head{
    text-align: center;
    background-color: #B88363;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.2rem;
    width: 1;
    color:#FFEBC7;
    font-size:20px;
    font-weight: 600;
}
.b2{background-color: #AD7756;}
.b3{background-color: #9B6340;}
.btn-head:hover{
    background-color: #6F4429;
}
.h-btn-head{
    position: absolute;
    bottom:0.5rem;
}
a{
    text-decoration: none;
}
#video-bk{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.back-bronzi, .back-monumenti, .back-provvisori, .back-incisioni, .back-colombaie{
    transition: all 1s;
    aspect-ratio:4/3;
    background-size: cover;
}
.back-bronzi:hover, .back-monumenti:hover, .back-provvisori:hover, .back-incisioni:hover, .back-colombaie:hover{
    transform: scale(1.1);
}
.back-colombaie{
    background-position: 80%;
}
.overlay-servizi {
    min-height: 65vh;
    padding: 3em;
    position: relative;
}
.subtitle-white-card {
    text-shadow: 2px 2px #AD7959;
    position: absolute;
    margin: auto;
    bottom: 0;
    left: 0;
    right: 0;
    top: 45%;
    font-style: italic;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 0.5em;
    font-size: calc(27px + (34 - 27) * ((100vw - 300px) / (1920 - 300)));
    color: var(--panna);
}
.panna{
    color:var(--panna);
}

.text-scopri {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 59%;
    color: var(--white);
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.box{
    padding-left:12vh;
    padding-right:12vh;
    padding-bottom:8vh;
}
.box-text{
    padding-left:25vh;
    padding-right:25vh;
}
.box-recensione{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: var(--bronzo);
    padding-top:6vh;
    padding-left:10vh;
    padding-right:10vh;
    padding-bottom: 6vh;
    min-height:40vh;
}
.nome-recensione{
    padding-bottom:2vh;
    color: var(--panna-chiaro); 
    font-size: calc(27px + (52 - 27) * ((100vw - 300px) / (1920 - 300)));
}
.text-recensione{
    color: var(--panna-chiaro); 
    font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1920 - 300)));
}
 .logo-footer{
        padding-top:0;
        padding:2vh;
        width: 80%;
}
.text {
    
   
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}
.txt-foot{
    font-size: calc(16px + (16 - 16) * ((100vw - 300px) / (1920 - 300)));
    color:#2C2C2C;
}
.privacyAcceptContact{
    color:var(--nero);
}
.link-footer{
    
    font-size: calc(14px + (17 - 14) * ((100vw - 300px) / (1920 - 300)));
    text-decoration: none;

}
.txt-foot>a{
    padding-left:1rem;
    padding-right: 1rem;

}
a{color:#2C2C2C}
.black{
    color:var(--nero);
}
@media only screen and (max-width:1830px) {
    
}
@media only screen and (max-width:1440px) {
    
}
@media only screen and (max-width:1024px) {
    .overlay-servizi {
        min-height: 35dvh;
        padding: 3em;
        position: relative;
    }
    .nav-link{
        margin-right:1.5rem;
    }
    
    .back-video{
        height:45dvh;
    }
    .box{
        padding-left:6vh;
        padding-right:6vh;

    }
}
@media only screen and (max-width:900px) {
    .h-btn-head{
    position: relative;
    bottom:0.5rem;
    padding-top: 2rem;
}
.logo-head {
    max-width: 80%;
    padding-top: 30%;
}

.btn-head{
    font-size:18px;
    font-weight: 600;
}
    .logo-footer{
        padding-top:0;
        padding:2vh;
    }
    .title {
        
        font-size: calc(35px + (35 - 18) * ((100vw - 300px) / (1920 - 300)));
        
    }
    .subtitle{
        font-size: calc(24px + (24 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .button{
        margin-top:1rem;
        
    }
    .box-text{
        padding-top:2vh;
        padding-left:2vh;
        padding-right:2vh;
    }
    .box{
        padding-left:2vh;
        padding-right:2vh;
        padding-bottom:2vh;
    }
    
    .back-bronzi, .back-monumenti, .back-provvisori, .back-incisioni, .back-colombaie{
        
    }
    .overlay-servizi{
        min-height:45dvh;
    }
    .slick-slide{
        
        margin:1.4rem;
    }
    .box-recensione{
       
        box-shadow: unset;
        padding-left:4vh;
        padding-right:4vh;
    }
    .subtitle-icon{
        font-size: calc(24px + (24 - 18) * ((100vw - 300px) / (1920 - 300)));
    }
    .col-footer{
        padding-top:1em;
        padding-left:2em;
        text-align: start!important;
    }
    .list-footer {
        margin-left: 0rem;
        
    }
    
}
@media only screen and (max-width:7680px) {
    .h-btn-head{
        bottom: -10px;
    }
}
@media only screen and (max-width:540px) {
    .logo-nav{
        max-width: 150px;
    }
    .h-btn-head{
        bottom: -10px;
    }
}