.documents-component{
  width:100%;
}

.documents-header{
  text-align:center;
  margin-bottom:2rem;
}

.documents-title{
  font-size:2.25rem;
  font-weight:800;
  color:var(--blue-deep) !important;
  margin-top:.75rem;
}

.documents-subtitle{
  max-width:700px;
  margin:1rem auto 0 !important;
  color:var(--text-muted);
  text-align:center;
}

.documents-search-wrapper{
  position:relative;
  margin-bottom:2rem;
}

.documents-search-wrapper input{
  width:100%;
  height:58px;

  border:none;

  border-radius:18px;

  padding-left:54px;
  padding-right:20px;

  background:#fff;

  box-shadow:
    0 10px 25px rgba(0,0,0,.05);

  font-size:.95rem;
}

.documents-search-wrapper input:focus{
  outline:none;
}

.documents-search-icon{
  width:20px;
  height:20px;

  position:absolute;

  left:20px;
  top:50%;

  transform:translateY(-50%);

  color:var(--blue-deep);
}

.documents-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fill,minmax(280px,1fr));

  gap:1.25rem;

}

.document-card{

  background:#fff;

  border-radius:24px;

  padding:1.25rem;

  border:
    1px solid rgba(30,90,173,.08);

  box-shadow:
    0 12px 24px rgba(30,90,173,.05);

  transition:.25s;

}

.document-card:hover{

  transform:translateY(-4px);

  box-shadow:
    0 20px 40px rgba(30,90,173,.10);

}

.document-icon{

  width:52px;
  height:52px;

  border-radius:14px;

  background:
    rgba(40,114,212,.08);

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:1rem;

}

.document-icon svg{
  width:24px;
  height:24px;
}

.document-title{
  font-size:1rem;
  font-weight:700;
  color:var(--text-main);

  margin-bottom:.5rem;
}

.document-description{
  font-size:.875rem;
  color:var(--text-muted);

  margin-bottom:1rem;
}

.document-link{

  display:inline-flex;
  align-items:center;
  gap:.5rem;

  text-decoration:none;

  color:var(--blue-deep);

  font-weight:600;

}

.documents-pagination{

  display:flex;
  justify-content:center;
  gap:.5rem;

  margin-top:2rem;

  flex-wrap:wrap;

}

.page-btn{

  width:42px;
  height:42px;

  border:none;

  border-radius:999px;

  background:#fff;

  cursor:pointer;

  font-weight:600;

  transition:.25s;

}

.page-btn.active{

  background:var(--blue-deep);

  color:#fff;

}