html {
font-size: 16px;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
padding: 0;
margin: 0;
font-size: 18px;
line-height: 28px;
color: #333333;
line-height: 28px;
overflow-x: hidden;
font-family:Rubik,sans-serif!important;
background: #fafbff;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Poppins', sans-serif;
margin: 0;
line-height: 1.3;
font-weight: 600;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
p {
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
span {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 30px;
font-size: 18px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0, 46, 91, 1);
}
.section-space {
padding-top: 100px;
padding-bottom: 50px;
}
.container {
max-width: 1311px !important;
width: 100% !important;
}
.smart-contract-development {
.banner {
width: 100%;
position: relative;
min-height: 600px;
padding: 80px 0 30px;
display: flex;
background-size: cover;
align-items: center;
background-image: url("../images/main-banner.webp");
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
}
.banner-head {
.banner-title {
font-size: 45px;
color: #fff;
line-height: 65px;
text-align: left;
}
.banner-pera {
font-size: 16px;
line-height: 24px;
color: #fff;
text-align: left;
}
.btn-outline {
font-weight: 500;
color: #f0f6fc;
border-radius: 12px;
font-size: 16px;
padding: 10px 25px;
line-height: 24px;
border-color: #fff;
&:hover {
background-color: #fff;
color: #002e5b;
}
}
.btn-outline-light {
color: #002E5B;
font-size: 16px;
border-radius: 12px;
padding: 10px 25px;
font-weight: 500;
line-height: 24px;
border-color: #f0f6fc;
background-color: #fff;
&:hover {
background-color: transparent;
color: #ffffff;
}
}
}
}
/* Quest GLT section start */
.quest-section {
margin: 0 auto;
text-align: center;
span {
font-size: 30px;
}
.quest-title {
font-size: 30px;
line-height: 45px;
text-align: center;
color: rgba(0, 46, 91, 1);
}
.smart-contract-para {
font-size: 16px;
color: #000;
line-height: 26px;
text-align: center;
font-weight: 400;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
}
@media (max-width:991px){
div#n2-ss-3 .n2-ss-control-bullet{
bottom: -24px !important;
}
}
@media (max-width:768px){
}
.our-smart-section {
padding: 50px 0;
.our-smart-title {
font-size: 30px;
font-weight: 600;
line-height: 45px;
color: rgba(0, 46, 91, 1);
@media (max-width: 768px) {
font-size: 28px;
line-height: 42px;
}
@media (max-width: 576px) {
font-size: 24px;
line-height: 36px;
text-align: center;
}
}
.our-smart-pera {
font-size: 16px;
line-height: 24px;
color: #000;
@media (max-width: 768px) {
font-size: 14px;
line-height: 20px;
}
@media (max-width: 576px) {
font-size: 14px;
line-height: 20px;
text-align: center;
}
}
.our-smart-box {
background: rgba(0, 46, 91, 1);
padding: 20px;
border-radius: 10px;
color: #fff;
height: 100%;
@media (max-width: 768px) {
padding: 15px;
}
@media (max-width: 576px) {
padding: 10px;
}
.inner-title {
font-size: 20px;
font-weight: 600;
line-height: 30px;
color: #fff;
@media (max-width: 768px) {
font-size: 18px;
line-height: 28px;
}
@media (max-width: 576px) {
font-size: 16px;
line-height: 24px;
text-align: left;
}
}
.inner-pera {
color: #fff;
margin-bottom: 0;
font-size: 16px;
line-height: 24px;
@media (max-width: 768px) {
font-size: 14px;
line-height: 20px;
}
@media (max-width: 576px) {
font-size: 14px;
line-height: 20px;
text-align: center;
}
}
}
}
/* Unleash Business Efficiency */
.unleash-business {
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
}
.unleash-bus-title {
font-size: 30px;
line-height: 45px;
text-align: left;
color: rgba(0, 46, 91, 1);
}
.unleash-bus-pera {
font-size: 16px;
line-height: 24px;
/* text-align: left; */
color: #212529
}
.btn-outline-light {
background-color: rgba(0, 46, 91, 1);
border-radius: 12px;
padding: 10px 25px;
color: #fff;
border-color: #f0f6fc;
&:hover {
background-color: #f0f6fc;
border: 1px solid rgba(0, 46, 91, 1);
color: #0d1117;
}
}
}
/* Unleash Business Efficiency End */
/* why business start */
.why-business {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #002E5B 0%, #FFFFFF 100%);
margin: 0 auto;
text-align: center;
.top-head {
.why-business-title {
font-size: 30px;
line-height: 45px;
text-align: center;
color: rgba(255, 255, 255, 1);
}
}
.feature-box {
background: white;
color: black;
padding: 20px;
margin: 20px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
.inner-title {
font-size: 20px;
font-weight: 600;
line-height: 30px;
text-align: left;
}
.inner-pera {
font-size: 16px;
line-height: 24px;
color: #212529;
text-align: left;
}
}
.icon-container {
width: 80px;
height: 80px;
background-color: #004080;
border-radius: 50%;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 45px;
}
}
.icon-container i {
color: white;
font-size: 20px;
}
.arrow-box {
position: relative;
background: white;
color: black;
text-align: left;
padding: 20px;
}
.arrow-box::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 18px solid transparent;
}
.left-arrow {
margin-left: 15px;
}
.left-arrow::after {
left: -35px;
border-right-color: white;
}
.right-arrow::after {
right: -35px;
border-left-color: white;
}
}
/* why business end */
/* blockchain networks */
.blockchain-networks {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
.top-head {
.blockchain-title {
font-size: 30px;
line-height: 45px;
text-align: center;
color: rgba(0, 46, 91, 1);
}
}
img {
width: 70%;
margin: 0 auto;
}
}
/* blockchain networks end */
/* Our Smart Contract Development Process */
.development-process {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
.top-head {
.development-process-title {
font-size: 30px;
line-height: 45px;
text-align: center;
color: rgba(0, 46, 91, 1);
}
}
.development-process-box {
background: #fff;
padding: 10px;
border-radius: 8px;
color: #000000;
text-align: left;
min-height: 180px;
margin-bottom: 20px;
box-shadow: 0px 2px 4px 2px #294997;
.title-text {
.inner-title {
font-size: 20px;
line-height: 30px;
text-align: left;
color: #000;
}
.inner-pera {
font-size: 14px;
font-weight: 400;
line-height: 21px;
text-align: left;
color: #000;
margin-bottom: 0;
}
}
img {
margin-right: 20px;
}
}
.arrow-position {
width: 140px;
position: relative;
bottom: 0;
top: 40px;
}
}
/* Our Smart Contract Development Process End */
/* Unveiling Our Smart Contract */
.development-technology {
width: 100%;
position: relative;
height: 600px;
display: flex;
background-size: cover;
align-items: center;
background-image: url("../images/smartcontract.webp");
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
}
.banner-head {
.technology-title {
font-size: 30px;
line-height: 45px;
text-align: left;
color: #fff;
}
.btn-outline-light {
color: #002E5B;
font-size: 17px;
border-radius: 12px;
padding: 10px 25px;
font-weight: 600;
line-height: 24px;
border-color: #f0f6fc;
background-color: #fff;
}
}
}
/* Unveiling Our Smart Contract End*/
/* Why Choose Us */
.why-choose {
/* width: 100%; */
/* margin: 0 auto; */
text-align: center;
.why-choose-ped {
padding: 0 180px;
}
.top-head {
.why-choose-title {
font-size: 30px;
line-height: 1.5;
color: rgba(0, 46, 91, 1);
}
}
img {
width: 70%;
margin: 0 auto;
display: block;
}
.blockchain-box {
margin-bottom: 20px;
padding: 20px;
border-radius: 30px;
display: flex;
align-items: center;
&.blobkchain-box-left {
background: rgba(0, 46, 91, 0.32);
color: #000;
img {
width: 150px;
margin: 0 15px 0 0;
}
.inner-title {
font-size: 20px;
line-height: 1.5;
text-align: left;
color: #000;
}
.inner-pera {
font-size: 16px;
line-height: 1.5;
color: #000;
margin-bottom: 0;
text-align: left;
}
}
&.blobkchain-box-right {
background: rgba(0, 46, 91, 1);
color: #fff;
height: 94%;
display: flex;
align-items: center;
.inner-title {
font-size: 20px;
line-height: 1.5;
text-align: center;
color: #fff;
}
.inner-pera {
font-size: 16px;
line-height: 1.5;
color: #fff;
margin-bottom: 0;
text-align: center;
}
}
&.blobkchain-box-left-right {
background: rgba(0, 46, 91, 1);
color: #fff;
height: 94%;
display: flex;
align-items: center;
.inner-title {
font-size: 20px;
line-height: 1.5;
text-align: center;
color: #fff;
}
.inner-pera {
font-size: 16px;
line-height: 1.5;
color: #fff;
margin-bottom: 0;
text-align: center;
}
}
&.bottom-box {
padding: 30px;
}
}
}
/* Why Choose Us End */
}
/* Coman FAQ */
.faq {
.faq-title {
font-size: 30px;
line-height: 45px;
text-align: left;
color: #002e5b;
}
.accordion {
--bs-accordion-border-color: 0;
.accordion-item {
border-bottom: 1px solid #e5e5e5;
button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
font-size: 1.15rem;
font-weight: 400;
color: #002e5b;
background: none;
border: none;
outline: none;
&:hover::after,
&:focus::after {
cursor: pointer;
border: 1px solid #002e5b;
}
&[aria-expanded='true'] {
color: #002e5b;
.icon::after {
width: 0;
}
+.accordion-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
}
}
.accordion-title {
padding: 0em 1.5em 0em 0;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 22px;
color: #002e5b;
text-align: left;
width: 100%;
display: block;
}
.icon {
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 50%;
&::before,
&::after {
content: '';
position: absolute;
background: currentColor;
}
&::before {
top: 9px;
left: 5px;
width: 10px;
height: 2px;
}
&::after {
top: 5px;
left: 9px;
width: 2px;
height: 10px;
}
}
}
.accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
p {
font-size: 0.9rem;
font-weight: 400;
line-height: 24px;
color: #212529;
}
}
}
}
}
/* NFT Page */
.mobile-nft-box{
display: none;
}
.nft-marketplac-development {
.nft-banner {
width: 100%;
position: relative;
min-height: 600px;
display: flex;
padding: 30px 0;
background-size: cover;
align-items: center;
background-image: url("../images/nftbanner.webp");
&:before {
content: "";
background: linear-gradient(89deg, #002E5B 4.49%, rgba(0, 46, 91, 0.00) 99.57%);
position: absolute;
inset: 0;
}
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
.img-index {
z-index: 1;
}
}
.banner-head {
z-index: 1;
.banner-title {
font-size: 45px;
color: #fff;
line-height: 65px;
text-align: left;
}
.banner-pera {
font-size: 16px;
line-height: 24px;
color: #fff;
text-align: left;
}
.btn-outline-light {
color: #002E5B;
font-size: 16px;
border-radius: 12px;
padding: 10px 25px;
font-weight: 500;
line-height: 24px;
border-color: #f0f6fc;
background-color: #fff;
&:hover {
background-color: transparent;
color: #ffffff;
}
}
}
}
/* Grow Your Business */
.grow-your-business {
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
}
.grow-title {
font-size: 30px;
line-height: 48px;
text-align: left;
color: rgb(0, 0, 0);
}
.grow-title-pera {
font-size: 16px;
line-height: 24px;
text-align: left;
font-weight: 400;
color: #212529;
}
.btn-outline-light {
background-color: rgba(0, 46, 91, 1);
border-radius: 12px;
flex-shrink: 0;
padding: 10px 25px;
width: 100%;
border-color: #f0f6fc;
color: #FFF;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.18px;
&:hover {
background-color: #f0f6fc;
border: 1px solid rgba(0, 46, 91, 1);
color: #0d1117;
}
}
.transform-box {
display: inline-flex;
padding: 24px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 24px;
border: 1px solid #002E5B;
.transform-text {
color: #002E5B;
font-size: 21px;
padding-bottom: 10px;
font-style: normal;
line-height: normal;
}
}
}
.nft-metaverse-section {
.nft-metaverse-title {
font-size: 30px;
font-weight: 600;
line-height: 45px;
text-align: left;
color: rgb(0, 0, 0);
}
.nft-metaverse-pera {
font-size: 16px;
line-height: 24px;
/* text-align: left; */
color: #000;
}
}
.our-nft-marketplace {
& .top-head {
.our-nft-title {
font-size: 30px;
line-height: 45px;
text-align: center;
color: rgb(0, 0, 0);
}
}
.step {
text-align: center;
padding: 0 20px;
.step-title {
color: #000;
text-align: center;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 5px;
}
.linear-gradient2 {
background: linear-gradient(90deg, #62F70C 0%, #0CF772 100%);
}
.linear-gradient4 {
background: linear-gradient(90deg, #B26CE9 0%, #812FC1 100%);
}
.linear-gradient6 {
background: linear-gradient(90deg, #E73054 0%, #1E1E1E 100%);
}
.linear-gradient1 {
background: linear-gradient(90deg, #F7CC0C 0%, #F7910C 100%);
}
.linear-gradient3 {
background: linear-gradient(90deg, #0C76F7 0%, #0C81F7 100%);
}
.linear-gradient5 {
background: linear-gradient(90deg, #FB21FB 0%, #FE31FE 100%);
}
.linear-height {
width: 100%;
max-width: 164px;
padding: 0 3px;
height: 3px;
margin: 0 auto;
}
p {
color: #212529;
text-align: center;
font-size: 14px;
font-style: normal;
line-height: normal;
margin-top: 5px;
line-height: 22px;
}
.set-align {
min-height: 180px;
}
.step-circle {
margin-bottom: 20px;
}
}
}
}
/* Security Token Banner */
.security-token-development {
.security-token-banner {
width: 100%;
position: relative;
min-height: 600px;
padding: 30px 0;
display: flex;
margin-top: 70px;
background-size: cover;
align-items: center;
background-position:top right;
background-image: url("../images/security-token-banner.png");
/* &:before {
content: "";
background: linear-gradient(89deg, #002E5B 4.49%, rgba(0, 46, 91, 0.00) 99.57%);
position: absolute;
inset: 0;
} */
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
.img-index {
z-index: 1;
}
}
.banner-head {
z-index: 1;
h1 {
font-size: 45px;
color: #fff;
line-height: 65px;
text-align: left;
}
p {
font-size: 16px;
line-height: 24px;
color: #fff;
text-align: left;
}
.banner-btn {
display: flex;
justify-content: left;
align-items: center;
gap: 18px;
width: 100%;
flex-wrap: wrap;
}
.btn-outline {
font-weight: 500;
color: #f0f6fc;
width: 40%;
border-radius: 12px;
font-size: 16px;
padding: 10px 25px;
line-height: 24px;
border-color: #f0f6fc;
&:hover {
background-color: #f0f6fc;
color: #0d1117;
}
}
.btn-outline-light {
color: #002E5B;
font-size: 16px;
width: 40%;
border-radius: 12px;
padding: 10px 25px;
font-weight: 500;
line-height: 24px;
border-color: #f0f6fc;
background-color: #fff;
&:hover {
background-color: transparent;
color: #ffffff;
}
}
}
}
/* Empower Business */
.empower-business {
.empower-business-title {
color: #000;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 45px;
text-transform: capitalize;
}
.empower-business-pera {
color: #212529;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
text-transform: capitalize;
.quest-gtl {
color: #000 !important;
font-size: 16px;
font-weight: 500;
text-decoration-line: underline;
}
}
.btn-outline-light {
background-color: rgba(0, 46, 91, 1);
border-radius: 12px;
flex-shrink: 0;
padding: 10px 35px;
border-color: #f0f6fc;
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.18px;
&:hover {
background-color: #f0f6fc;
border: 1px solid rgba(0, 46, 91, 1);
color: #0d1117;
}
}
}
.our-security {
padding: 50px 0;
.top-head {
.title {
color: #000;
text-align: center;
font-size: 30px;
font-style: normal;
line-height: normal;
text-transform: capitalize;
}
.pera {
color: #000;
text-align: center;
font-size: 16px;
font-style: normal;
padding: 0 75px;
font-weight: 500;
line-height: 26px;
text-transform: capitalize;
}
}
.our-security-box {
border-radius: 16px;
background: rgba(0, 46, 91, 0.06);
backdrop-filter: blur(25px);
padding: 32px;
height: 230px;
.img-gap {
gap: 20px;
align-items: center;
}
h4 {
color: #002E5B;
font-size: 24px;
font-style: normal;
margin-bottom: 0;
line-height: normal;
}
p {
color: var(--primaru, #002E5B);
font-feature-settings: 'liga' off, 'clig' off;
font-size: 14px;
margin-top: 10px;
font-style: normal;
line-height: 24px;
}
}
}
.security-token-offerings {
padding: 70px 0;
.top-head {
.offerings-title {
color: #000;
text-align: center;
font-size: 30px;
font-style: normal;
line-height: normal;
text-transform: capitalize;
}
.offerings-pera {
color: #000;
text-align: center;
font-size: 16px;
font-style: normal;
padding: 0 75px;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
}
.sto-box {
width: 100%;
border-radius: 50px;
padding: 47px;
margin: 0 auto;
background-size: cover;
background-image: url("../images/securitytokenofferings-bg.webp");
.banner-head {
p {
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
text-transform: capitalize;
}
}
}
}
.sto-development {
padding: 50px 0;
.top-head {
h2 {
color: #000;
text-align: center;
font-size: 30px;
font-style: normal;
line-height: normal;
text-transform: capitalize;
}
}
.sto-development-box {
background: linear-gradient(180deg, #002E5B 0%, #0062C1 100%);
color: #fff;
border-radius: 10px;
padding: 37px;
min-height: 368px;
position: relative;
text-align: center;
&::after {
content: '';
position: absolute;
bottom: 0;
right: -1px;
border-width: 60px 55px 0px 0px;
border-style: solid;
border-color: transparent #ffffff;
}
h2 {
color: #FFF;
text-align: center;
font-size: 28px;
font-style: normal;
line-height: normal;
}
p {
color: #FFF;
text-align: center;
font-size: 16px;
margin-bottom: 0;
font-style: normal;
font-weight: 400;
line-height: 26px;
}
}
}
.tab-container {
display: flex;
gap: 20px;
justify-content: space-between;
}
.tabs {
display: flex;
flex-direction: column;
gap: 10px;
}
.tab {
display: flex;
width: 100%;
padding: 10px 43px 10px 10px;
align-items: center;
gap: 24px;
border-radius: 10px;
cursor: pointer;
img {
width: 48px;
height: 48px;
flex-shrink: 0;
}
}
.tab.active {
display: flex;
width: 92%;
padding: 10px 50px 10px 10px;
align-items: center;
gap: 24px;
border-radius: 10px;
background: rgba(0, 46, 91, 0.08);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
}
.tab-flex {
display: flex;
justify-content: center;
align-items: center;
}
.tab-content {
display: flex;
padding: 34px 42px;
flex-direction: column;
width: 80%;
align-items: center;
text-align: center;
gap: 16px;
border-radius: 15px;
background: linear-gradient(150deg, rgba(41, 73, 151, 0.55) 0%, rgba(225, 235, 255, 0.55) 100%);
img {
width: 125px;
height: 125px;
}
h3 {
color: #000;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
p {
color: #000;
text-align: center;
font-size: 18px;
font-style: normal;
line-height: normal;
}
}
.content {
display: none;
}
.content.active {
display: block;
}
.investment {
.box-gap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 35px;
flex-shrink: 0;
}
.investment-box {
display: flex;
justify-content: center;
padding: 16px 20px;
flex-direction: column;
align-items: center;
height: 160px;
gap: 16px;
align-self: stretch;
border-radius: 16px;
border: 1px solid #002E5B;
background: #FFF;
h4 {
color: #002E5B;
text-align: center;
margin-bottom: 0;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
p {
color: #212529;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
}
.investment-box-center {
display: flex;
padding: 28px 16px;
flex-direction: column;
justify-content: center;
height: 368px;
align-items: center;
gap: 24px;
border-radius: 16px;
background: rgba(0, 46, 91, 0.70);
margin-bottom: 16px;
img {
border-radius: 12px;
height: 166px;
width: 100%;
}
h4 {
color: #FFF;
text-align: center;
margin-bottom: 0;
font-style: normal;
line-height: 36px !important;
font-size: 26px;
}
}
}
.contact-now {
.contact-box {
display: flex;
padding: 16px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 24px;
border: 1px solid #000;
background: rgba(0, 46, 91, 0.15);
p {
color: #000;
text-align: center;
font-size: 18px;
margin-bottom: 0;
font-style: normal;
line-height: normal;
}
h4 {
color: #002E5B;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.btn-outline-light {
background-color: rgba(0, 46, 91, 1);
border-radius: 12px;
border-color: #f0f6fc;
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.18px;
padding: 12px 25px;
&:hover {
background-color: #fff;
border: 1px solid rgba(0, 46, 91, 1);
color: #0d1117;
}
}
}
}
}
.timeline {
position: relative;
margin: 0 auto;
padding-bottom: 180px;
.h-bar {
position: absolute;
border-top: 2px dashed #000;
width: 85%;
z-index: 0;
left: 10%;
}
}
.ps-timeline-sec {
position: relative;
background: #fff;
ol.ps-timeline {
margin: 270px 0;
/* Reduced margin for smaller screens */
padding: 0;
position: relative;
list-style: none;
z-index: 1;
li {
float: left;
width: 16.66%;
/* 6 steps equally distributed */
padding-top: 30px;
position: relative;
text-align: center;
span {
width: 70px;
height: 70px;
margin-left: -25px;
background: #D9D9D9;
border-radius: 50%;
text-align: center;
padding: 8px;
line-height: 50px;
position: absolute;
top: -35px;
/* left: 0; */
&.ps-sp-top,
&.ps-sp-bot {
&:before {
content: '';
width: 2px;
height: 50px;
background: #D9D9D9;
position: absolute;
}
}
&.ps-sp-top {
&:before {
top: -50px;
left: 50%;
}
}
&.ps-sp-bot {
&:before {
bottom: -50px;
left: 50%;
}
}
}
p {
width: 100%;
margin: 0 auto;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
}
.ps-top,
.ps-bot {
position: absolute;
width: 100%;
h1 {
display: table;
margin: 0 auto;
font-size: 18px;
font-weight: 700;
line-height: 22px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
}
.ps-top {
margin-bottom: 120px;
bottom: 0;
}
.ps-bot {
margin-top: 70px;
}
}
}
}
/* Media Queries for Responsiveness */
@media (max-width: 992px) {
.ps-timeline-sec .container ol.ps-timeline li {
width: 33.33%;
/* 3 steps per row on tablets */
}
.ps-timeline-sec .container ol.ps-timeline li span {
width: 60px;
height: 60px;
line-height: 45px;
}
}
@media (max-width: 768px) {
.ps-timeline-sec .container ol.ps-timeline li {
width: 50%;
/* 2 steps per row on mobile devices */
}
}
/* Page 4 Design*/
.decentralized-exchange-development {
.head-title {
font-size: 30px;
line-height: 40px !important;
text-align: center;
color: rgba(0, 46, 91, 1);
}
.head-pera {
font-size: 18px;
color: #000;
line-height: 30px;
text-align: center;
}
.main-banner {
width: 100%;
position: relative;
min-height: 600px;
display: flex;
background-size: cover;
align-items: center;
padding: 50px 0 30px;
background-image: url("../images/Banner-2.webp");
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
.img-index {
z-index: 1;
}
}
.banner-head {
z-index: 1;
.banner-title {
font-size: 45px;
color: #fff;
line-height: 65px;
text-align: left;
}
.banner-pera {
font-size: 16px;
line-height: 24px;
color: #fff;
text-align: left;
}
.banner-btn-tr {
font-weight: 500;
color: #f0f6fc;
border-radius: 4px;
font-size: 16px;
padding: 10px 35px;
cursor: pointer;
line-height: 24px;
border-color: #f0f6fc;
&:hover {
background-color: #fff;
color: #0d1117;
}
}
.banner-btn-light {
color: #002E5B;
font-size: 16px;
margin-right: 10px;
border-radius: 4px;
padding: 10px 25px;
cursor: pointer;
font-weight: 500;
line-height: 24px;
border-color: #ffffff;
background-color: #fff;
&:hover {
background-color: transparent;
color: #ffffff;
}
}
}
}
.decentralized-section {
text-align: center;
}
.key-highlights {
h2 {
font-size: 26px;
line-height: 54px;
text-align: center;
color: rgba(0, 46, 91, 1);
}
.highlight-item {
display: flex;
align-items: center;
margin: 20px 0;
width: 49%;
justify-content: center;
.center-line {
border: 12px solid #003366;
margin-left: -2px;
}
.highlight-icon {
border: 4px solid #003366;
border-radius: 50%;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 24px;
}
.highlight-text {
background-color: #003366;
color: #fff;
padding: 20px 20px;
border-radius: 8px;
font-size: 20px;
flex: 1;
text-align: center;
}
.box-width {
width: 430px;
}
}
}
.our-decentralized-section {
.our-decentralized-box {
border: 1px solid #23222f47;
border-radius: 10px;
min-height: 314px;
margin-bottom: 20px;
.img-gap {
gap: 20px;
align-items: center;
padding: 20px 20px 0px 20px;
}
.img-bg-color {
background-color: #002E5B;
padding: 15px;
border-radius: 10px;
}
.box-title {
font-size: 20px;
color: #002E5B;
line-height: 30px;
}
.box-pera {
font-size: 16px;
padding: 0px 20px 20px 20px;
}
}
}
.hassle-free-section {
.head-title {
font-size: 26px;
line-height: 54px;
text-align: center;
color: rgb(0, 0, 0);
}
.call-btn {
color: #fff !important;
font-size: 16px;
font-weight: 500;
margin-right: 10px;
border-radius: 4px;
padding: 10px 60px;
cursor: pointer;
line-height: 24px;
border-color: #002E5B;
background-color: #002E5B;
}
}
.order-books-section {
.order-books-box {
border-radius: 10px;
padding: 20px;
display: flex;
min-height: 217px;
align-items: center;
margin-bottom: 16px;
.mob-center {
display: flex;
gap: 10px;
}
&.bg-color-one {
background: linear-gradient(89deg, #FFF0E8 0%, #FFEDED 100%);
}
&.bg-color-two {
background: linear-gradient(89deg, #F0FFE5 0%, #DBFFEA 100%);
}
.chain-img {
width: 190px;
}
.img-bg-color {
background-color: #002E5B;
padding: 15px;
border-radius: 10px;
}
.box-title {
font-size: 22px;
color: #333333;
line-height: 36px;
}
.box-pera {
font-size: 14px;
text-align: justify;
}
}
}
.why-choose-section {
.choose-us-box {
border-radius: 15px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin-bottom: 20px;
.img-gap {
gap: 10px;
align-items: center;
padding: 10px 8px;
border-left: 6px solid #002E5B;
border-radius: 15px;
}
.img-bg-color {
width: 50px;
height: 50px;
background-color: #002E5B;
/* padding: 15px; */
border-radius: 50%;
}
.box-title {
font-size: 18px;
color: #002E5B;
line-height: 28px;
font-weight: 500;
margin-bottom: 0;
}
}
}
.software-development {
padding: 60px 0;
.banner-flex {
/* display: flex; */
/* justify-content: center; */
/* width: 100%; */
/* align-items: center; */
.unleash-bus-title {
font-size: 36px;
line-height: 45px;
text-align: left;
color: rgba(0, 46, 91, 1);
}
.unleash-bus-pera {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
text-align: left;
color: #212529;
}
.btn-outline-light {
color: #fff;
font-size: 16px;
margin-right: 10px;
border-radius: 4px;
padding: 10px 24px;
font-weight: 500;
cursor: pointer;
line-height: 24px;
border-color: #002E5B;
background-color: #002E5B;
/* &:hover {
background-color: #f0f6fc;
border: 1px solid rgba(0, 46, 91, 1);
color: #0d1117;
} */
}
img {
width: 90%;
}
}
}
.trading-solutions {
padding: 40px 0;
.call-btn {
color: #fff;
font-size: 16px;
margin-right: 10px;
border-radius: 4px;
padding: 10px 60px;
font-weight: 500;
cursor: pointer;
line-height: 24px;
border-color: #002E5B;
background-color: #002E5B;
}
.main-box {
grid-auto-flow: dense;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 48px;
grid-gap: 32px;
}
.inner-box {
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 10px;
padding: 32px;
.inner-icon {
align-items: center;
justify-content: center;
display: flex;
background-color: #0066ff;
color: white;
border-radius: 10px;
width: 80px;
height: 80px;
margin-bottom: 15px;
}
.purple-icon {
background-color: #EEF2FF;
}
.pink-icon {
background-color: #FDF2F8;
}
.teal-icon {
background-color: #EFFDFA;
}
.orange-icon {
background-color: #FFF7ED;
}
.blue-icon {
background-color: #EAFAFF;
}
.red-icon {
background-color: #FFEEEE;
}
.inner-heading {
font-size: 20px;
line-height: 32px;
font-weight: 500;
color: #000;
margin-bottom: 12px;
}
.text-small {
font-size: 14px;
margin-bottom: 0;
}
}
}
.our-rewards {
.swiper {
padding: 20px 0;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
max-width: 100%;
height: auto;
}
.swiper-wrapper {
align-items: center;
}
}
.our-client {
background-color: #F5F5FA;
padding-top: 100px !important;
.clutch-logo {
position: absolute;
text-align: end;
right: 150px;
}
.client-box {
margin-top: 80px;
margin-bottom: 80px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
text-align: left;
z-index: 1;
}
.client-box .img-position {
height: 0;
img {
width: 80px;
position: relative;
height: 80px;
top: -60px;
border-radius: 50%;
margin-bottom: 15px;
}
}
.client-box p {
margin-top: 40px;
font-size: 18px;
line-height: 34px;
}
.client-details {
text-align: left;
}
.client-name {
font-weight: 500;
font-size: 24px;
color: #002E5B;
line-height: 28px;
}
.client-position {
font-size: 14px;
color: #000000;
line-height: 0;
}
.client-slider {
margin-left: 140px;
}
}
.share-vision {
.bg-box {
background-color: #002E5B;
padding: 40px;
border-radius: 20px;
.vision-img {
width: 100%;
}
.vision-form {
/* background-color: #123456; */
padding: 20px;
border-radius: 8px;
margin: auto;
.form-css {
background-color: #214568;
padding: 30px;
border-radius: 10px;
border: 1px solid #3c6289;
}
label {
display: block;
margin-top: 10px;
font-size: 14px;
color: #fff;
}
input,
textarea {
width: 100%;
padding: 10px;
/* margin-bottom: 10px; */
border-radius: 10px;
font-size: 16px;
border: 1px solid #3c6289;
background-color: transparent;
color: #fff;
outline: none;
&::placeholder {
color: #ccc;
}
}
.mobile-input {
display: flex;
align-items: center;
.dropdown-toggle {
white-space: nowrap;
padding: 0;
}
#mobile{
width: 77%;
margin-left: 65px;
}
.iti__selected-flag{
border: 1px solid #3c6289;
border-radius: 10px;
padding: 8px 10px;
}
.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
width: 220px;
padding: 0;
/* font-size: 3px; */
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
background-color: white;
border: 1px solid #CCC;
white-space: normal;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
span {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 14px;
font-size: 13px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0, 46, 91, 1);
}
.iti__arrow {
margin-left: 6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #ffffff;
}
.iti__arrow--up {
border-top: none;
border-bottom: 6px solid #fff;
}
}
textarea {
height: 100px;
resize: none;
}
.submit-btn {
margin-top: 20px;
background-color: #fff;
color: #002E5B;
border: none;
font-weight: 500 !important;
font-size: 18px;
font-weight: normal;
padding: 10px 50px;
border-radius: 10px;
cursor: pointer;
&:hover {
background-color: #1b3b5a;
color: #fff;
font-weight: 300;
font-size: 18px;
border: 1px solid #3c6289;
padding: 8px 40px;
border-radius: 10px;
}
}
}
.vision-title {
font-size: 30px;
font-weight: 500;
color: #fff;
line-height: normal;
margin-bottom: 20px;
}
}
}
}
.share-vision {
.bg-box {
background-color: #002E5B;
padding: 40px;
border-radius: 20px;
.vision-img {
width: 100%;
}
.vision-form {
/* background-color: #123456; */
padding: 20px;
border-radius: 8px;
margin: auto;
.form-css {
background-color: #214568;
padding: 30px;
border-radius: 10px;
border: 1px solid #3c6289;
}
label {
display: block;
margin-top: 10px;
font-size: 14px;
color: #fff;
}
input,
textarea {
width: 100%;
padding: 10px;
/* margin-bottom: 10px; */
border-radius: 10px;
font-size: 16px;
border: 1px solid #3c6289;
background-color: transparent;
color: #fff;
outline: none;
&::placeholder {
color: #ccc;
}
}
.mobile-input {
display: flex;
align-items: center;
.dropdown-toggle {
white-space: nowrap;
padding: 0;
}
#mobile{
width: 77%;
margin-left: 65px;
}
.iti__selected-flag{
border: 1px solid #3c6289;
border-radius: 10px;
padding: 8px 10px;
}
.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
width: 220px;
padding: 0;
/* font-size: 3px; */
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
background-color: white;
border: 1px solid #CCC;
white-space: normal;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
span {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 14px;
font-size: 13px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0, 46, 91, 1);
}
.iti__arrow {
margin-left: 6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #ffffff;
}
.iti__arrow--up {
border-top: none;
border-bottom: 6px solid #fff;
}
}
textarea {
height: 100px;
resize: none;
}
.submit-btn {
margin-top: 20px;
background-color: #fff;
color: #002E5B;
border: none;
font-weight: 500 !important;
font-size: 18px;
font-weight: normal;
padding: 10px 50px;
border-radius: 10px;
cursor: pointer;
&:hover {
background-color: #1b3b5a;
color: #fff;
font-weight: 300;
font-size: 18px;
border: 1px solid #3c6289;
padding: 8px 40px;
border-radius: 10px;
}
}
}
.vision-title {
font-size: 30px;
font-weight: 500;
color: #fff;
line-height: normal;
margin-bottom: 20px;
}
}
}
.white-label-crypto-exchange-development .solutions-section .head-title{
text-align: left;
}
.white-label-crypto-exchange-development {
.head-title {
font-size: 30px;
line-height: 42px !important;
font-weight: 500;
text-align: center;
color: rgba(0, 46, 91, 1);
text-transform: capitalize;
}
.head-pera {
font-size: 18px;
color: #000;
line-height: 30px;
text-align: center;
}
.main-banner {
width: 100%;
position: relative;
min-height: 600px;
display: flex;
background-size: cover;
align-items: center;
background-image: url("../images/Banner-2.webp");
padding: 120px 0 30px;
.banner-flex {
/* display: flex; */
justify-content: center;
align-items: center;
.img-index {
z-index: 1;
}
}
.banner-head {
z-index: 1;
.banner-title {
font-size: 45px;
color: #fff;
line-height: 65px;
text-align: left;
}
.banner-pera {
font-size: 16px;
line-height: 24px;
color: #fff;
text-align: left;
}
.banner-btn-tr {
font-weight: 400;
color: #f0f6fc;
border-radius: 4px;
font-size: 16px;
padding: 10px 35px;
cursor: pointer;
line-height: 24px;
border-color: #f0f6fc;
font-weight: 500;
&:hover {
background-color: #fff;
color: #002e5b;
}
}
.banner-btn-light {
color: #002E5B;
font-size: 16px;
margin-right: 10px;
border-radius: 4px;
padding: 10px 25px;
cursor: pointer;
font-weight: 500;
line-height: 24px;
border-color: #ffffff;
background-color: #fff;
&:hover {
background-color: transparent;
color: #ffffff;
}
}
}
}
.key-features {
background-color: #F5F5FA;
padding: 70px 0px 0px 0px;
.banner-flex {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
.cryptocurrency-pera {
font-size: 20px;
line-height: 28px;
font-weight: 300;
text-align: left;
color: #000;
}
}
}
.walkthrough {
.banner-flex {
display: flex;
justify-content: center;
align-items: center;
.position-relative {
position: relative;
.play-button {
position: absolute;
top: 50%;
left: 45%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.982);
border: none;
border-radius: 50%;
color: #000;
font-size: 24px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background 0.3s ease;
}
}
.cryptocurrency-pera {
font-size: 16px;
line-height: 24px;
font-weight: 300;
text-align: left;
color: #212529;
}
}
.modal-body {
padding: 0;
}
}
.our-software {
.our-software-pera {
font-size: 22px;
line-height: 28px;
font-weight: 300;
color: #000;
text-align: center;
padding-top: 40px;
}
}
.our-decentralized-section {
background-color: #F5F5FA;
padding-top: 50px !important;
padding-bottom: 50px;
.our-decentralized-box {
border: 1px solid #002E5B;
background-color: #fff;
border-radius: 10px;
min-height: 380px;
box-shadow: #002E5B 0px 0px,
#002E5B -9px -10px,
#002E5B 0px 0px,
#002E5B 0px 0px,
#002E5B 0px 0px;
margin-bottom: 30px;
.img-gap {
padding: 20px 20px 0px 20px;
}
.bg-border {
border: 1px solid #002E5B;
padding: 10px;
border-radius: 50px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.box-title {
font-size: 20px;
color: #333333;
font-weight: 500;
line-height: 30px;
}
.box-pera {
font-size: 14px;
line-height: 22px;
color: #212529;
margin-top: 10px;
padding: 0px 20px 20px 20px;
}
}
}
.software-development {
.banner-flex {
/* display: flex;
justify-content: center;
width: 100%;
align-items: center; */
.unleash-bus-title {
font-size: 36px;
line-height: 45px;
text-align: left;
color: rgba(0, 46, 91, 1);
}
.unleash-bus-pera {
font-size: 16px;
line-height: 24px;
font-weight: 400;
/* text-align: left; */
color: #212529;
}
.btn-outline-light {
color: #fff;
font-size: 16px;
margin-right: 10px;
margin-top: 10px;
border-radius: 4px;
padding: 10px 25px;
font-weight: 500;
cursor: pointer;
line-height: 24px;
border-color: #002E5B;
background-color: #002E5B;
&:hover {
background-color: #fff;
border: 1px solid rgba(0, 46, 91, 1);
color: #002E5B;
}
}
img {
width: 90%;
}
}
}
.our-software {
.our-software-pera {
font-size: 18px;
line-height: 28px;
font-weight: 300;
color: #000;
text-align: center;
padding-top: 40px;
}
.head-title {
font-size: 30px;
color: #002e5b;
}
}
.our-rewards {
.swiper {
padding: 20px 0;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
max-width: 100%;
height: auto;
}
.swiper-wrapper {
align-items: center;
}
}
.our-client {
background-color: #F5F5FA;
padding-top: 100px !important;
.clutch-logo {
position: absolute;
text-align: end;
right: 150px;
}
.client-box {
margin-top: 80px;
margin-bottom: 80px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
text-align: left;
z-index: 1;
}
.client-box .img-position {
height: 0;
img {
width: 80px;
position: relative;
height: 80px;
top: -60px;
border-radius: 50%;
margin-bottom: 15px;
}
}
.client-box p {
margin-top: 40px;
font-size: 16px;
line-height: 34px;
}
.client-details {
text-align: left;
}
.client-name {
font-weight: 500;
font-size: 20px;
color: #002E5B;
line-height: 28px;
}
.client-position {
font-size: 14px;
color: #000000;
line-height: 0;
}
.client-slider {
margin-left: 140px;
}
}
.solutions-section {
background-color: #F5F5FA;
padding-top: 100px !important;
.class-align {
display: flex;
align-items: center;
/* text-align: end; */
justify-content: space-around;
}
.pos-relative {
position: relative;
}
.call-btn {
color: #fff;
font-size: 16px;
border-radius: 4px;
padding: 10px 60px;
cursor: pointer;
line-height: 24px;
border-color: #002E5B;
background-color: #002E5B;
font-weight: 500;
}
.client-box {
margin-top: 80px;
margin-bottom: 0px;
background: #002E5B;
color: #fff;
padding: 20px;
min-height: 310px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
text-align: left;
z-index: 1;
position: relative;
}
.client-box .img-position {
height: 0;
.bg-circel {
background-color: #002E5B;
position: relative;
height: 80px;
display: flex;
width: 80px;
justify-content: center;
align-items: center;
top: -60px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
border: 6px solid #fff;
img {
width: 40px;
height: 40px;
}
}
}
.client-box p {
font-size: 16px;
line-height: 26px;
margin-top: 20px;
text-align: center;
margin-bottom: 0;
}
.client-name {
margin-top: 40px;
font-weight: 500;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 30px;
}
.white-label {
margin-left: 120px;
margin-right: 120px;
}
.swiper-button-next.custom-next,
.swiper-button-prev.custom-prev {
position: absolute;
top: 10px;
/* Adjust top value to place the arrows at the desired height */
width: 45px;
height: 45px;
border: 1px solid #aaaaab;
/* Arrow background color */
color: #002E5B;
/* Arrow color */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
cursor: pointer;
}
.swiper-button-next.custom-next {
right: -215px;
/* Adjust right value for spacing */
}
.swiper-button-prev.custom-prev {
left: 110px;
/* Adjust right value to separate it from the next arrow */
}
.swiper-button-next.custom-next::after,
.swiper-button-prev.custom-prev::after {
font-size: 20px;
/* Adjust arrow size */
font-weight: bold;
}
.custom-next.active,
.custom-prev.active {
border: 1px solid #bebebe;
/* Change the background color */
border-radius: 50%;
/* Make it circular */
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #004085;
}
.custom-next.active:hover,
.custom-prev.active:hover {
transform: scale(1.2);
/* Slightly enlarge on hover */
}
}
.why-choose-us {
/* padding: 50px 0; */
.head-title {
font-size: 30px;
font-weight: 600;
margin-bottom: 20px;
color: #002E5B;
}
.head-pera {
font-size: 18px;
line-height: 1.6;
color: #212529;
text-align: center;
}
.circle,
.circle-1 {
width: 190px;
height: 175px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
text-align: center;
border-radius: 50%;
padding: 35px;
p {
font-size: 16px;
font-weight: 500;
color: #002E5B;
margin: 0;
}
}
.circle {
background-image: url("../images/icon/17.svg");
}
.circle-1 {
background-image: url("../images/icon/circal.svg");
}
.call-btn {
font-size: 18px;
font-weight: 600;
color: #fff;
background-color: #002E5B;
border: none;
padding: 12px 40px;
border-radius: 4px;
transition: background-color 0.3s ease;
&:hover {
background-color: #004080;
color: #fff;
}
}
@media (max-width: 768px) {
.circle,
.circle-1 {
width: 140px;
height: 140px;
padding: 15px;
p {
font-size: 14px;
}
}
.call-btn {
font-size: 16px;
padding: 10px 30px;
}
}
@media (max-width: 576px) {
.head-title {
font-size: 28px;
}
.head-pera {
font-size: 16px;
}
.circle,
.circle-1 {
width: 135px;
height: 128px;
padding: 15px 20px;
}
}
}
.crypto-exchange {
.investment-box {
background-color: #002E5B;
padding: 40px 90px;
color: #fff;
display: flex;
min-height: 200px;
position: relative;
text-align: center;
margin-bottom: 12px;
border-radius: 10px;
align-items: center;
justify-content: center;
p {
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
}
.investment-img {
background-color: #002E5B;
width: 110px;
height: 60px;
top: -59px;
position: absolute;
border-radius: 100px 100px 0 0;
border: 8px solid #fff;
border-bottom: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
img {
padding: 20px;
height: auto;
display: flex;
align-items: center;
width: 80%;
justify-content: center;
margin-top: 15px;
}
}
}
}
.cryptocurrency-process {
background-color: #F5F5FA;
padding: 70px 0px;
.cryptocurrency-position {
position: relative;
}
.call-btn {
color: #fff;
font-size: 16px;
border-radius: 4px;
font-weight: 500;
padding: 10px 60px;
cursor: pointer;
line-height: 24px;
border-color: #002E5B;
background-color: #002E5B;
margin-top: 65px;
}
.cryptocurrency-box-left {
height: 120px;
text-align: end;
display: flex;
align-items: center;
h6 {
font-size: 22px;
font-weight: 500;
color: #002E5B;
line-height: 34px;
}
p {
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
}
.cryptocurrency-mob-img {
display: none;
}
}
.cryptocurrency-box-right {
height: 120px;
text-align: left;
display: flex;
align-items: center;
h6 {
font-size: 22px;
font-weight: 500;
color: #002E5B;
line-height: 45px;
margin-bottom: 0;
}
p {
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
}
img{
display: none;
}
}
.cryptocurrency-img-bg {
width: 80px;
height: 80px;
background-color: #002E5B;
position: absolute;
border-radius: 50px;
padding: 20px;
right: -150px;
top: 147px;
}
.cryptocurrency-img-bg2 {
width: 80px;
height: 80px;
background-color: #002E5B;
position: absolute;
padding: 20px;
border-radius: 50px;
right: -150px;
bottom: 130px;
}
.cryptocurrency-img-bg3 {
width: 80px;
height: 80px;
background-color: #002E5B;
position: absolute;
padding: 20px;
border-radius: 50px;
left: -150px;
top: 25px;
}
.cryptocurrency-img-bg4 {
width: 80px;
height: 80px;
background-color: #002E5B;
position: absolute;
padding: 20px;
border-radius: 50px;
left: -150px;
top: 267px;
}
.cryptocurrency-img-bg5 {
width: 80px;
height: 80px;
background-color: #002E5B;
position: absolute;
padding: 20px;
border-radius: 50px;
left: -150px;
bottom: 30px;
}
.timeline-img {
text-align: center;
img {
width: 230px;
}
}
}
}
@media screen and (max-width: 832px) {
.main-box {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
margin-top: 40px;
grid-gap: 24px;
}
}
@media screen and (max-width: 640px) {
.main-box {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
margin-top: 32px;
grid-gap: 16px;
}
.main-title {
font-size: 36px !important;
}
}