/* Global */
    body {
      font-family: "Poppins", sans-serif;
      background-color: #f5f7fb;
    }

    a {
      text-decoration: none;
    }
    /* nav */
    .log{
        width:50px;
        height:auto;
        border-radius:10px;
    }
    /* Hero Section */
    .hero-section {
      padding: 60px 0 40px;
    }

    .hero-badge {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(13, 110, 253, 0.08);
      color: #167ac6;
      font-weight: 500;
      font-size: 0.85rem;
      margin-bottom: 10px;
    }

    .hero-title {
      font-size: 2.2rem;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .hero-text {
      color: #6c757d;
      margin-bottom: 20px;
    }

    .hero-btn-main {
      padding: 10px 22px;
      border-radius: 999px;
      font-weight: 500;
    }

    .hero-btn-outline {
      padding: 10px 22px;
      border-radius: 999px;
      font-weight: 500;
      margin-left: 10px;
    }

    .hero-image {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 15px 40px rgba(15, 23, 42, 0.12);
      height: 500px;
    }

    /* Blog Cards */
    .section-title {
      font-weight: 600;
      margin-bottom: 20px;
    }

    .blog-card {
      border: none;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
      background: #ffffff;
    }

    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 40px rgba(15, 23, 42, 0.14);
    }

    .blog-card img {
      height: 180px;
      object-fit: cover;
    }

    .blog-meta {
      font-size: 0.8rem;
      color: #6c757d;
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .blog-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .blog-card .btn-link {
      padding: 0;
      font-size: 0.9rem;
      font-weight: 500;
    }
    /* Small screens */
    @media (max-width: 767.98px) {
      .hero-section {
        padding-top: 30px;
      }

      .hero-title {
        font-size: 1.8rem;
      }
    }