:root {
      --primary-blue: #0057FF;
      --dark-blue: #003d7a;
      --light-blue: #4d94ff;
      --tech-green: #00ff88;
      --dark-bg: #0a0e27;
  }

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

  body {
      background-color: #ffffff;
      overflow-x: hidden;
  }

  body {
      font-family: 'Monda', sans-serif;
  }

  .section-title,
  .card-title {
      font-family: 'Rajdhani', sans-serif;
  }

  .fix-section-echother {
      margin-top: 100px;
  }

  @media (max-width: 768px) {
      .fix-section-echother {
          margin-top: 37px;
      }
  }

  /* Header and Navbar Styles */
  .navbar {
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      padding: 1rem 0;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .navbar-brand {
      font-weight: 700;
      color: var(--dark-bg) !important;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      transition: color 0.3s ease;
  }

  .navbar-brand i {
      margin-right: 10px;
      color: var(--tech-green);
  }

  .navbar-nav .nav-link {
      color: var(--dark-bg) !important;
      margin: 0 15px;
      font-weight: 500;
      transition: color 0.3s ease;
  }

  .navbar-toggler {
      border: none;
      color: var(--dark-bg);
      transition: color 0.3s ease;
  }

  .navbar-toggler:focus {
      box-shadow: none;
  }

  .navbar-toggler-icon {
      background-image: none;
  }

  .navbar-toggler i {
      font-size: 1.5rem;
  }

   .navbar-nav .nav-link:hover, .nav-link.active {
      color:#003d7a !important;
  }

  /* Hero Section Styles */
  .hero-section {
      position: relative;
      height: 100vh;
      background:
          linear-gradient(135deg, rgba(10, 14, 39, 0.7), rgba(26, 35, 126, 0.7)),
          url('../img/homeheaderbanner.png') center/cover no-repeat;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* Content Container */
  .hero-content {
      position: relative;
      z-index: 2;
      color: white;
      padding: 2rem;
      max-width: 900px;
  }

  .semiconductor-label {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--tech-green);
      margin-bottom: 1.5rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: 0;
      animation: fadeInLeft 1s forwards;
  }

  .hero-title {
      font-size: 3.5rem;
      font-weight: 700;
      margin-bottom: 2rem;
      line-height: 1.2;
      opacity: 0;
      animation: fadeInUp 1s 0.5s forwards;
  }

  /* Animations */
  @keyframes fadeInLeft {
      0% {
          opacity: 0;
          transform: translateX(-30px);
      }

      100% {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes fadeInUp {
      0% {
          opacity: 0;
          transform: translateY(30px);
      }

      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Innovation Section Styles */
  .innovation-section {
      padding: 0;
      position: relative;
      overflow: hidden;
  }

  .innovation-container {
      display: flex;
      align-items: center;
      min-height: 500px;
  }

  .innovation-content {
      padding-right: 50px;
  }

  .innovation-title {
      font-size: 30px;
      font-weight: 700;
      color: var(--dark-bg);
      position: relative;
      display: inline-block;
  }


  .innovation-description {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #555;
      margin-bottom: 30px;
      text-align: justify;
  }

  .learn-more-btn {
      background-color: var(--primary-blue);
      color: white;
      border: none;
      padding: 12px 35px;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-block;
      position: relative;
      overflow: hidden;
  }

  .learn-more-btn:hover {
      background-color: var(--dark-blue);
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
      color: white;
  }

  .learn-more-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
  }

  .learn-more-btn:hover::before {
      left: 100%;
  }

  .innovation-image {
      position: relative;
      height: 377px;
      background: linear-gradient(135deg, #0a0e27 0%, #1a237e 100%);
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }

  /* Manufacturing Excellence Section */
  .manufacturing-section {
      padding: 100px 0;
      background-color: var(--dark-bg);
      position: relative;
      overflow: hidden;
  }

  .manufacturing-title {
      font-size: 2.8rem;
      font-weight: 700;
      color: white;
      text-align: center;
      margin-bottom: 60px;
      position: relative;
      display: inline-block;
      width: 100%;
  }

  .module-card {
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      padding: 30px;
      width: 100%;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      min-height: 517px;
  }

  .module-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 102, 204, 0.2);
      border-color: var(--tech-green);
  }

  .module-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, var(--tech-green), var(--primary-blue));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
  }

  .module-card:hover::before {
      transform: scaleX(1);
  }

  .module-number {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--tech-green);
      margin-bottom: 15px;
  }

  .module-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: white;
      margin-bottom: 20px;
  }

  .module-icon {
      font-size: 2.5rem;
      color: var(--tech-green);
      margin-bottom: 20px;
  }

  .module-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .module-list li {
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 12px;
      padding-left: 25px;
      position: relative;
      line-height: 1.5;
  }

  .module-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 8px;
      height: 8px;
      background-color: var(--tech-green);
      border-radius: 50%;
  }

  /* Circuit background for manufacturing section */
  .circuit-bg-manufacturing {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.05;
      background-image:
          radial-gradient(circle at 10% 20%, rgba(0, 255, 136, 0.2) 0%, transparent 20%),
          radial-gradient(circle at 80% 30%, rgba(0, 102, 204, 0.2) 0%, transparent 20%),
          radial-gradient(circle at 40% 70%, rgba(0, 102, 204, 0.2) 0%, transparent 20%),
          radial-gradient(circle at 90% 80%, rgba(0, 255, 136, 0.2) 0%, transparent 20%);
      z-index: 0;
  }

  /* Responsive Styles */
  @media (max-width: 768px) {
      .hero-title {
          font-size: 2.2rem;
      }

      .semiconductor-label {
          font-size: 1.2rem;
      }

      .chip {
          display: none;
      }

      .innovation-container {
          flex-direction: column;
      }

      .innovation-content {
          padding-right: 0;
          margin-bottom: 30px;
      }

      .innovation-title {
          font-size: 2.2rem;
      }

      .innovation-title::after {
          left: 50%;
          transform: translateX(-50%);
      }

      .innovation-image {
          height: 300px;
          width: 100%;
      }

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

      .module-card {
          max-width: 100%;
      }
  }

  /* Additional Sections for Demo */
  .content-section {
      padding: 80px 0;
  }

  .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 2rem;
      color: var(--dark-bg);
      text-align: center;
  }

  .feature-card {
      background-color: #f8f9fa;
      border-radius: 10px;
      padding: 30px;
      height: 100%;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

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

  .feature-icon {
      font-size: 3rem;
      color: var(--primary-blue);
      margin-bottom: 20px;
  }

  .feature-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 15px;
      color: var(--dark-bg);
  }

  .feature-description {
      color: #6c757d;
      line-height: 1.6;
  }

  /* PURE CSS SHIMMER BUTTON */
  .shimmer-btn {
      position: relative;
      padding: 15px 40px;
      border: none;
      background: linear-gradient(135deg, #0057FF, #00C2FF);
      color: white;
      font-weight: 600;
      border-radius: 10px;
      text-decoration: none;
      overflow: hidden;
      display: inline-block;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0, 87, 255, 0.3);
      transition: transform .3s ease, box-shadow .3s ease;
  }

  /* Hover Animation */
  .shimmer-btn:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 87, 255, 0.5);
  }

  /* Shimmer Effect */
  .shimmer-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -150%;
      width: 200%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
      0% {
          left: -150%;
      }

      100% {
          left: 150%;
      }
  }

  /* Click / Ripple Without JS */
  .shimmer-btn:active::after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      animation: ripple 0.6s ease-out forwards;
  }

  @keyframes ripple {
      to {
          transform: translate(-50%, -50%) scale(2);
          opacity: 0;
      }
  }

  /* code product line */

  /* Section */
  .product-lines-section {
      padding: 0;
  }

  .product-lines-title {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 60px;
      text-align: center;
      position: relative;
  }

  /* Tabs */
  .nav-tabs .nav-link {
      border: none;
      background: none;
      font-size: 1.05rem;
      font-weight: 600;
      color: #666;
      cursor: pointer;
      transition: 0.3s;
  }

  .nav-tabs .nav-link.active,
  .nav-tabs .nav-link:hover {
      color: #007bff;
      border-bottom: 3px solid #007bff;
  }

  /* ------- SECTION DESIGN ------- */
  .semi-section {
      padding: 77px 10px;
      background: linear-gradient(135deg, #0066ff, #00d4ff);
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      color: white;
  }

  .semi-img img {
      max-height: 280px;
      transition: 0.4s ease-in-out;
  }

  .semi-img img:hover {
      transform: scale(1.05);
  }

  .semi-title {
      font-size: 1.8rem;
      font-weight: 700;
  }

  .semi-desc {
      font-size: 17px;
      font-weight: 500;
      text-align: justify;
  }

  .semi-btn {
      background: #000;
      color: white;
      padding: 10px 30px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: 0.3s;
  }

  .semi-btn:hover {
      background: #222;
      transform: translateY(-3px);
  }

  /* industry applications section */

  /* Section Styles */
  .flip-card-section {
      padding: 0;
  }

  .section-title {
      font-size: 2.8rem;
      font-weight: 700;
      color: #0a0e27;
      text-align: center;
      margin-bottom: 60px;
      position: relative;
      display: inline-block;
      width: 100%;
  }

  .section-title::after {
      content: '';
      position: absolute;
      width: 100px;
      height: 4px;
      background-color: #0057FF;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
  }

  /* Flip Card Container */
  .flip-card-container {
      perspective: 1000px;
      margin-bottom: 30px;
  }

  .flip-card {
      width: 100%;
      height: 400px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.8s;
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .flip-card-container:hover .flip-card {
      transform: rotateY(180deg);
  }

  .card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 15px;
      overflow: hidden;
  }

  /* Front Face - Image */
  .card-front {
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 15px;
  }

  .card-badge {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background-color: rgba(255, 255, 255, 0.737);
      color: rgb(0, 0, 0);
      padding: 8px 15px;
      font-weight: 600;
      font-size: 0.9rem;
      z-index: 2;
  }

  /* Back Face - Details */
  .card-back {
      background: linear-gradient(135deg, #0057FF 0%, #00C2FF 100%);
      color: white;
      transform: rotateY(180deg);
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .card-title {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
  }

  .card-title::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 3px;
      background-color: #00ff88;
      bottom: -10px;
      left: 0;
  }

  .card-description {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 25px;
      text-align: justify;
  }

  .card-features {
      margin-bottom: 25px;
  }

  .card-feature {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
  }

  .card-feature i {
      color: #00ff88;
      margin-right: 10px;
      font-size: 1.1rem;
  }

  .card-feature span {
      font-size: 0.95rem;
  }

  /* Responsive Styles */
  @media (max-width: 768px) {
      .section-title {
          font-size: 2.2rem;
      }

      .flip-card {
          height: 350px;
      }

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

      .card-description {
          font-size: 0.9rem;
      }
  }

  /* certification and compliance */
  .cert-section {
      padding: 60px 0;
      text-align: center;
      background-color: var(--dark-bg);
  }

  .cert-section h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: white;
  }

  .cert-section p {
      font-size: 1rem;
      margin-bottom: 40px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      color: #ffffff;
  }

  .cert-card {
      background-color: #fff;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
      transition: transform 0.3s;
  }

  .cert-card img {
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
  }

  .cert-card:hover {
      transform: translateY(-5px);
  }

  /* global partner and clinets section */

  /* Section Background */
  #partners-section {
      padding: 0;
  }

  /* Typography */
  #partners-section h2 {
      font-weight: 700;
      color: #0d3b66;
  }

  #partners-section p {
      color: #1e2a38;
      font-size: 1.1rem;
  }

  /* Button */
  #partners-section .btn-primary {
      background: linear-gradient(90deg, #0057ff, #00c2ff);
      border: none;
      padding: 0.65rem 1.5rem;
      font-weight: 600;
      transition: all 0.3s ease-in-out;
  }

  #partners-section .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 94, 255, 0.3);
  }

  /* Vertical Scroll Container */
  .vertical-scroll-container {
      max-height: 500px;
      overflow: hidden;
      position: relative;
  }

  .vertical-scroll-wrapper {
      display: flex;
      flex-direction: column;
      animation: verticalScroll 20s linear infinite;
  }

  @keyframes verticalScroll {
      0% {
          transform: translateY(0);
      }

      100% {
          transform: translateY(-50%);
      }
  }

  /* Logo Card */
  .partner-logo-card {
      background: #fff;
      border-radius: 1rem;
      padding: 1.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0.5rem;
      transition: all 0.3s ease-in-out;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      flex: 1;
  }

  .partner-logo-card:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .partner-logo {
      max-height: 60px;
      width: auto;
      filter: grayscale(100%) opacity(0.7);
      transition: all 0.3s ease-in-out;
  }

  .partner-logo-card:hover .partner-logo {
      filter: grayscale(0%) opacity(1);
  }

  /* Row of logos */
  .logo-row {
      display: flex;
      justify-content: space-between;
  }

  @media (max-width: 768px) {
      #partners-section h2 {
          font-size: 2rem;
      }

      #partners-section p {
          font-size: 1rem;
      }

      .logo-row {
          flex-direction: column;
          gap: 1rem;
      }
  }

  /* blog section style */

  /* blog section homepage */

  .industry-card {
      position: relative;
      overflow: hidden;
      border: none;
      border-radius: 12px;
      transition: transform 0.4s ease;
  }

  .industry-card:hover {
      transform: translateY(-8px);
  }

  .industry-card img {
      width: 100%;
      height: 337px;
      object-fit: cover;
      border-radius: 12px;
      transition: transform 0.5s ease;
  }

  .industry-card:hover img {
      transform: scale(1.1);
  }

  .industry-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      color: var(--text-white);
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
      transition: all 0.4s ease;
  }

  .industry-desc {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: all 0.4s ease;
      color: white;
  }

  .industry-card:hover .industry-desc {
      opacity: 1;
      max-height: 150px;
  }

  .tag {
      position: absolute;
      top: 15px;
      right: 15px;
      background: black;
      color: white;
      font-size: 0.8rem;
      padding: 5px 12px;
      border-radius: 6px;
  }

  .industry-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: white;
  }

  /* footer section style */

  :root {
      --primary-dark: #0a192f;
      --secondary-dark: #112240;
      --accent-blue: #1e90ff;
      --text-primary: #ccd6f6;
      --text-secondary: #8892b0;
      --border-color: #233554;
  }

  .footer-section {
      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
      color: var(--text-primary);
      padding: 60px 0 20px;
      position: relative;
  }

  .footer-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--accent-blue), var(--accent-light));
  }

  .footer-brand h3 {
      font-size: 2rem;
      font-weight: 700;
      color: #00C2FF;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
  }

  .footer-brand h3 i {
      margin-right: 10px;
      font-size: 1.8rem;
  }

  .footer-description {
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 25px;
  }

  .social-icons {
      display: flex;
      gap: 15px;
  }

  .social-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(100, 255, 218, 0.1);
      border: 1px solid rgba(100, 255, 218, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #00C2FF;
      transition: all 0.3s ease;
      text-decoration: none;
  }

  .social-icon:hover {
      background-color: #00C2FF;
      color: var(--primary-dark);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(100, 255, 218, 0.3);
  }

  .footer-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: #00C2FF;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 10px;
  }

  .footer-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 2px;
      background: #00C2FF;
  }

  .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .footer-links li {
      margin-bottom: 12px;
  }

  .footer-links a {
      color: var(--text-secondary);
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      font-size: 0.95rem;
  }

  .footer-links a:hover {
      color: #00C2FF;
      transform: translateX(5px);
  }

  .footer-links a i {
      margin-right: 8px;
      font-size: 0.85rem;
      opacity: 0.7;
  }

  .contact-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
      color: var(--text-secondary);
  }

  .contact-item i {
      color: #00C2FF;
      margin-right: 12px;
      margin-top: 3px;
      font-size: 1rem;
      width: 20px;
  }

  .contact-item span {
      line-height: 1.5;
      font-size: 0.95rem;
  }

  .footer-bottom {
      border-top: 1px solid var(--border-color);
      margin-top: 40px;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      gap: 15px;
  }

  .copyright {
      color: var(--text-secondary);
      font-size: 0.9rem;
  }

  .bottom-links {
      display: flex;
      gap: 20px;
      list-style: none;
      padding: 0;
      margin: 0;
      flex-wrap: wrap;
  }

  .bottom-links a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.3s ease;
  }

  .bottom-links a:hover {
      color: #00C2FF;
  }

  .industries-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
  }

  /* Responsive */
  @media (max-width: 992px) {
      .footer-col {
          margin-bottom: 30px;
      }

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

  @media (max-width: 768px) {
      .footer-bottom {
          flex-direction: column;
          text-align: center;
      }

      .social-icons {
          justify-content: center;
      }

      .footer-brand {
          text-align: center;
      }

      .bottom-links {
          justify-content: center;
          gap: 15px;
      }
  }

  @media (max-width: 576px) {
      .footer-section {
          padding: 30px 0 15px;
      }

      .footer-title::after {
          left: 50%;
          transform: translateX(-50%);
      }

      .footer-brand h3 {
          font-size: 1.75rem;
          justify-content: center;
      }
  }

 /* 🔵 Unique Hero Section */
.about-after-hero-section {
    background: linear-gradient(135deg, #0057FF 0%, #00C2FF 100%);
    color: white;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.about-after-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0,0 L100,100 M100,0 L0,100" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
    background-size: 20px 20px;
    opacity: 0.3;
}

.about-after-hero-content {
    position: relative;
    z-index: 1;
    margin-top: 100px;
}

.about-after-hero-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    animation: about-after-fadeInUp 1s ease-out;
}

.about-after-hero-subtitle {
    margin-bottom: 2rem;
    opacity: 0.9;
    animation: about-after-fadeInUp 1s ease-out 0.3s both;
    text-align: center;
}

@keyframes about-after-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 📱 Responsive */
@media (max-width: 768px) {
    .about-after-hero-section {
        padding: 70px 0;
    }
}

/* About Section Styles */
.about-after-section {
    padding: 0;
    background-color: white;
}

.about-after-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
    justify-content: center;
}

.about-after-badge {
    background-color: #2c3e50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.about-after-badge:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
}

.about-after-badge-icon {
    font-size: 1.2rem;
}

.about-after-content {
    margin-top: 30px;
}

.about-after-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.about-after-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #0077e6;
}

.about-after-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    text-align: justify;
}

.about-after-chip-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-after-title {
        font-size: 2rem;
    }
}

  :root {
      --primary-blue: #0056b3;
      --dark-blue: #003d82;
      --light-blue: #0077e6;
      --dark-gray: #2c3e50;
  }

  /* Timeline Section Styles */
  .timeline-section {
      padding: 0;
  }

  .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--dark-gray);
      margin-bottom: 15px;
      text-align: center;
  }

  .section-subtitle {
      font-size: 1.1rem;
      color: #555;
      text-align: center;
      max-width: 700px;
      margin: 0 auto 50px;
  }

  .timeline {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
  }

  .timeline::after {
      content: '';
      position: absolute;
      width: 4px;
      background-color: #e0e0e0;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -2px;
      z-index: 1;
  }

  .timeline-container {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
      z-index: 2;
  }

  .timeline-container::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      right: -10px;
      background-color: white;
      border: 4px solid var(--light-blue);
      top: 20px;
      border-radius: 50%;
      z-index: 1;
  }

  .timeline-left {
      left: 0;
  }

  .timeline-right {
      left: 50%;
  }

  .timeline-left::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      right: 30px;
      border: medium solid white;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent white;
  }

  .timeline-right::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      left: 30px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
  }

  .timeline-right::after {
      left: -10px;
  }

  .timeline-content {
      padding: 20px 30px;
      background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
      color: white;
      position: relative;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .timeline-content:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  .timeline-year {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: #fff;
  }

  .timeline-title {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 10px;
  }

  .timeline-description {
      font-size: 1rem;
      line-height: 1.6;
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
      .section-title {
          font-size: 2.2rem;
      }
  }

  @media (max-width: 768px) {
      .hero-section {
          padding: 70px 0;
      }

      .feature-icons {
          gap: 1rem;
      }

      .about-section {
          padding: 60px 0;
      }

      .about-title {
          font-size: 2rem;
      }

      .badge-container {
          gap: 10px;
      }

      .custom-badge {
          font-size: 0.9rem;
          padding: 8px 15px;
      }

      /* Timeline Responsive */
      .timeline::after {
          left: 31px;
      }

      .timeline-container {
          width: 100%;
          padding-left: 70px;
          padding-right: 25px;
      }

      .timeline-container::before {
          left: 60px;
          border: medium solid white;
          border-width: 10px 10px 10px 0;
          border-color: transparent white transparent transparent;
      }

      .timeline-left::after,
      .timeline-right::after {
          left: 21px;
      }

      .timeline-right {
          left: 0%;
      }
  }

  .infrastructure-section {
      background-color: #0a2540;
      color: white;
      padding: 80px 0;
      position: relative;
      overflow: hidden;
  }

  .infrastructure-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
      background-size: 50px 50px;
      opacity: 0.2;
  }

  .infra-module:hover {
      transform: translateX(10px);
  }

  /* Leadership Team Section Styles */
  .leadership-section {
      padding: 0;
  }

  .section-header {
      text-align: center;
      margin-bottom: 60px;
      position: relative;
      z-index: 1;
  }

  .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 15px;
      position: relative;
      display: inline-block;
  }

  .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background-color: #0077e6;
  }

  .subsection-title {
      font-size: 1.8rem;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 30px;
      position: relative;
      padding-left: 15px;
  }

  .subsection-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 30px;
      background-color: #0077e6;
      border-radius: 3px;
  }

  .founder-content {
      display: flex;
      align-items: center;
      gap: 30px;
  }

  .founder-image {
      width: 277px;
      height: 277px;
      border-radius: 10px;
      object-fit: cover;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .founder-image:hover {
      transform: scale(1.05);
  }

  .founder-info {
      flex: 1;
  }

  .founder-name {
      font-size: 1.5rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 5px;
  }

  .founder-title {
      font-size: 1.1rem;
      color: #0077e6;
      font-weight: 600;
      margin-bottom: 15px;
  }

  .founder-bio {
      font-size: 1rem;
      line-height: 1.6;
      color: #555;
      margin: 0;
      text-align: justify;
  }

  .officers-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
  }

  .officer-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 1;
      overflow: hidden;
      border: 1px solid #f0f0f0;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      height: 400px;
      cursor: pointer;
  }

  .officer-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .officer-image-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .officer-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
  }

  .officer-card:hover .officer-image {
      transform: scale(1.1);
  }

  .officer-info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 20px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
      z-index: 2;
  }

  .officer-name {
      font-size: 1.3rem;
      font-weight: 600;
      color: white;
      margin-bottom: 5px;
  }

  .officer-title {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 400;
      margin: 0;
  }

  .linkedin-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 119, 181, 0.9) 0%, rgba(0, 86, 179, 0.9) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 3;
  }

  .officer-card:hover .linkedin-overlay {
      opacity: 1;
  }

  .linkedin-icon {
      color: white;
      font-size: 3rem;
      margin-bottom: 15px;
      transition: transform 0.3s ease;
  }

  .officer-card:hover .linkedin-icon {
      transform: scale(1.1);
  }

  .linkedin-text {
      color: white;
      font-size: 1.1rem;
      font-weight: 500;
      text-align: center;
  }

  /* Responsive */
  @media (max-width: 992px) {
      .founder-content {
          flex-direction: column;
          text-align: center;
      }

      .founder-image {
          margin: 0 auto;
      }

      .section-title {
          font-size: 2.2rem;
      }
  }

  @media (max-width: 768px) {

      .section-title {
          font-size: 2rem;
      }

      .founder-image {
          width: 277px;
          height: 277px;
      }

      .officer-card {
          height: 350px;
      }

      .linkedin-icon {
          font-size: 2.5rem;
      }
  }

  @media (max-width: 576px) {
      .officers-grid {
          grid-template-columns: 1fr;
      }

      .officer-card {
          height: 400px;
      }
  }

  /* product page style */
  :root {
      --primary-color: #0a2540;
      --overlay-color: rgba(10, 37, 64, 0.6);
      --text-light: #ffffff;
  }

  /* HERO SECTION WITHOUT CSS BACKGROUND */
  .banner-hero-section {
      position: relative;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  /* IMAGE INSIDE HTML */
  .banner-hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      z-index: 0;
  }

  .banner-hero-overlay {
      position: absolute;
      inset: 0;
      background: var(--overlay-color);
      z-index: 1;
  }

  .banner-hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      color: white;
      padding: 2rem;
  }

  .banner-hero-title {
      font-size: 3.5rem;
      font-weight: 700;
      animation: fadeInDown 1s ease-out;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  }

  @keyframes fadeInDown {
      from {
          opacity: 0;
          transform: translateY(-30px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @media (max-width: 768px) {
      .banner-hero-title {
          font-size: 2.5rem;
      }
  }

  @media (max-width: 576px) {
      .banner-hero-title {
          font-size: 2rem;
      }
  }

  :root {
      --bg-dark: #0a1b2e;
      --card-bg: #1e2a3a;
      --text-title: #ffffff;
      --text-light: #a0a8b8;
      --btn-blue: #0098ff;
      --accent-glow: #00d4ff;
  }

  /* SIMPLE BACKGROUND – NO ANIMATION */
  .products-section {
      padding: 100px 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #0a1b2e 0%, #132436 50%, #0a1b2e 100%);
  }

  /* Section Header */
  .section-header {
      text-align: center;
      margin-bottom: 80px;
  }

  .products-title {
      font-weight: 800;
      color: var(--text-title);
      text-transform: uppercase;
      letter-spacing: 2px;
      text-align: center;
  }

  .section-subtitle {
      font-size: 1.2rem;
      color: var(--text-light);
  }

  /* Product Grid */
  .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
  }

  /* Product Cards – ONLY HOVER ANIMATION KEPT */
  .product-card {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 40px 30px;
      border: 2px solid rgba(0, 152, 255, 0.2);
      transition: all 0.4s ease;
      backdrop-filter: blur(8px);
      min-height: 470px;
  }

  .product-card:hover {
      transform: translateY(-15px) scale(1.03);
      box-shadow: 0 25px 50px rgba(0, 152, 255, 0.3);
      border-color: rgba(0, 212, 255, 0.8);
  }

  /* Icon Container */
  .icon-container {
      width: 100px;
      height: 100px;
      margin: 0 auto 30px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .icon-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 152, 255, 0.15), rgba(0, 212, 255, 0.05));
      border-radius: 25px;
      transform: rotate(45deg);
  }

  .product-icon {
      font-size: 3rem;
      color: var(--accent-glow);
      z-index: 2;
      filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
  }

  /* Card Content */
  .product-title {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-title);
      margin-bottom: 15px;
  }

  .product-desc {
      color: var(--text-light);
      line-height: 1.6;
      margin-bottom: 25px;
      text-align: justify;
  }

  /* Responsive */
  @media (max-width: 768px) {
      .products-title {
          font-size: 2.5rem;
      }
  }

  .product-semi-section {
      padding: 0;
      text-align: center;
  }

  .product-semi-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: #0a1b2e;
  }

  .product-semi-text {
      max-width: 750px;
      margin: auto;
      color: #555;
  }

  /* ICON BOX */
  .process-box {
      padding: 30px 15px;
      transition: all 0.3s ease;
  }

  .process-box i {
      font-size: 2.5rem;
      background: linear-gradient(45deg, #0057FF, #00C2FF);
      color: white;
      padding: 30px;
      border-radius: 10px;
  }

  .process-box:hover {
      transform: translateY(-5px);
  }

  .process-title {
      font-size: 1rem;
      margin-top: 10px;
      font-weight: 600;
  }

  .ai-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 15px;
  }

  .ai-subtitle {
      max-width: 700px;
      margin-bottom: 40px;
      color: #555;
  }

  .ai-card {
      border-radius: 15px;
      padding: 30px;
      background: linear-gradient(135deg, #eef4ff, #f7fbff);
      transition: all 0.4s ease;
      height: 100%;
      border: 1px solid #e2e7f0;
  }

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

  .ai-icon {
      font-size: 40px;
      color: #0088ff;
      margin-bottom: 15px;
  }

  .ai-card h5 {
      font-weight: 600;
      margin-bottom: 10px;
  }

  .ai-card p {
      color: #666;
      font-size: 0.95rem;
  }

  .tech-section {
      position: relative;
      background: url('../img/solutionone.jpg') center/cover no-repeat;
      color: #fff;
      text-align: center;
      padding: 120px 20px;
  }

  .tech-section::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 50, 0.6);
      /* overlay */
      z-index: 1;
  }

  .tech-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      margin: 0 auto;
  }

  .tech-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
  }

  .tech-desc {
      font-size: 1.1rem;
      line-height: 1.6;
  }

  /* Responsive */
  @media (max-width: 768px) {
      .tech-title {
          font-size: 2rem;
      }

      .tech-desc {
          font-size: 1rem;
      }

      .tech-section {
          padding: 80px 15px;
      }
  }

  @media (max-width: 576px) {
      .tech-title {
          font-size: 1.6rem;
      }

      .tech-desc {
          font-size: 0.95rem;
      }

      .tech-section {
          padding: 60px 10px;
      }
  }

  .solution-ai-section {
      padding: 0;
  }

  .solution-ai-card {
      background-size: cover;
      background-position: center;
      min-height: 420px;
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      padding: 25px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }

  /* DARK OVERLAY */
  .solution-ai-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(2px);
      z-index: 0;
  }

  .solution-ai-card * {
      position: relative;
      z-index: 2;
  }

  /* HEADING */
  h2.solution-section-title {
      color: #1c1c1c;
      font-weight: 700;
  }

  .solution-ai-card h4 {
      color: #fff;
      font-weight: 700;
  }

  .solution-ai-card p {
      color: #cfcfcf;
      font-size: 0.95rem;
  }

  .key-title {
      color: #4da3ff;
      font-weight: 600;
      margin-bottom: 4px;
  }

  .btn-learn {
      background: #007bff;
      color: #fff;
      font-weight: 600;
      border-radius: 6px;
      width: fit-content;
      padding: 8px 18px;
      transition: 0.3s ease;
  }

  .btn-learn:hover {
      background: #005fc4;
  }

  /* sustainability page style */

  .sustainability-about-title {
      font-weight: bold;
  }

  .sustainability-about-text {
      text-align: justify;
  }

  .sustainability-section {
      background-color: #111d29;
      color: #fff;
      padding: 50px 0;
  }

  .sustainability-header {
      text-align: center;
      margin-bottom: 40px;
  }

  .sustainability-header h2 {
      font-weight: bold;
  }

  .targets-icons {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
  }

  .target-card {
      background-color: #1f2a38;
      border-radius: 10px;
      padding: 20px;
      width: 22%;
      margin: 10px 0;
      text-align: center;
      color: #fff;
  }

  .target-card i {
      font-size: 3rem;
      margin-bottom: 15px;
  }

  @media (max-width: 768px) {
      .target-card {
          width: 45%;
      }
  }

  @media (max-width: 576px) {
      .target-card {
          width: 100%;
      }
  }

  .sustainability-custom-section {
      padding: 0;
  }

  .sustainability-custom-card {
      background: linear-gradient(135deg, #EEF3FF, #EEFAFF);
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 30px;
      margin: 15px 0;
      transition: transform 0.3s;
      min-height: 370px;
  }

  .sustainability-custom-card h4 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #333;
  }

  .sustainability-custom-card p {
      font-size: 1rem;
      color: #666;
      text-align: justify;
  }

  .sustainability-custom-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .sustainability-custom-card a {
      font-size: 1rem;
      font-weight: 600;
      color: #007bff;
      text-decoration: none;
      transition: color 0.3s;
  }

  .sustainability-custom-card a:hover {
      color: #0056b3;
  }

  .env-sustainability-section {
      padding: 0;
  }

  .env-sustainability-header h2 {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 20px;
  }

  .env-sustainability-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 30px;
  }

  .env-sustainability-text {
      flex: 1;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .env-sustainability-text h4 {
      font-size: 1.75rem;
      color: #2980b9;
      margin-bottom: 20px;
  }

  .env-sustainability-text p {
      font-size: 1rem;
      color: #7f8c8d;
      margin-bottom: 20px;
  }

  .env-sustainability-image {
      flex: 1;
      background: url('path_to_image.jpg') no-repeat center center;
      background-size: cover;
      height: 300px;
      border-radius: 10px;
  }

  .sustainability-report {
      flex: 1;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      min-height: 617px;
  }

  .sustainability-report h4 {
      font-weight: bold;
      margin-bottom: 20px;
  }

  .sustainability-report p {
      margin-bottom: 20px;
      text-align: justify;
  }

  .sustainability-report img {
      max-width: 100%;
      height: auto;
      margin-top: 20px;
  }

  @media (max-width: 768px) {
      .env-sustainability-content {
          flex-direction: column;
      }

      .env-sustainability-text,
      .sustainability-report {
          margin-bottom: 20px;
          min-height: 370px;
      }

      .env-sustainability-image {
          height: 250px;
      }
  }

  .commitments-section {
      background-color: #111d29;
      color: #fff;
      padding: 50px 0;
  }

  .commitments-header {
      text-align: center;
      margin-bottom: 30px;
  }

  .commitments-header h2 {
      font-weight: bold;
      margin-bottom: 10px;
  }

  .commitments-stats {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
  }

  .commitments-stat {
      text-align: center;
      background-color: #1f2a38;
      border-radius: 10px;
      padding: 30px;
      width: 30%;
      margin: 10px 0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .commitments-stat h3 {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 15px;
  }

  .commitments-stat p {
      font-size: 1.1rem;
      color: #b3b3b3;
  }

  @media (max-width: 768px) {
      .commitments-stat {
          width: 45%;
          margin: 10px;
      }
  }

  @media (max-width: 576px) {
      .commitments-stat {
          width: 100%;
      }
  }

  .certifications-section {
      padding: 0;
  }

  .certifications-header {
      text-align: center;
      margin-bottom: 30px;
  }

  .certifications-header h2 {
      margin-bottom: 10px;
      color: #2c3e50;
      font-weight: bold;
  }

  .certifications-header p {
      color: #7f8c8d;
  }

  .certifications-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 30px;
  }

  .certification-item {
      background-color: #ffffff;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      width: 150px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .certification-item img {
      max-width: 100%;
      height: auto;
      margin-bottom: 15px;
  }

  @media (max-width: 768px) {
      .certification-item {
          width: 120px;
      }
  }

  @media (max-width: 576px) {
      .certification-item {
          width: 100%;
          margin-bottom: 20px;
      }
  }

  /* investor page style */
  .investor-info {
      background: linear-gradient(135deg, #EEF3FF, #EEFAFF);
      padding: 30px;
  }

  .investor-about-title {
      font-weight: bold;
  }

  .investor-description-title {
      color: #7a7a7a;
  }

  .annual-report {
      background-color: #1c2331;
      padding: 40px 0;
      color: white;
  }

  .annual-report .year {
      font-size: 24px;
      font-weight: 600;
  }

  .annual-report .proxy-link {
      color: #a5acb7;
      text-decoration: none;
  }

  .annual-report .proxy-link:hover {
      text-decoration: underline;
  }

  .annual-report .col {
      position: relative;
      text-align: center;
      padding: 10px;
  }

  .annual-report .col:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 2px;
      background-color: #a5acb7;
  }

  .investor-news {
      padding: 0;
  }

  .investor-news h2 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 30px;
      color: #343a40;
  }

  .investor-news-item {
      background-color: white;
      border-radius: 5px;
      margin-bottom: 20px;
      padding: 20px;
  }

  .investor-news-title {
      font-size: 18px;
      font-weight: 600;
      color: #007bff;
  }

  .investor-news-date {
      font-size: 14px;
      color: #6c757d;
      margin-top: 10px;
  }

  .investor-news-description {
      font-size: 16px;
      color: #495057;
      margin-top: 10px;
  }

  .read-more {
      font-size: 16px;
      font-weight: 600;
      color: #007bff;
      text-decoration: none;
      margin-top: 10px;
      display: inline-block;
  }

  .read-more:hover {
      text-decoration: underline;
  }

  /* Right side vertical line between news items */

  .investor-news-item p {
      margin-bottom: 0;
  }

  .border {
      border-top: solid 1px black;
  }

  .videos-section {
      padding: 0;
  }

  .videos-section h2 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 30px;
      color: #343a40;
  }

  .video-item {
      position: relative;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      overflow: hidden;
      min-height: 237px;
  }

  .video-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
      color: white;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
  }

  .video-item {
      font-size: 18px;
      font-weight: 600;
      color: #007bff;
      padding: 10px;
  }

  /* blog page style */

  .blog-section h2 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 30px;
      color: #343a40;
  }

  .blog-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      overflow: hidden;
  }

  .blog-card img {
      width: 100%;
      height: 250px;
      object-fit: cover;
  }

  .blog-card-body {
      padding: 20px;
  }

  .blog-title {
      font-size: 18px;
      font-weight: 600;
  }

  .blog-date {
      font-size: 14px;
      color: #6c757d;
      margin-bottom: 10px;
  }

  .blog-description {
      font-size: 16px;
      color: #495057;
      margin-bottom: 20px;
      text-align: justify;
  }

  .blog-card-footer a {
      font-size: 16px;
      font-weight: 600;
      color: #007bff;
      text-decoration: none;
  }

  .events-section h2 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 30px;
      color: #343a40;
  }

  .event-card {
      background: linear-gradient(135deg, #00c6ff, #0072ff);
      color: white;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      height: 100%;
      transition: all 0.3s ease;
  }

  .event-card:hover {
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  }

  .event-title {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 10px;
  }

  .event-date,
  .event-location {
      font-size: 14px;
      color: #d1e8ff;
      margin-bottom: 10px;
  }

  .event-description {
      font-size: 16px;
      margin-bottom: 20px;
  }

  /* career page style */

  .passion-purpose-section {
      padding: 0;
  }

  .section-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .section-content .text-content {
      text-align: center;
      margin-bottom: 30px;
  }

  .section-content .text-content h2 {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 20px;
  }

  .section-content .text-content p {
      font-size: 16px;
      color: #6c757d;
  }

  .section-content .image-container {
      width: 100%;
  }

  .section-content img {
      width: 100%;
      height: auto;
      object-fit: cover;
  }

  .facility-section {
      background-color: #1c2331;
      padding: 60px 0;
      color: white;
  }

  .facility-section h2 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 40px;
  }

  .facility-card {
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 30px;
      transition: all 0.3s ease;
  }

  .facility-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
  }

  .facility-card-body {
      padding-top: 20px;
  }

  .facility-card-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #fff;
  }

  .facility-card-text {
      font-size: 16px;
      color: #ccc;
      margin-bottom: 15px;
  }

  .facility-card-footer a {
      font-size: 16px;
      color: #ffffff;
      text-decoration: none;
  }

  .facility-card-footer a:hover {
      text-decoration: underline;
  }

  .benefit-title {
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 8px;
  }

  .benefit-text {
      font-size: 0.85rem;
      line-height: 1.4rem;
      color: #555;
  }

  .section-heading {
      font-weight: 700;
      font-size: 1.6rem;
      margin-bottom: 10px;
  }

  .section-subtext {
      font-size: 0.9rem;
      color: #666;
      max-width: 650px;
  }

  .border-col {
      border-right: 1px solid #eee;
  }

  @media (max-width: 768px) {
      .border-col {
          border-right: none;
          border-bottom: 1px solid #eee;
          padding-bottom: 20px;
      }
  }

  .cta-img img {
      width: 100%;
      border-radius: 12px;
  }

  .cta-content h5 {
      font-weight: 600;
      margin-bottom: 8px;
  }

  .cta-content p {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 25px;
  }

  .cta-btn {
      padding: 8px 18px;
      font-size: 0.85rem;
      font-weight: 600;
      border-radius: 6px;
      border: none;
  }

  .btn-blue {
      background: linear-gradient(90deg, #0168ff, #00b3ff);
      color: #fff;
  }

  .btn-blue:hover {
      opacity: 0.9;
  }

  /* Responsive Fix */
  @media (max-width: 768px) {
      .cta-content {
          text-align: center;
      }
  }

  .contact-section {
      padding: 90px 0;
      background: linear-gradient(180deg, #0064ff, #00bfff);
      color: white;
  }

  .contact-section h3 {
      font-weight: 600;
      margin-bottom: 10px;
  }

  .contact-section p {
      max-width: 600px;
      font-size: 0.9rem;
  }

  .contact-btn {
      background: white;
      color: black;
      font-weight: 600;
      border: none;
      padding: 8px 20px;
      border-radius: 5px;
      transition: 0.3s ease;
  }

  .contact-btn:hover {
      background: #f1f1f1;
  }

  @media (max-width: 768px) {
      .contact-section {
          text-align: center;
      }
  }

  /* contact page style */

  .contact-box-section {
      padding: 0;
  }

  .contact-box {
      background: linear-gradient(180deg, #eef4ff 0%, #f7fbff 100%);
      padding: 40px 20px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
  }

  .contact-box:hover {
      transform: translateY(-6px);
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.15);
  }

  .contact-box h4 {
      font-weight: 700;
  }

  .contact-box p {
      color: #6c757d;
  }

  .contact-media-contact-section {
      padding: 0;

  }

  .contact-media-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 40px;
  }

  .contact-contact-box h6 {
      font-weight: 600;
  }

  .contact-contact-box p,
  .contact-contact-box a {
      margin: 0;
      display: block;
      color: #555;
  }

  .contact-contact-box a:hover {
      text-decoration: underline;
  }

  .office-card {
      background: linear-gradient(135deg, #f4f8ff 0%, #eaf1fb 100%);
      border-radius: 8px;
      padding: 25px 20px;
      min-height: 210px;
      transition: all 0.3s ease;
  }

  .office-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }

  .office-card h6 {
      font-weight: 600;
  }

  .office-card a {
      color: #0d6efd;
      font-size: 14px;
      text-decoration: none;
  }

  .office-card a:hover {
      text-decoration: underline;
  }

  .manufacturing-box {
      background: linear-gradient(135deg, #eef2ff 0%, #e4f5ff 100%);
      border-radius: 8px;
      padding: 40px 35px;
  }

  .manufacturing-box h6 {
      font-weight: 600;
  }

  .manufacturing-box a {
      color: #0d6efd;
      font-size: 14px;
      text-decoration: none;
  }

  .manufacturing-box a:hover {
      text-decoration: underline;
  }

  .footer-contact-section {
      position: relative;
      background: url("../img/hightperformanscomputing.jpg") center/cover no-repeat;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 40px 20px;
  }

  .footer-contact-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
  }

  .footer-contact-box {
      position: relative;
      background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 40%, #67e8f9 100%);
      padding: 50px 40px;
      border-radius: 8px;
      max-width: 600px;
      width: 100%;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
      color: #fff;
      z-index: 2;
      text-align: left;
  }

  .footer-contact-box .form-control {
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.6);
      background: transparent;
      color: #fff;
      padding: 15px;
      font-size: 16px;
  }

  .footer-contact-box .form-control::placeholder {
      color: rgba(255, 255, 255, 0.9);
  }

  .footer-contact-box button {
      background: #000;
      border: none;
      padding: 12px 30px;
      color: #fff;
      border-radius: 4px;
      font-weight: 600;
      font-size: 16px;
  }

  .footer-contact-box button:hover {
      background: #333;
  }

  .footer-contact-box h4 {
      font-weight: 700;
      text-align: left;
      margin-bottom: 30px;
  }