        .section {
          padding: 0!important;
          margin: 0!important;
        }
        
        /* Kontak Header */
        .contact-header {
          position: relative;
          width: 100%;
          min-height: 420px;
          display: flex;
          flex-direction: column;
          align-items: center!important;
          justify-content: flex-start;
          text-align: center;
          overflow: hidden;
          padding: 150px 1rem 2rem!important;
          margin-top: calc(-1 * var(--header-height))!important;
        }
        
        .contact-header-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          z-index: 1;
          transition: filter 0.3s ease, opacity 0.3s ease;
          min-width: 100%;
          min-height: 100%;
          transform: scale(1.1); /* Diperbesar sedikit untuk memastikan tidak ada celah */
        }
        
        .contact-header-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, rgba(29, 93, 133, var(--overlay-opacity)) 0%, rgba(20, 132, 199, calc(var(--overlay-opacity) - 0.1)) 100%);
          z-index: 2;
          transition: all 0.3s ease;
        }
        
        .contact-header-content {
          position: relative;
          z-index: 3;
          max-width: 800px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0!important;
          margin-top: 80px!important;
        }
        
        .contact-header-title {
          font-size: 2.5rem;
          color: var(--header-text-color);
          margin-bottom: 1.5rem!important;
          font-weight: 700;
          position: relative;
          top: 0px!important;
        }
        
        /* Garis bawah kuning untuk judul header */
        .contact-header-title::after {
          content: '';
          position: absolute;
          bottom: -15px!important;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 4px;
          background-color: var(--accent-color);
          border-radius: 2px;
        }
        
        .contact-header-subtitle {
          font-size: 1.2rem;
          color: var(--header-subtitle-color);
          max-width: 700px;
          margin: 0 auto 1.5rem!important;
        }
        
        .contact-container {
          max-width: 1200px;
          margin: 0 auto!important;
          padding: 2rem 1rem!important;
        }
        
        .cards {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 2rem;
          padding: 2rem 1rem;
          max-width: 1200px;
          margin: auto;
        }
        
        .card {
          background-color: var(--background-color);
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          transform: translateY(0);
          position: relative;
          z-index: 1;
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .card.visible {
          opacity: 1;
          transform: translateY(0);
        }
        
        .card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .card img {
          width: 100%;
          height: 180px;
          object-fit: cover;
          transition: all 0.5s ease;
        }
        
        .card:hover img {
          transform: scale(1.05);
        }
        
        .card-content {
          padding: 1.5rem;
        }
        
        .card h3 {
          font-size: 1.4rem;
          margin-bottom: 0.75rem;
          color: var(--secondary-color-3);
          transition: color 0.3s ease;
        }
        
        .card:hover h3 {
          color: var(--accent-color);
        }
        
        .card-info {
          margin-bottom: 1.25rem;
        }
        
        .info-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 0.75rem;
        }
        
        .info-item i {
          color: var(--primary-color-1);
          margin-right: 10px;
          font-size: 1.1rem;
          margin-top: 3px;
        }
        
        .info-item a {
          color: var(--text-color);
          text-decoration: none;
          transition: color 0.3s ease;
        }
        
        .info-item a:hover {
          color: var(--primary-color-2);
          text-decoration: underline;
        }
        
        .brochure-link {
          display: inline-flex;
          align-items: center;
          color: var(--primary-color-1);
          font-weight: 600;
          text-decoration: none;
          transition: color 0.3s ease;
          margin-top: 0.5rem;
        }
        
        .brochure-link:hover {
          color: var(--accent-color);
        }
        
        .brochure-link i {
          margin-left: 5px;
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
          .contact-header-title {
            font-size: 2.5rem;
            top: 30px;
            margin-bottom: 1.8rem!important;
          }
          .contact-header-title::after {
            bottom: -18px!important;
          }
          .contact-header-subtitle {
            margin-top: 0.8rem!important;
          }
          .cards {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        
        @media (max-width: 768px) {
          .contact-header {
            min-height: 400px;
            padding: 140px 1rem 1.5rem;
          }
          .contact-header-title {
            font-size: 2.2rem;
            margin-bottom: 2rem!important;
            top: 20px;
          }
          .contact-header-title::after {
            bottom: -15px!important;
          }
          .contact-header-subtitle {
            font-size: 1rem;
            margin-bottom: 0.3rem!important;
          }
          .contact-container {
            padding-top: 1.5rem;
          }
        }
        
        @media (max-width: 576px) {
          .contact-header {
            min-height: 380px;
            padding: 130px 0.5rem 1rem;
          }
          .contact-header-title {
            font-size: 2rem;
            margin-bottom: 0.6rem!important;
            top: 10px;
          }
          
          .contact-header-title::after {
            bottom: -10px!important;
          }
          .contact-header-subtitle {
            font-size: 0.95rem;
            margin-bottom: 0.2rem!important;
          }
          .cards {
            grid-template-columns: 1fr;
          }
        }
        
        @media (max-width: 400px) {
          .contact-header {
            min-height: 360px;
            padding: 120px 0.5rem 0.8rem;
          }
          .contact-header-title {
            font-size: 1.8rem;
            margin-bottom: 0.5rem!important;
            top: 0;
          }
          .contact-header-title::after {
            bottom: -8px!important;
          }
          .contact-header-subtitle {
            font-size: 0.9rem;
            margin-bottom: 0.1rem!important;
          }
          .contact-container {
            padding: 1rem 0.5rem!important;
          }
        }
        
        /* Dark Mode Support */
        @media (prefers-color-scheme: dark) {
          :root {
            --primary-color-1: #0a3b5c;
            --primary-color-2: #0e5a9e;
            --accent-color: #d4a520;
            --light-accent-color: #ffd352;
            --secondary-color-1: #063235;
            --secondary-color-2: #1a5a6e;
            --secondary-color-3: #2c3e50;
            --text-color: #e0e0e0;
            --light-text-color: #ffffff;
            --background-color: #121212;
            --light-background-color: #1e1e1e;
            --header-text-color: #FFFFFF;
            --header-subtitle-color: rgba(255, 255, 255, 0.9);
            --overlay-opacity: 0.75;
          }
          body {
            background-color: var(--background-color);
          }
          .card,
          .card-content {
            background-color: var(--light-background-color);
          }
          .info-item a {
            color: var(--text-color);
          }
          .contact-header-image {
            filter: brightness(0.4) contrast(1.2) saturate(0.8) !important;
            opacity: 0.9;
          }
          .contact-header-overlay {
            background: linear-gradient(135deg, rgba(10, 59, 92, 0.85) 0%, rgba(14, 90, 158, 0.75) 100%) !important;
          }
        }
        
        /* Print Styles */
        @media print {
          .contact-header {
            height: auto;
            min-height: 150px;
            padding: 1rem;
            margin-top: 0;
          }
          .contact-header-image,
          .contact-header-overlay {
            display: none;
          }
          .contact-header-content {
            position: static;
            background-color: var(--light-background-color);
            padding: 1rem;
          }
          .card {
            page-break-inside: avoid;
          }
        }