/*#block-capacity-plus-contactblock {
  background-image: url('/sites/default/files/geometric-large-black-and-white-image.webp');
  min-height: 400px;
  position: relative; /* Needed for absolute children 
  overflow: hidden;   /* Optional: hides overflow from animation 
} */

#block-capacity-plus-contactblock {
  background-image: url('/sites/default/files/geometric-large-black-and-white-image.webp');
  background-attachment: fixed; /* Key to the parallax effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Initial layout */
#block-capacity-plus-contactblock .contact-overlay {
  position: absolute; /* Or relative depending on image context */
  top: 50%;           /* Adjust as needed */
  left: 50%;
  text-align:center;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(100%); /* start off-screen */
  padding: 1.5rem 2rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  z-index: 10;
  animation: contactslideIn 1s ease-out forwards;
  animation-delay: 0.5s;
  width: 60%;
}

#block-capacity-plus-contactblock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(189, 28, 28, 0.85);
  z-index: 1;
  pointer-events: none;
}

/* Text elements inside: fade in after container */
.contact-overlay p,
.contact-overlay .button-capacity {
  opacity: 0;
  transform: translateX(-10px);
  animation: fadeText 1s ease forwards;
}

/* Delays for staggered appearance */
.contact--overlay h1 {
  animation-delay: 1s;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1); */
}
.contact-overlay p {
  animation-delay: 1.5s;
  font-size: 1.9rem;
}
.contact-overlay .button-capacity {
  animation-delay: 2.75s;
}

/* Tablet adjustments */
@media only screen and (max-width: 1000px) {
  #block-capacity-plus-contactblock {
    min-height: 300px;
  }

  .contact-overlay {
    padding: 1rem 1.5rem;
    top: 15%;
    max-width: 90%;
  }

  .contact-overlay p {
    font-size: 1.25rem;
  }

  .contact-overlay .button-capacity {
    font-size: 0.9rem;
    padding: 8px 12px;
  }
}

/* Phone adjustments */
@media only screen and (max-width: 480px) {
  .contact-overlay {
    padding: 0.75rem 1rem;
    max-width: 95%;
    /*top: auto; */
    /*bottom: 10%;*/
  }

 .contact-overlay h1 {
    font-size: 0.9rem;
  }

  .contact-overlay p {
    font-size: 1rem;
  }

  .contact-overlay .button-capacity {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
}

.webform-flex--1 {
  flex: 1;
  text-align: center;
}

.form-item {
  color: var(--capacity-red);
  font-weight: bold;
}

.webform-flex--1 #edit-message, #edit-name, #edit-subject, #edit-email {
  border-radius: 8px;
}

.webform-flex--container {
  margin: 0 0.5em;
  width: 85%;
}

.webform-submission-form  {
  border-bottom: 5px solid var(--vapacity-red);
  }

#edit-actions-submit {
  background-color: var(--capacity-red);  /* Dark red base */
  color: white;
  padding: 8px 16px;                           /* Vertical x Horizontal */
  border: none;
  border-radius: 8px;                          /* Rounded corners */
  font-size: 1.15rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);   /* Subtle drop shadow */
  text-decoration: none;
  transition:
  background-color 0.3s ease,
  box-shadow 0.3s ease,
  transform 0.2s ease;
}

/* Hover state: lighter red + no shadow */
#edit-actions-submit:hover {
  background-color: var(--capacity-red-dark);
  box-shadow: none;
  color: white;
  font-weight: bold;
  transform: translateY(-1px); /* subtle lift effect */
}

#edit-flexbox-02 .form-item {
	text-align:left;
}

/* tablet Adjustments */
@media only screen and (max-width: 1024px) {
.contact-overlay {
    top: 20%;
   }
}

/* Keyframes */
@keyframes contactslideIn {
  to {
    transform: translate(-50%, -50%); /* End centered */
    opacity: 1;
  }
}

@keyframes fadeText {
  to {
    opacity: 1;