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

     body {
         font-family: 'Inter', sans-serif;
         background-color: #ffffff;
         color: #1e2a3e;
         line-height: 1.5;
     }

     /* custom color variables */
     :root {
         --primary-color: #5bc1ac;
         --primary-dark: #43a18d;
         --primary-light: #e0f4f0;
         --gray-50: #f9fafb;
         --gray-100: #f3f4f6;
         --gray-200: #e5e7eb;
         --gray-700: #374151;
         --gray-800: #1f2937;
         --shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
         --shadow-md: 0 20px 25px -12px rgba(0, 0, 0, 0.07);
     }

     /* global utility */
     .bg-primary-light {
         background-color: var(--primary-light);
     }

     .text-primary-custom {
         color: var(--primary-color) !important;
     }

     .border-primary-custom {
         border-color: var(--primary-color) !important;
     }

     .btn-outline-primary-custom {
         border: 1.5px solid var(--primary-color);
         background: transparent;
         color: var(--primary-color);
         border-radius: 40px;
         padding: 0.6rem 1.8rem;
         font-weight: 500;
         transition: all 0.25s ease;
     }

     .btn-outline-primary-custom:hover {
         background: var(--primary-color);
         color: white;
         border-color: var(--primary-color);
         transform: translateY(-2px);
     }

     .section-title {
         font-weight: 700;
         font-size: 2.5rem;
         letter-spacing: -0.02em;
         color: var(--gray-800);
         position: relative;
         display: inline-block;
     }

     .section-title:after {
         content: '';
         position: absolute;
         bottom: -12px;
         left: 0;
         width: 70px;
         height: 4px;
         background: var(--primary-color);
         border-radius: 4px;
     }

     .card-hover {
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         border: none;
         border-radius: 28px;
         background: white;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.02);
     }

     .card-hover:hover {
         transform: translateY(-6px);
         box-shadow: var(--shadow-md), 0 0 0 1px rgba(91, 193, 172, 0.15);
     }

     .icon-circle {
         width: 56px;
         height: 56px;
         background: var(--primary-light);
         border-radius: 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--primary-color);
         font-size: 28px;
         transition: all 0.2s;
     }

     .pill-badge {
         background: var(--primary-light);
         color: var(--primary-dark);
         padding: 0.3rem 1rem;
         border-radius: 60px;
         font-weight: 500;
         font-size: 0.85rem;
         display: inline-flex;
         align-items: center;
         gap: 6px;
     }

     .stat-number {
         font-size: 2.8rem;
         font-weight: 800;
         color: var(--primary-color);
         line-height: 1.2;
     }

     .hero-gradient {
         background: linear-gradient(135deg, #ffffff 0%, #f9fefc 100%);
     }

     .img-abstract {
         border-radius: 2rem;
     }

     .value-icon {
         font-size: 2.2rem;
         color: var(--primary-color);
         margin-bottom: 1rem;
     }

     @media (max-width: 768px) {
         .section-title {
             font-size: 2rem;
         }

         .stat-number {
             font-size: 2.2rem;
         }
     }





     /*---------------------------------------
  NEWS         
-----------------------------------------*/
     .about-detail-header-section {
         background-image: url('../images/important/machine3.jpeg');
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
         position: relative;
         padding-top: 150px;
         padding-bottom: 150px;
     }

     .news-block-top {
         border-radius: var(--border-radius-medium);
         position: relative;
         overflow: hidden;
     }

     .news-block-two-col-image-wrap {
         border-radius: var(--border-radius-small);
         position: relative;
         overflow: hidden;
         width: 150px;
         margin-right: 20px;
     }

     .news-category-block {
         background: var(--secondary-color);
         position: absolute;
         bottom: 0;
         right: 0;
         left: 0;
         padding: 10px 20px;
     }

     .news-category-block .category-block-link {
         color: var(--white-color);
         margin-right: 10px;
     }

     .news-block-info {
         padding-top: 10px;
         padding-bottom: 10px;
     }

     .news-block-title-link {
         color: var(--dark-color);
     }

     .news-detail-image {
         display: block;
         border-radius: var(--border-radius-medium);
     }






     /* legacy & manufacturing grid */
     .capability-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
         gap: 1rem;
     }

     .capability-item {
         background: var(--gray-50);
         border-radius: 60px;
         padding: 0.5rem 1rem;
         font-size: 0.9rem;
         font-weight: 500;
         color: var(--gray-700);
         transition: all 0.2s;
         text-align: center;
         border: 1px solid var(--gray-200);
     }

     .capability-item i {
         color: var(--primary-color);
         margin-right: 8px;
         font-size: 0.9rem;
     }

     .capability-item:hover {
         background: white;
         border-color: var(--primary-color);
         color: var(--primary-dark);
     }

     hr.divider-light {
         opacity: 0.3;
         margin: 2rem 0;
     }

     .bg-soft-stat {
         background: #ffffff;
         border-radius: 36px;
         box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
         border: 1px solid var(--gray-200);
     }

     .manufacturing-section {
         background-color: #f8f9fa;
         padding: 60px 0;
     }

     .manufacturing-title {
         font-size: 2.5rem;
         font-weight: 800;
         color: #2d2d2d;
         margin-bottom: 1rem;
         letter-spacing: 0.5px;
     }

     .text-green {
         color: #5bc1ac;
     }

     .manufacturing-subtitle {
         font-size: 1.1rem;
         color: #666;
         line-height: 1.6;
         max-width: 1200px;
     }

     .diamond-grid {
         display: flex;
         flex-direction: column;
         gap: 20px;
         max-width: 600px;
         margin: 0 auto;
     }

     .diamond-row {
         display: flex;
         justify-content: center;
         gap: 20px;
     }

     .diamond-row:nth-child(2) {
         margin-top: -40px;
     }

     .diamond-wrapper {
         width: 220px;
         height: 220px;
         position: relative;
     }

     .diamond {
         width: 100%;
         height: 100%;
         transform: rotate(45deg);
         overflow: hidden;
         background-color: #000;
         border-radius: 15px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     }

     .diamond img {
         width: 141.42%;
         height: 141.42%;
         object-fit: cover;
         transform: rotate(-45deg);
         position: absolute;
         top: -20.71%;
         left: -20.71%;
     }

     .product-design-card {
         background-color: #e8e8e8;
         border-radius: 8px;
         overflow: hidden;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     }

     .card-header-custom {
         background-color: #e8e8e8;
         padding: 30px 30px 20px;
     }

     .card-title-custom {
         font-size: 1.8rem;
         font-weight: 800;
         color: #2d2d2d;
         margin: 0;
         letter-spacing: 0.5px;
         line-height: 1.3;
     }

     .card-body-custom {
         background-color: #5bc1ac;
         padding: 35px 30px;
     }

     .design-item {
         display: flex;
         align-items: center;
         color: white;
         font-size: 1.3rem;
         font-weight: 600;
         margin-bottom: 25px;
         letter-spacing: 0.3px;
     }

     .design-item:last-child {
         margin-bottom: 0;
     }

     .arrow-icon {
         margin-right: 15px;
         font-size: 0.9rem;
         opacity: 0.9;
         flex-shrink: 0;
     }

     @media (max-width: 991px) {
         .manufacturing-title {
             font-size: 2rem;
         }

         .manufacturing-subtitle {
             font-size: 1rem;
         }

         .diamond-grid {
             max-width: 500px;
         }

         .diamond-wrapper {
             width: 180px;
             height: 180px;
         }

         .card-title-custom {
             font-size: 1.5rem;
         }

         .design-item {
             font-size: 1.1rem;
         }
     }

     @media (max-width: 767px) {
         .manufacturing-section {
             padding: 40px 0;
         }

         .manufacturing-title {
             font-size: 1.6rem;
         }

         .manufacturing-subtitle {
             font-size: 0.95rem;
         }

         .diamond-grid {
             max-width: 400px;
         }

         .diamond-wrapper {
             width: 150px;
             height: 150px;
         }

         .diamond-row:nth-child(2) {
             margin-top: -30px;
         }

         .card-header-custom {
             padding: 25px 25px 15px;
         }

         .card-title-custom {
             font-size: 1.3rem;
         }

         .card-body-custom {
             padding: 25px 25px;
         }

         .design-item {
             font-size: 1rem;
             margin-bottom: 20px;
         }

         .arrow-icon {
             margin-right: 12px;
         }
     }

     @media (max-width: 480px) {
         .manufacturing-title {
             font-size: 1.4rem;
         }

         .diamond-wrapper {
             width: 120px;
             height: 120px;
         }

         .diamond {
             border-radius: 10px;
         }

         .card-title-custom {
             font-size: 1.1rem;
         }

         .design-item {
             font-size: 0.9rem;
         }
     }