@font-face {
    font-family: 'Geomanist';
    src: url('../font/Geomanist-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Geomanist Book';
    src: url('../font/Geomanist-Book.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bariol Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../font/bariol_regular-webfont.ttf') format('woff');
    }

:root {
    --white: white;
    --lila-lyrics: #9F66DB;
    --lila-line: #DFCCF3;
    --gray-lyric: #676767;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Bariol Regular", sans-serif;
}

a{
    text-decoration: none;
}

/* Estilo de miga de pan */

.nav-crumbs { 
    display: flex;
    align-items: center;
    padding-top: 9px;
    padding-left: 10px;
}

.nav-crumbs p {
    font-family: 'Bariol Regular';
    font-size: 10px;
    color: rgba(103, 103, 103, 0.36);
}

/* Estilos de la portada de la página */

.cover-page {
    position: relative;
    background: url(../img/portada-ayuda.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 501px;
}

.information {
   display: flex;
   align-items: center;
   flex-direction: column;
   color: var(--gray-lyric);
}

.information h1 {
    font-size: 31px;
    font-family: 'Geomanist';
    line-height: 34px;
    text-align: center;
    margin-bottom: 6px;
    padding: 25px 65px 0px 65px;
    line-height: 31px;
}

.information p {
    font-family: 'Bariol Regular';
    font-size: 13px;
    text-align: center;
    padding: 0px 70px 0px 70px;
    line-height: 150%;
}

/*  Estilos de categorias de ayudas y donaciones */

 .categories-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 5%;
 }

 .card-template {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 350px;
    height: 125px;
    border-radius: 4.56323px;
 }

 .refer {
    background-image: url(/img/refiere.jpg);
    background-repeat: no-repeat;
    margin-bottom: 5%;
 }

 .foolprint {
    background-image: url(/img/huellas.jpg);
    background-repeat: no-repeat;
    margin-bottom: 5%;
 }

 .grow {
    background-image: url(/img/crecer.jpg);
    background-repeat: no-repeat;
    margin-bottom: 5%;
 }

 .fundation {
    background-image: url(/img/fundacion.jpg);
    background-repeat: no-repeat;
    margin-bottom: 7%;
 }

 .info-categories {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-right: 5%;
    width: 40%;
 }

 .info-categories h4 {
    text-align: center;
    margin-bottom: 3%;
    color: var(--white);
    font-family: 'Geomanist';
 }

 #button-refer {
    background: #FFA666;
 }

 #button-refer:hover {
    background: var(--white);
    border: 2px solid #FFA666;
    color: #FFA666;
 }

 #wwb {
    color: var(--gray-lyric);
 }

 .info-categories button {
    width: 100px;
    height: 22.75px;
    background: #9F66DB;
    border-radius:5px;
    color: var(--white);
    border: none;
 }

 .info-categories button:hover {
    background: var(--white);
    border-radius: 3.18514px;
    color: var(--lila-lyrics);
    border: 2px solid var(--lila-lyrics);
    border-radius:  5px;;
 }

 a {
   cursor: pointer;
 }

 button {
   cursor: pointer;
 }

/* ///////////////////////////////// 🖥️ Desktop //////////////////////// */

@media (min-width: 1024px) {

  .nav-cover a {
    text-decoration: none;
    font-size: 20px;
    color: var(--lila-lyrics);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Bariol Regular";
    pointer-events: none;
  }

  .nav-crumbs {
    display: none;
  }
  
  .cover-page {
    position: relative;
    background: url(../img/portada-donaciones.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 479px;
  }
  
  .information {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin-left: 59%;
    padding-top: 11%;
  }

  .information > div{
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  
  .information h1 {
    font-size: 32px;
    font-family: "Geomanist";
    line-height: 40.54px;
    text-align: left;
    width: 100%;
    margin-bottom: 6px;
    /* margin-left: -149px; */
    /* padding: 115px 0px 0px 500px; */
    padding: 0;
  }
  
  .information p {
    font-family: "Bariol Regular";
    font-size: 20px;
    text-align: start;
    /* padding: 0px 0px 0px 530px; */
    line-height: 23.72px;
    width: 100%;
    padding: 0;
  }

  /* Responsive categorias */

 .cards-container,
 .cards-container2 {
    display: flex;
    gap: 3.5%;
 }

 .card-template {
    width: 680px;
    height: 243px;
 }

 .refer {
    background-image: url(/img/refiere2.jpg);
    margin-bottom: 3.5%;
 }

 .foolprint {
    background-image: url(/img/huellas2.jpg);
    margin-bottom: 0;
 }

 .grow {
    background-image: url(/img/crecer2.jpg);
    margin-bottom: 0;
 }

 .fundation {
    background-image: url(/img/fundacion2.jpg);
    margin-bottom: 5%;
 }

 .info-categories h4 {
    font-size: 36px;
    font-family: 'Geomanist';
 }

 .info-categories button {
    width: 195px;
    height: 44px;
 }

 .info-categories {
    width: 41%;
 }

 .info-categories button {
   font-size: 20px;
}


}