@import url('https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');


body{
  background: #000;
  font-family: 'Josefin Sans', sans-serif;
  overflow-x: hidden;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    padding: 20px 0;
    border-bottom: 1px solid white;
}

nav ul{
    display: flex;    
}

hr{
    border-style: dotted;
}

.packages .card-image{
    height: 200px;
    width: 100%;
}

.packages .card-image img{
    object-fit: cover;
}

nav ul li{
    padding: 20px 10px;
    list-style: none;
}


.hero-section{
    background-color: #eee;
    color: #000;
}

.container{
    max-width: 1000px !important;
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;    
}


.logo img{
    width: 200px;
    height: 70px;
}

.ham-burger{
    display: none;
}


.card .card-image{
    width: 100%;
    height: 320px;
}

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

@media screen and (max-width: 768px) {
    .card .card-image{
        width: 100%;
        height: auto;
    }
}


.ham-burger .bar{
    display: block;
    margin: 5px;
    height: 3px;
    width: 25px;
    background-color: white;
    border-radius: 50px;
}

body{
    background: #000;
    color: white;
}

a.active{
    color: #73A033;
    font-weight: 700;
}

/* Track */
::-webkit-scrollbar {
    width: 5px; /* Width of the scrollbar */
    border-radius: 100%;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(3, 177, 3); /* Color of the scrollbar handle */
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(11, 223, 11); /* Color of the scrollbar handle on hover */
  }

  .TA_cdswritereviewlgvi{
    width: 100% !important;
    margin-top: 20px;
  }
  

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

    nav.active {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: auto;
        padding: 20px 0;
        border-bottom: 1px solid white;
    }


    .ham-burger {
        display: block;
    }

    .ham-burger.active .bar:nth-child(1){
        transform:  translateY(5px) rotate(45deg);
        transition: all ease-in-out 0.2s;
    }
    .ham-burger.active .bar:nth-child(2){           
        opacity: 0;
    }
    .ham-burger.active .bar:nth-child(3){
        transform: translateY(-10px) rotate(-45deg);   
        transition: all ease-in-out 0.2s; 
    }

    .ham-burger .bar{
        display: block;
        margin: 5px;
        height: 3px;
        width: 25px;
        background-color: white;
        border-radius: 50px;
        transition: all ease-in-out 0.2s; 
    }

    nav.active ul{
        display: block;    
        position: fixed;
        background: white;
        color: #000;
        top: 0;
        left: 0;
        width: 80%;
        height: 100vh;
        transition: 0.2s all ease-in-out;
    }

    nav ul{
        display: block;    
        position: fixed;
        background: white;
        color: #000;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        transition: 0.2s all ease-in-out;
    }

    nav.active ul li{
        padding: 20px 10px;
        background: #c0c0c0;
        margin: 10px;
        border-radius: 10px;
    }
    
}


#leaves {
    z-index: 15;    
    animation-direction: normal;
}


    .bamboo-leaf-1 {
        height: 60px;
        width: 30px;
        transform: rotate(90deg);
        position: absolute;
        left: -50px;
        top: -15px;
        z-index: 5;
        animation-name: blow1;
        -webkit-aimation-name: blow1;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    
    @keyframes blow1 {
        0% {
            left: -200;
            top: 100;
        }
        100% {
            left: 50px;
            top: 360px;
        }
    }
    
    @-webkit-keyframes blow1 {
        0% {
            left: -200;
            top: 100;
        }
        100% {
            left: 50px;
            top: 360px;
        }
    }
    
    .bamboo-leaf-2 {
        height: 60px;
        width: 30px;
        transform: rotate(90deg);
        position: absolute;
        left: -50px;
        top: 150px;
        z-index: 5;
        animation-name: blow2;
        -webkit-aimation-name: blow2;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-delay: 1.4s;
        -webkit-animation-delay: 1.4s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    
    @keyframes blow2 {
        0% {
            left: 0;
            top: 300;
        }
        100% {
            left: 50px;
            top: 500px;
        }
    }
    
    @-webkit-keyframes blow2 {
        0% {
            left: 0;
            top: 300;
        }
        100% {
            left: 50px;
            top: 500px;
        }
    }
    
    .bamboo-leaf-3 {
        height: 60px;
        width: 30px;
        transform: rotate(90deg);
        position: absolute;
        left: -50px;
        top: -15px;
        z-index: 8;
        animation-name: blow3;
        -webkit-aimation-name: blow3;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-delay: 0.75s;
        -webkit-animation-delay: 0.75s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    
    @keyframes blow3 {
        0% {
            left: 0;
            top: 100;
        }
        100% {
            left: 20px;
            top: 620px;
        }
    }
    
    @-webkit-keyframes blow3 {
        0% {
            left: 0;
            top: 100;
        }
        100% {
            left: 20px;
            top: 620px;
        }
    }
    
    .bamboo-leaf-4 {
        height: 60px;
        width: 30px;
        transform: rotate(90deg);
        position: absolute;
        left: -50px;
        top: -15px;
        z-index: 8;
        animation-name: blow4;
        -webkit-aimation-name: blow4;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-delay: 2.2s;
        -webkit-animation-delay: 2.2s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    
    @keyframes blow4 {
        0% {
            left: 0;
            top: 50;
        }
        100% {
            left: 30px;
            top: 150px;
        }
    }
    
    @-webkit-keyframes blow4 {
        0% {
            left: 0;
            top: 50;
        }
        100% {
            left: 30px;
            top: 150px;
        }
    }
    
    .bamboo-leaf-5 {
        height: 60px;
        width: 30px;
        transform: rotate(90deg);
        position: absolute;
        left: -50px;
        top: -15px;
        z-index: 8;
        animation-name: blow5;
        -webkit-aimation-name: blow5;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-delay: 4s;
        -webkit-animation-delay: 4s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    
    @keyframes blow5 {
        0% {
            left: 0;
            top: 250;
        }
        100% {
            left: 40px;
            top: 150px;
        }
    }
    
    @-webkit-keyframes blow5 {
        0% {
            left: 0;
            top: 250;
        }
        100% {
            left: 40px;
            top: 150px;
        }
    }
    
    .bamboo-leaf-6 {
        height: 60px;
        width: 30px;
        transform: rotate(90deg);
        position: absolute;
        left: -50px;
        top: -15px;
        z-index: 8;
        animation-name: blow6;
        -webkit-aimation-name: blow6;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-delay: 0.75s;
        -webkit-animation-delay: 0.75s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    
    @keyframes blow6 {
        0% {
            left: 0;
            top: 100;
        }
        100% {
            left: 10px;
            top: 620px;
        }
    }
    
    @-webkit-keyframes blow6 {
        0% {
            left: 0;
            top: 100;
        }
        100% {
            left: 10px;
            top: 620px;
        }
    }

.banner-image{
    aspect-ratio: 16/9;
    overflow: hidden;
    object-position: center center;
    object-fit: cover;
}

.sticky-nav{
    position: relative;    
}

.sticky-nav.add{
    position: sticky;
    z-index: 9999;
    top: 0;
    box-shadow: 1px 2px 3px #00000048;
    transition: 1s  all ease-in-out;
}

.included-voucher li{
    list-style: "✔ ";    
    color: green;    
}