/* Base styles */
body {
    margin: 0;
    /* Use Franklin Gothic font family where available with sensible fallbacks */
    font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fafafa;
}

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

/* Header */
.header {
    background-color: #111;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    max-height: 60px;
}
.nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: 600;
    transition: color 0.2s ease;
}
.nav a:hover {
    color: #ff8562;
}

/* Hero section */
.hero {
    /* Provide ample space for the absolutely positioned header (logo/nav/phone).
       The top padding should account for the header's top offset plus its height (logo height) and some breathing room */
    /* Increase top padding further to make sure the enlarged logo is fully visible and leave some space above the hat */
    padding: 480px 0 120px;
    /* Use a garden-themed photo (from archive) with a dark overlay */
    /* Garden background with dark overlay */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/hero.jpg') center/cover no-repeat;
    color: #fff;
    position: relative;
    text-align: center;
}
/* Top row inside hero: menu, big logo and phone number */
.hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Position the header row absolutely to allow it to sit higher within the hero */
    position: absolute;
    /* Shift the header row slightly upward so that the navigation text aligns with the top of the logo's hat.
       Adjusted to allow more space above the logo so it doesn't get clipped. */
    /* Raise the header row slightly more so that the navigation text lines up with the top of the hat of the logo */
    /* Position the header row slightly above its normal flow so that the navigation text aligns with the top of the logo's hat */
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    margin-bottom: 0;
}

/* Remove top padding from the container inside hero-header so that the nav and phone align
   higher within the hero. We retain horizontal padding for breathing space. */
.hero-header.container {
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
}
.hero-header nav a {
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
    font-weight: 600;
    transition: color 0.2s ease;
}
.hero-header nav a:last-child {
    margin-right: 0;
}
.hero-header nav a:hover {
    color: #ff8562;
}
.hero-logo {
    /* Increase logo size further (roughly 10% larger than before) to make the head more prominent */
    max-height: 300px;
    /* Add a top margin so that the logo sits lower than the navigation text; this prevents the hat from aligning with the nav bar */
    /* Lower the logo further relative to the navigation text so that the head sits noticeably below the menu */
    margin: 80px 20px 0;
    -webkit-user-drag: none;
    user-select: none;
}
.hero-phone a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.hero-phone a:hover {
    color: #ff8562;
}
.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.hero-content h1 {
    font-size: 64px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
}
/* Scroll down arrow */
.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    /* Use an SVG arrow instead of text; set dimensions and center it */
    width: 50px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -10px); }
    60% { transform: translate(-50%, -5px); }
}
.btn {
    display: inline-block;
    background-color: #ff8562;
    color: #fff;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.btn:hover {
    background-color: #e14a27;
}

/* Service section photos */
.service-photo {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    margin-bottom: 15px;
    -webkit-user-drag: none;
    user-select: none;
}

/* About and services sections */
.about,
.services,
.call-to-action,
.contact,
.call-to-contact {
    padding: 80px 0;
}
.about h2,
.services h2,
.call-to-action h2,
.contact h2,
.call-to-contact h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 32px;
    text-transform: uppercase;
}

/* Services list */
.services .service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.services .service-item {
    flex: 1 1 30%;
    background-color: #f7f7f7;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.services .service-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 20px;
    font-size: 24px;
    color: #338033;
}
.services .service-item ul {
    list-style-type: disc;
    padding: 0 40px 20px 40px;
}

/* Call to action */
.call-to-action {
    background-color: #f2f2f2;
    text-align: center;
}
.call-to-action p {
    margin-bottom: 25px;
}

/* Contact section */
.contact-info {
    list-style: none;
    padding: 0;
}
.contact-info li {
    margin-bottom: 10px;
    font-size: 18px;
}
.contact-info a {
    color: #338033;
    text-decoration: none;
}
.contact-info a:hover {
    text-decoration: underline;
}

/* Combined call-to-action and contact section */
.call-to-contact {
    background-color: #f2f2f2;
    text-align: center;
}

/* Subheading for contacts */
.call-to-contact h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 24px;
    color: #338033;
    text-transform: uppercase;
}

/* Center contact list within call-to-contact */
.call-to-contact .contact-info.center {
    margin: 0 auto;
    display: inline-block;
    text-align: left;
}

/* About section layout with accompanying image */
.about .about-container {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Textual content inside the about section */
.about .about-text {
    flex: 1;
}

/* Image wrapper inside the about section */
.about .about-image {
    flex: 1;
}

/* Image styling for the about section */
.about .about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}
/* Footer */
.footer {
    background-color: #111;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav {
        display: none;
    }

    /* On mobile screens hide the top phone number in the hero header. The phone number is repeated in the call-to-contact section, so it's not essential here and hiding it prevents stray characters from appearing when space is limited. */
    .hero-phone {
        display: none;
    }
    .services .service-item {
        flex: 1 1 100%;
    }
    .hero {
        /* On small screens, still provide space for the larger logo/phone row (header) */
        padding: 280px 20px 60px;
    }
    .hero h1 {
        font-size: 36px;
    }
    .hero p {
        font-size: 18px;
    }

    /* Stack about section columns on small screens */
    .about .about-container {
        flex-direction: column;
        text-align: center;
    }
    .about .about-image {
        margin-top: 20px;
    }
}