/*BASE STYLING*/
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        font-family: "Andika", sans-serif;
        background-image: linear-gradient(to top, #f8edf1 0%, #fff 100%);
      }
      h1,
      h2,
      button {
        font-family: "Amatic SC", cursive;
        font-weight: 500;
        color: #a73279;
      }

      span {
        color: #a73279;
      }

      ul {
        margin: 1rem 0;
      }
      h1 {
        display: inline-block;
        font-size: 3rem;
        margin-left: 0.7rem;
      }
      h2 {
        font-size: 3rem;
      }
      p,
      a,
      li {
        font-family: "Andika", sans-serif;
        color: #3a3949;
      }
      button {
        font-size: 2rem;
      }
      button {
        background: url("https://i.ibb.co/ZgMBD1j/buttonimg.png");
        background-size: cover;
        background-position: center;
        display: inline-block;
        border: none;
        box-shadow: none;
        padding: 20px;
        max-width: 100%;
        width: 350px;
        height: auto;
        transition: all 0.5s ease-in;
        cursor: pointer;
        transform: scale(0.7);
      }
      button:hover {
        transform: scale(0.8);
      }
      li {
        list-style: none;
        line-height: 2rem;
      }
      p {
        text-align: center;
        padding: 1rem 0;
        font-size: 1rem;
      }
      /*HERO SECTION*/
      .hero {
        position: relative;
        flex: 1 1 20rem;
        height: 50vh;
        width: 100vw;
        position: relative;
        background-size: cover;
        background-position: 90% 90%;
        background-image: url("https://i.ibb.co/3YgG6NB/heroimg1.jpg");
      }
      .hero-text {
        position: absolute;
        top: 0;
        padding: 1.5rem 1rem;
      }

      /*INTRO SECTION */
      .intro-section {
        display: flex;
        /* flex: 1; */
        flex-flow: column;
        max-width: 70%;
        height: 100%;
        text-align: center;
        justify-content: center;
        margin: 0 auto;
        padding-top: 1rem;
      }
      .section-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
      }
      .section-column {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        flex-basis: 100%;
        flex: 1 1 30rem;
        text-align: center;
        justify-content: center;
      }
      .section-image {
        margin: 2rem 2rem;
      }
      .section-image img {
        width: 40%;
        height: auto;
      }
      /*FOOTER IMAGE */
      footer {
        display: flex;
        justify-content: center;
        padding: 2rem 2rem;
      }
      /*RESPONSIVENESS*/
      /*DESKTOP*/
      @media only screen and (min-width: 800px) {
        .hero {
          height: 60vh;
          background-position: 70% 80%;
        }
        h1 {
          font-size: 5rem;
          padding: 0;
          margin-left: 15rem;
          top: 0;
        }
        .section-text {
          margin-top: 0;
        }
        .section-image img {
          width: 80%;
          height: auto;
          margin: 2rem 0;
        }
        .section-image {
          align-items: flex-start;
          margin-left: -20rem;
        }
        .section-row {
          margin-top: 2rem;
        }

        hr {
          display: none;
        }
      }
      /*Tablet*/
      @media only screen and (min-width: 800px) and (max-width: 959px) {
        .section-image img {
          width: 30%;
          height: auto;
          margin: 0 auto;
          align-items: center;
          justify-content: center;
          border: 0;
        }
        .section-image {
          margin-left: 0;
        }
        .section-text {
          margin-top: 2rem;
        }
      }
      /*LANDCAPE VIEWS */
      @media only screen and (max-width: 1680px) and (max-height: 500px) {
        .hero {
          height: 100vh;
          background-position: 70% 40%;
        }
      }