/* ! Reset */
body, html{ font-size: 16px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none; margin: 0}
body{background:#fff;}
html{scroll-behavior: smooth;}

/* ! Title System */
    .pre_title{color:#243c58; font-weight: bold;letter-spacing: 1px;text-transform: uppercase;}
    .text-0{font-size: 5rem; line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem; color:#5d7a8c}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul, span{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 3.5rem}
  h1, .text-sma-1{font-size: 2.2rem;}
  h2, .text-sma-2{font-size: 1.8rem;}
  h3, .text-3{font-size: 1rem;}
  h4, p, .text-4{font-size: 1rem;}

  h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}
}

/*  -----------------------------------------------------------------------------------------------
  ! HEADER
--------------------------------------------------------------------------------------------------- */

.header{width:100%; display: flex; justify-content: space-between; align-items: center;text-align:center;position: fixed; border-bottom: 1px solid #fff; background: #253c59; z-index: 999;}
.header__menu{display: block;text-align: center;align-items: center;width: 100%;}
.header__menu li{display: inline-block;position: relative; margin-left: 10px;}
.header__menu li ul{position: absolute; left: 0; width: 170px; display: none; visibility: hidden; text-align: left;}
.header__menu li ul li{width: 100%;}

/* Dropdown Icon Menu */
.header__menu li a{position: relative;}
.header__menu li.nav__sub-menu > a:after{content: " "; width: 16px; height: 16px; position: absolute; top: 50%; right: -8px; transform: translateY(-45%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
 background-size: 100%; overflow: hidden;
}

.header__menu li:hover > ul{display: block; visibility: visible;background: rgba(255,255,255,1);}
.header__menu ul{margin:0;}
.header__menu a{color:#fff;font-weight: normal; padding: 18px 10px; display: inline-block; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
.sub-menu a{color:#253c59}
.sub-menu li:hover{background: #bf8d30;}
.sub-menu li{margin:0;border-bottom:1px solid #024959;}

.header__logo{width: 100%;}
.header__logo img{width: 200px;padding: 10px;}


@media (max-width: 767px) {
  .header{display: flex; justify-content: center;}
  .header__hamburger{display: block; width: 40px;height: 35px; margin-top: 0;margin-right: 10px;}
  .header__hamburger span{width: 33px;height: 2px;background: #fff;margin-top: 8px;display: block; transition: all 0.15s cubic-bezier(.215, .61, .355, 1);}
  .header__menu{position:absolute; top: 75px; left:0; width: 100%;background: #253c59;height: 0;overflow: hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1); z-index: 999}
  .header__menu li{display: block; border-bottom: 1px solid #fff;padding: 5px; margin: 10px;text-align: left;}
  .header__menu li ul{position: relative;width: 100%; }
  .sub-menu li{margin:0; padding: 0; border: none;padding-left: 20px;background: #253c59;}
  .sub-menu a{color:#fff}

  .menu-open .header__hamburger span:nth-child(1){transform: translateY(9px) rotate(45deg);}
  .menu-open .header__hamburger span:nth-child(2){transform: translateY(-9px) rotate(-45deg);}

  .menu-open .header__menu{height: 100vh;}
  .menu-open{overflow:hidden;}
}

/* ! Button System */
.btn { font-style: 16px; text-transform: uppercase;font-weight: bold;background: #D09C43; color:#243c58; text-decoration: none;padding: 10px 15px; display: inline-block;margin:0 5px 20px 5px; border-radius: 4px;}
.btn:hover{background: #fff; color:#243c58;transition: 0.5s;}

.btn-body{background: #243c58; color:#fff;}
.btn-body:hover{background: #D09C43; color:#243c58;}

.btn-tr{background: transparent; color:#D09C43; border: 1px solid #D09C43}
.btn-tr:hover{border: 1px solid #fff;}

.btn-tr-blue{background: transparent; color:#D09C43; border: 1px solid #D09C43}
.btn-tr-blue:hover{border: 1px solid #243c58;}

/* ! Cover */
.cover{ display: flex; flex-flow: column;justify-content: center;align-items: center;
  width: 100%;height: 100vh;background: linear-gradient(0deg, rgba(0,0,0,0.2) 100%, rgba(0,0,0,0.2) 100%),
  linear-gradient(90deg, rgba(0,0,0,0.6) 30%, rgba(255,255,255,0) 34%), 
  url(../img/casa-sul-mare/cover.webp) no-repeat center center; background-size: cover;position:relative;}

  .cover-case{ display: flex; flex-flow: column;justify-content: center;align-items: center;
    width: 100%;height: 70vh;background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5) ),
    url(../img/.webp) no-repeat center center; background-size: cover;position:relative;}

/* -------------------------------------------------------------------------------- */
/* ! Gallery Grid */
/* -------------------------------------------------------------------------------- */
.gallery-grid{--gap: 16px; --num-cols: 4; --row-height: 300px; padding: var(--gap); display: grid; grid-template-columns: repeat(var(--num-cols), 1fr); grid-auto-rows: var(--row-height);
  gap: var(--gap);}
.gallery-grid a > img{width: 100%; height: 100%; object-fit: cover;}
.gallery-grid a{padding: 0;}
.gallery-grid-col-1{grid-column: span 1;}
.gallery-grid-col-2{grid-column: span 2;}
.gallery-grid-col-3{grid-column: span 3;}
.gallery-grid-row-2{grid-row: span 2}
.gallery-grid-row-3{grid-row: span 3}



@media screen and (max-width:1024px) {
  .gallery-grid{--num-cols: 2; --row-height: 200px}
}


/* ! Poster */
.poster{display: flex; width: 100vh;width:100%;}
.poster__img{width: 65%;height: 100%;}
.poster__content{width: 35%;padding:40px;}

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

@media (max-width: 768px) {
  .poster{flex-wrap: wrap;height:auto;}
  .poster__img, .poster__content{width: 100%;}
}

/* -------------------------------------------------------------------------------- */
/* ! Table Style */
/* -------------------------------------------------------------------------------- */
.table-service {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.83em;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.table-service thead tr {
  background-color: #243c58;
  color: #ffffff;
  text-align: center;
}

.table-service th,
.table-service td {
    padding: 12px 15px;
}

.table-service tbody tr {
  border-bottom: 1px solid #dddddd;
}

.table-service tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.table-service tbody tr:last-of-type {
  border-bottom: 2px solid #024959;
}

.table-service tbody th.yes-row{
  font-weight: bold;
  color: green;
}
.table-service tbody th.no-row{
  font-weight: bold;
  color: red;
}

@media (max-width: 768px) {
  .table-service{min-width:300px; font-size: 0.83em; }
}

/* -------------------------------------------------------------------------------- */
/* ! Form*/
/* -------------------------------------------------------------------------------- */

.form input, textarea{font-family: sans-serif; font-size: 1rem; margin: 5px auto; padding: 10px; border: 1px solid #ccc;border-radius:5px;background:#fff;width: 100%;opacity: 0.7;}
#nome{width:95%;}
#cognome{width:95%;}
#telefono{width: 95%;}
#email{width:95%}
#check-in{width:95%}
#check-out{width:95%}
#textarea{width:98%; height:100px;}
#newsletter{width:3%;margin:5px 0;}
#termini{width:3%; margin:5px 0;}
#bottone{ width: 50%;background: #fff; color:#024959; padding: 15px 30px; border-radius: 100px; font-weight: bold;border: 1px solid #ccc;}
#bottone:hover{background: #243c58; color:#fff; transition-duration: 0.5s;border: 1px solid #fff;}.g-recaptcha{width:10%;}

.bg-form{background: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('') no-repeat center right; background-size: cover;}

.status-msg{padding:20px; width: 100%; border: 2px solid fff; background: rgba(0, 255, 0, 0.5); border-radius: 5px; color: #fff;}

@media (max-width: 768px) {
  label, input{display: block;margin: 0;}
  #textarea{width:93%; height:100px; margin-left: 10px;}
  #newsletter{width:5%;margin-left:15px;}
#termini{width:5%; margin-left:15px;}
}


/* ! Footer */
.footer{background: #243c58;width: 100%; padding: 50px 0; color:#fff;position: relative;}
.footer a{color:#D09C43}
.logo-footer{width: 150px;}


/* -------------------------------------------------------------------------------- */
/* ! Grid Sistem */
/* -------------------------------------------------------------------------------- */
.grid { margin: 0 auto; padding: 50px 15px; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 15px;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-10{ width: 10%; }
.col-15{ width: 15%; }
.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-40{ width: 40%; }
.col-45{ width: 45%; }
.col-50{ width: 50%; }
.col-55{ width: 55%; }
.col-60{ width: 60%; }
.col-65{ width: 65%; }
.col-70{ width: 70%; }
.col-75{ width: 75%; }
.col-80{ width: 80%; }
.col-85{ width: 85%; }
.col-90{ width: 90%; }
.col-95{ width: 95%; }
.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%; }
}

/* ! Helpers  */

.shape-sx{clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
  width: 100%; height: 100px; background: #fff; position:absolute; bottom: 0;}
.shape-dx-blue{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  width: 100%; height: 100px; background: #fff; position:absolute; top: -1px;}

/* Palette Helper */

.text-white{color: #fff;}
.text-black{color:#000;}
.text-primo{color:#243c58;}
.text-secondo{color:#5d7a8c;}
.text-terzo{color:#99b4bf;}
.text-quarto{color:#d9b70d;}
.text-quinto{color:#D09C43;}

.bg-white{background: #fff;}
.bg-black{background: #111;}
.bg-primo{background:#243c58;}
.bg-secondo{background:#5d7a8c;}
.bg-terzo{background:#99b4bf;}
.bg-quarto{background:#d9b70d;}
.bg-quinto{background:#D09C43;}

.social-icon{width: 100%;margin: 0 0;}
.social-icon li{display: inline-block;width: 40px; filter:invert(1);padding:10px;}


.icon-small{width: 50px; padding: 5px;}
.icon-yellow{background-color: #fdb813; border-radius: 10px;}


.br{border: 1px solid red;}
.border-radius{border-radius: 20px;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 500px;object-fit: cover;}

.spacer{height: 100px;}

@media (max-width: 768px) {
  .sma-reverse{flex-flow: column-reverse;padding:0;margin:0;}
  .sma-none{display:none;}
}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}
.mt-5{margin-top: 8rem;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}


.bg-blue-tr{background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(17,40,85,1) 35%, rgba(0,212,255,1) 100%);}

/* Effect Helper */
.shadow-rb{box-shadow: 10px 10px 20px 2px #111;}
.shadow-lb{box-shadow: -10px 10px 20px 2px #111;}


/* Text Helper */
.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}
.text-justify{text-align: justify;}

.center{display: flex; flex-flow: column; align-items: center;}
.left{display: flex; flex-flow: column; align-items: flex-start;}
.right{display: flex; flex-flow: column; align-items: flex-end;}

.v-center{display: flex;flex-flow: column;justify-content: center;}


.hr-white{border:none; border-bottom: 3px solid #fff; width:20px;}

.p-0{padding: 0;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}
.pt-5{padding-top: 100px;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}
.pb-5{padding-bottom: 100px;}