.splash-screen{
  --scale:2;
  position:fixed;
  top:0;
  left:0;
  background: #ffffff; 
  background-size: cover;
    background-blend-mode: overlay;
  height: 100vh;
  width: 100%;
  text-align:center;
  align-content:center;
  z-index: 1031;
  & img{
    scale:var(--scale,2);
    position:absolute;
    translate: -50% -50%;
    transition: all 1s ease;
    animation:animate-splashlogo var(--splashScreenDuration,2s) ease forwards;
    animation-delay:1s;
  }
}

@keyframes animate-splashlogo {
  from{
    top:50%;
    left:50%;
    translate: -50% -50%;
    scale:var(--scale,2);
  }
  to{
    top:calc(var(--top)*1px);
    left:calc(var(--left)*1px);
    translate: 0% 0%;
    scale:1;
  }
}

@keyframes hide-anim{
  0%{opacity:1;}
  99%{
    
    opacity:0;
  }
  100%{
    display:none;  
  }
  
}


.hide{
 animation:hide-anim .3s ease forwards;
}


.text-bg-gif {
      background: url(/assets/img/water-bg.jpg);
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:textbg-anim 20s linear infinite;
}
.bg-gif {
      background: url(/assets/img/water-bg.jpg) #ffffffbb; 
    background-size: cover;
    background-blend-mode: overlay;
    animation:textbg-anim 20s linear infinite;
}
@keyframes textbg-anim{
    from{
        background-position:0 bottom;
    }
    to{
        background-position:1000px bottom;
    }
}





.seamless-bg{
    
    
    
    animation: footer-anim 5s linear infinite;
    
}





@keyframes footer-anim {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: calc(var(--bg-width,-1279) * 1px);
  }
}



.three-d{
  position:absolute;
  width: 100%;
  left:0%;
  bottom:-5%;
  height:auto;
  z-index:1;
}
.perspective {
    perspective: 900px;
    perspective-origin: center 188px;
    height: 50vh;
    position: relative;
        overflow: clip;
    --size: 600px;
}
.content-div{
   transform-origin: center;
  transform-style: preserve-3d;
  z-index:10;
  font-size: 5rem;
  text-transform:uppercase;
  font-family: "Open Sans", serif;
  color:#fff;
  text-shadow:0px 0px 10px #000;
  pointer-events:none;
}
.img-cylinder{
  position:absolute;
  will-change: transform;
  animation: animate 30s linear infinite;
  transform-origin: center;
  transform-style: preserve-3d;
  width:100%;
  height:auto;
  top:-150%;
  left:50%;
  translate:-50% -50%;

  
}
.img-cylinder > .image{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: center;
  transform-style: preserve-3d;
  border-radius:10px;
  
  translate:-50% 0%;
  --deg:10;
    will-change: transform;
  
 /*
 animation: deg 60s linear infinite alternate;
 transform: 
    rotateY(calc(var(--i) * calc(var(--deg) * 3deg))) translatey(calc(calc(var(--i) / calc(2 * var(--deg))) * calc(var(--deg) * 26%))) translateZ(calc(var(--size) * -1.3));*/
  /* added negetive translate Z to make backface into frontface and make it hidden*/
  transform: 
    rotateY(calc(var(--i) * calc(var(--deg) * 3deg))) translatey(100%) translateZ(calc(var(--size) * -2));
  
  transition:all .2s ease;
  width:var(--size);
  height:var(--size);
  background-image:var(--url);
  background-size:contain;
 backface-visibility:hidden;
}
@keyframes animate {
  0% {
    transform:rotateY(0deg) rotatez(0deg);
    
  }
  100% {
    transform:rotateY(360deg) rotatez(0deg);
  }
}
@keyframes deg {
  0% {
     
    transform: 
    rotateY(calc(var(--i) * calc(28 * 1deg))) 
    translatey(calc(calc(var(--i) / calc(1.11 * 28)) * calc(28 * 5.83%))) 
    translateZ(calc(var(--size) * -3.3));
  }
  100% {
     
    transform: 
    rotateY(calc(var(--i) * calc(18 * 1deg))) 
    translatey(calc(calc(var(--i) / calc(1.11 * 18)) * calc(18 * 5.83%))) 
    translateZ(calc(var(--size) * -3.3));
  }
}



.circle-wrapper{
  display:grid;
  place-items:center;
  height:100vh;
  width:100%;
  position:relative;
  overflow:hidden;
  
}
@property --duration {
  syntax: "<number>";
  inherits: true;
  initial-value: 30;
}

.main-element{
  
  width:400px;
  height:400px;
  border:1px solid #333;
  border-radius:50%;
  background-color: #fff;
  background-size:cover;
  position:absolute;
  left:50%;
  translate: -50% 0%;
  animation:round calc(var(--duration) * 1s) linear infinite;
  transition:all 0.3s;
  scale:0.8;
  &:hover{
    animation-play-state:paused;
  }
  &:hover .round-img{
    animation-play-state:paused;
  }
   @media (993px <= width <= 1366px) {
         scale:0.6;
    }
  
  
  @media (width < 992px)
  {
    scale:0.5;
    left: 100%;
    /* transform-origin:right;*/
  }
}
.main-text{
  font-size: 1.25rem;
  @media (width < 992px)
  {
    position: absolute;
    right: 0%;
    font-size: 0.75rem;
  }
  
}
.child-item{
  
  display:flex;
  justify-content:end;
  position:absolute;
  top:50%;
  left:50%;
  translate:0% -50%;
  transform-origin:left;
  rotate: z calc(var(--i) * ((360/var(--totalItems)) * 1deg));
      width: clamp(250px, calc((var(--totalItems))* 70px), 500px);
    height: calc((10 / var(--totalItems))* 150px);
}
.round-img{
  position:relative;
  height:100%;
  aspect-ratio:1;
  border-radius:50%;
  /*overflow:clip;
  rotate: z calc(var(--i) * -60deg);
  rotate: z calc(-60deg + -360deg);*/
  align-content: center;

  padding:10px;
  border:0px solid #333;
  filter: drop-shadow(0px 0px 10px #444);
  animation:round-img calc(var(--duration) * 1s) linear infinite;
  & img{
    width:inherit;
    height:inherit;
    object-fit:cover;
  }
  & .round-img-content{ 
    margin-top:10px;
    text-align:center;
    font-size: 1.5rem;
    font-weight: bold;
    z-index:10;
  }
}

@keyframes round{
  0%{
     rotate: z calc(0deg);
  }
  100%{
     rotate: z calc(360deg);
  }
}
@keyframes round-img{
  0%{
    rotate: z calc((var(--i) * ((360/var(--totalItems)) * -1deg)) + 0deg);
  }
  100%{
     rotate: z calc((var(--i) * ((360/var(--totalItems)) * -1deg)) + -360deg);
  }
}