@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
    @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Kumbh+Sans:wght@100..900&family=Lexend:wght@100..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

   html.is-animating .transition-fade {
     opacity: 0;
     transform: translateX(-100%); /* swipe-like motion */
     transition: all 0.5s ease;
    }

    html.is-leaving .transition-fade {
      opacity: 1;
    }

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

    body {
      font-family: 'Roboto Mono', sans-serif;
      background: #fff;
      color: #111;
      padding: 0 3rem;
    }

    .column-text {
     column-width: 20rem;
     column-gap: 3rem;
     text-align: justify;
     padding: 0px 2rem;
     max-width:;
     margin: 0 auto;
     letter-spacing: -0.5px;
     font-size: 14px;
    }

    
    .header-main {
      padding: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      position: relative;
    }

    .logo {
      font-weight: 800;
      font-size: 1.5rem;
    }

    nav {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    nav a {
      text-decoration: none;
      color: #555;
      font-weight: 500;
      outline:none;
    }

    .menu-button {
      background: none;
      border: 1px solid #ccc;
      padding: 1rem 2rem;
      border-radius: 2rem;
      cursor: pointer;
      color: #000;
      display: none;
    }

    .dropdown-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: white;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      z-index: 1000;
      transition: all 0.3s ease-in-out;
    }

    .dropdown-menu a {
      font-size: 1.5rem;
      color: #111;
      text-decoration: none;
    }

    .dropdown-menu .close-button {
      position: absolute;
      top: 2rem;
      right: 4rem;
      background: none;
      border: none;
      font-size: 3rem;
      cursor: pointer;
      color: #000;
    }

    @media (max-width: 768px) {
      nav {
        display: none;
      }

      .menu-button {
        display: block;
      }
    }

    a {
      text-decoration: none;
      color: #000;
      outline: none;
    }

    .hero {
      padding: 4rem 2rem 2rem;
      text-align: left;
    }

    .hero h1 {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1.2;
      font-family: 'Roboto Mono', sans-serif;
    }

    .hero .subtext {
      margin-top: 1rem;
      font-size: 1.2rem;
      color: #666;
    }

    .hero .cta {
      margin-top: 2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .cta button {
      background: #111;
      color: white;
      border: none;
      padding: 0.8rem 1.5rem;
      border-radius: 2rem;
      font-weight: 600;
      cursor: pointer;
    }

    .grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      padding: 0.5rem 2rem;
    }

    .card {
      position: relative;
      overflow: hidden;
      border-radius: 0rem;
      background-size: cover;
      background-position: center;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0rem;
      height: 25rem;
    }

    .card-01 {
      background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/2800/a78ab2101065515.5f16b81c7e17f.jpg');
      width: 26%;
    }

    .card-02 {
      background-image: url('https://miro.medium.com/v2/resize:fit:1400/1*ATFGWV49wHrDW9wVnOyD1w.png');
      width: 26%;
    }

    .card-03 {
      background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/source/2d4e67159963297.63aa42524be6d.png');
      width: 45%;
    }

    .card-overlay {
      background: rgb(136 136 136 / 30%);
      backdrop-filter: blur(5px);
      padding: 1rem;
      border-radius: 0rem;
    }

    .card h3, .card p {
      margin: 0.5rem 0;
    }

    .card .number {
      font-size: 2rem;
      font-weight: bold;
    }

    .grid-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 0rem;
      padding: 0rem 2rem;
    }

    .card-footer {
      position: relative;
      overflow: hidden;
      border-radius: 0rem;
      background-size: cover;
      background-position: center;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1rem;
      height: 15rem;
    }

    .card-01-footer {
      background-color: #fff;
      width: 40%;
      color: #000;
    }

    .card-02-footer,
    .card-03-footer,
    .card-04-footer {
      background-color: #fff;
      width: 20%;
      color: #000;
    }

    .card-overlay-footer {
      padding: 1rem;
      border-radius: 0rem;
    }

    .card-footer h3, .card-footer p {
      margin: 0.5rem 0;
    }

    .card-footer .number {
      font-size: 1.5rem;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      body {
      padding: 0;
      }
        
      nav {
        display: none;
      }

      .menu-button {
        display: block;
      }

      .grid .card,
      .grid-footer .card-footer {
        width: 100% !important;
      }
    }