/* ==============================
   General page styles
   ============================== */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* light background for contrast */
    color: #333;
}

/* Header styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #117A47;  /* brand green */
    padding: 10px 20px;
    box-sizing: border-box;
}

header h1 {
    margin: 0;
}

/* Navigation styles */
nav a {
    color: white; /* white links */
    margin-left: 20px; /* spacing between links */
    text-decoration: none;
    font-weight: bold;
}


/* Footer */
footer {
    text-align: center;
    padding: 15px;
    background-color: #117A47; /* brand green footer */
    color: white;
}

/* Footer layout */
footer {
    background-color: #117A47; /* brand green */
    color: white;
    padding: 15px 25px;
}

.footer-container {
    display: flex;
    justify-content: space-between; /* push items to opposite sides */
    align-items: center;
    max-width: 1400px;
    margin: auto;
}

footer a.facebook-link {
    color: white;             /* text color */
    text-decoration: none;    /* remove underline */
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;                 /* space between emoji and text */
    transition: color 0.3s;
}

footer a.facebook-link:hover {
    color: #d4f0df; /* subtle hover effect in brand tone */
}


/* Lists */
ul {
    padding-left: 20px;
}

/* Headings */
h2 {
    color: #117A47; /* brand color for headings */
}

/* Sections */
section {
    margin-bottom: 30px;
}

/* Phone button in header */
.phone-button {
    background-color: #fff;
    color: #117A47;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    margin-left: 20px;
    border: none;
    display: inline-block;
    transition: background 0.3s;
}

.phone-button:hover {
    background-color: #e0e0e0;
}

/* ==============================
   HEADER TEXT & NAVIGATION SIZE (BALANCED FOR 110px LOGO)
   ============================== */

/* Navigation links (Home, Our Services) */
header nav a {
    font-size: 22px;        /* balances nicely with 110px logo */
    color: white;
    text-decoration: none;
    margin-left: 25px;      /* slightly more spacing for large links */
    font-weight: 600;       /* slightly less heavy than phone button */
    letter-spacing: 0.5px;  /* subtle spacing for readability */
    line-height: 1.2;       /* vertical alignment with logo */
}

/* Navigation links (desktop) */
header nav.nav-menu {
    display: flex;
    align-items: center;
}

/* Phone button */
header nav .phone-button {
    color: #000;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;  /* remove underline */
    margin-left: 25px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

/* Hover effect for the phone button */
header nav .phone-button:hover {
    background-color: #e0e0e0; /* subtle hover */
}

header a img {
    height: 110px;      /* default for desktop */
    max-width: 100%;    /* prevents overflow */
}

/* ==============================
   Homepage styles
   ============================== */

/* Main container (homepage) */
main {
    padding: 30px 25px;  /* top/bottom 30px, left/right 25px */
    max-width: 1400px;
    margin: auto;
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
    border-radius: 5px;
}

/* Two-column intro layout (homepage) */
.home-container {
    display: flex;
    gap: 30px;             /* space between image and text */
    flex-wrap: wrap;
    align-items: stretch;   /* stretch image height to match text */
}

.home-image img {
    width: 100%;        /* image fills its container */
    height: auto;       /* maintains aspect ratio */
    max-width: 600px;   /* limits size on large screens */
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 10px;
}



.home-text {
    flex: 1;                
    min-width: 220px;
	padding-left: 10px
	padding-right: 10px
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* stack intro + contact vertically */
}

.home-text .intro-text h2 {
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 20px;
}


/* Optional: smaller spacing between sections if needed */
section {
    margin-bottom: 40px; /* slightly more breathing room vertically */
}

.contact-text {
    margin-top: 40px; /* increases space above the Contact Us section */
}

.contact-text h2 {
    text-decoration: underline;
    text-underline-offset: 6px;   /* pushes the line down slightly */
}



/* ==============================
   Services page styles
   ============================== */

/* Padding specifically for the services page */
.services-content {
    padding: 40px 30px; /* top/bottom 40px, left/right 30px */
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
    border-radius: 5px;
    max-width: 1100px;  /* wider content box */
    margin: auto;
}

/* Two-column layout (text left, image right) */
.services-container {
    display: flex;
    gap: 20px;             /* space between text and image */
    flex-wrap: wrap;        /* stacks on smaller screens */
    align-items: stretch;   /* image height matches text height */
}

.services-image img {
    width: auto;
    height: 100%;
    max-width: 500px;
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15); /* subtle shadow */
    margin-bottom: 10px; /* spacing for stacked view on small screens */
}


.services-text {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.home-text, .services-text {
    padding-left: 10px;
    padding-right: 10px;
}

/* ==============================
   Contact page styles
   ============================== */
.contact-content {
    padding: 40px 30px;
    max-width: 700px;
    margin: auto;
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.contact-form label {
    font-weight: bold;
    margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #117A47;
    box-shadow: 0 0 5px rgba(17,122,71,0.3);
}

.contact-form button {
    padding: 12px 20px;
    background-color: #117A47;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button:hover {
    background-color: #0f6640;
}

/* Contact box */
.contact-box {
    border: 1px solid #ddd;
    padding: 24px;
    margin-top: 40px;
    background-color: #fafafa;
}

/* Contact heading */
.contact-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 22px;
    color: #117A47;
    letter-spacing: 0.5px;
}

/* Contact text */
.contact-box p {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
}

/* Labels (Phone / Email / Address) */
.contact-box strong {
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Links inside contact box */
.contact-box a {
    color: #117A47;
    text-decoration: none;
}

.contact-box a:hover {
    text-decoration: underline;
}


.contact-box {
    border-left: 4px solid #117A47;
}

/* Contact row layout */
.contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

/* Icon styling */
.contact-item .icon {
    font-size: 20px;
    line-height: 1.4;
}

/* Text container */
.contact-item span:last-child {
    display: block;
}

/* Slightly reduce spacing on last item */
.contact-item:last-child {
    margin-bottom: 0;
}

.contact-item .icon {
    color: #117A47;
}


/* Underline Contact heading */
.contact-box h3 {
    position: relative;
    padding-bottom: 10px;
}

.contact-box h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;              /* underline length */
    height: 3px;              /* thickness */
    background-color: #117A47;
}

/* ==============================
   Fonts
   ============================== */

/* Body text */
body {
    font-family: 'Open Sans', sans-serif;
}

/* Headings */
h1, h2, h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}

/* Optional: make nav links slightly more modern */
nav a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px; /* subtle spacing */
}

body {
    line-height: 1.6;
}

h1, h2 {
    letter-spacing: 0.5px;
}


/* Make the header title look like normal text but clickable */
.header-link {
    color: white;           /* same as header text */
    text-decoration: none;  /* remove underline */
    cursor: pointer;        /* shows pointer on hover */
    transition: color 0.3s;
}

.header-link:hover {
    color: #d4f0df; /* subtle hover effect in brand tones */
}


/* ==============================
   Nav link underline hover effect
   ============================== */
/* Sliding underline for Home & Services links ONLY */
header nav a:not(.phone-button) {
    position: relative;
    text-decoration: none; /* remove default underline */
}

header nav a:not(.phone-button)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: -4px;
    background-color: #fff;
    transition: width 0.3s;
}

header nav a:not(.phone-button):hover::after {
    width: 100%;
}

/* ==============================
   CONTACT CARD (DEFINITIVE)
============================== */
.contact-card {
    background-color: #fff;
    padding: 25px 30px;              /* consistent padding all around */
    border-radius: 5px;
    border: 1px solid #d1d1d1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    margin: 20px 0;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.contact-card h2 {
    color: #117A47;
    margin: 0 0 15px 0;              /* remove default top margin, keep bottom margin */
    font-size: 24px;
    line-height: 1.3;
}

.contact-card p {
    margin: 0 0 10px 0;              /* consistent spacing between paragraphs */
    font-size: 16px;
}

.contact-card a {
    color: #117A47;
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}

.contact-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    
}

/* ==============================
   Hamburger button (desktop hidden by default)
============================== */
.hamburger {
    display: none;           /* hide on desktop */
    font-size: 28px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 10;
}

/* ==============================
   Mobile responsiveness
============================== */
@media (max-width: 768px) {
    header {
        flex-wrap: wrap;           /* allow logo + nav to stack */
        justify-content: space-between;
        align-items: center;
        position: relative;        /* for absolute hamburger positioning */
    }

    .hamburger {
        display: block;           /* show on mobile */
        position: absolute;       /* position independently of flow */
        right: 20px;              /* distance from right edge */
        top: 50%;                 /* vertically center */
        transform: translateY(-50%);
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 60px;         /* space below header */
        background-color: #117A47;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a,
    .nav-menu .phone-button {
        margin: 10px 0;
        font-size: 20px;
        text-align: center;
        color: white;
        background: none;
        border-radius: 0;
        display: block;
        padding: 10px 15px;
        font-weight: bold;
        border: none;
        text-decoration: none;
    }

    .nav-menu .phone-button:hover {
        background-color: #e0e0e0;
        color: #000;
    }

    header a img {
        height: 80px;   /* smaller logo on mobile */
        max-width: 100%;
    }

    .services-image img,
    .home-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}