body,
html {
background: #ffffff;
color: #070d25;
height: 100%;
width: 100%;
line-height: 1;
position: relative;
font: 400 18px "Poppins", sans-serif;
}
/* Custom Scrollbar */
*::-webkit-scrollbar {
width: 6px;
height: 5px;
}
*::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}
*::-webkit-scrollbar-thumb {
background-color: rgb(117 117 117 / 20%);
}
.mixed-waves-2 {
background: url("../images/binance-clone-script/mixed_waves.webp") no-repeat right;
}
.link {
color: #070d25;
text-decoration: none;
}
.link:hover {
color: #0a58ca;
}
.h2tag {
font-size: 48px;
font-weight: 600;
margin-bottom: 20px;
text-transform: capitalize;
}
.h2tag span {
/* color: #f046b7; */
}
.h3tag {
font-size: 40px;
font-weight: 600;
margin-bottom: 20px;
}
.h5tag {
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
}
.para {
font-size: 18px;
}
.head {
max-width: 75%;
margin: 0 auto 15px;
text-align: center;
}
@media (max-width: 1199px) {
.para {
font-size: 16px;
}
.h2tag {
font-size: 38px;
}
.h3tag {
font-size: 32px;
}
.h5tag {
font-size: 20px;
}
}
@media (max-width: 991px) {
.head {
max-width: 100%;
}
}
@media (max-width: 767px) {
.h2tag {
font-size: 32px;
padding-bottom: 0 !important;
margin-bottom: 25px !important;
}
.head {
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
.head h2 {
margin-bottom: 10px !important;
}
.h3tag {
font-size: 28px;
}
.h5tag {
font-size: 18px;
line-height: unset;
}
section {
padding: 20px 0 !important;
text-align: center;
}
.inner_sec_2 .svg_button {
margin: 50px auto;
}
}
/* common styles ends */
/* inner_sec_1 */
.inner_sec_1 {
position: relative;
z-index: 1;
padding: 100px 0 30px !important;
min-height: 100vh;
background-color: #000000;
color: #ffffff;
overflow: hidden;
}
.inner_sec_1 .container {
position: relative;
z-index: 2;
}
@media (min-width: 992px) {
/* Base dimmed layer */
.hero-bg-dim {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.8;
background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0) 100%), url("../images/decentralized-exchange-development-company-2023/hero_bg.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
/* Spotlight active reveal layer */
.hero-bg-spotlight {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0) 100%), url("../images/decentralized-exchange-development-company-2023/hero_bg.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
/* Vibrant/bright highlight filters */
filter: brightness(1.7) saturate(2.1) contrast(1.15);
/* Default mask hides spotlight layer until cursor moves */
-webkit-mask-image: radial-gradient(ellipse 0px 0px at 0px 0px, black 0%, transparent 100%);
mask-image: radial-gradient(ellipse 0px 0px at 0px 0px, black 0%, transparent 100%);
will-change: mask-image, -webkit-mask-image;
}
}
.inner_sec_1 .h2tag,
.inner_sec_1 .h3tag {
color: #ffffff;
}
.inner_sec_1 p {
max-width: 92%;
color: #cdd1e4;
}
.main-banner-list {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.main-banner-list li {
list-style: none;
margin-bottom: 15px;
display: flex;
align-items: flex-start;
text-transform: capitalize;
position: relative;
padding-left: 24px;
}
.main-banner-list li::before {
content: "";
min-width: 10px;
height: 10px;
background: #f046b7;
display: inline-block;
margin-right: 15px;
border-radius: 50%;
top: 10px;
position: absolute;
left: 0;
}
.main-banner-list.blue li::before {
background: #2c67d1;
}
.inner_sec_1::before {
/* content: "";
background: url("../images/crypto-market-making-bot-development-company/sec1_linebg.webp")
no-repeat right top;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 50px;
right: 0; */
}
.inner_sec_28 .svg_button,
.inner_sec_21 .svg_button {
margin: 20px auto;
}
.inner_sec_31 .svg_button svg,
.inner_sec_31 .svg_button {
width: 300px;
}
.inner_sec_22 .svg_button,
.inner_sec_22 .svg_button svg {
width: 280px;
}
@media (max-width: 1199px) {
.inner_sec_1 p {
max-width: 100%;
}
/* .inner_sec_1::before {
right: 0;
} */
}
@media (max-width: 991px) {
.inner_sec_1 {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%), url("../images/decentralized-exchange-development-company-2023/hero_bg_mob.webp");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.inner_sec_1 .col-lg-5 {
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 35px 25px !important;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin: 0 auto;
text-align: center;
}
.inner_sec_1 .svg_button {
margin: auto;
}
.title-box-left {
text-align: center;
}
}
@media (max-width: 767px) {
.inner_sec_1 .banimg {
display: none;
}
.inner_sec_1 .svg_button {
margin: 50px auto 0;
}
}
/* inner_sec_1 ends */
/* ============================================================
DEX Portfolio — Single Center Laptop, Sliding Screen Track
============================================================ */
.dex-portfolio-section {
padding: 60px 0 80px;
background: #fff;
overflow: hidden;
/* Clips the peeking screens at the viewport border */
}
.dex-portfolio-heading {
color: #0d0f1a;
margin-bottom: 48px;
}
.dex-color-pink {
color: #f046b7;
}
/* ── Centered wrapper for the laptop & sliding screen track ── */
.dex-laptop-fixed-wrap {
position: relative;
width: min(970px, 90vw);
/* Laptop max-width scaled so screen is exactly 715px * 418px */
margin: 0 auto;
user-select: none;
-webkit-user-select: none;
}
/* The laptop mockup image on top */
.dex-laptop-frame {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 2;
/* Sits in front of the sliding screens */
pointer-events: none;
filter: drop-shadow(0 18px 48px rgba(0, 0, 0, 0.16)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.10));
}
/* ── Screen track outer viewport — matches transparent area of laptop.png ── */
.dex-carousel-outer {
position: absolute;
top: 10.2%;
left: 12.2%;
width: 71.6%;
height: 61%;
z-index: 1;
overflow: visible;
}
/* Flex track that carries the screen images */
.dex-carousel-track {
display: flex;
height: 100%;
gap: 32px;
/* Spacing between the active laptop screen and the side peeking screens */
will-change: transform;
}
/* Each slide — matches exact screen size of the laptop */
.dex-carousel-slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
position: relative;
aspect-ratio: 608 / 423;
opacity: 0.45;
transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
border-radius 0.6s cubic-bezier(0.25, 1, 0.5, 1),
box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1);
border-radius: 8px;
/* Rounded corners for the side peeking screens */
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
/* Drop shadow for side previews */
cursor: pointer;
}
/* Active slide — fits perfectly inside the laptop screen viewport */
.dex-carousel-slide.is-active {
opacity: 1;
border-radius: 0;
/* Flat edge inside the laptop mockup frame */
box-shadow: none;
/* No shadow needed inside the laptop bezel */
}
.dex-screen-fill {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* ── Responsive ── */
@media (max-width: 767px) {
.dex-portfolio-section {
padding: 40px 0 50px;
}
.dex-carousel-outer {
top: 10%;
height: 61.3%;
}
}
/* ============================================================
DEX Portfolio ends
============================================================ */
/* .inner_sec_2 {
padding: 30px 0;
} */
.inner_sec_2 {
padding: 30px 0;
padding-top: 0px !important;
}
.inner_sec_2 .inner_sec_2_bg {
background-color: #F0F5FF;
padding: 38px 20px;
border-radius: 20px;
}
@media (max-width: 767px) {
.inner_sec_2 img {
margin-bottom: 15px;
}
}
@media (max-width: 991px) {
.inner_sec_2 {
text-align: center;
}
}
/* inner_sec_2 ends */
/* inner_sec_15 */
.inner_sec_15 {
padding: 40px 0;
}
.text-slider {
background: #ffe7f7;
background: linear-gradient(90deg, #ffe7f7 0%, rgba(255, 231, 247, 0) 100%);
border-radius: 20px;
border: 1px solid #ffc9ed;
padding: 30px;
position: relative;
min-height: 300px;
}
.text-slider::before {
/* content: "";
background: url("../images/decentralized-exchange-development-company-2023/green_curve.webp")
no-repeat scroll 0 0;
width: 203px;
height: 367px;
position: absolute;
top: 0;
right: 0;
z-index: 0; */
}
.slider-card h5 {
color: #E530B2;
margin-bottom: 20px;
/* max-width: 70%; */
}
.slider-card p {
/* max-width: 70%; */
}
.text-slider .slick-prev {
left: 30px;
top: 88%;
background-color: transparent;
border-radius: 50%;
width: 32px;
height: 32px;
z-index: 9;
}
.text-slider .slick-prev:hover {
background: #E530B2;
}
.text-slider .slick-next {
left: 75px;
right: auto;
top: 88%;
background-color: transparent;
border-radius: 50%;
width: 32px;
height: 32px;
}
.text-slider .slick-next:hover {
background: #E530B2;
}
.text-slider .slick-next::before {
content: "";
background: url("../images/icons/next_icon.webp") no-repeat;
width: 13px;
height: 22px;
position: absolute;
background-size: 70%;
top: 9px;
left: 13px;
}
.text-slider .slick-prev::before {
content: "";
background: url("../images/icons/prev_icon.webp") no-repeat;
width: 13px;
height: 22px;
position: absolute;
background-size: 70%;
top: 9px;
left: 9px;
}
.text-slider .slick-prev:hover::before,
.text-slider .slick-next:hover::before {
filter: brightness(0) invert(1);
}
@media (max-width:1199px) {
.slider-card p {
max-width: 100%;
}
}
@media (max-width: 991px) {
.inner_sec_15 .svg_button {
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.text-slider {
min-height: auto;
}
.text-slider::before {
display: none;
}
.slider-card h5 {
max-width: 100%;
text-align: center;
}
.slider-card p {
text-align: center;
}
.text-slider .slick-prev {
left: 50%;
margin-left: -40px;
z-index: 9;
top: 85%;
}
.text-slider .slick-next {
left: auto;
right: 50%;
margin-right: -40px;
top: 85%;
}
.inner_sec_15 {
/* padding: 20px 0px; */
}
}
@media (max-width: 767px) {
.text-slider .slick-prev {
top: 93%;
}
.text-slider .slick-next {
top: 93%;
}
}
/* inner_sec_18 */
.inner_sec_18 {
padding: 40px 0;
}
.inner_sec_18 .cta-card {
padding: 30px;
border: 0;
display: flex;
justify-content: center;
align-items: center;
background: url(../images/leverage-and-margin-trading-exchange-development/cta-yellow.webp) no-repeat scroll center center;
width: 960px;
height: 233px;
margin: 0 auto;
border-radius: 20px;
}
.cta-yellow-text {
max-width: 60%;
text-align: center;
}
.cta-yellow-text h5 {
text-align: center;
}
@media (max-width: 1199px) {
.inner_sec_18 .cta-card {
background-size: 100% 100%;
max-width: 100%;
height: auto;
border-radius: 20px;
}
}
@media (max-width: 767px) {
.inner_sec_18 .cta-card {
background-size: cover;
padding: 15px;
}
.inner_sec_18 img {
display: none;
}
.cta-yellow-text {
max-width: 100%;
}
}
/* inner_sec_26 */
.inner_sec_26 {
padding: 40px 0;
}
.inner_sec_26.mixed-waves-2 .bgimg {
background: url("../images/stellar-blockchain-wallet-development-services/sec19_bg.webp") no-repeat center;
background-size: 100%;
}
.inner_sec_26 {
padding: 40px 0;
}
.img-overlay-text {
background: url(../images/white-label-cryptocurrency-exchange-software-2023/banner5.webp) no-repeat scroll center top;
min-height: 506px;
margin-bottom: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 auto;
flex-wrap: wrap;
}
.newCenterImage .img-overlay-text {
background: url("../images/decentralized-exchange-development-company-2023/img_02.webp") no-repeat scroll center top;
min-height: 636px;
margin-bottom: 30px;
}
.img-overlay-text>div {
width: 50%;
}
.iot-card {
background: #dedede;
padding: 20px 30px;
border-radius: 20px;
margin-right: auto;
margin-top: 15px;
margin-bottom: 15px;
width: fit-content;
margin-left: auto;
margin-right: 200px;
}
.iot-card h5 {
color: #000;
}
.img-overlay-text>div:nth-child(even) .iot-card {
margin-left: 200px;
margin-right: initial;
}
.iotc-green {
background-color: #ccf7e8;
}
.iotc-orange {
background-color: #ffb6ad;
}
.iotc-purple {
background-color: #f1c7ff;
}
.iotc-pink {
background-color: #ffd9e4;
}
.iotc-blue {
background-color: #c4d9ff;
}
.iotc-ash {
background-color: #ffdad6;
}
.ylw_curve .bgimg {
width: fit-content;
margin: 0 auto;
position: relative;
z-index: 1;
}
.ylw_curve .bgimg::before {
content: "";
position: absolute;
background: url("../images/trust-wallet-clone-script-2023/features_bg1.webp") no-repeat center;
width: 387px;
height: 325px;
left: -110px;
bottom: 0;
top: 0;
margin: auto 0;
z-index: -1;
}
.ylw_curve .bgimg::after {
content: "";
position: absolute;
background: url("../images/trust-wallet-clone-script-2023/features_bg2.webp") no-repeat center;
width: 570px;
height: 297px;
right: -120px;
top: 15px;
z-index: -1;
right: 0;
}
@media (max-width: 991px) {
.newCenterImage .img-overlay-text {
background-image: none;
min-height: auto;
}
.img-overlay-text>div {
width: 100%;
}
.img-overlay-text>div:nth-child(even) .iot-card {
margin-left: 0;
}
.img-overlay-text {
background-image: none;
min-height: unset;
}
.iot-card {
max-width: 100%;
margin-bottom: 30px;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.iot-card:last-child {
margin-bottom: 0;
}
.iot-card:nth-child(even) {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
/* inner_sec_26 ends */
/* inner_sec_21 */
.inner_sec_21 {
padding: 40px 0;
background: url(../images/leverage-and-margin-trading-exchange-development/mixed-waves.webp) no-repeat right top;
}
.inner_sec_21 .card {
border: 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
margin-bottom: 30px;
background: transparent;
}
.inner_sec_21 .card h5 {
color: #ffffff;
background: #dedede;
border-radius: 15px;
padding: 15px;
display: inline-block;
}
.inner_sec_21 .card p {
margin-bottom: 0;
}
.bignumber {
min-width: 150px;
font-size: 64px;
display: inline-flex;
justify-content: flex-end;
margin-right: 15px;
font-weight: 300;
text-align: center;
}
.card-text .category_list {
font-weight: 500 !important;
font-size: 18px !important;
color: #1468ef;
margin-top: 17px;
}
.card-text .category_list_org {
color: #ca7f0f;
}
.card-text .category_list_pink {
color: #e530b2;
}
.card-text .category_list_green {
color: #00d68a;
}
.card-text .category_list_vlt {
color: #5635f1;
}
.card-text .category_list_red {
color: #eb505c;
}
.pink-card .bignumber {
color: #1468ef;
}
.blue-card .bignumber {
color: #e530b2;
}
.yellow-card .bignumber {
color: #8a71ff;
}
.green-card .bignumber {
color: #ff9c0d;
}
.purple-card .bignumber {
color: #00d68a;
}
.red-card .bignumber {
color: #ff6e79;
}
.inner_sec_21 .card.pink-card h5 {
background-color: #f046b7;
}
.inner_sec_21 .card.blue-card h5 {
background-color: #2c67d1;
}
.inner_sec_21 .card.yellow-card h5 {
background-color: #cfac1b;
}
.inner_sec_21 .card.green-card h5 {
background-color: #00d78b;
}
.inner_sec_21 .purple-card h5 {
background-color: #6d0c8d;
}
@media (max-width: 1199px) {
.bignumber {
min-width: 90px;
font-size: 72px;
}
}
@media (max-width: 991px) {
.inner_sec_21 .card {
margin-bottom: 15px;
}
}
@media (max-width: 767px) {
.inner_sec_21 .card h5 {
display: none;
}
.inner_sec_21 .card {
flex-direction: column;
align-items: center;
}
.inner_sec_31 .svg_button,
.inner_sec_22 .svg_button {
margin: 30px auto 0;
}
.bignumber {
display: none;
}
}
@media (max-width:575px) {
.inner_sec_21 {
background-image: none;
}
}
/* inner_sec_21 ends */
/* benefits */
.benefits {
padding: 30px 0;
}
.waves {
position: relative;
z-index: 1;
}
.waves::before {
content: "";
position: absolute;
background: url("../images/trust-wallet-clone-script-2023/waves.webp") no-repeat center;
width: 100%;
height: 100%;
z-index: -1;
background-position: 0px 0%;
right: 0;
max-width: 100%;
}
.benefits .img_box {
background: url("../images/decentralized-exchange-development-company-2023/benefit_imgbg.webp") no-repeat center;
padding: 80px 10px;
}
.benefits .box {
background: #f1c7ff;
border-radius: 20px;
padding: 30px;
width: 420px;
margin: auto;
}
@media (max-width: 991px) {
.benefits .h2tag {
text-align: center;
}
}
@media (max-width: 767px) {
.benefits .img_box {
background-size: contain;
}
}
@media (max-width: 399px) {
.benefits .box {
width: auto;
}
.benefits .img_box {
background: none;
}
}
/* inner_sec_30 */
.inner_sec_30 {
padding: 40px 0;
}
.inner_sec_30 .box {
padding: 30px;
border-radius: 20px;
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
background: #c4d9ff;
margin: 15px;
min-height: 380px;
}
.inner_sec_30 .box .h5tag {
color: #2c67d1;
}
.inner_sec_30 .box:hover {
box-shadow: 0 0 10px 5px #f4f4f6;
}
.inner_sec_30 .box.red {
background: #ffd9e4;
}
.inner_sec_30 .box.red .h5tag {
color: #f046b7;
}
.inner_sec_30 .box.rose {
background: #f1c7ff;
}
.inner_sec_30 .box.rose .h5tag {
color: #6d0c8d;
}
.inner_sec_30 .box .para {
margin-bottom: 0;
}
.inner_sec_30 .slick-prev {
left: 0;
z-index: 2;
top: 50%;
}
.inner_sec_30 .slick-next {
right: 0;
top: 50%;
}
.inner_sec_30 .slick-prev,
.inner_sec_30 .slick-next {
background: #fff !important;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 0 4px 3px rgb(51 51 51 / 10%);
}
.inner_sec_30 .slick-prev:hover,
.inner_sec_30 .slick-next:hover {
background: #fff !important;
}
.inner_sec_30 .slick-prev::before {
content: "";
background: url("../images/stellar-blockchain-wallet-development-services/slick_arw.webp") no-repeat center;
width: 10px;
height: 16px;
display: block;
position: relative;
font-size: 0;
opacity: 1;
}
.inner_sec_30 .slick-next::before {
content: "";
background: url("../images/stellar-blockchain-wallet-development-services/slick_arw.webp") no-repeat center;
width: 10px;
height: 16px;
display: block;
position: relative;
font-size: 0;
transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
.inner_sec_30 .box {
align-items: center;
}
}
/* inner_sec_30 ends */
/* inner_sec_13 */
.inner_sec_13 {
padding: 40px 0;
}
.inner_sec_13 .pink-style h5 {
background: transparent;
margin-bottom: 0px;
}
.inner_sec_13 .blue-style h5 {
background: transparent;
margin-bottom: 0px;
}
.inner_sec_13 .green-style h5 {
background: transparent;
}
.inner_sec_13 .pink-style {
background: #fff4e3 !important;
border-radius: 20px;
padding: 40px;
}
.inner_sec_13 .blue-style {
background: #eaf1ff !important;
border-radius: 20px;
padding: 40px;
}
.tccb-card {
list-style: none;
margin: 0;
padding: 0;
}
.tccb-card h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.inner_sec_13 .pink-style h5 {
color: #1e2237;
}
.inner_sec_13 .blue-style h5 {
color: #1e2237;
}
.tccb-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.tccb-card li {
list-style: none;
margin-bottom: 15px;
display: flex;
align-items: flex-start;
color: #070d25;
font-size: 18px;
}
.tccb-card li::before {
content: "";
width: 10px;
height: 10px;
background: #f046b7;
display: inline-block;
margin-right: 15px;
border-radius: 50%;
margin-top: 9px;
}
.inner_sec_13 .blue-style li::before {
background: #2c67d1;
}
.inner_sec_13 .purple-style li::before {
background: #6d0c8d;
}
.three-column-color-box {
position: relative;
}
/* .three-column-color-box::before {
content: "";
background: url(../images/leverage-and-margin-trading-exchange-development/left-yellow-curves.webp)
no-repeat scroll 0 0;
position: absolute;
left: -70px;
bottom: -25px;
width: 387px;
height: 325px;
z-index: -1;
}
.three-column-color-box::after {
content: "";
background: url(../images/leverage-and-margin-trading-exchange-development/right-yellow-curves.webp)
no-repeat scroll 0 0;
position: absolute;
right: -50px;
top: -30px;
width: 570px;
height: 294px;
z-index: -1;
} */
@media (max-width: 991px) {
.tccb-card {
margin-bottom: 30px;
}
.h2tag {
text-align: center;
}
.inner_sec_2 .para {
text-align: center;
}
.svg_button {
/* margin-top: 0px !important; */
}
.inner_sec_1 .svg_button {
margin-top: 0px !important;
}
}
@media (max-width: 767px) {
.inner_sec_13 .svg_button {
margin: 30px auto 10px;
}
.inner_sec_13 h3 {
text-align: center;
max-width: 100%;
}
.tccb_card_head p {
text-align: center;
}
.inner_sec_1_3 .tccb-card {
height: auto !important;
}
.tccb_card_head h4 {
text-align: center;
}
}
@media (max-width: 575px) {
.three-column-color-box::before {
width: 100%;
background-size: 100%;
left: 0;
}
.three-column-color-box::after {
width: 100%;
background-size: 100%;
right: 0;
}
.inner_sec_13 .blue-style {
padding: 30px 20px;
}
.inner_sec_13 .pink-style {
padding: 30px 20px;
}
.text-slider {
padding: 25px !important;
}
.head-title-center h3 {
max-width: 100%;
}
}
/* blog_sec_3 */
.blog_sec_3 .category_list_head {
font-weight: 500;
font-size: 16px;
color: #1e2237 !important;
text-decoration: none;
}
.category_list {
border-left: 3px solid #1468ef;
padding: 16px;
background: linear-gradient(90deg, rgba(20, 104, 239, 0.15) 0%, rgba(20, 104, 239, 0) 100%);
margin-top: 30px;
}
.category_list a:hover {
color: #1468ef !important;
}
.category_list_green a:hover {
color: #00d68a !important;
}
.category_list_org a:hover {
color: #ff9c0d !important;
}
.category_list_pink a:hover {
color: #e530b2 !important;
}
.category_list_red a:hover {
color: #ff6e79 !important;
}
.category_list_vlt a:hover {
color: #8a71ff !important;
}
.category_list_blue a:hover {
color: #2ad2ff !important;
}
.category_list_lytgreen a:hover {
color: #85c06f !important;
}
.category_list_green {
border-left: 3px solid #00d68a;
background: linear-gradient(90deg, rgba(0, 214, 138, 0.15) 0%, rgba(0, 214, 138, 0) 100%);
}
.category_list_org {
border-left: 3px solid #ff9c0d;
background: linear-gradient(90deg, rgba(255, 156, 13, 0.15) 0%, rgba(255, 156, 13, 0) 100%);
}
.category_list_pink {
border-left: 3px solid #e530b2;
background: linear-gradient(90deg, rgba(229, 48, 178, 0.15) 0%, rgba(229, 48, 178, 0) 100%);
}
.category_list_red {
border-left: 3px solid #ff6e79;
background: linear-gradient(90deg, rgba(255, 110, 121, 0.15) 0%, rgba(255, 110, 121, 0) 100%);
}
.category_list_vlt {
border-left: 3px solid #8a71ff;
background: linear-gradient(90deg, rgba(138, 113, 255, 0.15) 0%, rgba(138, 113, 255, 0) 100%);
}
.category_list_blue {
border-left: 3px solid #2ad2ff;
background: linear-gradient(90deg, rgba(42, 210, 255, 0.15) 0%, rgba(42, 210, 255, 0) 100%);
}
.category_list_lytgreen {
border-left: 3px solid #85c06f;
background: linear-gradient(90deg, rgba(133, 192, 111, 0.15) 0%, rgba(133, 192, 111, 0) 100%);
}
.category_list_head {
transition: background 0.3s ease, border 0.3s ease, color 0.3s ease,
all 0.5s ease;
}
.category_list_head :hover {
color: #1468ef;
}
/* .category_list_head:hover .category_list::after {
opacity: 1;
}
.category_list_head:hover .category_list::after {
transform: scale(0.85) translate(5px) !important;
transition: all 0.5s;
}
.category_list{
position: relative;
}
.category_list::after {
content: "";
display: block;
width: 15px;
height: 13px;
position: absolute;
right: 17px;
background: url("../images/blog-2024-copy/arrow.webp") left top no-repeat;
top: calc(50% - 10px);
transition: all 0.5s ease;
opacity: 0;
} */
@media (max-width: 767px) {
.blog_sec_3 .category_list_head {
font-size: 14px;
}
}
.border_box {
border: 1px solid #f2f2f2;
border-radius: 16px;
padding: 8px;
transition: all 0.4s ease;
margin-bottom: 15px;
}
.border_box .Decentralized_strategic {
border-radius: 8px;
padding: 24px;
background: #f4f4f4;
transition: all 0.4s ease;
}
.border_box:hover {
transform: translateY(-4px);
}
/* Card 1 (Adoption): Pink Theme */
.border_box.card-adoption:hover {
border-color: #fbd1ed;
box-shadow: 0 10px 25px rgba(229, 48, 178, 0.08);
}
.border_box.card-adoption:hover .Decentralized_strategic {
background-color: #fff1fa;
}
.border_box.card-adoption:hover .decentralized_head {
color: #e530b2;
}
/* Card 2 (Market): Blue Theme */
.border_box.card-market:hover {
border-color: #d0e1ff;
box-shadow: 0 10px 25px rgba(44, 103, 209, 0.08);
}
.border_box.card-market:hover .Decentralized_strategic {
background-color: #f0f5ff;
}
.border_box.card-market:hover .decentralized_head {
color: #2c67d1;
}
/* Card 3 (Diversity): Green Theme */
.border_box.card-diversity:hover {
border-color: #c8f2dc;
box-shadow: 0 10px 25px rgba(46, 196, 182, 0.08);
}
.border_box.card-diversity:hover .Decentralized_strategic {
background-color: #eafaf1;
}
.border_box.card-diversity:hover .decentralized_head {
color: #2ec4b6;
}
/* Card 4 (Trust): Yellow Theme */
.border_box.card-trust:hover {
border-color: #ffeec2;
box-shadow: 0 10px 25px rgba(255, 159, 28, 0.08);
}
.border_box.card-trust:hover .Decentralized_strategic {
background-color: #fffcf0;
}
.border_box.card-trust:hover .decentralized_head {
color: #ff9f1c;
}
.Decentralized_strategic .decentralized_head {
font-weight: 500;
font-size: 20px;
color: #1e2237;
transition: all 0.4s ease;
}
/* Sticky left column content for Strategic Edge section */
@media (min-width: 992px) {
.inner_sec_15 .title-box-left {
position: -webkit-sticky;
position: sticky;
top: 120px;
}
}
.text-stack {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.tech-stack-item {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
border-radius: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
width: 200px;
height: 116px;
margin: 20px 25px;
}
.inner_title {
font-size: 40px;
font-weight: 600;
color: #070d25;
}
.inner_sec_1_3 .tccb_card_head p {
font-weight: 600;
font-size: 16px !important;
line-height: 187%;
text-align: center;
color: #1e2237;
margin-bottom: 0px;
}
.inner_sec_1_3 .tccb-card {
border: 1px solid #d7d7d7;
border-radius: 25px;
padding: 20px 20px;
background: #fff;
height: 176px;
justify-content: center;
}
.inner_sec_2 .choose_points {
padding-left: 20px;
text-align: left;
}
.inner_sec_2 .choose_points .h5tag {
font-size: 18px;
}
.inner_sec_2 .choose_points .para {
font-weight: 400;
margin-bottom: 18px;
}
@media (max-width: 991px) {
.inner_sec_2 .svg_button {
margin: auto;
}
.inner_title {
font-size: 36px;
}
}
@media (max-width: 767px) {
.inner_title {
font-size: 36px;
}
}
.protofolio_head .h3tag {
margin-bottom: -50px;
}
@media (max-width:991px) {
.protofolio_head .h3tag {
margin-bottom: -5px;
}
}
@media (max-width:767px) {
.mobile_none {
display: none;
}
}
/* inner_sec_13 */
.inner_sec_13_bg.inner_sec_13 {
margin: 0px !important;
/* background: #f9f9f9 !important; */
padding: 40px 0px;
}
.inner_sec_13_bg .tccb-card {
background: transparent !important;
}
.inner_sec_13_bg.inner_sec_13 .tccb-card span {
background: transparent;
margin-bottom: 0px;
font-weight: 600;
font-size: 20px;
color: #1e2237;
transition: color 0.3s ease;
}
.inner_sec_13_bg.inner_sec_13 .tccb-card {
border: 1px solid #bed0ef;
border-radius: 16px;
padding: 32px;
transition: all 0.3s ease;
}
.inner_sec_13_bg.inner_sec_13 .tccb-card p {
margin-bottom: 0px;
}
.inner_sec_13_bg.inner_sec_13 .tccb-card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
/* Card 1 Hover (Pink) */
.inner_sec_13_bg.inner_sec_13 .card-style-1:hover {
background: #fff1fa !important;
border-color: #e530b2;
}
.inner_sec_13_bg.inner_sec_13 .card-style-1:hover span {
color: #e530b2;
}
/* Card 2 Hover (Blue) */
.inner_sec_13_bg.inner_sec_13 .card-style-2:hover {
background: #f0f5ff !important;
border-color: #2c67d1;
}
.inner_sec_13_bg.inner_sec_13 .card-style-2:hover span {
color: #2c67d1;
}
/* Card 3 Hover (Green) */
.inner_sec_13_bg.inner_sec_13 .card-style-3:hover {
background: #eafaf1 !important;
border-color: #2ec4b6;
}
.inner_sec_13_bg.inner_sec_13 .card-style-3:hover span {
color: #2ec4b6;
}
/* Card 4 Hover (Orange) */
.inner_sec_13_bg.inner_sec_13 .card-style-4:hover {
background: #fffcf0 !important;
border-color: #ff9f1c;
}
.inner_sec_13_bg.inner_sec_13 .card-style-4:hover span {
color: #ff9f1c;
}
/* Card 5 Hover (Purple) */
.inner_sec_13_bg.inner_sec_13 .card-style-5:hover {
background: #fbf5ff !important;
border-color: #8a71ff;
}
.inner_sec_13_bg.inner_sec_13 .card-style-5:hover span {
color: #8a71ff;
}
.inner_sec_13_bg .tccb-card {
list-style: none;
margin: 0;
padding: 0;
}
.inner_sec_13_bg .tccb-card h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.inner_sec_13_bg .tccb-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.inner_sec_13_bg .tccb-card li {
list-style: none;
margin-bottom: 15px;
display: flex;
align-items: flex-start;
color: #070d25;
font-size: 18px;
}
.inner_sec_13_bg .three-column-color-box {
position: relative;
}
@media (max-width: 991px) {
.inner_sec_13_bg .tccb-card {
margin-bottom: 30px;
}
.h2tag {
text-align: center;
}
.inner_sec_13_bg .inner_sec_2 .para {
text-align: center;
}
.inner_sec_13_bg.inner_sec_13 {
margin: 10px 0px !important;
text-align: center;
}
.inner_sec_13_bg .inner_sec_1 .svg_button {
margin-top: 0px !important;
}
}
@media (max-width: 767px) {
.inner_sec_13_bg.inner_sec_13 {
padding: 30px 0 !important;
}
.inner_sec_13_bg.inner_sec_13 .svg_button {
margin: 30px auto 10px;
}
.inner_sec_13_bg.inner_sec_13 h3 {
text-align: center;
max-width: 100%;
}
.inner_sec_13_bg .tccb_card_head p {
text-align: center;
}
.inner_sec_13_bg .inner_sec_1_3 .tccb-card {
height: auto !important;
}
.inner_sec_13_bg .tccb_card_head h3 {
text-align: center;
}
}
@media (max-width: 575px) {
.inner_sec_13_bg.inner_sec_13 {
margin: 40px 0 !important;
}
.inner_sec_13_bg .three-column-color-box::before {
width: 100%;
background-size: 100%;
left: 0;
}
.inner_sec_13_bg .three-column-color-box::after {
width: 100%;
background-size: 100%;
right: 0;
}
.inner_sec_13_bg .inner_sec_13 .blue-style {
padding: 20px;
}
.inner_sec_13_bg.inner_sec_13 .tccb-card {
padding: 20px;
}
.inner_sec_13_bg .text-slider {
padding: 25px !important;
}
.inner_sec_13_bg .head-title-center h3 {
max-width: 100%;
}
}
/* inner_sec_29 Start */
.simplebar-content {
padding: 0 15px 0 0px !important;
}
.inner_sec_29 {
padding: 40px 0;
background: linear-gradient(135deg,
#edf4ff 0%,
#d2e5ff 40%,
#b3d2ff 100%);
}
.blue {
color: #2a69d1 !important;
}
.inner_sec_29 .accordion-item {
background: #eeeff200;
border: 0;
border-radius: 0px;
margin-bottom: 0px;
margin-top: 5px;
transition: 0.5s;
position: relative;
border-bottom: 1px solid #ebecef;
margin: 10px;
}
.inner_sec_29 .accordion-item:not(.collapsed) {
box-shadow: 0 0 10px 5px #00000014;
border: 0;
border-color: transparent;
border-radius: 20px;
background-color: #ffffff;
}
.inner_sec_29 .accordion-button {
background: transparent;
box-shadow: none !important;
padding: 20px;
padding-right: 70px;
color: #000 !important;
position: unset;
}
.inner_sec_29 .accordion-button h5 {
margin-bottom: 0;
}
.inner_sec_29 .accordion-button::after {
background: #fff url("../images/centralized-cryptocurrency-exchange-development-2023/plus.svg") no-repeat center;
background-size: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
position: absolute;
right: 30px;
transform: unset;
top: 25px;
margin: auto 0;
transition: 0.5s;
}
.inner_sec_29 [aria-expanded="true"] .accordion-button::after {
background-image: url("../images/centralized-cryptocurrency-exchange-development-2023/minus.svg");
transform: rotate(0deg);
}
.inner_sec_29 [aria-expanded="false"] .accordion-button::after {
background-image: url("../images/centralized-cryptocurrency-exchange-development-2023/plus.svg");
transform: rotate(0deg);
}
.inner_sec_29 .accordion-item .para span {
font-weight: 600;
}
.inner_sec_29 .accordion-body {
padding: 20px;
padding-right: 70px;
padding-top: 0px;
}
.inner_sec_29 .accordion-body p {
margin-bottom: 0;
text-align: left;
font-size: 16px;
}
.accordion-header .h5tag {
margin-bottom: 0px;
}
/* .inner_sec_29 #accordionExample {
padding-top: 50px;
}
.inner_sec_29 #accordionExample {
padding-top: 50px;
} */
.flex-title-left-content {
max-height: 580px;
overflow: auto;
padding-right: 15px;
}
.simplebar-scrollbar::before {
opacity: 1 !important;
background: #2a69d1 !important;
}
.simplebar-track.simplebar-vertical {
background: #e1ecff !important;
border-radius: 5px;
}
.inner_sec_29 #accordionExample .mCSB_container {
padding: 15px;
}
@media (max-width: 767px) {
.inner_sec_29 img {
margin-bottom: 15px;
}
}
@media (max-width: 767px) {
.inner_sec_29 .accordion-body {
padding-right: 30px;
}
.inner_sec_29 #accordionExample {
padding-top: 0px;
}
}
@media (max-width: 575px) {
.mCSB_inside>.mCSB_container {
margin-right: 10px !important;
}
}
.inner_sec_29 .h5tag {
font-size: 18px;
font-weight: 600;
}
@media (max-width: 767px) {
.inner_sec_29 .h5tag {
font-size: 18px;
line-height: unset;
}
}
/* inner_sec_29 ends */
.blog_sec_3 {
padding: 40px 0;
}
/* inner_sec_12 */
.inner_sec_12 {
padding: 50px 0;
/* background: rgb(239 234 255 / 30%); */
}
.head-title-center {
margin-bottom: 30px;
}
.head-title-center h2 {
text-align: center;
/* max-width: 70%; */
margin: 0 auto 30px;
}
/* .head-title-center h2 span {
color: #f047b8;
} */
.head-title-center p {
text-align: center;
max-width: 80%;
margin: 0 auto;
font-size: 18px;
}
.ftlc-card {
display: flex;
align-items: center;
}
.ftlc-card h3 {
min-width: 30%;
text-align: center;
background: #dedede;
border-radius: 15px;
padding: 15px;
font-size: 20px;
color: #070d25;
font-weight: 600 !important;
}
.ftlc-card p {
margin-left: 30px;
background: #dedede;
border-radius: 15px;
padding: 30px;
}
.green-style h3 {
background: #ccf7e8;
}
.violet-style h3 {
background: #ebafff;
}
.orange-style h3 {
background: #ffec9b;
}
.flex_img {
border: 1px solid #efeaff;
border-radius: 8px;
padding: 24px;
background: #fff;
transition: 0.3s;
cursor: default;
margin-bottom: 18px;
}
.flex_img:hover {
background: #efeaff;
}
.flex_img p {
margin-bottom: 0px;
text-align: left;
}
.flex_img p a {
color: #094db1 !important;
}
.flex_img:hover .h5tag,
.flex_img:hover p,
.flex_img:hover li {
/* color: #5433b6; */
transition: 0.3s;
}
.sticky_col {
position: sticky;
top: 100px;
z-index: 1;
}
.banner_2_img {
border-radius: 24px;
}
@media (max-width: 1200px) {
.head-title-center h2 {
max-width: 100%;
}
.head-title-center p {
max-width: 100%;
}
}
@media (max-width: 991px) {
.inner12_bg h2,
.para {
text-align: center;
}
.sticky_col {
text-align: center;
}
.sticky_col .svg_button {
width: auto !important;
}
}
@media (max-width: 575px) {}
@media (max-width: 767px) {
.ftlc-card {
flex-direction: column;
margin-bottom: 20px;
}
.ftlc-card h5 {
display: block;
width: 100%;
}
.ftlc-card p {
margin-left: 0;
}
#flex-title-left-content .svg_button {
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
.inner12_bg {
/* padding: 25px; */
}
.inner12_bg {
text-align: center;
}
.flex_img {
/* flex-direction: column; */
text-align: left;
/* padding: 0px; */
}
#flex-title-left-content {
height: auto;
max-height: fit-content;
}
.flex_img p {
text-align: left;
}
}
.inner_sec_12 .green-style h3,
.inner_sec_12 .green-style p {
background: #ccf7e8 !important;
}
.inner_sec_12 .pink-style h3,
.inner_sec_12 .pink-style p {
background: #ffd9e4 !important;
}
.inner_sec_12 .green-style p,
.inner_sec_12 .pink-style p {
width: 100%;
}
@media (min-width: 1199px) {
.inner_sec_12 .head-title-center p {
max-width: 60% !important;
}
}
/* Inner Sec 12 Ends */
/* section_net start */
/* section_net start */
.section_net {
padding: 50px 0;
/* background: linear-gradient(to left, #f0f5ff, #fdfdfd); */
overflow: hidden;
}
.section_net .net_boxes_grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.section_net .net_box {
background: #ffffff;
border: 1px solid #e3e4e5;
border-radius: 12px;
padding: 15px 10px;
text-align: center;
font-weight: 500;
color: #1e2237;
/* box-shadow: rgb(0 0 0 / 26%) 0px 25px 20px -20px; */
transition: all 0.3s ease;
font-size: 16px;
}
.section_net .net_box:hover {
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(20, 104, 239, 0.1);
border-color: #1468ef;
color: #1468ef;
}
@media (max-width: 991px) {
.section_net .net_boxes_grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.section_net .net_boxes_grid {
grid-template-columns: repeat(2, 1fr);
}
.section_net .net_box {
padding: 12px 10px;
font-size: 15px;
}
}
.network-circles-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
aspect-ratio: 1 / 1;
position: relative;
}
.nc-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.nc-circle-1 {
width: 25%;
height: 25%;
border: 2px solid #0d6efd38;
/* Blue color */
background: rgba(13, 110, 253, 0.05);
}
.nc-circle-2 {
width: 50%;
height: 50%;
border: 1px dashed rgba(209, 213, 219, 1);
/* Dash line */
}
.nc-circle-3 {
width: 75%;
height: 75%;
border: 1px dashed rgba(209, 213, 219, 1);
/* Dash line */
}
.nc-circle-4 {
width: 100%;
height: 100%;
border: 1px dashed rgba(209, 213, 219, 1);
/* Dash line only */
}
.nc-center-earth {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
/* background: #fff; */
border-radius: 50%;
/* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
}
.nc-center-earth img {
width: 100%;
height: auto;
border-radius: 50%;
}
.nc-dot {
position: absolute;
width: 7px;
height: 7px;
background: #0d6dfd86;
/* Blue color */
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 5;
box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
}
.nc-icon-wrapper {
position: absolute;
width: 60px;
height: 60px;
background: #fff;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
z-index: 6;
}
.nc-icon-img {
width: 40px;
height: 40px;
object-fit: contain;
}
@media (max-width: 576px) {
.nc-center-earth {
width: 60px;
height: 60px;
}
.nc-icon-wrapper {
width: 40px;
height: 40px;
}
.nc-icon-img {
width: 24px;
height: 24px;
}
}
/* Animations for Solar System Effect */
@keyframes nc-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes nc-spin-center {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes nc-counter-spin-center {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
/* Spin the dashed line circles */
.nc-circle-2 {
animation: nc-spin-center 30s linear infinite;
}
.nc-circle-3 {
animation: nc-spin-center 45s linear infinite;
}
.nc-circle-4 {
animation: nc-spin-center 60s linear infinite;
}
/* Orbit wrappers */
.nc-orbit {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.nc-orbit-2 {
animation: nc-spin 30s linear infinite;
}
.nc-orbit-3 {
animation: nc-spin 45s linear infinite;
}
.nc-orbit-3 .nc-icon-wrapper {
animation: nc-counter-spin-center 45s linear infinite;
}
/* Trading Section Styles */
.section_trading {
padding: 40px 0;
overflow: hidden;
background: #f7f7f7;
}
.dex-token-card {
position: relative;
background-color: #ffffff;
border-radius: 1rem;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
border-top: 4px solid #e2e8f0;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: hidden;
height: 100%;
transition: all 0.3s ease;
/* box-shadow: rgb(0 0 0 / 0%) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */
}
.dex-token-bg-number {
position: absolute;
right: -10px;
bottom: -20px;
color: rgba(0, 0, 0, 0.04);
font-size: 7rem;
font-weight: 800;
line-height: 1;
z-index: 1;
user-select: none;
}
.dex-token-header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: 1.25rem;
z-index: 2;
position: relative;
}
.dex-token-badge {
position: absolute;
left: 0;
top: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.dex-token-icon {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.dex-token-body {
display: flex;
flex-direction: column;
/* align-items: center; */
/* text-align: center; */
width: 100%;
z-index: 2;
position: relative;
flex-grow: 1;
}
.dex-token-title {
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.5rem;
margin-bottom: 0.25rem;
}
.dex-token-subtitle {
color: #64748b;
font-size: 16px;
font-weight: 500;
line-height: 1.25rem;
margin-bottom: 10px;
}
.dex-token-divider {
width: 100%;
height: 1px;
background-color: #9c9d9f;
border: none;
margin: 0;
}
.dex-token-desc {
padding-top: 10px;
color: #475569;
font-size: 16px;
line-height: 1.4;
margin-bottom: 0;
}
/* Token Colors */
.dex-token-purple {
border-top-color: #8a71ff;
}
.dex-token-purple .dex-token-badge {
background-color: rgba(138, 113, 255, 0.1);
color: #8a71ff;
}
.dex-token-blue {
border-top-color: #1468ef;
}
.dex-token-blue .dex-token-badge {
background-color: rgba(20, 104, 239, 0.1);
color: #1468ef;
}
.dex-token-orange {
border-top-color: #ff9c0d;
}
.dex-token-orange .dex-token-badge {
background-color: rgba(255, 156, 13, 0.1);
color: #ff9c0d;
}
.dex-token-green {
border-top-color: #00d68a;
}
.dex-token-green .dex-token-badge {
background-color: rgba(0, 214, 138, 0.1);
color: #00d68a;
}
.dex-token-pink {
border-top-color: #e530b2;
}
.dex-token-pink .dex-token-badge {
background-color: rgba(229, 48, 178, 0.1);
color: #e530b2;
}
@media (min-width: 1200px) {
.col-xl-5ths {
flex: 0 0 20%;
max-width: 20%;
}
}
.inner_sec23_new {
/* margin: 30px 0; */
/* background: rgba(255, 215, 151, 0.1); */
transition: background-color 0.7s cubic-bezier(0.25, 1, 0.5, 1), background-image 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.inner_sec23_newbg.inner_sec23_newbg {
padding: 60px 0 !important;
background: #f5f5f5;
}
.inner_sec23_newbg.inner_sec23_newbg .box {
border: 1px solid #dee6f5 !important;
}
.inner_sec23_newbg.inner_sec23_newbg .box:hover {
border: 1px solid #1468ef !important;
}
.inner_sec23_new_sub {
padding: 60px 0;
}
.inner_sec23_new .box {
border: 1px solid #e2c597;
border-radius: 16px;
padding: 32px;
/* padding-top: 40px; */
position: relative;
text-align: left;
margin-top: 30px;
transition: background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.inner_sec23_new .box:hover {
/* border-color: transparent; */
/* box-shadow: 0 0 20px -10px #5a617e; */
}
.inner_sec23_new .box .h5tag {
font-size: 20px;
}
.inner_sec23_new .box .fees_head {
/* background: #ffd9e4; */
border-radius: 50px;
padding: 3px 13px;
display: inline-block;
position: absolute;
top: -20px;
left: 40px;
right: 0;
/* margin: 0 auto; */
width: fit-content;
font-size: 16px;
background: #c6daff;
color: #1468ef;
transition: 0.3s;
}
.inner_sec23_new .box:hover .fees_head {
background: #1468ef;
color: #fff;
transition: 0.3s;
}
.inner_sec23_new .box:hover {
border-color: #ff9c0d;
background-color: #fff;
transform: translateY(-5px);
}
.inner_sec23_new .box .fees_head.yellow {
background: #ffff9f;
}
.inner_sec23_new .box .fees_head.blue {
background: #c4d9ff;
}
.inner_sec23_new .box .fees_head.rose {
background: #f1c7ff;
}
.inner_sec23_new .svg_button {
margin: 50px auto 10px;
}
.inner_sec23_new p {
margin-bottom: 0px !important;
}
@media (max-width: 1199px) {
.inner_sec23_new .box .fees_head {
font-size: 15px;
}
}
@media (max-width: 991px) {
.inner_sec23_new .box {
width: 100%;
text-align: center;
}
.card-text .category_list {
text-align: center;
}
/* .inner_sec23_new {
padding: 40px 0px;
} */
}
@media (max-width: 767px) {
.inner_sec23_new .box .fees_head {
margin: 0px auto 20px;
position: unset;
}
.inner_sec23_new .box {
margin-top: 25px;
padding: 20px;
}
}
/* inner_sec_23_new ends */
.tech_table {
width: 100%;
table-layout: fixed;
margin-top: 30px;
}
.tech_table tr td {
width: 50%;
border-color: #d8ebdf;
}
.tech_table tr th {
text-align: center;
}
.tech_table_imgdiv {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
gap: 20px;
}
.tech_table_imgdiv div {
border: 1px solid #d8ebdf;
border-radius: 8px;
padding: 12px;
background: #fff;
flex: 1;
}
.tech_table tbody tr {
border-top: 1px solid #d8ebdf !important;
}
tr {
border-bottom: 1px solid #d8ebdf !important;
}
.tech_table tr td:first-child {
border-right: 1px solid #d8ebdf;
}
.home_style_24 {
padding: 60px 0;
background: #f4fdf7;
}
@media screen and (max-width: 991px) {
.tech_table tr td:first-child {
border-right: none;
}
.tech_table tr td {
width: 100%;
}
.techstack_nav {
justify-content: flex-start;
}
}
@media screen and (max-width: 768px) {
.tech_table_imgdiv {
padding: 0;
}
.tech_table tr td {
font-size: 16px;
}
}
.inner_sec_2 ul {
list-style-type: circle;
}
/* Home Section 02 Marquee Starts */
.homesection_02 {
background-color: #fff;
padding-bottom: 30px;
}
.marquee-section {
background-color: #fff;
padding-bottom: 30px;
overflow-x: hidden;
}
.marquee-wrapper {
width: 100vw;
max-width: 100%;
overflow-x: hidden;
background: #fff6f6;
padding: 45px 0;
margin-top: 40px;
display: flex;
}
.marquee-container {
display: flex;
flex-shrink: 0;
min-width: 100%;
justify-content: space-around;
animation: scroll-marquee 25s linear infinite;
}
/* .marquee-wrapper:hover .marquee-container {
animation-play-state: paused;
} */
.marquee-item {
display: flex;
align-items: center;
padding: 0 60px;
color: #1e2237;
flex-shrink: 0;
}
.marquee-item label {
font-style: normal;
line-height: 56px;
font-weight: 500;
font-size: 40px;
letter-spacing: -0.04em;
margin: 0 15px 0 0;
color: #f3525e;
transition: 0.5s;
}
.marquee-item span {
font-weight: 400;
font-size: 18px;
line-height: 1.4;
letter-spacing: -0.03em;
border-bottom: 1px solid #f3525e;
padding-bottom: 12px;
}
@keyframes scroll-marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@media screen and (max-width: 1399px) {
.marquee-item label {
font-size: 36px;
}
.marquee-item span {
font-size: 16px;
}
}
@media screen and (max-width: 1199px) {
.marquee-wrapper {
padding: 35px 0;
}
.marquee-item span {
border-bottom: none;
padding-bottom: 0;
}
}
@media screen and (max-width: 991px) {
.marquee-item {
padding: 0 40px;
}
.marquee-item label {
font-size: 26px;
}
}
@media screen and (max-width: 767px) {
.marquee-section,
.homesection_02 {
padding-bottom: 60px !important;
}
}
@media screen and (max-width: 575px) {
.marquee-wrapper {
padding: 20px 0;
}
.marquee-item {
padding: 0 25px;
}
.marquee-item label {
font-size: 30px;
margin-right: 10px;
}
}
/* Home Section 02 Marquee Ends */
/* Rewards section starts */
.Honorsec {
padding: 50px 0 50px 0;
}
.Honor .slick-slide {
transform: scale(0.8);
transition: 0.4s ease-in-out;
margin: 10px !important;
}
.Honor .slick-center {
transform: scale(1.1, 1.1);
transition: 0.4s ease-in-out;
}
.Honor .slick-list,
.Honorhead1 .slick-list {
padding: 0 !important;
}
@media screen and (max-width: 991px) {
.Honorsec .h3tag {
text-align: center !important;
}
}
/* Rewards section ends */
/* home_style_4 starts */
.home_style_4 {
padding: 30px 0;
}
.home_style_4 ::-webkit-scrollbar {
width: 6px;
height: 5px;
}
.home_style_4 ::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
background: #c4d9ff;
border-radius: 10px;
}
.home_style_4 ::-webkit-scrollbar-thumb {
background-color: #96b6f1;
border-radius: 10px;
}
.home_style_4 .scroll {
overflow-x: scroll;
width: 100%;
padding-bottom: 5px;
}
.anchor-nav {
display: flex;
align-items: center;
padding: 0 !important;
background-color: #ccf7e8;
border-radius: 10px;
z-index: 10;
position: relative;
justify-content: flex-start;
flex-wrap: nowrap;
min-width: 1370px;
overflow: hidden;
}
.anchor-nav li {
width: auto;
}
.anchor-nav::before {
content: "";
background: url("../images/home/service_before.webp");
background-size: cover;
width: 82px;
height: 114px;
position: absolute;
left: 0;
z-index: -1;
}
.anchor-nav::after {
content: "";
background: url("../images/home/service_after.webp");
background-size: cover;
width: 83px;
height: 114px;
position: absolute;
right: 0;
z-index: -1;
}
button.anchor.nav-link {
color: #070d25;
font-size: 18px;
text-decoration: none;
cursor: pointer;
border: none !important;
background: transparent;
text-align: left;
white-space: nowrap;
padding: 30px;
transition: 0.2s all;
border-radius: 0;
width: 100%;
font-weight: 500;
}
button.anchor.nav-link.active {
background: rgba(0, 215, 140, 1);
color: #fff;
}
button.anchor.nav-link:hover {
background: rgba(0, 215, 140, 0.8);
color: #fff;
}
.card_pinned {
position: relative;
margin: 50px auto;
width: 100%;
height: auto;
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
.card_pinned h2 {
font-size: 32px;
font-weight: 600;
margin-bottom: 5px;
}
.card_pinned h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 0;
}
.portfolio_head {
margin-bottom: 15px;
}
p.strong {
font-weight: 700;
}
.card_pinned_one h2 {
color: #ffaf2e;
}
.card_pinned_two h2 {
color: #6d0c8d;
}
.card_pinned_three h2 {
color: #00d78b;
}
.card_pinned_four h2 {
color: #f046b7;
}
.card_pinned_five h2 {
color: #2c67d1;
}
.card_pinned_one {
border: 1px solid #ffaf2e;
}
.card_pinned_two {
border: 1px solid #6d0c8d;
}
.card_pinned_three {
border: 1px solid #00d78b;
}
.card_pinned_four {
border: 1px solid #f046b7;
}
.card_pinned_five {
border: 1px solid #2c67d1;
}
.card_pinned_one .svg_button path {
stroke: #ffaf2e;
}
.card_pinned_one .svg_button:hover path {
stroke: #ffaf2e;
}
.card_pinned_two .svg_button path {
stroke: #6d0c8d;
}
.card_pinned_two .svg_button:hover path {
stroke: #6d0c8d;
}
.card_pinned_three .svg_button path {
stroke: #00d78b;
}
.card_pinned_three .svg_button:hover path {
stroke: #00d78b;
}
.card_pinned_four .svg_button path {
stroke: #f046b7;
}
.card_pinned_four .svg_button:hover path {
stroke: #f046b7;
}
.card_pinned_five .svg_button path {
stroke: #2c67d1;
}
.card_pinned_five .svg_button:hover path {
stroke: #2c67d1;
}
.anchor-nav::after,
.anchor-nav::before {
display: none;
}
.category-filter-grp {
display: flex;
gap: 15px;
/* position: sticky; */
top: 50px;
overflow-x: auto;
margin-bottom: 30px;
/* Hide scrollbar */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.btn:focus {
box-shadow: none !important;
}
.category-filter-grp::-webkit-scrollbar {
display: none;
/* Chrome, Safari, Opera */
}
.category-filter {
background: #dedede;
border: 1px solid #dedede;
border-radius: 15px;
padding: 15px;
font-size: 18px;
color: #070d25;
font-weight: 500;
white-space: nowrap;
}
.category-filter.active,
.category-filter:hover,
.category-filter:active {
background: #00d78c !important;
border: 1px solid #00d78c !important;
color: #2f2f2f;
}
.category_item_panel {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.category_item {
position: relative;
border-radius: 16px;
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
border: 1px solid #f0eded;
overflow: hidden;
transition: 0.8s all ease;
}
.category_item h3 {
color: #070d25;
font-size: 20px;
font-weight: 400;
position: absolute;
top: 20px;
left: 20px;
margin-bottom: 0;
text-transform: uppercase;
}
/* .category_item .content{
padding:20px;
transition:0.8s all ease;
color:#070d25;
font-size: 16px;
transform:translateY(200px);
opacity:0;
position: absolute;
} */
.category_item:hover {
box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.2);
}
/* .category_item:hover .content {
transform:translateY(0px);
opacity:1;
}
.category_item img {
transition:0.2s all ease;
}
.category_item:hover img {
opacity:0.2;
z-index:-1;
} */
.portfolio_section_1 {
padding: 30px 0;
position: relative;
z-index: 1;
background: url("../images/portfolio/porfolio_bg_01.webp");
}
.portfolio_section_1 p.blue_para {
color: #2c67d1;
font-size: 18px;
font-weight: 500;
}
.portfolio_section_1 .svg_button {
margin: 50px auto 20px;
}
@media (max-width: 1199px) {
.category-filter-grp {
/* justify-content:center; */
}
}
@media (max-width: 575px) {
.category_item_panel {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}
/* home_style_4 ends */
/* businesses_investing_sec (Light Theme) */
.businesses_investing_sec {
background: url("../images/leverage-and-margin-trading-exchange-development/mixed-waves.webp") no-repeat right top,
radial-gradient(circle at 10% 20%, rgba(240, 70, 183, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(44, 103, 209, 0.04) 0%, transparent 50%),
linear-gradient(180deg, #f7faff 0%, #edf3fc 100%);
padding: 80px 0 !important;
position: relative;
overflow: hidden;
z-index: 1;
border-top: 1px solid rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.businesses_investing_sec::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(240, 70, 183, 0.06) 0%, transparent 70%);
z-index: -1;
pointer-events: none;
}
.businesses_investing_sec::after {
content: "";
position: absolute;
bottom: -100px;
left: -100px;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(44, 103, 209, 0.06) 0%, transparent 70%);
z-index: -1;
pointer-events: none;
}
.businesses_investing_sec .h3tag {
margin-bottom: 20px;
}
.businesses_investing_sec .para {
color: #4a5168 !important;
font-size: 18px;
line-height: 1.7;
max-width: 850px;
margin: 0 auto;
}
.businesses_investing_sec .investing_wrapper {
background: #ffffff;
border: 1px solid rgba(44, 103, 209, 0.06);
border-radius: 24px;
padding: 65px 50px;
box-shadow: 0 15px 35px rgba(7, 13, 37, 0.03);
position: relative;
}
.businesses_investing_sec .investing_decor_left {
position: absolute;
top: 20px;
left: 20px;
pointer-events: none;
opacity: 0.6;
}
.businesses_investing_sec .investing_decor_right {
position: absolute;
bottom: 20px;
right: 20px;
pointer-events: none;
opacity: 0.6;
}
@media (max-width: 991px) {
.businesses_investing_sec {
padding: 60px 0 !important;
}
.businesses_investing_sec .investing_wrapper {
padding: 40px 20px;
}
}
/* ============================================================
DEX Stats Section — Animated SVG Circles Card Design
Inspired by: Building the future card layout
============================================================ */
/* ---- Section wrapper ---- */
.dex-stats-section {
padding: 80px 0;
background: #ffffff;
}
.dex-stats-section .stats-heading {
font-size: 40px;
font-weight: 600;
color: #0d0f1c;
margin-bottom: 48px;
letter-spacing: -0.5px;
text-align: center;
}
/* ---- Grid ---- */
.dex-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ---- Individual card ---- */
.dex-stat-card {
background: #fdf2f6;
border-radius: 20px;
padding: 36px 36px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s ease, transform 0.3s ease;
box-shadow: 0 16px 48px rgba(120, 110, 200, 0.13);
/* transform: translateY(-4px); */
}
.dex-stat-card:hover {
box-shadow: 0 16px 48px rgba(120, 110, 200, 0.13);
transform: translateY(-4px);
}
/* Text content on left */
.dex-stat-card .stat-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.dex-stat-card .stat-number {
font-size: 56px;
font-weight: 500;
line-height: 1;
color: #0d0f1c;
margin-bottom: 12px;
letter-spacing: -1px;
display: inline-flex;
align-items: flex-start;
letter-spacing: -2px;
}
.odo-digit-container {
display: inline-block;
height: 1em;
line-height: 1;
overflow: hidden;
position: relative;
vertical-align: top;
}
.odo-digit-strip {
display: inline-flex;
flex-direction: column;
line-height: 1;
}
.odo-digit-strip span {
display: block;
height: 1em;
line-height: 1;
}
.odo-suffix {
display: inline-block;
line-height: 1;
vertical-align: top;
}
.dex-stat-card .stat-label {
font-size: 15px;
color: #666980;
font-weight: 400;
line-height: 1.4;
}
/* SVG visual on right */
.dex-stat-card .stat-visual {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.dex-stat-card .stat-visual svg {
display: block;
height: 110px;
width: auto;
max-width: 100%;
}
/* ============================================================
SVG CIRCLE/RECTANGLE COLOR PULSE ANIMATIONS
============================================================ */
@keyframes color-light-pulse {
0%,
100% {
fill: #ffd8e3;
opacity: 0.55;
}
50% {
fill: #ffb3d9;
opacity: 0.95;
}
}
@keyframes color-medium-pulse {
0%,
100% {
fill: #ff80b3;
opacity: 0.55;
}
50% {
fill: #f779c1;
opacity: 0.95;
}
}
@keyframes color-dark-pulse {
0%,
100% {
fill: #f779c1;
opacity: 0.55;
}
50% {
fill: #ee48b4;
opacity: 0.95;
}
}
/* Light elements animation assignment */
.dex-stat-card .stat-visual circle[fill="#e0dffb"],
.dex-stat-card .stat-visual circle[fill="#d9d8f8"],
.dex-stat-card .stat-visual circle[fill="#d4d2f8"],
.dex-stat-card .stat-visual circle[fill="#d1cffa"],
.dex-stat-card .stat-visual circle[fill="#c0bef4"],
.dex-stat-card .stat-visual rect[fill="#c0bef4"],
.dex-stat-card .stat-visual :is(circle, rect, path)[opacity^="0.2"],
.dex-stat-card .stat-visual :is(circle, rect, path)[opacity^="0.3"],
.dex-stat-card .stat-visual :is(circle, rect, path)[opacity^="0.4"] {
animation-name: color-light-pulse;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* Medium elements animation assignment */
.dex-stat-card .stat-visual circle[fill="#b3b0ec"],
.dex-stat-card .stat-visual circle[fill="#a09de6"],
.dex-stat-card .stat-visual circle[fill="#9895e2"],
.dex-stat-card .stat-visual rect[fill="#a09de6"],
.dex-stat-card .stat-visual :is(circle, rect, path)[opacity^="0.6"],
.dex-stat-card .stat-visual :is(circle, rect, path)[opacity^="0.7"],
.dex-stat-card .stat-visual :is(circle, rect, path)[opacity^="0.8"] {
animation-name: color-medium-pulse;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* Dark elements animation assignment */
.dex-stat-card .stat-visual circle[fill="#8b87e0"],
.dex-stat-card .stat-visual circle[fill="#7b78d8"],
.dex-stat-card .stat-visual circle[fill="#6a67cf"],
.dex-stat-card .stat-visual circle[fill="#5e5bc0"],
.dex-stat-card .stat-visual circle[fill="#5452b8"],
.dex-stat-card .stat-visual rect[fill="#8b87e0"],
.dex-stat-card .stat-visual rect[fill="#7b78d8"],
.dex-stat-card .stat-visual :is(circle, rect, path)[opacity^="0.9"],
.dex-stat-card .stat-visual :is(circle, rect, path):not([opacity]) {
animation-name: color-dark-pulse;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* Staggered animation delays for both circles and rects */
.dex-stat-card .stat-visual :is(circle, rect):nth-child(1) {
animation-delay: 0s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(2) {
animation-delay: 0.15s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(3) {
animation-delay: 0.3s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(4) {
animation-delay: 0.45s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(5) {
animation-delay: 0.6s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(6) {
animation-delay: 0.75s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(7) {
animation-delay: 0.9s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(8) {
animation-delay: 1.05s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(9) {
animation-delay: 1.2s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(10) {
animation-delay: 1.35s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(11) {
animation-delay: 1.5s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(12) {
animation-delay: 1.65s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(13) {
animation-delay: 1.8s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(14) {
animation-delay: 1.95s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(15) {
animation-delay: 2.1s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(16) {
animation-delay: 2.25s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(17) {
animation-delay: 2.4s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(18) {
animation-delay: 2.55s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(19) {
animation-delay: 2.7s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(20) {
animation-delay: 2.85s;
}
.dex-stat-card .stat-visual :is(circle, rect):nth-child(21) {
animation-delay: 3s;
}
/* ---- Card colour variants ---- */
.dex-stat-card.card-countries {
background: #fcfcfb;
}
.dex-stat-card.card-tech {
background: #fcfcfb;
}
.dex-stat-card.card-projects {
background: #fcfcfb;
}
.dex-stat-card.card-years {
background: #fcfcfb;
}
.dex-stat-card.card-clients {
background: #fcfcfb;
grid-column: span 2;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1199px) {
.dex-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 991px) {
.dex-stats-section .stats-heading {
font-size: 30px;
}
.dex-stat-card .stat-number {
font-size: 42px;
}
.dex-stat-card {
padding: 28px 24px 22px;
}
}
@media (max-width: 767px) {
.dex-stats-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.dex-stat-card.card-clients {
grid-column: span 1;
}
.dex-stats-section {
padding: 40px 0;
}
.dex-stats-section .stats-heading {
font-size: 26px;
margin-bottom: 30px;
}
.dex-stat-card .stat-number {
font-size: 36px;
}
.dex-stat-card .stat-visual svg {
height: 80px;
width: auto;
max-width: 100%;
}
}
.highlight-wrapper {
position: relative;
display: inline-block;
}
.success-highlight-svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
z-index: -1;
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
/* Testimonial Section */
.testimonial-section {
padding: 60px 0;
}
.testimonial-container {
width: 100%;
/* max-width: 1280px; */
display: flex;
justify-content: center;
align-items: stretch;
gap: 1.5rem;
margin: 0 auto;
}
.testimonial-media {
flex: 0 0 calc(40% - 0.75rem);
max-width: calc(40% - 0.75rem);
position: relative;
border-radius: 40px;
overflow: hidden;
display: flex;
}
.testimonial-media-wrapper {
width: 100%;
height: 730px;
position: relative;
}
.testimonial-media-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-media-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.1);
}
.testimonial-play-btn-wrapper {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-play-btn {
padding: 12px 24px 12px 16px;
background: #fff;
border-radius: 9999px;
display: flex;
align-items: center;
gap: 12px;
border: none;
box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.2s ease;
}
.testimonial-play-btn:hover {
transform: scale(1.05);
}
.testimonial-play-icon {
width: 24px;
height: 24px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.play-triangle {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 10px solid #000;
border-bottom: 6px solid transparent;
display: inline-block;
}
.testimonial-play-text {
color: #000;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.testimonial-content-wrapper {
flex: 0 0 calc(60% - 0.75rem);
max-width: calc(60% - 0.75rem);
padding: 48px;
position: relative;
background: linear-gradient(to bottom right, #f3f4f6, #fecaca, #f97316);
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-content {
flex: 1;
padding: 56px;
background: #fff;
border-radius: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 634px;
/* box-shadow: 0px 8px 10px -6px rgba(0,0,0,0.1), 0px 20px 25px -5px rgba(0,0,0,0.1); */
}
.testimonial-quote-wrap {
display: flex;
flex-direction: column;
gap: 24px;
}
.testimonial-quote-icon {
width: 40px;
height: 28px;
background: #2563eb;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.testimonial-quote-text {
color: #1f2937;
font-size: 24px;
font-weight: 500;
line-height: 32px;
}
.testimonial-author-wrap {
padding-top: 48px;
}
.testimonial-author-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.testimonial-author-info {
display: flex;
align-items: center;
gap: 16px;
}
.testimonial-author-avatar {
width: 60px;
height: 60px;
background: #e5e7eb;
border-radius: 9999px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
border: 2px solid #fff;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-author-avatar img {
width: 44px;
height: auto;
}
.testimonial-author-details {
display: flex;
flex-direction: column;
}
.testimonial-author-name {
color: #111827;
font-size: 18px;
font-weight: 700;
line-height: 28px;
}
.testimonial-author-role {
color: #6b7280;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.testimonial-slider-arrow {
padding: 16px;
background: #f3f4f6;
border-radius: 9999px;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.2s;
}
.testimonial-slider-arrow:hover {
background: #e5e7eb;
}
.arrow-right {
width: 12px;
height: 12px;
border-top: 2px solid #1f2937;
border-right: 2px solid #1f2937;
transform: rotate(45deg);
display: inline-block;
}
.testimonial-slider-dots {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
/* gap: 8px; */
}
.testimonial-slider-dot {
width: 24px;
height: 4px;
background: rgba(255, 255, 255, 0.4);
border-radius: 9999px;
transition: all 0.3s;
cursor: pointer;
}
.testimonial-slider-dot.active {
width: 40px;
background: #fff;
}
.slick-dotted.slick-slider {
margin-bottom: 0 !important;
position: unset !important;
}
.testimonial-content-wrapper {
position: relative;
padding-right: 50px;
/* Creates dedicated space outside the card */
}
.testimonial-slider-dots {
position: absolute;
right: -54%;
top: 50%;
transform: translateY(-50%);
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.testimonial-slider-dots li {
margin: 5px 0;
/* Add vertical spacing between the dots */
}
/* 3D 2026 Trend Vertical Move Effect */
.testimonial-slider-vertical .slick-list {
padding: 30px 0 !important;
margin: -30px 0;
}
.testimonial-video-thumbnails {
position: absolute;
bottom: 20px;
left: 20px;
display: flex;
gap: 10px;
z-index: 5;
}
.testimonial-thumbnail {
width: 80px;
height: 100px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
border-radius: 8px;
transition: border-color 0.3s ease;
}
.testimonial-thumbnail:hover,
.testimonial-thumbnail.active {
border-color: #fff;
}
#testimonial-video-modal .btn-close {
/* filter: invert(1); */
position: absolute;
top: 20px;
right: 20px;
z-index: 1055;
opacity: 1;
}
#testimonial-video-modal {
padding-right: 0 !important;
}
#testimonial-video-modal .modal-dialog {
max-width: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#testimonial-video-modal .modal-content {
height: 100%;
border: 0;
border-radius: 0;
background-color: #000;
}
#testimonial-video-modal .modal-body {
display: flex;
align-items: center;
justify-content: center;
}
#testimonial-modal-video-player {
width: 100%;
max-height: 100vh;
object-fit: contain;
}
/* Responsive Breakpoints */
@media (max-width: 991px) {
.testimonial-container {
flex-direction: column;
align-items: stretch;
}
.testimonial-media,
.testimonial-content-wrapper {
flex: 0 0 100%;
max-width: 100%;
}
.testimonial-media-wrapper {
height: 400px;
}
.testimonial-content-wrapper {
padding: 30px;
padding-bottom: 50px;
}
.testimonial-content {
padding: 30px;
min-height: auto;
}
.testimonial-quote-text {
font-size: 20px;
line-height: 30px;
}
.testimonial-slider-dots {
flex-direction: row;
right: auto;
top: auto;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.testimonial-slider-dots li {
margin: 0 5px;
}
}
@media (max-width: 767px) {
.testimonial-media {
border-radius: 20px;
}
.testimonial-media-wrapper {
height: 300px;
}
.testimonial-video-thumbnails {
bottom: 10px;
left: 10px;
gap: 5px;
}
.testimonial-thumbnail {
width: 60px;
height: 80px;
}
.testimonial-content-wrapper {
padding: 20px;
padding-bottom: 40px;
border-radius: 20px;
}
.testimonial-content {
padding: 20px;
border-radius: 12px;
}
.testimonial-quote-wrap {
gap: 15px;
}
.testimonial-quote-icon {
width: 30px;
height: 20px;
}
.testimonial-quote-text {
font-size: 16px;
line-height: 24px;
}
.testimonial-author-wrap {
padding-top: 24px;
}
.testimonial-author-avatar {
width: 45px;
height: 45px;
}
.testimonial-author-avatar img {
width: 35px;
}
.testimonial-author-name {
font-size: 16px;
}
}
/* ===========================
TESTIMONIAL SECTION
=========================== */
/* Removed html/body overflow-x: clip to fix modal jump bug */
.testimonial-section {
padding: 60px 0;
overflow: hidden;
}
.testimonial-container {
width: 100%;
/* max-width: 1280px; */
display: flex;
justify-content: center;
align-items: stretch;
gap: 1.5rem;
margin: 0 auto;
overflow: hidden;
}
.testimonial-media {
flex: 0 0 calc(40% - 0.75rem);
max-width: calc(40% - 0.75rem);
position: relative;
border-radius: 40px;
overflow: hidden;
display: flex;
}
.testimonial-media-wrapper {
width: 100%;
height: 730px;
position: relative;
}
.testimonial-media-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-media-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .1);
}
.testimonial-play-btn-wrapper {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-content-wrapper {
flex: 0 0 calc(60% - 0.75rem);
max-width: calc(60% - 0.75rem);
padding: 48px;
position: relative;
border-radius: 40px;
overflow: hidden;
background: linear-gradient(135deg,
#f3f4f6,
#fbcfe8,
#ee48b4);
}
.testimonial-content {
background: #fff;
border-radius: 24px;
padding: 56px;
min-height: 634px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.testimonial-quote-wrap {
display: flex;
flex-direction: column;
gap: 24px;
}
.testimonial-quote-text {
font-size: 24px;
line-height: 32px;
color: #1f2937;
word-break: break-word;
overflow-wrap: break-word;
}
.testimonial-author-wrap {
padding-top: 48px;
}
.testimonial-author-info {
display: flex;
align-items: center;
gap: 16px;
}
.testimonial-author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
}
.testimonial-author-avatar img {
width: 44px;
height: auto;
}
.testimonial-author-name {
font-size: 20px;
font-weight: 600;
}
/* ===========================
SLICK FIX
=========================== */
.testimonial-slider-vertical,
.testimonial-slider-vertical .slick-list,
.testimonial-slider-vertical .slick-track {
overflow: hidden !important;
}
.testimonial-slider-vertical .slick-list {
padding: 0 !important;
margin: 0 !important;
}
.testimonial-slider-vertical .slick-slide {
/* opacity: .4; */
/* transition: all .6s ease; */
}
.testimonial-slider-vertical .slick-slide>div {
margin-bottom: 0;
}
.testimonial-slider-vertical .slick-current>div {}
/* ===========================
DOTS
=========================== */
.testimonial-slider-dots {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
display: flex !important;
flex-direction: column;
align-items: end;
margin: 0;
padding: 0;
}
.testimonial-slider-dots li {
margin: 5px 0;
}
.testimonial-slider-dots li button:before {
font-size: 10px;
}
.testimonial-slider-dots li.slick-active button:before {
color: #fff !important;
}
.testimonial-slider-dots li button:before {
content: "" !important;
width: 20px !important;
height: 4px !important;
display: block !important;
background: rgba(255, 255, 255, 0.3) !important;
border-radius: 50px !important;
opacity: 1 !important;
position: static !important;
transition: all 0.3s ease !important;
color: transparent !important;
border-radius: 0 !important;
}
.testimonial-slider-dots li.slick-active button:before {
width: 20px !important;
background: #fff !important;
}
/* ===========================
THUMBNAILS
=========================== */
.testimonial-video-thumbnails {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
z-index: 5;
}
.testimonial-thumbnail {
width: 80px;
height: 100px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
}
.testimonial-thumbnail:hover,
.testimonial-thumbnail.active {
border-color: #fff;
}
/* ===========================
MOBILE
=========================== */
@media (max-width: 991px) {
.testimonial-container {
flex-direction: column;
}
.testimonial-media,
.testimonial-content-wrapper {
flex: 0 0 100%;
max-width: 100%;
}
.testimonial-media-wrapper {
height: 450px;
}
.testimonial-content-wrapper {
padding: 30px;
/* padding-bottom: 70px; */
}
.testimonial-content {
min-height: 400px;
padding: 30px;
}
.testimonial-quote-text {
font-size: 20px;
line-height: 30px;
}
.testimonial-slider-dots {
left: 50%;
bottom: 15px;
top: auto;
right: auto;
flex-direction: row;
transform: translateX(-50%);
}
.testimonial-slider-dots li {
margin: 0 5px;
}
}
@media (max-width: 767px) {
.testimonial-media {
border-radius: 20px;
}
.testimonial-media-wrapper {
/* height: 320px; */
}
.testimonial-content-wrapper {
padding: 20px;
/* padding-bottom: 70px; */
border-radius: 20px;
}
.testimonial-content {
padding: 20px;
border-radius: 16px;
}
.testimonial-quote-text {
font-size: 16px;
line-height: 26px;
}
.testimonial-author-avatar {
width: 45px;
height: 45px;
}
.testimonial-author-avatar img {
width: 35px;
}
.testimonial-thumbnail {
width: 55px;
height: 70px;
}
.testimonial-video-thumbnails {
left: 10px;
right: 10px;
gap: 6px;
}
}
/* .slick-slider {
position: unset !important;
} */
/* client-highlight styling for heading SVG underline animation */
.client-highlight {
position: relative;
display: inline;
white-space: nowrap;
color: inherit;
}
.client-highlight svg.underline {
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 18px;
overflow: visible;
pointer-events: none;
}
.client-highlight path {
fill: none;
stroke: #f046b7;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
/* Custom highlight and underline animation for 'Decentralized' word in section 2 */
.dex-highlight-word {
position: relative;
display: inline-block;
white-space: normal;
}
.dex-highlight-word svg.dex-underline {
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 12px;
overflow: visible;
pointer-events: none;
}
.dex-highlight-word path {
fill: none;
stroke: #f046b7;
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
/* Custom color scroll animation class */
.dex-scroll-color {
display: inline;
color: inherit;
}
/* Horizontal scroll showcase design matching user image */
.horizontal-scroll-section {
position: relative;
width: 100%;
overflow: hidden;
padding: 80px 0;
background: #ffffff;
}
.horizontal-scroll-section .header-row {
margin-bottom: 30px;
}
.horizontal-scroll-wrapper {
position: relative;
width: 100%;
overflow-x: hidden;
display: flex;
}
.horizontal-scroll-track {
display: flex;
flex-direction: row;
gap: 30px;
padding: 20px 8% 40px;
will-change: transform;
}
.horizontal-scroll-card {
flex-shrink: 0;
width: 380px;
height: 470px;
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.horizontal-scroll-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
}
/* Card colors matching other sections */
.inner_sec_13 .green-style1 {
background: #ccf7e8 !important;
}
.inner_sec_13 .pink-style1 {
background: #fde8f4 !important;
}
.inner_sec_13 .blue-style1 {
background: #e8f1ff !important;
}
/* Mockup Windows inside Cards */
.mockup-container {
width: 100% !important;
height: 240px !important;
background: transparent;
border-radius: 16px;
/* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02); */
/* border: 1px solid rgba(0, 0, 0, 0.04); */
/* padding: 12px; */
overflow: hidden;
display: flex;
flex-direction: column;
}
/* .pink-style1 .mockup-container {
background: #fff5fa !important;
}
.blue-style1 .mockup-container {
background: #f4f8ff !important;
}
.green-style1 .mockup-container {
background: #f0fdf9 !important;
} */
.mockup-container img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block;
margin: auto;
}
.mockup-window {
display: flex;
flex-direction: column;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.mockup-window .window-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 8px;
}
.mockup-window .window-header .dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.mockup-window .window-header .dot.red {
background: #ff5f56;
}
.mockup-window .window-header .dot.yellow {
background: #ffbd2e;
}
.mockup-window .window-header .dot.green {
background: #27c93f;
}
.mockup-window .window-header .window-title {
font-size: 11px;
color: #888888;
margin-left: 5px;
font-weight: 500;
}
.mockup-window .window-content {
flex-grow: 1;
font-size: 11px;
color: #333333;
overflow: hidden;
}
/* Specific Mockup Styles */
.solidity-editor .window-content {
font-family: "Courier New", Courier, monospace;
color: #4a4a4a;
line-height: 1.4;
}
.solidity-editor .keyword {
color: #f046b7;
font-weight: bold;
}
.solidity-editor .name {
color: #0088cc;
}
.solidity-editor .comment {
color: #888888;
font-style: italic;
}
.solidity-editor .indent {
margin-left: 12px;
}
.solidity-editor .indent-2 {
margin-left: 24px;
}
.order-book .order-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
position: relative;
}
.order-book .order-row.ask .price {
color: #e91e63;
}
.order-book .order-row.bid .price {
color: #4caf50;
}
.order-book .order-row .size {
color: #888888;
font-size: 9px;
}
.order-book .order-row .bar {
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 100%;
opacity: 0.1;
border-radius: 2px;
}
.order-book .order-row.ask .bar {
background: #e91e63;
}
.order-book .order-row.bid .bar {
background: #4caf50;
}
.order-book .spread-row {
text-align: center;
font-size: 10px;
color: #888888;
border-top: 1px dashed #eee;
border-bottom: 1px dashed #eee;
padding: 3px 0;
margin: 4px 0;
}
.liquidity-pool .pool-stat {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.liquidity-pool .pool-stat .label {
color: #888888;
font-size: 9px;
}
.liquidity-pool .pool-stat .value {
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
margin-top: 2px;
}
.liquidity-pool .token-bar-item {
margin-bottom: 8px;
}
.liquidity-pool .token-bar-item .token {
font-weight: 600;
font-size: 9px;
}
.liquidity-pool .token-bar-item .percent {
float: right;
font-size: 9px;
color: #888888;
}
.liquidity-pool .token-bar-item .p-bar {
height: 6px;
background: #20b2aa;
border-radius: 3px;
margin-top: 3px;
}
.connect-wallet .wallet-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid #eeeeee;
margin-bottom: 6px;
font-weight: 500;
font-size: 12px;
position: relative;
}
.connect-wallet .wallet-option.active {
border-color: #f046b7;
background: #fdf5fa;
}
.connect-wallet .wallet-dot {
width: 14px;
height: 14px;
border-radius: 3px;
background: #f046b7;
}
.connect-wallet .status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #4caf50;
position: absolute;
right: 12px;
}
.bridge-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
margin-top: 6px;
}
.bridge-row .chain-box {
padding: 6px 12px;
background: #f4f4f4;
border-radius: 6px;
font-weight: 600;
font-size: 10px;
}
.bridge-row .bridge-arrow {
color: #20b2aa;
font-weight: bold;
}
.bridge-progress .progress-line {
height: 6px;
background: #eeeeee;
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.bridge-progress .progress-fill {
height: 100%;
background: #20b2aa;
}
.bridge-progress .status-text {
font-size: 9px;
color: #888888;
}
.audit-status {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
background: #f0faf3;
border-radius: 8px;
border: 1px solid #d4edda;
color: #155724;
font-weight: 600;
margin-bottom: 12px;
}
.audit-list .audit-item {
color: #155724;
margin-bottom: 6px;
font-weight: 500;
}
.ui-ux-dash .swap-box {
background: #f9f9f9;
border-radius: 10px;
padding: 12px;
margin-top: 4px;
}
.ui-ux-dash .input-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.ui-ux-dash .input-row .amount {
font-size: 16px;
font-weight: bold;
}
.ui-ux-dash .input-row .token {
font-weight: 600;
color: #888888;
}
.ui-ux-dash .swap-icon-row {
text-align: center;
color: #f046b7;
font-weight: bold;
margin: 4px 0;
}
.deploy-status .status-metric {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
font-weight: 600;
}
.deploy-status .pulse-node {
width: 8px;
height: 8px;
background: #4caf50;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.6;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.6;
}
}
.deploy-status .metric-grid {
display: flex;
gap: 15px;
}
.deploy-status .metric-item {
flex: 1;
background: #f8f9fa;
border-radius: 8px;
padding: 8px;
text-align: center;
}
.deploy-status .metric-item .val {
font-size: 13px;
font-weight: bold;
}
.deploy-status .metric-item .lbl {
font-size: 8px;
color: #888888;
}
/* Details text inside cards */
.horizontal-scroll-card .card-details {
margin-top: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0;
text-align: center;
}
.horizontal-scroll-card .card-title {
font-size: 20px;
/* font-weight: 700; */
color: #070d25;
margin-bottom: 12px;
line-height: 1.3;
}
.horizontal-scroll-card .card-desc {
font-size: 14px;
line-height: 1.6;
/* color: #555c70; */
margin: 0;
}
.horizontal-scroll-section .cta-row {
margin-top: 40px;
}
/* Responsiveness */
@media (max-width: 991px) {
.horizontal-scroll-section {
padding: 60px 0;
}
.horizontal-scroll-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 20px;
}
.horizontal-scroll-track {
padding: 10px 20px;
gap: 20px;
}
.horizontal-scroll-card {
width: 300px;
height: 480px;
padding: 20px;
}
.horizontal-scroll-card .card-details {
padding: 0;
margin-top: 15px;
}
.mockup-container {
/* height: 180px !important; */
padding: 10px;
}
}
/* Custom scroll color animation classes */
.dex-scroll-color-services,
.dex-scroll-color-why,
.dex-scroll-color-blue {
display: inline;
color: inherit;
}
/* Box 1 Hover (Smart contract best practices) -> Green Theme */
.inner_sec23_new:has(.sec23-box-1:hover) {
background-color: #f0fdf4;
/* Light emerald tint */
background-image: radial-gradient(circle at 30% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
}
.inner_sec23_new:has(.sec23-box-1:hover) .sec23-box-1 {
border-color: rgba(16, 185, 129, 0.4);
box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
}
/* Box 2 Hover (Code review & vulnerability assessment) -> Yellow/Gold Theme */
.inner_sec23_new:has(.sec23-box-2:hover) {
background-color: #fffbeb;
/* Light amber tint */
background-image: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
}
.inner_sec23_new:has(.sec23-box-2:hover) .sec23-box-2 {
border-color: rgba(245, 158, 11, 0.4);
box-shadow: 0 20px 40px rgba(245, 158, 11, 0.08);
}
/* Box 3 Hover (Access control management) -> Blue Theme */
.inner_sec23_new:has(.sec23-box-3:hover) {
background-color: #eff6ff;
/* Light blue tint */
background-image: radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
}
.inner_sec23_new:has(.sec23-box-3:hover) .sec23-box-3 {
border-color: rgba(59, 130, 246, 0.4);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.08);
}
/* Box 4 Hover (Wallet & key management recommendations) -> Purple Theme */
.inner_sec23_new:has(.sec23-box-4:hover) {
background-color: #f5f3ff;
/* Light violet/purple tint */
background-image: radial-gradient(circle at 30% 60%, rgba(139, 92, 246, 0.08) 0%, transparent 60%);
}
.inner_sec23_new:has(.sec23-box-4:hover) .sec23-box-4 {
border-color: rgba(139, 92, 246, 0.4);
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.08);
}
/* Box 5 Hover (Liquidity & transaction monitoring) -> Cyan/Teal Theme */
.inner_sec23_new:has(.sec23-box-5:hover) {
background-color: #ecfeff;
/* Light cyan tint */
background-image: radial-gradient(circle at 50% 60%, rgba(6, 182, 212, 0.08) 0%, transparent 60%);
}
.inner_sec23_new:has(.sec23-box-5:hover) .sec23-box-5 {
border-color: rgba(6, 182, 212, 0.4);
box-shadow: 0 20px 40px rgba(6, 182, 212, 0.08);
}
/* Box 6 Hover (Regular security testing and upgrades) -> Rose/Pink Theme */
.inner_sec23_new:has(.sec23-box-6:hover) {
background-color: #fff1f2;
/* Light rose/pink tint */
background-image: radial-gradient(circle at 70% 60%, rgba(244, 63, 94, 0.08) 0%, transparent 60%);
}
.inner_sec23_new:has(.sec23-box-6:hover) .sec23-box-6 {
border-color: rgba(244, 63, 94, 0.4);
box-shadow: 0 20px 40px rgba(244, 63, 94, 0.08);
}
.why-choose-section {
padding: 50px 0 !important;
position: relative;
/* background: linear-gradient(to bottom, #ffffff 50%, #070d25 50%); */
}
.why-choose-card {
background: linear-gradient(135deg, #f5f8ff 0%, #e6efff 100%);
border-radius: 24px;
padding: 60px;
box-shadow: 0 20px 50px rgba(7, 13, 37, 0.05);
border: 1px solid rgba(20, 104, 239, 0.15);
text-align: center;
}
.why-choose-card .svg_button {
margin: 30px auto 0 !important;
display: table !important;
}
@media (max-width: 991px) {
.why-choose-section {
padding: 0 !important;
/* background: linear-gradient(to bottom, #ffffff 50%, #070d25 50%); */
}
.why-choose-card {
padding: 40px 30px;
}
}
@media (max-width: 575px) {
.why-choose-card {
padding: 30px 15px;
}
}
.management_cardwrap {
position: relative;
z-index: 10;
border-radius: 16px;
/* background: #ecffeb; */
}
.management_card {
padding: 50px 30px;
}
.ceo_card_pinned_two {
background: #c2d8ff;
z-index: 2;
}
.ceo_card_pinned_three {
background: #ffd8e3;
z-index: 3;
}
.ceo_card_pinned_four {
background: #ffff9f;
z-index: 4;
}
.management_card_content {
align-items: center;
}
.management_card_content p {
text-align: left;
position: relative;
font-weight: 500;
margin-bottom: 0;
line-height: 30px;
max-width: 80%;
}
.management_card_content p::after,
.management_card_content p::before {
content: "";
width: 58px;
height: 36px;
position: absolute;
}
.management_card_content p::before {
top: -45px;
left: -30px;
}
.management_card_content p::after {
bottom: -20px;
right: -20px;
transform: rotateY(180deg);
}
.management_card_01 .management_card_title .managment_heads {
color: #00d78b;
}
.management_card_02 .management_card_content_head::after {
background: url(../images/home/Vector2.webp) no-repeat;
}
.management_card_03 .management_card_content_head::after {
background: url(../images/home/Vector3.webp) no-repeat;
}
.management_card_04 .management_card_content_head::after {
background: url(../images/home/Vector4.webp) no-repeat;
}
.management_card_title .managment_heads {
font-size: 24px;
font-weight: 600;
margin: 0;
}
.management_card_title .managment_heads a {
color: #070d25;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
}
.management_card_title p.name {
font-weight: 600;
font-size: 24px;
color: #1468ef;
margin-bottom: 0;
}
.managment_heads_2 p.name {
color: #e530b2;
}
.management_card_title .managment_heads a span {
line-height: 0;
}
.management_card_title p {
font-size: 16px;
font-weight: 500;
margin: 0;
color: #5a617e;
}
.management_cardwrap .slick-dots {
bottom: 30px;
top: unset;
width: auto;
right: 0;
left: 0;
}
.management_card_title {
margin-top: 30px;
max-width: 70%;
}
.management_cardwrap .slick-dots li.slick-active {
width: 100px;
height: 10px;
border-radius: 25px;
}
.management_cardwrap .slick-dots li {
border-radius: 100%;
background: #00d78c;
width: 10px;
height: 10px;
margin: 0 5px;
transition: 0.5s;
}
.section_head {
font-size: 48px;
content-visibility: visible;
}
.section_head {
font-weight: 600;
}
@media screen and (max-width: 1199px) {
.management_card_content p {
max-width: 100%;
}
.management_card_title {
max-width: 80%;
}
.management_card {
margin: 30px 0 20px;
}
.management_card .management_card_content_head::after {
top: -80px;
right: 0;
}
.management_cardwrap .slick-dots {
transform: unset;
bottom: -30px;
top: unset;
right: 0;
left: 0;
}
}
@media (max-width: 991px) {
.management_card_content img.management_img {
display: none !important;
}
.management_card_content_head p {
text-align: center !important;
}
.management_card_title {
max-width: 100% !important;
}
.management_card_title .managment_heads .d-flex {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 15px;
}
.management_card_title .managment_heads .d-flex .w-100 {
margin-bottom: 0px !important;
}
.management_card_title .managment_heads .d-flex .d-flex {
align-items: center !important;
gap: 5px !important;
}
.management_card_content_head .svg_button {
margin: 20px auto !important;
display: table !important;
}
}
.inner_sec23_new {
padding: 80px 0;
overflow: hidden;
background: #ffffff;
}
@media (max-width: 991px) {
.inner_sec23_new {
padding: 60px 0;
}
}
@media (max-width: 767px) {
.inner_sec23_new {
padding: 40px 0;
}
.sec23-carousel-wrapper {
margin: 20px auto 0 !important;
padding: 20px 0 !important;
}
}
/* ── 3D Security Framework Carousel Styles ── */
.sec23-carousel-wrapper {
position: relative;
width: 100%;
max-width: 1200px;
margin: 40px auto 0;
padding: 40px 0;
overflow: visible;
}
.sec23-carousel-container {
position: relative;
width: 100%;
height: 520px;
perspective: 1200px;
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
touch-action: pan-y;
}
.sec23-carousel-track {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}
.sec23-carousel-card {
position: absolute;
width: 350px;
height: 480px;
border-radius: 24px;
padding: 28px 24px 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.4);
background-clip: padding-box;
transform-style: preserve-3d;
will-change: transform, opacity;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sec23-carousel-card.purple-style {
background: #c7d2fe;
color: #0f172a;
}
.sec23-carousel-card.rose-style {
background: #fecdd3;
color: #0f172a;
}
.sec23-carousel-card.aqua-style {
background: #a5f3fc;
color: #0f172a;
}
.sec23-carousel-card.gold-style {
background: #fde68a;
color: #0f172a;
}
.sec23-carousel-card.peach-style {
background: #fed7aa;
color: #0f172a;
}
.sec23-carousel-card.mint-style {
background: #a7f3d0;
color: #0f172a;
}
.sec23-card-details {
display: flex;
flex-direction: column;
margin-bottom: auto;
}
.sec23-card-title {
font-size: 18px;
font-weight: 600;
line-height: 1.35;
margin: 0 0 10px 0;
min-height: 50px;
text-align: center;
color: #0f172a !important;
}
.sec23-card-desc {
font-size: 14px;
line-height: 1.5;
color: #475569;
margin: 0;
}
.sec23-card-mockup {
position: relative;
width: 100%;
/* height: 200px; */
margin-top: 0;
margin-bottom: 20px;
border-radius: 16px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
/* background: rgba(255, 255, 255, 0.6); */
/* border: 1px solid rgba(255, 255, 255, 0.3); */
}
/* Controls */
.sec23-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 25;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
color: #0f172a;
}
.sec23-carousel-btn:hover {
background: #f046b7;
color: #fff;
border-color: #f046b7;
box-shadow: 0 8px 25px rgba(240, 70, 183, 0.35);
transform: translateY(-50%) scale(1.08);
}
.sec23-carousel-btn.prev-btn {
left: 0;
}
.sec23-carousel-btn.next-btn {
right: 0;
}
.sec23-carousel-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 25px;
position: relative;
z-index: 15;
}
.sec23-carousel-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
.sec23-carousel-dots .dot.active {
background: #f046b7;
transform: scale(1.3);
border-color: #f046b7;
}
/* Responsiveness */
@media (max-width: 991px) {
.sec23-carousel-container {
height: 480px;
}
.sec23-carousel-card {
width: 300px;
height: 440px;
padding: 20px;
}
.sec23-card-mockup {
/* height: 160px; */
}
.sec23-carousel-btn {
width: 44px;
height: 44px;
}
.sec23-carousel-btn.prev-btn {
left: 10px;
}
.sec23-carousel-btn.next-btn {
right: 10px;
}
}
@media (max-width: 575px) {
.sec23-carousel-container {
height: 420px;
}
.sec23-carousel-card {
width: 250px;
height: 380px;
padding: 16px;
}
.sec23-card-title {
font-size: 16px;
margin-bottom: 8px;
min-height: 40px;
}
.sec23-card-mockup {
/* height: 140px; */
margin-bottom: 12px;
}
.sec23-carousel-btn {
display: none !important;
}
}
/* ── Book a One-on-One Strategy Call Section Styles ── */
.strategy-call-section {
position: relative;
background: linear-gradient(135deg, #e6f0ff 0%, #b8d8ff 100%);
padding: 80px 0;
overflow: hidden;
}
.strategy-call-bg-pattern-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.25;
background-image: radial-gradient(circle at 50% 50%, #cbd5e1 4%, transparent 4%);
background-size: 32px 32px;
pointer-events: none;
z-index: 1;
}
.strategy-call-bg-pattern-2 {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
opacity: 0.3;
background: radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0) 60%);
pointer-events: none;
z-index: 1;
}
.strategy-call-section .container {
position: relative;
z-index: 2;
}
.strategy-call-title {
font-family: 'Inter', sans-serif;
font-size: 52px;
font-weight: 800;
line-height: 1.15;
color: #0f172a;
}
.strategy-call-title .highlight-blue {
color: #2563eb;
background: linear-gradient(120deg, #2563eb, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.strategy-call-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.strategy-call-divider .divider-line {
width: 80px;
height: 1px;
background: #bfdbfe;
}
.strategy-call-divider .divider-badge-wrapper {
padding: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.strategy-call-divider .divider-badge {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #60a5fa;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #2563eb;
}
/* Profile Image Container with Decorative Circles */
.profile-image-container {
position: relative;
width: 100%;
max-width: 480px;
margin: 0 auto;
height: 520px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.dec-circle-outer {
position: absolute;
top: 10%;
left: 10%;
width: 320px;
height: 320px;
border-radius: 50%;
border: 1px solid #bfdbfe;
opacity: 0.4;
z-index: 1;
}
.dec-circle-inner {
position: absolute;
top: 15%;
left: 20%;
width: 320px;
height: 320px;
border-radius: 50%;
border: 2px solid #93c5fd;
opacity: 0.6;
z-index: 1;
}
.dec-dot {
position: absolute;
bottom: 8%;
left: 18%;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 0 15px rgba(37, 99, 235, 0.6);
z-index: 3;
}
.profile-image-wrapper {
position: relative;
/* width: 380px; */
/* height: 480px; */
border-radius: 24px;
overflow: hidden;
/* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); */
z-index: 2;
/* background: #000; */
}
/* .profile-image-wrapper .gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
z-index: 2;
} */
.profile-image {
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Profile Details Card */
.profile-details-card {
background: #ffffff;
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 25px -5px rgba(30, 58, 138, 0.05), 0 8px 10px -6px rgba(30, 58, 138, 0.05);
border: 1px solid rgba(219, 234, 254, 0.5);
display: flex;
flex-direction: column;
gap: 28px;
}
.profile-quote-wrapper {
display: flex;
gap: 16px;
align-items: flex-start;
}
.quote-icon-container {
width: 40px;
height: 40px;
border-radius: 50%;
background: #eff6ff;
display: flex;
align-items: center;
justify-content: center;
color: #2563eb;
flex-shrink: 0;
}
.profile-desc {
font-size: 16px;
line-height: 1.65;
color: #475569;
margin: 0;
}
.profile-info-header {
display: flex;
align-items: center;
gap: 16px;
}
.profile-avatar-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: #2563eb;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
}
.profile-identity {
display: flex;
flex-direction: column;
}
.profile-name {
font-size: 24px;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.profile-title {
font-size: 16px;
font-weight: 500;
color: #2563eb;
margin: 0 0 6px 0;
}
.profile-underline {
width: 48px;
height: 2px;
background: #2563eb;
border-radius: 1px;
}
.profile-contact-channels {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-channel-item {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none !important;
color: #334155;
transition: all 0.3s ease;
}
.contact-channel-item .channel-icon {
/* width: 40px; */
/* height: 40px; */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.whatsapp-channel .channel-icon {
background: #22c55e;
}
.linkedin-channel .channel-icon {
background: #0077b5;
}
.contact-channel-item .channel-value {
font-size: 16px;
font-weight: 600;
color: #334155;
transition: color 0.3s ease;
}
.contact-channel-item:hover .channel-value {
color: #2563eb;
}
.contact-channel-item:hover .channel-icon {
transform: translateY(-2px) scale(1.05);
}
.profile-action-wrapper {
margin-top: 10px;
}
.btn-book-call {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #2563eb;
color: #ffffff !important;
padding: 16px 36px;
border-radius: 16px;
font-size: 18px;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 4px 6px -4px rgba(59, 130, 246, 0.3), 0 10px 15px -3px rgba(59, 130, 246, 0.3);
transition: all 0.3s ease;
overflow: hidden;
cursor: pointer;
}
.btn-book-call::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.btn-book-call:hover::before {
transform: translateX(0);
}
.btn-book-call:hover {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 8px 12px -4px rgba(59, 130, 246, 0.4), 0 15px 20px -3px rgba(59, 130, 246, 0.4);
}
.btn-book-call:active {
transform: translateY(0);
}
.btn-book-call .arrow-icon {
transition: transform 0.3s ease;
}
.btn-book-call:hover .arrow-icon {
transform: translateX(4px);
}
/* Responsiveness */
@media (max-width: 991px) {
.strategy-call-title {
font-size: 40px;
}
.profile-image-container {
height: 480px;
margin-bottom: 40px;
}
.profile-image-wrapper {
width: 320px;
height: 420px;
}
.dec-circle-outer,
.dec-circle-inner {
width: 260px;
height: 260px;
}
.profile-details-card {
padding: 30px;
}
}
@media (max-width: 767px) {
.strategy-call-divider {
display: none !important;
}
.profile-image-container {
display: none !important;
}
.strategy-call-section .mb-5 {
margin-bottom: 0 !important;
}
.profile-details-card {
text-align: center;
align-items: center;
}
.profile-quote-wrapper {
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-info-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-underline {
margin: 0 auto;
}
.profile-contact-channels {
align-items: center;
}
.profile-action-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
}
@media (max-width: 575px) {
.strategy-call-title {
font-size: 32px;
}
.profile-details-card {
padding: 20px;
gap: 20px;
}
.profile-name {
font-size: 20px;
}
.btn-book-call {
width: 100%;
padding: 14px 28px;
font-size: 16px;
}
}
/* ── Cost to Build a Decentralized Exchange Section Styles ── */
.cost-section-wrapper {
padding: 80px 0;
background: #ffffff;
}
.cost-title-main {
font-family: 'Inter', sans-serif;
font-size: 52px;
font-weight: 800;
line-height: 1.15;
color: #0c1844;
/* Dark blue/black */
}
.cost-title-main .highlight-blue {
color: #2563eb;
background: linear-gradient(120deg, #2563eb, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cost-table-header {
font-size: 16px;
font-weight: 700;
color: #1e293b;
text-transform: capitalize;
letter-spacing: 0.5px;
}
.cost-rows-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.cost-row-item {
display: flex;
align-items: center;
border-radius: 20px;
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
overflow: hidden;
transition: all 0.3s ease;
min-height: 96px;
}
.cost-row-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}
.cost-platform-side {
display: flex;
align-items: center;
width: 40%;
padding: 16px 24px;
flex-shrink: 0;
}
.cost-platform-icon {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cost-platform-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.cost-row-item .vertical-bar {
width: 2px;
height: 36px;
margin: 0 24px;
border-radius: 1px;
}
.cost-platform-name {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.cost-arrow-divider {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
margin-left: -20px;
margin-right: -20px;
}
.arrow-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(226, 232, 240, 0.6);
transition: all 0.3s ease;
}
.cost-row-item:hover .arrow-circle {
transform: scale(1.1);
}
.cost-scope-side {
flex: 1;
padding: 16px 40px 16px 48px;
height: 100%;
display: flex;
align-items: center;
min-height: 96px;
}
.cost-scope-text {
font-size: 16px;
font-weight: 600;
color: #334155;
margin: 0;
line-height: 1.5;
}
/* Theme Configurations */
/* Blue Theme (Basic) */
.blue-theme {
border-color: #bfdbfe;
}
.blue-theme .vertical-bar {
background: #2563eb;
}
.blue-theme .arrow-circle {
color: #2563eb;
}
.blue-theme .cost-scope-side {
background: linear-gradient(90deg, #bfdbfe 0%, #dbeafe 100%);
border-left: 1px solid rgba(37, 99, 235, 0.05);
}
/* Purple Theme (Mid) */
.purple-theme {
border-color: #ddd6fe;
}
.purple-theme .vertical-bar {
background: #8b5cf6;
}
.purple-theme .arrow-circle {
color: #8b5cf6;
}
.purple-theme .cost-scope-side {
background: linear-gradient(90deg, #ddd6fe 0%, #ede9fe 100%);
border-left: 1px solid rgba(139, 92, 246, 0.05);
}
/* Green Theme (Enterprise) */
.green-theme {
border-color: #a7f3d0;
}
.green-theme .vertical-bar {
background: #10b981;
}
.green-theme .arrow-circle {
color: #10b981;
}
.green-theme .cost-scope-side {
background: linear-gradient(90deg, #a7f3d0 0%, #d1fae5 100%);
border-left: 1px solid rgba(16, 185, 129, 0.05);
}
/* Orange Theme (White Label) */
.orange-theme {
border-color: #fde68a;
}
.orange-theme .vertical-bar {
background: #f59e0b;
}
.orange-theme .arrow-circle {
color: #f59e0b;
}
.orange-theme .cost-scope-side {
background: linear-gradient(90deg, #fde68a 0%, #fef3c7 100%);
border-left: 1px solid rgba(245, 158, 11, 0.05);
}
/* Bottom Info Card */
.cost-info-box-wrapper {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 20px;
padding: 24px 32px;
border: 1px solid #bfdbfe;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.info-icon-side {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cost-info-box-wrapper .vertical-bar {
width: 1px;
height: 48px;
background: #e2e8f0;
margin: 0 32px;
}
.info-text-side {
flex: 1;
}
.info-desc {
font-size: 15px;
line-height: 1.6;
color: #475569;
}
/* Responsive Overrides */
@media (max-width: 991px) {
.cost-title-main {
font-size: 40px;
}
.cost-platform-side {
width: 45%;
}
.cost-platform-icon {
width: 56px;
height: 56px;
}
.cost-row-item .vertical-bar {
margin: 0 16px;
}
.cost-platform-name {
font-size: 18px;
}
.cost-scope-side {
padding: 16px 24px 16px 36px;
}
.cost-scope-text {
font-size: 15px;
}
}
@media (max-width: 767px) {
.cost-row-item {
flex-direction: column;
align-items: stretch;
min-height: auto;
padding: 16px 0 0;
}
.cost-platform-side {
width: 100%;
padding: 0 24px 16px;
}
.cost-arrow-divider {
display: none;
/* Hide the center arrow circular badge on mobile */
}
.cost-scope-side {
border-left: none !important;
border-top: 1px solid rgba(226, 232, 240, 0.6);
padding: 20px 24px;
min-height: auto;
}
.cost-info-box-wrapper {
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px;
}
.cost-info-box-wrapper .vertical-bar {
width: 48px;
height: 1px;
margin: 16px 0;
}
}
@media (max-width: 575px) {
.cost-title-main {
font-size: 32px;
}
.cost-platform-name {
font-size: 16px;
}
.cost-scope-text {
font-size: 14px;
}
.info-desc {
font-size: 13.5px;
}
}
/* ── Revenue Models of DEX Platforms Section Styles ── */
.dex-revenue-section {
background: #000;
position: relative;
overflow: hidden;
padding: 80px 0;
}
.dex-revenue-title {
color: #ffffff;
position: relative;
z-index: 5;
}
.dex-revenue-subtitle {
color: #fff;
max-width: 650px;
margin: 0 auto;
position: relative;
z-index: 5;
}
.dex-revenue-img-container {
position: relative;
display: inline-block;
margin: -60px auto 0 auto;
/* Pull the image container up */
width: 100%;
max-width: 1080px;
}
.dex-revenue-img-container::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, rgba(139, 92, 246, 0.15) 50%, transparent 70%);
z-index: 1;
pointer-events: none;
filter: blur(40px);
}
.dex-revenue-img {
position: relative;
z-index: 2;
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.dex-revenue-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
padding: 0;
position: relative;
z-index: 3;
margin: -160px auto 30px auto;
/* Pull the cards up to overlap the bottom of the image and center */
max-width: 1000px;
}
.dex-revenue-card {
width: calc(25% - 12px);
/* 4 cards per row, account for 16px gap */
background: rgba(10, 15, 30, 0.8);
/* Sleek semi-transparent dark background */
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 12px;
padding: 16px 12px;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 110px;
/* Small card size as requested */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.dex-revenue-card:hover {
background: rgba(15, 23, 42, 0.95);
border-color: rgba(99, 102, 241, 0.6);
/* Indigo glow on hover */
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(99, 102, 241, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.revenue-card-title {
font-size: 15px;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
line-height: 1.3;
}
.revenue-card-desc {
font-size: 16px;
color: #f1f5f9;
/* Made brighter for better readability over the image background */
margin: 0;
line-height: 1.4;
font-weight: 500;
}
/* Responsive Breakpoints */
@media (max-width: 1400px) {
.dex-revenue-grid {
margin-top: -110px;
/* Adjust negative margin since image size scales down */
gap: 12px;
}
.dex-revenue-card {
width: calc(25% - 9px);
/* 4 cards per row, account for 12px gap */
}
}
@media (max-width: 991px) {
.dex-revenue-grid {
margin-top: -70px;
}
.dex-revenue-card {
width: calc(33.333% - 8px);
/* 3 cards per row, account for 12px gap */
}
.dex-revenue-img-container {
margin-top: -40px;
}
.dex-revenue-glow {
width: 320px;
height: 320px;
}
}
@media (max-width: 767px) {
.dex-revenue-grid {
gap: 10px;
margin-top: -30px;
}
.dex-revenue-card {
width: calc(50% - 5px);
/* 2 cards per row, account for 10px gap */
}
.dex-revenue-img-container {
margin-top: -20px;
}
}
@media (max-width: 480px) {
.dex-revenue-grid {
margin-top: 15px;
/* No overlap on mobile, just display below the image */
gap: 12px;
}
.dex-revenue-card {
width: 100%;
/* 1 card per row */
}
.dex-revenue-img-container {
margin-top: 0;
}
.dex-revenue-card {
min-height: auto;
padding: 16px;
}
}