#hero{
    background-color: #57A693;
    color: #fff;
    height: 105vh;
}
#hero h2,
#hero h1{
    color: #fff;
}

#hero h1{
  text-transform: uppercase;
}

.box-mutuo{
    margin-bottom: 40px;
}

.box-mutuo .img_mutuo{
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    height: 80px;
}

.box-mutuo h4{
    font-size: 20px;
    font-weight: normal;
    margin: 20px 0;
}

.box-mutuo a.btn-mutuo-info{
    display: block;
    width: 100%;
    text-decoration: none;
    background-color: #e9d449;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 0;
}

#mutuo1 .img_mutuo{
    background-image: url(landing-a/img/mutuo1.png);
}

#mutuo2 .img_mutuo{
    background-image: url(landing-a/img/mutuo2.png);
}

#mutuo3 .img_mutuo{
    background-image: url(landing-a/img/mutuo3.png);
}

#mutuo4 .img_mutuo{
    background-image: url(landing-a/img/mutuo4.png);
}


#mutuo5 .img_mutuo{
    background-image: url(landing-a/img/mutuo5.png);
}

#mutuo6 .img_mutuo{
    background-image: url(landing-a/img/mutuo6.png);
}

#mutuo7 .img_mutuo{
    background-image: url(landing-a/img/mutuo7.png);
}

#mutuo8 .img_mutuo{
    background-image: url(landing-a/img/mutuo8.png);
}




#box_form {
    background: #596e79;
}

#prenotazione #prenota,
form div button{
    background: #e9d449;
}
#sez5,
#prenotazione,
.testimonials{
    background: #57A693;
}

#star_recensioni a i.active,
.testimonials .testimonial-item h3{
    color: #e9d449;
}
#sez5 h1,
#sez5 p,
.about h3, .services h3, .testimonials h3,
#star_recensioni a,
.testimonials .testimonial-item p,
.testimonials .testimonial-item {
    text-align: center;
    color: #fff;
}
.about,
#prenotazione h1,
#sez5 ul li{
    color: #596e79;
}



#sez5 ul li span{
     color: #e9d449;
}


.about h4{
  margin: 40px 0 10px;
  font-size: 40px;
}

.prenota,
#prenotazione #prenota{
        background: #e9d449;
    font-size: 15px;
    margin: 10px 0 20px;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;
    width: 680px;
    font-size:30px;
    margin: 20px auto;
    text-align: center;
}

.prenota{
  background: #e9d449;
}


.prenota:hover{
  color: #fff;
}

@media (max-width:700px){
    .prenota, #prenotazione #prenota{
        width: 100%;
    }
}

#sez6{
    text-align: center;
    color: #596e79;
}

#footer .copyright{
     width: 100%;
    margin: 0 auto 20px;
    text-align: center;
    float: none;
}

.swiper-button-next, .swiper-button-prev{
  top: 5%;
  font-size:13px !important;
}

@media(max-width:800px){
  .swiper-button-next, .swiper-button-prev{
    display: none !important;
  }
}


.section-title h4.number_p{
  position: relative;
  font-size: 20px;
  text-align: center;
      width: 100%;
    padding: 60px 0 0 0px;
    margin: 40px 0;
}

.section-title h4.number_p:after{
  position: absolute;
  top:0;
  left: 0;
  text-align: center;
  width: 100%;
  content: "1";
  color: #77b255;
  font-size: 60px;
  font-weight: bold;
  line-height: 60px;
}

.section-title h4.number_p2:after{
  content: "2";
}

.section-title h4.number_p3:after{
  content: "3";
}

.avviso_popup a{
  bottom: 30%;
}

.form-control{
  padding: .175rem .75rem;
}

section .section-title h2,
section h2{
      text-transform: uppercase;
    font-size: 30px;
        text-align: center;
    color: #e9d449;
        margin: 0 0 30px;
        background: none;
        display: block;
}


section .section-title h3,
section h3{
      text-transform: uppercase;
    font-size: 24px;
        text-align: center;
    color: #fff;
        margin: 0 0 30px;
        background: none;
        display: block;
}

#sez5 h4{
  color: #fff;
  display: block;
    padding: 0;
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 25px;
    display: inline;
    font-weight: bold;
}

select.form-control{
  color: #596E79;
  position: relative;
}


select.form-control:after {
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
       font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0da";
       display: block;
       position: absolute;
    }
    
    .icon-select{
          display: block;
    width: 10px;
    position: absolute;
    top: 6px;
    right: 20px;color: #596E79;
    width: 10px;
    height: 14px;
    overflow: hidden;
    font-size: 17px;
    }
    .swiper-button-next, .swiper-button-prev{
      color: #e9d449;
    }
    
    
    .testimonials{
      max-height: 350px;
    }
    
  section.about .section-title  h3{
    margin: 30px 0 20px;
}

@media (max-width:1200px) {
  #hero h2{
    font-size:24px !important;
  }
}

@media (max-width:990px){
  #hero {
    background-color: #57A693;
    color: #fff;
    height: 105vh;
    max-height: 100000000px;
    height: 2000px;
}

#hero #compilaa{
  text-align: center;
}
  #prenota,
  .prenota {
      background: #e9d449;
      font-size: 15px !important;
  }
}

#CookiebotWidget:focus-visible, #CookiebotWidget:not(.CookiebotWidget-open) .Cookiebotwidget-logo{
      outline: 0 !important;
    outline-offset: 0;
}


@media (max-width: 768px){
  #hero .container {
    height: 100%;
    padding: 0 5px;
  }
  
  #box_form{
    padding: 15px;
  }
  
  #hero{
    height: 1750px;
  }
  
  .testimonials {
    max-height: 650px;
}
.swiper-wrapper{
  height: 400px;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active{
  background-color: #2cbe9a;
}
}


.view-mobile{
  display: none;
}

@media(max-width:800px){
  .view-mobile{
  display: block;
}
.view-footer{
  display: none;
}
}



.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
    color: #4caf50f2;
}

.navbar > ul > li > a:before{
  background-color: #4caf50f2;
}

.verde{
  color: #e9d449 !important;
}

.bianco{
  color: #fff !important;
}


@media only screen and (max-width: 1200px) and (orientation: portrait) {
  #hero{
     height:1420px !important;
  }

  #prenota, .prenota {
     font-size: 25px !important;
  }

  .box-mutuo a.btn-mutuo-info {
     font-size: 20px !important;
  }

  .testimonials{
    min-height: 400px !important;
  }
  #star_recensioni,
  #testimonials .container{
      max-width:1000px !important;
  }
  #sez5 h1, #sez5 p, .about h3, .services h3, .testimonials h3, #star_recensioni a, .testimonials .testimonial-item p, .testimonials .testimonial-item{
    padding:0 30px;
  }
}


@media only screen and (max-width: 800px) and (orientation: portrait) {
  #hero{
    height:1680px !important;
 }
}

@media only screen and (max-width: 400px) and (orientation: portrait) {
    #hero{
      height:1880px !important;
   }
  }