* { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'Futura', sans-serif;
      background-color: #FEFAEC;
      color: #000;
    }
    header {
      padding: 1.5rem 2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background-color: #FEFAEC;
      z-index: 1000;
    }
    nav a {
      margin-left: 1rem;
      text-decoration: none;
      color: #000;
      font-weight: bold;
      transition: color 0.3s ease;
    }
    nav a:hover { color: #555; }
    .logo { height: 60px; max-width: 100%; }
    .hero { position: relative; text-align: center; }
    .hero-bg {
      width: 100%;
      max-height: 85vh;
      object-fit: cover;
      filter: brightness(85%);
    }
    .hero-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #000;
      padding: 1rem;
    }
    .hero-content h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    .btn {
      background: #000;
      color: #fff;
      padding: 1rem 2rem;
      text-decoration: none;
      font-weight: bold;
      border-radius: 4px;
      transition: background 0.3s ease, transform 0.2s ease;
    }
    .btn:hover { background: #333; transform: scale(1.05); }
    main { padding: 2rem; }
    section { margin-bottom: 3rem; }
    h1 {color : #ffffff;}
    h2 { font-weight: 700; font-size: 2rem; }
    .services {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
    }
    .service {
      flex: 1 1 30%;
      background: #7EA2CB;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    .service:hover { transform: translateY(-5px); }
    footer {
      background-color: #ccc;
      padding: 2rem;
      text-align: center;
      font-size: 0.9rem;
    }
    footer a {
      margin: 0 0.5rem;
      text-decoration: none;
      color: #000;
    }
    footer a:hover { text-decoration: underline; }
    @media (max-width: 768px) {
      .hero-content h1 { font-size: 1.8rem; }
      .services { flex-direction: column; }
      .service { flex: 1 1 100%; }
      header { flex-direction: column; align-items: flex-start; }
      nav { margin-top: 1rem; }
    }

    h1
    {
      text-align: left;
      color: #7EA2CB;
    }