html, body {
    margin: 0;
    padding: 0;
    color: #EEEEEEDD;
    background-color: #010505
}

:root {
  --footer-height: 35vw;   /* controls the footer’s height in vw */
  --footer-crop-y: 55%;    /* vertical focal line of the image: 0%=top, 100%=bottom */
}

.banner-image {
    width: 100%;
    height: auto;
    padding: 0;
    display: block;
}

h4 {
    font-weight: normal;
    margin: 0px;
}

p {
    text-align: justify;
}

#Co_Name {
    margin: 0px 10px 0px 10px;
}

main {
    margin: 50px 100px 50px 100px;
    font-size: 20px;
    min-height: 40vh;

}

header {
    position: relative;
    display: block;
    width: 100%;
}

.banner-text-a {
    white-space: nowrap;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #DDDDDD; /* White text for contrast on most banners; adjust if needed */
    font-size: 5em; /* Large size for visibility; adjust as needed */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow for readability on busy images */
    margin: 0;
}

.banner-text-b {
    white-space: nowrap;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* White text for contrast on most banners; adjust if needed */
    font-size: 1em; /* Large size for visibility; adjust as needed */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow for readability on busy images */
    margin: 0;
}

#nav-bar {
    display: flex;
    width: 100%;
    background-color: #111111; /* Light gray background for visibility; adjust as needed */
    border-bottom: 1px solid #111111; /* Subtle border to separate from content below */
}

#nav-bar a {
    flex: 1; /* Each link takes equal width (divides the bar into 3 sections) */
    text-align: center;
    padding: 0px 10px 0px 10px; /* Vertical padding for clickable height; adjust for touch-friendliness */
    text-decoration: none;
    color: #AAAAAA; /* Dark text for contrast */
    font-weight: bold;
    transition: background-color 0.3s; /* Smooth hover effect */
}

.active, #nav-bar a:hover {
    background-color: #292929; /* Lighten on hover for interactivity */
    }

figure img {
    display: block;
    margin: 20px auto 60px auto;
    max-width: 100%;
    height: auto;
}

figure figcaption {
    text-align: center;        /* Centers the caption text horizontally below the image for a balanced, direct look. */
    margin-bottom: 30px;
    margin-top: 50px;      /* Adds a small bottom margin to create subtle separation from content below, preventing the caption from feeling cramped against the next element. */
    font-size: 16px;          /* Sets a readable font size for the caption (matching the surrounding text in your main content). */
    color: #EEEEEEDD;         /* Uses the same text color as your body text for consistency with the site's dark theme. */
    line-height: 1.2;         /* Slightly tightens line spacing if the caption ever wraps, ensuring it stays compact and readable. */
}

footer {
    position: relative;
    display: block;
    width: 100%;
    height: var(--footer-height);
}

footer .banner-image {
  width: 100%;                 /* fill footer width */
  height: 100%;                /* fill the footer’s height we set above */
  object-fit: cover;           /* scale and crop to cover the box */
  object-position: 50% var(--footer-crop-y); /* keep a fixed vertical slice visible */
  display: block;              /* avoid inline gaps */
}

.footer-text-left {
    position: absolute;
    top: 10%;
    left: 20%;
    transform: translateX(-50%);
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 0;
    z-index: 1;
    display: grid;
    gap: 1vw;
    max-width: 40%;
}

.footer-text-left .top {
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1vw;
}

.footer-text-left .top h3 {
    font-size: 3vw;
    margin: 0;
    position: static;
    transform: none;
    }

.logo {
    margin: 0;
    width: 7vw;
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
    position: static;
    transform: none;
}

.footer-text-left .bottom {
    margin-top: -2.0vw;
    position: static;
    max-width: 45vw;
    line-height: 1.2;
    font-size: 1vw;
}

.footer-text-center {
    position: absolute;              /* place over the footer banner */
    top: 50%;                        /* vertical placement using % */
    left: 50%;                       /* anchor at the horizontal center */
    transform: translate(-50%, -50%);/* true centering from the anchor */
    display: grid;                   /* stack links vertically */
    gap: 0.8vw;                      /* responsive spacing between links */
    width: min(18vw, 20%);           /* never wider than 20% (stays within 40%–60% band); scales with vw */
    text-align: center;              /* center link text */
    z-index: 1;                      /* above the image */
}

.footer-text-center a {
    color: white;                    /* readable on the banner */
    text-decoration: none;           /* cleaner look; hover adds underline */
    font-weight: bold;               /* visual parity with your footer style */
    font-size: max(1.1vw, 90%);      /* scales with vw; won’t get too tiny */
    opacity: 0.95;                   /* subtle default */
    transition: opacity 0.3s;        /* smooth feedback; time unit only */
}

.footer-text-center a:hover,
.footer-text-center a:focus {
    opacity: 1;                      /* brighten on hover/focus */
    text-decoration: underline;      /* clear affordance */
}

.footer-text-right {
    white-space: normal;
    position: absolute;
    top: 50%;
    left: 85%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: max(1.1vw, 70%);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 0;
    display: grid;
    justify-items: end;
    z-index: 1;
    gap: 0.8vw;
    width: min(24vw, 40%);
    grid-template-columns: 50px 1fr;
    column-gap: 0.6em;
    align-items: center;
}

.footer-text-bottom {
    white-space: nowrap;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2vw;
    font-weight: normal;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 0;
    display: flex; /* NEW: arranges logos horizontally */
    justify-content: center; /* NEW: centers the logos within the flex container */
    z-index: 1;
}

.social-logo {
    width: 4vw;
    height: auto;
    margin: 0 10px; /* Adds small horizontal spacing between logos */
    opacity: 1.0; /* Slight transparency for better overlay on busy images; adjust if needed */
    transition: opacity 0.3s; /* Smooth hover effect */
}

.contact-line {
    display: contents;
    align-items: center;       /* vertically center the icon with the text */
    gap: 0.5em;                /* space between icon and text */
    white-space: nowrap;       /* keep each pair on one line */
}

.contact-line a {color: white}

.footer-text-right h3 { grid-column: 2; justify-self: start; margin: 0; }

.footer-text-right > a { grid-column: 1; justify-self: end; }

.footer-text-right .contact-line > a:first-child {
  grid-column: 1;
  justify-self: end;
}

.footer-text-right .contact-line > a:last-child {
  grid-column: 2;
  justify-self: start;
}

.social-logo:hover {
    opacity: 1; /* Brightens on hover for interactivity */
}