/*----------Service Detail Page Css Start----------*/

/* 1. Hero Card Style */
.service-hero-section {
    padding-bottom: 60px;
}

.service-hero-card {
    border-radius: 20px;
    padding: 60px 50px;
    /* Removed the heavy shadow since we now use bg-cream for contrast, added a subtle border */
    /* box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; */
    border: 1px solid rgba(0,0,0,0.05);
}

/* 2. Benefit List (The "What is this for" section) */
.service-benefit-list {
    padding-left: 0;
    list-style: none;
}

.service-benefit-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 25px;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: var(--black1);
}

.service-benefit-list li::before {
    content: "•";
    color: var(--russet);
    font-size: 50px;
    position: absolute;
    left: 0;
    top: 2px;
}

.service-benefit-list strong {
    color: var(--green); /* Highlight key terms in green */
    font-weight: 600;
}

/* 3. Process Cards (Now White on Cream Background) */
.process-card {
    background-color: var(--white); /* Added White Background */
    padding: 30px; /* Increased padding for card look */
    height: 100%;
    border-top: 2px solid transparent;
    transition: all 0.3s ease;
    border-radius: 0; /* Boxy look per brand */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* Very subtle shadow */
}

.process-card:hover {
    border-top-color: var(--russet);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.process-number {
    display: block;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    color: var(--russet);
    margin-bottom: 15px;
    font-weight: 600;
}

.process-card .heading3 {
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 15px;
    font-family: "Prata", serif;
}

.process-card .desc {
    font-family: "Jost", sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #5a5a5a;
}

/* 4. Tactic Items (Now Cream on White Background) */
.tactic-item {
    background: var(--cream); /* Changed from White to Cream */
    padding: 30px;
    margin-bottom: 20px;
    border-left: 3px solid var(--russet);
    transition: all 0.3s ease;
}

.tactic-item:hover {
    background: var(--green); /* Interaction: turn Green on hover */
}

.tactic-item:hover .tactic-title,
.tactic-item:hover p {
    color: var(--white); /* Text turns white on hover */
}

.tactic-title {
    font-family: "Prata", serif;
    font-size: 20px;
    color: var(--green);
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.tactic-item p {
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #555;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

/* Responsive Tweaks */
@media screen and (max-width: 992px) {
    .service-hero-card {
        padding: 40px 25px;
    }
    .service-hero-card .heading1 {
        font-size: 32px;
        line-height: 42px;
    }
    .service-hero-card .text-page {
        text-align: center;
    }
}
/*----------Service Detail Page Css End----------*/