/* Start custom CSS for html, class: .elementor-element-36b5d71 */.portfolio-hero{
padding:120px 8%;
text-align:center;
background:linear-gradient(135deg,#eef6ff,#ffffff);
}

.portfolio-hero h1{
font-size:52px;
font-weight:800;
color:#111827;
margin-bottom:20px;
}

.portfolio-hero p{
font-size:18px;
color:#6b7280;
max-width:750px;
margin:auto;
line-height:1.8;
}

/* GALLERY */

.portfolio-gallery{
padding:120px 8%;
background:#fff;
}

.portfolio-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

/* IMAGE CARD */
.portfolio-item{
position:relative;
overflow:hidden;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
cursor:pointer;
}

.portfolio-item img{
width:100%;
height:260px;
object-fit:cover;
transition:0.5s;
}

.portfolio-item:hover img{
transform:scale(1.1);
}

/* OVERLAY */
.overlay{
position:absolute;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6);
color:white;
padding:20px;
transform:translateY(100%);
transition:0.4s;
}

.portfolio-item:hover .overlay{
transform:translateY(0);
}

.overlay h3{
margin:0;
font-size:18px;
}

.overlay p{
margin:5px 0 0;
font-size:14px;
color:#ddd;
}

/* NOTE */
.portfolio-note{
padding:40px 8%;
text-align:center;
color:#6b7280;
font-size:16px;
background:#f8fbff;
}

/* RESPONSIVE */

@media(max-width:991px){
.portfolio-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:767px){
.portfolio-grid{
grid-template-columns:1fr;
}

.portfolio-hero h1{
font-size:34px;
}
}/* End custom CSS */