.ecl_wrapper{
display:grid;
grid-template-columns:260px 1fr;
gap:40px;
}

/* SIDEBAR */

.ecl_category_list{
list-style:none;
padding:0;
margin:0;
}

.ecl_cat_item{
cursor:pointer;
padding:14px 0;
font-size:16px;
color:#1c2b39;
border-bottom:1px solid #eee;
transition:0.3s;
}

.ecl_cat_item:hover{
color:#2c6ef2;
}

.ecl_cat_item.active{
font-weight:600;
color:#2c6ef2;
}

/* GRID */

#ecl_project_grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;
}

/* CARD */

.ecl_project_card{
display:block;
border-radius:18px;
overflow:hidden;
position:relative;
text-decoration:none;
}

.ecl_project_image{
position:relative;
padding-top:72%;
background-size:cover;
background-position:center;
transition:0.6s ease;
}

/* OVERLAY */

.ecl_overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(to top,rgba(18, 63, 31, 0.95) 0%,rgba(18, 63, 29, 0.45) 30%,rgba(18,39,63,0) 60%);
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:40px;
}

/* TITLE */

.ecl_title{
font-size:22px;
font-weight:600;
color:#fff;
margin:0;
opacity:1;
transform:translateY(20px);
transition:0.4s;
transition-delay:.15s;
}

/* CATEGORY */

.ecl_cat{
display:block;
font-size:14px;
color:#c6d4e1;
margin-top:6px;
opacity:1;
transform:translateY(20px);
transition:0.4s;
transition-delay:.22s;
}

/* ARROW */

.ecl_arrow {
	position: absolute;
	top: 40px;
	left: 40px;
	font-size: 26px;
	color: #fff;
	opacity: 0;
	transform: translateY(-10px);
	transition: 0.4s;
	transition-delay: .3s;
}
.ecl_arrow_icon{
width:20px;
height:20px;
fill:#5db95d;
}
/* HOVER */

.ecl_project_card:hover .ecl_project_image{
transform:scale(1.08);
}

.ecl_project_card:hover .ecl_title,
.ecl_project_card:hover .ecl_cat{
opacity:1;
transform:translateY(0);
}

.ecl_project_card:hover .ecl_arrow{
opacity:1;
transform:translateY(0);
}

/* LOADER */

 
.ecl_loader img{
width:60px;
height:auto;
}
.ecl_loader{
grid-column:1/-1;
display:flex;
justify-content:center;
align-items:center;
padding:80px 0;
}

@keyframes ecl_spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

/* NO PROJECTS */

.ecl_no_projects{
padding:60px;
text-align:center;
font-size:18px;
color:#777;
grid-column:1/-1;
}

.ecl_loadmore_wrap{
text-align:center;
margin-top:40px;
}

#ecl_load_more{
background:#5db95d;
color:#fff;
border:none;
padding:14px 30px;
border-radius:8px;
font-size:16px;
cursor:pointer;
transition:0.3s;
}

#ecl_load_more:hover{
background:#4aa84a;
}
/* LAYOUT WRAPPER
   The parent container must be flex so both columns sit side by side. */
.ecl_wrapper {
    display: flex;
    align-items: flex-start;
}

/* STICKY SIDEBAR
   Stays fixed relative to the viewport as the right panel scrolls.
   Adjust top value to match your header height. */
.ecl_sidebar {
    position: sticky;
    top: 80px; /* change this to your header height */
    height: fit-content;
    flex-shrink: 0;
}

/* RIGHT PANEL
   Grows to fill remaining space and scrolls naturally with the page. */
.ecl_projects_container {
    flex: 1;
    min-width: 0;
}

@media only screen and (max-width: 782px) {
  .with_frm_style .iti {
    width: 100% !important;
  }
}
@media screen and (max-width: 600px) {
.ecl_wrapper {
	display: block;
	grid-template-columns: unset;
}
.ecl_sidebar {
	margin-bottom: 30px;
}
#ecl_project_grid { 
	grid-template-columns: repeat(1,1fr); 
}
}