@charset "utf-8";

/* ==================================================================== */
/* ============================ animetions ============================ */
/* ==================================================================== */
.hoverImg {
  margin-top: -500px;
}

.topRings {
  position: relative;
  width: 250px;
  height: 250px;
  z-index: 50;
  top: -200px;
  left: -120px;
}

.ring {
  position: absolute;
  border: 5px solid var(--primary-Black, 0.4);
  border-radius: 50%;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ring:nth-child(1) {
  width: 250px;
  height: 250px;
    top: 0;
    left: 0;
    border-color: rgba(30, 134, 126, 0.3);
}

.ring:nth-child(2) {
  width: 250px;
  height: 250px;
    top: 0;
    left: 0;
    border-color: rgba(37, 37, 37, 0.5);
}

.ring:nth-child(3) {
  width: 250px;
  height: 250px;
    top: 0;
    left: 0;
    border-color: rgba(97, 97, 97, 0.4);
}

.ring:nth-child(4) {
  width: 250px;
  height: 250px;
    top: 0;
    left: 0;
    border-color: rgba(48, 213, 200, 0.6);
}

/* .mouse-follower {
  position: fixed;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  transition: transform 0.1s ease;
} */


@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes floatImage {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) translateX(5px) rotate(2deg);
  }
  50% {
    transform: translateY(-10px) translateX(-5px) rotate(-1deg);
  }
  75% {
    transform: translateY(-20px) translateX(3px) rotate(1deg);
  }
}

.floating-image {
  position: relative;
  width: 110px;
  height: auto;
  background: white;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease;
  animation: floatImage 8s ease-in-out infinite;
}

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

.image-1 {
  top: 400px;
  left: -150px;
  animation-delay: 0s;
}

.image-2 {
  top: 320px;
  right: -80px;
  animation-delay: -2s;
}

.image-3 {
  bottom: -460px;
  left: -130px;
  animation-delay: -4s;
}

.image-4 {
  bottom: -370px;
  right: -40px;
  animation-delay: -6s;
}
/* ===================================================================== */
/* ===================================================================== */
.section--contactAnancs {
  display: flex;
  padding: 100px 50px 150px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  background: var(--primary-Black);
}


.contactAnancs__txtbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.contactAnancs__container h4 {
  color: var(--primary-White);
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.8rem;
}



/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
@media screen and (min-width: 769px) {
.hoverImg {
  margin-top: -1000px;
}

.topRings {
  position: relative;
  width: 400px;
  height: 400px;
  z-index: 50;
  top: -370px;
  left: -188px;
}

.ring {
  position: absolute;
  border: 5px solid var(--primary-Black, 0.4);
  border-radius: 50%;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ring:nth-child(1) {
  width: 400px;
  height: 400px;
    top: 0;
    left: 0;
    border-color: rgba(30, 134, 126, 0.3);
}

.ring:nth-child(2) {
  width: 400px;
  height: 400px;
    top: 0;
    left: 0;
    border-color: rgba(37, 37, 37, 0.5);
}

.ring:nth-child(3) {
  width: 400px;
  height: 400px;
    top: 0;
    left: 0;
    border-color: rgba(97, 97, 97, 0.4);
}

.ring:nth-child(4) {
  width: 400px;
  height: 400px;
    top: 0;
    left: 0;
    border-color: rgba(48, 213, 200, 0.6);
}
/*
.mouse-follower {
  position: fixed;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  transition: transform 0.1s ease;
} */


@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes floatImage {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) translateX(5px) rotate(2deg);
  }
  50% {
    transform: translateY(-10px) translateX(-5px) rotate(-1deg);
  }
  75% {
    transform: translateY(-20px) translateX(3px) rotate(1deg);
  }
}

.floating-image {
  position: relative;
  width: 250px;
  height: auto;
  background: white;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease;
  animation: floatImage 8s ease-in-out infinite;
}

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

.image-1 {
  top: 1110px;
  left: -520px;
  animation-delay: 0s;
}

.image-2 {
  top: 930px;
  right: -320px;
  animation-delay: -2s;
}

.image-3 {
  bottom: -1020px;
  left: -350px;
  animation-delay: -4s;
}

.image-4 {
  bottom: -800px;
  right: -150px;
  animation-delay: -6s;
}



  .contactAnancs__container h4 {
    font-size: 2.2rem;
  }

  .contactAnancs__txtbox p {
    font-size: 1.8rem;
  }

}