@import url('common.css');


body{
    background-color: var(--color-light);
}


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

/*
==============================================
==============================================
BUTTONS
==============================================
==============================================
*/
.button{
    text-transform: none;
}


/* SLIDER NAV */
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-next:focus, .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-prev:focus{
    background:var(--color-primary);
    color:var(--color-white);
}

/*
==============================================
==============================================
HEADER
==============================================
==============================================
*/

.header.dark{
    background-color: var(--color-primary);
}
.header ul.list-inline li{
    padding: 0 3px;
}
.header .header-menu .nav .nav-item .nav-link,
.header .header-menu .nav .nav-item .nav-link:hover,
.header .header-menu .nav .nav-item .nav-dropdown-toggle,
.header .header-menu .nav .nav-item .nav-dropdown-toggle:hover{
    color:var(--color-white);
}
.header .header-menu .nav .nav-item .nav-link::before{
    background: rgba(255,255,255,0.3);
}
.header.dark .header-toggle span,
.header.dark .header-toggle span:before,
.header.dark .header-toggle span:after{
    background:var(--color-white);
}
.header.dark .header-toggle.toggle-close span{
    background:transparent;
}


/*
==============================================
==============================================
CONTENT
==============================================
==============================================
*/

/* HELPERS */
.aspect-1{
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.aspect-16-9{
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.aspect-21-9{
    aspect-ratio: 21/9;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.hero-home-section{
    margin-top:-80px;
}
.square-box-xl{
    width: 150px;
    height: 150px;
    line-height: 150px;
}

.hoverbox-6 {
  height: 250px; 
  width: 100%;     
  overflow: hidden;   
}

.hoverbox-6 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.promo-card {
    width: 420px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 400px;
    margin-bottom: 20px;
}

.promo-card .hoverbox-6 {
  border-radius: 6px;
  overflow: hidden;
}

.promo-content {
  flex: 1;
  margin-top: 0.5rem;
}




/* FORM */
input:not(.form-check-input), textarea, .form-control{
    background-color: var(--color-white);
}
input:not(.form-check-input):focus, textarea:focus, .form-control:focus{
    border-color: var(--color-primary);
    color:var(--color-primary);
}
form #recaptcha_k_0{
    display: inline-block;
    margin: 0 auto;
}
form select{
    background-color: var(--color-white);
    color:#7C7C7C;
    width: 100%;
    border: 1px solid rgba(18,21,24,0.1);
    margin-bottom: 1rem;
    border-radius: 0;
    padding: 15px 20px;
    box-shadow: none;
    font-size: 15px;
}
.bg-black input,
.bg-black textarea,
.bg-black .form-control,
[class*="bg-dark"] input,
[class*="bg-dark"] textarea,
[class*="bg-dark"] .form-control,
[class*="bg-gradient-"] input,
[class*="bg-gradient-"] textarea,
[class*="bg-gradient-"] .form-control,
[class*="bg-color-"] input,
[class*="bg-color-"] textarea,
[class*="bg-color-"] .form-control,
.bg-black input::placeholder,
.bg-black textarea::placeholder,
.bg-black .form-control::placeholder,
[class*="bg-dark"] input::placeholder,
[class*="bg-dark"] textarea::placeholder,
[class*="bg-dark"] .form-control::placeholder,
[class*="bg-gradient-"] input::placeholder,
[class*="bg-gradient-"] textarea::placeholder,
[class*="bg-gradient-"] .form-control::placeholder,
[class*="bg-color-"] input::placeholder,
[class*="bg-color-"] textarea::placeholder,
[class*="bg-color-"] .form-control::placeholder{
    background-color: #fff;
    color:var(--color-black);
}

/*
==============================================
==============================================
FOOTER
==============================================
==============================================
*/
footer{
    background-color: var(--color-primary);
    color:var(--color-white);
}
footer a, footer a:hover{
    color:var(--color-white);
}
footer .footer-sentence{
    background-color: #063963;
}
footer .footer-copyright p{
    font-size: 80%;
}
footer .footer-copyright a{
    text-decoration: underline;
}
footer .footer-sentence span{
    letter-spacing: 0.1em;
}

.whatsapp-button{
    position: fixed;
    bottom:30px;
    right:30px;
    z-index: 999;
}

.apt-button{
    display: none;
}



#promoModal .btn-close,
#appuntamentoModal .btn-close {
  position: absolute;
  right: 15px;
  background-color: #fff;
  border-radius: 50%;
  padding: 10px;
  top: 15px;
}

#appuntamentoModal form .button-primary{
    background:var(--color-white);
    color:var(--color-primary);
}

/*
==============================================
==============================================
MEDIA QUERIES
==============================================
==============================================
*/

@media (min-width:992px){
    .header .header-menu .nav .nav-item .nav-dropdown .nav-dropdown-item .nav-dropdown-link{
        color:var(--color-black);
    }
    .header .header-menu .nav .nav-item .nav-dropdown .nav-dropdown-item .nav-dropdown-link:hover{
        background-color: var(--color-light);
        color:var(--color-black);
    }
    .header .header-menu-extra{
        display: inline-flex;
        align-items: center;
    }
    .apt-button{
        position: fixed;
        display: block;
        top: 50%;
        left: 0;
        transform: translateX(-50%) rotate(-90deg);
        transform-origin: top center;
        z-index: 999;
    }
}

@media (max-width:991.98px){
    .header .header-menu{
        background:var(--color-primary);
    }
    .header .header-menu .nav .nav-item .nav-link:hover,
    .header .header-menu .nav .nav-item .nav-link:focus,
    .header .header-menu .nav .nav-item .nav-link.active,
    .header .header-menu .nav .nav-item .nav-dropdown-toggle.active{
        color:var(--color-white);
    }
    .header .header-menu .nav .nav-item .nav-dropdown{
        background-color: var(--color-primary);
    }
    .header .header-menu .nav .nav-item .nav-dropdown a:not([class^="button"]):not([class^="link-social"]){
        color:var(--color-white);
    }
}

@media (max-width:767.98px){
    #modalContatto form button{
        width: 100%;
        display: block;
    }
}

@media (max-width:575.98px){
    .footer .footer-logo{
        max-width: 150px;
    }
    .footer .section{
        padding-bottom: 30px;
    }
    .footer .link-list{
        padding:15px 0;
        margin: 15px 0;
        border-top:1px solid white;
        border-bottom:1px solid white;
    }
}


/* FIX FOR TOUCH DEVICES WHICH DON'T ALLOW HOVER */
@media (hover: none) and (pointer: coarse) {
    div[class^="hoverbox-"] .hover-content,
    div[class^="hoverbox-"] .content{
        position: static;
    }
    div[class^="hoverbox-"] img{
        position: absolute;
        z-index: -1;
    }
    .hoverbox-4{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .hoverbox-4::after{
        z-index: -1;
    }
    .hoverbox-4.bottom .hover-content{
        visibility: visible;
        opacity: 1;
        padding-top: 0;
    }
    .hoverbox-4.bottom .content{
        padding-bottom: 20px;
    }
    .hoverbox-4 .content, .hoverbox-4 .hover-content{
        color:var(--color-white);
    }
}