/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /*
    Variables
  */
  :root {
  --drop-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.17), 0 6px 20px 0 rgba(0, 0, 0, 0.1) ;
}
  /*
    Fonts
  */
  @font-face {
    font-family: 'BigBird';
    src: url('fonts/BigBird.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Verdaguera';
    src: url('fonts/Verdaguera.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
  font-family: 'PBS Sans';
  font-weight: 200;
  font-style:normal;
  src:  url('fonts/PBSSansLight.woff') format('woff');
  }
  
  
  @font-face {
  font-family: 'PBS Sans';
  font-weight: 500;
  font-style:normal;
  src: url('fonts/PBSSansMedium.woff') format('woff');
  }
  

  @font-face {
  font-family: 'PBS Sans';
  font-weight: 900;
  font-style:normal;
  src: url('fonts/PBSSansBlack.woff') format('woff');
  }
  

  @font-face {
  font-family: 'PBS Sans';
  font-weight: 400;
  font-style:normal;
  src: url('fonts/PBSSans.woff') format('woff');
  }
  

  @font-face {
  font-family: 'PBS Sans';
  font-weight: 700;
  font-style:normal;
  src:  url('fonts/PBSSansBold.woff') format('woff');
  }

  /*
    General Styles
  */

  p, a, span {
    font-family: 'PBS Sans', sans-serif;
    font-weight: 300;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-family: BigBird, serif;
  }

  h2 {
    padding-bottom: 0.5rem;
    font-size:2.6rem;
    font-weight:normal;
  }

  
  /* Container Layout */
  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  
  /* 
  ___  ___  _______   ________  ________  _______   ________     
  |\  \|\  \|\  ___ \ |\   __  \|\   ___ \|\  ___ \ |\   __  \    
  \ \  \\\  \ \   __/|\ \  \|\  \ \  \_|\ \ \   __/|\ \  \|\  \   
   \ \   __  \ \  \_|/_\ \   __  \ \  \ \\ \ \  \_|/_\ \   _  _\  
    \ \  \ \  \ \  \_|\ \ \  \ \  \ \  \_\\ \ \  \_|\ \ \  \\  \| 
     \ \__\ \__\ \_______\ \__\ \__\ \_______\ \_______\ \__\\ _\ 
      \|__|\|__|\|_______|\|__|\|__|\|_______|\|_______|\|__|\|__| 
*/
                                                                  
                                                                  
                                                                  
  
  /* Header */
  .site-header {
    background-image: url('images/header.png');
    background-size: cover;
    border-bottom: 1px solid #fff;
    /* position: sticky; */
    top: 0;
    z-index: 1000;
    color: #fff;
    font-family: BigBird, serif;
  }
  
  
  /* Nav */
  .header-right .nav {
    list-style: none;
    display: flex;
    gap: 1.5rem;
  }

  .header-left {
    display: flex;
    gap: 10px;
  }

  .header-left img {
    width: 80px;
    height: 30px;
    object-fit: contain;
  }
  
  .header-right .nav a {
    text-decoration: none;
    color: #fff;
    font-family: 'BigBird', serif;
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 1.2rem;
  }
  
  .header-right .nav a:hover {
    color: #858863;
  }
  
  /* Responsive (optional) */
  @media (max-width: 768px) {
    .container {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .header-right .nav {
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 1rem;
    }
  }
  

/* 
 ________ ________  ________  _________  _______   ________     
|\  _____\\   __  \|\   __  \|\___   ___\\  ___ \ |\   __  \    
\ \  \__/\ \  \|\  \ \  \|\  \|___ \  \_\ \   __/|\ \  \|\  \   
 \ \   __\\ \  \\\  \ \  \\\  \   \ \  \ \ \  \_|/_\ \   _  _\  
  \ \  \_| \ \  \\\  \ \  \\\  \   \ \  \ \ \  \_|\ \ \  \\  \| 
   \ \__\   \ \_______\ \_______\   \ \__\ \ \_______\ \__\\ _\ 
    \|__|    \|_______|\|_______|    \|__|  \|_______|\|__|\|__|  
*/

.site-footer {
    /* background-image: url('/css/images/footer.png');  */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    color: white;
    font-family: serif;
    font-size: 0.9rem;
    margin-top: -100px;
  }

  .site-footer a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 1200px;
    margin: 0 auto;

    flex-wrap: wrap;
  }
  
  .footer-top {
    background-image: url('images/footer-top.png'); /* Update with your actual path */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    z-index:10000;
    position: relative;
  }

  .footer-top-inner {
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-flow: row nowrap;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    gap: 2rem;
    margin-bottom: -3rem;
  }

  .footer-top-inner img {
    width:13%;
    max-width: 200px;
  }

  .footer-bottom {
    background-image: url('images/footer-bottom.png'); /* Update with your actual path */
    background-size:cover;
    display: flex;
    justify-content: center;
    width: 100%;  
    padding: 0.5rem 0;
    color: white;
  }

  .footer-bottom-inner {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding:0 40px;
    max-width: 925px;
  }
  
  .footer-left {
    flex: 1;
    min-width: 300px;
  }
  
  /* .footer-logos {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .footer-logos img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background-color: #aaa;
    border-radius: 50%;
  } */

  #footer-middle-image{
    height:auto;
    width: 15.5%;
    max-width: 350px;
  }
  
  .footer-text{
    margin: 0.25rem 0;
    font-family: 'PBS Sans', sans-serif
  }
  
  .footer-right {
    flex: 1;
    min-width: 300px;
    font-size: 0.9rem;
    line-height: 1.4;
  }


  /* Splash Image */
.splash-image {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    margin-top:-1px; /* close white line gap with nav bar*/
}

.splash-image img {
    width: 100%;
    height: auto;
    display: block;
}

.splash-btn {
    position: absolute;
    top: 77%;
    left: 55%;
    min-width: 25%;
    text-align: center;
    /* transform: translateX(-50%); */
    background-color: #000;
    color: white;
    padding: 6px 10px;
    border: none;
    font-size: 2.1rem;
    font-weight: 200;
    cursor: pointer;
    font-family: 'BigBird', serif;
    text-decoration: none;
}


/* 
 ________  ___  ___  ________  _________  _______      
|\   __  \|\  \|\  \|\   __  \|\___   ___\\  ___ \     
\ \  \|\  \ \  \\\  \ \  \|\  \|___ \  \_\ \   __/|    
 \ \  \\\  \ \  \\\  \ \  \\\  \   \ \  \ \ \  \_|/__  
  \ \  \\\  \ \  \\\  \ \  \\\  \   \ \  \ \ \  \_|\ \ 
   \ \_____  \ \_______\ \_______\   \ \__\ \ \_______\
    \|___| \__\|_______|\|_______|    \|__|  \|_______|
          \|__|                                        
*/

.quote-block {
    background-image: url('images/home_bg_paper.png'); /* Replace with your image */
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    margin-top: -4rem; /* Pulls it up to overlap the section above */
    margin-bottom: -4rem; /* Same for below */
    z-index: 1;
    height: 200px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .quote-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    color: #222;
    font-family: 'PBS Sans', sans-serif;
    padding-top: 25px;
  }
  
  .quote-block blockquote p {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
    padding: 0 2rem;
  }
  
  .quote-mark {
    font-size: 4rem;
    font-weight: bold;
    color: #000;
    position: absolute;
    top: 25px;
  }
  
  .quote-mark.left {
    left: 0;
    transform: translateX(-50%);
  }
  
  .quote-mark.right {
    right: 0;
    transform: translateX(50%);
  }


  /* Outer full-width section */

  
/* 
 ________  ________  ________   _________  _______   ________   _________   
|\   ____\|\   __  \|\   ___  \|\___   ___\\  ___ \ |\   ___  \|\___   ___\ 
\ \  \___|\ \  \|\  \ \  \\ \  \|___ \  \_\ \   __/|\ \  \\ \  \|___ \  \_| 
 \ \  \    \ \  \\\  \ \  \\ \  \   \ \  \ \ \  \_|/_\ \  \\ \  \   \ \  \  
  \ \  \____\ \  \\\  \ \  \\ \  \   \ \  \ \ \  \_|\ \ \  \\ \  \   \ \  \ 
   \ \_______\ \_______\ \__\\ \__\   \ \__\ \ \_______\ \__\\ \__\   \ \__\
    \|_______|\|_______|\|__| \|__|    \|__|  \|_______|\|__| \|__|    \|__|
                                                                                                                                
*/





  .content-section {
    width: 100%;
    padding: 4rem 8%;
    background-image: url('images/bg_watercolor_tileable.png');
    background-size: contain;
    background-repeat: repeat-y;
    padding-top: 120px;
    padding-bottom: 150px;
    gap: 20px;
    z-index: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;

  }

  .expandable-content {
    max-width: 1000px;
    margin: 0 auto;
    display: block;
    width: 100%;
  }

  .expandable-header {
    width: 100%;
    background-color: #000;
    
  }

  .expandable-header button {
    width: 100%;
    background-color: #000;
    text-align: left;
    font-family: 'BigBird', serif;

    font-size: 1.5rem;
  }
  .toggle-label {
    font-family: 'BigBird', serif;
    font-size: 1.5rem;
  }
  .expandable-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
  }

  .white-padded-box {
    background-color: white;
    box-shadow: var(--drop-shadow);
    padding: 2rem;
  }

  .expandable-image {
    position: relative;
    /* flex: 1 1 40%; */
    text-align: center;
    /* height: 300px; */
    max-width: 65%; 
    margin-left:-10%; 
    
  }
  .content-image-fit {
    position: relative;
    /* flex: 1 1 40%; */
    text-align: center;
    /* height: 300px; */
    max-width: 65%; 
    margin-right:-2%; 
    
  }
  .content-block__copy .expandable-image, .content-block__copy .content-image-fit{
    float:left;
    padding-right:1rem;
    padding-bottom:1rem;
    width: 100%;
    max-width: 70%;
    margin-left:-5%
  }

  /*adjust image for first larger conent block in about filmmakers*/
  #filmmaker-img-1{
    max-width:50%;
    margin-left:0%;
  }

  .about-content-title{
    text-align:center;

  }

  /* creates aging paper border effect that tiles to match shape of image*/
  .expandable-image img {
    width: 100%;
    height: auto;
    transform: rotate(-2.5deg);
    border: 3vw solid transparent;
    border-image: url('images/photo_003.png') 85 stretch;
    position: relative;
    top: 5px;
    
    z-index: 5; /* Under the background overlay */
  }

  .about-content-block-text{
    padding-top:25px;
  }

  .content-image-fit img {
    width: 100%;
    height: auto;
    transform: rotate(2.5deg);
    border: 3vw solid transparent;
    border-image: url('images/photo_003.png') 85 stretch;
    position: relative;
    top: 5px;
    
    z-index: 5; /* Under the background overlay */
  }

  .resources-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    padding: 4rem 4rem;
    padding-top: 2rem;
    margin-top: 2rem;
    background-color: white;
    box-shadow: var(--drop-shadow);
    /* border-radius: 16px; */
    transition: box-shadow 0.3s ease;
  }

  .resources-content h2 {
    font-size: 2rem;
    font-weight:normal;
  }
  
  /* Inner wrapper, centered and max width */
  .content-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
    background-color: white;
    box-shadow: var(--drop-shadow);
    padding: 20px;
  }

  /* Reverse layout (image on right) */
  .content-inner.reverse {
      flex-direction: row-reverse;
  }

  .content-image {
      position: relative;
      flex: 1 1 40%;
      text-align: center;
      height: 500px;
      left: -50px;
  }


  /* Overlay the background using a pseudo-element */
  .content-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/photo_001.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.35);
    z-index: 10;
    pointer-events: none; /* Let clicks go through */
  }
  
  .content-image img {
    width: 490px;
    height: auto;
    transform: rotate(-2.5deg);
    position: relative;
    top: -25px;
    z-index: 5; /* Under the background overlay */
  }

  .content-inner.reverse .content-image {
    left: auto;
    right: -50px;
    transform: rotate(5deg);

}
  
  /* Text content */
  .content-text {
    flex: 1 1 50%;
    padding-right: 20px;
    padding-left: 20px;
  }
  
  .content-text h2 {
    font-size: 2.6rem;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-top:1.5rem;
  }

.content-text h3 {
    font-size: 1.7rem;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-top:1.5rem;
  }
  
  .content-text p {
    font-size: 1.05rem;
    /* line-height: 1.6; */
    margin-bottom: 1rem;

  }



  button {
    background-color: #4a2a00;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.3s ease;
    font-family: Verdaguera, serif;
  }

  .education-advisors-section {
    width: 100%;
    padding: 4rem 8%;
    background-image: url('images/about_edadvisors_paper.png');
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center;
    padding-top: 80px;
    padding-bottom: 70px;
    gap: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: -40px;
    margin-bottom: -40px;
    align-items: center;
  }

  .education-advisors-section h2{
    font-weight: normal;
    border-bottom: 1px solid lightgrey;
    width: 40rem;
    text-align: center;
    padding-bottom: 1rem;
  }

  .advisor-grid {
    display:grid;
    grid-template-columns: 22% 22% 22% 22%;
    grid-template-rows: auto auto;
    gap: 4%;
    padding: 2rem 0;
    justify-content: flex-start;
    text-align: center;
    align-self: flex-start;
    margin: auto;
    max-width: 100%;
  }

  .advisor-block {
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    font-family: sans-serif;
  }

  .advisor-image img {
      width: 100%;
      height: auto;
      max-width: 240px;
      margin-bottom: 1rem;
      border-radius: 7px;
      flex: 1 1 100%;
      
  }

  .advisor-title {
      font-weight: bold;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      font-size: 1rem;
      letter-spacing: 1px;
  }

  .advisor-paragraph {
      font-size: 0.9rem;
      color: #333;
      line-height: 1.4;

  }

  /* 
   ________  ___  ___  ________  ___  ___  _______   ________  ________  _______   ________     
|\   ____\|\  \|\  \|\   __  \|\  \|\  \|\  ___ \ |\   __  \|\   ___ \|\  ___ \ |\   __  \    
\ \  \___|\ \  \\\  \ \  \|\ /\ \  \\\  \ \   __/|\ \  \|\  \ \  \_|\ \ \   __/|\ \  \|\  \   
 \ \_____  \ \  \\\  \ \   __  \ \   __  \ \  \_|/_\ \   __  \ \  \ \\ \ \  \_|/_\ \   _  _\  
  \|____|\  \ \  \\\  \ \  \|\  \ \  \ \  \ \  \_|\ \ \  \ \  \ \  \_\\ \ \  \_|\ \ \  \\  \| 
    ____\_\  \ \_______\ \_______\ \__\ \__\ \_______\ \__\ \__\ \_______\ \_______\ \__\\ _\ 
   |\_________\|_______|\|_______|\|__|\|__|\|_______|\|__|\|__|\|_______|\|_______|\|__|\|__|
   \|_________|                                                                                                                                                          
  */
  
  .subheader {
    width: 100%;
    padding: 2rem 1rem;
    height: 110px;
    color: #fff; 
    background-repeat: repeat-x;
    background-position: right;
    background-size: cover;
    background-image: url('images/subheader-background.png');
    position: relative;
    z-index: 1001;
    margin-bottom: -2rem;
    margin-top:-1px;
  }

  .subheader-inner {
    max-width: 1300px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: left;
    color: black;
    font-size: 2rem;
  }

  /* 
   ________  ________  ________  ___  ___  _________   
|\   __  \|\   __  \|\   __  \|\  \|\  \|\___   ___\ 
\ \  \|\  \ \  \|\ /\ \  \|\  \ \  \\\  \|___ \  \_| 
 \ \   __  \ \   __  \ \  \\\  \ \  \\\  \   \ \  \  
  \ \  \ \  \ \  \|\  \ \  \\\  \ \  \\\  \   \ \  \ 
   \ \__\ \__\ \_______\ \_______\ \_______\   \ \__\
    \|__|\|__|\|_______|\|_______|\|_______|    \|__|
                                                     
  */

  #about-content-section{
    padding-top:100px
  }

  .about-page-splash {
    width: 100%;
    height: auto;
    background-image: url('images/about_paper_001.png');
    background-size: 100% 100%;
    background-position: center;
    margin-bottom: -4rem;
    margin-top: -3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
  }

  .about-page-splash-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    padding: 4%;
    padding-top: 5em;
    padding-bottom: 4em;
  }

  #educators-page-splash>.about-page-splash-inner{
    padding:2.5em 0;
  }



  .about-text {
    flex: 1 1 50%;
  }
  .about-text h1 {
    font-size: 2em;
    font-weight: normal;
  }

  .about-text p {
    padding: 20px 0px;
    font-size: 1.05rem;
    font-weight: 300;
  }

  .about-button-wrapper{
    display:flex;
    justify-content: center;
  }

  .filmmakers-section{
    margin:auto;
  }

  .filmmakers-section>h2 {
    font-weight: normal;
    border-bottom: 1px solid lightgrey;
    width: 40rem;
    text-align: center;
    padding-bottom: 1rem;
    margin:auto;
    margin-bottom:1em;
  }


  .about-content-blocks-container{
    display:flex;
    justify-content: center;
    gap:3%;
    flex-flow: row wrap;
    max-width: 1200px;
    margin:auto;
    align-items:stretch;
  }

  .about-content-blocks-container .expandable-content{
    max-width: 48.5%;
    margin-top:3%;
  }
  
  .about-content-blocks-container .expandable-content:first-child{
    max-width: 100%;
  }

  /*make content blocks in one row same height*/
  .about-content-blocks-container .expandable-body{

    height: 100%;
  }

  .about-content-blocks-container .white-padded-box{
    height:100%;
  }

  .about-page-splash-inner img{
    flex: 1 1 60%;

  }

  #educator-page-thumbnail{
    max-width:33%;
    margin-left:0;
  }

  .hidden {
    display: none !important;
  }

  .about-video {
    flex: 1 1 50%;
    position: relative;
  }
  /* Responsive iframe container */
  .pbs-viral-player-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    overflow: hidden;
  }

  /* Full-fit iframe inside the container */
  .pbs-viral-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }



          /* ____                                                                     
        ,'  , `.                                     ,--,                          
     ,-+-,.' _ |                ,---,              ,--.'|                          
  ,-+-. ;   , ||   ,---.      ,---.'|         ,--, |  | :                          
 ,--.'|'   |  ;|  '   ,'\     |   | :       ,'_ /| :  : '               .--.--.    
|   |  ,', |  ': /   /   |    |   | |  .--. |  | : |  ' |      ,---.   /  /    '   
|   | /  | |  ||.   ; ,. :  ,--.__| |,'_ /| :  . | '  | |     /     \ |  :  /`./   
'   | :  | :  |,'   | |: : /   ,'   ||  ' | |  . . |  | :    /    /  ||  :  ;_     
;   . |  ; |--' '   | .; :.   '  /  ||  | ' |  | | '  : |__ .    ' / | \  \    `.  
|   : |  | ,    |   :    |'   ; |:  |:  | : ;  ; | |  | '.'|'   ;   /|  `----.   \ 
|   : '  |/      \   \  / |   | '/  ''  :  `--'   \;  :    ;'   |  / | /  /`--'  / 
;   | |`-'        `----'  |   :    :|:  ,      .-./|  ,   / |   :    |'--'.     /  
|   ;/                     \   \  /   `--`----'     ---`-'   \   \  /   `--'---'   
'---'                       `----'                            `----'               
modules      !                                                                            */


  .featured-modules{
    margin:auto;
    margin-bottom:4rem;
    max-width: 900px;

  }

  .module-page-splash {
    width: 100%;
    height: auto;
    background-image: url('images/about_paper_001.png');
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    margin-bottom: -4rem;
    margin-top: -2rem;
    position: relative;
    flex-direction: column;
    display: flex;
    align-items: center;
    z-index: 1000000;
    padding-top: 4rem;
    padding-bottom:120px;
  }

  .module-page-splash-inner {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    padding: 20px;
  }

  .module-image{
    max-width:30%;
  }
  .module-image img{
    width:100%;
  }

  .module-objective{
    width:50%;
  }

  .module-objective h2 {
    padding-bottom: 1rem;
    font-size:2rem;
  }


  .module-page-splash-inner.objectives{
    gap:8rem;
  }


  .module-text {
    flex: 1 1 50%;
  }

  .module-video-header {
    margin:auto;
  }
  .module-video-header h2{
 
  }
  .module-video-description{
    margin:auto;
    max-width: 900px;
    margin-bottom:2rem;
  }

  ul {
    font-family: 'PBS Sans',sans-serif;
    padding-left: 1rem
  }

  .content-block__copy {
    font-family: 'PBS Sans',sans-serif;
    margin-bottom: 1rem;
    font-size: 1.1em;
    font-weight: 300;
    display:inline;
  }

  .content-block__btn{
    background-color: #4a2a00;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.3s ease;
    font-family: Verdaguera, serif;
    text-decoration: none;
    margin-top:1.3rem;
  }

   .module-text h1 {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }

  .module-text h2 {
    font-size:2.2rem;
    margin-bottom: 1rem;
  }

  .module-video-section {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
  }

  .module-video-transcript {
    padding: 2rem;
  }

  .module-video {
    flex: 1 1 100%;
    position: relative;
    max-width: 1000px;

    /* margin: 0 auto; */
  }

  /*aligning thinking questions in center between page rip and video player*/
  #module-content-section{
    padding-top:120px;
  }

  #thinking-questions{
    margin:30px auto;

  }

  #thinking-questions h2{
    font-size: 2rem;
  }

  .iframe-activity-section {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
  }

  .iframe-activity {
    flex: 1 1 100%;
    position: relative;
    max-width: 900px;

    /* margin: 0 auto; */
  }

  .iframe-header {
    text-align: center;
    font-size: 2rem;
    padding-bottom: 1rem;
    padding-top: 2rem;
  }


  .class-modules-section {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 2rem;
  }

  #educators-modules-section{
    margin-top: -5rem;
  }

  .grade-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 1rem;
    justify-content: flex-start;
    height: auto;
    min-height: 400px;
  }

  .module-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: flex-start;
  }

  /* Ensure each module takes 1/3 of row minus gap, and wraps */
  .module {
    flex: 1 1 calc(33.333% - 2rem);
    box-sizing: border-box;
    /* background: #dedede; */
    padding: 1rem;
    border-radius: 8px;
    text-align: left;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 33%;
    height: auto;
  }

  .grade-nav{
    display:flex;
    flex-flow: row nowrap;
    gap:4rem;
  }

  .grade-button {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px 60px;
    border-radius: 20px;
    color: black;
    font-size:1.3rem;
    font-family: 'Verdaguera', serif;
    text-decoration: none;
  }

  /* Ensure h3 aligns to left, with no weird centering */
  .module h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: black;
    margin: 1rem 0 0.5rem;
    text-align: left; /* optional, to be explicit */
    padding: 0% 3%;
  }

  /* Properly center image and limit size */
  .module img {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
  }

  .module p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
    text-align: left;
    padding: 0% 3%;
  }

  /*stlye to make whole module into link instead of just title */
  .module a {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform .2s;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
  }

  .module a:hover{
    /*scale to fill padding*/
    transform: scale(1.05);
  }

  .info-grid {
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 4rem;
    padding: 4rem 4rem;
    justify-items: center;
    text-align: left;
    margin: auto;
    max-width: 1200px;
  }
  

  .info-grid > *:not(:last-child) {
    padding-right: 2rem;
    border-right: 1px solid #ddd;
  }
  
  .info-block{
    max-width: 300px;
  }

  .launch-interactive-button{
    background-color: #4a2a00;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.3s ease;
    font-family: Verdaguera, serif;
    text-decoration: none;
    margin-top:1.3rem;
  }

  .interactive-button-container{
    margin:auto;
    margin-bottom:3rem;
  }

  /* switch flex direction for info grid when no longer fits nicely*/
  @media (max-width:1200px) {
    .info-grid{
      flex-direction:column;
    }
    .info-block{
      max-width: 900px;
    }
    .info-grid > *:not(:last-child) {
    padding-bottom: 2rem;
    padding-right:0rem;
    border-bottom: 1px solid #ddd;
    border-right:none;
  }
  }

  .standards-section {
    text-align: left;
    margin: auto;
    max-width: 1000px;
    width: 100%;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .standards-section h2 {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    /* margin-bottom: 1rem; */
    text-align: left;
  }

  .carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px; /* Optional: constrain max width */
    margin: auto;
  }

  .carousel-track {
    display: flex;
    transition: transform 0.5s ease;
  }

  .module {
    flex: 0 0 calc(100% / 3); /* 3 items per view */
    box-sizing: border-box;
    padding: 2rem;
    /* background: #eee; */
    border-radius: 8px;
    text-align: left;
  }

  .carousel-btn {
    position: absolute;
    top: 50%;
    background: none;
    transform: translateY(-50%);
    color: lightgray;
    border: none;
    padding: 0px 0px;
    /*padding: 1rem 0.6rem;*/
    cursor: pointer;
    z-index: 1;
    border-radius: 3%;


  }

   .carousel-btn svg polygon{
    fill:#949494;
   }

  .carousel-btn svg:hover polygon{
    fill: gray;
  }

  .carousel-btn i {
    font-size: 80px
  }

  .carousel-btn.prev { left: 0px; }
  .carousel-btn.next { right: 0px; }

  .carousel-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  .module-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4rem;
    height: 100%;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 2rem;
  }

  .module-vocabulary {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
    font-family: 'PBS Sans', sans-serif;
  }

  .module-content h2 {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1rem;
    text-align: left;
  }
  th {
    text-align: left;
    padding-bottom: 20px;
  }

  .teacher-guide-buttons {
    display: flex;
    flex-direction: row;
    align-self:flex-start;
    gap: 1rem;
    max-width: 1200px;
    margin-left:12%;
  }
  .module-buttons {
    display: flex;
    flex-direction: row;
    align-self:center;
    align-content: center;
    gap: 1rem;
    max-width: 1200px;
  }

  .module-buttons button{
    padding:10px 60px;
    font-size: 1.3rem;
  }

  #teacher-guide-page-splash-inner{
    flex-direction: column;
  }

  .teacher-guide-block-container{
    display:flex;
    flex-direction: column;
    gap:2rem;
    justify-content: center;

  }

  .procedure, .additional-resources{
    max-width: 1000px;
    margin:auto;
  }
  .procedure .content-block__title, .additional-resources .content-block__title{
    font-size: 1.7rem;
  }
  
  .teacher-guide-block-container .content-inner{
    width:100%;
  }

  .teacher-guide-header{
    font-size:2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .content-row{
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
  }

  .raw-html-embed{
    display: inline;
  }

  
  
  /* Responsive: Two per row */
  @media (max-width: 1000px) {
    .module {
      flex: 1 1 calc(50% - 2rem);
      max-width: 50%;
    }
  }

  /* Responsive: One per row */
  @media (max-width: 600px) {
    .module {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }