:root {
    --primary: #198754;
    --secondary: #0000;

    --black: #1d1d1d;
    --white: rgb(255, 255, 255);
    --bg-light-green: #f7faf6;
    --fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
    --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
    --fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
    --fs-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --fs-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);
}

@keyframes sliderImageBackground {
    15% {
        background-image: url('../img/slider/1.jpg');
    }

    53.33% {
        background-image: url('../img/slider/2.jpg');
    }

    86.66% {
        background-image: url('../img/slider/3.jpg');
    }

    100% {
        background-image: url('../img/slider/1.jpg');
    }
}

@keyframes fadeInText {

    0%,
    33.33%,
    66.66%,
    100% {
        opacity: 0;
    }

    10%,
    43.33%,
    76.66% {
        opacity: 1;
    }
}

@keyframes logoSlideFromBottom {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }

}


@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);

    }

    100% {
        transform: translateY(0);

    }
}

@keyframes slideOutFromTop {
    0% {
        transform: translateY(0);

    }

    100% {
        transform: translateY(-100%);

    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-35%);

    }

    100% {
        transform: translateX(0);

    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(+100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@font-face {
    font-family: 'Clofie Regular';
    src: url('../font/clofie-regular.woff2'),
}

@font-face {
    font-family: 'Clofie Bold';
    src: url('../font/clofie-bold.woff2'),
}

@font-face {
    font-family: 'Clofie Light';
    src: url('../font/clofie-light.woff2'),
}

body {
    font-family: 'Clofie Regular', sans-serif;
    font-size: var(--size-md);
    background-color: var(--bg-light-green);
}
.title-color {
    display: inline-block;
    margin-top: 0.8rem;
    font-size: var(--fs-base);
    color: var(--black);
}
.container-wha {
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.09));
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
}
.wha-icon {
    width: 6rem;
    height: 6rem;
   
}
.logo-nav {
    max-width: 250px;
}
.list-unstyled {
    
    padding-left: 0;
    font-size: var(--fs-base);
}
.title-h1-page{
    padding-top:6vh;
    font-size: var(--fs-xxl);
    font-weight: 700;
}
.btn-scheda-tecnica{
    font-size: var(--fs-base);
    background-color: var(--primary);
    border: 1px solid transparent;
    color: var(--white);
    padding-top: 0.5em;
}
.box-detrazioni{
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.199);
    padding:4em;
    background-color: #dbe8e1;

}
.btn-scheda-tecnica:hover{
    
    border: 1px solid var(--black);
    
}
.bg-light-green {
    background-color: var(--bg-light-green);
}
.list-btn {
    gap:2rem;
    align-items: center;
    list-style: none;
    padding-left: 0;
    display: inline-flex;
    flex-direction: row;
    margin-bottom: 1rem;
}
.btn-green{
    text-decoration: none;
    padding:0.5em;
    padding-top:0.7em;
    line-height: auto;
    background-color: var(--primary);
    color:var(--white);
    font-size: var(--fs-base);
    border:1px solid transparent
    
}
.btn-green:hover{
    
    border:1px solid var(--black);
}

.list-btn li {
    margin-bottom: 1rem;
}
.tit-menu {
    font-weight: 600;
    font-size: 1.4rem;
}

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

.img-background {
    aspect-ratio: 16/9;
    background-size: cover;
    max-height: 95vh;
    position: relative;
    width: 100%;
    z-index: -1;


}

.logo-slider {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 9;
    width: 12vw;
    animation: logoSlideFromBottom 0.9s ease-out forwards;
}

.box-text-slider {

    position: absolute;
    top: 40%;
    left: 6%;

    color: var(--white);

}

.box-text-slider>h2 {
    font-size: 5rem;
    transform: translateX(-100%);


}

.box-text-slider>h3 {

    animation: slideInFromTop 0.6s ease-out forwards;
    position: relative;
    text-align: left;
    font-size: 3rem;
    text-transform: uppercase;

}

.item-slider {
    position: relative;
    overflow: hidden;

}

.box-text-slider {
    width: 100%;
    overflow: hidden;


}

.item-slider img {
    transition: 1s ease;
    object-fit: cover;
    aspect-ratio: 4/5;
}

.hoverlay-slider {

    background-color: #0101015b;
}

.button-slider:hover {
    background: var(--white);
    color: var(--black);


}

.button-slider {
    position: relative;
    transition: 0.4s ease;
    opacity: 0;
    animation-delay: 1.4s;

    white-space: nowrap;
    display: inline-block;
    transform: translateX(+100%);
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--white);
    padding: 0.5em;
    border: 2px solid #fff;
    background-color: transparent;
}

.textSlideFromLeft {

    animation: slideInFromLeft 1s ease-out forwards;
    animation-delay: 0.8s;
}

.buttonSlideFromBottom {
    animation: slideInFromBottom 1s ease-out forwards;
    animation-delay: 0.8s;

}

.relative {
    position: relative;
}

.list-button {
    list-style: none;
    padding-left: 0;
    display: inline-flex;
    flex-direction: row;
}

.button {
    color: var(--black);
}

.button:hover {
    color: var(--black);
}

.navbar-nav {
    gap: 2rem
}

.nav-link {
    font-family: 'Clofie Regular', sans-serif;
    text-decoration: none;
    color: var(--white);
}

.navlink:hover {
    text-decoration: none;
}

.link-footer {
    text-decoration: none;
    color: var(--white);
    font-size: var(--fs-base);
}

.link-footer:hover {
    text-decoration: none;
}

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

.black {
    color: var(--black);
}

.title-footer {
    font-size: var(--fs-lg);
    font-family: 'Clofie Bold', sans-serif;
}

.bg-transparent {
    background-color: transparent;
}

footer {
    color: var(--white);
    background-color: var(--primary);
}

#map {
    border-radius: 10px;
    filter: grayscale(1);
    height: 35vh;
}

.title-line {
    font-family: 'Clofie Bold', sans-serif;
    font-size: var(--fs-md);
    padding-top: 1em;
    padding-left: 0.5em;
    color: var(--white);
}

.border-dotted-left {
    border-left: 2px dotted var(--white);
}

.box {
    padding-left: 12vh;
    padding-right: 12vh;
    padding-top: 12vh;
    padding-bottom: 12vh;
}

.bg-green {
    background-color: var(--primary);
}

.title-slider {
    font-family: 'Clofie Bold', sans-serif;
    font-size: var(--fs-xxl);
    color: var(--white);
}

.subtitle-h1 {
    font-size: var(--fs-lg);
    color: var(--white);
}

.button-slider {
    font-family: 'Clofie Regular', sans-serif;
    font-size: var(--fs-md);
    color: var(--white);
    text-decoration: none;
    background-color: transparent;
    padding: 1.0rem 1.0rem;
    border: 2px solid var(--white);
}

.title-h2 {
    font-family: 'Clofie Bold', sans-serif;
    font-size: var(--fs-lg);

}

.txt {
    font-size: var(--fs-base);
}

.list-navbutton {
    margin-bottom: 0;
    gap: 1.6rem;
    list-style: none;
    padding-left: 0;
    padding-right: 0.5em;
    display: inline-flex;
    flex-direction: row;
}

.carousel-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.carousel-item {
    max-height: 100vh;
    position: relative;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.213);
    z-index: 1;
    pointer-events: none;
}

.text-slider {
    position: absolute;
    z-index: 2;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.img-sez {
    border-radius: 10px;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.199));
}

.carousel-caption {
    position: absolute;
    z-index: 2;
    left: 0;
}

.offcanvas {
    background-color: #f7faf6;
    max-height: 100vh;
    height: 100vh;
}

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

.brd-box {
    border: 1px solid var(--black);
    padding: 2em;
    padding-top: 12vh;
    padding-bottom: 12vh;
}

.offcanvas.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    max-height: 100%;

    transform: translateY(-100%);
}

.carousel-progress-bar {
    width: 100%;
    background: var(--primary);
    height: 0;
    transition: height 0.5s linear;
}

.slider {
    overflow-x: hidden;
    position: relative;
}

.text-card {

    transition: 1s ease opacity;
    color: var(--white);
    padding: 2em;
    position: absolute;
    z-index: 2;
    left: 2rem;
    bottom: 2rem;
    opacity: 1;
}




.hoverlay {
    background: rgba(0, 0, 0, 0.278);
    transition: 0.5s ease background;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    position: relative;

}

.col-card img {
    border-radius: 20px;
    position: relative;
    z-index: -1;
    object-fit: cover;
    height: 60vh;
    width: 100%;
}

.form-control {
    font-size: 1rem;
    border: 0;
    border-bottom: 1px solid var(--black);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;

}

.form-floating {
    font-size: 1rem;
}

.form-control:focus {
    border: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--black);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;

}

.button {
    font-family: 'Clofie Regular', sans-serif;
    font-size: var(--fs-base);
    color: var(--black);
    text-decoration: none;
    background-color: transparent;
    padding: 0.4rem 2rem 0.2rem 2rem;
    border: 2px solid var(--black);
}

.item {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.199);
    border-radius: 20px;
}

.navbar .megamenu {
    padding: 4rem;
    background-color: #dbe8e1;
    ;
    box-shadow: 0px 0px 5px 0px #1a1a1a3b;
    background-image: url(../img/back-menu.jpg);
    background-position: right;
    background-size: cover;
}

.navbar {
    background-color: #dbe8e1;
    padding: 0.5;

    top: 0;
    z-index: 10;
}

.nav-link {
    font-weight: 500;
    font-family: 'Clofie Regular', sans-serif;
    text-decoration: none;
    color: var(--black);
    font-size: var(--fs-base);
}

.col-card {

    position: relative;
    transition: 1.3s ease flex;
    display: flex;
    flex-wrap: nowrap;
    flex: 10%;
}

.link-footer {
    position: relative;
    overflow: hidden;
    transition: color 0.3s;
    padding: 0.3em;
    color: var(--white);
}

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

.link-footer::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--white);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-footer:hover::after {
    width: 100%;
}

.col-active {
    flex: 15%;
}

.col-active>.text-card {
    opacity: 0;
}

.link-privacy {
    text-decoration: none;
    color: var(--white);
}
.link-privacy:hover {
    text-decoration: none;
    color: #0cca71;
}
.black {
    color: var(--black);
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.col-active>.hoverlay {
    background: rgba(0, 0, 0, 0);
}

.arrow {
    font-size: 1.5rem;
    color: var(--white);
    background-color: var(--primary);
    padding: 0.4em;
    border-radius: 100%;
    right: 2rem;
    top: 0.5rem;
    position: absolute;
    rotate: -127deg;
}

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

@media all and (min-width: 992px) {

    .navbar .has-megamenu {
        position: static !important;
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 70%;
        margin-top: 4px;
    }

}

@media only screen and (max-width: 1460px) {
    .box-text-slider>h3 {
        animation: slideInFromTop 0.6s ease-out forwards;
        position: relative;
        text-align: left;
        font-size: 2rem;
        text-transform: uppercase;
    }

    .box-text-slider>h2 {
        font-size: 3rem;
        transform: translateX(-100%);
    }

    .box {
        padding-left: 5vh;
        padding-right: 5vh;
        padding-top: 5vh;
        padding-bottom: 5vh;
    }
}

@media only screen and (max-width: 1024px) {
    .img-sez{
        margin-top:4em;
        aspect-ratio: 16/9;
        object-fit: cover;
       
        width: 100%;
        
    }
    .title-h1-page{
        padding-top:2vh;
    }
}
@media only screen and (max-width: 850px) {
    
    .navbar-nav {
        gap: 0rem
    }

    .nav-link {
        margin-top: 0.5rem;
    }

    .img-background {
        aspect-ratio: 4/5;
        background-size: cover;
        max-height: 95vh;
        position: relative;
        width: 100%;
        z-index: -1;
    }

    .img-sez {
        aspect-ratio: 16/9;

    }

    .box-text-slider>h2 {
        font-size: 1.3rem;
        transform: translateX(-100%);
    }

    .box {
        padding-left: 3dvh;
        padding-right: 3vh;
        padding-top: 3vh;
        padding-bottom: 3vh;
    }

    .logo-slider {
        
        width: 45vw;
        
    }
}
@media only screen and (max-width: 650px) {
    .list-btn {
        flex-direction: column;
        gap: 1rem;
        align-items: start;
    }
    .box-detrazioni {
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.199);
    padding: 2em;
    background-color: #dbe8e1;
}
}