#shopping-hero {
  margin: 50px 0 110px 0;
  text-align: center;
  background-image: url('/imgs/banner/banner.png');
  height: 100%;
  background-size: cover;
  background-position: center;
  padding-top: clamp(20px, 8%, 80px);
  padding-right: clamp(15px, 5%, 50px);
  padding-bottom: clamp(20px, 8%, 80px);
  padding-left: clamp(15px, 5%, 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#shopping-hero h1 {
  color: rgb(196, 203, 207);
  font-size: clamp(24px, 6vw, 48px);
}

#shopping-hero h1 span {
  color: red;
}

#shopping-hero p {
  color: rgb(196, 203, 207);
  font-size: clamp(14px, 3vw, 18px);
}

#shopping-hero p span {
  color: red;
}

/* Contact section */
#contact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 30px clamp(15px, 5vw, 60px);
  gap: 30px;
}

#contact .details {
  width: 100%;
  max-width: 500px;
}

#contact span {
  font-size: clamp(10px, 2vw, 12px);
}

#contact h2 {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.3;
  margin: 20px 0;
}

#contact h3 {
  font-size: clamp(14px, 3vw, 16px);
  padding: 15px 0;
}

#contact #details-list li {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 10px 0;
  flex-wrap: wrap;
}

#contact #details-list li i {
  font-size: 14px;
  padding-right: 22px;
  text-align: center;
  min-width: 36px;
}

#contact #details-list li p {
  font-size: clamp(12px, 3vw, 14px);
  margin: 0;
  padding-bottom: 1px;
  word-break: break-word;
}

#contact .map {
  width: 100%;
  max-width: 600px;
  height: clamp(300px, 50vw, 400px);
  flex: 1;
}

#contact .map iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Form section */
#form-details {
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  margin: 30px clamp(10px, 4vw, 30px);
  padding: clamp(20px, 5vw, 80px);
  border: 1px solid #e1e1e1;
  gap: 40px;
}

#form-details form {
  width: 100%;
  max-width: 65%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#form-details form span {
  font-size: clamp(10px, 2vw, 12px);
}

#form-details form h2 {
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.3;
  margin: 20px 0;
}

#form-details form input,
#form-details form textarea {
  width: 100%;
  padding: 12px 15px;
  outline: none;
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  font-size: 14px;
}

/* form section the under inputs label  */
.form-group {
  margin-bottom: 10px;
}

.error-label {
  display: none;
  color: red;
  font-size: 14px;
  margin-top: 4px;
}

.error-label.show {
  display: block;
}

input.error,
textarea.error {
  border: 2px solid red;
}

/* People section */
#form-details .people {
  width: 100%;
  max-width: 35%;
  min-width: 250px;
  margin-top: 90px;
  padding-left: 10vw;
}

#form-details .people div {
  padding-bottom: 25px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

#form-details .people div img {
  width: clamp(50px, 10vw, 65px);
  height: clamp(50px, 10vw, 65px);
  object-fit: cover;
  margin-right: 15px;
  border-radius: 50%;
}

#form-details .people div p {
  color: gray;
  margin: 0;
  font-size: clamp(11px, 2.5vw, 13px);
  line-height: 1.4;
  flex: 1;
}

#form-details .people div p span {
  display: block;
  font-size: clamp(14px, 3vw, 16px);
  font-weight: 600;
  color: #000;
}


/* Tablet and mobile responsive */
@media (max-width: 1024px) {
  #contact .details,
  #contact .map {
    max-width: 100%;
  }
  
  #form-details form {
    max-width: 100%;
  }
  
  #form-details .people {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #shopping-hero {
    margin: 30px 0 60px 0;
    height: 35vh;
  }
  
  #contact {
    flex-direction: column;
    gap: 40px;
  }
  
  #form-details {
    flex-direction: column;
  }
  
  #form-details form {
    width: 100%;
  }
  
  #form-details .people {
    width: 100%;
    margin-top: 30px;
  }
  
  #form-details .people div {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  #form-details .people div img {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 555px) {
  #shopping-hero {
    height: 23vh  !important;
    padding-top: clamp(20px, 8%, 80px) !important;
    padding-right: clamp(15px, 5%, 50px) !important;
    padding-bottom: 0 !important;
    padding-left: clamp(15px, 5%, 50px) !important;
  }

  #contact {
    padding: 0px clamp(15px, 5vw, 60px) !important;
  }

  #shopping-hero h1 {
    font-size: 25px !important;
    margin-bottom: 0px !important;
  } 

  #shopping-hero p {
    font-size: 13px !important;
  }

  #contact {
    flex-direction: column;
    gap: 0px !important;
  }
  
  #contact #details-list li {
    flex-wrap: nowrap;
  }
  
  #contact #details-list li i {
    margin-bottom: 8px;
  }

  #second-branch{
    margin-top: 30px;
  }

  #form-details {
    padding: clamp(0px, 1vw, 80px) ;
  }

  #form-details .people {
    margin-top: 30px;
    padding-left: 0;
    text-align: center;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #form-details .people div p {
    font-size: clamp(13px, 2.7vw, 15px);
  }

  #form-details .people div img {
    width: clamp(55px, 11vw, 70px);
    height: clamp(55px, 11vw, 70px);
    object-fit: cover;
    margin-right: 15px;
    border-radius: 50%;
  }
}