@import url('./global.css');

/* -====================================================
   Pre Loader
====================================================-*/
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    /* animation: gradientShift 8s ease infinite; */
    transition: opacity 0.6s ease, visibility 0.6s;
}
.loader-inner {
    text-align: center;
    max-width: 600px;
    padding: 40px;
}
.logo-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 40px;
}
.loader-logo {
    width: 120px;
    position: relative;
    z-index: 2;
    /* animation: logoReveal 1s ease forwards; */
     animation: pulse 1.5s infinite ease-in-out;
}
.logo-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(255,170,0,0.25), transparent 70%);
    filter: blur(25px);
    opacity: 0;
    animation: glowIn 1.2s ease forwards;
}
.loading-subtext {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--font-family-telegraf);
    color: var(--color-text-main);
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(15px);
    animation: textReveal 1s ease 0.5s forwards;
    display: none;
}
.loader-line {
    width: 260px;
    height: 2px;
    background: rgba(0,0,0,0.08);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.loader-line-progress {
    position: absolute;
    height: 100%;
    width: 30%;
    background: var(--color-brand-accent);
    animation: slide 1.4s infinite ease-in-out;
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1); }
}
@keyframes logoReveal {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes glowIn {
    to { opacity: 1; }
}

@keyframes textReveal {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slide {
    0% { left: -30%; }
    50% { left: 50%; }
    100% { left: 100%; }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}


/* -====================================================
   Repeating
====================================================-*/
.tab-switchs {
   display: flex;
   align-items: flex-start;
   align-content: flex-start;
   align-self: stretch;
   flex-wrap: wrap;
   position: relative;
}
.tab-switchs .switch-button {
    display: flex;
    height: 52px;
    padding: 9px 17px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    font-weight: 500;
    letter-spacing: -0.14px;
    cursor: pointer;
    opacity: 0.5;
    transition: color 0.5s ease;
}
.tab-switchs .switch-button.active {
   opacity: 1;
}
.tab-switchs .switch-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 0;
  left: 0;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 2px;
}
.tab-content-wrapper {
  position: relative;
  overflow: hidden;
}
.tab-content-wrapper .switch-container {
  opacity: 0;
  /* transform: translateY(20px); */
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  width: 100%;
}
.tab-content-wrapper .switch-container.active {
  opacity: 1;
  /* transform: translateY(0px); */
  pointer-events: auto;
  position: relative;
}
.tab-content-wrapper .switch-container.fade-only {
  transform: none !important;     
  transition: opacity 0.35s ease;  
}
.tab-content-wrapper .switch-container.fade-only.active {
  opacity: 1;
  transform: none !important;
}

@media (max-width: 768px) { 
    .tab-switchs .switch-button {
        padding: 9px 11px;
        line-height: 16px;
        font-size: 11px;
    }
}


/* -====================================================
   Header
====================================================-*/
.header-strip {
   background: var(--surface-dark);
   text-align: center;
}
.header-strip .top-bar-head {
   padding: 15px 0;
}
.header-strip .top-bar-head .note {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.80);
    width: 100%;
    margin: 0 auto;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.header-strip .top-bar-head .note span {
    font-weight: 600;
    color: var(--color-white);
}
.header-strip .top-bar-head .note a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.80);
}
.header-strip .top-bar-head .note a:hover {
    color: var(--color-primary-orange);
     border-bottom: 1px solid var(--color-primary-orange);
}
.header-strip .top-bar-head .note img {
    width: 18px;
     animation: arrowMove 1.2s ease-in-out infinite;
}
@keyframes arrowMove {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
    100% {
        transform: translateX(0);
    }
}

.header-strip .header {
  border-radius: 24px 24px 0 0; 
}

.header {
  background: var(--surface-3);
  display: flex;
  padding: 20px 0;
  justify-content: center;
  align-items: center;
}
.header .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.header .header-wrapper .header-start {
    display: flex;
    align-items: center;
    gap: 30px;
}
.header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header .logo img {
    width: 164px;
}
.header .nav {
    display: flex;
    gap: 32px;
    border-radius: 8px;
    background: var(--color-white);
    align-items: center;
    padding: 12px 16px;
}
.header .nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-base-dark);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.header .nav-link img {
    width: 8px;
}
.header .nav-item {
  position: relative;
}
.header .dropdown-menu {
  position: absolute;
  top: 150%;
  left: -14px;
  background: var(--color-white);
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.2s ease;
  z-index: 9;
  text-align: left;
}
.header-theme .dropdown-menu {
   background: #182C33;
}

.header .dropdown-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--color-base-dark);
  text-decoration: none;
}
.header-theme .dropdown-menu a {
    color: var(--color-white);
}

.header .dropdown-menu a:hover {
  background: transparent;
  color: var(--color-brand-primary);
}
.header-theme .dropdown-menu a:hover {
   color: #9cc9d8;
}

@media (min-width: 901px) {
  .header .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.header .actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header .btn {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header .btn.ghost {
  color: var(--color-base-dark);
  background: var(--color-white);
}
.header .btn.ghost:hover {
    transform: translateY(-2px);
}
.header .btn.primary {
  background: var(--color-brand-primary);
  color: var(--color-white);
}
.header .btn.primary:hover {
  filter: brightness(110%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header .hamburger {
  display: none;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  position: relative;
  top: -5px;
}
.header .close-menu, .header .mobile-actions {
  display: none;
}
.header .dropdown.open .nav-link img {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.header-theme {
    background: #061e25;
    background-image: linear-gradient(to right, #05191e, #071d24, #071f27, #081f28, #071f26, #05191f);
}
.header-theme .nav {
   background: #182C33;
}
.header-theme .nav-link {
    color: var(--color-white);
}
.header-theme .btn.ghost {
    color: var(--color-white);
    background: #182C33;
}
.header-theme .btn.primary {
    background: var(--color-brand-theme);
}

/* Responsive */
@media (max-width: 900px) {
  .header .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    transform: translateY(-100%);
    transition: 0.3s ease;
    z-index: 999;
    border-radius: 0;
  }
  .header .nav.open {
    transform: translateY(0);
  }
  .header .close-menu {
    display: block;
    align-self: flex-end;
    font-size: 16px;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .header .nav-link {
    font-size: 14px;
    justify-content: space-between;
    width: 100%;
  }
  .header .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.3s ease, padding 0.2s ease;
  }
   .header .dropdown.open .dropdown-menu {
        max-height: 600px;
        padding: 8px 0;
        background: var(--color-white);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
   }
  .header .mobile-actions {
    display: block;
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .header .hamburger {
    display: block;
    color: var(--color-black);
  }
  .header-theme .hamburger {
    color: var(--color-white);
  }
  .header .actions a {
    display: none;
  }
  .header-strip .top-bar-head .note {
    font-size: 11px;
  }
  .header .dropdown-menu {
    left: 0;
    min-width: 264px;
  }
  .header .nav-item {
    width: 100%;
  }
  .header-theme .nav {
     background: #061e25;
  }
  .header-theme .close-menu {
    color: var(--color-white);
  }
  .header-theme .dropdown-menu {
    background: #182C33 !important;
  }
  .header .logo img { width: 124px;}
  .header .hamburger { font-size: 26px !important; }
}

.fixed-header {
    position: fixed !important;
    top: 0;
    z-index: 999;
    width: 100%;
    background: var(--surface-3);
    box-shadow: 0 -3px 8px 1px rgb(0 0 0 / 9%);
    animation: smoothScroll 1s forwards;
    padding: 12px 0!important;
    border-radius: 0 !important;
}
@keyframes smoothScroll {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* -====================================================
   Footer
====================================================-*/ 
.footer-section {
    padding-bottom: 20px;
    background: var(--color-white);
    overflow: hidden;
}
.footer-content-area .top-footer {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.footer-content-area .top-footer .navigate-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 1 0;
    flex-wrap: wrap;
    width: 50%;
    padding-bottom: 30px;
    height: 335px;
}
.footer-content-area .top-footer .navigate-area h2 {
    color: rgba(0, 0, 0, 0.37);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}
.footer-content-area .top-footer .navigate-area .widget-grids {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}
.footer-content-area .top-footer .navigate-area .widget-grids h3 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-black);
}
.footer-content-area .top-footer .navigate-area .widget-grids .item-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.footer-content-area .top-footer .navigate-area .widget-grids .item-menu ul {
    margin: 0;
    padding: 0;
}
.footer-content-area .top-footer .navigate-area .widget-grids .item-menu ul li {
    list-style-type: none;
    font-size: 14px;
    line-height: 22px;
    padding-left: 0;
    color: var(--color-text-brown-dark);
}

.footer-content-area .top-footer .office-area {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-left: 1px dashed #DEDFE2;
    padding-left: 20px;
    width: 50%;
    padding-bottom: 30px;
    height: 335px;
}
.footer-content-area .top-footer .office-area h4 {
    color: rgba(0, 0, 0, 0.37);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}
.footer-content-area .top-footer .office-area .office-locations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: flex-start;
}
.footer-content-area .top-footer .office-area .office-locations .office-item {
    display: flex;
    width: 221px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.footer-content-area .top-footer .office-area .office-locations .office-item:nth-child(1),
.footer-content-area .top-footer .office-area .office-locations .office-item:nth-child(2),
.footer-content-area .top-footer .office-area .office-locations .office-item:nth-child(3) {
   margin-bottom: 20px;
}
.footer-content-area .top-footer .office-area .office-locations .office-item h5 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-black);
}
.footer-content-area .top-footer .office-area .office-locations .office-item p {
    margin: 0;
    color: var(--color-text-brown-dark);
    font-size: 14px;
    line-height: 22px;
}

.footer-content-area .middle-footer {
    border-top: 1px dashed #DEDFE2;
    border-bottom: 1px dashed #DEDFE2;
    display: flex;
    align-items: center;
}
.footer-content-area .middle-footer .reserved-block {
    flex: 1 1 0;
    padding: 20px 0;
}
.footer-content-area .middle-footer .reserved-block p {
    margin: 0;
    color: var(--color-text-brown-dark);
    font-size: 14px;
    line-height: 22px;
}
.footer-content-area .middle-footer .recognisation-block {
    flex: 1 1 0;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-left: 1px dashed #DEDFE2;
    padding-left: 20px;
}
.footer-content-area .middle-footer .recognisation-block .logo-hc img {
    width: 150px;
}
.footer-content-area .middle-footer .recognisation-block .from-text {
    font-size: 14px;
    line-height: 22px;
    margin: 0;
    color: var(--color-text-brown-dark);
}

.footer-content-area .bottom-footer {
    padding: 30px 0;
}
.footer-content-area .bottom-footer p {
    margin: 0;
    color: var(--color-text-brown-dark);
    font-size: 14px;
    line-height: 22px;
}
/* Responsive */
@media (max-width: 768px) { 
    .main-wrapper {
        margin-bottom: 0;
    }
    .footer {
        height: auto;
        position: relative;
    }
    .footer-content-area .top-footer {
        flex-direction: column;
        gap: 20px;
    }
    .footer-content-area .top-footer .navigate-area {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 14px;
        padding-bottom: 14px;
    }
    .footer-content-area .top-footer .navigate-area .widget-grids {
        gap: 20px;
        flex-direction: column;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
    .footer-content-area .top-footer .office-area {
        border-left: none;
        padding-left: 0;
        height: auto;
    }
    .footer-content-area .top-footer .office-area .office-locations {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-content-area .top-footer .office-area .office-locations .office-item {
        max-width: 135px;
        gap: 8px;
    }
    .footer-content-area .middle-footer {
        flex-direction: column;
    }
    .footer-content-area .middle-footer .recognisation-block {
        border-left: none;
        padding-left: 0;
        border-top: 1px dashed #DEDFE2;
    }
    .footer-content-area .middle-footer .recognisation-block .logo-hc img {
        width: 110px;
    }
    .footer-content-area .middle-footer .recognisation-block .from-text p {
        margin: 0;
        font-size: 12px;
        line-height: 20px;
    }
    .footer-content-area .top-footer .office-area .office-locations .office-item:nth-child(1),
    .footer-content-area .top-footer .office-area .office-locations .office-item:nth-child(2), 
    .footer-content-area .top-footer .office-area .office-locations .office-item:nth-child(3) {
        margin-bottom: 8px;
    }
    .footer-content-area .top-footer .office-area .office-locations .office-item h5,
    .footer-content-area .top-footer .office-area .office-locations .office-item p,
    .footer-content-area .middle-footer .reserved-block p,
    .footer-content-area .bottom-footer p,
    .footer-content-area .top-footer .navigate-area h2,
    .footer-content-area .top-footer .navigate-area .widget-grids h3,
    .footer-content-area .top-footer .office-area h4 {
        font-size: 12px;
        line-height: 20px;
    }
    .footer-content-area .bottom-footer {
        padding: 28px 0 20px;
    }
    .footer-content-area .top-footer .navigate-area .widget-grids .item-menu ul li {
        font-size: 12px;
        padding: 2px 0;
        line-height: 20px;
    }
    .footer-content-area .top-footer .navigate-area .widget-grids .item-menu {
        gap: 6px;
    }
}


/* -====================================================
   Banner Index
====================================================-*/
.banner-index {
    background: var(--surface-3);
    padding-bottom: 50px;
    /* min-height: 120vh; */
    position: relative;
}
.banner-index .default-content-gap {
    gap: 0
}
.banner-index .headline-area {
    max-width: 820px;
}
.banner-index .headline-area .flag-logos-overlap {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.banner-index .headline-area .flag-logos-overlap img:not(:first-child) {
     margin-left: -2rem;
}
.banner-index .headline-area .flag-logos-overlap  img {  
    cursor: pointer;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    position: relative;
}
.banner-index .headline-area .flag-logos-overlap  img { transform: translateY(-8px); }
.banner-index .headline-area .flag-logos-overlap  img:nth-child(1) { transition-delay: 0.0s; }
.banner-index .headline-area .flag-logos-overlap  img:nth-child(2) { transition-delay: 0.1s; }
.banner-index .headline-area .flag-logos-overlap  img:nth-child(3) { transition-delay: 0.2s; }
.banner-index .headline-area .flag-logos-overlap  img:nth-child(4) { transition-delay: 0.3s; }
.banner-index .headline-area .flag-logos-overlap  img:nth-child(5) { transition-delay: 0.4s; }

.banner-index .headline-area .flag-logos-overlap img:hover {
   transform: translateY(-4px) scale(1.03) !important;
   transition-delay: 0s;
   transition-duration: 0.25s;
}

.banner-index .headline-area p {
    max-width: 600px;
    margin-bottom: 24px;
}
.banner-index .image-display {
    perspective: 1500px;
    perspective-origin: center bottom;
    position: relative;
    min-height: 50px;
    margin: 0 auto;
}
.banner-index .image-banner-full {
    margin-top: 60px;
}
.banner-index .image-display .banner-tilt {
    /* transform-style: preserve-3d;
    transform-origin: center bottom;
    transform: translateY(400px) translateZ(-200px) rotateX(88deg) scale(0.6);
    opacity: 0.15; */
    will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 5%, black 30%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 5%, black 30%, black 100%);
    transition: none !important;
}
.banner-index .image-display .banner-tilt img {
    display: block;
    width: 100%;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}

@keyframes bannerReveal {
    0% {
        transform:
            translateY(60px)
            rotateX(14deg)
            scale(0.97);
        opacity: 0.001;
    }
    100% {
        transform:
            translateY(0)
            rotateX(0deg)
            scale(1);
        opacity: 1;
    }
}

.banner-index #hero-title, .banner-index #hero-desc, .banner-index .inline-button-area {
  opacity: 0;
  transform: translateY(24px);
}
.banner-index #hero-banner {
  opacity: 0;
  pointer-events: none;
}
.banner-index .flag {
  opacity: 0;
  transform: translateY(14px) scale(0.75);
}

.animated.fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}
.animated.banner-in {
  opacity: 1;
  pointer-events: auto;
  animation: bannerReveal 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.animated.flag-pop {
  animation: flagPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes flagPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.75);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Responsive */
@media (max-width: 768px) {
    .banner-index {
        min-height: 120vh;
    }
    .banner-index .image-display {
        min-height: 180px;
    }
    .banner-index .inline-button-area {
        flex-direction: column;
    }
     .banner-index .inline-button-area .custom-btn {
        width: 100%;
        justify-content: center;
    }
}


/* -====================================================
   Client List
====================================================-*/
.client-list {
    text-align: center;
    background: var(--surface-3);
    padding: 40px 0;
}
.client-list h2 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-base-light);
    margin-bottom: 10px;
}
.client-list ul {
    margin: 0;
    padding: 0;
}
.client-list ul li {
    list-style-type: none;
    display: inline-table;
    text-align: left;
    width: 11%;
    margin: 10px 6px 0 0;
    padding-left: 0;
}
.client-list ul li:last-child {
    margin-right: 0;
}
.client-list ul li img {
    width: 150px;
}

.banner-index .client-list {
    padding: 40px 0 0;
}
.client-list.client-white-bg {
    background: var(--color-white);
}
.client-list.padding-no-top {
    padding-top: 0;
}
/* Responsive */
@media (max-width: 768px) {
    .client-list ul li {
        width: 22%;
    }
}

/* -====================================================
   Everything Business Need
====================================================-*/
/* for index desktop only */
.everything-business-need {
    position: relative;
    transition: background-color 0.6s ease;
}
.everything-business-need .headline-area {
    max-width: 620px;
}
/* box-grid-change */
.box-grid-change {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}
.mint-box-change {
    gap: 70px !important;
}
.box-grid-change .item-seperate {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.everything-scroll .box-grid-change .item-seperate {
    opacity: 0.3;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.everything-scroll .box-grid-change .item-seperate.is-active {
  opacity: 1;
  transform: scale(1);
}


.box-grid-change .item-seperate .col-block {
    flex: 1 1 clamp(280px, 50%, 540px);
}
.box-grid-change .item-seperate .col-block .full-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    height: 680px;
}
.box-grid-change .item-seperate .col-block .full-content.spacing-left {
    padding-left: 30px;
}
.box-grid-change .item-seperate .col-block .full-content .headline-area {
    align-items: flex-start;
}
.box-grid-change .item-seperate .col-block .full-content .headline-area h3 {
    font-family: var(--font-family-telegraf);
    color: var(--color-text-secondary);
    font-weight: 600;
}
.box-grid-change .item-seperate .col-block .full-content .bottom-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
}
.box-grid-change .item-seperate .col-block .full-content .bottom-info .swiper-display {
    display: flex;
    padding: 4px;
    align-items: flex-start;
    gap: 4px;
    border-radius: 30px;
    border: 1px solid rgba(239, 239, 239, 0.80);
}
.box-grid-change .item-seperate .col-block .full-content .bottom-info .swiper-display .bullet-point {
    width: 11px;
    height: 11px;
    background: var(--color-brand-muted);
    border-radius: 50%;
    transition: background 0.4s ease;
}
.box-grid-change .item-seperate .col-block .full-content .bottom-info .swiper-display .bullet-point.active {
    background: var(--color-brand-primary);
}

.box-grid-change .item-seperate .col-block .full-content .bottom-info .card-listing {
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}
.box-grid-change .item-seperate .col-block .full-content .bottom-info .card-listing .card-item {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
   color: rgba(96, 108, 112, 0.50);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.box-grid-change .item-seperate .col-block .full-content .bottom-info .card-listing .card-item.active {
   color: #111111;
}
/* Responsive */
@media (max-width: 767px) {
    .box-grid-change .item-seperate .col-block .full-content {
        height: auto;
    }
    .box-grid-change .item-seperate .col-block .full-content.spacing-left {
        padding-left: 0;
    }
    .box-grid-change .item-seperate .col-block .full-content .bottom-info .card-listing .card-item {
        font-size: 14px;
        line-height: 22px;
    }
}


/* for hijacking issue */
.wallet-everyday-need .scroll-animate .image-holder img,
.wallet-everyday-need .scroll-animate .image-holder canvas {
  opacity: 0;
  transform: scale(0.7) translateY(40px);
  transition: 
    opacity 0.4s ease,
    transform 0.7s cubic-bezier(0.22, 1.2, 0.36, 1);
  will-change: transform;
}
.wallet-everyday-need .scroll-animate .card-item,
.wallet-everyday-need .scroll-animate .bullet-point {
  opacity: 0;
  transform: scale(0.9) translateY(14px);
  transition: all 0.6s ease;
}
.wallet-everyday-need .scroll-animate.is-visible .image-holder img,
.wallet-everyday-need .scroll-animate.is-visible .image-holder canvas {
  opacity: 1;
  transform: scale(1);
}
.wallet-everyday-need .scroll-animate.is-visible .card-item,
.wallet-everyday-need .scroll-animate.is-visible .bullet-point {
  opacity: 1;
  transform: none;
}
.wallet-everyday-need .scroll-animate.is-visible .card-item:nth-child(1) { transition-delay: .1s; }
.wallet-everyday-need .scroll-animate.is-visible .card-item:nth-child(2) { transition-delay: .2s; }
.wallet-everyday-need .scroll-animate.is-visible .card-item:nth-child(3) { transition-delay: .3s; }
.wallet-everyday-need .scroll-animate.is-visible .card-item:nth-child(4) { transition-delay: .4s; }

.wallet-everyday-need .box-grid-change {
    gap: 100px;
}


/* box-grid-change */
.box-grid-change {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}
.box-grid-change .item-seperate {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.everything-scroll .box-grid-change .item-seperate {
    opacity: 0.3;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.everything-scroll .box-grid-change .item-seperate.is-active {
  opacity: 1;
  transform: scale(1);
}



/* -====================================================
   Zigzag Grid (Everything Business Need)
====================================================-*/
.hori-vertical-zigzag {
    position: relative;
    padding: 100px 0;
    transition: background-color 0.6s ease;
}
.hori-vertical-zigzag .headline-area {
    max-width: 620px;
}
.hori-vertical-zigzag .scroll-wrapper {
    position: relative;
    min-height: 4000px;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    padding: 100px 0;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate {
    display: flex;
    width: 100%;
    gap: 40px;
    align-items: flex-start;
    justify-content: center;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col {
    flex: 1;
    position: sticky;
    top: 4.2%;
    z-index: 20;
    height: 730px;
    overflow: hidden;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper {
   position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper .full-content {
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    height: 730px;
    pointer-events: none;
    opacity: 0.3; 
    transform: scale(0.95);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; 
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper .full-content.active {
    pointer-events: all;
    opacity: 1;
    transform: scale(1); 
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper .full-content .headline-area {
    align-items: flex-start;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper .full-content .headline-area h3 {
    font-family: var(--font-family-telegraf);
    color: var(--color-text-secondary);
    font-weight: 600;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper 
.full-content .bottom-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper 
.full-content .bottom-info .swiper-display {
    display: flex;
    padding: 4px;
    align-items: flex-start;
    gap: 4px;
    border-radius: 30px;
    border: 1px solid rgba(239, 239, 239, 0.80);
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper 
.full-content .bottom-info .swiper-display .bullet-point {
    width: 11px;
    height: 11px;
    background: var(--color-brand-muted);
    border-radius: 50%;
    transition: background 0.4s ease;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper 
.full-content .bottom-info .swiper-display .bullet-point.active {
    background: var(--color-brand-primary);
}

.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper 
.full-content .bottom-info .card-listing {
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper 
.full-content .bottom-info .card-listing .card-item {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
   color: rgba(96, 108, 112, 0.50);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .left-col .content-wrapper 
.full-content .bottom-info .card-listing .card-item.active {
   color: #111111;
}

.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .right-col .image-holder {
   width: 100%;
    height: auto;
    min-height: 500px; 
    flex-shrink: 0;
    opacity: 1; 
    transition: all 0.3s ease;
    pointer-events: all; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0; 
}

.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .right-col .image-holder.active {
    opacity: 1;
   transform: scale(1);
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .right-col .image-holder:not(.active) {
    opacity: 0.3;
    transform: scale(0.95); 
}
.hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .right-col .image-holder .graphic-box {
     width: 100%;
    max-width: 100%;
}
/* .hori-vertical-zigzag .scroll-wrapper .zigzag-grid .item-seperate .right-col .image-holder img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
} */


/* -====================================================
   Developers Code
====================================================-*/
.developers-code {
    /* padding: 40px 0; */
    /* overflow: hidden; */
    width: 100%;
    text-align: left;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.animated-section {
    position: relative;
    min-height: 250vh; 
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; 
    clip-path: inset(0 0 0 0); 
    z-index: 1;
}


/* .developers-code .bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
  z-index: 0;
}
.developers-code .reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease;
  position: relative;
  z-index: 1;
} */

/* .developers-code .layer-1 {
    background: linear-gradient(180deg,rgba(187, 202, 209, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.developers-code .layer-2 {
background: linear-gradient(180deg,rgb(95, 129, 144) 0%, rgb(240, 240, 240) 100%);
}

.developers-code .layer-3 {
  background: radial-gradient(circle,rgb(47, 84, 98) 0%, rgb(2, 17, 26) 100%);
}
.developers-code .layer-4 {
  background: radial-gradient(circle,rgb(14, 62, 75) 0%, rgba(3, 17, 26, 1) 100%);
}
.developers-code .layer-5 {
  background: radial-gradient( circle at 50% 20%, #071E27 0%, #041015 60%, #000102 100% );
} */

.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.bg-white { background: white; }
.bg-blue { background: white; }
.bg-red { background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(187, 202, 209, 1) 100%); }
.bg-green {  background: radial-gradient(circle,rgb(63, 175, 206) 0%, rgb(2, 89, 143) 100%); }
.bg-black {  background: radial-gradient( circle at 50% 20%, #071E27 0%, #041015 60%, #000102 100% ); }

.content {
    position: relative;
    z-index: 100;
    width: 100%;
    opacity: 0;
    transform: translateY(100px);
    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
    will-change: opacity, transform;
}

.content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.content > * {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.content.animate-in > * {
    opacity: 1;
    transform: translateY(0);
}

.content.animate-in > *:nth-child(1) { transition-delay: 0.2s; }
.content.animate-in > *:nth-child(2) { transition-delay: 0.3s; }
.content.animate-in > *:nth-child(3) { transition-delay: 0.4s; }
.content.animate-in > *:nth-child(4) { transition-delay: 0.5s; }


.content h2, .content p {
    color: #333; 
    transition: color 0.5s ease;
}
.content.dark-bg h2, 
.content.dark-bg p {
    color: white;
}


.developers-code .developer-api-area .headline-area {
    max-width: 720px;
}

.developers-code .developer-api-area {
    position: relative;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.developers-code .api-fadeup {
    opacity: 0;
    transform: translateY(24px);
    will-change: transform, opacity;
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.developers-code .api-fadeup.api-in-view {
    opacity: 1;
    transform: translateY(0);
}

.developers-code .api-delay-1 { transition-delay: 0.12s; }
.developers-code .api-delay-2 { transition-delay: 0.24s; }
.developers-code .api-delay-3 { transition-delay: 0.36s; }
.developers-code .api-delay-4 { transition-delay: 0.48s; }
.developers-code .api-delay-5 { transition-delay: 0.6s; }


/* integrate-content */
.developers-code .developer-api-area .integrate-content {
   display: flex;
   align-items: stretch;
   gap: 32px;
   flex-wrap: wrap;
   margin-top: 80px;
}

/* code-area */
.developer-api-area .integrate-content .code-area {
    flex: 8 1 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.developer-api-area .integrate-content .code-area .tab-switchs {
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) -4.67%, rgba(255, 255, 255, 0.08) 11.3%, rgba(255, 255, 255, 0.02) 94.92%);
}
.developer-api-area .integrate-content .code-area .tab-switchs .switch-button {
    color: var(--color-white);
}
.developer-api-area .integrate-content .code-area .tab-switchs .switch-indicator {
  background: var(--color-white);
}

.developer-api-area .integrate-content .code-area .tab-content-wrapper {
    background: #05141A;
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}

/* pay-information */
.developer-api-area .integrate-content .pay-information {
    flex: 4 1 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid rgba(93, 134, 152, 0.19);
    border-radius: 12px;
}
.developer-api-area .integrate-content .pay-information .p-in-item {
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid rgba(93, 134, 152, 0.19);
    transition: all 0.5s ease 0s;
}
.developer-api-area .integrate-content .pay-information .p-in-item:nth-child(odd) { background: rgba(10, 17, 20, 0.70); }
.developer-api-area .integrate-content .pay-information .p-in-item:nth-child(even) { background: rgba(2, 7, 10, 0.70); }
.developer-api-area .integrate-content .pay-information .p-in-item:nth-child(odd):hover { background: rgba(4, 19, 29, 0.88); }
.developer-api-area .integrate-content .pay-information .p-in-item:nth-child(even):hover { background: rgba(11, 20, 24, 0.88); }

.developer-api-area .integrate-content .pay-information .p-in-item:first-child {
    border-radius: 12px 12px 0 0;
}
.developer-api-area .integrate-content .pay-information .p-in-item:last-child {
    border-radius: 0 0 12px 12px;
    border-bottom: none;
}
.developer-api-area .integrate-content .pay-information .p-in-item p {
    color: var(--color-white);
    opacity: 79%;
    margin: 0;
}
.developer-api-area .integrate-content .pay-information .p-in-item:hover p { opacity: 100%; }
.developer-api-area .w-pn-text { width: 260px; }
.developer-api-area .integrate-content .pay-information .p-in-item .icon-api { transition: transform 0.3s ease; }
.developer-api-area .integrate-content .pay-information .p-in-item:hover .icon-api { transform: translateX(4px);}

.developer-api-area .integrate-content .pay-information .p-in-item .flag-logos-overlap {
    display: flex;
    align-items: center;
}
.developer-api-area .integrate-content .pay-information .p-in-item .flag-logos-overlap img:not(:first-child) {
     margin-left: -1rem;
}
.developer-api-area .integrate-content .pay-information .p-in-item .flag-logos-overlap img {
    transition: transform 0.4s ease, margin-top 0.4s ease;
    cursor: pointer;
    transform: translateY(0);
}
.developer-api-area .integrate-content .pay-information .p-in-item:hover .flag-logos-overlap img { transform: translateY(-8px); }
.developer-api-area .integrate-content .pay-information .p-in-item:hover .flag-logos-overlap img:nth-child(1) { transition-delay: 0.0s; }
.developer-api-area .integrate-content .pay-information .p-in-item:hover .flag-logos-overlap img:nth-child(2) { transition-delay: 0.1s; }
.developer-api-area .integrate-content .pay-information .p-in-item:hover .flag-logos-overlap img:nth-child(3) { transition-delay: 0.2s; }
.developer-api-area .integrate-content .pay-information .p-in-item:hover .flag-logos-overlap img:nth-child(4) { transition-delay: 0.3s; }
.developer-api-area .integrate-content .pay-information .p-in-item:hover .flag-logos-overlap img:nth-child(5) { transition-delay: 0.4s; }

.api-code .integrate-content .pay-information .p-in-item h3 {
    color: var(--color-white);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.api-code .integrate-content .pay-information .p-in-item .p-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
}
.api-code .integrate-content .pay-information .p-in-item {
    gap: 34px
}
/* Responsive */
@media (max-width: 768px) {
    .developers-code.animated-section {
         background: radial-gradient(circle at 50% 20%, #071E27 0%, #041015 60%, #000102 100%);
        min-height: auto;
    }
}


/* -====================================================
   Complete Operate
====================================================-*/
.complete-operate {
    background: #eef2f3;
}
.complete-operate .trust-headline {
    max-width: 780px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.complete-operate .trust-headline h3 {
    font-family: var(--font-family-telegraf);
    font-weight: 400;
    color: var(--color-text-tertiary);
    font-size: 30px;
    line-height: 42px;
    height: 84px;
}
.complete-operate .information-switching {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}
.complete-operate .information-switching .tab-switchs {
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, rgba(246, 248, 249, 0.64) -4.67%, rgba(255, 255, 255, 0.64) 11.3%, rgba(246, 248, 249, 0.64) 94.92%);
    border-bottom: 1px solid var(--color-grey-light);
}
.complete-operate .information-switching .tab-switchs .switch-button {
    color: var(--color-text-primary);
}
.complete-operate .information-switching .tab-switchs .switch-indicator {
  background: var(--color-text-primary);
}
.complete-operate .information-switching .tab-content-wrapper .switch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}
.complete-operate .information-switching .tab-content-wrapper .switch-container .image-switch {
    object-fit: cover;
    width: 100%;
    height: 380px;
    border-radius: 12px;
}
/* Responsive */
@media (max-width: 767px) {
    .complete-operate .trust-headline h3 {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}


/* -====================================================
   More Than Tool
====================================================-*/
.more-than-tool .headline-area { max-width: 620px; }
.more-than-tool .block-cards-all {
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    border-radius: 22px;
    overflow: hidden;
    z-index: 9;
}
.all-more-tools {
    position: relative;
    width: 100%;
}
.all-more-tools .default-tool-bg {
    border-radius: 22px;
    border: 1px solid #F0F0F0;
    background: var(--surface-1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    height: 544px;
}
.all-more-tools .default-tool-bg::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    width: 90%;
    height: 140px;
    background: #6BAFBF;
    border-radius: 40px;
    /* z-index: 0; */
}
.more-than-tool .block-cards-all .tool-card {
    border-radius: 22px;
    border: 1px solid #F0F0F0;
    background: var(--surface-1);
    box-shadow: 0 4px 20px 0 rgba(126, 126, 126, 0.10);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 9;
    height: 544px;
    overflow: hidden; 
}
.more-than-tool .block-cards-all .tool-card .t-col-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 20px 50px;
    flex: 1 1 clamp(260px, 60%, 600px);
}
.more-than-tool .block-cards-all .tool-card .t-col-content .headline-area {
    align-items: flex-start;
    max-width: 400px;
}
.more-than-tool .block-cards-all .tool-card .t-col-image {
    flex: 1 1 clamp(200px, 40%, 400px);
    position: relative;
    height: 544px;
    overflow: hidden;
}
.more-than-tool .block-cards-all .tool-card .t-col-image canvas {
    position: relative;
    right: 0;
    top: -20px;
    height: 585px;
    width: 585px;
}

@media (min-width: 1500px) {
   .more-than-tool .block-cards-all .tool-card .t-col-image canvas {
      right: -54px;
   }
}

@media (max-width: 767px) {
    .more-than-tool .block-cards-all .tool-card .t-col-image {
        display: none;
    }
}

/* -====================================================
   Why HC Selection
====================================================-*/
.why-hc-selection {
    background: var(--color-white);
}
.why-hc-selection .headline-area {
    max-width: 620px;
}
.why-hc-selection .selection-card-content {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   align-self: stretch;
   flex-wrap: wrap;
}
.why-hc-selection .selection-card-content .slc-card {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 1 clamp(220px, 30%, 400px);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.50);
    width: 30%;
}
.why-hc-selection .selection-card-content .slc-card .slc-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
    align-self: stretch;
}
.why-hc-selection .selection-card-content .slc-card .slc-text h3 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.why-hc-selection .selection-card-content .slc-card .slc-text p {
    margin: 0;
}

/* Responsive */
@media (max-width: 767px) {
    .why-hc-selection .selection-card-content .slc-card {
        padding: 10px;
    }
    .why-hc-selection .selection-card-content .slc-card .slc-text h3 {
        font-size: 18px;
        line-height: 24px;
    }
}


/* -====================================================
   Testimonial Slide
====================================================-*/ 
.testimonial-slide {
    background-image: url(../images/backgrounds/testimonial-grey.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: visible;
    height: auto;
}
.testimonial-slide .headline-area {
    max-width: 720px;
}
.testimonial-slide .testimonial-grids {
   display: flex;
   align-items: center;
   gap: 24px;
   width: 100%;
   justify-content: center;
   margin-top: 80px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding-bottom: 20px;
   scrollbar-width: none;
}
.testimonial-slide .testimonial-grids::-webkit-scrollbar {
  display: none;
}
.testimonial-slide .testimonial-grids .testi-boxes {
    scroll-snap-align: center;
    flex: 0 0 401px;
}

.testimonial-slide .testimonial-grids .testi-boxes.center {
  border: 1px solid var(--color-white);
  background: var(--surface-1);
  padding: 8px;
  height: 290px;
}
.testimonial-slide .testimonial-grids .testi-boxes.side {
  height: 248px;
}

.testimonial-slide .testimonial-grids .box-default {
    display: flex;
    width: 401px;
    height: 232px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 20px;
    border: 1px solid rgba(232, 232, 232, 0.50);
    background: var(--color-white);
    box-shadow: 0 0 14px 0 rgba(120, 120, 120, 0.05);
}
.testimonial-slide .testimonial-grids .testi-boxes .quote-user {
    color: var(--color-base-light);
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.16px;
    font-weight: 400;
}
.testimonial-slide .testimonial-grids .testi-boxes .quote-user .top-company-logo {
    display: none;
    margin-bottom: 20px;
}
.testimonial-slide .testimonial-grids .testi-boxes.center .quote-user {
    border-radius: 18px;
    border: 1px solid rgba(232, 232, 232, 0.50);
    background: var(--color-white);
    box-shadow: 0 0 14px 0 rgba(120, 120, 120, 0.05);
    padding: 20px 18px;
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.testimonial-slide .testimonial-grids .testi-boxes.center .quote-user .top-company-logo {
    display: block;
}
.testimonial-slide .testimonial-grids .testi-boxes.center .quote-user .top-company-logo img {
    object-fit: contain;
    width: auto;
    height: 38px;
}
.testimonial-slide .testimonial-grids .testi-boxes .intro-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.testimonial-slide .testimonial-grids .testi-boxes .intro-user .name-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.testimonial-slide .testimonial-grids .testi-boxes .intro-user .name-info img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.testimonial-slide .testimonial-grids .testi-boxes .intro-user .name-info .name-display {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
}
.testimonial-slide .testimonial-grids .testi-boxes .intro-user .name-info .name-display h3 {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-base-dark);
    font-family: var(--font-family-inter);
    font-weight: 500
}
.testimonial-slide .testimonial-grids .testi-boxes .intro-user .name-info .name-display p {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-base-light);
}
.testimonial-slide .testimonial-grids .testi-boxes .intro-user .company-logo img {
    object-fit: contain;
    width: 100%;
    height: 44px;
}

.testimonial-slide .testimonial-scrollbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    margin-top: 40px;
}
.testimonial-slide .testimonial-scrollbar button {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50%;
    border: 1px solid #EBEBEB;
    background: var(--color-white);
}
.testimonial-slide .testimonial-scrollbar button img {
    width: 20px;
}


/* -====================================================
   Investors List
====================================================-*/ 
.investors-list {
    background: var(--color-brand-muted);
    padding: 0;
}
.investors-list .investor-wrap {
   position: relative;
}
.investors-list .head-opacity {
    width: 920px;
    position: absolute;
    top: 50%;
   transform: translateY(-50%);
    z-index: 2;
    background: linear-gradient(270deg, rgba(236, 241, 243, 0.00) 8.73%, rgba(236, 241, 243, 0.95) 44%, #ECF1F3 65.39%);
}
.investors-list .headline-area {
    align-items: flex-start;
    padding: 80px 80px 60px;
    width: 100%;
}
.investors-list .headline-area h2, .investors-list .headline-area p  {
    max-width: 340px;
}

.investors-list .investor-marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.investors-list .investor-track {
  display: flex;
  width: max-content;
}
.investor-wrap .investor-track .investor-slides {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 100px 0;
}
.investor-wrap .investor-track .investor-slides:nth-child(2) {
    margin-left: 16px;
}
 
.investor-wrap .investor-slides .investor-box {
    box-shadow: 0 0 14px 0 rgba(120, 120, 120, 0.05);
    position: relative;
}
.investor-wrap .investor-slides .investor-box .user-bg {
  border-radius: 10px 10px 0 0;
}
.investor-wrap .investor-slides .investor-box .user-bg img {
    width: 240px;
    border-radius: 10px;
}
.investor-wrap .investor-slides .investor-box .user-view {
   background: #172B33;
   border-radius: 0 0 10px 10px;
   padding: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}
.investor-wrap .investor-slides .investor-box .user-view .name-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.investor-wrap .investor-slides .investor-box .user-view .name-area h3 {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-white);
    font-family: var(--font-family-inter);
    font-weight: 500;
}
.investor-wrap .investor-slides .investor-box .user-view .name-area p {
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-family: var(--font-family-inter);
    font-size: 10px;
    font-weight: 400;
    line-height: 16px; 
    letter-spacing: -0.1px;
}
.investor-wrap .investor-slides .investor-box .user-view a {
    text-decoration: none;
    background: transparent;
}
.investor-wrap .investor-slides .investor-box .user-view a img {
    width: 18px;
}
.investor-wrap .investor-slides .investor-box:hover .user-view a img {
   mix-blend-mode: soft-light;
}

/* Responsive */
@media (max-width: 767px) {
    .investors-list {
        overflow: hidden;
    }
    .investors-list .head-opacity {
        width: 100%;
        position: relative;
        top: 0;
        transform: inherit;
        z-index: 2;
        background: transparent;
    }
    .investors-list .headline-area {
        padding: 100px 30px 0;
    }
    .investor-wrap .investor-track .investor-slides {
        padding-top: 40px;
    }
    .investors-list .investor-track {
        flex-wrap: nowrap;
        flex: 0 0 auto;
    }
    .investor-slides {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .investors-list .headline-area h2, .investors-list .headline-area p {
        max-width: 290px;
    }
}
        

/* -====================================================
   Ready To Move Border
====================================================-*/ 
.ready-to-move-border {
    border-radius: 34px;
    background-color: #14252B;
    height: 586px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden; 
    isolation: isolate;
}
.ready-to-move-border .ready-contents {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 586px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.ready-to-move-border .headline-area {
    border: 1px solid #182C31;
    background: #14252B;
    max-width: 644px;
    padding: 40px 130px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#net-bg, .ready-to-move-border .headline-area {
    opacity: 0;
    transition: transform 0.8s ease;
    will-change: transform; 
}
.ready-to-move-border .area-utils .image-position { 
    position: absolute; 
    opacity: 0;
    transition: transform 0.8s ease;
    will-change: transform;
}
.ready-to-move-border .area-utils #post-ghana {
    top: -20%;
    right: 5%;
    width: 420px;
}
.ready-to-move-border .area-utils #flag-kes {
    top: 17%;
    right: 5.2%;
    width: 160px;
}
.ready-to-move-border .area-utils #map {
    top: -18%;
    left: 5%;
    width: 320px;
}
.ready-to-move-border .area-utils #flag-ngn {
    top: 12%;
    left: 12%;
    width: 150px;
}
.ready-to-move-border .area-utils #money-kenya {
    bottom: -9%;
    right: -3.8%;
    width: 402px;
}
.ready-to-move-border .area-utils #coin {
    bottom: -10%;
    right: 21%;
    width: 110px;
}
.ready-to-move-border .area-utils #post-kenya {
    bottom: 2%;
    left: 0.5%;
    width: 270px;
}
.ready-to-move-border .area-utils #usdc {
    bottom: 29%;
    left: -2.4%;
    width: 140px;
}
/* Responsive */
@media (max-width: 767px) {
    .ready-to-move-border .area-utils #map {
        width: 204px;
        top: -15%;
        left: 4%;
    }
    .ready-to-move-border .area-utils #flag-ngn {
        top: 5%;
        left: 9%;
        width: 70px;
    }
    .ready-to-move-border .area-utils #money-kenya {
        width: 202px;
    }
    .ready-to-move-border .area-utils #coin {
        bottom: -7%;
        right: 39%;
        width: 70px;
    }
    .ready-to-move-border .area-utils #post-kenya {
        width: 120px;
    }
    .ready-to-move-border .area-utils #usdc {
        bottom: 22%;
        left: -7.4%;
        width: 92px;
    }
    .ready-to-move-border .area-utils #post-ghana {
        top: -11%;
        right: -14%;
        width: 200px;
    }
    .ready-to-move-border .area-utils #flag-kes {
        top: 12%;
        right: 3.2%;
        width: 85px;
    }
    .ready-to-move-border .headline-area {
        padding: 20px 26px;
    }
}


/* -====================================================
   Explore Build HC
====================================================-*/
.explore-build-hc .headline-area {
    max-width: 620px;
}
.explore-build-hc .builder-way-grid {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 30px;
}
.explore-build-hc .builder-way-grid .build-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 1 clamp(220px, 30%, 400px);
}
.explore-build-hc .builder-way-grid .build-items .headline-area {
    align-items: flex-start;
    text-align: left;
}
.explore-build-hc .builder-way-grid .build-items .headline-area h3 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.explore-build-hc .builder-way-grid .build-items .box-image {
    border-radius: 16px;
}

.explore-three-grid .builder-way-grid .build-items .box-image {
    border-radius: 16px;
    object-fit: cover;
    height: 220px;
    width: 100%;
}
.explore-build-hc.builder-grey-bg {
    background: var(--surface-4);
}

.grid-two-build {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
}


/* -====================================================
   FAQ query block
====================================================-*/
.faq-query-block .headline-area {
    align-items: flex-start;
    margin: 0;
    text-align: left;
}
.faq-query-block .headline-area p {
    max-width: 400px;
}
.faq-query-block .query-grid {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   width: 100%;
   flex-wrap: wrap;
}
.faq-query-block .query-grid .headline-area {
    flex: 2 1 280px;
}
.faq-query-block .query-grid .fq_wrap_all {
    flex: 3 1 320px;
}
.fq_wrap_all {
    position: relative;
    width: 100%;
}
.fq_wrap_all .item--fq {
    border-radius: 20px;
    border: 1px solid transparent;
    background: var(--color-white);
    padding: 22px;
    margin-bottom: 20px;
    cursor: pointer;
    opacity: 0.6;
}
.fq_wrap_all .item--fq.active {
    border: 1px solid var(--color-grey-medium);
    background: var(--surface-4);
    opacity: 1;
}
.fq_wrap_all .item--fq .fa-angle-down, .fq_wrap_all .item--fq .fa-angle-up {
    width: 16px;
} 
.fq_wrap_all .item--fq .fa-angle-down {
    display: none;
}
.fq_wrap_all .item--fq.active .fa-angle-down {
    display: block;
}
.fq_wrap_all .item--fq.active .fa-angle-up {
   display: none;
}
.fq_wrap_all .item--fq h3 {
    color: #111;
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 0;
}
.fq_wrap_all .item--fq p {
    margin-bottom: 0;
    margin-top: 18px;
}
.fq_wrap_all .item--fq ul {
    margin-bottom: 0;
}
.fq_wrap_all .item--fq .head-qstn {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}
.body-qstn {
    display: none;
}
@media (max-width: 768px) {
    .fq_wrap_all .item--fq {
        padding: 12px;
        margin-bottom: 14px;
    }
    .fq_wrap_all .item--fq h3 {
        font-size: 15px;
        line-height: 24px;
    }
}


/* -====================================================
   All Inner Banner
====================================================-*/
/*-- wallet banner --*/
.wallet-banner {
    background: var(--surface-3);
}
.wallet-banner .walt-wrapper {
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,0.4) 75%, transparent 100%);
    mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,0.4) 75%, transparent 100%);
}
.wallet-banner .headline-area {
    max-width: 820px;
    text-align: left;
    margin: 0;
}
.wallet-banner .inline-button-area {
    justify-content: flex-start;
}
.wallet-banner .banner-grid {
    height: 680px;
    width: 100%;
    position: relative;
    margin-bottom: 90px;
}
.wallet-banner .banner-grid .image-display {
    position: absolute;
    bottom: -34%;
    right: 0;
    width: 100%;
}
/* .wallet-banner .image-display img {
  animation: float 6s ease-in-out infinite;
} */
.wallet-banner .image-display img:nth-child(1) {
  animation-delay: 0s;
}
.wallet-banner .image-display img:nth-child(2) {
  animation-delay: 1s;
}
.wallet-banner .image-display img:nth-child(3) {
  animation-delay: 2s;
}

.wallet-banner .banner-cubes {
   display: flex;
   align-items: flex-start;
   gap: 30px;
}
.wallet-banner .banner-cubes .cube-block {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}
.wallet-banner .banner-cubes .cube-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.wallet-banner .banner-cubes .cube-block img {
    width: 48px;
}
.wallet-banner .banner-cubes .cube-block .info-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}
.wallet-banner .banner-cubes .cube-block .info-area .title {
    font-weight: 600;
    color: var(--color-text-main);
    font-size: 17px;
    line-height: 18.7px; 
    letter-spacing: -0.44px;
}
.wallet-banner .banner-cubes .cube-block .info-area .describe {
    color: var(--color-base-dark);
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
}
@media (max-width: 768px) {
    .wallet-banner .walt-wrapper {
        mask-image: none;
    }
    .wallet-banner .banner-cubes {
        flex-direction: column;
    }
    .wallet-banner .banner-grid {
        height: 600px;
        margin-bottom: 0;
    }
    .wallet-banner .banner-grid .image-display {
        bottom: 2%;
    }
    .wallet-banner .banner-cubes .cube-block .info-area .title {
        font-size: 15px;
    }
}

/*-- otc-banner --*/
.otc-banner {
    background: var(--surface-3);
    padding-top: 50px;
}
.otc-banner .headline-area {
    max-width: 720px;
}
.otc-banner .headline-area .otc-head-tag {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-inter);
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: -0.13px;
    color: var(--color-text-main);
    margin-bottom: 12px;
}
.otc-banner .headline-area p {
    max-width: 500px;
}
.otc-banner .headline-area p strong {
    font-weight: 600;
}
.otc-banner .headline-area .inline-button-area {
    margin-top: 50px;
    transform: scale(0.85);
}
.otc-banner .default-content-gap {
    position: relative;
}
.otc-banner .otc-utils .image-position {
    position: absolute;
    opacity: 0;
    /* transition: all 1s cubic-bezier(0.22, 1, 0.36, 1); */
     transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.otc-banner .otc-utils #otc-screen-1 {
    top: 26%;
    left: 6%;
    transform: translateX(-40px) scale(0.9);
}
.otc-banner .otc-utils #otc-screen-1 img { width: 276px; }
.otc-banner .otc-utils #otc-screen-2 {
    top: 80%;
    left: 11%;
    transform: translateX(-20px) translateY(30px) scale(0.9);
}
.otc-banner .otc-utils #otc-screen-2 img { width: 300px; }
.otc-banner .otc-utils #otc-screen-3 {
    top: 32%;
    right: 3%;
    transform: translateX(40px) scale(0.9);
}
.otc-banner .otc-utils #otc-screen-3 img { width: 310px; }
.otc-banner .otc-utils .image-position img {
    animation: continuousFloat 5s ease-in-out infinite;
}

@keyframes continuousFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
/* .is-floating {
    animation: continuousFloat 5s ease-in-out infinite !important;
} */

.otc-flag-run {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    gap: 8px;
    padding-top: 100px;
}
.otc-flag-run h2 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-base-light);
    margin-bottom: 30px;
}
.otc-flag-run .flags-row  {
  overflow: hidden;
  width: 100%;
  position: relative;
  -webkit-mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% );
  mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% );
}
.otc-flag-run .flags-row .track-flags {
  display: flex;
  width: max-content;
}
.otc-flag-run .flags-row .track-flags .flags-grid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.otc-flag-run .flags-row .track-flags .flags-grid:nth-child(2) {
    margin-left: 8px;
}
.otc-flag-run .flags-row .flags-grid .col-flag img {
  height: 54px;
  object-fit: cover;
}
.otc-flag-run .flags-row .track-flags.marquee-towards-left {
    animation-play-state: paused;
}

.otc-flag-run .flags-row .track-flags.marquee-towards-right {
    animation-play-state: paused;
}

.otc-flag-run:hover .flags-row .track-flags.marquee-towards-left,
.otc-flag-run:hover .flags-row .track-flags.marquee-towards-right {
    animation-play-state: running;
}


.otc-banner.animate .otc-utils .image-position {
  opacity: 1;
  transform: translate(0) scale(1);
}

.otc-banner.animate .inline-button-area {
  transform: scale(1);
}

.otc-banner.animate .otc-flag-run {
  opacity: 1;
  transform: translateY(0);
}

#otc-screen-1 { transition-delay: 0.1s; }
#otc-screen-2 { transition-delay: 0.25s; }
#otc-screen-3 { transition-delay: 0.4s; }

@media (max-width: 768px) {
    .otc-banner .otc-utils {
        display: none;
    }
    .otc-flag-run .flags-row .flags-grid .col-flag img {
        height: 28px;
    }
    .otc-flag-run {
        padding-top: 60px;
    }
}


/*-- minting banner --*/
.minting-banner {
    background: var(--surface-3);
    padding-bottom: 20px; 
}
.minting-banner .mint-wrapper {
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,0.4) 75%, transparent 100%);
    mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,0.4) 75%, transparent 100%);
}
.minting-banner .headline-area {
    max-width: 680px;
    text-align: left;
    margin: 0;
}
.minting-banner .inline-button-area {
    justify-content: flex-start;
}
.minting-banner .inline-button-area .button-theme, 
.minting-banner .inline-button-area .button-theme-secondary {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s ease;
    will-change: transform, opacity;
}
.minting-banner .banner-grid {
    height: 680px;
    width: 100%;
    position: relative;
}
.minting-banner .area-utils .image-position { 
    position: absolute;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.8s ease;
    will-change: transform, opacity;
}
.minting-banner .area-utils .image-position.animated {
    opacity: 1;
    transform: scale(1);
}
.minting-banner .area-utils #mint-post-ghana {
    top: 9%;
    right: 16%;
    width: 430px;
}
.minting-banner .area-utils #mint-flag-kes {
   top: 43%;
    right: 2%;
    width: 130px;
    z-index: 1;
}
.minting-banner .area-utils #mint-map {
    bottom: 11%;
    right: -1%;
    width: 340px;
}
.minting-banner .area-utils #mint-flag-ngn {
    bottom: -4%;
    right: 17%;
    width: 210px;
}
.minting-banner .area-utils #mint-coin {
    top: 17%;
    right: 34%;
    width: 116px;
}
.minting-banner .area-utils #mint-post-kenya {
    bottom: 7%;
    right: 40%;
    width: 274px;
}
.minting-banner .area-utils #mint-usdc {
    bottom: 28%;
    right: 52%;
    width: 162px;
}
.minting-banner .area-utils #mint-usdt {
    top: -1%;
   right: 5%;
    width: 156px;
}


/*-- API banner --*/
.api-banner {
    position: relative;
    height: 1100px;
}
.api-banner .banner-dark-bg {
    background-image: url(https://imagedelivery.net/XYPCTx1RfzadZ3NdvQYJrQ/5e7963d5-c77b-4c9d-4a92-d0c48d56a500/public);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    height: 810px;
    width: 100%;
}
.api-banner .headline-area {
    max-width: 720px;
}
.api-banner .api-motion-block {
    max-width: 1200px;
    margin: 0 auto;
}
.api-banner .api-motion-block .motion-box {
   border-radius: 32px;
   border: 1px solid rgba(22, 93, 119, 0.02);
   background: #F6F8F9;
   padding: 6px;
   position: relative;
}
.api-banner .api-motion-block .motion-box img {
    border-radius: 24px;
}
.api-banner .api-motion-block .motion-box .code-canvas {
    max-width: 720px;
    position: absolute;
    top: 0;
    left: -2%;
    right: 0;
    margin: auto;
    /* box-shadow: 0 40px 80px 0 rgba(78, 77, 89, 0.24); */
}
.api-banner .inline-button-area .button-theme {
    background: var(--color-brand-theme);
}
/* Responsive */
@media (max-width: 768px) {
    .api-banner {
        height: 620px;
    }
    .api-banner .api-motion-block .motion-box .code-canvas {
        left: 16%;
        top: -6%;
    }
    .api-banner .api-motion-block .motion-box .code-canvas canvas {
        width: 220px;
    }
    .api-banner .banner-dark-bg {
        height: 520px;
    }

    .api-banner .api-motion-block .motion-box {
        border-radius: 18px;
    }
    .api-banner .api-motion-block .motion-box img {
        border-radius: 14px;
    }
}


/*-- About banner --*/
.about-banner {
    position: relative;
    height: 1150px;
    background: var(--color-brand-muted);
}
.about-banner .banner-dark-bg {
    background-image: url(../images/backgrounds/about-banner.png);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    height: 492px;
    width: 100%;
}
.about-banner .headline-area {
    max-width: 720px;
}
.about-banner .about-people-group {
    max-width: 1200px;
    margin: 0 auto;
}
.about-banner .inline-button-area {
    position: relative;
    top: -100px;
}


/*-- virtual card banner --*/
.virtual-card-banner {
    background: var(--surface-3);
}
.virtual-card-banner .headline-area {
    max-width: 800px;
    text-align: left;
    align-items: flex-start;
}
.virtual-card-banner .headline-area p {
    max-width: 660px;
}
.virtual-card-banner .vc-banner-grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}
.virtual-card-banner .vc-banner-grid .col-vc:first-child {
  flex: 3;
}
.virtual-card-banner .vc-banner-grid .col-vc:last-child {
  flex: 2;
}
.virtual-card-banner .inline-button-area {
    justify-content: flex-start;
}
.virtual-card-banner .inline-button-area .button-theme {
   background: #1C1C1C;
}
.virtual-card-banner .inline-button-area .button-theme-secondary .logo-pay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.virtual-card-banner .inline-button-area .button-theme-secondary .logo-pay img {
    width: 16px;
}
.virtual-card-banner .inline-button-area .button-theme-secondary .logo-pay span {
    background: #b5b5b5;
    height: 12px;
    width: 1px;
}
.virtual-card-banner .inline-button-area .button-theme-secondary:hover img {
    transform: inherit;
}
@media (max-width: 768px) { 
    .virtual-card-banner .vc-banner-grid {
        flex-direction: column;
    }
}


/*-- Security Banner --*/
.security-banner {
    position: relative;
    background-image: url(https://imagedelivery.net/XYPCTx1RfzadZ3NdvQYJrQ/d4afdf7a-b2ad-4f6a-332b-d0afe922ed00/public);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 100%;
}
.security-banner .default-content-gap {
    gap: 160px;
}
.security-banner .headline-area {
    max-width: 720px;
    align-items: flex-start;
}
.security-banner .inline-button-area  {
    justify-content: flex-start;
}
.security-banner .inline-button-area .button-theme {
    background: var(--color-brand-theme);
}
.security-banner #image-banner-security {
    width: 610px;
    position: absolute;
    right: 4%;
    bottom: 22%;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s ease;
    will-change: transform, opacity;
}

.security-banner .inline-button-area .button-theme, 
.security-banner .inline-button-area .button-theme-secondary {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s ease;
    will-change: transform, opacity;
}

.security-banner .banner-cubes {
   display: flex;
   align-items: flex-start;
   gap: 30px;
   max-width: 920px;
   border-top: 1px solid rgba(164, 164, 164, 0.10);
   padding: 50px 0;
}
.security-banner .banner-cubes .cube-block {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s ease;
    will-change: transform, opacity;
}
.security-banner .banner-cubes .cube-block img {
    width: 48px;
}
.security-banner .banner-cubes .cube-block .info-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}
.security-banner .banner-cubes .cube-block .info-area .title {
    font-weight: 600;
    color: var(--color-white);
    font-size: 17px;
    line-height: 18.7px; 
    letter-spacing: -0.44px;
}
.security-banner .banner-cubes .cube-block .info-area .describe {
    color: var(--color-white);
    opacity: 0.7;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
}

/* Responsive */
@media (max-width: 767px) {
    .security-banner .banner-cubes {
        flex-direction: column;
    }
    .security-banner #image-banner-security {
        width: 200px;
        bottom: 35%;
    }
}


/*-- Tester Banner --*/
.tester-banner {
    background: var(--surface-3);
    padding-bottom: 0; 
}
.tester-banner .testing-wrapper {
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,0.4) 75%, transparent 100%);
    mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,0.4) 75%, transparent 100%);
}
.tester-banner .headline-area {
    max-width: 680px;
    text-align: left;
    margin: 0;
}
.tester-banner .inline-button-area {
    justify-content: flex-start;
}
.tester-banner .banner-grid {
    height: 620px;
    width: 100%;
    position: relative;
}
.tester-banner .banner-imag {
    width: 720px;
    position: absolute;
    right: 1%;
    bottom: 0;
}


/*-- Virtual Account Banner --*/
.virtual-account-banner {
    background: var(--surface-3);
    padding-bottom: 0; 
}
.virtual-account-banner .grip-wrap {
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient( to bottom, black 0%, black 65%, rgba(0,0,0,0.4) 90%, transparent 100%);
    mask-image: linear-gradient( to bottom, black 0%, black 65%, rgba(0,0,0,0.4) 90%, transparent 100%);
}
.virtual-account-banner .headline-area {
    max-width: 780px;
    text-align: left;
    margin: 0;
}
.virtual-account-banner .inline-button-area {
    justify-content: flex-start;
}
.virtual-account-banner .inline-button-area .button-theme, 
.virtual-account-banner .inline-button-area .button-theme-secondary {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s ease;
    will-change: transform, opacity;
}
.virtual-account-banner .banner-grid {
    height: 994px;
    width: 100%;
}
.virtual-account-banner .map-account-area {
    position: relative;
}
@media (max-width: 768px) { 
    .virtual-account-banner .grip-wrap {
        mask-image: none;
    }
    .virtual-account-banner .banner-grid {
         height: 600px;
    }
}


/*-- Coverage Banner --*/
.coverage-banner {
    position: relative;
    height: 1320px;
}
.coverage-banner .coverage-bg-grey {
    background: var(--surface-3);
    height: 910px;
}
.coverage-banner .headline-area {
    max-width: 780px;
    text-align: left;
    margin: 0;
}
.coverage-segment .segment-block {
  border-radius: 40px;
  border: 1px solid #D9E3E6;
  background: #FAFCFD;
  display: flex;
  padding: 8px;
  align-items: flex-start;
}
.coverage-segment .segment-block .sidebar-area {
    border-radius: 32px;
    border: 1px solid #EEEFF2;
    background: var(--color-white);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    display: flex;
    width: 500px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    overflow: hidden;
}
.coverage-segment .segment-block .sidebar-area .search-area {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #EEEFF2;
    background: var(--color-white);
    gap: 12px;
    border-radius: 30px 30px 0 0;
}
.coverage-segment .segment-block .sidebar-area .search-area input {
    width: 100%;
    border: none;
    background: transparent;
}

.coverage-segment .segment-block .sidebar-area .country-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-height: 684px;
    overflow-y: scroll;
}
.coverage-segment .segment-block .sidebar-area .country-list::-webkit-scrollbar-track {	background-color: #fff;}
.coverage-segment .segment-block .sidebar-area .country-list::-webkit-scrollbar {
    width: 2px;
    background-color: #ddd;
}
.coverage-segment .segment-block .sidebar-area .country-list::-webkit-scrollbar-thumb {
    background-color: #ddd;
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li {
    display: flex;
    padding: 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #EEEFF2;
    cursor: pointer;
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li:last-child {
    border-bottom: none;
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid {
   display: flex;
    align-items: center;
    gap: 8px;
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid img {
   width: 40px;
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid .name-view {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 1px
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid .name-view h2 {
   margin: 0;
   font-size: 16px;
   line-height: 24px;
   font-weight: 500;
   color: var(--color-text-main);
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid .name-view p {
   margin: 0;
   font-size: 14px;
   line-height: 20px;
   color: var(--color-base-light);
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li .right-grid .blank-radio {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1.5px solid var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li .right-grid .blank-radio .filled-radio {
     width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-brand-primary);
    display: none;
}
.coverage-segment .segment-block .sidebar-area .country-list .item-li.active .right-grid .blank-radio .filled-radio {
    display: block;
}

.coverage-segment .segment-block .display-area {
    padding: 80px;
}
.coverage-segment .segment-block .display-area .tab-country-content {
    display: flex;
    max-width: 874px;
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
    margin: 0 auto;
}
.coverage-segment .segment-block .display-area .tab-country-content.active {
  display: flex;
}
.coverage-segment .segment-block .display-area .tab-country-content .flag-view img {
    width: 100px;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features {
    border-top: 1px solid #E2E3E6;
    border-bottom: 1px solid #E2E3E6;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
}
.coverage-segment .segment-block .display-area .tab-country-content h3 {
    text-transform: uppercase;
    color: #879194;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list .block-features {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list .block-features .td-featr .f-title {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 24px;
   font-weight: 500;
   color: var(--color-base-dark);
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list .block-features .td-featr .f-title img {
    width: 24px;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list 
.block-features.data-unavailable .td-featr .f-title {
    opacity: 0.6;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list 
.block-features .indv-features {
    display: flex;
    align-items: center;
    gap: 8px;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list 
.block-features .indv-features .tag-badge {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 58px;
    border: 1px solid #B3D3DE;
    background: #E7F3F7;
    color: #1F7997;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: -0.36px;
}
.coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list 
.block-features.data-unavailable .indv-features .tag-badge {
    border: 1px solid #E6E6E6;
    background: rgba(222, 224, 225, 0.30);
    color: var(--color-text-tertiary);

}
.coverage-segment .segment-block .display-area .tab-country-content .mobile-money-providers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}
.coverage-segment .segment-block .display-area .tab-country-content .mobile-money-providers .mm-list .provider-badge {
    display: inline-block;
   
    margin-right: 10px;
    margin-bottom: 10px;
    align-items: center;
    
}
.coverage-segment .segment-block .display-area .tab-country-content .mobile-money-providers .mm-list .provider-badge .bdg-info {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
    border-radius: 70px;
    border: 1px solid rgba(230, 230, 230, 0.50);
    background: var(--color-white);
    font-size: 20px;
    line-height: 18px;
    color: var(--color-base-dark);
    font-weight: 500;
}
.coverage-segment .segment-block .display-area .tab-country-content .mobile-money-providers .mm-list .provider-badge .bdg-info img {
    object-fit: contain;
    height: 24px;
    width: 24px;
}
@media (max-width: 768px) {
    .coverage-banner { height: 1200px; }
    .coverage-segment .segment-block { flex-direction: column; padding: 6px; }
    .coverage-segment .segment-block .sidebar-area { width: auto; }
    .coverage-segment .segment-block .sidebar-area .search-area { padding: 16px; }
    .coverage-segment .segment-block .sidebar-area .search-area input { font-size: 14px; }
    .coverage-segment .segment-block .sidebar-area .country-list .item-li { font-size: 14px; padding: 14px; }
    .coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid img { width: 34px; }
    .coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid .name-view h2 {
        font-size: 14px;
        line-height: 20px;
    }
    .coverage-segment .segment-block .sidebar-area .country-list .item-li .left-grid .name-view p {
        font-size: 12px;
        line-height: 18px;
    }
    .coverage-segment .segment-block .sidebar-area .country-list { max-height: 202px; }
    .coverage-segment .segment-block .display-area { padding: 20px 10px 10px; }
    .coverage-segment .segment-block .display-area .tab-country-content .flag-view img { width: 50px; }
    .coverage-segment .segment-block .display-area .tab-country-content { gap: 24px; }
    .coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list .block-features .td-featr .f-title {
        gap: 8px;
        font-size: 12px;
    }
    .coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list .block-features .td-featr .f-title img {
        width: 18px;
    }
    .coverage-segment .segment-block .display-area .tab-country-content .country-features .feature-list .block-features .indv-features .tag-badge {
        font-size: 10px;
        line-height: 14px;
    }
    .coverage-segment .segment-block .display-area .tab-country-content h3 { font-size: 10px; line-height: 16px; }
    .coverage-segment .segment-block .display-area .tab-country-content .mobile-money-providers .mm-list .provider-badge .bdg-info {
        padding: 6px 8px;
        gap: 6px;
        font-size: 12px;
        line-height: 16px;
    }
    .coverage-segment .segment-block .sidebar-area .country-list .item-li .right-grid .blank-radio {
        width: 18px;
        height: 18px;
    }
    .coverage-segment .segment-block .sidebar-area .country-list .item-li .right-grid .blank-radio .filled-radio {
        width: 10px;
        height: 10px;
    }
}


/* -====================================================
   How OTC Works
====================================================-*/
.how-otc-works {
    padding-top: 50px;
}
.how-otc-works .headline-area {
    max-width: 620px;
}
.how-otc-works .otc-card-content {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   align-self: stretch;
   flex-wrap: wrap;
}
.how-otc-works .otc-card-content .slc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    /* flex: 1 1 clamp(220px, 30%, 400px); */
    flex: 1;
    width: 30%;
}
.how-otc-works .otc-card-content .slc-card .image-otc {
    /* padding: 34px; */
   border-radius: 12px;
   background: #F6F8F9;
}
.how-otc-works .otc-card-content .slc-card .slc-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
    align-self: stretch;
}
.how-otc-works .otc-card-content .slc-card .slc-text h3 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.how-otc-works .otc-card-content .slc-card .slc-text p {
    margin: 0;
}


/* -====================================================
   Liquidity OTC Needs
====================================================-*/
.liquidity-otc-needs .headline-area {
    max-width: 920px;
}
.liquidity-otc-needs .trade-grid {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 40px;
}
.liquidity-otc-needs .trade-grid .item-liqd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    gap: 50px;
    flex: 1 1 clamp(220px, 30%, 400px);
    border-radius: 24px;
    background: linear-gradient(180deg, #F6F8F9 -46.63%, #ECF1F3 68.91%); 
}
.liquidity-otc-needs .trade-grid .item-liqd .imag-view {
    max-width: 370px;
    margin: 0 auto;
}
.liquidity-otc-needs .trade-grid .item-liqd .headline-area {
    max-width: 480px;
    text-align: left;
    align-items: flex-start;
}
.liquidity-otc-needs .trade-grid .item-liqd .headline-area h3 {
    max-width: 400px;
}


/* -====================================================
   How OTC Works
====================================================-*/
.regulated-stablecoin {
   background: var(--surface-4);
}
.regulated-stablecoin .regulate-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}
.regulated-stablecoin .regulate-block .headline-area {
    align-items: flex-start;
    max-width: 780px;
}

.security-stablecoins {
    background: var(--color-white);
    padding-bottom: 60px;
}


/* -====================================================
   API Overview
====================================================-*/
.api-overview {
    border-top: 1px solid var(--color-grey-medium);
}
.api-overview .headline-area {
    align-items: flex-start;
    max-width: 480px;
}
.api-overview .api-switching {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.api-overview .api-switching .tab-switchs {
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, rgba(246, 248, 249, 0.64) -4.67%, rgba(255, 255, 255, 0.64) 11.3%, rgba(246, 248, 249, 0.64) 94.92%);
    border-bottom: 1px solid var(--color-grey-light);
}
.api-overview .api-switching .tab-switchs .switch-button {
    color: var(--color-text-primary);
}
.api-overview .api-switching .tab-switchs .switch-indicator {
  background: var(--color-text-primary);
}
.api-overview .api-switching .tab-content-wrapper .switch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}
.api-overview .api-dev-grid {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   width: 100%;
}
.api-overview .api-dev-grid .item-payout {
    display: flex;
    flex: 1;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 20px;
    border: 1px dashed #F5F5F5;
    background: #F5F5F5;
    height: 240px;
    opacity: 0.7;
}
.api-overview .api-dev-grid .item-payout .top-icons {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.api-overview .api-dev-grid .item-payout .top-icons img {
    width: 45px;
}
.api-overview .api-dev-grid .item-payout .top-icons .arrow-button {
   width: 40px;
   height: 40px;
   background: var(--color-white);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: rotate(-40deg) translateX(0);
    transition: transform 0.7s ease;
}
.api-overview .api-dev-grid .item-payout .top-icons .arrow-button img {
   width: 20px;
   
}
.api-overview .api-dev-grid .item-payout h3 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.api-overview .api-dev-grid .item-payout p {
    margin: 0;
    overflow: hidden;
    max-height: 1.4em;
    transition: max-height 0.5s ease, opacity 0.3s ease;
}
.api-overview .api-dev-grid .item-payout:hover p {
   max-height: 6em;
}

.api-overview .api-dev-grid .item-payout:hover {
    opacity: 1;
    border: 1px dashed #134E64;
    background: #F0F5F7;
}
.api-overview .api-dev-grid .item-payout:hover .top-icons .arrow-button {
    /* transform: rotate(0deg) translateX(6px); */
   animation: arrowBounce 0.8s ease infinite;
}
@keyframes arrowBounce {
    0%   { transform: rotate(-40deg) translateX(6px); }
    50%  { transform: rotate(-40deg) translateX(10px); }
    100% { transform: rotate(-40deg) translateX(6px); }
}

/* Responsive */
@media (max-width: 767px) {
    .api-overview .api-dev-grid {
        flex-direction: column;
        gap: 18px;
    }
    .api-overview .api-dev-grid .item-payout {
        width: 100%;
        gap: 24px;
    }
    .api-overview .api-dev-grid .item-payout p {
        max-height: inherit;
    }
}


/* -====================================================
   What Build With HC
====================================================-*/
.what-build-with-hc .headline-area {
    max-width: 760px;
}
.tab-horz-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}
.tab-horz-wrap .item-seperate-horz {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    transition: opacity 0.6s ease, transform 0.6s ease;
    padding: 40px 0;
}
.tab-horz-wrap .item-seperate-horz .col-block {
    flex: 1;
    width: 50%;
}
.tab-horz-wrap .item-seperate-horz .col-block .image-holder {
    text-align: center;
}
/* .tab-horz-wrap .item-seperate-horz .col-block .image-holder > * {
  display: none;
}

.tab-horz-wrap .item-seperate-horz .col-block .image-holder > *.active-image {
  display: block;
} */

.tab-horz-wrap .item-seperate-horz .col-block .image-holder {
  position: relative;
  min-height: 320px;
}

.tab-horz-wrap .item-seperate-horz .col-block .image-holder > * {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.tab-horz-wrap .item-seperate-horz .col-block .image-holder > *.active-image {
  opacity: 1;
  pointer-events: auto;
}

.tab-horz-wrap .item-seperate-horz .col-block .image-holder .canv-hold { max-width: 700px; }
.tab-horz-wrap .item-seperate-horz .col-block .image-holder .canv-hold canvas { max-width: 600px; }

.accordian-cards .card {
    background: transparent;
    border-bottom: 1px solid #EDEDEE;
    padding: 30px 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}
.accordian-cards .card .card-head h3 {
    font-size: 28px;
    line-height: 34px;
    color: rgba(6, 25, 32, 0.30);
    font-family: var(--font-family-telegraf);
    font-weight: 500;
}
.accordian-cards .card.active_card .card-head h3 {
    font-weight: 600;
    color: var(--color-text-secondary);
}
.accordian-cards .card .card-body {
    /* display: none; */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.4s ease;
}
.accordian-cards .card.active_card .card-body {
    /* display: block; */
    max-height: 1000px; 
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(1, 0, 1, 0), opacity 0.6s ease;
    padding-top: 10px;
}
.accordian-cards .card.active_card .card-body .usecase-block {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 20px;
   margin-top: 60px;
}
.accordian-cards .card.active_card .card-body h4 {
    color: var(--color-brand-primary);
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: -0.13px;
    transition: color 0.3s ease;
}
.accordian-cards .card.active_card .card-body .card-listing {
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    align-self: stretch;
}
.accordian-cards .card.active_card .card-body .card-listing .card-item {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
   transition: opacity 0.6s ease, transform 0.6s ease;
   font-size: 16px;
   line-height: 24px;
}

.tab-horz-wrap .item-seperate-horz .image-holder img {
  display: none;
  width: 100%;
  max-width: 100%;
}
.tab-horz-wrap .item-seperate-horz .image-holder img.active-image {
  display: block;
}

.tab-horz-wrap .item-seperate-horz .col-block .virtual-card-title {
    max-width: max-content;
    margin-bottom: 50px;
}
.tab-horz-wrap .item-seperate-horz .col-block .virtual-card-title .title-works {
   color: #06151B;
   border: 1px solid rgba(6, 21, 27, 0.15);
   background: linear-gradient(178deg, rgba(0, 0, 0, 0.00) 1.63%, rgba(0, 0, 0, 0.20) 193.61%), #F8F8F8;
}
/* Responsive */
@media (max-width: 768px) {
   .tab-horz-wrap .item-seperate-horz {
    flex-direction: column;
   }
   .tab-horz-wrap .item-seperate-horz .col-block {
    width: 100%;
   }
   .accordian-cards .card .card-head h3 {
    font-size: 20px;
    line-height: 28px;
   }
   .accordian-cards .card {
        padding: 14px 0;
        gap: 2px;
    }
}


/* -====================================================
   Fees Tableframe
====================================================-*/
.fees-tableframe {
   background: #14252B;
}
.fees-tableframe .tableframe-wrap {
    display: flex;
    max-width: 1106px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    width: 100%;
}
.fees-tableframe .tableframe-wrap .row-table {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   width: 100%;
   border-bottom: 1px solid #253338;
   padding: 10px 0 22px;
}
.fees-tableframe .tableframe-wrap .row-table:last-child {
    border-bottom: none;
}
.fees-tableframe .tableframe-wrap .col-table {
    text-transform: uppercase;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
.fees-tableframe .tableframe-wrap .col-table:first-child {
    color: rgba(255, 255, 255, 0.60);
}
.fees-tableframe .tableframe-wrap .col-table:last-child {
    color: #FCFCFD;
    font-family: var( --font-family-telegraf);
}
@media (max-width: 768px) {
   .fees-tableframe .tableframe-wrap .col-table {
        text-transform: none;
        font-size: 11px;
        line-height: 18px;
    }
    .fees-tableframe .tableframe-wrap .col-table:last-child {
        text-align: right;
        max-width: 140px;
    }
}


/* -====================================================
   Smart Card Need
====================================================-*/
.smart-card-need {
    background: #F6F6F6;
}
.smart-card-need .headline-area {
    max-width: 860px;
}
.smart-card-need .smart-need-wraps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; 
  width: 100%;
}

.smart-card-need .smart-need-wraps .col-needs {
  width: 100%;
  border-radius: 20px;
  border: 1px solid #EFEFEF;
  background: var(--color-white);
}
.smart-card-need .smart-need-wraps .col-needs .image-area {
    text-align: center;
    height: 350px;
}
.smart-card-need .smart-need-wraps .col-needs .info-view {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: 420px;
}
.smart-card-need .smart-need-wraps .col-needs .info-view h3 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.smart-card-need .smart-need-wraps .col-needs .info-view p {
    margin: 0px;
}

.smart-card-need .mid-text-visa {
   display: flex;
   align-items: center;
   justify-content: center;
}
.smart-card-need .mid-text-visa img {
    width: 52px;
    vertical-align: middle;
    margin: 0 6px;
}
/* Responsive */
@media (max-width: 768px) {
    .smart-card-need .smart-need-wraps {
        grid-template-columns: repeat(1, 1fr);
    }
    .smart-card-need .smart-need-wraps .col-needs .image-area {
        height: auto;
    }
    .smart-card-need .smart-need-wraps .col-needs .info-view h3 {
        font-size: 18px;
        line-height: 28px;
    }
    .smart-card-need .mid-text-visa {
        flex-direction: column;
    }
    .smart-card-need .mid-text-visa img {
        width: 30px;
        margin: 4px 6px;
    }
}



/* -====================================================
   Rotate Block Area
====================================================-*/
.rotate-block-area .all-contains {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 100px;
    flex-wrap: wrap;
    width: 100%;
}
.rotate-block-area .all-contains .rotate-grids {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.rotate-block-area .all-contains .rotate-grids .rt-col {
    flex: 1 1 clamp(280px, 50%, 540px);
}
.rotate-block-area .all-contains .rotate-grids .rt-col .headline-area {
    align-items: flex-start;
}

/* Responsive */
@media (max-width: 767px) {
    .rotate-block-area .all-contains {
        gap: 80px;
    }
    .rotate-block-area .all-contains .rotate-grids:nth-child(even)  {
       flex-direction: column-reverse;
    }
    .rotate-block-area .all-contains .rotate-grids {
        gap: 20px;
    }
}


/* -====================================================
   Data Security Bar
====================================================-*/
.data-security-bar {
   background: var(--surface-1);
}
.data-security-bar .headline-area {
    align-items: flex-start;
}
.data-security-bar .secure-bar-grid {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 80px;
}
.data-security-bar .secure-bar-grid .item-security {
    display: flex;
    flex: 1;
}
.data-security-bar .secure-bar-grid .item-security:last-child {
    border-left: 1px solid #D4DADC;
    padding-left: 90px;
}
.data-security-bar .secure-bar-grid .item-security .headline-area h2 {
    color: var(--color-text-tertiary);
    font-size: 26px;
    line-height: 34px;
    font-family: var(--font-family-inter);
    font-weight: 600;
}
/* Responsive */
@media (max-width: 767px) { 
    .data-security-bar .secure-bar-grid {
        flex-direction: column;
        gap: 60px;
    }
    .data-security-bar .secure-bar-grid .item-security:last-child {
        border-top: 1px solid #D4DADC;
        border-left: 0;
        padding-top: 70px;
        padding-left: 0;
    }
}

/* -====================================================
   Early Tester
====================================================-*/
.early-tester .headline-area {
    max-width: 920px;
}
.early-tester .trade-grid {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 30px;
}
.early-tester .trade-grid .item-liqd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    gap: 50px;
    flex: 1 1 clamp(220px, 30%, 400px);
    border-radius: 24px;
    background: linear-gradient(180deg, #F6F8F9 -46.63%, #ECF1F3 68.91%); 
}
.early-tester .trade-grid .item-liqd .imag-view {
    max-width: 370px;
    margin: 0 auto;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.early-tester .trade-grid .item-liqd .headline-area {
    max-width: inherit;
    text-align: left;
    align-items: flex-start;
}
.early-tester .trade-grid .item-liqd .headline-area h3 {
    max-width: 400px;
    font-size: 30px;
    line-height: 38px;
}


/* -====================================================
   Tester Feature
====================================================-*/
.tester-feature {
    background: #14252B;
    padding-bottom: 0;
}
.tester-feature .headline-area {
    align-items: flex-start;
    max-width: 480px;
}
.tester-feature .full-border {
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #243339;
    margin: 60px 0 0;
}
.tester-feature .feature-test-wraps {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
}
.tester-feature .feature-test-wraps .box-test {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 30px;
    gap: 32px;
    flex: 1 1 clamp(220px, 30%, 200px);
    border-right: 1px solid #243339;
}
.tester-feature .feature-test-wraps .box-test:first-child {
    padding-left: 0;
}
.tester-feature .feature-test-wraps .box-test:last-child {
    border-right: none;
}
.tester-feature .feature-test-wraps .box-test .fe-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}
.tester-feature .feature-test-wraps .box-test .fe-info h3 {
    font-weight: 600;
    color: var(--color-white);
    font-size: 16px;
    line-height: 24px;
}
.tester-feature .feature-test-wraps .box-test .fe-info p {
    margin: 0;
     color: var(--color-white);
     opacity: 0.7;
}
/* Responsive */
@media (max-width: 767px) {
  .tester-feature .full-border {
    display: none;
  }
  .tester-feature .feature-test-wraps .box-test {
    border-right: none;
    border-bottom: 1px solid #243339;
    padding-left: 0;
  }
  .tester-feature .feature-test-wraps .box-test:last-child {
    border-bottom: none;
  }
}


/* -====================================================
   Simplify Ramp Operation
====================================================-*/
.simplify-ramp-operation {
    position: relative;
}
.simplify-ramp-operation .headline-area {
    max-width: 800px;
}
.simplify-ramp-operation .headline-area p {
    max-width: 600px;
}
.simplify-ramp-operation .operation-ramp-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}
.simplify-ramp-operation .operation-ramp-block .full-view-image {
    width: 100%;
}
.simplify-ramp-operation .operation-ramp-block .min-box-area {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.simplify-ramp-operation .operation-ramp-block .min-box-area .item-ramp {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}
.simplify-ramp-operation .operation-ramp-block .min-box-area .item-ramp .title-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}
.simplify-ramp-operation .operation-ramp-block .min-box-area .item-ramp .title-area h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}
.simplify-ramp-operation .operation-ramp-block .min-box-area .item-ramp .title-area p {
    margin: 0;
}
@media (max-width: 768px) {
    .simplify-ramp-operation .operation-ramp-block .min-box-area {
        flex-direction: column;
    }
}


/* -====================================================
   Empower Business Earn
====================================================-*/
.empower-business-earn {
   padding: 0;
}
.empower-business-earn .headline-area {
    max-width: 560px;
}
.empower-business-earn .dark-bg-block {
    padding: 100px 0;
    position: relative;
     background: #14252B;
}
.empower-business-earn .va-head-tag {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-inter);
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: -0.13px;
    color: var(--color-white);
    margin-bottom: 12px;
}
.empower-business-earn .inline-button-area {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -32px;
    background: #06151B;
    max-width: fit-content;
    margin: 0 auto;
    padding: 10px;
    border-radius: 12px;
    z-index: 9;
}
.empower-business-earn .inline-button-area .button-theme {
    background: var(--color-brand-theme);
}
.empower-business-earn .team-talk {
    width: 100%;
    height: 600px;
}
.empower-business-earn .team-talk .full-img {
    position: relative;
    background-image: url(./../images/virtual-account/team-talk.webp);
     /* background-color: #0000;
    background-image: linear-gradient(#1116, var(--surface-4)), url(./../images/virtual-account/team-talk.webp); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
     overflow: hidden;
    height: 600px;
}
/* .empower-business-earn .team-talk .full-img::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(245 247 248 / 19%) 65%, var(--surface-4) 100%);
} */
@media (max-width: 768px) {
    .empower-business-earn .team-talk {
        height: auto;
    }
    .empower-business-earn .team-talk .full-img {
        height: 200px;
    }
}


/* -====================================================
   Our Mission
====================================================-*/
.mission-wrapper {
    background: var(--color-brand-muted);
}
.mission-wrapper .default-content-gap {
    gap: 100px
}
.mission-wrapper .our-mission-top {
   display: flex;
   align-items: flex-start;
   gap: 100px;
   flex-wrap: wrap;
}
.mission-wrapper .our-mission-top .col-item {
    flex: 1 1 clamp(280px, 50%, 540px);
}
.mission-wrapper .our-mission-top .col-item .image-mission {
    max-width: 600px;
}
.mission-wrapper .our-mission-top .col-item .image-mission img {
    border-radius: 8px;
    box-shadow: 0 8px 16px -4px rgba(78, 77, 89, 0.24), 0 4px 32px -4px rgba(78, 77, 89, 0.16), 0 24px 48px -12px rgba(78, 77, 89, 0.08), 0 48px 96px -24px rgba(78, 77, 89, 0.08);

}
.mission-wrapper .our-mission-top .col-item .describe-mission {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    max-width: 540px;
}
.mission-wrapper .our-mission-top .col-item .describe-mission .headline-area {
    align-items: flex-start;
}
.mission-wrapper .our-mission-top .col-item .describe-mission .headline-area h2 {
    font-size: 28px;
    line-height: 38px;
    font-family: var(--font-family-telegraf);
    font-weight: 500;
}
.mission-wrapper .our-mission-top .col-item .describe-mission .headline-area:last-child {
    border-top: 1px solid #e6e6e7;
    padding-top: 40px;
}
.mission-wrapper .mission-sound {
   display: flex;
   align-items: flex-start;
   gap: 30px;
   flex-wrap: wrap;
}
.mission-wrapper .mission-sound .headline-area {
    flex: 1 1 clamp(280px, 50%, 540px);
    flex-direction: row;
    gap: 100px;
}
.mission-wrapper .mission-sound .headline-area h3 {
    font-size: 44px;
    line-height: 50px;
    font-family: var(--font-family-telegraf);
    font-weight: 600;
    max-width: 600px;
}


/* -====================================================
   Teams Honeycoin
====================================================-*/
.teams-honeycoin {
    background-image: url(../images/backgrounds/teams-bg.png);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.teams-honeycoin .headline-area {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 100px;
    overflow: hidden;
    white-space: nowrap;
}
.teams-honeycoin .headline-area h2 {
    color: var(--color-primary-orange);
    font-size: 140px;
    line-height: 1;
    display: inline-block;
    font-family: var(--font-family-telegraf);
    font-weight: 400;
}
.teams-honeycoin .all-members {
 display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
}

.teams-honeycoin .all-members .t_items {
  display: flex;
  flex-direction: column;
  transition: transform 0.7s ease;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.teams-honeycoin .all-members .t_items  img {
    filter: drop-shadow(0 44.495px 88.99px rgba(78, 77, 89, 0.24));
    transition: filter 0.4s ease;
}
.teams-honeycoin .all-members .t_items:hover img {
  filter: 
    drop-shadow(0 44.495px 88.99px rgba(78, 77, 89, 0.24))
    grayscale(100%);
}
.teams-honeycoin .all-members .t_items .member-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.teams-honeycoin .all-members .t_items .member-details h3 {
    margin: 0;
    font-size: 28px;
    line-height: 38px;
    font-weight: 600;
    color: #D7DADB;
    font-family: var(--font-family-telegraf);
}
.teams-honeycoin .all-members .t_items .member-details p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-primary-orange);
}

.teams-honeycoin .teams-contact-role {
    padding-top: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}
.teams-honeycoin .teams-contact-role .headline-area {
    max-width: 680px;
    overflow: inherit;
    white-space: inherit;
    margin-bottom: 0;
}
.teams-honeycoin .teams-contact-role .headline-area h4 {
    font-size: 44px;
    line-height: 50px;
    font-family: var(--font-family-telegraf);
    font-weight: 700;
    color: var(--color-white);
}
.teams-honeycoin .teams-contact-role .headline-area p {
    color: var(--color-white);
    margin: 0;
}


/* -====================================================
   Currency Converter Calculator
====================================================-*/
.currency-converter-calculator {
    background-image: url('./../images/backgrounds/currency-converter-banner.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 140px 0 240px;
}
.currency-converter-calculator .default-content-gap {
    gap: 50px;
}
.currency-converter-calculator .headline-area {
    max-width: 780px;
}
.converter-block {
    max-width: 1200px;
    margin: 0 auto;
}
.converter-block .convert-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.converter-block .convert-group .note-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-base-light);
    font-weight: 400;
}
.converter-block .convert-group .converter-segment {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 24px;
    background: var(--color-white);
    box-shadow: 0 6px 12px -3px rgba(78, 77, 89, 0.06), 0 8px 24px 0 rgba(78, 77, 89, 0.12);
    max-width: 980px;
}
.converter-block .convert-group .converter-segment .conversion-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: relative;
}
.converter-block .convert-group .converter-segment .conversion-tab .swap-button {
    position: absolute;
    top: 50%;
    left: 46.7%;
    transform: translateY(-50%);
    background: var(--color-white);
    border-radius: 50%;
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    pointer-events: none;
}
.converter-block .convert-group .converter-segment .conversion-tab .swap-button img {
    width: 24px;
}

.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg {
    display: flex;
    padding: 16px 24px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 12px;
    background: #F6F6F7;
    position: relative;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg label{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-text-main);
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section input {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--color-text-main);
    width: 100%;
    font-family: var(--font-family-telegraf);
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .number-convert {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--color-text-main);
    min-width: 270px;
    font-family: var(--font-family-telegraf);
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box .selected-display {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-black);
    width: max-content;
    cursor: pointer;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box .selected-display .image-country {
    width: 20px;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click {
    position: absolute;
    z-index: 9;
    top: 88%;
    right: 5%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 16px -5px;
    cursor: pointer;
    background: var(--color-white);
    border-radius: 8px;
    padding: 18px;
    min-width: 292px;
    display: none;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box.open 
.dropdown-click {
    display: block;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box .search-control {
    width: 100%;
    font-size: 14px;
    background: transparent;
    border: 1px solid #e6e6e6;
    border-radius: 30px;
    padding: 4px 12px;
    height: 38px;
    font-weight: 400;
}

.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box .country-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    height: 180px;
    width: 100%;
    overflow: auto;
}

.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box .country-list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px #d6d6d6;
  background-color: #F5F5F5;
}

.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box .country-list::-webkit-scrollbar {
  width: 2px;
  background-color: #F5F5F5;
}

.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box .country-list::-webkit-scrollbar-thumb {
  background-color: #aeaeae;
  border: 2px solid #aeaeae;
}


.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box .country-list .item-country {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
}
.converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section .selection-box 
.dropdown-click .country-drop-box .country-list .item-country img {
    width: 26px;
}

.converter-block .convert-group .converter-segment .rate-exchange-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
 }
 .converter-block .convert-group .converter-segment .rate-exchange-tab .convert-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
 }
.converter-block .convert-group .converter-segment .rate-exchange-tab .convert-display .num-small {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-base-dark);
    letter-spacing: -0.16px;
}
.converter-block .convert-group .converter-segment .rate-exchange-tab .convert-display .num-large {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px; 
    letter-spacing: -0.48px;
    font-family: var(--font-family-telegraf);
    color: #879194;
}
.converter-block .convert-group .converter-segment .rate-exchange-tab .convert-display .num-large span {
    color: var(--color-base-dark);
}
.converter-block .convert-group .converter-segment .rate-exchange-tab .rate-button-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
}
.converter-block .convert-group .converter-segment .rate-exchange-tab .rate-button-area p {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-base-light);
}
.converter-block .convert-group .converter-segment .rate-exchange-tab .rate-button-area .custom-btn {
    padding: 12px 16px;
}
/* Responsive */
@media (max-width: 768px) {
    .currency-converter-calculator {
        padding: 80px 0 120px;
    }
    .converter-block {
        max-width: 0;
    }
    .converter-block .convert-group .converter-segment {
        padding: 16px;
    }
    .converter-block .convert-group .converter-segment .conversion-tab {
        flex-direction: column;
        gap: 20px;
    }
    .converter-block .convert-group .converter-segment .rate-exchange-tab {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
  
    .converter-block .convert-group .converter-segment .conversion-tab .convert-form-bg .amount-section {
        align-items: flex-end;
        flex-direction: column;
    }
    .converter-block .convert-group .converter-segment .conversion-tab .swap-button {
        left: 39.7%;
    }
    .converter-block .convert-group .converter-segment .rate-exchange-tab .rate-button-area {
        align-items: flex-start;
        gap: 10px;
        width: 100%;    
    }
    .converter-block .convert-group .converter-segment .rate-exchange-tab .rate-button-area .inline-button-area {
        justify-content: flex-start;
    }
    .converter-block .convert-group .converter-segment .rate-exchange-tab .rate-button-area .custom-btn {
        padding: 16px 16px;
        width: 100%;
        justify-content: center;
    }
    .converter-block .convert-group .note-tag {
        width: 300px;
        align-items: flex-start;
    }
}


/* -====================================================
   Tracker Converter Map
====================================================-*/
.tracker-converter-map {
    background-image: url('./../images/backgrounds/currency-converter-map.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.tracker-converter-map .default-content-gap {
    gap: 100px;
}
.tracker-converter-map .headline-area {
    max-width: 780px;
}
.tracker-converter-map .history-chart-box {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.tracker-converter-map .history-chart-box .chart-display-group {
    display: flex;
    max-width: 980px;
    margin: 0 auto;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    border-radius: 40px;
    border: 1px solid #D9E3E6;
    background: #FAFCFD;
    position: relative;
}
.tracker-converter-map .history-chart-box .chart-display-group .title-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}
.tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline {
    display: flex;
    justify-content: space-between;
     align-items: center;
    width: 100%;
}
.tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline h2 {
    font-size: 28px;
    line-height: 36px;
    font-family: var(--font-family-telegraf);
    color: var(--color-text-secondary);
    font-weight: 700;
}
.tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline .timeframe-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
}
.tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline .timeframe-info .cnv-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text-tertiary);
}
.tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline .timeframe-info p {
   font-size: 14px;
   line-height: 20px;
   color: var(--color-base-dark);
}
.tracker-converter-map .history-chart-box .chart-display-group .duration-tab {
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    background: #EDEDEE;
}
.tracker-converter-map .history-chart-box .chart-display-group .duration-tab button {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.tracker-converter-map .history-chart-box .chart-display-group .duration-tab button.active {
    background: var(--color-white);
}
.tracker-converter-map .history-chart-box .chart-display-group .chart-area {
   padding: 14px;
   width: 100%;
   background: var(--color-white);
   border-radius: 12px;
   border: 1px solid #EEEFF2;
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}
.tracker-converter-map .history-chart-box .chart-display-group .chart-area canvas {
    width: 100%;
    height: 420px;
    display: block;
}
.tracker-converter-map .history-chart-box .chart-display-group .chart-area {
    min-height: 448px;
}

.tracker-converter-map .history-chart-box .chart-display-group #noDataMessage {
    position: absolute;
    top: 57%;
    left: 0;
    right: 0;
    font-weight: 400;
}

.tracker-converter-map .popular-pairs {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.tracker-converter-map .popular-pairs .pair-groups {
    display: flex;
    max-width: 980px;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
}
.tracker-converter-map .popular-pairs .pair-groups .headline-area h3 {
    font-size: 44px;
    line-height: 50px;
    font-family: var(--font-family-telegraf);
    font-weight: 700;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table {
    width: 100%;
   border-collapse: separate;
    border-spacing: 0;
}
.tracker-converter-map .popular-pairs thead {
    position: relative;
}

.tracker-converter-map .popular-pairs thead::after {
    content: "";
    display: block;
    height: 10px; 
    background: transparent;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table thead tr th {
    padding: 12px 18px;
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-align: left;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table thead tr th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table thead tr th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 22%;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr td {
    padding: 14px 18px;
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: left;
    border: 1px solid #ebebeb;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr:first-child td:first-child {
    border-top-left-radius: 8px;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr:first-child td:last-child {
    border-top-right-radius: 8px;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* .tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr td:last-child {
    text-align: right;
} */
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr td .currency-box {
   display: flex;
    padding: 4px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #F3F3F3;
    width: max-content;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr td .currency-box .item-view {
    color: var(--color-base-dark);
    display: flex;
    align-items: center;
    gap: 4px;
}
.tracker-converter-map .popular-pairs .pair-groups .curr-box table tbody tr td .currency-box .item-view img {
    width: 20px;
}
/* Responsive */
@media (max-width: 768px) { 
    .tracker-converter-map .history-chart-box .chart-display-group {
        padding: 20px;
        border-radius: 30px;
    }
    .tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
    .tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline h2 {
        font-size: 20px;
        line-height: 28px;
    }
    .tracker-converter-map .history-chart-box .chart-display-group .title-section .chart-headline .timeframe-info {
         align-items: flex-start;
    }
    .tracker-converter-map .history-chart-box .chart-display-group .duration-tab {
        max-width: 220px;
        overflow-x: scroll;
        white-space: nowrap;
        overflow-y: hidden;
    }
    .tracker-converter-map .history-chart-box .chart-display-group .chart-area {
        padding: 8px;
    }
    .tracker-converter-map .history-chart-box .chart-display-group .duration-tab button {
        padding: 6px 10px;
        font-size: 12px;
        line-height: 18px;
    }
}


/* -====================================================
   Contact Form Banner
====================================================-*/
.contact-form-banner {
    background: var(--surface-3);
    padding-bottom: 110px;
}
.contact-form-banner .headline-area {
    max-width: 600px;
    text-align: left;
    align-items: flex-start;
}
.contact-form-banner .headline-area p {
    max-width: 580px;
}
.contact-form-banner .contact-banner-grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}
.contact-form-banner .contact-banner-grid .col-contact {
  flex: 1;
}
/* Responsive */
@media (max-width: 767px) {
    .contact-form-banner .contact-banner-grid {
        flex-direction: column;
    }
}


/* -====================================================
   Support Mail
====================================================-*/
.support-mail {
    background: #14252B;
    background-image: url('./../images/backgrounds/contact-us-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.support-mail .headline-area .title-works {
    color: #06151B;
    border: 1px solid rgba(6, 21, 27, 0.15);
    background: linear-gradient(178deg, rgba(0, 0, 0, 0.00) 1.63%, rgba(0, 0, 0, 0.20) 193.61%), #F8F8F8;
}
.support-mail .headline-area .contact-link {
  position: relative;
  color: #4E666F;
  font-family: var(--font-family-telegraf);
  font-size: 44px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: -0.88px;
  text-decoration: none;
  margin-top: 24px;
}
.support-mail .headline-area .contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 4px;
  background-image: radial-gradient( circle, #8D8D8D 1.5px, transparent 1.6px );
  background-size: 10px 4px;
  background-repeat: repeat-x;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}
.support-mail .headline-area .contact-link:hover::after {
  transform: scaleX(1);
}


/* -====================================================
   Press Media Logo to Avoid
====================================================-*/
.press-brand-banner {
    background-image: url(../images/backgrounds/press-media-bg.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.press-brand-banner .headline-area {
    max-width: 740px;
}
.press-brand-banner .headline-area h1 { 
    font-size: 90px;
    line-height: 100px;
}
.press-brand-banner .brand-tab-area {
    display: flex;
    align-items: center;
    gap: 40px;
}
.press-brand-banner .brand-tab-area button {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    background: transparent;
    color: var(--color-white);
    font-size: 16px;
    line-height: 24px;
}
.press-brand-banner .brand-tab-area button.active {
    background: var(--color-brand-muted);
    color: var(--color-brand-primary);
}
.press-container {
    display: none;
}
.press-container.active {
    display: block;
}
.press-brand-banner .sub-text-press {
    color: var(--color-white);
    height: 42px;
}

.press-brand-banner .all-brand-logo {
   display: flex;
   align-items: flex-start;
   width: 100%;
   gap: 80px;
   flex-direction: column;
}
.grid-brand {
    padding-top: 40px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 60px;
}
.grid-brand .headline-area {
    max-width: 1000px;
    width: 100%;
    align-items: flex-start;
}
.grid-brand .headline-area .title-download {
    display: flex;
    align-items: center;
    gap: 64px;
}
.grid-brand .headline-area .title-download a {
    color: var(--color-primary-orange);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-telegraf);
    font-weight: 600;
}
.grid-brand .headline-area .title-download a:hover {
    text-decoration: none;
}
.grid-brand .headline-area .title-download a img {
    vertical-align: middle;
    margin-left: 2px;
}
.grid-brand .press-wraps {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
}
.grid-brand .press-wraps .press_block .image-conf {
    border-radius: 16px;
    border: 1.103px solid rgba(244, 232, 222, 0.09);
    background: rgba(71, 69, 82, 0.20);
    padding: 8px;
    margin-bottom: 24px;
    position: relative;
}
.grid-brand .press-wraps .press_block .image-conf .transparent-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-brand .press-wraps .press_block .image-conf .transparent-logo img {
    max-width: 350px;
}
.grid-brand .press-wraps .press_block .image-conf .sbhc-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-brand .press-wraps .press_block .image-conf .sbhc-logo img {
    max-width: 350px;
}


.grid-brand .press-wraps .press_block .image-conf .solid-color {
    height: 390px;
    width: 100%;
    border-radius: 16px;
}
.grid-brand .press-wraps .press_block .image-conf .solid-color .code-colors {
    position: absolute;
    bottom: 25px;
    left: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.grid-brand .press-wraps .press_block .image-conf .solid-color .code-colors .code {
    font-weight: 500;
    font-size: 16px;
}
.grid-brand .press-wraps .press_block .image-conf .solid-color .code-colors .code.c-black {
    color: var(--color-black);
}
.grid-brand .press-wraps .press_block .image-conf .solid-color .code-colors .code.c-white {
    color: var(--color-white);
}

.grid-brand .press-wraps .press_block .name-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.grid-brand .press-wraps .press_block .name-content h3 {
    font-family: var(--font-family-telegraf);
    color: var(--color-white);
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
}
.grid-brand .press-wraps .press_block .name-content a {
    text-decoration: none;
    color: var(--color-white);
}
.grid-brand .press-wraps .press_block .name-content button {
    background: transparent;
    color: var(--color-white);
}
/* Responsive */ 
@media (max-width: 768px) {
    .grid-brand .press-wraps {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* -====================================================
   Press Media Logo to Avoid
====================================================-*/
.logo-avoid-wrap .headline-area {
   align-items: flex-start;
   justify-content: flex-start;
}
.logo-avoid-wrap .usage-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
    max-width: 540px;
}
.logo-avoid-wrap .usage-area h3 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.logo-avoid-wrap .usage-area .card-listing {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   align-self: stretch;
}
.logo-avoid-wrap .usage-area .card-listing .card-item {
   color: #111111;
   display: flex;
   align-items: center;
   gap: 16px;
}
.logo-avoid-wrap .avoiding-logo {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
}
.logo-avoid-wrap .avoiding-logo .avd-item {
   position: relative;
   margin-bottom: 40px;
}
.logo-avoid-wrap .avoiding-logo .avd-item .close-icon {
   position: absolute;
   top: -8px;
   left: -8px;
   width: 28px;
   height: 28px;
}

/* Responsive */ 
@media (max-width: 768px) {
    .logo-avoid-wrap .avoiding-logo {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* -====================================================
   Help Center
====================================================-*/
.help_main {
     background: var(--surface-3);
    background: linear-gradient(180deg,rgba(242, 246, 247, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.help_main .default-content-gap {
    gap: 100px;
}
.help_main .headline-area {
    max-width: 820px;
}
.help_main .headline-area h1 { 
    font-size: 80px;
    line-height: 90px;
}

.help-boxes {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
}
.help-boxes .box_blocks {
    background: #eef2f3;
    border: 1px solid #ebeded;
    display: flex;
    width: 100%;
    height: 370px;
    padding: 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 12px;
}
.help-boxes .box_blocks .main_help {
   width: 100%;
   object-fit: cover;
   height: 210px;
   border-radius: 12px;
}
.help-boxes .box_blocks .top-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.help-boxes .box_blocks .top-info h2 {
    color: var(--color-text-secondary);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.42px;
    margin: 0;
}
.help-boxes .box_blocks .bottom-info a {
    color: var(--color-text-secondary);
    font-size: 13px;
    letter-spacing: -0.14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.help-boxes .box_blocks .bottom-info a img {
    width: 14px;
}
.help-boxes .box_blocks .bottom-info a:hover {
    text-decoration: none;
}
.help-boxes .box_blocks .bottom-info a span {
    padding: 2px 0;
    border-bottom: 1px solid var(--color-text-secondary);
}
.still_help_need {
   max-width: 320px;
   margin: 0 auto;
   width: 100%;
}
.still_help_need .hlp-link {
    display: flex;
    padding: 12px 16px 12px 24px;
    justify-content: space-between;
    align-items: center;
}
.still_help_need .hlp-link h3 {
    font-size: 18px;
    letter-spacing: -0.36px;
    font-family: var(--font-family-telegraf);
    font-weight: 400;
}


/* -====================================================
   Help Center Details
====================================================-*/
.detailed_help .default-content-gap {
    max-width: 1240px;
    margin: 0 auto;
}
.page-breadcrum {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 14px;
}
.page-breadcrum a {
    color: #134E64;
}
.page-breadcrum span {
    color: #061920
}
.detailed_help .headline-area {
    align-items: flex-start;
}

.dtl_help_image {
    border-radius: 32px;
    border: 1px solid #EEEFF2;
    background: #FFF;
    box-shadow: 0px 3px 6px 0px rgba(66, 74, 83, 0.12);
    padding: 20px;
    height: 612px;
}
.dtl_help_image .imgVid_pos {
  position: relative;
  border-radius: 16px;
  height: 568px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtl_help_image .imgVid_pos .place-img {
    border-radius: 16px;
    height: 568px;
    width: 100%;
    object-fit: cover;
}
.dtl_help_image .imgVid_pos video {
    width: 100%;
    height: 568px;
    object-fit: cover;
    border-radius: 16px;
}
.dtl_help_image .imgVid_pos iframe {
    width: 100% !important;
    height: 568px;
    border-radius: 16px;
    border: none;
}
#explainerVideo, #explainerVideo2 {
    width: 100%;
}
.dtl_help_image .bg-grad:before {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    border-radius: 16px;
    top: 0;
    left: 0;
    width: 100%;
    height: 568px;
    z-index: 1;
    background: #00000080;
}
.dtl_help_image .imgVid_pos .btn_click {
    position: absolute;
    top: 50%;
    left: 40%;
    z-index: 1;
}
.dtl_help_image .imgVid_pos .btn_click a {
    border: 1px solid #EDEDEE;
    background: #F6F6F7;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #061920;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.dtl_help_image .imgVid_pos .btn_click a:hover {
    text-decoration: none;
}

.helpCn_faq {
     padding-top: 30px;
}
.fq_title h2 {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    font-family: var(--font-family-telegraf);
}

@media (max-width: 767px) {
    .help-boxes .box_blocks {
        margin-bottom: 18px;
    }
    .dtl_help_image .imgVid_pos .place-img {
        height: 170px;
    }










   .about-banner {
      height: 700px;
   }
   .about-banner .inline-button-area {
        top: -26px;
    }
    .mission-wrapper .our-mission-top, .mission-wrapper .default-content-gap {
        gap: 20px
    }
    .mission-wrapper .mission-sound .headline-area {
        flex-direction: column;
        gap: 40px;
    }
    .teams-honeycoin .headline-area h2 {
        font-size: 60px;
    }
    .teams-honeycoin .all-members {
        grid-template-columns: repeat(1, 1fr);
    }
    .teams-honeycoin .all-members .t_items .member-details h3 {
        font-size: 20px;
        line-height: 28px;
    }
    .teams-honeycoin .teams-contact-role .headline-area h4 {
        font-size: 32px;
        line-height: 42px;
    }
}