/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  font-family: Helvetica, Arial, sans-serif;
  background: #000;
  color: #fff;
  overflow: hidden; /* Hide native scrollbar */
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #001a38; /* Navy Blue 001F3F - Deep Blue #001a38 */
  padding: .41em;
  z-index: 1000;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* Keep header items on one line */
}
header nav {
  white-space: nowrap; /* Prevent nav links from wrapping */
}
.logo img {
  width: clamp(75px, 20vw, 200px);
  height: clamp(50px, 10vw, 75px);
}

header nav a.highlight {
  font-weight: bold;
  border-bottom: 3px solid #7fdafd;
}

header nav a {
  color: #fff;
  text-decoration: none;
  /* dynamic header sizing */
  font-size: clamp(0.9rem, 2.5vw, 1.75rem);
  margin-left: clamp(0.5rem, 2vw, 1em);
}

/* Scroll container: occupies area below header */
#scroll-container {
  margin-top: 70px;
  height: calc(100vh - 70px);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
#scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Snap sections without background properties */
.snap-section {
  /* For medium/large screens, fixed full viewport height */
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  position: relative;
  overflow: hidden; /* Clip content to section boundaries */
}

  /* create grey background overlay so lettering is clearly visible */
.snap-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* 30% transparent black overlay */
  pointer-events: none; /* Skip any clicks */
}

#solutions.snap-section::before {  /* solutions page specific */
  background: rgba(0, 0, 0, 0.43); /* 45% transparent black overlay */
}

.inner {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
}

/* inner_home allows alteration of height easily - works well */

.inner_home {
  position: absolute;  /* No longer relative; removes link from flow */
  top: 15vh;  /* 15% of viewport height from top */
  z-index: 1;
  text-align: center;
}

.inner_about {
  position: relative;  /* No longer relative; removes link from flow */
  top: 2vh;  /* 10% of viewport height from top */
  z-index: 1;
  text-align: center;
  width: 100vw;
}

.inner_solutions {
  position: relative;  /* switching to absolute loses scroll extend */
  z-index: 1;
  text-align: center;
}

/* Background image rules for Large screens */
/* units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax */
/* neat -> when you use vh vw etc, the zoom will slowly auto adjust after the screen adjust */
/* -> 2nd spot well below for size change - originally desktop 901px but 1092px change improved */
@media screen and (min-width: 1092px) {

  .snap-section[style] {
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover; /* Ensures full coverage of the viewport */
  }
  .snap-section.zoom[style] {
    background-size: auto 110vw;    /* auto inherits cover, starting with 100% of the view width */
                                    /* having larger (100vw) and then 90vw below creates zoom out effect */
  }
  .snap-section.zoom.animate[style] {
    background-position: center;
    background-size: auto 100vw;   /* auto inherits cover, and then 90% of the view width */
    transition: background-size 5s; /* If background isn't done zooming snap may throw scroll off */
  }
  .snap-section {
    min-height: 100vh;
    height: auto;
    width: 100vw;
  }
}

/* Background image rules for Medium screens */
@media screen and (min-width: 681px) and (max-width: 1091px) {
  .snap-section[style] {
    background-repeat: no-repeat;
    background-position: center;  /* left center allows zoom effect to look like scrolling to right */
                                       /* storyboard effect to the right */
    background-size: auto 100%;         /* Height fills container; width auto-adjusts */
  }
  .snap-section.zoom[style] {
    background-size: auto 120%;
  }
  .snap-section.zoom.animate[style] {
    background-size: auto 100%;
    transition: background-size 5s;
  }
  /* allow sections to grow if content overflows */
  .snap-section {
    min-height: 100vh;
    height: auto;
  }
}

/* Background image rules for Small screens */
@media screen and (max-width: 680px) {
  .snap-section[style] {
    background-repeat: no-repeat;
    background-position: center; /* Anchor to right so focus is on right side of image */
    background-size: auto 100%;         /* Height fills container; width auto-adjusts */
  }
  .snap-section.zoom[style] {
    background-size: auto 125%;
  }
  .snap-section.zoom.animate[style] {
    background-size: auto 100%;
    transition: background-size 5s;
  }
  /* Allow sections to grow if content overflows */
  .snap-section {
    min-height: 100vh;
    height: auto;
  }
}

/* Contact Section Container: flex column to push footer to bottom */
.contact-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.contact-container .inner {
  flex: 1;
}
/* Footer inside Contact: pushed upward by 75px */
.contact-container footer {
  background: #001a38;
  text-align: center;
  padding: 1em;
  /* width: clamp(350px, 15vw, 800px);*/
  margin-top: auto;
  align-content: center;
  align-items: center;
  justify-content: center;
  border-radius: 50px;  /* this creates the half circle button shape, you can have 30px 30px 30px 30px too */
  text-decoration: none;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: bold;
  transform: translateY(-75px);
}

.ergo-link {
  color: #fff;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-decoration: none;
  font-size: inherit;
  font-weight: bold;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}

#footer {
    align-content: center;
    align-items: center;
    justify-content: center;
}
/* Image grid layout */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin-top: 1em;
  justify-items: center;
}

.grid-item {
  text-align: center;
  max-width: 45ch; /* Approximately limits the width to 30 characters */
}

.grid-item img {
  display: block;
  margin: 0 auto;
}

.grid-item h2 {
  font-size: 1.5em; /* Adjust this value to be slightly larger than paragraph text */
  margin-bottom: 0.5em; /* margin: 0.5em 0 is 0.5 top and bottom, 0 left and right */
}

.grid-item p {
  font-size: 1.1em;
  margin-bottom: 0em; /* margin: 0.5em 0 is 0.5 top and bottom, 0 left and right */
  max-width: 32ch; /* Ensures body text does not exceed approx 30 characters in width */
  word-wrap: break-word;
}

/* Responsive Typography & Layout */

/* Desktop (min-width: 1092px) */
@media screen and (min-width: 1092px) {
  body {
    font-size: 26px;
  }
  /* adjust header text size here */
  h1 {
    font-size: 3rem;
    font-weight: bold;
  }
  /* adjust paragraph text size here */
  p {
    font-size: 2rem;
    font-weight: bold;
  }
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .image-grid img {
  width: 85px;
  height: 85px;
  }
}

/* Tablet (min-width: 681px and max-width: 1091px) */
@media screen and (min-width: 681px) and (max-width: 1091px) {
  body {
    font-size: 22px;
  }
  h1 {
    font-size: 2.5rem;
  }
  p {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .image-grid img {
  width: 80px;
  height: 80px;
  }
}

/* Small screens (max-width: 680px) */
@media screen and (max-width: 680px) {
  body {
    font-size: 18px;
  }
  h1 {
    font-size: 2rem;
  }
  p {
    font-size: 1.2rem;
    font-weight: bold;
  }
  .image-grid {
    grid-template-columns: 1fr;
  }
  .image-grid img {
  width: 75px;
  height: 75px;
  }
}

/* Form styles */
form {
  max-width: 650px;
  margin: 0 auto;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
.form-group {
  flex: 1;
  padding: 0 0.5em;
  min-width: 200px;
}
.form-group.full {
  flex: 1 0 100%;
}
form label {
  display: block;
  margin-bottom: 0.5em;
}
form input,
form textarea {
  width: 100%;
  padding: 0.5em;
  margin-bottom: 0.5em;
}
form button {
  padding: 0.5em 1em;
}

/* Flash messages */
.flashes {
  list-style: none;
  padding: 0;
}
.flashes li {
  padding: 0.5em;
  margin: 0.5em 0;
}
.success {
  background: #d4edea;
  color: #155725;
}
.danger {
  background: #f8d7ea;
  color: #721c25;
}

/* Home screen items */
#home_image1 {
	color: black;
	height: 401px;
	position: sticky;
	align-items: center;   /* aligns image to center of screen */
}

#home_title home_text{
	text-align: center;
	font-family: Lucida Sans Unicode, Lucida Grande, Helvetica, Arial, sans-serif;
	align-self: center;
	color: rgba(255, 255, 255);
}

/* height position on screen of text */

#about_title {
  height: 80px;
}


.text-overlay {
  display: inline-block;                 /* Only as wide as text */
  background: rgba(0, 0, 0, 0.45);        /* 45% transparent black */
  padding: 0.5em 1em;                    /* Padding overlay so slightly larger than text */
  margin-bottom: 1em;                    /* Optional spacing below overlay */
  z-index: 1;                            /* Ensure appears above any background elements */
  position: relative;
}


/* Button Group Styling (for the two buttons in a row on home page) */
.button-group {
  display: flex;
  justify-content: center;
  gap: 10vw; /* space between buttons */
  margin-top: 1em;
}

/* Standard button style */
.core-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 80px;
  border-radius: 50px;  /* this creates the half circle button shape, you can have 30px 30px 30px 30px too */
  text-decoration: none;
  font-size: inherit;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
}

.contact-button {
  background-color: #001a38; /* #7fdafd sky blue */
  color: #fff;
  border: none;
}

.learn-more-button {
  background-color: rgba(0, 0, 0, 0.4);  /* can write transparent for transparent effect */
  color: #fff;   /* #7fdafd sky blue, while navy blue #001a38 */
  border: 1px solid #7fdafd;
}

/* scroll and number count banner styles */
.banner {
  width: 100%;
  background-color: #001a38;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* Banner 1: Scrolling images */
.banner1 {
  position: relative;
  height: clamp(10vh, 13vh, 150px);
}
.image-banner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* Animation duration can be adjusted -> 2000 images x 9 = about 20000s */
  animation: scroll 20000s linear infinite;
}
.image-banner img {
  width: clamp(200px, 12vw, 350px);
  height: auto;
  margin-right: clamp(75px, 5vw, 120px);    /* gap same as size of image */
  background-color: #ffffff;
}
/* Animate container by exactly 50% of its total width (it is one complete cycle) */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Banner 2: Counting  */
.banner2 {
  justify-content: center;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  height: clamp(2vh, 8vh, 100px);
}
.counter {
  text-align: center;
  padding: 0 20px;
}
.separator {
  width: 2px;
  background-color: white;
  height: 50%;
}

/* Fullscreen loader overlay */
/* full canvas start*/
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #7fdafd, #001a38, #ffffff); /* background: linear-gradient(135deg, #7fdafd, #001a38, #FF852C);*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9872;
}
/* SVG infinity symbol */
.infinity {
  width: 200px;
  height: 100px;
}
.infinity-path {
  fill: none;
  stroke: url(#infinity-gradient);
  stroke-width: 5;
  stroke-dasharray: 297;
  stroke-dashoffset: 297;
  animation: draw 3s ease-in-out infinite;
}
@keyframes draw {
  0% { stroke-dashoffset: 297; }
  51% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 297; }
}

.loading-text {
  margin-top: 20px;
  font-family: sans-serif;
  font-size: 24px;
  color: #fff;
  letter-spacing: 2px;
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Example spinner */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Spinner keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* Board management area  */

.management-area {
  background-color: #000a38;
  padding: clamp(20px, 5vw, 35px);
}

.management-header h2 {
  font-size: 2rem;
  margin: 0;
  color: #fff;
}

.management-header p {
  font-size: 1.5rem;
  margin: 0;
  color: #fff;
  margin-top: 0.5rem;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(7px, 2vw, 30px);
  margin-top: 1rem;
}

.board-card {
  background-color: #bfe9f4; /*bff4f9 a7e2fc*/
  border-radius: 8px; /* gently curved corners */
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 4px rgb(255, 255, 255);
}

.board-grid img {
  width: clamp(10vw, 20vw, 250px);
  height: clamp(10vw, 20vw, 250px);
  object-fit: cover;
  border-radius: 50%; /* circular picture */
  margin-bottom: 0.5rem;
}


.member-name {
  font-size: 1.2rem;
  color: #646262;
  font-weight: bold;
  margin-bottom: 0.25rem;
}


.member-role {
  font-size: 1rem;
  color: #646262;
  line-height: 1.2;
}


/* case studies drop down area */
#case-studies-expand {
  padding: 0 clamp(0px, 1vw, 10px);
}
.expansion {
  width: clamp(85vw, 85vw,  calc(100% - 50vw)); /* this changes width of expansion box */
  margin: clamp(20px, 2vw, 50px) auto;
  background-color: #001f3f;
  border: 1px solid #fff;
  border-radius: clamp(5px, 2vw, 20px);
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.header {
  padding: clamp(10px, 2vw, 20px);
  cursor: pointer;
  font-size: clamp(1rem, 2vw, 2rem);
  color: #fff;
  user-select: none;
}
.content {
  padding: clamp(10px, 2vw, 20px);
  font-size: clamp(1rem, 2vw, 2rem);
  color: #fff;
  display: none;
}
.expansion:not(.collapsed) .content {
  display: block;
}
.left-text {
  text-align: justify;
}

.case-button {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid #ffffff;
  width: clamp(150px, 12vw, 250px);
  height: clamp(70px, 7vh, 100px);
  align-content: center;
  display: block;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 50px;  /* this creates the half circle button shape, you can have 30px 30px 30px 30px too */
  text-decoration: none;
  font-size: inherit;
  font-weight: bold;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}


/* gdpr drop down area */
#gdpr-expand {
  padding: 0 clamp(0px, 1vw, 10px);
}
#gdpr-expand .expansion {
  width: 65vw; /*clamp(85vw, 85vw,  calc(100% - 50vw)); */ /* this changes width of expansion box */
  margin: clamp(10px, 2vw, 15px) auto;
  background-color: #001f3f;
  border: 1px solid #fff;
  border-radius: clamp(5px, 2vw, 10px);
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#gdpr-expand .collapsed {
  display: block;
}
#gdpr-expand .header {
  padding: clamp(5px, 2vw, 10px);
  cursor: pointer;
  font-size: clamp(1rem, 2vw, 2rem);
  color: #fff;
  user-select: none;
}
#gdpr-expand .content {
  padding: clamp(5px, 2vw, 10px);
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: #fff;
  display: block;
}

#gdpr-expand .left-text {
  text-align: justify;
}