.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: @yield('navbarColor');
    box-shadow: none; 
  }

.navbar a {
    color: white; 
}
  .hero-section {
      background-image: linear-gradient(rgba(2, 2, 24, 0.6), rgba(2, 2, 24, 0.8)), 
      url('/assets/images/blogs.png');

      background-size: cover;
      background-position: center;
      background-blend-mode: multiply;
      height: 507px;
      margin: 0;
      padding: 0;
      position: relative;
      width: 100%;
  }
  .hero-section-content {
      margin-left: 19%;
  }

  .hero-section-content h1 {
      font-family: 'Cairo-Bold', sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 76.8px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #FFFFFF;
  }
  .hero-section-content p {
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: 28.8px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #FFFFFF;
  }

  .blogs-section {
      background-color: #FFFFFF;
  }
  .blogs-div {
      width: 1200px;
      height: 1857.25px;
      gap: 64px;
      margin-left: 10%;
      display: flex;
  }

  .blogs-container {
      width:818px;
      height: 1745.25px;
      gap: 24px;
  }

  .categories-div {
      width:341px;
      height: 658px;
      gap: 64px;
  }

  .search-div {
      width: 341px;
      height: 48px;
      position: relative;
      display: flex;
      border-radius: 15px;
      border: 2px solid #E5E5EA;
      justify: space-between;
      background-color: white;
  }
  .search-div input {
      width: calc(100% - 40px);
      height: 100%;
      padding: 12px 16px 12px 16px;
      border: none;
      border-radius: 15px;
      font-size: 20px;
      outline: none;
  }
  .search-div i {
      position: absolute;
      right: 15px;
      color: black;
      font-size: 25px;
      cursor: pointer;
      border-radius: 50%;
      padding: 5px;
      margin-top: 6px
  }

  .categories {
      margin-top: 50px;
      width: 341px;
      height: 345px;
      gap: 24px;
  }
  .categories h1 {
      font-family: 'Oswald-Medium', sans-serif;
      font-size: 24px;
      font-weight: 500;
      line-height: 28.8px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #171717;
  }

  .categories-container {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      width:341px;
      height: 292px;
      gap: 8px;
  }

  .category-card {
      width: 341px;
      height: 52px;
      padding: 16px 24px 16px 24px;
      border-radius: 15px;
      border: 1px solid #E5E5EA;
      display: flex;
      cursor: pointer;
  }
  .category-card h5 {
      font-family: 'Cairo-Meduim', sans-serif;
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #171717;
      margin-left: 10px;
  }
  .category-card span {
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #3B3AEF;
      margin-left: 210px;
  }
  .category-card h2 {
      font-size: 45px;
      margin-top: -34px;
  }

  .tags {
      width: 341px;
      height: 185px;
      gap: 24px;
      margin-top: 25px;
  }

  .tags h1 {
      font-family: 'Oswald-Medium', sans-serif;
      font-size: 24px;
      font-weight: 500;
      line-height: 28.8px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #150C43;
  }
  
  .tags-container {
      margin-top: 10px;
  }

  .tags-container button {
      width: 96px;
      height: 36px;
      border-radius: 10px;
      background-color: #F2F2F7;
      color: #171717;
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      padding-left: 10px;
      margin: 5px;
      border: none;
      cursor: pointer;
  }

  .blogs-container {
      display: flex;
      max-width: 818px;
      flex-wrap: wrap;
      padding-bottom: 570px;
  }

  .blog-card {
      flex: 1 1 calc(50% - 24px); 
      max-width: calc(50% - 24px);
      width: 397px;
      height: 565.75px;
      padding: 0px 0px 40px 0px;
      border-radius: 32px;
      border: 1px solid #E5E5EA ;
  }
  .blog-image {
      width: 373px;
      height: 297.75px;
      gap: 0px;
      border-radius: 32px 32px 0px 0px;
  }
  .blog-image img {
      width: 100%;
      height: 100%;
      border-radius: 32px 32px 0px 0px;
  }

  .blog-content {
      width: 350px;
      height: 210px;
      margin-left: 10px;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
  }
  .blog-time {
      gap: 8px;
  }

  .date-time {
      margin-left: 5px;
  }
  .blog-time i {
      color: #8E8E93;
  }
  .blog-time span {
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #8E8E93;
  }
  .blog-content h3 {
      font-family: 'Cairo-Bold', sans-serif;
      font-size: 20px;
      font-weight: 700;
      line-height: 30px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #171717;
      margin-top: 27px;
      margin-bottom: 3px;
      margin-left: -154px;
  }
  .blog-content span {
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #8E8E93;
      margin-top: 10px;
  }   
  .blog-content img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-top: 30px;
  }
  .blog-content p {
      font-family: 'Cairo-Light', sans-serif;
      font-size: 16px;
      font-weight: 300;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #8E8E93;
      margin-top: 35px;
      margin-left: 10px;
  }
  .blog-content h5 {
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #171717;
      margin-top: 37px;
      margin-left: 10px;
  }

  .pagination {
      margin-top: -110px;
      margin-left: 150px;
      margin-bottom: 215px;
  }
  .pagination-container {
      display: flex;
      gap: 15px;
  }
  .prev {
      width: 90px;
      height: 48px;
      padding: 12px 16px 12px 16px;
      gap: 4px;
      border-radius: 10px ;
      border: 1px solid #F2F2F7;
      opacity: 0px;
      background-color: #FFFFFF;
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #171717;
  }

  .next {
      width: 90px;
      height: 48px;
      padding: 12px 16px 12px 16px;
      gap: 4px;
      border-radius: 10px ;
      border: 1px solid #F2F2F7;
      opacity: 0px;
      background-color: #FFFFFF;
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #171717;
  }
  .number {
      width: 41px;
      height: 48px;
      padding: 12px 16px 12px 16px;
      gap: 4px;
      border-radius: 10px;
      border: 1px solid #F2F2F7;
      font-family: 'Cairo-Regular', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.4000000059604645px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #171717;
      background-color: #FFFFFF;
  } 
  .number-active {
      color: #FFFFFF;
      background-color: #171717;
  }
  .prev:disabled {
      color: #D1D1D6;
      cursor: not-allowed;
      background-color: #F9F9F9;
      border: 1px solid #E0E0E0;
  }
  .next:disabled {
      color: #D1D1D6;
      cursor: not-allowed;
      background-color: #F9F9F9;
      border: 1px solid #E0E0E0;
  }

  .prev:hover:not(:disabled),
  .next:hover:not(:disabled) {
      background-color: #E5E5E5;
      color: #171717;
  }

  .empty {
      background-color: #020218;
      height: 200px;
  }

  .category-card.selected{
      background-color: #f0f0f0;
      border-color: #007bff;
      color: #007bff;
      font-weight: bold;
  }

  .tags-container button.selected {
      background-color: #007bff;
      color: #fff;
      border-color: #007bff;
      font-weight: bold;
  }