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

body {
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
}

canvas {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* .details {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
} */

/* navbar start  */
  /* From Uiverse.io by m1her */
  .logo-text{
    display: flex;
  justify-content: center;
  margin: auto;
  color: white;
  position: relative;
  font-size: large;
  left: 5rem;
  }
  .radio-input {
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: black;
    padding: 4px;
    width: 100%;
    justify-content: end;
    border-radius: 10px;
    z-index: -1;
  }

  .radio-input input {
    display: none;
  }

  .radio-input .label {
    width: 90px;
    height: 60px;
    background: linear-gradient(to bottom, #333333, rgb(36, 35, 35));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: all 0.1s linear;
    border-top: 1px solid #4e4d4d;
    background-color: #333333;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 17px 5px 1px rgba(0, 0, 0, 0.2);
  }

  .label:has(input[type="radio"]:checked) {
    box-shadow: 0px 17px 5px 1px rgba(0, 0, 0, 0);
    background: linear-gradient(to bottom, #1d1d1d, #1d1d1d);
    border-top: none;
  }

  .label:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .label:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 103%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(to bottom,
        transparent 10%,
        transparent,
        transparent 90%);
    transition: all 0.1s linear;
    z-index: -1;
  }

  .label:has(input[type="radio"]:checked)::before {
    background: linear-gradient(to bottom,
        transparent 10%,
        #cae2fd63,
        transparent 90%);
  }

  .label .text {
    color: #f97575;
    font-size: 15px;
    line-height: 12px;
    padding: 0px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    transition: all 0.1s linear;
    text-shadow:
      -1px -1px 1px rgb(224, 224, 224, 0.1),
      0px 2px 3px rgb(0, 0, 0, 0.3);
  }

  .label input[type="radio"]:checked+.text {
    color: rgb(202, 226, 253);
    text-shadow: 0px 0px 12px #cae2fd;
  }
/* navbar end  */

.ball-text {
  position: fixed;
  z-index: 2;
  color: white;
  font-size: 5rem;
  right: 20%;
  bottom: 40%;
  transform: translate(-20%, -40%);
}

@media screen and (max-width: 1024px) {
  .ball-text {
    font-size: 2rem;
    right: 50%;
    bottom: 25%;
    transform: translate(50%, 50%);
  }
  h1 {
    font-size: 2rem;
  }
}


.background {
  position: fixed;
  top: -170px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/img/5073414.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}


canva{
  z-index: -30;
  position: relative;
  opacity: 1.4;
}
.about-us{
  width: 35%;
  padding: 30px;
  /* line-height: 26px; */
  position: relative;
  top: -200rem;
  border: 2px solid red;
  z-index: 9;
  color: white;
  left: 4rem;

}


.service {
    display: block;
    margin-top: 40rem; /* Top spacing */
    margin-left: auto; /* Push content to the right */
    margin-right: 120px; /* Align the div to the right */
    text-align: left; /* Text inside remains left-aligned */

}

/* .pin-spacer{
height: 4000px !important;
padding: 0 !important;
} */

/* bubble animation start */

#bubble {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h2 {
  font-size: 250px;
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
}

.first {
  color: transparent;
  -webkit-text-stroke: 2px #05a8f3;
}

.second {
  color: #05a8f3;
  -webkit-text-stroke: 2px #05a8f3;
  animation: waves 4s ease-in-out infinite;
}

@keyframes waves {

  0%,
  100% {
    clip-path: polygon(0% 45%,
        16% 44%,
        33% 50%,
        54% 60%,
        70% 61%,
        84% 59%,
        100% 52%,
        100% 100%,
        0% 100%);
  }

  50% {
    clip-path: polygon(0% 60%,
        15% 65%,
        34% 66%,
        51% 62%,
        67% 50%,
        84% 45%,
        100% 46%,
        100% 100%,
        0% 100%);
  }
}




body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.5) 200%);
}

#app {
  position: relative;
  height: 700px;
  width: 100%;
  font-family: "Montserrat", serif;
  overflow: hidden;
}

.hero {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  position: relative;
  z-index: 2;
  font-size: 100px;
  font-weight: 700;
}

h2 {
  font-size: 80px;
  font-weight: 500;
}

#webgl-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.buttons {
  position: absolute;
  width: 100%;
  bottom: 15px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#colors-btn {
  font-family: "Montserrat", serif;
  background: rgba(10, 165, 255, 0.5);
  border-radius: 5px;
  border: 1px solid rgb(202, 253, 60);
  padding: 4px 8px;
  font-size: 20px;
  color: white;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

#colors-btn:hover {
  background: rgba(10, 165, 255, 0.966);
}

button {
  position: relative;
  width: 11em;
  height: 4em;
  outline: none;
  transition: 0.1s;
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
  color: #ddebf0;
  margin: auto;
  /* display: flex; */
  /* justify-content: center; */
  left: 1rem;
  align-items: anchor-center;
  top: 1.5rem;
}

#clip {
  --color: #2761c3;
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 5px double var(--color);
  box-shadow: inset 0px 0px 15px #195480;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  -moz-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  -ms-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.arrow {
  position: absolute;
  transition: 0.2s;
  background-color: #2761c3;
  top: 35%;
  width: 11%;
  height: 30%;
}

#leftArrow {
  left: -13.5%;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
  -moz-clip-path: polygon(100% 0, 100% 100%, 0 50%);
  -ms-clip-path: polygon(100% 0, 100% 100%, 0 50%);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

#rightArrow {
  -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
  -moz-clip-path: polygon(100% 49%, 0 0, 0 100%);
  -ms-clip-path: polygon(100% 49%, 0 0, 0 100%);
  clip-path: polygon(100% 49%, 0 0, 0 100%);
  left: 102%;
}

button:hover #rightArrow {
  background-color: #27c39f;
  left: -15%;
  animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}

button:hover #leftArrow {
  background-color: #27c39f;
  left: 103%;
  animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}

.corner {
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: #2761c3;
  box-shadow: inset 1px 1px 8px #2781c3;
  transform: scale(1) rotate(45deg);
  transition: 0.2s;
}

#rightTop {
  top: -1.98em;
  left: 91%;
}

#leftTop {
  top: -1.96em;
  left: -3.0em;
}

#leftBottom {
  top: 2.10em;
  left: -2.15em;
}

#rightBottom {
  top: 45%;
  left: 88%;
}

button:hover #leftTop {
  animation: 0.1s ease-in-out 0.05s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover #rightTop {
  animation: 0.1s ease-in-out 0.15s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover #rightBottom {
  animation: 0.1s ease-in-out 0.25s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover #leftBottom {
  animation: 0.1s ease-in-out 0.35s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

button:hover .corner {
  transform: scale(1.25) rotate(45deg);
}

button:hover #clip {
  animation: 0.2s ease-in-out 0.55s both greenLight8;
  --color: #27c39f;
}

@keyframes changeColor8 {
  from {
    background-color: #2781c3;
  }

  to {
    background-color: #27c39f;
  }
}

@keyframes lightEffect8 {
  from {
    box-shadow: 1px 1px 5px #27c39f;
  }

  to {
    box-shadow: 0 0 2px #27c39f;
  }
}

@keyframes greenLight8 {
  from {
  }

  to {
    box-shadow: inset 0px 0px 32px #27c39f;
  }
}

@keyframes leftArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(10px);
  }
}

@keyframes rightArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(-10px);
  }
}





/* bubble animation end  */


/* card animation start */

/* From Uiverse.io by ilkhoeri */ 


 /* card animation end  */

.second {
    color: #05a8f3;
    -webkit-text-stroke: 2px #05a8f3;
    animation: waves 4s ease-in-out infinite;
}

@keyframes waves {
    0%,
    100% {
        -webkit-clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
        -moz-clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
        -ms-clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }

    50% {
        -webkit-clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
        -moz-clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
        -ms-clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}

.spider-section {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* background: linear-gradient(to bottom, #000000, #1a1a1a); */
}

#spider {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: transparent;
}

#spider canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-indicator.visible {
    opacity: 1;
}

/* spider background  */
/* From Uiverse.io by SelfMadeSystem */ 
/* Container for the animated background */
.container-bg {
  position: relative;
  inset: 0;
  --circle-size: 7px;
  background-color: #000;
  background-image: 
    radial-gradient(circle at 50% 50%, transparent 1.5px, #000 0 var(--circle-size), transparent var(--circle-size)),
    radial-gradient(circle at 50% 50%, transparent 1.5px, #000 0 var(--circle-size), transparent var(--circle-size)),
    radial-gradient(circle at 50% 50%, #f00, transparent 60%),
    radial-gradient(circle at 50% 50%, #ff0, transparent 60%),
    radial-gradient(circle at 50% 50%, #0f0, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #00f, transparent 60%);
  background-size: 
    12px 20.7846px, 
    12px 20.7846px, 
    200% 200%, 
    200% 200%, 
    200% 200%, 
    200% 20.7846px;
  background-position: 
    0px 0px, 
    6px 10.3923px,
    800% 400%,
    1000% -400%,
    -1200% -600%,
    400% 41.5692px;
  animation: 
    scroll-animation 40s linear infinite, 
    color-shift 6s linear infinite;
}


@keyframes color-shift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}


@keyframes scroll-animation {
  0% {
    background-position: 
      0px 0px, 
      6px 10.3923px,
      800% 400%,
      1000% -400%,
      -1200% -600%,
      400% 41.5692px;
  }
  100% {
    background-position: 
      0px 0px, 
      6px 10.3923px,
      0% 0%, 
      0% 0%, 
      0% 0%, 
      0% 0%;
  }
}


/* spider .background */


/* image animtion start  */
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Grey+Qo&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Righteous&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "EB Garamond", serif;
}
html , body{
    height: 100%;
    width: 100%;
}

body::-webkit-scrollbar {
    display: none;
  }

#main{
    width: 100%;
    height: 85vh;
}

nav{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 10vh;
    padding: 0vw 10vw;
    z-index: 99;
}

nav a, i{
    font-size: 1.5vw;
    text-decoration: none;
    color: #fff;
}

.cntr-nav{
    display: flex;
    gap: 3vw;
}

nav i{
    font-size: 1.5vw;
}

.header{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: url(Assets/bg-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.header h1{
    font-size: 18vw;
    font-family: "EB Garamond", serif;
    color: #fff;
}

#can{
    position: absolute;
    width: 35%;
    z-index: 2;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}

#multi-ring{
    position: absolute;
    top: 8%;
    left: 42%;
    width: 25%;
    z-index: 1;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}

#yellow-ring{
    position: absolute;
    width: 15%;
    z-index: 3;
    top: 70%;
    right: 35%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}

#almod{
    top: 10%;
    left: 5%;
    transform: rotate(60deg);
    position: absolute;
    width: 7%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}

#almod2{
    top: 70%;
    left: 80%;
    transform: rotate(-90deg);
    position: absolute;
    width: 10%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}


.about{
    display: flex;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(90deg, #a9774e, #864831, #402014);
}

.about-left, .about-right{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 5vh;
    width: 50%;
    height: 100%;
}

.about-left img{
    margin-top: 45vh;
    width: 90%;
    transform: rotateX(50deg);
}

.about-right h1{
    color: #fff;
    font-size: 5vw;
}

.about-right p{
    font-size: 1vw;
    color: #fff;
    width: 80%;
}

.product{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90vhvh;
}
.product img{
    width: 100%;
    height: 100%;
}



/* image animaion end  */