 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      background-color: #f8f8f8;
      color: #1a1a1a;
      line-height: 1.6;
    }

    /* Header */
    .header {
      background: linear-gradient(to bottom,   #006E4B 0%, #000000 100%);
      color: white;
      padding: 50px 5% 35px;
      text-align: center;
    }

    .header h1 {
      font-size: clamp(2.4rem, 5vw, 3.4rem);
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
    }

    /* Navigation */
    .nav-container {
      background: #FFFFFF;
      border-bottom: 4px solid #000000 ;
    }

    .nav {
      max-width: 1450px;
      margin: 0 auto;
      padding: 0 5%;
    }

    .nav-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      color: #808080;
      text-decoration: none;
      padding: 18px 22px;
      font-size: 1.05rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
      white-space: nowrap;
    }

    .nav-link:hover,
    .nav-item.active .nav-link {
      background: rgba(255,255,255,0.15);
    }

    /* Dropdown */
    .dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background: white;
      min-width: 260px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.25);
      display: none;
      z-index: 1000;
      border-top: 3px solid #70411D;
    }

    .nav-item:hover .dropdown {
      display: block;
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 22px;
      color: #003087;
      text-decoration: none;
      font-size: 1rem;
      border-bottom: 1px solid #eee;
      transition: background 0.15s;
    }

    .dropdown-item:hover {
      background: #f0f5ff;
      color: #001f5b;
    }

    .dropdown-item:last-child {
      border-bottom: none;
    }

    /* Icon styling */
    .fa-caret-down,
    .fa-caret-right {
      font-size: 0.9em;
      opacity: 0.9;
    }

    /* Main content - constrained & centered */
    .main-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5% 40px;
      background: white;
      min-height: 60vh;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

    .hero {
      height: 500px;
      background: url('https://images.unsplash.com/photo-1506905925346-21bda5367436?ixlib=rb-4.0.3&auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
      position: relative;
      margin-bottom: 40px;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("Ham/illustrations/back_foto.JPG")  ;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      color: white;
      padding: 120px 40px;
      text-align: center;
    }

    .hero-content h2 {
      font-size: 2.8rem;
      margin-bottom: 1rem;
      text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    }

    /* Style the footer */
.footer {
  background-color: E6E6E6;
  padding: 16px;
  text-align: center;
  color: black;
  border-top: 4px solid #000000 ;
}

    /* Responsive */
    @media (max-width: 1200px) {
      .main-content {
        max-width: 100%;
        padding: 0 4%;
      }
    }

    @media (max-width: 900px) {
      .header h1 { font-size: 2.6rem; }
      .nav-link { padding: 16px 18px; font-size: 1rem; }
      .hero { height: 400px; }
      .hero-content h2 { font-size: 2.2rem; }
    }

    @media (max-width: 700px) {
      .nav-list {
        flex-direction: column;
        align-items: flex-start;
      }
      .dropdown {
        position: static;
        box-shadow: none;
        border: none;
      }
      .nav-item:hover .dropdown {
        display: none;
      }
      .nav-item.open .dropdown {
        display: block;
      }
    }
  </style>
