body{
    background-color: #fff;
    color: #3D3938;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/*global attributes*/
figure, h1, h2, h3, h4, h5, h6, hr, pre {
   margin: 0px;
   margin-bottom: 1rem;
}
img, svg {
   width: 100%;
}
.center-t{
   text-align: center;
}
.align-c{
   align-items: center;
}
.just-c{
   justify-content: center;
}
.just-b{
    justify-content: space-between;
 }
a{
   text-decoration: none;
   cursor: pointer;
}
p{
   font-size: 20px;
   color: #0E0701;
   line-height: 30px;
   margin-bottom: 0px;
}
.fs-60{
   font-size: 60px;
}
.fs-50{
   font-size: 50px;
}
.fs-45{
   font-size: 44px;
}
.fs-43{
   font-size: 43px;
   line-height: 45px;
}
.fs-40{
   font-size: 40px;
   line-height: 48px;
}
.fs-35{
   font-size: 35px;
   line-height: 40px;
}
.fs-38{
   font-size: 38px;
}
.fs-30{
   font-size: 30px;
   line-height: 38px;
}
.fs-26{
   font-size: 26px;
   line-height: 31px;
   letter-spacing: 1.3px;
}
.fs-25{
   font-size: 25px;
   line-height: 28px;
}
.fs-24{
   font-size: 24px;
   line-height: 28px;
}
.fs-21{
    font-size: 21px;
    line-height: 24px;
 }
.fs-17 {
   font-size: 17px;
 }
.fs-15 {
   font-size: 15px;
 }
.fs-14 {
   font-size: 14px;
 }
.fbold{
   font-weight: 700;
}
.mbold{
    font-weight: 600;
}
.bolder{
   font-weight: 800;
}
.bolder2{
   font-weight: 900;
}
.rad8{
   border-radius: 8px;
}
.rad10{
   border-radius: 10px;
}
.rad20{
   border-radius: 20px;
}
/*text styles*/
.upcase{
   text-transform: uppercase;
}
/*colors*/
.light-gray{
   background-color: #F5F5F3;
}
.black-fc{
   color: #000;
}
.orange-fc{
   color: #E37714;
}
.orange2-fc{
   color: #FFA048;
}
.white-fc{
   color: #fff;
}
.red-fc{
   color: #c50909;
}
.gray-fc{
   color: #494949;
}
.brown-bg{
   background-color: #644E36;
}
.light-brown{
   background-color: #F0EAE4;
}
.light-bg2{
   background-color: #F4F1EE;
}
.light-bg3{
   background-color: #F6F6F6;
}
.light-bg4{
   background-color: #43584e;
}
.green-bg{
   background-color: #1E554E;
}
.green2-bg{
   background-color: #24655D;
}
.green3-bg{
   background-color: #21342D;
}
.light-green{
   background-color: #3f534b;
}
.white-bg{
   background-color: #fff;
}
.gray-bg{
   background-color: #3D3938;
}
.gray-bg2{
   background-color: #EAEAEA;
}
.orange-bg{
   background-color: #E37714;
}
.green-fc{
   color: #21342D;
}
.container{
   padding: 0px;
   max-width: 1140px;
   /*border: 1px red solid;*/
}
.wcont{
   width: 940px;
   margin: 0px auto;
}
.container-fluid{
   padding: 0px;
}
.relative-p{
   position: relative;
}
/*flex gaps*/
.gap-30{
   gap: 30px;
}
.gap-20{
   gap: 20px;
}
.gap-10{
   gap: 10px;
}
.gap-50{
   gap: 50px;
}
/*paddings*/
.inner-p1{
   padding: 50px;
}
.inner-p2{
   padding: 40px 0px;
}
.inner-p3{
   padding: 30px;
}
.inner-p4{
   padding: 30px 0px;
}
.inner-p5{
   padding: 20px;
}
.inner-p6{
    padding: 50px 0px;
 }
.cursor{
   cursor: pointer;
}
.active{
   border: 6px #D7542E solid;
   border-radius: 8px;
}
.m1{
   margin-top: 40px;
   margin-bottom: 40px;
}
.m2{
   margin-top: 30px;
}
.m3{
   margin: 10px auto 0px auto;
}
.m4{
   margin: 20px auto;
}
.hide-desk{
   display: none;
}
.top-p{
   padding: 9px;
}
#top-nav{
   border-bottom: 1px #e4e4e4 solid;
   padding: 20px 0px;
}
#top-nav div{
   justify-content: space-between;
}
#top-nav .navbar-brand img{
   max-width: 246px;
}
#top-nav .buy-btn{
   width: 251px;
}
.buy-btn{
   max-width: 273px;
   width: 273px;
   color: #fff;
   font-size: 21px;
   background-image: linear-gradient(180deg, rgba(246,171,59,1) 50%, rgba(234,147,17,1) 100%);
   border-radius: 10px;
   padding: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
}
.buy-btn:hover{
   background-image: linear-gradient(180deg, rgba(234,147,17,1) 50%, rgba(246,171,59,1) 100%);
}
.cart-i{
   max-width: 45px;
}
.cart-arrow{
   max-width: 9px;
}

#top-menu {
   margin-left: 14%;
 }
#top-nav .nav-link {
   color: black;
 }
.slider{
   justify-content: space-between;
   align-items: center;
   gap:20px;
}
.thumbnails{
   display: flex;
   flex-direction: column;
   gap: 15px;
   justify-content: space-between;
}
.thumbnails img{
   max-width: 107px;
}
.slide-img{
   max-width: 510px;
   width:510px;
}
.benefits {
   width: 40%;
   display: flex;
   flex-direction: column;
   position: relative;
 }
.b-list{
   background-color: #fff;
   padding: 15px 10px;
   font-weight: 700;
   border-radius: 7px;
}
.b-list img{
   max-width: 40px;
}
.stars{
   max-width: 122px;
}
.arrow1{
   position: absolute;
   right: 8%;
   top: 49%;
   max-width: 55px;
}
.bounce {
   animation: bounce 2s infinite;
 }
 
 @keyframes bounce {
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
     opacity: 1;
   }
   40% {
     transform: translateY(-30px);
     opacity: 0.5;
   }
   60% {
     transform: translateY(-15px);
     opacity: 1;
   }
}
.lb{
   justify-content: space-between;
}
.c-list{
   gap: 20px;
   border-radius: 110px;
   max-width: 268px;
   padding: 15px 20px;
   width: 268px;
   align-items: center;
   font-weight: 700;
   justify-content: center;
}
.c-list img{
   max-width: 35px;
}
.customer{
   border-radius: 8px;
   border: 1px #D3C9BE solid;
   flex-direction: column;
   max-width: 85%;
   margin: 30px auto;
   position: relative;
}
.lost{
   padding: 10px 20px;
   border-radius: 8px;
   color: #fff;
   align-items: center;
}
.lost img{
   max-width: 28px;
}
.c-name{
   justify-content: space-between;
   align-items: center;
   padding: 15px 25px;
   border-bottom: 1px #D3C9BE solid;
}

.going{
   width: 50%;
   padding: 30px;
}
.going img{
   max-width: 288px;
   margin:0px auto;
   display: block;
}
.to-this{
   width: 50%;
   border-radius: 8px;
   border: 4px #6ABEB4 solid;
   padding: 30px;
}
.to-this img{
   max-width: 288px;
   margin:0px auto;
   display: block;
}
.fl-end{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.orange-arrow1{
   position: absolute;
   top: 20%;
   max-width: 177px;
   left: 40%;
}
.star2{
   max-width: 131px;
}
#benefits{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/hand-bottle.webp) !important;
    padding-top: 60px;
    padding-bottom: 40px;
   background-repeat: no-repeat;
   background-position: top right;
   background-size: contain;
   background-color: #fcfbfa;
   position: relative;
}
.d-list {
   padding: 5px 10px;
   line-height: 25px;
 }
.d-list img{
max-width: 60px;
 }
.people{
   max-width: 670px;
   position: absolute;
   right: -3%;
}
.true{
   width: 52%;
   padding:30px 30px 30px 0px;
}
.benefits2 {
   width: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
 }
.benefits2.gap-10 .light-bg3 {
   border: 1px #E3DCD5 solid;
 }

.cody-sec{
	 background-attachment: fixed;
   background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/cody-bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top right;
   background-color: #2a443b;
}
.cody-pic{
   max-width: 462px;
}
.mark{
   padding:2px;
}
.mark2{
   background-color: #FFD9B7;
   transition: background-color 0.3s ease-in-out;
}
.mark3{
   background-color: #FFC9BA;
}
.pattern1{
   max-width: 223px;
}
.arrow2{
   position: absolute;
   top: 27%;
    max-width: 46px;
    right: 20%;
    rotate: 10deg;
}
.ampk{
   background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/ampk-bg.jpg);
   background-repeat: no-repeat;
   background-position: top left;
   background-size: contain;
   box-shadow: 0px 4px 24px 0px rgba(0,0,0,0.10);
   margin-top: -5%;
   background-color: #fff;
}
.ampk div{
   width: 68%;
   margin-left: auto;
}
.ampk u{
   text-decoration-thickness: 3px;
}
.lose-weight{
   width: 60%;
}
.woman2{
   max-width: 300px;
}
.woman3{
   max-width: 300px;
   width: 300px;
}
.test{
   width: 33%;
   display: flex;
   align-items: center;
   flex-direction: column;
}
.test img{
   max-width: 208px;
   width: 208px;
   margin: 0px auto;
   display: block;

}
.simple{
   background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/simple-bg.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #efebe8;
   background-position: bottom left;
}
.rating{
   max-width: 321px;
}
.just-take{
   width: 70%;
   margin-left: auto;
}
.berberine{
   background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/berberine-bg-min.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #4e3d2b;
   background-position: top right;
   padding: 30px 30px 30px 30px;
}
.berberine .w-100m{
   width: 75%;
}
.inflammation{
   background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/cells-bg.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: top left;
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0px 4px 24px 0px rgba(0,0,0,0.10);
   margin-top: -5%;
}
.inflammation .w-100m{
   width: 70%;
   margin-left: auto;
}
.smlist{
   display: flex;
   border: 1px #DFDFDF solid;
   background-color: #fff;
   overflow-x: hidden;
   position: relative;
}
.smlist img{
   max-width: 338px;
   width: 338px;
   opacity: 0;
}
.arrow3{
   position: absolute;
   max-width: 70px !important;
   width: 70px !important;
   right: -9.5%;
   top: 32%;
   z-index: 3;
   rotate: -15deg;
}
.arrow4{
   position: absolute;
   max-width: 50px !important;
   width: 50px !important;
   left: -7.5%;
   top: 58%;
   z-index: 3;
}
.b1g2-btn{
   padding: 10px 20px;
   border-radius: 70px;
   margin: 30px auto;
   max-width: 342px;
   text-align: center;
}
/*sales section*/
.sales-sec{
   background-color: #F4F3F2;
}
.sales-box{
   border-radius: 8px;
   box-shadow: 0px 4px 24px 0px rgba(0,0,0,0.10);
   overflow: hidden;
}
.sales-img{
   max-width: 394px;
   width: 394px;
}
.b1{
   background-color: #e4ddd7;
   background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/one-hand-bg1.webp) !important;
   background-repeat: no-repeat;
   background-position: bottom;
   width: 45%;
   background-size: contain;
}
.b2{
   width: 60%;
   padding: 30px 45px;
}
.sales-benefits {
   display: flex;
   flex-direction: column;
   position: relative;
 }
.price{
   font-size: 70px;
}
.price sup{
   font-size: 40px;
}
.price-sec{
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.sales-sec .buy-btn{
   background-image: linear-gradient(180deg, rgba(246,171,59,1) 0%, rgba(234,147,17,1) 100%);
   border: 1px #D8870E solid;
   cursor: pointer;
}
.sales-sec .buy-btn:hover{
   background-image: linear-gradient(180deg, rgba(234,147,17,1) 0%, rgba(246,171,59,1) 100%);
}
.join-img {
   max-width: 270px;
}
.arrow5{
   max-width: 50px;
   position: absolute;
   bottom: 20%;
   right: 2%;
}
.gbadge{
   max-width: 217px;
   position: absolute;
   bottom: 10%;
   left: -30%;
}
.comparison-table{
   border-radius: 20px;
   padding: 30px;
   display: flex;
   gap: 5px;
   flex-direction: column;
}
.w33{
   width: 30%;
   text-align: center;
}
.w40{
   width: 40%;
   text-align: center;
}
.bbr{
   background-color: #E5F5F3;
   border: 3px #6ABEB4 solid;
}
.one-bot{
   max-width: 71px;
   width: 71px;
}
.checkm{
   max-width: 34px;
}
.left-a{
   text-align: left;
}
.flex-col{
   flex-direction: column;
}

.highest-q .w-100m{
   width: 73%;
}
.orange-border{
   border: 6px #E37714 solid;
   box-shadow: 20px 14px 24px 0px #D7542E26;

}
.sales-sec2 .b-list{
   background-color: #fff;
   padding: 10px;
}
.d-name {
   justify-content: space-between;
   align-items: center;
   padding: 15px 25px 0px 25px;
 }
.d-name img{
   max-width: 100px;
 }
.testimony{
   box-shadow: 0px 14px 14px 0px rgba(0,0,0,0.10);
   max-width: 100%;
 }

.f-name {
   align-items: center;
   padding: 15px 25px;
   border-bottom: 1px #D3C9BE solid;
 }
.plant{
   max-width: 338px;
   width: 338px;
}
.faqs-det{
   max-width: 100%;
}
.gbadge3{
   max-width: 245px;
   width: 245px;
}
.hpguarantee .fs-17{
   line-height: 27px;
}
.hphelp{
   background-color: #2B453B;
}
.call-btn{
   border-radius: 70px;
   background-color: #FFB648;
   max-width: 319px;
   width: 300px;
   padding: 10px;
   justify-content: space-around;
   display: flex;
   align-items: center;
}
.wbreak{
   word-wrap: break-word;
}
.how-may{
   justify-content: space-between;
}
.call-box{
   display: flex;
   align-items: end;
   flex-direction: column;
}

/*additional css 08-29-24*/
.not-hungry{
    width: 67%;    
}
.twenty-per{
    background-color: #d6a768;
    height: 221px;
    padding: 30px 50px;
    width: 480px;
}
.twenty-per h2{
    font-size: 128px;
    line-height: 128px;
}
#blood-sugar{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/woman-bg2.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    height: 1000px;
}
#blood-sugar.bsugar{
      background-position: 0px -30px;
}
#percentage{
 z-index:-1; 
}
.zpos{
 z-index:1; 
}
.grocery{
    max-width: 401px;
    width: 401px;
}
.roughly h2{
    background-color: #346660;
    border-radius: 10px;
    display: inline-block;
}
.secret-weapon{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/woman3-reflection.webp);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
}
.best-part{
    width: 65%;
    margin-left: auto;
}
.pink-bg{
    background-color: #fcf1e7;
}
#health-ben{
    list-style: disc;
    margin-left: 20px;
}
#health-ben li{
    font-size: 20px;
}
.bg-image1{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/fuller.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-image2{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/digestion.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-image3{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/cravings.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.ber-three{
    max-width: 367px;
    width: 367px;
}
.ber-boost{
    padding-bottom: 100px;
}
.ber-ampk {
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.10);
    margin-top: -10%;
    background-color: #fff;
    z-index: 3;
    position: relative;
    margin-bottom: -40px;
}
.relax{
    max-width: 363px;
    width: 363px;
}
.check-m{
    max-width: 68px;
    width: 68px;
}
.roboto{
    font-family: "Roboto", sans-serif;
}
.cody-sec .container{
    max-width: 1083px;
}
.kicker {
    width: 69%;
    margin-left: auto;
}
.oregon{
    background-size: contain;
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/oregon.webp);
    background-position: top left;
    background-repeat: no-repeat;
}
.shadow{
    box-shadow: 0px 4px 24px 0px rgba(0,0,0,0.10);
}
.amaze{
    max-width: 370px;
    width: 370px;
}
.lower-risk{
    max-width: 372px;
    width: 372px;
}
.ground-b img{
    max-width: 68px;
    width: 68px;
}
.studies{
    max-width: 500px;
    width: 500px;
}
.fat-blaster{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/fat-blaster.webp);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}
.blaster{
    width: 65%;
    margin-right: auto;
}
.ber-img{
    max-width: 367px;
    width: 367px;

}
.risk-free{
    background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/ber2-img.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}
.try-ber{
    width: 70%;
}
.double{
    background-color: #346660;
    border-radius: 10px;
    display: inline-block;
}
.complete{
    margin-top: -5%;
    margin-bottom: 4%;
}
.one-time{
    padding-bottom: 5%;
}
.d-flex.smlist.rad8.m2.flex-col-rev {
    justify-content: space-between;
}
.pink-bg2{
    background-color: #f4d9b7;
}
#faqs1 {
    color: #3D3938;
}
#faqs1 p{
    color: #3D3938;
}
.quotes{
    max-width: 25px;
    width: 25px;
    position: absolute;
    right: -20px;
    top: 0px;
}
.buy-back{
    width: 95%;
}

/*screen css*/

@media screen and (min-width: 1600px){
    #blood-sugar{
        margin-right: 10%;
    }
    .secret-weapon{
        background-size: 35%;
    }
    .oregon {
        background-size: 35%;
    }
    .fat-blaster{
        background-size: 35%;
    }
}
@media screen and (max-width: 1399px) and (min-width: 768px){
   figure, h1, h2, h3, h4, h5, h6, hr, pre {
       margin-bottom: 1.143vw;
   }
   p{
       font-size: 1.429vw;
       line-height: 2.143vw;
   }
   .fs-60{
       font-size: 4.286vw;
   }
   .fs-50{
       font-size: 3.571vw;
   }
   .fs-45{
       font-size: 3.143vw;
   }
   .fs-43{
       font-size: 3.071vw;
       line-height: 3.214vw;
   }
   .fs-40{
       font-size: 2.857vw;
       line-height: 3.429vw;
   }
   .fs-35{
       font-size: 2.500vw;
       line-height: 2.857vw;
   }
   .fs-38{
       font-size: 2.714vw;
   }
   .fs-30{
       font-size: 2.143vw;
       line-height: 2.714vw;
   }
   .fs-26{
       font-size: 1.857vw;
       line-height: 2.214vw;
   }
   .fs-25{
       font-size: 1.786vw;
       line-height: 2vw;
   }
   .fs-24{
       font-size: 1.714vw;
       line-height: 2vw;
   }
   .fs-17 {
       font-size: 1.214vw;
     }
   .fs-15 {
       font-size: 1.071vw;
     }
   .fs-14 {
       font-size: 1vw;
     }
   .rad8{
       border-radius: 0.571vw;
   }
   .rad10{
       border-radius: 0.714vw;
   }
   .rad20{
       border-radius: 1.429vw;
   }
   .container{
       max-width: 81.429vw;
   }
   .wcont{
       width: 67.143vw;
   }
   /*flex gaps*/
   .gap-30{
       gap: 2.143vw;
   }
   .gap-20{
       gap: 1.429vw;
   }
   .gap-10{
       gap: 0.714vw;
   }
   .gap-50{
       gap: 3.571vw;
   }
   /*paddings*/
   .inner-p1{
       padding: 3.571vw;
   }
   .inner-p2{
       padding: 2.857vw 0px;
   }
   .inner-p3{
       padding: 2.143vw;
   }
   .inner-p4{
       padding: 2.143vw 0px;
   }
   .inner-p5{
       padding: 1.429vw;
   }
   .m1{
       margin-top: 2.857vw;
       margin-bottom: 2.857vw;
   }
   .m2{
       margin-top: 2.143vw;
   }
   .m3{
       margin: 0.714vw auto 0px auto;
   }
   .m4{
       margin: 1.429vw auto;
   }
   .top-p{
       padding: 0.643vw;
   }
   #top-nav{
       padding: 1.429vw 0px;
   }
   #top-nav .navbar-brand img{
       max-width: 17.571vw;
   }
   #top-nav .buy-btn{
       width: 17.929vw;
   }
   .buy-btn{
       max-width: 19.500vw;
       width: 19.500vw;
       font-size: 1.500vw;
       border-radius: 0.714vw;
       padding: 0.714vw;
   }
   .cart-i{
       max-width: 3.214vw;
   }
   .cart-arrow{
       max-width: 0.643vw;
   }
   .slider{
       gap:1.429vw;
   }
   .thumbnails{
       gap: 1.071vw;
   }
   .thumbnails img{
       max-width: 7.643vw;
   }
   .slide-img{
        max-width: 36.429vw;
        width:36.429vw;
    }
   .b-list{
       padding: 1.429vw 0.714vw;
   }
   .b-list img{
       max-width: 2.857vw;
   }
   .stars{
       max-width: 8.714vw;
   }
   .arrow1{
       max-width: 3.929vw;
   }
   .c-list{
       gap: 1.429vw;
       border-radius: 7.857vw;
       max-width: 19.143vw;
       padding: 1.071vw 1.429vw;
       width: 19.143vw;
   }
   .c-list img{
       max-width: 2.500vw;
   }
   .customer{
       border-radius: 0.571vw;
       margin: 2.143vw auto;
   }
   .lost{
       padding: 0.714vw 1.429vw;
       border-radius: 0.571vw;
   }
   .lost img{
       max-width: 2vw;
   }
   .c-name{
       padding: 1.071vw 1.786vw;
   }
   .going{
       padding: 2.143vw;
   }
   .going img{
       max-width: 20.571vw;
   }
   .to-this{
       border-radius: 0.571vw;
       border: 0.286vw #6ABEB4 solid;
       padding: 2.143vw;
   }
   .to-this img{
       max-width: 20.571vw;
   }
   .orange-arrow1{
       max-width: 12.643vw;
   }
   .star2{
       max-width: 9.357vw;
   }
   .d-list {
       line-height: 1.786vw;
       padding: 0.357vw 0.714vw;
     }
   .d-list img{
        max-width:  4.286vw;
     }
   .people{
       max-width: 47.857vw;
   }
   .true{
       padding:2.143vw 2.143vw 2.143vw 0px;
   }

   .mark{
       padding: 0.143vw;
   }
   .pattern1{
       max-width: 15.929vw;
   }
   .arrow2{
       max-width: 3.286vw;
   }
   .woman2{
       max-width: 21.429vw;
   }
   .woman3{
       max-width: 21.429vw;
       width: 21.429vw;
   }
   .test img{
       max-width: 14.857vw;
       width: 14.857vw;
   }
   .rating{
       max-width: 22.929vw;
   }
   .berberine{
       padding: 2.143vw;
       background-position-x: 110%;
   }
   .inflammation{
       border-radius: 0.571vw;
       box-shadow: 0px 0.286vw 1.714vw 0px rgba(0,0,0,0.10);
   }
   .smlist img{
       max-width: 24.143vw;
       width: 24.143vw;
   }
   .arrow3{
       max-width: 5vw !important;
       width: 5vw !important;
   }
   .arrow4{
       max-width: 3.571vw !important;
       width: 3.571vw !important;
   }
   .b1g2-btn{
       padding: 0.714vw 1.429vw;
       border-radius: 5vw;
       margin: 2.143vw auto;
       max-width: 24.429vw;
   }
   /*sales section*/
   .sales-box{
       border-radius: 0.571vw;
   }
   .sales-img{
       max-width: 28.143vw;
       width: 28.143vw;
   }
   .b2{
       padding: 2.143vw 3.214vw;
   }
   .price{
       font-size: 5vw;
   }
   .price sup{
       font-size: 2.857vw;
   }
   .join-img {
       max-width: 19.286vw;
   }
   .arrow5{
       max-width: 3.857vw;
   }
   .gbadge{
       max-width: 15.500vw;
   }
   .comparison-table{
       border-radius: 1.429vw;
       padding: 2.143vw;
       gap: 0.357vw;
   }
   .bbr{
       border: 0.214vw #6ABEB4 solid;
   }
   .one-bot{
       max-width: 5.071vw;
       width: 5.071vw;
   }
   .checkm{
       max-width: 2.429vw;
   }
   .orange-border{
       border: 0.429vw #E37714 solid;
   }
   .sales-sec2 .b-list{
       padding: 0.714vw;
   }
   .d-name {
       padding: 1.071vw 1.786vw 0px 1.786vw;
     }
   .d-name img{
       max-width: 7.143vw;
     }
   .f-name {
       padding: 1.071vw 1.786vw;
     }
   .plant{
       max-width: 24.143vw;
       width: 24.143vw;
   }
   .gbadge3{
       max-width: 17.500vw;
       width: 17.500vw;
   }
   .hpguarantee .fs-17{
       line-height: 1.929vw;
   }
   .call-btn{
       border-radius: 5vw;
       max-width: 22.786vw;
       width: 21.429vw;
       padding: 0.714vw;
   }
   .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 0.571vw;
        padding-left: 0.571vw;
  }
  /*additional css*/
   #benefits {
    padding-top: 4.286vw;
    padding-bottom: 2.857vw;
    }
  .twenty-per{
        height: 15.786vw;
        padding: 2.143vw 3.571vw;
        width: 34.286vw;
    }
    .twenty-per h2{
        font-size: 9.143vw;
        line-height: 9.143vw;
    }
    #blood-sugar{
        height: 71.429vw;
    }
    .inner-p6{
        padding: 3.571vw 0px;
     }
     .grocery{
        max-width: 28.643vw;
        width: 28.643vw;
    }
    .roughly h2{
        border-radius: 0.714vw;
    }
    
    #health-ben{
        margin-left: 1.429vw;
    }
    #health-ben li{
        font-size: 1.429vw;
    }
    .ber-three{
        max-width: 26.214vw;
        width: 26.214vw;
    }
    .ber-boost{
        padding-bottom: 7.143vw;
    }
    .ber-ampk {
        margin-bottom: -2.857vw;
    }
    .relax{
        max-width: 25.929vw;
        width: 25.929vw;
    }
    .check-m{
        max-width: 4.857vw;
        width: 4.857vw;
    }
    .cody-sec .container{
        max-width: 77.357vw;
    }
    
    .amaze{
        max-width: 26.429vw;
        width: 26.429vw;
    }
    .lower-risk{
        max-width: 26.571vw;
        width: 26.571vw;
    }
    .ground-b img{
        max-width: 4.857vw;
        width: 4.857vw;
    }
    .studies{
        max-width: 35.714vw;
        width: 35.714vw;
    }
    
    .ber-img{
        max-width: 26.214vw;
        width: 26.214vw;
    }
    
    .double{
        border-radius: 0.714vw;
    }
    .quotes{
        max-width: 1.786vw;
        width: 1.786vw;
        right: -1.429vw;
    }
    .fs-21 {
        font-size: 1.5vw;
        line-height: 1.714vw;
    }
    .cody-pic {
        max-width: 33vw;
    }
    #reviewCounter {
        width: 3.714vw;
    }
}
@media screen and (max-width: 1100px){
    #top-menu {
        margin-left: 2%;
      }
}
@media screen and (max-width: 767.5px){
  #blood-sugar.bsugar {
    background-position: 0;
}
   .flex-col-m{
    flex-direction: column;
   }
   .flex-col-rev{
    flex-direction: column-reverse;
   }
   .flex-row-m{
    flex-direction: row-reverse;
   }
   .w-100m{
    width: 100%;
   }
   #top-nav{
    padding: 20px;
    background-color: white;
   }
   #top-nav .navbar-nav.me-auto.mb-lg-0 {
    text-align: center;
    }
    #top-nav .buy-btn {
    width: 251px;
    margin: 0px auto;
    }
    #top-nav .navbar-brand {
        margin: 0px auto;
      }
   .thumbnails{
    flex-direction: row;
   }
   .inner-p2 {
    padding: 20px;
    }
    .fs-45 {
        font-size: 28px;
        line-height: 30px;
    }
    .fs-35 {
        font-size: 28px;
        line-height: 32px;
      }
    .fs-60 {
        font-size: 30px;
      }
    .c-list{
        margin: 0px auto;
        max-width: 100%;
        width: 95%;
    }
    .hide-br{
        display: none;
    }
    .c-name{
        flex-direction: column;
    }
    .orange-arrow1 {
        top: 50%;
        left: 70%;
        rotate: 85deg;
      }
    .going {
        padding: 20px;
      }
    .to-this{
        padding: 20px;
    }
    .hide-mob{
        display: none;
    }
    .show-mob{
        display: block;
    }
    .people {
        position: relative;
        right: 0px;
        margin: 0px auto;
      }
    .true {
        margin-left: 0;
        padding: 20px;
      }
    .center-mob{
        text-align: center;
    }
    .wcont {
        width: 100%;
    }
    .mark3-mob{
        background-color: #eaa55d;
    }
    .trans-mob{
        background-color: transparent;
        font-weight: 700;
    }
    .arrow2 {
        bottom: -10%;
        rotate: -20deg;
        display: none;
      }
    .bold-mob{
        font-weight: 700;
    }
    .ampk {
        background-image: none;
    }
    .ampk div {
        width: 100%;
    }
    .woman2 {
        margin: 0px auto;
        display: block;
      }
    .woman3{
        margin: 0px auto;
    }
    .studies{
        padding: 0px 20px 0px 20px;
    }
    .simple {
        background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/one-bot-bg.jpg);
        background-position: top center;
        padding-top: 65%;
        background-size: 100%;
    }
    .berberine {
        background-image: none;
        padding: 20px;
    }
    .berberine .w-100m {
        width: 100%;
      }
    .img-auto{
        margin: 0px auto;
        display: block;
    }
    #details h2 {
        margin-top: 20px;
      }
    #details .inner-p4 {
        padding: 0px;
      }
    .inflammation{
        background-image: none;
        margin-top: 0px;
    }
    .inflammation .w-100m {
        width: 100%;
      }
    .inner-p3 {
        padding: 20px;
      }
    .inner-p4{
        padding: 20px;
    }
    .smlist img{
        margin: 0px auto;
        display: block;
    }
    .arrow3{
        right: 3.5%;
        top: 62%;
    }
    .arrow4{
        left: 0%;
        top: 33%;
    }
    .fs-40 {
        font-size: 28px;
        line-height: 32px;
      }
    .highest-q .w-100m {
        width: 100%;
      }
    .highest-q {
        background-image: none;
    }
    .highest-q h2{
        margin-top: 20px;
    }
    .d-name{
        flex-direction: column;
        text-align: center;
    }
    .call-box{
        align-items: center;
    }
    .how-may{
        text-align: center;
    }
    .call-btn{
        margin: 10px auto;
    }
    .cody-pic {
        max-width: 330px;
        margin: 0px auto;
      }
    .cody-sec .fs-35 {
        display: block;
        margin-bottom: -5%;
      }

    /*sales mob*/
    .sales-benefits{
        flex-direction: column-reverse;
    }
    .b1{
        display: none;
    }
    .b2 {
        width: 100%;
        padding:0px;
        background-color: #f6f4f2;
        border: 1px #C5C5C5 solid;
    }
    .hmob{
        background-color: #ECEAE8;
        padding:10px;
        border-bottom: 1px #C5C5C5 solid;
    }
    .mob-box{
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 0px;
    }
    .one-bott{
        max-width: 130px;
    }
    .gbadge {
        max-width: 120px;
        bottom: 0;
        left: 0%;
        top: -10%;
      }
    .b-list{
        width: 80%;
        margin: 0px auto;
    }
    .orange-border{
        border: 0px;
    }
    .sales-sec2 .b-list{
        background-color: transparent;
    }
    #top-menu {
        margin-left: 0px;
      }
    .customer .fs-35 {
        font-size: 23px;
      }
    #top-nav .navbar-toggler{
        border-color: transparent;
        border: 0px solid transparent;
      }
    #top-nav .buy-btn {
        margin: 0px auto 10px;
      }
    /*additional css*/
    .center-m{
        text-align: center;
    }
    .buy-btn{
        font-size: 1.286vw;
    }
    #blood-sugar{
        position: relative;
        height: 800px;
        background-size: cover;
        background-position: center;
        margin-top: 20px;
    }
    .twenty-per{
        width: 100%;
        margin: 0px auto;
    }
    .inner-p6 {
        padding: 20px 20px;
    }
    .grocery{
        max-width: 500px;
        height: 300px;
        width: 100%;
        object-fit: cover;
        margin: 0px auto;
    }
    .gap-50 {
        gap: 20px;
    }
    .secret-weapon {
        background-image: none;
    }
    .ber-three{
        margin: 0px auto 20px auto;
        width: 100%;
    }
    .ber-ampk{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
    .relax{
        margin: 0px auto;
    }
    #benefits{
        background-image: none !important;
        padding-bottom: 0px;
    }
    .oregon{
        background-image: none;
    }
    .lowered{
        padding: 0px 20px;
    }
    .myth{
        margin-bottom: 20px;
    }
    .fat-blaster{
        background-image: none;
    }
    .ber-img{
        margin: 20px auto;
    }
    .quotes{
        display: none;
    }
    .risk-free{
        background-image: none;
    }
    .complete{
        width: 95%;
    }
    .ber-boost {
        padding-bottom: 10%;
    }
    .relax{
        width: 100%;
    }
    .oregon-img{
        max-width: 500px;
        width: 100%;
        height: 300px;
        object-fit:cover;
        margin-bottom: 10px;
    }
    
}
@media screen and (max-width: 600px){

    .slide-img {
        max-width: 100%;
        width: 100%;
      }
    #top-nav {
        padding: 2px 10px;
      }
    #top-nav .nav-link {
        padding: 5px;
      }
    .one-bott {
        max-width: 93px;
        width: 93px;
    }
    .buy-btn {
        max-width: 203px;
    }
    .cart-i {
        max-width: 35px;
      }
    .b-list {
         width: 100%;
      }
    .fs-24 {
        font-size: 20px;
    }
    .comparison-table{
        border-radius: 0px;
        padding: 10px;
        gap: 10px;
    }
    .comparison-table .hide-mob {
        display: none !important;
      }
    .plant {
        max-width: 100%;
        width: 100%;
      }
    .d-flex.white-bg.inner-p5.rad10.just-c {
        flex-direction: column;
        gap: 5px;
      }
    .w40 {
        width: 100%;
    }
    .comparison-table .w33{
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
    .checkm {
        max-width: 25px;
      }
    .bbr{
        flex-direction: column;
      }
    .comparison-table .left-a{
        text-align: center;
      }
    #why-buy {
        padding: 0px;
      }
    .sales-sec.inner-p2 {
        padding: 0px;
      }
    .hmob{
        font-size: 20px;
        padding:5px;
    }
    .gbadge {
        max-width: 70px;
        top: -13%;
    }
    .customer{
        max-width: 100%;
        margin: 20px auto 0px;
    }
    .d-list {
        padding: 0px;
    }
    .cody-sec{
        padding-bottom: 0px;
        background-image: none;
    }
    .cody-sec .inner-p5 {
        border-radius: 8px;
      }

    .m2 {
        margin-top: 20px;
      }
    .ampk{
        margin-top: 0px;
    }
    .gap-30 {
        gap: 10px;
      }
    .smlist img {
        max-width: 100%;
        width: 100%;
      }
    .sales-box .b-list{
        padding: 0px 10px 10px;
    }
    .highest-q .wcont {
        padding-bottom: 0px;
      }
    .more-than{
        padding: 15px 10px;
    }
    .highest-q {
        padding: 0px 0px 15px 0px;
      }
    .fs-50 {
        font-size: 30px;
      }
    .fs-30 {
        font-size: 25px;
        line-height: 28px;
    }
    .hpguarantee .fs-17 {
        padding-top: 0px;
      }
    .white-fc.wbreak {
        font-size: 15px;
      }
    .inner-p5.light-green.white-fc.rad20.m3.center-t {
        font-size: 16px;
        line-height: 20px;
        border-radius: 0px;
      }
    .c-list{
        justify-content: start;
    }
    .arrow2 {
        bottom: -17%;
    }
    #blood-sugar{
        height: 500px;
    }
    .twenty-per h2 {
        font-size: 100px;
        line-height: 100px;
    }
    .twenty-per{
        height: 180px;
    }
    .inner-p1 {
        padding: 20px;
    }
    .arrow3 {
        right: 5%;
        top: 66%;
    }
    .check-m {
        max-width: 38px;
        width: 38px;
    }
}  
@media screen and (max-width: 400px){
    .inner-p5 {
        padding: 10px;
      }
    .arrow1 {
        top: 65%;
        max-width: 35px;
      }
    .arrow2{
        right: 0%;
    }
    .sales-sec .buy-btn{
        padding: 5px;
        max-width: 180px;
    }
    .hmob{
        text-align: right;
    }
    .mob-box{
        gap: 20px;
    }
    .call-btn{
        max-width: 250px;
    }
    .white-fc.fs-40.bolder {
        font-size: 24px;
      }
    .fs-38 {
        font-size: 27px;
    }
    .simple.inner-p2 {
        padding-bottom: 0px;
    }
} 

/***end of screen css*/

/*wf-css*/
.slink1:hover {
    color: #fff;
}
#sitefooter {
  background-color: #2B453B !important;
}
#app {
overflow-x: hidden;
}
#sitefooter .container {
max-width: 1140px !important;
}
#sitefooter img {
  filter: invert(10%) sepia(0%) saturate(0%) hue-rotate(130deg) brightness(100%) contrast(1000%) !important;
}
.buy-btn{
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
}
body{
color: #000;
}
.pattern1 {
margin: 0px auto !important;
}
.mySlides {
display: none;
}
.tk-adv {
justify-content: center; 
gap: 10px;
align-items: center;
max-width: 70%;
margin: 0px auto;
}
.tk-adv .gray-arw{
max-width: 24px;
width: 24px;
height: 35px;
}

#top-menu {
margin-left: 6%;
}
#top-menu .navbar-nav.me-auto.mb-lg-0 {
gap: 1.429vw;
}
/*hover navlink*/
#top-nav .nav-item::after {
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background: #E37714;
  transition: width .2s;
}
#top-nav .nav-item:hover::after {
  width: 100%;
}

.rating {
margin: 0px auto;
}
.stars {
margin: 0px auto;
}


.join-img {
margin: 0px auto;
}
.sales-sec .b-list {
padding: 10px 10px;
}
.sales-sec2 .b-list {
padding: 8px 10px;
}
#faqs1 h1 {
margin-bottom: 20px;
}
.sales-sec.inner-p2 .b1 {
background-size: 107%;
background-position-x: -1%;
}
.sales-sec2.inner-p2 .b1{
background-size: contain;
background-position-x: -1%;
}
.active{
  border: none;
  border-radius: 0px;
}
.thumbnails {
display: flex !important;
}
/*carousel*/

.carousel-indicators {
  position: unset;
  right: unset;
  bottom: unset;
  left: unset;
  z-index: unset;
  display: unset;
  justify-content: unset;
  padding: unset;
  margin-right: unset;
  margin-bottom: unset;
  margin-left: unset;
  list-style: unset;
}
.carousel-indicators [data-bs-target] {
  height: fit-content;
  background-color: unset !important;
}
ol{
  list-style: none;
}
.list-inline-item {
  line-height: 0px;
}
#top-nav .navbar-toggler {
padding: 0px;
}

/*pop-up*/
#pop-up .modal-header{
  align-items: self-start;
}
#pop-up .modal-header .btn-close{
  margin-left: 0px;
}

#pop-up .modal-header div{
  width: 95%;
}
#pop-up .modal-dialog {
  max-width: 960px;
}
.special-offer{
  max-width: 340px;
  margin: 0px auto 10px auto;
  padding: 5px 10px;
  background-color: #21342D;
  color: white;
  border-radius: 50px;
  text-align: center;
}
.b2g4-sec{
  width: 60%;
}
.nty-btn{
  max-width: 250px;
  margin: 10px auto 0px auto;
  color: #ffff;
  padding: 15px 20px;
  border-radius: 12px;
  background: linear-gradient(138deg, rgba(185,185,185,1) 38%, rgba(165,165,165,1) 62%, rgba(145,145,145,1) 100%, rgba(0,212,255,1) 100%);
}
.nty-btn:hover{
  background: linear-gradient(138deg, rgba(165,165,165,1) 38%, rgba(145,145,145,1) 62%, rgba(185,185,185,1) 100%, rgba(0,212,255,1) 100%);
}
.cards-{
  max-width: 200px;
  margin: 20px auto;
}
.pbadge{
  max-width: 80px;
}
.yes-take{
  border-radius: 30px;
  padding: 20px;
  margin: 20px 0px;
}
.b2g4-sec img {
  max-width: 500px;
}

/*toggle sales section*/
.togll-sec{
  border-radius: 10px;
  overflow-x: hidden;
  background-color: #fff;
  margin-top: 5px;
}  
/*modal backdrop*/
.modal-backdrop{
background-color: #1D1D1D !important;
opacity: 1 !important;
}
.simple {
background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/img/simple-bg1.jpg) !important;
}




@media screen and (min-width: 1500px){
.inflammation{
margin-top: -50px;
}
}

@media screen and (max-width: 960px){
#top-menu {
margin-left: 0px;
}
#top-nav .nav-link {
font-size: 1.8vw;
}
}
@media screen and (max-width: 767px){
.comparison-table .show-mob {
display: none !important;
}
.tk-adv{
 max-width: 90%;
}
.buy-btn{
font-size: 18px;
 max-width: 253px;
}
.benefits2.gap-10 .light-bg3{
background-color: #F4EFE9;
}
#benefits{
background-image: none;
}
#top-menu {
margin-left: 0px;
}
#top-nav .nav-link {
font-size: 20px;
}
.col-md-4.flogo {
flex-direction: row;
display: flex;
justify-content: space-between;
}
#sitefooter {
  padding-top: 20px;
}
.customer .fs-35 {
display: block;
margin-bottom: -30px;
text-align: center;
}
.customer .star2 {
margin-bottom: 10px;
}
#pop-up .b2g4-sec {
width: 100%;
}
/*toggle section*/
#top-nav{
      padding:0px !important;
  }
  #top-menu{
      background-color: #3D3938;
      padding: 10px 10px !important;
  }
  #top-nav .nav-link {
      color: #fff !important;
    }
  #top-nav .buy-btn{
      max-width: 250px;
    }
  #top-nav .nav-item:hover::after {
      width: 30%;
      margin: 0px auto;
  }
#top-nav .container.flex-row-m {
padding: 0px !important;
}
#top-nav .navbar-toggler {
margin-left: 3%;
}
.simple {
  background-image: url(https://happierhealthiersupplements.com/assets/berberine-b1g2-new/lander/img/one-bot-bg1.jpg) !important;
}
}
@media screen and (max-width: 600px){
.top-p p{
font-size: 3.333vw;
}
#top-nav .navbar-brand img {
max-width: 200px;
}
.comparison-table .show-mob {
display: block !important;
}
.star2 {
margin-bottom: 10px;
}
.lost {
padding: 10px;;
font-size: 17px;
}
.fs-38 {
font-size: 28px;
}
.mob-box{
padding: 20px 0px 0px;
}
.gbadge {
max-width: 80px;
top: -10%;
}
}
@media screen and (max-width: 425px){
.cart-i{
display: none;
}
.cart-arrow {
display: none;
}
.buy-btn{
justify-content: center;
}
.light-bg2.inner-p2 {
padding: 10px 0px;
}
#benefits .container {
padding: 0px !important;
}
.d-list img {
max-width: 40px;
}
.true h2 {
text-align: center;
}
#top-nav {
padding: 2px 0px;
}
}

@media (max-width: 575px) {
  #app .container {
    padding: 10px 15px !important;
  }
  .true {
    padding: 10px;
  }
  .studies {
    padding: 0px;
    width: 100%;
  }
   .berberine {
    padding: 10px;
  }
  #faq-btn{
  margin-bottom: 10px;
  }
  #sitefooter{
  padding-bottom: 20px;
  }
  .sales-sec.inner-p3.sales-sec2 {
    padding: 10px 0px;
  }
  .sales-sec .container{
    padding: 10px;
  }
  .ber-img{
    width: 100%;
    margin: 20px auto 0px auto;
  }
  .highest-q h2 {
    margin-top: 0px;
    }
  .amaze{
    width: 100%;
  }
  .lower-risk{
    width: 100%;
  }
  .arrow4{
  display: none;
  }
  .arrow3{
  display: none;
  }
	.ber-ampk {
    width: 99%;
  }
  .benefits2{
  	gap: 10px;
  }
	.simple.inner-p2 {
    padding-right: 10px;
    padding-left: 10px;
	}
  .pm-1{
  padding: 10px;
  }
  .m4{
  	margin-top: 0px;
  }
  .call-btn{
  justify-content: center !important;
  }
}

/*text animations*/
.animated-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  
  .animated-text.visible {
    opacity: 1;
    transform: translateY(0);
}
/*fade-in animation*/
.fade-text {
    opacity: 0;
    transition: opacity 1.9s ease-in-out;
  }
  
  .fade-text.visible {
    opacity: 1;
  }
.fade-text2 {
    opacity: 0;
    transition: opacity 3s ease-in-out;
}
  
.fade-text2.visible {
    opacity: 1;
  }
@media screen and (min-width: 768px){
/*typewriter animations*/
.typewriter h2 {

    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: 
      typing 3.5s steps(30, end),
      blink-caret .5s step-end infinite;
  }
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
}
}

#reviewCounter {
    width: 52px;
    display: inline-block;
}

.progress-bar {
    width: 200px;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .progress-bar__fill {
    height: 100%;
    background-color: #4CAF50; 
    width: 20%;
    animation: progress-bar-animation 2s linear;
  }
  
  @keyframes progress-bar-animation {
    from {
      width: 0%;
    }
    to {
      width: 20%;
    }
  }


  /*pop up image*/
  .hidden-image {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  
  .visible-image {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

/*border animation css*/
  .outline-am {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(0, 130, 206, 0.75);
    outline-style: solid;
    animation: animateOutline 4s ease infinite;
  }
  @keyframes animateOutline {
    0% {
      outline-width: 1px;
      outline-offset: 0;
      outline-color: rgba(0, 130, 206, 0);
    }
  
    10% {
      outline-color: #E37714;
      background-color: #E37714;
    }
  
    /* The animation finishes at 50% */
    50% {
      outline-width: 7px;
      outline-offset: 4px;
      outline-color: rgba(0, 130, 206, 0);
    }
  
    100% {
      outline-width: 7px;
      outline-offset: 4px;
      outline-color: rgba(102, 102, 102, 0);
    }
  }

:root {
	--bg-width: 0%;
}

.anim-bg {
	position: relative;
	z-index: 2;
}

.anim-bg::before {
	content: "";
	position: absolute;
	width: var(--bg-width);
	height: 100%;
	background: #FFD9B7;
	z-index: -1;
	transition: width 2s ease-in-out;
}

.anim-bg2 {
	position: relative;
	z-index: 3;
}

.anim-bg2::before {
	content: "";
	position: absolute;
	width: var(--bg-width);
	height: 100%;
	background: #FFD9B7;
	z-index: -1;
	transition: width 2s ease-in-out;
}

.anim-bg3 {
	position: relative;
	z-index: 4;
}

.anim-bg3::before {
	content: "";
	position: absolute;
	width: var(--bg-width);
	height: 100%;
	background: #FFD9B7;
	z-index: -1;
	transition: width 2s ease-in-out;
}