@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&display=swap");

/* CUSTOMIZED FONTS */
.font-merienda {
  font-family: "Merienda", sans-serif;
}
.font-poppins {
  font-family: "Poppins", sans-serif;
}

.custom-element {
  color: primary_100;
}
/* CUSTOMIZED FONTS */

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.animate-scroll {
  animation: scroll 15s linear infinite;
}
.absolute-container {
  position: absolute;
  top: 50%;
  right: 15%; /* Adjusted from right-0 or right-6 */
  transform: translateY(-50%);
}

.pendulum {
  animation: pendulum-swing 3s ease-in-out infinite;
}

@keyframes pendulum-swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.font-montserrat {
  font-family: "Montserrat", sans-serif;
}

.pop-up {
  width: 400px;
  background: #fff;
  border-radius: 6px;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  text-align: center;
  padding: 0 30px 30px;
  color: #333;
  visibility: hidden;
  transition: transform 0.4s, top 0.4s;
}
.open-popup {
  visibility: visible;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}
/* .close-popup{

    visibility: hidden;
    top: 0%;
    transform: translate(-50%, -50%) scale(0.1);
} */
.pop-up img {
  width: 100px;
  margin-top: -50px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.pop-up h2 {
  font-size: 38px;
  font-weight: 500;
  margin: 30px 0 10px;
}
.pop-up button {
  width: 100%;
  margin-top: 50px;
  padding: 10px 0;
  background: #152892;
  color: #fff;
  border: 0;
  outline: none;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.about-container {
  @apply h-screen bg-cover bg-center relative;
}

.about-container::before {
  @apply absolute top-0 left-0 w-full h-full bg-blue-500 bg-opacity-50 hover:bg-opacity-70 transition duration-500;
  content: "";
}

.about-container button {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md;
}
.blur {
  filter: blur(20px);
}
.font-remove {
  transition: opacity 0.5s ease-in-out;
}

.font-remove {
  opacity: 0;
}
.active {
  color: #ffffff;
  background-color: #1d4ed8; /* Blue background */
  font-weight: bold;
  border-radius: 0.375rem; /* Rounded corners */
}

.bg-primary-color {
  background-color: #333397;
}
.bg-primary_100-color {
  background-color: #2d2d86;
}

.shift-right {
  position: relative;
  left: 15em;
}
.animate-bounce {
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}