* { box-sizing: border-box; }
img { max-width: 100%; width: auto; height: auto; }
html, body { margin: 0; padding: 0; min-width: 340px; }
html { font-size: 10px; }
body { font-size: 2rem; line-height: 1.6; font-family: "Montserrat", sans-serif; color: #000; overflow-x: hidden; }

h1 { font-size: 4rem; line-height: 1.2; font-weight: 400; }
h2 { font-size: 3.4rem; line-height: 1.6; font-weight: 400; }
h3 { font-size: 2.4rem; line-height: 1.6; font-weight: 400; }

li:not(:last-child) { margin-bottom: 20px; }

.section { padding: 30px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0.05px 30px; position: relative; z-index: 1; }

.hd-2 { max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-3, .hd-3-b { max-width: 900px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-4 { max-width: 550px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-5 { max-width: 690px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-6 { max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-7 { max-width: 750px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-8 { max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-9 { max-width: 850px; width: 100%; margin-left: auto; margin-right: auto; }
.hd-10 { max-width: 900px; width: 100%; margin-left: auto; margin-right: auto; }

.top-banner { text-align: center; padding-left: 15px; padding-right: 15px; }
.top-banner h1 { font-size: 3.6rem; text-align: center; color: #5a6198; font-weight: 700; margin: 0; }
.top-banner h2 { font-size: 2.6rem; text-align: center; color: #e0832c; margin: 0; font-weight: 600; }
.top-banner p { margin: 5px 0; }
.top-banner h1, .top-banner h2, .top-banner p { line-height: 1.2; }

.cta-bogtf { cursor: pointer; }
.dpal_v1_banner1 { max-width: 800px; margin: 0 auto; }
.dpal_v1_banner2 { max-width: 800px; margin: 0 auto; }

.top-images { background: url(./../images/hexagons.svg) left top 10px no-repeat; background-size: 540px auto; position: absolute; max-width: 1110px; width: 100%; height: 100%; top: 0; left: 50%; transform: translateX(-50%); padding: 0 30px; z-index: 0; }
.top-images > img { opacity: 0; z-index: 1; position: absolute; transition: opacity linear 0.7s; }

.top-img-1 { top: 0; right: -27%; height: 100%; width: auto; object-fit: cover; }
.top-img-2 { bottom: 0; right: -30%; height: 100%; width: auto; object-fit: cover;}
.top-img-3 { bottom: 0; right: -140px; height: 113%; width: auto; object-fit: cover; }
.top-img-4 { bottom: 0; right: 0; height: 100%; width: auto; object-fit: cover; }

.top-images > img.active { opacity: 0.9;  }

.blk-0 { background: transparent; box-shadow: inset 0px -3px 15px -15px #000; position: relative; }
.blk-0:before { background: url(./../images/cloud-bg.webp); background-size: cover; background-position: center; content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.15; background-attachment: fixed; }

.blk-1 { background: #eff8ff; position: relative; overflow: hidden;  }
.blk-1-content { max-width: 620px; width: 100%; }
.blk-1 > .container { min-height: 500px; position: relative; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; }
.blk-1:before { top: 0; left: 0;  background: url(./../images/bg-shape-1.webp) bottom right no-repeat; background-size: cover; position: absolute; width: 105%; height: 100%; z-index: 1; content: ""; }
.blk-1-content { position: relative; z-index: 2; }

.blk-2-flex { max-width: 530px; display: flex; gap: 20px; align-items: center; justify-content: space-around; }
.blk-2-flex > ul { margin: 0; list-style: none; padding: 0; }
.blk-2-flex > ul svg { top: -2px; left: 0; position: absolute; fill: #2caee2; width: 32px; height: 32px; }
.blk-2-flex > ul li { padding-left: 35px; position: relative; }
.blk-2-flex > ul li:not(:last-child) { margin-bottom: 30px; }

.blk-3 { padding-top: 30px; position: relative; }
.blk-3:before { background: url(./../images/bg-shape-3.svg) bottom center no-repeat; background-size: 100% 800px; z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.box-3-order { max-width: 330px; margin: 0 0 20px 20px; width: 100%; float: right; text-align: center; position: relative; z-index: 0; background: #ffffff; }
.box-3-order img { max-width: 200px; margin: 0; padding: 15px 15px 5px; z-index: 1; position: relative; }
.box-3-order button { margin: 0; border-radius: 0; text-align: left; font-size: 2rem; }
.box-3-order button { margin: 0; border-radius: 0; text-align: left; font-size: 2rem; }
.box-3-order a { margin: 0; border-radius: 0; text-align: left; font-size: 1.7rem; padding: 15px; }

.blk-4 { position: relative; }
.blk-4:before { background: url(./../images/bg-shape-3.svg) bottom center no-repeat; background-size: 100% 700px; transform: scale(-1); z-index: 0; top: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-5 { position: relative; background: #f9fafc  linear-gradient(to bottom, #f9fafc 20%, #fff); }
.blk-5:before { background: url(./../images/bg-shape-4.svg) bottom left no-repeat; background-size: 100% 400px; transform: scale(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-5-b { position: relative; background: #f5fbff; }
.blk-5-b:before { background: url(./../images/bg-shape-4.svg) bottom left no-repeat; background-size: 100% 250px; z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-5-flex { display: flex; gap: 20px; }
.blk-5-flex > div:last-child { flex-shrink: 0; width: 300px; }

.blk-6 { padding-bottom: 30px; position: relative; background: #fff; }

.blk-7 { background: linear-gradient(to bottom, #fff 10%, #f5fbff 10% 90%, #f9fafc 90%); }

.blk-9 { padding-top: 30px; position: relative; background: #f9fafc; }

.blk-10 { position: relative; background: #fff; }
.blk-10:before { background: url(./../images/bg-shape-3.svg) bottom right no-repeat; background-size: 100% 600px; transform: scale(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }
.blk-10:after { background: url(./../images/bg-shape-3.svg) bottom left no-repeat; background-size: 100% 450px; z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-11 { padding-bottom: 30px; position: relative; background: #f9fafc; }

.blk-12 { padding-top: 30px; /* background: linear-gradient(to bottom, #fff 85%, #f9fafc 85%); */ position: relative; }
.blk-12:before { background: url(./../images/bg-shape-3.svg) bottom right no-repeat; background-size: 100% 400px; transform: scaleX(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-13 { padding-bottom: 30px; background: #f9fafc; }

.blk-14 { display: flex; flex-direction: column; gap: 10px; padding: 15px 0; box-shadow: 0px 0px 15px -5px #000; position: relative; z-index: 1; }
.blk-14-bg:before { z-index: 0 ; opacity: 0.2; content: ""; background: url(./../images/stone-bg.webp) bottom center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.blk-14:before { z-index: 1; background: url(./../images/vine-border-gold.svg) top center repeat-x; background-size: auto 15px; content: ""; height: 15px; }
.blk-14:after { z-index: 1; background: url(./../images/vine-border-gold.svg) top center repeat-x; background-size: auto 15px; content: ""; height: 15px; transform: scaleX(-1); }

.blk-15 { padding-top: 30px; background: #f9fafc; position: relative; }
.blk-15:before { background: url(./../images/bg-shape-4.svg) bottom left no-repeat; background-size: 100% 600px; z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-17 { background: #f5fbff; }

.blk-19 { background: #f5fbff; position: relative; }
.blk-19:before { background: url(./../images/bg-shape-4.svg) bottom right no-repeat; background-size: 100% 400px; transform: scale(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }
.blk-19:after { background: url(./../images/bg-shape-4.svg) bottom left no-repeat; background-size: 100% 500px; z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-20 { padding-top: 30px; background: #fff; position: relative; }

.blk-21 { background: #f9fafc; position: relative; }
.blk-21:before { background: url(./../images/bg-shape-4.svg) bottom right no-repeat; background-size: 100% 400px; transform: scale(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-22 { padding-top: 30px; position: relative; background: #fff; }
.blk-22:before { background: #f5fbff url(./../images/bg-shape-4.svg) bottom left no-repeat; background-size: 100% 400px; transform: scale(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-23 { background: #f5fbff; }

.blk-24 { padding-top: 30px; background: #fff; }

.blk-25 { background: #f5fbff; position: relative; }
.blk-25:before { background: url(./../images/bg-shape-4.svg) bottom right no-repeat; background-size: 100% 300px; transform: scale(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-27 { padding-bottom: 30px; background: #f5fbff; position: relative; }
.blk-27:before { background: url(./../images/bg-shape-4.svg) bottom left no-repeat; background-size: 100% 300px; transform: scaleY(-1); z-index: 0; bottom: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; }

.blk-28 { padding: 30px 0; background: #fbfbfb; position: relative; }

.box-1 { padding: 25px; border: 1px solid #0cb8b6; background: rgba(255,255,255,1); }
.box-2 { border: 1px solid #0cb8b6; background: rgba(255,255,255,1); }

.box-3 { padding: 25px; position: relative; border: 1px solid #e8e8e8; background: #fff; }
.box-3-content { z-index: 1; position: relative; }
.box-3-content-2 { z-index: 1; position: relative; background: #fff; padding: 20px; }
.box-3:before { opacity: 0.3; background: url("./../images/stone-bg.webp") center no-repeat; background-size: cover; content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 0; }
.box-3-content-3 { background: rgba(255, 255, 255, 0.8); border-top: 1px solid #e8e8e8; padding: 25px; margin: 0 -25px -25px;}


.hr-1 { border: 0; border-bottom: 1px solid #0cb8b6; width: 30%; margin: 40px auto; }
.seperator { height: 15px; width: 170px; position: relative; margin-left: auto; margin-right: auto; }
.seperator:before { content: ''; height: 2px; background-color: #2caee2; width: 70px; position: absolute; left: 0; top: 6px; }
.seperator:after { content: ''; height: 2px; background-color: #2caee2; width: 70px; position: absolute; right: 0; top: 6px; }
.seperator span { position: absolute; height: 2px; width: 14px; background-color: #2caee2; left: 50%; margin-left: -7px; top: 6px; }
.seperator span:before { content: ''; height: 7px; width: 2px; position: absolute; background-color: #2caee2; top: 2px; left: 6px; }
.seperator span:after { content: ''; height: 5px; width: 2px; position: absolute; background-color: #2caee2; bottom: 3px; left: 6px; }

.separator-2 { border: 0; border-bottom: 1px solid #0cb8b6; }

.product-labels-wrap { border-bottom: 1px solid #ccc; padding: 20px 0; line-height: 1; }
.product-labels { display: flex; align-items: center; justify-content: center; margin: 0 auto; flex-wrap: wrap; width: 90%; gap: 20px 0; }
.product-labels > div { width: 200px; text-align: center; flex-shrink: 0; }
.p-label svg { width: 70px; fill: #0c6c98; margin-bottom: 10px; }

.flex-1 { background: rgba(255,255,255,0.8); border-top: 1px solid #e8e8e8; display: flex; gap: 20px; justify-content: center; padding: 25px; margin: 0 -25px -25px; }
.flex-1 > div:first-child { width: 250px; flex-shrink: 0; }

.flex-2 { display: flex; gap: 20px; justify-content: center; }
.flex-2 > div:first-child { width: 340px; flex-shrink: 0; }

.flex-3 { display: flex; gap: 20px; justify-content: center; align-items: flex-end; }
.flex-3 > div:last-child { width: 320px; margin-right: -30px; flex-shrink: 0; }

.flex-4 { padding: 25px; display: flex; gap: 20px; justify-content: center; align-items: center; justify-content: center; }
.flex-4:nth-child(even) { background: #f7f7f7; }
.flex-4 > div:first-child { width: 70px; flex-shrink: 0; }
.flex-4 svg * { stroke: #d77900; fill: transparent; }

.flex-4-icon-2 { padding: 3px; }
.flex-4-icon-2 svg { margin-right: -10px; }
.flex-4-icon-3 { padding: 3px; }
.flex-4-icon-3 svg { margin-left: -10px; }
.flex-4-icon-4 { padding: 3px; }
.flex-4-icon-4 svg { margin-left: -10px; }
.flex-4-icon-6 { padding: 3px; }

.flex-5 { display: flex; gap: 20px; align-items: center; justify-content: center;  }
.flex-5 > div:first-child { max-width: 260px; }
.flex-5 > div:first-child img { display: block; }

.flex-6 { display: flex; gap: 20px; align-items: flex-end;  }
.flex-6 > div:last-child { max-width: 360px; flex-shrink: 0; margin: -30px 0; }
.flex-6 > div:last-child img { display: block; }

.flex-7 { display: flex; gap: 20px; align-items: flex-end;  }
.flex-7 > div:last-child { max-width: 400px; flex-shrink: 0; margin: 0 0 -80px; }
.flex-7 > div:last-child img { display: block; }

.flex-8 { display: flex; gap: 20px; align-items: center;  }
.flex-8 > div:first-child { max-width: 265px; }
.flex-8 > div:last-child { max-width: 700px; }
.flex-8 > div:first-child img { display: block; }

.flex-9 { display: flex; gap: 20px; align-items: flex-end;  }
.flex-9 > div:last-child { max-width: 330px; flex-shrink: 0; margin: 0 -60px -25px 0; }
.flex-9 > div:last-child img { display: block; }

.flex-10 { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; }
.flex-10 > div:first-child { max-width: 253px; margin: -50px 0px -25px; }
.flex-10 > div:first-child img { display: block; }

.flex-11 { display: flex; gap: 20px; align-items: flex-end; }
.flex-11 > div:first-child { flex-grow: 1; }
.flex-11 > div:last-child { max-width: 310px; flex-shrink: 0; }
.flex-11 > div:last-child img { display: block; }

.flex-12 { display: flex; gap: 20px; align-items: flex-end; }
.flex-12 > div:first-child { flex-grow: 1; }
.flex-12 > div:last-child { max-width: 480px; flex-shrink: 0; margin: 0 -30px -30px 0; }
.flex-12 > div:last-child img { display: block; }

.flex-13 { display: flex; gap: 20px; align-items: flex-start; }
.flex-13 img { display: block; }
.flex-13 > div:last-child { flex-shrink: 0; width: 380px; background: #fff; box-shadow: 0px 0px 10px -6px #000; }
.flex-13 > div:last-child a { text-align: center; display: block; text-decoration: none; background: #ffeaea; padding: 5px 40px; color: #c33325; border-bottom: 1px solid #ffeaea; transition: border 0.2s ease; }
.flex-13 > div:last-child a:hover { border-bottom: 1px solid #c33325; }

.img-1 { display: block; }
.img-2 { display: block; }
.img-3 { float: right; max-width: 305px; width: 35%; margin: 0 0 10px 20px; }
.img-4 { float: left; max-width: 425px; width: 46%; margin: 0 20px 10px 0; }
.img-6 { float: right; max-width: 450px; width: 40%; margin: -100px -80px 0 20px; }
.img-7 { float: right; max-width: 320px; width: 35%; margin: 0 0 10px 20px; }
.img-8 { float: right; max-width: 330px; width: 35%; margin: 0px 0 10px 20px; }
.img-9 { float: right; max-width: 400px; width: 35%; margin: 0 0 -80px 20px; }
.img-10 { display: block; }
.img-11 { float: right; max-width: 300px; width: 35%; margin: 0px 0 -30px 20px; }
.img-12 { float: left; max-width: 350px; width: 35%; margin: -20px 20px 10px -30px; }
.img-13 { float: left; max-width: 335px; width: 35%; margin: 0 20px 0 0; }
.img-14 { max-width: 850px; width: 100%; display: block; margin: 0 auto; }
.img-15 { float: right; max-width: 350px; width: 35%; margin: 0px 0 0 20px; }
.img-16 { float: right; max-width: 240px; width: 35%; margin: 0 0 0 20px; }
.img-17 { float: left; max-width: 240px; width: 35%; margin: -10px 20px 0 0; }
.img-18 { float: right; max-width: 420px; width: 45%; margin: 0 0 0 20px; }
.img-19 { float: right; max-width: 300px; width: 45%; margin: 0 0 0 20px; }

.dot-list { list-style: none; padding: 0; margin: 0 0 0 18px; }
.dot-list li { position: relative; padding-left: 20px; }
.dot-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background-color: #0CB8B6; }
.dot-list.red-bullet li::before { background-color: #DF0000; }

.check-list { list-style: none; padding: 0; margin: 0 0 0 18px; display: flex; flex-wrap: wrap; gap: 25px; justify-content: space-around; }
.check-list svg { top: -3px; left: 0; position: absolute; fill: #007d08; width: 32px; height: 32px; }
.check-list li { padding-left: 40px; position: relative; width: 480px; margin: 0; }

.comment-wrap { display: flex; gap: 15px; font-size: 1.8rem; justify-content: center; flex-wrap: wrap; }
.comment-wrap > div { max-width: 320px; width: 32%; }
.comment { background: #fff; padding: 15px; border: 1px solid #0cb8b6; display: flex; flex-direction: column; }
.comment:nth-child(odd) { background: #f7fcff; }
.comment > span:first-child { flex-grow: 1; }
.comment > span { display: block; }
.commenter { margin-top: 20px; color: #005958; text-align: right; }

.comment-wrap-2 { display: flex; flex-direction: column; gap: 15px; font-size: 1.8rem; }
.comment-wrap-2 > div { max-width: 320px; width: 100%; flex-grow: 1; }
.comment-2 { background: #fff; padding: 15px; border: 1px solid #0cb8b6; display: flex; flex-direction: column; }
.comment-2 > span:first-child { flex-grow: 1; }
.comment-2:nth-child(odd) { background: #f7fcff; }

.ingredient { display: flex; gap: 20px; align-items: center; justify-content: center; }
.ingredient > div:first-child { width: 280px; flex-shrink: 0; text-align: center; margin-left: -200px; }

.order-button { max-width: 400px; width: 100%; line-height: 1.6; background-color: #ff6f61; color: #fff; font-size: 2.2rem; padding: 15px 30px; border: 2px solid #ff6f61; border-radius: 50px; margin-left: auto; margin-right: auto; display: block; cursor: pointer; position: relative;  font-weight: bold;  transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; text-align: center; }
.order-button:hover { background-color: #fff; color: #ff6f61; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.order-button:hover::after { width: 100%; }
.order-button:active { transform: translateY(2px); }
.order-button:focus { outline: none; }

.faq_hd { width: 100%; color: #6f76b2; text-align: center; margin: 0 auto 2.5rem; font-size: 3.5rem; font-weight: 700; }
.collapse-toggle { background: #ffffff; border: 1px solid #ebebeb; padding: 1rem 2rem 1rem 5rem; margin-top: 3rem; cursor: pointer; position: relative; color: #6f76b2; font-weight: 600; transition: background-color 0.25s linear; }
.collapse-toggle:hover { background: #f0f1ff; }
.collapse-toggle svg { width: 1em; height: 1em; fill: #6f76b2; margin: 0.35rem 1rem 0 -3rem; position: absolute; }
.collapse { height: 0; opacity: 0; overflow: hidden; }
.collapse-content { padding: 3rem; background: #fff; } 
.collapse-toggle.active { background: #6f76b2; color: #ffffff; border: 0; }
.collapse-toggle.active svg { fill: #ffffff; }

footer { background: #333; color: #fff; padding: 30px 0; font-size: 1.4rem; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.footer-info { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.footer-menu { margin: 0 0 5px; }
.footer-menu ul { display: flex; align-items: center; justify-content: space-between; list-style: none; margin: 0; padding: 0; max-width: 260px; }
.footer-menu ul li { margin: 0; padding: 0; }
.footer-menu ul li:last-child { margin-right: 0; }
.cc-icons { display: flex; gap: 5px; }
.disclaimer { border-bottom: 1px solid #fff; padding-bottom: 1.6rem; }

/* Purchase */
#pr-pop { font-size: 12px; transition: all 0.6s ease; opacity: 0; left: -35px; margin-right: 15px; bottom: 15px; position: fixed; background: #fff; padding: 15px; border-radius: 3px; border: 1px solid #fbfbfb; box-shadow: 0px 5px 10px 0px rgba(106, 106, 106, 0.15); display: flex; gap: 12px; z-index: 20; align-items: center; justify-content: center; flex-direction: row-reverse; }
#pr-pop.active { opacity: 1; left: 15px; }
.pr-time-wrap  { color: #333; }
.pr-img-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.pr-img-wrap img { height: 56px; width: auto; display: block; }
#pr-name { font-weight: 600; }
#pr-loc { font-weight: 600; color: #005cc4; }

/* Flipclock */
.wraptimer { max-width: 450px; width: 100%; margin: 30px auto 20px; }
.tick { transition: opacity 0.25s ease-in; opacity: 0; }  
.tick-group:last-of-type { display: flex; align-items: center; }
.tick-group:last-of-type::before { content: ":"; display: inline-block; font-size: 8rem; font-weight: 700; color: #3c3e3c; }

/* Options */
.options-wrap { margin: 30px 0; display: flex; gap: 20px; justify-content: center; position: relative; }
.options-wrap.disabled .option { opacity: 0.3; filter: grayscale(1); }
.options-wrap.disabled .option * { pointer-events: none }
.options-wrap.disabled * { pointer-events: none; }

.option { max-width: 370px; width: 100%; background: #fff; box-shadow: 0px 5px 10px 0px rgba(106, 106, 106, 0.15); transition: all 0.4s ease; display: flex; flex-direction: column; cursor: pointer; }
.option.unfocus { transform: scale(0.92); opacity: 0.5; }
.option-head { position: relative; }
.option-head-bg {  position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 0; overflow: hidden; }
.option-head-bg svg { position: relative; z-index: 0; height: 160px; width: auto; }
.option-head-bg svg path { fill: #ff6f61 }
.optio-head-content { color: #fff; font-weight: 500; text-align: center; position: relative; z-index: 0; }
.option-price { font-size: 3.2rem; padding: 20px 0; }
.price-each-text { font-size: 2.4rem; color: #a1281d; }
.option-img { max-width: 270px; width: 95%; display: block; margin: 0 auto 20px; }
.option-body { padding: 0 15px 15px; display: flex; flex-direction: column; flex-grow: 1; }
.option-desc { margin: 12px 0 0; font-size: 1.8rem; gap: 7px; display: flex; color: #333; padding: 0 5px; flex-grow: 1; cursor: default; }
.option-desc input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.option-title { margin: 0; text-align: center; line-height: 1.4; }
.option-total { margin: 10px 0 0; font-weight: 500; text-align: center; position: relative; }
.total-price { display: inline-block; }
.option-ship { text-align: center; font-size: 1.6rem; transition: opacity 0.4s ease; }
.option-ship.disabled { opacity: 0.2; }
.option-recurring { width: 0px; opacity: 0; overflow: hidden; display: inline-block; font-size: 13px; transition: all 0.25s ease; white-space: nowrap; white-space: nowrap; vertical-align: top; margin-top: 5px; }
.option-recurring.show { width: 58px; opacity: 1; }

.option-cta  {  max-width: 320px; width: 100%; margin: 25px auto 0; font-size: 2rem; padding: 7px 20px; border: 2px solid #ff6f61; background-color: #fff; color: #ff6f61; font-weight: 600; border-radius: 50px; display: block; text-decoration: none; text-align: center; transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;  }
.option-cta:hover { background-color: #ff6f61; color: #fff; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.option-cta:hover::after { width: 100%; }
.option-cta:active { transform: translateY(2px); }
.option-cta:focus { outline: none; }

.fixed-timer { opacity: 0; width: 230px; padding: 10px; position: fixed; z-index: 99; bottom: 0; right: 0; display: flex; flex-direction: column; background: rgb(255 255 255 / 90%); border-top-left-radius: 3px; transition: opacity 0.2s ease; }
.fixed-timer.active { opacity: 1; }
.fixed-timer-desc { text-align: center; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 5px; }
.fixed-timer .tick-group:last-of-type::before { font-size: 3.6rem; }

#exitpop { display: none; max-width: 840px; }
#exitpop h3 { font-weight: 700; text-align: center; line-height: 1.8; }
#exitpop .red { color: #ff6f61; }
#exitpop p  { text-align: center; font-weight: 600; }

.int-rates { font-size: 15px; text-align: center; color: #b81417; }

.bpr_headline { font-weight: 800; }
.bpr_pink { color: #ea8789; }
.bpr_blue { color: #006db3; }
.link-1 { color: #006db3; text-decoration: none; }
.link-1:hover { text-decoration: underline; }

/* POP-UP OFFER */
.overlay { visibility: hidden; position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); transition: 0.25s opacity ease-in, 0.25s visibility step-end; opacity: 0; }
.modal { max-width: 1280px; height: 100%; padding: 0 20px; box-sizing: border-box; margin: auto; visibility: hidden; opacity: 0; position: fixed; top: 2%; right: 0; bottom: 0; left: 0; overflow: auto; -ms-transform: translate3d(0, -1rem, 0) translateY(-50%); -webkit-transform: translate3d(0, -1rem, 0) translateY(-50%); transform: translate3d(0, -1rem, 0); transition: 0.25s transform ease, 0.25s opacity ease, 0.25s visibility step-end; z-index: 1000; scrollbar-width: none; }
.modalcontent { max-width: 100%; background-color: white; box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.25); position: relative; border-radius: 6px; padding: 15px; }
input[type='checkbox']:checked + .overlay, input[type='checkbox']:checked + .overlay + .modal { display: block; visibility: visible; opacity: 1; transform: none; transition: 0.25s transform ease-in, 0.25s opacity ease-in; }
#popup_offer { width: 100%; bottom: auto; }
#chkbx_popup { display: none; }
.a_bannerbuy2get4 { display: block; max-width: 1700px; width: 100%; margin: 0 auto; }
.bannerbuy2get4 { display: block; max-width: 1700px; width: 100%; margin: 0 auto; }
.noblk { max-width: 650px; width: 100%; font-size: 1.5rem; padding-top: 20px; margin: 2% auto 20px; border-top: #cccccc solid 1px; }
.btnno { display: flex; max-width: 200px; width: 100%; align-items: center; justify-content: center; font-size: 1.5rem; font-family: tahoma; font-weight: 800; color: #ffffff; text-decoration: none; text-transform: uppercase; padding: 7px 5px; margin: 0 auto 20px; cursor: pointer; background: linear-gradient(135deg, #a7a7a7 36%, #c2c2c2 67%); border: #b5b3b3 solid 2px; border-radius: 10px;}
.btnno:hover { color: #545454; color: #ffffff; background: linear-gradient(135deg, #b2b1b1 36%, #cccaca 67%); border-color: #c5c4c4; }
.fill-white { display: block; fill: #fff; }

/* General */
.clear { clear: both; }
.center { text-align: center; }
.italic { font-style: italic; }
.strong { font-weight: 600; }
.medium { font-weight: 500; }
.normal { font-weight: normal; }

.m-top-0 { margin-top: 0; }
.m-top-5 { margin-top: 5px; }
.m-top-10 { margin-top: 10px; }
.m-top-20 { margin-top: 20px; }
.m-top-30 { margin-top: 30px; }
.m-top-40 { margin-top: 40px; }

.m-btm-0 { margin-bottom: 0; }
.m-btm-5 { margin-bottom: 5px; }
.m-btm-10 { margin-bottom: 10px; }
.m-btm-20 { margin-bottom: 20px; }
.m-btm-30 { margin-bottom: 30px; }
.m-btm-40 { margin-bottom: 40px; }

.p-top-0 { padding-top: 0; }
.p-top-10 { padding-top: 10px; }
.p-top-20 { padding-top: 20px; }
.p-top-30 { padding-top: 30px; }
.p-top-40 { padding-top: 40px; }

.p-btm-0 { padding-bottom: 0; }
.p-btm-10 { padding-bottom: 10px; }
.p-btm-20 { padding-bottom: 20px; }
.p-btm-30 { padding-bottom: 30px; }
.p-btm-40 { padding-bottom: 40px; }

.m-0 { margin: 0; }
.m-center { margin-left: auto; margin-right: auto; }

.width-500 { max-width: 500px; }
.width-600 { max-width: 600px; }

.desktop-800 { display: block; }

.blue { color: #1155cc; }
.gray { color: #757575; }

/* Media */
@media only screen and (max-width: 1980px) {
    .blk-3:before { background-size: 2440px 800px; }
    .blk-4:before { background-size: 2440px 600px; }
    .blk-5:before { background-size: 2440px 300px; }
    .blk-5:after { background-size: 4400px 430px; }
    .blk-10:before, .blk-10:after, .blk-15:before {  background-size: 3440px 600px; }
    .blk-12:before {  background-size: 3440px 600px; }
    .blk-19:before{  background-size: 3440px 600px; }
    .blk-19:after{  background-size: 3440px 400px; }
}


@media screen and (max-width: 1300px) {
    .ingredient > div:first-child { margin-left: -80px; }
}
@media screen and (max-width: 1200px) {
    .top-images > img.active { opacity: 0.4; }
    .img-6 { margin-top: 0; margin-right: 0; }
    
    .flex-3 { flex-direction: column-reverse; align-items: center; }
    .flex-3 > div:last-child { max-width: 180px; width: 100%; background: #f4f4f4; padding: 10px 10px 0; margin: 0 auto; }
}
@media screen and (max-width: 1100px) {
    .check-list { flex-direction: column; }
    .check-list > li { width: 100%; }
}
@media screen and (max-width: 1000px) {

    .top-images { background-size: 400px; }

    .blk-2-flex { flex-wrap: wrap; max-width: 570px; align-items: flex-start; justify-content: flex-start; margin: 0 auto; }
    .blk-2-flex > ul { margin: 0; list-style: none; padding: 0; width: 275px; }

    .flex-7 { flex-direction: column; align-items: center; gap: 0; }
    .flex-7 > div:last-child { max-width: 280px; width: 80%; margin: 15px 0 -30px; }

    .img-19 { display: block; margin: 0 auto; float: none; width: 200px; }

    .flex-12 { flex-direction: column; align-items: center; gap: 0; }
    .flex-12 > div:first-child { width: 100%; }
    .flex-12 > div:last-child { margin-right: 0; max-width: 280px; }

    .options-wrap { gap: 30px; flex-direction: column; align-items: center; justify-content: center; }
    .option { max-width: 500px; width: 100%; }
    .option-head-bg svg { width: 100%; height: auto; margin-top: -20px; }
    .option-1 .option-img { margin: -15px auto 0; }

    .blk-5-flex { flex-direction: column; }
    .blk-5-flex > div:last-child { max-width: 100%; width: 100%; }
    .comment-wrap-2 { flex-direction: row; flex-wrap: wrap; justify-content: center; }

    .fixed-timer { display: none; }

    .flex-13 { flex-direction: column; align-items: center; gap: 15px; margin-bottom: 1em; }
    .flex-13 > div:last-child { max-width: 320px; width: 100%; }
    .flex-13 > div:last-child a { padding: 10px 20px; }
}

@media screen and (max-width: 900px) {
    .top-images { background: none; }

    .flex-2 { flex-direction: column; align-items: center; }
    .flex-2 > div:first-child { width: 250px; }

    .img-4, .img-5 { display: block; margin: 0 auto; float: none; width: 250px; }
    .img-6 { display: block; margin: 0 auto -10px; float: none; width: 220px; }
    .img-7 { display: block; margin: 0 auto 1em; float: none; width: 200px; }
    .img-8 { display: block; margin: 0 auto; float: none; width: 200px; }
    .img-9 { display: block; margin: 0 auto; float: none; width: 150px; }
    .img-11 { display: block; margin: 0 auto -50px; float: none; width: 200px; }
    .img-12 { display: block; margin: 0 auto; float: none; width: 250px; }
    .img-13 { display: block; margin: 0 auto; float: none; width: 200px; }
    .img-16 { display: block; margin: 0 auto; float: none; width: 160px; }
    .img-17 { display: block; margin: 0 auto 15px; float: none; width: 160px; }
    .img-18 { display: block; margin: 0 auto; float: none; width: 250px; }

    .comment-wrap > div { max-width: 100%; width: 110%; }

    .box-3-order { float: none; max-width: 100%; margin: 0 auto 20px; border: 1px solid #fbfbfb; }
    .box-3-order button, .box-3-order a { max-width: 100%; }

    .ingredient { flex-direction: column; }
    .ingredient > div:first-child { margin: 0; }
    .ingredient img { max-width: 250px; }
    .ing-zinc { margin-bottom: -35px; }
    .ing-pomergranate { margin-bottom: -5px; }
    .ing-acerola { margin-bottom: -10px; }

    .flex-1 { flex-direction: column-reverse; align-items: center; gap: 1em; }
    .flex-1 > div:first-child {  max-width: 200px; }

    .flex-4 { flex-direction: column; gap: 10px; }

    .flex-5 { flex-direction: column; }
    .flex-5 > div:first-child { max-width: 200px; }

    .flex-6 { flex-direction: column; align-items: center; }
    .flex-6 > div:last-child { max-width: 200px; margin-top: 0; }

    .flex-8 { flex-direction: column; }
    .flex-8 > div:first-child { max-width: 160px; }

    .flex-9 { flex-direction: column; align-items: center; }
    .flex-9 > div:last-child { max-width: 160px; margin-right: 0; }

    .flex-10 { flex-direction: column-reverse; gap: 10px; }
    .flex-10 > div:first-child { max-width: 180px;  margin-top: 10px; }

    .flex-11 { flex-direction: column; align-items: center; }
    .flex-11 > div:first-child { width: 100%; }
    .flex-11 > div:last-child { display: none; }
}
@media screen and (max-width: 800px) {
    .top-images > img.active { opacity: 0.2;  }
    .top-img-1 { right: 0; }
    .top-img-2 { right: 0; object-position: left bottom; }
    .top-img-3 { right: 0; }
    .top-img-4 { right: 0; }
}

@media screen and (max-width: 700px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.4rem; }
    h3 { font-size: 2rem; }
    body { font-size: 1.8rem; }
    div > p:last-child { margin-bottom: 5px; }

    .top-banner h1 { font-size: 3rem; }
    .top-banner h2 { font-size: 2.2rem; }

    .container { padding-left: 15px; padding-right: 15px; }
    .section { padding-top: 15px; padding-bottom: 15px; }
    .blk-3 { padding: 10px 0 15px; }
    .blk-5 .box-1 { margin: 15px 0 20px; }
    .blk-9, .blk-12, .blk-15, .blk-20, .blk-22, .blk-24, .blk-28 { padding-top: 15px; }
    .blk-6, .blk-11, .blk-13, .blk-27, .blk-28 { padding-bottom: 15px; }

    .blk-27:before { background: url(./../images/bg-shape-4.svg) bottom right no-repeat; background-size: 1200px auto; }

    .m-top-10  { margin-top: 5px; }
    .m-top-20  { margin-top: 10px; }
    .m-top-30  { margin-top: 20px; }
    .m-top-40  { margin-top: 25px; }

    .m-btm-10  { margin-bottom: 5px; }
    .m-btm-20  { margin-bottom: 10px; }
    .m-btm-30  { margin-bottom: 20px; }
    .m-btm-40  { margin-bottom: 25px; }

    .box-1 { padding: 20px 15px 15px; }
    .box-3 { padding: 20px 15px 15px; }
    .box-3-content-2 { padding: 15px; margin: 0 -15px -15px; }
    
    .box-3-content-3 { margin: 0 -15px -15px; }
    .flex-1 { margin: 0 -15px -15px; }
    .flex-10 > div:first-child { margin-bottom: -15px; }

    .dot-list { margin-left: 10px; }
    .check-list { gap: 15px; }

    .hd-1 { max-width: 500px; }
    .blk-1-content { max-width: 500px; margin-left: auto; margin-right: auto; }
    .blk-1 > .container { min-height: auto; } 
    .blk-2-flex { max-width: 250px; }

    .footer-info { flex-direction: column-reverse; gap: 15px; }
    .footer-menu { margin-bottom: 15px; }
    .footer-menu ul { margin: 0 auto; }

    .img-3 { float: none; margin: 0 auto; width: 200px; display: block; }
    .img-15 { float: none; margin: 0 auto; width: 200px; display: block; }

    .flex-6 > div:last-child { margin-bottom: -15px; }
    .flex-9 { gap: 10px; }
    .flex-9 > div:last-child { margin-bottom: -15px; }
    .flex-12 > div:last-child { margin-bottom: -15px; }

    .option-price { padding: 20px 0 15px; font-size: 2.4rem; }
    .price-each-text { font-size: 2rem; }
    .option-img { max-width: 260px; }

    #pr-pop { font-size: 10px; padding: 10px 15px; }
    .pr-img-wrap { display: none; }

    .wraptimer { max-width: 300px; }
    .tick-group:last-of-type::before { font-size: 4rem; }

    .order-button { font-size: 2rem; }
}

@media screen and (max-width: 520px) {
    .footer-info { max-width: 320px; text-align: center; margin: 0 auto; }
    .hd-3-b { max-width: 300px; }
    .hd-7 { max-width: 380px; }

    .top-img-1, .top-img-4 { right: 0; }
}

@media screen and (max-width: 400px) {
    .option-head-bg svg { height: 160px; width: auto; margin-top: 0; }

    .top-banner h1 { max-width: 200px; margin-left: auto; margin-right: auto; }
    .top-banner p { max-width: 300px; margin-left: auto; margin-right: auto; }
}