/* Shared styles used by blog-article, from general.css. */
.section-sub-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: var(--text-color3);
}

.section-titles {
  gap: 12px;
}

.swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  position: initial !important;
  gap: 8px;
  margin-top: 20px !important;
}

.bread-crumbs ul li a {
  color: var(--text-color);
  opacity: 0.6;
}

.loss-quality-elips {
  width: 100%;
  position: absolute;
  top: -94px;
  left: 0;
}

.automatic-renewal {
  gap: 24px;
  border-radius: 10px;
  padding: 20px;
  border-left: 4px solid var(--slider-fill);
  background: var(--main-container7);
}

.automatic-renewal p {
  color: var(--text-color);
}

.starting-out {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-color);
  padding: 32px;
  margin-top: 20px;
}

.starting-out-boxes {
  border: 1px solid var(--border);
  transition: 0.3s;
  border-radius: 12px;
  cursor: pointer;
}

.starting-out-boxes:hover {
  border: 1px solid var(--accent-color);
}

.starting-out-photo {
  position: relative;
}

.starting-sample {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-box-color);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--slider-thumb);
}

.starting-out-photo img {
  width: 100%;
  border-radius: 12px;
  height: 224px;
  object-fit: cover;
}

.starting-out-info {
  padding: 20px 24px 24px;
  border-radius: 12px;
  width: 100%;
  background: var(--bg-color);
  transition: 0.3s;
}

.starting-out-text p {
  margin-top: 8px;
}

.starting-out-boxes .blog-leads-photo {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.blog-leads-info small {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  color: var(--border2);
}

.blog-leads-photo {
  gap: 10px;
  margin-top: 12px;
}

.blog-leads-photo > img {
  width: 48px;
  border-radius: 50%;
}

.blog-leads-name h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-color);
}

.blog-leads-name h4 span {
  color: var(--accent-color);
}

.blog-leads-name p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 18px;
}

.year-section-data {
  max-width: 282px;
  width: 100%;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.year-section-data strong {
  font-weight: 600;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: -6%;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.year-section-data p {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}

.levle-beg-circ {
  gap: 6px;
}

.levle-beg-circ ul {
  display: flex;
  align-items: center;
  gap: 4px;
}

.levle-beg-circ ul li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border);
  transition: 0.3s;
  background: var(--border);
}

.levle-beg-circ ul li.circle-active {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.levle-beg-circ span {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
}

.marketer-this-rel {
  margin-top: 24px;
  position: relative;
}

.marketer-pagination {
  display: none;
}

.marketer-this-slider .swiper-wrapper {
  width: 102%;
  flex-wrap: wrap;
  gap: 10px 0;
}

.marketer-this-box {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  padding: 16px;
  transition: 0.3s;
  border: 1px solid var(--border);
  background: var(--bg-color);
  cursor: pointer;
}

.marketer-this-box:hover {
  border: 1px solid var(--accent-color);
}

.marketer-this-count small {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--border2);
}

.marketer-this-count .catalog-item-link {
  background: var(--bg-box-color);
}

.marketer-this-count .catalog-item-link .icon-arrow {
  background-color: var(--slider-thumb);
}

.marketer-this-box:hover .catalog-item-link {
  background: var(--accent-color);
}

.marketer-this-info {
  margin-top: 26px;
}

.marketer-this-info h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.marketer-this-info .current-point-blog {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  gap: 10px;
}

.marketer-this-info p {
  font-size: 14px;
  line-height: 18px;
}

.marketer-this-info .current-point-blog img {
  width: 14px;
  height: 14px;
}

.startups-slidy-box {
  border: 0.73px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  gap: 60px;
  background: var(--slider-thumb);
}

.startups-slidy-count span {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--border2);
}

.startups-slidy-box .smart-temp-text {
  padding: 0;
}

.startups-slidy-box .smart-temp-text p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 18px;
}

.linking-card-title .section-sub-title {
  color: #ffffff;
  opacity: 0.8;
}

.explore-inpired {
  background: #161616;
  position: relative;
  padding: 40px 0 80px;
}

.inpired-pagination {
  display: none;
}

.explore-inpired-slider {
  margin-top: 40px;
}

.explore-inpired-slider .startups-slidy-box {
  background: #161616;
  gap: 32px;
  border: 1px solid #ffffff1a;
}

.explore-inpired-slider .smart-temp-text h3 {
  color: #ffffff;
}

.explore-inpired-slider .smart-temp-text p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 20px;
  max-width: 300px;
  width: 100%;
  color: #ffffff;
  opacity: 0.8;
}

.explore-inpired-slider .btn-black {
  margin-top: 16px;
  width: 100%;
  border: 1px solid #ffffff1a;
}

.explore-inpired-slider .startups-slidy-count span {
  color: #ffffff;
  opacity: 0.8;
}

.user-cases-main {
  margin-top: 40px;
}

.articles-names {
  border-radius: 100px;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--border);
  background: var(--main-container6);
}

.articles-tools {
  padding: 4px 16px 4px 4px;
}

.articles-tools img {
  min-width: 28px;
  width: 28px;
  height: 28px;
}

.articles-names span {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-color);
}

.middle-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--border2);
  margin-bottom: 10px;
  display: block;
}

.refund-condition-box {
  width: calc(50% - 8px);
  border: 1px solid var(--border);
  background: var(--slider-thumb);
  border-radius: 10px;
  padding: 20px;
}

.refund-condition-box h4 {
  display: flex;
  align-items: center;
  gap: 5px;
}

.refund-condition-box ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.refund-condition-box ul li {
  border-bottom: 2px solid var(--border);
  padding-bottom: 12px;
  color: var(--text-color);
}

.refund-condition-box ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.share-soc {
  min-width: 42px;
  width: 42px;
  height: 42px;
}

.share-soc img {
  width: 100%;
}

.share-helps-flex {
  margin-top: 16px;
  gap: 10px;
}

@media (max-width: 1299px) {
  .starting-out {
    padding: 24px;
  }
}

@media (max-width: 1199px) {
  .starting-out-info {
    padding: 20px 20px 20px;
  }

  .starting-out {
    padding: 10px;
  }

  .starting-out {
    padding: 0;
    border: unset;
  }

  .starting-out-boxes {
    height: 100%;
  }
}

@media (max-width: 1020px) {
  .marketer-this-slider .swiper-wrapper {
    width: 100%;
    flex-wrap: unset;
    gap: 0;
  }

  .marketer-pagination {
    display: flex;
  }

  .year-section-data {
    max-width: 48%;
  }

  .articles-names span {
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 767px) {
  .refund-condition-box {
    width: 100%;
  }

  .year-section-data p {
    font-size: 16px;
    line-height: 20px;
  }

  .year-section-data {
    max-width: 100%;
  }

  .articles-tools img {
    min-width: 26px;
    width: 26px;
    height: 26px;
  }

  .startups-slidy-box {
    height: 240px;
    justify-content: space-between;
  }

  .starting-out-boxes {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .updated-blog {
    gap: 6px;
  }
}

@media (max-width: 576px) {
  .section-big-title {
    font-size: 30px;
    line-height: 34px;
  }

  .hero-titles {
    max-width: 332px;
  }

  .share-helps-flex {
    margin-top: 20px;
    gap: 7px;
  }

  .bread-crumbs ul {
    gap: 6px;
  }

  .starting-out-photo img {
    border-radius: 10px;
    height: 188px;
  }

  .loss-quality-elips img {
    width: 100%;
    object-position: top;
    height: 63px;
    object-fit: cover;
  }

  .loss-quality-elips {
    top: -30px;
  }

  .explore-inpired-slider {
    margin-top: 32px;
  }

  .explore-inpired-slider .btn-black {
    margin-top: 8px;
    width: 100%;
  }

  .marketer-this-rel {
    margin-top: 20px;
  }

  .marketer-this-info {
    margin-top: 60px;
  }

  .marketer-this-box {
    min-height: 200px;
    height: auto;
    padding: 20px;
  }

  .marketer-this-info h4 {
    font-size: 18px;
    line-height: 20px;
  }

  .articles-names {
    gap: 6px;
    padding: 6px 12px 6px 6px;
  }

  .share-soc {
    min-width: 40px;
    width: 40px;
    height: 40px;
  }
}

.article-page {
  margin-top: 112px;
}

.article-page .bread-crumbs ul {
  justify-content: flex-start;
}

.updated-blog {
  gap: 10px;
  border-radius: 200px;
  padding: 8px 12px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
  background: var(--primary-cont);
}
.circle {
  border-radius: 50%;
  min-width: 6px;
  width: 6px;
  height: 6px;
  background: var(--accent-color);
  display: flex;
}

.article-density {
  margin-top: 48px;
}
.article-density-circ {
  gap: 8px;
}
.article-density {
  gap: 10px;
}
.article-density-info {
  max-width: 720px;
  width: 100%;
}
.article-density-info h1 {
  text-align: left;
  margin-top: 20px;
}
.article-density-info .hero-titles p {
  text-align: left;
  margin-top: 20px;
}
.article-density-info .year-section-flex {
  margin: 44px 0;
  width: 100%;
}
.article-density-info .year-section-data {
  gap: 8px;
}
.article-density-info .year-section-data strong {
  font-size: 28px;
}
.article-density-info .year-section-data p {
  font-size: 16px;
  line-height: 20px;
  color: var(--text-color);
}

.year-section-data .circle {
  background: rgba(17, 197, 33, 1);
}
.article-page-btn {
  width: 100%;
  gap: 10px;
}
.article-page-btn .btn-arrow {
  font-size: 18px;
  line-height: 19px;
  padding: 14px 24px;
}
.article-page-btn .areas-btn {
  max-width: 227px;
  width: 100%;
}

.author-article {
  border: 1px solid var(--border);
  background: var(--slider-thumb);
  gap: 20px;
  border-radius: 12px;
  padding: 20px;
  max-width: 380px;
  width: 100%;
}
.author-article .blog-leads-info {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.additionally-items,
.published-flex {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.additionally-flex {
  gap: 10px;
  margin-top: 10px;
}
.additionally-flex img {
  width: 156px;
}
.additionally-flex p {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
}
.additionally-flex p b {
  color: var(--text-color);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.published-flex {
  gap: 10px;
}
.published-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.published-name span {
  color: var(--text-color);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.published-sm span {
  font-size: 14px;
  line-height: 18px;
}
.published-flex:last-child {
  padding-bottom: 0;
  border-bottom: unset;
}

.sentences-main {
  gap: 20px;
}
.sentences-main .automatic-renewal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sentences-main .automatic-renewal p + p {
  font-size: 14px;
  line-height: 18px;
}
.sentences-photo {
  width: 100%;
}
.sentences-photo img {
  width: 100%;
  border-radius: 12px;
}
.sentences-cnt {
  margin-top: 48px;
}
.sentences-flex {
  gap: 10px;
}
.sentences-info {
  width: 50%;
  border-radius: 10px;
  padding: 24px;
}
.sentences-learn {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--border);
}
.sentences-learn .primary-name {
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}
.sentences-learn ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.sentences-learn ul li {
  color: var(--text-color);
}
.sentences-level {
  width: 50%;
  gap: 20px;
}
.sentences-name {
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}
.sentences-name .middle-title {
  margin: 0;
}
.sentences-name .levle-beg-circ span {
  font-size: 16px;
  line-height: 20px;
}
.marketers-business {
  gap: 8px;
}
.marketers-business .articles-names span {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}
.marketers-business .slidy-turns-name {
  height: 34px;
  padding: 8px 12px;
}
.marketers-business .slidy-turns-name p {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}
.sentences-name > p {
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.sentences-name:last-child {
  border-bottom: none;
  padding: 0;
}

.context-back {
  padding-bottom: 80px;
}

.context-back-flex {
  gap: 10px;
}
.context-back-left,
.context-back-right {
  max-width: 282px;
  width: 100%;
  gap: 10px;
  overflow-y: auto;
  position: sticky;
  right: 0;
  top: 80px;
  max-height: calc(100vh - 5.2rem);
}
.context-sticky {
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.context-back-left::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.context-back-left::-webkit-scrollbar-thumb {
  width: 0;
  height: 0;
}
.context-back-right::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.context-back-right::-webkit-scrollbar-thumb {
  width: 0;
  height: 0;
}
.context-back-left .methods-menu {
  position: relative;
  top: 0;
}

.save-article {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  gap: 6px;
  width: 100%;
  height: 48px;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  background: var(--slider-thumb);
}
.save-article:hover {
  background: var(--accent-color);
  color: var(--main-container5);
}
.save-heart {
  background-color: var(--accent-color);
  transition: 0.3s;
  width: 24px;
  height: 24px;
}
.save-article:hover .save-heart {
  background: var(--main-container5);
  background: var(--main-container5);
}
.context-share-col {
  gap: 8px;
}
.share-link {
  width: 100%;
  height: 42px;
  border-radius: 5px;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-color);
  background: var(--main-container6);
  transition: 0.3s;
}
.share-link:hover {
  border: 1px solid var(--accent-color);
}
.share-link-soc {
  padding: 6px 6px;
}

.about-article ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-article ul li {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.about-article ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.about-article ul li p {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color6);
}
.about-article ul li span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
}
.circle-bronze {
  border-radius: 50%;
  min-width: 6px;
  width: 6px;
  height: 6px;
  background: #11c521;
}

.context-back-center {
  width: 100%;
  gap: 10px;
}
.first-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.first-section-info {
  gap: 4px;
}
.context-back-center h2,
.context-back-center h3 {
  color: var(--text-color);
}
.context-back-center h2 {
  font-size: 24px;
  line-height: 28px;
}
.context-back-center h3 {
  font-size: 20px;
  line-height: 26px;
}
.first-section-info p {
  margin-top: 12px;
}
.href-linner {
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  border-bottom: 1px solid var(--accent-color);
  color: var(--accent-color);
  transition: 0.3s;
}
.href-linner:hover {
  border-bottom: 1px solid transparent;
}
.first-section-items {
  gap: 8px;
}
.first-section-items .articles-names span {
  font-size: 14px;
  line-height: 18px;
}
.first-idea {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.gap-16 {
  gap: 16px;
}
.href-see-below {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-color);
}
.first-idea-liner {
  width: 100%;
  height: 1px;
  background: var(--border);
}
.elaborates-part {
  gap: 10px;
}
.first-renewal {
  padding: 14px 20px;
}
.first-renewal span {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-color);
}
.first-renewal p {
  font-size: 14px;
  line-height: 18px;
  margin-top: 4px;
}
.source-quote-tit {
  padding: 20px 10px;
  gap: 10px;
}
.source-quote-tit h3 {
  text-align: center;
}
.source-quote-tit p {
  text-align: center;
}
.elaborates-part h4 {
  margin-top: 10px;
}
.elaborates-part ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 15px;
}
.elaborates-part ul li {
  color: var(--text-color6);
}

.context-back-center .border-style {
  padding: 24px;
}

.paragraph-practice {
  gap: 24px;
  display: flex;
  flex-direction: column;
}
.paragraph-info p {
  margin-top: 16px;
}
.paragraph-info ul {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  gap: 8px;
}
.paragraph-info ul li {
  color: var(--text-color6);
}
.paragraph-info ul li span {
  margin-right: 4px;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  color: var(--accent-color);
}

.paragraph-boxes {
  border-radius: 10px;
  width: 100%;
  border: 1px solid var(--border);
}
.paragraph-boxes img {
  width: 100%;
  border-radius: 10px;
  height: 298px;
}
.paragraph-picture {
  position: relative;
}
.graph-pic-number {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: var(--main-container3);
  background: var(--bg-box-color);
  border: 2px solid var(--main-container3);
}
.graph-pic-one {
  top: 40px;
  left: 111px;
}
.graph-pic-two {
  right: 86px;
  top: 120px;
}
.graph-pic-three {
  bottom: 24px;
  left: 235px;
}
.paragraph-counts {
  padding: 20px;
  gap: 16px;
}
.paragraph-count {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.paragraph-count:last-child {
  border-bottom: unset;
  padding-bottom: 0;
}
.parag-numb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  padding: 6px;
  background: var(--bg-box-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--main-container3);
}
.personal-practice-text > p {
  margin-top: 10px;
}
.personal-practice {
  margin-top: 24px;
  position: relative;
  margin-bottom: 10px;
  width: 100%;
}
.personal-practice img {
  border-radius: 10px;
  width: 100%;
}
.play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  background: #00000066;
  transition: 0.3s;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-play {
  width: 32px;
  height: 32px;
  background-color: var(--slider-thumb);
}

.personal-liner {
  background: var(--border);
  margin: 24px 0;
  width: 100%;
  height: 1px;
}
.personal-liner-cnt > p {
  margin-top: 10px;
}
.personal-liner-cnt .blog-leads-photo {
  margin-top: 0;
}
.arrow-href {
  height: 36px;
  min-width: 36px;
  width: 36px;
  background: var(--bg-box-color);
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 5px;
}
.arrow-href:hover {
  background: var(--accent-color);
}
.arrow-href i {
  background-color: var(--slider-thumb);
  font-size: 11px;
}

.reduces-risk {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.reduces-yellow {
  padding: 14px 20px;
  gap: 6px;
  border-radius: 8px;
  border-left: 4px solid #ffd642;
  background: #ffd64233;
  display: flex;
  flex-direction: column;
}
.reduces-yellow span {
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  color: var(--text-color);
}
.reduces-yellow p {
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
}
.box-reminder {
  gap: 10px;
}
.box-reminder .refund-condition-box {
  width: 100%;
}
.first-renewal span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ready-prompt-info {
  padding: 14px 14px 14px 20px;
  border-radius: 10px;
  border-left: 4px solid var(--slider-ring);
  background: var(--main-container6);
}
.ready-prompt-info > p {
  margin-bottom: 12px;
  color: var(--text-color);
}
.ready-used {
  width: 100%;
  margin-top: 16px;
}

.ready-used .arrow-href i {
  font-size: 18px;
}
.compatible-col {
  gap: 10px;
}

.approach-makes-flex {
  gap: 9px;
  margin-top: 10px;
}
.approach-makes-box {
  width: 100%;
}
.approach-makes-text {
  padding: 16px 16px 32px;
  margin-bottom: -20px;
  min-height: 195px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.approach-makes-text p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
}
.approach-makes-box img {
  width: 100%;
  border-radius: 10px;
  position: relative;
  z-index: 2;
}
.makes-before {
  background: #f24d4d33;
  width: max-content;
  padding: 4px 8px;
  border-radius: 3px;
  color: #f24d4d;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
}
.makes-after {
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  color: #11c521;
  background: #11c52133;
  width: max-content;
  padding: 4px 8px;
  border-radius: 3px;
}
.according-resea-wrap {
  margin-top: 16px;
  gap: 10px;
}
.according-resea-name {
  width: 49%;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  gap: 8px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.according-resea-name strong {
  font-weight: 600;
  font-size: 28px;
  line-height: 30px;
  letter-spacing: -8%;
  color: var(--text-color);
}
.according-resea-name p {
  color: var(--text-color);
  max-width: 170px;
  width: 100%;
  font-size: 14px;
  line-height: 18px;
}
.source-internal {
  margin-top: 16px;
  gap: 4px;
}
.source-internal span {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
}
.source-internal p {
  font-size: 14px;
  line-height: 18px;
}

.compar-appro {
  gap: 10px;
}
.compar-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.compar-table-name:nth-child(1) {
  flex: 1;
}
.compar-table-name ul {
  flex-direction: column;
}
.compar-table-mobile {
  display: none;
}

.compar-table-name ul li.table-head {
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  color: var(--text-color);
  background: var(--main-container6);
}
.compar-table-name ul li {
  padding: 12px 20px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.compar-table-name ul li:last-child {
  border-bottom: none;
}

.compar-table-name + .compar-table-name {
  border-left: 1px solid var(--border);
}

.share-helps-cnt h4 {
  display: flex;
  align-items: center;
  gap: 5px;
}

.share-copy {
  background: var(--main-container6);
  border: 1px solid var(--border);
  gap: 6px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-color);
  padding: 10px 20px;
  border-radius: 5px;
  transition: 0.3s;
}
.share-copy:hover {
  background: var(--text-color);
  color: var(--main-container3);
}

.this-helpful p {
  margin-top: 8px;
}
.this-helpful-ret {
  gap: 6px;
  margin-top: 16px;
}
.this-star {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  padding: 5px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.this-star:hover {
  background: var(--main-container7);
}
.this-star.hover {
  background: var(--main-container7);
}
.this-star-act {
  border: 1px solid var(--slider-ring);
  background: var(--bg-box-color);
}
.this-star-act:hover {
  background: var(--bg-box-color);
}

.context-back-center .this-helpful {
  padding: 20px;
}

.helpful-btn {
  margin-top: 16px;
  gap: 10px;
}
.select-rew {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  width: max-content;
  height: 40px;
  border-radius: 5px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-color);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  background: unset;
  gap: 5px;
}
.select-rew:hover {
  background: var(--main-container7);
}
.select-active:hover {
  background: var(--bg-box-color);
}
.select-active {
  border: 1px solid var(--slider-ring);
  background: var(--bg-box-color);

  color: var(--main-container5);
}
.read-together-col {
  gap: 20px;
}
.read-together {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
  transition: 0.3s;
}
.read-together:hover .small-title {
  color: var(--accent-color);
}
.read-together:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.read-together h4 {
  margin-top: 8px;
  line-height: 21px;
}
.read-together-flex {
  margin-top: 16px;
  gap: 12px;
}
.read-together-flex p {
  gap: 5px;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
}
.article-author-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.article-author-col .icon-arrow {
  transform: rotate(45deg);
}
.article-author-col .btn-black {
  margin-top: 6px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  width: 100%;
}
.btn-black .chips-right {
  font-size: 15px;
}
.btn-template {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-color3);
  padding: 10px 20px;
  gap: 6px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-color);
  transition: 0.3s;
  margin-top: 16px;
}
.btn-template:hover {
  background: var(--main-container6);
}
.templat-markup p {
  color: var(--text-color);
}
.templat-markup span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--text-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}
.templat-markup .form-input {
  margin-top: 16px;
  margin-bottom: 10px;
}
.templat-markup .btn-black {
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  width: 100%;
}
.sources-litera {
  margin-top: 40px;
  gap: 48px;
}
.sources-litera .prompts-cat-btn {
  padding: 6px 8px;
  font-size: 12px;
  line-height: 14px;
}
.sources-litera-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.sources-litera-text {
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.sources-litera-text p {
  color: var(--text-color);
}
.sources-litera-text:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.sources-litera-text .primary-name {
  margin-bottom: 0;
  white-space: nowrap;
}

.discussion-article {
  margin-top: 40px;
  gap: 28px;
}
.discussion-boxes {
  gap: 16px;
  width: 100%;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.discussion-boxes:last-child {
  padding-bottom: 0;
  border-bottom: unset;
}
.discussion-photo {
  max-width: 80px;
  width: 100%;
  height: 80px;
}
.discussion-photo img {
  width: 100%;
  border-radius: 50%;
}
.discussion-user {
  gap: 16px;
}
.discussion-name {
  gap: 12px;
  padding-top: 10px;
}
.discussion-name h4 {
  font-size: 20px;
  line-height: 26px;
  color: var(--text-color);
}
.discussion-name small {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--border2);
}
.discussion-name .prompts-cat-btn {
  padding: 5px 10px;
}
.discussion-cnt {
  padding-left: 96px;
  margin-top: -30px;
}
.discussion-center {
  margin-top: 20px;
  gap: 16px;
}
.discussion-flex {
  gap: 20px;
}
.answer-message,
.share-message {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-color);
  transition: 0.3s;
  cursor: pointer;
}
.share-message:hover {
  color: var(--accent-color);
}
.answer-message:hover {
  color: var(--accent-color);
}

.like-messages {
  gap: 4px;
  cursor: pointer;
}
.like-messages .save-heart {
  background-color: var(--border2);
}
.like-messages span {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--border2);
}
.like-messages .icon-heart {
  width: 24px;
  height: 24px;
}
.like-messages-act span {
  color: var(--text-color);
}
.like-messages-act .save-heart {
  mask-image: url(../images/icons/icon-heart.svg);
  -webkit-mask-image: url(../images/icons/icon-heart.svg);
  background-color: #f24d4d;
}

.show-comments-center {
  margin-top: 32px;
}
.show-comments {
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: var(--text-color6);
  transition: 0.3s;
}
.show-comments:hover {
  color: var(--text-color);
}
.write-comment {
  margin: 40px auto 0;
  border: 1px solid var(--border);
  max-width: 770px;
  width: 100%;
  gap: 10px;
  border-radius: 10px;
  padding: 20px;
  background: var(--main-container6);
}
.write-comment input {
  height: 52px;
}
.write-comment input::placeholder {
  color: var(--text-color6);
}
.preparaion-material .honest-advice-min ul li {
  color: var(--text-color);
}

.series-title {
  margin-top: 40px;
}
.series-title-flex {
  gap: 10px;
}
.series-box {
  width: 50%;
}
.series-back {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--border2);
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.series-back:hover {
  color: var(--text-color);
}
.series-back:hover .chips-right {
  background-color: var(--text-color);
}
.series-back .chips-right {
  background-color: var(--border2);
  transform: rotate(180deg);
}
.series-title .middle-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.articles-series {
  margin-top: 40px;
  width: 100%;
}
.articles-series h4 {
  font-size: 18px;
}
.articles-series .published-flex {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.articles-series .published-name {
  max-width: 171px;
  width: 100%;
}
.next-article h4 {
  text-align: right;
}
.next-article .published-name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.next-article .chips-right {
  transform: unset;
}
.next-article {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.marketer-start {
  margin-top: 10px;
  margin-bottom: 48px;
}
.marketer-start-title p {
  margin-top: 8px;
  max-width: 430px;
  width: 100%;
}

.blog-related .collections-text {
  margin-top: 40px;
}

@media (max-width: 1199px) {
  .article-density-info .updated-blog {
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 14px;
  }
  .article-density-info .hero-titles p {
    margin-top: 14px;
  }
  .article-density-info .year-section-flex {
    margin: 32px 0;
  }
  .author-article {
    max-width: 371px;
  }
  .context-back-left {
    display: none;
  }
  .context-back-right {
    max-width: 325px;
    height: auto;
    overflow-y: unset;
  }
  .context-back-flex {
    justify-content: center;
  }
  .compar-table-name + .compar-table-name {
    width: 100%;
  }
  .marketer-start {
    margin-top: 48px;
  }
}
@media (max-width: 1020px) {
  .article-density {
    gap: 48px;
    flex-direction: column;
  }
  .article-density-info h1 {
    margin-top: 14px;
  }
  .article-density {
    margin-top: 28px;
  }
  .author-article {
    max-width: 871px;
  }
  .sentences-flex {
    flex-direction: column;
  }
  .sentences-info {
    width: 100%;
  }
  .sentences-level {
    width: 100%;
  }
  .context-back-right {
    display: none;
  }
}
@media (max-width: 767px) {
  .article-density-circ {
    flex-wrap: wrap;
  }
  .article-density-info .year-section-data {
    max-width: 49%;
  }
  .article-density-info .year-section-flex {
    gap: 24px 10px;
  }
  .first-section-items {
    flex-wrap: wrap;
  }
  .source-quote-tit {
    padding: 14px 0;
  }
  .elaborates-part ul {
    margin-left: 0;
  }
  .paragraph-info ul {
    margin-left: 0;
  }
  .play-video {
    width: 44px;
    height: 44px;
  }
  .icon-play {
    width: 24px;
    height: 24px;
  }
  .reduces-risk {
    gap: 20px;
  }
  .context-back-center .border-style {
    padding: 20px;
  }
  .helpful-btn {
    flex-wrap: wrap;
  }
  .sources-litera-text {
    gap: 8px;
  }
  .sources-litera-text {
    flex-direction: column;
    align-items: flex-start;
  }
  .discussion-cnt {
    padding-left: 0;
    margin-top: 12px;
  }
  .discussion-name {
    gap: 10px;
    padding-top: 7px;
    flex-wrap: wrap;
  }
  .discussion-name h4 {
    font-size: 18px;
    line-height: 20px;
    width: 100%;
  }
  .discussion-user {
    gap: 12px;
  }
  .discussion-photo {
    max-width: 68px;
    height: 68px;
  }
  .series-title-flex {
    flex-direction: column;
  }
  .series-box {
    width: 100%;
  }
  .articles-series .published-flex {
    display: none;
  }
  .articles-series {
    margin-top: 20px;
  }
  .next-article h4 {
    text-align: left;
  }
  .series-box {
    align-items: flex-start;
  }
}
@media (max-width: 576px) {
  .article-density-info .hero-titles {
    max-width: 100%;
  }
  .article-density-info .year-section-data {
    max-width: 48%;
  }

  .article-density-info .year-section-data strong {
    font-size: 40px;
  }
  .article-density-info .year-section-data {
    padding-left: 17px;
  }
  .article-page-btn {
    gap: 8px;
    flex-direction: column;
  }
  .article-page-btn .areas-btn {
    max-width: 420px;
    width: 100%;
  }
  .article-page-btn .btn-arrow {
    max-width: 420px;
    width: 100%;
  }
  .additionally-flex img {
    width: 120px;
  }
  .published-name span {
    font-size: 14px;
    line-height: 18px;
  }

  .published-flex .published-name span {
    font-size: 13px;
    line-height: 17px;
  }
  .sentences-photo img {
    border-radius: 10px;
  }
  .sentences-main {
    gap: 11px;
    margin-top: 8px;
  }
  .sentences-info {
    padding: 20px;
  }
  .sentences-learn {
    margin-top: 20px;
    padding-top: 20px;
  }
  .sentences-info h4 {
    font-size: 16px;
    line-height: 20px;
  }
  .sentences-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .marketers-business {
    flex-wrap: wrap;
  }
  .first-section {
    gap: 20px;
  }
  .ready-temp-name h4 {
    font-size: 18px;
    line-height: 20px;
  }

  .context-back-center h2 {
    font-size: 20px;
    line-height: 24px;
  }
  .context-back-center h3 {
    font-size: 18px;
    line-height: 22px;
  }
  .source-quote-tit h3 {
    font-size: 16px;
    line-height: 20px;
  }

  .source-quote-tit p {
    font-size: 14px;
    line-height: 18px;
  }
  .paragraph-info ul li {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  .paragraph-info ul li span {
    margin-top: 4px;
  }
  .paragraph-boxes img {
    height: auto;
  }

  .paragraph-counts {
    padding: 16px;
  }
  .approach-makes-text p {
    font-size: 16px;
    line-height: 20px;
  }
  .paragraph-practice {
    gap: 20px;
  }
  .paragraph-count {
    align-items: flex-start;
  }
  .paragraph-count p {
    font-size: 14px;
    line-height: 18px;
  }
  .parag-numb {
    min-width: 26px;
    width: 26px;
    height: 26px;
    padding: 4px;
    font-size: 12px;
    line-height: 15px;
  }
  .first-renewal {
    padding: 20px 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .arrow-href {
    margin-left: auto;
  }
  .box-reminder .refund-condition-box h4 {
    font-size: 16px;
    line-height: 20px;
  }
  .box-reminder .refund-condition-box img {
    width: 16px;
    height: 16px;
  }
  .ready-used p {
    font-size: 14px;
    line-height: 18px;
  }
  .approach-makes-flex {
    flex-direction: column;
  }
  .according-resea-name {
    width: 100%;
  }

  .according-resea-name p {
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .according-resea-name p img {
    width: 16px;
    height: 16px;
  }
  .compar-table {
    display: none;
  }
  .compar-table-mobile {
    display: block;
    width: 100%;
  }
  .compar-boxes {
    display: flex;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .compar-table-name:first-child {
    width: 160px;
    min-width: 160px;
  }
  .compar-table-name + .compar-table-name {
    width: 100%;
    max-width: 400px;
  }
  .compar-table-mobile {
    padding-bottom: 16px;
  }
  .first-renewal p {
    margin-top: 8px;
  }

  .share-helps-cnt h4 {
    display: inline-block;
  }
  .share-copy {
    gap: 5px;
    padding: 9px 17px;
  }
  .share-copy img {
    width: 18px;
    height: 18px;
  }

  .this-helpful h4 {
    text-align: center;
  }
  .this-helpful p {
    text-align: center;
  }
  .this-star {
    width: 45px;
    height: 45px;
  }
  .this-star img {
    width: 16px;
    height: 16px;
  }
  .helpful-btn {
    margin-top: 28px;
    gap: 8px;
  }
  .select-rew {
    width: 100%;
  }

  .like-messages span {
    font-size: 16px;
    line-height: 20px;
  }
  .save-heart {
    width: 20px;
    height: 20px;
  }
  .like-messages .icon-heart {
    width: 20px;
    height: 20px;
  }
  .show-comments-center {
    margin-top: 36px;
  }

  .first-section-items .articles-names {
    padding: 4px 16px 4px 8px;
    height: 36px;
  }
  .first-section-items .articles-tools {
    padding: 4px 16px 4px 4px;
  }
  .sources-liter .small-title {
    font-size: 14px;
  }
  .write-comment {
    margin: 36px auto 0;
    border: unset;
    padding: 0;
    background: unset;
    flex-direction: column;
  }
  .write-comment .btn-black {
    width: 100%;
  }

  .this-helpful-ret {
    margin-top: 28px;
  }
  .graph-pic-number {
    width: 30px;
    height: 30px;
    padding: 5px;
    font-size: 12px;
    line-height: 14px;
  }
  .graph-pic-one {
    top: 22px;
    left: 61px;
  }
  .graph-pic-two {
    right: 44px;
    top: 66px;
  }
  .graph-pic-three {
    bottom: 13px;
    left: 133px;
  }
  .paragraph-picture img {
    height: 165px;
    object-fit: cover;
  }
  .sentences-photo img {
    height: 165px;
    object-fit: cover;
  }
  .this-helpful-ret {
    justify-content: center;
  }
}

/* Additional shared styles used by blog-article, from blog.css. */
.linking-card-main {
  padding-top: 300px;
  margin-top: -190px;
  background-image: url(../images/blog-footer-bg.webp);
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: 50% 70%;

  @media (min-width: 1200px) {
    background-size: 280%;
  }
  @media (min-width: 2100px) {
    background-size: 200%;
  }
  @media (max-width: 576px) {
    padding: 60px 0 350px;
    margin-top: 0;
    background-position: 50% 50%;
    background-image: url(../images/blog-footer-bg-mob.webp);
  }
}

.linking-card-title {
  position: relative;
  z-index: 2;
}

.explore-inpired {
  margin-top: 20px;

  .loss-quality-elips {
    height: 300px;
    top: -40px;
  }
  @media (max-width: 576px) {
    margin-top: 40px;

    .loss-quality-elips {
      height: 90px;
      top: -15px;
    }
  }
}

@media (max-width: 1020px) {
  .inpired-pagination {
    display: flex;
  }
}

@media (max-width: 576px) {
  .smart-temp-text img {
    width: 20px;
    height: 20px;
  }
}