.tel-number {
  padding: 5px;
  direction: ltr;
  text-align: left;
}

.content a {
  color: var(--black);
}

.content a:hover {
  color: var(--black-hover);
}

.contact {
  position: relative;
  background-color: var(--background-tertiary);
  direction: rtl;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.contact .content {
  width: 100vw;
}

.contact h1 {
  width: 100vw;
  padding: 30px;
}




.contact .content1 {
  background-color: var(--action-primary);
  padding: 20px;
}

.contact .content3 {
  background-color: var(--action-primary-hover);
  padding: 20px;
}

.contact .content4 {
  background-color: var(--action-primary);
  padding: 20px;
}

.contact .content3,
.contact .content1 {
  padding: 15px;
}




.content4 div {
  position: relative;
  height: 160px;
}

.content4 div img {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 0;
}

.content4 div ul {
  position: absolute;
  width: calc(100% - 160px);
  height: 160px;
  right: 0;
  text-align: left;
  direction: ltr;
}

.content4>div>ul>p {
  text-align: right;
  padding: 20px 0;
}

.content4>div>ul>a {
  position: absolute;
  bottom: 10px;
}




.map iframe {
  height: 80vh;
}

/*=============== responsive for larger than 550px screen ===============*/
@media (min-width: 300px) {}

@media (min-width: 550px) {}

/*=============== responsive for larger than 650px screen ===============*/

@media (min-width: 650px) {
  .contact-us .des {
    padding: 5px 10%;
  }
}

/*=============== responsive for larger than 768px screen  ===============*/
@media (min-width: 768px) {
  .contact-us .call-us {
    width: 50%;
    top: 0;
    right: 0;
  }

  .contact-us .social-address {
    position: absolute;
    width: 50%;
    top: 220px;
    left: 0;
    border-right: 1px solid black;
    border-bottom: 0;
  }
}

/*=============== responsive for larger than 1024px screen  ===============*/
@media (min-width: 1024px) {
  .contact-us .des {
    padding: 5px 20%;
  }

  .contact {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
  }

  .contact h1 {
    width: 100vw;
    padding: 30px;
  }

  .contact .content {
    width: calc(100vw / 2);
    height: 70vh;
  }

  .contact .content a {
    text-align: left;
  }

  .contact .content1,
  .contact .content4 {
    padding: 30px;
  }


  /*=============== REUSED STYLE   ===============*/

  /*=============== HEADER ===============*/
}