* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
      'Lucida Sans', Arial, sans-serif;
  }
  
  nav {
    height: 80px;
    background: #fdcc04;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem calc((100vw - 1300px) / 2);
  }

  footer {
    height: 80px;
    background: #fdcc04;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem calc((100vw - 1300px) / 2);
  }
  
  .logo {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    font-style: italic;
    padding: 0 2rem;
  }
  
  nav a {
    text-decoration: none;
    color: #000;
    padding: 0 1.5rem;
  }
  
  nav a:hover {
    color: #fff;
  }
  
  .bee {
    background: #fdcc04;
  }
  /* Main container most people i believe call it hero contianer but to match theme of website will call it bee */
  .bee-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px; 
    height: auto;
    padding: 3rem calc((100vw - 1300px) / 2);
}
/* Special contianter that centers all the information for different astetic styling */
  .center-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    height: auto;
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 60px;
    margin-bottom: 60px;
}
  
  .column-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #000;
    padding: 0rem 2rem;
  }
  
  .column-left h1 {
    margin-bottom: 1rem;
    font-size: 3rem;
  }
  
  .column-left p {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 1.5;
  }

  .column-right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem 2rem;
  }
  
  button {
    padding: 1rem 3rem;
    font-size: 1rem;
    border: none;
    color: #fdcc04;
    background: #000;
    cursor: pointer;
    border-radius: 50px;
  }
  
  button:hover {
    background: #fff;
    color: #000;
  }
  
  /* Have multiple Images because I like to set scale size in Css I think its cleaner */
  .beepolen {
    width: 100%;
    height: 100%;
  }

  .beeImage {
    width: 50%;
    height: 75%;
  }

  .beeImageS {
    width: 65%;
    height: auto;
  }

  body {
    background-color: #000;
    }
    /* Override for p to setup similar font size and make website feel the same throughout */
    p {
        font-size: 16px;
        line-height: 1.5;
    }
    
    h1 {
        font-size: 24px;
        font-weight: bold;
    }
    .scroll-box {
        max-width: 100%; /* Ensure the box takes the full width of its container */
        overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap; /* Prevent content from wrapping */
      }
      /* Divider used news section */
      .divider {
        grid-column: 1 / -1; /* Span across all columns */
        height: 2px; 
        background-color: black; 
        margin-top: 20px; 
    }
    /* Vertical Form that setups dontaion and contact information to set to user */
    .Vform {
        max-width: 500px; 
        margin: 0 auto; 
    }
    
    .Vform form {
        display: flex;
        flex-direction: column;
    }
    
    .Vform label {
        margin-bottom: 10px;
    }
    
    .Vform input,
    .Vform textarea {
        width: 100%; /* Make input fields take up full width */
        padding: 10px; 
        margin-bottom: 15px; 
    }
    

  @media screen and (max-width: 768px) {
    .bee-container {
      grid-template-columns: 1fr;
    }
  }