:root {
/*LIGHT*/

  /*Color*/


  /*NEW ACCENTS TO INTEGRATE*/
  --grey0: #FFFFFF;
  --grey1: #F6F6F6;
  --grey2: #f2f2f2;
  --grey3: #e9e9e9;
  --grey4: #c7c7c7;
  --grey5: #a9a9a9;
  --grey6: #7f7f7f;
  --grey7: #6b6b6b;
  --grey8: #4b4b4b;
  --grey9: #292929;


  /*Background*/
  
--primBkg: var(--grey1);
  --accentBkg: var(--grey0);






  --primBlue-1: rgba(150, 185, 235, 1);  /* Bright sky blue */
  --primBlue-2: rgba(136, 171, 227, 1);
  --primBlue-3: rgba(122, 157, 219, 1);
  --primBlue-4: rgba(108, 143, 211, 1);
  --primBlue-5: rgba(94, 129, 203, 1);   /* Midpoint — vibrant warm blue */
  --primBlue-6: rgba(82, 116, 188, 1);
  --primBlue-7: rgba(70, 102, 170, 1);
  --primBlue-8: rgba(58, 88, 150, 1);
  --primBlue-9: rgba(46, 74, 130, 1);    /* Deep saturated blue */

  /*NEW ACCENTS TO INTEGRATE*/


  --accentBlue1: rgba(128, 181, 204);
  --accentBlue2: rgba(91, 145, 177);

  --accentPurple1: rgba(142, 168, 236);
  --accentPurple2: rgba(59, 83, 190);

  --accentLime: rgba(197, 228, 176);
  --accentTeal: rgba(171, 222, 212);

 

 




  /*Font Family*/
  --headingFont:'Poppins', sans-serif;
  --bodyFont: 'Source Sans Pro', sans-serif;


  /*Text Color*/

  --primTextColorL: var(--grey9);
  --secTextColorL: var(--grey8);

  --bodyText: var(--grey9);


}

.textOnColor {
  color: var(--grey1);
}

h1{
  font-family: var(--headingFont);
  font-size: 48px;
  line-height:30px;
  font-weight:600;
  color: var(--primTextColorL);
}
h2{
  font-family: var(--headingFont);
  font-size: 36px;
  font-weight:600;
  line-height: 54px;
  color: var(--secTextColorL);
}
h3{
  font-family: var(--headingFont);
  font-size: 28px;
  font-weight:500;
  line-height: 42px;
  color: var(--secTextColorL);
}
h4{
  font-family: var(--headingFont);
  font-size: 24px;
  font-weight:500;
  color: var(--secTextColorL);
}
h5{
  font-family: var(--headingFont);
  font-size: 20px;
  font-weight:500;
  line-height: 30px;
  color: var(--secTextColorL);
}

.bodyTextSemi{
  font-family: var(--bodyFont);
  font-size: 18px;
  font-weight:600;
  line-height:30px;
  color: var(--bodyText);
}

.bodyText1{
  font-family: var(--bodyFont);
  font-size: 16px;
  font-weight:400;
  line-height:24px ;
  color: var(--bodyText);
}
.bodyText2{
  font-family: var(--bodyFont);
  font-size: 18px;
  font-weight:400;
  color: var(--bodyText);
}

.headHighlight{
  color: var(--primBlue-9);
  
  /*
  background-image: linear-gradient(45deg, var(--primAccentA), var(--primAccentB));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;*/
  display: inline;
}

.highlight{
  font-weight:600;
  color: var(--primTextColorL);
  /*
  background-image: linear-gradient(45deg, var(--primAccentA), var(--primAccentB));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;*/
  display: inline;
}




.menuItem{
  font-family: var(--headingFont);
  font-size: 16px;
  font-weight:500;
  color: var(--bodyText);
}

a:hover{
  color: var(--accentPurple2);
}

/*
.menuItem.scrolled{
  color: var(--textOnColor);
}*/


.caption{
  font-family: var(--bodyFont);
  font-style: italic;
  font-size: 12px;
  font-weight:400;
  color: var(--secTextColorL);
}

.iconSm{
  width: 16px;
  height: 16px;
}

.iconMd{
  width: 24px;
  height: 24px;
}

.iconLg{
  width: 40px;
  height: 40px;
}

.pictogram{
  width: 120px;
  height: 120px;
}







body, html {
  /*background: url('images/org_bkground.svg') no-repeat;
  background-size: cover;*/
  overflow-x: hidden;
  background-color: var(--primBkg);

  /*background-color: #F3F2EE;*/
}

.accentBg{
  background-color: var(--accentBkg);
}


.accentBlueBkg{
  background-color: var(--primAccent);
}

.card{
  background-color: var(--accentBkg);
  padding: 24px;
  border-radius: 24px;
  border-style: none;
}

.cardBorder{
  padding: 24px;
  border-radius: 24px;
  border-style: solid;
  border-color: var(--grey4);
}



.smBuffer{
  height: 10vh;
}

.buffer{
  height: 20vh;
}



a:hover {
  text-decoration: none;
}


.navbar.scrolled{
  background-color: rgba(255, 255, 255, 0.6) !important;
  transition: background-color 200ms linear;
}





.introHero{
  min-width: 0;
}




.imgMock{
  width: 100%; 
  border-radius: 1%; 
  border: 2px solid #f2f2f2;
}










/*LIGHTBOX https://www.w3schools.com/howto/howto_js_lightbox.asp*/




/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 120%;
  max-width: 2400px;
}

/* The Close Button */
.close {
  z-index: 2;
  color: white;
  position: absolute;
  top: 6%;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.2), 0 6px 20px 0 rgba(218, 218, 218, 0.19);
  cursor: pointer;
}







.hidden {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s;
}

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