body {
    margin: 0px;
    padding: 0px;
  }
  .hero1 {
    width: 100%;
    height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c4c197;
  }
  .hero1-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 50px;
  }
  .hero1-heading h1 {
    font-size: 65px;
    font-weight: 400;
    font-family: "fraunces";
    color: #403f2b;
    margin: 0px;
    line-height: 65px;
    letter-spacing: -1px;
  }
  .hero1-heading p {
    font-size: 20px;
    font-weight: 400;
    font-family: "Helvetica W01 Light";
    color: #403f2b;
    margin: 0px;
    line-height: 32px;
    width: 600px;
  }
  .section2 {
    width: 100%;
    background-color: #fefaf0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 100px;
  }
  .section2_i {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 100px;
    justify-content: center;
    gap: 22%;
  }
  .section2i_heading {
    display: flex;
    flex-direction: column;
    /* width: 30%; */
  }
  .section2i_heading h2 {
    font-family: "fraunces";
    font-size: 65px;
    line-height: 65px;
    font-weight: 300;
    color: #403f2b;
    margin: 0px;
  }
  .section2i_heading h4 {
    font-family: "fraunces";
    font-size: 30px;
    line-height: 42px;
    font-weight: 400;
    color: #403f2b;
    margin: 0px;
    margin-top: 40px;
    letter-spacing: -1px;
  }
  .section2i_heading p {
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
    margin: 0px;
    font-family: "Helvetica W01 Light";
    margin-top: 20px;
    width: 50%;
    color: #403f2b;
  }
  .section2i_img {
    /* width: 40%; */
    height: fit-content;
    display: flex;
  }
  .section2i_img img {
    border-radius: 35px;
    width: 489px;
    height: 395px;
  }
  .contact {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 50px;
    width: 90%;
    gap: 19%;
    justify-content: center;
  }
  .contact_i {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* width: 50%; */
    /* margin-left: 115px; */
  }
  .contact_i h2 {
    font-family: "fraunces";
    font-size: 65px;
    line-height: 65px;
    font-weight: 300;
    color: #403f2b;
    margin: 0px;
    margin-bottom: 20px;
  }
  .contact_i p {
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
    margin: 0px;
    font-family: "Helvetica W01 Light";
    margin-top: 30px;
  }
  .contact_ii {
    display: flex;
    flex-direction: column;
  }
  .cs_service {
    display: flex;
    flex-direction: row;
  }
  .contactii_i {
    display: flex;
    flex-direction: column;
  }
  .cs-info-submition {
    display: flex;
    flex-direction: column;
    /* width: 50%; */
    gap: 15px;
    /* margin-left: 115px; */
  }
  .info-name {
    display: flex;
    flex-direction: row;
    width: 450px;
  }
  .firstname {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* margin-right: 50px; */
    width: 100%;
  }
  .firstname p,
  .lastname p,
  .contact-email-input p,
  .textarea-input p {
    font-size: 16px;
    font-family: "Helvetica W01 Light";
    font-weight: 400;
    line-height: 20px;
    color: #403f2b;
    outline: none;
  }
  .firstname input,
  .contact-email-input input {
    border: 0px;
    background-color: transparent;
    border-bottom: 1px solid #000000;
    outline: none;
    padding: 5px;
    line-height: 23px;
    font-size: 16px;
    font-family: "Helvetica W01 Light";
    font-weight: 400;
    line-height: 20px;
    color: #000000;
    outline: none;
  }
  .lastname {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 100%;
  }
  .contact-email-input {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 450px;
    font-size: 16px;
    font-family: "Helvetica W01 Light";
    font-weight: 400;
    line-height: 20px;
    color: #403f2b;
    outline: none;
  }
  .textarea-input {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 450px;
    outline: none;
  
  }
  .textarea-input textarea{
    background-color: transparent;
    border: 0px;
    border-bottom: 1px solid #000000;
    height: 100px;
    outline: none;
    resize: none;
    text-align: left;
    font-size: 16px;
    font-family: "Helvetica W01 Light";
    font-weight: 400;
    line-height: 20px;
    color: #000000;
    outline: none;
  }
  .contact-submit-btn button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 128px;
    height: 41px;
    border: 1px solid #403f2b;
    border-radius: 55px;
    background-color: transparent;
    cursor: pointer;
  }
  .contact-submit-btn button:hover {
    background-color: #403f2b;
  }
  .contact-submit-btn button p {
    font-size: 25px;
    font-weight: 400;
    font-family: "frauces";
    line-height: 35px;
    color: #403f2b;
  }
  .contact-submit-btn button p:hover {
    color: #e8e59b;
  }
  
  @media (max-width: 1200px) {
    .section2_i {
      gap: 10%;
      padding-top: 80px;
    }
    .section2i_heading {
      width: 40%;
    }
    .section2i_img {
      width: 50%;
      height: fit-content;
      display: flex;
    }
    .section2i_img img {
      border-radius: 35px;
      width: 100%;
      height: 50%;
      /* width: 489px; */
      /* height: 395px; */
    }
    .section2i_heading p {
      width: 60%;
    }
    .contact {
      width: 90%;
      gap: 2%;
      justify-content: normal;
      align-self: center;
    }
    .contact_i {
      margin: 0px;
    }
    .cs-info-submition {
      margin: 0px;
      width: auto;
      margin-left: 40px;
    }
  }
  @media (max-width: 1155px) {
    .section2_i {
      gap: 5%;
      padding-top: 80px;
    }
    .section2i_heading {
      width: auto;
    }
    .section2i_img {
      /* width: 33%; */
      height: fit-content;
      display: flex;
    }
    .contact_i {
      width: 45%;
    }
    .info-name {
       width: 400px;
    }
    .firstname {
        width: 100%;
        /* margin-right: 30px; */
    }
    .lastname {
        width: 100%;
    }
    .contact-email-input {
        width: 100%;
    }
    .textarea-input {
        width: 100%;
    }
  }
  @media (max-width: 900px) {
    .section2_i {
      gap: 8%;
      padding-top: 80px;
    }
    .section2i_heading {
      width: auto;
    }
    .contact_i {
      width: 50%;
    }
    .cs-info-submition {
      margin-left: 15px;
    }
    .section2i_heading h2 {
      font-size: 45px;
      line-height: 45px;
    }
    .section2i_heading h4 {
      margin-top: 30px;
      font-size: 27px;
    }
    .section2i_heading p {
      font-size: 18px;
      line-height: 28px;
      font-weight: 200;
    }
    .contact_i h2 {
      font-size: 44px;
      line-height: 45px;
      margin-bottom: 15px;
    }
    .contact_i p {
      font-size: 18px;
    }
    .info-name {
      width: 320px;
    }
    .firstname {
      width: 325px;
    }
    .lastname {
     width: 325px;
    }
    .contact-email-input {
      width: 325px;
    }
    .textarea-input {
      width: 325px;
    }
  }
  @media (max-width: 760px) {
    .contact_i p {
      font-size: 16px;
    }
    .contact {
      flex-direction: column;
  
      gap: 20px;
    }
    .contact_i {
      width: 100%;
    }
    .contact_i h2 {
      font-size: 50px;
      line-height: 50px;
    }
    .contact_i p {
      font-size: 20px;
      text-align: left;
    }
    .cs-info-submition {
      margin-left: 0px;
      margin-top: 0px;
    }
    .info-name {
      width: 400px;
    }
    .firstname {
        width: 100%;
    }
    .lastname {
      width: 46%;
    }
    .contact-email-input {
        width: 100%;
    }
    .textarea-input {
        width: 100%;
    }
    .hero1-heading p {
      width: 90%;
    }
  }
  
  @media (max-width: 500px) {
    .hero1-heading h1 {
      font-size: 45px;
      line-height: 45px;
    }
    .hero1-heading {
      gap: 20px;
    }
    .section2_i {
      flex-direction: column;
      margin-top: 60px;
      padding-top: 0px;
      gap: 30px;
    }
    .section2i_img {
      width: auto;
    }
    .contact-submit-btn {
      margin-top: 10px;
    }
    .section2 {
      padding-bottom: 50px;
    }
    .contact_i h2 {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 0px;
    }
    .contact_i p {
      font-size: 15px;
      font-weight: 300;
      margin-top: 10px;
    }
  
    .contact-submit-btn button {
      /* margin-top: 20px; */
      /* align-self: flex-start; */
      /* height: 48px; */
      width: 92px;
    }
    .contact-submit-btn button p {
      font-weight: 300;
      margin: 0px;
    }
    .section2i_heading h2 {
      font-size: 24px;
    }
    .section2i_heading h4 {
      font-size: 20px;
      margin-top: 0px;
    }
    .section2i_heading p {
      width: 60%;
      font-size: 15px;
      margin-top: 0px;
      font-weight: 400;
    }
  }
  @media (max-width: 440px) {
    .contact {
      margin-top: 30px;
    }
    .info-name {
      width: 280px;
      flex-direction: column;
    }
    .firstname {
        width: 100%;
      /* margin-right: 30px; */
    }
    .lastname {
        width: 100%;
    }
    .contact-email-input {
        width: 100%;
    }
    .textarea-input {
        width: 100%;
    }
  }
  
  .success-submission {
    padding: 30px 30px;
    border-radius: 10px;
    background-color: rgba(14, 181, 121, 0.15);
    text-align: center;
    color: rgb(0, 0, 0);
    line-height: 20px;
}

.error-submission {
    padding: 30px 30px;
    border-radius: 10px;
    background-color: rgba(188, 22, 22, 0.15);
    text-align: center;
    color: rgb(0, 0, 0);
    line-height: 20px;
}

.success-submission {
    background-color: #99fdb0;
}

.error-submission {
    background-color: #ff99a3;
}