/* Import Google Fonts: Lexend and Caveat */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Lexend&display=swap');

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
<style>
 


body {
    background-color: #000000;
    color: #008080; /* Teal Body Text */
    font-family: 'Lexend', sans-serif;
    line-height: 1; /* Tight vertical spacing */
    letter-spacing: normal; 
    width: 100vw;
    margin: 0 auto;
    overflow-x: hidden; /* Prevents side-scrolling/wobble */
}

 
  
  .full-width-breakout {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background-color: #000000;
    padding: 20px 0;
    text-align: center;
    box-sizing: border-box;
  }
  
.banner-img {
    width: 95vw;
padding: 30px 20px; 
justify-content: center;
background-image: url('christianity_without_religion_fact_backed_faith_based.png'); 

    background-size: cover;
background-position: center;
display: block;
    margin: 0 auto; 
 

}


/* Navigation - Sticky at Top (Z-index keeps it on top) */
nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #000000;
    z-index: 1000; 
    padding: 2vh 0;
}




/* Regular Body Text - Lexend */
.text{
    font-family: 'Lexend', sans-serif;
    font-size: 3vw;
}

/* Special Tight Class for narrow areas */
.tight-text {
    letter-spacing: -0.07vw; /* Pulls letters closer together */
    word-spacing: -0.1vw;    /* Pulls words closer together */
}

/* Header & Title Styles - Caveat Cursive */
h1, .title {
    font-family: 'Caveat', cursive;
    color: #8A9A5B; /* Olive Sage Green */
    font-size: 8vw;
    font-weight: 700;
}

 h2 {
    font-family: 'Caveat', cursive;
    color: #8A9A5B; /* Olive Sage Green */
    font-size: 6vw;
    font-weight: 600;
}

 h4, h3 {
    font-family: 'Caveat', cursive;
    color: #8A9A5B; /* Olive Sage Green */
    font-size: 5vw;
    font-weight: 600;
}




/* Link Styles */
a {
    color: #008080;
    text-decoration: none;
}



 
  /* This is the White Rounded Card */
  .ProjectCard {
    width: 100vw;
gap: 2vw;
    display: flex;
    align-items: center;
justify-content: center;
    overflow: hidden;
  }

  /* Force the side-by-side  split */
.Column-Img {
    width: 50vw;
 align-img: center; 

    border-radius: 3vw;
 overflow: hidden;
     display: block;
flex-shrink: 0;

    box-sizing: border-box;
}
  
  .Column-Text {
    width: 40vw;
 background-color: #ffffff;
 border-radius: 3vw;
    padding: 3vw;
flex-shrink: 0;
font-size: 3vw;
 text-align: left;

  }

 
  
   




  /* The Sage & Teal on one line */
  .Sage {
    font-family: 'Caveat', cursive;
    color: #8A9A5B;
    font-size: 5vw;
    display: inline;
  }

  .Teal  {
    font-family: 'Lexend', sans-serif;
    color: #008080;
    font-size: 3vw;
    display: inline;
  }

  /* The Magic "Reverse" for the Checkered Look */
  .Reverse {
    flex-direction: row-reverse;
  }

/* Footer - Lexend Font */
footer {
   
font-family: 'Lexend', sans-serif;
    width: 100%;
    text-align: center;
    font-size: 2.65vw;
    padding: 3vh 0;
    margin-top: 5vh;
    border-top: 0.2vw solid #8A9A5B; /* Fluid Olive divider line */
    color: #008080;
}
</style>