.project-item-box .project-item{height:calc(100% - 30px);margin-bottom:30px}.project-item{position:relative;overflow:hidden}.project-image a{display:block;position:relative}.project-image img{aspect-ratio:1/1.1;object-fit:cover;border-radius:16px;width:100%}.project-body{text-align:center;opacity:0;z-index:1;border-radius:10px;justify-content:space-between;align-items:center;padding:20px;transition:all .5s ease-in-out;display:flex;position:absolute;bottom:20px;left:20px;right:20px;transform:translateY(100%)}.project-body:before{content:"";background-color:var(--primary-color);opacity:.9;z-index:-1;border-radius:10px;display:block;position:absolute;inset:0}.project-item:hover .project-body{opacity:1;transform:translateY(0)}.project-content{text-align:left}.project-content h3{color:var(--white-color);margin-bottom:5px;font-size:20px;font-weight:600}.project-content p{color:var(--white-color);text-transform:capitalize;margin:0}.project-readmore-btn a{background-color:var(--accent-color);border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;display:flex}.project-readmore-btn a svg{max-width:20px;transition:all .4s ease-in-out;transform:rotate(-45deg)}.project-body:hover .project-readmore-btn a svg{transform:rotate(0)}
.page-project{padding:100px 0}.our-projects-nav{margin-bottom:30px}.our-projects-nav ul{text-align:center;margin:0;padding:0;list-style:none}.our-projects-nav ul li{margin-bottom:10px;margin-right:20px;display:inline-block}.our-projects-nav ul li:last-child{margin-right:0}.our-projects-nav ul li a{border:1px solid var(--divider-color);color:var(--text-color);text-transform:capitalize;background-color:#0000;border-radius:10px;padding:8px 20px;font-weight:600;transition:all .3s ease-in-out;display:inline-block;position:relative;overflow:hidden}.our-projects-nav ul li a:hover{color:var(--white-color)}.our-projects-nav ul li a:before{content:"";background:linear-gradient(180deg,var(--accent-color)0%,var(--gradient-color)100%);z-index:-1;border-radius:0;height:100%;transition:all .3s ease-in-out;position:absolute;top:100%;left:0;right:0}.our-projects-nav ul li a:hover:before{top:0}.our-projects-nav ul li a.active-btn{background:linear-gradient(180deg,var(--accent-color)0%,var(--gradient-color)100%);color:var(--white-color)}@media only screen and (max-width:991px){.page-project{padding:50px 0}.our-projects-nav ul li{margin-right:15px}}@media only screen and (max-width:767px){.our-projects-nav ul li{margin-bottom:8px;margin-right:10px}.our-projects-nav ul li a{padding:6px 15px;font-size:14px}}