:root {
  /* Website Colors */
  --primary-color: #05BDFA;
  --secondary-color: #000;
  --white-color: #fff;

  /* Text Color */
  --header-color: #fff;
  --secondary-header-color: #242424;
  --text-color: rgba(255, 255, 255, 0.8);
  --secondary-text-color: rgba(0, 0, 0, 0.8);

}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
}
* {
    font-family: "Poppins", sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

header, footer {
  background-color: rgba(5, 189, 250, .04);
}

.nav-link:hover {
  color: var(--primary-color) !important;
}

.nav-link.active {
  color: var(--primary-color) !important;
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  



.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content;
  } 
  


.btn-primary {
    background-color: var(--primary-color);
    border: none;
    padding: 12px 24px;
  }


.header-primary {
    color: var(--header-color);
} 

.header-secondary {
    color: var(--secondary-header-color);
} 

.text-primary {
    color: var(--text-color) !important;  
}

.text-secondary {
    color: var(--secondary-text-color) !important;
}


.hero-section {
    position: relative;
    background-image: url('../assets/hero-bg.webp');
    background-size: cover;
    background-position: center;
    height: 80vh;
    background-repeat: no-repeat;
    overflow: hidden; /* optional but often fixes small gaps */
    padding: 100px 0;
  }
  
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0; /* shorthand for top:0; left:0; width:100%; height:100% */
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.53) 46.42%,
      #000 100%
    );
    z-index: 1;
}
  
.hero-section > * {
position: relative;
z-index: 2; /* keeps content above overlay */
}
  

.ls-tight {
    letter-spacing: -1px;
  }

.header-text {
    max-width: 800px;
}




/* Auto Scrolling Banner */

.auto-scrolling-banner {
    background-color: var(--secondary-color);
    overflow: hidden;
    position: relative;

}

.word-container {
    display: flex;
    width: fit-content;
    animation: scroll 20s linear infinite;
}


.word-item {
    width: fit-content;
    display: inline-block;
    padding: 0 40px;
    white-space: nowrap;
}

.word-item:nth-child(odd) {
    color: var(--white-color);
    font-size: 48px;
    font-weight: 700;

}

.word-item:nth-child(even) {
    -webkit-text-stroke-width: 2px; /* Adjust the width of the outline */
    -webkit-text-stroke-color: white; /* Set the color of the outline */
    -webkit-text-fill-color: black; 
    font-size: 48px;
    font-weight: 700;

}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}




.section-padding {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* Secondary section */

.secondary-section div h2 {
    max-width: 480px;

}

.secondary-section div p {
    max-width: 640px;

}

.secondary-section img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: center center;
}

.cta-section {
    position: relative;
    background: url('../assets/cta-bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden; 
}

.cta-section::before {
    content: "";
    position: absolute;
    inset: 0; /* shorthand for top:0; left:0; width:100%; height:100% */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -16.49%, rgba(0, 0, 0, 0.80) 48.17%);
    z-index: 1;
}

.cta-section > * {
    position: relative;
    z-index: 2; /* keeps content above overlay */
    }

.cta-section div p {
    max-width: 480px;
}

footer {
    padding: 64px 0 32px 0;
}

hr {
    color: rgba(0, 0, 0, 0.2);
    opacity: 1;
    height: 2px;
    width: 100%;
}

footer div p {
    max-width: 560px;

}


.about-hero-section {
  background: url('../assets/about-hero-section-bg.webp');
} 

.contact-section {
  background: url('../assets/contact-hero-section-bg.webp');
}


.about-hero-section, .contact-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50vh;
    overflow: hidden;
    padding: 100px;
    border-radius: 8px;
    z-index: -1;
    
}


.about-hero-section::before, .contact-section::before {
    content:"";
    inset: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.90);
    z-index: 1;
}

.contact-section::before {
  background-color: rgba(0, 0, 0, 0.65);
}


.about-hero-section > *, .contact-section > * {
    position: relative;
    z-index: 2;
}

.core-divisions-section {
  position: relative;
  z-index: 33;
  background-color: var(--header-color);
}

.core-divisions-section div p {
    max-width: 720px;
}

.core-divisions-card {
  padding: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0, 192, 255, 0.15);
  background: #F5FCFF;
   
}

.core-divisions-card h3 {
    font-size: 24px;   
}

.our-values-section {
  border-radius: 8px;
}

.our-values-section {
  padding: 64px;
}

.our-values-card {
  padding: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0, 192, 255, .40);
  
}

.our-values-card:hover {
  background-color: rgba(0, 192, 255, .40);
  transition: background-color .5s ease;
  cursor: pointer;
}

div .core-divisions-card:hover {
 background-color: rgba(0, 191, 255, 0.80);
 transition: background-color 1s ease;
 cursor: pointer;
}


.contact-section .contact-info a, .contact-section .contact-info address {
  color: var(--white-color); 
  display: inline-block;
  margin: 0;
}

@media (max-width: 576px){
  p {
    font-size: 14px;
  }

  .word-item {
      font-size: 32px !important;
      padding: 0 24px;
  }
  .section-padding {
    padding: 64px 12px;
  }

  .secondary-section-bg {
      height: 320px !important;
  }

  .cta-section > div h2 {
    font-size: 24px;
  }

  .about-hero-section, .contact-section {
    padding: 100px 20px;
  }

  .core-divisions-card h3 {
    font-size: 20px;   
  }

  .mission-statement-section > h2 {
    font-size: 24px;
  }

  .our-values-section {
    padding: 64px 32px;
  }

  .our-values-card h3 {
    font-size: 20px ;
  }

  .contact-section .contact-info {
    font-size: 14px;
  }

}