.button-default { display: inline-block; color: #fff; background: #E60F76; cursor: pointer; transition: .4s; border: 0; border-radius: 10px; font: 700 clamp( 12pt, 2.5vw, 13.5pt ) 'Avenir', 'Lato', 'Arial', sans-serif; text-transform: uppercase; padding: 20px 30px; text-decoration: none; }
.button-default:hover { background-color: #932B86; }
.container { width: 1240px; max-width: 100%; margin: auto; }
.icon-flower svg { display: block; position: relative; width: 1em; aspect-ratio: 1; font-size: 45px; }
#main h2 { font: 700 clamp( 28pt, 3vw, 37pt )/1.1 'Avenir', 'Lato', 'Arial', sans-serif; color: #693B8F; margin: 0 0 26px; }
#main p { font: 12pt/1.5 'Avenir', 'Lato', 'Arial', sans-serif; color: #5c5c5c; }
@font-face { font-family: 'puredays'; src: url( '../../fonts/puredays/puredays.eot?67660115' ); src: url( '../../fonts/puredays/puredays.eot?67660115#iefix' ) format( 'embedded-opentype' ), url( '../../fonts/puredays/puredays.woff2?67660115' ) format( 'woff2' ), url( '../../fonts/puredays/puredays.woff?67660115' ) format( 'woff' ), url( '../../fonts/puredays/puredays.ttf?67660115' ) format( 'truetype' ), url( '../../fonts/puredays/puredays.svg?67660115#puredays' ) format( 'svg' ); font-weight: normal; font-style: normal; }
.icon-flower { display: block; background: url( '../../images/pages/homepage/icons/flower.webp' ) no-repeat center/contain; width: 45px; aspect-ratio: 1; }

/* Hero */
#hero { background: #f5f5f5 url( '../../images/pages/homepage/bg/a-girls-first-choice.webp' ) no-repeat top left/cover; padding: 180px 45px 60px 85px; }
#hero section { width: 360px; max-width: 100%; padding: 10px; }
h1 { color: #693B8F; font: 700 clamp( 28pt, 7vw, 48pt )/1.1 'Avenir', 'Lato', 'Arial', sans-serif; }
h1 span { display: block; font: inherit; font-weight: 400; }
#hero p { color: #5c5c5c; margin: 0 0 34px; }

/* Our Story */
#our-story { padding: 90px 0px; }
#our-story section { display: flex; align-items: center; max-width: 95%; margin: auto; }
#our-story figure { flex: none; width: 60%; font-size: 0; padding: 10px; }
#our-story div > div { background: #fff; margin: 0px 0px 0px -100px; padding: 50px; border-radius: 10px; box-shadow: 0px 10px 50px 50px rgba(0, 0, 0, 0.08); }
#our-story h2 { color: #693B8F; margin: 10px 0 15px; }
#our-story p { color: #5c5c5c; margin: 0 0 30px; }
#our-story p:last-of-type { margin: 0; }

/* Products */
#products-wrap { padding: 0 0 90px; max-width: 95%; }
#products-wrap h2 { text-align: center; }
#products-wrap p { color: #5c5c5c; text-align: center; width: 880px; max-width: 100%; margin: auto; }
#products h2 { display: none; }
#products section { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 20px; margin: 60px 0 0; }
#products figure { position: relative; background: #fff url( '../../images/pages/homepage/icons/products-bg-1.webp' ) no-repeat top left/contain; border-radius: 10px; padding: 60px 24px 24px; text-align: center; box-shadow: 5px 5px 15px 0px #0000001a; overflow: hidden; }
#products figure div { overflow-y: auto; visibility: hidden; opacity: 0; background: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 50px 24px 24px; transition: all .4s ease-in-out; }
#products figcaption, #products h3 { font: 500 clamp( 16pt, 3vw, 21pt ) 'Avenir', 'Lato', 'Arial', sans-serif; color: #693B8F; margin: 0 0 10px; }
#products h3 { margin: 0 0 20px; }
#products figure small { display: block; font: 10pt 'Avenir', 'Lato', 'Arial', sans-serif; color: #5c5c5c; }
#products figcaption small, #products h3 small { color: inherit; font-weight: inherit; font-size: clamp( 12pt, 2.5vw, 15pt ); margin: 5px 0 0; }
#products h3 small { display: block; margin: 5px 0 10px; }
#products p { font-size: 10.5pt; line-height: 1.6; }
#products small span { display: inline-block; color: #5c5c5c; padding: 0 5px 0 0; }
#products small span:first-of-type:after { content: ' '; display: inline-block; width: 1px; height: 13px; background: #5c5c5c; margin: 0 0 0 5px; vertical-align: middle; }
#products small span:first-of-type:before, #products small span:last-of-type:before { content: '\e805'; display: inline-block; font: 11pt 'puredays'; color: #E60F76; }
#products small span:last-of-type:before { content: '\e802'; }
#products figure > span { display: flex; align-items: center; gap: 3px; position: absolute; top: 10px; left: 10px; background: #fff; border-radius: 10px; padding: 5px; z-index: 1; transition: all .4s ease-in-out; }
#products figure > span i:before { content: '\e804'; font: 11pt 'puredays'; color: #E60F76; }
#products figure > span i.active:before { content: '\e806'; }
#products figure:nth-of-type( 2 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-2.webp' ); }
#products figure:nth-of-type( 3 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-2.webp' ); }
#products figure:nth-of-type( 4 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-3.webp' ); }
#products figure:nth-of-type( 5 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-4.webp' ); }
#products figure:nth-of-type( 6 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-3.webp' ); }
#products figure:nth-of-type( 7 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-4.webp' ); }
#products figure:nth-of-type( 8 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-3.webp' ); }
#products figure:nth-of-type( 9 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-3.webp' ); }
#products figure:nth-of-type( 10 ) { background-image: url( '../../images/pages/homepage/icons/products-bg-4.webp' ); }
#products figure:hover div { visibility: visible; opacity: 1; }
#products figure:hover > span { background: #E60F76; }
#products figure:hover > span i:before { color: #fff; }
#products picture, #products img { display: block; margin: auto; max-height: 130px; }
#products picture { margin: 0 0 15px; }

/* Value */
#value { background: linear-gradient( 180deg, #8C4291 0%, #A94993 100% ); padding: 90px 0 150px; overflow: hidden; }
#value section { display: flex; position: relative; max-width: 95%; margin: auto; }
#value section > div:first-of-type { width: 40%; }
#value section > div:first-of-type div { margin: 0 16% 0 0; }
#value section > div:last-of-type { width: 60%; position: relative; }
#value section > div:last-of-type:before { content: ' '; display: block; position: absolute; top: -40px; left: -104px; background: url( '../../images/pages/homepage/icons/ultra-absorbent-core-1.webp' ) no-repeat center/contain; width: 151px; aspect-ratio: 1.078; }
#value section > div:last-of-type:after { content: ' '; display: block; position: absolute; top: -30px; right: -100px; background: url( '../../images/pages/homepage/icons/plume-2.webp' ) no-repeat center/contain; width: 90px; aspect-ratio: .849; }
#value div p { width: 396px; max-width: 100%; }
#value h2 { color: #fff; }
#value p { color: #fff; margin: 0 0 20px; }
#value p i { font: inherit; font-style: italic; display: block; }
#value ul { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 20px; padding: 20px 0; }
#value li { width: calc( ( 100% - 40px ) / 3 ); text-align: center; background: #fff; padding: 30px 20px; border-radius: 10px; box-shadow: 0 10px 50px 50px #00000014; box-sizing: border-box; }
#value li p { color: #5c5c5c; }
#value h3 { color:#693B8F; margin: 10px 0 20px; font: 500 clamp( 18pt, 2.5vw, 21pt ) 'Avenir', 'Lato', 'Arial', sans-serif; }
#value .icon-flower { margin: auto; }

/* Feature */
#feature { width: 1048px; max-width: 95%; margin: -120px auto 90px; overflow: hidden; padding: 20px 0 0; }
#feature section { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 20px; align-items: center; }
#feature figure { position: relative; max-width: max-content; max-width: 100%; margin: auto; }
#feature figure:before { content: ' '; display: block; position: absolute; top: -40px; right: -10px; background: url( '../../images/pages/homepage/icons/plume.webp' ) no-repeat center/contain; width: 124px; aspect-ratio: 1.180; }
#feature ul { background: linear-gradient(201deg, #E39983 0%, #E4949B 100%); padding: 40px 60px; border-radius: 20px; }
#feature li { position: relative; display: flex; align-items: center; gap: 20px; color: #fff; font: 700 clamp( 14pt, 2.5vw, 18pt )/1 'Avenir', 'Lato', 'Arial', sans-serif; margin: 0 0 20px; }
#feature li:last-of-type { margin: 0; }
#feature li:before { content: ' '; flex: none; display: block; background: url( '../../images/pages/homepage/icons/dermatologically-tested-icon.webp' ) no-repeat center/contain; width: 67px; aspect-ratio: 1; }
#feature li:nth-of-type( 2 ):before { background-image: url( '../../images/pages/homepage/icons/maxi-protect-icon.webp' ); }
#feature li:nth-of-type( 3 ):before { background-image: url( '../../images/pages/homepage/icons/day-night-icon.webp' ); }
#feature li span { font: inherit; }
#feature li small { display: block; font: inherit; font-weight: 400; font-size: 10.5pt; font-style: italic; margin: 5px 0 0; }

/* Testimonials */
#testimonials { position: relative; z-index: 0; padding: 90px 0; }
#testimonials .container { max-width: 95%; }
#testimonials:before { content: ' '; position: absolute; top: 0; left: 0; display: block; background: url( '../../images/pages/homepage/bg/testimonial.webp' ) no-repeat center/cover; width: 100%; height: 100%; opacity: .3; z-index: -1; }
#testimonials h2 { text-align: center; margin: 0 0 40px; }
#testimonials .tns-item { text-align: center; }
#testimonials p { letter-spacing: .5px; color: #5c5c5c; font-style: italic; font-weight: 400; font-size: 15.5pt; width: 800px; max-width: 100%; margin: auto; }
#testimonials figcaption { color: #932B86; font: 700 13pt 'Avenir', 'Lato', 'Arial', sans-serif; margin: 40px 0 0; }
#testimonials span { display: block; color: #5c5c5c; margin: 5px 0 0; font-size: 13.5pt; }
.tns-outer { position: relative; }
.tns-outer .tns-ovh { width: 95%; margin: 0 auto 30px; }
.tns-nav { text-align: center; }
.tns-nav > button { width: 12px; aspect-ratio: 1; border: 0; border-radius: 50%; margin: 0 6px; background: #DC5C884D; }
.tns-nav > .tns-nav-active { background-color: #E60F76; }
.tns-controls button { position: absolute; top: 32%; left: 0; transform: translateY( -50% ); border: 0; background: 0; }
.tns-controls button[data-controls="next"] { left: auto; right: 0; }
.tns-controls button:before, .tns-controls button[data-controls="next"]:before { content: '\276E'; display: block; color: #E60F76; font-size: 22pt; }
.tns-controls button[data-controls="next"]:before { content: '\276F'; }

/* Faqs */
#faqs { padding: 90px 0; width: 95%; margin: auto; }
#faqs .container { position: relative; }
#faqs .container:before { content: ' '; display: block; position: absolute; top: -110px; right: 0; background: url( '../../images/pages/homepage/icons/birds.webp' ) no-repeat center/contain; width: 223px; aspect-ratio: 2.654; }
#faqs section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: flex-start; }
#faqs .faq-col { display: flex; flex-direction: column; gap: 20px; }
#faqs .faq-col > div div { display: none; padding: 34px; background: #f4f4f473; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#faqs h2 { margin: 0 0 60px; transition: all .4s; }
#faqs section h2 { margin: 0; font-size: 13.5pt; color: #932B86; background: #f4f4f473; cursor: pointer; border-radius: 10px; padding: 34px; width: 100%; box-sizing: border-box; }
#faqs .faq-col > div.open h2 { background: #932B86; color: #fff; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
#faqs p:not( :last-of-type ) { margin: 0 0 15px; }
#faqs ol { margin: 15px 0 0; }
#faqs a { text-decoration: none; color: #693B8F; }
#faqs a:hover { color: #932B86; }
#faqs li { font: 12pt/1.5 'Avenir', 'Lato', 'Arial', sans-serif; color: #5c5c5c; margin: 0 0 0 24px; }
.faq-col:last-of-type:before { content: ' '; display: block; background: url( '../../images/pages/homepage/icons/about-puredays-comfort-protection.webp' ) no-repeat center/contain; border-radius: 10px; aspect-ratio: 1.9666; }

/* Social */
#social { padding: 50px 0 90px; }
#social section { text-align: center; }
#social h2 { margin: 0 0 40px; }
#social p, #social li { color: #5c5c5c; font: 12pt/1.5 'Avenir', 'Lato', 'Arial', sans-serif; margin: 0 0 20px; }
#social ul { margin: 0 0 20px; }
#social li { margin: 0; }
#social em { display: block; }
#social a { display: inline-block; color: #693B8F; text-decoration: none; transition: .4s; font: 400 clamp( 13pt, 2.5vw, 15pt )/1.5 'Avenir', 'Lato', 'Arial', sans-serif; }
#social a:hover { color: #932B86; }

/* Promotion */
#promotion { background: linear-gradient(174deg, #DC5C8840 0%, #E59F6D40 100%); padding: 40px 0; }
#promotion section { position: relative; text-align: center; z-index: 0; max-width: 95%; margin: auto; }
#promotion section:before { content: ' '; display: block; position: absolute; bottom: 0; left: 0; background: url( '../../images/pages/homepage/icons/plume.webp' ) no-repeat center/contain; width: 124px; aspect-ratio: 1.180; z-index: -1; }
#promotion section:after { content: ' '; display: block; position: absolute; top: 0; right: 0; background: url( '../../images/pages/homepage/icons/plume-2.webp' ) no-repeat center/contain; width: 90px; aspect-ratio: .849; z-index: -1; }
#promotion h2 { margin: 0 0 46px; }
/* #promotion a { background: #E60F76; font: 400 clamp( 12pt, 2.5vw, 13.5pt ) 'Avenir', 'Lato', 'Arial', sans-serif; color: #fff; text-decoration: none; text-transform: uppercase; border-radius: 10px; padding: 20px 30px; display: inline-block; transition: .4s; }
#promotion a:hover { background-color: #932B86; } */

/* Community Work */
#community-work { padding: 90px 0; width: 1220px; max-width: 95%; }
#community-work section { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 30px; }
#community-work div { padding: 10px; }
#community-work h2 { margin: 0 0 60px; text-align: center; }
#community-work img { border-radius: 10px; margin: 0 0 20px; }
#community-work h3 { font: 400 clamp( 15pt, 3.5vw, 18pt )/1.2 'Avenir', 'Lato', 'Arial', sans-serif; margin: 0 0 20px; color: #693B8F; }

@media (max-width: 1024px) {
    #value section { flex-direction: column; gap: 92px; }
    #value section > div:nth-of-type( n ) { width: 100%; }
    #value section > div:first-of-type div { margin: 0; }
    #value div p { width: 100%; }
    #value section > div:last-of-type:before { top: -56px; left: -57px; }
    #value section > div:last-of-type:after { top: -82px; right: 0; }
}

@media (max-width: 980px) {
    #community-work section { gap: 20px; }
}

@media (max-width: 850px) {
    #products section { grid-template-columns: repeat( 2, 1fr ); }
    #products figure { grid-column: span 1 !important; }
}

@media (max-width: 800px) {
    #testimonials figcaption { margin: 25px 0 0; }

    #testimonials, #faqs { padding: 50px 0; }
    #faqs .container > h2 { margin: 0 0 30px; }
    #faqs section { grid-template-columns: 1fr; }
    .faq-col.right:before { display: none; }

    #community-work h2 { margin: 0 0 30px; }
    #community-work section { grid-template-columns: repeat( 2, 1fr ); }
}

@media (max-width: 767px) {
    #hero { padding: 150px 20px 20px; }

    #value section > div:last-of-type:before { top: -65px; left: -45px; }

    #our-story { padding: 50px 0; }
    #our-story section { flex-direction: column; gap: 20px; }
    #our-story div > div { margin: auto; max-width: 95%; box-sizing: border-box; }
    #our-story figure { width: 95%; margin: auto; }

    #feature section { grid-template-columns: auto; }
}

@media (max-width: 620px) {
    #hero { padding: 100px 20px 20px; }

    #our-story div > div { padding: 30px; }

    #value { padding: 50px 0 150px; }
    #value li { width: 100%; }

    #feature ul { padding: 40px 20px; }
}

@media (max-width: 550px) {
    #products section { grid-template-columns: 1fr; }
    #products figure { grid-column: span 1 !important; }

    #community-work { padding: 50px 0; }
    #community-work section { grid-template-columns: auto; width: 350px; max-width: 100%; margin: auto; }
}

@media (max-width: 480px) {
    #feature li { flex-direction: column; align-items: center; gap: 15px; text-align: center; }
    #feature li span { text-align: center; }
}