/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #000;
}

/* NAVBAR Container */
.navbar {
  display: flex;
  justify-content: space-between;
  /* space between left and right sections */
  align-items: center;
  padding: 10px 20px;
  background-color: black;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  /* For absolute positioning in child elements (center section) */
}

/* LEFT Branding */
.navbar-left {
  display: flex;
  align-items: center;
}

.navbar-left span {
  font-size: 30px;
  color: white;
}

.navbar-left strong {
  font-size: 30px;
  font-weight: bold;
  color: white;
  margin-left: 5px;
}


/* RIGHT-Aligned Buttons */
.navbar-right {
  display: flex;
  align-items: center;
}

/* Nav Buttons on the right */
.nav-buttons {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.nav-buttons li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-buttons li a:hover {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* 
  Removed hamburger/menu-overlay CSS since it's no longer needed 
*/
/* Container for your hero content (typing animation, etc.) */
.about-container {
  /* Fill the viewport height minus the navbar, adjust as needed */
  min-height: 95vh;
  /* Center vertically & horizontally */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Extra padding if your nav is fixed and overlapping */
}

/* The main heading that includes your typing animation */
.about-title {
  font-size: 4rem;
  /* Adjust as desired */
  font-weight: 600;
  /* Medium-bold look */
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  color: white;
}

.plain {
  font-weight: 200;
}

/* The span that’s dynamically typed & erased */
.typing-animation {
  /* A common style is to show a cursor or a right border to emulate typing */
  border-right: 3px solid #fff;
  padding-right: 5px;
  /* Prevent line-breaks from interfering with typing text */
  white-space: nowrap;
  overflow: hidden;
  font-size: 4rem;
}

@media (max-width: 1450px) {
  .typing-animation {
    font-size: 3rem;
    /* Smaller font size for 13-inch screens */
  }

  .mpntext {
    font-size: 3rem;
    /* Smaller font size for 13-inch screens */
    padding-left: 30px;
    padding-top: 60px;
  }

  .navlogo {
    padding-top: 20px;
  }
}


/* Hero Section Styles */
.hero-section {
  min-height: 100vh;
  /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Vertically center content */
  align-items: center;
  /* Horizontally center content */
  text-align: center;
  padding: 20px;
}

.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
  color: white;
}

.hero-subtitle {
  font-size: 1.25rem;
  max-width: 600px;
  /* Limit text width */
  margin: 0 auto 2rem;
  line-height: 1.5em;
  color: white;
}

/* Hero Button */
.hero-btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #fff;
  /* White border */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.hero-btn:hover {
  background-color: #fff;
  color: #000;
}


/* Ticker Container: enough height for 2 rows, each ~80px tall */
.ticker-container {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #000;
  /* black BG */
  color: #fff;
}

/* Common Ticker Row Styles */
.ticker-track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  transition: transform 0.05s linear;
  font-size: 4rem;
  line-height: 80px;
  padding: 0 2rem;
}

/* FIRST ROW at top: 0 */
#ticker1 {
  top: 0;
  left: 900px;
}

/* SECOND ROW below first row by 80px (no 50% offset) */
#ticker2 {
  top: 110px;
  right: 0px;
}

/* Outline text trick (for Chrome/Safari).
   For cross-browser, use an actual Outline font. */
.outline {
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  /* Or if you have "FuturaOutline":
     font-family: "FuturaOutline";
  */
}

/* A bit of spacing for each span */
.ticker-track span {
  display: inline-block;
  font-weight: bold;
  letter-spacing: 1px;
}

/*************************************
 * VIDEO BACKGROUND
 *************************************/




.image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('img.jpg');
  background-size: cover;
  background-position: center;
  /* Optional, to match video style */
}

.text-orange {
  color: #f98204;
}

.outline-orange {
  color: transparent;
  /* No fill */
  -webkit-text-stroke: 1px orange;
  /* Orange outline */
}

.navbar-nav .nav-link {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0%;
  background-color: #fff;
  transition: width 0.4s ease;
}

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

.navbar-nav .nav-link:hover {
  color: orange;
  /* golden glow */
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgb(255, 147, 7);
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid orange;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background-color 0.3s ease;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

/* Loader Fullscreen */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  /* loader background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Spinner */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Logo Styling */
.loader-logo {
  width: 580px;
  /* adjust size as needed */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 3.2s ease forwards;
}

/* Logo fade-in effect */
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hide loader on fade out */
#loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.promo-section {
  background-color: #f25c05;
  /* Bright orange */
  color: white;
  padding: 60px 30px;
  border-radius: 20px;
  text-align: center;
}

.promo-section h2 {
  font-weight: bold;
  font-size: 3rem;
}

.promo-section p {
  margin-top: 10px;
  font-size: 1.7rem;
}

.promo-btn {
  background-color: white;
  color: black;
  font-weight: 700;
  font-size: 3.5rem;
  border-radius: 50px;
  padding: 10px 30px;
  margin-top: 30px;
  box-shadow: 8px 14px #222;
  border: 4px solid #000;
  transition: all 0.2s ease-in-out;
}

.promo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 6px 8px #111;
}

.heading {
  font-weight: bold;
  font-size: 2rem;
  margin-top: 2rem;
  color: #000;
}

.highlight {
  color: white;
}

.card-custom {
  background-color: #e47435;
  border-radius: 30px;
  padding: 2rem;
  color: white;
  text-align: center;
  height: 100%;

  /* Add glow + transition like .culture-box */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
  border: 1px solid transparent;
  transition: all 0.3s ease-in-out;
}

/* Optional: On hover, increase glow and show border */
.card-custom:hover {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
  border: 1px solid white;
}


.icon-img {
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
}

.em-img {
  width: 260px;
  height: auto;
  margin-bottom: 1rem;
}

.build-img {
  margin-bottom: 1rem;
  width: 120px;
  height: auto;
  padding-top: 30px;
}

.rocket-img {
  margin-bottom: 0.6rem;
  width: 120px;
  height: auto;
  padding-top: 30px;
}

.scale-img {
  margin-bottom: 0.6rem;
  width: 120px;
  height: auto;
  padding-top: 10px;
}


.custom-row {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.underline-arrow {
  border-bottom: 3px solid #dd6a29;
  width: 100px;
  display: inline-block;
  margin-left: 10px;
  position: relative;
}

.underline-arrow::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border: solid #dd6a29;
  border-width: 0 3px 3px 0;
  padding: 4px;
  transform: rotate(-45deg) translateY(-50%);
}

.section-yellow {
  background-color: #fcb84b;
  padding: 3rem 3rem;
  max-width: 80%;
  margin: 100px auto 30px auto;
  border-radius: 30px;
  /* optional for a cleaner box look */
}


.bf-section {
  background-color: #000;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  padding: 60px 0;
  margin-bottom: 80px;
}

.bf-section-title {
  font-weight: 600;
  margin-bottom: 3rem;
  text-align: center;
  color: white;
}

.bf-section-title span {
  color: #ff6600;
  font-weight: 700;
}

.bf-arrow {
  color: #ff6600;
  font-size: 1.5rem;
}

.bf-card {
  background-color: #2c140a;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 24px;
  color: white;
  height: 100%;

  /* Glow + smooth transition */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease-in-out;
}

.bf-card:hover {
  border: 1px solid white;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}


.bf-img {
  width: 120px;
  height: auto;
  margin-bottom: 0.5rem;
}

.bf-card-title {
  color: #ff6600;
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 12px;
  font-family: 'Poppins';
}

.bf-card-text {
  font-size: 1.1rem;
  line-height: 1.5;
  font-family: 'Poppins';
  text-align: center;
}

/* Container for the entire map section */
.map-section {
  text-align: center;
  /* Center the map and text */
  margin-top: 20px;
  position: relative;
}

/* Text that appears above the map */
.map-text {
  font-size: 2.5rem;
  /* Adjust font size */
  font-weight: bold;
  color: white;
  padding-bottom: 100px;
  /* Space between the text and map */
}

/* Map container with markers */
.map-container {
  position: relative;
  width: 60%;
  /* Adjust width to fit your design */
  height: 80vh;
  /* Adjust height for the map */
  margin: 0 auto;
  /* Center map horizontally */
}

/* Map image styling */
.map-img {
  width: 100%;
  height: auto;
}

/* Marker styling */
.marker {
  position: absolute;
  width: 10px;
  /* Small dot size */
  height: 10px;
  /* Small dot size */
  background-color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgb(255, 238, 0);
  /* Initial "radiation" effect */
  animation: pulse 2s infinite;
  /* Apply pulse animation */
}

/* Pulse effect animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(255, 186, 88);
    /* Start with small shadow */
  }

  50% {
    box-shadow: 0 0 10px 10px rgb(255, 186, 88);
    /* Expand the shadow */
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 105, 180, 0);
    /* Shrink back */
  }
}

/* Hover effect for marker */
.marker:hover {
  background-color: rgb(238, 255, 0);
  /* Slightly change color when hovered */
}

/* Positioning the markers */
.marker-nyc {
  top: 42%;
  left: 74.5%;
}

.marker-beijing {
  top: 40%;
  left: 66.5%;
}

.marker-nairobi {
  top: 40%;
  left: 63.5%;
}

.marker-UK {
  top: 27%;
  left: 49%;
}

.marker-US {
  top: 33%;
  left: 18%;
}

/* Tooltip styling */
.marker::after {
  content: attr(title);
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  font-size: 0.9rem;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* Prevent it from blocking the marker interaction */
}

/* Show tooltip when hovering over the marker */
.marker:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Add custom positioning for markers if needed */
.marker-nyc:hover::after {
  bottom: 40px;
}

.marker-beijing:hover::after {
  bottom: 40px;
}

.marker-nairobi:hover::after {
  bottom: 40px;
}

.marker-UK:hover::after {
  bottom: 40px;
}

.marker-US:hover::after {
  bottom: 40px;
}