/*#app {
      padding: 50px 0;
    }*/
    /*.timeline {
      margin: 50px 0;
      list-style-type: none;
      display: flex;
      padding: 0;
      text-align: center;
    }
    .timeline li {
      transition: all 200ms ease-in;
    }
    .timestamp {
      width: 200px;
      margin-bottom: 20px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }
    .status {
      padding: 0px 40px;
      display: flex;
      justify-content: center;
      border-top: 4px solid #3e70ff;
      position: relative;
      transition: all 200ms ease-in ;
    }
    .status span {
      font-weight: 600;
      padding-top: 20px;
    }
    .status span:before {
      content: '';
      width: 25px;
      height: 25px;
      background-color: #e8eeff;
      border-radius: 25px;
      border: 4px solid #3e70ff;
      position: absolute;
      top: -15px;
      left: 42%;
      transition: all 200ms ease-in;
    }
    .swiper-control {
      text-align: right;
    }
    .swiper-container {
      width: 100%;
      height: 250px;
      overflow: hidden;
    }
    .swiper-slide {
      width: 200px;
      text-align: center;
      font-size: 16px;
    }
    .swiper-slide:nth-child(2n) {
      width: 40%;
    }
    .swiper-slide:nth-child(3n) {
      width: 20%;
    }*/
    
    /* Timeline container */
     /*.timeline {
       position: relative;
       max-width: 900px;
       margin: 50px auto;
     }*/
     
     .timeline-nav::-webkit-scrollbar { 
         -webkit-appearance: none; 
     } 
     .timeline-nav::-webkit-scrollbar:vertical{ 
         width: 10px;
     } 
     .timeline-nav::-webkit-scrollbar:horizontal { 
         height: 10px;
     } 
     .timeline-nav::-webkit-scrollbar-thumb { 
         background-color: rgba(0, 0, 0, .5); 
         border-radius: 10px; 
         border: 2px solid #ffffff;
     } 
     .timeline-nav::-webkit-scrollbar-track { 
         border-radius: 10px; 
         background-color: #ffffff;
     }
     .timeline-nav {
       display: flex;
       justify-content: space-between;
       overflow-x: auto;
       padding: 10px 0;
       /*border-bottom: 2px solid #444;*/
       cursor: pointer;
     }
     .timeline-nav div {
       padding: 10px 20px;
       cursor: pointer;
       /*color: #aaa;*/
       transition: 0.3s;
     }
     .timeline-nav .active {
       color: var(--primary-color1);
       border-bottom: 3px solid var(--primary-color1);
       font-weight: 600;
     }
     .timeline-content {
       position: relative;
       /*height: 400px;*/
       margin-top: 30px;
     }
     .slide {
       display: none;
       animation: fade 0.5s ease-in-out;
     }
     .slide.active {
      display: block;
     }
     .slide img {
       width: 100%;
       max-height: 100%;
       object-fit: cover;
       border-radius: 10px;
     }
     .slide h2 {
      margin: 15px 0 10px;
      text-align: center;
     }
     .slide p {
       /*color: #ccc;*/
       max-width: 700px;
       margin: 0 auto;
       text-align: center;
     }
     @keyframes fade {
       from {opacity: 0;}
       to {opacity: 1;}
     }
     .controls {
        margin-top: 20px;
        text-align: center;
     }
     button {
       padding: 10px 20px;
       border: none;
       background: #00f7ff;
       color: #000;
       cursor: pointer;
       margin: 5px;
       border-radius: 5px;
     }
     button:hover {
      background: #0A1019;
     }
     @media(max-width: 600px) {
       .timeline-content {
        height: auto;
      }
     }
     
     
    .vision-box1 {padding: 20px 10px;}
    .mission-box1 {padding: 20px;}
    .vision-item1,
    .mission-item1 {text-align: center;padding: 0 20px;}
    .mission-item1 {border-right: 1px rgb(123 125 126 / 50%) solid;}
    .vision-item1 h4,
    .mission-item1 h4 {font-size: 18px;line-height: 1.4;margin-bottom: 20px;}
    .vision-item1 p,
    .mission-item1 p {font-size: 13px;line-height: 22px;margin: 0px;}
    .dividers1 {width : 1px;height: auto;border-right: 1px rgb(123 125 126 / 50%) solid;padding: 0;}
    .product-content h6 {font-weight: 300;}
    .product-card2 {border: 1px solid #d2d2d2;margin-left: 2px;}
    .product-card2 .product-img {overflow: hidden;}
    .product-card2 .product-img img {transition: transform 0.3s ease;}
    .product-card2:hover .product-img img {transform: scale(1.1);}
    @media (max-width: 991px) {
        .vision-item1,
        .mission-item1 {border-right: none;border-bottom: 1px solid #ddd;padding: 25px 15px;}
        .mission-item1 {border-bottom: 1px rgb(123 125 126 / 50%) solid;}
        .vision-item1:last-child,
        .mission-item1:last-child {border-bottom: none;}
        .vision-box1 {border: none;}
        .dividers1 {height: inherit;}
        .mission-box1 .mt-5 {margin-top: 0rem!important;border-top: 1px rgb(123 125 126 / 50%) solid;}
        .mission-box1 .mt-3 {margin-top: 0rem!important;}
    } 
    
    /*.timeline{
         padding:80px 0;
         position:relative;
         overflow:hidden;
     }*/
    .mySwiper {
      width: 100%;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    /*.swiper-slide {
      display: flex;
      justify-content: center;
    }*/
    .timeline-item {
      text-align: center;
      position: relative;
    }
    .timeline-item::before {
      content: "";
      position: absolute;
      top: 37px;
      left: -51%;
      width: calc(50% - -26px);
      height: 2px;
      background: #d8d8d8;
      z-index: 0;
    }
    /* Right half of line */
    .timeline-item::after {
      content: "";
      position: absolute;
      top: 37px;
      right: -51%;
      width: calc(50% - 24px);
      height: 2px;
      background: #d8d8d8;
      z-index: 0;
    }
    .icon {
      position: relative;
      z-index: 10;
    }
    .icon img {
      width: 75px;
    }
    .year {
      display: inline-block;
      margin-top: 28px;
      padding: 3px 22px 0px 22px;
      background: #d3d3d3;
      color: #fff;
      border-radius: 30px;
      font-size: 20px;
      font-weight: bold;
      transition: 0.4s;
    }
    .swiper-slide-active .year {
      background: #000;
    }
    .card {
      margin-top: 35px;
      background: #fff;
      padding: 30px;
      border-radius: 15px;
      /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);*/
      position: relative;
      border: 1px solid #eee;
      height: 148px;
      justify-content: center;
    }
    .card::before {
      content: "";
      position: absolute;
      /*top: -118px;*/
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 100px;
      background: #bfbfbf;
      z-index: -111;
    }
    .swiper-slide-active .card {
        box-shadow: 0px 2px 15px rgb(0 0 0 / 30%);
        margin-bottom: 10px;
    }
    .card p {
      line-height: 30px;
      color: #000;
      font-size: 16px;
      margin-bottom: 0px;
    }
    .swiper-button-next,
    .swiper-button-prev {
      color: #000;
    }
    .swiper-pagination {
      margin-top: 30px;
    }
    .steering {
      animation: steering 5s ease-in-out infinite;
    }
    @keyframes steering {
      0% {
        transform: translateX(-10px) rotate(-20deg);
      }
      50% {
        transform: translateX(10px) rotate(20deg);
      }
      100% {
        transform: translateX(-10px) rotate(-20deg);
      }
    }
    /*.mySwiper-new .icon img {
      animation: rotate 4s linear infinite;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }*/
    /*.mySwiper-new .swiper-slide-active .icon img {
        animation: rotate 4s linear infinite;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }*/
    
    .mySwiper-new .swiper-slide-active .icon img {
        animation: rotate 3s linear infinite;
    }
    .mySwiper-new .swiper-slide:not(.swiper-slide-active) .icon img {
        animation: none;
    }
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        70% {
            transform: rotate(360deg); /* 3 sec rotation */
        }
        100% {
            transform: rotate(360deg); /* 2 sec pause */
        }
    }
    @media (min-width: 1280px) and (max-width: 1399px) {
      .timeline-item::before {
        left: -51%;
      }
      .timeline-item::after {
        right: -51%;
      }
    }
    @media (max-width: 991px) {
      .timeline-item {
        width: 300px;
      }
    }
    @media (max-width: 768px) {
      .timeline-line {
        display: none;
      }
      .timeline {
        padding: 50px 0;
      }
      .timeline-item {
        width: 100%;
        padding: 15px;
      }
      .icon img {
        width: 60px;
      }
      .card {
        padding: 25px;
      }
      .year {
        font-size: 18px;
      }
      .timeline-item::before {top: 45px;left: -53%;}
      .timeline-item::after {top: 45px;right: -53%;}
    }