@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans&display=swap');

body {
  font-family: 'Rethink Sans', sans-serif;
  line-height: 1.6;
  color: #030B1D;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.hero-section {
  position: relative;
  background: url('../images/14571534_5479108.jpg') no-repeat center center/cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 120px;
  /* Adjust this for spacing */
  color: white;
  overflow: hidden;
  padding-top: 0;
}

/* 2) Modern browsers: WebP via image-set */
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .hero-section {
    /* keep the same positioning/size, just override the image */
    background-image: image-set(
      url('../images/14571534_5479108.webp') type('image/webp') 1x,
      url('../images/14571534_5479108.jpg')  type('image/jpeg') 1x
    );
  }
}

/* 3) Extra coverage for older Safari versions */
@supports (background-image: -webkit-image-set(url("x.webp") 1x)) {
  .hero-section {
    background-image: -webkit-image-set(
      url('../images/14571534_5479108.webp') type('image/webp') 1x,
      url('../images/14571534_5479108.jpg')  type('image/jpeg') 1x
    );
  }
}

.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

header.navbar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 60px;
}


.logo {
  font-size: 40px;
  font-weight: inherit;
}

.logo .blue {
  color: #0196D2;
  font-family: 'Mistral', cursive;
}

.logo .yellow {
  color: #FFBA08;
  font-family: 'Mistral', cursive;
}

/* hide hamburger on screens wider than 768 px */
.hamburger {
  display: none;
}

.nav-links {
  display: none;
}

.nav-links a {
  position: relative;
  margin-left: 20px;
  text-decoration: none;
  font-weight: 500;
  color: #fff;
  padding: 8px 4px;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: #FFBA08;
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a:hover {
  color: #FFBA08;
}

.nav-links .active {
  font-weight: 700;
  color: #FFBA08;
}

.nav-links .active::after {
  width: 100%;
}

@media (max-width:768px) {
  header.navbar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 20px;
  }

  /* -------------------------------------------------
   Hamburger icon
   ------------------------------------------------*/
  .hamburger {
    /* OUTSIDE any media query (desktop hidden) */
    display: flex;
    background: none;
    border: 0;
    padding: 0;
    /* remove default button padding */
    cursor: pointer;
    z-index: 10001;

    /* give it a fixed frame so the bars can lay out */
    width: 28px;
    height: 22px;

    /* centres the stack nicely */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  /* the three bars */
  .hamburger .bar {
    width: 100%;
    /* exactly 28 px now */
    height: 3px;
    background: #fff;
    border-radius: 2px;
    /* little polish */
    transition: transform .3s ease, opacity .3s ease;
  }

  /* icon morphs into an X */
  .hamburger.open .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .hamburger.open .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.open .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #030B1D;
    /* keep your dark bg */
    display: none;
    /* hidden by default */
    flex-direction: column;
    /* stack items vertically */
    align-items: center;
    /* center links */
    padding: 2rem 0;
    /* generous top/bottom padding */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  /* when JS toggles .open */
  .nav-links.open {
    display: flex;
    animation: fadeInDown 0.4s ease-out forwards;
  }

  /* kill any list‐item borders/underlines */
  .nav-links li {
    margin: 0.5rem 0;
    /* spacing between items */
    list-style: none;
    border: none;
  }

  .nav-links a {
    color: #fff;
    text-decoration: none;
    /* NO underlines */
    font-size: 1.25rem;
    font-weight: 500;
    margin-left: 0px;
    /* reset left margin */
    transition: color 0.25s ease;
  }

  .nav-links a:hover {
    color: #f39c12;
    /* your accent color on hover */
  }

}

/* ------------------------------------------------------------
   ANIMATION KEYFRAMES
   ------------------------------------------------------------ */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 769px) {
  .hamburger {
    display: none;
  }

  .nav-links {
    display: flex;
    align-items: center;
    position: static;
    /* or whatever you need */
    background: none;
    width: auto;
    flex-direction: row;
  }
}

.impact-section {
  width: 100%;
  background-color: #fff;
  color: #030B1D;
  padding: 80px 60px;
}

.impact-section h2 {
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 40px;
}

.impact-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.impact-item {
  flex: 1 1 180px;
  min-width: 150px;
}

.impact-number {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 8px;
}

.impact-label {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}


.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 60px;
  max-width: 800px;
  margin-bottom: 200px;
  margin-top: 110px;
}

.hero-content h1 {
  font-size: 55px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.hero-content p {
  margin-top: 20px;
  font-size: 20px;
  color: white;
  line-height: 1.5;
  text-align: justify;
}

.section-heading {
  font-size: 32px;
  font-weight: 700;
  background-color: #FFBA08;
  padding: 0 12px;
  border-radius: 10px;
}

.About-us-section {
  padding: 100px 60px;
  background-color: #fefefe;
}

.About-us-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
  margin-bottom: 25px;
}

.About-us-header p {
  font-size: 16px;
  color: #030B1D;
  max-width: 400px;
}

.About-us-columns {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  width: 100%;
}

.Values-section {
  padding: 100px 60px;
  background-color: #fefefe;
}

.Values-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
  margin-bottom: 25px;
}

.Values-header p {
  font-size: 16px;
  color: #030B1D;
  max-width: 400px;
}

.Values-columns {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  width: 100%;
}

.industry-cards {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.industry-card {
  flex: 1;
  min-width: 300px;
  background-color: #F8FAFD;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #00297b;
  box-shadow: 0 4.5px 0 #030B1D;
  transition: 
    transform 0.4s ease, 
    box-shadow 0.4s ease, 
    background 0.6s ease, 
    color 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Gradient background on hover */
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #030B1D;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

.industry-card:hover::before {
  opacity: 1;
}

/* Bring text above gradient */
.industry-card * {
  position: relative;
  z-index: 1;
}

/* Hover effect */
.industry-card:hover {
  transform: translateY(-8px) scale(1.03) rotate3d(1, 1, 0, 2deg);
  box-shadow: 0 12px 24px rgba(0, 41, 123, 0.3);
  color: white;
  border-color: transparent;
}

.industry-card:hover h3,
.industry-card:hover p {
  color: #fff;
  transition: color 0.4s ease;
}

/* Optional glowing border */
.industry-card:hover {
  box-shadow: 0 0 15px rgba(0, 41, 123, 0.6),
              0 0 30px rgba(255, 186, 8, 0.6);
}

@media (max-width: 992px) {
  .industry-card {
    flex: 1 1 calc(50% - 40px);
    /* two-up, keep the 40-px gap */
    min-width: 260px;
    /* a little smaller but still roomy */
  }
}


.industry-card h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 5px;
}

.industry-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.industry-card p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.industry-card hr {
  border: none;
  border-top: 1px solid #030B1D;
  margin: 12px 0 16px;
}

/* @media (min-width: 992px) {
  .industry-card {
    flex: 0 0 calc(47% - 40px);
  }} */

.column {
  flex: 1;
  min-width: 280px;
  font-size: 18px;
  color: #030B1D;
  line-height: 1.7;
  text-align: justify;
}


/* Card hover effect -------------------------------------*/
.service-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  transition: box-shadow 0.3s ease,
    background 0.3s ease;
  /* added bg transition */
}

/* Fade the text colour, too */
.service-title,
.service-number,
.service-description {
  transition: color .5s ease;
  /* <— new line */
}


.service-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: var(--accent);
  /* new accent background */
}

.service-item:hover .service-title,
.service-item:hover .service-number,
.service-item:hover .service-description {
  color: #fff;
  /* text flips to white */
}


/* Override specifically for every 3rd card */
.services-grid .service-item:nth-child(3n+2):hover .service-title,
.services-grid .service-item:nth-child(3n+2):hover .service-number,
.services-grid .service-item:nth-child(3n+2):hover .service-description {
  color: #030B1D; /* dark text */
}

/* Assign an accent colour to each card ------------------*/
.services-grid .service-item:nth-child(3n + 1) {
  --accent: #030B1D;
}

.services-grid .service-item:nth-child(3n + 2) {
  --accent: #FFBA08;
}

.services-grid .service-item:nth-child(3n) {
  --accent: #00297b ;
}

/* Normal (non-hover) title colour -----------------------*/
.service-title {
  color: var(--accent, currentColor);
}


.services-section {
  background-color: #F8FAFD;
  padding: 100px 60px;
  text-align: left;
}

.section-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 60px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: left;
}

.service-item {
  background-color: #fff;
  padding: 40px 20px 20px;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}

.service-number {
  color: #030B1D;
  font-size: 14px;
  margin-bottom: 10px;
}

.service-title {
  font-size: 25px;
  line-height: 1.3;
  margin: 0 0 20px;
  font-weight: 550;
}

.service-description {
  font-size: 16px;
  color: #444;
  line-height: 1.6;
  text-align: justify;
}

@media (max-width: 768px) {

  /* When a .service-item gets the .in-view class… */
  .services-grid .service-item.in-view {
    background: var(--accent);
    /* use the same accent var */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* same as hover */
  }

  /* …and flip the text to white */
  .services-grid .service-item.in-view .service-title,
  .services-grid .service-item.in-view .service-number,
  .services-grid .service-item.in-view .service-description {
    color: #fff;
  }
}



/* Medium screens – 2 per row */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens – stack vertically */
@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

strong {
  font-weight: 600;
}

.join-team-section {
  background-color: #FFBA08;
  padding: 0;
}

.join-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  min-height: 500px;
}

.join-team-text {
  padding: 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #FFBA08;
}

.join-team-text h2 span {
  background-color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 24px;
  font-weight: bold;
  color: #030B1D;
}

.highlighted-text {
  background: white;
  padding: 0 12px;
  border-radius: 6px;
  font-weight: 700;
  display: inline;
  line-height: 1.5;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}



.join-team-text p {
  font-size: 16px;
  text-align: justify;
  line-height: 1.6;
  margin-bottom: 30px;
  color: #000;
}

.join-button {
  display: inline-block;
  padding: 12px 20px;
  background-color: #fff;
  color: #000;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease;
  width: fit-content;
}

.join-button:hover {
  background-color: #e6e6e6;
}

.join-team-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.join-team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .join-team-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .join-team-image {
    height: 300px;
  }

  .join-team-text {
    padding: 40px 20px;
    text-align: left;
  }

  .join-team-text h2 {
    font-size: 28px;
  }
}

/* Footer Section */
.footer {
  background-color: #030B1D;
  color: white;
  padding: 60px 60px;
  font-size: 14px;
}

.footer .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* --- TOP ROW --- */
.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand h3 {
  font-size: 18px;
  margin: 0;
  color: white;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-icons {
  display: flex;
  gap: 12px;
}

.footer-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.footer-icons a:hover {
  background-color: #FFBA08;
}

.footer-icons img {
  width: 20px;
  height: 20px;
}


/* --- MAIN SECTION --- */
.footer-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.footer-contact {
  flex: 1;
  min-width: 220px;
}

.contact-label {
  background-color: #FFBA08;
  color: black;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-weight: bold;
}

.footer-newsletter {
  background-color: white;
  border-radius: 12px;
  padding: 52px 20px;
  /* smaller top/bottom for tighter vertical centering */
  max-width: 550px;
  flex: 1;
  flex-direction: column;
  /* stack children vertically */
  align-items: flex-start;
  display: flex;

  /* ✅ vertical centering of inner form */
}

.newsletter-form {
  display: flex;
  align-items: center;
  /* ✅ ensure children are vertically centered */
  width: 100%;
  gap: 10px;
}

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 5px 16px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  height: 48px;
  /* ✅ forces same height as button */
}

.newsletter-form button {
  background-color: #FFBA08;
  color: #030B1D;
  font-weight: normal;
  padding: 0px 16px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  height: 59.6px;
  /* ✅ match input height */
}


/* --- BOTTOM BAR --- */
.footer-bottom {
  border-top: 1px solid #555;
  padding-top: 20px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.footer-bottom a {
  color: #fff;
  text-decoration: underline;
}

/* 1) Remove default link color & underline */
.phone-link {
  color: inherit;
  /* inherit text color from parent (or set your own) */
  text-decoration: none;
  /* remove underline */
}

/* 2) (Optional) Add a custom hover effect */
.phone-link:hover,
.phone-link:focus {
  color: #FFBA08;
  /* pick any hover color you like */
  text-decoration: underline;
}

@media (max-width: 768px) {

  .section,
  .hero-content,
  .impact-section,
  .About-us-section,
  .Values-section,
  .services-section,
  .footer,
  .join-team-text {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .nav-links a:first-child {
    margin-left: 0;
  }
}


@media (max-width: 768px) {
  .section-title {
    font-size: 28px;
  }
}




@media (max-width: 1024px) {
  .hero-content {
    padding: 0 40px;
    margin-bottom: 150px;
  }

  .impact-section {
    padding: 60px 40px;
  }

  .About-us-section {
    padding: 80px 40px;
  }
}

@media (max-width: 768px) {


  .hero-content h1 {
    font-size: 38px;
  }

  .hero-content {
    margin-bottom: 100px;
    margin-top: 70px;
    padding: 0 30px;
  }

  .impact-section {
    padding: 60px 30px;
  }

  .impact-grid {
    flex-direction: column;
    gap: 30px;
  }

  .About-us-section {
    padding: 60px 30px;
  }

  .About-us-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .About-us-header p {
    max-width: 100%;
  }

  .About-us-columns {
    flex-direction: column;
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .impact-number {
    font-size: 36px;
  }

  .impact-label {
    font-size: 14px;
  }

  .About-us-section {
    padding: 50px 20px;
  }

  .About-us-header p,
  .Values-header p {
    display: none;
  }

  .About-us-header p,
  .column {
    font-size: 16px;
  }

  .section-heading {
    font-size: 24px;
  }

  .section-heading p {
    display: none;
  }
}

/* ===== Mobile fixes for footer newsletter ===== */
@media (max-width: 480px) {

  /* 1) Cap width & center the white box */
  .footer-newsletter {
    width: 100%;
    max-width: 450px;
    margin: 20px auto 0;
    /* top spacing + auto left/right to center */
    padding: 16px;
    /* ensure consistent internal padding */
  }

  /* 2) Keep the form inline but tighten spacing */
  .newsletter-form {
    display: flex;
    gap: 8px;
  }

  .newsletter-form input[type="email"] {

    padding: 5px 5px;
    /* adjust padding for smaller screens */

  }

  /* 3) Match input & button heights for perfect alignment */
  .newsletter-form input[type="email"],
  .newsletter-form button {
    height: 48px;
    box-sizing: border-box;
  }


}

/* ===== Scroll-to-Top with Progress ===== */
html {
  scroll-behavior: smooth;
  /* graceful smooth scroll */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.scroll-top {
  --size: 54px;
  --ring: #FFBA08;
  /* progress color */
  --track: #e9eef7;
  /* track color */
  --icon: #030B1D;
  /* chevron color */
  --bg: #ffffff;
  /* inner disc */
  --shadow: 0 8px 24px rgba(0, 0, 0, .18);

  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: var(--size);
  height: var(--size);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--icon);
  background:
    conic-gradient(var(--ring) var(--p, 0%), var(--track) 0)
    /* progress ring */
  ;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;

  /* start hidden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.96);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 1000;
}

/* inner disc */
.scroll-top::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg);
}

/* chevron sits above inner disc */
.scroll-top__icon {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* shown state */
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* focus/hover polish */
.scroll-top:focus-visible,
.scroll-top:hover {
  outline: none;
  filter: brightness(1.02);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

/* High-contrast optional tweak */
@media (prefers-contrast: more) {
  .scroll-top {
    --track: #d7ddea;
    --shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 8px 24px rgba(0, 0, 0, .2);
  }
}

/* Newsletter status messages (slim + subtle) */
#newsletterStatus {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: left;
}

/* Variants — smaller, with left border accent */
#newsletterStatus.success {
  display: block;
  color: #137333;
  /* green text */
  border-left: 3px solid #137333;
  padding-left: 6px;
  opacity: 1;
}

#newsletterStatus.error {
  display: block;
  color: #b00020;
  /* red text */
  border-left: 3px solid #b00020;
  padding-left: 6px;
  opacity: 1;
}

#newsletterStatus.info {
  display: block;
  color: #174ea6;
  /* blue text */
  border-left: 3px solid #174ea6;
  padding-left: 6px;
  opacity: 1;
}