@font-face {
  font-family:Montserrat;
  src:url('../fonts/montserrat-400.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Montserrat;
  src:url('../fonts/montserrat-500.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Montserrat;
  src:url('../fonts/montserrat-600.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Montserrat;
  src:url('../fonts/montserrat-700.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:Montserrat;
  src:url('../fonts/montserrat-800.ttf') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

:root {
  --blue:#006fba;
  --orange:#ff922e;
  --green:#58a391;
  --gel:#325fa8;
  --ointment:#e28e3c;
  --gray:#e5e5e5;
  --ink:#242424;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Montserrat,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  font-family:inherit;
}

a {
  color:var(--blue);
}

a:hover {
  color:#005792;
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px;
}

[hidden] {
  display:none!important;
}

img {
  max-width:100%;
  height:auto;
}

.site-container {
  width:84%;
  max-width:1600px;
  padding-right:15px;
  padding-left:15px;
}

.skip-link {
  position:fixed;
  z-index:20;
  left:16px;
  top:-90px;
  background:#fff;
  padding:12px 20px;
  border:2px solid var(--blue);
  border-radius:8px;
}

.skip-link:focus {
  top:16px;
}

.hero {
  overflow:hidden;
  background:#fff;
}

.hero-main {
  position:relative;
  height:min(38.8vw,745px);
  max-width:1920px;
  min-height:450px;
  margin:auto;
}

.hero-copy {
  position:absolute;
  z-index:2;
  top:9.9%;
  left:8.8%;
  width:47%;
}

.hero-copy h1 {
  margin:0 0 5.7%;
  line-height:1;
}

.brand-logo {
  width:71.5%;
  height:auto;
  display:block;
}

.hero-copy p {
  font-weight:500;
  font-size:clamp(17px,1.32vw,25px);
  line-height:1.2;
  margin:0;
  letter-spacing:-.3px;
}

.hero-woman {
  position:absolute;
  right:0;
  top:0;
  width:48%;
  height:83%;
  object-fit:cover;
  object-position:center top;
  mask-image:linear-gradient(to bottom,#000 83%,transparent 100%);
}

.hero-products {
  position:absolute;
  z-index:3;
  left:6.4%;
  bottom:7.9%;
  width:54.5%;
  height:47%;
  object-fit:contain;
  object-position:left bottom;
}

.hero-action {
  position:absolute;
  z-index:4;
  right:8.2%;
  top:64.6%;
  width:34%;
  text-align:right;
}

.hero-action .btn {
  margin-top:3.5%;
  margin-right:0;
}

.speed-stripe {
  display:flex;
  align-items:stretch;
  height:clamp(35px,3.8vw,73px);
  gap:2.1%;
  transform:translateX(8%);
}

.speed-stripe span {
  width:46%;
  background:var(--blue);
  clip-path:polygon(0 0,100% 0,78% 100%,0 100%);
}

.speed-stripe i {
  display:block;
  flex:1;
  background:var(--blue);
  transform:skew(-44deg);
}

.speed-stripe i:nth-last-child(-n+2) {
  background:#009bd4;
}

.btn-pill {
  border-radius:50px;
  border:0;
  font-size:clamp(16px,1.28vw,25px);
  line-height:1.2;
  padding:.74em 1.35em;
  font-weight:700;
  white-space:normal;
  box-shadow:none!important;
  transition:background-color .2s,transform .2s;
}

.btn-pill:hover {
  transform:translateY(-2px);
}

.btn-orange {
  background:var(--orange);
  color:#fff;
}

.btn-orange:hover,.btn-orange:focus {
  background:#e88121;
  color:#fff;
}

.btn-blue {
  background:var(--blue);
  color:#fff;
}

.btn-blue:hover,.btn-blue:focus {
  background:#005c9d;
  color:#fff;
}

.topic-banner {
  position:relative;
  isolation:isolate;
  min-height:clamp(80px,6vw,116px);
  display:flex;
  align-items:center;
  background:linear-gradient(#fff 50%,var(--gray) 50%);
}

.topic-banner-fill {
  position:absolute;
  inset:0 auto 0 0;
  width:54.6%;
  z-index:-1;
  background:var(--blue);
  clip-path:polygon(0 0,100% 0,89% 100%,0 100%);
}

.topic-banner p {
  color:#fff;
  font-size:clamp(20px,1.87vw,36px);
  font-weight:700;
  line-height:1.23;
  text-transform:uppercase;
  margin:0;
  letter-spacing:.1px;
}

.banner-stripes {
  position:absolute;
  z-index:-1;
  left:54%;
  top:0;
  height:100%;
  width:26.5%;
  display:flex;
  gap:8%;
  transform:skew(-44deg);
}

.banner-stripes i {
  display:block;
  flex:1;
  background:var(--blue);
}

.banner-stripes i:nth-last-child(-n+2) {
  background:#009bd4;
}

.materials {
  padding:clamp(44px,3.3vw,64px) 0 clamp(64px,4.8vw,94px);
}

.articles-section {
  background:var(--gray);
}

.videos-section {
  background:#f4f4f4;
  padding-top:clamp(60px,5.4vw,104px);
}

.section-title {
  font-size:clamp(24px,1.7vw,34px);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:700;
  margin:0 0 22px;
}

.text-orange {
  color:var(--orange)!important;
}

.material-grid {
  margin-right:-15px;
  margin-left:-15px;
  row-gap:28px;
}

.material-card {
  display:block;
  flex:1;
  background:#fff;
  border-radius:21px;
  padding:20px 16px 16px;
  color:var(--ink);
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}

.material-card:hover {
  transform:translateY(-5px);
  box-shadow:0 12px 30px #0000000d;
  text-decoration:none;
  color:var(--ink);
}

.material-card>img,.video-cover img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:11px;
}

.material-card h3 {
  font-size:clamp(16px,1.12vw,22px);
  line-height:1.15;
  font-weight:600;
  margin:21px 0 12px;
  letter-spacing:-.2px;
}

.material-card p {
  font-size:clamp(14px,.92vw,18px);
  font-weight:400;
  line-height:1.25;
  margin:0;
}

.section-action {
  text-align:center;
  margin-top:clamp(44px,4.15vw,80px);
}

.section-action .btn {
  min-width:235px;
}

.video-card h3 {
  margin-bottom:0;
}

.video-cover {
  position:relative;
}

.play-icon {
  position:absolute;
  left:50%;
  top:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#ffffffed;
  transform:translate(-50%,-50%) scale(.9);
  opacity:0;
  transition:opacity .2s,transform .2s;
}

.play-icon::after {
  content:'';
  position:absolute;
  left:22px;
  top:16px;
  border-left:15px solid var(--blue);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

.video-card:hover .play-icon,.video-card:focus-visible .play-icon {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.more-links {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:30px;
}

.more-links a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:22px;
  background:#fff;
  border-radius:16px;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
}

.more-links a:hover {
  box-shadow:0 5px 20px #0000000c;
}

.more-links span {
  font-size:24px;
}

.products-section {
  background:#fff;
  padding-bottom:clamp(60px,5vw,100px);
}

.product-tabs {
  display:flex;
  gap:28px;
  align-items:flex-start;
  min-height:clamp(125px,10.6vw,205px);
}

.product-tab {
  position:relative;
  width:calc((100% - 56px)/3);
  height:clamp(100px,8.4vw,162px);
  border:0;
  border-radius:0 0 44px 44px;
  color:#fff;
  font-size:clamp(21px,1.9vw,36px);
  font-weight:500;
  transition:height .2s,filter .2s;
}

.tab-suppositories {
  background:var(--green);
}

.tab-gel {
  background:var(--gel);
}

.tab-ointment {
  background:var(--ointment);
}

.product-tab.active {
  height:clamp(120px,10.2vw,196px);
  font-weight:700;
}

.product-tab::before {
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid #ffffff22;
  border-top:0;
  border-radius:0 0 35px 35px;
  pointer-events:none;
}

.product-tab:hover {
  filter:brightness(1.05);
}

.product-panel {
  --product-color:var(--green);
  padding-top:clamp(35px,3.5vw,68px);
}

.product-panel[data-form="gel"] {
  --product-color:#b0a03c;
}

.product-panel[data-form="ointment"] {
  --product-color:var(--ointment);
}

.product-overview {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:60px;
  margin-bottom:clamp(65px,5vw,95px);
}

.product-art {
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
}

.product-intro {
  font-size:clamp(14px,.89vw,17px);
  line-height:1.35;
}

.product-intro h3 {
  font-size:clamp(17px,1.15vw,22px);
  color:var(--product-color);
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  margin-bottom:15px;
}

.product-intro p {
  margin:0 0 15px;
}

.product-description {
  position:relative;
  padding-right:26%;
  min-height:210px;
}

.product-description h2 {
  font-size:clamp(27px,1.9vw,36px);
  font-weight:700;
  color:#35639b;
  margin:0 0 5px;
}

.product-subtitle {
  font-size:clamp(18px,1.27vw,24px);
  margin:0 0 25px;
}

.product-checks {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:45px;
  row-gap:14px;
  font-size:clamp(14px,.9vw,17px);
  color:var(--product-color);
  line-height:1.3;
  font-weight:500;
}

.product-checks li {
  position:relative;
  padding-left:20px;
}

.product-checks li::before {
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  font-weight:700;
}

.virus-art {
  position:absolute;
  right:1%;
  top:25%;
  width:20%;
  max-width:240px;
  height:auto;
}

.indications {
  position:relative;
  margin-top:60px;
}

.indications h3 {
  font-size:clamp(22px,1.5vw,28px);
  font-weight:600;
  margin:0 0 25px;
}

.indication-list {
  list-style:none;
  margin:0;
  padding:0;
  max-width:100%;
  font-size:clamp(14px,.9vw,17px);
  line-height:1.35;
}

.indication-list li {
  position:relative;
  min-height:64px;
  padding:0 0 0 86px;
  margin:0 0 20px;
  display:flex;
  align-items:center;
}

.disease-icon {
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  width:64px;
  height:64px;
  object-fit:contain;
}

.product-footnote {
  font-size:11px;
  line-height:1.5;
  max-width:1050px;
  color:#646464;
  margin:24px 0;
}

.product-actions {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.product-actions .btn {
  font-size:clamp(14px,1vw,19px);
  padding:.85em 1.8em;
  background:linear-gradient(110deg,#325ba6,#318dce);
}

.product-actions .btn:hover {
  background:var(--blue);
}

.about-section {
  background:#f1f1f1;
  overflow:hidden;
  padding:clamp(48px,3.7vw,72px) 0;
}

.about-section .site-container {
  position:relative;
  display:flow-root;
}

.company-photo {
  float: right;
  width: 50%;
  height: auto;
  aspect-ratio: 2;
  object-fit: cover;
  object-position: left;
  shape-outside: ellipse(54% 50% at 45% 50%);
  border-radius: 0% 0 0 0%;
  margin: 0 -11% 28px 32px;
}

.about-copy h2 {
  font-size:clamp(28px,1.9vw,36px);
  color:#26759c;
  font-weight:700;
  margin:0 0 30px;
}

.about-copy p {
  font-size:clamp(14px,.9vw,17px);
  line-height:1.4;
  max-width:100%;
  margin-bottom:20px;
}

.about-copy .btn {
  font-size:17px;
  margin-top:15px;
}

.site-footer {
  padding:34px 0 24px;
  background:#fff;
}

.medical-note {
  text-transform:uppercase;
  font-size:clamp(13px,1.1vw,21px);
  line-height:1.5;
  color:#747474;
  margin-bottom:28px;
  letter-spacing:.35px;
}

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid #e9e9e9;
  padding-top:24px;
  font-size:12px;
  color:#7b7b7b;
}

.footer-bottom>a {
  font-weight:800;
  font-size:24px;
  text-decoration:none;
}

.footer-bottom nav {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.footer-bottom nav a {
  color:#666;
}

.back-to-top {
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  right:24px;
  bottom:24px;
  width:44px;
  height:44px;
  background:#fff;
  color:var(--blue);
  border:1px solid #e6e6e6;
  border-radius:50%;
  box-shadow:0 3px 16px #00000012;
  z-index:10;
  font-size:25px;
  text-decoration:none;
}

.back-to-top:hover {
  text-decoration:none;
  background:var(--blue);
  color:#fff;
}

.noscript-message {
  padding:40px 0;
}

@media(min-width:1921px) {
  .hero {
    background:#fff;
  }
  .hero-main {
    height:745px;
  }
  .topic-banner .site-container {
    max-width:1600px;
  }
  .topic-banner-fill {
    width:calc(50% + 88px);
  }
  .banner-stripes {
    left:calc(50% + 76px);
    width:510px;
  }
  .hero-copy p {
    font-size:25px;
  }
}

@media(max-width:1199.98px) {
  .site-container {
    width:90%;
  }
  .hero-copy {
    left:6%;
  }
  .hero-copy p {
    font-size:17px;
  }
  .hero-main {
    min-height:420px;
  }
  .hero-products {
    left:4%;
    width:56%;
  }
  .hero-action {
    right:6%;
    width:35%;
    top:61%;
  }
  .topic-banner p {
    font-size:23px;
  }
  .topic-banner-fill {
    width:62%;
  }
  .banner-stripes {
    left:61%;
    width:28%;
  }
  .material-card {
    padding:14px 12px;
    border-radius:17px;
  }
  .material-grid {
    margin:0 -10px;
  }
  .material-grid>div {
    padding:0 10px;
  }
  .material-card h3 {
    margin-top:16px;
    font-size:17px;
  }
  .material-card p {
    font-size:14px;
  }
  .product-overview {
    gap:32px;
  }
  .product-checks {
    column-gap:25px;
  }
  .product-description {
    padding-right:23%;
  }
  .company-photo {
    margin-right:-6%;
    width:53%;
  }
}

@media(max-width:991.98px) {
  .hero-main {
    height:470px;
  }
  .hero-copy {
    top:10%;
    width:52%;
  }
  .brand-logo {
    width:89%;
  }
  .hero-copy p {
    font-size:16px;
    line-height:1.35;
  }
  .hero-woman {
    width:45%;
    height:75%;
  }
  .hero-products {
    width:63%;
    height:43%;
    bottom:8%;
  }
  .hero-action {
    right:5%;
    width:33%;
    top:63%;
  }
  .hero-action .btn {
    font-size:16px;
  }
  .topic-banner {
    min-height:91px;
  }
  .topic-banner p {
    font-size:21px;
  }
  .topic-banner-fill {
    width:73%;
  }
  .banner-stripes {
    left:72%;
    width:27%;
  }
  .material-card {
    padding:16px;
    border-radius:20px;
  }
  .material-card h3 {
    font-size:20px;
  }
  .material-card p {
    font-size:16px;
  }
  .section-title {
    margin-bottom:24px;
  }
  .more-links {
    grid-template-columns:1fr;
  }
  .more-links a {
    padding:20px;
  }
  .product-overview {
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-bottom:50px;
  }
  .product-intro {
    font-size:13px;
  }
  .product-intro h3 {
    font-size:16px;
  }
  .product-checks {
    font-size:13px;
  }
  .product-description {
    padding-right:18%;
  }
  .virus-art {
    width:16%;
    top:35%;
  }
  .product-tab {
    border-radius:0 0 30px 30px;
  }
  .product-tab::before {
    border-radius:0 0 23px 23px;
  }
  .company-photo {
    width:55%;
    margin-bottom:15px;
  }
  .footer-bottom {
    flex-wrap:wrap;
  }
  .footer-bottom nav {
    gap:20px;
  }
}

@media(max-width:767.98px) {
  .site-container {
    width:93%;
  }
  .hero-main {
    height:650px;
    min-height:0;
  }
  .hero-copy {
    top:28px;
    left:6%;
    width:88%;
  }
  .hero-copy h1 {
    margin-bottom:23px;
  }
  .brand-logo {
    width:75%;
    max-width:400px;
  }
  .hero-copy p {
    font-size:16px;
    max-width:440px;
  }
  .hero-woman {
    width:61%;
    height:53%;
    top:188px;
    right:0;
    object-position:70% top;
    mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
  }
  .hero-products {
    left:3%;
    width:84%;
    height:30%;
    bottom:7%;
    object-position:left center;
  }
  .hero-action {
    right:7%;
    top:76%;
    width:39%;
  }
  .speed-stripe {
    display:none;
  }
  .hero-action .btn {
    margin-top:32px;
    padding:12px 22px;
  }
  .topic-banner {
    min-height:88px;
  }
  .topic-banner p {
    font-size:18px;
    line-height:1.3;
  }
  .topic-banner-fill {
    width:87%;
  }
  .banner-stripes {
    left:85%;
    width:35%;
    gap:10%;
  }
  .materials {
    padding:42px 0 52px;
  }
  .videos-section {
    padding-top:48px;
  }
  .section-title {
    font-size:25px;
  }
  .material-grid {
    row-gap:20px;
  }
  .material-card h3 {
    font-size:18px;
  }
  .material-card p {
    font-size:14px;
  }
  .section-action {
    margin-top:34px;
  }
  .section-action .btn {
    min-width:195px;
  }
  .btn-pill {
    font-size:17px;
  }
  .product-tabs {
    gap:12px;
    min-height:115px;
  }
  .product-tab {
    width:calc((100% - 24px)/3);
    height:85px;
    font-size:21px;
    border-radius:0 0 23px 23px;
  }
  .product-tab.active {
    height:105px;
  }
  .product-tab::before {
    inset:6px;
    border-radius:0 0 18px 18px;
  }
  .product-panel {
    padding-top:30px;
  }
  .product-overview {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:40px;
  }
  .product-art {
    max-height:300px;
    width:100%;
  }
  .product-intro {
    font-size:15px;
  }
  .product-intro h3 {
    font-size:18px;
  }
  .product-description {
    padding-right:0;
  }
  .product-description h2 {
    font-size:27px;
    padding-right:65px;
  }
  .product-subtitle {
    font-size:17px;
    margin-bottom:24px;
    padding-right:60px;
  }
  .product-checks {
    font-size:14px;
    column-gap:20px;
  }
  .virus-art {
    width:65px;
    right:0;
    top:0;
  }
  .indications {
    margin-top:35px;
  }
  .indications h3 {
    font-size:23px;
    margin-bottom:22px;
  }
  .indication-list {
    font-size:14px;
  }
  .indication-list li {
    min-height:48px;
    padding-left:66px;
    margin-bottom:18px;
  }
  .disease-icon {
    width:48px;
    height:48px;
    left:0;
  }
  .product-footnote {
    font-size:10px;
  }
  .product-actions {
    gap:12px;
  }
  .product-actions .btn {
    font-size:14px;
    padding:13px 21px;
  }
  .about-section {
    padding:40px 0;
  }
  .company-photo {
    float:none;
    display:block;
    width:calc(100% + 5%);
    max-width:none;
    height:240px;
    margin:0 -2.5% 30px;
    border-radius:110px 0 0 110px;
    shape-outside:none;
  }
  .about-copy h2 {
    font-size:28px;
    margin-bottom:22px;
  }
  .about-copy p {
    font-size:14px;
  }
  .about-copy .btn {
    font-size:16px;
  }
  .footer-bottom {
    align-items:flex-start;
    gap:20px;
  }
  .footer-bottom nav {
    order:3;
    width:100%;
    gap:15px;
  }
  .medical-note {
    font-size:12px;
  }
  .back-to-top {
    right:14px;
    bottom:14px;
    width:38px;
    height:38px;
  }
}

@media(max-width:575.98px) {
  .hero-main {
    height:560px;
  }
  .hero-copy {
    top:28px;
  }
  .brand-logo {
    width:84%;
  }
  .hero-copy p {
    font-size:14px;
    max-width:340px;
  }
  .hero-woman {
    top:165px;
    width:68%;
    height:49%;
  }
  .hero-products {
    width:100%;
    left:0;
    height:29%;
    bottom:0;
  }
  .hero-action {
    top:auto;
    bottom:15px;
    width:auto;
    right:7%;
  }
  .hero-action .btn {
    margin:0;
    font-size:15px;
    padding:12px 24px;
  }
  .topic-banner {
    min-height:76px;
  }
  .topic-banner p {
    font-size:14px;
    letter-spacing:0;
  }
  .topic-banner-fill {
    width:90%;
  }
  .banner-stripes {
    left:89%;
    width:37%;
    gap:12%;
  }
  .material-grid>div {
    padding:0 10px;
  }
  .material-card {
    padding:15px;
    border-radius:18px;
  }
  .material-card>img,.video-cover img {
    aspect-ratio:1.55;
  }
  .material-card h3 {
    font-size:20px;
    line-height:1.2;
    margin-top:16px;
  }
  .material-card p {
    font-size:15px;
    line-height:1.4;
  }
  .video-card h3 {
    font-size:18px;
    margin-bottom:3px;
  }
  .section-title {
    font-size:23px;
  }
  .play-icon {
    width:44px;
    height:44px;
    opacity:1;
  }
  .play-icon::after {
    left:19px;
    top:13px;
    border-left-width:12px;
    border-top-width:9px;
    border-bottom-width:9px;
  }
  .product-checks {
    grid-template-columns:1fr;
    row-gap:13px;
  }
  .product-art {
    max-height:240px;
  }
  .product-tab {
    height:75px;
    font-size:18px;
  }
  .product-tab.active {
    height:92px;
  }
  .product-tabs {
    min-height:98px;
    gap:10px;
  }
  .product-tab {
    width:calc((100% - 20px)/3);
  }
  .product-actions {
    align-items:flex-start;
    flex-direction:column;
  }
  .company-photo {
    height:210px;
  }
  .more-links a {
    font-size:14px;
  }
  .footer-bottom>span {
    margin-left:auto;
  }
}

@media(max-width:575.98px) {
  .topic-banner p {
    font-size:clamp(11px,2.85vw,16px);
    max-width:86%;
    line-height:1.4;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}