* { box-sizing: border-box }

/* ─────────────── Sticky‐footer layout ─────────────── */

html, body {
  height: 100%;
  margin: 0;
}

/* Site-wide stationary background */
html {
  background: url("../epimages/bluewhirlagain.png") center top / cover fixed no-repeat;
}

/* Body must be transparent so the html background shows through */
body {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #221811;
  font-family: Tahoma, Arial, sans-serif;
}

/* Make content readable (use translucent white instead of solid) */
#wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: rgba(255,255,255,0.30);
  padding: 0;
}

/* Optional: give main a little extra readability */
main {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.80); /* adjust: 0.70 more see-through, 0.90 less */
  display: block;
  padding: 0 0 2em 0;
  padding-bottom: 15px;
  min-width: 0;
}


/* ───────────── End sticky‐footer additions ───────────── */

html {
  scroll-behavior: smooth; /* For the back to top. Creates a smooth scroll ups */
}
header {
  color: #231814;
  height: 100px;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Ensure header is positioned correctly for the pseudo-element */
header {
  position: relative;
  z-index: 3;
}

/* --- Subtle, soft gradient shadow below header --- */
header::after {
  content: "";
  position: absolute;
  bottom: -20px;
left: 50%;              /* overlap just below header */
 transform: translateX(-50%); /* pull back half the width */
  width: 50%;
  height: 25px;              /* gentle vertical fade */
  background: linear-gradient(
    to bottom,
   rgba(3, 54, 81, 0.25) 0%,   /* deep brand blue at start */
    rgba(3, 54, 81, 0.12) 40%,  /* soften mid-way */
    rgba(3, 54, 81, 0) 100%     /* fade to transparent */
  );
  filter: blur(4px);         /* softens the transition */
  opacity: 0.9;              /* makes gradient nearly transparent */
  pointer-events: none;
  z-index: 2;
}

.logo-link {
  display: block;           /* or inline-block, as needed */
  width: 100%;
  height: 128px;
  text-align: center;       /* center the image horizontally */
}
.logo-img {
  max-height: 100%;         /* scale image to header height */
  height: 60%;             /* force full header height */
  width: auto;              /* preserve aspect ratio */
  display: inline-block;    /* so text-align on parent works */
}

header a { text-decoration: none;  color: #000435; font-size: 1.5em; text-shadow: 3px 10px 5px #667788; }
header a:link { color: #000435 }
header a:visited { color: #000435; }
header a:hover { color: #FEF6C2; }


h1 { font-size: 2em; text-decoration: none; } 

h2 { color: #000435; }

h3, dt  { color: #8C3826; }

h4 { background-color: #033651; 
font-size: 1.2em;
color: #ffffff; 
padding-left: .5em; 
padding-bottom: 0; 
text-transform: uppercase;
border-bottom: 1px solid #221811;
clear: left;
}

nav {   background-color: rgba(255, 255, 255, 0.75);
text-align:center;  }

nav a { text-decoration: none; } 
nav a:focus { outline: 2px solid #033651; }
nav a:link { color: #033651; }
nav a:visited { color: #033651; } 
nav a:hover { color: #033651; } 
nav ul { display: flex; 
flex-direction: column; 
font-size: 1.25em;
list-style-type: none;
margin: 0; padding: 0; }
nav li { z-index: 999;
padding: .25em 1em;
width: 100%}



h2,h3,h4,p,div,ul,dl

{ padding-left: 1em; padding-right: 1em; }

main ul { padding-left: 2em; }

.details { padding-left: 10%; padding-right: 10%; overflow: auto; display: flex; flex-direction: column; }

.detailsprofile { padding-left: 15%; padding-right: 15%; overflow: auto; display: flex; flex-direction: row; }

.detailsprofile img {
  width: 100px;
  height: auto;
}

main div { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 2em; }

main img { padding-left:0px; padding-right: 0px; padding-top: 0;  }

img { padding-left: 10px; padding-right: 10px ; }


#indexblock {
  max-width: 75%; /* give it a width (or max-width) smaller than 100% */
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;     /* just 25px above */
  /* margin-bottom:  */
  text-align: center; /* optional: center the text inside */
 color: #033651; 
font-weight:bold;}


#indexblock ul {
  list-style: none;   /* removes the bullets */
  margin: 0;          /* reset default margin */
  padding: 0;         /* reset default padding/indent */
}


#shieldicon { height: 300px; 
background-image: url('../epimages/shieldepsmall.png'); 
background-repeat: no-repeat;  
background-size: 100% 100%; }

#mobile { display: inline; margin: 0; padding: 0;  line-height: 1;}
#desktop { display: none; margin: 0; padding: 0;  line-height: 1;}
footer { background-color: #ffffff; height: 3em;
	font-size: .60em; font-style: italic; text-align: center; padding-bottom: 1em; border-top: 2px solid #231814; }

form { display: flex; flex-direction: column; padding-left: 1em; width:40%; } input, textarea { margin-bottom: .5em; }

/* Container flexbox for easy horizontal alignment + spacing */
.social-icons {
  display: flex;
  gap: 1rem;              /* space between icons */
  padding-left: 1.25em;
  margin: 0;
  list-style: none;
}

.more-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ALWAYS 3 on desktop */
  gap: 1rem;                              /* you had gap: 1; (missing unit) */
  max-width: 800px;
  margin: 1rem auto;
  padding: 0 1rem;
  justify-items: center;                  /* centers the small images in each column */
}

.more-info img {
  width: 100%;
  max-width: 150px;
  height: auto;
  display: block;
  border-radius: 0px;
}

.more-info a img {
  transition: transform .2s ease, box-shadow .2s ease;
}

.more-info a:hover img {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(3,54,81,.25);
}

@media (max-width: 900px) {
  .more-info { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .more-info { grid-template-columns: 1fr; }
}


/* Make each link an inline-block so the image sizing applies cleanly */
.social-icons a {
  display: inline-block;
}
/* Bigger social icons everywhere */
.social-icons img {
  width: clamp(64px, 20vw, 84px);  /* min, responsive, max */
  height: auto;
  transition: transform 0.2s ease;
}
/* hover/focus enlargement */
.social-icons a:hover img,
.social-icons a:focus img {
  transform: scale(1.3);
}

/* Banner container */
#indexmain.slider {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: 8px;
  margin-left: 35px;        /* matches #indexblock’s left margin */
  margin-right: 35px;       /* equal spacing on right for symmetry */
  width: calc(100% - 70px); /* keeps banner proportional */
  padding: 0;
 /* outline: 1px dashed rgba(0,0,0,.25); */
  box-sizing: border-box;
  margin-top: 20px;      /* space below the header */
 border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Track that moves */
#indexmain .slides {
  display: flex;
  height: 100%;
  padding: 0;
  will-change: transform;
  animation: slideShow9 60s infinite ease-in-out;
}
#indexmain .slides:hover {
  animation-play-state: paused;
}

/* Each slide */
#indexmain .slide {
  flex: 0 0 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
padding: 0;
  margin: 0;
  line-height: 0;  /* removes leftover inline spacing */
}

/* Images inside slides */
#indexmain .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* or use 'cover' for full-bleed look */
  object-position: center;
  display: block;
  background-color: #ffffff; /* optional: fill color for logos */
  
}

/* Keyframes for 9 slides (already present, keep as-is) */
@keyframes slideShow9 {
  0%   { transform: translateX(0%); }
  10%  { transform: translateX(0%); }
  11%  { transform: translateX(-100%); }
  21%  { transform: translateX(-100%); }
  22%  { transform: translateX(-200%); }
  32%  { transform: translateX(-200%); }
  33%  { transform: translateX(-300%); }
  43%  { transform: translateX(-300%); }
  44%  { transform: translateX(-400%); }
  54%  { transform: translateX(-400%); }
  55%  { transform: translateX(-500%); }
  65%  { transform: translateX(-500%); }
  66%  { transform: translateX(-600%); }
  76%  { transform: translateX(-600%); }
  77%  { transform: translateX(-700%); }
  87%  { transform: translateX(-700%); }
  88%  { transform: translateX(-800%); }
  98%  { transform: translateX(-800%); }
  100% { transform: translateX(0%); }
}

/* MOBILE: hide shield to reduce congestion */
@media (max-width: 599px) {
  header {
    background-image: none;
    text-align: center;
  }
  /* Mobile nav sizing/spacing */
  nav ul { font-size: 1em; gap: 0; }
  nav li { padding: .25em .75em; }
}

/* TABLET AND UP: show shield */
@media (min-width: 600px) {
  header {
    background-image: url('../epimages/shieldepsmall.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 85px center;
    padding-left: 105px;
    text-align: left;
  }

  /* Tablet nav (horizontal) */
  nav ul {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    font-size: 1.5em;
  }

  nav li {
    width: auto;
    border-bottom: none;
    padding: .5em 1em;
  }
}

/* DESKTOP: sidebar layout + vertical nav */
@media (min-width: 1024px) {
  #wrapper {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
  }

  header { grid-area: header; }
  nav    { grid-area: nav; }
  main   { grid-area: main; }
  footer { grid-area: footer; }

  /* Force vertical nav on desktop */
  nav ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    font-size: 1.5em;
  }

  nav li {
    width: 100%;
    border-bottom: none;
    padding: .5em 1em;
  }
}



@media (prefers-reduced-motion: reduce) {
  #indexmain .slides { animation: none; transform: translateX(0); }
  #indexmain .slide:not(:first-child) { display: none; } /* no space after ':' */
}