:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-800: #595959;
  --dl-color-gray-900: #D9D9D9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #A22020;
  --dl-color-danger-500: #BF2626;
  --dl-color-danger-700: #E14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #FFFFFF;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003EB3;
  --dl-color-primary-300: #0074F0;
  --dl-color-primary-500: #14A9FF;
  --dl-color-primary-700: #85DCFF;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32A94C;
  --dl-color-success-700: #4CC366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-color-primary1-orange80: #d64804ff;
  --dl-color-primary1-orangeHover: #d38d6d;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-color-primary1-blue100: #af6d15ff;
  --dl-space-space-threeunits: 48px;
  --dl-color-secondary-gray500: #d9d9d9ff;
  --dl-color-secondary-greyorg400: #dccfc8ff;
  --dl-space-space-oneandhalfunits: 24px;
}

.form-group {
  display: flex;
  margin-bottom: var(--dl-space-space-unit);
}

.form-group label {
  font-size: 1.25rem; /* Large, legible labels as seen in the image */
  margin-bottom: var(--dl-space-space-halfunit);
  text-transform: uppercase; /* If you want labels to be uppercase as commonly seen */
  font-weight: bold; /* Makes labels bold */
  cursor: pointer; /* Indicates that labels are interactive */
}

.input,
.textarea {
  align-content: center;
  border: 2px solid var(--dl-color-gray-500); /* Slightly thicker border as seen in the image */
  padding: var(--dl-space-space-unit);
  border-radius: var(--dl-radius-radius4); /* Keep the rounded corners */
  margin-bottom: var(--dl-space-space-unit); /* Space between inputs */
  width: 130%; /* Set the width as desired */
  position: relative; /* Relative positioning as a basis for the transform */
  left: 50%; /* Move to the right, halfway across the parent */
  transform: translateX(-50%); /* Move back to the left by half its own width */
}

.textarea {
  height: 150px; /* Larger height for textarea as seen in the image */
}

.button {
  background-color: var(--dl-color-primary1-orange80); /* Primary color for the button */
  color: var(--dl-color-gray-white); /* White text for the button */
  padding: var(--dl-space-space-unit) var(--dl-space-space-twounits); /* Padding from your variables */
  border: none;
  border-radius: var(--dl-radius-radius4); /* Rounded corners for the button */
  text-transform: uppercase; /* Uppercase text for the button */
  font-weight: bold; /* Makes button text bold */
  cursor: pointer;
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.button:hover {
  background-color: var(--dl-color-primary1-orangeHover); /* Darker shade on hover */
}
.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}
.list-item {
  display: list-item;
}
.teleport-show {
  display: flex !important;
  transform: none !important;
}
.heading2 {
  font-size: 2.5rem;
}
.heading1 {
  font-size: 4.5rem;
  font-weight: 700;
}
.sectionTitle {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.2;
  text-transform: uppercase;
}
.heading4 {
  font-size: 1.2rem;
}
.heading3 {
  font-size: 1.8rem;
}
.Content {
  font-size: 16px;
  font-family: "Poppins";
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.Heading {
  font-size: 32px;
  font-family: "Poppins";
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
/* Add padding around the image if it's not as tall as the max-height */
@media (max-height: 500px) {
  .modal-content {
    padding: 10px;
  }
}
/* Style the Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

/* Ensure the close button is always in the top right of the modal */
.close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  transition: 0.3s;
}

/* Style the modal content (image) */
.modal-content {
  display: block;
  max-width: 90%; /* Maximum width of the image */
  max-height: 80vh; /* Maximum height of the image */
  margin: auto; /* Center the image horizontally */
  position: relative; /* To position it relative to its container */
  top: 50%; /* Push down from the top half of its container */
  transform: translateY(-50%); /* Move it up by half its own height to center vertically */
}