:root {
    --theme-color: #e65a5d;
}
.btn{
    background:var(--theme-color);
    color:#fff;
    padding:5px 20px;
    border-radius:10px;   
}
.btn:hover{
    opacity:0.9;
    background:var(--theme-color);
    color:#fff;
}
.btn.btn-txt{
    background:#fff;
    color:var(--theme-color);
    border:1px solid var(--theme-color);
}
body{
    background:#f3f1f2;
}
header{
    background:linear-gradient(to right, #b4234a, #f05a39);
    border-bottom:1px solid #555;
}
header .hdr{
    display:flex;
    padding:30px 0px;
    align-items:center;
}
header .hdr .logo{
    max-width:150px;
    flex:0 0 150px;
    filter: brightness(10);
}
header .search{
    flex: 1;
    padding-left:30px;
}
header .search .inp{
    border:1px solid var(--theme-color);
    border-radius:15px;
    width:100%;
    height:44px;
    display:flex;
    align-items:center;
    padding:0px 15px;
    background-color:#fff;
}
header .search .inp svg{
    margin-right:20px;
}
header .search .inp svg{
    fill: var(--theme-color);
}
header .search .inp  input{
    border-color:transparent;
    background:transparent;
    flex:1;
}
header .search .inp  input:focus, header .search .inp  input:active{
    border-color:transparent;
    outline-color:transparent;
    box-shadow:none;
}
header .hdr .lang{
    flex: 0 0 100px;
    text-align:center;
    color:#fff;
}
header .hdr .account{
    flex: 0 0 40px;
}
header .hdr .account svg{
    width:20px;
    height:20px;
}
header .hdr .account svg path{
    stroke:#fff;
}
header .hdr .lang img, header .hdr .account img{
    height:20px;
}
header .download{
    display:flex;
    align-items: center;
    background:#fff;
    color:#000;
}
header .download svg{
    width:20px;
    height:20px;
    margin-right:10px;
}
header .download  svg path{
    fill: #000;
}
.side-nav{
    border-right:1px solid #555;
    padding:0px;
    padding-top:40px;
    padding-left: 35px;
}
.side-nav .title{
    font-size:14px;
    color:#7c7c7c;
    text-transform:uppercase;
    font-weight:200;
    margin-bottom:10px;
}
.side-nav ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
.side-nav ul li{
    line-height:40px;
}
.side-nav ul li a{
    text-decoration:none;
    color:#555;
}
.side-nav ul li.active, .side-nav ul li:hover{
    border-right:2px solid var(--theme-color);
}
.side-nav ul li.active a, .side-nav ul li a:hover{
    color:var(--theme-color);
}
.page-ctn{
    padding-top:40px;
    padding-left:30px;
}
.page-title{
    font-size:17px;
    font-weight:200;
    color:#000;
}
.page-sub-title{
    font-size:30px;
    font-weight:300;
    display:inline-flex;
    align-items:center;
}
.page-sub-title span{
    color:var(--theme-color);
    font-weight: 500;
    margin:0px 10px;
}
.page-sub-title img{
    width:40px;
}
.items{
    display:flex;
    margin-top:30px;
    margin-bottom:20px;
    gap:30px;
}
.scroll{
    overflow:hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:thin;
    scrollbar-color: var(--theme-color) #f8f7f7;
}
.scroll::-webkit-scrollbar {
    height: 0.5px;
    width:0.5px;
    background: #f8f7f7;
}

.scroll::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 4px;
    height:1px;
}

.items .item{
    flex:0 0 240px;
    width:240px;
    box-shadow:0px 0px 10px #ccc;
    position:relative;
    border-radius:15px;
    overflow:hidden;
    border: 1.5px solid #fff;
    margin-bottom:10px;
}
.items .item .food{
    position:relative;
}
.items .item .food img{
    border-radius:15px;
    width:100%;
    height:250px;
    object-fit:cover;
}
.items .item .tp{
    position:absolute;
    top:10px;
    width:90%;
    left:5%;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.items .item .food::before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    background:#555;
    opacity:0.3;
}
.items .item .tp svg{
    width:30px;
    height:40px;
}
.items .item .tp svg path{
    stroke:#fff;
}
.items .item .tp span{
    background:#555555cd;
    display:inline-block;
    color:#fff;
    border-radius:6px;
    padding:3px 8px;
}
.items .item .btm{
    padding:0px 10px;
    margin-top:20px;
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    align-items:start;
}
.items .item .btm a{
    color:#000;
    text-decoration:none;
    flex:1;
}
.items .item .btm a h3{
    font-size:16px;
    margin:0px;
    padding:0px;
}
.items .item .btm img{
    width:20px;
}
.items .item .tag{
    padding:0px 10px;
}
.items .item .tag .btn{
    font-size:13px;
    padding:3px 5px;
    margin-bottom:10px;
}
.items .item:hover{
    border: 1.5px solid var(--theme-color);
    transition: border 0.3s ease;
}
.ads{
    overflow:hidden;
    margin-top:20px;
    margin-bottom:40px;
    overflow-x:scroll;
}
.ads .ad-items{
    display:flex;
    align-items:center;
    gap:20px;
}
.ads .ad-items img{
    flex:0 0 200px;
    height:150px;
}
.trend-recipe .item{
    display:flex;
    background:#fff;
    justify-content:space-between;
    margin-bottom:15px;
}
.trend-recipe .item .n{
    color:#ccc;
    align-self:center;
    font-size:46px;
    font-weight:bold;
    margin:0px 15px;
}
.trend-recipe .item .txt{
    flex:1;
    padding-top:20px;
}
.trend-recipe .item .txt .ctg{
    color:var(--theme-color);
    font-weight:bold;
    text-decoration:none;
    font-size:18px;
}
.trend-recipe .item .txt h3{
    margin-top:6px;
    font-weight:bold;
    font-size:20px;
}
.trend-recipe .item .txt h3 a{
    text-decoration:none;
    color:#000;
}
.trend-recipe .item svg{
    width:30px;
    height:40px;
    align-self:flex-end;
}
.trend-recipe .item img{
    width:120px;
    height:120px;
}
.trend-recipe .btns{
    margin-top:40px;
    margin-bottom:100px;
    text-align:center;
}
.trend-recipe .btns .btn:first-child{
    margin-right:20px;
}
.trend-recipe .btns .btn{
    padding:10px 40px;
}
.h-prog{
    margin-top:20px;
    display:flex;
    gap:20px;
    padding:20px;
}
.h-prog .item{
    flex:0 0 240px;
    width:240px;
    box-shadow:0px 0px 10px #ccc;
    position:relative;
    border-radius:15px;
    overflow:hidden;
    border: 1.5px solid #fff;
    margin-bottom:10px;
    padding:10px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    background:#fff;
}
.h-prog .item .title{
    font-size:24px;
    display:flex;
    align-items:center;
}
.h-prog .item .title img{
    height:25px;
    margin-left:10px;
}
.h-prog .item h4{
    font-size:18px;
    font-weight:400;
    color:#868585;
}
.h-prog .item .mid{
    flex:1;
    display:flex;
    align-items:center;
    height:200px;
}
.h-prog .item .btm{
    display:flex;
    justify-content:space-between;
    align-items:end;
    font-size:20px;
    color:#868585;
}
.h-prog .heart .title{
    color:#e65a5d;
}
.h-prog .mid{
    justify-content:center;
    font-size:40px;
    font-weight:bold;
}
.h-prog .mid small{
    font-size:20px;
    font-weight:500;
}
.h-prog .heart .mid img{
    width:80%;
    margin:auto;
}
.h-prog .heart .btm .n{
    font-size:40px;
    font-weight:bold;
    color:#000
}
.h-prog .heart .btm .n small{
    font-size:20px;
    font-weight:500;
}
.h-prog .heart .btm span:last-child{
    color:green;
    font-size:20px;
}
.h-prog .sleep .title{
    color:purple;
}
.h-prog .steps .title{
    color:green;
}
.h-prog .calc .title{
    color:#f0b506;
}
.h-prog .calc .btm{
    margin-bottom:5px;
}
.h-prog .calc .btn{
    margin-top:10px;
    background:#f0b506;
    padding:5px 10px;
}
.h-prog .water .title{
    color:rgb(6, 213, 213);
}
.h-prog .water .in{
    display:flex;
    justify-content:space-between;
    flex:1;
}
.h-prog .water .mid .in .min, .h-prog .water .mid .in .max{
    width:60px;
    height:60px;
    background:#f8f6f6;
    border:1px solid #ccc;
    border-radius:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}
.h-prog .water .mid .in .rs{
    font-size:40px;
    text-align:center;
    display:flex;
    flex-direction:column;
}
.h-prog .water .mid .in .rs small{
    font-size:17px;
}
.h-prog .weight .title{
    color:rgb(56, 5, 188);
}
.home-blogs{
    background:#fff;
    padding:30px;
}
.post-lg img{
    width:100%;
    height:250px;
    border-radius:10px;
    margin-bottom:10px;
}
.post-lg .date{
    color:#979595;
    font-weight:bold;
    font-size:14px;
}
.post-lg h3{
    font-size:18px;
    margin-top:10px;
}
.post-lg h3 a{
    color:#000;
    text-decoration:none;
}
.post-lg h3 a:hover{
    text-decoration:underline;
}
.post-lg p{
    font-size:16px;
    margin:0px;
    padding:0px;
}
.post-sm .posts .post{
    display:flex;
    margin-bottom:20px;
}
.post-sm .posts .post .img{
    flex: 1;
}
.post-sm .posts .post .img img{
    height:100px;
    width:100%;
    border-radius:15px;
    object-fit:cover;
}
.post-sm .posts .post .d{
    flex: 0 0 60%;
    padding-left:20px;
}
.post-sm .posts .post .d .date{
    color:#979595;
    font-weight:bold;
    font-size:14px;   
}
.post-sm .posts .post .d .tags{
    margin-top:3px;
    margin-bottom:8px;
}
.post-sm .posts .post .d .tags a{
    display:inline-block;
    text-decoration:none;
    background:#d8fccd;
    color:darkgreen;
    padding:5px 10px;
    border-radius:10px;
    font-weight:bold;
    font-size:13px;
}
.post-sm .posts .post .d h3{
    margin:0px;
    padding:0px;
    font-size:18px;
}
.post-sm .posts .post .d h3 a{
    color:#000;
    text-decoration:none;
}
.post-sm .posts .post .d h3 a:hover{
    text-decoration:underline;
}
.post-sm .posts .post .d  p{
    font-size:14px;
    margin:0px;
    padding:0px;
}
.catgs{
    display:flex;
    gap:20px;
    margin-bottom:30px;
}
.items-sm.items .item{
    flex: 0 0 180px;
    width: 190px;
}
.items-sm.items .item .food img{
    height:180px;
}
.items-sm.items .item .btm a h3{
    font-size:13px;
}
footer{
    background:linear-gradient(to right, #b4234a, #f05a39);
    padding-top:80px;
    padding-bottom:60px
}
footer .logo{
    max-width:150px;
    flex:0 0 150px;
    filter: brightness(10);
}
footer ul{
    margin:0px;
    padding:0px;
    display:flex;
    gap:20px;
    list-style:none;
    margin-top:20px;
    margin-bottom:30px;
}
footer ul li a{
    color:#fff;
    text-decoration:none;
}
footer ul li a:hover{
    text-decoration:underline;
}
footer .sp{
    border-bottom:1px solid #fff;
    margin-bottom:20px;
}
footer p{
    color:#fff;
}