:root {
   --header-kleur: #FFFFFF;
   --bg-kleur: #FFFFFF;

   --knop-pagina-nummer: #E2655E;
   --knop-pagina-nummer-actief: #281CE2;

   --knop: #FFFFFF;
   --knop-actief: #000000;

   --hamburger-menu-knop: #281CE2;

   --kleur-footer-bg: #e6e6e6;

}

/* font-size + weight */
:root {
   --font-size-xxl: 52.1253px;
   --font-size-xl: 37.5px;
   --font-size-l: 35px;
   --font-size-m: 30px;
   --font-size-s: 19px;
   --font-size-xs: 18px;

   --font-weight-strong: 700;
   --font-weight-normal: 200;
}



h1,
h2 {
   font-family: "Hind Guntur", arial;
}

.arrow {
   font-size: 19px;
   display: inline-block;

}

header {

   padding: 1rem 3rem;
   background-color: var( --header-kleur);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);



   @media (min-width: 1082px) {
      display: flex;
      align-items: center;
      justify-content: space-between;


      padding: 2rem 3rem;
      background-color: var(--bg-kleur);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }

}

.header-logo {
   height: 50px;
   width: 220px;
}

.header-menu {
   display: none;

   @media (min-width: 1082px) {
      display: flex;
      gap: 2rem;
      list-style: none;
      margin-right: 30px;
      padding: 0;
   }

   a::after {
      position: absolute;
      /*hiermee kan ik je met left en bottom bepalen waar die start*/
      content: "";
      /*anders werkt de after niet ik weet niet waarom :(*/
      z-index: -1;
      background-color: var(--knop-actief);
      height: 100%;
      left: 0;
      bottom: 0;
      width: 0;
      /*hiermee zie je het nog niet*/
      transition-duration: 0.4s;
   }

   a:hover::after {
      width: 100%;
      /*hiermee wordt hij zichtbaar */
      font-weight: 700;
   }

   a {
      text-decoration: none;
      color: var(--knop-actief);
      font-size: 1.1rem;
      font-weight: var(--font-weight-strong);
      font-family: "Hind Guntur", arial;
      height: 5em;
      /*Dit is de hoogte van het atje en de 100% van de after houd deze aan*/
      position: relative;
      /*die heb je nodig om de postion absolute te laten werken :)*/
      z-index: 0;
      padding: 9px;

      &:hover {
         color: white;
      }

      &[aria-current="page"] {
         font-weight: 700;
         padding: 10px 12px;
         background-color: #000;
         color: white;
      }

      &[href="/contact"] {
         @media (min-width: 982px) {
            padding: 10px 30px;
            background-color: var(--knop-pagina-nummer-actief);
            color: white;
            margin-left: 250px;
            font-weight: 700;
         }
      }
   }
}

.fab-menu {
   position: fixed;
   right: 0;
   bottom: 0;
   border: none;
   z-index: 999;
   width: 100px;
   height: 100px;
   background-color: var(--knop-pagina-nummer);
   color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;

   div:nth-child(1) {
      border-top: white solid 3px;
      z-index: 99;
      width: 30px;
   }

   div:nth-child(2) {
      margin-top: 10px;
      margin-bottom: 5px;
      border-top: white solid 3px;
      z-index: 99;
      width: 30px;
      height: 5px;
   }


   div:nth-child(3) {
      border-top: white solid 3px;
      z-index: 99;
      width: 30px;
   }


   @media (min-width: 1082px) {
      display: none;
   }
}


.menu-overlay {
   position: fixed;
   inset: 0;
   background: white;
   z-index: 100;
   transition: ease-in 0.2s;
   opacity: 0;
   /* dicht */
   padding: 5rem 2rem;

   @media (min-width: 982px) {
      display: none;
   }
}

/* Open state */
.menu-overlay.is-open {
   opacity: 1;
   padding: 70px 40px;
}

/* Menu styling */
.menu-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 1rem;

   a {
      padding: 20px 40px 20px 20px;
      font-size: 30px;
      font-weight: var(--font-weight-strong);
      text-decoration: none;
      color: var(--knop-actief);
      font-family: "Hind Guntur", arial;
      z-index: 0;
      position: relative;
      /*die heb je nodig om de postion absolute te laten werken :)*/
      height: 5em;
      /*Dit is de hoogte van het atje en de 100% van de after houd deze aan*/

      &:hover {
         color: white;
      }
   }

   a::after {
      position: absolute;
      /*hiermee kan ik je met left en bottom bepalen waar die start*/
      content: "";
      /*anders werkt de after niet ik weet niet waarom :(*/
      z-index: -1;
      background-color: #000;
      height: 100%;
      left: 0;
      bottom: 0;
      width: 0;
      /*hiermee zie je het nog niet*/
      transition-duration: 0.4s;
   }

   a:hover::after {
      width: 100%;
      /*hiermee wordt hij zichtbaar */
      font-weight: var(--font-weight-strong);
   }

   input {
      background-color: var(--kleur-footer-bg);
      padding: 15px 20px 8px;
      font-family: "Hind Guntur", arial;
      font-size: 16px;
      margin-bottom: 30px;
      border: none;
   }
}


.page-intro {

   h1 {
      font-size: 40px;
      font-weight: 400;
      padding-left: 25px;
      width: fit-content;
   }

   h1 strong {
      font-weight: var(--font-weight-strong);
   }

   @media (min-width: 582px) {
      h1 {
         font-size: 40px;
         font-weight: 400;
         padding-left: 10px;
         width: 300px;
      }

      h1 strong {
         font-weight: var(--font-weight-strong);
      }
   }

   @media (min-width: 1080px) {

      h1 {
         font-size: 60px;
         font-weight: 400;
          text-align: center;
        margin-inline: auto;
         transform: translateX(-100px);
         width: fit-content;
      }

      h1 strong {
         font-weight: 800;
      }
   }
}

.voetbal-international-section {
   padding: 0 25px;

   a {
      text-decoration: none;
      color: #000;
      padding-left: 30px;
   }

   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: 700;


      @media (min-width: 1080px) {
         padding-top: 10px;
         grid-column: 2 / 2;
         grid-row: 2;
      }
   }

   h2 {
      font-size: 37px;
      line-height: 1.25;
      font-weight: 200;
      

      @media (min-width: 1080px) {
         font-size: 42px;
         padding-right: 250px;
         width: 450px;
         grid-column: 2 / 2;
         grid-row: 1 / 2;
      }
   }

   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }

   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
         grid-column: 2 / 2;
         grid-row:  2;
         padding-top: 10px;
         width: 500px;
      }

   }

   img {

      width: 315px;
      height: 178px;

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
       
         grid-row: 1 / 3;
           justify-self: end;
        
         width: 520px;
         height: 520px;

      }
   }


   @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 180px auto;
      align-items: start;
     
      
   }
}


.lunar-institute-section {
   padding: 0 25px;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;

   a {
      text-decoration: none;
      color: #000;
         padding-right: 30px;
        justify-self: end;
   }


   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: var(--font-weight-strong);

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         width: 500px;
         padding-top: 10px;
      }
   }

   h2 {
      font-size: 37px;
      line-height: 1.15;
      font-weight: var(--font-weight-normal);

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 1 / 2;
         padding-top: 50px;
         width: 500px;
       
      }
   }


   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }

   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
        
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         padding-top: 10px;
         width: 500px;
      }
   }

   img {
      margin-top: 20px;
      width: 315px;
      height: 178px;

      @media (min-width: 1080px) {
         grid-column: 2/ 2;
         grid-row: 1 / 3;
        
         width: 520px;
         height: 520px;
      }
   }

   @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 180px auto;
      margin-top: 50px;
     
   }
}

.lunar-institute-section.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.dushi-huis-section {

   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;
   padding: 0 25px;

   a {
      text-decoration: none;
      color: #000;
       padding-left: 30px;
   }

   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: var(--font-weight-strong);

      @media (min-width: 1080px) {
         padding-top: 10px;
         grid-column: 2 / 2;
         grid-row: 2 / 2;
      }
   }

   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }


   h2 {
      font-size: 37px;
      line-height: 1.15;
      font-weight: var(--font-weight-normal);

      @media (min-width: 1080px) {
         font-size: 42px;
         padding-right: 250px;
         width: 450px;
         padding-top: 40px;
         grid-column: 2 / 2;
         grid-row: 1 / 2;
      }
   }

   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
         grid-column: 2 / 2;
         grid-row: 2/ 2;
         padding-top: 10px;
         width: 500px;
      }
   }

   img {

      width: 315px;
      height: 178px;
      margin-top: 20px;

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
        
        justify-self: end;
         grid-row: 1 / 3;
         width: 520px;
         height: 520px;
      }
   }


   @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 180px auto;
      align-items: start;
      
      margin-top: 50px;
   }
}

.dushi-huis-section.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.munji-section {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;
   padding: 0 25px;

   a {
      text-decoration: none;
      color: #000;
      padding-right: 30px;
      justify-self: end;
   }


   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: var(--font-weight-strong);

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         width: 500px;
         padding-top: 10px;
      }
   }

   h2 {
      font-size: 37px;
      line-height: 1.15;
      font-weight: 200;

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 1 / 2;
         padding-top: 80px;
         width: 500px;
         
      }
   }

   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }


   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
        
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         padding-top: 10px;
         width: 500px;
      }
   }

   img {
      margin-top: 20px;
      width: 315px;
      height: 178px;
      filter: grayscale(20%) brightness(95%);

      @media (min-width: 1080px) {
         grid-column: 2/ 2;
         grid-row: 1 / 3;
       
      
         width: 520px;
         height: 520px;
      }
   }

   @media (min-width: 1080px) {
      display: grid;
       grid-template-columns: 1fr 1fr;
   
      grid-template-rows: 180px auto;
      margin-top: 50px;
     
   }
}

.munji-section.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.jurriëns-section {
   padding: 0 25px;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;

   a {
      text-decoration: none;
      color: #000;
        padding-left: 30px;
   }

   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: 700;

      @media (min-width: 1080px) {
         padding-top: 10px;
         grid-column: 2 / 2;
         grid-row: 2 / 2;
      }
   }

   h2 {
      font-size: 37px;
      line-height: 1.15;
      font-weight: var(--font-weight-normal);

      @media (min-width: 1080px) {
         font-size: 42px;
         padding-right: 250px;
         width: 450px;
         padding-top: 30px;
         grid-column: 2 / 2;
         grid-row: 1 / 2;
      }

   }

   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }


   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
         grid-column: 2 / 2;
         grid-row: 2/ 2;
         padding-top: 10px;
         width: 500px;
      }

   }

   img {
      width: 315px;
      height: 178px;
      margin-top: 20px;

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
       grid-row: 1 / 3;
        width: 520px;
         height: 420px;
        justify-self: end;
      }
   }


   @media (min-width: 1080px) {
      display: grid;
       grid-template-columns: 1fr 1fr;
   grid-template-rows: 180px auto;
      margin-top: 50px;
}
}

.jurriëns-section.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.eurid-section {
   padding: 0 25px;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;

   a {
      text-decoration: none;
      color: #000;
       justify-self: end;
       padding-right: 30px;
   }


   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: var(--font-weight-strong);

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         width: 450px;
         padding-top: 10px;
      }
   }

   h2 {
      font-size: 37px;
      line-height: 1.15;
      font-weight: var(--font-weight-normal);

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 1 / 2;
         padding-top: 80px;
         width: 420px;
       
      }
   }

   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }


   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
         
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         padding-top: 10px;
         width: 470px;
      }
   }

   img {
      margin-top: 20px;
      width: 315px;
      height: 178px;
      filter: grayscale(20%) brightness(95%);

      @media (min-width: 1080px) {
         grid-column: 2/ 2;
         grid-row: 1 / 3;
      
         width: 520px;
         height: 470px;
      }
   }

   @media (min-width: 1080px) {
       display: grid;
       grid-template-columns: 1fr 1fr;
   grid-template-rows: 180px auto;
      margin-top: 50px;
   }
}

.eurid-section.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.invest-International-section {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;
   padding: 0 25px;

   a {
      text-decoration: none;
      color: #000;
      padding-left: 30px;
   }

   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: var(--font-weight-strong);

      @media (min-width: 1080px) {
         padding-top: 10px;
         grid-column: 2 / 2;
         grid-row: 2 / 2;
      }
   }

   h2 {
      font-size: 37px;
      line-height: 1.15;
      font-weight: var(--font-weight-normal);

      @media (min-width: 1080px) {
         font-size: 42px;
        
         width: 450px;
         padding-top: 40px;
         grid-column: 2 / 2;
         grid-row: 1 / 2;
      }
   }

   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }


   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
         grid-column: 2 / 2;
         grid-row: 2/ 2;
         padding-top: 10px;
         width: 500px;
      }

   }

   img {

      width: 315px;
      height: 178px;
      margin-top: 20px;

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         justify-self: end;
        
         grid-row: 1 / 3;
        
         width: 520px;
         height: 500px;

      }
   }


   @media (min-width: 1080px) {
       display: grid;
       grid-template-columns: 1fr 1fr;
   grid-template-rows: 180px auto;
      margin-top: 50px;
   }
}

.invest-International-section.is-visible {
   opacity: 1;
   transform: translateY(0);
}


.gerrit-jans-hoeve-section {
   padding: 0 25px;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;

   a {
      text-decoration: none;
      color: #000;
      justify-self: end;
      padding-right: 30px;
   }

   .linkbold {
      font-size: 18px;
      font-family: "Hind Guntur", arial;
      font-weight: var(--font-weight-strong);

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         width: 450px;
      }
   }

   h2 {
      font-size: 37px;
      line-height: 1.15;
      font-weight: var(--font-weight-normal);

      @media (min-width: 1080px) {
         grid-column: 1 / 2;
         grid-row: 1 / 2;
         width: 420px;
        
         padding-top: 20px;
      }
   }

   .hover-animatie-h2 span {
      background: linear-gradient(black, black);
      background-size: 0 60%;
      background-position: 0 0.2em;
      background-repeat: no-repeat;
      transition: background-size .5s ease-out, color 0.5s ease-out;
   }

   .hover-animatie-h2 span:hover {
      color: white;
      background-size: 100% 60%;
   }


   p {
      font-size: 19px;
      line-height: 1.5;
      font-family: "Hind Guntur", arial;

      @media (min-width: 1080px) {
        
         grid-column: 1 / 2;
         grid-row: 2 / 2;
         width: 470px;
      }
   }

   img {
      margin-top: 20px;
      width: 315px;
      height: 178px;
      filter: grayscale(20%) brightness(95%);

      @media (min-width: 1080px) {
         grid-column: 2/ 2;
         grid-row: 1 / 3;
         
         width: 520px;
         height: 340px;
      }
   }

   @media (min-width: 1080px) {
      display: grid;
        grid-template-columns: 1fr 1fr;
   grid-template-rows: 180px auto;
      margin-top: 50px;
   }
}

.gerrit-jans-hoeve-section.is-visible {
   opacity: 1;
   transform: translateY(0);
}


.click-through {
   display: flex;
   gap: 10px;
   padding: 50px;
   padding-top: 100px;

   @media (min-width: 1080px) {
      padding-left: 215px;
   }

   button {
      background-color: var(--knop-pagina-nummer);
      color: var(--knop-actief);
      font-family: "Hind Guntur", arial;
      font-size: 18px;
      width: 65px;
      height: 50px;
      border: none;
   }

   #current {
      background-color: var(--knop-pagina-nummer-actief);
      border: none;
      color: var(--knop);
   }
}

.upperfooter {

   padding: 30px;
   padding-top: 10px;

   h3 {
      font-family: "Hind Guntur", arial;
      color: #000;
      font-weight: var(--font-weight-normal);
      font-size: 40px;

   }

   strong {
      font-family: "Hind Guntur", arial;
      color: #000;
      font-weight: var(--font-weight-strong);
   }

   button {
      margin-top: 50px;
      background-color: var(--knop-pagina-nummer);
      color: var(--knop-actief);
      font-family: "Hind Guntur", arial;
      font-size: 18px;
      width: 250px;
      height: 45px;
      border: none;
      font-weight: var(--font-weight-strong);
   }

   @media (min-width: 1080px) {
      padding-left: 215px;
      display: flex;
      gap: 150px;
   }
}

footer {
   padding: 2rem;
   position: relative;
   background-color: var(--kleur-footer-bg);
   margin: 3.5rem auto ;

   footernavigatie {
      font-style: normal;
      font-size: 28px;
      font-family: "Hind Guntur", arial;
      ;
      display: flex;
      flex-direction: column;
      line-height: 1.5;
      padding-bottom: 0.5rem;
   }

   @media (min-width:770px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10rem;
   }

   @media (min-width:850px) {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
   }



   .bedrijf-info-section {
      margin-top: 2rem;
    h3 {
         font-family: "Hind Guntur", arial;
         font-size: 28px;
         font-weight: var(--font-weight-normal);
      }

      ul {
         padding: 0;
         list-style-type: none;
      }

      span{font-family: "Hind Guntur", arial;
         font-size: 18px;
         text-decoration: none;
         color: #000;}
      a {
         font-family: "Hind Guntur", arial;
         font-size: 18px;
         text-decoration: none;
         color: #000;
      }

   }

   .diensten-section {
      margin-top: 2rem;

      h3 {
         font-family: "Hind Guntur", arial;
         font-size: 28px;
         font-weight: var(--font-weight-normal);
      }

      ul {
         padding: 0;
         list-style-type: none;
      }

      li {
         font-family: "Hind Guntur", arial;
         font-size: 18px;
         text-decoration: none;
         color: #000;
      }

      a {
         font-family: "Hind Guntur", arial;
         font-size: 18px;
         text-decoration: none;
         color: #000;
      }



   }

   .informatie-section {
      margin-top: 2rem;
    

      h3 {
         font-family: "Hind Guntur", arial;
         font-size: 28px;
         font-weight: var(--font-weight-normal);
      }

      ul {
         padding: 0;
         list-style-type: none;
      }

      li {
         font-family: "Hind Guntur", arial;
         font-size: 18px;
         text-decoration: none;
         color: #000;
      }

      a {
         font-family: "Hind Guntur", arial;
         font-size: 18px;
         text-decoration: none;
         color: #000;
      }
   }

   button {
      margin-top: 2rem;
      border: none;
      background: none;
      font-size: 18px;
   }
}