/* Basic Reset */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container to hold background image */
.background-container {
    position: relative;
    min-height: 100vh; /* Ensure it takes up at least the viewport height */
}

.background-container::before {
    content: "";
    position: absolute;
    top: 20px; /* Offset the background image */
    left: 0;
    right: 0;
    bottom: 0;
    background: url('images/north-harvie/222-n-harvie-st-_1.jpg') no-repeat center center;
    background-size: cover; /* Ensure the image covers the area */
    z-index: -1; /* Place background behind content */
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns of equal width */
    grid-template-rows: repeat(3, 1fr); /* 3 rows of equal height */
    gap: 10px; /* Space between grid items */
    width: 100%;
    height: 100vh; /* Full viewport height */
	 z-index: 1; /* Ensure content is above the background image */
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-box {
    grid-column: 2 / 3; /* Center column */
    grid-row: 2 / 3; /* Center row */
	padding: 20px
}

.services-list {
	background-color: rgba(244, 244, 244, 0.8); /* Light background with 80% opacity */
    list-style: none;
    padding: 10px;
    margin: 0;
    width: 100%; /* Full width of the center box */
}

.services-list li {
	/* color: #fff; /* White text */
    padding: 8px;
    text-align: center;
	font-weight: bold;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
        grid-template-rows: repeat(6, 1fr); /* Adjust rows for better layout */
    }

    .center-box {
        grid-column: 1 / 3; /* Center box spans two columns */
        grid-row: 3 / 5; /* Center box spans multiple rows */
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr; /* Single column layout on very small screens */
        grid-template-rows: repeat(9, 1fr); /* One row per grid item */
    }

    .center-box {
        grid-column: 1 / 2; /* Center box spans the full width */
        grid-row: 5 / 6; /* Center box is in the middle */
    }
}