/* HTML & General Body */
html, body {
    width: 100%; 
    height: 100vh;
    margin: 0px; 
    padding: 0px;
    box-sizing: border-box;
    overflow-x: hidden;
}

hr {
    color: black;
}

a {
    text-decoration: underline #003399;
    color: #003399;
}

@font-face {
    font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
    src: url('fonts/web/woff/LeagueSpartan-Semibold.woff') format('truetype');
}

@font-face {
    font-family: 'League-Spartan-Regular', 'Futura', sans-serif;
    src: url('fonts/web/woff2/LeagueSpartan-Regular.woff2') format('truetype');
}

@font-face {
    font-family: 'League-Spartan-Light', 'Futura', sans-serif;
    src: url('fonts/web/woff2/LeagueSpartan-Light.woff2') format('truetype');
}
/*  */




/* Navigation Bar */
nav a {
    color:  black;
    text-decoration: none;
    text-align: center;
    margin-right: 90px;
    font-style: normal;
  }
  
  nav a:hover {
  font-style: italic;
  color: #48bf53;
  }
  
  .nav-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    background-color: black;
    margin-top: 0;
  }
  
  .nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding-bottom: 0;
  }
  
  .nav-list li {
    margin-top: 30px;
    margin-bottom: 20px;
  }
  
  .nav-list a {
    font-family: "seismic-latin-variable", sans-serif;
  font-variation-settings: "SEIS" 6, "wght" 400;
    font-size: 20pt;
     color: white;
    padding: 10px;
  }
  
  
 /* Navigation Bar */
 nav a {
    color:  black;
    text-decoration: none;
    text-align: center;
    margin-right: 90px;
    font-style: normal;
  }
  
  nav a:hover {
  font-style: italic;
  color: #48bf53;
  }
  
  .nav-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    background-color: black;
    margin-top: 0;
  }
  
  .nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding-bottom: 0;
  }
  
  .nav-list li {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
  .nav-list a {
    font-family: "panel-mono", monospace;
  font-weight: 200;
  font-style: normal;
    font-size: 17pt;
     color: white;
    padding: 10px;
  }
  
  
  @media (max-width: 950px) {
    nav a {
      display: grid;
      grid-template-columns: 1fr;
      color:  white;
      text-align: center;
      margin-right: 50px;
      margin-left: 50px;
    }
    
    nav a:hover {
      font-style: italic;
      }
    
    .nav-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      background-color: black;
      text-align: center;
      padding-top: 0px;
      padding-bottom: 10px;
      align-items: center;
      align-self: center;
      justify-content: center;
      justify-items: center;
    }
    
    .nav-list {
      padding-left: 0px;
      padding-right: 0px;
      padding-bottom: 0; 
      text-align: center; 
    }
    
    .nav-list li {
      margin-top: 10px;
      margin-bottom: 0.1em;
      text-align: center;
    }
    
    .nav-list a {
        font-family: "panel-mono", monospace;
        font-weight: 300;
        font-style: normal;
      font-size: 14pt;
    color: white;
      padding: 8px;
      margin-right: 40px;
      margin-left: 40px;
      text-align: center;
    }
  
    nav a:hover {
        font-style: italic;
        color: #48bf53;
        }
  }
  /*  */




/* Image-Pops Section */
.image-pops-section {
    width: auto;
    height: 600px;
    background-color: white;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 10px;
  }
  
  .image-pops-section img {
    position: absolute;
    width: auto;
    height: 195px;
    display: inline;
  }

  @media (max-width: 950px) {
    .image-pops-section {
        display: none;
    }
}



/* Pop-Up Banner */
/* .popup-container {
    position: fixed;
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-size: 19pt;
    color: white;
    background-color: #003399;
    line-height: 1.2em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
  }
  
  .popup-content {
    text-align: left;
  }
  
  .close-btn {
    position: absolute;
    color: #003399;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
  }

  .understood-btn {
    text-align: center;
  }

  #understood {
    align-items: center;
    font-family: "seismic-latin-variable", sans-serif;
    font-variation-settings: "SEIS" 0, "wght" 400;
    font-size: 20px;
    color: white; 
    background-color: #003399;
    padding: 15px;
    border: none;
}

@media (max-width: 950px) {
    .popup-container {
        display: none;
      }
} */



/* Header */
.header-section {
    max-width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 70px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 50px;
    align-items: center;
}

.about-container {
    max-width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    text-align: left;
}

.about-text {
    font-family: "seismic-latin-variable", sans-serif;
  font-variation-settings: "SEIS" 0, "wght" 400;
    font-size: 28px;
    line-height: 1.2em;
    font-style: normal;
    color: black;
   align-items: center;
}

.header-image {
   max-width: 80%;
   height: auto;
   padding-left: 120px;
}

.header-image img {
    max-width: 100%;
    height: auto;   
}

@media (max-width: 950px) {
    .header-section {
        max-width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 30px;
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 10px;
        align-items: center;
    }
    
    .about-container {
        max-width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        text-align: left;
        align-items: center;
    }
    
    .about-text {
        font-family: "seismic-latin-variable", sans-serif;
      font-variation-settings: "SEIS" 0, "wght" 300;
        font-size: 20pt;
        line-height: 1.2em;
        font-style: normal;
        color: black;
       align-items: center;
    }
    
    .header-image {
       max-width: 100%;
       height: auto;
       padding-left: 0px;
    }
    
    .header-image img {
        max-width: 100%;
        height: auto;   
    }
}



/* Palestine Section */
.intro-artworks {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 40px;
    padding-bottom: 20px;
    align-items: center;
    text-align: center;
    justify-content: center;
}

#unfold-black {
    flex: 1;
    max-width: 250px;
    height: auto;
    padding: 10px;
}

#unfold-green {
    flex: 1;
    max-width: 250px;
    height: auto;
    padding: 10px;
    transition: opacity 1s ease-in-out; 
}

#unfold-red {
    flex: 1;
    max-width: 250px;
    height: auto;
    padding: 10px;
}

#figcaption-palestine > a {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-style: normal;
    font-size: 80%;
    color:  #003399;
    justify-items: center;
    margin-top: 8px;
}

.palestine-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 0px;
    padding-bottom: 30px;
    justify-content: center;  
}

.palestine-text-container {
    flex: 1;
    background-color:white;
    padding-left: 100px;
    padding-right: 100px;
    justify-content: center;
}

.palestine-image-container {
    flex: 1;
    padding-top: 50px;
    position: relative;
    text-align: center;
}

#cease-fire-now {
    width: 80%;
    height: auto;
}

.freepalestine {
    font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
    font-size: 400%;
    color: black;
    margin-bottom: 0.2em;
}

.arabic-free {
    font-family: "omnes-arabic", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 0.1em;
}

.palestine-text {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-size: 17pt;
    line-height: 1.5em;
    color: black;
    margin-top: 0.1em;
    text-align: justify;
}

.subheading-currently {
    font-family: "alfabet", sans-serif;
    font-size: 120%;
    font-weight: 300;
    font-style: normal;
    color: black;
    }

.currently-gallery {
    width: auto; 
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    background-color: white;
    gap: 50px; 
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 50px;
    padding-top: 70px;
    text-align: center;
    align-items: center;
}

.image-item img {
    max-width: 100%;
    max-height: auto;
}

.image-item {
    display: inline-block;
    position: relative;
}

.wiggle-on-hover {
    transition: transform 0.6s ease-in-out;
}

.wiggle-on-hover:hover {
    animation: wiggle 0.6s ease-in-out;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@media (max-width: 950px) {
    .intro-artworks {
        display: none;
        }

    .palestine-container {
        display: grid;
        grid-template-columns: 1fr;
       padding-top: 5px;
       margin-left: 30px;
    margin-right: 30px;
    }

    .palestine-text-container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .freepalestine {
        font-size: 40pt;
        margin-bottom: 0.2em;
    }
    .palestine-text {
        font-size: 15pt;
        margin-top: 0.2em;
    }
    #cease-fire-now {
        width: 100%;
        height: auto;
        margin-top: 0.2em;
    }
    .currently-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 22px; 
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 20px;
    padding-top: 20px;
    }

    .image-item img {
        max-width: 100%;
        height: auto;
    }
}


/* Collective Review Section */
.collective-header-div {
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 60px;
    margin-right: 60px;
}

.collective-header {
    font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
    font-size: 600%;
    color: black;
    text-align: center;
    padding-top: 20px;
    margin-bottom: 0.2em;
}

#figcaption-collective > a {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-size: 80%;
    font-style: normal;
    color:  black;
    justify-items: center;
    margin-top: 8px;
}

.collective-review {
    margin-left: 60px;
    margin-right: 60px;
    margin-bottom: 30px;
    margin-top: 5px;
}

.collective-review-gallery {
    width: auto; 
    height: auto; 
    display: grid;
    text-align: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    color: black;
    padding-bottom: 25px;
    margin-top: 0.2em;
    gap: 30px; 
    align-items: center;
}

.collective-review-image img {
    width: 80%;
    height: auto;
    color: black;
    padding-bottom: 15px;
}

#text-section {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 300;
    font-style: normal;
    font-size: 80%;
    color: black;
    margin: 10px;
  }
  
  #text-list {
    color: black;
    list-style-type: none;
    padding: 20px;
  }
  
  #text-list li {
    color: black;
    margin-bottom: 5px;
  }

  #recommendbutton {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 300;
    font-size: 15px;
    color: white;
    background-color: black;
    border: 1px solid white; 
    padding: 8px;
    border: none;
  }

  #textInput {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 300;
    color: white;
    border: 1px solid white; 
    background-color: black; 
    padding: 8px; 
    margin-bottom: 10px; 
  }
  
  #textInput:focus {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 300;
    color: white;
    border-color: white; 
    background-color: black; 
  }

  @media (max-width: 950px) {
    .collective-header-div {
        display: grid;
    grid-template-columns: 1fr;
    margin-left: 30px;
    margin-right: 30px;
    }
    .collective {
        position: relative;
        background-color: white;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 10px;
    }

    .collective-review {
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .collective-header {
        font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
        font-size: 25pt;
        color: black;
        text-align: center;
        padding-top: 20px;
        margin-bottom: 0.2em;
    }    

    .collective-review-gallery {
        display: grid;
        grid-template-columns: 1fr;
    }

    .collective-review-image img {
        max-width: 100%;
        height: auto;
    }
}


/* Watch Section */
.watch-header {
    font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
    font-size: 600%;
    color: black;
    text-align: center;
    padding-left: 20px;
    padding-top: 50px;
    margin-bottom: 0.1em;
}
#watch-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 40px;
    margin-top: 0.2em;
}

.watch-item {
    flex: 1 0 15%; 
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    border: 2px solid black; 
}

.watch-item img {
    width: 100%;
    height: auto;
    display: block; 
}

#figcaption-watch {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-size: 18px;
    font-style: normal;
    color: black;
    padding: 10px;
    border-top: 2px solid black;
    background-color:white;
    text-align: center;
}


@media (max-width: 950px) {
    .watch-header {
        font-size: 25pt;
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }

    .watch-item {
        flex: 1 0 15%; 
        position: relative;
        margin-bottom: 10px;
        overflow: hidden;
        border: 2px solid black; 
    }

    #watch-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 20px;
        margin-top: 0.2em;
    }

    #figcaption-watch {
    font-size: 11pt;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
   }
} */



/* on our minds Section */
.ourminds-neonsign {
    position: relative;
    top: 0;
    left: 0;
    font-family: "panel-mono", monospace;
    font-weight: 300;
    font-style: italic;
    font-size: 2em;
    color: black;
    margin: 15px;
    padding-top: 50px;
    white-space: nowrap;
    animation: neon-scroll 45s linear infinite;
  }

  @keyframes neon-scroll {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

.ourminds-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 90px;
    padding-right: 90px;
    padding-top: 20px;
    padding-bottom: 30px;
    justify-content: center;  
}

.ourminds-text-container {
    flex: 1;
    background-color:white;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    justify-content: center;
    border: 1px solid black;
}

.ourminds-video-container {
    flex: 1;
    width: 150px;
    height: auto;
    position: relative;
    padding-top: 70px;
    justify-content: center;
    align-items: center;
    border-top: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    padding-left: 20px;
    padding-right: 20px;

}

.ourminds-video-container video {
    width: 100%; 
    height: auto;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.ourminds-video-container img {
    width: 100%; 
    height: auto;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.ourminds-heading {
    text-align: left;
    font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
    font-size: 300%;
    color: black; 
    line-height: 1em;
    margin-bottom: 0.2em;
}

.ourminds-text {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-style: normal;
    font-size: 14pt;
    line-height: 1.4em;
    color: black;
    margin-top: 1.1em;
}

.ourminds-container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid black; 
    margin-left: 90px;
    margin-right: 90px;
    padding-top: 30px;
    padding-bottom: 30px;
}
    
.ourminds-text-container2 {
    flex: 1;
    background-color:white;
    padding-left: 100px;
    padding-right: 100px;
    justify-content: center;
}
     
#dixon {
    width: 80%; 
    height: auto;
    padding-bottom: 60px;
    align-items: center;
    justify-content: center;
}
    
.ourminds-video-container2 img {
    width: 80%; 
    height: auto;
    padding-bottom: 60px;
    align-items: center;
    justify-content: center;
}
    
.ourminds-heading2 {
    text-align: center;
    font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
    font-weight: 300;
    font-size: 550%;
    color: black; 
    margin-bottom: 0.1em; 
}
    
.ourminds-text2 {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-style: normal;
    font-size: 14pt;
    line-height: 1.4em;
    color: black;
    margin-top: 0.1em;
}
    

.ourminds-container3 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 90px;
    padding-right: 90px;
    padding-top: 20px;
    padding-bottom: 30px;
    justify-content: center;  
}

.ourminds-text-container3 {
    flex: 1;
    background-color:white;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    justify-content: center;
    border: 1px solid black;
}

.ourminds-video-container3 {
    flex: 1;
    width: 150px;
    height: auto;
    position: relative;
    padding-top: 70px;
    justify-content: center;
    align-items: center;
    border-top: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    padding-left: 20px;
    padding-right: 20px;

}

.ourminds-video-container3 video {
    width: 100%; 
    height: auto;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.ourminds-video-container3 img {
    width: 100%; 
    height: auto;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.ourminds-heading3 {
    text-align: center;
    font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
    font-weight: 300;
    font-size: 500%;
    line-height: 1em;
    color: black; 
    margin-bottom: 0.2em;
}

.ourminds-text3 {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-style: normal;
    font-size: 14pt;
    line-height: 1.4em;
    color: black;
    margin-top: 1.1em;
}

a {
text-decoration: underline #003399;
 color: #003399;
}

@media (max-width: 950px) {
    .ourminds-neonsign {
        display: none;
    }
    .ourminds-container {
        margin-left: 40px;
        margin-right: 40px; 
        padding-left: 0;
        padding-right: 0;  
        }
        .ourminds-text-container {
            flex: 100%;
            padding-left: 20px;
            padding-right: 20px;
            }
            .ourminds-video-container {
                flex: 100%;
                justify-content: center;
                text-align: center;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 10px;
                gap: 10px;
                border: none;
            }
            .ourminds-video-container video {
                max-width: 60%;
                height: auto;
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .ourminds-video-container img {
                max-width: 300px;
                height: auto;
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .ourminds-container2  {
            padding-left: 0;
            padding-right: 0;
            margin-left: 40px;
            margin-right: 40px;    
            }
            .ourminds-heading {
                font-size: 30px;
                margin-top: 0.2em;
                }
            .ourminds-heading2 {
                font-size: 30px;
            margin-top: 0.2em;
            }
            .ourminds-heading3 {
                font-size: 30px;
            margin-top: 0.2em;
            }
            .ourminds-text {
                font-size: 18px;
            }
            .ourminds-text2 {
                font-size: 18px;
            }
            .ourminds-text3 {
                font-size: 18px;
            }
            .ourminds-text-container2 {
                margin-top: 0.2em;
                flex: 100%;
                padding-left: 20px;
                padding-right: 20px;
            }
            .ourminds-video-container2 {
                display: none;  
            }
            .ourminds-container3 {
                display: flex;
                flex-wrap: wrap;
                padding-left: 0;
                padding-right: 0;
                margin-left: 40px;
                margin-right: 40px;
                padding-top: 20px;
                padding-bottom: 20px;
                justify-content: center;  
            }
            .ourminds-text-container3 {
                flex: 100%;
                padding-left: 20px;
                padding-right: 20px;
            }
            .ourminds-video-container3 {
                flex: 100%;
                flex: 1;
                width: 100px;
                height: auto;
                position: relative;
                padding-top: 20px;
                text-align: center;
              border: none;
                padding-left: 20px;
                padding-right: 20px;
            
            }
            .ourminds-video-container3 video {
                width: 60%; 
                height: auto;
                align-items: center;
                justify-content: center;
                padding-top: 20px;
                padding-bottom: 20px;
            }
            
            .ourminds-video-container3 img {
                width: 60%; 
                height: auto;
                align-items: center;
                justify-content: center;
                padding-top: 20px;
                padding-bottom: 20px;
            }

}



/* Team Doodles + Goo Section */
.team {
    max-width: 100%;
    height: auto;
}

.team-doodles-container {
    display: flex;
    flex-wrap: wrap;
    max-width:80%;
    height: auto;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.team-doodles-container video {
    width: 100%;
    height: auto;
    justify-content: left;
}

.goo {
max-width: 100%;
height: auto;
display: flex;
position: relative;
background-image: url('Images/green\ goo.png');
background-size: cover; 
background-position: left; 
background-repeat: no-repeat; 
padding-bottom: 30px;
padding-left: 600px;
}

@media (max-width: 950px) {
    .team {
        display: none;
    }
}



/* Overview Section */
#masonry-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 60px;
    padding-bottom: 120px;
    margin-left: 70px;
    margin-right: 70px;
}

.masonry-item {
    flex: 1 0 15%; 
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    border: 2px solid black; 
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block; 
}

#figcaption-overview {
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-size: 18px;
    font-style: normal;
    color: black;
    padding: 10px;
    border-top: 2px solid black;
    background-color:white;
    text-align: center;
}

@media (max-width: 950px) {
    #masonry-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 40px;
        padding-bottom: 90px;
        margin-left: 50px;
        margin-right: 50px;
    }
}

/* Intro / Info Section */
.contact-section {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 60px;
}

.contact-intro {
    width: 100%;
    height: auto;
    flex: 1;
    flex-wrap: wrap;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 20px;
}

.contact-video {
    display: flex;
    flex: 1;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
}

.contact-video video {
    width: 400px;
    height: auto;
}

#lexend {
  font-family: 'Lexend', sans-serif;
  font-variation-settings: 'wght' 200;
  font-weight: 300;
  font-size: 14pt;
  line-height: 1.3em;
  color: #003399; 
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

#league {
  font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
  font-size: 14pt;
  color: #003399;
  line-height: 1.3em;  
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

#alfabet {
 font-family: "alfabet", sans-serif;
  font-weight: 300;
  font-size: 14pt;
  color: #003399; 
  line-height: 1.3em; 
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

#panelmono {
  font-family: "panel-mono", monospace;
  font-style: italic;
   font-weight: 300;
   font-size: 14pt;
   color: #003399; 
   line-height: 1.3em; 
   margin-top: 0.2em;
  margin-bottom: 0.2em;
 }

 #seismic {
  font-family: "seismic-latin-variable", sans-serif;
  font-variation-settings: "SEIS" 0, "wght" 300;
   font-size: 14pt;
   color: #003399; 
   line-height: 1.3em; 
   margin-top: 0.2em;
  margin-bottom: 0.2em;
 }

 #omnesarabic {
  font-family: "omnes-arabic", sans-serif;
  font-style: italic;
   font-weight: 300;
   font-size: 14pt;
   color: #003399;
   line-height: 1.3em; 
   margin-top: 0.2em;
  margin-bottom: 0.2em; 
 }

 .harvesting-headline {
  font-family: 'LeagueSpartan-Light', 'Futura', sans-serif;
  font-weight: 200;
  font-size: 25pt;
  color: black;
  text-align: left;
  margin-left: 8px;
    margin-right: 80px;
    margin-top: 0px;
    margin-bottom: 0.2em; 
    line-height: 1.2em; 
 }

.website-credits {
    width: 50%;
    height: auto;
    font-family: 'Lexend', sans-serif;
    font-variation-settings: 'wght' 200;
    font-weight: 300;
    font-size: 14pt;
    color: black; 
    flex: 1;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 0.1em;
    margin-bottom: 30px; 
    line-height: 1.4em;
    align-items: center;
}

@media (max-width: 950px) {
  .contact-section {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    margin-bottom: 20px;
  }
    .harvesting-headline {
      font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
      font-size: 20pt;
      color: black;
      text-align: left;
      margin-left: 0px;
        margin-right: 20px;
        margin-top: 0.2em;
        margin-bottom: 0.1em; 
        line-height: 1.2em; 
     }
    
    .website-credits {
        width: 100%;
        height: auto;
        font-family: 'Lexend', sans-serif;
        font-variation-settings: 'wght' 200;
        font-weight: 300;
        font-size: 12pt;
        color: black; 
        flex: 1;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0.1em;
        margin-bottom: 30px; 
        line-height: 1.5em;
        text-align: left;
    }

    .contact-video {
    display: none;
    }
}


/* Font Credits Section */
#fonts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 80px;
  margin-top: 0.2em;
  margin-left: 20px;
  margin-right: 20px;
}

.fonts-item {
  flex: 1 0 15%; 
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid black; 
}

.fonts-item img {
  width: 100%;
  height: auto;
  display: block; 
}

#figcaption-watch {
  font-family: 'Lexend', sans-serif;
  font-variation-settings: 'wght' 200;
  font-size: 14pt;
  font-style: normal;
  color: black;
  padding: 10px;
  border-top: 1px solid black;
  background-color:white;
  text-align: center;
}

@media (max-width: 950px) {
 #fonts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding-bottom: 40px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 0.2em;
  align-items: center;
  justify-content: center;
}

.fonts-item {
  display: grid;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid black; 
}

.fonts-item img {
  width: 100%;
  height: auto;
  display: block; 
}

#figcaption-watch {
  font-family: 'Lexend', sans-serif;
  font-variation-settings: 'wght' 200;
  font-size: 12pt;
  font-style: normal;
  color: black;
  padding: 10px;
  border-top: 1px solid black;
  background-color:white;
  text-align: center;
}

#lexend {
  font-family: 'Lexend', sans-serif;
  font-variation-settings: 'wght' 200;
  font-weight: 300;
  font-size: 12pt;
  line-height: 1.3em;
  color: #003399; 
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  padding: 10px;
}

#league {
  font-family: 'League-Spartan-Bold', 'Futura', sans-serif;
  font-size: 12pt;
  color: #003399;
  line-height: 1.3em;  
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

#alfabet {
 font-family: "alfabet", sans-serif;
  font-weight: 300;
  font-size: 12pt;
  color: #003399; 
  line-height: 1.3em; 
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  padding: 10px;
}

#panelmono {
  font-family: "panel-mono", monospace;
  font-style: italic;
   font-weight: 300;
   font-size: 12pt;
   color: #003399; 
   line-height: 1.3em; 
   margin-top: 0.2em;
  margin-bottom: 0.2em;
  padding: 10px;
 }

 #seismic {
  font-family: "seismic-latin-variable", sans-serif;
  font-variation-settings: "SEIS" 0, "wght" 300;
   font-size: 12pt;
   color: #003399; 
   line-height: 1.3em; 
   margin-top: 0.2em;
  margin-bottom: 0.2em;
  padding: 10px;
 }

 #omnesarabic {
  font-family: "omnes-arabic", sans-serif;
  font-style: italic;
   font-weight: 300;
   font-size: 12pt;
   color: #003399;
   line-height: 1.3em; 
   margin-top: 0.2em;
  margin-bottom: 0.2em; 
  padding: 10px;
 }
}