@media screen and (max-width: 1536px) {
  .uc-content1-sub1 .bh1{
     
        font-size: 20.803px;
       
    }

    .sfeaturing > span > span{
      flex-wrap: nowrap;
    }

    .sfeaturing > span > span > img {
        width: 188px;
    }

    .section2::before {
    
    top: -99px;
    
    width: 20%;
    
    }

    .section2::after{
      width: 17%;
    }
}


@media (min-width: 1024px) and (max-width: 1366px)  {
    .bannerfestival img{
      width: 98%;
    }
}


@media (min-width: 768px) and (max-width: 1024px)  {

    .bgundeconstruction::before,  .bgundeconstruction::after{
   
    top: 180px;
    
    } 
  .uc-content1-sub1 .bh1{
     
        font-size: 18.803px;
       
    }

     .uc-content1-sub1 .bh2{
        
        font-size: 14.252px;
    }

    .bgheader::before,.bgheader::after{
          top: 53px;
          background-size: 35%;
    }

     .bgoutsidehome::before, .bgoutsidehome::after{
      background-size: 35%;
     }

     /* .artisgroup::before, .artisgroup::after{
      background-size: 70%;
      bottom: 0;
     } */

    .bgheader::before, .bgheader::after, .section2::before, .section2::after{
      
      z-index: 0;
    }

    .section2 > .bh2{
      padding:60px
    }

    .artisat > div{
      font-size: 16px;
    }

   
    .sfeaturing > span > span > img{
      width: 100px;
    }

    .bgheader, .bgcontent{
      min-height: 650px;
    }

    .bannerheader > .bh1{
      font-size: 25px;
    }

    .bannerkapal img{
      width: 70%;
    }

    footer{
      padding:50px
    }

    .sfeaturing > span{
      margin-top: 80px;
    }

    .section2::before, .section2::after{
      background-size: 70%;
    }
   
}


@media (min-width: 320px) and (max-width: 480px) { 
  /* Gaya untuk HP kecil */
  .bgheader::before, .bgheader::after, .section2::before, .section2::after, .artisgroup::before, .artisgroup::after{
    background:transparent;
    position: relative;
  }

  .bgheader, .bgcontent{
        min-height: 550px;
  }

  .bannerheader > .bh1{
    font-size: 15px;
    margin-bottom: 50px;
  }

  .bannerheader img{
    width: 50%;
  }

 

  

  .bannerkapal img{
    width: 100%;
  }

   .bannerfestival img{
     
     object-fit: cover; /* Biar tidak terdistorsi */
     width: 100%;
    
  }

  .bannerlastchild img{
    width: auto;
  }


 

  .section2 > .bh2{
    padding-top: 50px;
    font-size: 30px;
  }

  .section2 > .bh2 a{
    font-size: 20px;
    
  }

  footer{
        padding: 50px 25px;
  }

  .sfeaturing{
    margin-bottom: 40px;
  }

  .sfeaturing > span{
    margin-top: 40px;
  }

  .sfeaturing > span > span{
      flex-wrap: wrap;
  }
  

  .sfeaturing > span > span > img {
    margin-bottom: 40px;
    width: auto;
    
  }

 .sfeaturing > span > img{
    width: 70%;
 }

 .profile-footer{
    text-align: justify;
    margin-bottom: 50px;
 }

 .artisat > div{
    font-size: 17px;
 }

 .logofooter{
    text-align: center;
 }

 .logofooter img{
    width: auto;
    margin-bottom: 30px;
 }

 .sosmed-footer{
    text-align: center;
    margin-top: 15px;
 }

 .copyright{
    text-align: center;
 }

 

 .bannerheader > .bh3{
    font-size: 25px;
    position: relative;
 }

 .waverave-menu{
     display: block !important;
     background:#020044;
     position: fixed;
     top:70px;
     left: 500px;
     width: 100%;
     height: 100vh;
     padding-top: 100px;
     transition: left 0.3s ease-in-out;
 }

 .waverave-menu.active{
    left: 0px;
 }

 .waverave-menu > li{
    text-align: center;
 }

 .navbar-toggler{
    z-index: 2;
 }

 .flex-wrap{
    flex-wrap:nowrap;
        justify-content: space-between;
 }

 .waverave-burger{
   display: inline-block;
 }
.waverave-burger > i{
    z-index: 999;
    color:#fff;
    font-size: 20px;
}

.fa-solid{
     transition:  0.5s ease-in-out;
}

.bgoutsidehome::before, .bgoutsidehome::after{
  background: transparent;
  width: auto;
  height: auto;
}

.ocean-adventure{
   padding:100px 0;
}

.titleswaverave h2{
   font-size: 30px;
}

.aboutwaverave p{
   font-size: 16px;
}

.faqcard{
   padding: 16.5px;
}
 
}