:root {
   --timeline-line: #94BDDA;
   --timeline-red: #FF4848;
   --timeline-bg: #FEFDF8;
   --timeline-circle-bg: #FFF5F5;
   --timeline-circle-border: #FADEDE;
   --timeline-text: #666666;
   }
   /* ======================================================
   TIMELINE SECTION
   ====================================================== */
   .timeline {
   position: relative;
   width: 100%;
   container-type: inline-size;
   }
   .timeline__container {
   position: relative;
   width: 100%;
   aspect-ratio: 1366 / 634;
   margin-top: 2cqw;
   scale: .9;
   }
   /* ======================================================
   HEADER
   ====================================================== */
   .timeline__header {
   position: absolute;
   top: 4cqw;
   right: 12px;
   z-index: 10;
   }
   .timeline__header img {
   width: 9cqw;
   }
   /* ======================================================
   SVG LINE
   ====================================================== */
   .timeline__svg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   }
   /* ======================================================
   LINE CAP
   ====================================================== */
   .timeline__cap {
   position: absolute;
   left: 0.14%;
   top: 92.3%;
   width: 1.8cqw;
   height: 0.9cqw;
   background: var(--timeline-line);
   border-radius: 0 0 2cqw 2cqw;
   transform: translateX(-50%);
   opacity: 0;
   transition: 0.5s;
   }
   .timeline__cap.is-visible {
   opacity: 1;
   }
   /* ======================================================
   ITEM
   ====================================================== */
   .timeline__item {
   position: absolute;
   width: 19cqw;
   transform: translateX(-50%);
   }
   /* ======================================================
   CIRCLE
   ====================================================== */
   .timeline__circle {
   width: 19cqw;
   height: 19cqw;
   border-radius: 50%;
   background: var(--timeline-circle-bg);
   border: 4px solid var(--timeline-circle-border);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
   }
   .timeline__circle h3 {
   color: var(--timeline-red);
   font-size: 1.95cqw;
   line-height: 1.3;
   font-weight: 700;
   }
   /* ======================================================
   CONTENT
   ====================================================== */
   .timeline__content {
   margin-top: 2.5cqw;
   font-size: 1.05cqw;
   line-height: 1.6;
   text-align: center;
   color: var(--timeline-text);
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
   }
   /* ======================================================
   BADGE
   ====================================================== */
   .timeline__badge {
   position: absolute;
   width: 4.5cqw;
   height: 4.5cqw;
   border-radius: 50%;
   background: var(--timeline-bg);
   border: 0.25cqw solid var(--timeline-line);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--timeline-line);
   font-size: 1.8cqw;
   font-weight: 700;
   z-index: 10;
   opacity: 0;
   transform: scale(0.5);
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   /* ======================================================
   VISIBLE STATE
   ====================================================== */
   .is-visible.timeline__circle,
   .is-visible.timeline__content {
   opacity: 1;
   transform: translateY(0);
   }
   .is-visible.timeline__badge {
   opacity: 1;
   transform: scale(1);
   }
   /* ======================================================
   POSITIONING
   ====================================================== */
   /* ITEM 1 */
   .timeline__item--1 {
   top: 7%;
   left: 12.6%;
   }
   .timeline__item--1 .timeline__badge {
   top: -4%;
   left: -11%;
   }
   /* ITEM 2 */
   .timeline__item--2 {
   top: 23%;
   left: 37.5%;
   }
   .timeline__item--2 .timeline__circle,
   .timeline__item--4 .timeline__circle
   {
   background:transparent;
   }
   .timeline__item--2 .timeline__badge {
   bottom: 0%;
   left: -15%;
   }
   /* ITEM 3 */
   .timeline__item--3 {
   top: 7%;
   left: 62.4%;
   }
   .timeline__item--3 .timeline__badge {
   top: -2%;
   right: -12%;
   }
   /* ITEM 4 */
   .timeline__item--4 {
   top: 23%;
   left: 87.3%;
   }
   .timeline__item--4 .timeline__badge {
   bottom: 0%;
   right: -16%;
   }
   .timeline__item--2 .timeline__content,
   .timeline__item--4 .timeline__content
   {
   margin-bottom: 2.5cqw;
   }
   /* ======================================================
   MOBILE
   ====================================================== */
   @media (max-width: 800px) {
       
       .timeline__container
       {
          scale: 1;
       }
   .timeline {
   padding-top: 60px;
   }
   .timeline__container {
   aspect-ratio: auto;
   }
   .timeline__svg,
   .timeline__cap {
   display: none;
   }
   .timeline__header {
   position: relative;
   top: auto;
   right: auto;
   text-align: center;
   margin-bottom: 40px;
   }
   .timeline__header img {
   width: 180px;
   }
   .timeline__container {
   display: flex;
   flex-direction: column;
   gap: 40px;
   }
   .timeline__item {
   position: relative;
   top: auto !important;
   left: auto !important;
   transform: none;
   width: 100%;
   }
   .timeline__badge {
    display:none;
   }
   .timeline__circle {
   width: 100%;
   height: 100%;
   margin: auto;
   opacity: 1;
   transform: none;
   background:none;
   border:none;
   }
   .timeline__circle h3 {
   font-size: 24px;
   }
   
   .timeline__circle h3 br
   {
       display:none;
   }
   
   .timeline__item--2,
   .timeline__item--4
   {
           display: flex;
    flex-direction: column-reverse;
   }
   
   .timeline__content {
   opacity: 1;
   transform: none;
   margin-top:0px;
   font-size: 15px;
   max-width: 400px;
   margin-inline: auto;
   padding-inline: 15px;
   }
   
   .trust_banner
   {
       height:400px;
   }
   
   }