@font-face {
  font-family: RobotoSlab-Light;
  src: url('./../font/RobotoSlab-Light.ttf')
}

@font-face {
  font-family: RobotoSlab-Bold;
  src: url('./../font/RobotoSlab-Bold.ttf')
}

@font-face {
  font-family: Channel;
  src: url('./../font/Channel_Left-Slanted.ttf')
}

@font-face {
  font-family: Raleway;
  src: url('./../font/Raleway-Light.ttf')
}

@font-face {
  font-family: Channel;
  src: url('./../font/Channel_Left-Slanted.ttf')
}

.FontMenu {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 25px
}

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #05506d;
  font-family: Raleway, arial, sans-serif
}

.btn-primary-outline {
  color: orange;
  border-color: #f5a637;
  background-color: trasparent
}

.btn-primary-outline:hover {
  color: #fff;
  border-color: #ed8f0c;
  background-color: orange
}

.arancione {
  color: orange;
}

.btn-arancione {
  color: #fff;
  background-color: orange;
  border-color: orange;
}

.btn-marrone {
  color: #fff;
  background-color: #05506d;
  border-color: #05506d;
}

footer a {
  color: #fff
}

footer a:hover {
  color: orange
}

footer h6 {
  color: orange
}

#services a {
  color: #05506d
}

#services a:hover {
  color: orange
}

.nav-item a {
  color: #fff
}

.nav-item a:hover {
  color: orange
}

nav a {
  color: #fff
}

nav a:hover {
  color: orange
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #05506d;
  background-color: #fff;
  font-weight: 700
}

.nav-pills .nav-link {
  border-radius: .1rem
}

h7 {
  font-family: Raleway;
  font-size: 18px
}

.bg-dark {
  background-color: #05506d !important
}

.navbar-nav {
  font-size: 15px
}

.navbar {
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}

.gastro {
  font-family: Raleway
}

.payoff {
  font-family: Channel;
  padding-top: 40px;
  padding-bottom: 70px
}

.favebianche-fcolor {
  color: #05506d !important
}

.footer-fcolor {
  color: #ffff
}

.social-icons {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0
}

.copyright {
  text-align: center;
  margin-top: 10px;
  font-size: 15px
}

.hr-white {
  background-color: #fff
}

.menu-tabs {
  background-color: #05506d;
  text-align: center !important
}

.menu-hr {
  border-top: 1px dotted
}

.section_gray {
  background-color: #f0f0f0;
  padding-top: 20px;
  padding-bottom: 20px
}

.gallery .card {
  padding-bottom: 0
}

#myCarousel {
  overflow: hidden;
  position: relative;
}

.carousel {
  margin-bottom: 4rem
}

.carousel-caption {
  bottom: 3rem;
  z-index: 10
}

.carousel-item {
  height: 32rem;
  background-color: #777
}

.carousel-item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem
}

.prenota-image {
  max-width: 90%;
  height: auto
}

.parallax {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)), url(../img/immergiti.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  width: 100%;
  padding: 150px 0;
  text-align: center !important;
  color: #ffff
}

.parallax2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)), url(../img/team.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  width: 100%;
  padding: 150px 0;
  text-align: center !important;
  color: #ffff
}

.parallaxLocation {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6)), url(../img/immergiti.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  width: 100%;
  padding: 150px 0;
  text-align: center !important;
  color: #ffff
}

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center
}

.marketing h2 {
  font-weight: 400
}

.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem
}

.z-depth-1-half {
  -webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%) !important;
  box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%) !important
}

.mb-5 {
  margin-bottom: 3rem !important
}

.card-img-top {
  width: 196px;
  height: 196px;
}

.payoff {
  font-family: Channel;
  font-size: 14px;
  padding-top: 40px;
  padding-bottom: 70px
}

/*.navbar-brand{
  margin-left:3rem!important
}*/

.featurette-divider {
  margin: 5rem 0
}

.card-shadow {
  -webkit-box-shadow: 0 3px 10px rgb(0 0 0 / 40%);
  -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
  box-shadow: 0 3px 10px rgb(0 0 0 / 40%);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px
}

.card {
  margin: 0 10px;
  padding-bottom: 20px;
  border: 1px solid #efefef
}

.card-footer {
  padding: none;
  border-top: none;
  background-color: #fff
}

.mappa {
  padding: 0%;
}



@media (min-width:40em) {
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4
  }
}

@media (min-width:767px) {
  .NoImgDesktop {
    display: none
  }
}

@media (max-width:767px) {
  .NoImgMobile {
    display: none
  }

  .nav {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important
  }

  .map-container iframe {
    height: 30em;
    width: 100%;
  }

  .mappa {
    margin-top: 20px;
    margin-left: 5px;
  }
}

@media (min-width:768px) {
  .map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }

  .mappa {
    margin: 5px 5px 5px 20px;
  }
}

.navbar-tool-label {
  position: absolute;
  top: -0.01rem;
  right: 0.41rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #fe696a;
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.25rem;
}

.FontCouponBold {
  font-family: RobotoSlab-Bold;
  font-size: 18px
}

.FontCouponMax {
  font-family: RobotoSlab-Bold;
  font-size: 26px;
  color: #fe696a;
}

.FontCouponLight {
  font-family: RobotoSlab-Light;
  font-size: 15px
}

/* Carrello */
/* Overlay dietro il pannello carrello */
#cartOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1040;
}
#cartOverlay.open {
  opacity: 1;
  visibility: visible;
}

/* Pannello carrello off‑canvas */
#cartPanel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  transition: right 0.3s ease-in-out;
  z-index: 1050;
}
@media (min-width: 576px) {
  #cartPanel {
    width: 320px;
  }
}
#cartPanel.open {
  right: 0;
}

/* Header e footer “sticky” */
.offcanvas-header,
.cart-footer {
  position: sticky;
  background-color: #fff;
  z-index: 1060;
}
.offcanvas-header {
  top: 0;
  border-bottom: 1px solid #e9ecef;
}
.cart-footer {
  bottom: 0;
  border-top: 1px solid #e9ecef;
  padding: 1rem;
}

/* Stile degli articoli del carrello */
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cart-item + .cart-item {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e9ecef;
}

.cart-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.cart-info {
  flex-grow: 1;
  min-width: 0;
}

.cart-name {
  font-weight: bold;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-price {
  font-size: 0.85rem;
  color: #666;
}

.cart-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Pulsanti personalizzati */
.btn-custom-blue {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background-color: #05506d;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  text-align: center;
}
.btn-custom-blue:hover,
.btn-custom-blue:focus {
  background-color: #043f53;
  color: #fff;
  box-shadow: none;
}
/* Menu */
#Menu a.text-dark {
  text-decoration: none;
  transition: color 0.3s;
}

#Menu a.text-dark:hover {
  color: #007bff;
  text-decoration: none;
}