.contento {
  max-width: 1000px;
margin: auto;
    text-align: center;
    font-family: "Girassol", serif;
    font-family: sans-serif;
     font-family: "DM Serif Display", serif;
    font-family: "Lexend", sans-serif;
    font-family: -apple-system-headline, BlinkMacSystemFont, sans-serif;
    font-family: "Bebas Neue", serif;
    font-family: var(--mainFont);
    letter-spacing: 0.8px;
    padding: 0px 10px;
}

.contact_section {
    margin: auto;
    margin: 60px 0px 0px 0px;
    color: white;
    background-color: rgb(25, 25, 25);
    font-family: "Bebas Neue", serif;
    font-family: var(--mainFont);
    font-weight: 500;
    text-decoration: none;

}

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}


#contact_header {
    font-size: 3rem;
    @media (max-width: 800px) {
        font-size: 2.2rem;
    }
}

#contact_details {
    font-size: 1.5rem;
/*     color: inherit; */
/*     text-decoration:none; */
    @media (max-width: 800px) {
        font-size: 1.3rem;
    }
}

input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px; /* Gray border */
  border-radius: 8px; /* Rounded borders */
   box-sizing: border-box; /* Make sure that padding and width stays in place */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
      margin: 10px 0px;
    font-family: var(--mainFont);
    font-size: 0.9rem;

    outline: none;
    caret-color: rgb(25, 25, 25);black;
}

textarea{
    font-family: var(--mainFont);
    font-size: 0.9rem;
    height: 200px;

}

input[type=submit] {
    font-family: "Bebas Neue", serif;
    font-family: var(--mainFont);
    font-weight: 600;
    font-size: 1.2rem;
/*     letter-spacing: 0.8px; */
  background-color: #ffffff;
  color: rgb(25, 25, 25);
  padding: 12px 48px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
    margin: 10px 0px;

    @media (max-width: 800px) {
        font-size: 1.1rem;
    }
}

input::placeholder, textarea::placeholder {
  font-family: "Bebas Neue", serif;
    font-family: var(--mainFont);
    font-weight: 200;
    font-style: italic;
    font-size: 0.9rem;
/*     letter-spacing: 0.7px; */
}

#motto {
    font-family: var(--mainFont);
        text-transform: uppercase;
        font-weight: 700;
        background-color: rgb(25, 25, 25);
        color: white;
        text-align: center;
        padding: 1px;
   }
#motto1 {
    font-size: 1.8rem;
    margin: 40px 0px 0px;
    color: rgb(190, 190, 190);
    @media (max-width: 800px) {
        font-size: 1.4rem;
    }
    }
#motto2 {
    font-size: 3rem;
    margin: 0px 0px 40px;
        @media (max-width: 800px) {
        font-size: 2.1rem;
    }
    }



.hstack {
    display: flex; /* Enables Flexbox layout */

  flex-direction: row; /* Arranges items horizontally (default for flex) */

  align-items: center; /* Vertically aligns items in the center (like SwiftUI's default alignment) */
  gap: 70px;
/*     font-family: sans-serif; */
    padding: 80px 20px;

        @media (max-width: 800px) {
        flex-direction: column-reverse;
            gap:10px;
            padding: 10px 10px;
}
  }

.order-reverse {
        flex-direction: row-reverse;
    @media (max-width: 800px) {
        flex-direction: column-reverse;
}
    }


  .vstack {
/*     display: flex; */
    flex-direction: column;
      margin: 0px;
      padding: 0px;

  }

.alignment-left {
    align-items: left;
    text-align: left;
}

.alignment-right {
    align-items: right;
    text-align: right;
}

  .title {
    font-size: 2rem;
    font-weight: bold;
      flex-shrink: 0;
      margin: 0px;
      padding: 0px;
      @media (max-width: 800px) {
          width: 100%;
          font-size: 1.5rem;
      }
  }

  .description {
    font-size: 1.8rem;
    color: #1c1c1c;
      width: 400px;
      @media (max-width: 800px) {
          width: 100%;
          font-size: 1.4rem;
      }
  }

  .image img{

    width: 400px;
    background-color: #ddd; /* placeholder gray */
    border-radius: 16px;
      @media (max-width: 800px) {
          width: 100%;
      }
  }

#contact {
/*     display: flex; */
        margin: auto;
    max-width: 1000px;
  padding: 40px 0px;
    @media (max-width: 800px) {
          width: 90%;

      }
/*     margin: 60px 0px 0px 0px; */

}

#footer {
    font-family: var(--mainFont);
    color: white;
    background-color: rgb(25, 25, 25);
    width: 100%;
    max-width: 100%;
    padding: 10px 0px;
}