article.post {
  transition: all 0.3s ease-in-out;
  position: relative;
}
article.post:hover {
  transform: translateY(-0.5rem);
}
article.post:hover .btn {
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  article.post img {
    width: 100%;
  }
}
article.post h3 {
  margin: 2.063rem 0 1rem;
  font-weight: bold;
  color: #292B65;
  font-size: 1rem;
}
article.post p {
  font-size: 0.875rem;
  color: #686868;
}
article.post .btn {
  transition: all 0.3s ease-in-out;
  text-transform: capitalize;
  margin-left: 0 !important;
  width: -moz-fit-content;
  width: fit-content;
  color: #00c8ff;
  padding: 0;
}
article.post .btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.beacooperator {
  margin: 0 auto 4rem;
  width: -moz-fit-content;
  width: fit-content;
}

.blog {
  max-width: 1920px;
  margin: auto;
}
.blog .container h1, .blog .container .h1 {
  font-size: 2.25rem;
  font-weight: 900;
  color: #292B65;
}
.blog .container h1 + p, .blog .container .h1 + p {
  margin-bottom: 3.438rem;
  color: #292B65;
}
.blog .container .first-post {
  transition: all 0.3s ease-in-out;
  margin-bottom: 7.5rem;
  position: relative;
}
@media (max-width: 767.98px) {
  .blog .container .first-post {
    margin-bottom: 3rem;
  }
}
.blog .container .first-post:hover {
  transform: translateY(-0.5rem);
}
.blog .container .first-post h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #292B65;
}
.blog .container .first-post p {
  margin: 0.5rem 0 3.125rem;
  font-size: 0.875rem;
  color: #686868;
}
.blog .container .first-post .btn {
  width: -moz-fit-content;
  width: fit-content;
}
.blog .container .first-post .btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.blog .container .col-md-4 {
  margin-bottom: 8rem;
}
@media (max-width: 767.98px) {
  .blog .container .col-md-4 {
    margin-bottom: 3rem;
  }
}