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

  :root{
    --brand: #262B6C;
    --brand-soft: #eef0fa;
    --brand-line: #d8dbf2;
  }

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

  h1, h2, h3, h4, h5, .navbar-brand, .fw-bold{
    font-family: 'pt_sansregular', 'PT Sans', sans-serif !important;
    color: var(--brand);
  }

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

  /* ---------- Navbar ---------- */
  .navbar{
    border-bottom: 1px solid var(--brand-line);
  }
  .navbar-brand span{
    font-weight: 700;
    letter-spacing: .5px;
  }
  .navbar-brand small{
    display:block;
    font-size: 13px;
    font-weight: 400;
    color:#6a6fb0;
  }
  .navbar .nav-link{
    color: var(--brand);
    font-weight: 700;
  }
        .banner-topbar .toptxt, .banner-topbar .toptxt a {
	color: #fff;
	font-weight: 100;
	font-size: 16px;
}
        
      section {
	padding: 20px 0;
}  
    .hero-content1 p{ font-size: 18px !important}
  /* ---------- Hero ---------- */
  .hero{
    background: linear-gradient(180deg, var(--brand-soft) 0%, #ffffff 100%);
    padding: 70px 0 60px;
    border-bottom: 1px solid var(--brand-line);
  }
        .hero-content h2 {
	font-size: 21px;
	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: 21px;
	line-height: 40px;
	font-weight: 400;
	color: #fff;
	text-transform: initial;
	padding-bottom: 54px;
}
  .hero .badge-pill{
    background: var(--brand);
    color:#fff;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
  }
        .feature-card p {
	font-size: 18px;
	color: #262B6C;
	line-height: 1.6;
}
        
  .hero h1{
    font-weight: 700;
    font-size: 2.5rem;
    margin-top: 18px;
  }

        .hero-content1 p {
	font-size: 17px;
	line-height: 29px;
}
        
        h2.section-title {
	font-size: 20px;
	font-weight: 700;
}
     
        b, strong {
	font-weight: 700;
}
        .feature-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 10px;
	color:#262B6C;
}
        .impact-card h3 {
	font-size: 21px;
	font-weight: 700;
}
        
  /* ---------- Section headings ---------- */
  .section-title{
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 8px;
  }
  .section-divider{
    width: 70px;
    height: 4px;
    background: var(--brand);
    border-radius: 4px;
    margin-bottom: 24px;
  }
  section{
    padding: 20px 0;
  }
  .bg-soft{
    background-color: var(--brand-soft);
  }

  /* ---------- Icon bullets ---------- */
  .icon-list{
    list-style: none;
    padding-left: 0;
  }
  .icon-list li{
    display:flex;
    align-items:flex-start;
    gap: 14px;
    padding: 10px 0;
  }
  .icon-list i{
    color: var(--brand);
    font-size: 1.3rem;
    margin-top: 2px;
    flex-shrink: 0;
  }

  /* ---------- Feature / impact cards ---------- */
  .feature-card, .impact-card{
    background:#fff;
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 28px 24px;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .feature-card:hover, .impact-card:hover{
    box-shadow: 0 10px 25px rgba(38,43,108,0.12);
    transform: translateY(-4px);
  }
  .feature-icon{
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--brand-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 18px;
  }
  .feature-icon i{
    font-size: 1.6rem;
    color: var(--brand);
  }
  .feature-card h5, .impact-card h5{
    font-weight: 700;
    margin-bottom: 10px;
  }

  /* ---------- Platform cards ---------- */
  .platform-card{
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 30px;
    height:100%;
    background:#fff;
  }
  .platform-card i{
    font-size: 2.4rem;
    color: var(--brand);
    margin-bottom: 14px;
  }

        .hero-content {
	position: absolute;
	top: 0;
	left: 60px;
	text-align: center;
	right: 58%;
	bottom: 0;
}
        
  /* ---------- Tech chips ---------- */
  .tech-chip{
    display:flex;
    align-items:center;
    gap: 12px;
    background:#fff;
    border: 1px solid var(--brand-line);
    border-radius: 8px;
    padding: 14px 16px;
    height: 100%;
    font-weight: 700;
  }
  .tech-chip i{
    color: var(--brand);
    font-size: 1.3rem;
  }

  /* ---------- Project details ---------- */
  .details-table{
    width:100%;
    border-collapse: collapse;
  }
  .details-table tr{
    border-bottom: 1px solid var(--brand-line);
  }
  .details-table tr:last-child{
    border-bottom: none;
  }
  .details-table td{
    padding: 16px 10px;
    vertical-align: top;
  }
  .details-table td:first-child{
    font-weight: 700;
    width: 220px;
  }
  .details-table i{
    color: var(--brand);
    margin-right: 10px;
  }

  /* ---------- Result / CTA ---------- */
  .result-box{
    border-left: 4px solid var(--brand);
    background: var(--brand-soft);
    padding: 28px;
    border-radius: 6px;
  }
  .cta{
    background: var(--brand);
    color:#fff;
    border-radius: 12px;
    padding: 50px;
  }
  .cta h2{ color:#fff; font-weight:700; }
  .cta p{ color:#dfe1f7; }
  .cta .btn-light{
    color: var(--brand);
    font-weight: 700;
    border-radius: 30px;
    padding: 10px 28px;
  }
  .cta .btn-outline-light{
    border-radius: 30px;
    padding: 10px 28px;
    font-weight: 700;
  }

  footer{
    background: var(--brand);
    color: #dfe1f7;
    padding: 26px 0;
    font-size: 15px;
  }
  footer a{ color:#fff; }
        
         .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;
            }
        }

@media only screen and (min-width: 400px) and (max-width: 440px) {
  header {
    height: 28vh !important;
  }
}

@media (max-width: 665px) {
  .hero-content h1 {
    font-size: 16px;
    line-height: 24px;
    display: block;
    margin-top: 56% !important;
  }
    
    
.hero-content h1 {
	font-size: 16px;
	line-height: 24px;
	display: block;
	margin-top: 56% !important;
}