/* ==========================================================================
   FONT FAMILY SETUP
   ========================================================================== */
@font-face {
    font-family: 'Optima';
    src: url("https://design-resource.bwlgroup.com/fonts/Optima-Regular.woff2") format("woff2"), url("https://design-resource.bwlgroup.com/fonts/Optima-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'Optima';
    src: url("https://design-resource.bwlgroup.com/fonts/Optima-Italic.woff2") format("woff2"), url("https://design-resource.bwlgroup.com/fonts/Optima-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap; 
}

@font-face {
    font-family: 'Optima';
    src: url("https://design-resource.bwlgroup.com/fonts/Optima-Bold.woff2") format("woff2"), url("https://design-resource.bwlgroup.com/fonts/Optima-Bold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'Woodford Bourne';
    src: url("https://design-resource.bwlgroup.com/fonts/WoodfordBourne-Regular.woff2") format("woff2"), url("https://design-resource.bwlgroup.com/fonts/WoodfordBourne-Regular.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'Woodford Bourne';
    src: url("https://design-resource.bwlgroup.com/fonts/WoodfordBourne-Bold.woff2") format("woff2"), url("https://design-resource.bwlgroup.com/fonts/WoodfordBourne-Bold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap; 
}


/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    /* font-family */
    --main-font-family: 'Optima', sans-serif;
    --secondary-font-family: 'Woodford Bourne', sans-serif;


    /* button */
    --bs-border-radius: 50px;

    /* colors */
    --main-text-color: #FFFCF5;
    --secondary-text-color: #502D1E;
}

/* ==========================================================================
   GENERAL
   ========================================================================== */

html {
    font-size: 100%;
}

body {
    font-family: var(--secondary-font-family);
    font-weight: 300;
}

h2, h3 {
    font-family: var(--main-font-family);
}

button.btn-grey {
    --bs-btn-padding-x: 2.9rem;
    --bs-btn-padding-y: 0.5rem;
    /* --bs-btn-font-size: 1.875rem; */
    --bs-btn-font-size: clamp(1.25rem, 2vw, 1.875rem);
    
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: var(--bs-border-radius);

    --bs-btn-color: var(--main-text-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;

    --bs-btn-bg: #867874;
    --bs-btn-hover-bg: #502D1E;
    --bs-btn-active-bg: #502D1E;

    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
}

button.btn-white {
    --bs-btn-padding-x: 2.9rem;
    --bs-btn-padding-y: 0.5rem;
    /* --bs-btn-font-size: 1.875rem; */
    --bs-btn-font-size: clamp(1.25rem, 2vw, 1.875rem);
    
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: var(--bs-border-radius);

    --bs-btn-color: var(--secondary-text-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;

    --bs-btn-bg: #fff;
    --bs-btn-hover-bg: #502D1E;
    --bs-btn-active-bg: #502D1E;

    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
}

sub.text-top {
    vertical-align: top;
    bottom: -.75em;
    font-size: .35em;
    margin-left: 0.125rem;
}

/* ==========================================================================
   SECTION 1
   ========================================================================== */
.s1Campaign__section {
    padding: 3.75rem 7.5rem 7.5rem;
    background: url("https://resource.bwlgroup.com/drs-secret/campaign/vogue/images/clipped-biosc-ampoule-booster-essence-desktop.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-color: #fff; */
    position: relative;
    color: var(--secondary-text-color);
}

.s1Campaign__section h2 {
    /* font-size: 2.8rem; */
    font-size: clamp(1.45rem, 3vw, 2.8rem);
}

.s1Campaign__section h2 i {
    display: block;
    /* font-size: 3.4375rem; */
    font-size: clamp(1.875rem, 4vw, 3.4375rem);
}

.s1Campaign__section .row {
    margin-top: 5rem;
}

.s1Campaign__section h6 {
    /* font-size: 1.875rem; */
    font-size: clamp(1.25rem, 2vw, 1.875rem);
    font-weight: 600;
}

.s1Campaign__section h3 {
    /* font-size: 2.8125rem; */
    font-size: clamp(1.875rem, 3vw, 2.8125rem);
    font-weight: 300;
    line-height: 50px;
    margin-top: 1.25rem;
}

.s1Campaign__section h5 {
    /* font-size: 1.625rem; */
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 600;
    margin-top: 1.25rem;
    color: #867874;
}

.s1Campaign__section .s1Campaign__productPrice {
    font-family: var(--main-font-family);
    font-weight: 300;
    /* font-size: 4rem; */
    font-size: clamp(3.125rem, 5vw, 4rem);
}

.s1Campaign__section .s1Campaign__productPrice s {
    font-family: var(--main-font-family);
    font-weight: 300;
    /* font-size: 1.875rem; */
    font-size: clamp(1.25rem, 2vw, 1.875rem);
    color: #635A52;
}

.s1Campaign__section .s1Campaign__productPrice .s1Campaign__productCurrency {
    /* font-size: 2.5rem; */
    font-size: clamp(1.875rem, 3vw, 2.5rem);
}

.s1Campaign__section .s1Campaign__startWithOne {
    margin-top: 2.5rem;
    /* font-size: 1.5rem; */
    font-size: clamp(0.875rem, 2vw, 1.5rem);
    line-height: normal;
}

.s1Campaign__section .s1Campaign__startWithOne p {
    margin-bottom: 0;
}
.s1Campaign__section .s1Campaign__startWithOne a {
    cursor: pointer;
}

/* ==========================================================================
   SECTION 2
   ========================================================================== */
.s2Campaign__section {
    padding: 3.75rem 7.5rem 7.5rem;
    background: url("https://resource.bwlgroup.com/drs-secret/campaign/vogue/images/drs-secret-biosc-ampoule-booster-essence-desktop.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-color: #fff; */
    position: relative;
    color: var(--main-text-color);
}

.s2Campaign__section h2 {
    /* font-size: 2.8rem; */
    font-size: clamp(1.45rem, 4vw, 2.8rem);
}

.s2Campaign__section h2 i {
    display: block;
    /* font-size: 3.4375rem; */
    font-size: clamp(1.875rem, 4vw, 3.4375rem);
}

.s2Campaign__section .row {
    margin-top: 5rem;
}

.s2Campaign__section h3 {
    /* font-size: 2.8125rem; */
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 300;
}

.s2Campaign__section h6 {
    font-family: var(--main-font-family);
    /* font-size: 3.25rem; */
    font-size: clamp(2rem, 4vw, 3.25rem);
    /* font-weight: 300; */
    margin-bottom: 0;
    text-align: left;
}

.s2Campaign__section p {
    /* font-size: 1.4rem; */
    font-size: clamp(0.875rem, 2vw, 1.4rem);
    text-align: left;
}

.s2Campaign__section .s2Campaign__clinicalReport > div:nth-child(1) {
    width: 10%;
}

.s2Campaign__section .s2Campaign__clinicalReport > div:nth-child(2) {
    width: 40%;
}

.s2Campaign__section .s2Campaign__clinicalReport > div:nth-child(3) {
    width: 35%;
}

.s2Campaign__section .s2Campaign__clinicalReport div.up img {
    animation:trend-rise 2.2s cubic-bezier(.33,0,.15,1) infinite;
}

.s2Campaign__section .s2Campaign__clinicalReport div.down img {
    animation:trend-fall 2.2s cubic-bezier(.5,0,.2,1) infinite;
}

.s2Campaign__section .footnotes-statement {
    font-size: clamp(0.625rem, 2vw, 1rem);
    text-align: left;
}

.s2Campaign__section .s2Campaign__clinicalReportValue{
  font-variant-numeric:tabular-nums;   /* stops the digits jittering mid-count */
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.s2Campaign__section .s2Campaign__clinicalReportValue.is-counting{
  /* filter:blur(var(--countup-blur, 0)); */
  transform:scale(1.04);
}
.s2Campaign__section .s2Campaign__clinicalReportValue.is-counted{ transform:scale(1) }

@keyframes trend-rise{
    0%   { transform:translateY(60%)  scale(.9); opacity:0 }
    22%  { transform:translateY(0)    scale(1);  opacity:1 }
    62%  { transform:translateY(0)    scale(1);  opacity:1 }
    100% { transform:translateY(-70%) scale(1.05); opacity:0 }
}

@keyframes trend-fall{
    0%   { transform:translateY(-70%) scale(1.05); opacity:0 }
    22%  { transform:translateY(0)    scale(1);  opacity:1 }
    62%  { transform:translateY(0)    scale(1);  opacity:1 }
    100% { transform:translateY(60%)  scale(.9); opacity:0 }
}

/* ==========================================================================
   SECTION 3
   ========================================================================== */
.s3Campaign__section {
    padding: 3.75rem 7.5rem;
    background: url("https://resource.bwlgroup.com/drs-secret/campaign/vogue/images/drs-secret-biosc-ampoule-desktop-mobile.jpg");
    background-repeat: no-repeat;
    background-size: 175%;
    background-position: 50% 15%;
    /* background-color: #fff; */
    position: relative;
    color: var(--main-text-color);
}

.s3Campaign__section h2 {
    /* font-size: 2.8rem; */
    font-size: clamp(1.875rem, 4vw, 3.45rem);
}

.s3Campaign__section h3 {
    /* font-size: 2.8rem; */
    font-size: clamp(1.375rem, 3vw, 2.05rem);
}

.s3Campaign__section p {
    /* font-size: 2.8rem; */
    font-size: clamp(1rem, 2vw, 1.5rem);
}

/* ==========================================================================
   SECTION 4
   ========================================================================== */
.s4Campaign__section {
    padding: 9.375rem;
    background: url(../images/drs-secret-booster-essence-desktop-mobile.jpg);
    background-repeat: no-repeat;
    background-size: 135%;
    background-position: 30% 45%;
    /* background-color: #fff; */
    position: relative;
    color: var(--secondary-text-color);
}

.s4Campaign__section h2:nth-child(1) {
    font-size: clamp(1.4375rem, 4vw, 2.8125rem);
    margin-bottom: 0;
}

.s4Campaign__section h2:nth-child(2) {
    font-size: clamp(1.875rem, 4vw, 3.4375rem);
}

.s4Campaign__section h3 {
    font-size: clamp(1.125rem, 4vw, 1.6875rem);
    font-family: var(--secondary-font-family);
    margin-top: 2.5rem;
}

.s4Campaign__section h3 span {
    display: block;
    font-size: clamp(1.375rem, 4vw, 2.0625rem);
    font-family: var(--main-font-family);
}

.s4Campaign__section p {
    font-size: clamp(1.125rem, 4vw, 1.6875rem);
    line-height: normal;
    margin-top: 1.25rem;
}

@media (max-width: 1200px) {
    .s1Campaign__section {
        padding: 3.75rem 1.5rem;
    }

    .s2Campaign__section {
        padding: 3.75rem 1.5rem;
    }

    .s3Campaign__section {
        padding: 3.75rem 1.5rem;;
    }

    .s4Campaign__section {
        padding: 4.375rem;
    }
}


@media (max-width: 767px) {
    button.btn-grey {
        --bs-btn-padding-x: 1rem;
        --bs-btn-padding-y: 0.5rem;
    }

    .s4Campaign__section button.btn-grey {
        --bs-btn-padding-x: 0.75rem;
        --bs-btn-padding-y: 0.5rem;
    }

    .s1Campaign__section {
        padding: 3.125rem 1rem 1.875rem;
        background: url("https://resource.bwlgroup.com/drs-secret/campaign/vogue/images/clipped-biosc-ampoule-booster-essence-mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .s1Campaign__section .row {
        margin-top: 55rem;
    }

    .s1Campaign__section h3 {
        line-height: 30px;
    }

    .s1Campaign__section .s1Campaign__startWithOne {
        margin-top: 1.5rem;
    }

    .s2Campaign__section {
        padding: 1.875rem 0.75rem 1.875rem;
        background: url("https://resource.bwlgroup.com/drs-secret/campaign/vogue/images/drs-secret-biosc-ampoule-booster-essence-mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;    
    }

    .s2Campaign__section .row {
        margin-top: 35rem;
    }

    .s2Campaign__section h6,
    .s2Campaign__section p,
    .s2Campaign__section .footnotes-statement {
        color: var(--secondary-text-color);
    }

    .s2Campaign__section .s2Campaign__clinicalReport img {
        width: 60%;
    }

    .s3Campaign__section {
        padding: 1.875rem 0.75rem;
        background-size: cover;
        background-position: 30% center;
    }

    .s3Campaign__section h3 {
        margin-top: 30rem!important;
    }

    .s3Campaign__section .s3Campaign__mobileFeat {
        width: 100%;
    }

    .s3Campaign__section .s3Campaign__mobileFeat > div {
        width: 50%;
        margin: auto;
    }

    .s4Campaign__section {
        padding: 1.875rem 0.75rem;
        background-size: 200%;
        background-position: 75% 60%;
    }

    .s4Campaign__section h3 {
        margin-top: 30rem!important;
    }
}

@media (max-width: 576px) {
    button.btn-grey {
        --bs-btn-padding-x: 1rem;
        --bs-btn-padding-y: 0.5rem;
    }

    .s4Campaign__section button.btn-grey {
        --bs-btn-padding-x: 0.75rem;
        --bs-btn-padding-y: 0.5rem;
    }

    .s1Campaign__section {
        padding: 3.125rem 1rem 1.875rem;
        background: url("https://resource.bwlgroup.com/drs-secret/campaign/vogue/images/clipped-biosc-ampoule-booster-essence-mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .s1Campaign__section .row {
        margin-top: 40rem;
    }

    .s1Campaign__section h3 {
        line-height: 30px;
    }

    .s1Campaign__section .s1Campaign__startWithOne {
        margin-top: 1.5rem;
    }

    .s2Campaign__section {
        padding: 1.875rem 0.75rem 1.875rem;
        background: url("https://resource.bwlgroup.com/drs-secret/campaign/vogue/images/drs-secret-biosc-ampoule-booster-essence-mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;    
    }

    .s2Campaign__section .row {
        margin-top: 27rem;
    }

    .s2Campaign__section h6,
    .s2Campaign__section p,
    .s2Campaign__section .footnotes-statement {
        color: var(--secondary-text-color);
    }

    .s2Campaign__section .s2Campaign__clinicalReport img {
        width: 60%;
    }

    .s3Campaign__section {
        padding: 1.875rem 0.75rem;
        background-size: cover;
        background-position: 30% center;
    }

    .s3Campaign__section h3 {
        margin-top: 30rem!important;
    }

    .s3Campaign__section .s3Campaign__mobileFeat {
        width: 100%;
    }

    .s3Campaign__section .s3Campaign__mobileFeat > div {
        width: 50%;
        margin: auto;
    }

    .s4Campaign__section {
        padding: 1.875rem 0.75rem;
        background-size: 300%;
        background-position: 70% 60%;
    }

    .s4Campaign__section h3 {
        margin-top: 30rem!important;
    }
}

@media (min-width: 2000px) {
    .s3Campaign__section {
        background-size: cover;
        background-position: 50% 15%;
    }

    .s4Campaign__section {
        background-size: cover;
        background-position: center;
    }
}