@tailwind base;
@tailwind components;
@tailwind utilities;


@media (min-width: 992px) {
    .hamburger{
        display: none!important;
    }
}
   
@media (max-width: 500px) {
    .booking{
        display: none!important;
    }
}


 /* WhatsApp Float Starts Here  */

 .float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 95px;
    right: 30px;
    background-color: transparent;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #5e5e5e;
    z-index: 100;
    }
    .ff {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    
    }
    
    .my-float {
    margin-top: 17px;
    }
    
    .float-fb{
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 165px;
    right: 30px;
    background-color: transparent;
     
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100; 
    
    }

    .whatsapp-image{
      height: 2.5rem;
      width: 2.5rem;
    }

    .whatsapp-text{
      margin-top: 9px;
    }

    .arrow{
      height: 0.75rem;
      width: 0.75rem;
      margin-top: 14px;
      margin-left: 0.25rem;
    }

    .main-logo{
      height: 3rem;
      width: 3rem;
      margin-top: 3px;
      margin-left: 6px;
    }
    
  /* WhatsApp Float Ends Here    */

 /* message  */
 .callout {
  position: fixed;
  bottom: 96px;
  right: 92px;
  margin-left: 20px;
  max-width: 300px;
}

.callout-header {
  padding: 8px 8px;
  background: #555;
  font-size: 14px;
  color: white;
  border-radius: 5px;
}

.closebtn {
  position: absolute;
  top: -16px;
  left: 140px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  font: bold;
}

.closebtn:hover {
  color: lightgrey;
}



  @media(min-width:900px) and (max-width:1100px){
    .imageslider{
      margin-right: -150px !important;
    }
  }

  @media(min-width:768px) and (max-width:900px){
    .imageslider{
      margin-right: -250px !important;
    }
  }

  @media(min-width:567px) and (max-width:767px){
    .imageslider{
      margin-right: -60px !important;
      margin-bottom: -30px;
    }
    .imageslider h2{
      margin-bottom: -10px;
      font-size: 25px;
    }
    .imageslider .p1{
      margin-bottom: -10px;
      font-size: 25px;
    }
  }
  @media(min-width:430px) and (max-width:567px){
    .imageslider{
      margin-right: -60px !important;
      margin-bottom: -30px;
    }
    .imageslider h2{
      margin-bottom: -10px;
      font-size: 25px!important;
    }
    .imageslider .p1{
      margin-bottom: -10px;
      font-size: 18px;
    }
  }
  @media(max-width:430px){
    .imageslider{
      margin-right: -60px !important;
      margin-bottom: -30px;
    }
    .imageslider h2{
      margin-bottom: -10px;
      font-size: 25px!important;
    }
    .imageslider .p1{
      margin-bottom: -10px;
      font-size: 18px;
    }
  }
  @media(max-width:375px){
    .imageslider{
      margin-right: -100px !important;
      margin-bottom: -30px;
    }
    .imageslider h2{
      margin-bottom: -10px;
      font-size: 25px!important;
    }
    .imageslider .p1{
      margin-bottom: -10px;
      font-size: 18px;
    }
  }
  @media(max-width:320px){
    .imageslider{
      margin-right: -130px !important;
      margin-bottom: -30px;
    }
    .imageslider h2{
      margin-bottom: -10px;
      font-size: 25px!important;
    }
    .imageslider .p1{
      margin-bottom: -10px;
      font-size: 18px;
    }
  }