/* ================= MAIN WRAPPER ================= */

.service-detail{
padding:140px 0 100px;
}

/* ================= HERO ================= */

.service-hero{
margin-bottom:100px;
}

.service-title{
font-size:clamp(2.5rem,5vw,3.5rem);
font-weight:800;
margin-bottom:20px;
}

.service-title span{
background:linear-gradient(90deg,#0aad5e,#22e38a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.service-subtext{
max-width:700px;
margin:auto;
color:var(--text-light);
}

/* ================= FEATURES ================= */

.service-description{
margin-bottom:100px;
}

.feature-card{
background:#ffffff;
border-radius:20px;
padding:40px 30px;
text-align:center;
border:1px solid rgba(10,173,94,0.15);
box-shadow:0 20px 40px rgba(10,173,94,0.08);
transition:0.4s ease;
}

.feature-card:hover{
transform:translateY(-8px);
box-shadow:0 30px 60px rgba(10,173,94,0.15);
}

.feature-card i{
font-size:40px;
color:#0aad5e;
margin-bottom:20px;
display:inline-block;
}

.feature-card h5{
font-weight:600;
margin-bottom:15px;
}

.feature-card p{
color:var(--text-light);
font-size:0.95rem;
}

/* ================= PRICING TABLE ================= */

.service-pricing{
margin-bottom:100px;
}

.custom-table{
width:100%;
border-collapse:collapse;
background:#ffffff;
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.custom-table th,
.custom-table td{
padding:18px 20px;
text-align:center;
}

.custom-table thead{
background:#0aad5e;
color:#ffffff;
}

.custom-table tbody tr{
border-bottom:1px solid #e5e7eb;
transition:0.3s ease;
}

.custom-table tbody tr:hover{
background:#f0fdf4;
}

.table-note{
margin-top:20px;
font-size:0.95rem;
color:#475569;
}

/* ================= HOW IT WORKS + WHY CHOOSE ================= */

.service-model{
margin-top:80px;
margin-bottom:80px;
}

.service-model .row{
align-items:stretch;
}

/* LEFT CARD */

.fare-box{
background:#ffffff;
padding:40px;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,0.06);
height:100%;
transition:0.3s;
}

/* RIGHT CARD */

.model-card{
background:linear-gradient(135deg,#0aad5e,#22e38a);
padding:40px;
border-radius:20px;
color:#ffffff;
height:100%;
transition:0.3s;
}

.fare-box:hover,
.model-card:hover{
transform:translateY(-6px);
}

/* HEADINGS */

.fare-box h4,
.model-card h4{
font-size:22px;
font-weight:600;
margin-bottom:25px;
}

/* ================= STEPS ================= */

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

.steps-list li{
display:flex;
gap:15px;
margin-bottom:22px;
align-items:flex-start;
}

.step-number{
width:32px;
height:32px;
border-radius:50%;
background:#0aad5e;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:14px;
flex-shrink:0;
}

.step-content strong{
display:block;
font-size:16px;
margin-bottom:3px;
color:#111827;
}

.step-content span{
font-size:14px;
color:#64748b;
}

/* ================= BENEFITS ================= */

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

.benefit-list li{
margin-bottom:12px;
display:flex;
align-items:center;
gap:10px;
font-size:15px;
}

.benefit-list i{
font-size:16px;
color:#ffffff;
}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

.service-detail{
padding:100px 0 80px;
}

.service-model .row{
gap:30px;
}

.feature-card{
padding:30px 20px;
}

}