@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono:wght@400;700&family=Roboto+Serif:ital,wght@1,400;1,700&display=swap");

:root {
  --root-size: 56.25%; /* equal to 9px = 1em = 1rem */
  font-size: var(--root-size);

  /* spacing units */
  --spacing-scale-ratio: 2; /* 2:1 ratio | multiply to scale up (2 * --spacing-scale-ratio) | divide to scale down (n / --spacing-scale-ratio)*/
  --space-0: 0.5rem; /* equal to --root-size / --spacing-scale-ratio */
  --space-1: calc(var(--space-0) * var(--spacing-scale-ratio)); /* 9px */
  --space-2: calc(var(--space-1) * var(--spacing-scale-ratio)); /* 18px */
  --space-3: calc(var(--space-2) * var(--spacing-scale-ratio)); /* 36px */
  --space-4: calc(var(--space-3) * var(--spacing-scale-ratio)); /* 72px */
  --space-5: calc(var(--space-4) * var(--spacing-scale-ratio)); /* 144px */
  --space-6: calc(var(--space-5) * var(--spacing-scale-ratio)); /* 288px */
  --space-7: calc(var(--space-6) * var(--spacing-scale-ratio)); /* 576px */
  --space-8: calc(var(--space-7) * var(--spacing-scale-ratio)); /* 1152px */
  --space-9: calc(var(--space-8) * var(--spacing-scale-ratio)); /* 2304px */

  /*typography*/

  --default-font: inter, sans-serif, Helvetica Neue, Helvetica, Arial,
    Sans-Serif;
  --paragraph-font: "Roboto", helvetica, arial, sans-serif;
  /* font families */
  --font-family-default: var(--paragraph-font);
  --font-family-header: "Roboto", sans-serif, Helvetica Neue, Helvetica, Arial,
    Sans-Serif;
  --font-family-data: "Roboto Mono", monospace;
  --font-primary: var(--font-family-default);
  --font-family-label: var(--font-family-data);

  /* font scaling */
  --font-scale-ratio: calc(4 / 3); /* 4:3 perfect fourth ratio */

  /* scaling */
  --font-size-h6: calc(
    var(--space-1) * var(--font-scale-ratio)
  ); /* 12px | 1.3333rem */
  --font-size-h5: calc(
    var(--font-size-h6) * var(--font-scale-ratio)
  ); /* 16px  |  1.7778rem */
  --font-size-h4: calc(
    var(--font-size-h5) * var(--font-scale-ratio)
  ); /* 21.3333px 2.3704rem */
  --font-size-h3: calc(
    var(--font-size-h4) * var(--font-scale-ratio)
  ); /* 28.4444px | 3.1605rem */
  --font-size-h2: calc(
    var(--font-size-h3) * var(--font-scale-ratio)
  ); /* 37.9259px | 4.214rem */
  --font-size-h1: calc(
    var(--font-size-h2) * var(--font-scale-ratio)
  ); /* 50.5679px 5.6187rem */

  --font-size-small: var(--font-size-h6);
  --font-size-p: var(--font-size-h5);
  --font-size-label: var(--font-size-h6);
  --font-size-button: var(--font-size-default);

  /* set default font size*/
  --font-size-default: var(--font-size-p);

  /* lineheight || "letting" */
  --line-height-default: calc(1 * 5 / 3);
  --line-height-header: 1;
  --line-height-p: var(--line-height-default);
  --line-height-small: var(--line-height-default);
  --line-height-label: var(--font-size-h5);

  --primary-975: #00000d;
  --primary-950: #00001a;
  --primary-900: #000033;
  --primary-800: #000066;
  --primary-700: #000099;
  --primary-600: #0000cc;
  --primary-500: #0000ff;
  --primary-400: #3333ff;
  --primary-300: #6666ff;
  --primary-200: #9999ff;
  --primary-100: #ccccff;
  --primary-050: #e6e6ff;
  --primary-025: #f2f2ff;

  --danger-950: #36252a;
  --danger-900: #49262a;
  --danger-800: #70282b;
  --danger-700: #982a2c;
  --danger-600: #c02c2d;
  --danger-500: #e62e2e;
  --danger-400: #ff5a5a;
  --danger-300: #ff8080;
  --danger-200: #ffa6a6;
  --danger-100: #ffcccc;
  --danger-050: #ffe6e6;
  --danger-025: #fff2f2;

  --success-950: #03140a;
  --success-900: #062814;
  --success-800: #0c5129;
  --success-700: #12793d;
  --success-600: #18a251;
  --success-500: #1eca6b;
  --success-400: #43d585;
  --success-300: #6ddfa0;
  --success-200: #9aeabe;
  --success-100: #cbf4dd;
  --success-050: #e6f9f0;
  --success-025: #f2fcf8;

  --warning-950: #1a170a;
  --warning-900: #4e4b35;
  --warning-800: #7a7141;
  --warning-700: #a7984d;
  --warning-600: #d3be59;
  --warning-500: #ffe565;
  --warning-400: #fff184;
  --warning-300: #fffaa3;
  --warning-200: #ffffc1;
  --warning-100: #fdffe0;
  --warning-050: #fffdf0;
  --warning-025: #fffdf8;

  --info-950: #090217;
  --info-900: #14072e;
  --info-800: #2c145b;
  --info-700: #472689;
  --info-600: #663eb7;
  --info-500: #895be4;
  --info-400: #9f79ea;
  --info-300: #b699ef;
  --info-200: #cdbaf4;
  --info-100: #e6dcfa;
  --info-050: #f3f2fc;
  --info-025: #f9f9fe;

  --black: #000;
  --secondary-950: #1b1d21;
  --secondary-900: #222429;
  --secondary-800: #2e3035;
  --secondary-700: #3b3e44;
  --secondary-600: #4c4f55;
  --secondary-500: #5e6167;
  --secondary-400: #74777d;
  --secondary-300: #8d9095;
  --secondary-200: #b2b4b9;
  --secondary-100: #e0e2e4;
  --secondary-050: #f0f1f2;
  --secondary-025: #f8f8f9;
  --white: #ffffff;
  
  --highlight: #BFFF00;

  font-family: var(--font-family-default);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  overflow: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-anchor: none;
  font-size: var(--font-size-default);
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  --highlight-filter: drop-shadow(0px 0px var(--space-1) rgba(0, 0, 255, 0.75));
  text-wrap: pretty;
  overflow-y: auto;
  color: white;
}

:where(body) {
  background-color: var(--secondary-800); /* Base background color */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4rem' height='4rem'%3E%3Cpath d='M10 0 v20 M0 10 h20' stroke='%234c4f55' stroke-width='4' stroke-linecap='square' /%3E%3C/svg%3E");
  background-size: 2rem 2rem; /* Spacing between plus signs */
  background-repeat: repeat; /* Repeat pattern */
}

/* home page stuff */
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-header);
  font-family: var(--font-family-default);
  text-wrap: balance;
  font-family: var(--font-family-header);
  font-weight: bold !important;
  font-size: unset;
}

h1 {
  font-size: var(--font-size-h1) !important;
}

h2 {
  font-size: var(--font-size-h2) !important;
}

h3 {
  font-size: var(--font-size-h3) !important;
}

h4 {
  font-size: var(--font-size-h4) !important;
}

h5 {
  font-size: var(--font-size-h5) !important;
}

h6 {
  font-size: var(--font-size-h6) !important;
}

label {
  font-size: var(--font-size-label) !important;
  font-family: var(--font-family-data);
  color: var(--secondary-300);
}

[disabled] label {
  font-size: var(--font-size-label) !important;
  font-family: var(--font-family-default);
  color: var(--secondary-300);
}

small {
  font-size: var(--font-size-small) !important;
  font-family: var(--font-family-default);
}

em {
  font-family: "Roboto Serif";
  font-style: italic;
}

a {
  cursor: pointer;
}

button {
  padding: var(--font-size-h6) var(--space-2);
  border: none;
  border-radius: var(--space-3);
  min-width: var(--space-4);
  color: var(--secondary-100);
  background: transparent;
  font-size: var(--font-size-default);
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  transform: scale(1.025);
  filter: brightness(1.1);
  transition: none;
}

button.primary {
  background: var(--success-600);
  color: white;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  font-weight: bold;
}

button.primary:hover {
    background: var(--highlight);
    box-shadow: 0 0 12px var(--success-500);
    color: var(--success-800);
}

section {
  max-width: var(--space-8);
  margin: 0 auto;
  padding-inline: var(--space-2);
}

@media screen and (min-width: 768px) {
  section {
    padding-inline: var(--space-4);
  }
}

@media screen and (min-width: 992px) {
  section {
    padding-inline: var(--space-3);
  }
}

@media screen and (min-width: 1366px) {
  section {
    padding-inline: 0;
  }
}

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top: var(--space-1) solid var(--success-800);
  position: sticky;
  top: 0;
  background: var(--secondary-900);
  z-index: 2;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

#header-left {
  padding: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

#header-right {
  background: var(--secondary-900);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2);
  display: flex;
  gap: var(--space-2);
  border-radius: 0 0 0 var(--space-3);
  box-shadow: 0 6px 12px #00000011;
  align-items: center;
}

#hero-section {
  min-height: calc(100dvh - 7rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 7rem;
  position: relative;
}

#hero-text {
  max-width: 72rem;
  background: var(--secondary-900);
  padding: var(--space-3);
  border-radius: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 1;
}

a:has(#explore-services-btn) {
  width: 100%;
}

.explore-services-btn {
    width: 100%;
}

#hero-headline {
  font-size: clamp(var(--font-size-h2), 3vw, var(--font-size-h1)) !important;
}

#hero-img {
  margin-top: var(--space-3);
  width: 80%;
  content: url(https://www.idisk.com/Dashboard_Grid_View.png);
}

@media screen and (min-width: 768px) {
  #hero-img {
    content: url(https://www.idisk.com/Dashboard_for_website.png);
  }
}

#logo-text {
  display: none;
}

@media screen and (min-width: 420px) {
  #logo-text {
    display: block;
  }
}

#hero-button {
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.screen-img {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  aspect-ratio: 318/688;
  background: var(--primary-100);
  border-radius: var(--space-2);
  box-shadow: 0 6px 12px #00000011;
  border: 3px solid var(--success-300);
}

@media screen and (min-width: 768px) {
  .screen-img {
    max-width: 1152px;
    max-height: unset;
    aspect-ratio: 1152/748;
  }
}

footer {
  background: var(--secondary-950);
  color: var(--success-500);
  padding: 7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 7rem;
  box-shadow: 0 -6px 12px #00000011;
}

footer h4 {
  color: black;
}

#footer-left {
  display: flex;
  flex-direction: column;
  gap: 7rem;
}

#footer-left-top {
  display: flex;
  gap: 11rem;
}

#footer-logo-content-container {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-1);
}

ul#footer-support-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

ul#footer-support-links a {
    text-decoration: none;
    color: var(--success-600);
}

ul#footer-support-links a:hover {
    color: var(--success-400);
}

#footer-social-icons-wrapper {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

#footer-social-icons-wrapper svg {
  fill: white;
}

@media screen and (min-width: 768px) {
  #footer-social-icons-wrapper {
    width: fit-content;
  }
}

#blue-section-container {
  width: 100%;
  background: var(--success-500);
  padding-block: 11rem;
}

section#blue-section {
  display: flex;
  flex-direction: column;
  color: white;
  gap: var(--space-3);
}

#blue-section-icon-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

#blue-section-headline {
  text-align: center;
}

.three-columns-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}

section.flip-flop:nth-of-type(odd),
section.flip-flop:nth-of-type(even) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.flip-flop {
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .flip-flop {
    margin-top: var(--space-3);
    gap: 0;
  }

  section.flip-flop:nth-of-type(odd) {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  section.flip-flop:nth-of-type(even) {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    direction: rtl;
    text-align: left;
    gap: 0;
  }
}

.flip-flop-right {
  padding: 0 4rem;
}

.flip-flop-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#one-line-img {
  content: url(./images/One_line_monitoring.png);
}

#chat-img {
  content: url(https://www.idisk.com/Chat_for_mobile.png);
}

#table-img {
  content: url(https://www.idisk.com/Table.png);
}

#upload-img {
  content: url(https://www.idisk.com/Upload_Mobile.png);
}



#party-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 30rem;
  gap: var(--space-2);
}

#pricing-section {
  padding-block: 11rem;
  display: grid;
  gap: var(--space-1);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "pricing-header pricing-header"
    "free-plan paid-plan";
}

#pricing-header {
  grid-area: pricing-header;
}

#free-plan {
  grid-area: free-plan;
}

#paid-plan {
  grid-area: paid-plan;
}

@media screen and (min-width: 768px) {
  #pricing-section {
    grid-template-areas: "pricing-header free-plan paid-plan";
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.pricing-column {
  background: var(--secondary-900);
  box-shadow: 0 6px 12px #00000011;
  padding: var(--space-2);
  gap: var(--space-2);
  display: flex;
  flex-direction: column;
  border-radius: var(--space-2);
}

.pricing-features li {
  padding-block: 1rem;
}
.pricing-features li + li {
  border-top: 1px solid var(--secondary-800);
}

.price-label {
  color: var(--success-500);
}

#mobile-section {
  position: relative;
  display: none;
}

@media screen and (min-width: 768px) {
  #mobile-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}

#three-screens-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-img {
  aspect-ratio: 208/450;
  width: 200px;
  max-width: var(--space-5);
  top: 0;
  left: 0;
  box-shadow: 0 6px 12px #00000015;
  border-radius: var(--space-2);
  background: var(--primary-100);
  border: 3px solid var(--success-300);
}

#screen1 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-80%, -10%);
}

#screen2 {
  position: relative;
}

#screen3 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-20%, 10%);
}
  

  /* Desktop Navigation Styles */
.desktop-nav {
    display: none; /* Hide by default on small screens */
  }
  
  @media (min-width: 992px) {
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    /* Show desktop nav and center it */
    #desktop-nav {
      flex: 1;
      display: flex;
      justify-content: center;
    }
  
    .desktop-nav-links {
        display: flex;
        list-style: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        align-items: center;
    }

    .desktop-nav-links li {
        height: 100%;
        display: flex;
        align-items: center;
    }
  
    .desktop-nav-links li a {
      text-decoration: none;
      color: var(--secondary-100);
      font-size: var(--font-size-h5);
      height: 100%;
      padding-inline: var(--space-1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .desktop-nav-links li a:hover {
        color: white;
        cursor: pointer;
        background: var(--secondary-800);
        transition: none;
    }
  
    /* Hide the mobile nav on wide screens */
    #mobile-nav {
      display: none;
    }
  }
  
  /* Mobile Navigation Styles (existing) */
  .mobile-nav {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  .mobile-nav button {
    background: none;
    border: none;
    color: var(--secondary-100);
    font-size: var(--font-size-h3);
    cursor: pointer;
  }
  
  .mobile-nav-links {
    list-style: none;
    background: var(--secondary-900);
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    padding: var(--space-1);
    z-index: 2;
    width: fit-content;
  }
  
  .mobile-nav-links li {
    padding: var(--space-1) var(--space-2);
  }
  
  .mobile-nav-links li a {
    text-decoration: none;
    color: var(--secondary-100);
    font-size: var(--font-size-h5);
  }
  
  /* Show mobile nav menu when active */
  .mobile-nav.active .mobile-nav-links {
    display: flex;
  }
  
  /* Ensure mobile nav is hidden on larger screens */
  @media (min-width: 992px) {
    #mobile-nav {
      display: none;
    }
  }

/* Branding Section Styles */
#branding-section {
    padding: var(--space-4) var(--space-2);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    text-align: center;
  }
  
  .branding-intro h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-1);
  }
  
  .branding-intro p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  .branding-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    text-align: left;
  }
  
  .branding-item h3 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-1);
  }
  
  .branding-item p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  /* On larger screens, display intro on the left and details on the right */
  @media screen and (min-width: 768px) {
    #branding-section {
      grid-template-columns: 1fr 1fr;
      text-align: left;
      align-items: start;
    }
  
    .branding-intro {
      padding-right: var(--space-2);
    }
  
    .branding-details {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2);
    }
  }

/* Timeline as a Bulleted List */
.timeline-list {
    list-style: disc;
    margin: 0 auto;
    color: var(--secondary-100);
  }
  
  .timeline-list li {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  .timeline-date {
    font-weight: bold;
    margin-right: 0.5rem;
    color: var(--success-500);
  }
  
  /* Branding Section adjustments */
  #branding-section {
    padding: var(--space-4) var(--space-2);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    text-align: center;
  }
  
  .branding-intro h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-1);
  }
  
  .branding-intro p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  .branding-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    text-align: left;
  }
  
  .branding-item h3 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-1);
  }
  
  .branding-item p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  /* On larger screens, display intro on the left and details on the right */
  @media screen and (min-width: 768px) {
    #branding-section {
      grid-template-columns: 1fr 1fr;
      text-align: left;
      align-items: start;
    }
  
    .branding-intro {
      padding-right: var(--space-2);
    }
  
    .branding-details {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2);
    }
  }
  

  /* "Why DIS" Section Styles */
#why-dis {
    padding: var(--space-4) var(--space-2);
    text-align: center;
    color: var(--secondary-100);
  }
  
  #why-dis h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-1);
  }
  
  #why-dis h3 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-3);
    color: var(--secondary-300);
  }
  
  /* Differentiators Grid */
  .differentiators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  
  .differentiator {
    background: var(--secondary-900);
    padding: var(--space-2);
    border-radius: var(--space-2);
    text-align: left;
  }
  
  /* Icon Placeholder (to be replaced with your icon graphics later) */
  .icon-placeholder {
    font-size: var(--font-size-h3);
    margin-bottom: var(--space-1);
    color: var(--success-500);
  }
  
  /* Client Logos Section */
  #client-logos {
    margin-top: var(--space-4);
    font-size: var(--font-size-p);
  }
  

  /* Core Services Section Styles */
#core-services {
    padding: var(--space-4) var(--space-2);
    text-align: center;
    color: var(--secondary-100);
  }
  
  #core-services h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-2);
  }
  
  /* Service Cards Grid */
  .service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-3);
  }
  
  /* Individual Service Card */
  .service-card {
    background: var(--secondary-900);
    padding: var(--space-2);
    border-radius: var(--space-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .service-card h4 {
    font-size: var(--font-size-h4);
    margin: var(--space-1) 0;
  }
  
  .service-card p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    margin-bottom: var(--space-2);
  }
  
  .service-card a {
    text-decoration: none;
    background: var(--success-600);
    color: white;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--space-1);
    font-weight: bold;
    transition: transform 0.2s, filter 0.2s;
  }
  
  .service-card a:hover {
    transform: scale(1.025);
    filter: brightness(1.1);
  }
  
  /* Icon Placeholder */
  .icon-placeholder {
    font-size: var(--font-size-h3);
    color: var(--success-500);
    margin-bottom: var(--space-1);
  }

  
  /* Methodology Section Styles */
#methodology {
    padding: var(--space-4) var(--space-2);
    text-align: center;
    color: var(--secondary-100);
  }
  
  #methodology h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-3);
  }
  
  /* Phases Grid */
  .phases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }
  
  /* Individual Phase Card */
  .phase {
    background: var(--secondary-900);
    padding: var(--space-2);
    border-radius: var(--space-2);
    text-align: left;
  }
  
  .phase h4 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-1);
  }
  
  .phase p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  /* Client Testimonial Styles */
  blockquote {
    border-left: 4px solid var(--success-600);
    margin: var(--space-3) auto;
    padding-left: var(--space-2);
    font-size: var(--font-size-p);
    color: var(--secondary-100);
    max-width: 800px;
  }
  

  /* CI-Ops Section Styles */
#ci-ops {
    padding: var(--space-4) var(--space-2);
    text-align: center;
  }
  
  #ci-ops h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-2);
  }
  
  #ci-ops h3 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-3);
    color: var(--success-500);
  }
  
  /* Dashboard Image */
  #ci-ops-dashboard {
    margin: var(--space-3) auto;
    max-width: 800px; /* Adjust to your design */
  }
  
  #ci-ops-dashboard img {
    width: 100%;
    border-radius: var(--space-2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Benefits Grid */
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0;
  }
  
  .benefit {
    background: var(--secondary-950);
    padding: var(--space-2);
    border-radius: var(--space-2);
    text-align: left;
  }

  .benefit strong {
    color: var(--success-500);
  }
  
  .benefit p {
    margin: var(--space-1) 0;
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  /* Summary Paragraph */
  .ci-ops-summary {
    font-size: var(--font-size-p);
    margin: var(--space-3) auto;
    max-width: 800px;
  }

  
  /* Call-to-Action Section Styles */
#call-to-action {
    padding: var(--space-4) var(--space-2);
    text-align: center;
    background: var(--secondary-900);
    color: var(--secondary-100);
    margin-bottom: var(--space-4);

  }
  
  #call-to-action h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-1);
  }
  
  #call-to-action h3 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--space-3);
    color: var(--secondary-300);
  }
  
  /* Contact Form Layout */
  #contact-form {
    display: grid;
    gap: var(--space-2);
    max-width: 600px;
    margin: 0 auto var(--space-3);
  }
  
  /* Input and Textarea Styling */
  #contact-form input,
  #contact-form textarea {
    width: 100%;
    padding: var(--space-1);
    border: 1px solid var(--secondary-400);
    border-radius: var(--space-1);
    background: var(--secondary-800);
    color: var(--secondary-100);
    font-size: var(--font-size-p);
  }
  
  #contact-form textarea {
    resize: vertical;
    min-height: 100px;
  }
  
  /* Button Styling */
  #contact-form button.primary {
    justify-self: center;
    padding: var(--space-2) var(--space-3);
    transition: transform 0.2s, filter 0.2s;
  }
  
  #contact-form button.primary:hover {
    transform: scale(1.025);
    filter: brightness(1.1);
  }
  
  /* Additional Text Styling */
  #call-to-action p {
    font-size: var(--font-size-p);
    margin-top: var(--space-2);
  }
  
  #call-to-action a {
    color: var(--success-500);
    text-decoration: underline;
  }
  
  .icon-placeholder {
    font-size: var(--font-size-h1);
  }

  /* Hero Carousel Container */
#hero-carousel {
    position: absolute;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    top: 0;
  }
  
  /* Carousel Slides */
  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;             /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
  }
  
  .carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Show the active slide */
  .carousel-slide.active {
    opacity: 1;
    z-index: 1;
  }
  
  /* Carousel Controls */
  .carousel-control {
    position: absolute;
    top: 50%;
    background: var(--secondary-900);
    color: var(--secondary-100);
    border: none;
    cursor: pointer;
    z-index: 2;
    opacity: 0.7;
    min-width: unset;
    aspect-ratio: 1/1;
    height: var(--space-3);
    width: var(--space-3);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .carousel-control:hover {
    opacity: 1;
  }
  
  .carousel-control.prev {
    left: 1rem;
  }
  
  .carousel-control.next {
    right: 1rem;
  }
  

  /* ======================
   About Us Page Styles
   ====================== */

/* Container for the About Us page main content */
#about-us-content {
    padding: var(--space-4) var(--space-2);
    max-width: var(--space-8);
    margin: 0 auto;
  }
  
  /* Introduction Section */
  #about-intro {
    margin-bottom: var(--space-4);
  }
  
  #about-intro h1 {
    font-size: var(--font-size-h1);
    margin-bottom: var(--space-1);
  }
  
  #about-intro h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-2);
  }
  
  #about-intro p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    max-width: var(--space-7);
  }
  
  /* Our Legacy Section */
  #our-legacy {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-p);
    font-size: var(--font-size-p);
  }
  
  #our-legacy p {
    margin-bottom: var(--space-2);
  }
  
  /* Our Expertise Section */
  #our-expertise {
    margin-bottom: var(--space-5);
  }
  
  #our-expertise ul {
    list-style: disc;
    padding-left: var(--space-3);
    margin: var(--space-2) 0;
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }

  /* Style for icons used in list items */
#our-expertise li i {
    margin-right: 0.5rem;
    color: var(--success-500);
    vertical-align: middle;
  }
  
  /* Our Approach Section */
  
  #our-approach p {
    max-width: 800px;
    margin: 0 auto var(--space-2);
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  #our-approach ul {
    list-style: disc;
    padding-left: var(--space-3);
    margin: var(--space-2) auto;
    max-width: 800px;
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  /* Our Track Record Section */
  
  #our-track-record ul {
    list-style: disc;
    padding-left: var(--space-3);
    margin: var(--space-2) auto;
    max-width: 800px;
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  /* Partner With Us / Call-to-Action Section */
  #partner-with-us {
    text-align: center;
    margin-bottom: var(--space-4);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  #partner-with-us h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-1);
  }
  
  #partner-with-us p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    margin-bottom: var(--space-2);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Responsive adjustments */
  @media screen and (min-width: 768px) {
    /* For sections that have longer text, we can increase max-width for better readability */
    #about-intro p,
    #our-legacy p,
    #our-approach p,
    #our-track-record ul,
    #partner-with-us p {
      max-width: 800px;
    }
  }
  

  /* Our Expertise Section - Grid/Card Layout */
#our-expertise {
    margin-top: var(--space-5);
    text-align: center;
  }
  
  #our-expertise h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-3);
    color: var(--secondary-100);
  }
  
  /* Grid container for the expertise cards */
  .expertise-grid {
    display: grid;
    gap: var(--space-3);
    /* 1 column on smaller screens; 2 columns on medium+ screens */
    grid-template-columns: 1fr;
  }
  
  @media screen and (min-width: 768px) {
    .expertise-grid {
      grid-template-columns: 1fr 1fr; /* 2 columns on tablets+ */
    }
  }
  
  @media screen and (min-width: 1200px) {
    .expertise-grid {
      grid-template-columns: 1fr 1fr 1fr; /* 3 columns for wider screens if desired */
    }
  }
  
  /* Each individual card */
  .expertise-card {
    background: var(--secondary-900);
    border-radius: var(--space-2);
    padding: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  /* Subtle hover effect */
  .expertise-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  
  .expertise-icon {
    font-size: var(--font-size-h2);
    color: var(--success-500);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Title and text */
  .expertise-text {
    text-align: left;
  }
  
  .expertise-text strong {
    font-size: var(--font-size-h5);
    display: block; /* so it sits above the paragraph */
    margin-bottom: var(--space-1);
    color: var(--secondary-100);
  }
  
  .expertise-text p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    color: var(--secondary-100);
    margin: 0;
  }
  

  /* =======================
   About Us - Additional Sections
   ======================= */

/* OUR LEGACY SECTION */
#our-legacy {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-4);
    text-align: left;
  }
  
  #our-legacy .legacy-content {
    padding: var(--space-2);
  }
  
  #our-legacy .legacy-content h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-1);
    color: var(--secondary-100);
  }
  
  #our-legacy .legacy-content p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    margin-bottom: var(--space-2);
    color: var(--secondary-100);
  }
  
  #our-legacy .legacy-image img {
    width: 100%;
    border-radius: var(--space-2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Two-column layout on larger screens */
  @media screen and (min-width: 768px) {
    #our-legacy {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  /* OUR APPROACH SECTION */
  #our-approach {
    margin-bottom: var(--space-5);
    text-align: center;
    color: var(--secondary-100);
  }
  
  #our-approach h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-2);
  }
  
  #our-approach p {
    max-width: 800px;
    margin: 0 auto var(--space-3);
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
  }
  
  .approach-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
    text-align: left;
  }
  
  @media screen and (min-width: 768px) {
    .approach-list {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  .approach-item {
    background: var(--secondary-900);
    padding: var(--space-2);
    border-radius: var(--space-2);
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .approach-item i {
    font-size: var(--font-size-h2);
    color: var(--success-500);
    flex-shrink: 0;
  }
  
  .approach-item strong {
    font-size: var(--font-size-h5);
    margin-bottom: var(--space-1);
    display: block;
    color: var(--secondary-100);
  }
  
  .approach-item p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    margin: 0;
    color: var(--secondary-100);
  }
  
  /* OUR TRACK RECORD SECTION */
  
  #our-track-record h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-2);
  }
  
  .track-record-list {
    list-style: disc;
    padding-left: var(--space-3);
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
  }
  
  .track-record-list li {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    margin-bottom: var(--space-1);
  }
  
  /* PARTNER WITH US / CALL-TO-ACTION SECTION */
  #partner-with-us {
    margin-bottom: var(--space-4);
    text-align: center;
    color: var(--secondary-100);
    padding: var(--space-3) 0;
  }
  
  #partner-with-us h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-1);
  }
  
  #partner-with-us p {
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    max-width: 800px;
    margin: 0 auto var(--space-2);
  }
  
  #partner-with-us a button {
    padding: var(--space-2) var(--space-3);
    transition: transform 0.2s, filter 0.2s;
  }
  
  #partner-with-us a button:hover {
    transform: scale(1.025);
    filter: brightness(1.1);
  }

  .legacy-image {
    width: 100%;
    height: 100%;
    background: var(--secondary-900);
    border-radius: var(--space-3);
    overflow: hidden;
  }

  .legacy-image img {
    background: var(--secondary-900);
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  /* ===========================
   "Our Track Record" Section
   =========================== */

#our-track-record {
    margin-bottom: var(--space-4);
    text-align: center;
    color: var(--secondary-100);
  }
  
  #our-track-record h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-3);
  }
  
  /* Grid Layout for the track record cards */
  .track-record-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr; /* Single column by default */
    max-width: 1200px;
    margin: 0 auto; /* center the grid horizontally */
  }
  
  /* Increase columns on medium/large screens */
  @media screen and (min-width: 768px) {
    .track-record-grid {
      grid-template-columns: 1fr 1fr; /* two columns on tablets+ */
    }
  }
  @media screen and (min-width: 1200px) {
    .track-record-grid {
      grid-template-columns: 1fr 1fr 1fr; /* three columns on larger screens */
    }
  }
  
  /* Individual Track Record Card */
  .track-record-card {
    background: var(--secondary-900);
    border-radius: var(--space-2) var(--space-2) 0 0;
    padding: var(--space-3);
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    text-align: left;
  }

  .track-record-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--success-500);
    opacity: 0.5;
    border-radius: 0 0 var(--space-1) var(--space-1);
  }
  
  /* Subtle hover effect to add interactivity */
  .track-record-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
  }
  
  /* Icon Container */
  .track-record-icon {
    font-size: var(--font-size-h2);
    color: var(--success-500);
    flex-shrink: 0; /* prevents icon from shrinking when text is long */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Text Container */
  .track-record-text p {
    margin: 0;
    font-size: var(--font-size-p);
    line-height: var(--line-height-p);
    color: var(--secondary-100);
  }
  

  /* Active state for both desktop and mobile nav links */
.desktop-nav-links li a.active,
.mobile-nav-links li a.active {
  color: var(--success-600);
  border-bottom: 2px solid var(--success-600);
}

/* Optional: Add a slight transition for a smooth effect */
.desktop-nav-links li a,
.mobile-nav-links li a {
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

/**************************************
 * LEGACY CAROUSEL (Ken Burns Effect)
 **************************************/
 .legacy-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    /* You may adjust this or set a fixed height if desired */
    min-height: 300px; 
    overflow: hidden;
    border-radius: var(--space-3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Each slide covers the entire container and starts hidden */
  .legacy-slide {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-out; /* Fade effect */
    
    /* 
      We'll use a keyframe to slowly scale the image for 
      a Ken Burns style effect. We'll define it below.
    */
    animation: none;
  }
  
  /* Show the active slide */
  .legacy-slide.active {
    opacity: 1;
    z-index: 1;
    animation: kenBurnsZoom var(--slide-duration, 7s) ease-out forwards;
  }
  
  /* Ken Burns–style zoom keyframes */
  @keyframes kenBurnsZoom {
    from {
      transform: scale(1.0);
    }
    to {
      transform: scale(1.1); /* Zoom in to about 8% bigger */
    }
  }
  

  .disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
  }

  section#placeholder {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: var(--space-4);
  }

  .phone-number {
    color: var(--secondary-100); 
  }

  .phone-number:hover {
    color: white;
  }

#footer-social-icons-wrapper a {
    display: flex;
    align-items: center;
}

.footer-tagline {
    margin: 0.5rem 0 1.5rem;
    color: var(--muted-text);
  }

  #services-header {
    margin-bottom: var(--space-2);
  }

  .ci-ops-content {
    background: var(--secondary-900);
    padding: var(--space-2);
    border-radius: var(--space-3);
    box-shadow: 0 6px 12px var(--secondary-950);
  }

  /* ---------- Leadership Team Grid ---------- */

#leadership-team {
  padding: 4rem 1rem;
  /* background: #fafafa; */
}

#leadership-team h2 {
  text-align: center;
  margin-bottom: var(--space-2);
}

#team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(331px, 1fr));
  gap: var(--space-3);
  padding: 0 var(--space-2);
}

/* ---------- Team Card ---------- */

.team-card {
  background: var(--bg-color);
  border-radius: var(--space-2);
  box-shadow: 0 2px 8px var(--card-shadow);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--secondary-900);
}

.team-card h3 {
  margin: 0;
  color: var(--highlight);
}

.team-card small {
  display: block;
  margin-top: 0.25rem;
  color: var(--secondary-300);
}

.summary {
  margin: 1rem 0;
  /* flex-grow: 1; */
}

/* ---------- Contact Icons ---------- */

.contact-icons {
  margin-bottom: 1rem;
  margin-left: auto;
}
.contact-icons a {
  display: inline-block;
  color: var(--success-500);
  font-size: var(--font-size-p);
}

.contact-icons a:hover {
  color: var(--highlight);
  filter: drop-shadow(0 0 0 var(--highlight));
}

/* ---------- Timeline ---------- */

.timeline {
  position: relative;
  margin: 1rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--highlight);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.25rem;
  padding-left: 1rem;
}

.timeline-item .timeline-dot {
  position: absolute;
  left: -0.65rem;
  top: 0.25rem;
  width: var(--space-1);
  height: var(--space-1);
  background: var(--highlight);
  border-radius: 50%;
}

.timeline-item strong {
  display: block;
  font-weight: 600;
}
.timeline-item em {
  color: var(--secondary-300);
}
.timeline-item small {
  display: block;
  color: var(--secondary-300);
}

/* ---------- Education ---------- */

.education {
  margin-top: 1rem;
}

.education .edu-item {
  margin-bottom: var(--space-1);
}

.education .edu-item strong {
  display: block;
  font-weight: 600;
}

.education .edu-item span {
  color: var(--secondary-300);
}

/* ---------- Responsive Fixes ---------- */

@media (max-width: 600px) {
  #team-grid {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
}


/* ---------- Skill Dot Ratings ---------- */
.skills-list {
  margin: 1.5rem 0;
}
.skill {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.skill-name {
  flex: 1;
  color: var(--text-color);
}
.dots {
  display: flex;
}
.dot {
  width: var(--space-1);
  height: var(--space-1);
  border-radius: 50%;
  background: var(--secondary-500);
  margin-left: 0.3rem;
}
.dot.filled {
  background: var(--highlight);
}