.fade-img {
    opacity: 0;
    transition: opacity 0.5s;
}

.fade-img.show {
    opacity: 1;
    transition: opacity 0.5s;
}
:root {

    --secondary-color: #6c757d;
    --gray: #979dad;
    --gray-light: #c0c3cd;
    --blue-light: #d6e3e36d;
    --white-color: #FFFFFF;
    --bg-body: #f8f9fa;
    --black-color: #161A1D;

    --red: #f72717;
    --orange: #fa5022;
    --blue: #002472;

    --dark-blue: #425771;
    --azzurro: #dbebfa;

    --darkred-10-transparent: rgba(186, 24, 27, 0.2);
    --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-2xl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --fs-3xl: clamp(11.05rem, 3.54vi + 2.17rem, 5rem);
    --fs-4xl: clamp(18.05rem, 3.54vi + 2.17rem, 5rem);
    
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


body {

    font-family: "Montserrat", sans-serif;
}

.logo-nav {
    max-width: 90px;
}
#zeiss, #hoya, #seiko {
   scroll-margin-top: 100px;
}
.img-persone {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
}

.btn-card-lenti {

    bottom: 0
}

.text-content {
    padding: 1em;
}

.card-lenti {

    height: 100%;
    border-radius: 20px;
    padding: 1.5rem;
    background-color: var(--white-color);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.219));

}

.card-lenti img {
    border-radius: 20px;
}

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

.img-header {
    width: 100%;
    height: 90vh;
    object-fit: cover;
    overflow: hidden;
}

.box-txt-foot {
    padding-top: 6vh;
    padding-bottom: 0vh;
}

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

.logo-header {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 45%;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));

}
.img-form{
    border-radius: 20px;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.485));
}
.logo-header.logo-animato {
    animation: fadeInLogo 0.8s ease forwards;
}


.navbar {
    border-radius: 20px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    margin-right: 0;
    margin-left: 0;
    margin: 1rem;
    max-width: 90%;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.1));
    background-color: #ffffff;
}

.back-footer {
    padding-top: 3em;
    padding-bottom: 1em;
    background: url("../img/back-footer.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left bottom;

}

.link-sede:hover {
    color: var(--blue-light);


}
.form-control {
     filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.214));
    border-radius: 10px;
    padding: 1em;
    border-radius: 0;
    
    border: 1px solid var(--gray-light);
}
.form-control:focus {
    color: var(--black-color);
    
    border-color: var(--dark-blue);
    outline: 0;
    box-shadow: unset;
}
.navbar-nav .nav-link {

    color: var(--gray);
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 400;
}

/*SLIDER*/

.slider-card {
    display: inline-flex;
    flex-direction: row;
    overflow-x: scroll;
}

.slider-col {
    flex-grow: 1;

}
.slider-white .card-servizio {
    background-color: #f5f5f5;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.142));
}

.card-servizio {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    min-height: 280px;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
}

.card-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--gray-light);
    border-radius: 30px;
    padding: 0.3em 0.9em;
    font-size: var(--fs-sm);
    font-weight: 600;
}
.icon-lenti{
    width: 60%!important;
    margin:auto;
}
.card-arrow {
    
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--gray-light);
    border-radius: 50%;
    color: var(--gray);
    text-decoration: none;
    transition: background 0.2s;
}
.accordion-button{
    font-weight: 500;
    background-color: transparent;
    
    border-radius: 0;
    color: var(--gray);
    font-size: var(--fs-base);
}
.accordion-button:not(.collapsed){
    background-color: var(--dark-blue);
    border-radius: 0;
    color: var(--azzurro);
}
.accordion-button:focus {
    border: 0px solid var(--blue-light);
    box-shadow: none;
    
}
.img-slide{
    padding: 0.9em;
}
.img-slide {
   
    
    border-radius: 20px;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.485));
}
.title-sez {
    font-size: var(--fs-lg);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1em;
}
.line{
    background-color: var(--dark-blue);
    display: block;
    margin-top: 0.3em;
    height: 4px;
    width: 150px;
}
.spacing-text {
    padding: 2em;
}
.card-arrow:hover {
    background: var(--blue-light);
}
.title-slider {
    font-size: var(--fs-xl);
    font-weight: 300;
}
.title-slider span {
    font-weight: 700;
}

/*SLIDER*/
.title-page {
    font-size: var(--fs-2xl);
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.accordion-button:not(.collapsed)::after {
    background-image: var(--active-accordion-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}
.box-text {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    color: var(--white-color);
    text-align: center;
}

.relative {
    position: relative;
}

.img-divider {
    filter: brightness(0.5);
}

.video-header {

    width: 100%;
    height: 80vh;
    object-fit: cover;
    overflow: hidden;
}

.title-contatti {
    padding: 0.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--white-color);

}

.tit-foot {
    text-transform: uppercase;
    font-size: var(--fs-lg);
}

.txt-foot a {
    line-height: 0.4rem;
    font-size: var(--fs-base);
    color: var(--black-color);
    text-decoration: none;


}

.bordered {
    border: 1px solid var(--white-color);

}

.link-sede {
    display: block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    font-size: var(--fs-base);
    color: var(--white-color);
}

.title-sede {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 0.5em;
    text-transform: uppercase;
    font-weight: 400;
    font-size: var(--fs-md);
    color: var(--white-color);

}

.txt {
    text-transform: ;
    font-size: var(--fs-base);
    color: var(--gray);
    text-align: justify;
}

.img-big {

    height: 100%;
    width: 100%;
    object-fit: cover;
}

.img-composizione {
    height: auto;
    width: 100%;
    object-fit: cover;
}

.link-page-box {
    display: block;
    width: 100%;
    height: 100%;
    transition: filter 0.3s ease;

}

.back-image {
    background-color: var(--black-color);

}


.link-page-box img {
    transition: opacity 0.3s ease;
}

.link-page-box .text-img-box {
    transition: bottom 0.3s ease-in-out;
}

.btn-scopri {
    background-color: transparent;
    border: 1px solid var(--white-color);
    color: var(--white-color);
    padding: 0.5em 1em;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
    margin-top: 1em;
}

.btn-scopri:hover {
    background-color: var(--white-color);
    color: var(--black-color);
    border: 1px solid var(--white-color);

    padding: 0.5em 1em;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
    margin-top: 1em;
}
.form-check-input:checked {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}
.dropdown-menu {
    padding: 0;
    width: 100%;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--secondary-color);
}

.dropdown-item {
    padding: 0.6em;
}

.list-btn {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1em;
    margin-top: 1em;
}
.link-privacy{
    color: var(--black-color);
    text-decoration: none;
}
.link-privacy:hover{
    color: var(--dark-blue);
    text-decoration: none;
}
.btn-sezione {
    font-size: var(--fs-base);

    border: 2px solid var(--black-color);
    border-radius: 0px;
    color: var(--black-color);
}

.link-footer {
    margin-bottom: 0.5rem;
    color: var(--black-color);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: 0.3s ease;
}

.link-footer:hover {
    color: var(--black-color);
    border-bottom: 2px solid var(--black-color);
}

.btn-sezione:hover {
    background-color: var(--blue-light);
    border: 2px solid var(--gray-light);

}

.dropdown-item:hover {
    background-color: #edf3f3;
}

/*-----------------BOX CATEGORIE-----------------*/

.title-img-box {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-weight: 400;
    bottom: 0;
    font-size: var(--fs-md);

}

.title-servizio {
    font-weight: 600;
    font-size: var(--fs-md);
    text-transform: uppercase;
}

.txt-img-box {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: var(--fs-base);
}

.txt-servizio {

    font-size: var(--fs-base);
}

.bordered-section {
    border-right: 1px solid var(--gray-light);
}

.bordered-section-2 {
    padding-left: 0.75em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid var(--gray-light);
}

.bordered-section-3 {
    padding-left: 0.75em;
    padding-top: 0.75em;

}

.text-img-box>p,
.text-img-box>a {
    opacity: 0;
    transition: opacity 0.3s ease 0.15s;
}

.link-page-box {

    overflow: hidden;
}

.back-image {
    background-color: var(--black-color);

}

.img-header {
    background-size: cover;
    height: 80vh;
    filter: brightness(0.8);
}

.box-text-header {
    position: absolute;
    top: 50%;
    left: 5%;
    font-size: var(--fs-xl);
    color: var(--white-color);
    text-align: center;
}

.row-card {
    justify-content: space-between;
}

.card-red {
    border-radius: 20px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    border: 6px solid var(--red);
}

.card-orange {
    border-radius: 20px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    border: 6px solid var(--orange);
}

.card-blue {
    border-radius: 20px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    border: 6px solid var(--blue);
}

.text-img-box {

    overflow: hidden;
    position: absolute;
    bottom: -30%;
    color: var(--white-color);
    padding: 3em;
}

.bordered-section .text-img-box {
    bottom: -15%;
}

.link-page-box:hover img {
    opacity: 0.6;
}

.link-page-box:hover .text-img-box>p,
.link-page-box:hover .text-img-box>a {
    opacity: 1;
}

.link-page-box:hover .text-img-box {
    bottom: 0;
}

/*-----------------BOX CATEGORIE-----------------*/

.loghi {
    margin: auto;
    max-width: 250px;
}

@media screen and (max-width: 1440px) {
    .box {
        padding-left: 5vh;
        padding-right: 5vh;
    }

    .navbar {
        max-width: 97%;
    }
}

@media screen and (max-width: 1280px) {
    .navbar-nav .nav-link {

        font-size: var(--fs-sm);

    }
}

@media screen and (max-width: 1184px) {
    .title-servizio {
        font-weight: 600;
        font-size: var(--fs-base);
        text-transform: uppercase;
    }
    .txt-servizio {
     font-size: var(--fs-sm);
    }
    .row-card{
        gap: 1em;
        justify-content: unset;
    }
    .back-footer {
        padding-top: 1em;
        padding-bottom: 1em;
        background: unset;
        background-size: cover;
        background-position: left bottom;
    }

    .img-header {

        height: 60vh;
    }

    .back-image img {

        aspect-ratio: 4/3;
        object-fit: cover;
    }

    .bordered-section-3 {
        padding-top: 0;
        border: 0;
    }

    .bordered-section-2 {
        padding-bottom: 0;
        border: 0;

    }

    .link-page-box img {
        opacity: 0.6;
    }

    .link-page-box .text-img-box {
        opacity: 1;
    }

    .bordered-section {

        border: 0;

    }
    .link-page-box .text-img-box {
        bottom: 0;
    }
    .text-img-box>p, .text-img-box>a {
        opacity: 1;
    
    }
}

@media screen and (max-width: 690px) {
    
    .img-slide {
        padding: 0.5em;
    }
    .title-sez {
        padding-top: 1em;
    }
    .box-text-header {
        right: 0;
        left: 0;
        text-align: center;
    }

    .row-card-lenti {
        gap: 2em;
    }

    .img-header {
        height: 50vh;
    }

    .logo-header {
        width: 100%;
    }



    .box {
        padding-left: 2vh;
        padding-right: 2vh;
    }

    .box-contatti {
        padding: 0;

    }

    .back-image img {

        aspect-ratio: 5/6;
        object-fit: cover;
    }



    .text-img-box {
        padding: 1em;
    }

    .link-page-box img {
        transition: opacity 0.3s ease;
    }

    .link-page-box .text-img-box {
        transition: opacity 0.3s ease;
        transition-delay: 0.2s;
    }

    .box-text {
        width: 100%;
    }

    .img-divider {
        aspect-ratio: 6/6;
        object-fit: cover;
        width: 100%;
    }

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

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

    .box-txt-foot {
        padding-top: 1vh;
        padding-bottom: 0vh;
    }

    .navbar-nav .nav-link {
        color: var(--gray);
        font-size: var(--fs-base);
        text-transform: uppercase;
        letter-spacing: 0.2rem;
        font-weight: 400;
        text-align: left;
    }





}