* {
  font-family: Shabnam;
}

.contact-us-top-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 64px;
  height: 500px;
  overflow: hidden;
}

.contact-us-top-slideshow {
  overflow: hidden;
}

.contact-us-top-slideshow-item {
  top: 0;
  left: 0;
  opacity: 0;
  animation: slideShow 24s linear infinite 0s;
}

.contact-us-top-slideshow-item-1 {
  opacity: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../images/1000_F_129243014_z3fOgamndZYXTsa0rXQFrixbO0bgi0RX.jpg) center
      no-repeat;
  background-size: cover;
}

.contact-us-top-slideshow-item-2 {
  animation-delay: 6s;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../images/1000_F_129602256_SxInj0nkJfAjpwdWs9Z00S1g5pOmmlq5.jpg) center
      no-repeat;
  background-size: cover;
}

.contact-us-top-slideshow-item-3 {
  animation-delay: 12s;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../images/57-845x321.jpg) center no-repeat;
  background-size: cover;
}

.contact-us-top-slideshow-item-4 {
  animation-delay: 18s;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../images/855.png) center no-repeat;
  background-size: cover;
}

@keyframes slideShow {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.contact-us-content {
  top: -100px;
  background: #e9ecef;
}

.contact-us-box {
  flex-wrap: wrap;
}

.contact-us-social-icon {
  transition: all ease-in-out 0.3s;
}

.contact-us-social-icon-instagram:hover {
  transform: translate3d(-2px, -2px, 0);
  box-shadow: 2px 2px 10px 1px #d41ed3;
}

.contact-us-social-icon-telegram:hover {
  transform: translate3d(-2px, -2px, 0);
  box-shadow: 2px 2px 10px 1px #27a5e5;
}

.contact-us-social-icon-whatsapp:hover {
  transform: translate3d(-2px, -2px, 0);
  box-shadow: 2px 2px 10px 1px #45c856;
}

.contact-us-social-icon-linkedin:hover {
  transform: translate3d(-2px, -2px, 0);
  box-shadow: 2px 2px 10px 1px #0b65c3;
}

.contact-us-co-working-wrap {
  height: 500px;
  margin-top: 100px;
}

.contact-us-co-working-text {
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-orange);
}

@media only screen and (max-width: 768px) {
  .contact-us-top-wrapper {
    height: 300px;
  }
  .contact-us-co-working-wrap {
    height: 200px;
  }
}

@media only screen and (max-width: 992px) {
  .contact-us-content {
    top: -50px;
  }
}