/** @format */
#combination header {
  width: 100%;
  background: linear-gradient(rgba(243, 242, 242, 0.5), rgba(245, 244, 244, 0.5));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#contact {
  margin-bottom: 92px;
}
#contact .main {
  
}
#contact .main .bottom {
  display: flex;
  justify-content: space-between;
  margin-bottom: 70px;
  margin-top: 50px;
 
}

#contact .main .bottom .left {
  width: 39%;
  
}
#contact .main .bottom .left .email {
  display: flex;
  align-items: center;
  opacity: 50%;
  gap: 10px;
}
#contact .main .bottom .left .email .image1 {
  display: flex;
  width: 18px;
}
#contact .main .bottom .left .email .image1 img {
  width: 100%;
}
#contact .main .bottom .left .email h5 {
  opacity: 70%;
}
#contact .main .bottom .left .mail {
  margin-bottom: 24px;
}
#contact .main .bottom .left .mail p {
}
#contact .main .bottom .left .mail p a {
  color: black;
}
#contact .main .bottom .left .call {
  display: flex;
  align-items: center;
  opacity: 50%;
  gap: 10px;
}
#contact .main .bottom .left .call .image2 {
  display: flex;
  width: 18px;
}
#contact .main .bottom .left .call .image2 img {
  width: 100%;
}
#contact .main .bottom .left .call h5 {
  opacity: 70%;
}
#contact .main .bottom .left .phone {
  margin-bottom: 24px;
}
#contact .main .bottom .left .phone p {
}
#contact .main .bottom .left .phone p a {
  color: black;
  line-height: 27px;
}
#contact .main .bottom .left .address {
  display: flex;
  align-items: center;
  opacity: 50%;
  gap: 10px;
}
#contact .main .bottom .left .address .image3 {
  display: flex;
  width: 18px;
}
#contact .main .bottom .left .address .image3 img {
  width: 100%;
}
#contact .main .bottom .left .address h5 {
  opacity: 70%;
}
#contact .main .bottom .left .address-details {
}
#contact .main .bottom .left .address-details p {
  line-height: 27px;
}

#contact .main .bottom .right {
  width: 59%;
  display: flex; 
  flex-direction: column;
  justify-content: space-between;
 
}
#contact .main .bottom .right h3 {
  font-size: 50px;
}
#contact .main .bottom .right form {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}
#contact .main .bottom .right .form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 48%;
  align-items: center;
}
#contact .main .bottom .right .form-group label {
  width: 100%;
  padding: 5px;
}
#contact .main .bottom .right .form-group input {
  outline: none;
  background-color: #f6f7f8;
  border-bottom: 1px;
  padding: 10px;
  margin-bottom: 20px;
  width: 95%;
  border-radius: 10px;
  opacity: 70%;
  border:1px solid grey;
}
#contact .main .bottom .right .message textarea {
  width: 96%;
  background-color: #f6f7f8;
  border-radius: 10px;
  padding: 14px;
  outline: none;
  resize: none;
  border:1px solid grey;
}
textarea::-webkit-resizer{
  display: none;
  
}
#contact .main .bottom .right .message {
  width: 99%;
  display: grid;
}
#contact .main .bottom .right .message label {
  padding: 5px;
  width: 98%;
}
#contact .main .bottom .right .button {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 25px;
}
#contact .main .bottom .right .button button {
  background-color: #0081c9;
  color: white;
  padding: 7px 21px 7px 21px;
  border-radius: 10px;
  font-size: 20px;
  margin-top: 25px;
  border: none;
  cursor: pointer;
}
 
#blank{
  background:whitesmoke;
  height: 100px;
}
/* Media Queries for Responsiveness */

/* For large desktops (max-width: 1600px) */
@media (max-width: 1600px) {
  /* #contact .main .bottom {
        flex-direction: row;
    }

    #contact .main .bottom .left {
        width: 48%;
    }

    #contact .main .bottom .right {
        width: 48%;
    } */
}

/* For desktops (max-width: 1200px) */
@media (max-width: 1200px) {
  #contact .main .bottom .left {
    width: 39%;
  }
  #contact .main .bottom .right {
    width: 59%;
  }

  #contact .main .bottom .right form {
  }

  #contact .main .bottom .right .form-group {
    width: 45%;
  }

  #contact .main .bottom .right h3 {
    font-size: 28px;
  }
}

/* For tablets (max-width: 1024px) */
@media (max-width: 1024px) {
  #contact .main .bottom {
  }

  #contact .main .bottom .left {
    width: 39%;
  }
  #contact .main .bottom .right {
    width: 59%;
  }

  #contact .main .bottom .right .form-group {
    width: 48%;
  }

  #contact .main .bottom .right h3 {
    font-size: 26px;
  }
  #contact .main .bottom .right .button {
    width: 100%;
    margin-top: 7px;
  }
  #contact .main .bottom .left .mail {
    margin-bottom: 12px;
  }
  #contact .main .bottom .left .phone {
    margin-bottom: 12px;
  }
  #contact .main .bottom .right .form-group input {
    border-style: none;
    outline: none;
    background-color: #f6f7f8;
    border-bottom: 1px;
    padding: 10px;
    margin-bottom: 20px;
    width: 92%;
    border-radius: 10px;
    opacity: 70%;
}
}

/* For smaller tablets (max-width: 768px) */
@media (max-width: 768px) {
  #contact .main .bottom .left {
    width: 39%;
  }
  #contact .main .bottom .right {
    width: 59%;
  }

  #contact .main .bottom .right h3 {
    font-size: 24px;
  }

  #contact .main .bottom .right .form-group {
    width: 48%;
  }

  #contact .main .bottom .right .message textarea {
    width: 94%;
  }

  #contact .main .bottom .right .button button {
  }
}

@media screen and (max-width: 640px) {
  #contact .main .bottom {
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
  
  }
  #contact .main .bottom .right {
    width: 100%;
  }
  #contact .main .bottom .right h3{
   
  }
  #contact .main .bottom .left {
    width: 100%;
  }
  #contact .main .bottom .right .form-group input {
    border-style: none;
    outline: none;
    background-color: #f6f7f8;
    border-bottom: 1px;
    padding: 10px;
    margin-bottom: 20px;
    width: 92%;
    border-radius: 10px;
    opacity: 70%;
}
}
/* For mobile devices (max-width: 480px) */
@media (max-width: 480px) {
  #contact .main .bottom {
  }

  #contact .main .bottom .left,
  #contact .main .bottom .right {
    width: 100%;
  }

  #contact .main .bottom .right h3 {
    font-size: 22px;
    text-align: center;
    
}

  #contact .main .bottom .right form {
    flex-direction: column;
  }

  #contact .main .bottom .right .form-group {
    width: 100%;
  }

  #contact .main .bottom .right .message textarea {
    width: 94%;
    padding: 10px;
}

  #contact .main .bottom .right .button button {
    width: 100%;
  }
  #contact .main {
    margin-top: 50px;
    padding: 0px;
  }

}