:root{
    --navy: #cb2d17;
    --navy-dark: #082c4d;
    --green: #fff;
    --green-dark: #cb2d17;
    --text-body: #4a5568;
    --bg-soft: #f4f6f8;
    --border-soft: #e3e7ec;
  }

  body{
    font-family: 'Inter', sans-serif;
    color: var(--text-body);
  }

  h1,h2,h3,h4,h5,.heading-font{
    font-family: 'Poppins', sans-serif;
    color: var(--navy);
    font-weight: 700;
  }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, rgb(0 0 0 / 88%) 10%, rgb(0 0 0 / 55%) 55%, rgba(6, 20, 36, .25) 100%), url(../images/manageitbanner.jpeg) center / cover no-repeat;
  }
  .hero h1{
    color:#fff;
    font-weight: 800;
    font-size: 3rem;
  }
  .hero p{
    color: #dbe4ee;
    font-size: 1.15rem;
  }

  /* ---------- SECTION SPACING ---------- */
  .section{
    padding: 5rem 0;
  }
  .section-soft{
    background: var(--bg-soft);
  }
  .section-navy{
    background: var(--navy);
    color: #dbe4ee;
  }
  .section-navy h2, .section-navy h3, .section-navy h5{
    color: #fff;
  }

  /* ---------- PAIN POINTS LIST ---------- */
  .check-list li{
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .85rem;
    font-size: .97rem;
  }
  .check-list i{
    color: var(--navy);
    margin-top: .2rem;
    font-size: .95rem;
    flex-shrink: 0;
  }

  /* ---------- FORM CARD ---------- */
  .form-card{
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 2.25rem;
    box-shadow: 0 10px 30px rgba(11,63,110,.08);
  }
  .form-card label{
    font-weight: 600;
    font-size: .85rem;
    color: var(--navy);
    margin-bottom: .3rem;
  }
  .form-card .form-control,
  .form-card .form-select{
    border-radius: 6px;
    border: 1px solid #d7dde3;
    padding: .6rem .75rem;
    font-size: .92rem;
  }
  .form-card .form-control:focus,
  .form-card .form-select:focus{
    border-color: var(--navy);
    box-shadow: 0 0 0 .2rem rgba(11,63,110,.12);
  }
  .field-note{
    font-size: .75rem;
    color: #8a94a3;
    margin-bottom: .2rem;
  }
  .btn-cta{
    background: var(--green);
    border: none;
    color: #08321f;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .85rem 1rem;
    border-radius: 6px;
    font-size: .85rem;
    text-transform: uppercase;
    transition: background .2s ease;
  }
  .btn-cta:hover{
    background: var(--green-dark);
    color: #08321f;
  }

.btn:hover {
    color: #fff !important;
}



.btn {
    color: #fff !important;
    background-color: #cb2d17 !important;
    padding: 10px !important;
}

  /* ---------- SERVICES ---------- */
  .service-icon{
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(11,63,110,.08);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .service-item h5{
    font-size: 1.05rem;
    margin-bottom: .5rem;
  }
  .service-item p{
    font-size: .92rem;
  }

  /* ---------- WHY CHOOSE US ---------- */
  .why-img{
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 380px;
  }
  .why-list-item{
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .why-icon{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(91,232,154,.15);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }
  .why-list-item h6{
    color:#fff;
    font-weight: 700;
    margin-bottom: .35rem;
  }
  .why-list-item p{
    color: #fff;
    font-size: .9rem;
    margin: 0;
  }

  /* ---------- FAQ ACCORDION ---------- */
  .accordion-item{
    border: none;
    border-radius: 8px !important;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(11,63,110,.06);
    overflow: hidden;
  }
  .accordion-button{
    font-weight: 700;
    color: var(--navy);
    font-size: 1rem;
    padding: 1.25rem 1.5rem;
  }
  .accordion-button:not(.collapsed){
    background: #fff;
    color: var(--navy);
    box-shadow: none;
  }
  .accordion-button:focus{
    box-shadow: none;
  }
  .accordion-button::after{
    background-image: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f067";
    font-size: .85rem;
    color: var(--navy);
    transition: transform .2s ease;
  }
  
  .accordion-body{
    padding: 0 1.5rem 1.5rem 1.5rem;
    font-size: .92rem;
    color: var(--text-body);
  }

  .section-eyebrow{
    text-align:center;
    max-width: 760px;
    margin: 0 auto;
  }

  .accordion-button:not(.collapsed) {
    color: #cb2d17 !important;
    background-color: #cb2d1724 !important;
}

.accordion-button:focus {
    border-color: unset !important;
    box-shadow: unset !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='red'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;

}

section.section h2.mb-4 {
    font-size: 36px;
    line-height: 46px;
}


@media (max-width: 767px){
  h2 {
    font-size: 26px !important;
}

section.section.section-soft.position-relative.overflow-hidden {}

section.section.section-soft .service-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

}




.services-slider {}

.services-slider svg {
    width: 70px;
    height: 70px;
}

.services-slider p.service-title {
    font-size: 21px;
    line-height: 31px;
    font-weight: 500;
    margin: 10px;
}

.services-slider p.service-para {
    margin-bottom: 0;
}

.services-slider .slide {
    border-radius: 10px;
    border: 1px solid #cb2d17;
}

.services-slider div#track {
}

.services-slider #track{
    display: flex;
    gap: 20px; /* apni requirement ke mutabiq change kar sakte hain */
    transition: transform 0.4s ease;
}

.services-slider .slide{
    flex: 0 0 calc((100% - 60px) / 3);
}