.csba { padding: 64px 0 160px; }
.csba .content { max-width: 1226px; }
.csba .content-container { position: relative; transition: height 0.5s ease-in-out; width: 100%; overflow: hidden; margin-top: 32px; }
.csba .row { display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; position: absolute; top: 0; left: 0; width: 100%;  }
.csba .row.active { opacity: 1; visibility: visible; }
.csba .row>div { display: flex; flex-direction: column; gap: 12px; width: calc(50% - 6px); }
.csba .row>div>div { background: #16171C; padding: 24px; display: flex; flex-direction: column; flex: 1 1; overflow: clip; }
.csba .row>div>div { flex: 1 1; }
.csba .row>div>div .text h3 { margin: 0 0 12px 0; font-family: "IBMPlexMono"; font-size: 12px; letter-spacing: 0.72px; line-height: 150%; color: #AEBDCC; text-transform: uppercase; }
.csba .row>div>div .text ol { padding-left: 20px; margin: 0; }
.csba .row>div>div .text p, .csba .row>div>div .text li { color: rgba(255, 255, 255, 0.40); font-size: 18px; line-height: 155%; margin: 0 0 16px 0; max-width: calc(100% - 24px); font-weight: 500; }
.csba .row>div>div .text li { margin-bottom: 12px;}
.csba .row>div>div .text li:last-child { margin-bottom: 0; }
.csba .row>div>div .text p u { color: #fff; font-weight: 500; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.28); }
.csba .row>div>div .text p b, .csba .row>div>div .text li b { -webkit-background-clip: text; -moz-background-clip: text; color: transparent; background-image: linear-gradient(170deg, #D8F4FA 8.87%, #D8F4FA 8.87%, #D8F4FA 8.88%, #E9F4F6 31.92%, #FFE454 52.84%, #FFC01C 74.39%, #FFB710 96.58%); }
.csba .row>div>div .picbg { background: url(../img/csba01.png) no-repeat center; background-size: 576px; height: 280px; margin: -64px -24px 15px; width: calc(100% + 48px) }
.csba .row .right>div .picbg { background: url(../img/csba02.png) no-repeat left center; background-size: 592px; height: 200px; margin: -70px 0 7% -30px; }
.csba .row .right>div .picbg.csthree { background: url(../img/csba03.png) no-repeat left center; background-size: 592px; height: 165px; margin: 0 -24px 7% }
.csba .row>div>div .qtext { padding: 24px 0 0 0; }
.csba .row>div>div .qtext .pics { display: flex; padding-bottom: 20px; }
.csba .row>div>div .qtext .pics image { min-width: 72px; z-index: 1;}
.csba .row>div>div .qtext .pics img:last-child { margin-left: -8px; z-index: 0; }
.csba .row>div>div .qtext p { font-size: 18px; line-height: 155%; letter-spacing: 0.36px; margin: 0 0 16px 0; max-width: calc(100% - 40px); font-weight: 500; }
.csba .row>div>div .qtext p:last-child { margin-bottom: 0; }
.csba .row>div>div .qtext p a { font-family: "Inter", sans-serif; font-size: 13px;}
.csba .row>div>div .qtext p a:hover { text-decoration: none; }
.csba .row>div>div .qtext p a u { color: #fff; font-weight: 500; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.28); }
.csba .row>div>div .qtext p a b { font-weight: 400; color: #758094; }
.csba .row.cstwo>div>div .picbg { background: url(../img/csbb01.png) no-repeat center; background-size: 592px; height: 200px; margin: -24px -24px -60px; border-radius: 24px; }
.csba .row.cstwo .right>div .picbg { background: url(../img/csbb02.png) no-repeat center; background-size: 592px; height: 200px; margin: -40px -24px 7%; }
.csba .row.cstwo>div>div .qtext p { line-height: 32px; }
.csba .pages { display: flex; gap: 16px; padding-top: 32px; }
.csba .pages>div { flex: 1 1; border-top: 1px solid rgba(217, 217, 217, 0.3); position: relative; }
.csba .pages>div p { color: rgba(216, 244, 250, 0.3); font-size: 20px; line-height: 150%; margin: 16px 0 0 0; letter-spacing: 0.4px; font-weight: 500; }
.csba .pages>div span { display: block; position: absolute; background: #fff; top: -1px; left: 0; height: 2px; width: 0%; }
.csba .pages>div.active p, .csba .pages>div:hover p { color: #fff; cursor: pointer; }
.hero { padding: 128px 0 410px; overflow: hidden; position: relative; }
.hero .content { position: relative; z-index: 2; }
.hero .content .title { max-width: 810px; }
.hero .btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero .frame { position: absolute; left: 50%; transform: translate(-50%, 0); top: 90px; }
.hero .frame::before { content: ""; display: block; position: absolute; z-index: 4; width: 100%; height: 100%; top: 0; left: 0; }
.hero .frame .layer { position: absolute; top: 0; z-index: 2; }
.hero .frame .row { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.hero .frame .row .dot { display: block; width: 9px; height: 9px; border-radius: 100%; background: #fff; margin-bottom: 1px; }
.hero .frame .row .name { padding: 2px 7px; line-height: 24px; color: #000; background: #fff; letter-spacing: 0.16px; border-radius: 20px; border: 3px solid #000; width: fit-content; font-weight: 600; }
.hero .frame .row ul { list-style: none; padding: 7px 0 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; max-width: 138px; justify-content: center; }
.hero .frame .row ul li { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 150%; letter-spacing: 0.12px; color: #000; background: rgba(255, 255, 255, 0.4); border-radius: 15px; border: 3px solid #000; width: fit-content; padding: 2px 7px 2px 2px; }
.hero .frame .row ul li img { min-width: 20px; border-radius: 100%;  }
.hero .frame .row.latam { bottom: 57px; left: 409px; }
.hero .frame .row.latam ul li { background: #292000; color: #FFCB00; }
.hero .frame .row.africa { bottom: 120px; left: 647px; }
.hero .frame .row.africa ul li { background: #002818; color: #24C479; }
.hero .frame .row.eu { bottom: 270px; left: 757px; }
.hero .frame .row.eu ul li { background: #0A1C40; color: #387AFF; }
.hero .frame .row.uae { bottom: 157px; left: 850px; }
.hero .frame .row.uae ul li { background: #24073D; color: #BD13FB; }
.hero .frame .route { position: absolute; bottom: 158px; left: 474px; z-index: 3; }
.how { padding: 80px 0 0 0; }
.how .slide { padding: 8px 0 32px; display: flex; justify-content: center; }
.how .slide img { max-width: 100%; height: auto; display: block; }
.how .slide img.m_img { display: none; }
.how .bottom { text-align: center; }
.how .bottom p { text-align: center; margin: 0; color: rgba(174, 189, 204, 0.50); line-height: 150%; font-weight: 500; }
.how .bottom p a { color: #fff; }
.how .bottom p a:hover { color: #FFB710; text-decoration: none; }

.why { padding: 120px 0 120px; }
.why .content { display: flex; flex-direction: column; gap: 64px; }
.why .content .row { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; }
.why .content .row>div { max-width: 360px; min-width: 240px; }
.why .content .row>div img { display: block; }
.why .content .row>div h3 { margin: 12px 0; font-size: 24px; line-height: 133%; letter-spacing: 0.48px; font-weight: 600; }
.why .content .row>div p { margin: 0 0 16px 0; color: #AEBDCC; line-height: 150%; letter-spacing: 0.16px; }
.why .content .row>div p:last-child { margin-bottom: 0; }

.steps { padding: 80px 0 160px; overflow: hidden; }
.steps .content { max-width: 1270px; }
.steps .row { display: grid; gap: 40px; grid-template-columns: repeat(4, 1fr); padding-top: 40px; }
.steps .row>div { display: flex; flex-direction: column; gap: 20px; flex: 1 1; min-width: 177px; position: relative; }
.steps .row>div::before { content: ""; display: block; height: 1px; width: calc(100% - 20px); position: absolute; top: 16px; left: 44px; border-top: 1px dashed #FFF; opacity: 0.2; }
.steps .row>div:last-child::before { display: none; }
.steps .row>div h3 { font-size: 24px; line-height: 32px; letter-spacing: 0.48px; font-weight: 600; margin: 0 0 12px 0; }
.steps .row>div p { color: #AEBDCC; line-height: 24px; letter-spacing: 0.16px; margin: 0 0 12px 0; }
.steps .row>div p:last-child { margin-bottom: 0; }
.steps .row>div>span { display: flex; gap: 12px; align-items: center; }
.steps .row>div>span b { color: #FDFEFF; opacity: 0.4; }

.coverage { padding: 120px 0; }
.coverage .row { display: flex; gap: 70px; padding-top: 40px; }
.coverage .row .left { flex: 1 1; max-width: 435px; }
.coverage .row .left>div { padding: 24px 0 32px; border-bottom: 1px solid rgba(117, 128, 148, 0.24); display: flex; gap: 12px; cursor: pointer; }
.coverage .row .left>div:last-child { border-bottom: none; }
.coverage .row .left>div>div { display: flex; flex-wrap: wrap; }
.coverage .row .left .right { display: none; }
.coverage .row .left>div>div img { display: block; height: fit-content; }
.coverage .row .left>div>div h3 { margin: 0 0 12px 0; font-size: 24px; line-height: 32px; font-weight: 600; width: 100%; color: #fff; opacity: 0.3; cursor: pointer; }
.coverage .row .left>div>div span { display: flex; align-items: center; width: fit-content; margin-right: 4px; margin-bottom: 4px; padding: 6px 12px; border-radius: 60px; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.14px; opacity: 0.3; }
.coverage .row .left>div:first-child>div span { background: rgba(0, 135, 81, 0.24); color: #24C479; }
.coverage .row .left>div:nth-child(2)>div span { background: rgba(255, 203, 0, 0.16); color: #FFCB00; }
.coverage .row .left>div:last-child>div span { background: rgba(137, 23, 233, 0.24); color: #BD13FB; }
.coverage .row .left>div:hover>div h3, .coverage .row .left>div:hover>div span, .coverage .row .left>div.active>div h3, .coverage .row .left>div.active>div span { opacity: 1; }
.coverage .row .left>div.active, .coverage .row .left>div.active h3 { cursor: default; }
.coverage .row .right { background: #121214; padding: 32px 32px 48px 32px; flex: 1 1; }
.coverage .row .right>h3 { font-size: 24px; line-height: 32px; font-weight: 600; margin: 0 0 32px 0; }
.coverage .row .right>h4 { color: #AEBDCC; font-family: "IBMPlexMono"; text-transform: uppercase; font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom: 20px; display: block; }
.coverage .row .right .line { height: 1px; width: 100%; background: rgba(117, 128, 148, 0.24); margin: 32px 0; }
.coverage .row .right>p { margin: 0 0 20px 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0.48px; padding-left: 48px; position: relative; }
.coverage .row .right>p b { color: rgba(255, 255, 255, 0.30); font-weight: 500; }
.coverage .row .right>p img { margin-right: 16px; position: absolute; left: 0; top: 0; }
.coverage .row .right>p:last-child { margin-bottom: 0; }
.coverage .row .right ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 12px; flex-wrap: wrap; }
.coverage .row .right ul li { flex: 1 1; background: #232324; padding: 12px 16px; display: flex; align-items: center; gap: 16px; min-height: 73px; position: relative; min-width: 220px; }
.coverage .row .right ul li p { font-size: 18px; letter-spacing: 0.36px; line-height: 24px; margin: 0; }
.coverage .row .right ul li p b { font-family: "IBMPlexMono"; font-size: 14px; text-transform: uppercase; color: #AEBDCC; font-weight: 500; }
.coverage .row .right ul li a { position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; }
.coverage .row .right ul li.add { background: rgba(35, 35, 36, 0.30); width: calc(50% - 6px); flex: none; }
@keyframes fadeInUp20px {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@media (max-width:1260px){
  .csba .row.cstwo .right>div .picbg { background-size: 500px; height: 190px; }
}
@media (max-width:1100px){
  .steps .row { grid-template-columns: repeat(2, 1fr); }
  .coverage .row .right ul li.add { width: initial; flex: 1 1; }
}
@media (max-width:989px){
  .hero { padding-bottom: 520px; }
  .hero .frame { top: 160px; }
  .csba .row { flex-direction: column; }
  .csba .row>div { width: 100%; }
  .csba .title { margin-bottom: 16px; }
  .csba .row.cstwo .right>div .picbg { background-size: contain; }
  .csba .pages>div p { font-size: 14px;}
  .coverage .row { flex-direction: column; gap: 40px; }
  .coverage .row>.right, .coverage .row>.left .list { display: none; }
  .coverage .row .left { max-width: 100%;}
  .coverage .row .left .right { display: block; margin-bottom: 24px; padding: 32px 32px 48px 32px; border-bottom: none; }
}
@media (max-width:896px){
  .how .slide img.m_img { display: block; }
  .how .slide img.d_img { display: none; }
  .why .content { gap: 48px; }
}

@media (max-width:768px){
  .why { padding: 80px 0; }
  .hero { padding-bottom: 350px; }
  .hero .frame { transform: translate(-50%, 0) scale(0.7); margin-left: 40px; }
  .coverage .row .right>p { line-height: 133%; font-size: 18px; }
}

@media (max-width:520px){
  .steps .row { grid-template-columns: repeat(1, 1fr); }
}
@media (max-width:375px){
  .title, .modal-overlay .modal .title { font-size: 30px; }

}
@media (max-width:320px){
  .title img { display: none; }
  header .content.with_b .defb { min-width: 0; }
}