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

:root {
  --deep-navy: #0b1b32;
  --carbon-black: #111111;
  --electric-blue: #0077ff;
  --emerald-green: #00b37e;
  --gold: #ffd166;
  --mist-grey: #f2f4f7;
  --font-sans: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--deep-navy);
  color: var(--mist-grey);
  overflow-x: hidden;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(11, 27, 50, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 183, 126, 0.2);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.15em;
}

.logo-circle {
  width: 32px;
  height: 32px;
  border: 2px solid var(--electric-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--electric-blue);
}

.logo-text {
  color: var(--mist-grey);
}

/* Added hamburger menu styles for mobile */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 6px;
}

.menu-toggle span {
  width: 25px;
  height: 2px;
  background-color: var(--mist-grey);
  transition: all 0.3s ease;
  transform-origin: center;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}

.nav-link {
  text-decoration: none;
  color: var(--mist-grey);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--electric-blue);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--electric-blue);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Added header social links styling */
/* Hide nav-social-links on mobile to move into burger menu */
.nav-social-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-left: 2rem;
}

.nav-social-links a {
  color: var(--electric-blue);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 119, 255, 0.3);
  border-radius: 50%;
}

.nav-social-links a:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: scale(1.15);
}

.nav-social-links svg {
  width: 16px;
  height: 16px;
}

/* Add hero section styles and standardize across all pages */
/* Universal Hero Section Styling */
.hero,
.speaking-hero,
.education-hero,
.about-hero,
.projects-hero,
.advisory-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6rem;
  overflow: hidden;
  padding: 3rem 2rem;
}

.hero-background,
.speaking-background,
.education-background,
.about-background,
.projects-background,
.advisory-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 183, 126, 0.15) 0%, rgba(255, 209, 102, 0.1) 100%);
  z-index: 0;
}

.education-background::before,
.about-background::before,
.projects-background::before,
.advisory-background::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 119, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-content,
.education-hero-content,
.speaking-content,
.projects-hero h1,
.advisory-hero h1 {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: 0 2rem;
}

.hero-heading,
.speaking-heading,
.education-hero-content h1,
.projects-hero h1,
.advisory-hero h1 {
  font-family: var(--font-sans);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--mist-grey);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  animation: fadeInUp 1s ease-out;
}

.hero-subline,
.speaking-subtext,
.education-hero-content p,
.projects-hero p,
.advisory-hero p {
  font-size: 1.25rem;
  color: var(--emerald-green);
  animation: fadeInUp 1.2s ease-out;
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6rem 2rem 2rem;
  margin-top: 3.5rem;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--deep-navy) 0%, #0a2340 100%);
  z-index: 0;
}

#particleCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  gap: 4rem;
}

.hero-text {
  flex: 1;
  animation: fadeInLeft 1s ease-out;
}

.hero-heading {
  font-family: var(--font-sans);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mist-grey);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.hero-subline {
  font-size: 1.25rem;
  color: var(--emerald-green);
  margin-bottom: 2.5rem;
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.btn {
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

.btn-primary {
  background-color: var(--electric-blue);
  color: white;
  box-shadow: 0 0 20px rgba(0, 119, 255, 0.3);
}

.btn-primary:hover {
  background-color: #0056cc;
  box-shadow: 0 0 30px rgba(0, 119, 255, 0.6);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}

.btn-secondary:hover {
  background-color: var(--gold);
  color: var(--deep-navy);
  transform: translateY(-2px);
}

.hero-image {
  flex: 0.8;
  animation: fadeInRight 1s ease-out;
}

.portrait {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  filter: drop-shadow(0 20px 40px rgba(0, 119, 255, 0.2));
}

.scroll-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--emerald-green);
  animation: bounce 2s infinite;
  z-index: 10;
}

/* INTEL Framework Section */
.intel-section {
  position: relative;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, rgba(0, 183, 126, 0.1) 0%, rgba(0, 119, 255, 0.1) 100%);
  overflow: hidden;
}

.intel-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(0, 183, 126, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0, 119, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.intel-title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 4rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  position: relative;
  z-index: 1;
}

.intel-container {
  max-width: 1400px;
  margin: 0 auto;
  /* changed from grid to flexbox for single-line layout */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.intel-node {
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
}

.intel-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--emerald-green);
  border-radius: 50%;
  color: var(--emerald-green);
  transition: all 0.3s ease;
}

.intel-node:hover .intel-icon {
  background-color: rgba(0, 183, 126, 0.1);
  box-shadow: 0 0 20px rgba(0, 183, 126, 0.3);
  transform: scale(1.1);
}

.intel-node h3 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--mist-grey);
  margin-bottom: 0.5rem;
}

.tooltip {
  font-size: 0.875rem;
  color: var(--emerald-green);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.intel-node:hover .tooltip {
  opacity: 1;
}

.intel-connector {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--emerald-green), transparent);
  grid-column: span 1;
}

/* Enhanced footer with more sections and details */
.footer {
  padding: 3rem 2rem;
  border-top: 1px solid rgba(0, 183, 126, 0.2);
  background: linear-gradient(135deg, rgba(11, 27, 50, 0.8) 0%, rgba(10, 35, 64, 0.8) 100%);
  margin-top: 4rem;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

.footer-left h3 {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--electric-blue);
  margin-bottom: 0.5rem;
}

.footer-description {
  font-size: 0.9rem;
  color: var(--mist-grey);
  opacity: 0.8;
  line-height: 1.6;
}

.footer-center {
  display: flex;
  justify-content: center;
}

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

.footer-links div h4 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--mist-grey);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.footer-links a:hover {
  color: var(--emerald-green);
  opacity: 1;
  padding-left: 5px;
}

.footer-right h4 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.social-links {
  display: flex;
  gap: 1.5rem;
}

.social-links a {
  color: var(--electric-blue);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 119, 255, 0.3);
  border-radius: 50%;
}

.social-links a:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: scale(1.15) translateY(-3px);
  box-shadow: 0 0 15px rgba(255, 209, 102, 0.3);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 183, 126, 0.1);
}

.footer-bottom p {
  font-size: 0.85rem;
  color: var(--mist-grey);
  opacity: 0.7;
  margin: 0.5rem 0;
}

.footer-contact a {
  color: var(--electric-blue);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: var(--gold);
}

/* Animations */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* Clients Served Section */
.clients-served {
  position: relative;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, rgba(0, 119, 255, 0.05) 0%, rgba(0, 183, 126, 0.05) 100%);
  overflow: hidden;
}

.clients-title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  letter-spacing: 0.15em;
  color: var(--gold);
}

.clients-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.client-card {
  flex: 0 0 auto;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(0, 183, 126, 0.3);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  animation: slideInUp 0.6s ease-out backwards;
}

.client-card:nth-child(1) {
  animation-delay: 0.1s;
}
.client-card:nth-child(2) {
  animation-delay: 0.2s;
}
.client-card:nth-child(3) {
  animation-delay: 0.3s;
}
.client-card:nth-child(4) {
  animation-delay: 0.4s;
}

.client-card:hover {
  background: rgb(255, 255, 255);
  border-color: var(--emerald-green);
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 183, 126, 0.2);
}

/* New logo image styling */
.client-logo-img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  filter: brightness(1) contrast(1);
  transition: all 0.3s ease;
}

.client-card:hover .client-logo-img {
  filter: brightness(1.1) drop-shadow(0 0 10px rgba(0, 183, 126, 0.3));
}

/* Added social section styling */
.social-section {
  position: relative;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, rgba(0, 183, 126, 0.05) 0%, rgba(0, 119, 255, 0.05) 100%);
  overflow: hidden;
}

.social-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(0, 119, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(0, 183, 126, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.social-title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  position: relative;
  z-index: 1;
}

.social-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Fixed social item styling for even sizing across all social cards */
.social-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem;
  background: rgba(0, 119, 255, 0.1);
  border: 1px solid rgba(0, 183, 126, 0.3);
  border-radius: 1rem;
  color: var(--mist-grey);
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 180px;
  width: 180px;
  height: 240px;
}

.social-item a:hover {
  background: rgba(0, 183, 126, 0.15);
  border-color: var(--emerald-green);
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 183, 126, 0.2);
}

.social-item a svg {
  color: var(--electric-blue);
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.social-item a:hover svg {
  color: var(--gold);
  filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.3));
}

.social-item a h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mist-grey);
  margin: 0;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-item a p {
  font-size: 0.85rem;
  color: var(--emerald-green);
  margin: 0;
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  /* Show hamburger menu on mobile and hide nav links */
  .menu-toggle {
    display: flex;
  }

  /* Hide nav-social-links on desktop view, show in mobile menu */
  .nav-social-links {
    display: none;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(11, 27, 50, 0.98);
    padding: 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, padding 0.3s ease;
    border-bottom: 1px solid rgba(0, 183, 126, 0.2);
    opacity: 0;
    visibility: hidden;
  }

  .nav-links.active {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    padding: 1rem 2rem;
    padding-top: 50px;
  }

  .nav-links li {
    border-bottom: 1px solid rgba(0, 183, 126, 0.1);
    padding: 1rem 0;
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  /* Add social links to mobile burger menu */
  .nav-links.active::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(0, 183, 126, 0.1);
    margin: 1rem 0;
  }

  /* Style social links when displayed in mobile menu */
  .nav-social-links.mobile-visible {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 1rem 2rem;
    border-top: 1px solid rgba(0, 183, 126, 0.1);
    margin-left: 0;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(11, 27, 50, 0.98);
    width: 100%;
    box-sizing: border-box;
  }

  .nav-link {
    font-size: 1rem;
  }

  .nav-link::after {
    display: none;
  }

  .hero-content {
    flex-direction: column;
    gap: 2rem;
  }

  .hero-heading {
    font-size: 2rem;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .intel-container {
    /* The grid-template-columns property is not needed for flexbox layout on mobile */
    /* It's already flex, so this media query adaptation might not be necessary,
       but if the default was grid before this update, then this rule might
       have been intended to change it to a single column grid.
       With the main update to flexbox, it will naturally stack. */
    /* However, to ensure consistency with the spirit of a responsive layout,
       we should remove any remaining grid-specific properties here. */
    grid-template-columns: 1fr; /* This line is now effectively redundant since it's flex */
    gap: 1rem;
  }

  .intel-connector {
    height: 1px;
    display: none;
  }

  /* Footer grid responsive on mobile */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .footer-center {
    justify-content: center;
  }

  .footer-links {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-right {
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  .clients-container {
    flex-direction: row;
    gap: 1.5rem;
  }

  .client-card {
    min-height: 120px;
    padding: 1.5rem;
  }

  .client-logo-img {
    max-height: 80px;
  }

  .social-container {
    flex-direction: row;
    gap: 1rem;
  }

  .social-item a {
    min-width: 140px;
    width: 140px;
    height: 200px;
    padding: 1.5rem 1rem;
  }

  .social-item a h3 {
    font-size: 1rem;
    min-height: 2rem;
  }

  .social-item a p {
    font-size: 0.8rem;
    min-height: 2.4rem;
  }
}