main.blog section.component-hero-container {
  padding-bottom: var(--spacing-3-xl);
  /* .card-post{
       width: var(--col-10);
       margin: auto;
       margin-top: var(--spacing-2-xl);

       @media screen and (max-width:768px) {
           width: 100%;
           h4{
               text-align: left;
           }
       }

   }
       */
}
main.blog section.posts .container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  main.blog section.posts .container {
    flex-direction: column;
  }
}
main.blog section.posts .container .search-categories {
  width: var(--col-2);
}
@media screen and (max-width: 768px) {
  main.blog section.posts .container .search-categories {
    width: 100%;
  }
}
main.blog section.posts .container .search-categories form {
  position: relative;
}
main.blog section.posts .container .search-categories form:after {
  content: "";
  position: absolute;
  display: block;
  left: var(--spacing-s);
  top: 0px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8bWFzayBpZD0iYSIgZmlsbD0iI2ZmZiI+CiAgICA8cGF0aCBkPSJNMTMuMTMgMTEuODhoLS42NmwtLjIzMy0uMjI1YTUuNCA1LjQgMCAwIDAgMS4zMDktMy41MjUgNS40MTcgNS40MTcgMCAxIDAtNS40MTcgNS40MTYgNS40IDUuNCAwIDAgMCAzLjUyNS0xLjMwOGwuMjI1LjIzM3YuNjU5bDQuMTY3IDQuMTU4IDEuMjQxLTEuMjQyem0tNSAwYTMuNzQ1IDMuNzQ1IDAgMCAxLTMuNzUtMy43NSAzLjc0NSAzLjc0NSAwIDAgMSAzLjc1LTMuNzUgMy43NDUgMy43NDUgMCAwIDEgMy43NSAzLjc1IDMuNzQ1IDMuNzQ1IDAgMCAxLTMuNzUgMy43NSIvPgogIDwvbWFzaz4KICA8cGF0aCBkPSJNMTMuMTMgMTEuODhoLS42NmwtLjIzMy0uMjI1YTUuNCA1LjQgMCAwIDAgMS4zMDktMy41MjUgNS40MTcgNS40MTcgMCAxIDAtNS40MTcgNS40MTYgNS40IDUuNCAwIDAgMCAzLjUyNS0xLjMwOGwuMjI1LjIzM3YuNjU5bDQuMTY3IDQuMTU4IDEuMjQxLTEuMjQyem0tNSAwYTMuNzQ1IDMuNzQ1IDAgMCAxLTMuNzUtMy43NSAzLjc0NSAzLjc0NSAwIDAgMSAzLjc1LTMuNzUgMy43NDUgMy43NDUgMCAwIDEgMy43NSAzLjc1IDMuNzQ1IDMuNzQ1IDAgMCAxLTMuNzUgMy43NSIgZmlsbD0iI2ZmZiIvPgogIDxwYXRoIGQ9Im0xMy4xMyAxMS44OCAxLjQxNS0xLjQxMy0uNTg2LS41ODdoLS44M3ptLS42NiAwLTEuMzg4IDEuNDQuNTgyLjU2aC44MDd6bS0uMjMzLS4yMjUtMS41MTYtMS4zMDQtMS4yMzIgMS40MzIgMS4zNiAxLjMxMXptLS41ODMuNTgzIDEuNDQtMS4zODgtMS4zMTEtMS4zNi0xLjQzMyAxLjIzMXptLjIyNS4yMzNoMnYtLjgwN2wtLjU2LS41ODF6bTAgLjY1OWgtMnYuODNsLjU4Ny41ODV6bTQuMTY3IDQuMTU4LTEuNDEzIDEuNDE1IDEuNDE0IDEuNDEyIDEuNDEzLTEuNDEzem0xLjI0MS0xLjI0MiAxLjQxNSAxLjQxNCAxLjQxMi0xLjQxMi0xLjQxMS0xLjQxNXpNMTMuMTMgOS44OGgtLjY1OHY0aC42NTh6bS43My41Ni0uMjMzLS4yMjUtMi43NzcgMi44OC4yMzMuMjI0em0tLjEwNSAyLjUxOGE3LjQgNy40IDAgMCAwIDEuNzkyLTQuODI4aC00YzAgLjg0NC0uMzA4IDEuNjItLjgyNSAyLjIyem0xLjc5Mi00LjgyOEE3LjQxNiA3LjQxNiAwIDAgMCA4LjEyOS43MTN2NGEzLjQxNiAzLjQxNiAwIDAgMSAzLjQxNyAzLjQxN3pNOC4xMjkuNzEzQTcuNDE3IDcuNDE3IDAgMCAwIC43MTIgOC4xM2g0QTMuNDE3IDMuNDE3IDAgMCAxIDguMTMgNC43MTN6TS43MTIgOC4xM2E3LjQxNiA3LjQxNiAwIDAgMCA3LjQxNyA3LjQxNnYtNEEzLjQxNiAzLjQxNiAwIDAgMSA0LjcxMiA4LjEzem03LjQxNyA3LjQxNmMxLjgzOSAwIDMuNTMtLjY3NSA0LjgyOS0xLjc5MUwxMC4zNSAxMC43MmEzLjQgMy40IDAgMCAxLTIuMjIuODI1em0yLjA4NS0xLjkyLjIyNS4yMzQgMi44OC0yLjc3Ny0uMjI1LS4yMzN6bS0uMzM1LTEuMTU1di42NTloNHYtLjY1OXptLjU4NyAyLjA3NCA0LjE2NyA0LjE1OCAyLjgyNi0yLjgzLTQuMTY3LTQuMTZ6bTYuOTk0IDQuMTU3IDEuMjQyLTEuMjQyLTIuODI5LTIuODI4LTEuMjQxIDEuMjQyem0xLjI0My00LjA2OS00LjE1OC00LjE2Ni0yLjgzMiAyLjgyNSA0LjE1OSA0LjE2N3pNOC4xMjkgOS44OGMtLjk3IDAtMS43NS0uNzgtMS43NS0xLjc1aC00YzAgMy4xOCAyLjU3IDUuNzUgNS43NSA1Ljc1ek02LjM4IDguMTNjMC0uOTcuNzgtMS43NSAxLjc1LTEuNzV2LTRjLTMuMTggMC01Ljc1IDIuNTctNS43NSA1Ljc1em0xLjc1LTEuNzVjLjk3IDAgMS43NS43OCAxLjc1IDEuNzVoNGMwLTMuMTgtMi41Ny01Ljc1LTUuNzUtNS43NXptMS43NSAxLjc1YzAgLjk3LS43OCAxLjc1LTEuNzUgMS43NXY0YzMuMTggMCA1Ljc1LTIuNTcgNS43NS01Ljc1eiIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCNhKSIvPgo8L3N2Zz4K");
  width: 20px;
  height: 100%;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
main.blog section.posts .container .search-categories form input {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  background-color: transparent;
  color: white;
  padding: var(--spacing-s);
  padding-left: 40px;
  position: relative;
  transition: all 0.3s;
}
main.blog section.posts .container .search-categories form input:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.5647058824);
}
main.blog section.posts .container .search-categories ul {
  list-style: none;
  margin-left: 0px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-l);
}
main.blog section.posts .container .search-categories ul li {
  list-style: none;
  margin-left: 0px;
}
main.blog section.posts .container .search-categories ul li a {
  font-size: 14px;
  color: white;
  opacity: 1;
}
main.blog section.posts .container .search-categories ul li a.active {
  color: var(--primary);
}
main.blog section.posts .container div.posts-container {
  width: var(--col-10);
  min-height: 300px;
}
main.blog section.posts .container div.posts-container div.loading {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.blog section.posts .container div.posts-container div.loading:after {
  content: "";
  width: 48px;
  height: 48px;
  border: 3px solid var(--primary);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
  animation: rotation 1.5s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 768px) {
  main.blog section.posts .container div.posts-container {
    width: 100%;
  }
}
main.blog section.posts .container div.posts-container .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-l);
}
@media screen and (max-width: 1100px) {
  main.blog section.posts .container div.posts-container .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 950px) {
  main.blog section.posts .container div.posts-container .cards {
    grid-template-columns: 1fr;
  }
}
main.blog section.posts .container div.posts-container .cards .no-posts {
  grid-column: span 3;
  display: flex;
  justify-content: center;
}
main.blog section.posts .container div.posts-container .pagination {
  padding-top: var(--spacing-2-xl);
  margin-top: var(--spacing-2-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
main.blog section.posts .container div.posts-container .pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
}
main.blog section.posts .container div.posts-container .pagination .nav-links a {
  color: white;
  font-size: 14px;
  line-height: 18px;
}
main.blog section.posts .container div.posts-container .pagination .nav-links .current, main.blog section.posts .container div.posts-container .pagination .nav-links .prev, main.blog section.posts .container div.posts-container .pagination .nav-links .next {
  padding: var(--spacing-s);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}
main.blog section.posts .container div.posts-container .pagination .nav-links a, main.blog section.posts .container div.posts-container .pagination .nav-links span {
  padding: var(--spacing-s);
  border-radius: 2px;
  color: white;
}
main.blog section.posts .container div.posts-container .pagination .nav-links .current {
  color: white;
}
main.blog section.posts .container div.posts-container .pagination .nav-links .prev, main.blog section.posts .container div.posts-container .pagination .nav-links .next {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0px;
}
main.blog section.posts .container div.posts-container .pagination .nav-links .prev:before, main.blog section.posts .container div.posts-container .pagination .nav-links .next:before {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48bWFzayBpZD0iYSIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTEzLjMzMyA3LjMzM0g1LjIybDMuNzI3LTMuNzI2TDggMi42NjcgMi42NjcgOCA4IDEzLjMzM2wuOTQtLjk0LTMuNzItMy43MjdoOC4xMTN6Ii8+PC9tYXNrPjxwYXRoIGQ9Ik0xMy4zMzMgNy4zMzNINS4yMmwzLjcyNy0zLjcyNkw4IDIuNjY3IDIuNjY3IDggOCAxMy4zMzNsLjk0LS45NC0zLjcyLTMuNzI3aDguMTEzeiIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0xMy4zMzMgNy4zMzNoMS41di0xLjVoLTEuNXptLTguMTEzIDAtMS4wNi0xLjA2LTIuNTYxIDIuNTZINS4yMnptMy43MjctMy43MjYgMS4wNiAxLjA2IDEuMDY1LTEuMDY0LTEuMDY4LTEuMDZ6TTggMi42NjdsMS4wNTctMS4wNjVMNy45OTcuNTUgNi45MzggMS42MDZ6TTIuNjY3IDhsLTEuMDYtMS4wNkwuNTQ0IDhsMS4wNjEgMS4wNnpNOCAxMy4zMzNsLTEuMDYgMS4wNkw4IDE1LjQ1NWwxLjA2LTEuMDZ6bS45NC0uOTQgMS4wNiAxLjA2IDEuMDYtMS4wNTktMS4wNTgtMS4wNnpNNS4yMiA4LjY2NnYtMS41SDEuNjAzbDIuNTU1IDIuNTZ6bTguMTEzIDB2MS41aDEuNXYtMS41em0wLTIuODMzSDUuMjJ2M2g4LjExM3ptLTcuMDUyIDIuNTYgMy43MjYtMy43MjYtMi4xMi0yLjEyMS0zLjcyOCAzLjcyN3ptMy43MjMtNS44NS0uOTQ3LS45NEw2Ljk0MyAzLjczbC45NDcuOTR6bS0zLjA2NS0uOTM3TDEuNjA2IDYuOTM5IDMuNzI3IDkuMDZsNS4zMzQtNS4zMzN6TTEuNjA2IDkuMDZsNS4zMzMgNS4zMzQgMi4xMjItMi4xMjEtNS4zMzQtNS4zMzR6bTcuNDU1IDUuMzM0Ljk0LS45NC0yLjEyMi0yLjEyMi0uOTQuOTR6bS45NC0zLjA2LTMuNzItMy43MjctMi4xMjMgMi4xMiAzLjcyIDMuNzI2em0tNC43OC0xLjE2OGg4LjExMnYtM0g1LjIyem05LjYxMi0xLjVWNy4zMzNoLTN2MS4zMzN6IiBmaWxsPSIjZmZmIiBtYXNrPSJ1cmwoI2EpIi8+PC9zdmc+");
  height: 16px;
  width: 16px;
}
main.blog section.posts .container div.posts-container .pagination .nav-links .prev {
  justify-self: flex-start;
}
main.blog section.posts .container div.posts-container .pagination .nav-links .next {
  justify-self: flex-end;
  left: inherit;
  right: 0px;
  flex-direction: row-reverse;
}
main.blog section.posts .container div.posts-container .pagination .nav-links .next::before {
  transform: rotate(180deg);
}