.cm-filter{
	text-align:center;
	margin-bottom:30px
}
.cm-filter button{
	margin:0 6px;
	padding:8px 16px;
	border:none;
	background:#1fc2df;
	border-radius:0px;
	cursor:pointer;
	color: #fff;
}
.cm-filter button:hover,
.cm-filter button.active{
	background:#043452;
	color:#fff;
}

.cm-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,3fr));
  gap:24px;
}

.cm-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.cm-thumb-wrap{
  height:380px;
  position:relative;
  overflow:hidden;
}

.cm-thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

.cm-hover{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:.3s;
}

.cm-thumb-wrap:hover .cm-hover{opacity:1}

.cm-view-icon{
  font-size:40px;
  color:#fff;
}

.cm-content{
	padding:16px;
	background-color: #1FC2DF85;
}
.cm-cat {
    font-size: 12px;
    color: #fff;
    background-color: #043452;
    padding: 10px 25px;
	border-radius: 5px;
}
.cm-content h4 {
    margin: 25px 0 10px;
}
.cm-content p{font-size:14px;color:#444}

.cm-lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  z-index:9999;
  align-items:center;
  justify-content:center;
  overflow: auto;
}

.cm-lightbox {
	text-align: center;
}

.cm-lightbox img {
    width: 40%;
    height: auto !important;
}

.cm-close{
  position:absolute;
  top:20px;
  right:30px;
  font-size:40px;
  color:#fff;
  cursor:pointer;
}

@media(max-width: 767px){
	.cm-filter button {
    font-size: 11px;
    margin: 0;
}
	.cm-portfolio-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
}