body {
  font-family: var(--font-inter), sans-serif;
  background-image: url('contactUsBaground.jpeg');
  background-size: cover; /* Cover the entire viewport */
  background-position: center; /* Center the background image */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Set height to full viewport height */
  margin: 0;
  transform: scale(0.95);
  transform-origin: 0 0;
}

  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-inter), sans-serif;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .max-w-md {
    max-width: 28rem; /* 448px */ 
  }
  
  .card {
    background-image: linear-gradient(to bottom, #beede0, #ffffff53); /* Adjust colors as needed */

  
    border: 1px solid #e5e7eb; /* light gray border */
    border-radius: 0.5rem; /* rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* enhanced shadow */
    padding: 1.5rem; /* padding inside the card */
    background-color: #ffffff; /* white background */
    transition: transform 0.3s, box-shadow 0.3s; /* smooth transition for hover effect */
  }
  
  .card:hover {
    transform: translateY(-16px); /* slight lift on hover */
    box-shadow: 0 10px 15px rgba(0.7, 0.9, 0.5, 0.6); /* deeper shadow on hover */
  }
  
  .card-header {
    margin-bottom: 1.5rem; /* space between header and content */
  }
  
  .card-title {
    font-size: 1.5rem; /* larger font size for title */
    font-weight: 700; /* bold font */
    margin-bottom: 0.5rem; /* space between title and description */
    color: #1f2937; /* dark gray for title */
  }
  
.card-title,
.card-description {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif/* Change 'Arial' to your preferred font */
}
  
  textarea#message {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;/* Change 'Arial' to your preferred font */
  }
  
  .card-content {
    margin-bottom: 1.0rem; /* space between content and footer */
  }
  
  .form {
    padding-top: 1rem; /* padding at the top of the form */
  }
  
  .space-y-2 > * + * {
    margin-top: 0.5rem; /* space between elements inside space-y-2 */
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem; /* space between elements inside space-y-4 */
  }
  
  .grid {
    display: grid;
  }
  
  .grid-cols-1 {
    grid-template-columns: 1fr; /* one column */
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr); /* two equal columns */
  }
  
  .gap-4 {
    gap: 1rem; /* gap between grid items */
  }
  
  input, textarea, button {
    width: 100%; /* full width for inputs, textarea and button */
    padding: 0.75rem; /* increased padding inside inputs, textarea and button */
    border: 1px solid #d1d5db; /* light gray border */
    border-radius: 0.375rem; /* rounded corners */
    font-size: 1rem; /* normal font size */
    transition: border-color 0.3s, box-shadow 0.3s; /* smooth transition for focus effect */
  }
  
  input:focus, textarea:focus, button:focus {
    outline: none; /* remove default focus outline */
    border-color: #3b82f6; /* blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* blue shadow on focus */
  }
  
  textarea.min-h-100 {
    min-height: 100px; /* minimum height for textarea */
    
  }
  
  .radio-group {
    display: flex;
    align-items: center;
    gap: 1rem; /* gap between radio items */
  }
  
  .radio-group input {
    width: auto; /* auto width for radio inputs */
  }
  
  .card-footer {
    display: flex;
    justify-content: flex-end; /* align button to the right */
  }
  
  button {
    background-color: #72ccb6; /* blue background */
    color: #ffffff; /* white text */
    font-weight: 700; /* bold text */
    cursor: pointer; /* pointer cursor on hover */
    transition: background-color 0.3s, transform 0.3s; /* smooth transition for hover effect */
  }
  
  button:hover {
    background-color: #238f74; /* darker blue on hover */
    transform: translateY(-3px); /* slight lift on hover */
  }
  
  /* Animation styles */
  .form-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  .form-element.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  label,
input {
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif /* Change 'Arial' to your preferred font */
}

.custom-button {
 
  position: fixed;
  top: 20px; /* adjust as needed */
  left: 20px; /* adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b010100;
  border-radius: 3px;
  height: 3em;
  width: 100px;
  letter-spacing: 0px;
  transition: all 0.2s linear;
  cursor: pointer;
  border: none;
  background: #ffffff;
  font-family: 'Roboto', sans-serif;
  color: #000000; /* set text color to black */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

.custom-button > svg {
  font-weight: bold; /* making the text bold */
  margin-right: 5px;
  margin-left: 5px;
  font-size: 20px;
  transition: all 0.4s ease-in;
}

.custom-button:hover > svg {
  font-size: 1.2em;
  transform: translateX(-5px);
}

.custom-button:hover {
  box-shadow: 2px 9px 33px rgba(0, 0, 0, 0.5), -9px -9px 33px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Adjustments for smaller screens */
@media screen and (max-width: 600px) {
  .custom-button {
    top: 10px;
    left: 10px;
    width: 80px;
  }
}