/* ============================================================
   Brand tokens
   ============================================================ */
:root{
  --c-primary-900:#1d4167;
  --c-primary-700:#275d90;
  --c-accent:#5aa4ff;
  --c-text-light:#fff;
  --f-primary:"Inter",sans-serif;
}

/* ============================================================
   Base reset / typography
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
body,button{font-family:var(--f-primary)}
h1{font-weight:600;font-size:clamp(2.2rem,5vw,3.5rem);letter-spacing:.05em}
h2{font-weight:400;font-size:clamp(1.4rem,4vw,2.2rem)}
p {max-width:48ch;margin:1rem auto 2rem;font-size:1.125rem;color:var(--c-text-light)}
a{color:inherit;text-decoration:none}

/* ------------------------------------------------------------
   Re‑usable button
   ------------------------------------------------------------ */
.btn{
  display:inline-block;margin-top:1.5rem;
  padding:.85rem 2.5rem;
  border:2px solid var(--c-accent);
  background:var(--c-accent);color:#fff;
  font-weight:500;border-radius:4px;
  transition:background .25s,color .25s;
}
.btn:hover{background:#fff;color:var(--c-primary-900)}

.btn-primary {
  background: var(--c-primary-700);
  border-color: var(--c-primary-700);
}

.btn-accent {
  background: #fff;
  color: var(--c-primary-700);
  border-color: #fff;
}

/* ============================================================
   SITE HEADER + NAV
   ============================================================ */
.site-header{
  background:var(--c-primary-900);
  color:var(--c-text-light);
  padding-block:clamp(.6rem,1.2vh,1.1rem);
  position:relative;z-index:1000;
}
.site-header__inner{
  max-width:1400px;margin-inline:auto;
  display:flex;align-items:center;gap:3rem;
}

.brand{display:flex;align-items:center;color:inherit;text-decoration:none}
.brand__icon{
  height:clamp(64px,8vh,110px);width:auto;display:block;flex:0 0 auto;
}
.brand__name{
  font-size:clamp(1.5rem,2.4vw,2.25rem);
  font-weight:500;margin-left:.65rem;white-space:nowrap;
}

.main-nav__list{
  list-style:none;
  display:flex;gap:clamp(1.5rem,3vw,2.75rem);
  margin:0;padding:0;font-weight:500;font-size:1rem;
}
.main-nav__list a{
  color:var(--c-text-light);
  transition:opacity .2s;
}
.main-nav__list a:hover,
.main-nav__list a:focus-visible{opacity:.75}

.burger{
  display:none;background:none;border:0;cursor:pointer;position:relative;
  width:40px;height:40px;
}
.burger span,
.burger span::before,
.burger span::after{
  content:'';display:block;position:absolute;left:8px;width:24px;height:2px;
  background:#fff;transition:.25s;
}
.burger span{top:19px}
.burger span::before{top:-7px}
.burger span::after {top: 7px}
/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero-slider{position:relative;overflow:hidden;min-height:50vh}

.slide{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--c-primary-900) 0%,var(--c-primary-700) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:4rem 1rem;text-align:center;color:var(--c-text-light);
  opacity:0;pointer-events:none;transition:opacity .6s ease;
}
.slide.active{opacity:1;pointer-events:auto}
.slide.active .btn {
  margin-bottom: 6Srem; /* increase spacing from the slider controls */
  position: relative;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}
.slide .inner {
  position: relative;
  z-index: 2;
  max-width: 60ch;
  text-align: left;
  margin: 0 auto 0 8%;   /* pushes it to the right */
  top: -2rem;            /* moves it upward */
}
.slide::after{
  content:'';
  position:absolute;top:-15%;right:-5%;
  width:65%;height:110%;
  background:var(--img) center/cover no-repeat; 
  border-top-left-radius:650px;border-bottom-left-radius:650px;
  z-index:1;
}

.slider-controls{
  position:absolute;left:4rem;bottom:3rem;
  display:flex;align-items:center;gap:1.25rem;z-index:5;
}
.slider-controls button{
  --size:48px;width:var(--size);height:var(--size);
  border:2px solid var(--c-text-light);
  background:none;color:var(--c-text-light);
  border-radius:50%;font-size:1.6rem;cursor:pointer;transition:.3s;
}
.slider-controls button:hover{background:var(--c-accent);color:#fff}
.slider-controls button:focus-visible{outline:3px dashed var(--c-accent);outline-offset:4px}
.counter{font-weight:500;letter-spacing:.05em;color:var(--c-text-light)}

.hero-slider .slide::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 90%;
  background: var(--img) center/cover no-repeat;
  border-top-left-radius: 400px;
  border-bottom-left-radius: 400px;
  z-index: 1;
}

/* ============================================================
   ABOUT  – Vision / Mission hero
   ============================================================ */
.about-hero{
  position:relative;
  display:flex;
  align-items:center;
  flex-direction: column;
  justify-content:space-between;
  gap:4vw;
  background-color: rgba(21, 48, 74, 0.1);
  padding:clamp(1rem,4vw,3.5rem) 0;
  background:#15304A;        /*#15304A, 325b80*/
}

.about-hero__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  width: 100%;
  padding-inline: clamp(1.5rem,4vw,3.5rem);
  box-sizing: border-box;
  max-width: none;
  margin: 0 auto;
}

.about-hero__content h2.section-title {
  font-size: clamp(2.25rem, 5vw, 3rem);
  line-height: 1.2;
  margin-bottom: 0 auto;
  text-align: center; 
}

.about-hero__content p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  margin: 0.75rem 0;
  max-width: 48ch;
}

.about-hero__content p.about-Values {
  margin-top: 1.5rem;
  font-weight: 500;
  text-align: center;
}

.section-title{
  font-weight:600;
  font-size:clamp(2rem,4vw,2.75rem);
  color:var(--c-primary-900);
  margin-bottom:2rem;
  text-align: center;
  width: 100%;
  margin-bottom: 2rem;
}

.about-content-columns {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 1.5rem 0;
}

.about-content-columns .column {
  flex: 1;
  padding: 0 1rem;
  box-sizing: border-box;
}

.about-content-columns .column strong {
  display: block;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

.about-content-columns .column.right p {
  max-width: 48ch;
  margin: 0.5rem auto;
  line-height: 1.6;
  font-size: 1rem;
  text-align: left;
}

.about-content-columns .column.left   { text-align: left;  }
.about-content-columns .column.center { text-align: center; }
.about-content-columns .column.right  { text-align: right;  }

/* ============================================================
   RESPONSIVE TYPOGRAPHY SYSTEM
   ============================================================ */

html {
  font-size: 16px; /* base for rem units */
}

body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.125rem); /* Base paragraph size */
  line-height: 1.6;
  color: var(--color-text, #1a3046);
}

/* Headings */
h1, .hero-company {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  font-weight: 600;
}

h2, .hero-tagline, .section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  font-weight: 500;
}
h1, h2 {
  letter-spacing: -0.5px;
}


h3 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 500;
}

h4 {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
}

p, li {
  font-size: clamp(1rem, 2vw, 1.125rem);
}

/* Button Text */
.btn {
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

/* Nav */
.main-nav__list a {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
}


/* Footer */
.site-footer p {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}

}
/* ─── WAVY DIVIDER between About-hero and Values ───────── */
.about-section .values::before {
  content: '';
  display: block;
  padding-block: 2rem;
  height: 60px;
  background: var(--c-primary-900);
  /* SVG mask – works in most modern browsers */
  mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'>\
      <path d='M0 0 H120 V60 H0 Z M0 30 C30 45 90 15 120 30 V60 H0 Z' fill='white'/>\
    </svg>") repeat-x top;
  /* Safari fallback */
  -webkit-mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'>\
      <path d='M0 0 H120 V60 H0 Z M0 30 C30 45 90 15 120 30 V60 H0 Z' fill='white'/>\
    </svg>") repeat-x top;
  margin-top: 4rem;
}


/* ===== fix light‑background paragraphs in the About hero ===== */
.about-hero p      { color:#e6eef4; }              /* brighter body text */
.about-hero strong { color:#ffffff; font-weight: 600; } /* brighter labels */

/* ============================================================
   VALUES GRID
   ============================================================ */
.values {
  background: #f5f7fb;
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.values__title {
  text-align: center;
  color: var(--c-primary-900);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin-bottom: 3rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1200px;
  margin-inline: auto;
}

.value-card {
  background: #fff;
  border-radius: 12px;
  padding: 2.25rem 1.75rem 2.5rem;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .05);
}

.value-card img {
  width: 56px;
  height: auto;
  margin-bottom: 1rem;
  opacity: .9;
}

.value-card h4 {
  color: var(--c-primary-900);
  font-size: 1.125rem;
  margin: 1rem 0 .75rem;
}

.value-card p {
  margin: 0;
  color: #334e68;
  font-size: .975rem;
  line-height: 1.55;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (min-width: 901px) {
  .slide {
    justify-content: flex-start;
  }
  .slide .inner {
    margin-left: clamp(2rem, 8vw, 8rem);
    margin-right: 0;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    background: var(--img) center/cover no-repeat;
    text-align: center;
  }
  .slide::after {
    display: none; /* Remove decorative overlay on mobile */
  }
  .slide .inner {
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
    max-width: 90%;
    z-index: 2;
    position: relative;
  }
  .slide {
    background: var(--img) center/cover no-repeat;
  }
  .slider-controls {
    left: 50%;
    transform: translateX(-50%);
  }
  .slide-image-wrapper {
    display: none;
  }

  .about-hero {
    flex-direction: column-reverse;
    text-align: center;
  }
  .about-hero__image {
    width: 100%;
    min-height: 320px;
    border-radius: 0;
    border-top-right-radius: 700px; /* curve flips */
  }
}

@media (max-width: 750px) {
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--c-primary-900);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    padding: 5rem 2rem;
    z-index: 9999;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .main-nav__list {
    display: flex;               /* ✅ Required for flex-direction */
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1.125rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .main-nav__list a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .main-nav__list a:hover,
  .main-nav__list a:focus {
    color: var(--c-accent);
  }

  .burger {
    display: block; /* ✅ Show the burger icon */
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10001;
  }

  body.nav-open {
    overflow: hidden;
  }

  .burger.active span {
    background: transparent;
  }

  .burger.active span::before {
    transform: translateY(7px) rotate(45deg);
  }

  .burger.active span::after {
    transform: translateY(-7px) rotate(-45deg);
  }
}


/* ===== fix light‑background paragraphs in the About hero ===== */
.about-hero p      { color:#f4f8fa;; }              /* body text */
.about-hero strong { color:var(--c-primary-900); } /* “Vision:” / “Mission:” labels */

.slide-image-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 55vw; /* you can adjust this */
  overflow: hidden;
  z-index: 1;
  border-bottom-left-radius: 100% 100%;
}
/* absolutely position the image to fill the slide */
.slide__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills slide, keeps aspect ratio */
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;   /* allow buttons/text to be clickable */
}
.slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* ensure your text sits above the image */
.slide .inner {
  position: relative;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

/* -----------------------------------------------------------------------------
   ABOUT PAGE STYLES
   ----------------------------------------------------------------------------- */

/* Container centering */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 1. Page Hero */
.about-hero-intro {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: #fdfdfd;
  text-align: center;
}
.about-hero-intro h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--c-primary-900);
  margin-bottom: 1rem;
}

.about-hero-intro p {
  max-width: 40ch;
  margin: 0 auto 2rem;
  color: #1e4560;
}

/* 2. About-grid + highlight panel */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
  position: relative;
}

.grid-item {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.grid-item h2 {
  color: var(--c-primary-900);
  margin-bottom: .5rem;
}

.grid-item p {
  color: #445;
}

/* Highlight panel */
.highlight-panel {
  grid-column: 1 / -1;
  background: var(--c-accent);
  color: #fff;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
}

/* Highlight panel */
.highlight-panel {
  grid-column: 1 / -1;
  background: var(--c-accent);
  color: #fff;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
}
@media (min-width: 768px) {
  .highlight-panel {
    grid-column: 4 / 6;
  }
}

.btn-accent {
  background: #fff;
  color: var(--c-primary-700);
  border-color: #fff;
}

/* ───── Our Values Slider ───── */
.values-section {
  padding: 4rem 1rem;
  text-align: center;
  padding-block: 2rem;
}
.values-section .section-title {
  margin-bottom: 2rem;
}
/* ───── Our Values Slider ───── */
.values-section {
  padding: 4rem 1rem; /* outer padding */
  text-align: center;
  padding-block: 2rem; /* additional top/bottom spacing */
}

.values-section .section-title {
  margin-bottom: 2rem; /* spacing below heading */
}

.values-slider {
  position: relative;
  overflow: hidden; /* hides slide overflow */
  max-width: 100%;
  margin: 4rem auto;
  padding: 0; /* no inner padding for arrows */
}

#values-slider + .section-title,
.values-section .section-title {
  font-size: clamp(2rem, 4vw, 2.5rem); /* responsive heading */
  margin: 3rem 0 1.5rem;
  line-height: 1.2;
  text-align: center;
}

/* Global styles for readability and consistency */
body {
  line-height: 1.6;
  font-size: 1rem;
  color: #334e68;
  background: #fdfdfd;
}

a, .btn {
  font-size: 1rem;
  line-height: 1.4;
}

/* Slide Track Container */
.values-slider .vs-track {
  display: flex;
  align-items: center;
  transition: transform 0.5s ease;
}

/* Individual Slide Styling */
.values-slider .vs-slide {
  flex: 0 0 auto;
  width: 340px;
  height: 360px;
  margin: 0 -60px;
  opacity: 0.3;
  transform: scale(0.6);
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
  object-fit: contain;
}

/* Slide Images */
.values-slider .vs-slide img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  font-size: 1rem;
}

/* Active slide */
.values-slider .vs-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 4;
  pointer-events: auto;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* One position away from center */
.values-slider .vs-slide.prev,
.values-slider .vs-slide.next {
  opacity: 0.6;
  transform: scale(0.8);
  z-index: 3;
}

/* Two positions away */
.values-slider .vs-slide.prev2,
.values-slider .vs-slide.next2 {
  opacity: 0.4;
  transform: scale(0.7);
  z-index: 2;
}

/* Hidden slides */
.values-slider .vs-slide.hidden {
  opacity: 0;
  transform: scale(0.5);
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

/* Navigation Arrows */
.values-slider .vs-prev,
.values-slider .vs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}


.values-slider .vs-prev { left: 0.5rem; }
.values-slider .vs-next { right: 0.5rem; }
@media (max-width: 600px) {
  .values-slider .vs-prev {
    left: 0.25rem;
  }

  .values-slider .vs-next {
    right: 0.25rem;
  }
}

/* Mobile Optimization */
@media (max-width: 800px) {
  .values-slider .vs-slide {
    width: 90%;
    margin: 0 -40px;
    transform: scale(0.9) !important;
    opacity: 0.5 !important;
  }

  .values-slider .vs-slide.active {
    transform: scale(1) !important;
    opacity: 1 !important;
  }

  .values-slider .vs-prev,
  .values-slider .vs-next {
    display: flex; /* hide arrows on mobile */
  }
}

/* Hover/Focus States */
.vs-prev:hover, .vs-next:hover {
  background: rgba(255,255,255,1);
  transform: translateY(-50%) scale(1.1);
}

.vs-prev:focus, .vs-next:focus {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

/* 3D Effect Support */
.values-slider {
  position: relative;
  width: 100%;
  height: 370px;
  perspective: 1000px;
  margin: 4rem auto;
  overflow: visible;
}

.values-slider .vs-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.values-slider .vs-slide {
  position: absolute;
  width: 280px;
  height: 320px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  transition: all 0.5s ease;
  overflow: hidden;
  flex: none;
  margin: 0;
}

.values-slider .vs-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}


/* Keep your existing button styles with minor adjustments */
.values-slider .vs-prev,
.values-slider .vs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Maintain your responsive styles but adjust for 3D effect */
@media (max-width: 800px) {
  .values-slider {
    height: 320px;
  }

  .values-slider .vs-slide {
    width: 220px;
    height: 260px;
  }
}

/* Additional styling for values heading section */
.about-values {
  text-align: right;
  width: 100%;
  margin-top: 2rem;
}
.about-values-block {
  text-align: right;
  margin-top: 2rem;
}

.about-values-block h3 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.about-values-block p {
  color: #e6eef4;
  font-size: 1rem;
  margin: 0 auto;
  max-width: 60ch;
}
.values-slider-title {
  text-align: center;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.about-hero .section-title,
.about-content-columns strong,
.values-slider-title strong {
  font-size: clamp(1.8rem, 4vw, 2.75rem); /* scales responsively */
  color: #ffffff; /* white for strong contrast , black: #000000*/
  font-weight: 700; /* bolder */
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* subtle shadow for legibility */
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
}
.services-section {
  background: #ececec   ;
  padding: 5rem 1rem;
}

.section-title {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #1d1d1d;
  margin-bottom: 3rem;
}

.services-grid {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05); /* soft shadow */
  border-left: 4px solid #e0e0e0; /* light neutral border instead of color-coded */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.service-card h3 {
  font-size: 1.5rem;
  color: #000;
  margin-bottom: 1rem;
  font-weight: 700;
}

.service-card p {
  color: #444;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.service-card ul {
  padding-left: 1.25rem;
  color: #334e68;
  font-size: 0.975rem;
  line-height: 1.6;
}

.service-card ul li {
  margin-bottom: 0.5rem;
}
.service-card ul li {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #334e68;
}

.service-card ul li i {
  color: #5aa4ff;
  min-width: 1rem;
}

/* Colored left borders per service */
.border-grc {
  border-left: 4px solid #276ef1;
}
.border-redteam {
  border-left: 4px solid #d62828;
}
.border-risk {
  border-left: 4px solid #f77f00;
}
.border-cloud {
  border-left: 4px solid #40916c;
}

@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr; /* full width on mobile */
  }
}
/* last */
[data-reveal] {
  padding: clamp(4rem, 6vw, 6rem) 1rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

[data-reveal] h2.section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 2rem;
  color: var(--c-primary-900);
}

.coming-soon-message {
  font-size: 1.125rem;
  color: #334e68;
  max-width: 60ch;
  margin: 0 auto;
}
/* FAQs */
#faqs details {
  background: #e0effa;
  padding: 1.2rem 1.2rem;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-bottom: 1rem;
  transition: background 0.3s ease;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Inter', sans-serif;
  text-align: left;
  overflow: hidden;
}

#faqs summary {
  font-weight: 700;
  cursor: pointer;
  color: #003366;
  border-radius: 12px;
  font-size: 1.15rem;
  list-style: none;
  position: relative;
  padding-right: 2.5em;
  font-family: 'Inter', sans-serif;
  display: block;
  text-align: left;
  padding-left: 0;
}

#faqs summary::-webkit-details-marker {
  display: none;
}

#faqs summary::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  font-size: 1.2em;
  color: #2980b9;
  transition: transform 0.2s ease, color 0.2s ease;	
  transform: translateY(-50%);
}

#faqs details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: #e0effa;
}

#faqs summary:hover {
  background-color: #d8e6f2;
  color: #005599;
}
#faqs h2 {
  text-align: center;
  color: #0f2b46;
  margin-bottom: 2rem;
}

#faqs p {
  font-size: 1.05rem;
  color: #37576e;
  margin: 0.8rem 0 0;
  padding: 0.8rem 0 0 0;
  line-height: 1.7;
  font-family: 'Inter', sans-serif;
  text-align: left;
}

#faqs details[open] summary {
  background-color: #e0effa;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0.5rem;
  text-align: left;
  padding-left: 0;
  text-align: left;
}
#faqs details p {
  padding: 0;
  margin: 0.8rem 0 0 0; /* only top margin */
  background-color: #f8fbfd;
  line-height: 1.7;
  font-size: 1.05rem;
  max-width: 100%;
}

#faqs details[open] p {
  animation: fadeIn 0.3s ease-in-out;
  background-color: #f8fbfd;
  padding: 1rem 1.5rem;
  color: #37576e;
  margin-top: 1rem;
}
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
}
@media (max-width: 600px) {
  #faqs details {
    padding: 1rem;
    max-width: 95%;
  }
  #faqs summary {
    font-size: 1rem;
  }
  #faqs p {
    font-size: 0.95rem;
  }
}
.faq-wrapper {
  background-color: #e0e0e0; /* slightly darker tone */
  padding: 2rem 1rem;
  width: 100%;
}

/* Footer */
footer {
  background: var(--color-primary);
  color: #fff;
  text-align: left;
  padding: 2rem;
  margin-top: 4rem;
  font-family: 'Inter', sans-serif;
}

/* Scroll Reveal Animation Base Styles */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tight-top {
  padding-top: 1.5rem !important;
}

.contact-info a {
  color: #1a73e8; /* Google-style blue */
  text-decoration: underline;
  font-weight: 500;
}

.contact-info a:hover {
  text-decoration: none;
  color: #0f5ac3; /* darker on hover */
}

.about-image {
  max-width: 180px;
  margin-top: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  animation: dropIn 0.6s ease-out;
}

@media (max-width: 768px) {
  .about-image {
    max-width: 80px;
  }
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.site-footer {
  width: 100vw;
  background-color: #21486b;
  color: white;
  padding: 0rem 0;
}

.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.lang-link {
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-left: 1rem;
  text-decoration: none;
  color: var(--color-text);
}
.lang-link:hover {
  background-color: var(--color-accent-light);
}
/* Basic banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff; /* Matches image */
  padding: 1rem 2rem; /* Check if this spacing matches the image */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow, looks fine */
  display: flex;
  justify-content: flex-start; /* Aligns items to the left, matches image [2] */
  align-items: center;
  gap: 1rem; /* Adjust gap as needed for spacing between text and button group */
  flex-wrap: wrap;
  font-family: system-ui, sans-serif;
  color: #1a3046; /* Matches dark text in image [2] */
  z-index: 1000;
}

.cookie-banner.hidden {
  display: none;
}
/* Paragraphs within banners */
.cookie-banner p {
  margin: 0; /* Correct, as text is directly next to buttons in image [2] */
  font-size: 1rem; /* Adjust if needed */
  color: #1a3046; /* Matches image [2] */
}
.cookie-banner button {
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #21486b;
  background-color: #fff;
  color: #21486b;
  transition: all 0.2s ease;
}

.cookie-banner button:hover,
.cookie-banner button.primary {
  background-color: #21486b;
  color: #fff;
}

/* Advanced popup */
#cookie-banner-advanced {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 700px;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #21486b;
  z-index: 1001;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

#cookie-banner-advanced h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#cookie-banner-advanced p {
  margin-bottom: 1.5rem;
}

#cookie-banner-advanced label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 500;
  font-size: 1rem;
}

#cookie-banner-advanced input[type="checkbox"] {
  margin-right: 0.5rem;
}

.cookie-box {
  background: #e9f0f8;
  padding: 1.2rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

.btn-group {
  display: flex;
  justify-content: flex-start; /* Correct for image [1] and [2] */
  gap: 0.75rem; /* This looks like a reasonable gap for the buttons */
  flex-wrap: wrap;
}
/* Shared Button Styles */
.btn {
  font-weight: bold;
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

/* Accept All - solid light blue */
.btn-primary {
  background-color: #63ace5;
  color: #fff;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  font-weight: bold;
}

.btn-primary:hover {
  background-color: #519cd6;
}
/* Deny All - white with gray border */
.btn-white {
  background-color: #ffffff;
  color: #1a3046;
  border: 1px solid #cbd7e3;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  font-weight: bold;
}
/* Customize - gray/blue background */
.btn-outline {
  background-color: #eef4f8;
  color: #1a3046;
  border: 1px solid #cbd7e3;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  font-weight: bold;
}

.btn-outline:hover {
  background-color: #e0eaf2;
  color: #1a3046;
}
/* Save Preferences - inside the box */
.btn-dark {
  background-color: #1a3046;
  color: #fff;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  font-weight: bold;
}

.btn-dark:hover {
  background-color: #15273a;
}

/* Title Styling */
#cookie-banner-advanced h3 {
  font-size: 1.75rem;
  font-weight: bold;
  color: #1a3046;
}

/* Paragraphs */
#cookie-banner-advanced p,

.cookie-banner p {
  margin: 0;
  font-size: 1rem;
  color: #1a3046;
}
/* Light Blue Cookie Settings Box */
.cookie-box {
  background: #e9f0f8;
  padding: 1.2rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid #d1dbe5;
}

.cookie-box label {
  display: block;
  font-size: 1rem;
  color: #1a3046;
  margin-bottom: 0.8rem;
}

/* Checkbox alignment */
.cookie-box input[type="checkbox"] {
  margin-right: 0.5rem;
}
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    text-align: left;
  }

  .cookie-banner p {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
  }

  .btn-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.5rem;
  }

  .cookie-banner button {
    width: 100%;
    font-size: 1rem;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .values-slider {
    height: 280px;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .values-slider .vs-slide {
    width: 85vw;
    height: 240px;
    transform: scale(0.9) !important;
    opacity: 0.4 !important;
    margin: 0 auto;
  }

  .values-slider .vs-slide.active {
    transform: scale(1) !important;
    opacity: 1 !important;
    z-index: 4;
  }

  .values-slider .vs-prev,
  .values-slider .vs-next {
    display: none; /* Hide arrows on very small screens */
  }
}
@media (max-width: 768px) {
  .about-content-columns {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }

  .about-content-columns .column {
    padding: 0;
    max-width: 90%;
  }

  .about-content-columns .column strong {
    text-align: center;
  }

  .about-content-columns .column p {
    text-align: center;
  }
}