/* blog-page  */
.main-index .white-outline {
   border-color: white;
   color: white;
   background-color: transparent;
}

.main-index .white-outline:hover {
   background-color: var(--black);
   color: white;
   border-color: transparent;
}

.banner-v2 {
   padding-bottom: 60px;
}

.filter-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 60px;
}

.fliteration-btns {
   display: flex;
   align-items: center;
   gap: 12px;
}

.filter-bar .filter {
   border: 1px solid #969696;
   color: #969696;
   border-radius: 40px;
   font-size: 20px;
   font-weight: 500;
   background-color: transparent;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: 9px 24px;
}

.filter-bar .filter.active {
   background-color: var(--blue);
   color: white;
   border-color: transparent;
}

.src-bar {
   position: relative;
   z-index: 1;
}

.src-bar input {
   border: 1px solid #969696;
   color: #969696;
   border-radius: 40px;
   font-size: 20px;
   font-weight: 500;
   background-color: transparent;
   padding: 12px 30px 12px 20px;
}

.src-bar label {
   position: absolute;
   z-index: 1;
   top: 0;
   right: 20px;
   bottom: 0;
   margin: auto;
   height: max-content;
   width: max-content;
   font-size: 20px;
   color: #969696;
}

.blog-card {
   background-color: #fff;
   padding: 24px;
   border: 1px solid #dadada;
   border-radius: 12px;
   height: 100%;
}

.blog-card h4 {
   font-size: 24px;
   font-weight: 600;
   color: var(--black);
   max-width: 455px;
   line-height: 1.3;
}

.blog-card p {
   font-size: 16px;
   margin: 10px 0;
   max-width: 519px;
}

.blog-card span {
   color: #868686;
   font-weight: 500;
}

.vertical-border {
   margin: 0;
   border: 1px solid #e1e1e1;
   min-height: 11px;
}

.blog-card a {
   color: var(--blue);
   font-weight: 500;
   text-decoration: underline;
   text-underline-offset: 3px;
   display: inline-block;
   margin-top: 10px;
}

.blog-card .blog-user {
   display: flex;
   align-items: center;
   gap: 20px;
}

.load-btn {
   margin-top: 60px;
}

.load-btn .bttn-2 {
   gap: 10px;
}

.split-sec.blue-layer-bg::before {
   background: linear-gradient(90deg, #0075c4 51.03%, rgba(0, 117, 196, 0) 76.6%);
}

.split-sec .absolute-img img {
   width: 54%;
}

.split-sec .btns {
   display: flex;
   align-items: center;
   gap: 12px;
}

.split-sec p {
   margin: 10px 0 34px;
}

.split-sec p:last-of-type {
   font-size: 16px;
   margin: 16px 0 0;
}

.split-sec p a {
   color: white;
   text-decoration: none;
}

/* blog details  */
.banner-v3 h1 {
   font-size: 48px;
   font-weight: 500;
   color: var(--black);
   text-transform: unset;
   line-height: 1.1;
}

.banner-v3 .blog-title .blog-info {
   gap: 24px;
}

.banner-v3 p {
   margin: 0;
}

.side-title h2 {
   font-size: 24px;
   font-weight: 700;
   color: #585858;
   text-transform: uppercase;
   margin-bottom: 30px;
}

.sidebar-list {
   border: 1px solid #e1e1e1;
   border-radius: 8px;
   padding: 24px 16px;
   counter-reset: numbering;
}

.sidebar-list ul {
   list-style-type: none;
}

.sidebar-list li {
   counter-increment: numbering;
}

.sidebar-list li:not(:first-child) {
   margin-top: 14px;
}

.sidebar-list li a {
   font-size: 16px;
   font-weight: 500;
   color: #727272;
   display: flex;
   align-items: center;
   gap: 6px;
   text-decoration: none;
}

.sidebar-list li a:hover {
   color: #0075c4;
}

.sidebar-list li a::before {
   content: counter(numbering) ".";
}

.sidebar-list li.active a {
   color: #0075c4;
   font-weight: 600;
}

.related-cards .side-title h2 {
   margin-bottom: 20px;
}

.mini-cards .blog-card {
   padding: 16px;
}

.mini-cards .blog-card:last-child {
   margin-top: 24px;
}

.mini-cards .blog-card h4 {
   font-size: 17px;
   font-weight: 600;
}

.mini-cards .blog-card p {
   font-size: 14px;
}

.mini-cards .blog-card span {
   font-size: 14px;
   font-weight: 600;
}

.related-cards {
   margin-top: 40px;
}

.blog-title h2 {
   font-size: 36px;
   font-weight: 500;
   text-transform: uppercase;
   line-height: 1.4;
}

.blog-title .blog-info {
   display: flex;
   align-items: center;
   gap: 40px;
   margin-top: 12px;
}

.blog-info .author,
.blog-info .published {
   display: flex;
   align-items: center;
   gap: 12px;
}

.blog-info .author p,
.blog-info .published p {
   font-size: 16px;
   color: var(--gray);
}

.blog-info .author span,
.blog-info .published span {
   font-weight: 500;
   color: #1e1e1e;
}

.divider-rule {
   width: 100%;
   height: 1px;
   border-bottom: 1px solid #e1e1e1;
   margin: 25px 0 30px;
}

.stick-sidebar {
   position: sticky;
   top: 20px;
}

.main-blog .blog-body .single-text {
   max-width: 870px;
}

.main-blog .blog-body .text {
   margin-top: 23px;
   max-width: 740px;
}

.blog-body {
   counter-reset: text;
}

.blog-body .text h4 {
   font-weight: 700;
   counter-increment: text;
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 20px;
}

.blog-body .text h4::before {
   content: counter(text) ".";
}

.blog-body .text p {
   font-size: 16px;
   margin-top: 8px;
   max-width: 886px;
}

.blog-body .single-text p {
   font-size: 19px;
}

.blog-body .inner-list {
   margin-top: 12px;
}

.blog-body .inner-list h6 {
   font-size: 16px;
   font-weight: 600;
   color: #1e1e1e;
   margin-bottom: 8px;
}

.blog-body .inner-list ul {
   padding-left: 20px;
}

.blog-body .inner-list li {
   color: #727272;
   margin-top: 2px;
   font-size: 16px;
}

.blog-body .inner-list li::marker {
   font-size: 8px;
}

/* media queries  */
@media (max-width: 1199px) {
   /* blog page  */
   .filter-bar {
      margin-bottom: 45px;
   }

   .fliteration-btns {
      gap: 8px;
   }

   .filter-bar .filter {
      padding: 6px 18px;
      font-size: 18px;
   }

   .src-bar input {
      padding: 8px 30px 8px 20px;
   }

   .blog-card h4 {
      font-size: 21px;
   }

   .blog-card p {
      font-size: 15px;
   }

   .blog-card span {
      font-size: 15px;
   }

   .blog-card .blog-user {
      gap: 15px;
   }

   .load-btn {
      margin-top: 45px;
   }

   .split-sec .sec-content {
      padding: 50px 0;
   }

   /* blog detail  */
   .banner-v3 h1 {
      font-size: 40px;
   }

   .side-title h2 {
      margin-bottom: 20px;
      font-size: 22px;
   }

   .sidebar-list {
      padding: 16px 14px;
   }

   .sidebar-list li a {
      font-size: 15px;
      gap: 4px;
   }

   .related-cards {
      margin-top: 25px;
   }

   .blog-title h2 {
      font-size: 27px;
   }

   .blog-title .blog-info {
      margin-top: 9px;
      gap: 30px;
   }

   .divider-rule {
      margin: 20px 0 30px;
   }

   .main-blog .blog-body .text br {
      display: none;
   }

   .main-blog .blog-body .text {
      margin-top: 20px;
   }

   .blog-body .text h4 {
      font-size: 18px;
   }

   .blog-body .single-text p {
      font-size: 15px;
   }

   .blog-body .text p {
      font-size: 15px;
      margin-top: 5px;
   }

   .blog-body .inner-list {
      margin-top: 10px;
   }

   .blog-body .inner-list h6 {
      margin-bottom: 5px;
   }

   .blog-body .inner-list li {
      font-size: 14px;
   }
}

@media (max-width: 991px) {
   /* blog-page */
   .banner-v2 {
      padding-bottom: 40px;
   }

   .filter-bar {
      margin-bottom: 35px;
      flex-wrap: wrap;
      gap: 15px;
   }

   .fliteration-btns {
      justify-content: space-between;
      width: 100%;
   }

   .fliteration-btns .filter {
      flex-grow: 1;
   }

   .src-bar {
      width: 100%;
   }

   .blog-card {
      padding: 15px;
   }

   .blog-card h4 {
      font-size: 19px;
   }

   .load-btn {
      margin-top: 35px;
   }

   .blog-card p {
      margin: 6px 0;
   }

   .blog-card a {
      margin-top: 6px;
      font-size: 14px;
   }

   .split-sec .sec-content {
      padding: 40px 0 !important;
   }

   .split-sec.blue-layer-bg::before {
      background: linear-gradient(90deg, #0075c4 63.03%, rgba(0, 117, 196, 0) 82.6%);
   }

   /* blog-detail  */

   .banner-v3 h1 {
      font-size: 35px;
   }

   .side-title h2 {
      font-size: 20px;
      margin-bottom: 15px;
   }

   .sidebar-list {
      padding: 12px;
   }

   .sidebar-list li:not(:first-child) {
      margin-top: 10px;
   }

   br {
      display: none;
   }

   .related-cards {
      margin-top: 15px;
   }

   .blog-title h2 {
      font-size: 20px;
   }

   p,
   span {
      font-size: 14px !important;
   }

   .navigation .fa-bars {
      font-size: 25px;
   }

   li {
      font-size: 14px !important;
   }

   .blog-body .text p {
      margin-top: 2px;
   }

   .blog-body .text h4 {
      font-size: 16px;
   }

   .blog-body .inner-list h6 {
      font-size: 14px;
   }

   .mini-cards .blog-card:last-child {
      margin-top: 16px;
   }

   .mini-cards .blog-card {
      padding: 12px;
      border-radius: 8px;
   }

   .blog-card .blog-user {
      gap: 12px;
   }

   .mini-cards .blog-card h4 {
      font-size: 16px;
   }

   .mini-cards .blog-card p {
      margin: 5px 0;
   }
}

@media (max-width: 767px) {
   /* blog-page  */
   .fliteration-btns {
      flex-wrap: wrap;
   }

   .split-sec.blue-layer-bg::before {
      background: linear-gradient(180deg, #0075c4 66.03%, rgba(0, 117, 196, 0) 75%);
   }

   .split-sec .btns {
      flex-wrap: wrap;
   }

   .split-sec .absolute-img img {
      width: 100%;
      height: 35%;
   }

   .split-sec .btns .bttn-2 {
      width: 100%;
   }

   .condition-section {
      padding: 0;
   }

   .fliteration-btns .filter {
      width: 48%;
   }

   .blog-title h2 {
      font-size: 19px;
   }

   .divider-rule {
      margin: 10px 0 20px;
   }

   /* blog-detail  */
   .banner-v3 h1 {
      font-size: 22px;
   }

   .blog-title .blog-info {
      flex-direction: column;
      gap: 8px;
      align-items: start;
   }

   .banner-v3 .blog-title .blog-info {
      gap: 8px;
      margin-top: 15px;
   }

   .blog-title .blog-info .vertical-border {
      width: 50%;
      min-height: 1px;
   }
}