*{margin:0;padding:0;box-sizing:border-box}html{--body-clr:#f6f9fe;--primary-clr:#44267c;--primary-light-clr:#eaf3fa;--links-clr:#44267c;--text-clr:#44267c;scroll-behavior:smooth}body{width:100%;min-height:100vh}.portfolio{position:relative;padding-top:120px!important;width:100%;padding:30px 8%}.portfolio .section-head{max-width:700px;margin:0 auto 25px;text-align:center}.section-head h1{position:relative;font-size:32px;margin:10px 0 30px}.button-group{text-align:center;margin-bottom:40px}.button-group .button{display:inline-block;padding:10px 0;margin:0 10px;color:var(--primary-clr);font-size:12px;letter-spacing:1px;transition:.6s;border:none;background:0 0;cursor:pointer}.button-group .button.active,.button-group .button:not(.active):hover{border-bottom:2px solid var(--primary-clr);transition:border-bottom .6s}.button-group .button:hover{color:#102c57;transition:color .6s}div.gallery{width:100%;display:flex;flex-wrap:wrap}div.gallery .item{position:relative;margin:4px;width:calc(33.33% - 8px);overflow:hidden;cursor:pointer}.item img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}div.gallery .item:hover img{transform:scale(1.15)}.item .overlay{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;justify-content:center;align-items:center;background-color:#102c57a8;color:var(--body-clr);padding:15px;overflow:hidden;transition:opacity .2s ease-in-out;opacity:0}.item:hover .overlay{opacity:1}.item .overlay a{display:inline-block;padding:8px 16px;border:2px solid var(--body-clr);color:var(--body-clr);text-decoration:none;font-size:14px;transition:.3s}.item .overlay a:hover{background-color:var(--body-clr);color:var(--primary-clr)}@media(max-width:1024px){div.gallery .item{width:calc(50% - 8px)}}@media(max-width:600px){div.gallery .item{width:100%;margin:4px 0}}a.flex.items-center.justify-center.px-5.py-3.text-base.font-medium.text-center.text-white.border.rounded-full.shadow-sm.cursor-pointer{transition:background-color .3s,color .3s}a.flex.items-center.justify-center.px-5.py-3.text-base.font-medium.text-center.text-white.border.rounded-full.shadow-sm.cursor-pointer:hover{background-color:#fff;color:#6366f1}a.flex.items-center.justify-center.px-5.py-3.text-base.font-medium.text-center.text-white.border.rounded-full.shadow-sm.cursor-pointer:hover i,a.flex.items-center.justify-center.px-5.py-3.text-base.font-medium.text-center.text-white.border.rounded-full.shadow-sm.cursor-pointer:hover span{color:#6366f1}