/* Reset & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    /* Concept: Nunito in Bold option */
    line-height: 1.6;
    color: #333;
    /* Concept: Light recycling color background */
    background-color: #e8f5e9;
    /* Light Green Tint */
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography & Branding */
h1,
h2,
h3,
h4 {
    margin-bottom: 20px;
    color: #003366;
    /* Dark Blue */
}

/* Concept: Styled "Waste0" text */
.brand-text {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    color: #003366;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.section-title {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 50px;
    text-transform: uppercase;
    position: relative;
    color: #003366;
    font-weight: 800;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 6px;
    background: #4CAF50;
    /* Green */
    margin: 15px auto 0;
    border-radius: 3px;
}

/* Header */
header {
    background: #ffffff;
    /* Concept: Solid White Header */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Softer, deeper shadow */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 20px 0;
    /* Increased padding */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Concept: Header Layout (Logo Left, Nav Center, Button Right) */
    position: relative;
    padding: 0 10px;
}

/* Concept: Logo Left */
.logo {
    flex: 0 0 auto;
    /* Do not grow, stick to size */
    margin-right: 20px;
}

.logo img {
    height: 70px;
    transition: transform 0.3s;
}

.logo img:hover {
    transform: rotate(-3deg) scale(1.05);
}

/* Main Navigation */
.main-nav {
    flex: 1;
    /* Take up remaining space */
    display: flex;
    justify-content: center;
    /* Center links in the middle space */
}

.main-nav ul {
    display: flex;
    gap: 25px;
    /* Spacing between links */
    align-items: center;
    flex-wrap: wrap;
    /* Wrap on smaller screens if needed */
    justify-content: center;
}

.main-nav a {
    font-size: 0.95rem;
    font-weight: 700;
    color: #003366;
    /* Match brand blue */
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
}

.main-nav a:hover {
    color: #4CAF50;
    /* Green hover */
}

.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #4CAF50;
    transition: width 0.3s;
}

.main-nav a:hover::after {
    width: 100%;
}

/* Concept: Button far right */
.cta-header {
    flex: 0 0 auto;
    /* Do not grow */
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    background: #87CEEB;
    /* Concept: Sky Blue Background */
    color: #003366;
    /* Concept: Dark Blue Text */
    padding: 12px 30px;
    border-radius: 0;
    /* Concept: Square */
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid #003366;
    /* Sophisticated border */
    text-transform: uppercase;
    box-shadow: none;
}

.btn-primary:hover {
    background: #003366;
    color: #87CEEB;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.2);
}

/* Nav Overlay Removed */

/* Hero Section */
.hero {
    /* Concept: Tools background with overlay */
    background: url('assets/hero-tools-highres.png') no-repeat center center/cover;
    /* top center helps show more 'tools' if they are on a table */
    min-height: 80vh;
    /* Reduced slightly to help 'zoom out' effect */
    display: flex;
    align-items: center;
    position: relative;
    padding: 40px 0;
    overflow: hidden;
}

/* Concept: Gradient overlay for readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    /* Fade over 60% of the screen */
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.hero-content-overlay {
    position: relative;
    z-index: 2;
    /* Sit on top of overlay */
    max-width: 650px;
    /* Limit width to keep text left */
    margin-left: 0;
    /* Force left alignment */
    text-align: left;
    padding-left: 20px;
    /* Slight buffer */
}

/* Remove old split/box styles */
.hero-split,
.hero-text-box,
.hero-image-container,
.hero-img {
    display: none;
    /* Safely hide old classes if stuck in cache, though HTML is updated */
}

.hero h1 {
    font-size: 5.5rem;
    font-weight: 700;
    color: #4CAF50;
    /* Green to match brand */
    margin-bottom: 10px;
    line-height: 1;
    letter-spacing: 2px;
    /* Concept: Industrial/Bold Font */
    font-family: 'Impact', Charcoal, sans-serif;
    text-transform: none;
    /* Allow Mixed Case */
}

.hero h2 {
    font-size: 2.2rem;
    color: #4CAF50;
    margin-bottom: 25px;
    font-weight: 500;
    letter-spacing: 1px;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 35px;
    color: #444;
    line-height: 1.6;
    max-width: 100%;
    margin-left: 0;
    /* Reset margins */
}

.btn-large {
    background: #87CEEB;
    /* Concept: Sky Blue Background */
    color: #003366;
    /* Concept: Dark Blue Text for contrast/sophistication */
    padding: 18px 50px;
    font-size: 1.4rem;
    border-radius: 0;
    /* Concept: Square Button */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    border: 2px solid #003366;
    /* Sophisticated border */
    box-shadow: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-large:hover {
    background: #003366;
    color: #87CEEB;
    /* Invert colors on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.2);
}

/* Services */
.services {
    padding: 100px 0;
    text-align: center;
    padding: 80px 0;
    text-align: center;
    background: #ffffff;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Updated Service Card to be a link */
a.service-card {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: block;
    /* Make anchor act as block */
    text-decoration: none;
    /* Remove underline */
    color: inherit;
    border: 1px solid transparent;
}

a.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border-color: #87CEEB;
    /* Highlight on hover */
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.card-link {
    display: inline-block;
    margin-top: 15px;
    color: #003366;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Service Detail Pages */
.page-content {
    padding: 100px 0;
    background: #fff;
    min-height: 60vh;
}

.service-detail h1 {
    font-family: 'Impact', Charcoal, sans-serif;
    color: #4CAF50;
    font-size: 3rem;
}

.service-intro {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #666;
}

.service-description,
.pricing-table {
    margin-bottom: 50px;
}

.pricing-table .price-list {
    display: grid;
    gap: 15px;
    max-width: 600px;
    margin-top: 20px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #f9f9f9;
    border-left: 5px solid #87CEEB;
    font-weight: 500;
}

.price-item .price {
    font-weight: 700;
    color: #003366;
}

.service-contact {
    margin-top: 60px;
    text-align: center;
    background: #e8f5e9;
    padding: 40px;
    border-radius: 10px;
}

.service-contact p {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.service-card {
    background: #fff;
    /* Keep white on white or slight offset */
    padding: 50px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Premium Shadow */
    transition: transform 0.4s, box-shadow 0.4s;
    border: 1px solid #f0f0f0;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: #4CAF50;
}

.service-icon,
.icon-placeholder {
    height: 90px;
    width: auto;
    margin-bottom: 25px;
    font-size: 70px;
    color: #4CAF50;
}

.service-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

/* Why Waste0 Section (Redesigned to match Hero) */
.why-us {
    background: url('assets/why-bg-highres.png') no-repeat center center/cover;
    /* Concept: Tool belt background */
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    text-align: left;
    /* Align Left */
}

/* Gradient Overlay (Same as Hero) */
.why-us::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    /* Fade over 60% of the screen */
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.why-content-overlay {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin-left: 0;
    text-align: left;
    padding-left: 20px;
}

.why-us .section-title {
    font-family: 'Impact', Charcoal, sans-serif;
    color: #4CAF50;
    font-size: 4rem;
    margin-bottom: 20px;
    text-transform: none;
    /* Mixed Case */
}

.why-us .about-text {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #333;
}

.why-us .features-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-us .feature h4 {
    font-size: 1.5rem;
    color: #003366;
    margin-bottom: 5px;
}

/* About */
.about {
    padding: 100px 0;
    text-align: center;
    /* Transparent to show body bg (light green) */
}

.about-text {
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.25rem;
    color: #444;
}

.features-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.feature {
    flex: 1;
    min-width: 280px;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.feature h4 {
    color: #003366;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* Request Route */
.request-route {
    padding: 100px 0;
    text-align: center;
    background: #fff;
    border-radius: 30px;
    margin: 40px 20px;
    /* Floating island look */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.contact-form {
    max-width: 700px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    padding: 20px;
    border: 2px solid #eee;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1.1rem;
    background: #fdfdfd;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #4CAF50;
    outline: none;
    background: #fff;
}

.contact-form button {
    cursor: pointer;
    border: none;
    margin-top: 10px;
}

/* Footer */
footer {
    background: #003366;
    /* Deep brand blue */
    color: #fff;
    padding: 80px 0 40px;
    text-align: center;
    border-top: 5px solid #4CAF50;
}

.footer-logo h3 {
    color: #4CAF50;
    /* Green highlight */
    margin-bottom: 10px;
    font-size: 2rem;
}

.footer-links {
    margin: 30px 0;
}

.footer-links a {
    margin: 0 20px;
    color: #ccc;
    font-weight: 500;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.legal p {
    font-size: 1.2rem;
    color: #ffffff;
    margin-top: 15px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 15px;
        padding: 15px 10px;
    }

    .main-nav {
        order: 2;
        /* Move links below logo but above header bottom? or adjust */
    }

    .cta-header {
        order: 3;
    }

    .main-nav ul {
        gap: 10px;
        flex-direction: column;
    }

    .hero-split {
        flex-direction: column-reverse;
        /* Stack image on top or bottom? User said image right center. On Mobile stack usually image top or text top. I'll do text top for content priority or image top for visual? Let's do standard column (Text top) */
        flex-direction: column;
        text-align: center;
    }

    .hero-text-box {
        text-align: center;
        border-left: none;
        border-top: 8px solid #4CAF50;
        padding: 30px 20px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .header-content {
        padding: 0 10px;
    }

    .hamburger {
        font-size: 32px;
    }

    .logo img {
        height: 50px;
    }

    .btn-primary {
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 2rem;
    }
}

/* Service List Styles */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
    margin-top: 2rem;
    text-align: left;
}

.service-category {
    background: #fdfdfd;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #4CAF50;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.service-category h3 {
    color: #003366;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}

.service-category p {
    font-weight: 600;
    color: #555;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.service-category ul {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 1.5rem;
}

.service-category li {
    margin-bottom: 0.5rem;
    color: #444;
    font-weight: normal;
    font-size: 0.95rem;
}