body{
      margin: 0;
      background-color: rgb(252,252,252);
      font-family: neue-haas-grotesk-display, Arial, sans-serif;
      font-weight: 400;
      height: 100%;
      
    }

    p{
      margin: 0;
      font-family: neue-haas-grotesk-text, Arial, sans-serif;
    }

  .page {
  height: 100vh;             
  display: flex;
  justify-content: center;    
  align-items: center;       
}

    .navbar{
      padding: 8px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }

    .navbar-left{
      text-align: left;
      margin-left: 16px;
    }

    .logo{
      font-size: 20px;
      font-weight: medium;
      align-items: center;
      color: rgb(17, 14, 14);
    }

    .navbar-right{
      text-align: right;
      display: inline-block;
      font-size: 12px;;
    }

    .hero-container{
      align-items: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
      column-gap: 24px;
      row-gap: 24px;
    }

    .hero{
      text-align: center;
      padding-left: 28px;
      padding-right: 28px;
      color: rgba(22,22,19,0.95);
      max-width: 1050px;
      align-items: center;


    }

    .hero-head{
      font-size: 56px;
      font-weight: 600;
      line-height: 62px;
      margin-bottom: 16px;

    }

    .hero-subhead{
      font-size: 18px;
      color: gray;
      font-weight: 400px;
      line-height: 26px;
      margin-bottom: 26px;
    }

    .hero-button{
      color: white;
      background-color: black;
      border: none;
      border-radius: 50px;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 12px;
      padding-right: 12px;
    }
  
    .footer{
      background-color: black;
      color: white;
      height: 25px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }