/* Basic body styling */
:root {
    --font-family: Arial, sans-serif;
    --background-color: #ffffff;
    --text-color: #333333;
    --item-background: #f0f0f0;
    --border-color: #ccc;
    --footer-background: #f3f3f3;
    --font-size: smaller;
    
}
body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 14px;

/* Headings styling */
h1 { font-size: 4; text-align: center; padding: 5px; margin: 5px; line-height: 1;}
h2 { font-size: 3; text-align: center; margin-bottom: -2px; line-height: 1;}
h3 { font-size: 2; text-decoration:none; display:inline-block;}
h4 { font-size: 2; }
h5 { font-size: 1; }
h6 { font-size: 0.5; }
}

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


outline {
  background-color: lightgray;
  color: black;
}

.button {
  background-color: white; 
  color:red; 
  border: 2px solid #f44336;
  padding: 12px 28px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  margin: 3px 1.5px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  hover: background-color: #f44336;
  color: white;
}
.button {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}
.button:hover {
  background-color: #f44336;
  color: white;
}

/* Container for the grid layout */
.grid-container {
    display: grid; /* Enables grid layout */
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
    grid-template-rows: repeat(2, auto); /* Creates 2 rows */
    gap: 10px; /* Space between grid items */
    padding: 5px; /* Inner padding for the container */
}

/* Individual grid items */
.grid-item {
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #ccc; /* Light border */
    border-radius: 10px; /* Rounded corners */
    padding: 10px; /* Inner padding for items */
    text-align: center; 
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    overflow: hidden; /* Ensures content doesn't overflow the grid item */
}

/* Styling for images */
.grid-item img {
    width: 100%; /* Makes the image responsive, filling the grid item */
    height: auto; /* Maintains aspect ratio */
    border-radius: 10px; /* Match the border radius of the grid item */
    aspect-ratio: 4/3;  /* set image ratio output*/
    object-fit: scale-down;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
    }
}
@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr; /* 1 column on mobile screens */
    }
}
.grid-item:focus {
    outline: 2px solid #007bff; /* Outline for focus visibility */
}

/* Footer Styles */
.footer {
    background-color: #f3f3f3; /* Match the header's background color */
    border-top: 2px solid #c1c1c1; /* Match the header border */
    padding: 5px 0; /* Padding for spacing */
    text-align: center; /* Center text in the footer */
    font-size: smaller;
}
/* Intro grid layout for top section (viaduct + logo + heading) */
.intro-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px; /* Small gap between the two images */
    justify-content: center; /* Horizontally center the grid */
    align-items: center;
    margin-bottom: 30px;
}

.intro-grid img {
    max-width: 100%;
    height: auto;
}

/* Responsive stack for mobile screens */
@media (max-width: 768px) {
    .intro-grid {
        grid-template-columns: 1fr;
    }
}

.intro-heading {
    text-align: center;
    font-size: 1.5em;
    margin-top: 10px;
}

.intro-heading small {
    font-weight: normal;
    font-style: italic;
}