/* style.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Light blue-gray background */
}

html {
    scroll-behavior: smooth;
}
.text-primary-blue {
    color: #1e3a8a; /* Darker blue for primary text/headings */
}
.bg-primary-blue {
    background-color: #1e3a8a;
}
.btn-primary {
    background-color: #2563eb; /* blue-600 */
    color: #ffffff; /* white */
    font-weight: 600; /* font-semibold */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
    background-color: #1d4ed8; /* blue-700 */
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.btn-secondary {
    background-color: transparent;
    color: #2563eb; /* blue-600 */
    border: 1px solid #2563eb; /* border border-blue-600 */
    font-weight: 600; /* font-semibold */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}
.btn-secondary:hover {
    background-color: #eff6ff; /* blue-50 */
}
.section-heading {
    font-size: 2.25rem; /* text-3xl */
    line-height: 2.5rem; /* leading-9 */
    font-weight: 700; /* font-bold */
    color: #1e3a8a; /* text-primary-blue */
    margin-bottom: 1.5rem; /* mb-6 */
    text-align: center;
}
@media (min-width: 768px) { /* md breakpoint */
    .section-heading {
        font-size: 2.5rem; /* md:text-4xl */
        line-height: 1; /* md:leading-tight */
    }
}
.icon-lg {
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
}

/* Specific styles for service pages hero sections if needed */
.hero-general-plumbing {
    background-image: linear-gradient(to right, #2563eb, #1e40af); /* blue-600 to blue-800 */
}
.hero-drain-sewer {
    background-image: linear-gradient(to right, #2563eb, #1e40af); /* blue-600 to blue-800 */
}
.hero-water-heater {
    background-image: linear-gradient(to right, #2563eb, #1e40af); /* blue-600 to blue-800 */
}
.hero-pipe-repair {
    background-image: linear-gradient(to right, #2563eb, #1e40af); /* blue-600 to blue-800 */
}
.hero-fixture-installation {
    background-image: linear-gradient(to right, #2563eb, #1e40af); /* blue-600 to blue-800 */
}
.hero-emergency-plumbing {
    background-image: linear-gradient(to right, #dc2626, #991b1b); /* red-600 to red-800 */
}

/* Additional utility classes for list items if needed */
.list-item-flex {
    display: flex;
    align-items: flex-start;
}
.list-item-bullet {
    margin-right: 0.5rem; /* mr-2 */
    color: #2563eb; /* blue-600 */
}

/* Custom Animation Enhancements */
.icon-lg {
    transition: transform 0.3s ease;
}

.icon-lg:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Service card hover effects */
a.block:hover {
    transform: translateY(-5px);
}

/* Smooth transitions for all interactive elements */
a, button {
    transition: all 0.3s ease;
}