.hair-loss-theories {
  margin: 64px 0;
}

.hair-loss-theories h1 {
  margin-bottom: 12px;
}

.hair-loss-theories__description {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.hair-loss-theories .description__text {
  max-width: 640px;
}

.hair-loss-theories .evidence-quality__filter {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 3px solid #FF7C32;
}

.hair-loss-theories .evidence-quality__filter-button {
  width: 24px;
  height: 24px;
  background: transparent;
  padding: 0;
  outline: none;
  border: none;
}

.hair-loss-theories .evidence-quality__filter-button.active svg path {
  fill: #F18E3D;
}

.hair-loss-theories .hair-loss-theories__item {
  display: flex;
  margin-bottom: 65px;
  position: relative;
  border: 1px solid #D0D5DD;
  border-radius: 12px;
}

.hair-loss-theories .hair-loss-theories__item::before {
  content: '';
  width: 100%;
  height: 1px;
  margin: 0 32px;
  background-color: #DDDCDC;
  position: absolute;
  bottom: -33px;
  left: -32px;
}

.hair-loss-theories .hair-loss-item__body {
  width: 100%;
  margin-bottom: 24px;
}

.hair-loss-theories .hair-loss-item__image {
  max-width: 212px;
  width: 100%;
  border-radius: 12px;
  border-right: 1px solid #D0D5DD;
  background-color: #FFFFEE;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  margin-right: 32px;
}

.hair-loss-theories .hair-loss-item__image img {
  max-width: 100%;
  width: 148px;
  min-width: 148px;
  height: auto;
  object-fit: contain;
}

.hair-loss-theories .hair-loss-item__title {
  margin-bottom: 24px;
}

.hair-loss-theories .hair-loss-item__sub-title.evidence-quality {
  margin: 12px 42px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  align-items: center;
}

.hair-loss-theories .hair-loss-item__sub-title {
  margin-bottom: 4px;
  color: #41617E;
}

.hair-loss-theories .hair-loss-item__evidence {
  display: flex;
  align-items: center;
}

.hair-loss-theories .hair-loss-item__text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
}

.hair-loss-theories .hair-loss-item__text p {
  font-size: 18px;
  line-height: 24px;
  color: #41617E;
  max-width: 676px;
}

.hair-loss-theories .hair-loss-item__box {
  gap: 50px;
}

.hair-loss-theories .hair-loss-item__box,
.hair-loss-theories .hair-loss-tabs__buttons {
  display: flex;
  justify-content: space-between;
}

.hair-loss-theories .hair-loss-item__tabs {
  margin-top: 24px;
  padding: 0 20px;
}

.hair-loss-theories .hair-loss-tabs__buttons {
  position: relative;
  margin: 0 55px;
  scroll-margin-block: 90px;
}

.hair-loss-theories .hair-loss-tabs__buttons::before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #D0D5DD;
  position: absolute;
  bottom: 4px;
  left: 0;
}

.hair-loss-theories .hair-loss-tabs__button {
  font-family: 'DM Serif Display';
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  color: #173851;
  padding-bottom: 32px;
  position: relative;
  cursor: pointer;
  text-align: center;
  max-width: 190px;
  scroll-margin-block: 90px;
}

@keyframes flashing {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.hair-loss-theories .hair-loss-tabs__button.active {
  color: #F18E3D;
}

.hair-loss-theories .hair-loss-tabs__button:first-child {
  transform: translateX(-50%);
}

.hair-loss-theories .hair-loss-tabs__button:last-child {
  transform: translateX(50%);
}


.hair-loss-theories .hair-loss-tabs__button:after {
  content: '';
  animation: flashing 2s infinite alternate;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -7px;
  border-radius: unset;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4531_2615)'%3E%3Cpath d='M12 0H24V12C17.3726 12 12 6.62742 12 0Z' fill='%231A4360'/%3E%3Cpath d='M12 24C12 17.3726 17.3726 12 24 12V24H12Z' fill='%231A4360'/%3E%3Cpath d='M0 12C6.62742 12 12 17.3726 12 24H0V12Z' fill='%231A4360'/%3E%3Cpath d='M0 0H12C12 6.62742 6.62742 12 0 12V0Z' fill='%231A4360'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4531_2615'%3E%3Crect width='24' height='24' rx='6' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.hair-loss-theories .hair-loss-tabs__button:before {
  background-color: #fff;
  content: '';
  width: 36px;
  height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -7px;
}

.hair-loss-theories .hair-loss-tabs__button.active:after {
  animation: none;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4531_2615)'%3E%3Cpath d='M12 0H24V12C17.3726 12 12 6.62742 12 0Z' fill='%23FF7C32'/%3E%3Cpath d='M12 24C12 17.3726 17.3726 12 24 12V24H12Z' fill='%23FF7C32'/%3E%3Cpath d='M0 12C6.62742 12 12 17.3726 12 24H0V12Z' fill='%23FF7C32'/%3E%3Cpath d='M0 0H12C12 6.62742 6.62742 12 0 12V0Z' fill='%23FF7C32'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4531_2615'%3E%3Crect width='24' height='24' rx='6' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}


/* .hair-loss-theories .hair-loss-tabs__button.active:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10' fill='none'%3E%3Cpath d='M541.5 9.06728V281.272H-252.5V9.06728H0.684219C0.992493 9.06728 1.29329 8.9723 1.54565 8.79526L12.1999 1.32128C12.3754 1.19816 12.6099 1.20063 12.7827 1.32741L22.9403 8.77686C23.1976 8.96554 23.5083 9.06728 23.8274 9.06728H541.5Z' stroke='%23F18E3D'/%3E%3C/svg%3E") !important;
  height: 10px;
  background-size: contain;
  bottom: -22px;
  pointer-events: none;
} */

.hair-loss-theories .hair-loss-tab {
  display: none;
  padding: 24px 0 0;
  border-top: 1px solid #D0D5DD;
  margin-top: 20px;
}

.hair-loss-theories .hair-loss-tab.active {
  display: block;
}

.scroll-button {
  display: none;
}

.hair-loss-theories .hair-loss-tab .wprt-container p,
.hair-loss-theories .hair-loss-tab .wprt-container ul {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  color: #323232;
  margin-bottom: 16px;
}

.hair-loss-theories .hair-loss-tab .hair-loss-tab__links {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #D0D5DD;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hair-loss-theories .hair-loss-tab .hair-loss-tab__links h4 {
  margin-bottom: 4px;
}

.hair-loss-theories .hair-loss-tab .hair-loss-tab__links a {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
  color: #FF7C32;
  padding-left: 20px;
  position: relative;
}

.hair-loss-theories .hair-loss-tab .hair-loss-tab__links a:hover {
  text-decoration: none;
}

.hair-loss-theories .hair-loss-tab .hair-loss__links-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hair-loss-theories .hair-loss-tab .hair-loss-tab__links a:before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #FF7C32;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.viability-1 path:nth-child(1),
.viability-2 path:nth-child(-n+2),
.viability-3 path {
  fill: #41617E;
}

.viability-popup__line {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 4px;
}

.viability-popup__line+.viability-popup__line {
  margin-top: 8px;
}

.viability-popup__line p {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 150%;
  margin: 0;
}

.hair-loss-theories h4,
.hair-loss-theories h3 .hair-loss-theories h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.hair-loss-theories h4 img,
.hair-loss-theories h3 img,
.hair-loss-theories h2 img {
  object-fit: contain;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

ol.number {
  counter-reset: my-awesome-counter;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

ol.number li {
  counter-increment: my-awesome-counter;
  position: relative;
  font-family: 'Open Sans';
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #41617E;
  padding-left: 60px;
  min-height: 36px;
}

ol.number li::before {
  content: counter(my-awesome-counter);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #E8ECF2;
  color: #173851;
  font-family: 'DM Serif Display';
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
}

ol.number li.custom::before {
  content: attr(data-number);
}

@media screen and (max-width: 768px) {
  .hair-loss-theories {
    margin: 48px 0px;
  }

  .hair-loss-theories__description {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    margin-bottom: 40px;
  }

  .hair-loss-theories .evidence-quality__filter {
    margin: 8px 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  .hair-loss-theories .evidence-quality__filter .h3 {
    margin-right: auto;
  }

  .hair-loss-theories .hair-loss-theories__item {
    flex-direction: column;
    padding: 24px 16px;
  }

  .hair-loss-theories .hair-loss-item__image {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    border: 1px solid #D0D5DD;
  }

  .hair-loss-theories .hair-loss-item__box {
    flex-direction: column;
    gap: 24px;
  }

  .hair-loss-theories .hair-loss-item__evidence {
    margin: 0;
    justify-content: center;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
  }

  .hair-loss-theories .hair-loss-tab .hair-loss__links-col+.hair-loss__links-col {
    margin-left: 0;
  }

  .hair-loss-theories h1 {
    text-align: center;
    margin-bottom: 24px;
  }

  .hair-loss-theories .hair-loss-item__sub-title:not(.evidence-quality) {
    margin-bottom: 16px;
  }

  .hair-loss-theories .hair-loss-tabs__button {
    font-size: 12px;
  }

  .hair-loss-theories .hair-loss-item__sub-title.evidence-quality {
    top: 0;
  }

  .viability-svg {
    width: 92px;
  }

  .scroll-button {
    display: block;
    margin-top: 16px;
    background-color: #FF7C32;
    color: #fff;
    border-radius: 4px;
    border: none;
    outline: none;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scroll-button svg {
    transform: rotate(-90deg);
  }
}

@media screen and (max-width: 600px) {
  .viability-popup {
    width: auto;
    right: 0;
  }
}

@media screen and (max-width: 500px) {
  .hair-loss-theories .hair-loss-item__text {
    display: block;
  }

  .hair-loss-theories .hair-loss-item__text p {
    margin-left: 0px;
  }

  .hair-loss-theories .evidence-quality__filter {
    width: 100%;
    box-sizing: border-box;
  }

  .hair-loss-theories .evidence-quality__filter-title {
    margin-right: auto;
  }

  .hair-loss-theories .hair-loss-tabs__button:nth-child(2) {
    transform: translateX(-15%);
  }

  .hair-loss-theories .hair-loss-tabs__button:nth-child(3) {
    transform: translateX(15%);
  }

  .hair-loss-theories .hair-loss-tabs__button {
    width: 42%;
  }

  .hair-loss-theories .hair-loss-tabs__button.active span {
    background: #fff;
  }

  .hair-loss-theories .hair-loss-tabs__button.active {
    overflow: visible;
    display: flex;
    justify-content: space-evenly;
  }

  .hair-loss-theories .hair-loss-tabs__buttons {
    margin: 0 7%;
  }
}

@media screen and (max-width: 380px) {
  .hair-loss-theories .hair-loss-tabs__button:nth-child(3) {
    transform: translateX(0%);
  }

  .hair-loss-theories .hair-loss-tabs__button:last-child {
    transform: translateX(35%);
  }
}

@media screen and (max-width: 370px) {
  .hair-loss-theories .hair-loss-tabs__button:last-child {
    transform: translateX(25%);
  }
}

@media screen and (max-width: 360px) {
  .hair-loss-theories .hair-loss-tabs__button:last-child {
    transform: translateX(15%);
  }
}

.leading-contact-form {
  padding: 64px 96px;
  background-color: #EFF7FD;
}

.leading-contact-form h2 {
  margin-bottom: 32px;
}

.leading-contact-form h4 {
  margin-bottom: 12px;
}


.leading-contact-form label {
  color: #323232;
  font-family: 'Open Sans';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 12px;
  display: block;
  width: 348px;
  max-width: 100%;
}


.leading-contact-form input[name="your-name"],
.leading-contact-form input[name="your-email"],
.leading-contact-form textarea[name="your-message"] {
  width: 100%;
  font-family: 'Open Sans';
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 8px;
  border: 1px solid #DDDCDC;
  line-height: 1.4;
  margin: 0;
  background: #ffffff;
  color: #323232;
  border-radius: 6px;
  margin-top: 4px;
}

.leading-contact-form input[name="your-name"]::placeholder,
.leading-contact-form input[name="your-email"]::placeholder,
.leading-contact-form textarea[name="your-message"]::placeholder {
  color: #DDDCDC;
}

.leading-contact-form textarea[name="your-message"] {
  resize: none;
}

.leading-contact-form input[type="submit"] {
  border: 2px solid #ff7c32;
  box-shadow: 0px 1px 2px 0px #1018280d;
  background-color: #ff7c32;
  color: #fff;
  border-radius: 4px;
  font-family: 'Lato', sans-serif !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  transition: background-color 200ms linear, border-color 200ms linear;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  padding: 12px 16px;
  gap: 12px;
  width: 100%;
}

.leading-contact-form input[type="submit"]:hover {
  border: 2px solid #ff8d40;
  background-color: #ff8d40;
  color: #fff;
}

.leading-contact-form input[type="submit"]:focus {
  border: 2px solid #02192b;
  background-color: #02192b;
  color: #fff;
}

.leading-contact-form .wpcf7-not-valid-tip {
  font-size: 14px;
}

.leading-contact-form .wpcf7 form .wpcf7-response-output {
  margin: 16px 0;
}

.leading-contact-form__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

.leading-contact-form__container .wpcf7 {
  max-width: 100%;
}

@media screen and (max-width: 976px) {
  .leading-contact-form {
    padding: 80px 15px;
  }

  .leading-contact-form__container {
    gap: 36px;
    flex-direction: column;
  }

  .leading-contact-form .description__text {
    max-width: 100%;
  }

  .hair-loss-theories .hair-loss-tabs__button {
    font-size: 18px;
    line-height: 28px;
  }
}


@media screen and (max-width: 768px) {
  .hair-loss-theories .hair-loss-tabs__button {
    font-size: 12px;
  }
}