/* Reset default margins/padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
  }
  
  html, body {
    height: 100%;
    width: 100%;
  }
  
  /* Hero section with full viewport dimensions */
  .hero-section {
    width: 100vw;
    height: 100vh;
    background-color: #000000; /* Adjust this color as needed */
    background-image: url('bg-image.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto; /* Use 'auto' so the original size of the SVG is maintained */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .padding-global{
    padding: 0rem 2.5rem;
  }
  
  /* Heading styling */
  .hero-section h1 {
    color: #ffffff;
    font-size: 2.88rem; /* 46px converted to rem (46/16) */
    text-align: center;
    font-weight: 400;    
    line-height: 1.3;
    margin-bottom: 2rem;
  }

  /* Mobile devices: up to 480px */
@media only screen and (max-width: 480px) {
    .hero-section h1 {
      font-size: 2.25rem; /* 36px */
    }
    .padding-global{
        padding: 0rem 1.25rem;
      }
  }
  
  /* Tablet devices: 481px to 768px */
  @media only screen and (min-width: 481px) and (max-width: 768px) {
    .hero-section h1 {
      font-size: 2.5rem; /* 40px */
    }
    .padding-global{
        padding: 0rem 2rem;
      }
  }
  
  /* Content box */
  .hero-content-box {
    max-width: 67.5rem; /* 1080px converted to rem (1080/16) */
    text-align: center;
  }
  
  /* Button styling */
  .button {
    padding: 0.625rem 1.5rem; /* 10px = 0.625rem and 24px = 1.5rem */
    background-color: white;
    font-size: 1.06rem; /* 17px converted to rem (17/16) */
    border: none;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
  }

  .button:hover{
    background-color: transparent;
    border: 1px solid white;
    color: white;
    transition: all 0ms ease-in 300ms;
  }