:root {
  --primary-color: #0069b1;
  --secondary-color: #e12e56;
  --white: #fff;
  --black: #000;
  --bg-grey: rgba(0, 45, 92, 0.05);
  --swiper-theme-color: #000000 !important;
}

.font-medium {
  font-family: 'Gotham-Medium' !important;
}

.font-book {
  font-family: 'Gotham-Book' !important;
}

.font-light {
  font-family: 'Gotham-Light' !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.flex-col {
  flex-direction: column !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-25 {
  font-size: 25px !important;
}

.w-fit {
  width: fit-content !important;
}

.max-w-250 {
  max-width: 250px !important;
}

.rounded-3 {
  border-radius: 10px !important;
}

.btn-secondary {
  background-color: var(--secondary-color);
  width: fit-content;
  font-family: 'Gotham-Medium';
  text-transform: uppercase;
}

.padding-award {
  padding: 2rem 0;
}

.body-margin {
  margin-top: 7rem;
}

.banner-links {
  display: flex;
  align-items: center;
  padding: 0 !important;
}

.banner-links li {
  padding: 0;
  list-style: none;
  margin-right: 5px;
  display: flex;
  align-items: center;
}

.banner-links li i {
  color: var(--black);
  font-size: 14px;
}

.banner-links li a {
  color: var(--black);
  font-family: 'Gotham-Light';
  font-size: 14px;
}

.hero .container {
  padding: 8rem 0.7rem;
}

.hero h1 {
  font-size: 34px;
  font-family: 'Gotham-Medium';
}

.swiper-section img {
  border-radius: 15px;
}

.swiper-section {
  position: relative;
}

.swiper-section .swiper-container {
  position: inherit;
}

.swiper-section .swiper-button-next,
.swiper-button-prev {
  top: 177px !important;
}

.swiper-section .swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: -38px !important;
}

.swiper-section .swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: -38px !important;
}

.swiper-section .swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: '';
  background-image: url(../images/new/next-arrow.svg);
  height: 30px;
  width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}

.swiper-section .swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: '';
  background-image: url(../images/new/prev-arrow.svg);
  height: 30px;
  width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}

.tabs {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.tabs .tab-list {
  display: flex;
  list-style: none;
  cursor: pointer;
  justify-content: space-around;
  padding: 0;
  margin-bottom: 0;
}

.tabs .tab-item {
  background-color: var(--white);
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  opacity: 0.5;
  text-align: center;
  width: 100%;
}

.tabs .tab-item:hover {
  opacity: 1;
}

.tabs .tab-item.active {
  background-color: var(--white);
  color: var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  opacity: 1;
}

.tabs .tab-content {
  display: none;
}

.tabs .tab-content .list-items .icons {
  width: 32px;
  height: 32px;
  object-fit: none;
  border-radius: 0;
}

.tabs .tab-content.active {
  display: block;
}

.contact-container .contact-form {
  background-color: var(--white);
  padding: 20px 35px;
  border-radius: 10px;
  box-shadow: rgb(100 100 111 / 16%) -16px 11px 29px 0px;
}

.contact-container h2,
.contact-container h6,
.contact-container .btn {
  font-family: 'Gotham-Medium';
  line-height: 1 2;
  padding-top: 0;
  padding-bottom: 0;
}

.contact-container .form-select,
.contact-container .form-control {
  margin-bottom: 15px;
  border-radius: 0;
  font-size: 13px;
  color: var(--primary-color);
  font-family: 'Gotham-Light';
  padding: 0.5rem 0.75rem;
}

.contact-container .form-select:focus,
.contact-container .form-control:focus {
  box-shadow: none;
  border-color: var(--primary-color);
}

.contact-container label,
.contact-container .form-control::placeholder,
.contact-container .form-select::placeholder {
  color: var(--primary-color);
  font-family: 'Gotham-Light';
  font-size: 13px;
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1200px;
  }
}

.section-solutions ul li {
  color: var(--primary-color);
  list-style: none;
  position: relative;
}

.section-solutions ul li::before {
  content: '';
  position: absolute;
  left: -20px;
  width: 14px;
  height: 14px;
  background-image: url(../images/new/next-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 5px;
}

.section-solutions .card {
  border: 0;
  border-radius: 30px;
  background-color: var(--white);
  transition: 0.3s ease;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  overflow: hidden;
}

.section-solutions .card:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transform: translateY(-10px);
}

.section-solutions .card .btn {
  padding: 15px;
  font-size: 20px;
  font-family: 'Gotham-Book';
  color: var(--primary-color);
}

.section-solutions .card .btn img {
  width: 10px;
}

.management-team .card {
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background-color: #f1f4f7;
  height: 100%;
  transition: 0.3s ease;
  cursor: pointer;
  margin-bottom: auto;
}

.management-team .card:hover {
  box-shadow: rgba(100, 100, 111, 0.079) 0px 7px 29px 0px;
}

.management-team .card img {
  border-radius: 7px;
}

.management-team .card .content {
  padding: 10px 5px 0;
}

.management-team .card .content h4 {
  color: var(--secondary-color);
  font-family: 'Gotham-Medium';
  font-size: 20px;
  margin-bottom: 0;
}

.management-team .card .content button {
  background-color: var(--white);
  border: 0;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 35px;
}

.management-team .card .content .open {
  rotate: 90deg;
}

.management-team .card .content p {
  font-size: 12px;
  color: var(--primary-color);
}

.management-team .card .content .arrowBtn.rotate {
  transition: 0.3s ease;
  transform: rotate(90deg);
}

.management-team .details-view {
  background-color: #f1f4f7;
  margin-bottom: 20px;
  border-radius: 15px;
  padding: 25px;
  position: relative;
  /* bottom: 0; */
  max-height: 100%;
  overflow: hidden;
  display: none;
  opacity: 0;
  left: 0;
  top: auto;
  transition: 0.3s ease;
}

.management-team .details-view.open {
  /* max-height: 100%; */
  display: block;
  opacity: 1;
  /* position: absolute;
  bottom: -12px; */
}

.management-team .details-view.hide {
  max-height: 0;
  display: none;
  opacity: 0;
}

.management-team .details-view .close {
  background-color: var(--primary-color);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 35px;
  border: 0;
  color: var(--white);
  position: absolute;
  right: 15px;
  top: 15px;
}

.board-team .card .content button {
  background-color: #f1f4f7;
}

@media (max-width: 786px) {
  .management-team .card {
    margin-bottom: 0 !important;
  }

  .management-team .details-view {
    position: fixed;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: 9999;
  }

  /* .management-team .details-view {
    position: relative;
  } */
  .swiper-section .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    right: 0 !important;
  }

  .swiper-section .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    left: 0 !important;
  }

  .contact-container .row {
    gap: 30px;
  }
}

.counter {
  font-family: 'Gotham-Medium';
  color: var(--primary-color);
  font-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.border-right {
  border-right: 1px solid #c9c9c9;
}

.news .item {
  position: relative;
  overflow: hidden;
  display: block;
}

.news figure {
  height: 100%;
  margin-bottom: 0;
}

.news figure img {
  width: 100%;
}

.news .item figcaption {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(35, 110, 175, 0.8);
  transition: all 0.3s ease-in-out;
  color: var(--white);
  padding: 15px;
  display: flex;
  align-items: flex-end;
  /* Correct alignment to align items at the bottom */
  top: 100%;
  /* Start the figcaption outside the view (from the bottom) */
  left: 0;
}

.news .item:hover figcaption {
  top: 0;
  /* On hover, move figcaption up to cover the item */
}

.pagination {
  padding-left: 0;
  margin: 40px 0 0;
  border-radius: 4px;
  justify-content: center;
}

.pagination-wrap .pagination a {
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f4f7;
  color: var(--primary-color);
}

.pagination-wrap .pagination a:hover {
  background-color: var(--secondary-color);
  color: var(--white);
}

.pagination-wrap .pagination > .active > a {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--white);
}

/* .swiper-seven .swiper-container-android .swiper-slide,
.swiper-wrapper {
  justify-content: space-between;
} */

@media (min-width: 768px) {
  .container-wrapper .ng-title {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  h2 {
    font-size: 21px;
  }

  .section-solutions .card {
    border-radius: 20px;
  }

  footer {
    padding: 20px 0 0;
  }

  .copyright p {
    text-align: center;
  }

  footer a {
    justify-content: center !important;
  }

  .footerLogo {
    width: 30px;
  }

  .mobile-section .image-container li {
    list-style: none;
    color: var(--secondary-color);
    text-align: center;
    border-bottom: 2px solid var(--secondary-color);
    text-align: left;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mobile-section .accordion-item-header {
    padding: 0;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #00000070;
    padding-bottom: 10px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
  }

  .mobile-section .accordion-item-header .icons {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .mobile-section .accordion-item {
    border: 0 !important;
  }

  .mobile-section .accordion-item-header::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230069b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 17l5-5l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 1em;
    height: 1em;
    transition: transform 0.3s ease;
  }

  .mobile-section .accordion-item-header.active::after {
    transform: rotate(90deg);
  }

  .mobile-section .accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

  .mobile-section .accordion-item-body .list-items {
    padding-left: 39px;
    color: var(--primary-color);
    margin-bottom: 10px;
    border-bottom: 1px solid #00000070;
  }

  .footer-nav li a {
    font-family: 'Gotham-Medium';
  }

  .nav-links li::after {
    top: 31px !important;
  }

  .main-wrapper .merchant {
    background-image: url('../images/mob/merchant-b.jpg') !important;
    position: relative;
    height: 330px !important;
  }

  .hero .container h1 {
    font-size: 26px;
    width: 245px;
  }

  #homeCarousel .carousel-control-next,
  .carousel-control-prev {
    display: none;
  }

  .contact-head {
    background-color: transparent !important;
    color: var(--primary-color) !important;
  }

  .contact-head:hover {
    color: var(--secondary-color) !important;
  }
}

.rotate-icon {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

#homeCarousel .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 145px;
}

.swiper-pagination-bullet-active {
  background-color: var(--primary-color) !important;
}

#homeCarousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 35px;
  border-top: 0;
  border-bottom: 0;
}

@media screen and (max-width: 768px) {
  .hero h1 {
    position: absolute;
    top: 80px;
    padding: 0;
  }
}

.main-wrapper .home0,
.main-wrapper .home1,
.main-wrapper .home2,
.main-wrapper .about,
.main-wrapper .issuer,
.main-wrapper .contact,
.main-wrapper .merchant,
.main-wrapper .team,
.main-wrapper .news-hero {
  height: 400px;
}