/* Full-width dark panel under the header */
.services-panel {
    width: 100%;
    background-color: #1a1a1a;
    padding: 80px 0;
}

/* Gold-boxed content (wrapper for H1 and cards) */
.services-panel .services-wrapper {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 30px;
    text-align: center; /* Centers the H1 */
    border: 2px solid #ffd700;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);

    /* --- KEY CHANGES FOR SINGLE COLUMN LAYOUT --- */
    display: flex;
    flex-direction: column; /* Stacks the items (H1 and cards) vertically */
    align-items: center;   /* Centers the items (the entire column of cards) horizontally */
    gap: 2rem; /* Vertical space between H1 and cards, and between cards */
    /* text-align: center on wrapper will also center content of h1 and cards */
}

/* Main title */
.services-panel .services-wrapper h1 {
    font-size: 4rem; /* Consider responsive sizing, e.g., clamp(2.5rem, 8vw, 4rem) */
    color: #ffd700;
    margin-bottom: 0; /* Gap is handled by parent's 'gap' property */
    font-weight: 700;
    letter-spacing: 0.5px;
    width: 100%; /* Ensures H1 takes full available width in the flex column */
}

/* Each individual service block (the "card") */
.service-block {
    background-color: #1c1c1c;
    width: 100%; /* Take full width of its column */
    max-width: 750px; /* --- INCREASED WIDTH FOR "WIDE RECTANGLES" --- Adjust this value as needed */
    min-height: 250px; /* Ensures a consistent minimum height */
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    color: #ffd54f; /* Default text color for the card */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Flexbox for vertical centering of content *inside* the card */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centers content horizontally within the card */
    overflow: hidden; /* Hides content that exceeds the card's height */
}

.service-block:hover {
    transform: translateY(-12px);
    box-shadow: 0 8px 24px #ffd54faa;
}

/* Service headings inside the block (e.g., "Criminal Defense") */
.service-block h2 {
    font-size: 2.2rem;
    color: #ffd700;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Paragraphs inside the block */
.service-block p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #eee;
    max-width: 90%; /* Allows text to use more of the card width */
    margin: 0 auto; /* Centers the paragraph block itself */
}

/* If you have an h3 specifically for the service title within the card */
.service-block h3 {
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    color: #ffd700;
}


* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .services-panel {
        padding: 40px 0; /* Reduce overall panel padding */
    }

    .services-panel .services-wrapper {
        width: 95%; /* Make wrapper take more width on smaller screens */
        padding: 30px 15px; /* Reduce internal padding */
        gap: 1.5rem; /* Reduce gap between elements */
    }

    .services-panel .services-wrapper h1 {
        font-size: 2.5rem; /* Smaller font size for the main title */
        /* Use clamp for more fluid scaling: clamp(2rem, 7vw, 2.5rem) */
    }

    .service-block {
        max-width: 90%; /* Allow service blocks to be a bit wider on mobile, filling more of the available space */
        min-height: 200px; /* Slightly reduce minimum height */
        padding: 1.5rem; /* Reduce padding inside the service block */
    }

    .service-block h2 {
        font-size: 1.8rem; /* Smaller font size for service headings */
    }

    .service-block p {
        font-size: 1rem; /* Slightly smaller font size for paragraphs */
    }

    .service-block h3 {
        font-size: 1.5rem; /* Smaller font size for h3 if used */
    }
}

/* Optional: Even smaller adjustments for very small phones */
@media (max-width: 480px) {
    .services-panel .services-wrapper h1 {
        font-size: 2rem;
    }

    .service-block {
        padding: 1rem; /* Even less padding */
        min-height: 180px;
    }

    .service-block h2 {
        font-size: 1.6rem;
    }

    .service-block p {
        font-size: 0.9rem;
    }

    .service-block h3 {
        font-size: 1.3rem;
    }
}