body {
      font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      background-color: #f8f9fa;
      color: #1e2a3a;
    }
    .navbar {
      background-color: #ffffff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      border-bottom: 1px solid #e9ecef;
    }
    .navbar-brand {
      font-weight: 600;
      color: #1e2a3a;
      letter-spacing: -0.3px;
    }
    .navbar-brand i {
      color: #2c6e9c;
      margin-right: 6px;
    }
    .hero {
      background: #ffffff;
      padding: 3.8rem 0 3rem 0;
      border-bottom: 1px solid #dee2e6;
    }
    .hero h1 {
      font-weight: 500;
      color: #1e2a3a;
      font-size: 2.6rem;
      letter-spacing: -0.5px;
    }
    .hero .lead {
      color: #495057;
      font-weight: 400;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .btn-primary-custom {
      background-color: #2c6e9c;
      border-color: #2c6e9c;
      color: #fff;
      padding: 10px 34px;
      font-weight: 500;
      border-radius: 50px;
      transition: 0.2s;
    }
    .btn-primary-custom:hover {
      background-color: #1f4d6e;
      border-color: #1f4d6e;
      color: #fff;
    }
    .btn-outline-custom {
      border: 1px solid #2c6e9c;
      color: #2c6e9c;
      padding: 10px 34px;
      border-radius: 50px;
      font-weight: 500;
    }
    .btn-outline-custom:hover {
      background-color: #2c6e9c;
      color: #fff;
    }
    .section-title {
      font-weight: 500;
      color: #1e2a3a;
      letter-spacing: -0.3px;
      border-bottom: 2px solid #d4dce4;
      padding-bottom: 12px;
      display: inline-block;
      margin-bottom: 1.8rem;
    }
    .service-card {
      background: #ffffff;
      border: 1px solid #e6eaef;
      border-radius: 16px;
      padding: 1.8rem 1.2rem;
      transition: 0.15s;
      height: 100%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    .service-card:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.04);
      border-color: #cdd5de;
    }
    .service-card i {
      color: #2c6e9c;
      font-size: 2.2rem;
      margin-bottom: 1rem;
    }
    .service-card h5 {
      font-weight: 600;
      color: #1e2a3a;
    }
    .service-card p {
      color: #495057;
      font-size: 0.95rem;
    }
    .about-section {
      background-color: #ffffff;
      border-top: 1px solid #e9ecef;
      border-bottom: 1px solid #e9ecef;
      padding: 3.5rem 0;
    }
    .info-block {
      background: #f1f4f8;
      border-radius: 20px;
      padding: 2rem 1.8rem;
    }
    .info-block i {
      color: #2c6e9c;
      font-size: 1.8rem;
      width: 48px;
    }
    .info-block h6 {
      font-weight: 600;
      color: #1e2a3a;
    }
    .footer {
      background-color: #ffffff;
      border-top: 1px solid #dee2e6;
      color: #495057;
      font-size: 0.95rem;
      padding: 2rem 0 1.5rem 0;
    }
    .footer a {
      color: #2c6e9c;
      text-decoration: none;
    }
    .footer a:hover {
      text-decoration: underline;
    }
    .geo-tags {
      font-size: 0.9rem;
      background: #f1f4f8;
      padding: 0.4rem 1rem;
      border-radius: 40px;
      display: inline-block;
      margin: 0 0.2rem 0.4rem 0;
    }
    @media (max-width: 576px) {
      .hero h1 { font-size: 2.0rem; }
      .hero .lead { font-size: 1rem; }
    }

       .page-header {
      background: #ffffff;
      padding: 2.5rem 0 2rem 0;
      border-bottom: 1px solid #dee2e6;
    }
    .page-header h1 {
      font-weight: 500;
      color: #1e2a3a;
      font-size: 2.2rem;
      letter-spacing: -0.5px;
    }
    .breadcrumb-custom {
      background: transparent;
      padding: 0;
      margin-bottom: 0.8rem;
    }
    .breadcrumb-custom .breadcrumb-item a {
      color: #2c6e9c;
      text-decoration: none;
    }
    .breadcrumb-custom .breadcrumb-item a:hover {
      text-decoration: underline;
    }
    .breadcrumb-custom .breadcrumb-item.active {
      color: #495057;
    }
    .article-content {
      background: #ffffff;
      border-radius: 16px;
      padding: 2rem;
      border: 1px solid #e6eaef;
      box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    .article-content h2 {
      font-weight: 500;
      color: #1e2a3a;
      margin-top: 1.8rem;
      margin-bottom: 1rem;
      font-size: 1.6rem;
    }
    .article-content h3 {
      font-weight: 500;
      color: #1e2a3a;
      margin-top: 1.5rem;
      margin-bottom: 0.8rem;
      font-size: 1.3rem;
    }
    .article-content p {
      color: #495057;
      line-height: 1.8;
      margin-bottom: 1rem;
    }
    .article-content ul, .article-content ol {
      color: #495057;
      line-height: 1.8;
      margin-bottom: 1rem;
      padding-left: 1.5rem;
    }
    .article-content ul li, .article-content ol li {
      margin-bottom: 0.4rem;
    }
    .article-content .author-box {
      background: #f1f4f8;
      border-radius: 12px;
      padding: 1.2rem 1.5rem;
      margin-top: 2rem;
      border-left: 4px solid #2c6e9c;
    }
    .article-content .author-box strong {
      color: #1e2a3a;
    }
    .sidebar-box {
      background: #ffffff;
      border: 1px solid #e6eaef;
      border-radius: 16px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .sidebar-box h6 {
      font-weight: 600;
      color: #1e2a3a;
      border-bottom: 2px solid #d4dce4;
      padding-bottom: 0.6rem;
    }
    .sidebar-box ul {
      list-style: none;
      padding-left: 0;
    }
    .sidebar-box ul li {
      padding: 0.4rem 0;
      border-bottom: 1px solid #f1f4f8;
    }
    .sidebar-box ul li:last-child {
      border-bottom: none;
    }
    .sidebar-box ul li a {
      color: #2c6e9c;
      text-decoration: none;
    }
    .sidebar-box ul li a:hover {
      text-decoration: underline;
    }

    .blog-card {
      background: #ffffff;
      border: 1px solid #e6eaef;
      border-radius: 16px;
      padding: 1.5rem;
      transition: 0.2s;
      height: 100%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    .blog-card:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      border-color: #cdd5de;
    }
    .blog-card .badge-date {
      background: #eef2f6;
      color: #495057;
      font-weight: 400;
      border-radius: 40px;
      padding: 0.3rem 1rem;
      font-size: 0.8rem;
    }
    .blog-card h5 {
      font-weight: 600;
      color: #1e2a3a;
      margin: 0.8rem 0 0.5rem 0;
    }
    .blog-card h5 a {
      color: #1e2a3a;
      text-decoration: none;
      transition: color 0.15s;
    }
    .blog-card h5 a:hover {
      color: #2c6e9c;
    }
    .blog-card p {
      color: #495057;
      font-size: 0.95rem;
    }
    .blog-card .read-more {
      color: #2c6e9c;
      font-weight: 500;
      text-decoration: none;
      font-size: 0.9rem;
    }
    .blog-card .read-more:hover {
      text-decoration: underline;
    }