@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz@0,17..18;1,17..18&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

 ::-webkit-scrollbar {
     width: 4px;
     height: 4px;
     border-radius: var(--roundness);
 }

 ::-webkit-scrollbar-track {
     background: var(--color-light);
     border-radius: var(--roundness);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--color-brand);
     border-radius: var(--roundness);

 }

 :root {

     --global-width: 85%;
     --global-width-blog: 55%;
     --global-width-console: 92%;
     --global-max-width: 1950px;
     --global-pop-up-width: 450px;
     --scale-down-effect: 0.96;


     --dim-separator-gap: 92px;

     --color-bg: #fafffc;
     --color-bg: #f3f3f3;

     --color-black: #000814;
     --color-black-stroke: #001D3D;
     --color-black-light: #333333cc;


     --color-white: #fff;
     --color-brand-light: #f0fdf4;
     --color-brand: #198754;
     --color-brand-dark: #0f5132;
     --color-yellow: #FFC300;
     --color-yellow-light: rgb(241, 155, 34, 0.1);
     --color-yellow-dark: #e49424;
     --color-gray: #6b6b6b;
     --color-green: #109d58;
     --color-green-light: rgba(141, 255, 165, 0.4);
     --color-link: #1d96ff;
     --color-link-dark: #0059a7;
     --color-blue: #1d96ff;

     --color-linkedIn: #0A66C2;
     --color-linkedIn-dark: #014488;

     --color-lightgray: #fafafa;
     --color-red-light: rgb(247, 51, 68, 0.1);
     --color-red: #f73344;
     --color-red-dark: #85000b;
     --color-stroke: #e5e7eb;
     --color-hover: #e0e0e099;

     --color-pink: #E0889E;


     --only-color-design-body: #eeeeee;


     --color-whatsapp-green: #14b850;
     --color-whatsapp-green-stroke: #0c7e36;

     --color-dark-primary: #1B1C1D;
     --color-dark-secondary: #0E0F0F;
     --color-dark-stroke: #010101;
     --color-dark-lightgray: #979797;



     --font-large-extra: 48px;
     --font-large: 24px;
     --font-medium: 18px;
     --font-small: 14px;

     --dim-2px: 2px;
     --dim-4px: 4px;
     --dim-6px: 6px;
     --dim-8px: 8px;
     --dim-10px: 10px;
     --dim-12px: 12px;
     --dim-16px: 16px;
     --dim-20px: 20px;
     --dim-24px: 24px;
     --dim-32px: 32px;
     --dim-40px: 40px;
     --dim-48px: 48px;
     --dim-64px: 64px;
     --dim-92px: 92px;
     --dim-nav-size: 60px;
     --roundness: 16px;
     --roundness-8px: 8px;
     --roundness-full: 200px;

     --button-height: 40px;


 }


 html {
     scroll-behavior: smooth;
     background-color: var(--color-bg);
 }

 body {
     margin: 0px;
     padding: 0px;
     font-family: "Urbanist", "Work Sans", "Google Sans", sans-serif;

 }

 * {
     margin: 0;
     padding: 0;

     transition: 0.3s all !important;
     font-family: "Urbanist", "Work Sans", "Google Sans", sans-serif;
     letter-spacing: 0.2px;
     scroll-behavior: smooth;
     color: var(--color-black);
     font-size: var(--font-medium);

     font-optical-sizing: auto;
     font-weight: 600;
     font-style: normal;
     font-variation-settings: "GRAD" 0;

 }

 .no-copy {
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
 }



 del {
     color: var(--color-red);
 }

 .no-select {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .no-drag {
     -webkit-user-drag: none !important;
 }

 .unselectable {
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 * {
     -webkit-tap-highlight-color: transparent;
 }

 .btn-ripple {
     position: relative;
     overflow: hidden;
 }

 .btn-ripple:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 5px;
     height: 5px;
     background-color: rgba(29, 29, 29, 0.2);
     opacity: 0;
     border-radius: 100%;
     transform: scale(1, 1) translate(-50%);
     transform-origin: 50% 50%;
 }


 .btn-press {
     position: relative;
     overflow: hidden;
 }

 .btn-press:after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 5px;
     height: 5px;
     background-color: rgba(29, 29, 29, 0.2);
     opacity: 0;
     border-radius: 100%;
     transform: scale(1, 1) translate(-50%);
     transform-origin: 50% 50%;
 }



 @keyframes ripple {
     0% {
         transform: scale(0, 0);
         opacity: 1;
     }

     20% {
         transform: scale(25, 25);
         opacity: 1;
     }

     100% {
         opacity: 0;
         transform: scale(40, 40);
     }
 }

 .btn-ripple:focus:not(:active)::after {
     animation: ripple 1s ease-out;
 }

 .btn-ripple:active {
     transform: scale(0.9) translate(0px, 5px);
     box-shadow: none;
 }

 .btn-ripple:after {
     visibility: hidden;
 }

 .btn-ripple:focus:after {
     visibility: visible;
 }


 .btn-press:focus:not(:active)::after {
     animation: ripple 1s ease-out;
 }

 .btn-press:active {
     transform: scale(0.9) translate(0px, 5px);
     box-shadow: none;
 }

 .btn-press:after {
     visibility: hidden;
 }

 .btn-press:focus:after {
     visibility: visible;
 }

 @keyframes diagonalFlow {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 .ds-tooltip-wrapper {
     position: relative;
     display: inline-block;
 }

 .ds-tooltip-wrapper .tooltip-text {
     visibility: hidden;
     width: max-content;
     max-width: 220px;
     background-color: var(--color-black);
     color: #fff;
     text-align: left;
     padding: var(--dim-8px);
     border-radius: var(--roundness);
     font-size: var(--font-small);
     position: absolute;
     bottom: 125%;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     transition: opacity 0.3s ease;
     white-space: normal;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     z-index: 10;
     margin-bottom: var(--dim-8px);
 }

 .ds-tooltip-wrapper:hover .tooltip-text {
     visibility: visible;
     opacity: 1;
 }

 .ds-tooltip-wrapper .tooltip-text::after {
     content: '';
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -6px;
     border-width: 6px;
     border-style: solid;
     border-color: var(--color-brand) transparent transparent transparent;
 }

 .cfa-white {
     color: var(--color-white) !important;
 }

 .cfa-blue {
     color: var(--color-blue) !important;
 }

 .cfa-brand {
     color: var(--color-brand) !important;
 }

 .cfa-black-light {
     color: var(--color-black-light) !important;
 }

 .cfa-black {
     color: var(--color-black) !important;
 }

 .cfa-red {
     color: var(--color-red) !important;
 }

 .cfa-size-small {
     font-size: 16px;
     width: 16px;
     height: 16px;

 }

 .cfa-size {
     font-size: 24px;
     width: 24px;
     height: 24px;

 }

 .cfa-size-big {
     font-size: 48px;
     width: 48px;
     height: 48px;

 }

 .cfa-4-right {

     margin-inline-end: 4px;
 }

 .cfa-4-left {
     margin-inline-start: 4px;

 }

 .cfa-8-right {

     margin-inline-end: 8px;
 }

 .cfa-8-left {
     margin-inline-start: 8px;

 }

 .animate__delay-0_1s {
     animation-delay: 0.1s;
 }

 .animate__delay-0_2s {
     animation-delay: 0.2s;
 }

 .animate__delay-0_3s {
     animation-delay: 0.3s;
 }

 .animate__delay-0_4s {
     animation-delay: 0.4s;
 }

 .animate__delay-0_5s {
     animation-delay: 0.5s;
 }


 .animate__delay-0_6s {
     animation-delay: 0.6s;
 }

 .animate__delay-0_7s {
     animation-delay: 0.7s;
 }

 .animate__delay-0_8s {
     animation-delay: 0.8s;
 }

 .animate__delay-0_9s {
     animation-delay: 0.9s;
 }


 .animate__delay-1_0s {
     animation-delay: 1.0s;
 }

 .animate__delay-1_1s {
     animation-delay: 1.1s;
 }

 .animate__delay-1_2s {
     animation-delay: 1.2s;
 }

 .animate__delay-1_3s {
     animation-delay: 1.3s;
 }




 /* ===== Timeline Root ===== */
 .c-journey-root {
     display: flex !important;
     justify-content: center !important;
     /* center horizontally */
     align-items: flex-start !important;
     /* top aligned */
     width: 100% !important;
     padding: var(--dim-32px) !important;
     box-sizing: border-box !important; 
 }


 /* ===== Timeline Container ===== */
 .c-journey-data {
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
     max-width: 500px !important;
     /* keeps timeline from getting too wide */
     margin: 0 auto !important;
     /* horizontal center */
     padding: var(--dim-16px) !important;
     box-sizing: border-box !important; 
 }

  .c-journey-startup-container{
    width: 100%;
    padding: var(--dim-16px); 
    box-sizing: border-box; 
 }
  .c-journey-startup-container  > p{
    width: 100%;
    font-size: var(--font-large);
    display: flex;
    font-weight: 900;
 }
  .c-journey-startup-container  > a{
    width: 100%;
    font-size: var(--font-small);
    display: flex; 
    color: var(--color-link);
    cursor: pointer;
    margin-top: var(--dim-16px);
    text-decoration: none; 
 }
 .c-journey-startup-container  > a:hover{
     color: var(--color-link-dark);
 }
  .c-journey-startup-container  > a > i{ 
    margin-right: var(--dim-8px);
    font-size: var(--font-small);
    text-decoration: underline;
 }
 .c-journey-startup-by{
    display: flex; 
    align-items: center; 
 }
 .c-journey-startup-by p{
    display: flex;
    font-size: var(--font-medium);
    margin-right: var(--dim-4px);
    color: var(--color-black-light);

 }
 .c-journey-startup-by img{
    height: 20px;
    width: fit-content;
    display: flex;
    margin-top: var(--dim-4px);

 }

 /* ===== Timeline Content ===== */
 .c-journey-timeline {
     display: flex !important;
     flex-direction: column !important;
     gap: var(--dim-16px) !important; 

 }

 .c-journey-timeline-content {
     display: flex;
     flex-direction: column;
     padding: var(--dim-16px);
     width: 100%;
     /* fill parent */
     border-radius: var(--roundness);
     background-color: var(--color-white);
     border: 1px solid var(--color-stroke);
     box-sizing: border-box;
 }

 .c-journey-timeline-content p {
     font-size: var(--font-medium);
     margin-bottom: var(--dim-16px);
     color: var(--color-black);
 }

 .c-journey-time {
     margin: 0 !important;
     padding: 0 !important;
     font-size: var(--font-small);
     color: var(--color-black-light);
 }

 /* ===== Media ===== */
 .c-journey-media {
     display: flex !important;
     justify-content: flex-start !important;
     align-items: flex-start !important;
     margin-bottom: var(--dim-8px) !important;
 }

 .c-journey-media img,
 .c-journey-media video,
 .c-journey-media audio {
     max-width: 100% !important;
     height: auto !important;
     border-radius: var(--roundness) !important;
     display: block !important; 
 }

 /* ===== Responsive ===== */
 @media (max-width: 800px) {
     .c-journey-data {
         padding: var(--dim-16px) !important;
     }
 }

 @media (max-width: 550px) {
     .c-journey-root {
         padding: 0 !important;
         justify-content: center !important;
         align-items: flex-start !important;
         
     }

     .c-journey-data {
         padding: 0 !important;
         width: 100% !important;
         max-width: 100% !important;
         margin: 0 auto !important;
         align-items: center !important;
         
     }

     .c-journey-timeline {
         gap: var(--dim-4px) !important;
         width: 100% !important;
     }

     .c-journey-timeline-content {
         width: 100% !important;
         padding: var(--dim-16px) !important;
         border-radius: 0px !important;
         box-sizing: border-box !important;
     }

    
 }