.top-doctor-wrapper {
  position: relative;
  padding: 100px 20px 20px;
  z-index: 1;
}
.top-doctor-wrapper .wrap,
.bottom-doctor-wrapper .wrap {
  display: flex;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  gap: 100px;
}

.top-doctor-wrapper .wrap .right-content,
.bottom-doctor-wrapper .wrap .right-content {
  width: 100%;
  max-width: 620px;
}

.top-doctor-wrapper .wrap .left-content {
  width: 100%;
  max-width: 400px;
  position: relative;
}

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper {
  position: absolute;
  width: 100%;
  top: 0;
}

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  height: 600px;
}


.top-doctor-wrapper:before {
  content: '';
  background-color: #EDF0F7;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.top-doctor-wrapper .wrap .right-content .doctor-name {
  margin-bottom: 40px;
}
.top-doctor-wrapper .wrap .right-content .doctor-name h1 {
  font-family: Mulish;
  font-weight: 400;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: 0;
  color: #0B0030;
  margin-bottom: 16px;
}

.top-doctor-wrapper .wrap .right-content .doctor-name p {
  font-family: Mulish;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #326295;
  margin: 0;
}

.top-doctor-wrapper .wrap .right-content .doctor-name p span {
  font-size: 80%;
  position: relative;
  display: inline-block;
  top: -2px;
  color: #326295;
  opacity: .5;
  margin: 0 13px;
}

.top-doctor-wrapper .wrap .right-content .doctor-description > *:only-child,
.bottom-doctor-wrapper .wrap .right-content .doctor-bio > *:last-child {
  margin-bottom: 0;
}

.bottom-doctor-wrapper .wrap .left-content {
  width: 100%;
  max-width: 400px;
}

.bottom-doctor-wrapper .wrap .right-content {
  margin-left: auto;
}

.bottom-doctor-wrapper {
  padding: 20px 20px 100px;
}

.bottom-doctor-wrapper .wrap .right-content .doctor-bio p,
.bottom-doctor-wrapper .wrap .right-content .doctor-bio ul li,
.top-doctor-wrapper .wrap .right-content .doctor-description p {
  font-family: Mulish;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0;
  color: #292929;
}
.bottom-doctor-wrapper .wrap .right-content .doctor-bio ul li {
  color: #23201F;
}
.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details {
  margin-top: 32px;
} 

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details label,
.bottom-doctor-wrapper .wrap .right-content label {
  font-family: Mulish;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #58585A;
}

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details ul,
.bottom-doctor-wrapper .wrap .right-content ul {
  margin-top: 16px;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details ul li,
.bottom-doctor-wrapper .wrap .right-content ul li {
  list-style: none;
  position: relative;
  padding-left: 32px;
  font-family: Mulish;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0%;
  color: #23201F;
}

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details ul li:before,
.bottom-doctor-wrapper .wrap .right-content ul li:before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M13 4C17.9706 4 22 8.02944 22 13C22 17.9706 17.9706 22 13 22C8.02944 22 4 17.9706 4 13C4 8.02944 8.02944 4 13 4ZM11.4131 15.3643L9.02246 12.46L7.47754 13.7314L10.6924 17.6357C10.8892 17.8747 11.1857 18.0086 11.4951 17.999C11.8048 17.9893 12.0928 17.837 12.2744 17.5859L18.0605 9.58594L16.4395 8.41406L11.4131 15.3643Z' fill='%23326295'/%3E%3C/svg%3E");
  width: 26px;
  height: 26px;
  display: block;
  left: 0;
  position: absolute;
}

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details .button-wrapper {
  margin-top: 32px;
}

.top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details .button-wrapper a.button,
.bottom-doctor-wrapper .wrap .right-content .doctor-details.mobile-only .button-wrapper a.button {
  background: #326295;
  width: 100%;
  padding: 20px 24px;
  font-family: Mulish;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.bottom-doctor-wrapper .wrap .right-content ul {
  margin-bottom: 32px;
}

.bottom-doctor-wrapper .wrap .right-content .doctor-bio  {
  position: relative;
  padding-top: 40px;
}

.bottom-doctor-wrapper .wrap .right-content .doctor-bio hr {
  margin: 0;
  margin-bottom: 40px;
  background: #CCA75A;
  height: 2px;
  width: 20px;
}

.bottom-doctor-wrapper .wrap .right-content .doctor-details.mobile-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-doctor-wrapper {
    padding: 40px 20px 20px;
  }
  .top-doctor-wrapper .wrap, .bottom-doctor-wrapper .wrap {
    flex-direction: column;
    gap: 40px;
  }
  .top-doctor-wrapper .wrap .left-content .doctor-image-wrapper {
    position: unset;
  }
  .top-doctor-wrapper .wrap .left-content {
    max-width: 100%;
  }
  .top-doctor-wrapper .wrap .left-content .doctor-image-wrapper img {
    min-height: 400px; 
    height: unset;
    width: 100%;
  }

  .top-doctor-wrapper:before {
    height: 20%;
    min-height: 300px;
  }

  .top-doctor-wrapper .wrap .right-content,
  .bottom-doctor-wrapper .wrap .right-content {
    max-width: 100%;
  }

  .bottom-doctor-wrapper .wrap .left-content {
    display: none;
  }
  .top-doctor-wrapper .wrap .left-content .doctor-image-wrapper .doctor-details {
    display: none;
  }
  .top-doctor-wrapper .wrap .right-content .doctor-name h1 {
    font-size: 46px;
    line-height: 56px;
  }
  .bottom-doctor-wrapper .wrap .right-content .doctor-bio {
    padding-top: 0;
  }

  .bottom-doctor-wrapper .wrap .right-content .doctor-bio hr {
    margin-bottom: 32px;
  }
  .bottom-doctor-wrapper {
    padding-bottom: 40px;
	  min-height: unset !important;
  }
  .bottom-doctor-wrapper .wrap .right-content .doctor-details.mobile-only  {
    display: block;
    margin-top: 32px;
  }

  .top-doctor-wrapper .wrap .right-content .doctor-name p {
    font-size: 16px;
    line-height: 24px;
  }
  .top-doctor-wrapper .wrap .right-content .doctor-name p span {
    margin: 0 12px;
  }

  .top-doctor-wrapper .wrap .right-content .doctor-name {
    margin-bottom: 32px;
  }

  .bottom-doctor-wrapper .wrap .right-content .doctor-bio p, 
  .bottom-doctor-wrapper .wrap .right-content .doctor-bio ul li, 
  .top-doctor-wrapper .wrap .right-content .doctor-description p {
    font-size: 16px;
    line-height: 24px;
  }
}