/* Reset and Base Styles */







* {







  margin: 0;







  padding: 0;







  box-sizing: border-box;







}















html {







  scroll-behavior: smooth;







}















body {







  font-family:







    "Inter",







    -apple-system,







    BlinkMacSystemFont,







    "Segoe UI",







    Roboto,







    sans-serif;







  line-height: 1.6;







  color: #ffffff;







  background-color: #000000;







  overflow-x: hidden;







}















/* Color Variables */







:root {







  --laeca-navy: #1a40ff;







  --laeca-accent: #1a40ff;







  --text-white: #ffffff;







  --text-gray: #666666;







  --text-light: #cccccc;







}















/* Navigation */







.navbar {







  position: fixed;







  top: 0;







  left: 0;







  right: 0;







  z-index: 1000;







  transition: all 0.4s ease-out;







  background: transparent;







  backdrop-filter: none;







  -webkit-backdrop-filter: none;







  border-bottom: 1px solid transparent;







}















.navbar.scrolled {







  background: rgba(255, 255, 255, 0.45);







  backdrop-filter: blur(18px);







  -webkit-backdrop-filter: blur(18px);







  border-bottom: 1px solid rgba(26, 64, 255, 0.08);







}















.navbar.hovered {







  background: rgba(255, 255, 255, 0.45);







  backdrop-filter: blur(18px);







  -webkit-backdrop-filter: blur(18px);







  border-bottom: 1px solid rgba(26, 64, 255, 0.08);







}















.nav-container {







  max-width: 1400px;







  margin: 0 auto;







  padding: 0 2rem;







  display: flex;







  align-items: center;







  justify-content: space-between;







  height: 80px;







  position: relative;







}















.nav-logo {







  position: relative;







  display: flex;







  align-items: center;







  height: 48px;







  width: 150px;







}















.nav-logo img {







  height: 48px;







  width: auto;







  position: absolute;







  transition: opacity 0.4s ease-out, filter 0.4s ease-out;







}















.nav-logo .logo-white {







  opacity: 1;







  filter: brightness(0) invert(1);







}















.nav-logo .logo-blue {







  opacity: 0;







  filter: brightness(0) invert(27%) sepia(91%) saturate(6694%)







    hue-rotate(220deg) brightness(101%) contrast(106%);







}















.navbar.scrolled .nav-logo .logo-white,







.navbar.hovered .nav-logo .logo-white {







  opacity: 0;







}















.navbar.scrolled .nav-logo .logo-blue,







.navbar.hovered .nav-logo .logo-blue {







  opacity: 1;







}















.nav-links {







  display: flex;







  align-items: center;







  gap: 2rem;







  margin-left: auto;







}















.nav-link {







  color: rgba(255, 255, 255, 0.9);







  text-decoration: none;







  font-weight: 500;







  font-size: 0.9rem;







  text-transform: uppercase;







  letter-spacing: 0.05em;







  transition: color 0.3s ease;







}















.nav-link:hover {







  color: #ffffff;







}















.navbar.scrolled .nav-link,







.navbar.hovered .nav-link {







  color: #1a40ff;







}















.navbar.scrolled .nav-link:hover,







.navbar.hovered .nav-link:hover {







  color: #4d6aff;







}















.contact-btn {







  background: transparent;







  color: #ffffff !important;







  padding: 0.5rem 1.5rem;







  border-radius: 0;







  border: 1px solid rgba(255, 255, 255, 0.8);







  transition: all 0.3s ease;







}















.contact-btn:hover {







  background: #1a40ff;







  color: white !important;







  border-color: #1a40ff;







}















.navbar.scrolled .contact-btn,







.navbar.hovered .contact-btn {







  color: #1a40ff !important;







  border-color: #1a40ff;







  background: transparent;







}















.navbar.scrolled .contact-btn:hover,







.navbar.hovered .contact-btn:hover {







  background: #1a40ff;







  color: #ffffff !important;







  border-color: #1a40ff;







}















.language-switcher {







  display: flex;







  gap: 0.5rem;







  position: absolute;







  left: 40%;







  transform: translateX(-50%);







}















.lang-btn {







  padding: 0.25rem 0.75rem;







  border: 1px solid rgba(26, 64, 255, 0.2);







  background: transparent;







  color: var(--laeca-navy);







  border-radius: 4px;







  cursor: pointer;







  font-size: 0.8rem;







  font-weight: 500;







  transition: all 0.3s ease;







}















.lang-btn.active {







  background: var(--laeca-navy);







  color: white;







}















.lang-btn:hover {







  background: var(--laeca-navy);







  color: white;







}















.navbar.scrolled .lang-btn,







.navbar.hovered .lang-btn {







  border-color: rgba(26, 64, 255, 0.3);







}















.mobile-menu-btn {







  display: none;







  background: none;







  border: none;







  color: #ffffff;







  font-size: 1.5rem;







  cursor: pointer;







  transition: color 0.4s ease-out;







}















.navbar.scrolled .mobile-menu-btn,







.navbar.hovered .mobile-menu-btn {







  color: #1a40ff;







}















.mobile-menu {







  display: none;







  position: absolute;







  top: 100%;







  left: 0;







  right: 0;







  background: rgba(7, 25, 60, 0.35);







  backdrop-filter: blur(18px);







  -webkit-backdrop-filter: blur(18px);







  border-top: 1px solid rgba(255, 255, 255, 0.08);







  padding: 1rem 0;







  transition: all 0.4s ease-out;







}















.navbar.scrolled .mobile-menu,







.navbar.hovered .mobile-menu {







  background: rgba(255, 255, 255, 0.55);







  border-top: 1px solid rgba(26, 64, 255, 0.08);







}















.mobile-link {







  display: block;







  padding: 0.75rem 2rem;







  color: rgba(255, 255, 255, 0.9);







  text-decoration: none;







  font-weight: 500;







  text-transform: uppercase;







  font-size: 0.9rem;







  letter-spacing: 0.05em;







  transition: background 0.3s ease, color 0.3s ease;







}















.mobile-link:hover {







  background: rgba(26, 64, 255, 0.1);







}















.navbar.scrolled .mobile-link,







.navbar.hovered .mobile-link {







  color: #1a40ff;







}















.navbar.scrolled .mobile-link.contact-btn,







.navbar.hovered .mobile-link.contact-btn {







  color: #1a40ff;







}















/* Hero Section */















.hero-wrapper {







  position: relative;







  height: 160vh;







  background: #0b1a2b; /* dark navy */







}







.hero-wrapper-short {







  height: 170vh;







}















.hero-sticky {







  position: sticky;







  top: 0;







  height: 100vh;







  display: flex;







  align-items: center;







  overflow: hidden;







  will-change: transform;







  padding-top: 80px;







}















/* Background layers */







.hero-bg-container {







  position: absolute;







  inset: 0;







  width: 100%;







  height: 100%;







  z-index: 1;







}















.hero-image-layer {







  position: absolute;







  inset: 0;







  width: 100%;







  height: 100%;







  will-change: opacity, transform;







}















.hero-image {







  width: 100%;







  height: 100%;







  object-fit: cover;







  object-position: center;







}















.hero-video {







  position: absolute;







  inset: 0;







  width: 100%;







  height: 100%;







  object-fit: cover;







  object-position: center;







  opacity: 0;







  will-change: opacity, transform;







}















/* Overlays */







.hero-overlay {







  position: absolute;







  inset: 0;







  pointer-events: none;







}















.overlay-gradient-r {

  background: linear-gradient(to right, rgba(11, 26, 43, 0.78) 0%, rgba(11, 26, 43, 0.45) 50%, rgba(11, 26, 43, 0.2) 100%);

}

.overlay-gradient-t {

  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);

}

.overlay-accent {

  background: rgba(26, 64, 255, 0.04);

}















/* Technical grid pattern */







.hero-grid-pattern {







  position: absolute;







  inset: 0;







  opacity: 0.04;







  pointer-events: none;







  z-index: 2;







  background-image: 







    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(26, 64, 255, 0.2) 60px, rgba(26, 64, 255, 0.2) 61px), 







    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(26, 64, 255, 0.2) 60px, rgba(26, 64, 255, 0.2) 61px);







}















/* Content */







.hero-content {







  position: relative;







  z-index: 10;







  width: 100%;







  padding: 0 1.5rem;







  will-change: opacity, transform;







}















.hero-content-inner {







  position: relative;







  max-width: 48rem;







  margin-left: 5%;







  padding-left: 1.25rem;







}















@media (min-width: 768px) {







  .hero-content {







    padding: 0 2.5rem;







  }







  .hero-content-inner {







    padding-left: 1.75rem;







  }







}















@media (min-width: 1024px) {







  .hero-content {







    padding: 0 4rem;







  }







}















/* Vertical line */







.hero-accent-line {







  position: absolute;







  left: 0;







  top: 4px;







  bottom: 4px;







  width: 3px;







  background: var(--laeca-accent);







  border-radius: 9999px;







}















.hero-subtitle {







  color: rgba(255, 255, 255, 0.6);







  font-size: 0.75rem;







  font-weight: 600;







  letter-spacing: 0.25em;







  text-transform: uppercase;







  margin-bottom: 1.25rem;







}















@media (min-width: 768px) {







  .hero-subtitle {







    font-size: 0.875rem;







  }







}















.laeca-headline-text {







  font-family: "Barlow Condensed", "Inter", sans-serif;







  color: #ffffff;







  font-size: 2.25rem;







  font-weight: 800;







  line-height: 1.08;







  letter-spacing: -0.02em;







  margin-bottom: 1.25rem;







}















.block {







  display: block;







}















.mt-1 {







  margin-top: 0.25rem;







}















@media (min-width: 640px) {







  .laeca-headline-text {







    font-size: 3rem;







  }







}















@media (min-width: 768px) {







  .laeca-headline-text {







    font-size: 3.25rem;







    margin-bottom: 1.5rem;







  }







}















@media (min-width: 1024px) {







  .laeca-headline-text {







    font-size: 3.5rem;







  }







}















@media (min-width: 1280px) {







  .laeca-headline-text {







    font-size: 3.75rem;







  }







}















.laeca-description {







  color: rgba(255, 255, 255, 0.8);







  font-size: 1rem;







  line-height: 1.625;







  max-width: 32rem;







  margin-bottom: 2rem;







}















@media (min-width: 768px) {







  .laeca-description {







    font-size: 1.125rem;







  }







}















.laeca-btn {







  display: inline-flex;







  align-items: center;







  gap: 0.75rem;







  background: var(--laeca-accent);







  color: #ffffff;







  text-decoration: none;







  padding: 0.875rem 2rem;







  border-radius: 2px;







  font-weight: 700;







  font-size: 0.875rem;







  text-transform: uppercase;







  letter-spacing: 0.05em;







  border: 1px solid transparent;







  transition: all 0.3s ease;







  white-space: nowrap;







}















@media (min-width: 768px) {







  .laeca-btn {







    font-size: 1rem;







  }







}















.laeca-btn:hover {







  background: #ffffff;







  color: #0b1a2b;







  border-color: rgba(26, 64, 255, 0.2);







}















.btn-arrow-container {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  width: 1.25rem;







  height: 1.25rem;







  transition: transform 0.3s ease;







}















.laeca-btn:hover .btn-arrow-container {







  transform: translateX(4px);







}















@media (max-width: 768px) {







  .hero-content-inner {







    margin-left: 2%;







  }







}















/* About Section */







.about-section {







  position: relative;







  min-height: 600px;







  display: flex;







  align-items: center;







  background: #000;







}







@media (min-width: 768px) {







  .about-section {







    min-height: 700px;







  }







}







@media (min-width: 1024px) {







  .about-section {







    min-height: 800px;







  }







}















.about-background {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  overflow: hidden;







}















.about-background img {







  width: 100%;







  height: 100%;







  object-fit: cover;







  animation: ken-burns 25s ease-out infinite;







}















@keyframes ken-burns {







  0% {







    transform: scale(1.15);







  }







  100% {







    transform: scale(1);







  }







}















.about-overlay {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  background: rgba(0, 0, 0, 0.7);







}















.about-content {







  position: relative;







  z-index: 2;







  max-width: 700px;







  margin: 0;







  padding: 5rem 1.5rem;







}







@media (min-width: 768px) {







  .about-content {







    padding: 7rem 2.5rem;







  }







}







@media (min-width: 1024px) {







  .about-content {







    padding: 8rem 4rem;







  }







}















.about-title {







  font-family: "Barlow Condensed", sans-serif;







  font-size: 2.25rem;







  font-weight: 800;







  color: #4b5563;







  text-transform: uppercase;







  margin-bottom: 1.25rem;







  line-height: 1.08;







  letter-spacing: -0.02em;







  color: #ffffff;







}







@media (min-width: 640px) {







  .about-title {







    font-size: 3rem;







  }







}







@media (min-width: 768px) {







  .about-title {







    font-size: 3.25rem;







    margin-bottom: 1.5rem;







  }







}







@media (min-width: 1024px) {







  .about-title {







    font-size: 3.5rem;







  }







}







@media (min-width: 1280px) {







  .about-title {







    font-size: 3.75rem;







  }







}















.about-text {







  color: rgba(255, 255, 255, 0.85);







  font-size: 1rem;







  line-height: 1.625;







  margin-bottom: 1rem;







  max-width: 560px;







  margin-left: auto;







  margin-right: auto;







}







@media (min-width: 768px) {







  .about-text {







    font-size: 1.125rem;







    margin-bottom: 1.25rem;







  }







}







@media (min-width: 1024px) {







  .about-text {







    font-size: 1.25rem;







  }







}















.about-text-secondary {







  color: rgba(255, 255, 255, 0.55);







  font-size: 0.875rem;







  line-height: 1.625;







  margin-bottom: 2rem;







  max-width: 560px;







  margin-left: auto;







  margin-right: auto;







}







@media (min-width: 768px) {







  .about-text-secondary {







    font-size: 1rem;







    margin-bottom: 2.5rem;







  }







}















.about-divider {







  width: 3rem;







  height: 2px;







  background-color: var(--laeca-accent);







  border-radius: 9999px;







  margin-bottom: 2rem;







}







@media (min-width: 768px) {







  .about-divider {







    margin-bottom: 2.5rem;







  }







}















.differentiators-title {







  color: rgba(255, 255, 255, 0.4);







  font-size: 0.625rem;







  font-weight: 700;







  text-transform: uppercase;







  letter-spacing: 0.25em;







  margin-bottom: 1rem;







}







@media (min-width: 768px) {







  .differentiators-title {







    font-size: 0.75rem;







    margin-bottom: 1.25rem;







  }







}















.differentiators-list {







  list-style: none;







  margin-bottom: 2.5rem;







}







@media (min-width: 768px) {







  .differentiators-list {







    margin-bottom: 3rem;







  }







}















.differentiators-list li {







  display: flex;







  align-items: flex-start;







  gap: 0.75rem;







  color: rgba(255, 255, 255, 0.8);







  font-size: 0.875rem;







  margin-bottom: 0.75rem;







}







@media (min-width: 768px) {







  .differentiators-list li {







    gap: 1rem;







    font-size: 1rem;







    margin-bottom: 1rem;







  }







}















.differentiators-list i {







  color: var(--laeca-accent);







  font-size: 1.125rem;







  margin-top: 0.125rem;







  flex-shrink: 0;







}















.about-cta {







  display: inline-flex;







  align-items: center;







  gap: 0.625rem;







  border: 2px solid rgba(255, 255, 255, 0.6);







  color: white;







  text-decoration: none;







  padding: 0.875rem 1.75rem;







  border-radius: 0.125rem;







  font-weight: 700;







  font-size: 0.875rem;







  transition: all 0.3s ease;







  white-space: nowrap;







}















.about-cta:hover {







  background: var(--laeca-accent);







  border-color: var(--laeca-accent);







}















.about-cta i {







  transition: transform 0.3s ease;







}















.about-cta:hover i {







  transform: translateX(4px);







}















.about-cta-icon {







  width: 1rem;







  height: 1rem;







  display: flex;







  align-items: center;







  justify-content: center;







  transition: transform 0.3s ease;







}















.about-cta:hover .about-cta-icon {







  transform: translateX(0.25rem);







}















/* Trajectory Section */







.trajectory-wrapper {







  position: relative;







  height: 240vh;







}















.trajectory-section {







  position: sticky;







  top: 4rem;







  height: calc(100vh - 4rem);







  display: flex;







  align-items: center;







  overflow: hidden;







  background: #1a40ff;







}















@media (min-width: 768px) {







  .trajectory-section {







    top: 5rem;







    height: calc(100vh - 5rem);







  }







}















.trajectory-background {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  overflow: hidden;







  z-index: 0;







}















.trajectory-background img {







  width: 100%;







  height: 100%;







  object-fit: cover;







  object-position: center;







  opacity: 0.06;







}















.trajectory-gradient {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  z-index: 0;







  pointer-events: none;







  background: radial-gradient(ellipse at 70% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);







}















.trajectory-bottom-fade {







  position: absolute;







  bottom: 0;







  left: 0;







  right: 0;







  height: 5rem;







  background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent);







  z-index: 10;







  pointer-events: none;







}















.trajectory-content {







  position: relative;







  z-index: 10;







  width: 100%;







  padding: 0.5rem 1.5rem;







}















@media (min-width: 768px) {







  .trajectory-content {







    padding: 1rem 2.5rem;







  }







}















@media (min-width: 1024px) {







  .trajectory-content {







    padding: 1.5rem 4rem;







  }







}















.trajectory-layout {







  display: flex;







  flex-direction: column;







  gap: 1rem;







  max-width: 1400px;







  margin: 0 auto;







}















@media (min-width: 1024px) {







  .trajectory-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }







}















@media (min-width: 1280px) {







  .trajectory-layout {







    gap: 3rem;







  }







}















.trajectory-title-container {







  width: 100%;







  padding-top: 12rem;







}















@media (min-width: 1024px) {







  .trajectory-title-container {
    width: 50%;
    flex-shrink: 0;
  }







}















@media (min-width: 1280px) {







  .trajectory-title-container {
    width: 50%;
    flex-shrink: 0;
  }







}















.trajectory-title {







  font-family: "Barlow Condensed", "Inter", sans-serif;







  font-weight: 800;







  color: #ffffff;







  text-transform: uppercase;







  line-height: 0.88;







  letter-spacing: -0.02em;







  margin-bottom: 0;







  font-size: 3.5rem;







}















@media (min-width: 640px) {







  .trajectory-title {







    font-size: 4.5rem;







  }







}















@media (min-width: 768px) {







  .trajectory-title {







    font-size: 5.5rem;







  }







}















@media (min-width: 1024px) {







  .trajectory-title {







    font-size: 6.5rem;







  }







}















@media (min-width: 1280px) {







  .trajectory-title {







    font-size: 7.5rem;







  }







}















.trajectory-title .block {







  display: block;







}



.trajectory-title .trajectory-word {



  color: rgba(255, 255, 255, 0.5);



}















.trajectory-accent {







  margin-top: 0.75rem;







  width: 3.5rem;







  height: 3px;







  background: rgba(255, 255, 255, 0.5);







  border-radius: 9999px;







}















@media (min-width: 768px) {







  .trajectory-accent {







    margin-top: 1rem;







  }







}















.metrics-container {







  width: 100%;







  position: relative;







  min-height: 35rem;







  padding-top: 16rem;







  margin-left: 6rem;







  margin-top: 8rem;







}















@media (min-width: 1024px) {







  .metrics-container {
    width: 45%;
    flex-shrink: 0;
    margin-left: 0;
  }







}















@media (min-width: 1280px) {







  .metrics-container {
    width: 45%;
    flex-shrink: 0;
    margin-left: 0;
  }







}















.metric {







  display: flex;







  padding: 1.5rem 0;







  border-bottom: 1px solid rgba(255, 255, 255, 0.12);







  transform: translateY(100%);







  opacity: 0;







  position: absolute;







  top: 8rem;







  left: 0;







  right: 0;







}















.metric-inner {







  width: 100%;







  opacity: 1;







  display: flex;







  flex-direction: column;







  gap: 1.5rem;







}















@media (min-width: 768px) {







  .metric {







    gap: 2rem;







    padding: 0.5rem 0;







  }







}















.metric-number {







  font-family: "Barlow Condensed", "Inter", sans-serif;







  font-weight: 800;







  color: #ffffff;







  text-transform: uppercase;







  font-size: 2.5rem;







  line-height: 1;







  letter-spacing: -0.02em;







  font-variant-numeric: tabular-nums;







  white-space: nowrap;







  flex-shrink: 0;







}















@media (min-width: 640px) {







  .metric-number {







    font-size: 3rem;







  }







}















@media (min-width: 768px) {







  .metric-number {







    font-size: 4rem;







  }







}















@media (min-width: 1024px) {







  .metric-number {







    font-size: 5rem;







  }







}















@media (min-width: 1280px) {







  .metric-number {







    font-size: 6rem;







  }







}















.metric-number span {







  font-size: 0.6em;







  font-weight: 700;







}















.metric-label {







  color: rgba(255, 255, 255, 0.7);







  font-size: 1rem;







  font-weight: 500;







  text-transform: uppercase;







  letter-spacing: 0.15em;







  line-height: 1.6;







  padding-bottom: 0.25rem;







  min-width: 0;







}















@media (min-width: 640px) {







  .metric-label {







    font-size: 1.125rem;







  }







}















@media (min-width: 768px) {







  .metric-label {







    font-size: 1.25rem;







  }







}















/* Services Section */







.services-section {







  position: relative;







  height: 100vh;







  background: #000;







  overflow: hidden;







}















.services-slider {







  position: relative;







  width: 100%;







  height: 100%;







}















.slide {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  opacity: 0;







  transition: opacity 0.7s ease;







}















.slide.active {







  opacity: 1;







}















.slide-background {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







}















.slide-background img {







  width: 100%;







  height: 100%;







  object-fit: cover;







}















.slide-overlay {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  background: linear-gradient(







    90deg,







    rgba(0, 0, 0, 0.6) 0%,







    rgba(0, 0, 0, 0.25) 45%,







    transparent 100%







  );







}















.slide-content {







  position: absolute;







  top: 50%;







  left: 8%;







  transform: translateY(-50%);







  max-width: 480px;







  color: white;







}















.slide-label {







  color: rgba(255, 255, 255, 0.5);







  font-size: 0.75rem;







  font-weight: 700;







  text-transform: uppercase;







  letter-spacing: 0.15em;







  margin-bottom: 1.5rem;







}















.slide-title {







  font-size: clamp(2.5rem, 4vw, 3.5rem);







  font-weight: 900;







  text-transform: uppercase;







  line-height: 1.1;







  margin-bottom: 1rem;







}















.slide-text {







  color: rgba(255, 255, 255, 0.65);







  font-size: 1.1rem;







  line-height: 1.6;







}















.services-navigation {







  position: absolute;







  bottom: 8%;







  left: 50%;







  transform: translateX(-50%);







  display: flex;







  align-items: center;







  gap: 2rem;







  z-index: 10;







}















.nav-btn {







  width: 48px;







  height: 48px;







  border: 1px solid rgba(255, 255, 255, 0.4);







  background: rgba(0, 0, 0, 0.2);







  backdrop-filter: blur(10px);







  color: white;







  border-radius: 50%;







  cursor: pointer;







  display: flex;







  align-items: center;







  justify-content: center;







  transition: all 0.3s ease;







}















.nav-btn:hover {







  background: var(--laeca-accent);







  border-color: var(--laeca-accent);







}















.slide-indicators {







  display: flex;







  gap: 0.5rem;







}















.indicator {







  width: 8px;







  height: 8px;







  border-radius: 50%;







  background: rgba(255, 255, 255, 0.3);







  cursor: pointer;







  transition: all 0.3s ease;







}















.indicator.active {







  background: white;







  transform: scale(1.2);







}















.services-cta {







  position: absolute;







  bottom: 8%;







  right: 8%;







  z-index: 10;







}















.services-btn {







  display: inline-flex;







  align-items: center;







  gap: 0.5rem;







  background: var(--laeca-accent);







  color: white;







  text-decoration: none;







  padding: 0.75rem 1.5rem;







  border-radius: 6px;







  font-weight: 700;







  text-transform: uppercase;







  font-size: 0.9rem;







  letter-spacing: 0.05em;







  transition: all 0.3s ease;







}















.services-btn:hover {







  background: #1535d4;







  transform: scale(1.05);







}















.services-btn i {







  transition: transform 0.3s ease;







}















.services-btn:hover i {







  transform: translateX(4px);







}















/* Projects Section */







.projects-section {







  width: 100%;







  background: white;







  color: #000;







  padding: 4rem 1.5rem;







  overflow: hidden;







}







@media (min-width: 768px) {







  .projects-section {







    padding: 6rem 2.5rem;







  }







}







@media (min-width: 1024px) {







  .projects-section {







    padding: 7rem 4rem;







  }







}















.projects-container {







  width: 100%;







  padding: 0 1.5rem;







}







@media (min-width: 768px) {







  .projects-container {







    padding: 0 2.5rem;







  }







}







@media (min-width: 1024px) {







  .projects-container {







    padding: 0 4rem;







  }







}















/* Header row */







.projects-header {







  display: flex;







  flex-direction: column;







  gap: 2rem;







  margin-bottom: 2.5rem;







}







@media (min-width: 1024px) {







  .projects-header {







    flex-direction: row;







    align-items: flex-end;







    justify-content: space-between;







    gap: 3rem;







    margin-bottom: 3.5rem;







  }







}















.projects-title-wrapper {







  max-width: none;







}















.projects-subtitle-wrapper {







  display: flex;







  flex-direction: column;







  gap: 1.5rem;







}







@media (min-width: 640px) {







  .projects-subtitle-wrapper {







    flex-direction: row;







    align-items: flex-end;







  }







}















.projects-title {







  font-family: "Barlow Condensed", "Inter", sans-serif;







  font-size: 1.875rem;







  font-weight: 800;







  color: #4b5563;







  text-transform: uppercase;







  margin-bottom: 0;







  line-height: 1.08;







  letter-spacing: -0.02em;







}







@media (min-width: 768px) {







  .projects-title {







    font-size: 2.25rem;







  }







}







@media (min-width: 1024px) {







  .projects-title {







    font-size: 3rem;







  }







}















.projects-subtitle {







  color: #6b7280;







  font-size: 0.875rem;







  line-height: 1.6;







  max-width: 20rem;







}







@media (min-width: 768px) {







  .projects-subtitle {







    font-size: 1rem;







  }







}















/* Carousel track with floating arrows */







.projects-carousel {







  position: relative;







  margin-bottom: 2.5rem;







}







@media (min-width: 768px) {







  .projects-carousel {







    margin-bottom: 3.5rem;







  }







}















.carousel-arrow {







  position: absolute;







  top: 50%;







  transform: translateY(-50%);







  z-index: 20;







  width: 2.75rem;







  height: 2.75rem;







  border-radius: 9999px;







  border: 1px solid rgba(255, 255, 255, 0.4);







  background: rgba(0, 0, 0, 0.2);







  backdrop-filter: blur(4px);







  display: flex;







  align-items: center;







  justify-content: center;







  color: white;







  cursor: pointer;







  transition: all 0.3s ease;







}







@media (min-width: 768px) {







  .carousel-arrow {







    width: 3rem;







    height: 3rem;







  }







}







.carousel-arrow:hover {







  background: #1a40ff;







  border-color: #1a40ff;







  color: white;







}







.carousel-arrow-left {







  left: 0.5rem;







}







@media (min-width: 768px) {







  .carousel-arrow-left {







    left: 1rem;







  }







}







.carousel-arrow-right {







  right: 0.5rem;







}







@media (min-width: 768px) {







  .carousel-arrow-right {







    right: 1rem;







  }







}















.projects-track {







  display: flex;







  gap: 0.75rem;







  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);







}







@media (min-width: 768px) {







  .projects-track {







    gap: 1rem;







  }







}















.project-card {







  position: relative;







  flex-shrink: 0;







  width: calc(100% / 1.25);







  border-radius: 1rem;







  overflow: hidden;







  cursor: pointer;







  user-select: none;







  opacity: 0.9;







  transform: scale(0.98);







  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);







}







.project-card.active {







  opacity: 1;







  transform: scale(1);







}







@media (min-width: 768px) {







  .project-card {







    width: calc(100% / 1.4);







  }







}







@media (min-width: 1024px) {







  .project-card {







    width: calc(100% / 1.55);







  }







}















.project-image {







  position: relative;







  aspect-ratio: 16/9;







  overflow: hidden;







}















.project-image img {







  width: 100%;







  height: 100%;







  object-fit: cover;







  object-position: center;







  transition: all 1.2s ease-out;







  transform: scale(1);







}







.project-card.active .project-image img {







  transform: scale(1.05);







}







.project-card:hover .project-image img {







  transform: scale(1.1);







}















.project-video {







  width: 100%;







  height: 100%;







  object-fit: cover;







  object-position: center;







  transition: all 1.2s ease-out;







  transform: scale(1);







}







.project-card.active .project-video {







  transform: scale(1.05);







}







.project-card:hover .project-video {







  transform: scale(1.1);







}















.project-overlay {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  background: linear-gradient(







    to top,







    rgba(0, 0, 0, 0.9) 0%,







    rgba(0, 0, 0, 0.5) 50%,







    rgba(0, 0, 0, 0.1) 100%







  );







  opacity: 0.8;







  transition: opacity 0.5s ease;







}







.project-card.active .project-overlay {







  opacity: 1;







}







.project-card:hover .project-overlay {







  background: linear-gradient(







    to top,







    rgba(0, 0, 0, 0.95) 0%,







    rgba(0, 0, 0, 0.5) 50%,







    rgba(0, 0, 0, 0.1) 100%







  );







}















.project-accent-line {







  position: absolute;







  bottom: 0;







  left: 0;







  right: 0;







  height: 3px;







  background: #1a40ff;







  transform: scaleX(0);







  transform-origin: left;







  transition: transform 0.5s ease;







}







.project-card:hover .project-accent-line {







  transform: scaleX(1);







}















.project-content {







  position: absolute;







  bottom: 0;







  left: 0;







  right: 0;







  padding: 1.5rem;







  color: white;







  transform: translateY(0);







  transition: transform 0.5s ease;







}







@media (min-width: 768px) {







  .project-content {







    padding: 2.5rem;







  }







}







@media (min-width: 1024px) {







  .project-content {







    padding: 3rem;







  }







}







.project-card:hover .project-content {







  transform: translateY(-0.5rem);







}















.project-title {







  font-family: "Barlow Condensed", "Inter", sans-serif;







  font-size: 1.5rem;







  font-weight: 800;







  color: white;







  text-transform: uppercase;







  margin-bottom: 0.75rem;







  line-height: 0.95;







  letter-spacing: -0.02em;







}







@media (min-width: 768px) {







  .project-title {







    font-size: 2.25rem;







    margin-bottom: 1rem;







  }







}







@media (min-width: 1024px) {







  .project-title {







    font-size: 3rem;







  }







}







@media (min-width: 1280px) {







  .project-title {







    font-size: 3.75rem;







  }







}















.project-description {







  color: rgba(255, 255, 255, 0.75);







  font-size: 0.875rem;







  line-height: 1.6;







  max-width: 18rem;







}







@media (min-width: 768px) {







  .project-description {







    font-size: 1rem;







    max-width: 20rem;







  }







}







@media (min-width: 1024px) {







  .project-description {







    font-size: 1.125rem;







    max-width: 24rem;







  }







}















.projects-cta {







  display: flex;







  align-items: center;







  justify-content: space-between;







  gap: 1rem;







}















.projects-btn {







  display: inline-flex;







  align-items: center;







  gap: 0.625rem;







  padding: 0.875rem 1.75rem;







  border: 2px solid #1a40ff;







  color: #1a40ff;







  text-decoration: none;







  font-size: 0.875rem;







  font-weight: 700;







  border-radius: 0.375rem;







  transition: all 0.3s ease;







  white-space: nowrap;







}







.projects-btn:hover {







  background: #1a40ff;







  color: white;







  transform: scale(1.02);







}







.projects-btn:active {







  transform: scale(0.98);







}















/* Project indicators (dots) */







.projects-indicators {







  display: flex;







  align-items: center;







  gap: 0.5rem;







}







.project-indicator {







  height: 3px;







  border-radius: 9999px;







  background: #e5e7eb;







  transition: all 0.5s ease;







  cursor: pointer;







  width: 1.25rem;







}







.project-indicator.active {







  width: 2rem;







  background: #1a40ff;







}







.project-indicator:hover {







  background: rgba(0, 0, 0, 0.4);







}



















.projects-btn i {







  transition: transform 0.3s ease;







}















.projects-btn:hover i {







  transform: translateX(4px);







}















/* International Section */







.international-section {







  position: relative;







  padding: 5rem 2rem;







  background: linear-gradient(







    160deg,







    var(--laeca-navy) 0%,







    #0f2eb8 50%,







    #0a1f8a 100%







  );







  color: white;







}















.international-background {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  overflow: hidden;







}















.international-gradient {







  width: 100%;







  height: 100%;







  background: radial-gradient(







    ellipse at 70% 30%,







    rgba(255, 255, 255, 0.08) 0%,







    transparent 60%







  );







}















.international-content {







  position: relative;







  z-index: 2;







  max-width: 1400px;







  margin: 0 auto;







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 4rem;







  align-items: center;







}















.international-text {







  max-width: 500px;







}















.international-title {







  font-family: "Barlow Condensed", "Inter", sans-serif;







  font-size: clamp(1.875rem, 3vw, 3.25rem);







  font-weight: 800;







  color: rgba(255, 255, 255, 0.75);







  text-transform: uppercase;







  margin-bottom: 1.5rem;







  line-height: 1.08;







  letter-spacing: -0.02em;







}















.international-description {







  color: rgba(255, 255, 255, 0.75);







  font-size: 1.1rem;







  line-height: 1.6;







  margin-bottom: 2.5rem;







}















.countries-grid {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 0.75rem 2rem;







  margin-bottom: 2.5rem;







}















.country-item {







  display: flex;







  align-items: center;







  gap: 0.5rem;







  color: rgba(255, 255, 255, 0.85);







  font-size: 0.9rem;







}















.country-dot {







  width: 6px;







  height: 6px;







  border-radius: 50%;







  background: #00d4ff;







  flex-shrink: 0;







}















.international-cta {







  display: inline-flex;







  align-items: center;







  gap: 0.5rem;







  border: 1px solid rgba(255, 255, 255, 0.6);







  color: white;







  text-decoration: none;







  padding: 0.75rem 1.5rem;







  border-radius: 6px;







  font-weight: 700;







  text-transform: uppercase;







  font-size: 0.9rem;







  letter-spacing: 0.05em;







  transition: all 0.3s ease;







}















.international-cta:hover {







  background: white;







  color: var(--laeca-navy);







}















.international-cta i {







  transition: transform 0.3s ease;







}















.international-cta:hover i {







  transform: translateX(4px);







}















.globe-container {







  display: flex;







  justify-content: center;







  align-items: center;







}















.contenedor-laeca {







  position: relative;







  width: 100%;







  max-width: 420px;







  margin: auto;







}







@media (min-width: 768px) {







  .contenedor-laeca {







    max-width: 540px;







  }







}







@media (min-width: 1024px) {







  .contenedor-laeca {







    max-width: 640px;







  }







}















.mapa-base {







  width: 100%;







  display: block;







  border-radius: 50%;







  box-shadow: 



    0 0 40px rgba(0, 217, 255, 0.08),



    inset 0 0 50px rgba(0, 0, 0, 0.45);







  border: 1px solid rgba(0, 217, 255, 0.15);







  overflow: hidden;







}















/* Orbital Rings */







.orbital-ring {







  position: absolute;







  top: 50%;







  left: 50%;







  transform: translate(-50%, -50%);







  border-radius: 50%;







  pointer-events: none;







}















.orbital-ring-1 {







  width: 115%;







  height: 115%;







  border: 1px solid rgba(0, 217, 255, 0.4);







  animation: orbit-spin 40s linear infinite;







}















.orbital-ring-2 {







  width: 130%;







  height: 130%;







  border: 1px solid rgba(255, 255, 255, 0.2);







  animation: orbit-spin 55s linear infinite reverse;







  transform: translate(-50%, -50%) rotateX(55deg);







}















.orbital-particle {







  position: absolute;







  border-radius: 50%;







}















.orbital-particle-1 {







  width: 10px;







  height: 10px;







  background: rgba(0, 217, 255, 0.9);







  top: 0;







  left: 50%;







  transform: translate(-50%, -50%);







  box-shadow: 0 0 20px rgba(0, 217, 255, 0.8), 0 0 40px rgba(0, 217, 255, 0.5);







}















.orbital-particle-2 {







  width: 8px;







  height: 8px;







  background: rgba(255, 255, 255, 0.9);







  bottom: 0;







  left: 50%;







  transform: translate(-50%, 50%);







  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);







}















/* Globe Crosshair */







.globe-crosshair {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  display: flex;







  align-items: center;







  justify-content: center;







  pointer-events: none;







  opacity: 0.06;







}















.crosshair-vertical {







  width: 1px;







  height: 28%;







  background: linear-gradient(to bottom, transparent, rgba(0, 217, 255, 0.5), transparent);







}















.crosshair-horizontal {







  position: absolute;







  width: 28%;







  height: 1px;







  background: linear-gradient(to right, transparent, rgba(0, 217, 255, 0.5), transparent);







}















@keyframes orbit-spin {







  from {







    transform: translate(-50%, -50%) rotate(0deg);







  }







  to {







    transform: translate(-50%, -50%) rotate(360deg);







  }







}















.punto-red {







  position: absolute;







  width: 30px;







  transition: transform 0.3s ease;







  cursor: pointer;







}















.torre-svg {







  width: 100%;







  filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.5));







}















.etiqueta {







  position: absolute;







  bottom: 115%;







  left: 50%;







  transform: translateX(-50%);







  background: #00ffff;







  color: #000;







  padding: 2px 8px;







  border-radius: 3px;







  font-size: 11px;







  font-weight: bold;







  opacity: 0;







  visibility: hidden;







  transition: 0.3s ease;







  white-space: nowrap;







}















/* EFECTO HOVER */







.punto-red:hover {







  transform: scale(1.2);







  z-index: 10;







}















.punto-red:hover .torre-svg {







  filter: drop-shadow(0 0 12px #00ffff) brightness(1.5);







}















.punto-red:hover .etiqueta {







  opacity: 1;







  visibility: visible;







}















/* --- COORDENADAS APROXIMADAS --- */







.mexico {







  top: 38%;







  left: 23%;







}







.cuba {







  top: 42%;







  left: 38%;







}







.jamaica {







  top: 48%;







  left: 38%;







}







.el-salvador {







  top: 49%;







  left: 34%;







}







.costa-rica {







  top: 52%;







  left: 37%;







}







.colombia {







  top: 57%;







  left: 43%;







}







.venezuela {







  top: 55%;







  left: 49%;







}







.ecuador {







  top: 62%;







  left: 39%;







}







.peru {







  top: 70%;







  left: 45%;







}







.chile {







  top: 80%;







  left: 44%;







}















/* Respaldo Section */







.respaldo-section {







  position: relative;







  min-height: 420px;







  background: #000;







  overflow: hidden;







}















.respaldo-background {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 120%;







}















.respaldo-background img {







  width: 100%;







  height: 100%;







  object-fit: cover;







  transform: scale(1.05);







}















.respaldo-overlay {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  background: linear-gradient(







    90deg,







    rgba(10, 31, 68, 0.96) 0%,







    rgba(10, 31, 68, 0.88) 45%,







    rgba(10, 31, 68, 0.78) 100%







  );







}















.respaldo-overlay::after {







  content: '';







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  background: radial-gradient(ellipse at 30% 50%, rgba(26, 64, 255, 0.15) 0%, transparent 60%);







}















.respaldo-overlay::before {







  content: '';







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  opacity: 0.03;







  pointer-events: none;







  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");







  background-size: 128px 128px;







}















.respaldo-content {







  position: relative;







  z-index: 10;







  max-width: 1400px;







  margin: 0 auto;







  padding: 4rem 1.5rem;







  display: flex;







  flex-direction: column;







  gap: 2.5rem;







  align-items: center;







}















@media (min-width: 1024px) {







  .respaldo-content {







    flex-direction: row;







    padding: 4rem 2.5rem;







    gap: 4rem;







  }







}















@media (min-width: 1280px) {







  .respaldo-content {







    gap: 6rem;







  }







}















.respaldo-text {







  width: 100%;







}















@media (min-width: 1024px) {







  .respaldo-text {







    width: 45%;







  }







}















@media (min-width: 1280px) {







  .respaldo-text {







    width: 42%;







  }







}















.respaldo-label {
  color: #00d4ff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}















.respaldo-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(0, 212, 255, 0.6);
}















.respaldo-title {
  font-family: "Barlow Condensed", "Inter", sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}















.respaldo-title span {







  display: block;







  margin-bottom: 0.2rem;







}















.respaldo-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.625;
  margin-bottom: 2rem;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .respaldo-description {
    font-size: 1.125rem;
  }
}















.respaldo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--laeca-accent);
  color: white;
  text-decoration: none;
  padding: 0.875rem 2rem;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(26, 64, 255, 0.25);
}















.respaldo-cta:hover {
  background: #1535d4;
  box-shadow: 0 0 32px rgba(26, 64, 255, 0.45);
  transform: scale(1.03);
  filter: brightness(1.1);
}

.respaldo-cta:active {
  transform: scale(0.98);
}















.respaldo-cta i {







  transition: transform 0.3s ease;







}















.respaldo-cta:hover i {







  transform: translateX(4px);







}















.partners-grid {







  display: grid;







  grid-template-columns: repeat(2, 1fr);







  gap: 1.25rem;







  align-items: center;







  justify-items: center;







  width: 100%;







}















@media (min-width: 1024px) {







  .partners-grid {







    width: 55%;







  }







}















@media (min-width: 1280px) {







  .partners-grid {







    width: 58%;







  }







}















@media (min-width: 768px) {







  .partners-grid {







    gap: 1.5rem;







  }







}















@media (min-width: 1024px) {







  .partners-grid {







    gap: 1.75rem;







  }







}















.partner-card {







  background: rgba(26, 64, 255, 0.18);







  backdrop-filter: blur(12px);







  border: 1px solid rgba(255, 255, 255, 0.12);







  border-radius: 12px;







  width: 160px;







  height: 100px;







  display: flex;







  align-items: center;







  justify-content: center;







  transition: all 0.5s ease;







  cursor: default;







}















@media (min-width: 768px) {







  .partner-card {







    width: 200px;







    height: 120px;







  }







}















@media (min-width: 1024px) {







  .partner-card {







    width: 220px;







    height: 130px;







  }







}















.partner-card:hover {
  transform: translateY(-3px) scale(1.1) !important;
  transition: 300ms ease !important;
  background: rgba(26, 64, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 24px rgba(26, 64, 255, 0.25);
}















.partner-logo {







  width: 85%;







  height: 85%;







  display: flex;







  align-items: center;







  justify-content: center;







  transition: all 0.5s ease;







}















.partner-logo img {







  width: 100%;







  height: 100%;







  object-fit: contain;







  filter: brightness(0) invert(1) opacity(0.8);







  transition: all 0.5s ease;







}















.partner-card:hover .partner-logo img {







  opacity: 1;







}















.partner-name {







  display: none;







  text-align: center;







  text-transform: uppercase;







  letter-spacing: 0.05em;







}















/* Footer */







.footer {







  background: #000000;







  color: white;







  padding: 3rem 2rem 1rem;







}















.footer-content {







  max-width: 1400px;







  margin: 0 auto;







  display: grid;







  grid-template-columns: 1fr 1fr 1fr;







  gap: 3rem;







  margin-bottom: 2rem;







}















.footer-brand {







  max-width: none;







}















.footer-logo {







  height: 56px;







  width: auto;







  filter: brightness(0) invert(1);







  margin-bottom: 1.5rem;







}















.footer-tagline {







  color: var(--text-light);







  font-size: 0.9rem;







  line-height: 1.6;







  margin-bottom: 1.5rem;







}















.social-links {







  display: flex;







  gap: 1rem;







}















.social-link {







  width: 36px;







  height: 36px;







  border: 1px solid rgba(255, 255, 255, 0.1);







  border-radius: 50%;







  display: flex;







  align-items: center;







  justify-content: center;







  color: rgba(255, 255, 255, 0.6);







  text-decoration: none;







  transition: all 0.3s ease;







}















.social-link:hover {







  color: white;







  border-color: rgba(255, 255, 255, 0.3);







  background: rgba(255, 255, 255, 0.05);







}















.footer-group h4 {







  color: white;







  font-size: 0.9rem;







  font-weight: 700;







  text-transform: uppercase;







  letter-spacing: 0.1em;







  margin-bottom: 1rem;







}















.footer-group a {







  color: var(--text-light);







  text-decoration: none;







  font-size: 0.9rem;







  line-height: 1.8;







  display: block;







  transition: color 0.3s ease;







}















.footer-group a:hover {







  color: white;







}















.footer-bottom {







  border-top: 1px solid rgba(255, 255, 255, 0.06);







  padding-top: 1.5rem;







  display: flex;







  justify-content: space-between;







  align-items: center;







  max-width: 1400px;







  margin: 0 auto;







}















.footer-bottom p {







  color: var(--text-gray);







  font-size: 0.8rem;







}















.footer-bottom a {







  color: rgba(255, 255, 255, 0.7);







  text-decoration: none;







  transition: color 0.3s ease;







}















.footer-bottom a:hover {







  color: white;







  text-decoration: underline;







}















/* Responsive Design */







@media (max-width: 1024px) {







  .nav-links {







    display: none;







  }















  .mobile-menu-btn {







    display: block;







  }















  .trajectory-content {







    flex-direction: column;







    gap: 2rem;







  }















  .trajectory-text {







    flex: none;







  }















  .international-content,







  .respaldo-content {







    grid-template-columns: 1fr;







    gap: 2rem;







  }















  .footer-content {







    grid-template-columns: 1fr;







    gap: 2rem;







  }















  .footer-bottom {







    flex-direction: column;







    gap: 1rem;







    text-align: center;







  }







}















@media (max-width: 768px) {







  .nav-container {







    padding: 0 1rem;







  }















  .hero-content,







  .about-content,







  .projects-header,







  .international-content,







  .respaldo-content,







  .footer-content,







  .footer-bottom {







    padding-left: 1rem;







    padding-right: 1rem;







  }















  .hero-title {







    font-size: 2.5rem;







  }















  .trajectory-title {







    font-size: 3rem;







  }















  .projects-grid {







    grid-template-columns: 1fr;







  }















  .countries-grid {







    grid-template-columns: 1fr;







  }















  .partners-grid {







    grid-template-columns: 1fr;







  }















  .slide-content {







    left: 5%;







    max-width: 90%;







  }















  .services-navigation {







    bottom: 5%;







  }















  .services-cta {







    bottom: 5%;







    right: 5%;







  }







}















@media (max-width: 480px) {







  .hero-subtitle {







    font-size: 0.8rem;







  }















  .hero-title {







    font-size: 2rem;







  }















  .hero-description {







    font-size: 1rem;







  }















  .about-title,







  .trajectory-title,







  .projects-title,







  .international-title,







  .respaldo-title {







    font-size: 2rem;







  }















  .slide-title {







    font-size: 2rem;







  }















  .metric {







    flex-direction: column;







    align-items: flex-start;







    gap: 1rem;







  }















  .metric-number {







    font-size: 2rem;







  }















  .footer-content {







    text-align: center;







  }







}















/* Footer Unified Container Styles */







@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');















.footer-column-section {







  font-family: 'Montserrat', sans-serif;







  border-left: solid white 2px;







  padding-left: 20px;







  box-sizing: border-box;







}















.unified-title {







  font-weight: 700;







  font-size: 16px;







  color: #fff;







  margin-bottom: 20px;







  text-transform: uppercase;







  letter-spacing: 1px;







}















.custom-text,







.contact-row span {







  font-size: 14px;







  color: #fff;







  line-height: 1.6;







  font-weight: 400;







  display: block;







}















.contact-row {







  display: flex;







  align-items: flex-start;







  margin-bottom: 12px;







}















.contact-row i {







  color: #fff;







  margin-right: 10px;







  font-size: 18px;







  flex-shrink: 0;







  margin-top: 2px;







}








/* ==========================================================================
   New Timeline & Experience Banner Styles (Integrated from React Prototype)
   ========================================================================== */

/* Timeline Section */
.timeline-section {
  padding: 8rem 0;
  background-color: #0A0A0A;
  position: relative;
  overflow: hidden;
}

.timeline-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
}

/* Vertical Center Line */
.timeline-line {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #1A40FF; /* Primary Accent */
  transform: translateX(-50%);
  z-index: 1;
}

@media (min-width: 768px) {
  .timeline-line {
    left: 50%;
  }
}

/* Timeline Items Container */
.timeline-items {
  display: flex;
  flex-direction: column;
  gap: 7rem;
  position: relative;
  z-index: 2;
}

/* Timeline Item Base */
.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  position: relative;
}

@media (min-width: 768px) {
  .timeline-item {
    flex-direction: row;
    gap: 5rem;
  }
  
  .timeline-item.reversed {
    flex-direction: row-reverse;
  }
}

/* Content Side styling */
.timeline-content {
  width: 100%;
  padding-left: 3.5rem;
  text-align: left;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .timeline-content {
    width: 50%;
    padding-left: 0;
  }
  
  /* Left aligned content (odd index) */
  .timeline-item:not(.reversed) .timeline-content {
    text-align: right;
    padding-right: 3rem;
  }
  
  /* Right aligned content (even index) */
  .timeline-item.reversed .timeline-content {
    text-align: left;
    padding-left: 3rem;
  }
}

/* Text styles */
.timeline-year {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  color: #1A40FF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.timeline-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffffff;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  text-transform: none; /* Keep natural capitalization */
  letter-spacing: normal;
}

.timeline-description {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #9CA3AF;
  margin: 0;
}

/* Center Dot */
.timeline-dot {
  position: absolute;
  left: 24px;
  top: 0;
  transform: translate(-50%, 0);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: #0A0A0A;
  border: 4px solid #1A40FF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 15px rgba(26, 64, 255, 0.4);
}

@media (min-width: 768px) {
  .timeline-dot {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.timeline-dot-inner {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #1A40FF;
}

/* Image container */
.timeline-image-container {
  width: 100%;
  padding-left: 3.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .timeline-image-container {
    width: 50%;
    padding-left: 0;
  }
}

.timeline-image-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.timeline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.timeline-image-wrapper:hover .timeline-image {
  transform: scale(1.05);
}

.timeline-image-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 64, 255, 0.12);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Experience Banner Section */
.experience-banner {
  position: relative;
  width: 100%;
  padding: 8rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.experience-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.experience-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-banner-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

.experience-banner-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.experience-banner-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.15;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .experience-banner-title {
    font-size: 4rem;
  }
}

.experience-banner-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .experience-banner-text {
    font-size: 1.25rem;
  }
}

/* Scroll Animations */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-in-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Make all buttons and CTAs uppercase globally */
button, 
.laeca-btn, 
.about-cta, 
.services-btn, 
.projects-btn, 
.respaldo-cta, 
.lang-btn, 
.contact-btn,
.mobile-menu-btn {
  text-transform: uppercase !important;
}

/* Smooth, premium gradient transition between cinematic hero and white content sections */
.smooth-hero-transition {
  position: relative !important;
}
.smooth-hero-transition::before {
  content: '' !important;
  position: absolute !important;
  top: -150px !important;
  left: 0 !important;
  right: 0 !important;
  height: 150px !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.5) 80%, #ffffff 100%) !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

/* Custom premium typography styles for the Experience Section */
.experience-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 38px !important; /* Mobile sizing */
  line-height: 38px !important;
  letter-spacing: -1px !important;
  text-transform: uppercase !important;
  color: #1A40FF !important;
}

@media (min-width: 768px) {
  .experience-title {
    font-size: 64px !important;
    line-height: 60px !important;
    letter-spacing: -1.5px !important;
  }
}

.experience-desc {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 30px !important;
  letter-spacing: 0px !important;
  color: #6B7280 !important; /* Premium gray */
}

/* Custom Utility Classes for LAECA Brand Blue to guarantee rendering on production without Tailwind CDN */
.text-laeca-blue {
  color: #1A40FF !important;
}
.bg-laeca-blue {
  background-color: #1A40FF !important;
}
.border-laeca-blue {
  border-color: #1A40FF !important;
}
.hover\:bg-laeca-blue:hover {
  background-color: #1A40FF !important;
}
.hover\:text-laeca-blue:hover {
  color: #1A40FF !important;
}

/* Custom premium hover transition with a transparent-looking blur effect for the Modalidades de Ejecución cards */
.modes-slide .group:hover img {
  filter: blur(4px) !important;
  transform: scale(1.05) !important;
}
.modes-slide img {
  transition: filter 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: filter, transform;
}

/* Submit button premium hover text color fix */
#btn-submit {
  color: #1A40FF !important;
  background-color: #ffffff !important;
  border: 1px solid #1A40FF !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#btn-submit:hover {
  color: #ffffff !important;
  background-color: #1A40FF !important;
  border-color: #1A40FF !important;
}
#btn-submit i {
  color: inherit !important;
}

/* Force "Otros medios de contacto" to break into exactly two lines */
.contact-other-title {
  white-space: normal !important;
}