/* --- Service Page Specific Styles --- */

/* Service Hero Section (Adapt from contact/home hero) */
.service-hero {
    color: var(--clr-heading, #333); /* Use CSS variable or fallback */
    padding: 5rem 2rem; /* Consistent padding */
    text-align: center;
    border-bottom: 1px solid #e0e0e0; /* Subtle border */
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 0.1s;
}

body {
    background-color: #7f00001c;
}

.service-hero h1 {
    font-size: var(--fz-3xl, 2.8rem); /* Use variable or fallback */
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--clr-heading, #1a1a2e); /* Darker heading color */
}

.service-hero p {
    font-size: var(--fz-lg, 1.25rem); /* Use variable or fallback */
    max-width: 800px;
    margin: 0 auto 1rem auto;
    line-height: 1.7;
    color: var(--clr-text, #555); /* Standard text color */
}

/* Service Content Area (Adapt from contact content) */
.service-content {
    padding: 0; /* Let sections handle their own padding entirely */
    opacity: 0;
    animation: fadeInSlideUp 0.7s ease-out forwards;
    animation-delay: 0.3s;
}

/* Individual Service Sections */
.service-section {
    padding: 2.5rem clamp(1rem, 5vw, 4rem); /* Vertical padding + responsive horizontal padding */
    margin-bottom: 3.5rem;
    border-radius: 15px; /* Optional: Remove radius if you want sharp edges */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add transform to the transition property */
    max-width: 1100px; /* Or your preferred content width */
    margin-left: auto;
    margin-right: auto;
}

.service-content > .service-section:first-child {
    /* margin-top: 0; */ /* Adjust if needed */
}

.service-content > .service-section:last-child {
    margin-bottom: 0; /* Remove bottom margin for the last section */
}

.service-section:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* Slightly enhance shadow on hover */
    transform: translateY(-5px); /* Moves the section up by 5 pixels */
}

.service-section h2 {
    font-size: var(--fz-2xl, 2rem);
    color: var(--clr-heading, #333);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--clr-accent, #a90000); /* Accent border */
    display: inline-block; /* Keep border tight to text */
}

.service-section h3 {
    font-size: var(--fz-xl, 1.5rem);
    color: var(--clr-heading, #444);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.service-section p,
.service-section ul {
    color: var(--clr-text, #555);
    line-height: 1.7;
    font-size: var(--fz-md, 1rem);
    margin-bottom: 1rem;
}

.service-section ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
}

.service-section ul li {
    position: relative;
    padding-left: 1.8rem; /* Space for custom bullet */
    margin-bottom: 0.8rem;
}

/* Custom list bullet */
.service-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em; /* Adjust vertical alignment */
    width: 8px;
    height: 8px;
    background-color: var(--clr-accent, #a90000);
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Specific Section Styling */
.service-section.intro p {
    font-size: var(--fz-lg, 1.1rem); /* Slightly larger intro text */
    max-width: 900px; /* Limit width for readability */
}

.service-section.details article {
    margin-bottom: 2.5rem; /* Space between service detail articles */
}
.service-section.details article:last-child {
    margin-bottom: 0;
}

.service-section.industry-impact {
    background-color: #f8f9fa; /* Light background for contrast */
}

.service-section.industry-impact ul li::before {
    background-color: var(--clr-accent-light, #a90000); /* Match border color */
}

.service-section.cta {
    background-color: transparent;
    box-shadow: none;
    text-align: center;
    padding: 2rem 0; /* Adjust padding */
}

.service-section.cta h2 {
    border-bottom: none; /* Remove border for CTA heading */
}

.service-section.cta p {
    margin-bottom: 1.5rem;
}

/* Use the global .cta-button style if available, or define here */
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--clr-accent, #ffffff);
    color: #000000;
    border: none;
    border-radius: 6px;
    font-size: var(--fz-md, 1rem);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
    background-color: #dbdbdb; /* Darker accent */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}


/* --- Responsive Adjustments --- */

@media (max-width: 992px) {
    .service-content {
        padding: 3rem 1.5rem;
    }
    .service-section {
        max-width: 90%; /* Keep it slightly constrained on medium screens */
    }
}

@media (max-width: 768px) {
    .service-hero {
        padding: 4rem 1rem;
    }
    .service-hero h1 {
        font-size: calc(var(--fz-3xl, 2.8rem) * 0.85); /* Slightly larger reduction */
    }
    .service-hero p {
        font-size: calc(var(--fz-lg, 1.25rem) * 0.9); /* Keep this reduction */
    }

    .service-content {
        /* Padding adjustments might be needed if content feels cramped */
        /* padding: 2.5rem 1rem; */
    }

    .service-section {
        padding: 2rem clamp(0.75rem, 3vw, 1rem); /* Reduce horizontal padding */
        max-width: none; /* Explicitly remove max-width */
        margin-bottom: 2.5rem; /* Adjust spacing */
    }

    .service-section h2 {
        font-size: calc(var(--fz-2xl, 2rem) * 0.85); /* Reduce h2 size */
    }
    .service-section h3 {
        font-size: calc(var(--fz-xl, 1.5rem) * 0.9); /* Reduce h3 size */
    }
    /* Reduce paragraph and list item font size */
    .service-section p,
    .service-section ul li {
        font-size: calc(var(--fz-md, 1rem) * 0.95); /* Slightly smaller body text */
        line-height: 1.6; /* Adjust line height slightly */
    }
    /* Reduce CTA button font size */
    .cta-button {
        font-size: calc(var(--fz-md, 1rem) * 0.9);
        padding: 10px 25px; /* Adjust padding */
    }
}

@media (max-width: 576px) {
    .service-hero {
        padding: 3rem 1rem;
    }
    .service-hero h1 {
        font-size: calc(var(--fz-3xl, 2.8rem) * 0.75); /* Further reduce h1 */
    }
    .service-hero p {
        font-size: calc(var(--fz-lg, 1.25rem) * 0.85); /* Further reduce hero p */
    }

    .service-section {
        padding: 1.5rem clamp(0.5rem, 2vw, 0.8rem); /* Further reduce horizontal padding */
        max-width: none; /* Explicitly remove max-width */
        margin-bottom: 2rem; /* Further adjust spacing */
    }

    .service-section h2 {
        font-size: calc(var(--fz-2xl, 2rem) * 0.8); /* Further reduce h2 */
    }
    .service-section h3 {
        font-size: calc(var(--fz-xl, 1.5rem) * 0.85); /* Further reduce h3 */
    }
    /* Further reduce paragraph and list item font size */
    .service-section p,
    .service-section ul li {
        font-size: calc(var(--fz-md, 1rem) * 0.9); /* Smaller body text */
    }

    .service-section ul li {
        padding-left: 1.5rem; /* Adjust padding for smaller screens */
    }
    .service-section ul li::before {
        width: 6px; /* Smaller bullet */
        height: 6px;
    }
    /* Further reduce CTA button font size */
    .cta-button {
        font-size: calc(var(--fz-md, 1rem) * 0.85);
        padding: 9px 20px; /* Adjust padding */
    }
}