:root {
--padding: 80px;
--cyan: #00bbee;
--dark-blue: #1F2531;
--lime: #97CB06;
--light-gray: #F8F9FB;
--white-color: #FFFFFF;
--font-display: Inter, Arial, Helvetica, sans-serif;
--font-body: Nunito, Arial, Helvetica, sans-serif;
}

*,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--font-body);
overflow-x: hidden;
}


h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
}

h1 {
font-size: clamp(2.2rem, 5vw, 3.8rem);
line-height: 1.2;
}

h2 {
font-size: clamp(1.8rem, 4vw, 3rem);
line-height: 1.25;
}

h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.3;
}

h4 {
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
line-height: 1.4;
}

h5 {
font-size: clamp(1rem, 2vw, 1.2rem);
line-height: 1.4;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

p,
span,
li,
a {

margin: 0;
padding: 0;
}

ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}

a {
text-decoration: none;
}

.container-main {
max-width: 1320px;
margin: 0 auto;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
}


[data-aos] {
will-change: transform, opacity;
}



.main-header {
background: var(--white-color);
padding: 15px 0px;
position: relative;
z-index: 9999;
border-bottom: 1px solid rgba(35, 41, 81, 0.1);
}


.main-header.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--white-color);
z-index: 10;
}

.mob-header {
display: none;
}

.mob-header.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 9999;
box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.header-flex {
display: flex;
justify-content: space-between;
align-items: center;
}

.header-left {
max-width: 200px;
}

.header-right {
display: flex;
align-items: center;
gap: 20px;
}

.header-links {
display: flex;
justify-content: space-between;
}

.header-links ul {
display: flex;
align-items: center;
gap: 30px;
}

.header-left a {
color: var(--black-color);
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
}

.header-left span {
color: var(--black-color);
}

.header-links ul li {
font-family: var(--font-display);
color: var(--dark-blue);
font-size: 15px;
line-height: 20px;
text-transform: uppercase;
}

.header-links ul li a:hover {
color: var(--cyan);
}

.header-links ul li.active a {
color: var(--cyan);
}



.header-links ul li a {
color: var(--dark-blue);
}

.header-cta-btn a {
font-family: var(--font-body);
color: var(--white-color);
background: var(--lime);
padding: 10px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
border: none;
display: inline-block;
}

.header-cta-btn a:hover {
background: var(--dark-blue);
transform: translateY(-2px);

}

.quote-btn a {
background: var(--lime);
color: var(--dark-blue);
padding: 10px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
border: none;
display: inline-block;
}

.quote-btn a:hover {
background: #7fac00;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(151, 203, 6, 0.2);
}

/* ========== SECTION STYLES ========== */
.section-heading h2 {
font-family: var(--font-display);
font-size: 42px;
line-height: 1.2;
margin-bottom: 20px;
font-weight: 500;
color: var(--dark-blue);
text-transform: uppercase;
}

.section-heading h2 span {
font-family: var(--font-display);
font-size: 42px;
line-height: 1.2;
margin-bottom: 20px;
color: var(--cyan);
font-weight: 600;
text-transform: uppercase;
}

.section-heading-black h2 {
font-family: var(--font-display);
font-size: 42px;
line-height: 1.2;
margin-bottom: 20px;
font-weight: 600;
color: var(--dark-blue);
text-transform: uppercase;
}

.section-heading-black h2 span {
font-family: var(--font-display);
font-size: 42px;
line-height: 1.2;
margin-bottom: 20px;
color: var(--cyan);
font-weight: 600;
text-transform: uppercase;
}

.section-desc p {
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
margin-bottom: 24px;
line-height: 1.6;
}

.section-desc-black p {
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
margin-bottom: 24px;
line-height: 1.6;
}


/* home banner */

.home-banner-main {
position: relative;
}

.home-banner-bg {
background: radial-gradient(circle at 70% 80%, rgb(76 189 223 / 33%) 0%, rgb(243 243 243) 85%);
height: 95vh;
position: relative;
}

.home-banner-bg img {
height: 95vh;
}

.home-banner-bg::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--black-color);
opacity: 0.4;
}

.home-banner-info {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}

.home-banner-info .container-main {
height: 100%;
}

.home-banner-content-inner {
text-align: center;
}

.hero-badge span {
display: inline-block;
background: rgba(0, 187, 238, 0.1);
color: var(--cyan);
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
border: 1px solid rgba(0, 187, 238, 0.2);
}

.home-banner-content {
display: flex;
flex-flow: column;
justify-content: center;
width: 100%;
height: 100%;
align-items: center;
max-width: 900px;
margin: 0 auto;
}

.home-banner-content-heading h1 {
font-family: var(--font-display);
line-height: 1.1;
font-weight: 700;
color: var(--dark-blue);
margin-bottom: 24px;
text-align: center;
}


.home-banner-content-desc p {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.8;
color: var(--dark-blue);
text-align: center;
margin: 0 auto;
}

.home-banner-content-btns {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
padding-top: 30px;
padding-bottom: 30px;
}


.btn-primary {
font-family: var(--font-body);
background: var(--lime);
color: var(--dark-blue);
padding: 13px 45px 13px 28px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
border: none;
display: inline-block;
text-align: center;
width: fit-content;
position: relative;
}


.btn-primary::after {
content: "\f061";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 14px;
position: absolute;
right: 25px;
top: 48%;
transform: translateY(-50%);
transition: transform 0.3s ease;
font-size: 14px;
}


.btn-primary:hover {
background: var(--dark-blue);

}


.btn-primary:hover::after {
transform: translate(5px, -48%);
}

.btn-secondary {
font-family: var(--font-body);
background: var(--dark-blue);
color: var(--white-color);
padding: 13px 28px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;

cursor: pointer;
display: inline-block;
text-align: center;
width: fit-content;
}

.btn-secondary:hover {
background: var(--white-color);
color: var(--dark-blue);

}

.hero-trust-info {
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 24px;
}

.hero-trust-info strong {
color: white;
}

/* hero trust bar */

.hero-trust-bar {
background: #06182d;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 18px 0;
}

.hero-trust-bar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
}

.hero-trust-bar-inner span {
position: relative;
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
white-space: nowrap;
}

.hero-trust-bar-inner span strong {
color: var(--white-color);
}

.hero-trust-bar-inner span:not(:last-child)::after {
content: "•";
position: absolute;
right: -17px;
color: var(--lime);
}

/* Trust Bar Main  */
.trust-bar-main {
background: var(--white-color);
padding: var(--padding) 0;
}

.trust-bar-content-heading {
text-align: center;
padding-bottom: 20px;
max-width: 762px;
margin: 0 auto;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid transparent;
}

.stats-card {
padding: 20px 35px;
text-align: left;

}

.stats-card:last-child {
border-right: none;
}

/*.stats-card h3::before {*/
/*  position: absolute;*/
/*  content: "+";*/
/*  font-size: 65px;*/
/*  line-height: 1;*/
/*  color: var(--lime);*/
/*  font-weight: 700;*/
/*  right: -42px;*/
/*  top: 4px;*/
/*}*/

/*.stats-card h3.no-plus::before {*/
/*  display: none;*/
/*}*/

.stats-card h3 {
font-size: 60px;
font-weight: 700;
line-height: 1;
color: var(--lime);
margin: 0 0 18px;
letter-spacing: -2px;
}

.stats-title {
display: block;
font-size: 16px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #0d2344;
margin-bottom: 18px;
}

.stats-card p {
font-size: 16px;
line-height: 1.7;
color: #4b5563;
margin: 0;
max-width: 240px;
}

/* Problem we solve */
.problem-we-solve-main {
padding: var(--padding) 0;
background: var(--light-gray);
}

.problem-we-solve-flex {
display: flex;
align-items: center;
gap: 40px;
}

.problem-we-solve-flex-left,
.problem-we-solve-flex-right {
width: 50%;
}

.problem-we-solve-flex-right-check-list ul {
list-style: none;
margin: 0;
padding: 0;
}

.problem-we-solve-flex-right-check-list ul li {
position: relative;
padding-left: 25px;
margin-bottom: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
line-height: 1.6;
}

.problem-we-solve-flex-right-check-list ul li::before {
content: "✖";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: #ef4444 !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
box-sizing: border-box;
}

.who-we-best-main-card-points-negative ul li::before {
content: "✖";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: #ef4444 !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
box-sizing: border-box;
}

.problem-we-solve-flex-right img {
height: 500px;
}


.problem-we-solve-transition span {
display: inline-block;
color: var(--cyan);
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.3px;
}



/* How It Work  */
.how-it-work-main {
background: var(--dark-blue);
padding: var(--padding) 0;
}

.how-it-work-content {
display: flex;
justify-content: space-between;
}

.how-it-work-content-link {
align-self: center;
}

.how-it-work-flex {
display: flex;
flex-wrap: wrap;
gap: 10px;
}


.how-it-work-card {
width: 400px;
background: var(--white-color);
border: 1px solid #e7e7e7;
border-top: 4px solid var(--cyan);
border-radius: 18px;
padding: 18px;
transition: .35s ease;
}

.how-it-work-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
}

.how-it-work-step {
display: inline-block;
padding: 8px;
background: rgba(0, 187, 238, .12);
color: var(--cyan);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
margin-bottom: 14px;
font-family: var(--font-body);
}

.how-it-work-card h3 {
font-family: var(--font-display);
font-size: 20px;
color: var(--dark-blue);
margin-bottom: 10px;
font-weight: 700;
}

.how-it-work-card p {
font-family: var(--font-body);
color: var(--dark-blue);
line-height: 1.8;
font-size: 14px;
}

/* WHAT MAKES US  */
.what-makes-us-main {
background: var(--light-gray);
padding: var(--padding) 0;
}

.what-makes-us-content {
text-align: center;
padding-bottom: 20px;
}

.what-makes-us-flex {
display: flex;
gap: 40px;
}

.what-makes-us-flex-left,
.what-makes-us-flex-right {
width: 50%;
}

.what-makes-us-flex-right {
flex-direction: column;
display: flex;
flex-wrap: wrap;
gap: 40px;
}

.what-makes-us-flex-right-block img {
height: 580px;
}

.differentiator-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}

.differentiator-card {
background: var(--white-color);
border: 1px solid #E8E8E8;
border-radius: 18px;
padding: 35px;
transition: .35s ease;
}

.differentiator-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

.differentiator-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--lime);
color: var(--white-color);
font-size: 18px;
font-weight: 700;
margin-bottom: 22px;
}

.differentiator-card h3 {
font-family: var(--font-display);
font-size: 28px;
color: var(--dark-blue);
margin-bottom: 16px;
}

.differentiator-card p {
font-family: var(--font-body);
color: var(--muted);
font-size: 16px;
line-height: 1.8;
}

.what-makes-us-flex-right-list-heading h3 {
font-family: var(--font-display);
font-size: 20px;
color: var(--dark-blue);
margin-bottom: 10px;
font-weight: 700;
}

.what-make-us-grid {
padding-top: 20px;
}

.what-make-us-grid-feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}

.what-make-us-grid-feature-card {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 18px;
padding: 30px;
transition: .35s ease;
}

.what-make-us-grid-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

.what-make-us-grid-feature-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(0, 187, 238, .12);
color: var(--cyan);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 22px;
}

.what-make-us-grid-feature-card h3 {
font-family: var(--font-display);
font-size: 24px;
color: var(--dark-blue);
margin-bottom: 14px;
}

.what-make-us-grid-feature-card p {
font-family: var(--font-body);
color: var(--muted);
line-height: 1.7;
font-size: 15px;
}

.what-makes-us-flex-right-list ul {
list-style: none;
margin: 0;
padding: 0;
}

.what-makes-us-flex-right-list ul li {
position: relative;
padding-left: 32px;
margin-bottom: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
margin-bottom: 24px;
line-height: 1.6;
}

.what-makes-us-flex-right-list ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: var(--dark-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
box-sizing: border-box;
}

/* ZERO RISK FIRST PROJECT OFFER */
.zero-risk-first-main {
background: #F0F7F3;
padding: var(--padding) 0;
}

.zero-risk-first-flex {
display: flex;
gap: 40px;
}

.zero-risk-first-flex-left,
.zero-risk-first-flex-right {
width: 50%;
}

.zero-risk-first-flex-left {
display: flex;
justify-content: space-evenly;
flex-direction: column;

}

.zero-risk-first-flex-left-subtext span {
font-size: 16px;
line-height: 1.7;
color: var(--dark-blue);
font-weight: 500;
}

.zero-risk-first-flex-right-list {
border-color: #E7E7E7;
border-width: 1px;
border-style: solid;
padding: 18px;
border-radius: 20px;
margin-bottom: 20px;
}

.zero-risk-first-flex-right-list h3 {
padding-bottom: 20px;
}

.zero-risk-first-flex-right-list ul {
list-style: none;
margin: 0;
padding: 0;
}

.zero-risk-first-flex-right-list ul li {
position: relative;
padding-left: 25px;
margin-bottom: 18px;
font-size: 16px;
line-height: 1.7;
color: var(--dark-blue);
}

.zero-risk-first-flex-right-list ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 700;
position: absolute;
left: 0;
top: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #EAF7C8;
color: var(--lime);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}

.zero-risk-first-flex-right-list-not {
border-color: #E7E7E7;
border-width: 1px;
border-style: solid;
padding: 18px;
border-radius: 20px;
}

.zero-risk-first-flex-right-list-not h3 {
padding-bottom: 20px;
}

.zero-risk-first-flex-right-list-not ul {
list-style: none;
margin: 0;
padding: 0;
}

.zero-risk-first-flex-right-list-not ul li {
position: relative;
padding-left: 25px;
margin-bottom: 18px;
font-size: 16px;
line-height: 1.7;
color: var(--dark-blue);
}

.zero-risk-first-flex-right-list-not ul li::before {
content: "\f00d";
font-family: "Font Awesome 6 Free";
font-weight: 700;
background: #FDECEC;
color: #EF4444;
position: absolute;
left: 0;
top: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #EAF7C8;
color: var(--lime);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}


/* Blog Section */
.blog-main {
background: var(--white-color);
padding: var(--padding) 0;
}

.blog-header-flex {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
}

.blog-btn {
font-size: 12px;
padding: 18px 40px;
font-weight: 600;
font-family: Inter, Arial, Helvetica, sans-serif;
text-transform: uppercase;
background-color: var(--cyan);
border-radius: 10px;
display: inline-block;
}

.blog-btn a {
color: var(--white-color);
}

.blog-content-flex {
display: flex;
}

.blog-content-block-info {
background-color: #F0F7F3;

padding: 15px 30px;
padding-top: 28px;
padding-bottom: 40px;
}

.blog-content-block-img img {
width: 100%;
border-radius: 5px 5px 0px 0px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.blog-content-block:hover .blog-content-block-img img {
-webkit-transform: scale(1.05) translateX(2%);
-ms-transform: scale(1.05) translateX(2%);
transform: scale(1.05) translateX(2%);
}

.blog-content-block-img {
cursor: pointer;
overflow: hidden;
}

.blog-content-block {
overflow: hidden;
}

.winning_info {
display: flex;
align-items: center;
}

.winning_info p {
color: #a9b5c9;
font-weight: 600;
font-size: 15px;
}

p.l_name {
padding-left: 40px;
position: relative;
}

p.l_name:after {
position: absolute;
content: ' ';
width: 5px;
height: 5px;
background-color: #00dbb0;
left: 19px;
top: 9px;
border-radius: 50%;
}



.blog-content-block-info h3 {
color: var(--dark-blue);
line-height: 1.4em;
padding: 9px 0;
cursor: pointer;
}

.blog-content-block {
width: 33.33%;
padding: 0px 15px;
margin-bottom: 30px;
}

.read-more-btn {
color: var(--cyan);
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
border-bottom: 1px solid var(--cyan);
margin-top: 10px;
display: inline-block;
}

/* HOME CTA */
.home-cta-main {
background: #f4f8fb;
padding: var(--padding) 0;
}

.home-cta-main .container-main {
border-radius: 24px;
text-align: center;
position: relative;
overflow: hidden;
}



.home-cta-main-head,
.home-cta-btn {
position: relative;
z-index: 2;
}



.home-cta-main .section-heading h2 {
color: var(--dark-blue);
max-width: 900px;
margin: 0 auto 24px;
font-size: 42px;
line-height: 1.1;
}



.home-cta-main .section-desc p {
max-width: 720px;
margin: 0 auto;
color: var(--dark-blue);
font-size: 16px;
line-height: 1.7;
}


.home-cta-btn {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
}



.home-cta-btn .btn-secondary {
font-family: var(--font-body);
background: transparent;
color: var(--dark-blue);
padding: 13px 28px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
border: 2px solid var(--dark-blue);
transition: all 0.3s;
cursor: pointer;
display: inline-block;
text-align: center;
width: fit-content;
}

.home-cta-btn .btn-secondary:hover {
background: var(--white-color);

border: 2px solid var(--lime);
}

.home-cta-btn-whatapp a {
font-family: var(--font-display);
color: var(--dark-blue);
}

.home-cta-btn-whatapp a:hover {
color: var(--lime);
}

.home-cta-btn-assurance-line p {
font-family: var(--font-display);
}

.home-cta-btn-whatapp {
padding: 20px 0;
}



/*  who-we-work-with */
.who-we-work-with-main {
padding: var(--padding) 0;
background: var(--white-color);
}

.who-we-work-with-flex {
display: flex;
justify-content: center;
gap: 40px;

}

.who-we-work-with-flex-left,
.who-we-work-with-flex-right {
width: 50%;
}

.who-we-work-with-flex-card {
height: 100%;
padding: 35px;
background: #EEF2F6;
border-top: 2px solid var(--lime);
}

.who-we-work-with-flex-card-heading h3 {
color: var(--dark-blue);
margin-bottom: 15px;
}

.who-we-work-with-flex-card-desc p {
color: #5b6472;
}

.who-we-work-with-flex-card-points-head h4 {
margin-bottom: 10px;
}

.who-we-work-with-flex-card-points {
margin-top: 20px;
}

.who-we-work-with-flex-card-points ul {
list-style: none;
margin: 0;
padding: 0;
}

.who-we-work-with-flex-card-points ul li {
position: relative;
padding-left: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
margin-bottom: 12px;
line-height: 1.6;
}

.who-we-work-with-flex-card-points ul li::before {
content: "⬤︎";
position: absolute;
left: -12px;
top: -2px;
width: 30px;
height: 30px;
color: var(--lime);
border-radius: 50%;
display: flex;
font-weight: 700;
align-items: center;
justify-content: center;
font-size: 10px;
box-sizing: border-box;
}

/* WHY AGENCIES COME TO US */
.why-agencies-come-to-main {
padding: var(--padding) 0;
background: var(--light-gray);
}

.why-agencies-come-to-problem-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}



.why-agencies-come-to-problem-card {
background: rgba(0, 187, 238, 0.08);
padding: 20px;
border-radius: 18px;
border: 1px solid #E7ECF2;
transition: transform .45s cubic-bezier(.19, 1, .22, 1),
box-shadow .45s cubic-bezier(.19, 1, .22, 1);
}

.why-agencies-come-to-problem-card:hover {
transform: translateY(-18px);
box-shadow: 0 25px 50px rgba(31, 37, 49, .10);
}

.why-agencies-come-to-problem-card-top {
padding: 10px 0;
}

/* Icon Box */
.why-agencies-come-to-problem-card-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: #FFFFFF;
border: 1px solid rgba(0, 187, 238, .15);
display: flex;
align-items: center;
justify-content: center;
transition: .35s ease;
}
.why-agencies-come-to-problem-card-icon img{
  width: 50px;
height: 50px;
}

.why-agencies-come-to-problem-card-icon i {
color: var(--cyan) !important;
font-size: 26px;
transition: .35s ease;
}


.why-agencies-come-to-problem-card-content-head h3 {
color: var(--dark-blue);
font-size: 20px;
font-weight: 700;
line-height: 1.4;
transition: .35s ease;
}


.why-agencies-come-to-problem-card-content-desc p {
color: #4B5563;
line-height: 1.8;
}




/* THE PROCESS */
.the-process-main {
background: var(--white-color);
padding-bottom:80px;
}

.the-process-main-block {
text-align: center;
}

.the-process-main-tab-nav {
display: flex;
justify-content: center;
gap: 20px;
list-style: none;
padding: 0;
margin: 50px 0;
}

.the-process-main-tab-nav li {
padding: 18px 35px;
background: #eaf2ff;
cursor: pointer;
transition: .3s;
}

.the-process-main-tab-nav li.current {
background: #081d3b;
color: #fff;
}

.tab-content {
display: none;
max-width: 900px;
margin: auto;
text-align: center;
min-height: 220px;
}

.tab-content h3 {
font-size: 24px;
line-height: 1.25;
margin-bottom: 18px;
color: rgb(17, 17, 17);
}

.tab-content p {
font-size: 20px;
line-height: 1.65;
color: #555;
}

.tab-content.current {
display: block;
}

.the-process-main-tabs {
padding-bottom: 20px;
}

.the-process-main-btn {
display: flex;
justify-content: center;
}

/* TECHNOLOGY STACK */
.technology-stack-main {
background: #f4f8fb;
padding: var(--padding) 0;
}

.technology-stack-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 35px;
}

.technology-stack-card {
position: relative;
background: #fff;
border-radius: 18px;
padding: 30px;
overflow: hidden;
border: 1px solid #E6EAF0;
transition: transform .45s cubic-bezier(.19, 1, .22, 1);
height:100%;
}

/* Cyan glow - top left */
.technology-stack-card::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(0, 187, 238, .08);
top: -90px;
left: -90px;
transform: scale(0);
transition: transform .45s ease;
}

/* Lime glow - bottom right */
.technology-stack-card::after {
content: "";
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(151, 203, 6, .10);
bottom: -80px;
right: -80px;
transform: scale(0);
transition: transform .45s ease;
}

.technology-stack-card-head,
.technology-stack-card-desc {
position: relative;
z-index: 2;
transition: transform .45s cubic-bezier(.19, 1, .22, 1);
}

.technology-stack-card-head h4 {
font-family: 'Sora', sans-serif;
color: var(--dark-blue);
font-size: 16px;
margin-bottom: 10px;
font-weight: 600;
}

.technology-stack-card-desc p {
color: var(--dark-blue);
font-size: 14px;
}

.technology-stack-card:hover {
transform: translateY(-18px);
}

.technology-stack-card:hover::before,
.technology-stack-card:hover::after {
transform: scale(1);
}

.technology-stack-card:hover .technology-stack-card-head {
transform: translateY(-8px);
}

.technology-stack-card:hover .technology-stack-card-desc {
transform: translateY(-5px);
}

.technology-stack-btn {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}

/* Trusted by Agencies Across */
.trusted-by-agencies-across-main {
background: var(--white-color);
padding-top:80px;
}

.trusted-by-agencies-across-flex {
display: flex;
gap: 40px;
justify-content: center;
padding-bottom: 20px ;
}



.trusted-by-agencies-across-flex-left,
.trusted-by-agencies-across-flex-right {
width: 50%;
}

.trusted-by-agencies-across-flex-right-badge .hero-badge {
display: flex;
gap: 10px;
}

.trusted-by-agencies-across-flex-right-head h3 {
padding: 10px 0;
}

.trusted-by-agencies-across-flex-right-desc p {
padding: 10px 0;
}

.trusted-by-agencies-across-flex-right-list-head h4 {
padding: 10px 0;
}


.trusted-by-agencies-across-flex-right-list ul li {
position: relative;
padding-left: 30px;
margin-bottom: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
line-height: 1.6;
}

.trusted-by-agencies-across-flex-right-list ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: var(--lime);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
box-sizing: border-box;
}

.trusted-by-agencies-across-flex-left-image img {
height: 550px;
border-radius: 20px;
}

/* Flex Revserve */

.trusted-by-agencies-across-flex-revserse {
display: flex;
gap: 40px;
justify-content: center;
padding: 80px 0;
}

.trusted-by-agencies-across-flex-left,
.trusted-by-agencies-across-flex-right {
width: 50%;
}

.trusted-by-agencies-across-flex-left-badge .hero-badge {
display: flex;
gap: 10px;
}


.trusted-by-agencies-across-flex-left-head h3 {
padding: 10px 0;
}

.trusted-by-agencies-across-flex-left-desc p {
padding: 10px 0;
}

.trusted-by-agencies-across-flex-left-list-head h4 {
padding: 10px 0;
}


.trusted-by-agencies-across-flex-left-list ul li {
position: relative;
padding-left: 30px;
margin-bottom: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
line-height: 1.6;
}

.trusted-by-agencies-across-flex-left-list ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: var(--lime);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
box-sizing: border-box;
}

.trusted-by-agencies-across-flex-right-image img {
height: 550px;
border-radius: 20px;
}
.trusted-by-agencies-across-confidential {
text-align: center;
}
.trusted-by-agencies-across-confidential p {
display: inline-block;
background: rgba(0, 187, 238, 0.1);
color: var(--cyan);
padding: 8px 16px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
border: 1px solid rgba(0, 187, 238, 0.2);
}













/* WHAT MAKES US DIFFERENT */
.what-makes-us-different-main {
background: var(--white-color);
padding: var(--padding) 0;
}

.what-makes-us-different-block .section-desc-black p {
max-width: 620px;
}

.what-makes-us-different-flex {
display: flex;
gap: 40px;
justify-content: center;
margin-top: 30px;
}

.what-makes-us-different-flex-left,
.what-makes-us-different-flex-right {
width: 50%;
}

.what-makes-us-different-card {
border: 1px solid rgba(0, 187, 238, 0.08);
padding: 35px;
background: #EEF2F6;
height: 100%;
}

.what-makes-us-different-card-head h3 {
color: var(--dark-blue);
margin-bottom: 15px;
}



.what-makes-us-different-card-desc p {
color: #5b6472;
}

.what-makes-us-different-card-points h4 {
margin: 15px 0;

}

.what-makes-us-different-card-points ul li {
position: relative;
padding-left: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
margin-bottom: 12px;
line-height: 1.6;
}

.what-makes-us-different-card-points ul li::before {
content: "➤";
position: absolute;
left: -12px;
top: -2px;
width: 30px;
height: 30px;
color: var(--lime);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
box-sizing: border-box;
}

.what-makes-us-different-card-highlight-box {
margin-top: 20px;
padding: 20px;
background: rgba(0, 187, 238, 0.08);
border-left: 5px solid var(--cyan);
border-radius: 12px;

}


.what-makes-us-different-card-highlight-box-head h4 {
color: var(--dark-blue);
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}


.what-makes-us-different-card-highlight-box-desc p {
color: #405064;
font-size: 15px;
line-height: 1.7;
}

/* OUR WORK */
.our-work-main {
background: #f4f8fb;
padding: var(--padding) 0;
}


.our-work-main-block {
margin: 0 auto;
text-align: center;
}

.our-work-main-contain-desc p {
color: var(--dark-blue);
}

.our-work-main-contain-link {
padding-top: 20px;
}


.our-work-main-contain-link span {
color: var(--dark-blue);
}


/* The Right Partnership */
.the-right-partnership-main {
    background: var(--light-gray);
    padding: var(--padding) 0;
}

.the-right-partnership-flex {
display: flex;
gap: 40px;
justify-content: center;
}

.the-right-partnership-flex-left {
background: #F2FBF6;
}

.the-right-partnership-flex-left,
.the-right-partnership-flex-right {
padding: 35px;
width: 50%;
}

.the-right-partnership-flex-right {
background: #FFF5F5;
}

.the-right-partnership-flex-left-head,
.the-right-partnership-flex-right-head {
margin: 15px 0;
}

.the-right-partnership-flex-left-list ul li {
position: relative;
padding-left: 30px;
margin-bottom: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
line-height: 1.6;
}

.the-right-partnership-flex-left-list ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: var(--lime);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
box-sizing: border-box;
}

.the-right-partnership-flex-right-list ul li {
position: relative;
padding-left: 30px;
margin-bottom: 18px;
font-family: var(--font-body);
font-size: 16px;
color: var(--dark-blue);
line-height: 1.6;
}

.the-right-partnership-flex-right-list ul li::before {
content: "\f00d";
font-family: "Font Awesome 6 Free";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
color: red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
box-sizing: border-box;
}

/* footer */
.footer-main {
background: var(--dark-blue);
padding-top: 80px;
}

.footer-wrapper {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
gap: 50px;
padding-bottom: 60px;
border-bottom: 1px solid #dcdcdc;
}

.footer-logo {
margin-bottom: 25px;
}

.footer-logo img {
max-width: 180px;
}

.footer-logo a {
color: var(--white-color);
font-weight: 700;
font-size: 32px;
line-height: 40px;
text-transform: uppercase;
}

.footer-logo-desc span {

color: var(--white-color);
}

.footer-about p {
font-size: 16px;
line-height: 1.9;
color: var(--white-color);
margin-bottom: 30px;
}

.footer-social-media {
display: flex;
align-items: center;
gap: 14px;
margin-top: 25px;
}

.footer-social-media a {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--cyan);
font-size: 16px;
text-decoration: none;
transition: 0.4s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.footer-social-media a:hover {
background: var(--cyan);
color: var(--white-color);
transform: translateY(-5px);
}

.footer-links h3,
.footer-contact h3 {
font-size: 24px;
margin-bottom: 28px;
color: var(--white-color);
}

.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-links ul li {
margin-bottom: 16px;
}

.footer-links ul li a {
text-decoration: none;
color: var(--white-color);
font-size: 16px;
transition: 0.3s ease;
}

.footer-links ul li a:hover {
color: var(--cyan);
padding-left: 5px;
}

.footer-contact-item a:hover {
color: var(--cyan);
padding-left: 5px;
}

.footer-contact-info {
display: flex;
flex-direction: column;
gap: 22px;
}

.footer-contact-item {
display: flex;
gap: 16px;
align-items: center;
}

.footer-contact-info .footer-contact-item:first-child {
align-items: flex-start;
}

.footer-contact-item i {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--white-color);
color: var(--dark-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}

.footer-contact-item span {
font-size: 16px;
line-height: 1.7;
color: var(--white-color);
font-weight: 500;
}

.footer-bottom {
padding: 28px 0;
display: flex;
justify-content: space-between;


}

.footer-bottom a {
color: var(--white-color);
font-weight: 600;
}

.footer-bottom p {
font-size: 16px;
color: var(--white-color);
}

.footer-contact-item a {
font-size: 16px;
font-weight: 500;
line-height: 1.7;
color: var(--white-color);
text-decoration: none;
transition: 0.3s ease;
}

.footer-contact-item p {
font-size: 16px;
font-weight: 500;
line-height: 1.7;
color: var(--white-color);
text-decoration: none;
transition: 0.3s ease;
}

.footer-contact-item a:hover {
color: var(--cyan);
}









/* How it works Page*/
.how-it-works-banner {
padding: var(--padding) 0;
background: radial-gradient(circle at 70% 80%,
  rgb(76 189 223 / 33%) 0%,
  rgb(243 243 243) 85%);
}


.how-it-works-contain-flex {
display: flex;
gap: 40px;
justify-content: center;
align-items: center;
}

.how-it-works-contain-head h1 {
color: #1f2531;
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
}

.how-it-works-contain-flex-left,
.how-it-works-contain-flex-right {
width: 50%;
}

.how-it-works-contain-flex-right .contact-page-form {
background: var(--light-gray);
padding:25px;
}
.how-it-works-contain-flex-right .contact-page-form h3{
margin-bottom:15px;
}
.how-it-works-contain-flex-left .home-banner-content-btns {
justify-content: left;
}


/* The Difference  */
.the-difference-main {
background: var(--light-gray);
padding: var(--padding) 0;
}

.the-difference-flex {
display: flex;
gap: 30px;
justify-content: center;
}

.difference-card {
flex: 1;
border: 1px solid #ececec;
border-radius: 14px;
padding: 35px;
background: #fff;
}

.difference-card.active {
border: 2px solid #00AEEF;
box-shadow: 0 8px 24px rgba(0, 187, 238, 0.15);
}

.difference-card h4 {
margin: 0 0 25px;
font-size: 28px;
font-weight: 700;
color: #1f2d3d;
}

.difference-list {
list-style: none;
margin: 0;
padding: 0;
}

.difference-list li {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid #eee;
color: #4a4a4a;
font-size: 18px;
line-height: 1.5;
}

.difference-list li:last-child {
border-bottom: none;
}



.negative li::before {
content: "✕";
color: #c9c9c9;
font-size: 18px;
font-weight: bold;
flex-shrink: 0;
}


.positive li::before {
content: "✓";
color: #8bc34a;
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}


/* FAQ SECTION */
.faq-section-main {
background: var(--white-color);
padding: var(--padding) 0;
}



.faq-item {
background: var(--light-gray);
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
}

.faq-question {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
color: var(--dark-blue);
transition: all 0.3s ease;
background: var(--light-gray);
}

.faq-icon {
color: var(--cyan);
font-size: 20px;
transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
transform: rotate(180deg);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: rgba(0, 187, 238, 0.08);
}

.faq-item.open .faq-answer {
max-height: 500px;
}

.faq-answer-content p {
padding: 20px;
color: var(--dark-blue);
font-size: 15px;
line-height: 1.7;
}



/* What we Build Page */


/*  For DESIGNERS SECTION Non Reverse */

.for-designers-main {
background: var(--white-color);
padding: var(--padding) 0;

}


.for-designers-flex {
display: flex;
gap: 40px;
}

.for-designers-flex-left,
.for-designers-flex-right {
width: 50%;

}


.for-designers-flex-left-content p {
margin-bottom: 30px;
font-size: 16px;
line-height: 1.8;
color: var(--dark-blue);
}


.for-designers-highlight-box {
background: rgba(0, 187, 238, 0.1);
border-left: 3px solid var(--cyan);
padding: 24px;
border-radius: 8px;
margin-bottom: 30px;
}

.for-designers-highlight-box p {
font-size: 15px;
line-height: 1.8;
color: var(--dark-blue);
margin-bottom: 12px;
}

.for-designers-highlight-box p:last-child {
margin-bottom: 0;
}

.for-designers-highlight-box strong {
color: var(--lime);
font-weight: 600;
}

.for-designers-flex-right-image img {
width: 100%;
max-width: 550px;
display: block;
object-fit: contain;
height: 550px;
}

/*   For DESIGNERS SECTION Reverse */

.for-designers-flex-reverse {
display: flex;
gap: 40px;
}

.for-designers-flex-left,
.for-designers-flex-right {
width: 50%;

}

.for-designers-flex-left-image img {
width: 100%;
max-width: 550px;
display: block;
object-fit: contain;
height: 550px;
}


.for-designers-flex-right-content p {
margin-bottom: 30px;
font-size: 16px;
line-height: 1.8;
color: var(--dark-blue);
}


.for-designers-highlight-box {
background: rgba(0, 187, 238, 0.1);
border-left: 3px solid var(--cyan);
padding: 24px;
border-radius: 8px;
margin-bottom: 30px;
}

.for-designers-highlight-box p {
font-size: 15px;
line-height: 1.8;
color: var(--dark-blue);
margin-bottom: 12px;
}

.for-designers-highlight-box p:last-child {
margin-bottom: 0;
}

.for-designers-highlight-box strong {
color: var(--lime);
font-weight: 600;
}








/* Our Work Page */


/* PORTFOLIO SECTION */
.portfolio-main {
background: var(--white-color);
padding: var(--padding) 0;
}

.portfolio-main-block {
text-align: center;
margin-bottom: 60px;
}

.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.portfolio-card {
background: var(--white-color);
border: 1px solid var(--light-gray);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.portfolio-card:hover {
border-color: var(--cyan);
box-shadow: 0 12px 32px rgba(0, 187, 238, 0.15);
transform: translateY(-8px);
}

.portfolio-image {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--light-gray);
}

.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-image img {
transform: scale(1.05);
}

.portfolio-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(31, 37, 49, 0.9);
color: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
text-decoration: none;
opacity: 0;
transition: opacity 0.3s ease;
font-size: 16px;
}

.portfolio-card:hover .portfolio-link {
opacity: 1;
}

.portfolio-content {
padding: 28px;
}

.portfolio-content-head h3 {
font-size: 20px;
font-weight: 600;
color: var(--dark-blue);
margin-bottom: 12px;
font-family: var(--font-display);
}

.portfolio-content-description p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}

.portfolio-meta-info {
display: flex;
flex-direction: column;
gap: 12px;
}

.portfolio-category h4 {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: var(--cyan);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.portfolio-tech {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.portfolio-tech span {
display: inline-block;
background: var(--light-gray);
color: var(--dark-blue);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
}

.portfolio-card:hover .portfolio-tech span {
background: rgba(0, 187, 238, 0.2);
color: var(--dark-blue);
}

/* Portfolio Stats */
.portfolio-stats-main {
background: var(--light-gray);
padding: var(--padding) 0;
}


/* Why Us Page */

/* Who we best */
.who-we-best-main {
padding: var(--padding) 0;
background: var(--white-color);
}

.who-we-best-main-flex {
display: flex;
gap: 40px;
}

.who-we-best-main-flex-left,
.who-we-best-main-flex-right {
width: 50%;
}


.who-we-best-main-card {
border: 1px solid #666;
border-radius: 14px;
padding: 35px;
background: rgba(0, 187, 238, 0.08);
height: 100%;
}

.who-we-best-main-card h4 {
margin: 0 0 25px;
font-size: 28px;
font-weight: 700;
color: #1f2d3d;
}

.who-we-best-main-card ul li {
display: flex;
color: rgb(74, 74, 74);
font-size: 18px;
line-height: 1.5;
gap: 14px;
padding: 18px 0px;
border-bottom: 1px solid rgb(238, 238, 238);
}

.who-we-best-main-card ul li::before {
content: "✓";
color: rgb(139, 195, 74);
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}

.who-we-best-main-card-points-crosss ul li {
display: flex;

color: rgb(74, 74, 74);
font-size: 18px;
line-height: 1.5;
gap: 14px;
padding: 18px 0px;
border-bottom: 1px solid rgb(238, 238, 238);
}

.who-we-best-main-card-points-crosss ul li::before {
content: "✖";
color: rgb(139, 195, 74);
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}

/* Contact Page */
.contact-page-main {
padding: var(--padding) 0;
background: var(--white-color);
}

.contact-page-flex {
display: flex;
gap: 40px;
}

.contact-page-flex-left,
.contact-page-flex-right {
width: 50%;
}

.contact-info-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.contact-info-item {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
background: var(--light-gray);
border-radius: 20px;
transition: all 0.3s ease;
}

.contact-info-item:hover {
background: #f0f2f8;
transform: translateX(5px);
}

.contact-icon {
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.contact-icon i {
color: var(--cyan);
font-size: 24px;
}

.contact-info-item h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: var(--dark-blue);
}

.contact-info-item p {
color: #666;
font-size: 14px;
line-height: 1.6;
margin: 0;
}

.contact-info-item a {
color: var(--cyan);
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: color 0.3s ease;
}

.contact-info-item a:hover {
color: var(--lime);
}

.contact-info-list,
.contact-page-form {
width: 100%;
height: 100%;
}

/* Contact Form Section */
.contact-page-form {
background: linear-gradient(135deg, rgba(0, 187, 238, 0.08), rgba(151, 203, 6, 0.05));
padding: 45px;
border-radius: 30px;

border: 2px solid rgba(0, 187, 238, 0.1);
}

.contact-page-form h3 {
color: var(--dark-blue);
font-size: 32px;
font-weight: 700;
margin-bottom: 30px;
background: linear-gradient(135deg, var(--dark-blue), var(--cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.form-group {
margin-bottom: 18px;
}

.half-width {
display: flex;
justify-content: space-between;
gap: 15px;
}

.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
border: 2px solid rgba(0, 187, 238, 0.2);
outline: none;
background: var(--white-color);
padding: 14px 18px;
border-radius: 12px;
color: var(--dark-blue);
font-family: inherit;
font-size: 14px;
transition: all 0.3s ease;
cursor: pointer;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #999;
}

.form-group select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300bbee' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}

.form-group select option {
color: var(--dark-blue);
background: var(--white-color);
padding: 10px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--cyan);
background: rgba(0, 187, 238, 0.02);
box-shadow: 0 0 0 3px rgba(0, 187, 238, 0.1);
}

.form-group textarea {
resize: vertical;
min-height: 120px;
}

.contact-page-form input[type="submit"] {
width: 100%;
padding: 14px 30px;
background: var(--dark-blue);
color: var(--white-color);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
transition: all 0.3s ease;
}

/* Zero Risk Offer Reminder */
.zero-risk-offer {
background: linear-gradient(135deg, var(--dark-blue), rgba(31, 37, 49, 0.95));
padding: 20px 0;
margin-top: 25px;
border-radius: 16px;
border-left: 4px solid var(--lime);
box-shadow: 0 4px 15px rgba(0, 187, 238, 0.1);
}

.zero-risk-content {
padding: 15px 25px;
}

.zero-risk-content p {
color: var(--white-color);
font-size: 14px;
line-height: 1.6;
margin: 0;
}



.zero-risk-content .highlight {
color: var(--lime);
font-weight: 600;
}


/* service detail page */

.service-detail-page-hero-main {
padding: var(--padding) 0px;
}

.service-detail-page-hero-flex {
display: flex;
gap: 40px;
justify-content: center;
align-items: center;
}
.service-detail-page-hero-flex.reverse{
flex-direction: row-reverse;
}

.service-detail-page-hero-left,
.service-detail-page-hero-right {
width: 50%;
}

.service-detail-page-hero-left-img img {
height: 520px;
border-radius: 20px;
}

.service-detail-page-hero-right-heading h2 {
font-family: var(--font-display);
font-size: 42px;
line-height: 1.2;
    text-transform: uppercase;
font-weight: 600;
color: var(--dark-blue);
}

.service-detail-page-hero-right-heading h2 span {
color: var(--cyan);
}

.service-detail-page-hero-right-desc p {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.8;
color: var(--dark-blue);
padding-top: 12px;
}

.service-detail-page-hero-main .home-banner-content-btn {
padding-top: 16px;
}



.service-detail-wp-custom {
background: #fff;
padding: var(--padding) 0px;
}

.service-detail-section-heading {
max-width: 850px;
margin: 0 auto;
}

.service-detail-section-heading .section-heading-black h2 {
text-align: center;
}

.service-detail-section-heading .hero-badge span {
margin: 0 auto;
text-align: center;
width: max-content;
display: flex;
}

.service-detail-page-custom-content {
text-align: center;

}


.service-detail-page-custom-grid {
display: grid;
grid-template-columns: 1fr;
gap: 70px;
align-items: center;
}

.service-detail-page-custom-content p {
font-size: 16px;
line-height: 1.8;
color: var(--dark-blue);
margin-bottom: 16px;
}

.service-detail-page-comparison {
display: flex;
gap: 25px;
}

.service-detail-page-compare-card {
padding: 40px;
border-radius: 20px;
background: #fff;
box-shadow: 0 25px 70px rgba(0, 0, 0, .1);
width: 100%;
}

.service-detail-page-compare-card h3 {
margin-bottom: 25px;
}

.service-detail-page-compare-card ul {
display: flex;
flex-direction: column;
gap: 16px;
}

.service-detail-page-compare-card li {
list-style: none;
}

.bad {
border-left: 6px solid var(--cyan);
}

.good {
border-left: 6px solid var(--lime);
}

.service-detail-page-how-we-work,
.service-detail-page-post-launch-support {
padding: var(--padding) 0;
background: #fff;
}

.service-detail-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 70px;
align-items: center;
}

.service-detail-grid.reverse {
grid-template-columns: .9fr 1.1fr;
}

.service-label {
display: inline-block;
padding: 10px 18px;
background: rgba(0, 187, 238, .08);
color: var(--cyan);
border-radius: 100px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}

.service-detail-content h2 {
font-family: var(--font-display);
font-size: 52px;
line-height: 1.15;
color: var(--dark-blue);
margin-bottom: 24px;
    text-transform: uppercase;
}

.service-detail-content p {
font-size: 18px;
line-height: 1.9;
color: #667085;
margin-bottom: 30px;
}

.service-detail-content ul {
display: flex;
flex-direction: column;
gap: 10px;
}

.service-detail-content li {
list-style: none;
position: relative;
padding-left: 34px;
font-size: 16px;
color: var(--dark-blue);
line-height: 1.8;
}

.service-detail-block h2{
       margin-bottom:24px; 
}
.service-detail-block p{
       margin-bottom:24px; 
}
.service-detail-content li::before {
content: "✓";
position: absolute;
left: 0;
top: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--lime);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}

.service-detail-card {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

.mini-card,
.support-item {
background: #fff;
border: 1px solid #E8EDF2;
border-radius: 22px;
padding: 28px;
transition: .35s;
}

.mini-card:hover,
.support-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(31, 37, 49, .08);
border-color: var(--cyan);
}

.mini-card h3 {
font-size: 28px;
color: var(--cyan);
margin-bottom: 10px;
font-weight: 600;
}

.mini-card p,
.support-item {
font-size: 16px;
color: var(--dark-blue);
font-weight: 500;
}

.support-item {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
text-align: center;
}



/*=========================================
BLOG GRID
=========================================*/

.blog-page-grid-main {
padding: var(--padding) 0;
}

.blog-page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}

/*=========================================
BLOG CARD
=========================================*/

.blog-page-block {
background: var(--white-color);
border: 1px solid #ECEFF3;
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all .35s ease;
height: 100%;
}

.blog-page-block:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(31, 37, 49, 0.08);
border-color: rgba(0, 187, 238, 0.2);
}

/*=========================================
IMAGE
=========================================*/

.blog-page-block-img {
overflow: hidden;
}

.blog-page-block-img img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
transition: transform .5s ease;
}

.blog-page-block:hover .blog-page-block-img img {
transform: scale(1.05);
}

.blog-page-block-heading,
.blog-page-small-desc,
.blog-read-more {
padding-inline: 28px;
}

.blog-page-block-heading {
padding-top: 28px;
}

.blog-page-block-heading h2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.35;
color: var(--dark-blue);
}

.blog-page-small-desc {
padding-top: 18px;
flex: 1;
}

.blog-page-small-desc p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
color: #667085;
}

.blog-read-more {
padding-top: 20px;
padding-bottom: 25px;
}

.blog-read-more a {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--cyan);
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
transition: all .3s ease;
}

.blog-read-more a i {
font-size: 14px;
transition: transform .3s ease;
}

.blog-read-more a:hover {
color: var(--lime);
}

.blog-read-more a:hover i {
transform: translateX(6px);
}

/*=========================================
BLOG DETAIL
=========================================*/

.blog-detail-section {
padding: var(--padding) 0;
background: #fff;
}

.blog-detail {
max-width: 900px;
margin: 0 auto;
font-family: var(--font-body);
color: var(--dark-blue);
}


.blog-detail h2,
.blog-detail h3,
.blog-detail h4,
.blog-detail h5,
.blog-detail h6 {
font-family: var(--font-display);
font-weight: 600;
color: var(--dark-blue);
line-height: 1.3;
margin-top: 55px;
margin-bottom: 20px;
}

.blog-detail h2 {
font-size: 42px;
}

.blog-detail h3 {
font-size: 32px;
}

.blog-detail h4 {
font-size: 26px;
}

.blog-detail h5 {
font-size: 22px;
}

.blog-detail h6 {
font-size: 20px;
}


.blog-detail p {
font-size: 18px;
line-height: 1.9;
color: #5E6875;
margin-bottom: 22px;
}



.blog-detail a {
color: var(--cyan);
text-decoration: none;
transition: .3s;
}

.blog-detail a:hover {
color: var(--lime);
}



.blog-detail ul,
.blog-detail ol {
margin: 25px 0;
padding-left: 28px;
}

.blog-detail ul li,
.blog-detail ol li {
font-size: 18px;
line-height: 1.9;
color: #5E6875;
margin-bottom: 12px;
}

.blog-detail ul li {
list-style-type: disc;
}

.blog-detail ol li {
list-style-type: decimal;
}

.blog-detail ul li::marker {
color: var(--cyan);
}

.blog-detail ol li::marker {
color: var(--cyan);
font-weight: 600;
}



.blog-detail blockquote {
margin: 45px 0;
padding: 35px;
border-left: 5px solid var(--cyan);
background: var(--light-gray);
border-radius: 16px;
}

.blog-detail blockquote p {
margin: 0;
font-size: 22px;
line-height: 1.8;
color: var(--dark-blue);
font-style: italic;
}


.blog-detail img {
width: 100%;
display: block;
border-radius: 20px;
margin: 40px 0;
}


.blog-detail table {
width: 100%;
border-collapse: collapse;
margin: 40px 0;
}

.blog-detail th,
.blog-detail td {
border: 1px solid #E7EAF0;
padding: 16px 20px;
text-align: left;
}

.blog-detail th {
background: var(--light-gray);
color: var(--dark-blue);
font-weight: 600;
}

.blog-detail td {
color: #5E6875;
}


.blog-detail hr {
border: none;
height: 1px;
background: #E8EBEF;
margin: 60px 0;
}



.blog-detail strong {
color: var(--dark-blue);
font-weight: 600;
}

.blog-detail em {
font-style: italic;
}


.blog-detail code {
background: #F3F5F8;
padding: 3px 8px;
border-radius: 6px;
font-size: 16px;
}

.blog-detail pre {
background: var(--dark-blue);
color: #fff;
padding: 24px;
border-radius: 16px;
overflow-x: auto;
margin: 35px 0;
}

.blog-detail pre code {
background: transparent;
color: inherit;
padding: 0;
}


/* 27-07-2026*/

/* Meet The Founder */
.meet-the-founder-main {
background: var(--white-color);
padding: var(--padding) 0;
}

.meet-the-founder-flex {
display: flex;
gap: 40px;
justify-content: center;

}

.meet-the-founder-flex-left,
.meet-the-founder-flex-right {
width: 50%;
}

.meet-the-founder-flex-left-image {
height: 550px;
}

.meet-the-founder-flex-left-image img {
border-radius: 4px;
}

.meet-the-founder-flex-right-head h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}

.meet-the-founder-flex-right-desc p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 15px;
}

.linkedin-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background-color: #0A66C2;
color: #ffffff;
text-decoration: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
transition: background-color 0.2s ease;
border: none;
cursor: pointer;
}

.linkedin-btn:hover {
color: var(--white-color);
background-color: #004399;
}

.meet-the-founder-flex-right-linkedin {
margin-bottom: 20px;
}

.founder-stats {
display: flex;
align-items: center;
gap: 24px;
color: #000;
font-weight: 500;
font-size: 16px;
}

.founder-stats-item {
display: flex;
align-items: center;
}


/* What Happens After   */
.what-happen-after-main {
padding: var(--padding) 0;
background: var(--white-color);
}

.what-happen-after-content {
background: var(--light-gray);
padding: 40px;
border-radius: 12px;
}

.what-happen-after-content-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}

.what-happen-after-content-card {
background: var(--white-color);
padding: 30px;
border-radius: 8px;
border-left: 4px solid var(--cyan);
}

.what-happen-after-content-title h3 {
display: block;
color: var(--cyan);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
}

.what-happen-after-content-desc p {
font-size: 16px;
color: #555;
}

.what-happen-after-content-highlight {
background-color: #fffbf0;
border-left: 4px solid var(--lime);
padding: 25px;
margin-top: 30px;
border-radius: 8px;
}

.what-happen-after-content-highlight p {
color: var(--dark-blue);
font-size: 16px;
font-weight: 500;
}

/* HOW REVISIONS WORK */
.how-revisions-work-main {
padding: var(--padding) 0;
background: rgba(0, 187, 238, 0.1);
}

.how-revisions-work-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;

}

.how-revisions-work-card {
background: var(--white-color);
padding: 30px;
border-radius: 8px;
border: 1px solid #e0e0e0;

}

.how-revisions-work-card h3 {
font-size: 20px;
font-weight: 700;
}

.how-revisions-work-desc p {
margin-bottom: 20px;
color: var(--dark-blue)
}

/*  TIME ZONES ARE NOT A PROBLEM */
.time-zone-are-main {
padding: var(--padding) 0;
background: var(--light-gray);
}

.time-zone-are-block {
text-align: center;
}

.time-zone-are-table-main {
margin-top: 50px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(31, 37, 49, 0.1);
box-shadow: 0 20px 50px rgba(31, 37, 49, 0.08);
}

.time-zone-are-table {
width: 100%;
border-collapse: collapse;
}

.time-zone-are-table th {
background: var(--dark-blue);
color: var(--white-color);
padding: 20px 24px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
text-align: left;
letter-spacing: 0.5px;
}

.time-zone-are-table td {
padding: 20px 24px;
font-size: 16px;
line-height: 1.7;
color: var(--dark-blue);
background: var(--white-color);
border-bottom: 1px solid #edf2f7;
transition: .35s;
}

.time-zone-are-table tbody td:first-child {
width: 20%;
font-weight: 700;
color: var(--dark-blue);
}

.time-zone-are-table tbody tr:last-child td {
border-bottom: none;
}

.time-zone-are-table tbody tr:hover td {
background: rgba(0, 187, 238, .06);
}

.time-zone-are-table tbody tr:hover td:first-child {
color: var(--cyan);
}

/* STARTING IS SIMPLER THAN YOU THINK */
.starting-is-simple-main {
padding: var(--padding) 0;
background: rgba(0, 187, 238, 0.1);
}

.starting-is-simple-step-list {
margin-bottom: 40px;
}

.starting-is-simple-step-list-item {
display: flex;
align-self: center;
gap: 30px;
margin-bottom: 30px;
padding: 20px;
background-color: var(--white-color);
border-radius: 8px;
}

.starting-is-simple-step-list-item-number span {
font-size: 24px;
font-weight: 700;
color: var(--cyan);
flex-shrink: 0;
min-width: 40px;
}

.starting-is-simple-step-list-item-content {
flex: 1;
align-content: center;
}

.starting-is-simple-step-list-item-content h4 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--dark-blue);
margin: 0;
}

.starting-is-simple-desc p {
font-size: 16px;
line-height: 1.8;
margin-bottom: 20px;
color: var(--dark-blue);
}

.starting-is-simple-desc p span {
font-weight: 700;
}
.wpcf7-form-control-wrap textarea {
height: auto !important;
min-height: auto !important;
rows: 2;
}



/* 28-07-26 */
/* Personal Commitment */
.personal-commitment-main {
padding: var(--padding) 0;
background: var(--light-gray);
}


/* White-Label Partnerships  */
.white-label-partnerships-main {
padding: var(--padding) 0;
}

.white-label-partnerships-flex {
display: flex;
gap: 40px;
justify-content: center;
}

.white-label-partnerships-flex-left,
.white-label-partnerships-flex-right {
width: 50%;
}

.white-label-partnerships-flex-left-content p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 15px;
}

.white-label-partnerships-flex-left-content-highlight-box {
background: var(--light-gray);
padding: 24px;
border-radius: 8px;
border-left: 4px solid var(--lime);
margin: 32px 0;
color: var(--dark-blue);
font-size: 15px;
line-height: 1.7;

}


.white-label-partnerships-flex-right-milestones h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: var(--dark-blue);
}

.white-label-partnerships-flex-right-milestones-item {
display: flex;
align-items: center;
gap: 20px;
padding: 16px 0;
border-bottom: 1px solid rgba(31, 37, 49, 0.1);
}

.white-label-partnerships-flex-right-milestones-item:last-child {
border-bottom: none;
}

.white-label-partnerships-flex-right-milestones-item-icon img {
width: 20px;
height: 20px;
}


.white-label-partnerships-flex-right-milestones-content {
flex: 1;
}

.white-label-partnerships-flex-right-milestones-year h4 {
font-family: var(--font-display);
font-weight: 600;
color: var(--dark-blue);
font-size: 15px;
}

.white-label-partnerships-flex-right-milestones-desc p {
font-size: 16px;
color: var(--dark-blue);
margin-top: 4px;
line-height: 1.6;
}

.white-label-partnerships-flex-right-milestones-note p {
margin-top: 24px;
font-size: 15px;
color: var(--dark-blue);
line-height: 1.7;
}

/* Our Commitment */
.our-commitment-main {
padding: var(--padding) 0;
background: rgba(0, 187, 238, 0.08);
}

.our-commitment-block {
text-align: center;
}


.our-commitments-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 40px;
}

.our-commitment-card {
display: flex;
gap: 20px;
padding: 24px;
background: var(--light-gray);
border-radius: 8px;
border-left: 4px solid var(--cyan);
transition: all 0.2s ease;
}

.our-commitment-card:hover {
box-shadow: 0 4px 16px rgba(0, 187, 238, 0.1);
transform: translateY(-2px);
}

.our-commitment-number span {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--cyan);
flex-shrink: 0;
min-width: 40px;
}

.our-commitment-content-head h3 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--dark-blue);
margin-bottom: 8px;
}

.our-commitment-content-desc p {
font-size: 14px;
color: rgba(31, 37, 49, 0.8);
line-height: 1.7;
}

.our-commitment-rating-box {
background: var(--white-color);
border: 1px solid rgba(31, 37, 49, 0.15);
padding: 24px;
border-radius: 8px;
margin-top: 40px;
font-size: 14px;
color: var(--dark-blue);
line-height: 1.7;
}

.our-commitment-rating-box strong {
color: var(--dark-blue);
font-weight: 600;
}
.whatsapp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background-color: var(--lime);
color: #ffffff;
text-decoration: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
transition: background-color 0.2s ease;
border: none;
cursor: pointer;
}

.whatsapp-btn:hover {
color: var(--white-color);
background-color: #88B805;
}


.page-template-how-it-works .the-process-main{
        padding: 80px 0 !important;
}
.page-template-how-it-works .what-happen-after-main{
        padding-bottom: 80px !important;
        padding-top: 0px !important;
}


.page-template-what-we-build .for-designers-main{
    padding-bottom: 0px !important;
}
.page-template-what-we-build .home-cta-main{
    margin-top:40px;
}

.page-template-service-details .service-detail-wp-custom{
    padding-top: 0px !important;
}
.page-template-service-details .service-detail-page-how-we-work{
    padding-bottom: 0px !important;
}
.page-id-504 .home-cta-main{
    margin-top:40px;
}
.page-id-506 .home-cta-main{
    margin-top:40px;
}
.page-id-508 .home-cta-main{
    margin-top:40px;
}
.page-template-front-page .the-process-main{
        padding-top:80px; !important;
}
.page-template-front-page  .meet-the-founder-main{
    padding-bottom:0px; !important;
}