/* FONT IMPORT */
@import url(layout.min.css);
/* Google Font */
@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');
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Local Font */
@font-face {
    font-family: "aeonik-bold";
    src: url("../fonts/aeonik-bold.ttf");
}

:root {
    --white: #fff;
    --black: #000;
    --primary: #132836;
    --secondary: #00AFD5;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    position: relative;
    background: #fff;
    overflow-x: hidden;
    height: 100%;
    font-family: "Albert Sans", sans-serif;
}

section {
    position: relative;
}

h1,
h2,
h3 {
    font-family: "aeonik-bold";
}

.img-auto {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

a,
button {
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover,
button:hover {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

figure {
    margin: 0;
}

/* PRELOADER */

.preLoader {
    width: 100%;
    height: 100%;
    z-index: 1111;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.preLoader.black {
    background-color: var(--white);
    z-index: 11113;
}

.preLoader.white {
    z-index: 11112;
    background-color: var(--primary);
}

/* PRELOADER */

/* GLOBAL CSS */

.themeBtn {
    background: var(--secondary);
    font-size: 1rem;
    color: var(--white);
    text-transform: capitalize;
    display: inline-block;
    padding: 12px 1.75em;
    border-radius: 6px;
    line-height: normal;
}

.themeBtn:hover {
    background: var(--white);
    color: var(--primary);
}

/* !GLOBAL CSS */

/* Main Banner Css Start */

.mainBanner {
    background: url(../images/mainBanner.png)center/cover;
    padding: 2.8125rem 0;
}

.bannerContent {
    margin-bottom: 2rem;
}

.bannerContent span {
    color: var(--secondary);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.375rem;
}

.bannerContent h1 {
    color: var(--white);
    text-transform: uppercase;
    font-size: 2.75rem;
}

.bannerContent p {
    color: var(--white);
    font-size: 1.25rem;
}

.banDiscription {
    background: #141414;
    border-radius: 20px;
    max-width: 290px;
    padding: 1.25rem 4.375rem 1.25rem 1.875rem;
    margin-top: 2rem;
}

.banDiscription #accordion .card {
    border: none;
    border-bottom: 1px solid var(--white);
    padding: 0 0 0.625rem 0;
    background: transparent;
    margin-bottom: 0.625rem;
    border-radius: unset;
}

.banDiscription #accordion .card .btn-link {
    --height: 5rem;
    --width: 4.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--white);
    padding: 0;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    border-bottom-left-radius: 0;
    text-align: left;
    text-transform: capitalize;
}

.banDiscription #accordion .card .btn-link i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    margin-left: auto;
    background: 000;
    font-size: 1rem;
}

.banDiscription #accordion .card .btn-link i::before {
    content: "\f068";
}

.banDiscription #accordion .card .btn-link.collapsed i::before {
    content: "\f067";
}

.banDiscription #accordion .card+.card {
    margin-top: 0;
}

.banDiscription #accordion .card .card-body {
    padding: 0rem 0rem 0rem 0rem;
}

.banDiscription #accordion .card .card-body p {
    color: var(--white);
    font-size: 0.75rem;
    margin: 0.625rem 0 0 0;
}

.flavorBox {
    background: #141414;
    border-radius: 20px;
    max-width: 290px;
    margin-left: auto;
    padding: 1.25rem 1.875rem;
    margin-bottom: 4rem;
}

.flavorBox h2 {
    font-size: 2.75rem;
    color: var(--secondary);
    font-family: 'Albert Sans';
    font-weight: 800;
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    margin: 0;
}

.flavorBox h2 span {
    color: var(--white);
    font-size: 1rem;
}

.flavorBox small {
    color: var(--white);
    display: block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

.flavorBox select {
    width: 100%;
    border: unset;
    outline: unset;
    background: #484848;
    color: var(--white);
    border-radius: 7px;
    height: 30px;
    font-size: 0.875rem;
    padding-left: 6px;
    margin-bottom: 1.125rem;
}

.flverBtns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.125rem;
}

.flverBtns .cardsBtn {
    color: var(--white);
    font-size: 0.875rem;
    text-transform: capitalize;
    font-weight: 600;
    background: var(--secondary);
    border-radius: 7px;
    padding: 6px 0.75rem;
}

.flverBtns a {
    color: var(--secondary);
    font-size: 1.25rem;
}

.flavorBox h6 {
    color: var(--white);
    font-size: 7px;
    font-weight: 400;
    text-align: right;
    margin: 0;
}

.flavorBox ul {
    display: flex;
    justify-content: end;
}

.flavorBox ul li i {
    color: var(--secondary);
    font-size: 6px;
}

.flavorBox ul li {
    line-height: 1;
}

.banImg {
    margin: 0 0rem 0 -3rem;
}

/* Main Banner Css End */

/* Marque Sec Css Start */

.marqueSec {
    background: #152C3C;
    padding: 3.125rem 0;
}

.marqueWraps h5 {
    color: var(--white);
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08px;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.marqueSlider .swiper-wrapper {
    transition-timing-function: linear;
    position: unset;
}

.marqueSlider {
    position: unset;
}

.marqueWraps h5 img {
    border-radius: 100%;
}

/* Marque Sec Css End */

/* Find Sec Css Start */

.findSec {
    background: var(--primary);
    padding: 7.5rem 0 6.25rem 0;
}

.secHeading {
    color: var(--white);
    font-size: 3.75rem;
    text-transform: uppercase;
}

.tabsPack {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    margin: 1.25rem 0 3.125rem 0;
}

.tabsPack a {
    border: 1px solid var(--secondary);
    padding: 7px 2em;
    border-radius: 6px;
    color: var(--white);
    text-transform: capitalize;
}

.tabsPack a.active,
.tabsPack a.current {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

[class^=box-] {
    display: none;
}

[class^=box-].showfirst {
    display: block;
}

.productBox {
    background: #F8F9FB;
    border-radius: 10px;
}

.productBox figure {
    background: #E9E9E9;
    border-radius: 10px 10px 0 0;
}

.productContent ul {
    display: flex;
    align-items: center;
}

.productContent ul li i {
    color: var(--secondary);
    font-size: 0.75rem;
}

.productContent ul li span {
    color: #333333;
    margin-left: 1rem;
}

.productContent h3 {
    font-size: 1.125rem;
    color: #111111;
    margin: 0.625rem 0 8px 0;
}

.productContent p {
    color: #333333;
    margin-bottom: 1.25rem;
}

.productBtns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.productBtns small,
.productBtns a {
    font-size: 0.875rem;
    font-weight: bold;
    font-family: 'aeonik-bold';
    color: #111111;
}

.productBtns a {
    text-transform: capitalize;
    border-bottom: 1px solid #111111;
}

.productContent {
    padding: 1.5rem 1.25rem 2.5rem 1.25rem;
}

.productSlider .swiper-button-next:after,
.productSlider .swiper-button-prev:after {
    font-size: 0.625rem;
    font-weight: 700;
    color: #111111;
}

/* Find Sec Css End */

/* Ingredient Sec Css Start */

.ingredientSec {
    background: #003B6B;
    padding: 6.25rem 0;
}


.ingredientWraps {
    text-align: center;
    margin-top: 4.375rem;
}

.ingredientWraps h3 {
    color: var(--white);
    font-size: 1.25rem;
    text-transform: uppercase;
    margin: 1.875rem 0 0 0;
}

/* Ingredient Sec Css End */

/* Shop Sec Css Start */

.shopSec {
    padding: 7.5rem 0;
}

.shopBox {
    text-align: center;
    background: #003B6B;
    border-radius: 20px;
    overflow: hidden;
}

.shopContent {
    /*padding: 2.5rem 0 3.125rem 0;*/
    padding:20px;
}

.shopContent h2 {
    color: var(--white);
    text-transform: uppercase;
    /*font-size: 2.5rem;*/
    font-size:30px;
    margin: 0;
}

.shopContent p {
    color: var(--white);
    /*width: 60%;*/
    margin: 1.25rem auto 1.75rem;
    line-height: 1.75;
}

/* Shop Sec Css End */

/* Review Sec Css Start */

.reviewSec {
    background: var(--primary);
    padding: 6.25rem 0 2.5rem 0;
}

.reviewWraps figure {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.875rem;
}

.reviewWraps figure span {
    color: var(--white);
    font-size: 0.9375rem;
}

.reviewWraps ul {
    display: flex;
    gap: 2px;
}

.reviewWraps ul li i {
    color: var(--secondary);
    font-size: 0.75rem;
}

.reviewWraps h3 {
    color: var(--white);
    font-size: 1.25rem;
    /*text-transform: uppercase;*/
    width: 85%;
    line-height: 1.4;
    letter-spacing: 0.08px;
    margin: 1.75rem 0;
}

.reviewWraps small {
    color: var(--secondary);
    font-size: 0.875rem;
    letter-spacing: 0.08px;
}

.reviewSlider .swiper-pagination-bullet {
    border: 2px solid var(--white);
    width: 12px;
    height: auto;
    aspect-ratio: 1;
    background: transparent;
    opacity: 100%;
}

.reviewSlider .swiper-pagination-bullet-active {
    background: var(--white);
}

.reviewSlider {
    padding: 2.5rem 0 5rem 0;
}

/* Review Sec Css End */

/* Blog Sec Css Start */

.blogSec .secHeading {
    color: var(--primary);
    margin-bottom: 2rem;
}

.blogWraps figure img {
    border-radius: 10px;
}

.blogContent small {
    color: var(--white);
    background: var(--secondary);
    display: inline-block;
    padding: 3px 1.3em;
    margin: 1.25rem 0;
}

.blogContent h3 {
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.08px;
    margin: 0;
}

.blogContent p {
    color: var(--primary);
    margin: 1.5625rem 0;
}

.blogContent a {
    text-transform: uppercase;
    color: var(--primary);
    font-family: 'aeonik-bold';
    display: flex;
    align-items: center;
    gap: 5px;
}

.blogContent a i {
    font-size: 1.375rem;
}

/* Blog Sec Css End */

/* Insta Sec Css Start */

.instaSlider .swiper-wrapper {
    transition-timing-function: linear;
}

/* Insta Sec Css End */

/* Footer Css Start */

footer {
    background: var(--primary);
    padding-top: 5.625rem;
}

.footerLogo h2 {
    color: var(--white);
    text-transform: uppercase;
    font-size: 1rem;
    font-family: 'Albert Sans';
    font-weight: 600;
    width: 90%;
    margin: 3.125rem 0 1.25rem 0;
    letter-spacing: 0.08px;
}

.footerLogo h2 span {
    color: var(--secondary);
}

.footerLogo input {
    height: 46px;
    border-radius: 6px;
    width: 310px;
    border: unset;
    outline: unset;
    box-shadow: unset;
    padding-left: 1rem;
    color: var(--black);
    margin-bottom: 0.625rem;
}

.footerLogo input::placeholder {
    color: var(--black);
}

.footerLogo .themeBtn {
    border: unset;
    text-transform: uppercase;
    outline: unset;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 3em;
}

footer h3 {
    color: var(--white);
    font-size: 1.25rem;
    text-transform: capitalize;
    letter-spacing: 0.08px;
    margin-bottom: 1.2rem;
}

.links li a {
    color: var(--white);
    text-transform: uppercase;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08px;
}

.links li+li {
    margin-top: 6px;
}

.socialLinks {
    display: flex;
    justify-content: end;
    gap: 1.625rem;
    margin-top: -2.5rem;
}

.socialLinks li a {
    color: var(--secondary);
    font-size: 1.25rem;
}

.copyRight p,
.copyRight ul li a {
    color: var(--white);
    margin: 0;
    letter-spacing: 0.08px;
}

.copyRight {
    border-top: 1px solid #E6E6E6;
    margin-top: 2.8125rem;
    padding: 1.25rem 0;
}

.footFlex {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1.25rem;
}

.footFlex ul {
    display: flex;
    gap: 1.75rem;
}

footer ul li a:hover {
    color: var(--secondary);
}

/* Footer Css End */

/* Inner Css Start */

.shopInner {
    padding: 3rem 0;
}

.shopHeadings h2 {
    color: #111314;
    font-size: 2.375rem;
}

.shopHeadings p {
    font-size: 1.0625rem;
    color: #676767;
}

.tabsPack2 a {
    color: rgb(17 19 20 / 80%);
    border: 1px solid rgb(17 19 20 / 40%);
    padding: 6px 1.5em;
    border-radius: 50px;
    display: inline-block;
}

.tabsPack2 {
    display: flex;
    gap: 0.625rem;
    margin-top: 1.75rem;
}

.tabsPack2 a.active,
.tabsPack2 a.current {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.tabs1 {
    margin-top: 8px;
}

.at-tab {
    display: none;
    border-top: none;
    background-color: transparent;
}

.at-title {
    cursor: pointer;
    background-color: transparent;
    position: relative;
    transition: background-color 0.3s ease;
}

.at-title:after {
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    right: 10px;
    color: #111314;
    transition: all 0.3s ease-in-out;
    font-size: 1rem;
}

.at-title.active:after {
    content: "\f106";
}

.shopHeadings h2 {
    font-size: 1.625rem;
    color: #111314;
    margin: 2.5rem 0 3.75rem 0;
}

.at-item h4,.widget-title{
    font-size: 1.125rem !important;
    color: #111314 !important;
    font-weight: 600 !important;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.catWraps {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.catWraps span {
    color: rgb(17 19 20 / 40%);
}

.catWraps input {
    width: 20px;
    height: 20px;
    margin: 0;
    position: unset;
}

.catWraps .form-check {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.catWraps label {
    margin: 0;
    padding: 0;
    color: #173446;
    font-size: 0.875rem;
}

.catWraps+.catWraps {
    margin-top: 8px;
}

.shopInner .productBox {
    background: #F8F9FB;
    /*margin-bottom: 3.125rem;*/
}

.shopLeftBar {
    position: sticky;
    top: 2rem;
}

.shopinnerTwo {
    background: #F8F9FB;
    padding: 5.625rem 0 4rem 0;
}

.shoptwoContent ul {
    display: flex;
    gap: 5px;
}

.shoptwoContent h2 {
    font-size: 2rem;
    color: #111314;
    width: 95%;
    margin: 1rem 0 0 0;
}

.shoptwoContent ul li i {
    color: #1B73B3;
}

.shopsSliderss {
    margin-right: -22rem;
    padding-bottom: 4rem;
}

.shoptwoBox {
    background: var(--white);
    padding: 1rem 1rem;
}

.shoptwoNames small {
    background: #1B73B3;
    width: 34px;
    height: auto;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

.shoptwoNames span {
    color: #111314;
    font-weight: 700;
}

.shoptwoNames {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.shoptwoBox h3 {
    font-size: 1.1875rem;
    color: #111314;
    margin: 0;
}

.shoptwoBox p {
    color: #333333;
    margin: 0.875rem 0 1.5625rem 0;
}

.shoptwoBox figure {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.shoptwoBox figure h6 {
    color: #333333;
    font-size: 1rem;
    margin: 0;
    line-height: 1.3;
}

.shoptwoBox figure h6 a {
    color: #111314;
    display: block;
    text-transform: capitalize;
    font-weight: 700;
    border-bottom: 1px solid #111314;
    width: fit-content;
}

.shopsSliderss .swiper-pagination {
    color: var(--black);
    font-weight: 700;
}

.shopinnerThree h5 {
    font-weight: 400;
    font-size: 1rem;
}

.shopinnerThree {
    padding: 1.375rem 0;
}

.shopinnerFour {
    padding: 5rem 0;
}

.shopinnerFour h2 {
    color: #111314;
    font-size: 2rem;
}

.shopfourWraps h3 {
    font-size: 1.1875rem;
    color: #111314;
    margin-bottom: 1rem;
}

.shopfourWraps p {
    color: #676767;
    line-height: 1.75;
    width: 90%;
    margin: 0;
}

.shopfourWraps {
    margin-top: 3.125rem;
}

.shopBlg {
    background: #F8F9FB;
    padding: 3.75rem 0 5rem 0;
}

.contactSec {
    padding: 4rem 0 7.5rem 0;
}

.contactHeading h2 {
    font-size: 2.5rem;
    color: #142835;
}

.contactHeading p {
    color: #142835;
    font-size: 0.9375rem;
}

.contactInfo {
    background: #F8F9FB;
    border-radius: 6px;
    text-align: center;
    padding: 1.375rem 0;
    margin: 3.125rem 0;
    height: 230px;
}

.contactInfo h5 {
    font-size: 0.9375rem;
    font-weight: 400;
    color: #142835;
    margin: 1rem 0 10px 0;
}

.contactInfo .mailText {
    font-size: 0.9375rem;
    font-weight: bold;
    color: #173446;
    display: block;
    margin-bottom: 1.5rem;
}

.contactInfo .callBtn {
    background: #132836;
    border-radius: 50px;
    color: vaR(--white);
    display: inline-block;
    padding: 0.75rem 1.5em;
}

.contactInfo .callBtn:hover {
    background: var(--secondary);
    color: var(--white);
}

.shipPolicy li a {
    font-size: 1.0625rem;
    color: #111314;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.shipPolicy li {
    border-top: 1px solid rgb(17 19 20 / 30%);
}

.shipPolicy {
    margin-top: 1rem;
}

.contactBox {
    background: #F8F9FB;
    padding: 2rem 3.4375rem;
    text-align: center;
    margin: 3.125rem 0 3.75rem 0;
}

.contactBox h2 {
    font-size: 1rem;
    color: #142835;
    margin: 0;
}

.contactBox p {
    color: #142835;
    font-size: 0.9375rem;
    margin: 1rem 0 2rem 0;
}

.contactBox .form-control,
.contactBox select {
    width: 100%;
    border: unset;
    background: var(--white);
    border-radius: 4px;
    padding-left: 1rem;
    outline: unset;
    box-shadow: unset;
    font-size: 0.875rem;
    color: #6E7A7E;
}

.contactBox .form-control::placeholder {
    color: #6E7A7E;
}

.contactBox input,
.contactBox select {
    height: 52px;
}

.contactBox textarea {
    height: 200px;
    padding-top: 1rem;
    resize: none;
}

.contactBox button {
    background: #003B6B;
    border: unset;
    outline: unset;
    color: var(--white);
    font-weight: 500;
    width: 100%;
    border-radius: 50px;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.contactBox button:hover {
    background: var(--secondary);
    color: var(--white);
}

.contactNotes p {
    color: #142835;
    font-size: 0.9375rem;
    margin-bottom: 2.5rem;
}

.contactNotes p span {
    font-weight: 900;
    font-size: 1.0625rem;
}

.contactNotes h4 {
    color: #142835;
    font-size: 0.9375rem;
    margin: 0;
}

.contactInner {
    background: url(../images/contactBg.png)center/cover;
    padding: 4.6875rem 0;
}

.contactinnerContent h2 {
    color: var(--white);
    font-size: 40px;
}

.contactinnerContent p {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.contactinnerContent input {
    background: var(--white);
    width: 100%;
    border-radius: 4px;
    border: unset;
    outline: unset;
    box-shadow: unset;
    height: 52px;
    padding-left: 1rem;
    margin-bottom: 1.375rem;
    font-size: 0.875rem;
    color: #111314;
}

.contactinnerContent input::placeholder {
    color: #111314;
}

.contactinnerContent button {
    font-size: 0.9375rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    width: 100%;
    border-radius: 50px;
    padding: 0.875rem 0;
}

.contactinnerContent button:hover {
    background: var(--white);
    color: var(--black);
}

/* Inner Css End */

.detailoneSec {
    padding: 2rem 0 5rem 0;
}

.detailimageFlex {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    /* width: 48.5%; */
    flex-flow: wrap;
}
.detailimageFlex .items {
    width: 48%;
  }
  .main-product .items {
    justify-content: center;
    display: flex;
  }
.quantity-container {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    width: fit-content;
}

.qty-btn {
    background-color: #f0f0f0;
    border: none;
    padding: 0.625rem 0.9375rem;
    cursor: pointer;
    font-size: 1.125rem;
    user-select: none;
    transition: background 0.3s;
    outline: unset !important;
    box-shadow: unset;
}

.qty-btn:hover {
    background-color: #ddd;
}

.qty-input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 1rem;
    outline: none;
}

.detailOneContent {
    margin-left: 3rem;
}

.detailOneContent h2 {
    font-size: 2.375rem;
    color: #111314;
    margin-bottom: 1rem;
}

.detailOneContent ul.stars {
    display: flex;
    gap: 3px;
}

.detailOneContent ul.stars li i {
    color: #1B73B3;
    font-size: 0.875rem;
}

.detailOneContent ul.stars li span {
    font-size: 0.875rem;
    color: rgb(17 19 20 / 60%);
    border-bottom: 1px solid rgb(17 19 20 / 60%);
}

.detailOneContent p {
    color: rgb(17 19 20 / 72%);
    width: 90%;
    margin: 1.375rem 0;
}

ul.detailListing li {
    color: #111314;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

ul.detailListing {
    display: flex;
    flex-flow: column wrap;
    gap: 0.875rem 1rem;
    max-height: 90px;
    width: 70%;
}

.productSize span,
.productFlavor span,
.shippingMethond span {
    color: #676767;
    font-size: 0.875rem;
    display: block;
    margin: 1.375rem 0 0.75rem 0;
    text-transform: capitalize;
}

.productSize ul {
    display: flex;
    gap: 0.75rem;
}

.productSize ul li a {
    color: #111314;
    border: 1px solid #111314;
    width: 198px;
    height: 54px;
    border-radius: 6px;
    display: grid;
    place-items: center;
}

.productFlavor select {
    border: 1px solid rgb(17 19 20 / 32%);
    height: 54px;
    width: 100%;
    border-radius: 6px;
    padding-left: 1rem;
}

.radioFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgb(17 19 20 / 32%);
    height: 54px;
    border-radius: 6px;
    padding: 0 1.5625rem;
    margin-bottom: 0.625rem;
}

.radioFlex label {
    color: #111314;
    font-weight: 600;
}

.radioFlex input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    position: unset;
}

.radioFlex .form-check {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.detailBtns {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.375rem 0 0.75rem 0;
}

a.cardsBtns {
    background: #003B6B;
    color: vaR(--white);
    font-weight: 600;
    width: 75%;
    margin: auto;
    text-align: center;
    border-radius: 6px;
    padding: 0.75rem 0;
}

a.similrProduct {
    width: 100%;
    color: #111314;
    border: 1px solid rgb(17 19 20 / 32%);
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    padding: 1rem 0;
    font-weight: 500;
}

.detailtwoSec {
    padding-bottom: 7.5rem;
}

.detailtwoBox {
    background: var(--primary);
    border-radius: 6px;
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
}

.detailtwoBox h2 {
    color: var(--white);
    font-size: 1.625rem;
    margin-bottom: 1rem;
}

.detailtwoBox p {
    color: var(--white);
    font-size: 0.9375rem;
    margin-bottom: 2.5rem;
}

.detailtwoBox .detailtwoImages {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    border-top: 1px solid rgb(255 255 255 / 30%);
    padding-top: 2rem;
}

.detailtwoAccordian #accordion .card {
    border: none;
    border-bottom: 1px solid rgb(17 19 20 / 64%);
    padding: 0 0 1rem 0;
    background: transparent;
    margin-bottom: 1rem;
    border-radius: unset;
}

.detailtwoAccordian #accordion .card .btn-link {
    --height: 5rem;
    --width: 4.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    color: #111314;
    padding: 0;
    border: 0;
    font-size: 1rem;
    text-decoration: none;
    overflow: hidden;
    border-bottom-left-radius: 0;
    text-align: left;
    text-transform: capitalize;
    font-family: 'aeonik-bold';
}

.detailtwoAccordian #accordion .card .btn-link i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(17 19 20 / 64%);
    margin-left: auto;
    background: 000;
    font-size: 1rem;
}

.detailtwoAccordian #accordion .card .btn-link i::before {
    content: "\f068";
}

.detailtwoAccordian #accordion .card .btn-link.collapsed i::before {
    content: "\f067";
}

.detailtwoAccordian #accordion .card+.card {
    margin-top: 0;
}

.detailtwoAccordian #accordion .card .card-body {
    padding: 0rem 0rem 0rem 0rem;
}

.detailtwoAccordian #accordion .card .card-body p {
    color: rgb(17 19 20 / 64%);
    font-size: 15px;
    margin: 0.625rem 0 0 0;
}

.detailtwoAccordian {
    background: #F8F9FB;
    border-radius: 6px;
    padding: 1.5rem 1.5rem 2.5rem 1.5rem;
    margin-left: 3rem;
    height: 100%;
}

.detailthreeSec {
    background: #F8F9FB;
    padding: 5rem 0;
}

.detailthreeHeading h2 {
    color: #111314;
    text-transform: capitalize;
    font-size: 2.375rem;
    margin-bottom: 1rem;
}

.detailthreeHeading p {
    color: #676767;
    font-size: 1.0625rem;
    width: 79%;
    margin: 0;
}

.detailthreeBox {
    background: var(--white);
    border-radius: 6px 6px 0 0;
    padding: 1rem 1rem 1.875rem 1rem;
    min-height: 174px;
}

.detailthreeBox h3 {
    font-size: 1.25rem;
    color: #111314;
}

.detailthreeBox p {
    font-size: 1rem;
    color: #676767;
    margin: 0;
}

.detailthreeWraps figure img {
    border-radius: 0 0 6px 6px;
    width: 100%;
    height: 256px;
 object-fit: cover;
}

.detailthreeWraps+.detailthreeWraps {
    margin-top: 2.8125rem;
}

.detailfourSec,
.detailsixSec {
    padding: 5rem 0;
}

.detailfourHeading h2 {
    color: #111314;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.detailfourHeading p {
    font-size: 1.25rem;
    color: #676767;
}

.detailfourProducts {
    border: 1px solid rgb(17 19 20 / 32%);
    border-radius: 6px;
    overflow: hidden;
}

.detailfourProducts>span {
    text-align: center;
    display: block;
    background: #E8EEFA;
    font-size: 0.9375rem;
    color: #173446;
    font-weight: 600;
    padding: 7px 0;
}

.detailfourProducts figure {
    text-align: center;
    margin: 1.25rem 0;
}

.detailfourContent {
    padding: 0 1.5625rem 1.5625rem 1.5625rem;
}

.detailfourContent ul {
    display: flex;
    gap: 2px;
    margin-bottom: 0.625rem;
}

.detailfourContent ul li i {
    font-size: 0.75rem;
    color: #1B73B3;
}

.detailfourContent ul li span {
    font-size: 0.8125rem;
    color: rgb(17 19 20 / 60%);
}

.detailfourContent h3 {
    font-size: 1.125rem;
    color: #111111;
}

.detailfourContent p {
    color: #676767;
}

.detailfourContent small {
    display: block;
    font-size: 0.875rem;
    color: #676767;
    margin-bottom: 1.25rem;
}

.detailfourContent a {
    background: #111314;
    width: 100%;
    display: inline-block;
    text-align: center;
    border-radius: 6px;
    color: var(--white);
    text-transform: capitalize;
    font-weight: 600;
    padding: 1rem 0;
}

.detailfourHeading {
    margin-bottom: 2.5rem;
}

.detailfiveSec {
    background: url(../images/detailfiveBg.png)center/cover;
    height: 624px;
    padding: 3.75rem 0;
}

.detailfiveContent h2 {
    color: var(--white);
    font-size: 2.375rem;
}

.detailfiveContent a {
    font-weight: 500;
    color: var(--white);
    border: 1px solid var(--white);
    display: inline-block;
    border-radius: 50px;
    padding: 0.75rem 4em;
}

.detailfiveContent a:hover {
    background: var(--white);
    color: var(--black);
}

.detailfiveContent {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
    height: 500px;
}

.detailsixHeading h2 {
    font-size: 2.375rem;
    color: #111314;
    margin-bottom: 2.5rem;
}

.detailsixStars {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detailsixStars ul {
    display: flex;
    gap: 5px;
    align-items: center;
}

.detailsixStars ul li span {
    font-size: 1.875rem;
    color: #111314;
    font-weight: 600;
}

.detailsixStars ul li i {
    color: #1B73B3;
}

.detailsixStars a {
    color: #111314;
    text-transform: capitalize;
    font-weight: 600;
    border: 1px solid #111314;
    display: inline-block;
    padding: 0.625rem 4em;
    border-radius: 50px;
    width: 360px;
    text-align: center;
}

.detailsixHeading small {
    display: block;
    color: #676767;
    font-size: 0.9375rem;
    margin-bottom: 1.375rem;
}

.detailsixHeading select {
    color: rgb(17 19 20 / 80%);
    border: 1px solid rgb(17 19 20 / 80%);
    border-radius: 50px;
    padding: 6px 0.875rem;
    font-size: 0.875rem;
    outline: unset;
}

.detailsicLefts ul {
    display: flex;
    gap: 5px;
    margin-bottom: 0.625rem;
}

.detailsicLefts ul li i {
    font-size: 0.75rem;
    color: #1B73B3;
}

.detailsicLefts ul li span {
    color: #676767;
    font-weight: 600;
}

.detailsicLefts h5 {
    align-items: center;
    justify-content: space-between;
    display: flex;
    color: #111314;
    font-size: 1rem;
    margin-bottom: 8px;
}

.detailsicLefts h5 i {
    color: #41B5E8;
    transform: rotate(45deg);
}

.detailsicLefts h6 {
    color: rgb(17 19 20 / 40%);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.detailsixRight h3 {
    color: #111314;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.detailsixRight h3 span {
    font-size: 1rem;
    color: rgb(17 19 20 / 60%);
    font-family: 'Albert Sans';
}

.detailsixRight p {
    font-size: 0.9375rem;
    color: #111314;
    line-height: 1.75;
}

.detailsixLines {
    border-top: 1px solid rgb(17 19 20 / 30%);
    border-bottom: 1px solid rgb(17 19 20 / 30%);
    padding: 2.5rem 0;
}

.detailsixHeading {
    margin-bottom: 2rem;
}

.detailsevenSec {
    background: var(--primary);
    padding: 5rem 0;
}

.detailsevenSec h2 {
    color: var(--white);
    font-size: 2.375rem;
}

.detailsevenWraps span {
    color: var(--white);
    font-size: 1.125rem;
    border: 1px solid var(--white);
    background: #173446;
    width: 40px;
    height: auto;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50px;
    font-weight: 600;
}

.detailsevenWraps figure {
    margin: 1.5rem 0;
}

.detailsevenWraps h3 {
    color: var(--white);
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.detailsevenWraps p {
    color: rgb(255 255 255 / 80%);
    font-size: 0.9375rem;
    line-height: 1.75;
    margin: 0;
    width: 83%;
}

.detailsevenWraps {
    margin-top: 3.125rem;
}

.detailseveLines {
    border: 1.5px dashed rgb(255 255 255 / 30%);
    position: absolute;
    top: 4.5rem;
    left: 1rem;
    width: 95%;
}

.detailsevenPara p {
    color: var(--white);
    opacity: 60%;
    margin: 3.125rem 0;
    font-size: 0.8125rem;
}

.dropdown {
    position: relative;
    display: contents;
}

.dropdown select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    outline: unset;
}

.offcanvas {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background-color: var(--white);
    padding-top: 1rem;
    transition: 0.5s;
    box-shadow: -1px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 111;
}

.offcanvas.active {
    right: 0;
}

.offcanvas a {
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(17 19 20 / 32%);
    border-radius: 6px;
    width: 90%;
    margin: auto;
}

.offcanvas a:hover {
    background-color: #ddd;
}

.offcanvas a img {
    border-radius: 100%;
}

.offcanvas a+a {
    margin-top: 10px;
}

.offcanvas h5 {
    color: black;
    font-size: 1rem;
    margin: 0 0 1rem 1.2rem;
}

#flavorSelect {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 16px 30px 16px 1.5625rem;
    border: 1px solid rgb(17 19 20 / 32%);
    border-radius: 6px;
    background-color: transparent;
    min-width: 200px;
    position: relative;
}

#selectedFlavorImage {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 100%;
}

#selectedFlavor {
    flex-grow: 1;
}

#flavorSelect span {
    margin: 0;
    color: #111314;
    font-weight: 600;
}

/* Dropdown arrow */
#flavorSelect::after {
    content: '';
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px transparent solid;
    border-right: 5px transparent solid;
    border-top: 5px #333 solid;
    pointer-events: none;
}

/* New Css Start */

.privacyContent p {
    font-size: 1rem;
}

.privacyContent ul li {
    color: #142835;
}

.privacyContent ul {
    list-style: disc;
    list-style-position: inside;
    margin-bottom: 1rem;
}

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

.privacyContent h4 {
    margin: 1rem 0;
}

.privacyContent a {
    color: #142835;
    /*display: block;*/
    display: content;
    margin-bottom: 1rem;
}

.privacyContent a span,
.privacyContent p span {
    font-weight: 700;
}

.fatCalculator .form-control,
.fatCalculator select {
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 50px;
    outline: unset;
    box-shadow: unset;
    width: 100%;
    padding-left: 1rem;
    color: #A1A1A4;
    margin-bottom: 1rem;
}

.fatCalculator .form-control::placeholder {
    color: #a1a1a1;
}

.fatCalculator label {
    color: var(--black);
    font-weight: 700;
}

.fatCalculator .themeBtn {
    width: 100%;
    outline: unset;
    border: unset;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.fatCalculator .themeBtn:hover,
.abtContent .themeBtn:hover {
    background: var(--primary);
    color: var(--white);
}

.fatCalculator table {
    width: 100%;
    text-align: center;
    background: var(--secondary);
    display: table;
}

.fatCalculator table th {
    padding: 2rem 1.5rem;
    color: var(--white);
}
.fatCalculator table td
{
    color: var(--white);

}
.fatCalculator table th + th, .fatCalculator table td + td {
    border-left: 1px solid;
}

.fatCalculator {
    margin: 2rem 0 4rem 0;
}

.abtContent span {
    color: var(--primary);
    display: block;
    margin-bottom: 1rem;
}

.abtContent h2 {
    color: var(--primary);
    font-size: 2.75rem;
}

.abtContent ul li {
    color: var(--primary);
    font-size: 1.125rem;
}

.abtContent ul li+li {
    margin-top: 6px;
}

.abtContent ul {
    margin: 1.5rem 0 2rem 0;
}

.aboutInnerTwo {
    background: url(../images/abtBg.jpg)center/cover;
    height: 600px;
    display: flex;
    align-items: center;
}

.abttwoContent h2 {
    color: var(--white);
    text-transform: uppercase;
    font-size: 2.75rem;
}

.abttwoContent p {
    color: var(--white);
    line-height: 1.75;
    margin: 1rem 0 1.5rem;
}

.teamHeading .secHeading {
    color: var(--primary);
}

.termSect {
    padding: 5rem 0;
}

.teamWrap {
    text-align: center;
    display: block;
    margin-top: 2rem;
}

.teamContent {
    background: var(--secondary);
    padding: 1rem 0;
}

.teamContent h3 {
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
    font-size: 24px;
}

.teamContent span {
    color: var(--white);
}

.mega-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100vw;
    /* full viewport width */
    background: white;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    transform: translateX(-50%);
    left: 40%;
}

.navbar-nav li:hover .mega-menu {
    display: block;
}

.mega-menu .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mega-item img {
    width: 100%;
    height: auto;
    display: block;
}

.mega-item p {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}

.mega-item {
    text-align: center;
}

.mega-menu h6 span {
    display: block;
}

.mega-menu h6 {
    margin: 1rem 0 0 0;
    font-size: 1rem;
}

.mega-menu a:before {
    display: none;
}

.shopinnerThree .marqueWraps {
    display: flex;
    justify-content: space-between;
    margin: 2rem 2rem;
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* New Css End */

/* 2/10/2025 */

.consumeBoxs {
    background: var(--white);
    border-radius: 30px;
    padding: 2rem 3rem;
    margin-top: 2rem;
    min-height: 342px;
}

.consumeBoxs * {
    color: var(--black) !important;
}

.consumeHeading {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.consumeHeading h2 span {
    display: block;
    margin-top: 10px;
    font-size: 25px;
}

.consumeHeading h2 {
    font-size: 3rem;
}

.consumeBoxs p {
    font-size: 1.5rem;
    margin: 1rem 0 0 0;
}

.faqBox #accordion .card {
    border: none;
    border-bottom: 1px solid var(--black);
    padding: 0 0 1rem 0;
    background: transparent;
    margin-bottom: 1rem;
    border-radius: unset;
}

.faqBox #accordion .card .btn-link {
    --height: 5rem;
    --width: 4.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--black);
    padding: 0;
    border: 0;
    font-size: 1.5625rem;
    border-radius: 5px;
    text-decoration: none;
    overflow: hidden;
    border-bottom-left-radius: 0;
    text-align: left;
    font-weight: 600;
}

.faqBox #accordion .card .btn-link i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    margin-left: auto;
    background: 000;
    font-size: 1rem;
}

.faqBox #accordion .card .btn-link i::before {
    content: "\f068";
}

.faqBox #accordion .card .btn-link.collapsed i::before {
    content: "\f067";
}

.faqBox #accordion .card+.card {
    margin-top: 0;
}

.faqBox #accordion .card .card-body {
    padding: 0rem 4rem 0.5rem 0rem;
}

.faqBox #accordion .card .card-body p {
    color: var(--black);
    font-size: 1.125rem;
    margin: 10px 0 0 0;
}

.faqBox {
    margin-top: 2rem;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay.active {
    display: flex;
}

.popup {
    width: 100%;
    background: var(--white);
    display: flex;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    position: relative;
    height: 100vh;
}

.popup .left {
    flex: 1;
}

.popup .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popup .right {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
}

.popup .logo {
    font-weight: bold;
    margin-bottom: 20px;
    color: #0f3650;
}

.popup h1 {
    font-size: 3.5rem;
    margin: 0 0 10px;
    color: var(--primary);
    line-height: 1;
}

.popup p {
    font-size: 1.5rem;
    color: var(--priamry);
    width: 85%;
    line-height: 1.3;
    font-weight: 500;
    margin: auto;
    margin-bottom: 1rem;
}

.popup .btn {
    display: block;
    width: 55%;
    margin: 8px 0;
    padding: 14px;
    border: none;
    border-radius: 6px;
    background: #173243;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin: auto;
}

.popup .btn:hover {
    background: #0f2430;
}

.popup .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    outline: unset;
    border: unset;
    font-size: 2rem;
}

.popup .right img {
    width: 200px;
}

.popup .themeBtn {
    background: var(--primary);
    width: 400px;
    padding: 18px 0;
    display: block;
    margin: 14px auto 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.popup .themeBtn:hover {
    background: var(--secondary);
    color: var(--white);
}

.emailInput {
    width: 100%;
    max-width: 500px;
    padding: 12px;
    font-size: 16px;
    margin: 10px 0;
    border: 1px solid var(--black);
    border-radius: 6px;
    outline: unset;
    box-shadow: unset;
}

div#newsletterSection .form-check {
    width: 60%;
    margin: auto;
    display: flex;
    align-items: baseline;
    text-align: left;
    gap: 10px;
}

/* 2/10/2025 */