/** GLOBAL SELECTORS **/

body {margin:0; padding:0; font:normal 18px; font-family: 'Mulish', sans-serif; color:#000; line-height:normal; position:relative;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend{margin:0; padding:0; border:0; outline:0; font-size:100%; background:transparent; resize:none}

* a{ color: #000; text-decoration:none !important; transition: all .5s linear;}

* a:hover{ color:#000; text-decoration:none; transition: all .5s linear;} 

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

a:where(:not(.wp-element-button)):focus{text-decoration: inherit;}

* { margin:0; padding:0; box-sizing: border-box;}

.reset { list-style-type:none; padding:0; margin:0;}

.clear {clear:both; padding:0; margin:0; overflow:hidden; height:0}

br{ display: none;}

.container{ width: min(1280px, 96%); margin: 0 auto;}



/* mulish-regular - latin */

@font-face {

font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

font-family: 'Mulish';

font-style: normal;

font-weight: 400;

src: url('./fonts/mulish/mulish-v13-latin-regular.eot'); /* IE9 Compat Modes */

src: url('./fonts/mulish/mulish-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

        url('./fonts/mulish/mulish-v13-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */

        url('./fonts/mulish/mulish-v13-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */

        url('./fonts/mulish/mulish-v13-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */

        url('./fonts/mulish/mulish-v13-latin-regular.svg#Mulish') format('svg'); /* Legacy iOS */

}

/* mulish-500 - latin */

@font-face {

font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

font-family: 'Mulish';

font-style: normal;

font-weight: 500;

src: url('./fonts/mulish/mulish-v13-latin-500.eot'); /* IE9 Compat Modes */

src: url('./fonts/mulish/mulish-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

        url('./fonts/mulish/mulish-v13-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */

        url('./fonts/mulish/mulish-v13-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */

        url('./fonts/mulish/mulish-v13-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */

        url('./fonts/mulish/mulish-v13-latin-500.svg#Mulish') format('svg'); /* Legacy iOS */

}

/* mulish-600 - latin */

@font-face {

font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

font-family: 'Mulish';

font-style: normal;

font-weight: 600;

src: url('./fonts/mulish/mulish-v13-latin-600.eot'); /* IE9 Compat Modes */

src: url('./fonts/mulish/mulish-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

        url('./fonts/mulish/mulish-v13-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */

        url('./fonts/mulish/mulish-v13-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */

        url('./fonts/mulish/mulish-v13-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */

        url('./fonts/mulish/mulish-v13-latin-600.svg#Mulish') format('svg'); /* Legacy iOS */

}

/* mulish-700 - latin */

@font-face {

font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

font-family: 'Mulish';

font-style: normal;

font-weight: 700;

src: url('./fonts/mulish/mulish-v13-latin-700.eot'); /* IE9 Compat Modes */

src: url('./fonts/mulish/mulish-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

        url('./fonts/mulish/mulish-v13-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */

        url('./fonts/mulish/mulish-v13-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */

        url('./fonts/mulish/mulish-v13-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */

        url('./fonts/mulish/mulish-v13-latin-700.svg#Mulish') format('svg'); /* Legacy iOS */

}



.headersec{ background: url(./images/bannerimg.jpg) no-repeat top center; background-size: cover;}

.header{ padding: 15px 0;}

.header .logo{ width: 180px;}



.bannersec{ padding: 150px 0 250px;}

.bannersec .bannerimg{ display: none;}

.bannersec h1{ font-size: 44px; font-weight: 600; width: 70%; color: #fff;}

.bannersec h1 span{ display: block; font-size: 34px; margin-bottom: 7px;}



h2.title{ font-size: 40px; font-weight: 700; letter-spacing: .3px; padding-bottom: 10px; position: relative;}

h2.title::before{ content: ""; position: absolute; bottom: 0; left: 0; width: 80px; height: 3px; background: #da2f98;}



.benefitsec .container{ display: flex; justify-content: center; align-items: center; gap: 60px;}

.benefitsec :is(.leftsec, .rightsec){ width: min(450px, 50%); padding: 50px 0;}

.benefitsec .leftsec .productbox{ width: fit-content; margin: 0px auto;}

.benefitsec .leftsec .productbox model-viewer{ width: 450px; height: auto; aspect-ratio: 1/1;}

.benefitsec .leftsec img{ filter: drop-shadow(0px 0px 10px rgba(218, 47, 152, .5));}

.benefitsec .rightsec ul li{ margin-top: 30px; display: flex; gap: 20px; align-items: center;}

.benefitsec .rightsec ul li p{ font-size: 20px; font-weight: 500; line-height: 30px; color: #da2f98; text-transform: capitalize;}

.benefitsec .rightsec ul li p span{ display: block;}



.ingredientssec{ padding: 50px 0; background: rgba(218, 47, 152, .10);}

.ingredientssec .title{ text-align: center;}

.ingredientssec .title span{ display: block; font-size: 24px; font-weight: 400; margin: 5px 0;}

.ingredientssec .title::before{ left: 50%; transform: translateX(-50%);}

.ingredientssec .innersec{ width: min(1080px, 98%); margin: 40px auto 0;}

.ingredientssec .innersec .subtitle{ padding: 10px 30px; width: fit-content; margin: 0 auto; border: 1px solid #da2f98; border-radius: 30px; background: #fff; margin-bottom: 25px; font-size: 18px;}

.ingredientssec .innersec ul li{ font-size: 18px; font-weight: 400; display: flex; justify-content: space-between; gap: 20px; flex-flow: row wrap; line-height: 30px;}

.ingredientssec .innersec ul li span{ width: min(695px, 67%);}

.ingredientssec .innersec ul li span.liheading{ font-weight: 600; color: #da2f98; width: min(360px, 30%);}

.ingredientssec .innersec ul li+li{ margin-top: 10px;}

.ingredientssec .innersec ul li ul.sublist li{ display: block; margin-top: 15px; padding-left: 20px; position: relative;}

.ingredientssec .innersec ul li ul.sublist li::before{ content: ""; position: absolute; top: 10px; left: 0px; width: 7px; height: auto; aspect-ratio: 1/1; background: #da2f98; border-radius: 50%;}



.copyrightsec{ padding: 12px 0; border-top: 1px solid #da2f98;}

.copyrightsec p{ font-size: 16px; font-weight: 400; text-align: center;}



/* Responsive */

@media only screen and ( max-width: 1290px ) {
    
}

@media only screen and ( max-width: 1200px ) {
    .bannersec {background-position: 60%;}
}

@media only screen and ( max-width: 1151px ) {

    .header .logo{ width: 150px;}

    .bannersec h1{ font-size: 40px;}

    .bannersec h1 span{ font-size: 30px;}

    h2.title{ font-size: 36px;}

    .benefitsec .rightsec ul li p{ font-size: 18px; line-height: 28px;}

    .benefitsec .rightsec ul li .imgbox{ width: 40px;}

}

@media only screen and ( max-width: 1101px ) {

}

@media only screen and ( max-width: 1024px ) {
    .bannersec {padding: 120px 0 200px;}
    .bannersec h1 span{ font-size: 28px;}

}

@media only screen and ( max-width: 980px ) {

}

@media only screen and ( max-width: 801px ) {

    .header .logo{ width: 130px;}

    .headersec{ background-position: 80%;}

    .bannersec{ padding: 50px 0 80px;}

    .bannersec h1{ font-size: 36px;}

    .bannersec h1 span{ width: 350px; font-size: 26px;}

    h2.title{ font-size: 34px;}

    .benefitsec .container{ gap: 40px;}

    .benefitsec .rightsec ul li{ margin-top: 20px;}

    .benefitsec .rightsec ul li p{ font-size: 16px; line-height: 27px;}

    .benefitsec :is(.leftsec, .rightsec){ padding: 30px 0;}

    .benefitsec .leftsec .productbox model-viewer{ width: 300px;}

    .ingredientssec .title span{ font-size: 22px;}

    .ingredientssec .innersec .subtitle{ font-size: 16px;}

    .ingredientssec .innersec ul li{ font-size: 16px;}

    .ingredientssec .innersec .subtitle{ margin-bottom: 20px;}

    .ingredientssec .innersec{ margin: 30px auto 0;}

    .copyrightsec p{ font-size: 15px;}

}

@media only screen and ( max-width: 768px ) {

}

@media only screen and ( max-width: 736px ) {

    .ingredientssec .innersec ul li span{ width: min(695px, 66%);}

}

@media only screen and ( max-width: 668px ) {

}

@media only screen and ( max-width: 640px ) {

    .headersec{ background: unset; background-position: unset; overflow: hidden;}

    .header .logo{ margin: 0 auto;}

    .bannersec{padding-top: 440px; position: relative;}
    .bannersec:before {content: ""; position: absolute; background: url(./images/mobile-bannerimg.jpg) no-repeat; left: 0; right: 0; top: 0; height: 440px; bottom: 0; background-size: cover; background-position: right; font-size: 0;}

    .bannersec h1{ padding: 20px 0; text-align: center; width: 100%; color: #000; font-size: 32px; position: absolute; bottom: 0; z-index: 1; font-weight: 700;}

    .bannersec h1 span{ width: 100%; font-size: 22px; font-weight: 600;}

    .bannersec h1::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 300%; background: #ffb3e2; z-index: -1;}

    .benefitsec .container{ flex-flow: column wrap; gap: 0;}

    .benefitsec :is(.leftsec, .rightsec){ width: 90%;}

    .benefitsec .leftsec .productbox model-viewer{ width: 300px;}

    .benefitsec .rightsec ul li p span{ display: initial;}

    .ingredientssec .innersec ul li{ flex-flow: column wrap; gap: 0; padding-left: 20px; position: relative;}

    .ingredientssec .innersec ul li:before{ content: ""; position: absolute; top: 10px; left: 0px; width: 7px; height: auto; aspect-ratio: 1/1; background: #da2f98; border-radius: 50%;}

    .ingredientssec .innersec ul li :is(span.liheading, span){ width: 100%;}


}

@media only screen and ( max-width: 600px ) {

}

@media only screen and ( max-width: 568px ) {

}

@media only screen and ( max-width: 480px ) {

    .container{ width: 92%;}

    .bannersec{ background: unset; padding: 0;}
    .bannersec:before {content: unset;}

    .bannersec h1{ padding: 40px 0; position: relative; bottom: initial;}

    .bannersec h1 span{ font-size: 20px;}

    .benefitsec .rightsec ul li p{ width: calc(100% - 40px);}

    .benefitsec .rightsec{ width: 80%;}

}

@media only screen and ( max-width: 414px ) {

    .benefitsec .rightsec{ width: 90%;}

    .bannersec h1{ font-size: 28px;}

    h2.title{ font-size: 26px;}

    .ingredientssec .title span{ font-size: 20px;}

    .benefitsec .leftsec .productbox model-viewer{ width: 260px;}

    .ingredientssec .innersec ul li{ font-size: 16px; line-height: 27px;}

    .ingredientssec{ padding: 40px 0;}

}

@media only screen and ( max-width: 384px ) {

}

@media only screen and ( max-width: 375px ) {

}

@media only screen and ( max-width: 360px ) {

}

@media only screen and ( max-width: 320px ) {

}