/************** HEADER STYLING ****************/
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #322A26;
      color: white;
    }

    .header-column {
      flex: 1; /* Makes both columns equal */
      padding: 10px;
    }

    .header-column img {
      width: 120px; /* Adjust logo size */
      height: auto;
    }

    .header-column .header-text {
      text-align: right;
      font-size: 20px;
      font-weight: bold;
    }

    .social-media {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 10px;
    }

    .social-media a {
      font-size: 24px;
      color: #f8f8f8;
      text-decoration: none;
    }

    .social-media a:hover {
      color: #32CD32; /* Light green on hover */
      filter: brightness(1.5);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        text-align: center;
      }
      
     .header-column img {
        width: 50px; /* Adjust logo size */
        height: auto;
      }     

      .header-column {
        text-align: center;
      }

      .social-media {
        justify-content: center;
      }
    }