@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Lilita+One&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500&family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/neutraface-text');
    .container_booking{
    display: flex;
    position: relative;
    width: 1370px !important;
    flex-direction: row;
    height:auto;
    border: 1px solid rgb(231, 231, 231) !important;
    background: #ffffff ;
    margin: 0px auto;
    margin-top: -50px;
    padding: 30px 15px;
    text-align: center;
    -webkit-box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
    -moz-box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
    box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
    z-index: 10;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
  }
  .img_res{
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
     }

  .col_sx_book{
    width: 50%;
    border-right: 1px dashed #ccc;
    padding-right: 20px;
  }
  .col_dx_book{
    width: 50%;
    background-color: white;
    padding-left: 20px;
  }
  .col_dx_book h2{
    font-family: 'Neutraface Text', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: #52585c;
    padding-left: 4px;
    text-align: left;
    margin-bottom: 10px;
  }

  .col_dx_book h4{
    font-family: 'Neutraface Text', sans-serif ;
          font-weight: 700;
          font-size: 1.2rem;
          color:#4f91b3;
          padding:4px;
  }

  .col_dx_book p{
    font-family: 'Neutraface Text', sans-serif ;
          font-weight: 400;
          font-size: 1rem;
          color:#60696d;
          padding:4px;
          text-align: left;
  }
  hr.new1 {
    border-top: 1px solid rgb(211, 208, 208);
    width: 80px;
    margin: 0 auto;
    margin-bottom: 8px;
    margin-top: 8px;
  }
  .policy_mob {
    display: none;
}
.policy_mob a {
    font-weight: 700;
    font-size: 0.9rem;
    color: #4f91b3;
    text-transform: none;
}
.policy_mob a:hover {
    font-weight: 700;
    font-size: 0.9rem;
    color:#213844;
    text-transform: none;
  }

  .all
  {
    display: flex;
    width: 100%;
    height:auto;
    flex-direction: row;
  }
  .condizioni_policy a {
    font-weight: 700;
    font-size: 0.9rem;
    color: #4f91b3;
    text-transform: none;
}
.condizioni_policy a:hover {
  font-weight: 700;
  font-size: 0.9rem;
  color:#213844;
  text-transform: none;
}
  .cont-b
  {
    display: flex;
    width: 100%;
    height:auto;
    flex-direction: column;
    text-align: center !important;
  }
  .cont-b h5 {
    display: flex;
    text-align: center;
    height: auto;
    flex-direction: column;
    padding: 10px;
    padding-bottom: 10px;
    padding-top: 25px;
    color: rgb(19, 73, 99);
    font-family: 'Neutraface Text', sans-serif;
    font-size: 2.2em;
    font-weight: 600;
}
#desk_img{
    display: block;

  }
  #mob_img{
    display: none;

  }
  .cont-b h3
  {
    display: flex;
    text-align: left;
    height:auto;
    flex-direction: column;
    padding: 10px;
    padding-bottom: 15px;
    padding-top: 25px;
    color: rgb(19, 73, 99);
    font-family: 'Neutraface Text', sans-serif ;
  font-size: 1.7em;
  font-weight: 600;
      }
      #Reservation-zungu{
        display: none;
    
      } 
 /* Style of tab */   
      .tab {
     overflow: hidden;
     border: 0px solid #b3c5d5;
     background-color: rgb(66, 166, 211);
    margin-top: 20px;
    border-top-right-radius: 45px;
          }

          .closebtn{
            overflow: hidden;
            border: 0px solid #b3c5d5;
            background-color: rgb(66, 166, 211);
            color:#ffffff;
           margin-top: 20px;
           padding: 15px 45px;
           cursor: pointer;
           font-family: 'Neutraface Text', sans-serif ;
           text-transform: uppercase;
           border-radius: 25px;
           transition: all ease-in 0.4s;
                 }
                 .closebtn:hover{
                    overflow: hidden;
                    border: 0px solid #b3c5d5;
                    background-color: rgb(13, 50, 66);
                    color:#ffffff;
                   margin-top: 20px;
                   padding: 15px 45px;
                   cursor: pointer;
                   font-family: 'Neutraface Text', sans-serif ;
                   text-transform: uppercase;
                   border-radius: 25px;
                         }
      
      /* Style the buttons inside the tab */
      .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        color: white;
        font-family: 'Neutraface Text', sans-serif ;
  font-size: 1.1em;
  text-transform: uppercase;
  background-color: #16313d;
      }
      
      /* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #97bcdb;
      }
      
      /* Create an active/current tablink class */
      .tab button.active {
        background-color: #16313d;
      }

      /* Style the tab content */
      .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
      }
      .tabcontent {
        animation: fadeEffect 1s; /* Fading effect takes 1 second */
      }
      .tabcontent a {
        font-weight: 700;
        font-size: 0.9rem;
        color:#4f91b3;
        text-transform: none;
         }
      .tabcontent a:hover {
        font-weight: 700;
        font-size: 0.9rem;
        color:#213844;
        text-transform: none;
      }
      /* Go from zero to full opacity */
      @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
      }
      @media screen and (max-width: 520px) {
        .container_booking {
            display: flex;
            position: relative;
            width: 100% !important;
            flex-direction: row;
            height: auto;
            border: 1px solid rgb(231, 231, 231) !important;
            background: #ffffff;
            margin: 0px auto;
            margin-top: -50px;
            padding: 30px 5px;
            text-align: center;
            -webkit-box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
            -moz-box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
            box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
            z-index: 10;
            border-top-right-radius: 7px;
            border-top-left-radius: 7px;
        }
        
        .cont-b h3 {
    display: flex;
    height:auto;
    flex-direction: column;
    padding: 10px;
    padding-bottom: 10px;
    color: rgb(19, 73, 99);
    font-family: 'Neutraface Text', sans-serif ;
  font-size: 1.5em;
  font-weight: 700;
      }
      .hero-img-book-beach{
        position: relative;
        height: 100vh;
        display: flex;
        /* top: -75px; */
        align-items: center;
        justify-content: center;
         background-image: url('images/book_beach_mob.jpg');
         background-size: cover;
      }
      .all {
        display: flex;
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    .col_sx_book {
        width: 100%;
        border-right: 0px dashed #ccc;
        padding-right: 0px;
    }
    .col_dx_book {
        width: 100%;
        background-color: white;
        padding-left: 0px;
    }
    .cont-b h5 {
        display: flex;
        text-align: center;
        height: auto;
        flex-direction: column;
        padding: 10px;
        padding-bottom: 15px;
        padding-top: 25px;
        color: rgb(19, 73, 99);
        font-family: 'Neutraface Text', sans-serif;
        font-size: 1.5em;
        font-weight: 700;
    }
    .tab {
        overflow: hidden;
        border: 1px solid #b3c5d5;
        background-color: rgb(66, 166, 211);
        margin-top: 20px;
        border-top-right-radius: 0px;
    }
    .col_dx_book h2 {
        font-family: 'Neutraface Text', sans-serif;
        font-weight: 700;
        font-size: 1.4rem;
        color: #52585c;
        padding: 9px;
        margin-top: 25px;
        text-align: center !important;
    }
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        color: white;
        font-family: 'Neutraface Text', sans-serif;
        font-size: 1.1em;
        width: 100%;
        text-transform: uppercase;
        background-color: #16313d;
    }
    #desk_img{
        
    display: none;
      }
      #mob_img{
        display: block;
    
      }
      .tab {
        display: none;
    }
    .policy_mob {
        display: block;
    }
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 0px solid #ccc;
        border-top: none;
    }
    .policy_mob h3 {
        display: flex;
        height: auto;
        flex-direction: column;
        text-transform: uppercase;
        padding: 10px;
        padding-bottom: 10px;
        color: rgb(19, 73, 99);
        font-family: 'Neutraface Text', sans-serif;
        font-size: 1.2em;
        font-weight: 700;
        margin-top: 10px;
    }
    .col_dx_book p {
        font-family: 'Neutraface Text', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        color: #60696d;
        padding: 10px;
        text-align: center;
    }
    
    }
   
       
    @media only screen 
    and (min-device-width: 820px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) {
        .container_booking {
            display: flex;
            position: relative;
            width: 100% !important;
            flex-direction: column;
            height: auto;
            border: 1px solid rgb(231, 231, 231) !important;
            background: #ffffff;
            margin: 0px auto;
            margin-top: -50px;
            padding: 30px 15px;
            text-align: center;
            -webkit-box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
            -moz-box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
            box-shadow: -1px -1px 29px 0px rgba(0,0,0,0.32);
            z-index: 10;
            border-top-right-radius: 7px;
            border-top-left-radius: 7px;
        }
        .cont-b {
            display: flex;
            width: 100%;
            height: auto;
            flex-direction: column;
            text-align: center !important;
        }
        .all {
            display: flex;
            width: 100%;
            height: auto;
            flex-direction: column;
        }
        .col_sx_book {
            width: 100%;
            border-right: 0px dashed #ccc;
            padding-right: 0px;
        }
        .col_dx_book {
            width: 100%;
            border-right: 0px dashed #ccc;
            padding-right: 0px;
        }
}