@charset "utf-8";
/* CSS Document */


  @font-face {
    font-family: 'pt_sansregular';
    src: local('PT Sans');
  }

  :root{
    --brand: #262B6C;
    --brand-soft: #EEF0FA;
    --brand-accent: #4F5AC9;
  }

  html, body{
    background-color: #ffffff;
    color: var(--brand);
    font-family: 'pt_sansregular', sans-serif !important;
    font-size: 18px;
    line-height: 1.7;
  }

  h1, h2, h3, h4, h5, h6{
    font-family: 'pt_sansregular', sans-serif !important;
    color: var(--brand);
    font-weight: 700;
  }

  a{
    color: var(--brand);
  }

  .navbar{
    background-color: #ffffff;
    border-bottom: 1px solid var(--brand-soft);
  }

  .navbar-brand{
    font-weight: 700;
    color: var(--brand) !important;
    letter-spacing: .5px;
  }

  .navbar-brand span{
    color: var(--brand-accent);
  }

  /* HERO */
  .hero{
    background: linear-gradient(135deg, var(--brand-soft) 0%, #ffffff 60%);
    padding: 90px 0 70px 0;
    border-bottom: 1px solid #eef0fa;
  }

  .hero .badge-pill{
    background-color: var(--brand-soft);
    color: var(--brand);
    border: 1px solid #d6daf3;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
        .lead {
	font-size: 18px;
	font-weight: 300;
}
        .hero-content {
	position: absolute;
	top: 0%;
	left: 60px;
	text-align: center;
	right: 58%;
	bottom: 0;
}

  .hero h1{
    font-size: 2.6rem;
    margin-top: 20px;
    margin-bottom: 15px;
  }

        a {
	color: #262B6C;
	text-decoration: none !important;
}
  .hero .lead{
    color: #444a86;
    font-size: 20px;
    max-width: 780px;
  }

  .hero-icon-circle{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    box-shadow: 0 10px 25px rgba(38,43,108,0.25);
  }
        .hero-content h2 {
	font-size: 22px;
	line-height: 40px;
	font-weight: 400;
	color: #fff;
	text-transform: initial;
}
        .headvido .hero-content {
	position: relative !important;
	margin-top: 10% !important;
	right: 0 !important;
	left: 0 !important;
	text-transform: uppercase;
}
        .hero-content h2 {
	font-size: 22px;
	line-height: 40px;
	font-weight: 400;
	color: #fff;
	text-transform: initial;
	padding-bottom: 60px;
}

  /* SECTION TITLES */
  .section{
    padding: 70px 0;
  }

  .section-alt{
    background-color: var(--brand-soft);
  }
        b, strong {
	font-weight: 700;
}
        
 .image-slider {
            overflow: hidden;
            width: 100%;
            padding: 20px 0;
          
        }

        .image-track {
            display: flex;
            width: max-content;
            animation: scroll 25s linear infinite;
        }

        .image-item {
            width: 180px;
            height: 360px;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .image-item img {
            width: 180px;
            height: 370px;
            object-fit: cover;
            border-radius: 10px;
        }

        @keyframes scroll {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }

        /* Mobile */
        @media (max-width: 767px) {
            .image-item {
                width: 160px;
                height: 110px;
                margin-right: 15px;
            }

            .image-track {
                animation-duration: 20s;
            }
        }
  .section-eyebrow{
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-accent);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .section-eyebrow i{
    font-size: 16px;
  }

  .section-title{
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 25px;
  }

  /* CHALLENGE LIST */
  .icon-list{
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .icon-list li{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #d6daf3;
  }

  .icon-list li:last-child{
    border-bottom: none;
  }
        .clrfff{ color: #fff;}
  .icon-list i{
    color: #fff;
    background-color: var(--brand);
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 2px;
  }
        .copy-write p {
	margin: 0;
	padding-bottom: 8px;
	color: #fff !important;
}

  /* FEATURE CARDS */
  .feature-card{
    background-color: #ffffff;
    border: 1px solid #e7e9f6;
    border-radius: 14px;
    padding: 32px 26px;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .feature-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(38,43,108,0.12);
    border-color: var(--brand-accent);
  }

  .feature-icon{
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
  }

  .feature-card h5{
    font-size: 20px;
    margin-bottom: 10px;
  }

  .feature-card p{
    font-size: 17px;
    color: #4a4f8a;
    margin-bottom: 0;
  }

  /* WORKFLOW */
  .workflow-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .workflow-step{
    background-color: #ffffff;
    border: 2px solid var(--brand);
    color: var(--brand);
    border-radius: 50px;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }

  .workflow-step i{
    color: var(--brand-accent);
  }
        
        .feature-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 10px;
	color:#262B6C;
}
        .impact-item h3 {
	font-size: 21px;
}

  .workflow-arrow{
    color: var(--brand-accent);
    font-size: 20px;
  }

  /* IMPACT */
  .impact-item{
    display: flex;
    gap: 18px;
    padding: 20px 0;
  }

  .impact-icon{
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }

  .impact-item h5{
    font-size: 19px;
    margin-bottom: 6px;
  }

  .impact-item p{
    color: #4a4f8a;
    margin-bottom: 0;
    font-size: 17px;
  }

  /* PROJECT DETAILS */
  .details-table{
    background-color: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e7e9f6;
  }

  .details-table .row-item{
    display: flex;
    padding: 16px 24px;
    border-bottom: 1px solid #eef0fa;
  }

  .details-table .row-item:last-child{
    border-bottom: none;
  }

.details-table .row-item i {
	color: var(--brand-accent);
	width: 24px;
	margin-top: 4px;
	margin-right: 6px;
}
        ol li, p, ul li {
	font-size: 18px;
	color: #262B6C !important;
}

  .details-table .label{
    font-weight: 700;
    min-width: 190px;
  }

  .details-table .value{
    color: #4a4f8a;
  }

  /* CTA */
.cta-section {
	background-color: #262B6C !important;
	color: #ffffff;
	padding: 70px 0;
	background: #262B6C !important;
}
        b, strong {
	font-weight: 700;
}s
  .cta-section h2{
    color: #ffffff;
  }

  .cta-section p{
    color: #d7d9f4;
    font-size: 19px;
  }

  .cta-tag{
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 6px 0 0;
  }

  .btn-brand{
    background-color: #ffffff;
    color: var(--brand);
    font-weight: 700;
    border-radius: 50px;
    padding: 12px 30px;
    border: none;
  }

  .btn-brand:hover{
    background-color: var(--brand-soft);
    color: var(--brand);
  }


  @media (max-width: 767px){
    .hero h1{ font-size: 1.9rem; }
    .section{ padding: 50px 0; }
    .workflow-step{ font-size: 14px; padding: 10px 16px; }
  }

.btn.btn-brand.mt-3 {
	background: white;
}
.btn.btn-brand.mt-3:hover
{color:#262B6C;}