a{
      text-decoration:none;
      color:inherit;
    }

    /*
    =========================
    SECTION
    =========================
    */

    .blog-section{
      width:100%;
      padding:80px 24px;
    }

    /* .container{
      max-width:1280px;
      margin:auto;
    } */

    /*
    =========================
    GRID
    =========================
    */

    .blog-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:32px;
    }

    /*
    =========================
    CARD
    =========================
    */

    .blog-card{
      background:#fff;
      border-radius:10px;
      overflow:hidden;
      transition:0.3s ease;
      -webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      width:100%;
      height:100%;
      display:flex;
      flex-direction:column;
    }

    .blog-card:hover{
      transform:translateY(-6px);
    }

    /*
    =========================
    IMAGE
    =========================
    */

    .blog-image{
      width:100%;
      aspect-ratio: 4 / 3;
      overflow:hidden;
    }

    .blog-image img{
        width:100%;
      display:block;
      object-fit:cover;
      height:100%;
      transition:0.4s ease;
    }

    .blog-card:hover .blog-image img{
      transform:scale(1.05);
    }

    /*
    =========================
    CONTENT
    =========================
    */

    .blog-content{
        padding:28px;
        display:flex;
        flex-direction:column;
        height:100%;
        padding:28px;
        display:flex;
        flex-direction:column;
        flex:1;
    }

    .blog-title{
      font-size:25px;
      font-weight:500;
      color:#153f86;
      margin-bottom:5px;
      line-height:1;
    }

    .blog-meta{
      font-size:11px;
      color:#8b8b8b;
      /* margin-bottom:24px; */
      font-weight:300;
    }

    .blog-desc{
      font-size:16px;
      line-height:1.5;
      color:#777;
      margin-bottom:30px;
      font-weight:300;

       display:-webkit-box;
        -webkit-line-clamp:4;
        -webkit-box-orient:vertical;

        overflow:hidden;
        text-overflow:ellipsis;

    }

    /*
    =========================
    BUTTON
    =========================
    */

    .blog-link{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-size:22px;
      color:#222;
      font-weight:400;
      transition:0.3s;
      margin-top:auto;
    }

    .blog-link span{
      transition:0.3s;
    }

    .blog-link:hover{
      color:#153f86;
    }

    .blog-link:hover span{
      transform:translateX(6px);
    }

    /*
    =========================
    TABLET
    =========================
    */

    @media (max-width: 1024px){

      .blog-grid{
        grid-template-columns:repeat(2, 1fr);
      }

      .blog-title{
        font-size:30px;
      }

    }

    /*
    =========================
    MOBILE
    =========================
    */

    @media (max-width: 768px){

      .blog-section{
        padding:60px 18px;
      }

      .blog-grid{
        grid-template-columns:1fr;
        gap:28px;
      }

      .blog-content{
        padding:24px;
      }

      .blog-title{
        font-size:28px;
      }

      .blog-meta{
        font-size:12px;
      }

      .blog-desc{
        font-size:16px;
      }

      .blog-link{
        font-size:18px;
      }

    }

/* page detail */

 .page-grid{
      display:grid;
      grid-template-columns: 80px minmax(0, 1fr) 340px;
      gap:30px;
      align-items:start;
    
    }

    /*
    ====================================
    SHARE
    ====================================
    */

    .share{
      position:sticky;
      top:100px;
    }

    .share-title{
      font-size:18px;
      font-weight:500;
      color:#1d2555;
      margin-bottom:24px;
    }

    .share-icons{
      display:grid;
      gap:16px;
    }

    .share-icons a{
      width:56px;
      height:56px;
      border:1px solid #e4e4e4;
      border-radius:50%;
      display:grid;
      place-items:center;
      font-size:20px;
      transition:0.3s;
    }

    .share-icons a:hover{
      background:#153f86;
      color:#fff;
      border-color:#153f86;
    }

    /*
    ====================================
    BLOG CONTENT
    ====================================
    */

    .page-content{
      min-width:0;
    }

    .page-content h1{
      font-size:48px;
      line-height:1.2;
      color:#16204f;
      margin-bottom:30px;
      font-weight:600;
    }

    .page-content h2{
      font-size:30px;
      line-height:1.3;
      color:#16204f;
      margin-top:40px;
      margin-bottom:24px;
      font-weight:500;
    }

    .page-content p{
      font-size:16px;
      line-height:1.5;
      /* color:#2d2d2d; */
      margin-bottom:20px;
      font-weight:300;
    }

    /*
    ====================================
    FEATURED IMAGE
    ====================================
    */

    .featured-image{
      border-radius:12px;
      overflow:hidden;
      margin-bottom:40px;
    }

    .featured-image img{
      /* height:500px; */
    }

    /*
    ====================================
    SIDEBAR
    ====================================
    */

    .sidebar{
      display:grid;
      gap:32px;
    }

    /*
    ====================================
    SIDEBAR IMAGE
    ====================================
    */

    .sidebar-image{
      border-radius:10px;
      overflow:hidden;
    }

    .sidebar-image img{
      height:260px;
    }

    /*
    ====================================
    NEWSLETTER
    ====================================
    */

    .newsletter{
      background:#fafafa;
      padding:36px;
      border-radius:10px;
    }

    .newsletter h3{
      font-size:38px;
      line-height:1.3;
      color:#000;
      margin-bottom:18px;
      font-weight:700;
    }

    .newsletter p{
      font-size:18px;
      color:#777;
      margin-bottom:24px;
    }

    .newsletter form{
      display:grid;
      gap:16px;
    }

    .newsletter input{
      width:100%;
      height:62px;
      border:1px solid #ddd;
      border-radius:6px;
      padding:0 18px;
      font-size:16px;
      font-family:'Poppins', sans-serif;
      outline:none;
    }

    .newsletter button{
      height:62px;
      border:none;
      border-radius:6px;
      background:#153f86;
      color:#fff;
      font-size:18px;
      font-weight:500;
      cursor:pointer;
      transition:0.3s;
      font-family:'Poppins', sans-serif;
    }

    .newsletter button:hover{
      background:#8f0d73;
    }

    /*
    ====================================
    TABLET
    ====================================
    */

    @media (max-width: 1024px){

      .page-grid{
        grid-template-columns:1fr;
      }

      .share{
        position:relative;
        top:0;
      }

      .share-icons{
        grid-template-columns:repeat(3, 56px);
      }

      .sidebar{
        grid-template-columns:1fr 1fr;
      }

      .featured-image img{
        height:420px;
      }

    }

    /*
    ====================================
    MOBILE
    ====================================
    */

    @media (max-width:768px){

      /* .container{
        padding:50px 18px;
      } */

      .page-grid{
        gap:40px;
      }

      .page-content h1{
        font-size:38px;
      }

      .page-content h2{
        font-size:30px;
      }

      .page-content p{
        font-size:16px;
      }

      .featured-image img{
        height:260px;
      }

      .sidebar{
        grid-template-columns:1fr;
      }

      .newsletter{
        padding:28px;
      }

      .newsletter h3{
        font-size:30px;
      }

    }

    /*
====================================
SIDEBAR TITLE
====================================
*/

.sidebar-heading{
  font-size:28px;
  font-weight:600;
  color:#16204f;
  margin-bottom:28px;
}

/*
====================================
RELATED BLOG
====================================
*/

.related-blog{
  background:#fafafa;
  padding:32px;
  border-radius:12px;
}

/*
====================================
RELATED ITEM
====================================
*/

.related-item{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:18px;
  align-items:center;

  padding-bottom:22px;
  margin-bottom:22px;

  border-bottom:1px solid #ececec;

  transition:0.3s ease;
}

.related-item:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:none;
}

.related-item:hover{
  transform:translateX(6px);
}

/*
====================================
IMAGE
====================================
*/

.related-image{
  width:100%;
  height:90px;
  border-radius:10px;
  overflow:hidden;
}

.related-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/*
====================================
CONTENT
====================================
*/

.related-content{
  min-width:0;
}

.related-title{
  font-size:17px;
  line-height:1.5;
  color:#222;
  font-weight:500;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;

  margin-bottom:8px;

  transition:0.3s;
}

.related-item:hover .related-title{
  color:#153f86;
}

.related-date{
  font-size:14px;
  color:#888;
}

/*
====================================
MOBILE
====================================
*/

@media (max-width:768px){

  .related-blog{
    padding:24px;
  }

  .sidebar-heading{
    font-size:24px;
  }

  .related-item{
    grid-template-columns:80px 1fr;
    gap:14px;
  }

  .related-image{
    height:80px;
  }

  .related-title{
    font-size:15px;
  }

}

/* form create */


    .form-card{
      border:none;
      border-radius:20px;

      padding:40px;

      box-shadow:
      0 10px 30px rgba(0,0,0,0.05);
    }
.page-title{
      font-size:42px;
      font-weight:600;
      color:#16204f;

      margin-bottom:12px;
    }

    .page-subtitle{
      font-size:16px;
      color:#777;

      line-height:1.8;

      margin-bottom:40px;
    }

    /*
    ====================================
    FORM
    ====================================
    */

    .form-label{
      font-weight:500;
      color:#222;

      margin-bottom:10px;
    }

    .form-control{
      min-height:58px;

      border-radius:10px;

      border:1px solid #ddd;

      padding:14px 18px;

      font-size:15px;

      box-shadow:none !important;
    }

    textarea.form-control{
      min-height:140px;
      resize:vertical;
    }

    .form-control:focus{
      border-color:#16204f;
    }

    /*
    ====================================
    BUTTON
    ====================================
    */

    .btn-save{
      height:58px;

      border:none;

      border-radius:10px;

      background:#16204f;

      color:#fff;

      font-weight:500;

      transition:0.3s ease;
    }

    .btn-save:hover{
      background:#8f0d73;
      color:#fff;
    }

    /*
    ====================================
    MOBILE
    ====================================
    */

    @media (max-width:768px){

      .form-card{
        padding:28px;
      }

      .page-title{
        font-size:32px;
      }

    }

 /*
    ====================================
    CATEGORY
    ====================================
    */

    .category-box{
      display:grid;

      grid-template-columns:
      repeat(auto-fit,minmax(180px,1fr));

      gap:14px;
    }

    .category-item{
      display:flex;
      align-items:center;
      gap:10px;

      padding:14px 16px;

      background:#fafafa;

      border:1px solid #eee;

      border-radius:10px;
    }

    .badge-green {
      background-color: rgb(8, 83, 8);
      color: white;
      padding: 5px;
      border-radius: 38px;
    }

    .badge-yellow {
      background-color: rgb(248, 168, 20);
      color:white;
      padding: 5px;
      border-radius: 38px;
    }

.category-list{
  font-weight: 600;
  color:#16204f;
}

.category-wrapper{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.category-label{
    font-size: 16px;
    font-weight: 700;
    color: #777;
}

.category-list{
    font-size: 16px;
    font-weight: 600;
    color: #16204f;
    text-decoration: none;
    transition: .2s ease;
}

.category-list:hover{
    color: #8d1280;
    text-decoration: underline;
}


.category-label-index{
    font-size: 12px;
    font-weight: 600;
    color: #777;
}

.category-list-index{
    font-size: 12px;
    font-weight: 500;
    color: #16204f;
    text-decoration: none;
    transition: .2s ease;
}

.category-list-index:hover{
    color: #8d1280;
    text-decoration: underline;
}


/*
=========================
SLIDER
=========================
*/

.hero-blog-slider{
  position:relative;
  width:100%;
  overflow:hidden;
}

/*
=========================
ITEM
=========================
*/

.carousel-item{
  position:relative;
  height:85vh;
  min-height:650px;
}

/*
=========================
IMAGE
=========================
*/

.slider-image{
  width:100%;
  height:100%;
}

.slider-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

}

/*
=========================
OVERLAY
=========================
*/

.slider-overlay{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to right,
    rgba(0, 0, 0, 0.763),
    rgba(0, 0, 0, 0.308)
  );

}

/*
=========================
CONTENT
=========================
*/

.slider-content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  z-index:2;
  color:#fff;
  width:100%;
  overflow:hidden;
}
.slider-content .row{
  width:100%;
}

.slider-content .col-lg-7{
  max-width:700px;
}

.slider-text{
  max-width:700px;
  width:100%;
}

/*
=========================
CATEGORY
=========================
*/

.slider-category{
  display:inline-block;
  margin-bottom:20px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#fff;
 
}

/*
=========================
TITLE
=========================
*/

.slider-title{
  font-size:50px;
  font-weight:600;
  line-height:1.1;
  margin-bottom:24px;
  word-break:break-word;
  overflow-wrap:break-word;
}

/*
=========================
DESC
=========================
*/

.slider-desc{
  font-size:18px;
  line-height:1.8;
  margin-bottom:40px;
  max-width:700px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
}

/*
=========================
BUTTON
=========================
*/

.slider-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 32px;
  background:#fff;
  color:#111;
  border-radius:100px;
  text-decoration:none;
  font-weight:500;
  transition:0.3s ease;
  max-width:100%;
}

.slider-btn:hover{
  background:#153f86;
  color:#fff;
}

/*
=========================
MOBILE
=========================
*/

@media(max-width:768px){
  .carousel-item{
    height:70vh;
    min-height:600px;
    /* padding: 20px; */
  }

  .slider-title{
    font-size:30px;
    padding: 20px;
  }

  .slider-text{
    max-width:100%;
  }

  .slider-desc{
    font-size:14px;
    padding: 20px;
  }

}

/*
=========================
FILTER BY CATEGORY
=========================
*/

.blog-filter{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin:50px 0;
}

.filter-item{
    text-decoration:none;
    color:#8d8d8d;
    font-size:20px;
    font-weight:500;
    transition:.3s ease;
}

.filter-item:hover{
    color:#153f86;
}

.filter-item.active{
    color:#153f86;
}


/*
=========================
TABLET
=========================
*/

@media(max-width:992px){

    .blog-filter{
        gap:16px;
        margin:40px 0;
    }

    .filter-item{
        font-size:16px;
    }

}
/*
=========================
MOBILE
=========================
*/

@media(max-width:576px){

    .blog-filter{

        justify-content:center;

        gap:10px;

        margin:30px 0;

    }

    .filter-item{

        font-size:12px;

        padding:8px 14px;

        border:1px solid #e5e5e5;

        border-radius:999px;

    }

    .filter-item.active{

        background:#153f86;

        color:#fff;

        border-color:#153f86;

    }

}