/* === Basic Reset & Body Styling === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7;
    color: #333;
    background-color: #f8f9fa;
}

html {
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

a {
    color: #007bff; /* Standard link blue */
    text-decoration: none;
}
a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* === Header Styling (Adapted from shinysmile.ca visual) === */
header {
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 0; /* Adjust padding */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* border-bottom: 4px solid #87CEEB; Remove or change border if not on original */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* === Header Styling Updates for Logo === */

/* Find this rule (targeting the <a> tag) */
.logo-container .logo-text {
    font-size: 1.8em;
    font-weight: bold;
    color: #005A9C;
    text-decoration: none;

    /* REMOVE or COMMENT OUT these flex properties: */
    /* display: flex; */
    /* align-items: center; */
    /* gap: 10px; */

    /* ADD/ENSURE these properties: */
    display: inline-block; /* Or 'block' if needed */
    text-align: center; /* Center the text below the block image */
}

/* Rule for the logo image */
.logo-icon {
    height: 80px;  /* Your updated height */
    width: auto;   /* Maintain aspect ratio */
    display: block; /* Treat as block for margin auto */
    margin: 0 auto 5px auto; /* Centers horizontally, adds 5px space below */

    /* --- ADD/MODIFY THESE LINES --- */
    position: relative; /* Enable relative positioning */
    left: -15px;       /* Nudge 15px to the left. Adjust this pixel value! */
    /* --- End Added/Modified Lines --- */
}

/* You might still have this rule - it's okay but less specific now */
/* .logo-container img { ... } */

/* --- End New Rule --- */

.logo-container img {
    max-height: 60px; /* Adjust based on your logo size */
    display: block; /* Prevents extra space below image */
}

.header-right {
    display: flex;
    flex-direction: column; /* Stack contact info above nav */
    align-items: flex-end; /* Align items to the right */
}

.header-contact {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px; /* Space between contact and nav */
}

.header-contact i {
    color: #007bff; /* Icon color */
    margin-right: 5px;
}
.header-contact a {
    color: #555;
    text-decoration: none;
}
.header-contact a:hover {
    color: #0056b3;
    text-decoration: underline;
}


header nav ul {
    list-style: none;
    display: flex;
}

header nav ul li {
    margin-left: 20px; /* Adjust spacing */
}

header nav ul li a {
    color: #333;
    text-decoration: none;
    padding: 8px 12px;
    font-weight: 500; /* Or bold like original */
    font-size: 1em; /* Adjust as needed */
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 4px;
    display: block; /* Helps with padding/hover */
}

header nav ul li a:hover,
header nav ul li a.active {
    color: #007bff; /* Match link color or use brand accent */
    /* background-color: #e9ecef; Optional subtle hover background */
    font-weight: bold; /* Bold for active/hover like often seen */
}

/* Mobile Nav Toggle Button */
.mobile-nav-toggle {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: #333;
}

/* === Page Banner Styling - UPDATED for <img> tag === */
.page-banner {
    width: 100%;
    /* Remove background properties and fixed height */
    /* background-image: url('images/header.png'); */
    /* background-size: cover; */
    /* background-position: center center; */
    /* background-repeat: no-repeat; */
    /* height: 100vh; or height: 250px; */
    line-height: 0; /* Optional: Prevents potential extra space below image */
}

.page-banner img {
    display: block; /* Prevents extra space below image and allows margin auto */
    width: 100%;    /* Makes image scale to the container width */
    max-width: 100%; /* Ensure it doesn't overflow container */
    height: auto;   /* Maintains the image's aspect ratio */
    margin-left: auto; /* Centers image if container is wider (unlikely here) */
    margin-right: auto;/* Centers image if container is wider (unlikely here) */
}

/* Optional: Add if banner causes issues with sticky header, otherwise likely not needed */
/*
main {
    position: relative;
    z-index: 1;
}
*/

/* === Hero Section === */
.hero-section {
    position: relative; /* Needed for absolute positioning of background and content */
    height: 65vh; /* Adjust height as needed */
    min-height: 400px;
    background-color: #E0F7FA; /* The light blue background */
    overflow: hidden; /* Keep animated elements contained */
    display: flex;       /* Use flexbox to center content */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    text-align: center;
    z-index: 0; /* Ensure it's behind the sticky header */
}

.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind the hero content, above section background */
}

.hero-content {
    position: relative; /* Ensure it's above the animated background */
    z-index: 2; /* Above bubbles */
    color: #004085; /* Dark blue text for contrast */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Subtle white shadow for readability */
}

.hero-content h2 {
    font-size: 2.8em; /* Larger heading */
    margin-bottom: 15px;
    font-weight: 600;
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 25px;
    max-width: 600px; /* Prevent text line from becoming too wide */
    margin-left: auto;
    margin-right: auto;
}

.cta-button { /* Make sure CTA button styles are here too */
    display: inline-block;
    background-color: #007bff; /* Standard blue button */
    color: #ffffff;
    padding: 12px 25px;
    font-size: 1.1em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative; /* Ensure button is above bubbles */
    z-index: 2;
}

.cta-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift effect */
    text-decoration: none;
    color:#fff;
}

/* === Hero Section Animation Styles - UPDATED === */
.bubble {
    position: absolute;
    bottom: 0px; /* Starts at the bottom edge */
    /* Base size, will be varied */
    width: 20px;
    height: 20px;
    /* Base color removed - will be set by nth-child */
    border-radius: 50%;
    opacity: 0;
    /* Base animation - duration/delay will be varied */
    animation: rise 15s infinite ease-in;
    z-index: 1; /* Ensure bubbles stay behind content */
	border: 2px solid rgba(0, 90, 156, 0.4); /* Dark blue (#005A9C base) at 40% opacity */
}

/* Colors Palette (RGBA for transparency) - Expanded to 20 */
/* 1: Pale Turquoise, 2: Powder Blue, 3: Light Blue, 4: Light Cyan, 5: Pastel Sky Blue */
/* 6: Pastel Pink, 7: Light Pink, 8: V. Light Coral, 9: Pale Peach, 10: Peach Puff */
/* 11: V. Light Peach, 12: Lavender, 13: Thistle, 14: Light Plum, 15: White Smoke */
/* 16: Azure, 17: Alice Blue, 18: Pale Green, 19: Light Green, 20: Honeydew */

/* --- 48 Bubble Variations --- */
/* Burst animation applied to :nth-child(5n) */

/* Bubbles 1-20 (Cycle 1) */
.bubble:nth-child(1) { left: 10%; animation-duration: 18s; animation-delay: 0s; width: 25px; height: 25px; background-color: rgba(175, 238, 238, 0.4); animation-name: rise;} /* Color 1 */
.bubble:nth-child(2) { left: 20%; animation-duration: 15s; animation-delay: 1s; width: 15px; height: 15px; background-color: rgba(176, 224, 230, 0.4); animation-name: rise;} /* Color 2 */
.bubble:nth-child(3) { left: 35%; animation-duration: 20s; animation-delay: 3s; width: 22px; height: 22px; background-color: rgba(173, 216, 230, 0.4); animation-name: rise;} /* Color 3 */
.bubble:nth-child(4) { left: 50%; animation-duration: 16s; animation-delay: 0.5s; width: 30px; height: 30px; background-color: rgba(224, 255, 255, 0.4); animation-name: rise;} /* Color 4 */
.bubble:nth-child(5) { left: 65%; width: 18px; height: 18px; background-color: rgba(191, 239, 255, 0.4);
    animation: riseAndBurst 17s linear 4s infinite; } /* Color 5 - BURST */
.bubble:nth-child(6) { left: 80%; animation-duration: 14s; animation-delay: 2s; width: 28px; height: 28px; background-color: rgba(255, 223, 230, 0.4); animation-name: rise;} /* Color 6 */
.bubble:nth-child(7) { left: 90%; animation-duration: 22s; animation-delay: 1.5s; width: 16px; height: 16px; background-color: rgba(255, 192, 203, 0.35); animation-name: rise;} /* Color 7 */
.bubble:nth-child(8) { left: 5%; animation-duration: 17s; animation-delay: 5s; width: 24px; height: 24px; background-color: rgba(250, 190, 190, 0.4); animation-name: rise;} /* Color 8 */
.bubble:nth-child(9) { left: 15%; animation-duration: 19s; animation-delay: 6s; width: 20px; height: 20px; background-color: rgba(255, 229, 180, 0.4); animation-name: rise;} /* Color 9 */
.bubble:nth-child(10) { left: 25%; width: 27px; height: 27px; background-color: rgba(255, 218, 185, 0.4);
    animation: riseAndBurst 15s linear 2.5s infinite; } /* Color 10 - BURST */
.bubble:nth-child(11) { left: 45%; animation-duration: 21s; animation-delay: 7s; width: 19px; height: 19px; background-color: rgba(255, 239, 213, 0.4); animation-name: rise;} /* Color 11 */
.bubble:nth-child(12) { left: 55%; animation-duration: 15s; animation-delay: 3.5s; width: 23px; height: 23px; background-color: rgba(230, 230, 250, 0.4); animation-name: rise;} /* Color 12 */
.bubble:nth-child(13) { left: 70%; animation-duration: 18s; animation-delay: 8s; width: 32px; height: 32px; background-color: rgba(216, 191, 216, 0.4); animation-name: rise;} /* Color 13 */
.bubble:nth-child(14) { left: 85%; animation-duration: 20s; animation-delay: 4.5s; width: 14px; height: 14px; background-color: rgba(221, 160, 221, 0.35); animation-name: rise;} /* Color 14 */
.bubble:nth-child(15) { left: 2%; width: 26px; height: 26px; background-color: rgba(245, 245, 245, 0.4);
    animation: riseAndBurst 18s linear 9s infinite; } /* Color 15 - BURST */
.bubble:nth-child(16) { left: 12%; animation-duration: 23s; animation-delay: 5.5s; width: 21px; height: 21px; background-color: rgba(240, 255, 255, 0.4); animation-name: rise;} /* Color 16 */
.bubble:nth-child(17) { left: 28%; animation-duration: 17s; animation-delay: 10s; width: 29px; height: 29px; background-color: rgba(240, 248, 255, 0.4); animation-name: rise;} /* Color 17 */
.bubble:nth-child(18) { left: 42%; animation-duration: 15s; animation-delay: 6.5s; width: 17px; height: 17px; background-color: rgba(152, 251, 152, 0.35); animation-name: rise;} /* Color 18 */
.bubble:nth-child(19) { left: 58%; animation-duration: 19s; animation-delay: 11s; width: 24px; height: 24px; background-color: rgba(144, 238, 144, 0.4); animation-name: rise;} /* Color 19 */
.bubble:nth-child(20) { left: 75%; width: 20px; height: 20px; background-color: rgba(240, 255, 240, 0.4);
    animation: riseAndBurst 20s linear 7.5s infinite; } /* Color 20 - BURST */

/* Bubbles 21-40 (Cycle 2) */
.bubble:nth-child(21) { left: 88%; animation-duration: 16s; animation-delay: 12s; width: 27px; height: 27px; background-color: rgba(175, 238, 238, 0.4); animation-name: rise;} /* Color 1 */
.bubble:nth-child(22) { left: 8%; animation-duration: 18s; animation-delay: 8.5s; width: 19px; height: 19px; background-color: rgba(176, 224, 230, 0.4); animation-name: rise;} /* Color 2 */
.bubble:nth-child(23) { left: 22%; animation-duration: 20s; animation-delay: 13s; width: 25px; height: 25px; background-color: rgba(173, 216, 230, 0.4); animation-name: rise;} /* Color 3 */
.bubble:nth-child(24) { left: 62%; animation-duration: 17s; animation-delay: 9.5s; width: 22px; height: 22px; background-color: rgba(224, 255, 255, 0.4); animation-name: rise;} /* Color 4 */
.bubble:nth-child(25) { left: 3%; width: 30px; height: 30px; background-color: rgba(191, 239, 255, 0.4);
    animation: riseAndBurst 19s linear 14s infinite; } /* Color 5 - BURST */
.bubble:nth-child(26) { left: 18%; animation-duration: 15s; animation-delay: 10.5s; width: 16px; height: 16px; background-color: rgba(255, 223, 230, 0.4); animation-name: rise;} /* Color 6 */
.bubble:nth-child(27) { left: 32%; animation-duration: 21s; animation-delay: 15s; width: 26px; height: 26px; background-color: rgba(255, 192, 203, 0.35); animation-name: rise;} /* Color 7 */
.bubble:nth-child(28) { left: 48%; animation-duration: 16s; animation-delay: 11.5s; width: 18px; height: 18px; background-color: rgba(250, 190, 190, 0.4); animation-name: rise;} /* Color 8 */
.bubble:nth-child(29) { left: 68%; animation-duration: 18s; animation-delay: 16s; width: 23px; height: 23px; background-color: rgba(255, 229, 180, 0.4); animation-name: rise;} /* Color 9 */
.bubble:nth-child(30) { left: 78%; width: 29px; height: 29px; background-color: rgba(255, 218, 185, 0.4);
    animation: riseAndBurst 20s linear 12.5s infinite; } /* Color 10 - BURST */
.bubble:nth-child(31) { left: 92%; animation-duration: 17s; animation-delay: 17s; width: 15px; height: 15px; background-color: rgba(255, 239, 213, 0.4); animation-name: rise;} /* Color 11 */
.bubble:nth-child(32) { left: 6%; animation-duration: 19s; animation-delay: 13.5s; width: 25px; height: 25px; background-color: rgba(230, 230, 250, 0.4); animation-name: rise;} /* Color 12 */
.bubble:nth-child(33) { left: 24%; animation-duration: 16s; animation-delay: 18s; width: 20px; height: 20px; background-color: rgba(216, 191, 216, 0.4); animation-name: rise;} /* Color 13 */
.bubble:nth-child(34) { left: 38%; animation-duration: 22s; animation-delay: 14.5s; width: 27px; height: 27px; background-color: rgba(221, 160, 221, 0.35); animation-name: rise;} /* Color 14 */
.bubble:nth-child(35) { left: 52%; width: 19px; height: 19px; background-color: rgba(245, 245, 245, 0.4);
    animation: riseAndBurst 17s linear 19s infinite; } /* Color 15 - BURST */.bubble:nth-child(36) { left: 66%; animation-duration: 18s; animation-delay: 15.5s; width: 31px; height: 31px; background-color: rgba(240, 255, 255, 0.4); animation-name: rise;} /* Color 16 */
.bubble:nth-child(37) { left: 76%; animation-duration: 20s; animation-delay: 20s; width: 21px; height: 21px; background-color: rgba(240, 248, 255, 0.4); animation-name: rise;} /* Color 17 */
.bubble:nth-child(38) { left: 86%; animation-duration: 15s; animation-delay: 16.5s; width: 24px; height: 24px; background-color: rgba(152, 251, 152, 0.35); animation-name: rise;} /* Color 18 */
.bubble:nth-child(39) { left: 95%; animation-duration: 19s; animation-delay: 21s; width: 18px; height: 18px; background-color: rgba(144, 238, 144, 0.4); animation-name: rise;} /* Color 19 */
.bubble:nth-child(40) { left: 1%; width: 28px; height: 28px; background-color: rgba(240, 255, 240, 0.4);
    animation: riseAndBurst 16s linear 17.5s infinite; } /* Color 20 - BURST */

/* Bubbles 41-48 (Partial Cycle 3) */
.bubble:nth-child(41) { left: 11%; animation-duration: 18s; animation-delay: 22s; width: 25px; height: 25px; background-color: rgba(175, 238, 238, 0.4); animation-name: rise;} /* Color 1 */
.bubble:nth-child(42) { left: 21%; animation-duration: 15s; animation-delay: 18.5s; width: 15px; height: 15px; background-color: rgba(176, 224, 230, 0.4); animation-name: rise;} /* Color 2 */
.bubble:nth-child(43) { left: 36%; animation-duration: 20s; animation-delay: 23s; width: 22px; height: 22px; background-color: rgba(173, 216, 230, 0.4); animation-name: rise;} /* Color 3 */
.bubble:nth-child(44) { left: 51%; animation-duration: 16s; animation-delay: 19s; width: 30px; height: 30px; background-color: rgba(224, 255, 255, 0.4); animation-name: rise;} /* Color 4 */
.bubble:nth-child(45) { left: 64%; width: 18px; height: 18px; background-color: rgba(191, 239, 255, 0.4);
    animation: riseAndBurst 18s linear 24s infinite; } /* Color 5 - BURST */.bubble:nth-child(46) { left: 79%; animation-duration: 14s; animation-delay: 20.5s; width: 28px; height: 28px; background-color: rgba(255, 223, 230, 0.4); animation-name: rise;} /* Color 6 */
.bubble:nth-child(47) { left: 89%; animation-duration: 22s; animation-delay: 25s; width: 16px; height: 16px; background-color: rgba(255, 192, 203, 0.35); animation-name: rise;} /* Color 7 */
.bubble:nth-child(48) { left: 4%; animation-duration: 17s; animation-delay: 21.5s; width: 24px; height: 24px; background-color: rgba(250, 190, 190, 0.4); animation-name: rise;} /* Color 8 */

/* --- Leave all OTHER :nth-child rules (1-4, 6-9, 11-14, etc.) unchanged --- */
/* --- End Bubble Variations --- */

/* --- UPDATED Keyframe for EVEN EARLIER Bursting Effect --- */
@keyframes riseAndBurst {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
         /* Fade in */
        transform: translateY(-5vh) scale(1);
        opacity: 0.85;
    }
    /* Rising normally only briefly */
    45% {
        transform: translateY(-25vh) scale(1); /* Normal size just before burst starts early */
        opacity: 0.85;
    }
    /* Burst happens much earlier */
    60% {
        transform: translateY(-35vh) scale(2.5); /* Scale up significantly */
        opacity: 0.5; /* Start fading */
    }
    /* Fade out completely */
    70%, 100% { /* Fully faded by 60% */
        transform: translateY(-40vh) scale(2.5); /* Maintain scale/position during fade */
        opacity: 0; /* Fully faded */
    }
}

/* Keyframes remain the same */
@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
         opacity: 0.6; /* Slightly adjusted base opacity */
    }
    90% {
         opacity: 0.6; /* Stay visible */
    }
    100% {
        transform: translateY(-85vh); /* Rise slightly higher */
        opacity: 0; /* Fade out */
    }
}
/* --- End Hero Section Animation Styles --- */

/* === General Content Section Styling === */
.content-section { padding: 50px 0; }
.content-section h2 { text-align: center; margin-bottom: 40px; color: #005A9C; font-size: 2.2em; }

/* === Testimonials Section Styling === */
.testimonials-section {
    background-color: #f8f9fa; /* Light background for contrast */
    padding: 60px 0;
}

.testimonials-section h2 {
    text-align: center;
    margin-bottom: 50px;
    color: #005A9C;
    font-size: 2.2em;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px; /* Space between cards */
}

.testimonial {
    background-color: #ffffff;
    padding: 35px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Softer shadow */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Added for hover effect */
    position: relative;
    overflow: hidden; /* Hide overflowing quote initially */
}


.testimonial-author-initial {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: #865c4d; /* Brownish color like example M */
    color: #fff;
    font-size: 2.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto; /* Center circle, add space below */
    line-height: 1; /* Ensure letter is centered vertically */
    text-transform: uppercase; /* Make letter uppercase */
}

.testimonial-rating {
    color: #ffc107; /* Yellow stars */
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1; /* Prevent extra space */
}

.testimonial-author {
    font-weight: 600;
    color: #333;
    margin-top: 0; /* Remove default margin */
    margin-bottom: 15px;
    font-size: 1.15em;
}

.testimonial-quote-wrapper {
    height: calc(1.6 * 0.95em * 4); /* Approx height for 4 lines of text */
    /* Adjust the '4' above if you want more/fewer lines visible initially */
    overflow: hidden;
    position: relative;
    transition: height 0.4s ease-out; /* Smooth transition for height change */
}

.testimonial-quote {
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0;
    text-align: center;
    /* Initial truncation (fallback if wrapper height doesn't work perfectly) */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Match line count used for height calculation */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover Effect */
.testimonial:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

.testimonial:hover .testimonial-quote-wrapper {
     height: auto; /* Allow wrapper to expand */
     /* Or set a specific max-height if preferred: */
     /* max-height: 400px; */ /* Example max height */
}

.testimonial:hover .testimonial-quote {
    /* Reveal full quote text on hover */
    display: block; /* Override -webkit-box */
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal; /* Ensure text wraps normally */
}


/* === Responsiveness for Testimonials Grid === */
@media (max-width: 992px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .testimonial-grid {
        grid-template-columns: 1fr; /* 1 column on mobiles */
    }
    .testimonial {
        padding: 25px 20px; /* Adjust padding slightly */
    }
     .testimonial-author-initial {
        width: 65px;
        height: 65px;
        font-size: 1.8em;
    }
}


/* === Services Section Styling === */
.services-section {
    background-color: #ffffff; /* White background for this section */
    padding: 60px 0;
}

.services-section h2 {
    text-align: center;
    margin-bottom: 50px;
    color: #005A9C; /* Consistent heading color */
    font-size: 2.2em;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px; /* Space between grid items */
}

.service-item {
    position: relative; /* For overlay positioning */
    overflow: hidden; /* Contain image effects */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f8f9fa; /* Fallback bg color */
}

.service-item:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.service-link {
    display: block; /* Make link fill the item */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
}

.service-image {
    height: 280px; /* Adjust height as desired */
    background-size: cover; /* Scale image nicely */
    background-position: center; /* Center the image */
    position: relative; /* Needed for overlay */
    display: flex; /* Use flex to position overlay */
    align-items: flex-end; /* Align overlay to bottom */
}

/* === UPDATE: Pointing to PNG images now === */
/* Ensure PNG files are in the 'images' folder and named correctly (lowercase) */
.service-item-1 .service-image { background-image: url('images/service1.png'); }
.service-item-2 .service-image { background-image: url('images/service2.png'); }
.service-item-3 .service-image { background-image: url('images/service3.png'); }
.service-item-4 .service-image { background-image: url('images/service4.png'); }
.service-item-5 .service-image { background-image: url('images/service5.png'); }
.service-item-6 .service-image { background-image: url('images/service6.png'); }
/* ========================================= */


.service-overlay {
    width: 100%;
    background-color: rgba(0, 90, 156, 0.75); /* Semi-transparent dark blue overlay */
    padding: 15px 20px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.service-item:hover .service-overlay {
     background-color: rgba(0, 123, 255, 0.85); /* Brighter blue on hover */
}

.service-title {
    color: #ffffff; /* White text */
    font-size: 1.2em; /* Adjust size */
    margin: 0;
    font-weight: 600; /* Semi-bold */
    line-height: 1.3;
}

/* === Responsiveness for Services Grid === */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 25px;
    }
     .service-image {
        height: 260px; /* Slightly smaller height */
    }
}

@media (max-width: 576px) {
    .services-grid {
        grid-template-columns: 1fr; /* 1 column on small mobiles */
        gap: 20px;
    }
     .service-image {
        height: 240px; /* Adjust height for single column */
    }
     .service-title {
        font-size: 1.1em;
    }
}

/* === Timed Pop-up Notification Styling === */
.timed-popup {
    display: block;
    position: fixed;
    top: 20px; /* Position from top */
    left: 50%;
    transform: translateX(-50%) translateY(-150px); /* Start off-screen above */
    background-color: #28a745; /* Green background for success */
    color: white;
    padding: 15px 30px; /* Padding */
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1200; /* Ensure it's on top */
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Smooth transitions */
    font-weight: bold;
    text-align: center;
    pointer-events: none; /* Prevent interaction */
}

.timed-popup.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Slide into view */
}

/* === Modal Pop-up Styling === */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1050; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Disable scroll on body when modal is open (handled by JS potentially) */
    outline: 0;
    /* Use flexbox to center content */
    align-items: center;
    justify-content: center;
    padding: 20px; /* Padding for small screens */
}

.modal.active {
    display: flex; /* Show the modal */
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dim background */
    cursor: pointer; /* Indicate clicking closes modal */
    z-index: 1051; /* Below content, above page */
}

.modal-content {
    position: relative; /* To position close button relative to this */
    z-index: 1052; /* Above overlay */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 30px 40px;
    max-width: 650px; /* Max width of modal */
    width: 90%; /* Responsive width */
    max-height: 85vh; /* Max height */
    overflow-y: auto; /* Enable scroll if content overflows */
    animation: slide-down 0.3s ease-out; /* Simple animation */
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.2em; /* Make X bigger */
    font-weight: bold;
    line-height: 1;
    color: #888;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: #333;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #005A9C; /* Match other headings */
    font-size: 1.8em;
}

.modal-content p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #444; /* Slightly darker text */
}
.modal-content p:last-child {
    margin-bottom: 0;
}

/* Optional: Prevent body scroll when modal is active */
body.modal-open {
    overflow: hidden;
}

/* === About Page Styling === */
.about-page-section {
    background-color: #ffffff; /* Or keep page background */
    padding: 40px 0 60px 0; /* Adjust padding */
}

/* Style for the main heading on content pages */
main .container > h1 {
    text-align: center;
    color: #005A9C; /* Match other headings */
    font-size: 2.5em; /* Adjust size */
    margin-bottom: 40px;
}

.about-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: flex-start; /* Align items to top */
    gap: 40px; /* Space between text and image */
}

.about-text {
    flex: 1; /* Takes up remaining space */
    min-width: 300px; /* Prevent text column from getting too narrow */
    padding-right: 20px; /* Add some space if needed */
}

.about-text h2 {
    color: #007bff; /* Accent color for sub-heading */
    font-size: 1.8em;
    margin-bottom: 15px;
}

.about-text p {
    margin-bottom: 15px;
    line-height: 1.8; /* Slightly more spacing for readability */
    color: #444;
}

.about-image {
    flex-basis: 350px; /* Fixed width for image column, adjust as needed */
    flex-shrink: 0; /* Prevent image column from shrinking */
    text-align: center; /* Center image within column */
}

.about-image img {
    max-width: 100%; /* Responsive image */
    height: auto;
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

/* === Responsiveness for About Page === */
@media (max-width: 768px) {
    .about-content-wrapper {
        flex-direction: column; /* Stack columns */
        align-items: center; /* Center items when stacked */
        gap: 30px;
    }
    .about-text {
        padding-right: 0; /* Remove right padding */
        order: 2; /* Move text below image */
        text-align: center; /* Center text */
    }
    .about-text h2 {
        text-align: center;
    }
    .about-image {
        flex-basis: auto; /* Allow image column to resize */
        width: 80%; /* Control image size */
        max-width: 350px; /* Max width for image */
        order: 1; /* Move image above text */
        margin-bottom: 20px;
    }
    main .container > h1 {
        font-size: 2.1em; /* Adjust heading size */
    }
}

/* === Gallery Page Styling === */
.gallery-page-section {
    background-color: #ffffff; /* White background */
    padding: 40px 0 60px 0;
}

/* Optional intro text styling */
.gallery-intro {
    text-align: center;
    max-width: 700px;
    margin: -20px auto 40px auto; /* Adjust spacing */
    font-size: 1.1em;
    color: #555;
}

.gallery-grid {
    display: grid;
    /* Creates 4 columns initially on larger screens */
    grid-template-columns: repeat(4, 1fr);
    /* Defines a minimum row height - images will cover this */
    grid-auto-rows: 200px; /* Adjust base height */
    grid-auto-flow: dense; /* Helps fill gaps left by spanning items */
    gap: 15px; /* Gap between images */
}

.gallery-item {
    overflow: hidden; /* Hide parts of image that don't fit */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 3px 8px rgba(0,0,0,0.1); /* Subtle shadow */
}

.gallery-item img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scale image to cover area, cropping if necessary */
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Spanning classes */
.gallery-item-wide {
    grid-column: span 2; /* Make item twice as wide */
}

.gallery-item-tall {
    grid-row: span 2; /* Make item twice as tall */
}

/* Optional: Larger item spanning both */
/* .gallery-item-large {
    grid-column: span 2;
    grid-row: span 2;
} */

/* === Gallery Page Styling Updates === */

.gallery-item {
    /* ... keep existing styles like overflow, border-radius, shadow ... */
    position: relative; /* Needed for positioning zoom icon */
    cursor: pointer; /* Indicate items are clickable */
}

/* Zoom icon styling */
.gallery-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* Center and slightly small */
    color: rgba(255, 255, 255, 0.9); /* White icon */
    font-size: 3em; /* Adjust icon size */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* So icon doesn't block clicks on the item */
    z-index: 5; /* Ensure icon is above image */
}

/* Show icon and dim image more on hover */
.gallery-item:hover .gallery-zoom-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Scale icon to normal size */
}

.gallery-item:hover img {
    transform: scale(1.05); /* Keep slight zoom */
    filter: brightness(0.6); /* Dim image more on hover to show icon */
}

/* === Gallery Modal Styling === */
/* Base modal styles (.modal, .modal-overlay, .modal-close) are reused */

/* Specific styles for the gallery modal content area */
.gallery-modal-content {
    padding: 10px; /* Minimal padding around image */
    background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
    max-width: 90vw; /* Limit width to 90% of viewport */
    max-height: 90vh; /* Limit height to 90% of viewport */
    width: auto; /* Allow content (image) to determine width */
    height: auto; /* Allow content (image) to determine height */
    overflow: hidden; /* Hide potential overflow */
    display: flex; /* Use flex to help center image */
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5); /* Stronger shadow */
}

/* Styling for the image inside the modal */
#gallery-modal-image {
    display: block;
    max-width: 100%;    /* Max width is the content area's width */
    max-height: calc(90vh - 40px); /* Max height considering padding/margins */
    width: auto;        /* Maintain aspect ratio */
    height: auto;       /* Maintain aspect ratio */
    object-fit: contain; /* Ensure whole image fits */
    border-radius: 4px; /* Optional slight rounding */
}

/* Adjust close button for dark background */
.gallery-modal .modal-close {
    color: #eee; /* Lighter color */
    text-shadow: 0 1px 3px rgba(0,0,0,0.7); /* Add shadow for visibility */
    top: 0px; /* Adjust position slightly */
    right: 5px;
    font-size: 2.5em;
}
.gallery-modal .modal-close:hover {
    color: #fff;
}

/* === Responsiveness for Gallery Grid === */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        grid-auto-rows: 180px; /* Adjust row height */
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: 180px;
        gap: 10px; /* Reduce gap */
    }
    /* Prevent items from spanning too much on smaller screens maybe */
     .gallery-item-wide {
       /* grid-column: span 1; */ /* Optional: Disable wide span */
     }
    .gallery-item-tall {
       /* grid-row: span 1; */ /* Optional: Disable tall span */
    }

}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep 2 columns even on small phones */
        grid-auto-rows: 150px; /* Smaller rows */
    }
    .gallery-item-wide {
       grid-column: span 1; /* Disable wide span */
     }
    .gallery-item-tall {
       grid-row: span 1; /* Disable tall span */
    }
}

/* === Contact Page Styling === */
.contact-page-section {
    background-color: #ffffff; /* Or keep page background */
    padding: 40px 0 60px 0;
}

.contact-intro {
    text-align: center;
    max-width: 700px;
    margin: -20px auto 40px auto; /* Adjust spacing */
    font-size: 1.1em;
    color: #555;
}

.contact-form {
    max-width: 800px; /* Adjust max width */
    margin: 0 auto; /* Center the form */
    background-color: #f8f9fa; /* Light background for form area */
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    /* Use Flexbox for easier half-width fields */
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px; /* Horizontal gap between half-width fields */
}

.form-group {
    margin-bottom: 25px; /* Space below each group */
    width: 100%; /* Default to full width */
}

/* Make specific groups half width */
.form-group-half {
     width: calc(50% - 10px); /* 50% minus half the gap */
}

.form-group label {
    display: block;
    margin-bottom: 8px; /* Increased space */
    font-weight: bold;
    color: #333;
    font-size: 0.95em;
}

.form-group .required {
    color: #dc3545; /* Red color for asterisk */
    font-weight: bold;
    margin-left: 3px;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px 15px; /* Slightly larger padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #007bff; /* Blue border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /* Subtle blue glow */
}

.form-group textarea {
    resize: vertical; /* Allow only vertical resizing */
    min-height: 120px; /* Minimum height for message box */
}

/* === Styling for Checkbox Group === */
.form-group-checkbox {
    display: flex;
    align-items: center; /* Vertically align checkbox and text */
    gap: 10px; /* Space between checkbox and label */
    width: 100%; /* Take full width */
    margin-bottom: 25px; /* Keep consistent spacing */
}

.form-group-checkbox input[type="checkbox"] {
    width: auto; /* Override default width: 100% */
    margin-top: -1px; /* Fine-tune vertical alignment */
    /* Make checkbox slightly larger if desired */
    transform: scale(1.1);
}

.form-group-checkbox label {
    margin-bottom: 0; /* Remove default bottom margin for labels */
    font-weight: normal; /* Make label text normal weight */
    display: inline; /* Allow it to sit next to checkbox */
    font-size: 0.9em; /* Slightly smaller text */
    color: #555;
}

/* Ensure link within checkbox label looks okay */
.form-group-checkbox label a {
    color: #007bff; /* Use standard link color */
    text-decoration: underline;
}
.form-group-checkbox label a:hover {
    color: #0056b3;
}

.form-submit-group {
    width: 100%; /* Ensure submit button group takes full width */
    text-align: center; /* Center the button */
    margin-top: 10px; /* Add space above button */
}

.contact-form button[type="submit"].cta-button {
     /* Use existing cta-button styles, maybe adjust width/margins */
     width: auto; /* Allow button to size to content */
     min-width: 150px;
     margin: 0; /* Reset margin if needed */
     display: inline-block; /* Keep inline-block */
}

/* === Responsiveness for Contact Form === */
@media (max-width: 600px) {
     /* Stack half-width fields on smaller screens */
    .form-group-half {
        width: 100%;
    }
    .contact-form {
        gap: 0; /* Remove gap when stacked */
        padding: 20px;
    }
}

/* === Optional Terms Page Styling === */
.terms-page-section {
    background-color: #ffffff;
    padding: 40px 0 60px 0;
}

.terms-page-section h2 {
    margin-top: 30px; /* Space above section headings */
    margin-bottom: 10px;
    color: #007bff; /* Use accent color */
    font-size: 1.5em;
}

.terms-page-section p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #444;
}

.terms-last-updated {
    text-align: center;
    font-style: italic;
    color: #666;
    margin-bottom: 30px;
    margin-top: -20px; /* Adjust spacing below H1 */
}

/* === Footer Styling (Adapted from shinysmile.ca visual) === */
.site-footer {
    background-color: #343a40; /* Dark background */
    color: #adb5bd; /* Light grey text */
    padding: 40px 0 0; /* Padding top, bottom handled by .footer-bottom */
    font-size: 0.95em;
}

.footer-container {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    justify-content: space-between;
    gap: 20px; /* Space between columns */
}

.footer-column {
    flex: 1; /* Allow columns to grow */
    min-width: 220px; /* Minimum width before wrapping */
    margin-bottom: 30px;
}

.footer-column h4 {
    color: #ffffff; /* White heading */
    margin-bottom: 15px;
    font-size: 1.1em;
    border-bottom: 1px solid #495057; /* Subtle separator */
    padding-bottom: 8px;
}

.footer-about p { /* Styles specifically for the paragraph in the about column */
   margin-bottom: 15px;
   /* It also inherits color: #adb5bd; from .site-footer */
}

/* Added social-icons styling back just in case */
.social-icons a {
    color: #adb5bd;
    font-size: 1.4em;
    margin-right: 15px;
    transition: color 0.3s ease;
}
.social-icons a:hover {
    color: #ffffff; /* White on hover */
    text-decoration: none;
}


.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: #adb5bd;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-links ul li a:hover {
    color: #ffffff;
    padding-left: 5px; /* Slight indent on hover */
    text-decoration: none;
}

.footer-contact p {
    margin-bottom: 10px;
    display: flex; /* Align icon and text */
    align-items: flex-start;
}

.footer-contact i {
    color: #87CEEB; /* Icon color */
    margin-right: 10px;
    margin-top: 4px; /* Align icon better with text */
    width: 16px; /* Fixed width for alignment */
    text-align: center;
}

.footer-contact a {
    color: #adb5bd;
}
.footer-contact a:hover {
    color: #ffffff;
}


.footer-bottom {
    background-color: #212529; /* Slightly darker background for bottom bar */
    padding: 15px 0;
    margin-top: 20px; /* Space above the bottom bar */
    text-align: center;
    font-size: 0.9em;
    color: #ced4da;
}

/* === Cookie Consent Banner Styling === */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(40, 40, 40, 0.95); /* Dark background */
    color: #f1f1f1; /* Light text */
    padding: 20px 0;
    z-index: 1100; /* High z-index to be on top */
    font-size: 0.9em;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2);
    /* Initial state for transition */
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    display: block; /* Needed for transform/opacity to work right */
}

.cookie-banner.active {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 15px; /* Space between text and buttons */
}

.cookie-banner p {
    margin: 0;
    line-height: 1.5;
    flex-grow: 1; /* Text takes available space */
    padding-right: 15px; /* Space before buttons */
}

.cookie-banner a {
    color: #87CEEB; /* Light blue link */
    text-decoration: underline;
    font-weight: bold;
}
.cookie-banner a:hover {
    color: #aaeeee;
}

.cookie-buttons {
    display: flex;
    gap: 12px; /* Space between buttons */
    flex-shrink: 0; /* Prevent buttons shrinking too much */
}

.cookie-buttons button.cta-button {
    padding: 8px 18px; /* Slightly smaller buttons */
    font-size: 0.9em;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Style for the 'Reject All' button */
.cookie-buttons button.secondary {
    background-color: transparent;
    color: #ccc;
    border: 1px solid #888;
}
.cookie-buttons button.secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #aaa;
    color: #fff;
    transform: none; /* Override lift effect if desired */
}

/* Responsive adjustments for banner */
@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        align-items: flex-start; /* Align items left */
        text-align: center; /* Center text */
    }
    .cookie-banner p {
        padding-right: 0;
        text-align: center; /* Center text */
         width: 100%; /* Ensure text takes full width */
         margin-bottom: 15px; /* Add space below text */
    }
     .cookie-buttons {
        width: 100%; /* Make buttons container full width */
        justify-content: center; /* Center buttons */
    }
}

/* === General Responsiveness (Includes adjustments from previous steps) === */
@media (max-width: 992px) {
     /* Tablet adjustments - Services grid handled in its own block */
}

@media (max-width: 768px) {
    .header-contact { display: none; } /* Hide contact info in header on small screens */
    .header-right {
        flex-direction: row; /* Place nav items horizontally again */
        align-items: center;
        display: none; /* Hide nav by default on mobile */
        width: 100%; /* Take full width when shown */
        background-color: #fff; /* Background for dropdown */
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
     .header-right.active {
        display: flex; /* Show when active */
    }
     header nav {
        width: 100%;
    }
    header nav ul {
        flex-direction: column; /* Stack nav items vertically */
        width: 100%;
        padding: 10px 0;
    }
    header nav ul li {
        margin-left: 0;
        text-align: center;
    }
    header nav ul li a {
        padding: 12px 15px; /* Larger touch targets */
        border-bottom: 1px solid #f1f1f1;
    }
     header nav ul li:last-child a {
         border-bottom: none;
     }

    .mobile-nav-toggle {
        display: block; /* Show hamburger icon */
    }

    .footer-container {
        flex-direction: column; /* Stack footer columns */
        align-items: center; /* Center columns */
        text-align: center;
    }
    .footer-column {
        min-width: 90%; /* Allow columns to take more width */
        margin-bottom: 25px;
    }
     .footer-contact p {
        justify-content: center; /* Center contact items */
        align-items: center;
    }
     /* Added back social icons text align */
     .social-icons {
        text-align:center;
        margin-top: 10px;
    }
    .footer-about p {
        text-align: center;
    }
    /* Services grid handled in its own block */
}

/* === Footer Social Icons Styling === */
.footer-social-icons {
    text-align: center; /* Centers the inline-block icons */
    margin-top: 20px;  /* Space above the icons */
}

.footer-social-icons a {
    display: inline-block; /* Allows for margin and transform */
    color: #adb5bd;       /* Matches other footer link text color */
    font-size: 1.8em;    /* Size of the icons - adjust as needed */
    margin: 0 12px;      /* Space between icons */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover */
}

.footer-social-icons a:hover {
    color: #ffffff;        /* White icon on hover */
    transform: scale(1.15); /* Slightly enlarge icon on hover */
}

/* Check if you have an old ".social-icons" rule from previous steps and remove/update it if it conflicts */

@media (max-width: 480px) {
    /* Combined general mobile styles */
    .hero-content h2 { font-size: 1.8em; }
    .hero-content p { font-size: 1em; }
    .content-section h2 { font-size: 1.8em; } /* Affects Testimonials/Services headings */
    .footer-container { padding: 0 15px; }
    /* Removed duplicate logo rule, assuming text logo now */
    /* Services grid handled in its own block */
}