@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

* {
  scroll-behavior: smooth;
}

main.blog-template > * {
  color: #263238;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
}

main.blog-template .blog-body p {
  line-height: 150%;
  margin-bottom: 20px;
}

@media (min-width: 1200px) {
  main.blog-template .container {
    width: 1280px;
  }
}

main.blog-template section {
  padding: 0 0 0 0;
  height: max-content;
}

main.blog-template .hero .banner-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 100%;
}

main.blog-template .hero .banner-img {
  width: 100%;
  height: 100%;
}

main.blog-template .hero .banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.blog-template .hero .content-wrapper {
  position: absolute;
}

main.blog-template .hero .title {
  color: #57c1e8;
  text-align: center;
  font-family: "Bebas Neue";
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 1.92px;
}

main.blog-template .hero .select-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 45px;
}

main.blog-template .hero select {
  padding: 11px 45px;
  font-size: 14px;
  font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M10.8359 1.4375C10.9531 1.53125 10.9531 1.71875 10.8359 1.83594L5.9375 6.73438C5.82031 6.85156 5.65625 6.85156 5.53906 6.73438L0.640625 1.83594C0.523438 1.71875 0.523438 1.53125 0.640625 1.4375L1.08594 0.96875C1.20312 0.851562 1.39062 0.851562 1.48438 0.96875L5.75 5.21094L9.99219 0.96875C10.0859 0.851562 10.2734 0.851562 10.3906 0.96875L10.8359 1.4375Z' fill='%235C676E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

main.blog-template .hero span {
  color: #77bc1f;
}

main.blog-template .hero .content-wrapper p {
  color: #fff;
  text-align: center;
  font-size: 20px;
  line-height: 150%;
}

main.blog-template .bottom-line {
  background: #44525d;
  padding: 18px 0;
}

main.blog-template .hero .items-wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 45px;
}

main.blog-template .hero .items-wrapper > a {
  color: #fff;
  text-align: right;
  font-size: 15px;
}

main.blog-template section.blog-content {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main.blog-template .blog-content .content-row {
  display: flex;
  max-width: 1280px;
}

main.blog-template .blog-content a {
  color: #036eb5;
  font-family: "Nunito Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  text-decoration-line: underline;
}

main.blog-template .blog-content .content-row .content-area {
  padding: 54px 60px 54px 60px;
  flex: 1;
}

main.blog-template .blog-content .content-row .side-panel {
  padding: 54px 53px 54px 60px;
  background: #f5faff;
  width: 100%;
  max-width: 485px;
}

main.blog-template .blog-header {
  margin-bottom: 41px;
}

main.blog-template .blog-header h2 {
  font-family: "Nunito Sans";
  color: #263238;
  font-size: 24px;
  font-weight: 800;
  line-height: 125%;
  text-transform: none;
  margin: 0 0 10px;
}

main.blog-template .blog-header h3 {
  color: #000;
  font-family: "Nunito Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 13px;
  text-transform: none;
}

main.blog-template .blog-header .blog-date {
  color: #5c676e;
  font-size: 14px;
}

main.blog-template .side-panel .title-colorful {
  color: #57c1e8;
  font-family: "Nunito Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.32px;
}

main.blog-template .side-panel .title-colorful span {
  color: #77bc1f;
}

main.blog-template .blog-body > * {
  font-family: "Nunito Sans", sans-serif;
  text-transform: none;
}

main.blog-template .blog-body hr {
  background-color: #dae0e3;
  height: 1px;
  margin: 15px 0 43px 0;
}

main.blog-template .blog-body h3 {
  font-size: 20px;
  font-weight: 800;
  line-height: 150%;
  margin-bottom: 25px;
}

main.blog-template .blog-body h6 {
  color: #57c1e8;
  font-size: 14px;
  font-weight: 800;
  line-height: 210%;
}

main.blog-template .blog-body h6 span {
  color: #77bc1f;
}

main.blog-template .blog-body ul {
  padding-left: 2.25rem;
  margin-bottom: 40px;
}

main.blog-template .blog-body ul > li {
  font-size: 16px;
  line-height: 150%;
  margin-bottom: 0;
}

main.blog-template .blog-body img {
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 24px;
  border: 1px solid #d9d9d9;
  margin: 23px 0 43px 0;
}

main.blog-template .trends-box {
  border-radius: 6px;
  background: #fff;
  margin-bottom: 48px;
}

main.blog-template .trends-box .box-header {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: #5c676e;
  padding: 9px 35px;
}

main.blog-template .trends-box .title {
  font-family: "Nunito Sans";
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 200%;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}

main.blog-template .trends-box .box-body {
  padding: 30px 30px 36px 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

main.blog-template .trends-box .box-item {
  border-radius: 6px;
  border: 1px solid #e9ecee;
  background: #f6f6f6;
  padding: 15px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main.blog-template .trends-box .box-item .trend-title {
  color: #263238;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 115%;
}

main.blog-template .trends-box .box-item .trend-subtitle {
  color: #5c676e;
  text-align: center;
  font-size: 12px;
  line-height: 133%;
}

main.blog-template .trends-box .box-item .trend-icon {
  width: 31px;
  height: 36px;
  margin: 12px 0 16px 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='6' viewBox='0 0 29 6' fill='none'%3E%3Cpath d='M0 3H29' stroke='%235C676E' stroke-width='6'/%3E%3C/svg%3E");
}

main.blog-template .trends-box .box-item .trend-icon.up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='31' viewBox='0 0 36 31' fill='none'%3E%3Cpath d='M0 31L17.9927 -1.69279e-06L36 31L0 31Z' fill='%2377BC1F'/%3E%3C/svg%3E");
}

main.blog-template .trends-box .box-item .trend-icon.down {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='31' viewBox='0 0 36 31' fill='none'%3E%3Cpath d='M36 0L18.0073 31L0 -1.57361e-06L36 0Z' fill='%2357C1E8'/%3E%3C/svg%3E");
}

@media (max-width: 991px) {
  main.blog-template .blog-content .content-row .side-panel {
    max-width: 375px;
    padding: 29px 30px 29px 30px;
  }

  main.blog-template .blog-content .content-row .content-area {
    padding: 29px 30px 29px 30px;
  }
}

@media (max-width: 820px) {
  main.blog-template .blog-content .content-row {
    flex-direction: column;
  }

  main.blog-template .blog-content .content-row .side-panel {
    max-width: none;
  }
}

@media (max-width: 576px) {
  main.blog-template .hero .title {
    font-size: 38px;
  }

  main.blog-template .hero .items-wrapper {
    gap: 20px;
  }

  main.blog-template .hero .content-wrapper p {
    font-size: 16px;
  }

  main.blog-template .hero .items-wrapper > a {
    text-align: center;
  }

  main.blog-template .hero .banner-wrapper {
    height: 275px;
  }

  main.blog-template .blog-content .content-row .content-area,
  main.blog-template .blog-content .content-row .side-panel {
    padding: 25px 15px 25px 15px;
  }

  main.blog-template .blog-header h2 {
    line-height: 120%;
  }

  main.blog-template .trends-box .box-body {
    padding: 15px 15px 24px 15px;
  }
}