.elementor-1312 .elementor-element.elementor-element-36bef60{width:var( --container-widget-width, 1000% );max-width:1000%;margin:-61px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:1000%;--container-widget-flex-grow:0;}.elementor-1312 .elementor-element.elementor-element-24352d3{--display:flex;--margin-top:-32px;--margin-bottom:-20px;--margin-left:0px;--margin-right:0px;}.elementor-1312 .elementor-element.elementor-element-8196b13{width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}@media(max-width:767px){.elementor-1312 .elementor-element.elementor-element-36bef60{margin:-61px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 2px;--container-widget-width:1000px;--container-widget-flex-grow:0;width:var( --container-widget-width, 1000px );max-width:1000px;}.elementor-1312 .elementor-element.elementor-element-8196b13{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -2px;--container-widget-width:30%;--container-widget-flex-grow:0;width:var( --container-widget-width, 30% );max-width:30%;}}/* Start custom CSS for html, class: .elementor-element-36bef60 */.portfolio-hero{
background:#F59E0B;
padding:120px 20px;
text-align:center;
color:#fff;
}

.hero-content{
max-width:700px;
margin:auto;
}

.portfolio-hero h1{
font-size:30px;
font-weight:700;
margin-bottom:20px;
line-height:1.2;
}

.portfolio-hero p{
font-size:18px;
line-height:1.8;
color:#1F2937;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){

.portfolio-hero{
padding:80px 15px;
}

.portfolio-hero h1{
font-size:32px;
}

.portfolio-hero p{
font-size:16px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8196b13 */.portfolio-section{
background:#e3e3e3;
padding:100px 20px;
}

.portfolio-heading{
text-align:center;
margin-bottom:60px;
}

.portfolio-heading h2{
color:#0F172A;
font-size:30px;
font-weight:700;
margin-bottom:10px;
}

.portfolio-heading p{
color:#64748B;
font-size:18px;
}

.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
max-width:1300px;
margin:auto;
}

.portfolio-card{
background:#FFFFFF;
border-radius:20px;
overflow:hidden;
border:1px solid #E2E8F0;
transition:all .4s ease;
}

.portfolio-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(37,99,235,.15);
}

.mockup{
height:200px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#2563EB,#06B6D4);
color:#FFFFFF;
font-size:20px;
font-weight:700;
}

.portfolio-card h3{
color:#0F172A;
padding:20px 20px 10px;
font-size:22px;
margin:0;
}

.portfolio-card p{
color:#64748B;
padding:0 20px 20px;
line-height:1.7;
margin:0;
}

.portfolio-card a{
display:inline-block;
margin:0 20px 20px;
padding:12px 24px;
background:linear-gradient(90deg,#2563EB,#06B6D4);
color:#FFFFFF;
text-decoration:none;
border-radius:30px;
font-weight:600;
transition:.3s;
}

.portfolio-card a:hover{
transform:scale(1.05);
}

@media(max-width:768px){

.portfolio-section{
padding:60px 15px;
}

.portfolio-heading h2{
font-size:34px;
}

.portfolio-heading p{
font-size:16px;
}

.portfolio-grid{
grid-template-columns:1fr;
gap:20px;
}

.mockup{
height:180px;
font-size:18px;
}

.portfolio-card h3{
font-size:20px;
}

}/* End custom CSS */