.doctor-profile-section {
  font-family: "Plus Jakarta Sans", sans-serif;

  width: 100%;

  position: relative;

  display: block;

  clear: both;

  overflow: visible !important;

  z-index: 10;

  isolation: isolate;
  margin-top: 30px;
}


.doctor-profile-container {
  width: min(1600px, calc(100% - 80px));

  margin-left: auto;
  margin-right: auto;

  position: relative;

  display: block;

  overflow: visible;
}


/* ================================
   CONTENT
================================ */

.doctor-content {
  position: relative;

  min-width: 0;

  overflow: visible;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 20px;
  border-radius: 16px;
}


/* ================================
   CARD
================================ */

.doctor-card {
  position: relative;

  z-index: 2;

  width: 100%;
}


.doctor-card img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;
}


/* ================================
   DESKTOP
================================ */

@media (min-width: 1024px) {

  .doctor-content {
    padding-right: 8px;
  }

}


/* ================================
   MOBILE
================================ */

@media (max-width: 1023px) {

  .doctor-profile-container {
    width: 100%;
  }

  .doctor-card {
    max-width: 360px;

    width: 100%;

    margin: 10px auto 0;
  }

}


/* ================================
   SMALL MOBILE
================================ */

@media (max-width: 640px) {

  .doctor-profile-container {
    padding-left: 16px;
    padding-right: 16px;
  }

}

/* ================= AWARDS IMAGE SLIDER ================= */

.awards-image-slider {
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 12px;
}

.awards-image-track {
  display: flex;
  width: 400%;
  height: 100%;
  animation: awardsAutoSlide 12s infinite;
}

.awards-slide {
  width: 25%;
  height: 100%;
  flex-shrink: 0;
}

.awards-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ================= AUTO SLIDE ================= */

@keyframes awardsAutoSlide {

  /* Image 1 */
  0%,
  20% {
    transform: translateX(0);
  }

  /* Image 2 */
  25%,
  45% {
    transform: translateX(-25%);
  }

  /* Image 3 */
  50%,
  70% {
    transform: translateX(-50%);
  }

  /* Image 4 */
  75%,
  95% {
    transform: translateX(-75%);
  }

  /* Back to image 1 */
  100% {
    transform: translateX(0);
  }

}