.hero-wrapwmnjogger  {
  padding: 4rem 0;
}

.hero-threeonesimpleroutine  {
  padding: 4rem 0;
}

.hero-titlewmnjogger {
  font-weight: 600;
  line-height: 1.1;
  font-size: 3.2rem;
  margin-bottom: .5rem; margin-top: 1.5rem;
  color: #000000;
}

.hero-subtitlewmnjogger  {
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1.3;
  color: #000000;
  margin-bottom: 1.7rem;
}

.hero-copy {
  max-width: 520px;
  font-size: 1.45rem;
  line-height: 1.95rem; 
  color: #000000;
  margin-bottom: 1.2rem;
}

.hero-threeproducts {
  font-weight: 600;
  line-height: 1.1;
  font-size: 3.2rem;
  margin-bottom: .3rem; margin-top: 0.3rem;
  color: #000000;
}

.hero-better {
  font-weight: 600;
  line-height: 1.1;
  font-size: 3.2rem;
  margin-bottom: .3rem; margin-top: 0.3rem;
  color: #000000;
}

.hero-betterenergy {
  line-height: 1.4;
    font-size: 1.5rem;
  margin-bottom: .3rem; margin-top: 0.3rem;
  color: #000000;
}

.threeprod {text-align: right; margin-bottom: 10px}
.xilerateallnatural {padding: 25px 15px 0px 0px}

.hero-copy strong { font-weight: 800; }
.wmnjoggerx {padding: 20px; margin-left: 40px}

.realstories {font-weight: 600; font-size: 2.9rem; line-height: 1.3;}
.customerssay {font-weight: 600; font-size: 2.9rem; line-height: 1.3; margin-top: 30px; margin-bottom: 0px}

.communityheart {float: right; max-width: 340px; font-size: 1.35rem; line-height: 1.95rem; color: #000000; margin-bottom: 1.2rem; margin-right: 0.4rem;}
.txtcenter {text-align: center}
.ourpromise {font-weight: 500; font-size: 1.8rem; line-height: 1.3; color: #000000; margin-bottom: 0.2rem; margin-top: 1.4rem}

.hdgwellness {font-size: 1.5rem; margin-bottom: 0.45rem}

.wellnesshding {font-size: 3.65rem; margin-bottom: 1.55rem; font-weight: 700; color: #000 !important;}
.wellnesshdingtxt {font-size: 1.75rem; margin-bottom: 1.55rem; color: #000 !important;}
.tprodbtn {text-align: center}

.threeprodtxt {text-align: left; float: right; max-width: 420px;}

.bettertxt {text-align: left; float: left; max-width: 490px;}

.cta--testi .cta__inner2 {
    margin: 0 0 24px;
}
.cta__inner2 {
    padding: 0 30px;
}

.pad2 {
    padding: 0px 0;
}

.pad--lg2 {
    padding: 60px 0;
}

.pad--lg3 {
    padding: 20px 0;
}

.shop-now-btn {
  display: inline-block;
  background-color: #24494e;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .03em;
  padding: 0.9rem 3.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, transform .15s ease;
}
.shop-now-btn:hover { background-color: #1c383c; transform: translateY(-2px); }
.shop-now-btn:active { transform: translateY(0);}

.guarantee-badge {
  position: absolute;
  bottom: -30px;
  left: 410px;
  max-width: 220px;
  z-index: 2;
}

.col-lg-6.position-relative {
  position: relative;
}

.brmobx {}

.get-social {
    margin: 0 0 50px
}

.get-social img {
    max-width: 650px;
    margin: 0 auto;
    display: block
}

@media only screen and (max-width: 991px) {
    .get-social img {
        max-width: 100%
    }
}

.get-social h2 {
    font-weight: bold;
    text-shadow: 0 10px 10px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 1;
    font-size: 4rem
}

@media only screen and (max-width: 991px) {
    .get-social h2 {
        font-size: 2.3rem
    }
}

.get-social h2:first-child {
    margin-bottom: -80px
}

@media only screen and (max-width: 991px) {
    .get-social h2:first-child {
        margin-bottom: -20px
    }
}

.get-social h2:last-child {
    text-align: right;
    margin-top: -35px
}

@media only screen and (max-width: 991px) {
    .get-social h2:last-child {
        margin-top: -20px
    }
}

.gold-card {
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    max-width: 340px;
    margin: 0 auto;
    height: 100%;
}

.gold-card h5 {
    font-weight: bold
}

.gold-card p {
    font-size: 1.05rem
}

.gold-card p:last-child {
    margin: 0
}

.gold-card__content {
  padding: 20px 25px;
  background-image: linear-gradient(to right, #fff5e4, #e9c272);
  margin-top: 10px;	
  min-height: 180px;	
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.gold-card__content p {
    font-size: 1.25rem;
}

.doc {
    display: flex;
    border-radius: 122px 25px 25px 122px;
    align-items: center;
    margin: 0 0 50px;
}

.doc--invert {
    flex-direction: row-reverse;
    text-align: left;
    border-radius: 25px 122px 122px 25px
}

@media only screen and (max-width: 991px) {
    .doc--invert {
        text-align: center
    }
}

@media only screen and (max-width: 991px) {
    .doc {
        border-radius: 20px;
        display: block;
        text-align: center;
        padding-top: 20px
    }
}

.doc img {
    max-width: 240px
}

@media only screen and (max-width: 991px) {
    .doc img {
        margin: auto
    }
}

.doc>div {
    flex: 1;
    padding: 30px 20px
}

.doc>div p {
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 1.5rem
}

.yellow-gradient {
    background: url(../images/yellowwhiteyellowbg.png) repeat-y center center;
    background-size: 100% auto;
}

.banner {
  max-width: 1200px;
  margin: 0 auto; 
}

.banner .container {
  max-width: 1200px;
}

.banner__slider {
  width: 100%;
aspect-ratio: 1200 / 537; 
}

.banner__inner {
  position: relative;
  width: 100%;
  max-width: 1200px; 
  aspect-ratio: 1200 / 537; 
  min-height: 537px; 
  margin: 0 auto;
  overflow: hidden;
}

.banner__inner > a,
.banner__inner > a > img {
  display: block;
  width: 100%;
  height: 100%;
}

@supports not (aspect-ratio: 1) {
  .banner__inner::before {
    content: "";
    display: block;
    padding-top: calc(537 / 1200 * 100%);
  }
  .banner__inner > a > img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
}

@media (max-width: 1199.98px) {
  .banner__inner {
    height: auto; 
    aspect-ratio: 1200 / 537; 
  height: auto !important;
  min-height: auto !important;
  }
.banner__inner > a,
.banner__inner > a > img {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: auto !important;	
}	
}

.cslider2 .carrow {
margin-bottom: -82px;
}

@media (max-width: 702px) {
.cslider2 .carrow {margin-bottom: 0px;}}