/* -------------------------------------------------------------------------------- */
/* ! Base */
/* -------------------------------------------------------------------------------- */

html, body{height: 100vh;}
body{color:#8b6a36;font-family: Lato}

/* ! Transitions */

.transition-fade {  transition: 0.4s;  opacity: 1; transform: translateY(0px); }
html.is-animating .transition-fade { opacity: 0; transform: translateY(250px); }

.preloader{background: #B8B1A6 url('img/oval.svg') no-repeat center center; background-size: 200px;  position: fixed;top:0;left:0;width: 100%;height: 100%;z-index: 9999;}

@font-face {
  font-family: 'Neue Montreal';
  src: url('fonts/NeueMontreal-Medium.woff2') format('woff2'),
  url('NeueMontreal-Medium.woff') format('woff');
}

.scroll-container{overflow:hidden;}
.container{ margin: 0 auto; max-width: 1200px;}
.grid{padding: 0 20px;}


/* ! Typography */

p {
  padding-right: 40px;
  font-size: 18px;
  line-height: 28px;
}

@media (max-width: 768px) {
  p {
    padding-right: 0;
  }
}

.headline{font-size: 90px;margin: 0 0 20px 0; font-family: 'Neue Montreal';}
.title{font-size: 50px;margin: 0 0 20px 0; font-family: 'Neue Montreal';}
.subtitle{font-size: 25px;margin: 0 0 20px 0; font-family: 'Neue Montreal';}

@media (max-width: 768px) {
  .headline{font-size: 50px;}
  .title{font-size: 25px;}
  .subtitle{font-size: 20px;}
}

/* ! Helpers */

.margin-top{margin-top: 50px!important;}
.margin-bottom{margin-bottom: 50px!important;}
.margin-top-big{margin-top: 150px!important;}
.margin-bottom-big{margin-bottom: 150px!important;}
.img-res{width: 100%;}
.padding-all{padding: 20px;}

/* ! Animations */

.fade-left{opacity: 0; transition: all 1s cubic-bezier(.215, .61, .355, 1); transform: translateX(-30%);transition-delay: 0.5s}
.fade-left.is-inview{opacity: 1;transform: translateX(0px)}

.fade-right{opacity: 0; transition: all 1s cubic-bezier(.215, .61, .355, 1); transform: translateX(30%);transition-delay: 0.5s}
.fade-right.is-inview{opacity: 1;transform: translateX(0px)}

.fade-up{opacity: 0; transition: all 1s cubic-bezier(.215, .61, .355, 1); transform: translateX(-10%);transition-delay: 0.5s}
.fade-up.is-inview{opacity: 1;transform: translateX(0px)}

.fade-down{opacity: 0; transition: all 1s cubic-bezier(.215, .61, .355, 1); transform: translateX(10%);transition-delay: 0.5s}
.fade-down.is-inview{opacity: 1;transform: translateX(0px)}

.fade{opacity: 0; transition: all 1s cubic-bezier(.215, .61, .355, 1); transition-delay: 0.5s}
.fade.is-inview{opacity: 1;}

.reveal-top{height: 0; overflow: hidden; transition: all 1.5s cubic-bezier(.215, .61, .355, 1); transition-delay: 0.5s}
.reveal-top.is-inview{height: 100%;}

.reveal-left{width: 0; overflow: hidden; transition: all 1.5s cubic-bezier(.215, .61, .355, 1); transition-delay: 0.5s}
.reveal-left.is-inview{width: 100%;}

.zoom-in{opacity: 0; transform:scale(1.2); transition: all 1s cubic-bezier(.215, .61, .355, 1); transition-delay: 0.5s}
.zoom-in.is-inview{opacity: 1;transform:scale(1);}

.text-reveal{overflow: hidden;display: block;}
.text-reveal b{display: inline-block;will-change: transform; transform: translate3d(0,100%,0); transition: all 1.2s cubic-bezier(.4, .0, .0, 1);}

.text-reveal.is-inview b{transform: none;}


.delay-1{transition-delay: .1s!important}
.delay-2{transition-delay: .2s!important}
.delay-3{transition-delay: .3s!important}
.delay-4{transition-delay: .4s!important}
.delay-5{transition-delay: .5s!important}
.delay-6{transition-delay: .6s!important}
.delay-7{transition-delay: .7s!important}
.delay-8{transition-delay: .8s!important}
.delay-9{transition-delay: .9s!important}
.delay-10{transition-delay: 1s!important}
.delay-15{transition-delay: 1.5s!important}
.delay-20{transition-delay: 2s!important}


/* ! header */

.fixed{position: fixed;z-index: 10;width: 100%;}
.header{display: flex; justify-content: space-between;width: 100%;top:0; margin: 0 auto; background-color: #173549; opacity: 80%;}

.header__icon{display: none;width: 130px;position: relative;color:#fff;}

.header__cta,
.header__logo{width: 130px;}

.header__cta .button{width: 100%;}


.site-nav{padding: 0;list-style-type: none;position: relative;}
.site-nav > li {display: inline-block;}
.site-nav > li a{display: block;padding: 20px; color:#000; opacity: 0.5; text-decoration: none;}
@media (min-width: 768px) {
  .has-cover .site-nav > li a{color:#B8B1A6;}
}

.logo{display: block;padding: 10px;text-align: center;margin-top: 15px;}

/* Active state */
.header__menu{position: relative;}
.line-menu{position: absolute;height: 2px; background: #fff; bottom:10px;}
.active a{opacity: 1!important}

@media (max-width: 768px) {
  .line-menu{display: none;}
}


/* ! Button */

.button{display: inline-block;color:#000; border: 3px solid #000; padding: 10px 20px;margin-top: 15px;text-align: center;position: relative;overflow: hidden;transition: all 0.3s cubic-bezier(0.28, 0.44, 0.49, 1);}
.button:before{content: ' '; width: 100%; height: calc(100% + 0.2rem); background: #000; z-index: -1;position: absolute; bottom: 0; left: 0; transform: translateY(100%);transition: all 0.3s cubic-bezier(0.28, 0.44, 0.49, 1);}
.button:hover:before{transform: translateY(0%);}
.button:hover{color:#B8B1A6!important;}

.button_2 { 
  font-size: 12px; text-transform: uppercase; background: #e6d8c2; color:#483203;
  text-decoration: none;padding: 14px 25px; display: inline-block;
  border-radius: 4px; font-weight: 700; text-align: center; width: 90%;
}
.button_2:hover{ background: #f4d4a2; }

@media (max-width: 768px) {
  .button{font-size: xx-small; width: 100%;text-transform: uppercase; background: #B8B1A6; color:#483203;
    text-decoration: none;padding: 10px 14px; display: inline-block;
    border-radius: 4px; font-weight: 700; text-align: center;}
}

@media (max-width: 768px) {
  .button_2{font-size: xx-small; width: 100%;text-transform: uppercase; background: #B8B1A6; color:#483203;
    text-decoration: none;padding: 10px 14px; display: inline-block;
    border-radius: 4px; font-weight: 700; text-align: center;}
}


/* ! Scroll Down */
.scroll-down-icon{width: 100px; height: 100px;position: absolute;bottom: 0; left:50%; margin-left: -50px;display: block;}
.line-center{background: #fff; width: 3px; height: 0px; opacity: 0;position: absolute;left:50%; margin-top: 10px; animation: vertical_line_growth 4s cubic-bezier(.215, .61, .355, 1) infinite; }
.line-center span{position: absolute;bottom:-20px;width: 100px;display: block;left:-50px;text-align: center;color:#fff; text-transform: uppercase;font-size: 11px;}

@keyframes vertical_line_growth {
  0% { height: 0; opacity: 0;}
  20% { height: 0; opacity: 0;}
  40% { height: 0; opacity: 1;}
  60% { height: 30px; opacity: 1;}
  80% { height: 30px; opacity: 1;}
  100% { height: 30px; opacity: 0;}
}


/* Has Cover */

.has-cover .header .button{color:#fff; border-color: #fff}
.has-cover .logo{filter: invert(1);}
.scroll-down.has-cover .site-nav > li a{color:#000;}
.scroll-down.has-cover .header .button{color:#000; border-color: #000}
.scroll-down.has-cover .logo{filter: invert(0);}


@media (max-width: 768px) {

  .header__icon{display: block;}
  .header__menu{position: absolute;top:0; left:0; width: calc(100% - 130px); height: 100vh;background: #B8B1A6; transform: translateX(-100%);transition: all 1s cubic-bezier(.215, .61, .355, 1);}
  .header__menu--open{ transform: translateX(0%);}
  .site-nav li{width: 100%;}
  .site-nav li a{width: 100%;display: block;color:#000;font-size: 23px;}

  .icon-hamburger{ width: 30px;height: 30px;position: absolute;top:20px; right:20px}
  .icon-hamburger span {height: 4px;width: 100%; position: absolute; background: #000; top: 11px; transition: all 0.2s ease-in-out;}
  .icon-hamburger span:before,
  .icon-hamburger span:after{height: 4px;width: 100%; position: absolute; background: #000; content: ' '; margin-top: -10px; transition: all 0.3s cubic-bezier(.215, .61, .355, 1);}
  .icon-hamburger span:after{margin-top: 10px}

  .has-cover .icon-hamburger span,
  .has-cover .icon-hamburger span:before,
  .has-cover .icon-hamburger span:after{background: #B8B1A6;}

  .icon-hamburger--open span{background: transparent!important;}
  .icon-hamburger--open span:before{transform: rotate(45deg);margin-top: 0;}
  .icon-hamburger--open span:after{transform: rotate(-45deg);margin-top: 0;}

  .scroll-down .icon-hamburger span,
  .scroll-down .icon-hamburger span:before,
  .scroll-down .icon-hamburger span:after{background: #B8B1A6;}

  .logo{width: 40px;overflow: hidden;}

}


/* ! Cover */

.cover{height: 100vh;position: relative; background: #333;display: flex; width: 100%; align-items: center;z-index: 0}
.cover__content{color:#fff; padding: 20px;width: 100%; text-align: center;position: relative; z-index: 1}

/* Riduce esclusivamente il file logo_b.png */
.cover__content img[src="img/logo_b.png"] {
    width: 300px;      /* Imposta qui la dimensione desiderata */
    height: auto;      /* Mantiene le proporzioni */
    display: block;
    margin: 20px auto 0; /* Centra il logo e aggiunge spazio sopra */
}

.cover:before{content: ' ';width: 100%;height: 100%;background: #000;position: absolute;top:0; left:0; z-index: 0; opacity: 0.5}

/* ! intro text */

.intro-text{padding: 150px 0 50px 0;}
.intro-text h1{ min-width: 700px;}

/* ! Panel */

.panel{padding: 50px 0; background: #eee; position: relative;}
.panel__img img{height: 80vh; width: 100%;max-width: 550px; display: block; margin: 0 auto;object-fit: content; border-radius:15px;}
.panel__img__short img{height: 70vh; width: 100%;max-width: 550px; display: block; margin: 0 auto;object-fit: cover; border-radius:15px;}
.panel__img__small img{height: 35vh; width: 100%;max-width: 550px; display: block; margin: 0 auto;object-fit: cover; margin-top: 15px; border-radius:15px;}
.panel__text{max-width: 550px; display: flex; width: 100%; height: 100%; align-items: center;padding: 20px;}

/* ! Footer */
.footer{position: relative; margin-top: 50px;;}
.footer__logo{width: 150px;height: auto;}
.horizontal-separator{height: 2px;width: calc(100% - 180px);position: absolute;top: 10px; right: 0;background: #000;}
.footer__final-text{text-align: center;margin-top: 80px;}




/* ! Grid System */

.grid { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}

.col{ flex: 1;}

[class*='col-'] { position: relative;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-40{ width: 40%; }
.col-50{ width: 50%; }
.col-60{ width: 60%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-90{ width: 90%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {

  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-50 { width: 50%; }
  .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
  [class*='col-'] { width: 100%;}
  .sma-20 { width: 20%; }
  .sma-25 { width: 25%; }
  .sma-33 { width: 33.33%; }
  .sma-50 { width: 50%; }
  .sma-100 { width: 100%; }

  .sma-hide{display:none}
}

.cucina-title {
    text-align: center;
    margin-right: 50px !important;
}

@media (max-width: 768px) {
    .cucina-title {
        text-align: center;
        margin-right: 0 !important;
    }
}

.ospitalità-title {
    text-align: center;
    margin-right: 50px !important;
}

@media (max-width: 768px) {
    .ospitalità-title {
        text-align: center;
        margin-right: 0 !important;
    }
}

.relax-title {
    text-align: center;
    margin-right: 50px !important;
}

@media (max-width: 768px) {
    .relax-title {
        text-align: center;
        margin-right: 0 !important;
    }
}

/* cookye */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 900px;
  margin: 0 auto;
  background: rgba(34, 34, 34, 0.96);
  color: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 99999;
  font-family: 'Lato', sans-serif;
}

.cookie-content p {
  margin: 0 0 15px 0;
  line-height: 1.6;
  font-size: 15px;
}

.cookie-content a {
  color: #d6b06a;
  text-decoration: none;
  font-weight: 700;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-buttons button {
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: 0.3s;
}

#accept-cookies {
  background: #d6b06a;
  color: #222;
}

#accept-cookies:hover {
  opacity: 0.9;
}

#reject-cookies {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

#reject-cookies:hover {
  background: rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 20px;
  }

  .cookie-buttons {
    flex-direction: column;
  }

  .cookie-buttons button {
    width: 100%;
  }
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}