/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Example: Row-reverse puts the logo on the right and the nav on the left */
[dir="rtl"] .site-header {
  display: flex;            
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

.page-transition {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  background-color: #2d2f1e; 
    transform: translateY(-100%); 
  transition: transform 0.8s ease-in-out;
  pointer-events: none; 
}


.page-transition.active {
  transform: translateY(0);
  pointer-events: all;
}


/* Default Dark Theme */
body {
  background-color: #2d2f1e;
  color: #cfd0a5;
}

body.white-theme {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.white-theme .hero,
body.white-theme .second-section {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.site-header a {
  color: #cfd0a5;
  transition: color 0.7s ease-in-out;
}

.site-header.black-links a {
  color: #000000 !important;
}





/* preload-page */
.preloader{
  padding: 0;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.preload-page{
  display: grid;
  grid-template-columns: repeat(3,70px);
  grid-template-rows: repeat(3,70px);
  grid-gap: 10px;
  animation: animationRotate 16s infinite linear;
}

.preload-page > div{
  animation: animationScale 4s infinite linear;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 10px rgba(207, 208, 165, 0.5);
}
.preload-page > div:nth-child(3){
  background: #cfd0a5; 
  animation-delay: 0.8s;
}
.preload-page > div:nth-child(2),
.preload-page > div:nth-child(6){
  background: #a3a47d; 
  animation-delay: 0.6s;
}

.preload-page > div:nth-child(1),
.preload-page > div:nth-child(5),
.preload-page > div:nth-child(9){
  background: #8b8c64;
  animation-delay: 0.4s;

}

.preload-page > div:nth-child(4),
.preload-page > div:nth-child(8){
  background: #5a5b3f;
  animation-delay: 0.2s;
}

.preload-page > div:nth-child(7){
  background: #888f50;
  animation-delay: 0s;
}

@keyframes animationScale{
  0%,100%{
    transform: scale(0);  
  }
  20%,80%{
    transform: scale(1);
  }
}

@keyframes animationRotate{
  0%{
    transform: rotate(0deg);
  }
  20%{
    transform: rotate(0deg);
  }
  25%{ 
    transform: rotate(90deg);
  }
  45%{
    transform: rotate(90deg);
  }  
  50%{
     transform: rotate(180deg);
  }
  70%{
    transform: rotate(180deg);
  }
  75%{
     transform: rotate(270deg);
  }
  95%{
    transform: rotate(270deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.preload-round > div {
  border-radius:  50%;
  display: block;
  background: #cfd0a5; 
  box-shadow: 0 0 10px rgba(207, 208, 165, 0.5);
}

/* =========== HEADER =========== */
.site-header {
  position: fixed;
  top: -100px; 
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  z-index: 1000; 
  transition: transform 1s ease-out;
}
.site-header.show {
  transform: translateY(100px);
}

.logo-container {
  display: flex;
  align-items: center;
}
.logo-link {
  display: flex;             
  align-items: center;
  text-decoration: none;   
  color: #fff;  
}

.logo-3d {
  position: relative;
  width: 90px;
  height: 60px;
  perspective: 500px;
  margin-right: 8px;
}

.logo-arch {
  position: relative;
  width: 88px;
  height: 50px;
}

.logo-arch .square {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #cfd0a5;
}

.s1 {
  top: 6px; left: 12px;
  transform: rotate(40deg);
}
.s2 {
  top: 0px; left: 36px;
}
.s3 {
  top: 6px; left: 60px;
  transform: rotate(40deg);
}
.s4 {
  top: 30px; left: 0px;
}
.s5 {
  top: 30px; left: 36px;
}
.s6 {
  top: 30px; left: 72px;
}

.logo-text {
  font-size: 1.1rem;
  color: #cfd0a5;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.main-nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #cfd0a5;
  font-size: 1rem;
  transition: transform 0.5s ease-in-out, opacity 0.4s ease-in-out;
}

.main-nav a:hover {
  animation: moveUpHide 0.6s ease-in-out forwards, appearFromBelow 0.6s ease-in-out 0.6s forwards;
}

/* Move Up & Disappear */
@keyframes moveUpHide {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}

/* Reappear from Below */
@keyframes appearFromBelow {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Hamburger Toggle - hide checkbox */
.nav-toggle {
  display: none;
}

/* Hamburger Icon styling */
.nav-toggle-label {
  display: none; 
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: relative;
  z-index: 1100; 
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: #cfd0a5;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  position: absolute;
  transition: all 0.3s ease;
}

/* Middle bar */
.nav-toggle-label span {
  top: 50%;
  transform: translateY(-50%);
}

/* Top bar */
.nav-toggle-label span::before {
  content: "";
  top: -8px;
}

/* Bottom bar */
.nav-toggle-label span::after {
  content: "";
  top: 8px;
}



/* =========== HERO SECTION =========== */
.hero {
  display: flex;
  height: 100vh; 
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 2rem;
}

.hero-arch-wrapper {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-arch-hero {
  position: relative;
  width: 88px;
  height: 50px;
  transition: opacity 0.7s;
}

.logo-arch-hero .hero-square {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #cfd0a5;
}

.h1 {
  top: 6px; left: 12px;
  transform: rotate(40deg);
}
.h2 {
  top: 0; left: 36px;
}
.h3 {
  top: 6px; left: 60px;
  transform: rotate(40deg);
}
.h4 {
  top: 30px; left: 0px;
}
.h5 {
  top: 30px; left: 36px;
}
.h6 {
  top: 30px; left: 72px;
}

.hero h1 {
  font-size: 2rem;
  line-height: 1.4;
  max-width: 700px;
  margin: 0 0 2rem 0;
  opacity: 0; 
  transform: translateY(50px); 
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.hero h1.show {
  opacity: 1;
  transform: translateY(0);
}
.hero h1.blur-effect {
  filter: blur(2px);
  opacity: 0.5;
}

/* Downward bouncing arrow animation */
.down-arrow {
  font-size: 2rem;
  cursor: pointer;
  transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out; 
  animation: arrowMove 2s infinite ease-in-out;
}

@keyframes arrowMove {
  0% { transform: translateY(0); }
  50% { transform: translateY(10px); } 
  100% { transform: translateY(0); } 
}

.down-arrow:hover {
  opacity: 0.7;
}


/* The container that has 3D perspective. */
   .cubes-scene {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
 
  }
  
  .cube {
    --cube-size: 20px; 
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    transform-style: preserve-3d;
  }
  
  .face {
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    background-position: center;
    background-size: cover;
  }
  
  /* 6 faces around the center, always use `translateZ(calc(var(--cube-size) / 2))`. */
  .front  { transform: rotateY(0deg)   translateZ(calc(var(--cube-size)/2)); }
  .back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size)/2)); }
  .left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size)/2)); }
  .right  { transform: rotateY(90deg)  translateZ(calc(var(--cube-size)/2)); }
  .top    { transform: rotateX(-90deg) translateZ(calc(var(--cube-size)/2)); }
  .bottom { transform: rotateX(90deg)  translateZ(calc(var(--cube-size)/2)); }
  
  
/* =========== SECOND SECTION =========== */

.second-section {
  height: 100vh; 
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2d2f1e; 
  color: #cfd0a5; 
  padding: 4rem 2rem;
  text-align: center;
  margin: 8rem auto;
  opacity: 0; 
  visibility: hidden;
 
}

/* Section Heading */
.second-section h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 4rem;
  color: #E8FFD9; 
}

/* Main Text Block */
.second-section p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 750px;
  color: #E8FFD9;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .second-section {
    padding: 3rem 1.5rem;
  }
  
  .second-section h2 {
    font-size: 1.8rem;
  }
  
  .second-section p {
    font-size: 1rem;
  }
}



/* Third Section - Layout */
.third-section {
  height: auto; 
  min-height: 100vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
  padding: 100px 5%;
}

/* Container for content */
.third-section-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; 
}

/* Left Side - Heading & Button */
.third-section-text {
  position: sticky;
  width: 350px;
  top: 100px; 
  align-self: flex-start;
}

.third-section-text h2 {
  font-size: 2.8rem;
  font-weight: 500;
  color: #222;
  margin-bottom: 20px;
}

.third-section-btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  border: 2px solid #222;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.third-section-btn:hover {
  background: #222;
  color: #fff;
}

/* Right Side - White Box & Squares */
.third-section-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  width: 50%;
}

/* White content box */
.third-section-card {
  background: #ffffff;
  padding: 50px;
  margin-top: 10px;
  height: auto;
  max-width: 1800px;
  width: 100%;
  min-height: 500px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}


/* Text inside the card */
.third-section-card h3 {
  font-size: 1.4rem;
  font-weight: 500;
  color: #222;
  margin-bottom: 10px;
}

.third-section-card p {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
  flex-grow: 1; 
}

/* Squares Grid (Bottom Right) */
.third-section-squares {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}


.square {
  position: relative;     
  width: 50px;
  height: 50px;
  background: #fff;    
  border: 2px solid #222;
  overflow: hidden;      
}


.filler {
  position: absolute;
  top: 0; left: 0; 
  bottom: 0; right: 0;
  background: #000;
  transform: scaleX(0);     
  transform-origin: left center;
}





.animate-fill .filler {
  animation: fillLeftRight 1s forwards; 
}

@keyframes fillLeftRight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}



/*****************************************/
/** Card shape-specific overrides       **/
/*****************************************/

/* Card #1: .shapeA */

.squaresA .square {
  border-color: #666;
}
.squaresA .filler {
  background: #333;
}

/* Card #2: .shapeB */

.shapeB .third-section-squares {
  position: relative;  
  width: 200px;        
  height: 200px;
  margin: 0 auto;      
  top: 100px;      
  left: 160px; 
  display: block;      
}


.shapeB .square {
  position: absolute;    
}

.shapeB .square:nth-child(1) {
  top: 0px; right: -27px;
  transform: rotate(40deg);
}
.shapeB .square:nth-child(2) {
  top: -25px; right: 36px;
}
.shapeB .square:nth-child(3) {
  top: 0px; left: 50px;
  transform: rotate(40deg);  
}
.shapeB .square:nth-child(4) {
  top: 60px; right: -55px;
}
.shapeB .square:nth-child(5) {
  top: 60px; right: 34px;
  
}
.shapeB .square:nth-child(6) {
  top: 60px; right: 120px;
}







/*****************************************/
/* Card #3: shapeC Diamond + Rotation    */
/*****************************************/

.shapeC .third-section-squares {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 600px;
  transform-style: preserve-3d;
  overflow: visible; 
  top: 100px;      
  left: 350px; 
}

.shapeC .square {
  position: absolute;
  width: 50px;
  height: 50px;
}


/* The fixed center square (#5). */
   .shapeC .center-square {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 100px;   
    left: 115px;  
    z-index: 10;                 
  }
  
.shapeC .orbit-container .square {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #000;
}

/*  1) */
.shapeC .orbit-container .square:nth-child(1) {
  top:  -25px;
  left:  75px;
}
/*  2)  */
.shapeC .orbit-container .square:nth-child(2) {
  top:  34px;
  left: 56px;
}
/*  3)  */
.shapeC .orbit-container .square:nth-child(3) {
  top:  70px;
  left: 6px;
}
/*  4)  */
.shapeC .orbit-container .square:nth-child(4) {
  top:  70px;
  left: -56px;
}
/*  5)  */
.shapeC .orbit-container .square:nth-child(5) {
  top:  34px;
  left: -106px;
}
/*  6)  */
.shapeC .orbit-container .square:nth-child(6) {
  top:  -25px;
  left: -125px;
}
/*  7)  */
.shapeC .orbit-container .square:nth-child(7) {
  top:  -84px;
  left: -106px;
}
/*  8)  */
.shapeC .orbit-container .square:nth-child(8) {
  top:  -120px;
  left: -56px;
}
/*  9)  */
.shapeC .orbit-container .square:nth-child(9) {
  top:  -120px;
  left: 6px;
}
/* 10) */
.shapeC .orbit-container .square:nth-child(10) {
  top:  -84px;
  left: 56px;
}



.shapeC .orbit-container {
  position: absolute;
  top: 125px; 
  left: 135px;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  animation: orbit 15s linear infinite;  
}




@keyframes orbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}












/* ======================  FOURTH SECTION  ====================== */

/* ======================  BODY THEME FOR 4TH SECTION  ====================== */
body.fourth-theme {
  background-color: #0C2D48 !important; /* Deep blue */
}
body.fourth-theme .third-section {
  background-color: #0C2D48 !important; /* Deep blue */ 
}

/* So your site-header links also turn white if you need: */
.site-header.fourth-links a {
  color: #B5E6EC !important;
}




/* ======================  FOURTH SECTION  ====================== */
.fourth-section {
  height: 100vh;
  background: transparent; 
  padding-bottom: 50px;
  opacity: 0;
  transform: translateY(250px);
  transition: opacity 2s ease-out, transform 2s ease-out;
  display: flex; 
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fourth-section.show {
  opacity: 1;
  transform: translateY(0);
}

/* The container that holds both left text & right stats */
.fourth-section-container {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1200px; 
  width: 100%;
  padding: 4rem 2rem;
}

/* Left text area */
.fourth-section-text {
  color: #B5E6EC;
  width: 40%; /* or whatever you like */
  align-self: flex-start; /* so heading is at top-left */
  margin-left: -6rem; /* Moves it 2rem further left */
}

.fourth-section-text h2 {
  font-size: 3rem;
  line-height: 1.2;
  margin-top: 6rem;
}

.orchestra-btn {

  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background: transparent;
  border: 2px solid #B5E6EC;
  color: #B5E6EC;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.orchestra-btn:hover {
  background: #B5E6EC;
  color: #024048;
}


.stats-stepped {
  position: relative;
  width: 55%;
  height: 500px; 
  margin-left: 2rem;
}



.stat {
  position: absolute;
  width: 150px;
  text-align: left;
  color: #B5E6EC;
}


.stat-1 {
  bottom: 0;      
  left: 0;
}
.stat-2 {
  bottom: 100px;
  left: 200px; 
}
.stat-3 {
  bottom: 200px;
  left: 400px;
}
.stat-4 {
  bottom: 300px;
  left: 600px;
}

/* 2) For each stat, draw a vertical line from the baseline up */
.stat::before {
  content: "";
  position: absolute;
  left: -10%;       /* horizontally center under the number? or left: 0 */
  bottom: -100px;  /* how far below the stat to start the line */
  width: 1px;      /* thickness */
  background-color: #B5E6EC;
  /* The height matches the .stat’s “bottom” offset */
}

/* Example: If .stat-2 is 100px above baseline, we want a 100px line. */
.stat-1::before {
  height: 280px;  
  bottom: -150px; 
}
.stat-2::before {
  height: 350px;  
  bottom: -250px; 
}
.stat-3::before {
  height: 470px;
  bottom: -350px;
}
.stat-4::before {
  height: 570px;
  bottom: -450px;
}

/* Each stat is absolutely positioned to create the step effect */
.stat {
  position: absolute;
  width: 100px; /* adjust as needed */
  text-align: left;
}

.stat .number {
  display: block;
  color: #B5E6EC;
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}



/* RESPONSIVE: On smaller screens, stack them or reduce the stepping. */
@media (max-width: 768px) {
  .fourth-section-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .fourth-section-text {
    width: 100%;
    margin-bottom: 2rem;
  }

  .stats-stepped {
    position: static;
    width: 100%;
    height: auto;
  }

  /* Remove absolute stepping on mobile, just stack them */
  .stat {
    position: static;
    margin-bottom: 2rem;
  }
  .stat-2, .stat-3, .stat-4 {
    bottom: auto; left: auto; /* reset */
  }
}






/* ======================  FIFTH SECTION  ====================== */
.fifth-section {
  height: 100vh;
  background-color: #1C1B2D; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
}

.fifth-section-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Large heading in a lighter/pinkish color (based on your screenshot) */
.fifth-section h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  color: #f4cbb3;  /* Adjust to your desired pinkish/beige color */
  margin-bottom: 2rem;
}

/* Button styling */
.contact-btn {
  background: transparent;
  color: #f4cbb3;
  border: 2px solid #f4cbb3;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.contact-btn:hover {
  background: #f4cbb3;
  color: #1C1B2D;
}


body.fifth-theme {
  background-color: #1C1B2D !important; /* or any override you want */
  color: #f4cbb3 !important;
}

body.fifth-theme .fourth-section {
  background-color: #1C1B2D !important; /* Deep blue */ 
}

/* So your site-header links also turn white if you need: */
.site-header.fifth-links a {
  color: #f4cbb3 !important;
}







/* ====================== FOOTER ====================== */

.site-footer {
  background-color: #f6d3c1; /* Peachy/pink color, adjust as needed */
  padding: 3rem ;
  color: #333; /* Dark text */
  font-family: sans-serif; /* Example font; match your site’s font */
}

/* The main container to hold left & right columns */
.footer-container {
  max-width: 1400px;
  margin-right: auto;
  display: flex;
  justify-content: space-between; /* Left and right side */
  align-items: flex-start;
}

/* Left side: mailing list sign-up */
.footer-left {
  flex: 1;
  margin-right: 8rem;
}

.footer-left h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* The email input + arrow button */
.footer-email {
  width: 40%;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

/* The input field */
.footer-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid #333; /* Underline style from the screenshot */
  padding: 0.5rem 0.25rem;
  background: transparent;
  font-size: 1rem;
  outline: none;
}

/* The arrow button (→) */
.footer-submit {
  background: none;
  border: none;
  color: #333;
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 0.5rem;
}

/* The small trademark/policy text */
.footer-disclaimer {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.5rem;
}

/* Right side: "Sitemap" and "Social" columns */
.footer-right {
  display: flex;
  gap: 3rem; /* space between columns */
}

.footer-column h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Unstyled list for links */
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Spacing for each link */
.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  text-decoration: none;
  color: #333; /* match your text color */
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: #000; /* slightly darker on hover */
}

/* Responsive: stack columns on narrow screens */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-right {
    margin-top: 2rem;
    flex-direction: row; /* or column if you want them stacked vertically */
  }
}




/* ======================= RESPONSIVE ADJUSTMENTS ======================= */

/* Tablet breakpoint (example: max-width: 1024px) */
@media (max-width: 1024px) {
  /* Hero Section */
  .hero h1 {
    font-size: 1.8rem; /* Slightly smaller text */
  }

  /* Second Section */
  .second-section h2 {
    font-size: 1.6rem;
  }
  .second-section p {
    font-size: 1rem;
  }

  /* Fourth Section */
  .fourth-section {
    padding: 3rem 1rem; /* Less padding on tablet */
  }
  .fourth-section-text {
    width: 100%;
    margin-left: 0; /* Remove negative margin on narrower screens */
    margin-top: 2rem; 
  }
  .fourth-section-text h2 {
    font-size: 2.4rem;
  }
  .stats-stepped {
    height: auto;
    margin-left: 0;
  }
  .stat {
    position: static; /* Remove absolute stepping on smaller screens */
    margin-bottom: 2rem;
  }
  .stat .number {
    font-size: 2.5rem; /* Scale down the big numbers */
  }

  /* Fifth Section */
  .fifth-section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  .contact-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }

  /* Footer */
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-left {
    margin-right: 0; /* Let it be full width on smaller screens */
    margin-bottom: 2rem;
  }
  .footer-email {
    width: 80%; /* Make input wider for smaller screens */
  }
  .footer-right {
    flex-direction: row; /* or column if you want them stacked vertically */
    gap: 2rem;
  }
}

/* Mobile breakpoint (example: max-width: 768px) */
@media (max-width: 768px) {
  /* Hero */
  .hero {
    padding: 3rem 1rem;
  }
  .hero h1 {
    font-size: 1.4rem;
    max-width: 90%;
  }

  /* Second Section */
  .second-section {
    padding: 2rem 1rem;
  }
  .second-section h2 {
    font-size: 1.4rem;
  }
  .second-section p {
    font-size: 0.9rem;
  }

  /* Third Section */
  .third-section {
    padding: 3rem 1rem;
  }
  .third-section-text h2 {
    font-size: 1.8rem;
  }
  .third-section-btn {
    font-size: 0.8rem;
    padding: 8px 16px;
  }
  .third-section-card {
    min-height: 300px; 
    padding: 20px;
  }

  /* Fourth Section */
  .fourth-section {
    padding: 2rem 1rem;
  }
  .fourth-section-text h2 {
    font-size: 2rem;
  }
  .stats-stepped {
    width: 100%;
  }
  .stat .number {
    font-size: 2rem;
  }

  /* Fifth Section */
  .fifth-section {
    padding: 2rem 1rem;
  }
  .fifth-section h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  /* Footer */
  .site-footer {
    padding: 2rem 1rem;
  }
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-email {
    width: 100%; /* full width on mobile */
  }
  .footer-right {
    margin-top: 1.5rem;
    flex-direction: column;
    gap: 1.5rem;
  }
}



/* Responsive overrides for third section */
@media (max-width: 1024px) {
  .third-section-text {
    position: static; /* remove sticky */
    width: 100%;      /* full width */
    margin-bottom: 2rem;
    top: auto;
  }
  .third-section-text h2 {
    font-size: 2.2rem;
  }
  .third-section-content {
    width: 100%;
    align-items: center;
  }
  .third-section-card {
    min-height: 400px; /* slightly smaller cards */
  }
}

@media (max-width: 768px) {
  /* For Shape B card squares */
  .shapeB .third-section-squares {
    position: relative; /* Remove absolute positioning if possible */
    width: 120px;       /* Reduce container width */
    height: 120px;      /* Reduce container height */
    top: 50px;          /* Adjust vertical offset */
    left: 0;            /* Center it horizontally */
    margin: 0 auto;     /* Center container */
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(2, 40px);

  }

  /* For Shape C card squares */
  .shapeC .third-section-squares {
    position: relative; /* Remove or change absolute positioning */
    width: 120px;       /* Reduced width */
    height: 120px;      /* Reduced height */
    top: 50px;          /* Adjust vertical offset */
    left: 0;            /* Center horizontally */
    margin: 0 auto;     /* Center container */
    transform: scale(0.6);
  }

  /* Optionally, adjust the orbit container within Shape C if needed */
  .shapeC .orbit-container {
    top: 120px; /* Adjust to fit within the reduced container */
    left: 140px;
    transform: scale(0.6);
  }
}

@media (max-width: 768px) {
  /* Show hamburger icon */
  .nav-toggle-label {
    display: block;
  }

  /* Hide the nav menu by default */
  .main-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%; /* Full screen width */
    height: 100%;
    background-color: #2d2f1e; /* Dark background */
    transition: left 0.3s ease;
    z-index: 1050;
    padding-top: 5rem; /* Space for top items */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the links */
    justify-content: center; /* Center vertically */
  }

  /* Force UL to be a column */
  .main-nav ul {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Align to center */
    gap: 2rem; /* Spacing between items */
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Nav links styling */
  .main-nav li {
    width: 100%;
    text-align: center;
  }

  .main-nav a {
    display: block;
    font-size: 1.5rem;
    color: #cfd0a5;
    text-decoration: none;
  }

  /* When the checkbox is checked, slide the nav in */
  .nav-toggle:checked ~ .main-nav {
    left: -10%;
  }

  /* Animate the hamburger icon into an “X” */
  .nav-toggle:checked + .nav-toggle-label span {
    background: transparent;
  }

  .nav-toggle:checked + .nav-toggle-label span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span::after {
    top: 0;
    transform: rotate(-45deg);
  }
}











/* ========== SERVICES PAGE ========== */

/* Light-blue background for entire services page */
.services-page {
  background-color: #c9e8f0; /* or #c7eaf0, #b9e2ed, etc. */
  color: #1c3b5d; /* darker text color */
  margin-top: 80px;
}

.services-page {
  background-color: #c9e8f0; 
  color: #1C3B5D;
}

/* Nav on the top right, if desired */

.services-page .site-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: none !important; /* override if you had .show logic */
  z-index: 999;
}

.site-header .main-nav ul {
  position: absolute;
  top: 1rem;
  right: 2rem;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only changes link color on the services page */
.services-page .site-header .main-nav a {
  color: #1C3B5D; 
  text-decoration: none;
  font-size: 1rem;
}






/* Services Hero */
.services-hero {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}


.services-hero.in-view {
  opacity: 1;
  transform: translateY(0);
}
.services-hero h1 {
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 2rem;
}

/* Each row: "Developing Story", "Delivering Story", "Measuring Story" */
.services-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 2rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.services-row.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Left heading (e.g. “Developing Story”) */
.services-left {
  flex: 0 0 200px;
  margin-right: 2rem;
}
.services-left h2 {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* Right side with the bullet list */
.services-right {
  flex: 1;
}
.services-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.services-right li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.item-num {
  color: #78909c; /* lighter shade for the numbering */
  margin-left: 1rem;
}

/* ========== FOOTER (Services Page) ========== */
/* We apply a deep-blue background only for the .services-footer. */
.services-footer {
  background-color: #0C2D48 !important;
  color: #ffffff !important;
  padding: 3rem 2rem;
}

/* Adjust link colors in the footer if needed */
.services-footer a {
  color: #b5e6ec !important;
}

/* Example layout for the footer columns */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-left {
  flex: 1;
  margin-right: 2rem;
}

.footer-email {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  width: 60%;
}

.footer-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: 0.5rem;
  outline: none;
}

.footer-submit {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  margin-left: 0.5rem;
  cursor: pointer;
}

.footer-right {
  display: flex;
  gap: 3rem;
}

.footer-column h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a:hover {
  opacity: 0.8; /* simple hover effect */
}

.services-row + .services-row {
  border-top: 1px solid #1c3b5d; /* or another color */
  margin-top: 2rem;             /* optional spacing */
  padding-top: 2rem;            /* optional spacing */
}





/* For the services page only */
.services-page .site-header {
  position: absolute;  /* Freed from normal flow */
  top: 0;              /* At the very top */
  left: 0;
  width: 100%;
  z-index: 999;        /* Keep it above content */
  /* Remove any “top: -100px” logic, etc. */
  transform: none !important; /* If you had .show transforms, remove them here */
}

.services-page .main-nav a.active {
  text-decoration: underline; /* or use a bottom border if you prefer */
  text-decoration-thickness: 2px;  /* optional for thicker underline */
  text-underline-offset: 4px;      /* optional for spacing from text */
}




/* Example responsive for smaller screens */
@media (max-width: 768px) {
  .services-row {
    flex-direction: column;
  }
  .services-left {
    margin-bottom: 1rem;
  }
  .services-hero h1 {
    font-size: 2rem;
  }
  .services-footer {
    padding: 2rem;
  }
  .footer-email {
    width: 100%;
  }
}

















/* ========== LEADERSHIP PAGE ========== */

/* Leadership page basic styling */
.leadership-page {
  background-color: #f5f5f5;
  color: #333;
  /* etc. */
}


/* Nav on the top right, if desired */

.leadership-page .site-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: none !important; /* override if you had .show logic */
  z-index: 999;
}

.leadership-page .main-nav ul {
  position: absolute;
  top: 1rem;
  right: 2rem;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only changes link color on the services page */
.leadership-page .site-header .main-nav a {
  color: #000; 
  text-decoration: none;
  font-size: 1rem;
}



/* Example hero styling */
.leadership-hero {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leadership-hero h1 {
  font-size: 3rem;
  margin: 0;
  padding: 2rem;
}

/* Cards grid */
.leadership-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  justify-items: center;
}

/* Each card: 300x400, image + text */
.leader-card {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid #ddd;
  overflow: hidden; /* hides scaled content out of bounds */
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.leader-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* The image container fills the card, scaled from top */
.leader-photo {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

  background-size: cover;
  background-position: center;
  transform-origin: top;
  transform: scaleY(1);        /* fully shown initially */
  transition: transform 0.8s ease;
}

/* The text container also fills the card, hidden by scaleY(0) initially */
.leader-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center text vertically */
  align-items: center;     /* center horizontally if you want */
  padding: 1rem;

  transform-origin: top;
  transform: scaleY(0);    /* invisible from top to bottom */
  transition: transform 0.8s ease;
}

/* On hover: hide the image (scaleY(0)) and show the text (scaleY(1)) */
.leader-card:hover .leader-photo {
  transform: scaleY(0);
}
.leader-card:hover .leader-text {
  transform: scaleY(1);
}

/* The text elements (name, title, bio) */
.leader-text h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.leader-text .title {
  font-weight: 500;
  color: #666;
  margin-bottom: 1rem;
}
.leader-text .bio {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
  text-align: center; /* or left if you prefer */
}

/* Example: highlight the “Leadership” nav link with an underline */
.leadership-page .main-nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Basic footer layout (optional) */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-left {
  flex: 1;
  margin-right: 2rem;
}
.footer-email {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  width: 60%;
}
.footer-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid #333;
  background: transparent;
  color: #333;
  padding: 0.5rem;
  outline: none;
}
.footer-submit {
  background: none;
  border: none;
  color: #333;
  font-size: 1.2rem;
  margin-left: 0.5rem;
  cursor: pointer;
}
.footer-right {
  display: flex;
  gap: 3rem;
}
.footer-column h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-column li {
  margin-bottom: 0.5rem;
}
.footer-column a:hover {
  opacity: 0.8;
}


/* Only apply to the footer on the leadership page */
.leadership-page .site-footer {
  background-color: #212121 !important; /* or your desired dark color */
  color: #cccccc !important;           /* lighter text color */
}

/* If you also want the footer links in a lighter color */
.leadership-page .site-footer a {
  color: #cccccc !important;
}





/* ========== NEWS PAGE ========== */

/* ========== NEWS PAGE ========== */

/* Only apply these styles if .news-page is on <body> */
.news-page {
  background-color: #f5f5f5;
  color: #333;
}


/* Nav on the top right, if desired */

.news-page .site-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: none !important; /* override if you had .show logic */
  z-index: 999;
}

.news-page .main-nav ul {
  position: absolute;
  top: 1rem;
  right: 2rem;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only changes link color on the services page */
.news-page .site-header .main-nav a {
  color: #000; 
  text-decoration: none;
  font-size: 1rem;
}



/* Large heading at the top */
.news-hero {
  text-align: center;
  padding: 4rem 1rem;
}
.news-hero h1 {
  font-size: 2.5rem;
  margin: 0;
}

/* Grid of news cards */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Each card - default hidden state (translateY, opacity 0) */
.news-card {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  text-align: center;

  /* Slide/fade from bottom to top */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Once in-view, slide up and become fully visible */
.news-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* The image at the top of each card */
.news-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

/* Headline below the image */
.news-card h2 {
  font-size: 1.2rem;
  margin: 1rem 0 0.5rem;
  color: #222;
}

/* Optional snippet text */
.news-card p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #555;
}

/* Underline “News” link if you want to highlight it */
.news-page .main-nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Dark footer for news page only */
.news-page .site-footer {
  background-color: #212121 !important; 
  color: #cccccc !important;
}
.news-page .site-footer a {
  color: #cccccc !important;
}

/* Basic footer layout (if not already done) */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-left {
  flex: 1;
  margin-right: 2rem;
}
.footer-email {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  width: 60%;
}
.footer-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  color: #ccc;
  padding: 0.5rem;
  outline: none;
}
.footer-submit {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.2rem;
  margin-left: 0.5rem;
  cursor: pointer;
}
.footer-right {
  display: flex;
  gap: 3rem;
}
.footer-column h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-column li {
  margin-bottom: 0.5rem;
}
.footer-column a:hover {
  opacity: 0.8;
}



/* Dark footer on the news page only */
.news-page .site-footer {
  background-color: #212121 !important; /* Example dark gray */
  color: #cccccc !important;           /* Lighter text */
}

/* If you also want footer links in lighter color */
.news-page .site-footer a {
  color: #cccccc !important;
}


/* ========== CONTACT PAGE ========== */

.contact-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
  box-sizing: border-box;
  background-color: #f5f5f5;
  color: #333;
}

/* Nav on the top right, if desired */

.contact-page .site-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: none !important; /* override if you had .show logic */
  z-index: 999;
}

.contact-page .main-nav ul {
  position: absolute;
  top: 1rem;
  right: 2rem;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only changes link color on the services page */
.contact-page .site-header .main-nav a {
  color: #000; 
  text-decoration: none;
  font-size: 1rem;
}
.contact-page main {
  flex: 1 0 auto; 
  margin-top: 80px;
}

.contact-page .site-footer {
  flex-shrink: 0; 
}


/* The hero heading at top */
.contact-hero {
  text-align: center;
  padding: 4rem 1rem;
}
.contact-hero h1 {
  font-size: 2.5rem;
  margin: 0;
}

/* The contact form section */
.contact-form-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

.contact-form-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: left; 
}

.contact-form-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.contact-form-container p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 2rem;
}

/* The form itself */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* spacing between fields */
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  font-size: 1rem;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical; /* user can resize up/down if needed */
}

.contact-submit {
  background-color: #333;
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-start; /* left align button */
}
.contact-submit:hover {
  background-color: #555;
}

/* Underline “Contact” link if you want to highlight it */
.contact-page .main-nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Dark footer for the contact page only */
.contact-page .site-footer {
  background-color: #212121 !important; /* dark color */
  color: #cccccc !important;
}
.contact-page .site-footer a {
  color: #cccccc !important;
}


/* ====================== CONTACT PAGE RESPONSIVE ====================== */


@media (max-width: 768px) {
  .contact-hero {
    padding: 2rem 1rem;
  }
  .contact-hero h1 {
    font-size: 1.8rem; 
    margin-bottom: 1rem;
  }
}


@media (max-width: 768px) {
  .contact-form-section {
    padding: 1rem;
  }
  .contact-form-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
}


@media (max-width: 480px) {
  .contact-form label {
    font-size: 0.9rem; 
  }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    font-size: 0.9rem;
    padding: 0.4rem;
  }
  
  .contact-submit {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}


/* Basic footer layout (if not already done in your CSS) */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-left {
  flex: 1;
  margin-right: 2rem;
}
.footer-email {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  width: 60%;
}
.footer-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  color: #ccc;
  padding: 0.5rem;
  outline: none;
}
.footer-submit {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.2rem;
  margin-left: 0.5rem;
  cursor: pointer;
}
.footer-right {
  display: flex;
  gap: 3rem;
}
.footer-column h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-column li {
  margin-bottom: 0.5rem;
}
.footer-column a:hover {
  opacity: 0.8;
}