body {
    background: linear-gradient(180deg, #FFFFFF 0%, #ECEFF2 100%);
    margin: 0;

}

.refuse_section_mb {
    display: none;
}

.logobox {
    padding: 50px 0 45px 0;
}

.onlymb {
    display: none;

}

.claimboxmb {
    display: none;
}

.heading2mb {
    display: none;
}

.mbowner {
    display: none;
}

.product_boxsection_mb {
    display: none;
}

.formbr {
    display: none;
}
.heading2n{
    font-family: Barlow;
    font-weight: 800;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 41px;
    line-height: 60px;
    color: #FFFFFF;
}
/* .box_topm{
        display: flex;
    gap: 73px;
} */
/* .rightdiv{
    width: 80%;
}
.leftdiv{
    width:20%;
} */
.imgboxdivmb {
    display: none;
}

.formb {
    display: none;
}

.leftdiv {
    width: 15%;
    z-index: 999;
}

.imgbanner img {
    margin: 0 auto;
    display: block;
}

.logobox {
    text-align: center;
}

.bannerflx {
    display: flex;
    gap: 36px;
    align-items: center;
}

.banner_section {
    padding-bottom: 82px;
}

.mainhead {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 39px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #688DB7;
    max-width: 677px;
    margin-top: 0;
}

.bannerpara {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    max-width: 671px;
    font-size: 21px;
    line-height: 100%;
    margin-top: 21px;
    margin-bottom: 21px;
    line-height: 26px;
}

.greenbutton {
    padding: 14px 27px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    background-color: #0E726B;
    font-size: 21.51px;
    line-height: 100%;
    max-width: 430px;
    color: #fff;
    border-radius: 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.starbox {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 37px;
    margin-top: 25px;
}

.bannercmnpara {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #000000;
    max-width: 677px;
}

ul.bannercmnpara {
    list-style-type: none;
}

ul.bannercmnpara li {
    position: relative;
    margin-bottom: 5px;
}

ul.bannercmnpara li::after {
    position: absolute;
    content: "✓";
    top: 3px;
    left: -30px;
    font-size: 22px;
    font-weight: 700;
}

.starbox img {
    width: 120px;
    height: 24px;
}

.mb_5 {
    margin-bottom: 25px;
}

.starbox p {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    margin: 0;

}

.imgbanner {
    width: 50%;
}

.contentbanner {
    width: 50%;
}

@media (min-width: 1400px) {
    .container_custom {
        max-width: 1440px;
        margin: 0 30px;
    }
}

/* @media (max-width: 1400px) {
.container_custom{
      max-width: 1440px !important;
              margin: 0 30px !important;
}
} */

/* side div leftdiv css */
.leftdiv a {
    text-decoration: none;
    text-align: center;

}

.leftdiv .imgside {
    margin: 0 auto;
    display: block;
}

.sidedivmainhead {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 26.29px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #688DB7;
    text-decoration: none;
    margin-top: 20px;
}

.savebig {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 43.05px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #688DB7;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 17px;

}

.sidedivclaim {
    /* max-width: 300px; */
    margin: 0 auto;
    display: block;
    margin-bottom: 30px;
    opacity: 1;
    border-radius: 39px;
    background: #0E726B;
    padding: 11px 25px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 18.19px;
    text-align: center;
    color: #fff;
}

.sidedivclaim:hover {
    color: #fff;
}

.btmpsidediv {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16.77px;
    line-height: 100%;
    text-align: center;
    display: inline-block;
    margin-top: 28px;
}

.chwa {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    text-decoration: underline;
    font-size: 16.77px;
    ;
    line-height: 100%;
    text-align: center;
    color: #0E726B;
    display: inline-block;
}

/* review_section */
.review_section {
    padding-bottom: 100px;
}

.rboximg {
    margin: 10px 0;
    width: 100%;
}

.review_section .rvbox {
    background: #ECEFF2;
    /* max-width: 408px; */
    border-radius: 36px;
    padding-top: 22px;
    padding-left: 31px;
    padding-right: 35px;
    padding-bottom: 38px;
    min-height: 364px;

}

.img-fluid {
    max-width: 100%;
}

.rvbox .imguser {
    width: 99px;
    height: 99px;
    display: block;
    margin-bottom: 27px;
}

.rvbox p {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    margin: 0;
}

.refuse_section {
    padding-bottom: 95px;
    position: relative;
    /* background: #0E726B; */
}

.pimg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-25%, -50%);

}

.pimg img {
    width: 100%;
}

@media(max-width:1800px) {
    .pimg {
        position: absolute;
        top: 46%;
        left: 56%;
        transform: translate(-25%, -50%);
    }

    .pimg img {
        width: 80%;
    }
}

@media(max-width:1200px) {
    .pimg img {
        width: 69%;
    }

    .abso img {
        width: 80%;
    }
}

@media(max-width:992px) {
    .pimg {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }

    .abso {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }
}

.refuse_section h2 {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0E726B;
    max-width: 583px;
    margin-bottom: 42px;
}

.cmnparap {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 580px;
    color: #fff;

}

.divb {
    background: #0E726B;
    padding: 30px 0;
}

.boldtxt {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #fff;
}

.algnc {
    align-items: center;
}

.greenbuttona {
    padding: 14px 27px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    background-color: #0E726B;
    font-size: 21.51px;
    line-height: 100%;
    max-width: 430px;
    color: #fff;
    border-radius: 40px;
    text-decoration: none;
    margin-top: 62px;
    display: block;
    text-align: center;
}

.greenbuttona:hover {
    color: #fff;
}

/* solution_section */
.solution_section {
    padding-bottom: 95px;
    padding-top: 100px;
}

.solution_section h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 29.97px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #688DB7;
    max-width: 1116px;
    margin: 0 auto;
    margin-bottom: 58px;
}

.boldtxt2 {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 39px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #000000;
    margin-bottom: 70px;
    margin-top: 82px;
}

.corebtn {
    border: 6px solid #688DB7;
    padding: 21px;
    border-radius: 16px;
    font-family: Barlow;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    font-size: 45px;
    color: #688DB7;
    display: block;
    margin: 0 auto;
    width: 60%;
    text-decoration: none;
}

/* card_section */
/* table */
.card {
    max-width: 930px;
    margin: auto;
    background: #F1F3F6;
    border-radius: 41px;
    padding: 30px 20px;
    box-shadow: 0px 4px 4px 0px #0000001A;
    border: none;
    margin-bottom: 100px;
}

.title {
    text-align: center;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 29px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 35px;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 29px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;

}

td {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    padding: 14px 0;
}

/* vertical dividers */
th:nth-child(2),
td:nth-child(2) {
    border-left: 2px solid #2f8f8f;
}

th:nth-child(3),
td:nth-child(3) {
    border-left: 2px solid #2f8f8f;
}

/* MOBILE */
@media (max-width: 600px) {
    .card {
        padding: 20px 10px;
    }

    .title {
        font-size: 16px;
    }

    th {
        font-size: 13px;
    }

    td {
        font-size: 12px;
    }

    th:nth-child(2),
    td:nth-child(2),
    th:nth-child(3),
    td:nth-child(3) {
        padding-left: 10px;
    }
}

.cardbtm_text {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 23px;
    line-height: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #000000;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}

/* owner_section */
.owner_section {
    padding-top: 93px;
    padding-bottom: 139px;
}

.owner_section h3 {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-weight: bolder;
    font-size: 46px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #688DB7;
    margin-bottom: 38px;
}

.bold_ow {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0%;
    line-height: 25px;
}

.owner_dog_img img {
    margin: 0 auto;
    display: block;
}

.c_ownertxt {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    max-width: 671px;
}

.greenbutton_owner {
    padding: 14px 27px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    background-color: #0E726B;
    font-size: 21.51px;
    line-height: 100%;
    max-width: 430px;
    color: #fff;
    border-radius: 40px;
    text-decoration: none;
    margin-top: 32px;
    display: block;
    text-align: center;
}

.greenbutton_owner:hover {
    color: #fff;
}

.alignc {
    align-items: center;
}

.blacktxt_product {
    font-family: Barlow;
    font-weight: 600;
    font-size: 48.97px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    max-width: 678px;
}

.whitetxt_product {
    color: #ffffff;
    font-family: Barlow;
    font-weight: 600;
    font-size: 48.97px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 678px;
    margin-bottom: 37px;
    margin-top: 0;
}

.blacktxt_product a {
    color: #0E726B;
    font-weight: 800;
    display: inline-block;
}

.product_boxsection {
    position: relative;
}

.product_boxsection p {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #ffffff;
    margin: 0;
}

.abso {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-25%, -50%);
}

.greenbutton_pr {
    padding: 14px 27px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    background-color: #0E726B;
    font-size: 21.51px;
    line-height: 100%;
    max-width: 430px;
    color: #fff;
    border-radius: 40px;
    text-decoration: none;
    margin-top: 62px;
    display: block;
    text-align: center;
}

.greenbutton_pr:hover {
    color: #fff;
}

/* icon_section */
.icon_section {
    /* max-width: 1036px;
    margin: 0 auto; */
    /* display: block; */
    padding-bottom: 100px;
}

.flexbox_div {
    display: flex;
}

.flexbox_div .iconbox {
    width: 33.33%;
}

.iconbox p {
    font-family: Montserrat;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    max-width: 221px;
    margin: 0 auto;
    display: block;
    margin-top: 26px;
}

.icon_section h3 {
    font-family: Barlow;
    font-weight: 600;
    font-size: 41px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 61px;
}

.icon_section h3 a {
    color: #688DB7;
}

.iconbox img {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
}

/* section_4div */
.section_4div {
    /* max-width: 1291px; */
    padding-bottom: 122px;
}

.custm_row {
    display: flex;
    gap: 0 39px;
    align-items: stretch;
}

.col_50 {
    width: 50%;
    flex-direction: column;
    display: flex;

}

.whitediv {
    /* max-width:626px; */
    background: #fff;
    border-radius: 63px;
    padding: 50px;
    flex: 1;
}

.whitediv img {
    width: 100%;
}

.whitediv h5 {
    font-family: Barlow Condensed;
    font-weight: 700;
    font-size: 35px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0E726B;
    text-align: center;
    margin-top: 37px;
    margin-bottom: 32px;
}

.whitediv p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 19px;
}

.whitediv p span {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 23px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    display: block;
}

.mrb_87 {
    margin-bottom: 87px;
}

/* prefer_section */
.prefer_section {
    padding-bottom: 122px;
}

.prefer_section h3 {
    font-family: Barlow;
    font-weight: 800;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 100px;
}

.prefer_section h3 a {
    color: #688DB7;
}

.listing_ul {
    padding: 0;
    max-width: 446px;
}

.listing_ul li {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0%;
    list-style: none;
    display: flex;
    align-items: start;
    gap: 11px;
    margin-bottom: 30px;
}

.listing_ul li img {
    width: 42px;
    height: 43px;
}

.customrow {
    display: flex;
}

/* warning_section */
.warning_section {
    padding-top: 155px;
    padding-bottom: 60px;
    background-color: #0E726B;
    position: relative;
}

.pbbb {
    padding-bottom: 10%;
}

.heading {
    display: flex;
    justify-content: center;
}

.warning_head {
    background: #24242C;
    display: inline-block;
    padding: 14px 15px;
    font-family: Barlow;
    font-weight: 800;
    font-size: 33.49px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    margin: 0;
}

.heading2 {
    font-family: Barlow;
    font-weight: 800;
    font-size: 44px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 41px;
    line-height: 60px;
    color: #FFFFFF;
}

.heading2 span {
    color: #0E726B;
    background-color: #fff;
    border-radius: 50px;
    padding: 5px 12px;
    display: inline-block;

}

.warning_section .paragrap2 {
    font-family: Montserrat;
    font-weight: 800;
    font-size: 29px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    line-height: 30PX;
}

.warning_section .paragrap2 a {
    display: inline-block;
    color: #fff;
}

/* step_section */
.step_section {
    padding-top: 53px;
    padding-bottom: 123px;
}

.stepbox h5 {
    font-family: Barlow;
    font-weight: 800;
    font-size: 40.49px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: #0E726B;
}

.stepbox p {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

/* feeding_section */
.feeding_section h3 {
    font-family: Barlow;
    font-weight: 800;
    font-size: 59px;
    line-height: 100%;
    text-align: center;
    color: #0E726B;
}

.feeding_section .btmtxt {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 43px;
    line-height: 100%;
    text-align: center;
    margin-top: 60px;
}

/* attention_section */
.attention_section {
    padding-top: 74px;
    padding-bottom: 99px;
}

.attention_section h3 {
    font-family: Barlow;
    font-weight: 600;
    font-size: 39.04px;
    text-align: center;
    max-width: 910px;
    margin: 0 auto;
    display: blok;
    margin-top: 20px;
    margin-bottom: 60px;
}

.attention_section h3 a {
    color: #688DB7;
}

.claimbox {
    border: 4px solid #688DB7;
    border-style: dashed;
    border-radius: 30px;
    padding: 72px 20px 72px;
    background-color: #FCFCFD;
    display: flex;
    align-items: center;
}

.content_claim {
    width: 50%;
}

.product_claim {
    width: 50%;
}

.claim_head {
    font-family: Barlow;
    font-weight: 800;
    font-size: 37.04px;
    ;
    line-height: 100%;
    text-align: center;
    color: #688DB7;
}

.claim_head a {
    color: #688DB7;
}

.claimp {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    text-align: center;
    margin-bottom: 25px;
}

.claimp a {
    color: #000;
    font-weight: 700;
}

.greenbutton_prc {
    margin: 0 auto;
    padding: 14px 27px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    background-color: #0E726B;
    font-size: 21.51px;
    line-height: 100%;
    max-width: 430px;
    color: #fff;
    border-radius: 40px;
    text-decoration: none;
    margin-top: 10px;
    margin-bottom: 19px;
    display: block;
    text-align: center;
}

.greenbutton_prc:hover {
    color: #fff;
}

.clicktxt {
    font-family: Montserrat;
    font-weight: 500;
    font-style: Italic;
    font-size: 17px;
    line-height: 100%;
    text-align: center;
    color: #0E726B;
    display: block;
}

/* money_back */
.money_back {
    padding-top: 66px;
    padding-bottom: 99px;

}

.moneyback_div h3 {
    font-family: Barlow;
    font-weight: 800;
    font-size: 39px;
    line-height: 100%;
    text-align: center;
    color: #688DB7;
    margin-bottom: 30px;
    margin-top: 45px;

}

.moneyback_div {
    font-family: Montserrat;
    font-weight: 500;
    font-style: Bold;
    font-size: 22px;
    line-height: 100%;
    color: #000000;
    max-width: 1221px;
    margin: 0 auto;
}

.moneyback_div p a {
    font-weight: 700;
    color: #000;
}

.moneyback_div {
    border-radius: 30px;
    background-color: #FFFFFF;
    padding: 80px 53px;
}

.moneyback_div img {
    margin: 0 auto;
    margin-top: -11%;
    display: block;
}

.primg3 {
    width: 50%;
}

.abbs {
    width: 50%;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}

.mainsection {
    position: relative;
}

.leftdiv {
    position: fixed;
    right: 0;
    top: 0;
    background: #fff;
    padding: 0px 25px;
}

.wid50 {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.rowc {
    display: flex;
    gap: 20px;
}

.col_33 {
    width: 33.33%;
}

.container_custom {
    max-width: 1440px;
    margin: 0 30px;
}

@media(max-width:1920px) {
    .container_custom {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 20% 0 0;
    }
}

@media(max-width:1800px) {
    .container_custom {
        /* max-width: 1200px; */
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20% 0px 22px;
    }
}

@media(max-width:1440px) {
    .container_custom {
        max-width: 992px;
        margin: 0 auto;
        padding: 0 25% 0px 36px;
    }
}

@media(max-width:1200px) {
    .container_custom {
        max-width: 776px;
        margin: 0 auto;
        padding: 0 25% 0px 36px;
    }

    .leftdiv {
        width: 18%;
    }
}

@media(max-width:992px) {
    .leftdiv {
        display: none;
    }

    .container_custom {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 15px;
    }
}

.col_6 {
    width: 50%;
}

@media(max-width:1440px) {
    .heading2 {
        margin-top: 0;
    }
     .heading2n {
        margin-top: 0;
    }

    .review_section .rvbox {
        border-radius: 20px;
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 10px;
        min-height: 364px;
    }

    .iconbox img {
        width: 130px;
        height: 130px;
    }

    .iconbox p {
        font-size: 20px;
    }

    .whitediv {
        padding: 30px 20px;
    }

    .claimbox {
        padding: 40px 20px 40px;
    }

    .corebtn {
        width: 80%;
    }

    .mainhead {
        font-size: 30px;
        margin-top: 0;
    }

    .bannerpara {
        font-size: 15px;
        margin-top: 12px;
        margin-bottom: 15px;
    }

    .greenbutton {
        font-size: 15px;
        text-align: center;
                display: block;
    }
.greenbuttona{
        font-size: 15px;
}
    .starbox {
        margin-bottom: 16px;
        margin-top: 16px;
    }

    .bannercmnpara {
        font-size: 14px;
        line-height: 18px;
        margin: 10px 0;
    }

    .rowc {
        display: flex;
        gap: 15px;
    }

    .rvbox .imguser {
        width: 60px;
        height: 60px;
        display: block;
        margin-bottom: 18px;
    }

    .banner_section {
        padding-bottom: 70px;
    }

    .review_section {
        padding-bottom: 70px;
    }

    .sidedivmainhead {
        font-size: 22px;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .savebig {
        font-size: 38.05px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .sidedivclaim {
        /* max-width: 300px; */
        margin-bottom: 10px;
        border-radius: 30px;
        padding: 11px 15px;
        font-size: 13.19px;
    }

    .solution_section {
        padding-bottom: 70px;
        padding-top: 70px;
    }

    .boldtxt2 {
        font-size: 28px;
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .corebtn {
        font-size: 32px;
    }

    td {
        font-size: 15px;
        padding: 14px 12px;
    }

    .card {
        margin-bottom: 70px;
    }

    .owner_section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .owner_section h3 {
        margin-top: 0;
    }

    .c_ownertxt {
        font-size: 13px;
        line-height: 20px;
        max-width: 100%;
    }

    .greenbutton_owner {
           font-size: 15px;
        display: block;
    }
.greenbutton_pr{
    font-size: 15px;
}
    .icon_section {
        /* display: block; */
        padding-bottom: 70px;
    }

    .whitediv h5 {
        font-size: 26px;
        margin-top: 17px;
        margin-bottom: 17px;
    }

    .whitediv p {
        font-size: 15px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .whitediv p span {
        font-size: 18px;
    }

    .mrb_87 {
        margin-bottom: 50px;
    }

    .custm_row {
        display: flex;
        gap: 0 15px;
        align-items: stretch;
    }

    .whitediv {
        border-radius: 30px;
    }

    .section_4div {
        padding-bottom: 70px;
    }

    .prefer_section h3 {
        margin-bottom: 60px;
        margin-top: 0;
    }

    .listing_ul li {
        font-size: 22px;
    }

    .listing_ul li img {
        width: 22px;
        height: 20px;
    }

    .stepbox h5 {
        font-size: 36.49px;
        margin: 20px 0;
    }

    .stepbox p {
        font-size: 22px;
    }

    .step_section {
        padding-top: 53px;
        padding-bottom: 50px;
    }

    .feeding_section h3 {
        margin: 0;
    }

    .attention_section {
        padding-top: 40px;
        padding-bottom: 70px;
    }

    .feeding_section .btmtxt {
        font-size: 35px;
    }

    .warning_head {
        font-size: 25px;
    }

    .attention_section h3 {
             font-size: 30px;
    }

    .claim_head {
        margin-top: 0;
        font-size: 28.04px;
    }

    .claimp {
        font-size: 18px;
    }

    .greenbutton_prc {
        text-align: center;
           font-size: 15px;
    }

    .moneyback_div img {
        margin: 0 auto;
        margin-top: -18%;
        display: block;
        width: 20%;
    }

    .moneyback_div h3 {
        font-size: 34px;
        margin-bottom: 28px;
        margin-top: 8px;
    }

    .prefer_section {
        padding-bottom: 70px;
    }
}

@media(max-width:1200px) {
    .warning_section {
        padding-top: 120px;
    }

    .logobox {
        padding: 20px 0 20px 0;
    }

    .iconbox img {
        width: 96px;
        height: 96px;
    }

    .heading2 {
        font-size: 36px;
        line-height: 38px;
    }
     .heading2n {
        font-size: 36px;
        line-height: 38px;
    }

    .warning_section .paragrap2 {
        font-size: 20px;

    }

    .moneyback_div {
        font-size: 18px;
    }
}

@media(max-width:992px) {
    .prefer_section {
        padding-bottom: 40px;
    }

    .abbs {
        width: 50%;
        position: absolute;
        top: 0%;
        left: 60%;
        transform: translate(-50%, -50%);
        margin: 0 auto;
    }

    .warning_section {
        padding-top: 90px;
    }

    .mainhead {
        font-size: 27px;
        margin: 0;
    }

    .heading2 {
        font-size: 34px;
        line-height: 40px;
    }
      .heading2n {
        font-size: 34px;
        line-height: 40px;
    }

    .warning_section .paragrap2 {
        font-size: 20px;
        margin-bottom: 0;
    }

    .bannerpara {
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 8px;
        line-height: 17px;
    }

    th {
        font-size: 20px;
    }

    .card {
        margin-bottom: 50px;
    }

    .bold_ow {
        margin: 0;

    }

    .moneyback_div {
        padding: 35px 37px;
    }

    .moneyback_div {
        font-size: 17px;
    }
}

@media(max-width:767px) {
    .pbbb {
        padding-bottom: 15%;
    }

    .primg3 {
        width: 70%;
    }

    .abbs {
        width: 50%;
        position: absolute;
        top: 0%;
        left: 55%;
        transform: translate(-50%, -50%);
        margin: 0 auto;
    }

    .heading2 {
        font-size: 28px;
        line-height: 29px;
        margin: 0;
    }
     .heading2n {
        font-size: 28px;
        line-height: 29px;
        margin: 0;
    }

    .bannerflx {
        gap: 0;
        flex-wrap: wrap;
    }

    .imgbanner {
        width: 100%;
    }

    .contentbanner {
        width: 100%;
        text-align: center;
    }

    .mainhead {
        font-size: 36px;
        margin: 20px 0;
        text-align: center;
    }

    .greenbutton {
        font-size: 15px;
        text-align: center;
        display: block;
        margin: 0 auto;
    }

    .starbox {
        justify-self: center;
    }

    .col_33 {
        width: 100%;
    }

    .rowc {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .rboximg {
        max-width: 50%;
        display: block;
    }

    .review_section .rvbox {
        min-height: auto;
    }

    .review_section .rvbox {
        border-radius: 20px;
        padding-top: 25px;
        padding-left: 25px;
        padding-right: 22px;
        padding-bottom: 25px;
    }

    .col_6 {
        width: 100%;
    }

    .c_ownertxt {
        font-size: 16px;
    }

    .custm_row {
        flex-wrap: wrap;
    }

    .col_50 {
        width: 100%;
    }

    .whitediv {
        border-radius: 30px;
        margin-bottom: 30px;
    }

    .mrb_87 {
        margin: 0;
    }

    .whitediv h5 {
        font-size: 30px;
        margin-top: 22px;
        margin-bottom: 22px;
    }

    .whitediv p {
        font-size: 17px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .whitediv p span {
        font-size: 22px;
    }

    .claimbox {
        flex-wrap: wrap;
    }

    .content_claim {
        width: 100%;
    }

    .product_claim {
        width: 100%;
    }
}

.divg {
    background: #0E726B;
}

@media(max-width:992px) {
    .pimg {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }

    .abso {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }
}


@media(max-width:575px) {
    .mainhead {
        display: none;
    }

    .formb {
        display: block;
    }

    .bannerpara {
        font-size: 16px;
        margin-top: 30px;
        margin-bottom: 20px;
        line-height: 18px;
    }

    .greenbutton {
        font-size: 16px;
        text-align: center;
        display: block;
        margin: 0 auto;
        /* width: 60%; */
    }


    .bannercmnpara {
        font-size: 14px;
        line-height: 18px;
        margin: 10px 0;
        text-align: left;
    }

    .imgboxdivmb {
        display: flex;
        align-items: center;
    }

    .ibox {
        width: 50%;
    }

    .cbox {
        width: 50%;
    }

    .sidedivclaim {
        text-decoration: none;
    }

    .imgboxdivmb {
        background: #fff;
        box-shadow: 0px -1px 4px 0px #0000001A;
        /* margin: 20px 0; */
        padding: 20px 12px;

    }

    .sidedivclaim {
        font-size: 12.19px;
    }

    .review_section .rvbox {
        border-radius: 20px;
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 10px;
        border-radius: 10px;
    }

    .rvbox .imguser {
        width: 60px !important;
        height: 60px;
        display: block;
        margin-bottom: 18px;
    }

    .rboximg {
        max-width: 100% !important;
        display: block;
        margin: 3px 0;
    }

    .greenbutton_prc {

        font-size: 16px;
    }

    .st {
        width: 50% !important;
    }

    .owl-nav {
        display: none;
    }

    .owl-dots {
        display: none;
    }

    .formbr {
        display: block;
    }

    .hidemb {
        display: none;
    }

    .banner_section {
        padding-bottom: 50px;
    }

    .review_section {
        padding-bottom: 40px;
    }

    .bgggg {
        background: #0e726b;
        padding: 15px 31px;
    }

    .refuse_section_mb h2 {
        font-family: "Barlow", sans-serif;
        font-weight: 800;
        font-size: 40px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #0E726B;
        max-width: 583px;
        margin-bottom: 42px;
        text-align: center;
    }

    .refuse_section {
        display: none;
    }

    .refuse_section_mb {
        display: block;
    }

    .greenbuttona {
        display: block;
        margin: 0 auto;
        margin-top: 30px;
        font-size: 16px;
    }

    .card {
        border-radius: 20px;
    }

    .mbowner {
        font-family: "Barlow", sans-serif;
        font-weight: 800;
        font-weight: bolder;
        font-size: 40px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        color: #688DB7;
        margin-bottom: 38px;
        margin-top: 18px;
        display: block;
    }

    .owner_section h3 {
        display: none;
    }

    .greenbutton_owner {
      font-size: 16px;
        display: block;
        margin: 0 auto;
    }

    .product_boxsection_mb {
        text-align: center;
    }

    .blacktxt_product {
        font-size: 41.97px;
    }

    .whipm {
        font-family: Montserrat;
        font-weight: 500;
        font-size: 22px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #ffffff;
        margin: 0;
    }

    .product_boxsection {
        display: none;
    }

    .product_boxsection_mb {
        display: block;
    }

    .whitetxt_product {
        font-size: 41.97px;
    }

    .whitediv {
        max-width: 80%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .customrow {
        display: flex;
        flex-wrap: wrap;
    }

    .customrow {
        display: block;
        max-width: 70%;
        margin: 0 auto;
    }

    .listing_ul {
        margin: 0;
    }

    .warning_section {
        padding-top: 130px;
    }

    .pbbb {
        padding-bottom: 22%;
    }

    .abbs {
        width: 50%;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0 auto;
    }

    .primg3 {
        width: 100%;
    }

    .heading2mb {
        font-family: Barlow;
        font-weight: 800;
        font-size: 20px;
        letter-spacing: 0%;
        text-align: center;
        margin-bottom: 20px;
        line-height: 28px;
        color: #FFFFFF;
        display: block;
    }

    .heading2mb span {
        color: #0E726B;
        background-color: #fff;
        border-radius: 50px;
        padding: 5px 12px;
        display: inline-block;

    }

    .heading2 {
        display: none;
    }

    .warning_section .paragrap2 {
        font-size: 16px;
        margin: 0;
        line-height: 22px;
    }

    .step_section {
        padding-top: 45px;
        padding-bottom: 50px;
    }

    .stepbox h5 {
        font-size: 30.49px;
        margin: 20px 0;
    }

    .stepbox p {
        font-size: 17px;
    }

    .feeding_section h3 {
        font-size: 40px;
    }

    .feeding_section .btmtxt {
        font-size: 26px;
        margin: 15px 0;
    }

    .warning_head {
        font-size: 24px;
    }

    .claimboxmb {
        border: 4px solid #688DB7;
        border-style: dashed;
        border-radius: 16px;
        padding: 0 20px 72px;
        background-color: #FCFCFD;
        align-items: center;
    }

    .wid50 {
        width: 60%;
        display: block;
        margin: -44% auto auto;
    }

    .attention_section h3 {
              font-size: 25px;
        padding-bottom: 30%;
    }

    .claimbox {
        display: none;
    }

    .claimboxmb {
        display: block;
    }

    .attention_section {
        padding-top: 0px;
        padding-bottom: 30px;
    }

    .moneyback_div h3 {
        font-size: 28px;
        margin-bottom: 28px;
        margin-top: 8px;
    }

    .onlymb {
        display: block;
    }

    .onlud {
        display: none;
    }

    .rvbox p {
        font-family: "Montserrat", sans-serif;
        font-weight: 500;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0%;
        margin: 0;
    }

    .banner_section {
        padding-bottom: 20px;
    }

    .review_section .rvbox {
        border-radius: 20px;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        border-radius: 10px;
    }
}

@media(max-width:480px) {
    .warning_section {
        padding-top: 80px;
    }
}

@media(max-width:420px) {
    .mainhead {
        font-size: 25px;
        margin: 0 0 9px 0;
        text-align: center;
    }

    .logobox img {
        width: 255px;
    }

    .logobox {
        padding: 20px 0 5px 0;
    }

    /* .greenbutton {
        width: 80%;
    } */

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

    .cmnparap {
        font-size: 14px;
    }

    /* .greenbuttona {
        font-size: 17px;
    } */

    .solution_section h3 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .solution_section {
        padding-bottom: 50px;
        padding-top: 50px;
    }

    .boldtxt2 {
        font-size: 17px;
        margin-bottom: 30px;
        margin-top: 14px;
    }

    .corebtn {
        font-size: 24px;
        padding: 11px;
    }

    th {
        font-size: 13px;
    }

    td {
        font-size: 11px;
        padding: 10px 6px;
    }

    .card {
        padding: 15px 3px;
    }

    .cardbtm_text {
        font-size: 15px;
    }

    .owner_section {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .mbowner {
        font-size: 29px;
        margin-bottom: 14px;
    }

    .bold_ow {
        font-size: 16px;
    }

    /* .greenbutton_owner {
        font-size: 18.51px;
    } */

    .blacktxt_product {
        font-size: 29.97px;
        margin: 20px 0;
    }

    .whitetxt_product {
        font-size: 31.97px;
        margin: 0 0 19px 0;
    }

    .whipm {
        font-size: 16px;
    }

    .icon_section h3 {
        font-size: 29px;
    }

    .iconbox img {
        width: 60px;
        height: 60px;
    }

    .iconbox p {
        font-size: 12px;
        margin: 10px 0 0 0;
    }

    .icon_section {
        /* display: block; */
        padding-bottom: 36px;
    }

    .whitediv h5 {
        font-size: 25px;
        margin-top: 22px;
        margin-bottom: 22px;
    }

    .whitediv p {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .section_4div {
        padding-bottom: 40px;
    }

    .prefer_section h3 {
        margin-bottom: 45px;
        margin-top: 0;
        font-size: 30px;
    }

    .customrow {
        display: block;
        max-width: 98%;
        margin: 0 auto;
    }

    .listing_ul li {
        font-size: 17px;
        margin: 0 0 14px;
    }

    .warning_head {
        font-size: 17px;
        margin-top: 20px;
    }

    .warning_section {
        padding-top: 80px;
    }

    .heading2mb {
        font-family: Barlow;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: 0%;
        text-align: center;
        margin-bottom: 20px;
        line-height: 15px;
        color: #FFFFFF;
        display: block;
    }

    .warning_section .paragrap2 {
        font-size: 14px;
        margin: 0;
        line-height: 22px;
    }

    .warning_section {
        padding-bottom: 40px;
    }

    .stepbox h5 {
        font-size: 26.49px;
        margin: 16px 0;
    }

    .stepbox p {
        font-size: 16px;
    }

    .attention_section h3 {
        font-size: 26px;
        padding-bottom: 25%;
    }

    .claimboxmb {
        padding: 0 20px 40px;
    }

    .moneyback_div img {
        margin: 0 auto;
        margin-top: -21%;
        display: block;
        width: 34%;
    }

    .money_back {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .moneyback_div h3 {
        font-size: 20px;
        margin-bottom: 20px;
        margin-top: 13px;
    }

    .moneyback_div {
        font-size: 15px;
        padding: 24px 20px;
    }

    .whitediv p span {
        font-size: 18px;
    }
}







.site-footer {
    background: #688DB7;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    padding: 28px 20px;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    margin: 0 8px;
}

@media (max-width:575px) {
    .site-footer {
        padding: 28px 0px;
        font-size: 11px;
    }
}


/* new_css */

.leftdiv {
    top: 98px;
}

.leftdiv {
    width: 18%;
}

.logobox {
    padding: 30px 0 30px 0;
}

.savebig {
    font-size: 39px;
    margin-bottom: 10px;
}

.sidedivclaim {
    margin-bottom: 10px;
}

.sidedivmainhead {
    line-height: 5px;
}

@media (max-width:1800px) {
    .leftdiv {
        padding: 0px 5px;
    }

    .bannerflx {
        gap: 20px;
    }
}

@media (max-width:1440px) {
    .sidedivmainhead {
        line-height: 100%;
    }
}

@media (max-width:1200px) {
    .leftdiv {
        width: 24%;
        padding: 0px 0px;
        top: 10px;
    }

    .sidedivmainhead {
        margin-top: 0px;
    }
}

.lnk {
    color: #fff;
}

.clamp_a {
    display: flex;
}

.show_mobile {
    display: none;
}


@media (max-width:575px) {
    .imgboxdivmb {
        position: relative;
        height: auto;
    }

    /* both stacked in same place */
    .offer-box {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;

        opacity: 0;
        transition: opacity 0.5s ease;
    }

    /* visible one */
    .offer-box.show {
        opacity: 1;
        position: relative;
    }

    /* hide one */
    .offer-box.hide {
        opacity: 0;
    }

    .offer-box {
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .offer-box.hide {
        transform: translateY(-10px);
    }

    .offer-box.show {
        transform: translateY(0);
    }

    .offer-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ibox {
        width: 35%;
    }

    .cbox {
        width: 65%;
        padding-right: 25px !important;
    }


}





@media (max-width:575px) {

    .imgboxdivmb {
        position: fixed;
        /* 🔥 change from relative */
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: #fff;
        padding: 10px 8px;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    }

    /* keep your existing code */
    .offer-box {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.5s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .offer-box.show {
        opacity: 1;
        position: relative;
        transform: translateY(0);
    }

    .offer-box.hide {
        opacity: 0;
        transform: translateY(-10px);
    }

    .site-footer {
        padding-bottom: 250px;
    }

    .show_mobile {
        display: block;
    }

    .sidedivmainhead {
        padding-right: 12px;
        padding-left: 12px;
    }


}

@media (max-width:480px) {
    .site-footer {
        padding-bottom: 200px;
    }


}


/* ===============================
   BASE CONTAINER
================================ */
.interactive-guide {
    position: relative;
    max-width: 1200px;
    width: 100%;
    aspect-ratio: 1271 / 620;
    background-image: url('./images/ingrediants.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
}

/* ===============================
   HOTSPOTS
================================ */
.hotspot {
    position: absolute;
    max-width: 310px;
    width: auto;
    cursor: pointer;
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
    padding: 8px;
}

.hotspot:hover,
.hotspot.active {
    z-index: 9999;
}

/* Desktop Positions */
.hs-top-left {
    top: 23%;
    left: 2%;
}

.hs-top-right {
    top: 23%;
    right: 3%;
}

.hs-bottom-left {
    bottom: 5%;
    left: 10%;
}

.hs-bottom-right {
    bottom: 5%;
    right: 13%;
}

/* ===============================
   HOTSPOT TEXT
================================ */
.hotspot-text {
    color: #688DB7;
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(16px, 2vw, 28px);
    transition: color 0.2s ease;
}

.hs-top-left .hotspot-text,
.hs-bottom-left .hotspot-text {
    text-align: right;
}

.hs-top-right .hotspot-text,
.hs-bottom-right .hotspot-text {
    text-align: left;
}

.hotspot:hover .hotspot-text {
    color: #000;
}

/* ===============================
   POPUP (DESKTOP TOOLTIP)
================================ */
.info-popup {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 280px;
    max-width: 90vw;
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    color: #000;
    z-index: 10000;
}

/* Show popup */
.hotspot:hover .info-popup,
.hotspot.active .info-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    z-index: 10000;
}

/* Desktop positioning */
.hs-top-left .info-popup,
.hs-top-right .info-popup {
    top: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.98);
    z-index: 10000;
}

.hs-bottom-left .info-popup,
.hs-bottom-right .info-popup {
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.98);
    z-index: 10000;
}

/* Active state (desktop) */
.hotspot:hover .info-popup,
.hotspot.active .info-popup {
    transform: translateX(-50%) translateY(0) scale(1);
    z-index: 10000;
}

/* ===============================
   POPUP CONTENT
================================ */
.p-title {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    display: block;
}

.p-sub {
    font-size: 0.75rem;
    text-align: center;
    color: #777;
    font-style: italic;
    margin-bottom: 10px;
    display: block;
}

.ing-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #edf2f6;
    font-size: 0.8rem;
}

.ing-val {
    font-weight: 700;
    text-align: right;
    border-left: 2px solid #688DB7;
    padding-left: 10px;
    width: 95px;
}

.p-footer {
    margin-top: 10px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 1260px) {
    .hotspot {
        max-width: 275px;
    }

    .hs-top-left {
        top: 22%;
        left: -4%;
    }
}

/* ===============================
   TABLET (≤1024px)
================================ */
@media (max-width: 1024px) {
    .interactive-guide {
        max-width: 800px;
    }

    .hotspot {
        max-width: 200px;
    }
}

/* ===============================
   MOBILE / TABLET FIX (≤992px)
   👉 CENTERED POPUP MODE
================================ */
@media (max-width: 991px) {

    .info-popup {
        position: fixed !important;

        /* Reset all desktop positioning */
        top: 10vh !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;

        /* Center horizontally only */
        transform: translateX(-50%) scale(0.95) !important;

        width: min(280px, 92vw) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;

        z-index: 9999 !important;
        pointer-events: none !important;
    }

    /* Active / visible state */
    .hotspot.active .info-popup,
    .hotspot:hover .info-popup {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(-50%) scale(1) !important;
        pointer-events: auto !important;
    }

    /* Kill ALL directional rules */
    .hs-top-left .info-popup,
    .hs-top-right .info-popup,
    .hs-bottom-left .info-popup,
    .hs-bottom-right .info-popup {
        top: 10vh !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) scale(0.95) !important;
    }

    .hs-top-right {
        top: 22%;
        right: 3%;
    }

    .hs-top-left {
        top: 22%;
        left: 5%;
    }

    .hs-bottom-left {
        bottom: 5%;
        left: 13%;
    }
}

/* ===============================
   MOBILE (≤768px)
================================ */
@media (max-width: 768px) {

    .interactive-guide {
        max-width: 85%;
        background-image: url('./images/ingrediants_mob.png');
    }

    .hotspot {
        max-width: 155px;
        padding: 6px;
    }

    .hotspot-text {
        font-size: clamp(12px, 3vw, 16px);
    }

    /* Adjust hotspot positions */
    .hs-top-left {
        top: 22%;
        left: 1%;
    }

    .hs-top-right {
        top: 22%;
        right: 1%;
    }

    .hs-bottom-left {
        bottom: 0%;
        left: 7%;
    }

    .hs-bottom-right {
        bottom: 0%;
        right: 10%;
    }
}

@media (max-width: 575px) {
    .interactive-guide {
        max-width: 95% !important;
    }
}

/* ===============================
   SMALL MOBILE (≤480px)
================================ */
@media (max-width: 480px) {

    .interactive-guide {
        max-width: 100% !important;
        height: 270px;
    }

    .hotspot {
        max-width: 110px;
    }

    .hotspot-text {
        font-size: 13px;
    }

    .info-popup {
        font-size: 0.7rem;
    }

    .ing-val {
        width: 55px;
    }

    .hs-top-right {
        top: 20%;
        right: -3%;
    }

    .hs-bottom-right {
        bottom: 0%;
        right: 6%;
    }

    .hs-top-left {
        top: 20%;
        left: 0%;
    }

    .hs-bottom-left {
        bottom: 0%;
        left: 3%;
    }
}

@media (max-width: 400px) {
    .hotspot {
        max-width: 90px;
    }

    .interactive-guide {
        max-width: 100% !important;
        height: 245px;
    }

    .hotspot-text {
        font-size: 12px;
    }

    .hs-top-right {
        top: 20%;
        right: 0%;
        width: 65px;
    }

    .hs-bottom-right {
        bottom: 0%;
        right: 0%;
    }

    .hs-top-left {
        top: 20%;
        left: -2%;
    }

    .hs-bottom-left {
        bottom: -3%;
        left: 2%;
        width: 65px;
    }
}

/* ===============================
   iOS HOVER FIX
================================ */
@media (hover: none) {

    /* Disable hover-based popup on touch devices */
    .hotspot:hover .info-popup {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Only .active should open popup on touch */
    .hotspot.active .info-popup {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

.heading2n span {
    color: #0E726B;
    background-color: #fff;
    border-radius: 50px;
    padding: 1px 27px;
    display: inline-block;
    line-height: 50px;
}

@media(max-width:575px){
.heading2n {
    font-size: 22px;
    line-height: 30px;
    margin: 28px 0 0 0;
}
.heading2n span {
    color: #0E726B;
    background-color: #fff;
    border-radius: 50px;
    padding: 1px 24px;
    display: inline-block;
    line-height: 40px;
}
}

.logobox img{
    width: 300px;
}