:root {
--c-primary: #e8522d;
--c-dark: #312651;
--c-green: #78a423;
--c-red: #b02626;
--c-teal: #17696a;
--c-gray: #83829a;
--c-bg: #f3f4f8;
--c-bg-alt1: #f2fae3;
--c-bg-alt2: #dbe9ea;
--c-white: #ffffff;

--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--radius: 8px;
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
--transition: all 0.2s ease-in-out;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--font-family);
background-color: var(--c-bg);
color: var(--c-dark);
line-height: 1.6;
font-smooth: auto;
}

.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding: 1rem; /* p-4 */
max-width: 56rem; /* max-w-4xl */
}

@media (min-width: 640px) {
    .container {
        padding: 1.5rem; /* sm:p-6 */
    }
}

@media (min-width: 768px) {
    .container {
        padding: 2rem; /* md:p-8 */
    }
}

header {
    text-align: center;
    margin-bottom: 3rem;
}

header h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: bold;
    color: var(--c-dark);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    header h1 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

header p {
    font-size: 1.125rem;
    color: var(--c-gray);
}

.main-content {
    background-color: var(--c-white);
    padding: 2rem;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
}

.main-content > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem; /* space-y-8 */
}

.category {
margin-bottom: 4rem;
}

.category__title {
font-size: 1.8rem;
margin-bottom: .5rem;
color: var(--c-dark);
border-bottom: 3px solid var(--c-primary);
padding-bottom: 0.5rem;
display: inline-block;
}

.category__description {
font-size: 1.1rem;
color: var(--c-gray);
margin-bottom: 2rem;
max-width: 80ch;
}

.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}

.service-card {
display: flex;
flex-direction: column;
background-color: var(--c-white);
border-radius: var(--radius);
padding: 1.5rem;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid #e5e7eb;
}

.service-card:hover {
box-shadow: var(--shadow-hover);
border-color: var(--c-primary);
}

.card__icon {
width: 50px;
height: 50px;
margin-bottom: 1rem;
align-self: center;
background-color: var(--c-bg-alt2);
border-radius: var(--radius);
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
}

.service-card:hover .card__icon {
 background-color: var(--c-primary);
}

.service-card h3 {
font-size: 1.15rem;
font-weight: 600;
color: var(--c-dark);
margin-bottom: 0.5rem;
}

.service-card p {
font-size: 0.9rem;
color: var(--c-gray);
flex-grow: 1; /* Pushes content down */
}

.btn {
    display: inline-block;
    width: 100%;
    background-color: var(--c-primary);
    color: var(--c-white);
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: all 200ms ease-in-out;
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn:hover {
    /* --c-primary: #e8522d -> rgb(232, 82, 45) */
    background-color: rgba(232, 82, 45, 0.9);
    box-shadow: var(--shadow-hover);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-primary);
}

@media (min-width: 640px) {
    .btn {
        width: auto;
    }
}

.footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: var(--c-gray);
}