:root {
      --blue: #8BC5D3;
      --blue-dark: #1A3A5C;
      --blue-mid: #2A6080;
      --blue-light: #BDE0EA;
      --blue-xlight: #E8F4F8;
      --white: #FFFFFF;
      --gray: #6B7280;
      --gray-light: #F4F8FB;
      --dark: #0F2236;
      --text: #1A2B3C;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Nunito Sans', sans-serif;
      background: #fff;
      color: var(--text);
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
    }

    /* ================= HERO ================= */

    .blog-hero {
      min-height: 70vh;

      background:
        linear-gradient(135deg,
          #0F2236 0%,
          #1A3A5C 40%,
          #2A6080 75%,
          #8BC5D3 100%);

      display: flex;
      align-items: center;
      justify-content: center;

      position: relative;
      overflow: hidden;

      padding: 120px 5% 90px;
    }

    .blog-hero::before {
      content: '';
      position: absolute;

      width: 700px;
      height: 700px;

      background:
        radial-gradient(circle,
          rgba(139, 197, 211, .18),
          transparent 70%);

      top: -250px;
      right: -180px;

      border-radius: 50%;
    }

    .blog-hero::after {
      content: '';
      position: absolute;

      width: 500px;
      height: 500px;

      background:
        radial-gradient(circle,
          rgba(139, 197, 211, .08),
          transparent 70%);

      bottom: -220px;
      left: -100px;

      border-radius: 50%;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 900px;
      text-align: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      background: rgba(255, 255, 255, .08);

      border: 1px solid rgba(255, 255, 255, .15);

      padding: 12px 24px;

      border-radius: 50px;

      color: var(--blue-light);

      font-size: .82rem;
      font-weight: 700;

      margin-bottom: 30px;

      backdrop-filter: blur(20px);
    }

    .hero-badge::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--blue);
    }

    .blog-hero h1 {
      font-family: 'Nunito', sans-serif;

      font-size: 4.5rem;
      line-height: 1.05;
      font-weight: 900;

      color: #fff;

      margin-bottom: 24px;
    }

    .blog-hero h1 span {
      color: var(--blue);
    }

    .hero-text {
      max-width: 720px;
      margin: auto;

      color: rgba(255, 255, 255, .72);

      font-size: 1.12rem;
      line-height: 1.8;

      margin-bottom: 45px;
    }

    .hero-search {
      max-width: 700px;
      margin: auto;

      background: rgba(255, 255, 255, .08);

      border: 1px solid rgba(255, 255, 255, .12);

      backdrop-filter: blur(20px);

      border-radius: 20px;

      display: flex;
      align-items: center;
      gap: 14px;

      padding: 14px;
    }

    .hero-search input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;

      color: #fff;

      padding: 15px;

      font-size: 1rem;
    }

    .hero-search input::placeholder {
      color: rgba(255, 255, 255, .45);
    }

    .hero-search button {
      border: none;
      cursor: pointer;

      background: var(--blue);

      color: var(--dark);

      font-weight: 800;

      padding: 16px 30px;

      border-radius: 14px;

      transition: .3s;
    }

    .hero-search button:hover {
      background: #fff;
      transform: translateY(-2px);
    }

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

    .blog-section {
      padding: 90px 5%;
      background: var(--gray-light);
    }

    .blog-container {
      max-width: 1250px;
      margin: auto;
    }

    /* FILTERS */

    .blog-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      flex-wrap: wrap;

      gap: 20px;

      margin-bottom: 50px;
    }

    .blog-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .filter-btn {
      border: none;
      cursor: pointer;

      background: #fff;

      border: 1px solid rgba(139, 197, 211, .2);

      padding: 12px 22px;

      border-radius: 50px;

      color: var(--dark);

      font-weight: 700;

      transition: .3s;
    }

    .filter-btn:hover,
    .filter-btn.active {
      background: var(--blue);
      color: var(--dark);
    }

    /* GRID */

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

    /* CARD */

    .blog-card {
      background: #fff;

      border-radius: 24px;

      overflow: hidden;

      border: 1px solid rgba(139, 197, 211, .15);

      transition:
        transform .4s ease,
        box-shadow .4s ease;

      position: relative;
    }

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

      box-shadow:
        0 25px 60px rgba(15, 34, 54, .08);

      border-color: var(--blue);
    }

    .blog-thumb {
      position: relative;
      overflow: hidden;

      aspect-ratio: 16/10;
    }

    .blog-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      transition: transform .7s ease;
    }

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

    .blog-overlay {
      position: absolute;
      inset: 0;

      background:
        linear-gradient(to top,
          rgba(0, 0, 0, .7),
          rgba(0, 0, 0, .1));
    }

    .blog-category {
      position: absolute;

      top: 18px;
      left: 18px;

      background: rgba(255, 255, 255, .12);

      backdrop-filter: blur(10px);

      border: 1px solid rgba(255, 255, 255, .18);

      color: #fff;

      padding: 8px 14px;

      border-radius: 50px;

      font-size: .72rem;
      font-weight: 700;

      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .blog-content {
      padding: 30px;
    }

    .blog-meta {
      display: flex;
      gap: 12px;

      color: var(--gray);

      font-size: .82rem;

      margin-bottom: 16px;
    }

    .blog-title {
      font-family: 'Nunito', sans-serif;

      font-size: 1.28rem;
      line-height: 1.45;
      font-weight: 800;

      color: var(--dark);

      margin-bottom: 14px;

      transition: .3s;
    }

    .blog-card:hover .blog-title {
      color: var(--blue-mid);
    }

    .blog-desc {
      color: var(--gray);

      font-size: .95rem;
      line-height: 1.8;

      margin-bottom: 24px;
    }

    .blog-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      color: var(--blue-mid);

      font-weight: 800;

      transition: .3s;
    }

    .blog-link:hover {
      gap: 14px;
    }

    /* FEATURED */

    .featured {
      grid-column: span 2;

      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .featured .blog-thumb {
      height: 100%;
    }

    .featured .blog-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .featured .blog-title {
      font-size: 2rem;
    }

    /* CTA */

    .blog-cta {
      padding: 110px 5%;

      background:
        linear-gradient(135deg,
          var(--blue) 0%,
          var(--blue-mid) 60%,
          var(--dark) 100%);

      position: relative;
      overflow: hidden;
    }

    .blog-cta::before {
      content: '';

      position: absolute;

      width: 700px;
      height: 700px;

      background:
        radial-gradient(circle,
          rgba(255, 255, 255, .06),
          transparent 70%);

      left: 50%;
      top: 50%;

      transform: translate(-50%, -50%);
    }

    .cta-inner {
      max-width: 850px;
      margin: auto;

      text-align: center;

      position: relative;
      z-index: 2;
    }

    .blog-cta h2 {
      font-family: 'Nunito', sans-serif;

      font-size: 3rem;
      line-height: 1.2;
      font-weight: 900;

      color: #fff;

      margin-bottom: 20px;
    }

    .blog-cta p {
      color: rgba(255, 255, 255, .75);

      font-size: 1.05rem;
      line-height: 1.8;

      margin-bottom: 40px;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      background: #fff;

      color: var(--blue-mid);

      padding: 18px 36px;

      border-radius: 60px;

      font-weight: 800;

      transition: .3s;
    }

    .cta-btn:hover {
      transform: translateY(-4px);
    }

    /* ================= RESPONSIVE ================= */

    @media(max-width:1100px) {

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

      .featured {
        grid-column: span 2;
      }

    }

    @media(max-width:768px) {

      .blog-hero h1 {
        font-size: 2.9rem;
      }

      .hero-search {
        flex-direction: column;
      }

      .hero-search button {
        width: 100%;
      }

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

      .featured {
        grid-column: auto;
        grid-template-columns: 1fr;
      }

      .featured .blog-title {
        font-size: 1.5rem;
      }

      .blog-cta h2 {
        font-size: 2.2rem;
      }

    }