:root {
  --ourmenu-primary-100: white;
  --ourmenu-primary-700: #3e3f40;
  /* --ourmenu-primary-800: #A376A2; */
  /* --ourmenu-primary-800: #eba7f7; */
  /* --ourmenu-primary-800: #9a5de0ca; */
  --ourmenu-primary-800: #37145c97;
  --ourmenu-primary-900: #00050a;
    --ourmain-font: "Outfit", sans-serif;
    --ourheading-font:  "Kavoon", serif;
    --oursubtitle-font: "Roboto Condensed", sans-serif;
    --ourletter-space: 1px;
    --ourheading-font-size:43px;
    --oursubtitle-font-size:28px;
    --ourmain-font-size:18px;

}
 
 .blognews-main{
    /* background-color: #fcbffc; */
    background-color: #9a5de0ca;
   
  }
.blognews-cta {
  padding: 1rem 0;
  /* background-color: #f9f9f9; */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.blognews-cta.animate {
  opacity: 1;
  transform: translateY(0);
}

.blognews-cta h2 {
  /* font-size: 2rem; */
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
    font-family: var(--ourheading-font);
  text-transform:capitalize; 
  font-size: var(--ourheading-font-size);
}

.blognews-cta p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  color: white;
    font-family: var(--ourmain-font);

}

/* Form input & button */
.blognews-input {
  border-radius: 25px 0 0 25px;
  padding: 10px 20px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.blognews-input::placeholder {
  color: #999;
  text-indent: 5px;
}

.blognews-input:focus {
  border-bottom: 2px solid #F8B259;
  box-shadow: 0 2px 0 #F8B259;
}

.blognews-btn {
  border-radius: 0 25px 25px 0;
  background-color: #F8B259;
  color: white;
}

.input-group {
  max-width: 450px;
}

/* Messages */
.blognews-cta-form .loading,
.blognews-cta-form .error-message,
.blognews-cta-form .sent-message {
  display: none;
  margin-top: 10px;
  font-size: 0.95rem;
}

.blognews-cta-form .loading { color: #0069d9; }
.blognews-cta-form .error-message { color: #dc3545; }
.blognews-cta-form .sent-message { color: #28a745; font-weight: 500; transition: opacity 0.5s ease-in-out; }

/* Responsive */
@media (max-width: 991.98px) {
  .blognews-cta { padding: 2rem 1rem; }
}
/* Input group animation from bottom */
.blognews-cta .input-group {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUpFromBottom 0.8s ease forwards;
  animation-delay: 0.6s; /* delay so text appears first */
}

@keyframes fadeUpFromBottom {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}