/* body{
    background-color: #263277;
    margin: 0;
    padding: 0;
    background-image: url("images/homepage/texture.jpg"); 
    background-position: top;
    background-size: 100%;
     background-blend-mode: multiply;
  
} */
body {
  margin: 0;
  padding: 0;
  background-color: #212b63;
  position: relative;
}

/* Background image layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image: url("images/homepage/texture.webp");
  background-size: 100%;
  background-position: top;
  background-repeat: repeat;

  transform: scaleX(-1);   /* ⬅ flips the image horizontally */
  opacity: 0.8;            /* ⬅ background image only */
  mix-blend-mode: multiply;

  pointer-events: none;
  z-index: -1;
}


@font-face {
  font-family: "NewSpirit";
  src: url("fonts/NewSpiritTRIAL-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "FoundersGrotesk";
  src: url("fonts/test-founders-grotesk-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "starthings";
  src: url("fonts/starthings.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
p{
    padding: 0;
    margin: 0;
    font-family: "FoundersGrotesk" ;
}
.hero h1{
    padding: 0;
    margin: 0;
    margin-bottom: -1rem;
    font-size: 8rem;
    align-items: left;
    font-family: "NewSpirit";
    font-weight: 200;
    color: white;
    
}
.about_hero h1{
    padding: 0;
    margin: 0;
    font-size: 6.5rem;
    align-items: left;
    font-family: "NewSpirit";
    font-weight: 200;
    color: white;
    
}
.banner-track h2{
    margin: 0;
    line-height: 0;
    font-family: "FoundersGrotesk";
    font-size: 2rem;
    color: #FF9378;
    padding: 0rem;
    font-weight:500;
}
.about_subtitle h2{
    margin: 0;
    line-height: 0;
    font-family: "FoundersGrotesk";
    font-size: 1.5rem;
    color: #FF78C5;
    padding: .5rem;
    font-weight: 500;
}
.project_highlight h3{
    padding: 0;
    margin: 0;
    font-family: "NewSpirit";
    font-weight: 200;
    font-size: 3rem;
    margin-left: 16rem;
    padding-bottom: 0;
    padding-top: 2rem;
    color: #ffffff;
}
.info .title_main h3{
    padding: 0;
    margin: 0;
    font-family: "NewSpirit";
    font-weight: 200;
    font-size: 3rem;
    /* margin-left: 16rem; */
    padding-bottom: 1.5rem;
    padding-top: 2rem;
    color: #ffffff;
}

.project_highlight p{
    padding: 0;
    margin: 0;
    margin-left: 16rem;
    padding-top: .5rems;
    padding-bottom: 1rem;
    font-size: 1.2rem;
    color: #ffffff;
}
.info .title_main p{
    padding: 0;
    margin: 0;
    /* margin-left: 16rem; */
    padding-top: .5rems;
    padding-bottom: 1rem;
    font-size: 1.2rem;
    color: #ffffff;
}
.banner-track p{
    margin: 0;
    line-height: 0s;
    font-family: "starthings";
    font-size: 2rem;
    color: #FF9378;
    padding: 0;
}
.about_subtitle p{
    margin: 0;
    line-height: 0s;
    font-family: "starthings";
    font-size: 1rem;
    color: #FF78C5;
}


/* NAV BAR EDITING  */

.navbar {
  padding: 20px 40px;
  background-color: #212b63;
  position: sticky;
  top: 0;
  z-index: 1000; /* keeps it above content */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tracker */
.nav-tracker {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tracker */
.nav-tracker a {
  text-decoration: none;
  color: #dcddff; /* default */
  font-family: "NewSpirit";
  font-weight: 500;
  font-size: 1.3rem;
  transition: color 0.3s ease;
}

/* Current section */
.nav-tracker a.active {
  color: #FF9378;
}

/* Sections already passed */
.nav-tracker a.passed {
  color: #FF9378; /* lighter but still "on" */
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}
.nav-links li:not(:last-child)::after {
  content: "x";
  margin: 0 16px;
  color: #DDDAFC;
  font-family: "starthings"; /* ⬅️ font for x */
  font-size: 1rem;                   /* optional */
}
.nav-links a {
    margin: 0;
    text-decoration: none;
    line-height: 0;
    color: #DDDAFC;
    font-size: 1.3rem;
    font-family: "NewSpirit";
    font-weight: 200;
    
}

.nav-links a:hover {
    color: #FF9378;
}
.nav-links p{
    margin: 0;
    line-height: 0;
    color: #DDDAFC;
    font-family: "starthings";
}



/* NAV BAR EDITING  */



.hero {
    margin: 0;
    padding-top:4rem ;
    /* padding-bottom: 5rem; */
    padding-left: 12rem;
    padding-right: 12rem;
    display: flex;
    flex-direction: column;
    color: white;
    background-image: url("images/homepage/emphasis\ box.png");
    
    background-size: 80%;
    background-position: center 3rem; 
    background-repeat: no-repeat;
}
.content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.project_highlight{
    margin: 0;
    /* background-color: #CADEE8; */
}
.subtitle{
    margin-top: 0;
    display: flex;
    flex-direction: row;
}
.about_subtitle {
    margin-top: 0;
    display: flex;
    flex-direction: row;
}

.tagline{
    margin: 0;
    padding: 0rem;
    padding-bottom: 8rem;
    padding-top: 7rem;
    display: flex;
    flex-direction: column;
    /* margin-left: 27rem; */

    font-size: 1.2rem;
    background-image: url(images/homepage/arrow1.png);
    background-position: right 7rem;
    background-size: 80%;
    background-repeat: no-repeat;
}
.tagline p{
 max-width: 90%;
}

.tagline_header{
    font-size: 1.8rem;
    font-weight:700;
    font-style: italic;
    padding-bottom: .5rem;
    max-width: 90%;
}
.project_highlight{
    margin: 0;
    padding: 0;
}

.project_highlight {
    margin: 0;
    padding: 0;
    /* background-color: #CADEE8; */
}

.project_highlight .cards {
    display: flex;
    /* grid-template-columns: repeat(4, 1fr);  */
    flex-direction: row;
    gap: 3rem;
    margin-left: 8rem; /* account for 3rem left/right margin */
    margin-right: 8rem;        /* match text margin */
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 3rem;
    padding-right: 3rem;
    box-sizing: border-box;
    background-image: url(images/homepage/emphasis\ box\ 2\ .png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.project_highlight .cards a {
    display: block;
    transition: transform 0.3s ease;
}

.project_highlight .cards img {
    max-width:100%;
    height: auto;
    display: block;
 
    
}
.project_highlight .cards a:hover {
  transform: translateY(-4rem);
}

.info{
    align-items: flex-end;
    margin-right: 8rem;
    /* margin-left: 5rem; */
}
.info p{
    max-width: 100%;
    font-size: 1.2rem;
    color: white;
}
.about_hero{
    margin-left: 3rem;
}
/* .project_highlight_header{
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    gap: 0;

} */
/* .arrow img{
    max-width: 60%;
    padding-top: 2rem;
    max-height: 80%;
} */

.info h3{
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    color: #FF9378;
    line-height: 0;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 400;
}

.lets_talk .title p{
    margin: 0;
    padding: 0;
    color: #FF9378;
    font-family: "starthings";
    font-size: 1rem;
    margin-top: 2rem;
    padding: 0;
    margin-bottom: 1rem;
    line-height: 0;
}

.lets_talk .title{
    display: flex;
    flex-direction: row;
}
.lets_talk .links{
    
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
    padding: 0;
    margin-bottom: 1rem;
    line-height: 0;
    gap: 2rem;
}
.lets_talk a{
    padding: 0;
    margin: 0;
    font-family: "FoundersGrotesk" ;
    color: white;
    font-size: 1.25rem;
    text-decoration: none;
}

.activities {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.my_img p{
    padding: 0;
    margin: 0;
    font-family: "FoundersGrotesk" ;
    color: white;
    font-size: 1rem;
    padding-left: 7rem;
    padding-bottom: 3rem;
}
.my_img img{
    max-width: 70%;
    /* padding: 3rem; */
    margin-left: 7rem;
    padding-bottom: 4rem;
    /* margin-top: 3rem; */
}

.box{
    padding: 2rem;
    background-image: url(images/homepage/emphasisbox3.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

/* Container - fixed size, hides overflow */
.banner-area {
  width: 100%;           /* adjust as needed */
  height: 2.5rem;
  overflow: hidden;
  white-space: nowrap;
  padding-top: 0;
  position: relative;
}

/* Banner track - scrolls left continuously */
.banner-track {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  animation: scroll 20s linear infinite;
}

/* Scroll animation - moves exactly half the track width */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Optional: style text nicely */
.banner-track h2,
.banner-track p {
  margin: 0;
  padding: 0;
}

.arrow_2 img{
    max-width: 40%;
    margin-left: 15rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    /* padding-right: 12rem; */
}