.solution {
  /* padding: 140px 0; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: sticky;
  /* background-attachment: fixed; */
  top: -20px;
}

.solution:last-child {
  top: 0;
}

.solution.position-sticky {
  top: -20px;
  z-index: 0;
}

.solution+.solution+.solution {
  position: relative;
}

.solution .bg-blue,
.solution .bg-white,
.solution .bg-dark {
  position: relative;
  padding: 140px 0;
  background-color: unset !important;
}

.solution > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.solution .bg-dark::before {
  content: "";
  position: absolute;
  background-color: var(--agcblack);
  opacity: 0.95;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.solution .bg-white::before {
  position: absolute;
  background-color: var(--white);
  opacity: 0.8;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.solution .bg-blue::before {
  background-color: var(--blue);
  opacity: 0.9;
}

.solution .bg-white .btn {
  background-color: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.solution .bg-white .btn::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNTg2ODcgMi45NTQ1MkwwLjAwMTE3NTQ1IDIuOTU0NTJMMC4wMDExNzU4NyAwLjk1NDgxOEgxMi4wMDA4TDEyLjAwMDggMS45NTQ2N0wxMi4wMDA4IDEyLjk1NDRMMTAuMDAxMSAxMi45NTQ0TDEwLjAwMTEgNC4zNjg3M0wxLjYxNzUxIDEyLjc1MjNMMC4yMDMyOTkgMTEuMzM4MUw4LjU4Njg3IDIuOTU0NTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
}

.solution .bg-white .btn[style="background-color:#2684FF;"]:hover, .solution .bg-white .btn:hover {
  background-color: var(--white) !important;
  color: var(--blue) !important;
}

.solution .bg-white .btn[style="background-color:#2684FF;"]:hover::before, .solution .bg-white .btn:hover::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik05LjQ5NzAyIDIuOTU0NTJMMC45MTEzMzIgMi45NTQ1MkwwLjkxMTMzMiAwLjk1NDgxOEgxMi45MTA5TDEyLjkxMDkgMS45NTQ2N0wxMi45MTA5IDEyLjk1NDRMMTAuOTExMiAxMi45NTQ0TDEwLjkxMTIgNC4zNjg3M0wyLjUyNzY3IDEyLjc1MjNMMS4xMTM0NiAxMS4zMzgxTDkuNDk3MDIgMi45NTQ1MloiIGZpbGw9IiMyN2FhZTEiLz4NCjwvc3ZnPg==");
}

/* .solution .bg-dark .btn:hover {
  background-color: var(--text) !important;
} */

.solution .bg-dark .btn:hover {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}

.solution .bg-dark .btn:hover:before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNTg2ODcgMi45NTQ1MkwwLjAwMTE3NTQ1IDIuOTU0NTJMMC4wMDExNzU4NyAwLjk1NDgxOEgxMi4wMDA4TDEyLjAwMDggMS45NTQ2N0wxMi4wMDA4IDEyLjk1NDRMMTAuMDAxMSAxMi45NTQ0TDEwLjAwMTEgNC4zNjg3M0wxLjYxNzUxIDEyLjc1MjNMMC4yMDMyOTkgMTEuMzM4MUw4LjU4Njg3IDIuOTU0NTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
}

.solution .container {
  position: relative;
}

.solution h3 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-style: Medium;
  font-size: 84.5px;
  line-height: 84.48px;
  letter-spacing: -0.32px;
  color: var(--white);
  transition: var(--transition03);
}

.solution .bg-dark h3,
.solution .bg-dark h2,
.solution .bg-white .solution__item h6,
.solution .bg-dark .solution__item p {
  color: var(--white);
}

.solution .bg-white h3,
.solution .bg-white h2,
.solution .bg-white .solution__item h6,
.solution .bg-white .solution__item p {
  color: var(--text);
}

.solution h2 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -1.84px;
  color: var(--white);
  transition: var(--transition03);
  text-transform: capitalize;
}

.solution__itemWrap {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.solution__item {
  border-top: 1px solid #B1B2B6;
}

.solution__item h6 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-style: Medium;
  font-size: 16.45px;
  line-height: 25.71px;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: var(--white);
  transition: var(--transition03);
}

.solution__item p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16.17px;
  line-height: 21.6px;
  letter-spacing: -0.32px;
  color: var(--white);
  transition: var(--transition03);
}

/* ############ Responsive ############# */

/* XXL ≤ 1399px */
@media (max-width: 1399px) {
  .solution .bg-blue,
  .solution .bg-white,
  .solution .bg-dark {
    padding: 120px 0;
  }

  .solution h2 {
    font-size: 60px;
    line-height: 64px;
  }

  .solution h3 {
    font-size: 72px;
    line-height: 74px;
  }

  .solution__itemWrap {
    gap: 60px;
  }
}

/* XL ≤ 1199px */
@media (max-width: 1199px) {
  .solution .bg-blue,
  .solution .bg-white,
  .solution .bg-dark {
    padding: 100px 0;
  }

  .solution.position-sticky {
    top: 72px;
  }

  .solution h2 {
    font-size: 52px;
    line-height: 56px;
  }

  .solution h3 {
    font-size: 64px;
    line-height: 66px;
  }

  .solution__itemWrap {
    gap: 50px;
  }
}

/* LG ≤ 991px (Tablet) */
@media (max-width: 991px) {
  .solution .bg-blue,
  .solution .bg-white,
  .solution .bg-dark {
    padding: 80px 0;
  }

  .solution__top-title {
    gap: 20px;
    text-align: center;
  }

  .solution__img,
  .solution__title,
  .solution .btn-wrap {
    justify-content: center !important;
    text-align: center;
    flex: 1 1 calc(33.333% - 20px);
  }

  .solution__img {
    justify-content: flex-start !important;
  }

  .solution__img img {
    width: 100px;
    height: auto;
  }

  .solution h2 {
    font-size: 42px;
    line-height: 46px;
  }

  .solution h3 {
    font-size: 56px;
    line-height: 60px;
    text-align: center;
    margin-bottom: 20px;
  }

  .solution__itemWrap {
    gap: 40px;
  }
}

/* MD ≤ 767px (Mobile) */
@media (max-width: 767px) {
  .solution .bg-blue,
  .solution .bg-white,
  .solution .bg-dark {
    padding: 60px 0;
  }

  .solution.position-sticky {
    top: 52px;
  }

  .solution h2 {
    font-size: 32px;
    line-height: 38px;
  }

  .solution h3 {
    font-size: 42px;
    line-height: 48px;
    margin-bottom: 10px;
  }

  .solution__item {
    flex-direction: column;
    gap: 0;
    padding-top: 20px;
  }

  .solution__img  {
    max-width: 100%;
    justify-content: center !important;
  }

  .solution__img img {
    width: 70px;
    height: auto;
  } 

  .solution__item h6 {
    font-size: 14px;
    line-height: 22px;
  }

  .solution__item p {
    font-size: 14px;
    line-height: 20px;
  }

  .solution__itemWrap {
    gap: 20px;
    padding-top: 20px;
  }

  .solution .container > .row:nth-child(2) > .col-lg-2 {
    display: none;
  }

  .solution__top-title {
    flex-wrap: wrap;
  }

  .solution__img:not(:has(img)) {
    display: none !important;
  }

  .solution__img, .solution__title, .btn-wrap {
    flex: 1 1 100%;
  }

  .solution__top-title .btn {
    margin: 0 auto;
  } 
}

/* XS ≤ 480px (Small Mobile) */
@media (max-width: 480px) {
  .solution .bg-blue,
  .solution .bg-white,
  .solution .bg-dark {
    padding: 40px 0;
  }

  .solution h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .solution h3 {
    font-size: 32px;
    line-height: 36px;
  }

  .solution__item h6 {
    font-size: 12px;
    line-height: 20px;
  }

  .solution__item p {
    font-size: 13px;
    line-height: 18px;
  }

  .btn {
    font-size: 13px;
    padding: 10px 18px;
  }
}