/*
Theme Name: Kite Beach
Author: Techtix
Author URI: https://www.techtix.co/
Description: A custom theme built using Bootstrap 4.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
    font-family: 'Lakes-Neue-Condensed-Black';
    src: url('/wp-content/themes/kitebeach/assets/fonts/TTLakesNeueComp-XBold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Use "swap" for optimal user experience */
}
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
  }
  
  body {
    font-family: "Lakes-Neue-Condensed-Black", Arial, sans-serif !important; 
    color: #ffffff !important;
    background-color: #605096 !important;
    text-transform: uppercase !important;
  }
  
  body.page-template-privacy-policy, body.page-template-terms--condition{
    overflow-y:auto;
    text-transform: inherit !important;
  }
  
  body.page-template-privacy-policy .menu, body.page-template-terms--condition .menu,body.error404 .menu{
    display:none !important;
  }
  
  body.page-template-privacy-policy .table td {
    font-size: 20px;
  }
  
  .model-search {
   border-radius:20px !important;
  }
  
  h1 {
    font-size: calc(60px + (110 - 60) * ((100vw - 992px) / (1920 - 992))) !important;
    line-height: calc(60px + (110 - 60) * ((100vw - 992px) / (1920 - 992))) !important;
  }
  h2 {
    font-size: 62px !important;
  }
  h3{
    font-size: 52px !important;
  }
  h4{
    font-size: 35px !important;
  }
  p {
    margin-bottom: 0 !important;
    font-size: 1.3vw;
  }
  .p2 {
    font-size: 16px !important;
  }
  .footer-link {
    font-size: 1.0vw !important;
  }
  .popup-font {
    font-size: 1.5vw;
  }
  .row {
    margin-right: 0 !important;
  }
  
  .h-lg-75 {
     height:75% !important;
  }
  
  
   /*************************** Model *******************************/ 
td.paidservices::after {
    content: "*" !important;
}
   .modal-dialog {
    max-width: 80% !important;
    }
  
    .modal-content {
      position: relative !important;
    }
    
    .close {
      position: absolute;
      top: -20px;
      right: -20px;
      border-radius: 23px;
      color: #ffffff !important;
      font-size: 50px !important;
      opacity: 1 !important;
    }
    
    #imageReplace {
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:50px;
    }
    
    .modal-col2{
      padding-right: 0 !important;
      overflow: hidden;
    }
  
     /************************** Loader ****************************/
     .loader{
      width:100%; 
      height:99vh; 
      /* overflow:hidden;  */
      position: fixed; 
      z-index: 999;
      bottom: 0;
      left: 0;
      transition:2s linear;
      background-image: image-set(
         url("/wp-content/uploads/2023/08/Loader.webp") type("image/webp"),
         url("/wp-content/uploads/2023/04/Loader.jpg") type("image/jpeg")
  );
      background-position: 50% 50%;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
    }
  
    .loader-container {
      position: absolute; 
      top:-10px;
      display: inline-block;
      width:   100%;
      height:  28px;
    }
    
    .icon, .icon-one, .icon-two{
      position:   absolute;
      height:     inherit;
      width:      inherit;
      transition: all .1s;
      transform-style:     preserve-3d;
      backface-visibility: hidden;
      width:100%;
      height:28px;
    }
    
    /* ::: FACES */
    .icon-one{background: #ec008c;text-align: center;font-size:22px;line-height: 30px;}
    .icon-two{background:  #0072bc;text-align: center; color: #fec526;font-size:22px;line-height: 30px;}
    
    /* ::: SETUP FACES */
    }
    .icon-wrap .icon-one {transform: rotateX(180deg);}
    .icon-wrap .icon-two {transform: rotateX(-180deg);}
    /* ::: HOVER EFFECTS (Remove Automated for this to work) */
    
    .icon-wrap:hover .icon { transform: rotateX(180deg); }
    
    /* ::: AUTOMATED EFFECTS */
    
    .icon-wrap .icon {
      animation: icon-wrap 0.5s 0s infinite alternate linear;
      -webkit-animation: icon-wrap 0.5s 0s infinite alternate linear;
    }
    @keyframes icon-wrap {
      0% { transform: rotateX(0deg); }
      100% { transform: rotateX(180deg); }
    }
    @-webkit-keyframes icon-wrap {
      0% { transform: rotateX(0deg); }
      100% { transform: rotateX(180deg); }
    }
  
   /****************** Section-1 menu *****************************/  
  
    .bar1, .bar2, .bar3 {
      width: 30px;
      height: 5px;
      border-radius: 10px;
      background-color: #ef404a;
      margin: 6px 0;
    }
  
    .animation {
      animation: zoomer 1s linear;
    }
    
    @keyframes zoomer {
      0% {
        width: 0px;
        height: 0px;
      }
      100% {
        width: 30px;
        height: 5px;
      }
    }
    
    .dropbtn:hover .bar {
      background-color: #ffffff;
    }
    
    .change .bar1 {
      width: 20px;
      background-color: #ffffff;
      transform: translate(0, 11px) rotate(-45deg);
    }
    
    .change .bar2 {opacity: 0;}
    
    .change .bar3 {
      width: 20px;
      background-color: #ffffff;
      transform: translate(0, -11px) rotate(45deg);
    }
    
    .dropbtn {
      z-index: 999;
      cursor: pointer;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      position: absolute;
      top: -10px;
      right: -10px;
      background-color: #ef404a;
      min-width: 0px;
      height: 0px;
      overflow: hidden;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: -1;
      padding: 50px 0;
      border-radius: 50px 0 0 50px;
      transition: all .5s;
      opacity: 0;
    }
    
    .menu-link a {
      font-size: 23px;
      letter-spacing: 1px;
      text-align: center;
      color: #ffffff;
      padding: 35px 0px;
      text-decoration: none;
      display: block;
      transform: translate3d(-200px, 0, 0);
      transition: transform 0.15s ease-in;
    }
    
    .menu-link:hover a {
      color: rgba(255, 255, 255, 0.5);
      text-decoration: none;
    }
    
    .menu-link a:hover {
      color: #ffffff;
      font-size: 27px;
    }
    .show-menu {
      min-width: 355px;
      height: 87vh;
      opacity:1;
    }
  
    .anmtn {
      transform: translate3d(0, 0, 0) !important;
      transition: transform 500ms ease-out !important;
    }
  
    .menu-link a:first-child {
      transition-delay: 0.3s !important;
    }
    .menu-link a:nth-child(2) {
      transition-delay: 0.4s !important;
    }
    .menu-link a:nth-child(3) {
      transition-delay: 0.5s !important;
    }
    .menu-link a:last-child {
      transition-delay: 0.6s !important;
    }

   /********************* Hamburger color change by js *********************/
    .white {background-color:white;}
    
   /****************** Section-1 Main Slider ************************/
    .main-slider{
      position: relative;
      height: 100vh;
    }

    /******************* scroll-down-icon ***********************/

    .scroll-down-icon {
      width: 3%;
      height: auto;
      z-index: 2;
      position: absolute;
      bottom: 5%;
      left: 49%;
      transform: translateX(-49%);
      animation: blink 2s infinite;
    }
    
    @keyframes blink {
      0%, 80%, 100% {
        opacity: 1;
        transform: translateY(0);
      }
      50% {
        opacity: 0;
        transform: translateY(20px);
      }
    }
    
   /********************** Section-2 Work ****************************/  
    .section2{
      background-color: #605096; 
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 100vh;
    }
    
    .s2-heading{
      text-align: center;
    }
    
    .board{
      width: 35%;
      height: auto;
      position: absolute;
      top: -80%;
      left: -18%;
      animation:my-animation 3s  linear infinite alternate;
    }
    @keyframes my-animation {
      from   { transform: rotate(1deg); top: -80%;}
      to { transform: rotate(15deg); top: -50%;}
    }
    
    .volleyball{
      width: 22%;
      height: auto;
      position: absolute;
      top:-100%;
      right: -15%;
      animation:boll 2s  linear infinite alternate;
    }


    @keyframes boll {
      from {  top: -100%;}
      to {  top:-60%;}
    }
    
    .glasses{
      width: 38%;
      height: auto;
      position: absolute;
      bottom: -70%;
      right: 18%;
      animation:glasses 3s  linear infinite alternate;
    }
    @keyframes glasses {
      from { transform: rotate(20deg); top: 100%;}
      to { transform: rotate(0deg);top:70%;}
    }
    
    /******************** Section-3 Experience ***********************/
    .section3{
      background-color:#00b8d6; 
      height: 100vh; 
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    
    .video-container {
      position: relative;
      width: 70%;
      height: auto;
      margin: 0 auto;
      overflow:hidden;
    }
    
    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      width:15%;
     }
     
     video {
       width: 100%;
       display: block;
       border-radius: 50px;
       object-fit:cover;
     }
    
/*    .video{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: auto;
      border-radius: 50px;
      object-fit:cover;
    }
  */  
    .racket {
      position: absolute;
      top: 50%;
      right: 3%;
      width: 15%;
      height: auto;
      animation:rackets 3s  linear infinite alternate;
    }
    @keyframes rackets {
      0% { transform: rotate(5eg);top: 20%}
      100% { transform: rotate(10deg); top:30%}
    }
    
    .drops2{
      position: absolute;
      bottom:-5%;
      left: 4%;
      width: 20%;
      height: auto;
      z-index: 1;
      animation:drops2 4s  linear infinite alternate;
    }
    @keyframes drops2 {
      0% { transform: rotate(13eg);bottom: -5%}
      100% { transform: rotate(20deg); bottom:-10%}
    }
    
    
   /***************** Section-4 Services ****************************/
    .section4{
      position: relative;
      background-color: #ef404a; 
      height: 100vh;
    font-size: 6vw;
    height: 7vw;
    overflow: hidden;
    position: relative;
      /* text-align: center;
      padding: 22px 0 22px 0; */
    }
   
  .marquee-left {
      font-size: 5.8vw;
      height: 7vw;
      overflow: hidden;
      position: relative;
    }
    
    .marquee-left div {
      display: block;
      width: 200%;
      position: absolute; 
      overflow: hidden;
      animation: marquee 12s linear infinite;
    }
    @keyframes marquee {
      0% { left: 0; }
      100% { left: -100%; }
    }
    
    .marquee-left .mar-left {
        float: left;
        width: 50%;
    }
    
    .marquee-right {
        font-size: 5.8vw;
        height: 7vw;
        overflow: hidden;
        position: relative;
    }
    
    .marquee-right div {
        display: block;
        width: 200%;
        position: absolute; 
        overflow: hidden;
        animation: marquee-right 12s linear infinite;
    }
    
    .marquee-right .mar-right {
        float: left;
        width: 50%;
    }
    
    @keyframes marquee-right {
        0% { right: 0; }
        100% { right: -100%; }
    }
    
    .wt-btn_sign {
        color: #ffffff;
        background-color: #605096;
        letter-spacing: 1.5px;
        font-size: 20px;
        width: 14%;
        height: 45px;
        border: none;
        border-radius: 50px;
        white-space: nowrap;
        overflow: hidden; 
        /* position: absolute;
        top: 51%;
        left: 50%;
        transform: translate(-50%, -51%);  */
    }
    
    .wt-btn_sign-bound {
        display: block;
        overflow: hidden;
    }
    
    .wt-btn_sign-bound:hover span {
        position: relative;
        display: inline-block;
        padding:0 10px;
        font-size: 35px;
        line-height: 48px;
        animation: wt-btn_sign-marquee 1s linear 0.3s infinite;
    }
    
    .wt-btn_sign-bound span:after {
        content:attr(data-text);
        position: absolute;
        left: 100%;
        padding: 0 10px;
    }
    
    @keyframes wt-btn_sign-marquee {
        0% { transform: translate3d(0,0,0) }
        100% { transform: translate3d(-100%,0,0) }
    }
    
    .service-bird1 {
      width: 12%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 70%;
      animation:bird1 2s  linear infinite alternate;
    }
    
    @keyframes bird1 {
      0%   { transform: rotate(0deg); top: 58%;}
      100% { transform: rotate(20deg); top: 67%;}
    }
    
    .service-bird2{
      width: 8%;
      height: auto;
      position: absolute;
      top: 65%;
      left: 75%;
      animation:bird2 2s  linear infinite alternate;
    }
    
    @keyframes bird2 {
      0%   { transform: rotate(0deg); top: 83%;}
      100% { transform: rotate(10deg); top: 77%;}
      }
    
    /* .s4-heading {
        position: absolute;
        bottom: 5%;
        width: 100%;
    } */
    
    .table td {
        font-size: 30px;
        padding: 4px;
    }
    
    /***************** Section-5 Gallery ***************************/
    .section5{
        background-color: #00b8d6;
        /* display: flex;
        align-items: center;
        justify-content: center; */
        height: 100vh;
        position: relative;
    }
    
    .gallery-slider {
      display: flex;
      align-items: center;
      width: 100%;
      height: 79vh;
      overflow: hidden;
      position: relative;
    }
  
    .gallery-slider-inner {
      position: absolute;
      /* top: 0; */
      left: 0;
      width: 1167%;
      display: flex;
      gap: 10px;
      animation: scroll 80s linear infinite;
    }
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .gallery-slidee {
      width: 270px;
      border-radius: 80px;
      overflow: hidden;
    } 
    
    .gallery_slide_img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .gallery-colud {
      position: absolute;
      top: 0;
      left: 10%;
      width: 20%;
      height: auto;
      /* z-index: 1; */
      animation:gallery-colud 3s  linear infinite alternate;
   } 
   @keyframes gallery-colud {
     0% { transform: rotate(0deg);left: 10%; }
     100% { transform: rotate(5deg);left:15%; }
   }
    
 
    .gallery-coconut {
      position: absolute;
      bottom: 5%;
      right: 15%;
      width: 10%;
      height: auto;
      animation: gallery-coconut 2.5s linear infinite alternate;
    }
    @keyframes gallery-coconut {
      0%   { transform: rotate(-20deg); }
      100% { transform: rotate(0deg); }
    }
    
    /************************ Section-6 Instagram ***********************/
    
    .section6{
      background-color:#ffc20e; 
      height: 100vh; 
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }  
    
    .section6-ineer-div {
      position:relative;
      width:70%;
      text-align:center;
    }
    
   .insta-image-flex {
     display: flex;
     width: 100%;
     height: 27vw;
   }

   .insta-column {
    flex-direction: column;
     padding:5px;
   }

   .insta-column img {
     width: 100%;
     height: 50%;
     object-fit: cover;
     border-radius: 10px;
     margin: 5px
   }

   .insta-full-height a img {
      height: 102.5% !important;
   }
   .insta-icon {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
    }
     
    .insta-load {
       color: #ffffff;
       background-color: #605096;
       letter-spacing: 1.5px;
       font-size: 20px;
       line-height: 45px;
       width: 20%;
       height: 45px;
       border: none;
       border-radius: 50px;
       margin-top:40px;
       display: inline-block;
     }
     
     .insta-load:hover {
       color: #ffffff;
       text-decoration:none;
     }
     
    .instagram-capsule {
      position: absolute;
      top: -25%;
      right: 8%;
      width: 4%;
      height: auto;
      animation: instagram-capsule 4.5s linear infinite alternate;
    }
    @keyframes instagram-capsule {
      0% { transform: rotate(0deg); right: 5%; }
      100% { transform: rotate(5deg); right:0%; }
    }

    
    .instagram-triangle-yellow {
      position: absolute;
      top: -12%;
      right: 8%;
      width: 4%;
      height: auto;
      animation: instagram-triangle-yellow 4.5s linear infinite alternate;
    }
    @keyframes instagram-triangle-yellow {
      0% { transform: rotate(0deg); right: 5%; }
      100% { transform: rotate(5deg); right:10%; }
    }
    
    .instagram-hearts {
      position: absolute;
      bottom: -8%;
      left: 8%;
      width: 10%;
      height: auto;
      animation: instagram-hearts 4.5s linear infinite alternate;
    }
    @keyframes instagram-hearts {
      0% { transform: rotate(0deg); left: 8%; }
      100% { transform: rotate(5deg); left:0%; }
    }
    
    .instagram-triangle { 
      position: absolute;
      bottom: -3%;
      right: 8%;
      width: 5%;
      height: auto;
      animation: instagram-triangle 4.5s linear infinite alternate;
    }
    @keyframes instagram-triangle {
      0% { transform: rotate(0deg); right: 8%; }
      100% { transform: rotate(5deg); right:0%; }
    }
    
    /************************ Section-7 Dive-In ***********************/
    .section7{
      background-color: #0072bc;
      height:100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    
    .div-in-cloud {
      position: absolute;
      top: -20%;
      left: -8%;
      width: 20%;
      height: auto;
      animation: div-in-cloud 4.5s linear infinite alternate;
    }
    @keyframes div-in-cloud {
      0% { transform: rotate(0deg); left: -8%; }
      100% { transform: rotate(5deg); left:0%; }
    }
    
    .div-in-paddle {
      position: absolute;
      top: -30%;
      right: -5%;
      width: 35%;
      height: auto;
      animation: div-in-paddle 2.7s linear infinite alternate;
    }
    @keyframes div-in-paddle {
      0% { transform: rotate(0deg); top: -30%; }
      100% { transform: rotate(15deg); top:-20%; }
    }
    
    .section7-div {
      position: relative;
      background-color: #fec526;
      width: 85%;
      border-radius: 70px;
      text-align: center;
    }
    
    .dive-in-btn {
        margin: 40px 0 10px 0;
        color: #ffffff;
        background-color: #605096;
        letter-spacing: 1.5px;
        font-size: 20px;
        width: 20%;
        height: 50px;
        border: none;
        border-radius: 50px;
        white-space: nowrap;
        overflow: hidden; 
    }
    
    .dive-in-btn-bound {
        display: block;
        overflow: hidden;
    }
    
    .dive-in-btn-bound:hover span {
        position: relative;
        display: inline-block;
        padding:0 10px;
        font-size: 35px;
        animation: dive-in-btn-marquee 1s linear 0.3s infinite;
    }
    
    .dive-in-btn-bound span:after {
        content:attr(data-text);
        position: absolute;
        left: 115%;
        padding: 0 10px;
    }
    
    @keyframes dive-in-btn-marquee {
        0% { transform: translate3d(0,0,0) }
        100% { transform: translate3d(-115%,0,0) }
    }
    
    .Model-tab-Link{
      cursor: pointer;
      color: #00b7d5;
    }
  
    .Model-tab-Link:hover{
      color: #ffc627;
      text-decoration: none;
    }
    
    .div-in-lemon {
      position: absolute;
      bottom: -30%;
      left: 10%;
      width: 10%;
      height: auto;
      animation: div-in-lemon 2.4s linear infinite alternate;
    }
    @keyframes div-in-lemon {
      0% { transform: rotate(-5deg); bottom: -25%; }
      100% { transform: rotate(5deg); bottom:-35%; }
    }
    
   /************************ Dive In Modal ***************************/
    .nav-pills .modal-b.active, .nav-pills .show>.modal-b {
      color: #fff !important;
      background-color: #e82b89 !important;
    }
  
    .modal-b {
        line-height: 26px;
        padding: 5px 20px !important;
        color: #605096 !important;
        background-color: #ffc627 !important;
        border-radius: 1.25rem !important;
    }
  
    .modal-b:hover {
        color: #ffffff;
    }
  
    .modal-scroll{
      height: 85%;
    }
  
    .scrl{
      position: relative;
    }
  
    .scrl::before {
        background: linear-gradient(#605096 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        height: 15px;
        position: absolute;
        top: 0;
        width: 90%;
        z-index: 2;
    }
    
    .scrl::after {
        background: linear-gradient( to top, #605096 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        height: 15px;
        position: absolute;
        bottom: 0;
        width: 90%;
        z-index: 2;
    }
    
    /******** Scroll ********/
    .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background-color: #ffc628 !important;
    }
    .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
      background-color: #0572ba !important;
    }
    
    .mCSB_scrollTools .mCSB_draggerRail {
        height: 1000px !important;
    }
    
    
   /******************** Section-8 Where-We-Are *********************/
    .section8{
      background-color: #ec008c;
      position: relative;
    }
    
    .we-are{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  
    .where-we-bird1 {
      position: absolute;
      top: 10%;
      left: 30%;
      width: 30%;
      height: auto;
      animation:where-we-bird1 2s  linear infinite alternate;
    }
    @keyframes where-we-bird1 {
      0%   { transform: rotate(0deg); top: 5%;}
      100% { transform: rotate(10deg); top: 15%;}
    }
    
    .where-we-bird2 {
      position: absolute;
      top: 25%;
      left: 40%;
      width: 20%;
      height: auto;
      animation:where-we-bird2 2s  linear infinite alternate;
    }
    @keyframes where-we-bird2 {
      0%   { transform: rotate(0deg); top: 20%;}
      100% { transform: rotate(10deg); top: 30%;}
    }

    .where-we-scooter {
      position: absolute;
      bottom: 10%;
      right: 0;
      width: 80%;
      height: auto;
      animation:scooter 2s  linear infinite alternate;
    }
    @keyframes scooter {
      0% { transform: rotate(0deg); right: -20%; }
      100% { transform: rotate(0deg); right:-10%; }
    }
    
    .where-we-pin {
      position: absolute;
      top: 10%;
      left: 2.5%;
      width: 15%;
      height: auto;
      animation: where-we-pin 2.4s linear infinite alternate;
    }  
    @keyframes where-we-pin {
      0% { transform: rotate(0deg); top: 8%; }
      100% { transform: rotate(10deg); top:0%; }
    }
    
    .where-we-drops {
      position: absolute;
      top: 50%;
      right: 0%;
      width: 25%;
      height: auto;
      animation: where-we-drops 2.4s linear infinite alternate;
    }
    @keyframes where-we-drops {
      0%   { top: 45%; }
      100% { top: 55%; }
    }
    
    .map {
      border:0;
      border-radius: 50px;
      width: 70%;
      height: 60%;
    }
    
    /*********************** Section-9 Contact ***********************/
    .section9{
      background-color:#ec008c;
      text-align: center;
      position: relative;
    }
   .layer-footer {
      position: absolute;
    top: 5%;
    right: 20% !important;
    width: 15%;
    height: auto;
    /* z-index: 1; */
    animation: layer-footer 1.5s linear infinite alternate;
   } 
   @keyframes layer-footer {
     0% { transform: rotate(0deg);right: 10%; }
     100% { transform: rotate(5deg);right:15%; }
   }
   
   .snorkel{
   
   bottom: 40%;
    position: absolute;
    right: 5%;
    width: 20%;
    height: auto;
    animation: snorkel 2.5s linear infinite alternate;
   }
@keyframes snorkel {
      0%   { transform: rotate(-20deg); }
      100% { transform: rotate(0deg); }
    }
  .beachball{
   
   bottom: 65%;
    position: absolute;
    left: 5%;
    width: 20%;
    height: auto;
    animation: beachball 2.5s linear infinite alternate;
   }
@keyframes beachball {
      0%   { transform: rotate(-20deg); }
      100% { transform: rotate(0deg); }
    } 
.beach-basket {
    
    position: absolute;
    bottom: 15%;
    left: 50%;
    width: 10%;
    height: auto;
    animation: beach-basket 4.5s linear infinite alternate;
    }
    @keyframes beach-basket {
      0% { transform: rotate(0deg); left: 8%; }
      100% { transform: rotate(5deg); left:0%; }
    }


.water-mellon {
      position: absolute;
      top: -12%;
      right: 8%;
      width: 4%;
      height: auto;
      animation: water-mellon 4.5s linear infinite alternate;
    }
    @keyframes water-mellon {
      0% { transform: rotate(0deg); right: 8%; }
      100% { transform: rotate(5deg); right:0%; }
    }

    .contact-logo {
      position: absolute;
      top: 30%;
      right: 15%;
      width: 13%;
      height: auto;
      animation:contact-logo 2s  linear infinite alternate;
    }
    @keyframes contact-logo {
      0%   { transform: rotate(-5deg); right: 20%;}
      100% { transform: rotate(5deg); right: 25%;}
    }
    
    .footer-heading{
      letter-spacing: 1.5px;
    }
    
    .h-md-50{
     height: 50%;
    }
    /** custom height class **/
    @media (min-width: 992px){
      .h-lg-100 {
         height: 100%!important;
      }
    }
     
    /********************** css for tablet *************************/
    @media screen and (max-width: 992px) { 
      h1 {
        font-size: 50px !important; 
        line-height: 50px !important;
      }
      h2 {
        font-size: 40px !important;
      }
      h3 {
        font-size: 35px !important;
      }
      h4 {
        font-size: 30px !important;
      }
      p {
        font-size: 18px !important;
      }
      .footer-link {
        font-size: 18px;
      }
      .dropdown-content {
        position: absolute;
        top: 0px;
        right: 0px;
      }
      .menu-link a {
        font-size: 23px;
        padding: 30px 0px;
      }
      .show-menu {
        min-width: 350px;
        height: 530px;
      }
      .main-slider,.section2,.section3,.section4,.section5,.section6,.section7,section8{
        height: 100vh;
      }
      .section9{
        height: auto;
      }
      .video {
        width: 80%;
      }
      .wt-btn_sign {
        width: 18%;
      }
      .gallery-slider-inner {
        width: 1000%;
      }
      .section7-div {
        border-radius: 20px;       
      }
      .dive-in-btn{
        margin: 25px 0 10px 0;
        width: 25%;
      }
      .nav-pills {
        justify-content: center;
      }
      .modal-b {
        font-size: 25px;
      }
      .Model-tab-Link{
        font-size: 18px;
		text-align: left;
		  margin-left:8px;
      }
      .p2{
        font-size: 12px !important;
      }
      .we-are{
        height: 50vh;
      }
      .where-we-bird1 {
        width: 15%;
        height: auto;
      }
      
      .where-we-bird2 {
        width: 12%;
        height: auto;
      }
      .where-we-pin {
        position: absolute;
        top: 0%;
        left: 5%;
        width: 13%;
        height: auto;
        animation: where-we-pin 2.4s linear infinite alternate;
      }  
      @keyframes where-we-pin {
        0% { transform: rotate(0deg); top: -5%; }
        100% { transform: rotate(10deg); top:-12%; }
      }
      .map{
        width: 80%;
        height: 80%;
      }
      .where-we-scooter {
        width: 30%;
        animation:scooter 2s  linear infinite alternate;
      }
      @keyframes scooter {
        0% { transform: rotate(0deg); right: 2%; }
        100% { transform: rotate(0deg); right:10%; }
      }
    
    }
    
    /******************** css for phone ****************************/
    @media screen and (max-width: 600) {


      h1 {
        font-size: 25px !important;  
        line-height: 25px !important;
      }
      h2 {
        font-size: 20px !important;
      }
      h3{
        font-size: 18px !important;
      }
      h4{
        font-size: 15px !important;
      }
      p {
        font-size: 12px !important;
      }
      .h-sm-50 {
         height:50% !important;
       }

      .footer-link {
        font-size: 12px !important;
      }
      .dropdown-content {
        position: absolute;
        top: 0px;
        right: 0px;
      }
      .menu-link a {
        font-size: 18px;
        padding: 19px 0px;
      }
      .show-menu {
        min-width: 230px;
        height: 370px;
      }
      .main-slider,.section2,.section3,.section4,.section5,.section6,.section7,.section8, .section9{
        height: 50vh;
      }
      video{
        border-radius: 20px
      }
      .wt-btn_sign {
        font-size: 12px;
        width: 20%;
        height: 30px;
      }
      .wt-btn_sign-bound:hover span {
        padding:0 10px;
        font-size: 16px;
        line-height: 30px;
      } 
      .table td {
        font-size: 16px;
      }
      .section6-ineer-div {
        width:85%;
      }
      .gallery-slider {
        height: 35vh;
      }
      .gallery-slider-inner {
        width: 1000%;
      }
      .insta-column {
        padding:2px;
       }

      .insta-column img {
        margin: 2px;
        border-radius: 5px;
      }
      .insta-load {
        font-size: 12px;
        width: 25%;
        height: 30px;
        line-height:32px
      }
      .instagram-capsule {
      top: -25%;
      right: 8%;
      width: 6%;
      height: auto;
    }

    .instagram-triangle-yellow {
      top: -12%;
      right: 8%;
      width: 5%;
      height: auto;
    }
    
    .instagram-hearts {
      bottom: -8%;
      left: 8%;
      width: 15%;
      height: auto;
    }
    
    .instagram-triangle { 
      bottom: -3%;
      right: 8%;
      width: 9%;
      height: auto;
      }
      .section6-div {
        border-radius: 20px;
      }
      .dive-in-btn{
        margin: 10px 0 0px 0;
        font-size: 12px;
        width: 33%;
        height: 30px;
        line-height: 31px;
      }
      .dive-in-btn-bound:hover span {
        padding:0 10px;
        font-size: 16px;
      } 
      .modal-dialog {
        max-width: fit-content !important;
      }
      .modal-content {
        position: relative;
      }
      .close {
        position: absolute;
        top: -30px !important;
        right: 0px !important;
      }
      .modal-b {
        font-size: 12px;
      }
      .Model-tab-Link {
        font-size: 16px;
      }
      .modal-scroll{
        height: 95%;
      }
      .we-are{
        height: 25vh;
      }
      .where-we-scooter {
        width: 30%;
        animation:scooter 2s  linear infinite alternate;
      }
      @keyframes scooter {
        0% { transform: rotate(0deg); right: 2%; }
        100% { transform: rotate(0deg); right:10%; }
      }
      .map{
        border-radius: 20px;
        width: 80%;
        height: auto;
      }
      
     }


       /* styles for mobile browsers smaller than 480px; (Qasim) */


@media only screen and (max-device-width: 480px) {
	
	  h1 {
        font-size: 25px !important;  
        line-height: 25px !important;
      }
      h2 {
        font-size: 20px !important;
      }
      h3{
        font-size: 25px !important;
      }
      h4{
        font-size: 15px !important;
      }
      p {
        font-size: 12px !important;
      }
	
	video{
        border-radius: 20px
      }
     
	
/* 	.insta-load {
		font-size:12px !important;
      width:33% !important;
     }
	.wt-btn_sign{
		font-size:12px !important;
		width:33% !important;
	}
	.dive-in-btn{
		width:33% !important;
		font-size:12px !important;
	} */
	
	.wt-btn_sign {
        font-size: 12px;
        width: 20%;
        height: 30px;
      }
      .wt-btn_sign-bound:hover span {
        padding:0 10px;
        font-size: 16px;
        line-height: 30px;
      } 
	 .insta-load {
        font-size: 12px;
        width: 33%;
        height: 30px;
        line-height:32px
      }
      .instagram-capsule {
      top: -25%;
      right: 8%;
      width: 6%;
      height: auto;
    }
	
	 .dive-in-btn{
        margin: 10px 0 0px 0;
        font-size: 12px;
        width: 33%;
        height: 30px;
        line-height: 31px;
      }
      .dive-in-btn-bound:hover span {
        padding:0 10px;
        font-size: 16px;
      } 

		
	 .beach-basket {
		 display:none !important;
	 }
	 .water-mellon {
		 display:none !important;
	 }
	
	.water-mellon-div{
		display:none !important;
		
	}
	.beach-basket-div{
		display:none !important;
	}
	 .volleyball{
      width: 22%;
      height: auto;
      position: absolute;
      top:-100%;
      right: -9% !important;
      animation:boll 2s  linear infinite alternate;
    }
	
	.footer-empty-row{
		display:none !important;
	}
	
	.nav-link{
		font-size:14px!important;
	}
	.dive-in-hashtag{
		
		font-size:20px !important;
	}
	.beachball {
		
		bottom: 55% !important;
		width: 14% !important;
	}
    #servcies-table td{
		
		font-size:11px!important;
	}
	
	.modal.show .modal-dialog{
		margin:auto !important;
	}
	#nav-pills-container{
		padding:2rem !important;
	}
	#dineList li{
			
		font-size:11px !important;
	}
	#imageReplace{
	width: 90%;
    height: 89%;
    object-fit: cover;
	margin-left:16px;
    border-radius: 40px;
	margin-top:22px;
	}
	.main-slider, .section2, .section3, .section4, .section5, .section6, .section7, .section8 {
    height: 50vh;
    }
	.gallery-slider{
    height: 60vh;

	}
	.gallery-slider-inner{
		margin-bottom:65% !important;
	}
/* 	 .fnc-slide__inner {
		  height: 50% !important;
	}  */
	.snorkel {
		
		bottom: 20% !important;
	}
	#happeninghere{
		
		padding-top: 5rem!important;
	}
	#weare{
		font-size:25px !important;
	}
	
	 .we-are{
        height: 25vh;
      }
      .where-we-scooter {
        width: 30%;
        animation:scooter 2s  linear infinite alternate;
      }
      @keyframes scooter {
        0% { transform: rotate(0deg); right: 2%; }
        100% { transform: rotate(0deg); right:10%; }
      }
      .map{
        border-radius: 20px;
        width: 80%;
        height: auto;
      }
	#stayconnected{
		font-size:25px !important;
	}
	.board {
		left:-28%!important;
		
	}
 }