/* Main */
.search-engine img {
  position: absolute;
  left: 10px !important;
  top: 17px !important;
}

main {
  padding: 64px 0px 0px 0px;
  /* background-color: #fffaf6; */
}

/* Contact Section */
label {
  color: #4b5563;
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 0.875rem; /*14px*/
  color: #4b5563;
}

label sup {
  color: red;
}

input,
select,
textarea {
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  height: 3rem; /*48px*/
  border-radius: 0.625rem; /*10px*/
  padding: 0.625rem;
}

select:invalid,
select option[value=""] {
  color: #9ca3af;
}

option:first-child {
  color: #9ca3af;
  padding-right: 1rem; /*16px*/
}

.input::placeholder,
.select::placeholder {
  color: #9ca3af;
}

.btn-container button {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #011594;
  color: #ffffff;
  padding: 0.75rem; /*12px*/
  font-weight: 600;
  border-radius: 6.25rem; /*100*/
  outline: none;
  border: none;
}

.contact-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 73rem; /*1168px*/
  height: 42.25rem; /*676px*/
  column-gap: 6rem; /*96px*/
  padding: 0.5rem; /*8px*/
  margin: 0 auto;
  position: relative;
}
.card {
  max-width: 33.5rem; /*536px*/
  min-height: 42.25rem; /*676*/
  position: absolute;
  transform-style: preserve-3d;
  transition: all 0.5s ease;
  border: none !important;
}
.flip {
  transform: rotateY(180deg);
}
.get-in-touch {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding: 1.5rem; /*24px*/
  border-radius: 1.5rem; /*24px*/
  min-width: 100%;
  max-height: 100%;
  position: absolute;
  backface-visibility: hidden;
}
.form-submitted {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding: 1.5rem; /*24px*/
  border-radius: 1.5rem; /*24px*/
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
.get-in-touch h1 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #6a99ff;
}
.get-in-touch .desc {
  color: #4b5563;
}

#description {
  height: 10rem;
  padding: 0.75rem; /*12px*/
  resize: none;
}
.top {
  padding: 0 1.5rem; /*24px*/
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /*10px*/
  font-size: 1.25rem; /*20px*/
  align-items: center;
}
.top h1 {
  font-size: 1.25rem; /*20px*/
  color: #111827;
  font-weight: bold;
}
.top h2 {
  font-size: 0.875rem; /*14px*/
  color: #6b7280;
  font-weight: 500;
}
.book-service-btn {
  background-color: #011594;
  border-radius: 6.25rem; /*100px*/
  font-weight: 600;
  color: #ffffff;
  padding: 0.5rem 1rem;
  height: 2.125rem; /*34px*/
  font-size: 0.875rem; /*14px*/
  border: none;
}
.bottom {
  padding: 0 1.5rem; /*24px*/
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /*24px*/
  font-size: 1.25rem; /*20px*/
  align-items: center;
}
.socials {
  display: flex;
  gap: 0.5rem; /*8px*/
}
.social {
  width: 5.5rem; /*88px*/
  height: 5.125rem; /*82px*/
  /* border:1px solid red; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem; /*6px*/
  margin: 0 auto;
}
.social-icon-container {
  width: 3.5rem; /*56px*/
  min-height: 3.5rem; /*56px*/
  border-radius: 0.5rem; /*8px*/
  background-color: #e0eaff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social p {
  font-size: 0.875rem; /*14px*/
  font-weight: 500;
  color: #111827;
}
.visit-us-text {
  font-size: 0.875rem; /*14px*/
  font-weight: bold;
  color: #6b7280;
  text-transform: uppercase;
  position: relative; /* To position the lines */
}

.visit-us-text::before {
  content: "";
  display: block;
  position: absolute;
  left: -200px;
  top: 50%;
  width: 12rem;
  height: 1px;
  background-color: #e5e7eb;
  transform: translateY(-50%);
}

.visit-us-text::after {
  content: "";
  display: block;
  position: absolute;
  left: 95px;
  right: 0;
  top: 50%;
  width: 12rem;
  height: 1px;
  background-color: #e5e7eb;
  transform: translateY(-50%);
}
.contact-background-logo-img {
  position: absolute;
  left: -56px;
  top: 156px;
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
  transform: none !important;
}

/******************* MEDIA QUERY STARTS**************************/
@media (max-width: 1060px) {
  .contact-container {
    grid-template-columns: 1fr;
    row-gap: 32px;
    width: 536px;
    height: auto;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .contact-container {
    grid-template-columns: 1fr;
    row-gap: 32px;
    /* width: 100%; */
    /* padding:0; */
    min-height: fit-content;
  }

  .get-in-touch {
    max-width: 100%;
    min-height: fit-content;
  }

  .get-in-touch h1 {
    font-size: 1.125rem; /*18px*/
    font-weight: bold;
    color: #6a99ff;
  }

  .get-in-touch .desc {
    font-size: 0.875rem; /*14px*/
    font-weight: 600;
    color: #4b5563;
  }
  .team-connect {
    max-width: 100%;
    min-height: 100%;
  }
}
@media (max-width: 543px) {
  .contact-container {
    width: 100%;
  }
}
/******************* MEDIA QUERY ENDS**************************/

.form-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.name-field,
.phone-field,
.location-field,
.form-field {
  display: flex;
  flex-direction: column;
}

#first-name::placeholder,
#last-name::placeholder {
  color: #111827;
  font-weight: 500;
}

.country-code-phone {
  display: flex;
}

.country-code-phone input {
  display: block;
}

#country-code {
  display: inline-block;
  border-left: 1px solid #d1d5db;
  border-right: 1px solid #d1d5db;
  width: 20%;
}

#phone {
  width: 80%;
  border-left: 0;
}

.terms-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0;
  /* border: 1px solid #E5E7EB; */
}

.terms-field label {
  font-size: 14px;
}

#terms {
  align-self: flex-start;
}

.terms-link {
  font-size: 0.875rem; /*14px*/
  font-weight: 600;
  text-decoration: underline !important;
  color: #2469ff !important;
}

/******************* MEDIA QUERY STARTS**************************/
@media (max-width: 600px) {
  .form-fields {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
  }

  .name-field,
  .phone-field,
  .location-field,
  .form-field {
    display: flex;
    flex-direction: column;
  }

  .terms-field {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
  }

  .terms-field label {
    font-size: 14px;
  }
  .contact-background-logo-img{
    width: 426px;
  }
}
/******************* MEDIA QUERY ENDS**************************/
.team-connect {
  max-width: 536px;
  height: 30.75rem; /*492px*/
}

.team-connect-container {
  display: flex;
  align-items: center;
}

.team-connect h3 {
  text-transform: uppercase;
  color: #6a99ff;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.team-connect h1 {
  font-weight: bold;
  font-size: 2.5rem;
}

.team-connect div {
  margin-bottom: 1.5rem;
}

.team-connect p {
  font-size: 1.25rem;
}

.contact-details {
  display: flex;
  max-height: 1.875rem; /*30px*/
  gap: 0.5rem;
}

.first-address {
  max-height: 3.75rem /*60px*/;
}
.contact-icon {
  width: 24px;
  height: 26px;
}

.customer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #f5f8ff;
  border-radius: 1.25rem;
  padding: 1.5rem;
  min-height: 7.75rem /*124px*/;
}

.customer-stats div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.customer-stats div span {
  text-align: center;
}

.customer-stats div span:first-child {
  color: #6a99ff;
  font-size: 1.5rem;
  font-weight: bold;
}

.customer-stats div span:last-child {
  color: #4b5563;
  font-weight: 500;
}

.customer-stats-content {
  position: relative;
}
.customer-stats-vertical-line {
  position: absolute;
  width: 1px; /* Line width */
  height: 3.5rem; /*56px*/
  top: 15px;
  left: 100%;
  background: #e0eaff;
}
/******************* MEDIA QUERY STARTS**************************/
@media (max-width: 600px) {
  .team-connect {
    margin-top: 18.75rem; /*300px*/
  }
  .team-connect h3 {
    text-transform: uppercase;
    color: #6a99ff;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .team-connect h1 {
    font-weight: bold;
    font-size: 1.5rem;
  }

  .team-connect p {
    font-size: 1rem;
  }

  .customer-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #second-vertical-line {
    display: none;
  }
}
@media (max-width: 600px) {
  .team-connect {
    margin-top: 20rem; /*320px*/
  }
}
@media (max-width: 380px) {
  .team-connect {
    margin-top: 20rem; /*320px*/
  }
  .contact-background-logo-img{
    width: 426px;
  }
}
@media (max-width: 360px) {
  .team-connect {
    margin-top: 23rem; /*320px*/
  }
  .contact-background-logo-img{
    width: 426px;
  }
}
@media (max-width: 300px) {
  .team-connect {
    margin-top: 26rem; /*320px*/
  }
}
/******************* MEDIA QUERY ENDS**************************/

.dashed-line {
  position: absolute;
  width: 1px; /* Line width */
  height: 604px; /* Line height */
  top: 8%;
  left: 590px;
  background: repeating-linear-gradient(
    to bottom,
    #99a7fe 0 10px,
    /* Dash color and size */ transparent 10px 20px /* Space between dashes */
  );
}
@media (max-width: 1120px) {
  .dashed-line {
    left: 580px;
  }
  .contact-background-logo-img{
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
  }
}
@media (max-width: 1072px) {
  .dashed-line {
    left: 570px;
  }
  .contact-background-logo-img{
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
  }
}
@media (max-width: 1060px) {
  .dashed-line {
    position: absolute;
    width: 100%; /* Line width */
    height: 1px; /* Line height */
    top: 696px;
    right: 0;
    left: 4%;
    background: repeating-linear-gradient(
      to right,
      #99a7fe 0 10px,
      /* Dash color and size */ transparent 10px 20px /* Space between dashes */
    );
  }
  .contact-background-logo-img{
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
  }
}
@media (max-width: 600px) {
  .dashed-line {
    position: absolute;
    width: 100%; /* Line width */
    height: 1px; /* Line height */
    top: 820px;
    right: 0;
    background: repeating-linear-gradient(
      to right,
      #99a7fe 0 10px,
      /* Dash color and size */ transparent 10px 20px /* Space between dashes */
    );
  }
}
@media (max-width: 508px) {
  .dashed-line {
    top: 840px;
  }
  .contact-background-logo-img{
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
  }
}
@media (max-width: 380px) {
  .dashed-line {
    top: 856px;
  }
}
@media (max-width: 360px) {
  .dashed-line {
    top: 880px;
  }
}
@media (max-width: 300px) {
  .dashed-line {
    top: 900px;
  }
}