:root {
      --main-color: #d62828;
      --accent-color: #f77f00;
      --bg-color: #f7f7f7;
      --text-color: #2b2b2b;
      --light-gray: #eeeeee;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    header {
      background-color: var(--main-color);
      color: white;
      padding: 1.2rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 {
      font-size: 1.8rem;
      font-weight: bold;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin-left: 1.2rem;
      font-weight: 500;
    }

   nav a:hover,
nav a.active {
  color: var(--accent-color);
}


    .hamburger-icon{
      display: none;
      width: 180px;
      height: 100vh;
      position: absolute;
      right: 0;
      top:0;
      background-color: #d62828;
    }
    .hamburger-icon a{
      display: flex;
      height: 40px;
      flex-direction: column;
      padding-left: 10px;
      color: #eeeeee;
      text-decoration: none;
      font-weight: 600;
      padding-top: 10px;
    }

    .hamburger-icon a:hover{
      cursor: pointer;
    }
    .hamburger {
      display: none;
    }
    .hero {
        background: rgb(119, 54, 54);
        height: 65vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 2px 2px 10px black;
      text-align: center;
      padding: 0 1.5rem;
    }

    .hero h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.2rem;
      max-width: 650px;
      
    }

    .about {
  background-color: #fff8f0;
  padding: 2rem;
  text-align: center;
}

.about-container {
  max-width: 800px;
  margin: 0 auto;
}

.about h2 {
  color: #d62828;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 1rem;
}

    .categories {
      padding: 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
    }
    .categories a{
      text-decoration: none;
      color: #2b2b2b;
    }

    .category-box {
      background-color: var(--light-gray);
      padding: 1.5rem;
      border-radius: 10px;
      transition: 0.3s;
      text-align: center;
    }

    .category-box:hover {
      transform: scale(1.03);
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .category-box h3 {
      color: var(--main-color);
      margin-bottom: 0.8rem;
    }

    footer {
      background-color: var(--main-color);
      color: white;
      text-align: center;
      padding: 1rem 0;
      margin-top: 2rem;
    }

    @media (max-width: 750px) {
       header {
    align-items: center;
  }
      .hero h2 {
        font-size: 2rem;
      }
      .hamburger{
        display: inline;
      }
      .hamburger-icon{
        display: block;
      }
       nav {
        display: none;
      
      } 

        
  nav a {
    margin: 0.3rem 0;
    display: block;
  }
    }