:root {
      --c-brick: #c05825;
      --c-green: #2e7d32;
      --c-dark: #1e293b;
   }

   .h-scroll-wrap {
      overflow-x: auto; 
      padding: 140px 20px;
      scrollbar-width: thin; 
      scrollbar-color: var(--c-brick) #eee;
   }
   
   .h-timeline {
      display: flex; 
      min-width: 1100px; 
      position: relative;
      justify-content: space-between; 
      align-items: center;
      padding-top: 100px; 
      padding-bottom: 100px;
   }

   .h-line {
      position: absolute; 
      top: 50%; 
      left: 0; 
      width: 100%; 
      height: 4px;
      background: #cbd5e1; 
      transform: translateY(-50%); 
      z-index: 0;
   }

   .h-step {
      position: relative; 
      width: 150px; 
      text-align: center; 
      z-index: 1;
   }

   .h-date-box {
      background: #fff; 
      border: 2px solid #ccc; 
      color: #555;
      padding: 8px 0; 
      width: 100%; 
      font-weight: 800; 
      border-radius: 8px;
      position: relative; 
      z-index: 2; 
      transition: 0.3s;
   }
   
   .type-brick .h-date-box { 
      background: var(--c-brick); 
      color: white; 
      border-color: var(--c-brick); 
   }
   
   .type-green .h-date-box { 
      background: var(--c-green); 
      color: white; 
      border-color: var(--c-green); 
   }

   .h-content {
      position: absolute; 
      left: 50%; 
      transform: translateX(-50%);
      width: 220px; 
      background: white; 
      padding: 15px; 
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08); 
      opacity: 0.9; 
      transition: 0.3s;
      border: 1px solid #f1f5f9;
   }
   
   .h-step:hover .h-content { 
      opacity: 1; 
      z-index: 10; 
      transform: translateX(-50%) scale(1.05); 
   }

   .h-arrow {
      position: absolute; 
      left: 50%; 
      width: 2px; 
      height: 40px; 
      background: #94a3b8;
      transform: translateX(-50%);
   }

   .pos-top .h-content { bottom: 60px; }
   .pos-top .h-arrow { bottom: 20px; }
   
   .pos-bottom .h-content { top: 60px; }
   .pos-bottom .h-arrow { top: 20px; }
   
   .tl-logo {
      height: 50px; 
      width: auto; 
      object-fit: contain; 
      margin-bottom: 15px;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
   }

   @media (max-width: 992px) {
      .h-timeline { 
         flex-direction: column; 
         min-width: auto; 
         padding: 0; 
         border-left: 4px solid #cbd5e1; 
         margin-left: 20px; 
      }
      .h-line { display: none; }
      .h-step { 
         width: 100%; 
         margin-bottom: 30px; 
         padding-left: 40px; 
         text-align: left; 
      }
      .h-date-box { 
         width: auto; 
         display: inline-block; 
         padding: 5px 15px; 
         margin-bottom: 10px; 
      }
      .h-content { 
         position: static; 
         transform: none; 
         width: 100%; 
         margin-top: 10px; 
      }
      .h-arrow { display: none; }
      .h-step:hover .h-content { transform: none; }
      .pos-top .h-content, .pos-bottom .h-content { 
         bottom: auto; 
         top: auto; 
      }
      
      .h-step::before {
         content: ''; 
         position: absolute; 
         left: 0; 
         top: 15px; 
         width: 20px; 
         height: 2px; 
         background: #cbd5e1;
      }
   }
   .stepper-wrapper {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      position: relative;
   }

   .stepper-wrapper::before {
      content: '';
      position: absolute;
      top: 25px; 
      left: 0; 
      width: 100%; 
      height: 4px;
      background: #e2e8f0;
      z-index: 0;
   }

   .step-item {
      position: relative;
      z-index: 1;
      text-align: center;
      width: 16%;
      padding: 0 5px;
   }

   .step-circle {
      width: 70px; 
      height: 70px;
      border-radius: 50%;
      background: white;
      border: 4px solid #ccc;
      display: flex; 
      align-items: center; 
      justify-content: center;
      margin: 0 auto 15px auto;
      font-weight: 700; 
      font-size: 0.8rem;
      transition: 0.3s;
      box-shadow: 0 0 0 5px #f8fafc;
   }

   .st-brick .step-circle { 
      border-color: var(--c-brick); 
      color: var(--c-brick); 
   }
   .st-brick:hover .step-circle { 
      background: var(--c-brick); 
      color: white; 
      transform: scale(1.1); 
   }

   .st-green .step-circle { 
      border-color: var(--c-green); 
      color: var(--c-green); 
   }
   .st-green:hover .step-circle { 
      background: var(--c-green); 
      color: white; 
      transform: scale(1.1); 
   }

   .step-content {
      background: white;
      padding: 15px;
      border-radius: 12px;
      border-top: 4px solid #ccc;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      font-size: 0.85rem;
      transition: 0.3s;
      min-height: 180px;
      display: flex; 
      flex-direction: column; 
      justify-content: space-between;
   }

   .st-brick .step-content { border-top-color: var(--c-brick); }
   .st-green .step-content { border-top-color: var(--c-green); }

   .step-item:hover .step-content { 
      transform: translateY(-5px); 
      box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
   }
   
   .tl-img {
      height: 40px; 
      width: auto; 
      object-fit: contain; 
      margin-top: 10px;
   }

   @media (max-width: 992px) {
      .stepper-wrapper { flex-direction: column; }
      .stepper-wrapper::before { 
         width: 4px; 
         height: 100%; 
         left: 23px; 
         top: 0; 
      }
      .step-item { 
         width: 100%; 
         display: flex; 
         text-align: left; 
         margin-bottom: 20px; 
         align-items: flex-start; 
      }
      .step-circle { 
         margin: 0 20px 0 0; 
         flex-shrink: 0; 
      }
      .step-content { 
         width: 100%; 
         min-height: auto; 
      }
   }
   .stepper-wrapper p , .h-step.pos-top p , .h-step.pos-bottom p {
font-size: unset;
  line-height: 20px;
   }