.gif-container {
            width: 100%;
            height: auto;
            position: absolute;
            animation: moveLeftToRight 20s linear infinite;
        }

        @keyframes moveLeftToRight {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%); /* Change this value to control the distance */
            }
        }

.jelly {
            width: 100%;
            height: auto;
            position: absolute;
            bottom: 0;
            z-index: 1;
            animation: moveLeftToRight 30s linear infinite !important; 
        }

        .jelly img{
            rotate: 90deg;
        }

        @keyframes jelly { /* Match keyframes name to class name */
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%); /* Change this value to control the distance */
            }
        }

         .submarine-container {
           /*width: 100%;*/
            height: auto;
            position: absolute;
            bottom: -100px;
            z-index: 0;
            animation: moveLeftToRight 30s linear infinite;
        }

       @keyframes submarineMove { /* Match keyframes name */
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%); /* Change this value to control the distance */
            }
        }

         .ship-container {
          width: 100%;
          top: 0px;
          z-index: 0;
            height: auto;
            position: absolute;
            animation: shipMove 20s linear infinite; /* Match keyframes name to class name */
        }

        @keyframes shipMove { /* Match keyframes name to class name */
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%); /* Change this value to control the distance */
            }
        }

        .bounce{
            position: absolute;
            top: -43px;
            left: 0;
        }
        .bounce img{
          /*width: 50%;*/
          /*height: auto;*/
          width: 80%;
          height: auto;
          /*margin-top: -50px;*/
           margin-top: 30px;
        }

         .bounce1{
            position: absolute;
            top: -99px;
            left: 0;
        }
        .bounce1 img{
          width: 50%;
          height: auto;
        }

         .starfish-container {
            position: absolute;
            width: 15%;
            top: -40px;
            right: -50px;
             transform: translate(-50%, -50%);
            animation: rotateStarfish 3s ease-in-out infinite alternate;
        }

        .starfish {
           max-width: 100%;
            height: auto;
        }
         @keyframes rotateStarfish { /* Keep the same keyframe name */
            0% {
                transform: scale(1); /* Initial size */
            }
            100% {
                transform: scale(1.2); /* Zoomed-in size (adjust as needed) */
            }
        }

        .starfish-container2 {
            position: absolute;
            width: 15%;
            bottom: -30px;
            left: -60px;
             transform: translate(-50%, -50%);
            animation: rotateStarfish 2s ease-in-out infinite alternate;
        }

        .starfish2 {
            max-width: 100%;
            height: auto;
        }
         @keyframes rotateStarfish2 {
            0% {
                transform: scale(1); /* Initial size */
            }
            100% {
                transform: scale(1.2); /* Zoomed-in size (adjust as needed) */
            }
        }

     .turtle-left {
            position: absolute;
            /*bottom: 0;*/
            bottom: 51px;
            left: -100px; 
            animation: moveLeftToRight 25s linear infinite;
             transform: scaleX(-1);
        }

        .turtle-right {
            position: absolute;
            bottom: 0;
            right: -100px; /* Start from the right side */
            animation: moveRightToLeft 30s linear infinite;
        }

        .turtle-img {
            width: 60%;
            max-width: 100%;
            height: auto;
        }
        .turtle-left img{
            width: 100%;
            margin-bottom: -82px;
        }
        .turtle-right img{
            /*width: 30%;*/
             width: 25%;
            margin-bottom: -15px;
            
        }

        @keyframes moveLeftToRight {
            0% {
                left: -100px; /* Start from the left side */
            }
            100% {
                left: calc(100% + 100px); /* Adjust the distance as needed */
            }
        }

        @keyframes moveRightToLeft {
            0% {
                right: -100px; /* Start from the right side */
            }
            100% {
                right: calc(100% + 100px); /* Adjust the distance as needed */
            }
        }


 .jellyfish-container {
            position: absolute;
            bottom: 0;
            z-index: 0;
            left: 0;
            animation: moveJellyfish 20s linear infinite;
        }

        .jellyfish {
            max-width: 100%;
            height: auto;
            rotate: 45deg;
        }

        @keyframes moveJellyfish {
            0% {
                left: 0;
                bottom: 0;
            }
            100% {
                left: calc(100% - 100px); /* Adjust the distance as needed */
                bottom: calc(100% - 100px); /* Adjust the distance as needed */
            }
        }

        .pooh-fix{
            position: relative;
        }

        .pooh{
            position: absolute;
            bottom: 0;
            right: 0;
        }

        @media (max-width: 767px) {
   .pooh img{
            width: 100px;
            height: auto;
        }
}
.cat {
  position: absolute;
  top: 115px; 
  right: 60px;
}
.cat img{
    width: 150px;

}

.elephant {
  position: absolute;
  top: 100px; 
  left: 60px;
}
.elephant img{
    width: 200px;

}

/*  .btm-pooh{
    position: absolute;
    bottom: -290px;
    right: 0;
  }*/

.panda-one{
    position: absolute;
    top: 90px;
    left: 130px;
}  
.panda-one img{
   width: 200px;
}
.don-one{
    position: absolute;
    top: -30px;
    right: 50px;
}  
.don-one img{
   width: 250px;
}
.race{
    position: absolute;
    right: 0;
    top: 0;
}
.race img{
    width: 250px;
}
.race1 {
    position: absolute;
    left: 0;
    transform: scaleX(-1);
    bottom: 0;
}
.race1   img{
    width: 200px;
}
@media (max-width: 768px) {
    .race1 img {
    width: 120px;
}
    .race img{
    width: 150px;
}
.starfish-container {
    position: absolute;
    width: 15%;
    top: -10px;
    right: -15px;
}

    .starfish-container2 {
    position: absolute;
    width: 15%;
    bottom: 0px;
    left: -20px;
}
    .don-one{
    position: absolute;
    top: 12px;
    right: 10px;
} 
    .don-one img{
   width: 200px;
}
    .panda-one{
    position: absolute;
    top: 110px;
    left: 0px;
} 
    .panda-one img{
    width: 150px;
}
    .elephant {
  position: absolute;
  top: 90px; 
  left: -30px;
}
.elephant img{
    width: 120px;
}
.cat {
  position: absolute;
  display: none;
}
.btm-pooh{
    position: absolute;
    bottom: 0;
    right: 0;
  }
}


/*-------------------slider csss/-------------------*/

#owl-demo .item{
  background: #42bdc2;
  padding: 30px 0px;
  margin: 10px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

h1.port-bg{
    /*background-color:#3c3f3f8f;*/
      /*background-color: #00ffffad;*/
        background-color: rgba(245,235,216,0.65);
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 44px;
        /*color: #f50505;*/
         color: #7B3F00;
}

@media (max-width: 768px) {
   h1.port-bg{
    background-color:#3c3f3f8f;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 22px;
        color: #7B3F00;
}
}