@-webkit-keyframes card-slide {
  from {
    opacity: 0;
    left: -5px;
  }
  to {
    opacity: 1;
    left: 5px;
  }
}
@keyframes card-slide {
  from {
    opacity: 0;
    left: -5px;
  }
  to {
    opacity: 1;
    left: 5px;
  }
}
header nav {
  z-index: 1000;
}
header .gradiant-navbar {
  position: absolute;
  top: 0;
  height: 45vh;
  width: 100%;
  background: linear-gradient(#3f3f4a, transparent);
  z-index: 10;
}

section.main-section {
  display: flex;
  position: relative;
}
section.main-section .content {
  width: 75%;
}
section.main-section .img-container {
  background-size: contain;
  height: 216%;
  width: 85%;
  position: absolute;
  top: -400px;
  right: -21vw;
  z-index: 1000;
  background-color: #fff;
}

.sliders-wrapper {
  height: calc(100vh - 100px);
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-color: #fff !important;
}
@media (max-width: 768px) {
  .sliders-wrapper {
    height: calc(40vh - 80px);
  }
}

section.history {
  margin-top: 10rem;
  text-align: center;
  padding-bottom: 5rem;
}
section.history h1,
section.history p {
  text-align: center;
}

section.branches {
  text-align: center;
  background-repeat: no-repeat;
  background-image: url(/img/branches-bg.png);
  background-size: cover;
  padding-top: 6rem;
  background-color: #fff;
  padding-bottom: 6rem;
  background-position-y: 128px;
}
section.branches h1 {
  text-align: center;
}
section.branches .map {
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
}
section.branches .map img {
  width: 50%;
  pointer-events: none;
  z-index: 0;
}
section.branches .map .place {
  position: absolute;
  z-index: 100;
}
section.branches .map .place::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #8a7d6e;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
}
section.branches .map .place .card {
  grid-gap: 25px;
  display: none;
  position: absolute;
  background-color: #ffffffd4;
  border: 1px solid #707070;
  border-radius: 15px;
  border-top-left-radius: 0;
  top: 4px;
  left: 4px;
  width: 520px;
  max-width: 85vw;
  padding: 10px 15px;
  -webkit-animation: card-slide 0.4s ease;
          animation: card-slide 0.4s ease;
  z-index: 2;
}
section.branches .map .place .card .info {
  text-align: start;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}
section.branches .map .place .card .info .title a {
  font-size: 23px;
  color: var(--primary-text-color);
  text-decoration: none;
}
section.branches .map .place .card .info .desc {
  font-size: 13px;
  color: var(--primary-text-color-light);
  max-height: 42px;
  overflow: hidden;
}
section.branches .map .place .card .info a {
  font-size: 15px;
  color: #d89242;
}
section.branches .map .place .card .pic {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
section.branches .map .place:hover::before {
  transform: scale(1.2);
}
section.branches .map .place.place-1 {
  top: 3%;
  right: 30%;
}
section.branches .map .place.place-2 {
  top: 7%;
  right: 40%;
}
section.branches .map .place.place-3 {
  top: 14%;
  left: 42%;
}
section.branches .map .place.place-4 {
  top: 31%;
  right: 44%;
}
section.branches .map .place.place-5 {
  top: 53%;
  left: 38%;
}
section.branches .map .place.place-6 {
  top: 57%;
  right: 14%;
}
section.branches .map .place.place-7 {
  top: 52%;
  right: 47%;
}

@media (max-width: 992px) and (min-width: 768px) {
  .main-section .content {
    width: 100% !important;
  }
  .main-section .content h1,
.main-section .content p {
    text-align: center;
  }
  .main-section .img-container {
    display: none;
  }
}
@media (max-width: 768px) {
  .main-section .img-container {
    display: none;
  }
  .main-section .content {
    width: 100% !important;
    text-align: center;
  }

  .history {
    margin-top: 5rem !important;
  }
}
@media (max-width: 992px) {
  nav .navbar-collapse {
    background: linear-gradient(0deg, #3f3f4ac9, #3f3f4ad9, transparent);
  }

  section.branches .map .place .card {
    border-radius: 15px !important;
    left: -46vw !important;
  }
}