/* ===== GLOBAL ===== */
:root{
  --nav-h: 80px;
}

/* Consistent bottom breathing room for services */
.content-wrapper {
  padding-bottom: 130px;
}

body {
  background: #1e3a3e;
  background-attachment: fixed;    
  background-repeat: no-repeat;
  background-size: cover;
  color:#CEE6E9;
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;

}


/* another logo lime */
.logo_another{ color:#B4F701; font-weight:600; font-size:20px; }
.logo_consulting{ color:#fff; font-weight:300; font-size:20px; }

/* Navbar */
.navbar{ min-height: var(--nav-h); }
.navbar-light .navbar-nav .nav-link{
  color:#CEE6E9;
  font-weight:300;
  font-size:16px;
}

/* Base — at the very top: perfectly blended with your fixed gradient */
.navbar {
  background: transparent;
  box-shadow: none;
  border-bottom: none;
  transition: background .3s ease, box-shadow .3s ease;
}

/* Only when scrolled: add translucent glass + shadow */
.navbar.scrolled {
  background: rgba(24,49,53,0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* Doodle underline */
.navbar a.nav-link{
  position:relative; display:inline-block;
  color:#CEE6E9 !important; text-decoration:none;
  padding:.5rem .5rem;
}
.navbar a.nav-link::after{
  content:""; position:absolute; bottom:3px; left:.5rem; right:.5rem; height:10px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10' preserveAspectRatio='none'>\
<path d='M0 6 C 20 2, 40 10, 60 6 S 100 2, 120 6' fill='none' stroke='%23CEE6E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/>\
</svg>");
  background-repeat:repeat-x; background-size:120px 10px;
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease; pointer-events:none;
}
.navbar a.nav-link:hover::after,
.navbar a.nav-link.active::after,
.navbar a.nav-link[aria-current="page"]::after{ transform:scaleX(1); }

.navbar, .navbar .navbar-collapse, .navbar .navbar-nav, .navbar .nav-item{ overflow:visible; }
.navbar img.nav-link{ padding:0; display:inline-block; }

/* Spacing between menu items */
.navbar .navbar-nav{ --menu-gap:1.1rem; gap:var(--menu-gap); }
@media (max-width: 767.98px){ .navbar .navbar-nav{ --menu-gap:.8rem; } }

/* Burger button */
.navbar-toggler{
  background-color: rgba(255,255,255,0.1);
  border:none; border-radius:6px;
}
.navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(180,247,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Make the theme toggle align perfectly with nav links */
.navbar .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem; /* same vertical rhythm as .nav-link */
  height: 100%;
  line-height: 1;
  vertical-align: middle;
}

.navbar .theme-toggle img {
  display: block;
  width: 20px;
  height: 20px;
}


/* Mobile dropdown overlay */
.navbar .container{ position:relative; }
@media (max-width: 767.98px){
  .navbar-collapse{
    position:absolute; top:99%; left:0; right:0;
    background: rgba(24,49,53,0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    padding: .75rem 1rem; z-index:2029;
    margin-top: 0 !important;
  }
  .navbar-nav .nav-link{ padding:.5rem 0; }
}
/* Global collapse speed */
.collapse:not(.show),
.collapsing{
  transition: height .10s cubic-bezier(.2,.7,.2,1) !important; /* was .22s ease */
}

@media (max-width: 767.98px){
  /* Mobile panel: fade + height in sync, but faster */
  #collapsingNavbar3{
    will-change: height, opacity;
  }
  #collapsingNavbar3.collapsing{
    opacity: 0;
    transition: height .10s cubic-bezier(.2,.7,.2,1),
                opacity .10s cubic-bezier(.2,.7,.2,1) !important;
  }
  #collapsingNavbar3.collapse.show{
    opacity: 1;
    transition: height .10s cubic-bezier(.2,.7,.2,1),
                opacity .10s cubic-bezier(.2,.7,.2,1) !important;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .collapsing{ transition: none !important; }
}

.navbar-collapse.show{ z-index:3000 !important; }



/* Theme toggle button */
.theme-toggle{
  background:transparent; border:none; cursor:pointer; padding:0; margin-left:.5rem;
  position:relative; z-index:5000; line-height:0;
}
.theme-toggle img{ display:block; width:22px; height:22px; pointer-events:none; }
.navbar-collapse.show .theme-toggle{ z-index:5001; }

/* ================= LIGHT MODE (global bits) ================= */
html[data-theme="light"] body {
 background: #1e3a3e;
  background-attachment: fixed;   /* keeps gradient fixed while scrolling */
  background-repeat: no-repeat;
  background-size: cover;

  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
}
/* Light mode: only glassy when scrolled */
html[data-theme="light"] .navbar.scrolled{
  background: rgba(206,230,233,0.92) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
}
@media (max-width:767.98px){
  html[data-theme="light"] .navbar-collapse,
  html[data-theme="light"] .navbar-collapse.collapsing,
  html[data-theme="light"] .navbar-collapse.show{
    background: rgba(206,230,233,0.98) !important;
  }
}
html[data-theme="light"] .navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23457278' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
html[data-theme="light"] #col_12_header{ background-color:#E9F4F5 !important; }
html[data-theme="light"] .logo_another,
html[data-theme="light"] .logo_consulting{ color:#244A50 !important; }
html[data-theme="light"] .navbar a.nav-link{ color:#244A50 !important; }




/* Light mode: doodle underline in #244A50 */
html[data-theme="light"] .navbar a.nav-link::after{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10' preserveAspectRatio='none'>\
  <path d='M0 6 C 20 2, 40 10, 60 6 S 100 2, 120 6' fill='none' stroke='%23244A50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/>\
</svg>");
}

html[data-theme="light"] .center_text_title,
html[data-theme="light"] .center_text {
  color: #30636A !important;
}

html[data-theme="light"] .filter_text {
  color: #30636A !important;
}

html[data-theme="light"] .display-6,
html[data-theme="light"] .header_text {
  color: #30636A !important;
}


/* Hide both by default to control visibility via theme */
#themeIconOn,
#themeIconOff { display: none; }

/* Dark / brand mode → show “light_on” icon */
html[data-theme="brand"] #themeIconOn { display: block; }

/* Light mode → show “light_off” icon */
html[data-theme="light"] #themeIconOff { display: block; }

/* === KEEP YOUR EXISTING RULES BELOW === */

/* Show desktop arc by default */
.t-desktop{ display:inline; }
.t-tablet,
.t-mobile{ display:none; }

/* Tablet */
@media (max-width: 992px){
  .t-desktop{ display:none; }
  .t-tablet{ display:inline; }
}

/* Mobile */
@media (max-width: 576px){
  .t-tablet{ display:none; }
  .t-mobile{ display:inline; }
}

@media (min-width: 992px){
  .navbar .navbar-nav{ flex-wrap: nowrap; }
}

html[data-theme="light"] .curved-title .choose_text {fill: #30636A;}

/* === Mobile navbar dropdown — LIGHT MODE, translucent === */
@media (max-width: 991.98px){

  /* Panel background with transparency + glassy blur */
  html[data-theme="light"] .navbar-collapse,
  html[data-theme="light"] .navbar-collapse.collapsing,
  html[data-theme="light"] .navbar-collapse.show,
  body.light .navbar-collapse,
  body.light .navbar-collapse.collapsing,
  body.light .navbar-collapse.show,
  .theme-light .navbar-collapse,
  .theme-light .navbar-collapse.collapsing,
  .theme-light .navbar-collapse.show{
    /* #CEE6E9 with alpha */
    background: rgba(206, 230, 233, 0.86) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
    box-shadow: 0 8px 18px rgba(24, 49, 53, 0.18);
  }

  /* Dropdown menu panel inside the navbar (also translucent) */
  html[data-theme="light"] .navbar .dropdown-menu,
  body.light .navbar .dropdown-menu,
  .theme-light .navbar .dropdown-menu{
    background: rgba(206, 230, 233, 0.90) !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    border-color: rgba(36, 74, 80, 0.20);
    box-shadow: 0 10px 20px rgba(24, 49, 53, 0.12);
  }

  /* Text colors */
  html[data-theme="light"] .navbar .nav-link,
  html[data-theme="light"] .navbar .navbar-brand,
  body.light .navbar .nav-link,
  body.light .navbar .navbar-brand,
  .theme-light .navbar .nav-link,
  .theme-light .navbar .navbar-brand{
    color: #244A50 !important;
  }

  /* Dropdown items colors + hover */
  html[data-theme="light"] .navbar .dropdown-item,
  body.light .navbar .dropdown-item,
  .theme-light .navbar .dropdown-item{
    color: #244A50 !important;
  }
  html[data-theme="light"] .navbar .dropdown-item:hover,
  body.light .navbar .dropdown-item:hover,
  .theme-light .navbar .dropdown-item:hover{
    background: rgba(36, 74, 80, 0.08) !important;
    color: #244A50 !important;
  }

  /* Optional: teal hamburger to match */
  html[data-theme="light"] .navbar .navbar-toggler-icon,
  body.light .navbar .navbar-toggler-icon,
  .theme-light .navbar .navbar-toggler-icon{
    background-image:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23244A50' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/* Light mode: navbar toggle BUTTON always has the translucent teal bg */
@media (max-width: 991.98px){
  html[data-theme="light"] .navbar .navbar-toggler,
  body.light .navbar .navbar-toggler,
  .theme-light .navbar .navbar-toggler{
    background-color: rgba(70,114,120,0.10) !important; /* always on */
    border-color: #467278 !important;
    color: #467278 !important;
    border-width: 2px;
    border-radius: .5rem;
  }

  /* Keep the SAME look on hover/focus/active/open */
  html[data-theme="light"] .navbar .navbar-toggler:hover,
  html[data-theme="light"] .navbar .navbar-toggler:focus,
  html[data-theme="light"] .navbar .navbar-toggler:active,
  html[data-theme="light"] .navbar .navbar-toggler[aria-expanded="true"],
  body.light .navbar .navbar-toggler:hover,
  body.light .navbar .navbar-toggler:focus,
  body.light .navbar .navbar-toggler:active,
  body.light .navbar .navbar-toggler[aria-expanded="true"],
  .theme-light .navbar .navbar-toggler:hover,
  .theme-light .navbar .navbar-toggler:focus,
  .theme-light .navbar .navbar-toggler:active,
  .theme-light .navbar .navbar-toggler[aria-expanded="true"]{
    background-color: rgba(70,114,120,0.10) !important; /* unchanged */
    border-color: #467278 !important;
    box-shadow: 0 0 0 .25rem rgba(70,114,120,0.30) !important; /* focus ring */
  }
}

/* === Collapse sheet under the navbar (phones + tablets) === */
@media (max-width: 991.98px){
  :root{ --navH: 56px; } /* fallback; JS will set real height */

  .navbar{ position: sticky; top: 0; z-index: 1030; }
  .navbar .container{ position: static; } /* no positioning context */

    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: .75rem 1rem;
  }

  /* Light theme sheet + sharp top line */
  body.light .navbar-collapse{
    background: rgba(206,230,233,0.96);
    border-top: 0; /* avoid blended borders */
    /* crisp 2px top line drawn above content */
    background-image:
      linear-gradient(to bottom, #244A50 0, #244A50 2px, transparent 2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top left;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  }

  .navbar-nav .nav-link{ padding:.55rem 0; }
}

/* 1) Define gradients as a variable */
:root{
  --site-bg: linear-gradient(to bottom, #183135 0%, #30636A 100%);
}
html[data-theme="light"]{
  --site-bg: linear-gradient(to bottom, #CEE6E9 0%, #FFFFFF 100%);
}

/* 2) Stop setting the gradient on body (remove/override these) */

/* 3) Paint a fixed layer behind everything — works on mobile */
html, body { min-height: 100%; }
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-repeat: no-repeat;
  background-size: cover;
}

.display-6 {
font-family: "Josefin Sans", sans-serif;
font-weight: 700;
color: #CEE6E9;
margin-top:60px;
}

.header_text {
  font-family: "Josefin Sans", sans-serif;
font-weight: 300;
color: #CEE6E9;
font-size:28px;
white-space: pre-line;
}


.mid_text {

  font-size:30px;
  color: #CEE6E9;
}

html[data-theme="light"] .mid_text{
  color:#244A50;
}

html[data-theme="light"] .mb-3{
  color:#244A50;
}


html[data-theme="light"] .mb-0 {
  color:#244A50;
}

html[data-theme="light"] .card-title {
  color:white;
}


html[data-theme="light"] .quadrant-label {
  fill: #244A50 !important;
}

html[data-theme="light"] .flip-face {

  background: rgba(48, 99, 106, 0.4); 
/
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); 
}
}

html[data-theme="light"] .card-title {
  color: white;
}

html[data-theme="light"] .ac-radar {
  --radar-dot: #6CB3BC;
   --radar-stroke: #30636A;
}

html[data-theme="light"] .ac-radar .sweep path {
  fill: #30636A; 
  
}


html[data-theme="light"] .glass-card {

  background: rgba(48, 99, 106, 0.4); 
/
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); 
}
html[data-theme="light"] .ac-radar .cross {
  --radar-stroke: #30636A;
}

html[data-theme="light"] .ac-radar .rings {
  --radar-stroke: #30636A;
}

html[data-theme="light"] .ac-radar .bg {
  fill: transparent;
}

html[data-theme="light"] .ac-radar .lbl {
  fill: #30636A;
}


html[data-theme="light"] #radar-intro-text {
  color: #30636A; 
}

html[data-theme="light"] .carousel-card {
  background: rgba(48, 99, 106, 0.4)
}

html[data-theme="light"] .card-text{
  color:white;
}

html[data-theme="light"] .deck-card{
  background: rgba(48, 99, 106, 0.4);
}

html[data-theme="light"] .clickadot {
  color:#244A50;
}

html[data-theme="light"] #ac-mobile-wheel .ac-wheel-item{
  color:#6CB3BC;
}


html[data-theme="light"] #ac-mobile-wheel .ac-wheel-item.ac-active {
  color:#244A50;
}

/* This sets the color for ONLY the highlighted words */
html[data-theme="light"] #radar-intro-text .highlight-text {
  color: #6CB3BC; /* The original bright green */
}