/* =========================================================
   DAWN — BFSI / FINTECH INDUSTRY PAGE
========================================================= */

.bfsi-page {
  --bfsi-blue: #245dff;
  --bfsi-cyan: #23b7d8;
  --bfsi-navy: #07162f;
  --bfsi-heading: #14213d;
  --bfsi-text: #5f6d84;
  --bfsi-line: #e1e7f0;

  overflow: hidden;
}

.bfsi-page *,
.bfsi-page *::before,
.bfsi-page *::after {
  box-sizing: border-box;
}

.bfsi-container {
  position: relative;
  z-index: 4;

  width: calc(100% - 96px);
  max-width: 1680px;

  margin: 0 auto;
}

.bfsi-label {
  display: block;

  margin-bottom: 12px;

  color: #245dff;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .15em;
}

.bfsi-label.light {
  color: #96b1ff;
}


/* =========================================================
   HERO
========================================================= */

.bfsi-hero {
  position: relative;

  min-height: 760px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: #06152f;
}

.bfsi-hero-bg {
  position: absolute;
  inset: 0;

  background-image:
    url("../images/bfsi.webp");

  background-size: cover;
  background-position: center;

  transform: scale(1.04);

  animation:
    bfsiHeroMove
    18s ease-in-out
    infinite alternate;
}

@keyframes bfsiHeroMove {

  to {
    transform:
      scale(1.09)
      translate3d(1.2%,-.7%,0);
  }

}

.bfsi-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2,12,31,.99) 0%,
      rgba(4,18,45,.97) 40%,
      rgba(7,29,67,.78) 71%,
      rgba(7,29,67,.42) 100%
    );
}

.bfsi-hero-grid,
.bfsi-int-grid,
.bfsi-ai-grid,
.bfsi-process-grid,
.bfsi-why-grid,
.bfsi-cta-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.1) 1px,
      transparent 1px
    );

  background-size: 52px 52px;
}

.bfsi-hero-grid {
  opacity: .08;
}

.bfsi-orb,
.bfsi-who-orb,
.bfsi-services-orb,
.bfsi-stack-orb,
.bfsi-faq-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(110px);

  pointer-events: none;
}

.bfsi-orb-one {
  width: 490px;
  height: 490px;

  right: 3%;
  top: -170px;

  background: rgba(36,93,255,.34);
}

.bfsi-orb-two {
  width: 300px;
  height: 300px;

  left: 30%;
  bottom: -180px;

  background: rgba(35,183,216,.14);
}

.bfsi-beam,
.bfsi-cta-beam {
  position: absolute;

  width: 720px;
  height: 1px;

  opacity: .38;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(126,166,255,.92),
      transparent
    );
}

.bfsi-beam-one {
  left: -750px;
  top: 30%;

  animation:
    bfsiBeamForward
    6.8s linear infinite;
}

.bfsi-beam-two {
  right: -750px;
  bottom: 23%;

  animation:
    bfsiBeamBackward
    8s linear infinite;
}

@keyframes bfsiBeamForward {
  to {
    left: 110%;
  }
}

@keyframes bfsiBeamBackward {
  to {
    right: 110%;
  }
}

.bfsi-hero-copy {
  max-width: 1090px;

  padding: 130px 0 78px;
}

.bfsi-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: #91adff;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .16em;
}

.bfsi-eyebrow::before {
  content: "";

  width: 40px;
  height: 2px;

  background: #245dff;
}

.bfsi-hero h1 {
  max-width: 1090px;

  margin: 23px 0 0;

  color: #fff;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(58px,5.6vw,89px);

  font-weight: 600;

  line-height: .99;

  letter-spacing: -.057em;
}

.bfsi-hero h1 span {
  display: block;

  color: #8facff;
}

.bfsi-hero-lead {
  max-width: 850px;

  margin: 28px 0 0;

  color: rgba(242,246,253,.9);

  font-size: 17px;
  font-weight: 500;

  line-height: 1.7;
}

.bfsi-hero-support {
  max-width: 850px;

  margin: 12px 0 0;

  color: rgba(220,229,244,.68);

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-hero-signals {
  margin-top: 27px;

  display: flex;
  flex-wrap: wrap;

  gap: 9px;
}

.bfsi-hero-signals > div {
  min-height: 52px;

  padding:
    7px 15px 7px 7px;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius: 999px;

  background:
    rgba(255,255,255,.05);

  backdrop-filter: blur(10px);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}

.bfsi-hero-signals > div:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(136,170,255,.5);

  background:
    rgba(36,93,255,.13);
}

.bfsi-signal-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #9ab5ff;

  background:
    rgba(36,93,255,.17);

  font-size: 13px;
}

.bfsi-hero-signals > div > span:last-child {
  display: flex;
  flex-direction: column;

  gap: 1px;
}

.bfsi-hero-signals small {
  color:
    rgba(150,180,255,.75);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .08em;
}

.bfsi-hero-signals strong {
  color:
    rgba(255,255,255,.78);

  font-size: 10px;
}

.bfsi-hero-actions {
  margin-top: 32px;

  display: flex;
  align-items: center;

  gap: 27px;
}

.bfsi-primary-btn,
.bfsi-cta-btn {
  display: inline-flex;
  align-items: center;

  color: #fff;

  background:
    linear-gradient(
      120deg,
      #245dff,
      #5383ff
    );

  text-decoration: none;

  font-weight: 700;

  border-radius: 999px;

  box-shadow:
    0 18px 50px rgba(36,93,255,.35);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.bfsi-primary-btn {
  min-height: 58px;

  padding:
    7px 7px 7px 22px;

  gap: 18px;

  font-size: 12px;
}

.bfsi-primary-btn i,
.bfsi-cta-btn i {
  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.18);

  font-style: normal;

  transition:
    transform .3s ease;
}

.bfsi-primary-btn i {
  width: 43px;
  height: 43px;
}

.bfsi-primary-btn:hover,
.bfsi-cta-btn:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 26px 65px rgba(36,93,255,.48);
}

.bfsi-primary-btn:hover i,
.bfsi-cta-btn:hover i {
  transform:
    rotate(45deg);
}

.bfsi-secondary-link {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  color:
    rgba(255,255,255,.78);

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    color .25s ease,
    transform .25s ease;
}

.bfsi-secondary-link:hover {
  color: #fff;

  transform:
    translateX(4px);
}


/* =========================================================
   COMMON
========================================================= */

.bfsi-context h2,
.bfsi-section-head h2,
.bfsi-services-head h2,
.bfsi-int-copy h2,
.bfsi-security-head h2,
.bfsi-ai-head h2,
.bfsi-modern-copy h2,
.bfsi-stack-headline h2,
.bfsi-process-head h2,
.bfsi-quality-copy h2,
.bfsi-why-head h2,
.bfsi-faq-head h2 {
  margin: 0;

  font-family:
    Manrope,
    sans-serif;

  font-weight: 600;

  letter-spacing: -.047em;

  line-height: 1.05;
}

.bfsi-dot-bg,
.bfsi-who-pattern,
.bfsi-solutions-pattern,
.bfsi-modern-pattern,
.bfsi-stack-pattern,
.bfsi-quality-pattern,
.bfsi-engage-pattern,
.bfsi-faq-pattern {
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(36,93,255,.065) 1px,
      transparent 1px
    );

  background-size: 29px 29px;
}

.bfsi-context-word,
.bfsi-services-word,
.bfsi-solutions-word,
.bfsi-modern-word,
.bfsi-engage-word {
  position: absolute;

  color:
    rgba(36,93,255,.025);

  font-family:
    Manrope,
    sans-serif;

  font-weight: 800;

  letter-spacing: -.06em;
}


/* =========================================================
   CONTEXT
========================================================= */

.bfsi-context {
  position: relative;

  overflow: hidden;

  padding: 88px 0;

  background: #fff;
}

.bfsi-dot-bg {
  opacity: .35;
}

.bfsi-context-word {
  right: -30px;
  top: -80px;

  font-size:
    clamp(110px,15vw,230px);
}

.bfsi-context-layout {
  display: grid;

  grid-template-columns:
    .8fr 1fr;

  gap: 95px;
}

.bfsi-context h2 {
  color: #14213d;

  font-size:
    clamp(42px,3.8vw,58px);
}

.bfsi-context h2 span {
  display: block;

  color: #245dff;
}

.bfsi-context-copy {
  padding-left: 30px;

  border-left:
    1px solid #e1e7f0;
}

.bfsi-context-copy p {
  margin:
    0 0 13px;

  color: #5f6d84;

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-context-lead {
  color:
    #30405b !important;

  font-size:
    16px !important;

  font-weight: 500;
}

.bfsi-context-flow {
  margin-top: 40px;

  display: grid;

  grid-template-columns:
    1fr 25px
    1fr 25px
    1fr 25px
    1fr 25px
    1.1fr;

  gap: 7px;

  align-items: center;
}

.bfsi-context-flow > div {
  min-height: 98px;

  padding: 16px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border:
    1px solid #e1e7f0;

  border-radius: 12px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 7px 20px rgba(25,45,80,.025);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.bfsi-context-flow > div:hover {
  transform:
    translateY(-5px);

  border-color:
    #b9c8f0;

  box-shadow:
    0 17px 35px rgba(36,93,255,.09);
}

.bfsi-context-flow span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-context-flow strong {
  margin-top: 8px;

  color: #26354f;

  font-family:
    Manrope,
    sans-serif;

  font-size: 13px;
}

.bfsi-context-flow > i {
  color: #9aa7bd;

  text-align: center;

  font-style: normal;
}

.bfsi-flow-result {
  color: #fff !important;

  border-color:
    #245dff !important;

  background:
    linear-gradient(
      135deg,
      #0b2b62,
      #245dff
    ) !important;
}

.bfsi-flow-result span {
  color: #adc3ff;
}

.bfsi-flow-result strong {
  color: #fff;
}


/* =========================================================
   WHO WE SERVE
========================================================= */

.bfsi-who {
  position: relative;

  overflow: hidden;

  padding: 88px 0;

  background:
    linear-gradient(
      180deg,
      #f5f8fc,
      #fff
    );
}

.bfsi-who-pattern {
  opacity: .32;
}

.bfsi-who-orb {
  width: 430px;
  height: 430px;

  right: -210px;
  top: -180px;

  background:
    rgba(36,93,255,.07);
}

.bfsi-section-head {
  max-width: 940px;

  margin-bottom: 36px;
}

.bfsi-section-head h2 {
  color: #14213d;

  font-size:
    clamp(42px,3.8vw,59px);
}

.bfsi-section-head h2 span {
  display: block;

  color: #245dff;
}

.bfsi-section-head > p {
  max-width: 770px;

  margin-top: 16px;

  color: #5f6d84;

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-who-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 13px;
}

.bfsi-who-card {
  position: relative;

  min-height: 220px;

  padding: 21px;

  overflow: hidden;

  border:
    1px solid #e0e6ef;

  border-radius: 15px;

  background: #fff;

  box-shadow:
    0 8px 25px rgba(22,42,80,.025);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.bfsi-who-card::before {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #245dff,
      #23b7d8
    );

  transition:
    right .35s ease;
}

.bfsi-who-card:hover {
  transform:
    translateY(-7px);

  border-color:
    #b9caf5;

  box-shadow:
    0 24px 50px rgba(36,93,255,.10);
}

.bfsi-who-card:hover::before {
  right: 0;
}

.bfsi-who-no {
  position: absolute;

  right: 18px;
  top: 18px;

  color: #9aa5b5;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-who-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #245dff;

  background:
    #eef3ff;

  font-size: 16px;

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease;
}

.bfsi-who-card:hover
.bfsi-who-icon {
  transform:
    rotate(-7deg)
    scale(1.08);

  color: #fff;

  background:
    #245dff;
}

.bfsi-who-card h3 {
  margin:
    25px 0 0;

  color: #192741;

  font-family:
    Manrope,
    sans-serif;

  font-size: 17px;
}

.bfsi-who-card p {
  margin-top: 9px;

  color: #617087;

  font-size: 13px;

  line-height: 1.62;
}


/* =========================================================
   SERVICES
========================================================= */

.bfsi-services {
  position: relative;

  overflow: hidden;

  padding: 92px 0;

  background:
    linear-gradient(
      145deg,
      #06152f,
      #0a2b64
    );
}

.bfsi-services-grid-bg {
  position: absolute;
  inset: 0;

  opacity: .08;

  background-image:
    linear-gradient(
      rgba(255,255,255,.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.1) 1px,
      transparent 1px
    );

  background-size:
    52px 52px;
}

.bfsi-services-orb {
  width: 470px;
  height: 470px;

  right: -190px;
  top: -180px;

  background:
    rgba(36,93,255,.35);
}

.bfsi-services-word {
  right: -20px;
  bottom: -60px;

  color:
    rgba(255,255,255,.025);

  font-size:
    clamp(120px,15vw,230px);
}

.bfsi-services-head {
  display: grid;

  grid-template-columns:
    1fr .75fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 38px;
}

.bfsi-services-head h2 {
  color: #fff;

  font-size:
    clamp(42px,3.8vw,59px);
}

.bfsi-services-head h2 span {
  display: block;

  color: #8facff;
}

.bfsi-services-head
> div:last-child p {
  margin:
    0 0 10px;

  color:
    rgba(221,230,246,.68);

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-services-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 14px;
}

.bfsi-service {
  position: relative;

  padding: 23px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 15px;

  background:
    rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);

  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.bfsi-service::after {
  content: "";

  position: absolute;

  inset:
    auto 24px 0 24px;

  height: 2px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #7ea1ff,
      transparent
    );

  transition:
    opacity .3s ease;
}

.bfsi-service:hover {
  transform:
    translateY(-8px);

  border-color:
    rgba(141,175,255,.42);

  background:
    rgba(255,255,255,.07);

  box-shadow:
    0 25px 55px rgba(0,0,0,.14);
}

.bfsi-service:hover::after {
  opacity: 1;
}

.bfsi-service-top {
  display: flex;

  align-items: center;
  justify-content: space-between;
}

.bfsi-service-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #9db7ff;

  background:
    rgba(36,93,255,.17);

  font-size: 15px;

  transition:
    transform .3s ease,
    background .3s ease;
}

.bfsi-service:hover
.bfsi-service-icon {
  transform:
    translateY(-3px)
    rotate(-5deg);

  background:
    rgba(36,93,255,.3);
}

.bfsi-service-top small {
  color:
    rgba(255,255,255,.3);

  font-size: 8px;
  font-weight: 800;
}

.bfsi-service h3 {
  margin:
    25px 0 0;

  color: #fff;

  font-family:
    Manrope,
    sans-serif;

  font-size: 20px;

  line-height: 1.3;
}

.bfsi-service > p {
  margin-top: 10px;

  color:
    rgba(220,230,246,.68);

  font-size: 13px;

  line-height: 1.66;
}

.bfsi-service ul {
  margin:
    15px 0 0;

  padding: 0;

  list-style: none;
}

.bfsi-service li {
  padding:
    7px 0;

  border-bottom:
    1px solid rgba(255,255,255,.08);

  color:
    rgba(255,255,255,.72);

  font-size: 12px;
}

.bfsi-service-featured {
  border-color:
    rgba(133,169,255,.6);

  background:
    linear-gradient(
      145deg,
      rgba(36,93,255,.42),
      rgba(36,93,255,.11)
    );
}

.bfsi-service-tag {
  position: absolute;

  right: 0;
  top: 0;

  padding:
    8px 10px;

  color: #c3d3ff;

  background:
    rgba(255,255,255,.11);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-card-link {
  margin-top: 18px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: #9cb7ff;

  text-decoration: none;

  font-size: 11px;
  font-weight: 700;

  transition:
    color .25s ease,
    transform .25s ease;
}

.bfsi-card-link:hover {
  color: #fff;

  transform:
    translateX(4px);
}


/* =========================================================
   SOLUTIONS
========================================================= */

.bfsi-solutions {
  position: relative;

  overflow: hidden;

  padding: 90px 0;

  background: #fff;
}

.bfsi-solutions-pattern {
  opacity: .3;
}

.bfsi-solutions-word {
  right: -40px;
  top: -80px;

  font-size:
    clamp(110px,15vw,225px);
}

.bfsi-solution-console {
  display: grid;

  grid-template-columns:
    330px 1fr;

  min-height: 460px;

  overflow: hidden;

  border:
    1px solid #dfe5ee;

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 23px 60px rgba(22,42,80,.07);
}

.bfsi-solution-nav {
  border-right:
    1px solid #e1e7f0;

  background:
    #f7f9fc;
}

.bfsi-solution-tab {
  width: 100%;

  min-height: 71px;

  padding:
    0 19px;

  display: grid;

  grid-template-columns:
    28px 1fr;

  gap: 10px;

  align-items: center;

  border: 0;
  border-bottom:
    1px solid #e1e7f0;

  color: #536078;

  background:
    transparent;

  text-align: left;

  font: inherit;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    color .25s ease,
    background .25s ease,
    padding-left .25s ease;
}

.bfsi-solution-tab:hover {
  padding-left: 24px;

  color: #245dff;

  background:
    #f0f4ff;
}

.bfsi-solution-tab span {
  color: #9ba5b4;

  font-size: 8px;
}

.bfsi-solution-tab.active {
  color: #245dff;

  background:
    #edf3ff;
}

.bfsi-solution-tab.active span {
  color: #245dff;
}

.bfsi-solution-panels {
  position: relative;

  min-height: 460px;
}

.bfsi-solution-panel {
  position: absolute;
  inset: 0;

  padding:
    50px 58px;

  opacity: 0;

  pointer-events: none;

  transform:
    translateX(22px);

  transition:
    opacity .38s ease,
    transform .38s ease;
}

.bfsi-solution-panel.active {
  opacity: 1;

  pointer-events: auto;

  transform:
    translateX(0);
}

.bfsi-panel-kicker {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .12em;
}

.bfsi-solution-panel h3 {
  max-width: 710px;

  margin:
    17px 0 0;

  color: #14213d;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(28px,2.7vw,43px);

  font-weight: 600;

  line-height: 1.1;

  letter-spacing: -.04em;
}

.bfsi-solution-panel > p {
  max-width: 740px;

  margin-top: 15px;

  color: #5f6d84;

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-panel-grid {
  margin-top: 30px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;
}

.bfsi-panel-grid span {
  min-height: 48px;

  padding:
    0 15px;

  display: flex;
  align-items: center;

  border:
    1px solid #e1e6ef;

  border-radius: 8px;

  color: #4d5b72;

  background:
    #f8faff;

  font-size: 12px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.bfsi-panel-grid span:hover {
  transform:
    translateX(5px);

  border-color:
    #aebff0;

  background:
    #f1f5ff;

  box-shadow:
    0 8px 20px rgba(36,93,255,.06);
}


/* =========================================================
   INTEGRATION
========================================================= */

.bfsi-interoperability {
  position: relative;

  overflow: hidden;

  padding: 92px 0;

  background:
    #06152f;
}

.bfsi-int-grid {
  opacity: .075;
}

.bfsi-int-glow,
.bfsi-ai-glow,
.bfsi-process-glow,
.bfsi-why-glow {
  position: absolute;

  width: 470px;
  height: 470px;

  right: -190px;
  top: -180px;

  border-radius: 50%;

  background:
    rgba(36,93,255,.33);

  filter: blur(110px);
}

.bfsi-int-layout {
  display: grid;

  grid-template-columns:
    .72fr 1.28fr;

  gap: 85px;

  align-items: center;
}

.bfsi-int-copy h2 {
  color: #fff;

  font-size:
    clamp(42px,3.7vw,58px);
}

.bfsi-int-copy h2 span {
  display: block;

  color: #8facff;
}

.bfsi-int-copy p {
  margin-top: 14px;

  color:
    rgba(220,230,246,.68);

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-dark-link,
.bfsi-light-link {
  margin-top: 21px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform .25s ease,
    color .25s ease;
}

.bfsi-dark-link {
  color: #97b2ff;
}

.bfsi-light-link {
  color: #245dff;
}

.bfsi-dark-link:hover,
.bfsi-light-link:hover {
  transform:
    translateX(5px);
}

.bfsi-dark-link:hover {
  color: #fff;
}

.bfsi-int-system {
  position: relative;

  min-height: 480px;
}

.bfsi-int-center {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 175px;
  height: 175px;

  transform:
    translate(-50%,-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(255,255,255,.2);

  border-radius: 50%;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #245dff,
      #103d91
    );

  text-align: center;

  box-shadow:
    0 0 60px rgba(36,93,255,.32);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.bfsi-int-system:hover
.bfsi-int-center {
  transform:
    translate(-50%,-50%)
    scale(1.05);

  box-shadow:
    0 0 90px rgba(36,93,255,.48);
}

.bfsi-int-center small {
  color: #bfd0ff;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .13em;
}

.bfsi-int-center strong {
  max-width: 120px;

  margin-top: 7px;

  font-family:
    Manrope,
    sans-serif;

  font-size: 14px;

  line-height: 1.3;
}

.bfsi-int-ring {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);

  border:
    1px solid rgba(133,168,255,.1);

  border-radius: 50%;
}

.bfsi-ring-one {
  width: 320px;
  height: 320px;

  animation:
    bfsiRingPulse
    5s ease-in-out infinite alternate;
}

.bfsi-ring-two {
  width: 445px;
  height: 445px;

  animation:
    bfsiRingPulse
    7s ease-in-out infinite alternate-reverse;
}

@keyframes bfsiRingPulse {

  to {
    opacity: .55;

    transform:
      translate(-50%,-50%)
      scale(1.04);
  }

}

.bfsi-int-node {
  position: absolute;

  min-width: 125px;

  padding: 13px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 11px;

  background:
    rgba(255,255,255,.045);

  backdrop-filter:
    blur(10px);

  animation:
    bfsiNodeFloat
    5s ease-in-out infinite alternate;

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.bfsi-int-node:hover {
  border-color:
    rgba(137,171,255,.55);

  background:
    rgba(36,93,255,.16);

  box-shadow:
    0 16px 35px rgba(0,0,0,.2);
}

@keyframes bfsiNodeFloat {

  to {
    transform:
      translateY(-7px);
  }

}

.bfsi-int-node small {
  display: block;

  color: #83a5ff;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-int-node strong {
  display: block;

  margin-top: 3px;

  color: #fff;

  font-size: 12px;
}

.bfsi-node-1 {
  left: 3%;
  top: 13%;
}

.bfsi-node-2 {
  right: 3%;
  top: 13%;

  animation-delay: .5s;
}

.bfsi-node-3 {
  left: 0;
  top: 49%;

  animation-delay: 1s;
}

.bfsi-node-4 {
  right: 0;
  top: 49%;

  animation-delay: 1.5s;
}

.bfsi-node-5 {
  left: 11%;
  bottom: 7%;

  animation-delay: 2s;
}

.bfsi-node-6 {
  right: 11%;
  bottom: 7%;

  animation-delay: 2.5s;
}


/* =========================================================
   SECURITY
========================================================= */

.bfsi-security {
  position: relative;

  overflow: hidden;

  padding: 88px 0;

  background:
    linear-gradient(
      180deg,
      #f6f8fc,
      #fff
    );
}

.bfsi-security-bg {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(36,93,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(36,93,255,.025) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;
}

.bfsi-security-head {
  max-width: 930px;

  margin-bottom: 35px;
}

.bfsi-security-head h2 {
  color: #14213d;

  font-size:
    clamp(42px,3.8vw,58px);
}

.bfsi-security-head h2 span {
  color: #245dff;
}

.bfsi-security-head p {
  max-width: 770px;

  margin-top: 16px;

  color: #5f6d84;

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-security-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 13px;
}

.bfsi-security-card {
  position: relative;

  min-height: 215px;

  padding: 21px;

  overflow: hidden;

  border:
    1px solid #e0e6ef;

  border-radius: 15px;

  background: #fff;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.bfsi-security-card::before {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  right: -45px;
  top: -45px;

  border-radius: 50%;

  background:
    rgba(36,93,255,.06);

  transition:
    transform .35s ease,
    background .35s ease;
}

.bfsi-security-card:hover {
  transform:
    translateY(-6px);

  border-color:
    #bdcaf0;

  box-shadow:
    0 23px 48px rgba(36,93,255,.09);
}

.bfsi-security-card:hover::before {
  transform:
    scale(1.5);

  background:
    rgba(36,93,255,.1);
}

.bfsi-security-card > span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-security-card h3 {
  margin:
    27px 0 0;

  color: #18263f;

  font-family:
    Manrope,
    sans-serif;

  font-size: 18px;
}

.bfsi-security-card p {
  margin-top: 8px;

  color: #617087;

  font-size: 13px;

  line-height: 1.62;
}

.bfsi-security-card small {
  display: block;

  margin-top: 18px;

  padding-top: 11px;

  border-top:
    1px solid #e6eaf1;

  color: #245dff;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .08em;
}

.bfsi-compliance-note {
  margin-top: 27px;

  padding:
    22px 24px;

  display: grid;

  grid-template-columns:
    230px 1fr;

  gap: 30px;

  border:
    1px solid #d9e3f4;

  border-radius: 14px;

  background:
    #f5f8ff;
}

.bfsi-compliance-note > span {
  color: #245dff;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-compliance-note p {
  margin: 0;

  color: #59677e;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================================
   AI
========================================================= */

.bfsi-ai {
  position: relative;

  overflow: hidden;

  padding: 92px 0;

  background:
    linear-gradient(
      145deg,
      #07162f,
      #0d2d65
    );
}

.bfsi-ai-grid {
  opacity: .075;
}

.bfsi-ai-head {
  max-width: 980px;
}

.bfsi-ai-head h2 {
  color: #fff;

  font-size:
    clamp(42px,3.8vw,59px);
}

.bfsi-ai-head h2 span {
  color: #8facff;
}

.bfsi-ai-head p {
  max-width: 780px;

  margin-top: 16px;

  color:
    rgba(220,230,246,.68);

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-ai-grid-cards {
  margin-top: 38px;

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 13px;
}

.bfsi-ai-card {
  position: relative;

  min-height: 235px;

  padding: 21px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 14px;

  background:
    rgba(255,255,255,.035);

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.bfsi-ai-card::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  right: -70px;
  bottom: -70px;

  border-radius: 50%;

  background:
    rgba(36,93,255,.1);

  transition:
    transform .4s ease;
}

.bfsi-ai-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(145,177,255,.45);

  background:
    rgba(255,255,255,.06);

  box-shadow:
    0 24px 52px rgba(0,0,0,.15);
}

.bfsi-ai-card:hover::after {
  transform:
    scale(1.7);
}

.bfsi-ai-card > span {
  color: #84a6ff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-ai-card small {
  display: block;

  margin-top: 28px;

  color:
    rgba(144,175,255,.72);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-ai-card h3 {
  margin:
    8px 0 0;

  color: #fff;

  font-family:
    Manrope,
    sans-serif;

  font-size: 18px;

  line-height: 1.3;
}

.bfsi-ai-card p {
  margin-top: 9px;

  color:
    rgba(220,230,246,.65);

  font-size: 13px;

  line-height: 1.62;
}

.bfsi-inline-services-dark {
  margin-top: 27px;

  padding:
    17px 20px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap:
    9px 20px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 12px;

  background:
    rgba(255,255,255,.035);
}

.bfsi-inline-services-dark > span {
  margin-right: 7px;

  color: #8ca9ff;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-inline-services-dark a {
  color:
    rgba(255,255,255,.68);

  text-decoration: none;

  font-size: 11px;

  transition:
    color .25s ease,
    transform .25s ease;
}

.bfsi-inline-services-dark a:hover {
  color: #fff;

  transform:
    translateX(3px);
}


/* =========================================================
   MODERNIZATION
========================================================= */

.bfsi-modern {
  position: relative;

  overflow: hidden;

  padding: 90px 0;

  background: #fff;
}

.bfsi-modern-pattern {
  opacity: .3;
}

.bfsi-modern-word {
  right: -30px;
  bottom: -65px;

  font-size:
    clamp(105px,14vw,210px);
}

.bfsi-modern-layout {
  display: grid;

  grid-template-columns:
    .72fr 1.28fr;

  gap: 80px;

  align-items: center;
}

.bfsi-modern-copy h2 {
  color: #14213d;

  font-size:
    clamp(42px,3.7vw,57px);
}

.bfsi-modern-copy h2 span {
  display: block;

  color: #245dff;
}

.bfsi-modern-copy p {
  margin-top: 14px;

  color: #5f6d84;

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-modern-board {
  overflow: hidden;

  border:
    1px solid #dfe5ee;

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 22px 55px rgba(22,42,80,.06);
}

.bfsi-modern-row {
  min-height: 112px;

  padding:
    18px 20px;

  display: grid;

  grid-template-columns:
    38px 260px 1fr;

  gap: 15px;

  align-items: center;

  border-bottom:
    1px solid #e4e9f1;

  transition:
    padding-left .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.bfsi-modern-row:last-child {
  border-bottom: 0;
}

.bfsi-modern-row:hover {
  padding-left: 28px;

  background:
    #f7f9ff;

  box-shadow:
    inset 3px 0 0 #245dff;
}

.bfsi-modern-row > span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-modern-row small {
  color: #245dff;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-modern-row strong {
  display: block;

  margin-top: 4px;

  color: #18263f;

  font-family:
    Manrope,
    sans-serif;

  font-size: 15px;
}

.bfsi-modern-row p {
  margin: 0;

  color: #617087;

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================================
   STACK
========================================================= */

.bfsi-stack {
  position: relative;

  overflow: hidden;

  padding: 88px 0;

  background:
    linear-gradient(
      180deg,
      #f5f8fc,
      #fff
    );
}

.bfsi-stack-pattern {
  opacity: .36;
}

.bfsi-stack-orb {
  width: 430px;
  height: 430px;

  right: -200px;
  top: -180px;

  background:
    rgba(36,93,255,.07);
}

.bfsi-stack-headline {
  max-width: 940px;

  margin-bottom: 34px;
}

.bfsi-stack-headline h2 {
  color: #14213d;

  font-size:
    clamp(42px,3.8vw,58px);
}

.bfsi-stack-headline h2 span {
  display: block;

  color: #245dff;
}

.bfsi-stack-headline p {
  max-width: 750px;

  margin-top: 15px;

  color: #5f6d84;

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-stack-console {
  overflow: hidden;

  border:
    1px solid #dce3ee;

  border-radius: 19px;

  background: #fff;

  box-shadow:
    0 22px 55px rgba(22,42,80,.065);
}

.bfsi-stack-title {
  min-height: 58px;

  padding:
    0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  background:
    linear-gradient(
      120deg,
      #091f49,
      #0b2b61
    );
}

.bfsi-stack-title > div {
  display: flex;
  align-items: center;

  gap: 10px;
}

.bfsi-stack-status {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #76a0ff;

  box-shadow:
    0 0 14px rgba(118,160,255,.95);

  animation:
    bfsiStatusPulse
    2s ease-in-out infinite alternate;
}

@keyframes bfsiStatusPulse {

  to {
    opacity: .45;

    box-shadow:
      0 0 25px rgba(118,160,255,1);
  }

}

.bfsi-stack-title strong {
  color:
    rgba(255,255,255,.82);

  font-size: 9px;

  letter-spacing: .11em;
}

.bfsi-stack-title small {
  color:
    rgba(255,255,255,.43);

  font-size: 7px;

  letter-spacing: .1em;
}

.bfsi-stack-row {
  min-height: 103px;

  padding:
    18px 22px;

  display: grid;

  grid-template-columns:
    minmax(310px,.78fr)
    1.22fr;

  gap: 35px;

  align-items: center;

  border-bottom:
    1px solid #e4e9f1;

  transition:
    background .25s ease,
    opacity .25s ease,
    padding-left .25s ease;
}

.bfsi-stack-row:last-child {
  border-bottom: 0;
}

.bfsi-stack-row:hover {
  padding-left: 28px;

  background:
    #f4f7ff;
}

.bfsi-stack-category {
  display: grid;

  grid-template-columns:
    24px 1fr;

  gap: 11px;

  align-items: center;
}

.bfsi-stack-category > span {
  color: #9ba5b5;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-stack-category strong {
  display: block;

  color: #26354f;

  font-family:
    Manrope,
    sans-serif;

  font-size: 14px;
}

.bfsi-stack-category small {
  display: block;

  margin-top: 4px;

  color: #8994a6;

  font-size: 10px;
}

.bfsi-tech-list {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.bfsi-tech-list span {
  padding:
    8px 10px;

  border:
    1px solid #dde4ee;

  border-radius: 7px;

  color: #5d6a80;

  background:
    #f8f9fc;

  font-size: 10px;

  white-space: nowrap;

  transition:
    transform .25s ease,
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.bfsi-tech-list span:hover {
  transform:
    translateY(-3px);

  color: #245dff;

  border-color:
    #afc1f7;

  background: #fff;

  box-shadow:
    0 8px 18px rgba(36,93,255,.08);
}


/* =========================================================
   PROCESS
========================================================= */

.bfsi-process {
  position: relative;

  overflow: hidden;

  padding: 90px 0;

  background:
    linear-gradient(
      145deg,
      #07162f,
      #0d2c64
    );
}

.bfsi-process-grid {
  opacity: .075;
}

.bfsi-process-head {
  max-width: 920px;
}

.bfsi-process-head h2 {
  color: #fff;

  font-size:
    clamp(42px,3.8vw,58px);
}

.bfsi-process-head h2 span {
  color: #8facff;
}

.bfsi-process-track {
  margin-top: 38px;

  display: grid;

  grid-template-columns:
    1fr 28px
    1fr 28px
    1fr 28px
    1fr 28px
    1fr;

  gap: 8px;

  align-items: center;
}

.bfsi-process-card {
  min-height: 215px;

  padding: 20px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 14px;

  background:
    rgba(255,255,255,.035);

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.bfsi-process-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(139,172,255,.5);

  background:
    rgba(255,255,255,.065);

  box-shadow:
    0 22px 45px rgba(0,0,0,.14);
}

.bfsi-process-card > span {
  color: #85a5ff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-process-card small {
  display: block;

  margin-top: 30px;

  color:
    rgba(141,172,255,.72);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-process-card h3 {
  margin:
    7px 0 0;

  color: #fff;

  font-family:
    Manrope,
    sans-serif;

  font-size: 16px;
}

.bfsi-process-card p {
  margin-top: 8px;

  color:
    rgba(220,230,246,.65);

  font-size: 12px;

  line-height: 1.62;
}

.bfsi-process-track > i {
  color: #8aa9ff;

  text-align: center;

  font-style: normal;
}


/* =========================================================
   QUALITY
========================================================= */

.bfsi-quality {
  position: relative;

  overflow: hidden;

  padding: 88px 0;

  background: #fff;
}

.bfsi-quality-pattern {
  opacity: .3;
}

.bfsi-quality-layout {
  display: grid;

  grid-template-columns:
    .72fr 1.28fr;

  gap: 80px;

  align-items: start;
}

.bfsi-quality-copy h2 {
  color: #14213d;

  font-size:
    clamp(42px,3.7vw,57px);
}

.bfsi-quality-copy h2 span {
  display: block;

  color: #245dff;
}

.bfsi-quality-copy p {
  margin-top: 13px;

  color: #5f6d84;

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-quality-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  border-top:
    1px solid #e0e6ef;

  border-left:
    1px solid #e0e6ef;
}

.bfsi-quality-card {
  min-height: 145px;

  padding: 19px;

  border-right:
    1px solid #e0e6ef;

  border-bottom:
    1px solid #e0e6ef;

  background:
    rgba(255,255,255,.8);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.bfsi-quality-card:hover {
  position: relative;

  z-index: 2;

  transform:
    translateY(-4px);

  background:
    #f5f8ff;

  box-shadow:
    0 16px 35px rgba(36,93,255,.08);
}

.bfsi-quality-card span {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-quality-card strong {
  display: block;

  margin-top: 27px;

  color: #18263f;

  font-family:
    Manrope,
    sans-serif;

  font-size: 16px;
}

.bfsi-quality-card small {
  display: block;

  margin-top: 7px;

  color: #8c97a8;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .08em;
}


/* =========================================================
   WHY DAWN
========================================================= */

.bfsi-why {
  position: relative;

  overflow: hidden;

  padding: 90px 0;

  background: #06152f;
}

.bfsi-why-grid {
  opacity: .07;
}

.bfsi-why-head {
  max-width: 1000px;

  margin-bottom: 37px;
}

.bfsi-why-head h2 {
  color: #fff;

  font-size:
    clamp(42px,3.8vw,59px);
}

.bfsi-why-head h2 span {
  color: #8facff;
}

.bfsi-why-layout {
  display: grid;

  grid-template-columns:
    .68fr 1.32fr;

  gap: 75px;
}

.bfsi-why-copy p {
  margin:
    0 0 14px;

  color:
    rgba(220,230,246,.68);

  font-size: 14px;

  line-height: 1.72;
}

.bfsi-inline-link {
  margin-top: 19px;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: #8dabff;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform .25s ease,
    color .25s ease;
}

.bfsi-inline-link:hover {
  transform:
    translateX(5px);

  color: #fff;
}

.bfsi-why-cards {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  border-top:
    1px solid rgba(255,255,255,.11);

  border-left:
    1px solid rgba(255,255,255,.11);
}

.bfsi-why-card {
  min-height: 185px;

  padding: 21px;

  border-right:
    1px solid rgba(255,255,255,.11);

  border-bottom:
    1px solid rgba(255,255,255,.11);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.bfsi-why-card:hover {
  position: relative;

  z-index: 2;

  transform:
    translateY(-5px);

  background:
    rgba(255,255,255,.06);

  box-shadow:
    0 20px 42px rgba(0,0,0,.16);
}

.bfsi-why-card > span {
  color: #87a7ff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-why-card h3 {
  margin:
    26px 0 0;

  color: #fff;

  font-family:
    Manrope,
    sans-serif;

  font-size: 17px;
}

.bfsi-why-card p {
  margin-top: 8px;

  color:
    rgba(220,230,246,.64);

  font-size: 13px;

  line-height: 1.62;
}


/* =========================================================
   ENGAGEMENT
========================================================= */

.bfsi-engagement {
  position: relative;

  overflow: hidden;

  padding: 90px 0;

  background:
    linear-gradient(
      180deg,
      #f6f8fc,
      #fff
    );
}

.bfsi-engage-pattern {
  opacity: .33;
}

.bfsi-engage-word {
  right: -20px;
  bottom: -70px;

  font-size:
    clamp(120px,16vw,235px);
}

.bfsi-engagement-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 15px;
}

.bfsi-engagement-card {
  position: relative;

  min-height: 405px;

  padding: 23px;

  border:
    1px solid #dfe5ee;

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 18px 45px rgba(22,42,80,.045);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.bfsi-engagement-card:hover {
  transform:
    translateY(-7px);

  border-color:
    #bdcaf0;

  box-shadow:
    0 28px 60px rgba(36,93,255,.10);
}

.bfsi-engagement-card
> span:first-child {
  color: #245dff;

  font-size: 8px;
  font-weight: 800;
}

.bfsi-engagement-card > small {
  display: block;

  margin-top: 25px;

  color: #929cac;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .1em;
}

.bfsi-engagement-card h3 {
  margin:
    8px 0 0;

  color: #18263f;

  font-family:
    Manrope,
    sans-serif;

  font-size: 22px;

  line-height: 1.25;
}

.bfsi-engagement-card > p {
  margin-top: 12px;

  color: #617087;

  font-size: 13px;

  line-height: 1.65;
}

.bfsi-engagement-card ul {
  margin:
    19px 0 60px;

  padding: 0;

  list-style: none;
}

.bfsi-engagement-card li {
  position: relative;

  padding:
    8px 0 8px 15px;

  border-bottom:
    1px solid #edf0f4;

  color: #536078;

  font-size: 12px;
}

.bfsi-engagement-card
li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 14px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #245dff;
}

.bfsi-engagement-card > a {
  position: absolute;

  left: 23px;
  right: 23px;
  bottom: 21px;

  min-height: 47px;

  padding:
    0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #245dff;

  border:
    1px solid #cfdbf4;

  border-radius: 999px;

  background:
    #f7f9ff;

  text-decoration: none;

  font-size: 11px;
  font-weight: 700;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.bfsi-engagement-card > a:hover {
  color: #fff;

  border-color:
    #245dff;

  background:
    #245dff;
}

.bfsi-engagement-card > a i {
  font-style: normal;

  transition:
    transform .25s ease;
}

.bfsi-engagement-card > a:hover i {
  transform:
    rotate(45deg);
}

.bfsi-engagement-featured {
  border-color:
    #245dff;

  box-shadow:
    0 24px 62px rgba(36,93,255,.11);
}

.bfsi-engagement-tag {
  position: absolute;

  right: 0;
  top: 0;

  padding:
    8px 10px;

  color:
    #fff !important;

  background:
    #245dff;

  font-size:
    7px !important;

  font-weight: 800;

  letter-spacing: .1em;
}


/* =========================================================
   CTA
========================================================= */

.bfsi-cta {
  position: relative;

  width: 100vw;

  margin-left:
    calc(50% - 50vw);

  min-height: 300px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: #06152f;
}

.bfsi-cta-bg {
  position: absolute;

  inset: -60% -15%;

  background:
    radial-gradient(
      ellipse at 12% 45%,
      rgba(36,93,255,.58),
      transparent 31%
    ),
    radial-gradient(
      ellipse at 58% 20%,
      rgba(35,183,216,.20),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 92% 67%,
      rgba(36,93,255,.3),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #06132b,
      #0a285b 48%,
      #071831
    );

  animation:
    bfsiCtaMove
    8s ease-in-out infinite alternate;
}

@keyframes bfsiCtaMove {

  to {
    transform:
      scale(1.08)
      translate3d(3%,2%,0);
  }

}

.bfsi-cta-grid {
  opacity: .1;
}

.bfsi-cta-ring {
  position: absolute;

  border:
    1px solid rgba(144,177,255,.12);

  border-radius: 50%;

  animation:
    bfsiRing
    22s linear infinite;
}

@keyframes bfsiRing {

  to {
    transform:
      rotate(360deg);
  }

}

.bfsi-cta-ring-one {
  width: 420px;
  height: 420px;

  right: 5%;
  top: -225px;
}

.bfsi-cta-ring-two {
  width: 300px;
  height: 300px;

  right: 8%;
  top: -160px;

  animation-direction:
    reverse;
}

.bfsi-cta-ring-three {
  width: 180px;
  height: 180px;

  right: 11%;
  top: -95px;
}

.bfsi-cta-beam-one {
  left: -700px;
  top: 34%;

  animation:
    bfsiBeamForward
    6s linear infinite;
}

.bfsi-cta-beam-two {
  right: -700px;
  bottom: 22%;

  animation:
    bfsiBeamBackward
    7.5s linear infinite;
}

.bfsi-cta-inner {
  position: relative;

  z-index: 5;

  width:
    calc(100% - 96px);

  max-width: 1680px;

  margin: 0 auto;

  padding:
    55px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 70px;
}

.bfsi-cta-copy {
  max-width: 930px;
}

.bfsi-cta-copy > span {
  color: #8dabff;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .14em;
}

.bfsi-cta-copy h2 {
  margin:
    9px 0 0;

  color: #fff;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(36px,3.3vw,51px);

  font-weight: 500;

  line-height: 1.07;

  letter-spacing: -.043em;
}

.bfsi-cta-copy h2 strong {
  color: #91adff;

  font-weight: 500;
}

.bfsi-cta-copy p {
  max-width: 720px;

  margin-top: 12px;

  color:
    rgba(221,230,245,.68);

  font-size: 13px;

  line-height: 1.65;
}

.bfsi-cta-btn {
  min-width: 270px;

  min-height: 59px;

  padding:
    7px 7px 7px 21px;

  justify-content:
    space-between;

  gap: 20px;

  font-size: 11px;
}

.bfsi-cta-btn i {
  width: 43px;
  height: 43px;
}


/* =========================================================
   FAQ
========================================================= */

.bfsi-faq {
  position: relative;

  overflow: hidden;

  padding:
    86px 0 94px;

  background:
    linear-gradient(
      180deg,
      #f8faff,
      #fff
    );
}

.bfsi-faq-pattern {
  opacity: .27;
}

.bfsi-faq-orb {
  width: 500px;
  height: 500px;

  left: 50%;
  top: -380px;

  transform:
    translateX(-50%);

  background:
    rgba(36,93,255,.08);
}

.bfsi-faq-head {
  max-width: 850px;

  margin:
    0 auto 35px;

  text-align: center;
}

.bfsi-faq-head h2 {
  color: #14213d;

  font-size:
    clamp(38px,3.3vw,51px);
}

.bfsi-faq-head h2 span {
  color: #245dff;
}

.bfsi-faq-head > p {
  max-width: 760px;

  margin:
    14px auto 0;

  color: #617087;

  font-size: 14px;

  line-height: 1.7;
}

.bfsi-faq-list {
  max-width: 1000px;

  margin: auto;

  overflow: hidden;

  border:
    1px solid #e0e6ef;

  border-radius: 17px;

  background: #fff;

  box-shadow:
    0 20px 52px rgba(22,42,80,.055);
}

.bfsi-faq-item {
  border-bottom:
    1px solid #e5eaf1;

  transition:
    background .3s ease,
    box-shadow .3s ease;
}

.bfsi-faq-item:last-child {
  border-bottom: 0;
}

.bfsi-faq-item:hover {
  background:
    #f8faff;
}

.bfsi-faq-item summary {
  min-height: 78px;

  padding:
    17px 20px;

  display: grid;

  grid-template-columns:
    35px 1fr 34px;

  gap: 13px;

  align-items: center;

  list-style: none;

  cursor: pointer;
}

.bfsi-faq-item summary::-webkit-details-marker {
  display: none;
}

.bfsi-faq-item summary > span {
  color: #98a3b4;

  font-size: 9px;
  font-weight: 800;
}

.bfsi-faq-item summary strong {
  color: #18253f;

  font-family:
    Manrope,
    sans-serif;

  font-size: 15px;
  font-weight: 600;

  line-height: 1.45;
}

.bfsi-faq-item summary i {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border:
    1px solid #dfe5ee;

  border-radius: 50%;

  color: #245dff;

  background: #fff;

  font-style: normal;

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease;
}

.bfsi-faq-item[open] {
  background:
    linear-gradient(
      90deg,
      #f3f6ff,
      #fff
    );
}

.bfsi-faq-item[open]
summary i {
  color: #fff;

  background: #245dff;

  transform:
    rotate(45deg);
}

.bfsi-faq-answer {
  overflow: hidden;
}

.bfsi-faq-answer p {
  max-width: 850px;

  margin:
    0 58px 26px 68px;

  color: #5e6d84;

  font-size: 14px;

  line-height: 1.75;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(28px)
    scale(.992);

  filter:
    blur(3px);

  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.2,.7,.2,1),
    filter .72s ease;
}

.reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .bfsi-context-layout,
  .bfsi-services-head,
  .bfsi-int-layout,
  .bfsi-modern-layout,
  .bfsi-quality-layout,
  .bfsi-why-layout {
    grid-template-columns:
      1fr;

    gap: 35px;
  }

  .bfsi-context-copy {
    padding:
      24px 0 0;

    border-left: 0;

    border-top:
      1px solid #e1e7f0;
  }

  .bfsi-who-grid,
  .bfsi-security-grid,
  .bfsi-ai-grid-cards {
    grid-template-columns:
      1fr 1fr;
  }

  .bfsi-services-grid,
  .bfsi-engagement-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .bfsi-context-flow {
    grid-template-columns:
      1fr 22px
      1fr 22px
      1fr;
  }

  .bfsi-solution-console {
    grid-template-columns:
      270px 1fr;
  }

  .bfsi-stack-row {
    grid-template-columns:
      1fr;

    gap: 17px;
  }

  .bfsi-process-track {
    grid-template-columns:
      1fr 24px
      1fr 24px
      1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .bfsi-container,
  .bfsi-cta-inner {
    width:
      calc(100% - 36px);
  }

  .bfsi-hero {
    min-height: auto;
  }

  .bfsi-hero-copy {
    padding:
      105px 0 58px;
  }

  .bfsi-hero h1 {
    font-size:
      clamp(43px,12.5vw,58px);
  }

  .bfsi-hero-lead {
    font-size: 15px;
  }

  .bfsi-hero-support {
    font-size: 13px;
  }

  .bfsi-hero-actions {
    flex-direction: column;

    align-items: flex-start;
  }

  .bfsi-primary-btn {
    width: 100%;

    justify-content:
      space-between;
  }

  .bfsi-context,
  .bfsi-who,
  .bfsi-services,
  .bfsi-solutions,
  .bfsi-interoperability,
  .bfsi-security,
  .bfsi-ai,
  .bfsi-modern,
  .bfsi-stack,
  .bfsi-process,
  .bfsi-quality,
  .bfsi-why,
  .bfsi-engagement,
  .bfsi-faq {
    padding:
      66px 0;
  }

  .bfsi-who-grid,
  .bfsi-services-grid,
  .bfsi-security-grid,
  .bfsi-ai-grid-cards,
  .bfsi-engagement-grid,
  .bfsi-why-cards,
  .bfsi-quality-grid {
    grid-template-columns:
      1fr;
  }

  .bfsi-context-flow,
  .bfsi-process-track {
    grid-template-columns:
      1fr;
  }

  .bfsi-context-flow > i,
  .bfsi-process-track > i {
    transform:
      rotate(90deg);
  }

  .bfsi-solution-console {
    display: block;

    min-height: auto;
  }

  .bfsi-solution-nav {
    display: flex;

    overflow-x: auto;

    border-right: 0;

    border-bottom:
      1px solid #e1e7f0;
  }

  .bfsi-solution-tab {
    min-width: 185px;

    border-right:
      1px solid #e1e7f0;
  }

  .bfsi-solution-panels {
    min-height: 620px;
  }

  .bfsi-solution-panel {
    padding:
      34px 22px;
  }

  .bfsi-panel-grid {
    grid-template-columns:
      1fr;
  }

  .bfsi-int-system {
    min-height: 430px;

    transform:
      scale(.84);
  }

  .bfsi-compliance-note {
    grid-template-columns:
      1fr;

    gap: 12px;
  }

  .bfsi-modern-row {
    grid-template-columns:
      28px 1fr;
  }

  .bfsi-modern-row p {
    grid-column: 2;
  }

  .bfsi-stack-title {
    min-height: 72px;

    padding:
      14px 17px;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;
  }

  .bfsi-stack-row {
    padding:
      20px 17px;
  }

  .bfsi-inline-services-dark {
    align-items: flex-start;

    flex-direction: column;
  }

  .bfsi-cta {
    min-height: 390px;
  }

  .bfsi-cta-inner {
    padding:
      50px 0;

    flex-direction: column;

    align-items: flex-start;

    gap: 28px;
  }

  .bfsi-cta-btn {
    width: 100%;

    justify-content:
      space-between;
  }

  .bfsi-faq-head {
    text-align: left;

    margin-left: 0;
  }

  .bfsi-faq-head > p {
    margin-left: 0;
  }

  .bfsi-faq-item summary {
    grid-template-columns:
      27px 1fr 31px;

    padding:
      16px 14px;
  }

  .bfsi-faq-item
  summary strong {
    font-size: 14px;
  }

  .bfsi-faq-answer p {
    margin:
      0 42px 22px 45px;

    font-size: 13px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .bfsi-page *,
  .bfsi-page *::before,
  .bfsi-page *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

  .reveal {
    opacity: 1;

    transform: none;

    filter: none;
  }

}