section.work{background:linear-gradient(to bottom,#010136,#00003a);margin-top:5rem;padding-bottom:2rem}section.work h2{color:#fff;padding:1rem}section.work .heading{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.5)}section.work .heading span{color:#ffe600}section.work .description-text{text-align:center;max-width:800px;margin:1rem auto 2rem;padding:0 2rem;color:#eee;font-size:1.6rem;line-height:1.6}section.work .description-text strong{color:#ffd900}section.work .button-group{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin:2rem auto;width:-moz-fit-content;width:fit-content;max-width:90%}section.work .button-group .btn{padding:1rem 2rem;background:transparent;color:#fff;border:1px solid #fff;border-radius:3px;cursor:pointer;font-weight:500;transition:background-color .3s,color .3s}section.work .button-group .btn:hover,section.work .button-group .btn.is-checked{background-color:#fff;color:#000}section.work .box-container{display:grid!important;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:2rem auto;max-width:1600px;padding:0 2rem}section.work .box-container .grid-item{width:100%;content-visibility:auto;contain-intrinsic-size:auto 28rem;contain:layout style;flex:none!important}section.work .box-container .grid-item:first-child{content-visibility:visible}section.work .box-container .grid-item .box{position:relative;width:100%;height:28rem;overflow:hidden;background:#fff;border-radius:.8rem;box-shadow:0 .5rem 1.5rem #0006;flex:none!important;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)}section.work .box-container .grid-item .box:hover{transform:translateY(-5px);box-shadow:0 1rem 2rem #00000080}section.work .box-container .grid-item .box img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;content-visibility:auto}section.work .box-container .grid-item .box .content{height:100%;width:100%;position:absolute;top:85%;left:0;background:#ffffffe6;display:flex;flex-direction:column;transition:top .3s ease}section.work .box-container .grid-item .box:hover .content{top:25%}section.work .box-container .grid-item .box .content .tag{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:4.5rem;width:100%;padding-left:1rem;background:#ffd900}section.work .box-container .grid-item .box .content .tag h3{font-size:2rem;margin:0}section.work .box-container .grid-item .desc{margin:2rem;display:flex;flex-direction:column;justify-content:center}section.work .box-container .grid-item .desc p{font-size:1.5rem;color:#333}section.work .box-container .grid-item .desc .btns{display:flex;justify-content:space-between;width:100%;margin-top:2rem}section.work .box-container .grid-item .desc .btns .btn{line-height:0;display:inline;padding:1.5rem 2.5rem;border-radius:.5rem;font-size:1.5rem;color:#fff;background:#0c0c0c;margin-right:2rem;transition:background-color .2s ease-out,transform .2s ease-out}section.work .box-container .grid-item .desc .btns .btn:hover{background:#310ae0f5;transform:translateY(-2px)}section.work+.backbtn,.backbtn{display:flex;justify-content:center;margin:4rem 0 2rem}.backbtn .btn{position:relative;padding:1.6rem 3rem;color:#fff;line-height:0;text-align:center;border:2px solid #fff;border-radius:.5em;box-shadow:0 2px 4px #3044f74d;transition:background-color .3s,color .3s}.backbtn .btn span{font-family:Nunito,sans-serif;font-size:1.7rem;font-weight:600}.backbtn .btn i{margin-right:.5rem;font-size:1.5rem;transition:transform .3s}.backbtn .btn:hover{background:#fff;color:#000}.backbtn .btn:hover i{transform:translate(-8px)}@media (min-width: 1400px){section.work .box-container .grid-item .box .content .tag h3{font-size:1.7rem}}@media (min-width: 1200px) and (max-width: 1399px){section.work .box-container{max-width:1400px}section.work .box-container .grid-item .box{height:26rem}section.work .box-container .grid-item .box .content .tag h3{font-size:1.5rem}}@media (min-width: 992px) and (max-width: 1199px){section.work .box-container{grid-template-columns:repeat(3,1fr);max-width:1100px}section.work .box-container .grid-item .box{height:26rem}}@media (min-width: 768px) and (max-width: 991px){section.work .box-container{grid-template-columns:repeat(3,1fr);gap:1.2rem;padding:0 1.5rem}section.work .box-container .grid-item .box{height:24rem}section.work .box-container .grid-item .box .content{top:82%}section.work .box-container .grid-item .box:hover .content{top:22%}section.work .box-container .grid-item .box .content .tag h3{font-size:1.5rem}section.work .box-container .grid-item .desc p{font-size:1.3rem}section.work .box-container .grid-item .desc .btns .btn{padding:1rem 1.5rem;font-size:1.3rem}}@media (min-width: 576px) and (max-width: 767px){section.work .button-group{width:90%;gap:.8rem}section.work .button-group .btn{padding:.9rem 1.5rem;font-size:1.4rem}section.work .box-container{grid-template-columns:repeat(2,1fr);gap:1rem;padding:0 1rem}section.work .box-container .grid-item .box{height:24rem}section.work .box-container .grid-item .box .content{top:82%}section.work .box-container .grid-item .box:hover .content{top:22%}section.work .box-container .grid-item .box .content .tag h3{font-size:1.5rem}section.work .box-container .grid-item .desc{margin:1.2rem}section.work .box-container .grid-item .desc p{font-size:1.3rem}section.work .box-container .grid-item .desc .btns{gap:.8rem}section.work .box-container .grid-item .desc .btns .btn{padding:1rem 1.5rem;font-size:1.3rem}}@media (min-width: 451px) and (max-width: 575px){section.work .button-group{width:95%;gap:.6rem}section.work .button-group .btn{padding:.8rem 1.2rem;font-size:1.3rem}section.work .box-container{grid-template-columns:repeat(2,1fr);gap:.8rem;padding:0 .8rem}section.work .box-container .grid-item .box{height:22rem}section.work .box-container .grid-item .box .content{top:82%}section.work .box-container .grid-item .box:hover .content{top:20%}section.work .box-container .grid-item .box .content .tag{height:3.8rem}section.work .box-container .grid-item .box .content .tag h3{font-size:1.3rem}section.work .box-container .grid-item .desc{margin:1rem}section.work .box-container .grid-item .desc p{font-size:1.2rem}section.work .box-container .grid-item .desc .btns{flex-direction:row;gap:.6rem;margin-top:1rem}section.work .box-container .grid-item .desc .btns .btn{padding:.9rem 1.2rem;font-size:1.2rem;margin-right:.5rem}}@media (max-width: 450px){section.work{margin-top:4rem}section.work .heading{font-size:2.8rem}section.work .button-group{width:100%;gap:.5rem;padding:0 1rem}section.work .button-group .btn{padding:.7rem 1rem;font-size:1.2rem}section.work .box-container{grid-template-columns:1fr;gap:1.2rem;padding:0 1rem}section.work .box-container .grid-item .box{height:30rem}section.work .box-container .grid-item .box .content{top:85%}section.work .box-container .grid-item .box:hover .content{top:25%}section.work .box-container .grid-item .box .content .tag{height:4.5rem}section.work .box-container .grid-item .box .content .tag h3{font-size:2rem}section.work .box-container .grid-item .desc{margin:2rem}section.work .box-container .grid-item .desc p{font-size:1.5rem}section.work .box-container .grid-item .desc .btns{justify-content:space-between;margin-top:2rem}section.work .box-container .grid-item .desc .btns .btn{padding:1.5rem 2.5rem;font-size:1.5rem;margin-right:2rem}}
