.blog-nav{width:100%;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;background-color:var(--primary-bg);position:sticky;top:0;left:0;z-index:99999}.blog-nav .blog-nav-logo{font-family:var(--myFont);color:var(--primary-txt);font-size:16px;text-decoration:none;cursor:pointer;font-weight:500;z-index:101}.blog-nav .icon-menu{--gap:5px;--height-bar:2.5px;--pos-y-bar-one:0;--pos-y-bar-three:0;--scale-bar:1;--rotate-bar-one:0;--rotate-bar-three:0;width:25px;display:flex;flex-direction:column;gap:var(--gap);cursor:pointer;position:relative;z-index:100011}.blog-nav .bar{position:relative;height:var(--height-bar);width:100%;border-radius:.5rem;background-color:var(--primary-txt)}.blog-nav .bar--1{top:var(--pos-y-bar-one);transform:rotate(var(--rotate-bar-one));transition:top .2s .1s,transform .1s}.blog-nav .bar--2{transform:scaleX(var(--scale-bar));transition:transform .15s .1s}.blog-nav .bar--3{bottom:var(--pos-y-bar-three);transform:rotate(var(--rotate-bar-three));transition:bottom .2s .1s,transform .1s}.blog-nav .check-icon{display:none}.blog-nav .check-icon:checked+.icon-menu>.bar--1{transition:top .2s,transform .2s .1s}.blog-nav .check-icon:checked+.icon-menu>.bar--3{transition:bottom .2s,transform .2s .1s}.blog-nav .check-icon:checked+.icon-menu{--pos-y-bar-one:calc(var(--gap) + var(--height-bar));--pos-y-bar-three:calc(var(--gap) + var(--height-bar));--scale-bar:0;--rotate-bar-one:45deg;--rotate-bar-three:-45deg}.blog-nav .right-grp{display:flex;align-items:center;transition:all .4s ease}.blog-nav .btn{width:fit-content;height:50px;display:flex;gap:10px;font-weight:400;align-items:center;justify-content:center;background-color:var(--sec-bg);color:var(--primary-txt);border:1px solid var(--border);border-radius:10px;padding:10px 20px;font-size:15px;cursor:pointer;text-decoration:none;transition:all .2s ease}.blog-nav .blog-btn,.blog-nav .wsp{background-color:var(--sec-bg);border:1px solid var(--border)}.blog-nav .right-grp{position:fixed;top:0;right:-100%;height:100vh;width:280px;background-color:var(--primary-bg);flex-direction:column;justify-content:flex-start;box-shadow:-5px 0 20px rgba(0,0,0,.1);gap:20px;z-index:1000;padding:60px 30px 40px}.blog-nav .right-grp.active{right:0}.blog-nav .right-grp .btn{width:100%;justify-content:center}.blog-nav .overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(0,0,0,.5);z-index:99}.blog-nav .overlay.active{display:block}.blog-nav:has(.right-grp.active) .overlay{display:block}@media(max-width:768px){.blog-nav{padding:15px 20px}}.blog-foot{position:absolute;bottom:0;width:100%;padding:20px;display:flex;align-items:center;justify-content:center;font-size:14px}.blog-foot a{text-decoration:none;color:var(--sec-txt)}.blog-cards{width:100%;padding:20px 40px 40px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.blog-cards .blog-card{width:100%;max-width:320px;max-height:360px;overflow:hidden;background:var(--sec-bg);border-radius:40px;display:flex;flex-direction:column;border:1px solid var(--border);position:relative}.blog-cards .top-blog-img{width:100%;height:140px;border-top-left-radius:40px;border-top-right-radius:40px;object-fit:cover;object-position:center}.blog-cards .blog-card-content{padding:14px;display:flex;flex-direction:column;gap:4px}.blog-cards .blog-card-title{font-size:18px;font-weight:500;color:var(--primary-txt)}.blog-cards .blog-card-description,.blog-cards .blog-card-title{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.blog-cards .blog-card-description{font-size:14px;font-weight:400;color:var(--sec-txt)}.blog-cards .blog-card-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;margin-bottom:10px}.blog-cards .blog-card-tag{padding:4px 10px;border:1px solid #b4b4b4;border-radius:var(--br-xl);font-size:12px}@media screen and (max-width:640px){.blog-nav{padding:20px;gap:20px}.blog-nav .blog-nav-logo{font-size:16px}.blog-nav .btn{font-size:14px}.blog-nav .searchBar{min-width:0;max-width:260px;flex:1}}@media screen and (max-width:480px){.blog-nav{padding:20px;gap:20px}.blog-nav .blog-nav-logo{font-size:16px}.blog-nav .right-grp{gap:10px}.blog-nav .btn{font-size:15px;padding:5px 10px}}