/* Universal box-sizing for consistency */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* Base container styles */
.container {
  width: 100% !important;
  padding-left: 1rem !important; /* Padding to mimic Bootstrap's container */
  padding-right: 1rem !important; /* Padding to mimic Bootstrap's container */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Breakpoints for different max-widths */
@media (min-width: 576px) {
  .container {
    max-width: 540px !important;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px !important;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px !important;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px !important;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px !important;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.animation-holder {
  position: relative;
  width: 500px; /* Adjust size as needed */
  height: 500px; /* Adjust size as needed */
  perspective: 1000px; /* Adds perspective for 3D effect */
}

.circular-animation-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: circular-motion 10s linear infinite;
}

.animated-word {
  position: absolute;
  font-size: 24px; /* Adjust font size as needed */
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 1.2;
  width: 100%; /* Ensure the width matches the container */
  height: 100%; /* Ensure the height matches the container */
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden; /* Hide the back face of the word */
}

.horizontal {
  transform: rotateY(0deg) translateZ(250px); /* Rotate on Y-axis and translate Z */
}

.vertical {
  transform: rotateY(180deg) translateZ(250px); /* Rotate on Y-axis and translate Z */
}

@keyframes circular-motion {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes move-left {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-40px); /* Moves left by 40px */
  }
}

@keyframes move-right {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(40px); /* Moves right by 40px */
  }
}

@keyframes stretch {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.2);
  } /* Stretches to 120% width */
  100% {
    transform: scaleX(1);
  } /* Returns to original width */
}

/* For small screens, adjust the movement to 20px */
@media (max-width: 640px) {
  /* Tailwind's `sm` breakpoint is 640px */
  @keyframes move-left {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-20px); /* Moves left by 20px on small screens */
    }
  }

  @keyframes move-right {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(20px); /* Moves right by 20px on small screens */
    }
  }

  @keyframes stretch {
    0% {
      transform: scaleX(1);
    }
    50% {
      transform: scaleX(1.1);
    } /* Stretches to 120% width */
    100% {
      transform: scaleX(1);
    } /* Returns to original width */
  }
}



.rainbow {
  position: relative;
  z-index: 0;

  border-radius: 10px;
  overflow: hidden;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #00bcd4; /* Base color for background when not hovering */

  /* Default state without gradient and rotation */
  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: transparent; /* Hide gradient by default */
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: none; /* No gradient by default */
    animation: none; /* No rotation by default */
    clip-path: none; /* No clipping by default */
  }

  /* Show gradient and rotation on hover */
  &:hover::before {
    background-color: #00bcd4; /* Base color for background on hover */
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(
        135deg,
        rgba(0, 188, 212, 0.8),
        rgba(0, 188, 212, 0.8)
      ),
      linear-gradient(225deg, rgba(76, 175, 80, 0.8), rgba(76, 175, 80, 0.8)),
      linear-gradient(315deg, rgba(0, 150, 136, 0.8), rgba(0, 150, 136, 0.8)),
      linear-gradient(45deg, rgba(0, 121, 107, 0.8), rgba(0, 121, 107, 0.8));
    animation: rotate 4s linear infinite;
    clip-path: inset(1px); /* Adjust thickness of visible gradient */
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 3px;
    top: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background: white;
    border-radius: 5px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Diminished border effect */
  }
}

/* Keyframes for rotation */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* #loginModal {
	.fields {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: column;
	}

	.fields .input-field {
		display: flex;
		width: 90%;
		flex-direction: column;
		margin: 4px 0;
	}

	.input-field label {
		font-size: 14px;
		font-weight: 500;
		color: #2e2e2e;
	}

	.input-field input,
	select {
		outline: none;
		font-size: 14px;
		font-weight: 400;
		color: #333;
		border-radius: 5px;
		border: 1px solid #aaa;
		padding: 0 15px;
		height: 42px;
		margin: 8px 0;
	}

	.input-field input :focus,
	.input-field select:focus {
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
	}

	.input-field select,
	.input-field input[type='date'] {
		color: #707070;
	}

	.input-field input[type='date']:valid {
		color: #333;
	}

	#submit-login-btn {
		background: linear-gradient(
			142deg,
			rgba(177, 228, 242, 0.9) 0%,
			rgba(15, 118, 240, 1) 100%
		);
		color: white;
		padding-inline: 3rem;
		border: none;
		font-weight: bold;
		letter-spacing: 1px;
	}
}

.text-heading {
	margin-top: 1.25rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

img.gadge-baba-img {
	width: 3rem;
	height: 3rem;
}

img.img-fluid.animated {
	display: block;
	margin-inline: auto;
	max-width: 20rem;
}

@media screen and (max-width: 768px) {
	img.img-fluid.animated {
		width: 13rem !important;
	}
	.text-heading {
		gap: 1rem;
		font-size: 1.5rem !important;
	}
	img.gadge-baba-img {
		width: 2.8rem;
		height: 2.8rem;
	}
} */