@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.eot");
  src: url("../fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff"), url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.eot");
  src: url("../fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff"), url("../fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
.blogs {
  position: relative;
  min-height: calc(100vh - 100px);
  overflow: hidden;
}
.blogs-filters {
  display: flex;
  padding: 2em 5%;
  gap: 0.5em;
}
.blogs-search {
  width: fit-content;
  background-color: #E0DFDF;
  overflow: hidden;
  padding: 0 0.25em;
  min-width: 40%;
}
.blogs-search input {
  padding: 5px 10px;
  background: #E0DFDF;
  width: 100%;
  color: #0A386E;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath id='search' d='M12.911,11.905,9.828,8.823a.3.3,0,0,0-.216-.089H9.277a5.28,5.28,0,1,0-.543.543v.335a.312.312,0,0,0,.089.216l3.082,3.082a.3.3,0,0,0,.432,0l.574-.574A.3.3,0,0,0,12.911,11.905ZM5.281,9.343A4.062,4.062,0,1,1,9.343,5.281,4.061,4.061,0,0,1,5.281,9.343Z' transform='translate(0.5 0.5)' fill='%2300245b' stroke='rgba(0,0,0,0)' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 98% center;
}
.blogs-search input:focus-visible, .blogs-search input:focus {
  border: none;
  outline: #0A386E 1px;
}
.blogs-tags {
  display: flex;
  gap: 0.25em;
}
.blogs-tags .tag {
  cursor: pointer;
  padding: 0.25em 0.75em;
  border-radius: 0.35em;
  color: #3f3f3f;
  display: flex;
  align-self: center;
}
.blogs-tags .tag-selected {
  color: #FAFAFA;
  background: #0A386E;
}
.blogs ul {
  width: 100%;
  position: relative;
  list-style-type: none;
}
.blogs li {
  width: 100%;
  position: relative;
  display: flex;
  align-self: center;
  padding: 0.25em 0.25em !important;
}
.blogs li a {
  font-size: 14px;
  color: #213242;
}
.blogs-list {
  display: flex;
  width: 100%;
  position: relative;
  flex-direction: column;
  gap: 2em;
  padding: 3em 5%;
  overflow: hidden;
}
.blogs-list a {
  width: 100%;
  position: relative;
}
.blogs-list a img {
  transition: all ease-in 0.2s;
}
.blogs-list a:hover img {
  transform: scale(1.02);
}
.blogs .blog {
  width: 100%;
  display: flex;
  padding: 2em;
  overflow: hidden;
  text-decoration: none;
  gap: 2em;
  background: white;
}
.blogs .blog-image {
  max-width: 30%;
  overflow: hidden;
  aspect-ratio: 1.2/1;
  position: relative;
  border-radius: 0.5em;
  overflow: hidden;
  object-fit: cover;
}
.blogs .blog-description {
  height: auto;
  width: 70%;
  background: white;
  padding: 2em 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.blogs .blog-description h6 {
  color: #9301a7;
  font-size: 90%;
}
.blogs .blog-description h5 {
  font-size: 95%;
}
.blogs .blog-description span {
  font-size: 80%;
  color: rgba(0, 36, 91, 0.8666666667);
}
.blogs .blog-description .go {
  display: flex;
  gap: 0.25em;
}
.blogs .blog-description .go::after {
  content: "";
  width: 20px;
  display: flex;
  background-size: 75%;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Cpath id='arrow-from-left' d='M108.505,96.218l9.274,9.249a.751.751,0,0,1,0,1.062l-9.274,9.249a.751.751,0,0,1-1.062,0l-1.225-1.225a.742.742,0,0,1,.012-1.069l6.068-5.856H96.75a.752.752,0,0,1-.75-.75v-1.75a.752.752,0,0,1,.75-.75H112.3l-6.068-5.856a.753.753,0,0,1-.012-1.069l1.225-1.225a.74.74,0,0,1,1.062-.012Z' transform='translate(-96 -96)' fill='%23002858'/%3E%3C/svg%3E%0A");
}
.blogs .blog-text {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #3f3f3f;
  font-weight: normal;
}
.blogs .blog-text p {
  font-size: 16px;
}
.blogs-empty {
  padding: 0 5%;
}
.blogs-empty h3 {
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 993px) {
  .blogs-list {
    display: flex;
    flex-direction: column;
  }
  .blogs-list .blog, .blogs-list .complete {
    grid-column: auto/span 1;
  }
  .blogs-list .blog {
    flex-direction: column;
    padding: 1em;
  }
  .blogs-list .blog-image {
    max-width: 100%;
  }
  .blogs-list .blog-description {
    width: 100%;
    text-align: center;
    gap: 1em;
    align-items: center;
  }
  .blogs-list .blog-description h4, .blogs-list .blog-description h5 {
    font-size: 120%;
  }
  .blogs-list .blog-description span {
    font-size: 12px;
  }
  .blogs-list .blog-description p {
    font-size: 14px;
  }
  .blogs-filters {
    flex-direction: column;
  }
  .blogs-tags {
    flex-wrap: wrap;
    justify-content: center;
  }
  .blogs-search {
    width: 100%;
  }
  .blogs-search input {
    width: 100%;
    padding: 0.65em 0.5em;
  }
}