@font-face {
    font-family: Eras-bold;
    src: url(/src/fonts/ErasBold.woff);
}
@font-face {
    font-family: Verdana;
    src: url(/src/fonts/verdana.ttf);
    font-weight: 400; 
}
@font-face {
    font-family: Verdana;
    src: url(/src/fonts/verdana-bold.ttf);
    font-weight: 700; 
}

@font-face {
    font-family: Helvetica;
    src: url(/src/fonts/Helvetica.ttf);
    font-weight: 400; 
}
@font-face {
    font-family: Helvetica;
    src: url(/src/fonts/Helvetica-Bold.ttf);
    font-weight: 700; 
}


:root{
    --theme-blue:#28334d;
    --theme-btn-blue: #3527d4;
    --theme-light-blue:#2ea3f2;
    --theme-green:#3be2ba;
    --primary-font:'Eras-bold';
    --theme-purple:#8930ff;
    --secondary-font:'Verdana', sans-serif;
    --font-helvetica:'Helvetica' , 'sans-serif';
    --font-montserrat:"Montserrat", serif;   
    --font-exo:"Exo 2", serif;                                  
    --white-clr:#fff;
    --bg-clr:#f5f5f5;
    --text-gray:#28334dcc;
  }
  
  body {
      font-family: Inter, sans-serif;
      margin: 0;
  }
  p,a{
      font-family: var(--secondary-font);
  }
  .clr-text-gray{
    color: var(--text-gray);
  }
  .clr-primary{
      color: var(--theme-blue);
  }
  .clr-light-blue{
    color: var(--theme-light-blue);
 }
 .clr-tiffany-blue{
    color: #54c2b5;
 }
 .clr-purple{
    color: var(--theme-purple);
 }
 .clr-purple-2{
    color: #6630c0;
 }
 .clr-btn-blue{
    color: var(--theme-btn-blue)
 }
 .bg-btn-blue{
    background-color: var(--theme-btn-blue)
 }
 .bg-light-blue{
    color: var(--theme-light-blue);
 }
 .clr-dark-gray{
    color: #666666;
 }
  .clr-secondary{
      color: var( --theme-green);
  }
  a.clr-primary:hover{
      color: var( --theme-green);
  }
  a.clr-secondary:hover{
      color: var(--theme-blue);
  }
  a.bg-primary:hover{
      background-color: var( --theme-green);
  }
  a.bg-secondary:hover{
      background-color: var(--theme-blue);
  }
  .bg-primary{
      background-color: var(--theme-blue) !important;
  }
  .bg-clr{
      background-color: var(--bg-clr) !important;
  }
  .bg-secondary{
      background-color: var( --theme-green) !important;
  }
  .bg-light-gray{
    background-color: #f9fafb;
  }
  .font-hel{
    font-family: var(--font-helvetica)  !important;
  }
.font-mont{
    font-family: var(--font-montserrat) !important;
  }
.font-exo{
    font-family: var(--font-exo) !important;
  }
.font-eras{
    font-family: var(--primary-font) !important;
  }
.font-vendr{
    font-family: var(--secondary-font) !important;
  }
.fs-36{
    font-size:2.25rem !important;
}
.fs-32{
    font-size:2rem !important;
}
.fs-24{
    font-size: 22px;
}
.lh-1{
    line-height: 1;
}
.fs-22{
    font-size: 22px;
}
.fs-12{
    font-size: 12px;
}
.fs-14{
    font-size: 14px;
  }
.fs-15{
    font-size: 15px;
  }
.fs-16{
    font-size: 1rem !important;
  }
.fs-17{
    font-size: 17px !important;
}
.fs-18{
    font-size: 18px;
}
.fw-500{
    font-weight: 500;
}

.mt-n5{
    margin-top: -3rem !important;
}

.max-w-200{
    max-width: 200px;
}
.max-w-250{
    max-width: 250px;
}

.hero-heading-desktop {
    color: var(--theme-blue);
    text-align: center;
    letter-spacing: -1px;
    font-family: Inter,sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 120%;
}

.hero-subheading-desktop {
    color: var(--text-gray);
    text-align: center;
    font-family: Inter,sans-serif;
    font-size: 1.05rem;
    line-height: 150%

}
.text-span{
    color: var(--theme-green);
    text-decoration:line-through;
}


.platforms-image {
    background-image: linear-gradient(#f9fafb,#fff);
    border: 1px solid #eaeaea;
    border-radius: 12px;
    flex-flow: column;
    padding-left: 20px;
    padding-right: 20px;
    display: flex
}
.marquee {
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 450px;
    display: flex;
    position: relative;
    overflow: hidden
}
.marquee-cover {
    z-index: 10;
    background-image: linear-gradient(#fff0 70%,#fff),linear-gradient(#fff,#fff0 30%);
    position: absolute;
    inset: 0%
}

.spacer-30 {
    width: 100%;
    height: 30px
}
.spacer-30._15-xsvp {
    flex: none;
    width: 30px
}

.client-logo-description-desktop {
    color: var(--text-gray);
    text-align: center;
    font-family: Inter,sans-serif;
    font-size: .8rem;
    font-weight: 300;
    line-height: 150%
}


.track-v {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee-vertical 20s linear infinite;
    /* manipulate the speed of the marquee by changing "20s" line above*/
}


.flex-vertical {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
}

.flex-vertical.marquee-fix {
    margin-top: 30px
}

img.icon {
    max-width: 65%;
}
.icon-container {
    border: 1px solid #eae8e6;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 15vw;
    display: flex;
    box-shadow: 0 7px 15px 3px #afb1b34d
}
.flex-horizontal-2 {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
}

@keyframes marquee-vertical {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.track-vertical-alt{
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee-vertical-alt 20s linear infinite;
    width: 100%;
    /* manipulate the speed of the marquee by changing "20s" line above*/
}

@keyframes marquee-vertical-alt {
    from { transform: translateY(-50%); }
    to { transform: translateY(0%); }
}


.services-tab-bullet-item {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-content: flex-start;
    align-items: center;
    display: flex
}

.services-tab-bullet-icon {
    background-color: #fff;
    border: 1px solid #f6f6f6;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 6px 8px;
    display: flex
}

.services-tab-bullet-icon:hover {
    border-color: var(--text-gray)
}

.services-tab-bullet-text {
    color: var(--theme-blue);
    font-family: Inter,sans-serif;
    font-size: .8rem;
    font-weight: 600
}


.data-insight-card-row {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-wrap: wrap;

}

.data-insight-card {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    border: 1px solid #eee;
    border-radius: 6px;
    flex-flow: column;
    flex: 1;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    padding: 16px;
    display: flex;
    min-width: 250px;
}

.data-insight-card-icon {
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 4px;
    display: flex
}

.data-insight-card-icon:hover {
    border-color: var(--text-gray)
}


.dic-heading {
    color: var(--theme-blue);
    font-family: Inter,sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}


.cta-section {
    background-color: #fff;
    flex-flow: column;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    padding: 40px;
    display: flex
}
.section-heading {
    color: var(--theme-blue);
    flex-flow: row;
    font-family: Inter,sans-serif;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 2.3rem;
    display: block
}

.cta-text-block {
    z-index: 2;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative
}

.cta-main-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    background-color: #fcfcfc;
    border: 1px solid #dedede;
    border-radius: 12px;
    flex-flow: column;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    padding: 48px;
    display: flex;
    position: relative;
    overflow: hidden
}

.cta-subheading {
    color: var(--faded-brand-blue);
    text-align: center;
    text-transform: uppercase;
    font-family: Inter,sans-serif;
    font-size: .7rem
}

.cta-heading {
    color: var(--brand-dark-blue);
    text-align: center;
    font-family: Inter,sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2rem;
}

.cta-description {
    color: var(--faded-brand-blue);
    text-align: center;
    font-family: Inter,sans-serif;
    font-weight: 400;
}

.image-7 {
    max-width: 90%;
    position: absolute;
    inset: 0;
}

.image-8 {
    align-self: center;
    position: absolute;
    inset: -21% auto auto;
}

.cta-overlay {
    z-index:1; 
    background-image:linear-gradient(#fff0,#fffc 80%,#fff);
    position:absolute;
    inset:0%;
}

.footer-logo{
    max-width: 120px;
    z-index: 9;
}

@media (max-width:768px) {
    .cta-heading{
        font-size: 1.5rem;
    }
    .icon-container{
        height: 30vh;
    }
    .hero-heading-desktop , .section-heading{
        font-size: 1.5rem;
    }
    .fs-22{
        font-size: 16px;
    }
}