:root {
  --tan: #b16824;
  --blush: #f1e0d9;
  --shadowgreen: #9ec1c7;
  --mosque: #016e75;
  --sherpablue: #00424e;
}
@font-face {
  font-family: sgeorge;
  src: url(SaintGeorge-LowercaseStencil.ttf);
}
@font-face {
  font-family: ttramillas;
  src: url(Fontspring-DEMO-tt_ramillas_extrabold.otf);
}

.tan-text {
  color: var(--tan);
}
.blush-text {
  color: var(--blush);
}
.shadowgreen-text {
  color: var(--shadowgreen);
}
.mosque-text {
  color: var(--mosque);
}
.sherpablue-text {
  color: var(--sherpablue);
}

.gradient-bg {
  background: linear-gradient(90deg, #f1e0d9 -10%, #9ec1c7 45%, #b16824 115%);
}
.tan-bg {
  background: var(--tan);
}
.blush-bg {
  background: var(--blush);
}
.shadowgreen-bg {
  background: var(--shadowgreen);
}
.mosque-bg {
  background: var(--mosque);
}
.sherpablue-bg {
  background: var(--sherpablue);
}

.ttfont {
  font-family: ttramillas;
}
.sgeorgefont {
  font-family: sgeorge;
}
.image-bg {
  background-image: url("bg.png");
}

.banner {
  width: 100%;
  object-fit: cover;
}

.illustration {
  max-width: 100%;
  height: auto;
}

.btn-main {
  color: white;
  border: none;
  border-radius: 8px;
}

.btn-main:hover {
  background-color: var(--mosque);
  color: white;
  font-weight: bold;
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  min-height: 400px; /* or any fixed value */
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-control {
  border-radius: 8px;
}

/* Fade animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

.fade-in.delay {
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.thank-you-message {
  padding-top: 1rem;
}

/* Optional: give the message a soft color touch */
#thank-you-message h4 {
  color: #f55b80;
}

/* Add a "rise-up" effect */
@keyframes riseUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Apply animation to the new card */
.card.rise-up {
  animation: riseUp 0.6s ease-out;
}

/* Optional: To make the transition smooth */
.card.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}