@charset "UTF-8";
/* ==========================================================
Service Page
========================================================== */

.page-service{
padding:80px 0;
}

.service-intro{
max-width:760px;
margin:0 auto 60px;
text-align:center;
}
	.service-subtitle{
		margin-top:20px !important;
		padding:0px !important;
	}
.service-intro p{
line-height:2;
}

/* .service-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:40px;
}
 */
.service-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:40px;
max-width:1000px;
margin:0 auto;
}
.service-item{
display:flex;
flex-direction:column;
height:100%;
overflow:hidden;
background:#fff;
border-radius:12px;
box-shadow:var(--shadow);
transition:var(--transition);
}

.service-item:hover{
transform:translateY(-6px);
}

.service-item-image{
overflow:hidden;
}

.service-item-image img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
transition:transform .4s ease;
}

.service-item:hover .service-item-image img{
transform:scale(1.05);
}

.service-item-body{
display:flex;
flex-direction:column;
flex:1;
padding:32px;
}

.service-item-title{
margin-bottom:20px;
font-size:1.6rem;
font-weight:700;
color:var(--color-primary);
line-height:1.4;
}

.service-item-text{
flex:1;
margin-bottom:24px;
line-height:2;
color:var(--color-sub);
}

.service-item-footer{
margin-top:auto;
}

.service-item-footer .btn-primary{
min-width:180px;
}

/* ==========================================================
Service Detail
========================================================== */

.service-content{
max-width:900px;
margin:0 auto;
}

.service-content h2{
margin:60px 0 24px;
font-size:2rem;
color:var(--color-primary);
}

.service-content h3{
margin:40px 0 20px;
font-size:1.5rem;
color:var(--color-primary);
}

.service-content p{
margin-bottom:24px;
line-height:2;
}

.service-content ul,
.service-content ol{
margin:24px 0;
padding-left:1.5rem;
}

.service-content li{
margin-bottom:12px;
}

.service-content img{
margin:30px auto;
border-radius:12px;
box-shadow:var(--shadow);
}

/* ==========================================================
CTA
========================================================== */

.service-cta{
margin-top:80px;
padding:60px 40px;
background:var(--color-bg);
border-radius:16px;
text-align:center;
}

.service-cta h2{
margin-bottom:20px;
color:var(--color-primary);
}

.service-cta p{
max-width:700px;
margin:0 auto 30px;
line-height:2;
}

/* ==========================================================
Responsive
========================================================== */

@media (max-width:1024px){

.service-list{
grid-template-columns:1fr;
gap:30px;
}

}

@media (max-width:767px){
.page-service{
padding-top:50px ;
}

	.service-subtitle{
		margin-top:10px !important;
	}
	.service-contact{
		font-size:18px !important;
}
.service-intro{
margin:0 auto 30px;
padding:0 15px;
}

.service-intro p{
font-size:1rem;
line-height:1.8;
}

.service-list{
gap:24px;
}

.service-item-body{
padding:20px;
}

.service-item-title{
margin-bottom:15px;
font-size:18px;
line-height:1.5;
}

.service-item-text{
margin-bottom:20px;
font-size:1rem;
line-height:1.8;
}

.service-content{
padding:0 15px;
}

.service-content h2{
margin:35px 0 15px;
font-size:1.6rem;
}

.service-content h3{
margin:30px 0 15px;
font-size:1.25rem;
}

.service-content p{
margin-bottom:18px;
line-height:1.8;
}

.service-cta{
margin-top:40px;
padding:30px 20px;
}

.service-cta h2{
margin-bottom:15px;
font-size:1.5rem;
}

.service-cta p{
margin:0 auto 20px;
font-size:1rem;
line-height:1.8;
}

.service-item-footer .btn-primary{
width:100%;
}

}

@media (max-width:480px){

.service-item-body{
padding:18px;
}

.service-item-title{
font-size:18px;
}

.service-item-text{
font-size:.95rem;
}

.service-content h2{
font-size:1.4rem;
}

.service-content h3{
font-size:1.15rem;
}

.service-cta{
padding:25px 15px;
}
h2{
font-size:24px;
}
h3{
font-size:20px;
}
}