/* --- CSS RESET & BASE STYLES --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Color Palette derived from the image */
  --main-bg: #040a2a; /* Main deep blue background */
  --card-bg: #0b1641; /* Slightly lighter blue for cards */
  --border-blue: #007bff; /* Border accent blue */
  --accent-yellow: #ffd700; /* Yellow for headings/icons */
  --tag-blue-bg: #007bff; /* Background for transportation tag */
  --text-white: #ffffff;
  --placeholder-gray: #7a7a7a;

  /* Gaps & Paddings */
  --wrapper-padding: 0 20px;
  --main-gap: 40px;
  --card-gap: 20px;
  --section-vertical-padding: 60px;
}

body {
  background-color: var(--main-bg);
  color: var(--text-white);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.projects-page {
  min-height: 100vh;
  color: #fff;
}

.projects-header {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #132170;
  box-shadow: 0 3px 12px rgba(5, 10, 36, 0.22);
}

.projects-header-inner {
width: 100%;
    margin: 0 auto;
    padding: 14px 30px;
}

/* --- UTILITY & WRAPPERS --- */
.main-container {
  max-width: 1920px; /* Base size. Will fit desktop screens */
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
}

.main-container::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(160deg, rgba(24, 36, 88, 0.86) 36.04%, rgba(46, 86, 253, 0.86) 86.1%);
  stroke-width: 1px;
  stroke: #000;
  filter: blur(300px);
  z-index: -1;
}

.wrapper {
  max-width: 1400px; /* Common maximum width for inner content */
  margin: 0 auto;
  padding: var(--wrapper-padding);
}

.placeholder-label {
  color: var(--placeholder-gray);
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: uppercase;
}

/* --- GRID SYSTEM UTILITIES --- */
.grid-2-col,
.grid-3-col {
  display: grid;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .grid-2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- HERO BANNER SECTION --- */
.banner-section {
  /* width: 90%; */
  margin: 75px auto 50px auto;
}

.banner-image-placeholder {
  width: 100%;
  height: 400px; /* Placeholder height, change based on actual image aspect ratio */
  background-color: #2a2a2a; /* Temporary gray for image area */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
}
.banner-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
/* This placeholder can be a background image in a real project */
/* .banner-image-placeholder {
    background-image: url('banner-image.jpg');
    background-size: cover;
    background-position: center;
}
*/

/* --- ABOUT SECTION --- */
.about-section {
  padding-bottom: 40px;
}

.section-subtitle {
  display: block;
  color: var(--accent-yellow);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 1.5px;
}

.main-heading {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.intro-paragraph {
  font-size: 16px;
  margin-bottom: 30px;
}

.tags-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap; /* Wraps on smaller screens */
  justify-content: space-between;
}

.tag {
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-blue {
  background-color: var(--tag-blue-bg);
}

.tag-blue-icon {
  background-color: var(--tag-blue-bg);
  font-size: 14px;
  font-weight: 700;
}
.tag-blue-icon .icon {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.9999 1.33337C5.0599 1.33337 2.66657 3.72671 2.66657 6.66671C2.64657 10.96 7.41323 14.4 7.61323 14.5467C7.72657 14.6267 7.86657 14.6734 7.9999 14.6734C8.13323 14.6734 8.27323 14.6334 8.38657 14.5467C8.58657 14.4 13.3532 10.9667 13.3332 6.66671C13.3332 3.72671 10.9399 1.33337 7.9999 1.33337ZM7.9999 9.33337C6.52657 9.33337 5.33323 8.14004 5.33323 6.66671C5.33323 5.19337 6.52657 4.00004 7.9999 4.00004C9.47323 4.00004 10.6666 5.19337 10.6666 6.66671C10.6666 8.14004 9.47323 9.33337 7.9999 9.33337Z' fill='white'/%3E%3C/svg%3E");
}
.tag-white-icon {
  background: #d5d9e7;
  color: #001246;
  font-size: 12px;
  font-size: 12px;
}
.tag-white-icon .icon {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='19' viewBox='0 0 17 19' fill='none'%3E%3Cpath d='M8.25546 18.5353C7.96564 18.5353 7.67582 18.465 7.42113 18.3157L0.834329 14.5129C0.582539 14.3655 0.373298 14.1553 0.227058 13.9029C0.0808182 13.6504 0.0025831 13.3644 0 13.0726V5.46705C0 4.86984 0.316167 4.32533 0.834329 4.02673L7.42113 0.223951C7.93051 -0.0746504 8.57163 -0.0746504 9.08979 0.223951L15.6678 4.02673C16.1772 4.32533 16.5021 4.87863 16.5021 5.46705V13.0638C16.5021 13.661 16.186 14.2055 15.6678 14.5041L9.08979 18.3069C8.8351 18.4562 8.54528 18.5265 8.25546 18.5265V18.5353ZM1.76526 13.0199L8.25546 16.77L14.7457 13.0199V5.51974L8.25546 1.77844L1.76526 5.51974V13.0199Z' fill='%23041938'/%3E%3Cpath d='M6.14662 8.87473H4.39014V11.9661H6.14662V8.87473ZM11.8727 7.75058H10.1163V11.9661H11.8727V7.75058ZM9.00968 5.94141H7.2532V11.9661H9.00968V5.94141Z' fill='%23041938'/%3E%3C/svg%3E");
}
.icon {
  font-size: 1.1rem;
}

/* --- MAIN INFO CARDS SECTION --- */
.info-cards-section {
  padding-bottom: var(--section-vertical-padding);
}

.card {
  background-color: var(--card-bg);
  border: 2px solid var(--border-blue);
  border-radius: 12px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.hex-icon-container {
  width: 50px;
  height: 50px;
  border-radius: 8px; /* Temporary square placeholder */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* You can style this into a real hexagon with CSS clip-path in real use */
/* .hex-icon-container {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
*/

.placeholder-icon {
  color: var(--placeholder-gray);
  font-size: 0.7rem;
  font-weight: bold;
}

.card-heading {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
}

.card-paragraph {
  color: #fff;
  text-align: justify;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}

.bullet-list,
.bullet-list-percentages,
.small-bullet-list {
  list-style-type: none;
  color: #fff;
  text-align: justify;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}
.bullet-list-percentages li,
.bullet-list li,
.small-bullet-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}

.bullet-list-percentages li::before,
.bullet-list li::before,
.small-bullet-list li::before {
  content: "•"; /* Standard bullet point, can be replaced with custom image */
  position: absolute;
  left: 0;
  color: var(--text-white);
  font-size: 1.2rem;
  top: -3px;
}

.percentage {
  color: #4caf50; /* Green color from image */
  font-weight: bold;
  min-width: 60px; /* Fix percentage widths for alignment */
  text-align: right;
}

/* --- STOCKHOLDERS SECTION --- */
.stockholders-section {
  text-align: center;
  padding-bottom: var(--section-vertical-padding);
}

.interest-strip {
  margin: 0 0 72px;
  padding: 36px 0;
  background: linear-gradient(90deg, #244de9 0%, #1f45d5 100%);
}

.interest-strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.interest-strip h2 {
  margin: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  max-width: 670px;
}

.interest-strip-cta {
  min-width: 220px;
  min-height: 58px;
  padding: 14px 22px;
  border: 0;
  border-radius: 10px;
  background: #ffcc00;
  color: #111125;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.large-heading {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: var(--main-gap);
  line-height: 1.2;
}

.logos-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  opacity: 0.8; /* Subtle logos */
}
.logos-row .swiper-slide img {
  width: 90%;
  height: auto;
  margin: 0 auto;
  filter: grayscale(100%) brightness(0) contrast(0);
}
.logos-row .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logos-row .swiper-slide:hover img {
  filter: grayscale(0%) brightness(1) contrast(1);
}
.logo-placeholder {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 20px;
  border-radius: 4px;
  /* Optional grayscale filter placeholder to align with the image's logo style */
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.logo-placeholder:hover {
  filter: grayscale(0%);
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* --- JORDAN OVERVIEW SECTION --- */
.jordan-overview-section {
  padding-bottom: calc(var(--section-vertical-padding) + 40px);
}

.jordan-overview-section .section-subtitle {
  text-align: center;
}
.large-heading-main {
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: var(--main-gap);
  line-height: 1.2;
  width: 50%;
  margin: 0 auto 60px auto;
}

/* Grid Top Row specific Card variations */
.text-card p,
.small-paragraph {
  color: #fff;
  text-align: justify;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}

.map-card {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background-color: #2a2a2a; /* TEMPORARY MAP AREA COLOR */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* This map placeholder can have an actual world map image as background in production */
/* .map-placeholder {
    background-image: url('jordan-map-in-world.jpg');
    background-size: cover;
    background-position: center;
}
*/

.icon-text-card,
.graph-card,
.investment-card,
.vision-card {
  text-align: center;
}

.card-header-v {
  display: flex;

  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.mini-heading {
  color: #ffffff;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
}
.img-wrapper img {
  width: 100%;
  height: auto;
}

.graph-card-text-only {
  justify-content: center;
}
/* Bottom Grid variations */
.small-bullet-list,
.small-bullet-list li {
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.8;
}

.small-bullet-list li {
  padding-left: 15px;
}
.small-bullet-list li::before {
  font-size: 1rem;
}

/* CSS-based Graph placeholder for Elementum Box */
.graph-placeholder {
  width: 80%;
  height: 60px;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  align-items: flex-end; /* Bars align to bottom */
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  padding: 5px;
}

.graph-bar {
  width: 15px;
  background-color: var(--border-blue);
  border-radius: 2px 2px 0 0;
}

.bar1 {
  height: 70%;
}
.bar2 {
  height: 50%;
}
.bar3 {
  height: 90%;
}
.bar4 {
  height: 30%;
}

/* --- RESPONSIVE MEDIA QUERIES (Stacking columns on mobile) --- */
@media (max-width: 991px) {
  .main-heading {
    font-size: 2.5rem;
  }

  .interest-strip h2 {
    font-size: 44px;
  }

  .grid-row-bottom .card,
  .grid-row-top .card {
    padding: 20px;
  }
}

@media (max-width: 767px) {
  .wrapper {
    padding: 0 15px;
  }

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

  .large-heading,
  .large-heading-main {
    font-size: 1.8rem;
  }

  .interest-strip {
    padding: 28px 0;
    margin-bottom: 48px;
  }

  .interest-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .interest-strip h2 {
    font-size: 34px;
  }

  .interest-strip-cta {
    width: 100%;
    min-width: 0;
  }

  .info-cards-section,
  jordan-overview-section {
    padding-bottom: 40px;
  }

  .tags-row {
    gap: 10px;
  }

  .special-heading-box {
    padding: 15px 20px;
    width: 100%;
    text-align: center;
  }

  .stockholders-section {
    padding-bottom: 40px;
  }

  .logos-row {
    justify-content: center;
    gap: 20px;
  }

  .map-card {
    height: 200px;
  }
}