.text {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    color: #222222;
  }
  
  p {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 25px;
    color: #222222;
  }

  .header-container {
    display: flex;
    justify-content: space-between;
  }

  .header-section {
    width: 50%;
  }

  
  .image-row {
    display: flex; /* Align children in a row */
    justify-content: space-between; /* Add space between images */
    align-items: center; /* Vertically align images */
    gap: 0px; /* Optional: Add gap between images */
  }

  .img-section {
    height: auto; /* Maintain aspect ratio */
    display: flex; /* Remove inline spacing */
  }

  #section_img {
    width:10vw;
    height: auto;
  }
  
  .button {
    background-color: #FFFFFF;
    border: none;
    text-align: right;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    padding: 0px 0px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;       
    color: #222222;
    cursor: pointer;
  }
  
  .navbar {
    padding: 0px 25vw;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  
  .footer {
    padding: 0px 25vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .gallery_content {
    column-count: 2;
    column-gap: 20px;
  }
  
  div.gallery {
    padding: 10px 0px; 
    transition: filter 1s ease; /* Smooth transition effect */
  }
  
  div.gallery:hover {
    filter: brightness(50%); /* Darken the image by 50% */
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  /* specifically for typing gif */
  div.small img { 
    width: 250px;
    padding: 0px;
    height: 75px;
  }
  
  /* specifically for square animation */
  /* div.small img { 
    width: 48px;
    height: 48px;
  } */
  
  
  div.side_by_side {
    padding: 30px 0px; 
  }
  
  .side_by_side_content {
    column-count: 2;
    column-gap: 20px;
  }
  
  div.side_by_side img{
    width: 100%;
    height: auto;
  }
  
  .content {
    padding: 5vh 25vw; 
  }
  
  .content_images {
    text-align: center;
    padding: 30px 0px; 
  }
  
  #content_img {
    width: 50vw;
    height: auto;
  }
  
  a:link { text-decoration: none; cursor: pointer;}
  
  a:visited { text-decoration: none; cursor: pointer;}
  
  a:hover { text-decoration: none; cursor: pointer;}
  
  a:active { text-decoration: none; cursor: pointer;}
  
  a:focus { text-decoration: none; cursor: pointer;}
  
  h1 {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    color: #222222;
  }
  
  h2 {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 700;
    font-style: normal;        
    font-size: 14px;
    color: #222222;
  }
  
  iframe {
    text-align: center;
    width: 50vw;  
    height: 28vw;  
  }
  
  .crosshair-area:hover {
    cursor: crosshair;
  }
  
  .reveal {
    opacity: 0;
    transform: translateY(0px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  /* Class to add when the element is visible */
  .reveal-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  @media only screen and (max-width: 850px) {
    /* For mobile phones: */
    [class*="navbar"] {
      padding: 3vh 0px;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
  
    [class*="button"] {
      background-color: white;
      border: none;
      text-align: left;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      padding: 0px 0px;
      color: 	#222222;
      cursor: pointer;
    }
    
    [class*="content"] {
      padding: 0px 0px; 
    }
  
    div.gallery {
      padding: 5px 0px; 
    }
  
    [class*="gallery_content"] {
      column-count: 1;
      width: 100%;
    }
      
  
    [class*="content_images"] {
      text-align: center;
      padding: 0px 0px; 
    }
    
    #content_img {
      padding: 5px 0px; 
      width: 100%;
    }

    
  
    [class*="footer"] {
      padding: 3vh 0vw;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
  
    iframe {
      width: 100%;  
      height: 56vw;  
    }
  
  }