:root {
      --yellow: #f0d771;
      --black: #000;
      --text: #111;
      --bg: #ffff;

    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Arial', 
        sans-serif; 
        color: var(--text); 
        height: 100%;
    }
    html {
  scroll-behavior: smooth;
}
    .hero {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }
    .left, .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 3rem;
    }
    .left {
      background-color: var(--black);
      color: white;
    }
    .left h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: var(--yellow);
    }
    .left p {
      font-size: 1rem;
      max-width: 400px;
      margin-bottom: 2rem;
    }
    .left button {
      background-color: var(--yellow);
      border: none;
      padding: 1rem 2rem;
      font-weight: bold;
      cursor: pointer;
      font-size: 1rem;
    }
    .right {
      background-color: var(--yellow);
      align-items: center;
      justify-content: center;
      padding: 0rem;
    }
    .right img {
      max-width:100%;
      height: auto;
    }
    nav {
      position: absolute;
      top: 1.5rem;
      right: 3rem;
      z-index: 999;
    }
    nav a {
      margin-left: 2rem;
      text-decoration: none;
      color: var(--black);
      font-weight: bold;
    }

      .about-container {
      display: flex;
      height: 100vh;
      border: #f0d771 1px solid;
    }

    .column {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: cover;
      background-position: center;
    }

    .left-column, .right-column {
      background-color: var(--yellow);
    }

    .middle-column {
      background-color: var(--black);
      color: var(--white);
      padding: 1rem;
      text-align: center;
      color:azure;
    }

    .middle-column h1 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .middle-column p {
      font-size: 1.2rem;
      line-height:2rem;
      max-width: 600px;
      margin: 0 auto;
      text-align: justify;
    }
     .gallery-container {
       display: flex;
       height: 100vh; 
      overflow: hidden; 
        }
     
    .gallery-area {
       width: 75%;
  background-color: var(--black);
  overflow-y: auto; 
  padding: 2rem;
  border: #f0d771 solid 1px;
   scrollbar-width: thin;        /* Firefox */
  scrollbar-color: #f0d771 #000;
      }

   
    .gallery-area::-webkit-scrollbar {
  width: 8px;
}
.gallery-area::-webkit-scrollbar-thumb {
  background: #f0d771;
}



    .sidebar {
      width: 25%;
      background: var(--white);
      color: #111;
      padding: 2rem;
      overflow-y: auto;
      position: sticky;
      top: 0;
      height: 100%;
    }

    .sidebar h2 {
      margin-bottom: 1rem;
    }

    .sidebar p {
      line-height: 1.5;
    }

 
    .masonry {
      column-count: 3;
      column-gap: 1rem;
    }

    .masonry-item {
      break-inside: avoid;
      margin-bottom: 1rem;
      cursor: pointer;
    }

    .masonry-item img {
      width: 100%;
      display: block;
       height: auto;
      object-fit: cover;
      border: 2px solid #444;
      transition: transform 0.2s;
    }

    .masonry-item img:hover {
      transform: scale(1.02);
    }

    .popup,
    .overlay {
      display: none;
      position: fixed;
      z-index: 9999;
    }

    .overlay {
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
    }

    .popup {
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      max-width: 90%;
      max-height: 90%;
      border: 4px solid var(--white);
    }
    .contact-section {
  background: var(--bg);
  color: var(--white);
  padding: 4rem 2rem;
  text-align: center;
  color: #000;
}
.contact-container {
  max-width: 600px;
  margin: 0 auto;
}
.contact-container h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}
form input, form textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
  border: none;
  border-radius: 5px;
  border: #f0d771 2px solid;
}
form button {
  background: var(--yellow);
  border: none;
  padding: 1rem 2rem;
  font-weight: bold;
  cursor: pointer;
}

.site-footer {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: antiquewhite;
}
 footer a {
    text-decoration: none;
    color: inherit;
  }

  footer a:hover {
    color: #f0d771; /* blue color on hover */
    cursor: pointer; /* ensures the hand cursor */
  }

    @media (max-width: 768px) {
      .hero { flex-direction: column; }
      .left, .right { padding: 2rem; text-align: center; }
      nav { position: static; margin-bottom: 2rem; }
        .about-container {
        flex-direction: column;
      }

      .column {
        height: 33.3%;
      }

      .middle-column {
        padding: 1.5rem;
      }

      .middle-column h1 {
        font-size: 2rem;
      }
      .gallery-container {
        flex-direction: column;
      }

      .sidebar,
      .gallery-area {
        width: 100%;
        height: auto;
      }

      .masonry {
        column-count: 2;
      }
    }
    @media (max-width: 500px) {
      .masonry {
        column-count: 1;
      }
    }