@font-face {
    font-family: Typo-Hoop-Bold-Demo;
    src: url(../font/Typo-Hoop-Bold-Demo.otf);
}

@font-face {
    font-family: Barlow-Medium;
    src: url(../font/Barlow-Medium.ttf);
}
@font-face {
    font-family: DK-Honeyguide-Caps;
    src: url(../font/DK-Honeyguide-Caps.otf);
}

@font-face {
    font-family: BiteMe;
    src: url(../font/BiteMe.ttf);
}

body{
    overflow-x: hidden;
}

.hbanner2{
    display:none;
}

.innvcontn2{
    display:none;
}
.menuicon{
    position: absolute;
    top: 2%;
    right: 5%;
    display: none;
}
.ddmenu{
    width: 100%;
    display: none;
    position: fixed;
    top: 7%;
    left: 0%;
    z-index: 99999999;
    animation: popInTop 1s;
}
.ddmenu ul a li{
    color: #fff;
    text-align: center;
}
.ddmenu ul{
    background-color: #000;
    width: 100%;
    padding: 3% 0% 3% 0%;
}

.nvabdd{
    position: relative;
    top: 100%;
    left: 0%;
    background: #ea9214;
    width: 100%;
    font-size: calc(0.7vw + 0.65vh);
    text-align: center;
}

.nvprctdd{
    position: relative;
    top: 100%;
    margin-top: -0.1%;
    left: 0%;
    background: #ea9214;
    width: 100%;
    font-size: calc(0.7vw + 0.65vh);
    text-align: center;
    color: #fff;
}
#nvab{
    display: none;
}
#nvprct{
    display: none;
}
.nvabdd a{
    color: #fff;
}
.nvabdd a:hover{
    color: #fff;
}
.nvprctdd{
    text-align: center;
}
.nvprctdd img{
    width: 98%;
}
.nvabbg1{
  /*background: url(../assets/img/story-dropdown.jpg);*/
  background: #000;
  background-repeat: no-repeat;
  background-size: 100% 100%;
    border-left: 1px dotted #bf7300;
    border-right: 1px dotted #bf7300;
}
.nvabbg2{
  /*background: url(../assets/img/Probiotic-dropdown.jpg);*/
  background: #000;
  background-repeat: no-repeat;
  background-size: 100% 100%;
    border-left: 1px dotted #bf7300;
    border-right: 1px dotted #bf7300;
}
.nvabbg1 p, .nvabbg2 p{
    text-align: center;
    color: #fff;
    font-size: calc(1.4vw + 1.4vh);
    padding: 5% 5% 5% 0%;
    font-family: Typo-Hoop-Bold-Demo;
}

.hdctcnt{
    border-right: 1px solid #f19309;
    border-left: 1px solid #f19309;
    padding: 2% 4% 2% 4% !important;
    width: 20%;
}
.hdctcnt a:hover{
    text-decoration: none;
}
.nvprctdd h4{
    color: #fff;
    font-size: calc(1vw + 1vh);
    padding: 1% 0% 2% 0%;
}
.nvprctdd .btn{
    width: 98%;
    color: #fff;
    font-size: calc(1vw + 1vh);
    margin-top: 5%;
    font-family: Typo-Hoop-Bold-Demo;
    background: #f19309;
}

.nvprctdd .btn:hover{
    background: #f19309;
}

.footer2{
    display:none!important;
}



.sdropdown {
    font-size: calc(0.7vw + 0.7vh);
}
.hdsignlog{
  display: none;
    position: absolute;
    right: 0%;
    top: 40%;
    width: 100%;
    background: rgb(236 147 15 / 90%);
    font-size: calc(0.7vw + 0.7vh);
    text-align: right;
    padding: 2% 28% 3% 0%;
}
.hdsignlog a{
  width: 100%;
}
.sdropdown:hover .hdsignlog {
  display: block;
}

.innvcontn{
    position: fixed;
    position: fixed;
    width: 100%;
    background: #ea9214;
}
.nvcontn{
    background: #ea9214;
    width: 100%;
    position: fixed;
    z-index: 99999;
}

.hdr{
    padding: 0% 2% 0% 2%;
}
.hdlogo{
    padding-top: 1%;
}
.hdlogo img{
    width: 36%;
    transition: all 1s;
}

.logcart{
    text-align: right;
    color: #fff;
    padding-top: 2%;
    transition: all 1s;
}
.logcart a{
    color: #fff;
}
.logcart span{
    margin-left: 5%;
}
.logcart img{
    width: 4%;
}
.navlink{
    text-align: end;
    padding: 1.5% 0% 1.5% 0%;
}
.nvcontn .navlink{
    display: block !important;
}
.links{
    padding: 2% 0% 2% 9%;
    font-size: 1.2vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
    cursor: pointer;
}
.links a{
    color: #fff;
    transition: all 1s;
}
.links a:hover{
    color: #fff;
}
.hom, .str, .wtb, .prdc, .cnt{
    transition: all 1s;
} 


.hbanner{
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%
}
.hdrcont{
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute;
  }

.hslbn2{
  background: url(../assets/img/Layer-3-copy.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.hdgood{
    width: 50%;
    padding-right: 5%;
}
.hdgood2{
    width: 100%;
    padding-right: 5%;
    position: relative;
    left: 43%;
    top: 2%;
}
.hdtext2{
    width: 50%;
    text-align: center;
    padding: 6% 0% 0% 0%;
    padding: 6% 0% 0% 0%;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
}
.hdtext2 p{
    font-size: 1vw;
    color: #d8841d;
    width: 40%;
    margin: auto;
    font-family: Barlow-Medium;
}
.hdpacket{
    position: absolute;
    float: right;
    width: 28%;
    margin-top: 9%;
    z-index: 8;
    top: 39%;
    left: 17%;
    transform: translateY(-50%);
}
.hdtext{
    width: 50%;
    text-align: center;
    padding: 6% 0% 0% 0%;
    padding: 6% 0% 0% 0%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
}
.orgpre{
    font-size: 3.5vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
    line-height: 1;
    display: grid;
    align-content: center;
}
.orgpre1{
    font-size: 7.5vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
    line-height: 1.5;
    display: grid;
    align-content: center;
}
.rfruit{
    font-size: 4vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
    line-height: 1;
    align-content: center;
}
.rfruit1{
    font-size: 7vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
    line-height: 1;
    align-content: center;
}
.hdtext p{
    font-size: 1vw;
    color: #d8841d;
    width: 40%;
    margin: auto;
    font-family: Barlow-Medium;
}
.shop{
    margin-top: 5%;
    padding: 0.5% 5% 0.5% 5% !important;
    font-size: 1.6vw !important;
    font-family: Typo-Hoop-Bold-Demo !important;
    color: #fff !important;
    background-color: #ea9214;

}

.choco1{
    position: absolute;
    top: 9%;
    left: 25%;
    width: 4.6%;
    z-index: 9;
    transition: all 1s;
}
.choco2{
    position: absolute;
    top: 22.5%;
    left: 31.5%;
    width: 3.9%;
    z-index: 9;
    transition: all 1s;
}
.choco3{
    position: absolute;
    top: 13%;
    left: 36%;
    width: 4.2%;
    z-index: 9;
    transition: all 1s;
}
.choco4{
    position: absolute;
    top: 23%;
    left: 41%;
    width: 4.8%;
    z-index: 9;
    transition: all 1s;
}
.choco5{
    position: absolute;
    top: 54%;
    left: 43%;
    width: 4.3%;
    z-index: 9;
    transition: all 1s;
}
.choco6{
    position: absolute;
    top: 75.2%;
    left: 13.5%;
    width: 4.3%;
    z-index: 9;
    transition: all 1s;
}
.cherry1{
    position: absolute;
    top: 9.2%;
    left: 30.5%;
    width: 5.3%;
    z-index: 9;
    transition: all 1s;
}
.cherry2{
    position: absolute;
    top: 85%;
    left: 23.8%;
    width: 5.3%;
    z-index: 9;
    transition: all 1s;
}
.cherry3{
    position: absolute;
    top: 42.2%;
    left: 10%;
    width: 10%;
    z-index: 7;
    transition: all 1s;
}
.cherry4{
    position: absolute;
    top: 64.8%;
    left: 40%;
    width: 10%;
    z-index: 9;
    transition: all 1s;
}
.hdgood:hover .choco1{
    top: 7%;
    left: 23%;
}
.hdgood:hover .choco2{
    top: 19%;
}
.hdgood:hover .choco3{
    top: 11%;
    left: 37%;
}
.hdgood:hover .choco4{
    top: 21%;
    left: 43%;
}
.hdgood:hover .choco5{
    top: 54%;
    left: 43%;
}
.hdgood:hover .choco6{
    top: 75.2%;
    left: 13.5%;
}
.hdgood:hover .cherry1{
    top: 6%;
    left: 30%;
}
.hdgood:hover .cherry2{
    top: 85%;
    left: 23.8%;
}
.hdgood:hover .cherry3{
    left: 8%;
}
.hdgood:hover .cherry4{
    top: 64.8%;
    left: 40%;
}




.sl2packet{
    position: absolute;
    float: right;
    width: 49%;
    z-index: 8;
    top: 51%;
    left: 5%;
    transform: translateY(-50%);
}
.sl2packet1{
    position: absolute;
    float: right;
    width: 49%;
    z-index: 8;
    top: 53%;
    left: 5%;
    transform: translateY(-50%);
}
.sl2packet2{
    position: absolute;
    float: right;
    width: 49%;
    z-index: 8;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}
.appricot1{
    position: absolute;
    top: 20%;
    left: 8%;
    width: 4%;
    z-index: 9;
    transition: all 1s;
}
.appricot2{
    position: absolute;
    bottom: 34%;
    left: 7.5%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}

.appricot3{
    position: absolute;
    top: 14.5%;
    left: 33%;
    width: 3.9%;
    z-index: 9;
    transition: all 1s;
}
.appricot4{
    position: absolute;
    bottom: 23%;
    left: 27%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}
.appricot5{
    position: absolute;
    top: 33%;
    left: 21.5%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}
.appricot6{
    position: absolute;
    top: 33%;
    left: 37%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}
.appricot7{
    position: absolute;
    top: 27%;
    left: 47%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}

.appricot8{
    position: absolute;
    bottom: 21%;
    left: 47%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}


.hdgood:hover .appricot1{
    top: 15%;
    left: 6%;
}
.hdgood:hover .appricot2{
    bottom: 31%;
    left: 5.3%;
}
.hdgood:hover .appricot3{
    top: 13%;
    left: 33%;
}
.hdgood:hover .appricot4{
    bottom: 15%;
    left: 27%;
}
.hdgood:hover .appricot5{
    width: 3%;
}
.hdgood:hover .appricot6{
    width: 3%;
}
.hdgood:hover .appricot7{
    top: 20.5%;
    left: 48%;
}
.hdgood:hover .appricot8{
    bottom: 19%;
    left: 48%;
}


.sl3cball1{
    position: absolute;
    top: 26%;
    left: 8%;
    width: 3.5%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball2{
    position: absolute;
    top: 58%;
    left: 8%;
    width: 4.2%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball21{
    position: absolute;
    top: 58%;
    left: 5%;
    width: 5.2%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball3{
    position: absolute;
    bottom: 18%;
    left: 16.8%;
    width: 3.5%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball4{
    position: absolute;
    top: 19%;
    left: 21.7%;
    width: 3.8%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball5{
    position: absolute;
    top: 22%;
    left: 38%;
    width: 4%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball6{
    position: absolute;
    top: 36%;
    left: 21%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball7{
    position: absolute;
    bottom: 29%;
    left: 27%;
    width: 3.8%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball8{
    position: absolute;
    top: 25%;
    left: 48%;
    width: 3.6%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball9{
    position: absolute;
    bottom: 28%;
    left: 47.8%;
    width: 4.3%;
    z-index: 9;
    transition: all 1s;
}
.sl3cball10{
    position: absolute;
    bottom: 18.6%;
    left: 36%;
    width: 4%;
    z-index: 9;
    transition: all 1s;
}


.hdgood2:hover .sl3cball1{
    top: 23%;
    left: 7%;
}
.hdgood2:hover .sl3cball2{
    top: 59%;
    left: 6%;
}
.hdgood2:hover .sl3cball21{
    top: 59%;
    left: 3%;
}
.hdgood2:hover .sl3cball3{
    bottom: 16%;
    left: 16.4%;
}
.hdgood2:hover .sl3cball4{
    top: 16%;
    left: 20.7%;
}
.hdgood2:hover .sl3cball5{
    top: 19%;
    left: 40%;
}
.hdgood2:hover .sl3cball6{
    width: 2.8%;
}
.hdgood2:hover .sl3cball7{
    bottom: 26%;
    left: 27%;
}
.hdgood2:hover .sl3cball8{
    top: 23.8%;
    left: 50.5%;
}
.hdgood2:hover .sl3cball9{
    bottom: 27%;
    left: 49.8%;
}
.hdgood2:hover .sl3cball10{
    bottom: 15.6%;
    left: 38%;
}







.appricot{
    height: 50%;
    position: relative;
    top: 50%;
    z-index: 992;
}
.detail{
    height: 50%
}
.prod{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-4%, -50%);
    text-align: center;
    z-index: 999;
    display: flex;
    align-items: center;
    overflow: visible;
}
.pro1{
    width: 63%;
    overflow: visible;
} 
.pro2{
    width: 36%;
} 
.pro1 img, .pro2 img{
    width: 100%;
} 
.wrapp{
  transition: all 1s;
}
.pro1:hover .wrapp{
  transform: translateY(-10px);
}
.prodduo{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    text-align: center;
    z-index: 999;
}
.proddual{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    z-index: 999;
}
.produo1{
    width: 16%;
    margin-right: 2%;
} 
.produo2{
    width: 16%;
    margin-left: 2%;
} 
.produo3{
    width: 16%;
    margin-left: 16%;
} 
.produo4{
    width: 16%;
    margin-left: 17%;
} 
.produo5{
    width: 16%;
    margin-left: 16%;
} 
.detail{
    width: 100%;
    height: 55%;
    display: grid;
    align-content: center;
    padding-left: 4%;
  position: fixed;
    z-index: 993;
}
.detail1{
    width: 100%;
    height: 66%;
    display: grid;
    align-content: center;
    padding-left: 4%;
  position: absolute;
    z-index: 9999;
}
.detcol1{
  transition: all 0.2s;
}
.detailbg1{    
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/11Group-2.jpg');
}
.detailbg2{    
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/11Group-2.jpg');
}
.detailbg3{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/3Group-2.jpg');
}
.detailbg4{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/4Group-2.jpg');
}
.detailbg5{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/55Group-2.jpg');
}
.detailbg6{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/9Group-2.jpg');
}
.detailbg7{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/10Group-2.jpg');
}
.detailbg8{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/8Group-2.jpg');
}
.detailbg9{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/9Group-2.jpg');
}
.detailbg10{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/10Group-2.jpg');
}
.detailbg11{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/11Group-2.jpg');
}
.detailbg12{
    width: 100%;
    height: 50%;
    display: grid;
    align-content: center;
    padding-left: 4%;
    position: absolute;
    z-index: 990;
  background-image: url('../assets/img/12Group-2.jpg');
}

.detcol9{
   display: flex;
    align-items: center;
    transition: all 1s;
    z-index: 9999;
}
.detcol10{
  display: flex;
    align-items: center;
    transition: all 1s;
    z-index: 9999;
}

.detcol11{
  display: flex;
    align-items: center;
    transition: all 1s;
    z-index: 9999;
}
.detcol12{
  background-color: #000;
}
.dettxt{
    width: 50%;
}
.dettxt h4{
    font-size: 2.2vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
}
.dettxt p{
    font-size: 1.1vw;
}
.dettxt img{
    padding-left: 3%;
}


.bag1{
    color: #ff966f;
}
.bag2{
    color: #d92660;
}
.bag3{
    color: #9c90ce;
}
.bag4{
    color: #fec899;
}
.bag5{
    color: #907ff1;
}
.bag6{
    color: #d5225a;
}
.bag7{
    color: #9d8fcd;
}
.bag8{
    color: #da89e2;
}
.bag9{
    color: #ff9d49;
}
.bag10{
    color: #facb78;
}
.bag11{
    color: #9180f2;
}
.bag12{
    color: #d24b45;
}
.bag13{
    color: #15c144;
}

.bag14{
    color: #ffc571;;
}
.bag15{
    color: #978edc;
}
.bag16{
    color: #f0687b;
}


.bag1 a{
    color: #ff966f;
}
.bag2 a{
    color: #d92660;
}
.bag3 a{
    color: #9c90ce;
}
.bag4 a{
    color: #fec899;
}
.bag5 a{
    color: #907ff1;
}
.bag6 a{
    color: #d5225a;
}
.bag7 a{
    color: #9d8fcd;
}
.bag8 a{
    color: #da89e2;
}
.bag9 a{
    color: #ff9d49;
}
.bag10 a{
    color: #facb78;
}
.bag11 a{
    color: #9180f2;
}
.bag12 a{
    color: #d24b45;
}
.bag13 a{
    color: #15c144;
}

.bag14 a{
    color: #ffc571;;
}
.bag15 a{
    color: #978edc;
}
.bag16 a{
    color: #f0687b;
}

.dettxt4 h4{
    font-size: 1.85vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
}

.dettxt2{
    width: 50%;
    padding-left: 18%;

}
.dettxt2 h4{
    font-size: 1.85vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
}
.dettxt2 p{
    font-size: 1vw;
}
.dettxt2 img{
    padding-left: 3%;
}

.dettxt3{
    width: 33.33%;

}
.dettxt3 h4{
    font-size: 1.7vw;
    font-family: Typo-Hoop-Bold-Demo;
    color: #fff;
}
.dettxt a:hover, .dettxt2 a:hover, .dettxt3 a:hover{
    color: #fff !important;
}
.dettxt3 a h4:hover{
  text-decoration: none !important;
    color: #fff !important;
}
.dettxt3 p{
    font-size: 1.1vw;
}
.dettxt3 img{
    padding-left: 3%;
}


.appricot img{
    width: 100%;
    animation: highway 60s linear infinite;
}

.next{
    position: absolute;
    z-index: 9999;
    right: 2%;
    bottom: 7%;
    display: grid;
    cursor: pointer;
}
.next2{
    position: fixed;
    z-index: 9999;
    right: 2%;
    bottom: 7%;
    display: grid;
    cursor: pointer;
}

.next3{
    position: fixed;
    z-index: 10000;
    right: 2%;
    bottom: 7%;
    display: grid;
    cursor: pointer;
}



@keyframes highway
{
    100%{
        transform: translateY(-100%);
    }
}








.crtfav{
    display: flex;
    width: 100%;
    align-items: baseline;
    text-align: center;
}
.incrtp{
  width: 62%;
  margin: auto;
}
.infavpr{
  width: 90%;
  margin: auto;
}
















.navurlinf{
  text-align: right;
  font-size: calc(0.9vw + 0.9vh);
  color: #000;
  text-decoration: underline;
  padding: 4% 2% 4% 0%;
  margin-top: 5%;
  font-family: Typo-Hoop-Bold-Demo;
}



.contbn1{
  padding: 0% 20% 4% 20%;
  text-align: center;
}
.contbn1 h3 {
  text-align: center;
  font-size: calc(2.5vw + 2.5vh);
  color: #ea9214;
  font-family: Typo-Hoop-Bold-Demo;
}
.contbn1 h4{
  text-align: center;
  font-size: calc(2.3vw + 2.3vh);
  color: #ea9214;
  font-family: Typo-Hoop-Bold-Demo;
  padding-bottom: 5%;
}

.cont1im{
  text-align: center;
}
.cont1im img{
  width: 100%;
  text-align: center;
}
.cont1cnt{
  display: grid;
  align-items: center;
    padding: 0% 0% 0% 8% !important;
}
.cont1im{
  display: flex;
  align-items: center;
}
.cont1txt{
  display: flex;
  align-items: center;
}
.cont1txt p{
  text-align: left;
  font-size: calc(0.8vw + 0.8vh);
  color: #000;
  align-items: center;
  font-family: Barlow-Medium;
}
.cont1txt p a{
  color: #000;
}






.contbn2{
  padding: 2% 20% 5% 20%;
  text-align: center;
}
.contbn2 h4{
  text-align: center;
  font-size: calc(1.7vw + 1.7vh);
  color: #ea9214;
  font-family: Typo-Hoop-Bold-Demo;
  padding-bottom: 2%;
}
.contbn2 form{
  text-align: left;
}
.cont2inp input{
    border: none;
    border-bottom: 1px solid #000;
    width: 100%;
    font-size: calc(0.57vw + 0.57vw);
    color: #000;
    padding-top: 10%;
    padding-bottom: 3%;
    transition: all 1s;
    font-family: Barlow-Medium;
    font-style: italic;
}
.cont2inp input:focus, .cont2inp textarea:focus {
    border-bottom: 2px solid #000;
    transition: all 1s;
    outline: none;
}
.cont2inp textarea{
    border: none;
    border-bottom: 1px solid #000;
    width: 100%;
    font-size: calc(0.57vw + 0.57vw);
    color: #000;
    padding-top: 5%;
    padding-bottom: 1.4%;
    font-family: Barlow-Medium;
    font-style: italic;
}
.cont2sbmt input{
    font-size: calc(0.8vw + 0.8vw);
    color: #fff;
    padding: 0.3% 2.8% 0.3% 2.8%;
    margin-top: 3%;
    font-family: Typo-Hoop-Bold-Demo;
}

.sbmtbtn{
    background: #ea9214;
}
.sbmtbtn:hover{
    background: #ff9f16;
}










































.probn1{
  padding: 2% 8% 2% 8%;
}
.pro1cnt{
  padding: 2% 0% 13% 0%;
  text-align: center;
    font-family: Barlow-Medium;
    width: 87%;
    margin: auto;
    background: #fff; 
}
.pro1cnt h5{
  font-size: calc(0.95vw + 0.95vh);
  color: #000;
}
.pro1cnt p{
  font-size: calc(0.9vw + 0.9vh);
  color: #949494;
}
.pro1prim{
  width: 100%
}
.pro1adcrt{
  width: 31%
}





















.wshcnt{
    padding: 0% 4% 0% 4% !important;
}
.wsh1adcrt{
  width: 60%
}
.wshlstcls{
    text-align: right;
    font-size: calc(2vw + 2vh);
    color: grey;
}

















.prdetbanner1{
  padding: 2% 14% 2% 14%;
}


.prdet1sld{
    padding: 5% 2% 5% 2%;
}
.prdet1sld img{
    width: 90%;
    margin: auto;
    border: 1px solid;
}

.prdet1txt h4{
  font-size: calc(0.93vw + 0.93vh);
  color: red;
    font-family: Typo-Hoop-Bold-Demo;
}
.prdet1txt p{
  font-size: calc(0.9vw + 0.9vh);
  color: #000;
    font-family: Barlow-Medium;
}
.prdet1adcrt2{
  width: 68%;
  background: url(../assets/img/ADD-TO-BAG.png);
  background-repeat: no-repeat;
  background-size: 100%;
  border: none;
    padding: 0% 0% 56% 0%;
}

.prdet1adcrt{
  width: 47%;
}
.prdet1adcrt input{
  width: 100%;
  background: url(../assets/img/ADD-TO-BAG.png);
  background-repeat: no-repeat;
  background-size: 100%;
  border: none;
    padding: 0% 0% 82% 0%;
  cursor: pointer;
}
.prdet1adfav{
  width: 100%
}

.prdetdesc{
  font-size: calc(0.77vw + 0.77vh) !important;
  padding: 4% 0% 2% 0%;
  text-align: justify;
  }
.prdet1cerim{
  width: 98%;
}

.prdetqtsec{
    align-items: center;
    display: flex;
}
.prdetquant{
  width: 60%;
  border: none;
  border-top: 1px solid;
  border-bottom: 1px solid;
  text-align: center;
  padding: 4% 0% 4% 0%;
  font-size: calc(1.1vw + 1.1vh);
}
.prdetquantbtn{
  width: 16%;
  font-size: calc(1.1vw + 1.1vh);
  border: none;
  background: none;
}



.prdetbanner2{
    padding: 5% 12% 1% 12%;
    background: #e0e0e0;
}
.prdetbanner2 h4{
    text-align: center;
    font-size: calc(1.8vw + 1.7vh);
    color: #ea9214;
    font-family: Typo-Hoop-Bold-Demo;
    padding-bottom: 5%;
}




















.proban3magnify{ 
    padding: 5% 16% 3% 16%;
}
.img-magnifier-container {
    position:relative;
    width: 100%;
    margin: auto;
    height: unset;
    border: 1px solid;
  }
  .img-magnifier-glass {
    position: absolute;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 100%;
    height: 95%;
    z-index: 999;
  }
#myimage{
    width: 100%;
    height: unset;
}

#myimage2{
    background-size: unset;
}

.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
    display: unset !important;
}
.owl-nav{
    position: absolute;
    top: 30%;
    left: 0%;
    transform: translateY(-50%);
    width: 100%;
}
.owl-prev{
    position: absolute;
    left: -6%;
    font-size: 2vw !important;
}
.owl-next{
    position: absolute;
    right: -6%;
    font-size: 2vw !important;
}

.prom3icon{
    width: 95%;
}
.prom3icim{
    width: 16%;
    padding: 1% 2% 1% 2%;
    text-align: center;
}
.prom3icim img{
    width: 100%;
}
.prom3icim p{
    font-size: calc(0.5vw + 0.5vh) !important;
}
.pro3packs{
    display: flex;
    width: 60%;
}
.pro3pckimg{
    border-radius: 50%;
    overflow: hidden;
    width: 90%;
}
.pro3pckimg img{
    width: 100%;

}


.prodbg{
    border: 1px solid;
}


#mymagnify1, #mymagnify2, #mymagnify3, #mymagnify4, #mymagnify5, #mymagnify6{
    display: none;
}

















































.abtbn1{
  padding: 0% 0% 7% 0%;
}
.abtbn1 h3 {
  text-align: center;
  font-size: calc(2.5vw + 2.5vh);
  color: #ea9214;
  font-family: Typo-Hoop-Bold-Demo;
  padding: 0% 8% 0% 8%;
}
.abtbn1 h4{
  text-align: center;
  font-size: calc(2.3vw + 2.3vh);
  color: #ea9214;
  font-family: Typo-Hoop-Bold-Demo;
  padding-bottom: 1%;
  padding: 0% 9% 4% 9%;
}




.ab1im1{
  background: url(../assets/img/Scada.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 0% 0% 25% 0%;
}
.ab1im2{
  background: url(../assets/img/Gluten-Free.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 0% 0% 25% 0%;
}
.ab1im3{
  background: url(../assets/img/Cocoa.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 0% 0% 25% 0%;
}
.ab1im4{
  position: relative;
  background: url(../assets/img/abchocolate.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 0% 0% 25% 0%;
}
.ab1txt{
    align-items: center;
    display: flex;
}
.ab1txt p{
  text-align: justify;
    padding: 1% 13% 1% 13%;
  font-size: calc(1.3vw + 1.3vh);
    color: #ea9214;
    font-family: Typo-Hoop-Bold-Demo;
}

.ab1txt2{
    align-items: center;
    display: flex;
}
.ab1txt2 p{
    text-align: center;
    padding: 1% 13% 1% 13%;
    font-size: calc(1.9vw + 1.9vh);
    color: #ea9214;
    font-family: Typo-Hoop-Bold-Demo;
}


.ab1txt3{
    padding: 5% 0% 1% 0%;
}
.ab1txt3 p{
  text-align: center;
  padding: 0.8% 0% 0.8% 0%;
  font-size: calc(1vw + 1vh);
    color: #ea9214;
    font-family: Typo-Hoop-Bold-Demo;
}
.ab1txt3 p span{
  padding: 0.9% 1.5% 0.9% 1.5%;
  background: #ea9214;
  color: #fff;
  font-size: calc(0.85vw + 0.85vh);
}

.ab1imtx{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 2.6vw;
  width: 100%;
  color: #fff;
  font-family: Typo-Hoop-Bold-Demo;
}









.ganbn1{
  padding: 0% 0% 7% 0%;
}
.ganbn1 h4{
  text-align: center;
  font-size: calc(2.3vw + 2.3vh);
  color: #ea9214;
  font-family: Typo-Hoop-Bold-Demo;
  padding-bottom: 1%;
}
.gan1im1{
  background: url(../assets/img/ganeden.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 59% 0% 0% 0%;
}
.gan1txt{
}
.gan1txt p{
  text-align: justify;
    padding: 0% 14% 0% 14%;
  font-size: calc(0.85vw + 0.85vh);
  color: #000;
    font-family: Barlow-Medium;
}





















.privacybanner{
    padding: 2% 21% 5% 21%;
    background: #f5f5f5;
    font-size: calc(0.72vw + 0.72vh);
    color: #000;
    font-family: Barlow-Medium;
    text-align: justify;
}
.privacybanner p span{
    font-size: calc(1.25vw + 1.25vh);
}

.privacybanner h4{
    padding: 0% 0% 4% 0%;
    font-size: calc(2.6vw + 2.6vh);
    text-align: center;
    font-family: Typo-Hoop-Bold-Demo;
}











.cartbanner2{
  padding: 5% 12% 5% 12%;
}
.cartbanner2 table{
  width: 100%;
  text-align: center;
    width: 100%;
}
.cartbanner2 table img{
  width: 40%;
}
.cartbanner2 table tr{
  width: 90%;
  margin: auto;
    width: 100%;
}
.cartbanner2 table th{
  padding: 2% 2% 2% 2%;
  font-size: calc(1.1vw + 1.1vh);
    width: 100%;
}
.cartbanner2 table td{
  padding: 2% 2% 2% 2%;
  font-size: calc(0.9vw + 0.9vh);
    width: 100%;
}


.empttcrt a{
    color: #000;
}



.cartquant{
  width: 49%;
  border: none;
  border-top: 1px solid;
  border-bottom: 1px solid;
  text-align: center;
  padding: 4% 0% 4% 0%;
  font-size: 1.4vw;
    background: #fff;
}
.cartquantbtn{
  width: 16%;
  font-size: 1.37vw;
  border: none;
  background: none;
}



.start1{
    width: 100% !important;
}






#shipaddshow{
    display: none;
}


.ordrlst::-webkit-scrollbar {
  width: 10px;
}






  .paypal-button-row, .paypal-logo-color-white, .paypal-button-color-black, .paypal-button-number-1, .paypal-button-row{
    display: none !important;
  }



























.walletcont{
    padding: 1% 12% 1% 12%;
    text-align: center;
}
.walletcont h3{
    font-size: calc(1.1vw + 1.1vh);
}
.walletcont h4{
    font-size: calc(1vw + 1vh);
}
.walletcont h5{
    font-size: calc(0.8vw + 0.8vh);
}
.walletcont form input{
    border: none;
    width: 50%;
    padding: 2% 1% 2% 1%;
    margin-top: 1%;
}
.walletcont form .inp input{
    border: none;
    width: 40%;
    padding: 2% 1% 2% 1%;
}
.walletcont form .inp select{
    border: none;
    width: 10%;
    padding: 2% 1% 2% 1%;
}

.walletcont .trandat{
    width: 45%;
    padding: 1% 2% 1% 17%;
    text-align: left;
    border-right: 1px solid #e4e4e4;
}
.walletcont .trandat2{
    width: 55%;
    padding: 1% 2% 1% 2%;
    text-align: left;
}


.paypal-button.paypal-button-text-color-white {
    display: none !important;
}













.ftrdes{
    background: #ea9214;
    padding: 70px 0% 0% 0%;
    color: #fff;
    text-align: center;
    position: relative;
    height: 100%;
    font-family: Typo-Hoop-Bold-Demo;
    text-shadow: 2px 3px 6px #505050;
    display: grid;
}
.ftrdes h4{
    font-size: calc(2.3vw + 2.3vh);
    padding-bottom: 1%;
}
.ftrdes h3{
    font-size: calc(6vw + 6vh);
    line-height: 1;
}
.footnav{
    display: flex;
    justify-content: center;
    background: #000;
    position: relative;
    width: 100%;
    padding: 2% 0% 2% 0%;
}

.footer{
    display: flex;
    justify-content: center;
    color: #fff;
    width: 100%;
    font-family: Barlow-Medium;
}
.footer p a{
    color: #fff;
}
.quick{

}
.quick, .products, .support, .instagram, .sayhi{
    margin: 0% 2% 0% 2%;
}

.quick h4, .products h4, .support h4, .instagram h4, .sayhi h4{
    font-size: 1.5vw;
    font-family: Typo-Hoop-Bold-Demo;   
}
.quick p, .products p, .support p, .instagram p, .sayhi p{
    font-size: 1vw;
}
 .sayhi p{
    margin-bottom: 3%;
}
.rw{
    display: flex;
}
.insta{
    padding: 5% 5% 5% 5%;
}
.insta img{
    width: 100%;
}

.instagram2, .sayhi2{
    margin: 0% 2% 0% 2%;
}

.instagram2 h4, .sayhi2 h4{
    font-size: 1.5vw;
    font-family: Typo-Hoop-Bold-Demo;   
}
.instagram2 p, .sayhi2 p{
    font-size: 1vw;
}

.ftsocim{
    width: 100%;
}
.ftsocim img{
    width: 13%;
    margin: auto;
}

.whatsappfx{
    position: fixed;
    bottom: 5%;
    left: 2%;
    z-index: 99999999999999;
    width: 4%;
}
.whatsappfx img{
    width: 100%;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99999999999999;
  font-size: calc(1.6vw + 1.6vh);
  border: none;
  outline: none;
  background-color: rgba(0 ,0, 0, 0.5);
  color: white;
  cursor: pointer;
    padding: 0.4% 1.3% 0.4% 1.3%;
    border-radius: 50%;
    transition: all 1s;
}

#myBtn:hover {
  background-color: rgba(0 ,0, 0, 0.7);
  font-size: calc(1.7vw + 1.7vh);
}
.downscroll{
    position: absolute;
    bottom: 5%;
    right: 5%;
}
.downscroll a{
    color: #fff;
}


.foot2{
    width: 95%;
    margin: auto;
    padding: 0% 4% 1% 4%;
    color: #fff;
    font-size: 16px;
    position: absolute;
    bottom: 0%;
}
.foot2 a{
    color: #fff;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}











































































.clip{
  width:100%;
  height:100vh;
  position: fixed;
  z-index: 20;
  transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.nav{
  position: fixed;
  z-index: 22;
  width: 100px;
  height: 100px;
  margin-left: 88vw;
  margin-top: 44vh;
  transition: .5s
}

.nav1{
  width: 25px;
  margin-bottom: 10px;
  transition: .7s;
}

.nav2{
  width: 25px;
  margin-bottom: 10px;
  transition: .7s;
}
.bn{display: none;
}

.head{
  position: relative;
  width: 100%;
  height: 500vh;
  background-color: #fff;
  transition: .5s;
}


.content1{
    position: relative;
  width: 100%;
  height:100vh;
  background-image: url('../assets/img/banner/vector-smart-object1.jpg');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
    z-index: 1111111;
}
.content2{
    position: relative;
  width: 100%;
  height:100vh;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
}

.content3{
    position: relative;
  width: 100%;
  height:100vh;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
}

.content4{
    position: relative;
  width: 100%;
  height:100vh;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
}
.content5{
    position: relative;
  width: 100%;
  height:100vh;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
}

.content6{
    position: relative;
  width: 100%;
  height:100vh;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
}
.content7{
    position: relative;
  width: 100%;
  height:100vh; 
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
}
.content8{
    position: relative;
  width: 100%;
  height:100vh; 
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
}
.content9{
    position: relative;
  width: 100%;
  height:100vh;
  background-color: #000;
  background-position: center;
  z-index: 9999;
  background-size: cover;
  background-attachment: fixed;
  transition: 1s;
    align-items: center;
    display: grid;
}
.down{
  height: 0%;
}

.mouse{
  margin-left: 48.8vw;
  margin-top: 85vh;
  width: 33px;
  height: 33px;
  position:fixed;
  z-index: 25;
  transition: .8s;
}

.mousee{
  transition: .7s;
  opacity: 1;
}

.scroll{
  position: fixed;
    margin-left: 48.5vw;
  margin-top: 91vh;
  font-family: 'Lato', sans-serif;
  font-weight: lighter;
  transition: .7s;
  opacity: 1;
  z-index: 25;
  color:#fff;
}

.hidemouse{
opacity: 0;
}

#roll1{
  stroke:#bbb;
  fill:#bbb;
}

#roll2{
  stroke:#bbb;
  fill:#bbb;
  animation: ani 2s linear infinite;
}

@keyframes ani {
  0%{
    transform: translateY(0px);
  }

  50%{
    transform: translateY(50px);
  }

  100%{
    transform: translateX(0px);
  }
}