@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    scroll-behavior: smooth;
}

body {color: #333333; font-family: "Poppins", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5;}

/* Reset */
img {max-width: 100%;}
ul {padding: 0 0 0 20px;}
a {color: var(--secondary-color)}

/* Colors */
:root {
    --primary-color: #F0F0E4;
    --secondary-color: #2C7068;
    --tertiary-color: #193F3A;
    --quaternary-color: #fff;
    --yellow-color: #e0e28c;
}

.text-secondary {color: var(--secondary-color)!important;}
.bg-secondary {background: var(--secondary-color)!important;}

/* Typography */
h1,h2,h3,h4,h5,h6 {font-weight: 700; margin-bottom: 12px; line-height: normal;}

h1 {font-size: 26px;}
h2 {font-size: 24px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}
h5,h6 {font-size: 15px;}

@media screen and (min-width: 992px) {
    h1 {font-size: 33px;}
    h2 {font-size: 28px;}
}

p {margin-bottom: 12px;}
p:last-child {margin-bottom: 0;}

/* Buttons */
.button {display: inline-flex; text-align: center; align-items: center; justify-content: center; min-height: 48px; font-weight:700; font-size: 16px; border-radius: 10px; padding: 12px 20px;}

.button:hover {text-decoration: none;}

.button-primary {background: var(--primary-color); color: #fff;}
.button-primary:hover {background: #2b8169; color: #fff;}

.button-secondary {background: var(--secondary-color); color: #fff;}
.button-secondary:hover {background: #0158db; color: #fff;}

.button-tertiary {background: var(--tertiary-color); color: #fff;}
.button-tertiary:hover {background: var(--tertiary-color); color: #fff;}

.button-white {background: #fff; color: var(--tertiary-color); text-decoration: none;}
.button-white:hover {color: var(--tertiary-color); color: var(--tertiary-color);}

.button-wide {width: 100%;}
.button-small {font-size: 14px!important; min-height: 40px!important;}

/* Header */
header {background: var(--tertiary-color); color: #fff;}
header .navbar-collapse {order: 3;}
@media screen and (min-width: 992px) {
    header .navbar-collapse {order: initial;}
}
.navbar-dark .navbar-nav .nav-link {color: #fff;}
.navbar-dark .navbar-nav .nav-link:hover {color: var(--yellow-color);}

/* Footer */
footer {background: var(--tertiary-color); color: #fff;}
.footer-menu {list-style: none;}
.footer-menu a {text-decoration: none; color: #fff;}
.footer-menu a:hover { color: var(--yellow-color);}

/* Product Section */
.product-section {background: var(--primary-color);}
.product-thumbnail {border-radius:10px; height: 100%; width: 100%; object-fit: contain; object-position: center; border: 1px solid #dfdfdf;}

.product-thumbnail-slider .splide__track--nav>.splide__list {justify-content: center;}
.product-thumbnail-slider .splide__track--nav>.splide__list>.splide__slide:last-child {margin: 0!important;}
.product-thumbnail-slider .splide__track--nav>.splide__list>.splide__slide.is-active {border-radius: 10px; border-color: var(--secondary-color);}

.product-thumbnail-slider .product-thumbnail { border-radius: 10px; object-fit: cover; height: 100%; width: 100%; object-position: center; }

.product-badge {border-radius: 30px; padding: 4px 20px; background: var(--secondary-color); color: var(--yellow-color); display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;}
.product-badge.product-badge-sm {font-size: 16px;}

.product-price {font-size: 24px; font-weight: 700; color: var(--secondary-color);}
.product-discounted-price {text-decoration: line-through; opacity: .5; font-size: 20px; }
.product-info-list {list-style: none;}
.product-info-list li {margin-bottom: 12px; color: var(--tertiary-color); font-weight: 500; display: flex; gap: 3px;}
.product-info-list li:last-child {margin-bottom: 0;}

/* countdown timer */
.countdown-wrapper {background: var(--yellow-color); border-radius: 10px;}
.countdown-timer {gap: 20px;}
.timer-value {display: block; font-weight: 700; font-size: 28px;}
.timer-label {opacity: .7}

/* FAQ Section */
.faq-item {background: var(--secondary-color); color: #fff; border-radius: 12px; margin-bottom: 12px; min-height: 56px;}
.faq-item:last-child {margin-bottom: 0;}
.faq-question {font-weight: 600; cursor: pointer; padding: 6px 20px; justify-content: space-between; align-items: center; display: flex; gap: 14px; min-height: 56px;}
.faq-question:after {content: ''; width: 14px; height: 14px; background: url('../img/arrow-down-yellow.svg') center no-repeat; background-size: contain; flex-shrink: 0; transform: rotate(-90deg); transition: transform .4s ease-in-out;}

.faq-answer {overflow: hidden; max-height: 0; padding: 0 20px; transition: max-height .4s ease-in-out, padding .4s ease-in-out;}

.faq-item.faq-open .faq-question:after{transform: rotate(0deg);}
.faq-item.faq-open .faq-answer { padding-bottom: 16px; }

/* Process Section */
.process-list {row-gap: 30px;}
.process-list-item {background: var(--secondary-color); color: #fff; border-radius: 20px; min-height: 100%;}
.process-list-item p {font-size: 14px;}

/* Reviews Section */
.reviews-section {background: var(--quaternary-color);}
.reviews-list {row-gap: 30px}
.reviews-list-item {border: 2px  solid var(--tertiary-color); border-radius: 20px; min-height: 100%;}
.review-text {font-size: 14px;}
.review-lbs-lost {border-radius: 20px; background: var(--secondary-color); color: var(--primary-color); font-size: 12px; font-weight: 500;}

/* FDA Section */
.fda-text {font-size: 12px; background: #f3f3f3; border-radius: 4px;}