@import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Kode+Mono:wght@400..700&family=Madimi+One&family=Metrophobic&family=Mina:wght@400;700&family=Nanum+Myeongjo:wght@400;700;800&display=swap');
  
  /* hide the main log on scroll */
    .center-logo {
      margin-bottom: 50px;
      transition: all 2.8s ease-in-out;
    }

    .center-logo.hidden {
      opacity: 0;
      transform: translateY(-100px) scale(0.8);
    }

    .logo-main {
      display: flex;
      justify-content: center;

    }
    .logo-main img{
      max-width: 90%;
    }
    .logo-subtitle-main{
      display: flex;
      justify-content: center;
      width: 100%;
    }
    .logo-subtitle-main img{
      width: 100%;
    }
    
    .hero-heading {
      text-align: center;
      font-size: 1.8rem;
      
      margin-top: 40px;
      
      /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */

      font-family: "Agbalumo", system-ui;
  font-weight: 400;
  font-style: normal;
    }
    .hero-heading span {
      color: rgb(26, 239, 247);
      font-weight: 700;
      /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
    }

  


     /* background for hero section  */
    #section1 {

      /* background-color: rgb(0, 238, 255); */
      background-image: url("../svg/HeroBackground.svg");


      background-repeat: no-repeat;
      /* background-attachment: fixed; */
      background-size: cover;


    }
    .main-content{
      z-index: 2;
    }

    #mask {
      position: absolute;
      min-width: 100%;
      min-height: 100%;

      background: linear-gradient(0deg, rgb(2 2 2), #00000073, #00000040, rgb(0 0 0 / 2%), #00000000, rgb(0 0 0 / 59%));


      z-index: 0;
    }

      @media (max-width: 768px) {
      .hero-heading {
        font-size: .9rem;
      }
      }