.custom-class {
@media screen and (max-width: 359px) {
padding: 0 10px;
box-sizing: border-box;
}
@media screen and (min-width: 360px) {
padding: 0 16px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
padding: 0 43px;
box-sizing: border-box;
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
padding: 0 20px;
box-sizing: border-box;
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
padding: 0 70px;
box-sizing: border-box;
}
@media screen and (min-width: 1440px) and (max-width: 1550px) {
padding: 0 70px;
box-sizing: border-box;
}
@media screen and (min-width: 1551px) and (max-width: 1699px) {
padding: 0 90px;
box-sizing: border-box;
}
@media screen and (min-width: 1700px) and (max-width: 1919px) {
padding: 0 180px;
box-sizing: border-box;
}
@media screen and (min-width: 1920px) {
padding: 0 285px;
box-sizing: border-box;
}
}
html,
body {
font-family: "Inter", sans-serif;
overflow-x: hidden;
}
.navbarItemBorder {
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2);
border-radius: 38px !important;
color: #050505 !important;
}
.contact-btn {
display: flex !important;
}
.custom-nav-btn {
display: none !important;
margin-top: 10px;
}
@media (max-width: 992px) {
.navbarItemBorder {
border: none !important;
box-shadow: none !important;
}
.custom-nav-btn {
display: flex !important;
}
.contact-btn {
display: none !important;
}
}
/* Mobile: left align menu */
@media (max-width: 991px) {
.navbar-nav .nav-link.active {
width: fit-content !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.navbar-collapse {
text-align: left !important;
}
.navbar-nav {
align-items: flex-start !important;
justify-content: flex-start !important;
}
.navbar-nav .nav-item {
width: 100%;
/* full width items */
}
.navbar-nav .nav-link {
display: block;
width: 100%;
/* padding-left: 0 !important; */
/* remove extra padding if needed */
}
}
.navbar-toggler {
/* smaller button width */
/* smaller button height */
}
.navbar-toggler .navbar-toggler-icon {
width: 16px;
/* smaller icon */
height: 16px;
}
.custom-navbar {
@media screen and (min-width: 768px) {
margin-top: 25px;
}
@media screen and (min-width: 320px) and (max-width:767px) {
margin-top: 10px;
}
}
/* Hero Section */
.text-color {
background: linear-gradient(to bottom,
#027475 0%,
#0BB8BB 50%,
#027475 80%,
#027475 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-section {
font-family: "Raleway", sans-serif;
width: 100%;
margin-top: 97px;
color: #050505;
@media screen and (min-width: 920px) {
font-size: 56px;
font-weight: 800;
}
@media screen and (min-width: 500px) and (max-width: 919px) {
font-size: 32px;
font-weight: 700;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 22px;
font-weight: 700;
}
}
.bg-header-image {
width: 100%;
background: url('https://res.cloudinary.com/dl3nmgxn9/image/upload/v1758132248/Group_1597883591_1_eqmtwu.svg') no-repeat center bottom;
background-size: cover;
min-height: 100vh;
height: auto;
@media screen and (min-width:1700px) {
min-height: 50vh;
height: auto;
}
@media screen and (max-width:425px) {
min-height: 93vh;
height: auto;
}
}
.hero-section-container {
width: 100%;
min-height: 80vh;
position: relative;
padding-top: 50px;
padding-bottom: 100px;
isolation: isolate;
}
.hero-section-container::before {
content: "";
position: absolute;
top: -10%;
left: 150px;
width: 400px;
/* set size */
height: 400px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 60%);
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
}
.hero-section-container::after {
content: "";
position: absolute;
top: -10%;
width: 400px;
/* set size */
height: 400px;
right: 0px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 50%);
transform: translateX(10%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
}
/* Updated Hero Section */
.hero-title {
font-family: "Raleway", sans-serif;
font-weight: 800;
font-size: 56px;
color: #050505;
margin-bottom: 30px;
margin-top: 80px;
width: 80%;
display: inline-block;
}
@media (min-width: 1700px) {
.hero-title {
margin-top: 130px;
}
}
@media screen and (min-width: 320px) and (max-width: 499px) {
.hero-title {
font-size: 25px;
line-height: 40px;
margin-top: 10px;
}
}
@media screen and (min-width: 500px) and (max-width: 1440px) {
.hero-title {
font-size: 45px;
line-height: 55px;
margin-top: 0px;
}
.hero-section-container {
min-height: 60vh;
padding-bottom: 80px;
}
.wave-pattern {
height: 100px;
}
}
@media (max-width: 576px) {
.btn-call {
width: 180px;
height: 50px;
font-size: 15px;
}
}
.btn-call-schedule {
background-color: #0DA5A7;
border-color: #0DA5A7;
color: white;
margin-top: 15px;
width: 208px;
height: 56px;
font-size: 17px;
border-radius: 30px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
@media screen and (max-width:499px) {
margin-top: -10px;
}
}
.btn-call {}
/* .btn-call {
margin-top: 26px;
background-color: #0DA5A7;
border-color: #0DA5A7;
color: white;
width: 208px;
height: 56px;
font-size: 17px;
border-radius: 30px;
font-weight: 500;
text-decoration: none;
display: inline-block;
margin-bottom: 30px;
} */
/* marquee */
.js-marquee {
overflow-x: hidden !important;
}
.marquee-image {
height: 50px;
width: 248px;
object-fit: contain;
transition: transform 0.3s ease;
margin: 0 25px;
}
/* 📱 Mobile adjustments */
@media (max-width: 768px) {
.marquee-image {
height: 35px;
/* smaller height */
width: 180px;
/* smaller width */
}
}
.custom-flex {
display: flex;
width: 100%;
justify-content: space-between;
gap: 0.75rem;
flex-direction: column;
/* default for mobile */
@media (min-width: 2300px) {
gap: 2rem;
}
/* Large screens and above */
@media (min-width: 1024px) {
flex-direction: row;
}
}
/* Redefining tech */
.redefining-tech {
position: relative;
margin-top: 110px;
@media screen and (min-width: 320px) and (max-width: 992px) {
margin-top: 80px;
}
}
.redefining-tech::before {
content: "";
position: absolute;
top: -10%;
width: 400px;
/* set size */
height: 400px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 80%);
transform: translateX(-20%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
}
.redefine-rightContainer {
width: 50%;
@media screen and (max-width: 992px) {
width: 100%;
}
}
.redefine-leftContainer {
width: 50%;
@media screen and (max-width: 992px) {
width: 100%;
}
}
.redefining-title {
font-family: "Raleway";
font-weight: 700;
font-size: 56px;
line-height: 65px;
letter-spacing: -1%;
color: #050505;
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 40px;
line-height: 56px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 27px;
line-height: 40px;
}
}
.redefining-description {
font-size: 18px;
line-height: 26px;
color: #444444;
max-width: 95%;
@media screen and (min-width: 2300px) {
font-size: 22px;
line-height: 36px;
}
@media screen and (max-width: 992px) {
max-width: 100%;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 18px;
line-height: 26px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 16px;
line-height: 24px;
}
}
.redefining-image {
width: 100%;
height: 425px;
border-radius: 32px;
box-shadow: 0px 7px 22px rgba(0, 0, 0, 0.34);
border: none;
object-fit: cover;
@media screen and (min-width: 320px) and (max-width: 400px) {
width: 100%;
}
}
.common-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
flex-direction: row;
}
@media screen and (max-width: 500px) {}
/* our services */
.services-section {
margin-top: 120px;
@media screen and (min-width: 320px) and (max-width: 768px) {
margin-top: 60px;
}
}
.services-heading {
font-family: "Raleway";
font-weight: 700;
line-height: 65px;
font-size: 56px;
letter-spacing: -1%;
margin-bottom: 46px;
@media screen and (min-width: 320px) and (max-width: 474px) {
line-height: 50px;
font-size: 40px;
}
}
.service-card {
position: relative;
border-radius: 32px;
margin: 20px;
margin-bottom: 46px;
border: 0.5px solid #D5D5D5;
width: 400px;
min-height: 290px;
padding: 71px 31px;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2);
background: #ffffff;
overflow: hidden;
z-index: 999;
}
/* Large tablets / small desktops */
@media screen and (min-width: 1140px) and (max-width: 1439px) {
.service-card {
margin: 10px;
margin-bottom: 46px;
width: 350px;
height: 260px;
padding: 50px 31px 50px 25px;
}
}
/* Tablets */
@media screen and (min-width: 1024px) and (max-width: 1139px) {
.service-card {
margin: 20px 20px 40px 20px;
width: 300px;
height: 260px;
padding: 50px 15px 30px 30px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.service-card {
margin: 20px 0 40px 0;
width: 310px;
height: 260px;
padding: 50px 15px 30px 30px;
}
}
/* Mobile */
@media screen and (min-width:375px) and (max-width: 767px) {
.service-card {
width: 100%;
/* full width on mobile */
max-width: 330px;
margin: 20px auto;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2) !important;
}
}
@media screen and (max-width:374px) {
.service-card {
width: 100%;
/* full width on mobile */
max-width: 310px;
margin: 20px auto;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2) !important;
}
}
.service-card:hover {
/* box-shadow: 1px 0 10px 30px rgba(13, 165, 167, 0.4); */
box-shadow: 0 0 25px 1px rgba(13, 165, 167, 0.3);
@media screen and (min-width: 320px) and (max-width: 990px) {
/* box-shadow: 0 0 15px 1px rgba(13, 165, 167, 0.3); */
}
}
.bg-circle {
position: absolute;
right: 0;
top: 300px;
width: 200px;
height: 200px;
background: rgba(13, 165, 167, 0.26);
/* semi-transparent */
border-radius: 50%;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
filter: blur(100px);
}
.image-style {
position: absolute;
right: 0px;
bottom: 0px;
top: 30px;
z-index: 0;
}
.image-style2 {
position: absolute;
right: 0px;
bottom: 0px;
z-index: 0;
}
.service-card h5 {
font-weight: 600;
font-family: "Raleway";
font-size: 28px;
margin-bottom: 8px;
line-height: 100%;
letter-spacing: 0%;
color: #050505;
position: relative;
z-index: 1;
}
.service-card p {
width: 256px;
color: #444444;
font-size: 15px;
line-height: 22px;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.service-card a {
font-weight: 500;
width: 98px;
font-size: 16px;
line-height: 28px;
text-decoration: none;
border-bottom: #000 1px solid;
color: #050505;
position: relative;
z-index: 1;
}
.service-icon {
font-size: 50px;
color: #0ea5e9;
margin-bottom: 15px;
}
.top-btns {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.top-btns-one {
display: none;
justify-content: center;
align-items: center;
gap: 20px;
@media screen and (max-width:768px) {
display: inline-flex;
}
}
.btn-custom {
background: #0DA5A7;
height: 56px;
color: white;
font-size: 17px;
line-height: 140%;
letter-spacing: -2%;
font-weight: 500;
border-radius: 70px;
padding: 8px 20px;
border: none;
transition: background 0.3s;
@media screen and (max-width:400px) {
font-size: 15px;
line-height: 1.2;
}
}
.btn-custom-one {
background: #0DA5A7;
height: 56px;
color: white;
font-size: 17px;
line-height: 140%;
letter-spacing: -2%;
font-weight: 500;
border-radius: 70px;
padding: 8px 20px;
border: none;
transition: background 0.3s;
@media screen and (min-widht:375px) and (max-width:400px) {
font-size: 14px;
line-height: 1.2;
padding: 8px 16px;
}
@media screen and (max-width:375px) {
font-size: 14px;
line-height: 1.2;
padding: 8px 8px;
}
}
.top-btns .swiper-button-prev,
.top-btns .swiper-button-next {
position: static !important;
/* stay where you placed them */
margin: 0;
/* remove default margins */
}
.swiper-button-prev::after,
.swiper-button-next::after {
display: none !important;
}
.circle-btn {
width: 60px !important;
height: 60px !important;
border-radius: 50%;
border: 1px solid #ccc !important;
display: flex;
/* visible on desktop */
align-items: center;
justify-content: center;
background: white;
cursor: pointer;
color: #000 !important;
}
.circle-btn-one {
width: 40px !important;
height: 40px !important;
border-radius: 50%;
border: 1px solid #ccc !important;
display: none;
/* hidden by default */
align-items: center;
justify-content: center;
background: white;
cursor: pointer;
color: #000 !important;
}
/* 📱 Mobile adjustments */
@media screen and (max-width:768px) {
.swiper-button-prev,
.swiper-button-next {
position: relative !important;
}
.circle-btn {
display: none !important;
/* hide desktop buttons */
}
.circle-btn-one {
display: flex !important;
/* show mobile buttons */
margin: 20px auto 0;
/* center under swiper */
gap: 15px;
}
}
/* stats */
.achievements {
display: flex;
flex-direction: row;
position: relative;
justify-content: space-between;
margin-top: 100px;
@media screen and (min-width: 320px) and (max-width: 992px) {
flex-direction: column;
margin-top: 60px;
}
}
.achievements::after {
content: "";
position: absolute;
top: 50%;
right: 0;
/* push gradient to the right */
transform: translateY(-50%);
/* center vertically */
width: 400px;
height: 400px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 60%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
/* softer glow */
max-width: 100%;
/* prevents overflow */
}
/* Left content */
.achievements .left {
width: 50%;
flex: 1;
min-width: 280px;
@media screen and (min-width: 320px) and (max-width: 1024px) {
width: 100%;
}
}
.achievements h2 {
font-size: 56px;
line-height: 56px;
font-family: "Raleway";
color: #050505;
font-weight: 700;
margin-bottom: 15px;
}
.achievements p {
color: #444444;
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
max-width: 611px;
}
.stats-section {
width: 50%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
max-width: 800px;
text-align: center;
position: relative;
@media screen and (min-width: 320px) and (max-width: 992px) {
width: 100%;
}
}
.stat-box {
position: relative;
}
.stat-box h2,
.stat-box .achievements-metrics-number {
font-size: 56px;
line-height: 62px;
font-weight: 600;
color: #0DA5A7;
margin: 0;
position: relative;
z-index: 2;
}
.stat-box p {
margin-top: 11px;
font-size: 20px;
font-weight: 300;
color: #444444;
z-index: 2;
position: relative;
}
/* Background faded numbers */
.stat-box::before {
content: attr(data-bg);
position: absolute;
top: -40px;
left: 64%;
transform: translateX(-50%);
font-size: 70px;
font-weight: 800;
color: rgba(11, 178, 172, 0.1);
z-index: 1;
pointer-events: none;
}
/* Responsive */
/* @media (max-width: 600px) {
.stats-section {
grid-template-columns: 1fr;
gap: 30px;
}
} */
/* Portfolio */
.portfolio-wrapper {
margin-top: 130px;
position: relative;
@media screen and (min-width:320px) and (max-width:992px) {
margin-top: 40px;
display: none;
}
}
.portfolio-wrapper-one {
margin-top: 130px;
position: relative;
display: none;
@media screen and (min-width:320px) and (max-width:992px) {
margin-top: 40px;
display: block;
}
}
.portfolio-wrapper::after {
content: "";
position: absolute;
top: 30%;
left: 0;
/* push gradient to the right */
transform: translateY(-50%);
transform: translateX(-10%);
/* center vertically */
width: 350px;
height: 350px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 70%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
/* softer glow */
max-width: 100%;
/* prevents overflow */
}
.card-container {
padding: 0 !important;
border-bottom: 1px solid #0DA5A7 !important;
z-index: 999;
&:last-child,
&:nth-last-child(2) {
border-bottom: none !important;
}
@media screen and (max-width:425px) {
width: 99% !important;
}
}
.custom-card {
border-radius: 32px !important;
border: 0.5px solid #D5D5D5 !important;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.1) !important;
overflow: hidden;
padding: 24px 24px 0px 24px;
background: white;
@media screen and (max-width:374px) {
box-shadow: none !important;
}
}
.head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 46px
}
.head h2 {
font-family: "Raleway";
font-weight: 700;
font-size: 56px;
line-height: 65px;
letter-spacing: -1%;
color: #050505;
@media screen and (min-width: 993px) and (max-width: 1280px) {
font-size: 45px;
line-height: 55px;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 40px;
line-height: 56px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 27px;
line-height: 40px;
}
}
.head h2 span {
font-weight: 700
}
/* Grid */
.grid {
display: grid;
gap: 26px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Card */
.card {
border-radius: calc(var(--radius) + 4px);
padding: 20px;
background: #fff;
}
.top {
display: grid;
gap: 16px;
align-items: center;
grid-template-columns: 1.1fr 1.6fr;
}
.custom-card-title {
font-size: 32px;
line-height: 100%;
font-weight: 500;
color: #050505;
}
.subtitle {
color: #444444;
font-size: 14px;
line-height: 24px
}
.preview {
position: relative;
border: 1px solid #ccc;
border-radius: 14px 14px 0px 0;
overflow: hidden;
}
.preview img {
display: block;
width: 100%;
height: 210px;
object-fit: fill !important;
transition: transform .35s ease;
}
.card:hover .preview img {}
.open {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: -5px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 100%;
display: grid;
place-items: center;
text-decoration: none;
color: #fff;
background-color: #0DA5A7;
font-weight: 800;
box-shadow: 0 8px 18px rgba(15, 182, 172, .35);
z-index: 999;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
margin-bottom: 18px;
}
.chip {
border: 0.2px solid #050505;
color: #050505;
padding: 4px 13.5px;
border-radius: 999px;
font-size: 14px;
}
.desc {
color: #444444;
font-size: 16px;
line-height: 28px;
margin-bottom: 24px;
}
/* Responsive */
@media (max-width:1000px) {
.grid {
grid-template-columns: 1fr
}
}
@media (max-width:992px) {
.card-container {
padding: 0 !important;
border-bottom: none !important;
}
}
@media (max-width:640px) {
.top {
grid-template-columns: 1fr
}
.preview img {
height: 190px
}
}
/* tech stack */
.techstack-container {
margin-top: 116px;
@media screen and (min-width:320px) and (max-width:992px) {
margin-top: 50px;
}
}
.techstact-marquee {
overflow: hidden;
white-space: nowrap;
/* force children in a single row */
}
.techstact-marquee2 {
overflow: hidden;
white-space: nowrap;
/* force children in a single row */
}
.tech-stack-box {
display: inline-flex;
/* inline makes them sit in a row */
justify-content: center;
align-items: center;
vertical-align: middle;
/* aligns with other inline elements */
width: 138px;
height: 138px;
margin-right: 20px;
/* spacing between boxes */
border-radius: 33px;
border: 1px solid #0DA5A7;
@media screen and (max-width:768px) {
width: 100px;
height: 100px;
margin-right: 10px;
border-radius: 24px;
}
}
.tech-stack-box img {
width: 100px;
height: 100px;
@media screen and (max-width:768px) {
width: 60px;
height: 60px;
}
}
/* blogs */
.blogs {
margin-top: 140px;
position: relative;
@media screen and (min-width:320px) and (max-width:992px) {
margin-top: 60px;
}
}
.blogs::after {
content: "";
position: absolute;
top: 10%;
right: 0;
/* push gradient to the right */
transform: translateY(-50%);
/* center vertically */
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
/* softer glow */
max-width: 100%;
/* prevents overflow */
}
.blogs-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.blogs-header h2 {
font-size: 2rem;
font-weight: 700;
}
.blogs-actions {
display: flex;
align-items: center;
gap: 14px;
}
/* Portfolio Button */
.btn {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
color: white;
padding: 12px 22px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: background 0.3s;
}
.btn:hover {
background: var(--teal-dark);
}
/* Nav buttons */
.nav-btn {
width: 40px;
height: 40px;
border: 1px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
cursor: pointer;
font-size: 1.2rem;
color: var(--text-dark);
transition: all 0.3s;
}
.nav-btn:hover {
border-color: var(--teal);
color: var(--teal);
}
.blogs-card {
width: 404px;
background: #fff;
background-color: white;
z-index: 999;
border: 1px solid #0DA5A7;
border-radius: 32px;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2) !important;
margin-top: 10px;
margin-left: 10px;
display: flex;
flex-direction: column;
padding: 29px 32px;
@media screen and (min-width:320px) and (max-width:399px) {
width: 320px;
margin-left: 0px;
padding: 25px 28px;
}
@media screen and (min-width:400px) and (max-width:767px) {
width: 350px;
margin-left: 0px;
padding: 25px 28px;
}
@media screen and (min-width:768px) and (max-width:890px) {
width: 320px;
padding: 20px 25px;
}
@media screen and (min-width:1024px) and (max-width:1199px) {
width: 310px;
padding: 25px 30px;
}
@media screen and (min-width:1200px) and (max-width:1399px) {
width: 350px;
padding: 29px 32px;
}
}
.blogs-card img {
width: 100%;
height: 230px;
object-fit: cover;
border-radius: 16px;
}
/* Swiper Cards */
.swiper {
padding-bottom: 20px;
margin-bottom: 10px;
}
.swiper-slide {
height: fit-content !important;
}
.blog-card {
width: 404px;
background: #fff;
background-color: white;
z-index: 999;
border: 1px solid #0DA5A7;
border-radius: 32px;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2) !important;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
padding: 29px 32px;
@media screen and (min-width:375px) and (max-width:399px) {
width: 340px;
margin-left: 0px;
padding: 25px 28px;
}
@media screen and (max-width:374px) {
width: 300px;
margin-left: 0px;
padding: 25px 28px;
}
@media screen and (min-width:400px) and (max-width:767px) {
width: 350px;
margin-left: 0px;
padding: 25px 28px;
}
@media screen and (min-width:768px) and (max-width:890px) {
width: 320px;
margin-left: 0px;
padding: 25px 28px;
}
@media screen and (min-width:1024px) and (max-width:1199px) {
width: 310px;
padding: 25px 30px;
}
@media screen and (min-width:1200px) and (max-width:1399px) {
width: 370px;
padding: 29px 32px;
}
}
.blog-card img {
width: 100%;
height: 230px;
object-fit: cover;
border-radius: 16px;
}
.card-content {
margin-top: 25px;
flex: 1;
display: flex;
flex-direction: column;
/* justify-content: space-between; */
}
.meta {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
line-height: 160%;
font-size: 14px;
color: #444444;
margin-bottom: 12px;
}
.dot {
width: 14px;
height: 14px;
background: #0DA5A7;
border-radius: 50%;
}
.blog-title {
font-family: "Raleway";
font-size: 26px;
font-weight: 600;
line-height: 135%;
margin-top: 12px;
color: #050505;
letter-spacing: 0.03rem;
margin-bottom: 24px;
text-overflow: ellipsis;
overflow: hidden;
@media screen and (min-width:320px) and (max-width:767px) {
height: auto;
margin-bottom: 16px;
}
@media screen and (min-width:320px) and (max-width:499px) {
font-size: 18px;
}
@media screen and (min-width:500px) and (max-width:890px) {
font-size: 22px;
}
@media screen and (min-width:1024px)and (max-width:1199px) {
font-size: 22px;
}
}
.blog-description {
width: 220px;
font-size: 14px;
color: #444444;
line-height: 1.6;
flex-grow: 1;
min-height: 40px;
@media screen and (min-width:320px) and (max-width:499px) {
font-size: 10px;
}
@media screen and (min-width:320px) and (max-width:890px) {
font-size: 12px;
}
@media screen and (min-width:320px)and (max-width:1199px) {
font-size: 12px;
}
}
.blog-btn {
color: #444444;
margin-top: 1px;
border: none;
width: 88px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: 0.5px solid #444444;
font-size: 30px;
cursor: pointer;
transition: 0.3s;
@media screen and (min-width:320px) and (max-width:499px) {
width: 60px;
height: 40px;
font-size: 20px;
}
}
.btn:hover {
background: #0DA5A7;
color: #fff;
}
/* Responsive */
@media (max-width: 768px) {
.blogs-header {
flex-direction: column;
align-items: flex-start;
}
}
/* testimonial */
.testimonial-container {
margin-top: 130px;
@media screen and (max-width:992px) {
margin-top: 50px;
}
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 33px;
}
.testimonial-card {
display: flex;
justify-content: center;
flex-direction: column;
margin-bottom: 10px;
width: 357px;
margin-left: 10px;
margin-top: 10px;
height: 268px;
background: white;
border: 0.5px solid #DDDDDD;
padding: 0px 19px;
border-radius: 32px;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
@media screen and (min-width:2300px) {
width: 500px;
height: 320px;
}
@media screen and (min-width:320px) and (max-width:767px) {
width: 97%;
height: 268px;
margin-left: 0px;
box-shadow: none;
}
@media screen and (min-width:768px) and (max-width:1039px) {
width: 290px;
height: 268px;
margin-left: 0px;
}
@media screen and (min-width:1040px) and (max-width:1360px) {
width: 300px;
height: 268px;
}
}
.swiper-slide {
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* .blogSwiper {
@media screen and (max-width:700px) {
width: 320px !important;
}
} */
.swiper-slide {
@media screen and (max-width:700px) {
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
}
/* .testimonialSwiper {
@media screen and (max-width:700px) {
width: 320px !important;
}
} */
.swiper-slide-active .testimonial-card {
transform: scale(1.3);
/* Make active slide bigger */
box-shadow: 0 0 20px rgba(13, 165, 167, 0.4);
/* Optional: highlight */
@media screen and (max-width:500px) {
transform: scale(1);
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2) !important;
}
}
.swiper-slide-next .testimonial-card,
.swiper-slide-prev .testimonial-card {
transform: scale(0.95);
/* Slightly smaller for side slides */
opacity: 0.9;
}
.testimonialSwiper {
padding: 50px 0px !important;
overflow: hidden !important;
@media screen and (max-width:500px) {
padding: 0px 0px !important;
}
}
/* .testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
} */
.client-info {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.client-image {
width: 60px;
height: 60px;
border-radius: 100%;
}
.client-details h3 {
margin-top: 8px;
font-family: "Raleway";
font-size: 16px;
font-weight: 700;
line-height: 130%;
color: #050505;
margin-bottom: 4px;
}
.client-details p {
font-family: "Raleway";
font-size: 16px;
font-weight: 500;
line-height: 130%;
color: #0DA5A7;
}
.rating {
display: flex;
gap: 4px;
margin-bottom: 16px;
}
.star {
width: 20px;
height: 20px;
fill: #ffc107;
}
.star.empty {
fill: #e0e0e0;
}
.testimonial-text {
color: #444444;
line-height: 1.6;
font-size: 14px;
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 20px;
text-align: center;
}
.header h2 {
font-size: 2rem;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.testimonial-card {
padding: 24px;
}
.nav-button {
width: 44px;
height: 44px;
}
}
@media (max-width: 480px) {
.header h2 {
font-size: 1.5rem;
}
.testimonial-card {
padding: 20px;
}
.client-info {
gap: 12px;
}
.avatar {
width: 50px;
height: 50px;
font-size: 1rem;
}
}
@media (min-width: 1200px) {
.testimonials-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* get in touch */
/* .blogs::after {
content: "";
position: absolute;
top: 10%;
right: 0;
transform: translateY(-50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
} */
.btn-get-in-touch {
margin-top: 40px;
background-color: #0DA5A7;
border-color: #0DA5A7;
color: white;
width: 197px;
height: 56px;
font-size: 17px;
border-radius: 30px;
font-weight: 500;
text-decoration: none;
display: inline-block;
margin-bottom: 30px;
}
.image {
max-width: 616px;
width: auto;
border-radius: 32px;
}
.hero-img {
max-width: 620px;
border-radius: 32px;
}
.contact-main-container {
width: 100%;
display: flex !important;
flex-direction: row !important;
gap: 50px;
align-items: center;
justify-content: space-between;
@media screen and (min-width:1024px) and (max-width:1280px) {
gap: 20px;
}
@media screen and (max-width:1024px) {
flex-direction: column !important;
}
@media screen and (max-width:768px) {
align-items: start;
}
}
/* about page form */
.contact-section-one {
padding: 130px 0;
color: #050505;
position: relative;
@media screen and (max-width:992px) {
padding: 50px 0;
}
}
@media screen and (min-width:992px) {
.contact-section-one::before {
content: "";
position: absolute;
top: 1%;
left: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
}
/* get in touch */
.contact-section {
padding: 130px 0;
color: #050505;
position: relative;
@media screen and (max-width:992px) {
padding: 50px 0;
}
}
@media screen and (min-width:992px) {
.contact-section::after {
content: "";
position: absolute;
/* top: 10%; */
bottom: 0;
left: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.contact-section::before {
content: "";
position: absolute;
/* top: 10%; */
bottom: 0;
right: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
}
.contact-desc {
width: 517px;
@media screen and (max-width:550px) {
width: auto;
}
}
.contact-title {
font-size: 56px;
font-weight: 700;
line-height: 62px;
letter-spacing: -1%;
color: #050505;
font-family: "Raleway";
}
.contact-detail {
font-size: 16px;
line-height: 28px;
color: #444444;
max-width: 540px;
width: auto;
}
/* Wrapper for dropdown */
.select-wrapper {
position: relative;
}
.currency-select {
border: none;
padding: 12px 40px 12px 16px;
/* space for custom arrow */
font-size: 16px;
line-height: 32px;
color: #444444;
font-weight: 400;
cursor: pointer;
outline: none;
appearance: none;
/* removes default arrow */
-webkit-appearance: none;
-moz-appearance: none;
}
/* Custom arrow */
.budget-wrapper {
display: flex;
border-radius: 14px;
background: transparent;
overflow: hidden;
margin-top:-3px;
}
.budget-input {
border-radius: 14px;
border: none;
background: transparent;
line-height: 32px;
color: #444444;
height: 55px !important;
font-size: 16px;
resize: none;
letter-spacing: 0.15em;
outline: none;
box-shadow: none;
}
.budget-input:focus {
outline: none;
box-shadow: none;
/* Ensure no shadow appears on focus */
}
.budget-input::placeholder {
color: #444444 !important;
}
.contact-card {
border: 0.5px solid #DDDDDD;
border-radius: 20px;
max-width: 717px;
width: auto;
padding: 3rem;
background: transparent;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2);
/* @media screen and (min-width:992px) and (max-width:1024px) {
padding: 24px;
} */
@media screen and (min-width:320px) and (max-width:768px) {
padding: 2rem;
}
}
.contact-card .inputOne,
.contact-card textarea {
border: 1px solid #0DA5A7;
border-radius: 14px;
background: transparent;
line-height: 32px;
color: #444444;
padding: 12px 17px;
font-size: 16px;
resize: none;
margin-bottom: 4px;
letter-spacing: 0.15em;
outline: none;
/* Remove the default outline */
box-shadow: none;
/* scales based on font size */
}
.contact-card .inputOne:focus,
.contact-card textarea:focus {
outline: none;
box-shadow: none;
}
.contact-card input::placeholder,
.contact-card textarea::placeholder {
color: #444444;
}
.contact-card button {
background-color: #0DA5A7;
color: #fff;
font-weight: 600;
border-radius: 43px;
padding: 12px;
width: 100%;
transition: 0.3s;
border: none;
box-shadow: 0 10px 8px rgba(0, 0, 0, 0.1);
}
.contact-card button:hover {
background-color: #0DA5A7;
}
.contact-info {
margin-top: 20px;
max-width: 90%;
width: auto;
}
.contact-info .icon {
width: 24px;
height: 24px;
margin-right: 12px;
}
/* Footer */
.footer-section {
padding: 54px 0 30px 0;
position: relative;
overflow: hidden;
}
.footer-section1 {}
@media screen and (min-width:993px) {
.footer-section1::before {
content: "";
position: absolute;
/* top: 10%; */
left: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.footer-section1::after {
content: "";
position: absolute;
top: 30%;
right: 0;
/* transform: translateY(50%); */
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
}
img.footer-partner-logo {
width: 135px;
}
.footer-tagline {
color: #0DA5A7 !important;
font-size: 14px;
letter-spacing: 2.8px;
text-transform: uppercase;
margin-bottom: 11px;
}
.footer-title {
color: #050505;
font-size: 40px;
font-family: "Raleway";
font-weight: 600;
margin-bottom: 11px;
line-height: 1.2;
}
.footer-description {
color: #444444;
font-size: 16px;
line-height: 33px;
margin-bottom: 20px;
}
.btn-schedule {
background-color: #0DA5A7;
border-color: #0DA5A7;
color: white;
width: 197px;
height: 56px;
font-size: 17px;
border-radius: 30px;
font-weight: 500;
text-decoration: none;
display: inline-block;
margin-bottom: 30px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
}
.footer-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 26px;
}
.footer-nav li a {
color: #444444;
text-decoration: none;
font-size: 18px;
}
.footer-nav li a:hover {
color: #0DA5A7;
}
.company-logo {
max-width: 280px;
margin-bottom: 20px;
}
.logo-text {
font-size: 24px;
font-weight: 700;
color: #212529;
margin-bottom: 5px;
}
.logo-tagline {
color: #6c757d;
font-size: 12px;
margin-bottom: 30px;
}
.clutch-badge {
margin-top: 52px;
@media screen and (max-width:992px) {
margin-top: 20px;
}
}
.clutch-text {
font-size: 11px;
color: #6c757d;
margin-bottom: 5px;
}
.clutch-logo {
font-size: 18px;
font-weight: 700;
color: #212529;
margin-bottom: 5px;
}
.stars {
color: #ff6b35;
font-size: 14px;
margin-bottom: 5px;
}
.review-text {
font-size: 10px;
color: #6c757d;
}
.footer-bottom {
border-top: 1px solid #C8C8C818;
@media screen and (max-width:767px) {
margin-top: 28px;
}
}
.copyright {
color: #050505;
font-size: 16px;
margin: 0;
}
.social-links {
display: flex;
gap: 14px;
justify-content: end;
}
.social-links a {
width: 35px;
height: 35px;
background-color: transparent;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 14px;
}
@media (max-width: 768px) {
.footer-nav {
gap: 17px 36px;
align-items: center;
}
.social-links {
justify-content: start;
margin-top: 20px;
}
}
.social-links a:hover {
background-color: transparent;
color: white;
}
.wave-pattern {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-repeat: no-repeat;
}
/* Responsive styles for hero section */
/* portfolio page */
.porflio-card-section {
margin-top: 100px;
background-color: white;
margin-bottom: 86px;
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
}
}
.porflio-card-section::before {
content: "";
position: absolute;
left: 0;
/* push gradient to the right */
/* transform: translateY(100%); */
bottom: -80%;
/* transform: translateX(-10%); */
/* center vertically */
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 99%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
/* softer glow */
max-width: 100%;
/* prevents overflow */
}
.porflio-card-section::after {
content: "";
position: absolute;
right: 0;
bottom: -20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 99%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
/* softer glow */
max-width: 100%;
/* prevents overflow */
}
.section-header {
margin-top: 22px;
position: relative;
min-height: 300px;
/* background: rgba(13, 165, 167, 0.05); */
background: url('https://res.cloudinary.com/dl3nmgxn9/image/upload/v1758131609/Group_1597883551_ygkjzg.svg') no-repeat center bottom;
background-size: cover;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
/* wave effect at bottom */
.section-header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background-size: cover;
opacity: 1;
pointer-events: none;
}
.section-content h2 {
font-size: 40px;
letter-spacing: -1%;
line-height: 65px;
font-weight: 700 !important;
color: #050505;
}
.section-content p {
font-size: 18px;
color: #444444;
line-height: 26px;
font-weight: 400 !important;
}
/* blogs page */
.blogs-section-wrapper {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 45px;
margin-top: 100px;
margin-bottom: 140px;
position: relative;
@media screen and (min-width:1461px) and (max-width:1920px) {
gap: 20px !important;
}
@media screen and (min-width:1281px) and (max-width:1460px) {
gap: 20px !important;
}
@media screen and (min-width:1024px) and (max-width:1280px) {
gap: 10px;
}
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
gap: 20px;
}
}
.blogs-section-wrapper::before {
content: "";
position: absolute;
top: 1%;
left: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.blogs-section-wrapper::after {
content: "";
position: absolute;
bottom: 10%;
right: 0;
transform: translateY(1%);
transform: translateX(20%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
/* service page */
.service-section-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 45px;
margin-top: 100px;
margin-bottom: 140px;
position: relative;
@media screen and (max-width:1920px) {
gap: 32px !important;
}
@media screen and (min-width:1281px) and (max-width:1460px) {
gap: 20px !important;
}
@media screen and (min-width:1024px) and (max-width:1280px) {
gap: 20px;
}
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
gap: 32px;
}
}
/* .service-section-wrapper {
margin-top: 100px;
margin-bottom: 86px;
position: relative;
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
}
} */
.service-section-wrapper::before {
content: "";
position: absolute;
top: 20%;
left: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.service-section-wrapper::after {
content: "";
position: absolute;
top: 0;
right: 0;
transform: translateY(1%);
transform: translateX(20%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.service-section-card {
position: relative;
border-radius: 32px;
margin: 10px;
border: 0.5px solid #D5D5D5;
width: 400px;
min-height: 290px;
padding: 71px 31px;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2);
background: #ffffff;
overflow: hidden;
z-index: 999;
}
/* Large tablets / small desktops */
@media screen and (min-width: 1140px) and (max-width: 1439px) {
.service-section-card {
width: 350px;
height: 260px;
padding: 50px 31px 50px 25px;
}
}
/* Tablets + small screens */
@media screen and (min-width: 768px) and (max-width: 1139px) {
.service-section-card {
margin: 10px auto;
width: 310px;
height: 260px;
padding: 50px 20px 30px 30px;
}
}
/* Very small mobile */
@media screen and (max-width: 767px) {
.service-section-card {
width: 100%;
max-width: 340px;
margin: 0px
}
}
.service-section-card:hover {
box-shadow: 0 0 25px 1px rgba(13, 165, 167, 0.3);
}
.service-section-card h5.ellipsis-title,
.service-card h5.ellipsis-title {
font-weight: 600;
font-family: "Raleway";
font-size: 28px;
margin-bottom: 8px;
line-height: 100%;
letter-spacing: 0%;
color: #050505;
position: relative;
z-index: 1;
}
.service-section-card p {
width: 256px;
color: #444444;
font-size: 15px;
line-height: 22px;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.service-section-card a {
font-weight: 500;
width: 98px;
font-size: 16px;
line-height: 28px;
text-decoration: none;
border-bottom: #000 1px solid;
color: #050505;
position: relative;
z-index: 1;
}
.service-section-card a:hover {
color: #0da5a7;
}
/* Blog post */
.post-container {
width: 100%;
display: flex;
justify-content: space-between;
gap: 90px !important;
margin-top: 63px;
}
.left-container {
width: 80%;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
.post-heading {
font-size: 47px;
font-weight: 600;
font-family: "Raleway";
line-height: 128%;
letter-spacing: -0.03em;
color: #050505;
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 36px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 25px;
}
}
.post-image {
margin-top: 31px;
width: 100%;
height: 314px;
border-radius: 32px;
overflow: hidden;
/* ensures crop stays inside */
}
.post-image img {
width: 100%;
height: 100%;
object-fit: cover;
/* fills width + height, crops overflow */
border-radius: 32px;
}
.post-decription {
margin-top: 31px;
font-size: 17px;
line-height: 160%;
color: #444444;
max-width: 100%;
width: auto;
@media screen and (min-width:2300px) {
max-width: 100%;
}
}
.right-container {
width: 20%;
@media screen and (max-width:1024px) {
display: none;
}
}
.sidebar {
margin-top: 15px;
width: 100%;
margin-left: 20px;
}
.sidebar-item {
display: flex;
align-items: flex-start;
gap: 17.15px;
margin-bottom: 36px;
}
.sidebar-text h4 {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.03em;
color: #050505;
}
.sidebar-text p {
font-size: 17px;
color: #444444;
margin: 0px !important;
}
.sidebar-text a {
color: #555;
text-decoration: none;
}
.sidebar-text a:hover {
color: #009688;
}
.categories {
margin-top: 14px;
margin-left: 20px;
}
.category-heading {
font-family: "Raleway";
font-weight: 600;
font-size: 32px;
margin-bottom: 1px;
letter-spacing: -0.03em;
}
.category {
width: fit-content;
margin-top: 24px;
padding: 4px 10px;
font-size: 18px;
line-height: 1;
border: 0.5px solid #050505;
border-radius: 32px;
color: #050505;
}
.latest-blog-title {
font-family: "Raleway";
font-weight: 600;
font-size: 44px;
line-height: 128%;
letter-spacing: -0.03em;
color: #050505;
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 36px;
line-height: 56px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 25px;
line-height: 40px;
}
}
.single-blog-card-wrapper {
margin-bottom: 140px;
margin-top: 30px;
@media screen and (max-width: 992px) {
margin-bottom: 100px;
}
}
/* about page */
.journey-section {
margin-top: 140px;
position: relative;
@media screen and (min-width:320px) and (max-width:992px) {
margin-top: 80px;
}
}
@media screen and (min-width:993px) {
.journey-section::before {
content: "";
position: absolute;
top: 15%;
left: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.journey-section::after {
content: "";
position: absolute;
top: 35%;
right: 0;
/* transform: translateY(50%); */
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
}
.footer-tagline {
color: #444444;
font-size: 14px;
letter-spacing: 2.8px;
text-transform: uppercase;
margin-bottom: 11px;
}
/* our mission */
.our-mission-container {
margin-top: 140px;
@media screen and (max-width:922px) {
margin-top: 50px;
}
}
.cards-container {
width: 100%;
display: flex;
gap: 26px;
justify-content: center;
flex-direction: row;
overflow: hidden;
margin-top: 40px;
@media screen and (max-width:992px) {
flex-direction: column;
}
}
.our-mission-card {
width: 50%;
padding: 40px 31px 40px 47px;
/* max-height: 278px; */
min-height: 150px;
border: 0.5px solid #D5D5D5;
border-radius: 32px;
position: relative;
overflow: hidden;
@media screen and (max-width:992px) {
width: 100%;
}
@media screen and (max-width:500px) {
padding: 20px 20px 20px 20px;
}
}
.our-vision-card {
overflow: hidden;
width: 50%;
padding: 40px 31px 40px 47px;
/* max-height: 278px; */
min-height: 150px;
border: 0.5px solid #D5D5D5;
border-radius: 32px;
position: relative;
@media screen and (max-width:992px) {
width: 100%;
}
@media screen and (max-width:500px) {
padding: 20px 20px 20px 20px;
}
}
.mission-card-title {
font-weight: 700;
font-size: 28px;
line-height: 1;
font-family: "Raleway";
color: #050505;
}
.mission-card-description {
margin-top: 8px;
font-size: 15px;
line-height: 22px;
color: #444444;
@media screen and (min-width: 2300px) {
font-size: 20px;
line-height: 28px;
}
}
.card-bg-circle {
position: absolute;
right: -100px;
top: 150px;
width: 500px;
height: 200px;
background: rgba(13, 165, 177, 0.26);
/* semi-transparent */
border-radius: 50%;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
filter: blur(100px);
}
.mission-image-style {
position: absolute;
top: 0;
right: 0px;
width: 150px;
}
/* Our team */
.team-section {
margin-top: 140px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@media screen and (min-width:320px) and (max-width:992px) {
margin-top: 50px;
}
}
.team-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 40px;
text-align: left;
}
.team-grid1 {
margin-top: 52px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, max-content));
gap: 40px;
justify-content: center;
/* ✅ This will now center */
}
.team-card {
width: 304px;
height: 373px;
position: relative;
background: #fff;
border-radius: 38px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
aspect-ratio: 1;
}
.team-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.team-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-overlay {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
padding: 40px 26px 40px 20px;
color: white;
}
.team-card:hover .team-overlay {
background: linear-gradient(to top, rgba(13, 165, 167, 1), transparent);
}
.team-name {
font-family: "Raleway";
font-size: 20px;
font-weight: 700;
line-height: 1;
margin-bottom: 9px;
}
.team-role {
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.linkedin-icon {
position: absolute;
top: 65px;
right: 16px;
width: 24px;
height: 24px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background-color 0.3s ease;
}
@media (max-width: 768px) {
.team-grid1 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
justify-content: center;
/* ✅ centers grid items */
}
.team-card {
margin-left: auto;
/* ✅ ensures card is centered */
margin-right: auto;
}
}
.team-title {
font-size: 2rem;
margin-bottom: 24px;
}
.view-more-btn {
display: none;
/* hidden on desktop */
margin: 20px auto 0;
padding: 10px 20px;
border-radius: 70px;
border: none;
background: #0DA5A7;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.view-more-btn:hover {
background: #088b8d;
}
@media (max-width: 768px) {
.view-more-btn {
display: block;
}
.team-card {
display: grid;
/* hide all by default on mobile */
}
.team-card.visible {
display: block;
/* only visible cards will show */
}
}
.title-one {
font-family: "Raleway";
font-weight: 700;
font-size: 56px;
line-height: 65px;
letter-spacing: -1%;
color: #050505;
@media screen and (min-width: 993px) and (max-width: 1280px) {
font-size: 45px;
line-height: 55px;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 40px;
line-height: 56px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 25px;
line-height: 40px;
}
}
.title {
font-family: "Raleway";
font-weight: 700 !important;
font-size: 56px !important;
line-height: 65px;
letter-spacing: -1%;
color: #050505;
@media screen and (min-width: 993px) and (max-width: 1280px) {
font-size: 45px !important;
line-height: 55px;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 40px !important;
line-height: 56px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 27px !important;
line-height: 40px;
}
}
.footer-title {
font-family: "Raleway";
font-weight: 600;
font-size: 50px;
line-height: 1;
letter-spacing: 0.01rem;
color: #050505;
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 48px;
line-height: 56px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 26px;
line-height: 40px;
}
}
.contact-form-description {
font-size: 16px;
line-height: 28px;
color: #444444;
margin-bottom: 20px !important;
}
.descriptionOne {
font-size: 18px;
line-height: 26px;
color: #444444;
margin-bottom: 20px !important;
@media screen and (min-width: 2300px) {
font-size: 22px;
line-height: 36px;
}
@media screen and (min-width: 993px) and (max-width: 1280px) {
font-size: 16px;
line-height: 22px;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 18px;
line-height: 26px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 16px;
line-height: 24px;
}
}
.description {
font-size: 18px;
line-height: 26px;
color: #444444;
margin-bottom: 20px !important;
@media screen and (min-width: 2300px) {
max-width: 90%;
font-size: 22px;
line-height: 36px;
}
@media screen and (min-width: 993px) and (max-width: 1280px) {
font-size: 16px;
line-height: 22px;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 18px;
line-height: 26px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 16px;
line-height: 24px;
}
}
/* our Journey */
.journey-image {
margin-top: 40px;
width: 100%;
display: flex;
justify-content: center;
@media screen and (max-width:767px) {
display: none;
}
}
.journey-image-one {
margin-top: 40px;
width: 100%;
display: none;
justify-content: center;
@media screen and (max-width:767px) {
display: flex;
}
}
/* Our core value */
.core-value-container {
margin-top: 40px;
position: relative;
}
@media screen and (min-width:993px) {
.core-value-container::before {
content: "";
position: absolute;
top: 10%;
left: 0;
transform: translateY(40%);
width: 250px;
height: 250px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.core-value-container::after {
content: "";
position: absolute;
top: 30%;
right: 0;
/* transform: translateY(50%); */
width: 250px;
height: 250px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 26px;
@media screen and (min-width:769px) and (min-width:1070px) {}
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
.card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 0.5px solid #0DA5A7;
border-radius: 32px;
padding: 44px 31px;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2) !important;
z-index: 999;
transition: all 0.3s ease;
}
.card-header-title {
display: flex;
align-items: center;
margin-bottom: 13px;
}
.core-value-icon {
width: 70px;
height: 70px;
background: #E3F8F8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
flex-shrink: 0;
}
.icon svg {
width: 24px;
height: 24px;
color: #E3F8F8;
}
.card-title {
font-family: "Raleway";
font-size: 28px;
line-height: 1;
font-weight: 700;
color: #050505;
}
.card-description {
font-size: 18px;
line-height: 26px;
color: #444444;
}
@media (max-width: 768px) {
.cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.card {
padding: 24px;
}
}
.scroll-to-top {
position: fixed;
bottom: 185px;
right: 40px;
z-index: 10000;
animation: mymove 0.5s;
display: none;
/* Hidden by default */
}
@media screen and (max-width: 600px) {
.scroll-to-top {
bottom: 170px;
right: 20px;
}
}
/* Button */
.scroll-to-top button {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
box-shadow: 0px 0px 18px #0DA5A7;
background-color: white;
border: none;
cursor: pointer;
user-select: none;
transition: 0.8s;
z-index: 10000;
}
@media screen and (max-width: 600px) {
.scroll-to-top button {
height: 30px;
width: 30px;
cursor: unset;
}
}
/* Hover effect */
.scroll-to-top button:hover {
/* border: 1px solid #0DA5A7; */
background-color: #0DA5A7;
transition: 0.5s;
}
.scroll-to-top button:hover i {
color: black;
transition: 0.5s;
}
/* Icon */
.scroll-to-top i {
color: black;
font-size: 16px;
transition: 0.8s;
}
@media screen and (max-width: 600px) {
.scroll-to-top i {
font-size: 14px;
}
}
/* Animation */
@keyframes mymove {
from {
bottom: 0px;
}
to {
bottom: 40px;
}
}
.swiper-wrapper {
height: fit-content !important;
}
/* .portfolioSwiper .swiper-wrapper {
@media screen and (min-width:375px) and (max-width:425px) {
width: 361px !important;
}
overflow: visible !important;
} */
/* ====================================== */
/* Style for Contact Form 7 to match your design */
.contact-form-wrapper {
width: 100%;
}
.wpcf7-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.wpcf7-form .row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.wpcf7-form .col-md-6 {
padding: 0 15px;
flex: 0 0 50%;
max-width: 50%;
}
.wpcf7-form .col-12 {
padding: 0 15px;
flex: 0 0 100%;
max-width: 100%;
}
.wpcf7-form .form-control {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #ced4da;
border-radius: 12px;
font-size: 1rem;
line-height: 1.5;
}
.wpcf7-form .budget-wrapper {
display: flex;
gap: 10px;
}
.wpcf7-form .budget-input {
flex: 1 !important;
}
.wpcf7-form .select-wrapper select {
position:relative;
padding: 0.75rem 1rem;
width:90px;
border: 1px solid #ced4da;
border-radius: 14px;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.wpcf7-form .select-wrapper .wpcf7-form-control-wrap::after {
content: "";
position: absolute;
right: 14px;
top: 48%;
transform: translateY(-50%);
width: 20px;
height: 24px;
pointer-events: none;
background: url("data:image/svg+xml;utf8,\
") no-repeat center;
}
.wpcf7-form textarea.form-control {
min-height: 150px;
}
.wpcf7-form input[type="submit"] {
background: #0DA5A7 !important;
width:100%;
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 12px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
}
.wpcf7-form input[type="submit"]:hover {
background: #0056b3;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.wpcf7-form .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
.ellipsis-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: auto;
}
.partner-container {
display: flex;
width: 100%;
justify-content: space-between;
gap: 1rem;
/* Bootstrap gap-3 = 1rem */
flex-direction: column;
/* default for mobile */
}
@media (min-width: 1024px) {
/* XL breakpoint */
.partner-container {
flex-direction: row;
}
}
.boldNote {
color: #0DA5A7;
font-size: 26px;
line-height: 26px;
margin-bottom: 11px;
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 20px;
line-height: 24px;
}
}
.partner-righ-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 35px;
@media screen and (min-width: 992px) and (max-width: 1150px) {
gap: 20px;
}
@media screen and (min-width: 576px) and (max-width: 768px) {
gap: 20px;
flex-direction: row;
}
@media screen and (min-width: 320px) and (max-width: 575px) {
gap: 25px;
flex-direction: column;
}
}
.partner-box {
background-color: #f3fafb;
display: flex;
justify-content: center;
align-items: center;
width: 295px;
height: 251px;
border-radius: 33px;
@media screen and (min-width: 1900px) {
width: 400px;
height: 300px;
}
@media screen and (min-width: 992px) and (max-width: 1150px) {
width: 250px;
height: 200px;
}
@media screen and (min-width: 320px) and (max-width: 575px) {
width: 100%;
height: 251px;
}
}
.partner-logo {
@media screen and (min-width: 1900px) {
width: 320px;
height: 250px;
}
@media screen and (min-width: 992px) and (max-width: 1150px) {
gap: 20px;
width: 200px;
height: 200px;
}
}
.work-section {
width: 100%;
margin-top: 140px;
margin-bottom: 130px;
@media screen and (max-width:992px) {
margin-top: 80px;
margin-bottom: 80px;
}
}
@media screen and (min-width:992px) {
.work-section::before {
content: "";
position: absolute;
left: 300px;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
}
.work-container {
background: linear-gradient(135deg, #f4fbfb, #e9f6f6);
border-radius: 40px;
padding: 60px;
display: flex;
align-items: center;
gap: 40px;
@media (max-width: 768px) {
align-items: start;
}
}
/* LEFT */
.work-left {
flex: 1;
}
.work-left p {
color: #444444;
font-size: 16px;
margin-bottom: 28px;
max-width: 531px;
}
.cta-btn {
background: #0DA5A7;
color: #fff;
border: none;
padding: 12px 28px;
border-radius: 30px;
font-size: 17px;
cursor: pointer;
margin-bottom: 22px;
}
.cta-btn:hover {
background: #029fa1;
}
.review-logos {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #777;
}
.review-logos img {}
/* RIGHT */
.work-right {
flex: 1;
}
/* Heading */
.office-heading {
color: #050505;
font-size: 26px;
font-weight: 700;
margin-bottom: 24px;
}
/* Office Row */
.office {
display: flex;
gap: 24px;
margin-bottom: 28px;
align-items: flex-start;
}
/* Icon */
.office-icon {
flex-shrink: 0;
width: 65px;
}
.office-icon img {
width: 100%;
height: 120px
}
/* Content */
.office-content {
flex: 1;
}
.office-content h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
color: #050505;
}
.office-content h3 span {
color: #0DA5A7;
}
.office-content p {
font-size: 16px;
color: #444;
line-height: 22px;
margin-bottom: 6px;
word-break: break-word;
}
@media (max-width: 768px) {
.office {
gap: 16px;
}
.office-content h3 {
font-size: 18px;
}
.office-content p {
font-size: 14px;
}
}
@media (max-width: 576px) {
.office {}
.office-icon {
width: 53px;
}
.office-heading {
font-size: 22px;
}
.office-icon img {
width: 100%;
height: 150px
}
}
/* RESPONSIVE */
@media (max-width: 992px) {
.work-container {
flex-direction: column;
padding: 15px;
}
}
@media (max-width: 576px) {
.work-left h2 {
font-size: 26px;
}
.office p {
font-size: 15px;
color: #444;
margin-bottom: 4px;
line-height: 23px;
text-wrap: inherit;
}
.cta-btn {
width: 100%;
text-align: center;
}
.review-logos {
flex-wrap: wrap;
}
}
.contact-title {
font-family: "Raleway";
font-weight: 700;
font-size: 48px;
line-height: 65px;
letter-spacing: -1%;
color: #050505;
@media screen and (min-width: 993px) and (max-width: 1280px) {
font-size: 45px;
line-height: 55px;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 40px;
line-height: 56px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 27px;
line-height: 40px;
}
}
.gradient-text {
background: linear-gradient(to bottom,
#0BB8BB 0%,
#0BB8BB 40%,
#027475 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-logo {
width: 444.59px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
.footer-logo {
width: 100%
}
}
/* Blockchain Service Page Styles */
.header-description {
font-size: 18px;
line-height: 26px;
color: #444444;
max-width: 900px;
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 18px;
line-height: 26px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 16px;
line-height: 24px;
}
}
.blockchain-hero-section {
padding-bottom: 50px;
}
.blockchain-hero-title {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.2;
color: #050505;
margin-bottom: 20px;
}
.blockchain-hero-description {
font-size: 18px;
line-height: 26px;
color: #444444;
max-width: 611px;
@media screen and (min-width: 500px) and (max-width: 700px) {
font-size: 18px;
line-height: 26px;
}
@media screen and (min-width: 320px) and (max-width: 499px) {
font-size: 16px;
line-height: 24px;
}
}
.blockchain-hero-image {
width: 100%;
height: 100%;
border-radius: 32px;
box-shadow: 0px 7px 22px rgba(0, 0, 0, 0.34);
border: none;
object-fit: cover;
@media screen and (min-width: 320px) and (max-width: 400px) {
width: 100%;
}
}
.blockchain-hero-title .text-teal {
color: #0DA5A7;
}
.btn-blockchain-primary {
background-color: #0DA5A7;
color: white;
border: 1px solid #0DA5A7;
border-radius: 30px;
padding: 12px 30px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
@media screen and (max-width: 576px) {
font-size: 14px;
}
}
/* .btn-blockchain-primary:hover {
background-color: #0b8e90;
color: white;
} */
.btn-blockchain-outline {
background-color: transparent;
color: #050505;
border: 1px solid #050505;
border-radius: 30px;
padding: 12px 30px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
@media screen and (max-width: 576px) {
font-size: 14px;
}
}
/* .btn-blockchain-outline:hover {
background-color: #050505;
color: white;
} */
@media (max-width: 1100px) {
.blockchain-hero-title {
font-size: 39px;
}
}
@media (max-width: 576px) {
.blockchain-hero-title {
font-size: 28px;
}
.btn-blockchain-primary,
.btn-blockchain-outline {
width: 100%;
justify-content: center;
}
}
.gradient-text {
background: linear-gradient(to bottom,
#0BB8BB 0%,
#0BB8BB 40%,
#027475 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.why-choose-section {
flex-wrap: wrap;
justify-content: center;
margin-top: 100px;
margin-bottom: 140px;
position: relative;
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
gap: 32px;
}
}
.why-choose-section::before {
content: "";
position: absolute;
top: -10%;
width: 400px;
right: -35%;
/* set size */
height: 400px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 60%);
transform: translateX(-50%);
z-index: -1;
pointer-events: none;
filter: blur(200px);
}
/* Why Choose Us Section */
.why-choose-card {
background: white;
border-radius: 24px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border: 1px solid #f0f0f0;
}
.why-choose-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(13, 165, 167, 0.15);
border-color: #0DA5A7;
}
.why-choose-card-title {
font-family: "Raleway";
font-size: 22px;
line-height: 1;
font-weight: 600;
color: #050505;
}
.why-choose-card-description {
font-size: 15px;
line-height: 22PX;
font-weight: 400;
color: #444444;
}
.why-choose-card .icon-box {
width: 60px;
height: 60px;
background: #E0F5F5;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0DA5A7;
}
@media (max-width: 991px) {
.why-choose-card {
margin-bottom: 20px;
}
}
.blockchain-service-section-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 100px;
margin-bottom: 140px;
position: relative;
@media screen and (max-width:1920px) {
gap: 22px;
}
@media screen and (min-width:1281px) and (max-width:1460px) {
gap: 20pX;
}
@media screen and (min-width:1024px) and (max-width:1280px) {
gap: 20px;
}
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
gap: 32px;
}
}
.blockchain-service-section-wrapper::before {
content: "";
position: absolute;
top: 20%;
left: 0;
transform: translateY(50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.blockchain-service-section-wrapper::before {
content: "";
position: absolute;
top: 10%;
left: -30%;
transform: translateY(-10%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.blockchain-service-section-wrapper::after {
content: "";
position: absolute;
top: 80%;
right: -30%;
transform: translateY(90%);
transform: translateX(10%);
width: 300px;
height: 300px;
background: radial-gradient(circle, #0DA5A7 0%, transparent 90%);
/* background: radial-gradient(circle, red 0%, transparent 90%); */
z-index: 0;
pointer-events: none;
filter: blur(200px);
max-width: 100%;
}
.blockchain-service-section-card {
position: relative;
border-radius: 32px;
margin: 10px;
border: 0.5px solid #D5D5D5;
width: 400px;
min-height: 244px;
padding: 34px;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2);
background: #ffffff;
overflow: hidden;
z-index: 999;
}
/* Large tablets / small desktops */
@media screen and (min-width: 1140px) and (max-width: 1439px) {
.blockchain-service-section-card {
padding: 31px;
}
}
/* Tablets + small screens */
@media screen and (min-width: 768px) and (max-width: 1139px) {
.blockchain-service-section-card {
margin: 10px auto;
padding: 31px;
}
}
/* Very small mobile */
@media screen and (max-width: 767px) {
.blockchain-service-section-card {
width: 100%;
margin: 0px
}
}
.blockchain-service-section-card:hover {
box-shadow: 0 0 25px 1px rgba(13, 165, 167, 0.3);
}
.blockchain-service-section-card h3 {
font-weight: 500;
font-family: "Raleway";
font-size: 28px;
margin-bottom: 8px;
line-height: 38px;
letter-spacing: 0%;
color: #050505;
position: relative;
z-index: 1;
@media screen and (max-width: 767px) {
font-size: 22px;
line-height: 32px;
}
}
.blockchain-service-section-card p {
width: 256px;
color: #444444;
font-size: 14px;
line-height: 24px;
margin-bottom: 12px;
position: relative;
z-index: 1;
@media screen and (max-width: 767px) {
font-size: 12px;
line-height: 20px;
}
}
.blockchain-service-section-card a {
font-weight: 500;
width: 98px;
font-size: 16px;
line-height: 28px;
text-decoration: none;
border-bottom: #0DA5A7 1px solid;
color: #0DA5A7;
position: relative;
z-index: 1;
@media screen and (max-width: 767px) {
font-size: 12px;
line-height: 20px;
}
}
.blockchain-service-section-card a:hover {
text-decoration: underline;
}
@media screen and (max-width:600px) {
.tech-stack-image {
width: 150px;
}
}
/* Process Section */
.process-steps-container {
margin: 0 auto;
gap: 20px;
margin-top: 100px;
margin-bottom: 140px;
@media screen and (max-width:992px) {
margin-top: -50px;
margin-bottom: 43px;
}
}
.process-step {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.step {
width: 210px;
min-height: 220px;
padding: 26px 22px;
background-image: url("https://res.cloudinary.com/dl3nmgxn9/image/upload/v1768987744/Polygon_3_pzdtcw.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.process-title {
font-weight: 600;
font-size: 20px;
line-height: 100%;
min-height: 48px;
color: #0DA5A7;
width: 170px;
margin-top: 20px;
margin-left: -39px;
@media screen and (max-width: 1280px) {
margin-left: -20px;
width: 160px;
}
}
.process-description {
font-size: 14px;
line-height: 22px;
color: #050505;
width: 170px;
margin-left: -39px;
@media screen and (max-width: 1280px) {
margin-left: -20px;
width: 160px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1100px) {
.step {
width: 150px;
min-height: 150px;
padding: 26px 22px;
background-image: url("https://res.cloudinary.com/dl3nmgxn9/image/upload/v1768987744/Polygon_3_pzdtcw.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.process-title {
font-weight: 600;
font-size: 18px;
line-height: 1;
margin-bottom: 11px;
min-height: 30px;
color: #0DA5A7;
width: 120px;
margin-left: -20px;
}
.process-description {
font-size: 11px;
line-height: 16px;
color: #444;
width: 120px;
margin-left: -20px;
}
}
@media (max-width: 1023px) {
.process-steps-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.process-step {
display: block;
}
.step {
width: 300px;
height: auto;
text-align: center;
padding-right: 0;
padding-bottom: 30px;
background-image: url("https://res.cloudinary.com/dl3nmgxn9/image/upload/v1769004755/Polygon_3_1_ncq7cb.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
/* transform: translateX(50%) rotate(90deg); */
}
.process-title {
font-weight: 600;
font-size: 20px;
line-height: 1;
margin-bottom: 11px;
min-height: 48px;
color: #0DA5A7;
width: 162px;
margin-left: 45px;
}
.process-description {
font-size: 14px;
line-height: 22px;
color: #444;
width: 162px;
margin-left: 45px;
}
}
.tech-stack-section {
margin-bottom: 140px;
margin-top: 100px;
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
}
}
/* Industry Use Cases */
.use-case-card {
transition: all 0.3s ease;
position: relative;
border: 1px solid #EFF0F6 !important;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05) !important;
z-index: 2;
margin-left: 0;
}
/* Dotted connection line */
.use-case-card::before {
content: '';
position: absolute;
left: -600px;
/* Adjust length to reach the image */
top: 50%;
width: 80px;
height: 0;
border-top: 2px dashed #C8C8C8;
/* Dashed/Dotted */
transform: translateY(-50%);
display: none;
z-index: 1;
}
@media (min-width: 992px) {
.use-case-card {
margin-left: 30px;
/* Space for the line */
}
.use-case-card::before {
display: block;
}
}
.industry-use-cases-section {
margin: 0 auto;
}
@media (min-width: 992px) {
.use-case-card::before {
width: 400px;
/* Shorten slightly as elements are closer */
left: -405px;
}
}
/* Get Started CTA Section */
.cta-container {
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 357px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at center,
#ffffff 0%,
rgba(255, 255, 255, 0.8) 10%,
rgba(255, 255, 255, 0) 60%),
linear-gradient(to right,
#E0F3F4 0%,
#E0F3F4 100%);
border-radius: 50px !important;
@media screen and (max-width:600px) {
padding: 12px;
}
}
.cta-title {
font-family: 'Raleway';
font-weight: 700;
font-size: 45px;
line-height: 1;
color: #050505;
@media screen and (max-width:600px) {
font-size: 28px;
}
}
.cta-description {
font-family: 'Inter';
font-size: 16px;
line-height: 26px;
color: #444444;
max-width: 800px;
margin-bottom: 26px;
@media screen and (max-width:600px) {
font-size: 12px;
margin-bottom: 26px;
line-height: 20px;
}
}
.btn-cta-primary {
background-color: #0DA5A7;
color: white;
border: 1px solid #0DA5A7;
border-radius: 30px;
padding: 12px 30px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
max-width: 200px;
@media screen and (max-width: 576px) {
font-size: 14px;
}
}
.get-started-section {
margin-top: 100px;
margin-bottom: 140px;
@media screen and (max-width:992px) {
margin-top: 50px;
margin-bottom: 43px;
}
}
.faqs-section {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 140px;
@media screen and (max-width:992px) {
margin-top: 30px;
margin-bottom: 43px;
}
}
.custom-accordion {
max-width: 950px;
min-width: 950px;
@media screen and (max-width:992px) {
min-width: auto;
}
}
.custom-accordion .accordion-item {
border: 1px solid #EFF0F6;
box-shadow: 0 0 10px rgba(13, 165, 167, 0.2);
margin-bottom: 24px;
/* Space between items */
border-radius: 20px !important;
/* Rounded corners */
}
.custom-accordion .accordion-button {
font-family: 'Raleway';
font-size: 20px;
font-weight: 600;
line-height: 22px;
color: #050505;
box-shadow: none !important;
/* Remove separation line/shadow */
padding: 24px;
background-color: transparent !important;
/* Ensure background is seamless */
@media screen and (max-width:600px) {
font-size: 16px;
}
}
.custom-accordion .accordion-button:not(.collapsed) {
color: #050505;
background-color: transparent !important;
box-shadow: none !important;
/* Double check removal of line */
}
.custom-accordion .accordion-body {
font-family: 'Inter';
font-size: 14px;
line-height: 22px;
padding: 0 24px 24px 24px;
color: #444444;
border-top: none !important;
@media screen and (max-width:600px) {
font-size: 12px;
}
/* Ensure no line */
}
/* Custom Plus/Minus Icon */
.custom-accordion .accordion-button::after {
/* Plus Icon + */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230DA5A7'%3e%3cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3e%3c/svg%3e") !important;
background-size: contain;
transform: scale(1.2);
transition: transform 0.2s ease-in-out;
}
.custom-accordion .accordion-button:not(.collapsed)::after {
/* Minus Icon - */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230DA5A7'%3e%3cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z'/%3e%3c/svg%3e") !important;
transform: none;
/* Reset rotation if not needed or apply specific if minus needs separate handling, but replacing generic bg image is standard */
}
/* ================= Industry Use Cases - 3D Isometric Stack ================= */
/* Desktop 3D Grid Layout */
.industry-3d-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
align-items: start;
gap: 142px;
padding: 60px 0;
max-width: 1200px;
@media screen and (min-width:1024px) and (max-width:1200px) {
gap: 172px;
}
}
/* Left: 3D Stack Container (Sticky) */
.use-case-container {
margin-top: -97px;
position: relative;
display: flex;
@media screen and (max-width:1023px) {
display: none;
}
}
.mobile-use-case-container {
position: relative;
display: none;
@media screen and (max-width:1023px) {
display: flex;
}
}
.industry-use-case-main-container {
margin-top: 120px;
@media screen and (max-width:1023px) {
margin-top: 50px;
}
}
.dotted-line {
width: 33%;
height: 100%;
border: 1px solid;
border-image: repeating-linear-gradient(to right,
black 0,
black 6px,
transparent 6px,
transparent 12px) 1;
}
/* Right: Cards Column */
.industry-cards-scrollable {
display: flex;
flex-direction: column;
gap: 20px;
}
.industry-card-3d {
position: relative;
background: #ffffff;
border-radius: 18px;
padding: 17px 32px;
display: flex;
align-items: center;
gap: 18px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
border: 1px solid #F0F0F0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
z-index: 2;
height: 86px;
width: 521px;
@media screen and (max-width:600px) {
width: auto;
}
}
.industry-card-description {
font-size: 15px;
line-height: 22px;
color: #444444;
@media screen and (min-width:1024px) and (max-width:1100px) {
font-size: 14px;
}
@media screen and (max-width:599px) {
font-size: 12px;
}
}
.industry-card-title {
font-family: "Raleway";
font-size: 22px;
font-weight: 600;
line-height: 1;
color: #050505;
@media screen and (min-width:600px) and (max-width:1100px) {
font-size: 20px;
}
@media screen and (max-width:599px) {
font-size: 16px;
}
}
.industry-card-3d:hover {
transform: translateX(8px);
box-shadow: 0 6px 20px rgba(13, 165, 167, 0.12);
}
.icon-box-3d {
width: 44px;
height: 44px;
background: #F4FCFB;
color: #0DA5A7;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 20px;
flex-shrink: 0;
}
.icon-box-3d img {
width: 24px;
height: 24px;
object-fit: contain;
}
.card-content-3d h5 {
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 19px;
color: #050505;
margin: 0 0 4px 0;
line-height: 1.3;
}
.card-content-3d p {
font-size: 14px;
color: #777;
margin: 0;
line-height: 1.5;
}
/* Mobile Layout */
.industry-mobile-layout {
display: flex;
flex-direction: column;
gap: 30px;
padding: 40px 0;
}
.mobile-use-case-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.mobile-tile {
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-tile img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 15px rgba(13, 165, 167, 0.2));
}
.mobile-card {
background: #ffffff;
border-radius: 20px;
padding: 25px 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(13, 165, 167, 0.1);
text-align: center;
width: 100%;
max-width: 350px;
}
.mobile-card .icon-box {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #E7F6F6 0%, #D0F0F0 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.mobile-card .icon-box img {
width: 28px;
height: 28px;
object-fit: contain;
}
.mobile-card .icon-box i {
font-size: 22px;
color: #0DA5A7;
}
.mobile-card h5 {
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 26px;
color: #050505;
margin-bottom: 8px;
}
.mobile-card p {
font-size: 14px;
line-height: 20px;
color: #444444;
margin: 0;
}
/* Responsive Adjustments */
@media screen and (max-width: 1200px) {
.industry-3d-grid {
gap: 40px;
}
#blockchain-stack-3d {
width: 240px;
height: 240px;
}
.industry-card-3d::before {
width: 100px;
}
}
@media screen and (max-width: 991px) {
.industry-3d-grid {
display: none;
}
.mobile-tile {
width: 180px;
height: 90px;
}
}
@media screen and (max-width: 576px) {
.industry-mobile-layout {
gap: 25px;
padding: 30px 0;
}
.mobile-tile {
width: 160px;
height: 80px;
}
.mobile-card {
padding: 20px 15px;
}
.mobile-card h5 {
font-size: 16px;
line-height: 22px;
}
.mobile-card p {
font-size: 13px;
line-height: 18px;
}
}