:root {
       --svci-blue: #0055A4;
       --svci-red: #EF4135;
       --svci-white: #FFFFFF;
       --svci-black: #000000;
       --svci-light-bg: #F8F9FA;
   }

   body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       color: var(--svci-black);
       background-color: var(--svci-white);
   }

   .navbar {
       background-color: var(--svci-white);
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       padding: 15px 0;
   }

   .navbar-brand img {
       height: 50px;
   }

   .nav-link {
       color: var(--svci-black) !important;
       font-weight: 500;
       margin: 0 8px;
       position: relative;
       transition: all 0.3s;
   }

   .nav-link:hover {
       color: var(--svci-blue) !important;
   }

   .nav-link.active {
       color: var(--svci-red) !important;
       font-weight: 600;
   }

   .btn-svci {
       background-color: var(--svci-red);
       color: white;
       border: none;
       padding: 12px 30px;
       border-radius: 5px;
       transition: all 0.3s;
       font-weight: 500;
       font-size: 1.1rem;
   }

   .btn-svci:hover {
       background-color: var(--svci-blue);
       transform: translateY(-2px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }

   .page-header {
       background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/about-header.jpg');
       background-size: cover;
       background-position: center;
       color: white;
       padding: 100px 0;
       text-align: center;
   }

   .section-title {
       position: relative;
       margin-bottom: 40px;
       padding-bottom: 15px;
       text-align: center;
       color: var(--svci-blue);
       font-weight: 700;
   }

   .section-title:after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 80px;
       height: 4px;
       background-color: var(--svci-red);
   }

   .left-align .section-title {
       text-align: left;
   }

   .left-align .section-title:after {
       left: 0;
       transform: none;
   }

   .value-card {
       background: var(--svci-white);
       border-radius: 10px;
       padding: 30px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
       margin-bottom: 30px;
       transition: all 0.3s;
       height: 100%;
   }

   .value-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
   }

   .value-icon {
       font-size: 2.5rem;
       color: var(--svci-red);
       margin-bottom: 20px;
   }

   .stat-number {
       font-size: 2.5rem;
       font-weight: 700;
       color: var(--svci-red);
       margin-bottom: 10px;
   }

   .stat-text {
       color: var(--svci-blue);
       font-weight: 500;
   }

   .bg-light-custom {
       background-color: var(--svci-light-bg);
   }

   .article-box {
       background: var(--svci-white);
       border-left: 4px solid var(--svci-blue);
       padding: 25px;
       margin-bottom: 25px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   }

   .article-title {
       color: var(--svci-blue);
       font-weight: 600;
       margin-bottom: 15px;
   }

   .footer {
       background-color: var(--svci-black);
       color: white;
       padding: 50px 0 20px;
   }

   .footer-title {
       font-weight: bold;
       margin-bottom: 20px;
       position: relative;
       padding-bottom: 12px;
       color: var(--svci-white);
       font-size: 1.2rem;
   }

   .footer-title:after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 40px;
       height: 3px;
       background-color: var(--svci-red);
   }

   .footer-links a {
       color: #DDD;
       text-decoration: none;
       display: block;
       margin-bottom: 12px;
       transition: all 0.3s;
   }

   .footer-links a:hover {
       color: var(--svci-red);
       padding-left: 5px;
   }

   .social-icons a {
       display: inline-block;
       width: 40px;
       height: 40px;
       background-color: rgba(255, 255, 255, 0.1);
       text-align: center;
       line-height: 40px;
       border-radius: 50%;
       color: white;
       margin-right: 10px;
       transition: all 0.3s;
   }

   .social-icons a:hover {
       background-color: var(--svci-red);
       color: white;
       transform: translateY(-3px);
   }

   .copyright {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       padding-top: 20px;
       margin-top: 40px;
       text-align: center;
       color: #AAA;
   }

   .highlight-blue {
       color: var(--svci-blue);
       font-weight: 600;
   }

   .highlight-red {
       color: var(--svci-red);
       font-weight: 600;
   }

   .timeline {
       position: relative;
       padding: 20px 0;
   }

   .timeline:before {
       content: '';
       position: absolute;
       left: 50%;
       width: 4px;
       height: 100%;
       background: var(--svci-blue);
       transform: translateX(-50%);
   }

   .timeline-item {
       margin-bottom: 40px;
       position: relative;
       width: 50%;
       padding: 0 40px;
       box-sizing: border-box;
   }

   .timeline-item:nth-child(odd) {
       left: 0;
       padding-right: 70px;
   }

   .timeline-item:nth-child(even) {
       left: 50%;
       padding-left: 70px;
   }

   .timeline-content {
       background: var(--svci-white);
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   }

   .timeline-date {
       font-weight: 600;
       color: var(--svci-red);
       margin-bottom: 10px;
   }

   .timeline-circle {
       position: absolute;
       top: 20px;
       width: 20px;
       height: 20px;
       background: var(--svci-red);
       border-radius: 50%;
   }

   .timeline-item:nth-child(odd) .timeline-circle {
       right: -10px;
   }

   .timeline-item:nth-child(even) .timeline-circle {
       left: -10px;
   }