@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58m-wi40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58i-wi40.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58a-wg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body{
    margin:0;
    padding:0;
    direction:ltr;
    font-family: "Poppins", sans-serif;
    font-size:13px;
    overflow-x: hidden;
}
div,span,a,h1,h2,h3,h4,h5,h6,select,input,textarea,table,tr,td,ul,li{font-family: "Poppins", sans-serif;}
a{
    text-decoration:none;
    color:#777;
    transition:all 0.3s ease-in-out 0s;
}
.clear{clear:both;display: block;}
.relativePosition{position: relative;}
.container{
    width:1200px;
    margin:0 auto;
}
a.mylink{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.img{
    width: 100%;
    display: block;
    transition:all 0.3s ease-in-out 0s;
}
input:focus-visible, textarea:focus-visible {
  outline: none;
}
#header{
    width: 100%;
    height: 75px;
    background-color: #FFF;
    border-top: 3px solid #64A862;
    box-shadow:0 2px 4px 0 rgba(170, 169, 169, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
#logo{
    width: 110px;
    position: absolute;
    top: 26px;
    left: 0;
}
#top_tab{
    position: absolute;
    top: 26px;
    right: 0;
}
#top_tab > span{
    display: block;
    width: 24px;
    height: 24px;
    float: right;
    margin-left: 15px;
    position: relative;
}
#top_tab > span i{
    color: #000;
}
#cart i, #favorite i{font-size: 22px;}
#login i, #search i{font-size: 20px;}
#cart span{
    padding: 1px 7px;
    background-color: #64A862;
    border-radius: 50%;
    color: #FFF;
    font-size: 12px;
    position: absolute;
    top: -10px;
    right: -15px;
}
#menu{
    margin: 0 auto;
    display: table;
}
#menu > a{
    color: #000;
    font-size: 16px;
    padding: 25px 15px;
    display: block;
    float: left;
    margin-right: 5px;
    transition: all 0.3s ease-in-out 0s;
}
#menu > a:hover, .active{
    color: #64A862 !important;
}
.main{margin-top: 75px;}
#top-banner{position: relative;}
.tb_cnt{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: all 2s ease-in-out 0s;
}
.tb_cnt > p{
    font-size: 59px;
    font-weight: 900;
    margin: 0;
    color: #000;
    text-align: center;
    line-height: 70px;
}
.tb_cnt > h2{
    font-size: 30px;
    font-weight: 100;
    margin: 20px 0 10px;
    color: #a5705b;
    text-align: center;
}
.tb_cnt > span{
    font-size: 18px;
    font-weight: 100;
    margin: 0;
    color: #191919;
    text-align: center;
}
#icons{
    padding: 80px 0;
    width: 720px;
    margin: 0 auto;
}
.icons_row{
    width: 25%;
    float: left;
    position: relative;
}
.icons_row:hover p{
    color: #64A862;
}
.icons_row > img{
    display: table;
    margin: 0 auto;
    width: 50px;
}
.icons_row > p{
    font-size: 20px;
    text-align: center;
    color: #000;
    margin: 10px 0 0;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out 0s;
}
#cats{padding:40px 0 20px;}
.ttl{
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: #000;
    margin: 0;
}
.sub{
    display: block;
    font-size: 16px;
    font-weight: 100;
    color: #777;
    text-align: center;
}
.cats_bx{margin-top: 60px;}
.cats_row{
    width: 33.33%;
    float: left;
    margin-bottom: 80px;
}
.cats_in{padding: 0 10px;}
.cats_img{
    width: 80%;
    margin: 0 auto 20px;
    border-radius:50%;
    overflow: hidden;
}
.cats_img:hover img{transform:scale(1.1);}
.cats_ttl{
    text-align: center;
    margin: 0 0 10px;
}
.cats_ttl a{
    font-size: 20px;
    color: #000;
}
.cats_ttl a:hover{color: #64A862;}
.cats_sum{
    display: block;
    font-size: 14px;
    font-weight: 100;
    color: #777;
    text-align: center;
    height: 46px;
    overflow: hidden;
}
#middle-banner{position: relative;}
.mb_cnt{
    width: 450px;
    position: absolute;
    top: 40%;
    right: 5%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.mb_cnt > p{
    font-size: 46px;
    font-weight: 900;
    margin: 0;
    color: #000;
    line-height: 70px;
}
.mb_cnt > span{
    display: block;
    font-size: 19px;
    font-weight: 100;
    color: #000;
    line-height: 30px;
    margin-bottom: 30px;
}
.mb_cnt > a{
    padding: 10px 25px;
    color: #FFF;
    background-color: #64A862;
    font-size: 14px;
    display: table;
    border-radius:8px;
}
.mb_cnt > a:hover{
    background-color: #549852;
}
.main_pro{
    padding: 80px 0;
}
.mp_bx{margin-top: 60px;}
.mp_row{
    width: 25%;
    float: left;
    margin-bottom: 60px;
}
.mp_in{padding: 10px;}
.mp_img{overflow: hidden;margin-bottom: 20px;}
.mp_img:hover img{transform:scale(1.1);}
.mp_ttl{
    text-align: center;
    margin: 0 0 5px;
}
.mp_ttl a{
    font-size: 20px;
    color: #000;
}
.mp_ttl a:hover{color: #64A862;}
.mp_price{
    margin: 0 0 10px;
    font-size: 18px;
    color: #777;
    text-align: center;
}
.mp_in > a{
    padding: 10px 25px;
    color: #FFF;
    background-color: #64A862;
    font-size: 14px;
    display: table;
    border-radius:8px;
    margin: 0 auto;
}
.mp_in > a:hover{
    background-color: #549852;
}
#footer{
    padding: 120px 0 0;
    background: #E0F4DB url('../images/banner-4.webp') no-repeat center 0;
}
.footer_bx{padding: 250px 0 40px;}
.f1{
    width: 20%;
    float: left;
    margin-right: 3%;
}
.f2{
    width: 54%;
    float: left;
}
.f1 > p, .f2 > p{
    color: #000;
    font-size: 22px;
    margin: 0 0 20px;
    font-weight: 700;
}
.f1 > a{
    display: block;
    font-size: 17px;
    color: #777;
    margin-bottom: 10px;
}
.f1 > a:hover{color: #64A862;}
.f2 span{
    display: block;
    font-size: 16px;
    font-weight: 100;
    color: #777;
    line-height: 26px;
    margin-bottom: 20px;
}
.nwsltr input[type="text"]{
    width: 82%;
    float: left;
    height: 50px;
    padding-left: 2%;
    line-height: 50px;
    color: #000;
    background-color: #FFF;
    font-size: 15px;
    border: 0;
    border-radius: 8px 0 0 8px;
}
.nwsltr input[type="button"]{
    width: 15%;
    float: left;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #FFF;
    background-color: #64A862;
    font-size: 19px;
    border: 0;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
.nwsltr input[type="button"]:hover{background-color: #549852;}
.social{margin-top: 20px;}
.social a{
    display: block;
    float: left;
    margin-right: 20px;
}
.social a i{
    font-size: 20px;
    color: #64A862;
}
.copyright{
    padding: 20px 0;
    border-top: 1px solid #64A862;
    font-size: 14px;
    color: #777;
}
#go_to_top{
    display: none;
    padding: 16px 24px;
    background-color: #64A862;
    position: fixed;
    bottom: 40px;
    right: 20px;
    cursor: pointer;
    opacity: 0.7 !important;
    transition: all 0.3s ease-in-out 0s;
    border-radius: 8px;
}
#go_to_top i{
    font-size: 24px;
    color: #FFF;
}