@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

*{
    margin: 0;
    padding: 0;
}

html, body{
    background: url(../images/home.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

.lora-bold {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
  }


  .hero {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    min-height: 60vh;
    font-family: 'Lora', serif;
    width: 50%;
  }

  .hero-heading{
    font-size: 4rem;
    margin-bottom: 1rem;
  }

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

  
  .custom-card{
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .card{
    background: #231f20!important;
  }

  @media screen and (max-width: 768px){
    .hero{
        width: 100%
    }
    .hero-heading{
      font-size: 3rem;
    }
    .card-heading-number{
      font-size: 1.5rem;
    }
  }