*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Outfit',sans-serif;
background:#071321;
overflow-x:hidden;

}

/* ========================================
GLOBAL HEADER & NAVIGATION
======================================== */

header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
padding:25px 7%;
background:rgba(7,19,33,.85);
backdrop-filter:blur(12px);
}

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

/* BRAND */

.zyncly-brand a{
text-decoration:none;
display:flex;
flex-direction:column;
align-items:flex-start;
}

.zyncly-brand h2{
color:white;
font-size:28px;
font-weight:700;
margin:0;
line-height:1;
}

.zyncly-brand h2 span{
color:#00c6ff;
}

.zyncly-brand p{
color:#00c6ff;
font-size:7px;
letter-spacing:3px;
text-transform:uppercase;
margin-top:4px;
margin-bottom:0;
}

/* NAV LINKS */

nav ul{
display:flex;
gap:45px;
list-style:none;
}

nav ul li a{
color:white;
text-decoration:none;
font-size:15px;
font-weight:300;
transition:.3s;
}

nav ul li a:hover,
nav ul li a.active{
color:#00c6ff;
}

/* BUTTON */

.button{
padding:15px 28px;
background:#00c6ff;
border-radius:40px;
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.button:hover{
transform:translateY(-3px);
}

header{

position:fixed;

width:100%;

z-index:999;

padding:25px 7%;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

}

nav ul{

display:flex;

gap:45px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:300;

font-size:15px;

transition:.3s;

}

nav ul li a:hover{

color:#00c6ff;

}

/* =========================================================
GLOBAL ZYNCLY HEADER BRAND
========================================================= */

.zyncly-brand {
display: flex;
align-items: flex-start;
}

.zyncly-brand a {
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
line-height: 1;
}


.zyncly-brand h2 {
margin: 0;
color: #ffffff;
font-family: 'Outfit', sans-serif;
font-size: 28px;
font-weight: 700;
}


.zyncly-brand h2 span {
color: #00c6ff;
}


.zyncly-brand p {
margin: 3px 0 0;
color: #00c6ff;
font-family: 'Outfit', sans-serif;
font-size: 7px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}

.zyncly-brand {
    display:block !important;
}

.zyncly-brand a {
    display:block !important;
}

.zyncly-brand h2 {
    display:block !important;
}

.zyncly-brand p {
    display:block !important;
    margin-top: 3px;
}

.button{

padding:15px 28px;

background:#00c6ff;

border-radius:40px;

cursor:pointer;

font-weight:600;

color:#fff;

transition:.4s;

}

.button:hover{

transform:translateY(-4px);

}

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

padding:0 8%;

}

.hero video{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

width:100%;
height:100%;

background:linear-gradient(

to right,

rgba(0,0,0,.70),

rgba(0,0,0,.30)

);

}

.hero-content{

position:relative;

z-index:2;

max-width:700px;

}

.hero-content p{

color:#00c6ff;

letter-spacing:4px;

margin-bottom:20px;

font-size:15px;

text-transform:uppercase;

}

.hero-content h1{

font-size:72px;

font-weight:300;

color:white;

line-height:1.1;

margin-bottom:40px;

}

.buttons{

display:flex;

gap:20px;

}

.btn-primary{

padding:18px 40px;

background:#00c6ff;

border-radius:50px;

color:white;

cursor:pointer;

transition:.3s;

}

.btn-secondary{

padding:18px 40px;

border:1px solid white;

border-radius:50px;

color:white;

cursor:pointer;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary:hover{

background:white;

color:black;

}

.scroll{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

color:white;

letter-spacing:8px;

font-size:13px;

z-index:3;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,10px);

}

}

@media(max-width:900px){

nav ul{

display:none;

}

.hero-content h1{

font-size:48px;

}

.buttons{

flex-direction:column;

}

}

/* ===========================
   SERVICES
=========================== */

.services{

    background:#081826;
    padding:120px 8%;

}

.section-title{

    text-align:center;
    margin-bottom:70px;

}

.section-title p{

    color:#00c6ff;
    letter-spacing:4px;
    font-size:14px;
    margin-bottom:15px;

}

.section-title h2{

    color:white;
    font-size:52px;
    font-weight:300;
    margin-bottom:20px;

}

.section-title span{

    color:#b8c5d1;
    max-width:700px;
    display:block;
    margin:auto;
    line-height:1.8;

}

.services-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;

}

.service-card{

position:relative;

padding:40px;

border-radius:24px;

background:#081826;

overflow:hidden;

transition:.5s;

}

.service-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:24px;

background:linear-gradient(
135deg,
#00C6FF,
transparent,
#00FFD5
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}

.service-card::after{

content:"";

position:absolute;

width:250px;

height:250px;

background:radial-gradient(

circle,

rgba(0,198,255,.35),

transparent 70%

);

top:-120px;

left:-120px;

opacity:0;

transition:.5s;

}

.service-card:hover::after{

opacity:1;

transform:translate(90px,90px);

}

.service-card:hover{

transform:

translateY(-15px)

scale(1.03);

box-shadow:

0 35px 70px rgba(0,198,255,.15);

}

.icon{

    font-size:42px;
    margin-bottom:25px;
    transition:.5s;

}

.service-card:hover .icon{

transform:

rotate(10deg)

scale(1.15);


}

.service-card h3{

    color:white;
    font-size:24px;
    margin-bottom:18px;

}

.service-card p{

    color:#c9d6df;
    line-height:1.8;

}

@media(max-width:768px){

.services{

padding:80px 20px;

}

.section-title h2{

font-size:36px;

}

.services-grid{

grid-template-columns:1fr;

gap:20px;

}

.service-card{

padding:30px;

}

}

/* =========================
PORTFOLIO
========================= */


.portfolio{

padding:120px 8%;

background:#071321;

}


/* FILTERS */


.filters{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:60px;

flex-wrap:wrap;

}


.filters button{

background:transparent;

border:1px solid rgba(255,255,255,.2);

color:white;

padding:12px 30px;

border-radius:50px;

cursor:pointer;

transition:.4s;

}


.filters button:hover,
.filters button.active{

background:#00c6ff;

border-color:#00c6ff;

}



/* GRID */


.portfolio-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:35px;

}



/* PROJECT CARD */


.project-card{

height:450px;

position:relative;

overflow:hidden;

border-radius:25px;

cursor:pointer;

}


.project-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.8s;

}



/* OVERLAY */


.project-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

to top,

rgba(0,0,0,.9),

transparent

);

display:flex;

align-items:flex-end;

padding:40px;

opacity:0;

transition:.5s;

}



.project-overlay p{

color:#00c6ff;

font-size:14px;

letter-spacing:2px;

margin-bottom:15px;

}



.project-overlay h3{

color:white;

font-size:32px;

font-weight:400;

margin-bottom:25px;

}



.project-overlay a{

color:white;

text-decoration:none;

border-bottom:1px solid #00c6ff;

padding-bottom:5px;

}



/* HOVER */


.project-card:hover img{

transform:scale(1.12);

}


.project-card:hover .project-overlay{

opacity:1;

}

.project-card{

animation:

portfolioReveal .8s ease forwards;

}


@keyframes portfolioReveal{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}

@media(max-width:768px){


.portfolio{

padding:80px 20px;

}


.portfolio-grid{

grid-template-columns:1fr;

}


.project-card{

height:350px;

}


.project-overlay{

opacity:1;

}


.project-overlay h3{

font-size:24px;

}


}

/* FOOTER */

.footer{
background:#0a0f1f;
padding:80px 10%;
border-top:1px solid rgba(255,255,255,.1);
}

.footer-container{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
}

.footer h2{
color:white;
font-size:2rem;
}

.footer h2 span{
color:#00cfff;
}

.footer h3{
color:white;
margin-bottom:20px;
}

.footer p,
.footer a{
color:#b8c5d6;
text-decoration:none;
display:block;
margin-bottom:12px;
}

.footer a:hover{
color:#00cfff;
}

.footer-bottom{
text-align:center;
margin-top:50px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.1);
color:#8f9db0;
}

.footer-logo{
font-size:2.5rem;
font-weight:800;
color:#00cfff;
margin-bottom:0;
}

.footer-logo span{
color:#00cfff;
}

.footer-techline{
color:#00cfff;
letter-spacing:4px;
font-size:0.8rem;
font-weight:700;
text-transform:uppercase;
margin-top:4px;
}

/* =========================================================
PORTFOLIO PAGE
========================================================= */

.portfolio-page {
background: #061321;
}



/* =========================================================
PORTFOLIO HERO
========================================================= */

.portfolio-hero {

min-height: 72vh;

padding: 190px 8% 100px;

padding-top: 180px;

display: flex;

align-items: flex-end;

justify-content: space-between;

position: relative;

overflow: hidden;

background:
radial-gradient(
circle at 75% 45%,
rgba(0,198,255,.12),
transparent 30%
),
#061321;

border-bottom:
1px solid rgba(255,255,255,.06);
}


.portfolio-hero::before {

content: "";

position: absolute;

width: 600px;

height: 600px;

right: -300px;

top: 50%;

transform: translateY(-50%);

border: 1px solid rgba(0,198,255,.08);

border-radius: 50%;
}


.portfolio-hero-content {

max-width: 850px;

position: relative;

z-index: 2;
}


.portfolio-tag {

display: inline-block;

margin-bottom: 22px;

color: #00c6ff;

font-size: 10px;

font-weight: 600;

letter-spacing: 3px;
}


.portfolio-hero h1 {

margin: 0 0 30px;

color: #ffffff;

font-size: clamp(52px, 7vw, 92px);

line-height: .96;

font-weight: 300;

letter-spacing: -4px;
}


.portfolio-hero h1 span {

display: block;

color: #00c6ff;
}


.portfolio-hero p {

max-width: 620px;

color: #8ea4b6;

font-size: 16px;

line-height: 1.9;
}


.portfolio-hero-number {

position: relative;

z-index: 2;

display: flex;

flex-direction: column;

align-items: flex-end;

gap: 5px;
}


.portfolio-hero-number span {

color: rgba(255,255,255,.18);

font-size: 80px;

line-height: .8;

font-weight: 200;

letter-spacing: -5px;
}


.portfolio-hero-number small {

color: #6e8496;

font-size: 9px;

letter-spacing: 3px;
}


/* =========================================================
CASE STUDY
========================================================= */

.case-study {

padding: 130px 8%;

background: #071321;

border-bottom:
1px solid rgba(255,255,255,.06);
}


.brand-case-study {

background: #081826;
}


/* HEADER */

.case-study-header {

max-width: 1200px;

margin-bottom: 55px;

display: grid;

grid-template-columns: 80px 1fr;

gap: 30px;

align-items: start;
}


.case-study-number {

color: rgba(255,255,255,.16);

font-size: 14px;

font-weight: 600;

letter-spacing: 2px;

padding-top: 10px;
}


.case-study-category {

display: block;

margin-bottom: 14px;

color: #00c6ff;

font-size: 10px;

font-weight: 600;

letter-spacing: 2.5px;
}


.case-study-header h2 {

margin: 0;

color: #ffffff;

font-size: clamp(42px, 5vw, 68px);

line-height: 1;

font-weight: 300;

letter-spacing: -3px;
}


/* VISUAL */

.case-study-visual {

width: 100%;

max-width: 1250px;

height: 620px;

overflow: hidden;

border-radius: 22px;

background: #0b1c2b;

border:
1px solid rgba(255,255,255,.08);
}


.case-study-visual img {

width: 100%;

height: 100%;

display: block;

object-fit: cover;

transition: transform .8s ease;
}


.case-study-visual:hover img {

transform: scale(1.025);
}


/* DETAILS */

.case-study-details {

max-width: 1150px;

margin-top: 70px;

display: grid;

grid-template-columns: 1.2fr .8fr;

gap: 100px;
}


.detail-label {

display: block;

margin-bottom: 20px;

color: #00c6ff;

font-size: 9px;

font-weight: 600;

letter-spacing: 2.5px;
}


.case-study-description h3 {

max-width: 650px;

margin-bottom: 22px;

color: #ffffff;

font-size: 31px;

line-height: 1.15;

font-weight: 400;

letter-spacing: -1px;
}


.case-study-description p {

max-width: 650px;

color: #8da2b4;

font-size: 14px;

line-height: 1.9;
}


/* INFO */

.case-study-info {

display: flex;

flex-direction: column;

gap: 30px;
}


.info-item {

padding-bottom: 25px;

border-bottom:
1px solid rgba(255,255,255,.08);
}


.info-item span {

display: block;

margin-bottom: 9px;

color: #62788a;

font-size: 9px;

font-weight: 600;

letter-spacing: 2px;
}


.info-item p {

color: #c1ced8;

font-size: 12px;

line-height: 1.6;
}


/* =========================================================
PORTFOLIO FUTURE
========================================================= */

.portfolio-future {

padding: 140px 8%;

display: grid;

grid-template-columns: .35fr 1fr;

gap: 100px;

background: #061321;
}


.portfolio-future-number {

color: rgba(255,255,255,.18);

font-size: 60px;

font-weight: 200;

letter-spacing: -4px;
}


.portfolio-future-number span {

color: #00c6ff;

font-size: 30px;
}


.portfolio-future-content {

max-width: 800px;
}


.portfolio-future-content h2 {

margin-bottom: 28px;

color: #ffffff;

font-size: clamp(45px,5vw,72px);

line-height: .95;

font-weight: 300;

letter-spacing: -3px;
}


.portfolio-future-content h2 span {

display: block;

color: #00c6ff;
}


.portfolio-future-content p {

max-width: 650px;

color: #899faf;

font-size: 15px;

line-height: 1.9;
}


/* =========================================================
PORTFOLIO CTA
========================================================= */

.portfolio-cta {

padding: 140px 8%;

background:

radial-gradient(
circle at 80% 50%,
rgba(0,198,255,.12),
transparent 35%
),

#081a2a;

border-top:
1px solid rgba(255,255,255,.05);

text-align: left;
}


.portfolio-cta h2 {

max-width: 900px;

margin-bottom: 25px;

color: #ffffff;

font-size: clamp(45px,6vw,78px);

line-height: .95;

font-weight: 300;

letter-spacing: -4px;
}


.portfolio-cta h2 span {

display: block;

color: #00c6ff;
}


.portfolio-cta p {

max-width: 560px;

margin-bottom: 35px;

color: #8ba0b1;

font-size: 15px;

line-height: 1.8;
}


.portfolio-cta-button {

display: inline-flex;

align-items: center;

gap: 12px;

padding: 15px 24px;

background: #00c6ff;

border: 1px solid #00c6ff;

border-radius: 5px;

color: #061321;

text-decoration: none;

font-size: 12px;

font-weight: 600;

transition: all .3s ease;
}


.portfolio-cta-button span {

font-size: 18px;

transition: transform .3s ease;
}


.portfolio-cta-button:hover {

background: #ffffff;

border-color: #ffffff;
}


.portfolio-cta-button:hover span {

transform: translateX(5px);
}


/* =========================================================
PORTFOLIO MOBILE
========================================================= */

@media (max-width: 800px) {

.portfolio-hero {

min-height: auto;

padding: 170px 6% 90px;

align-items: flex-start;
}


.portfolio-hero-number {

display: none;
}


.portfolio-hero h1 {

font-size: 52px;

letter-spacing: -2.5px;
}


.case-study {

padding: 90px 6%;
}


.case-study-header {

grid-template-columns: 45px 1fr;

gap: 15px;

margin-bottom: 35px;
}


.case-study-header h2 {

font-size: 43px;

letter-spacing: -2px;
}


.case-study-visual {

height: 400px;

border-radius: 16px;
}


.case-study-details {

grid-template-columns: 1fr;

gap: 55px;

margin-top: 50px;
}


.portfolio-future {

grid-template-columns: 1fr;

gap: 30px;

padding: 90px 6%;
}


.portfolio-future-number {

font-size: 45px;
}


.portfolio-cta {

padding: 90px 6%;
}


.portfolio-cta h2 {

font-size: 48px;

letter-spacing: -2.5px;
}

}


/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

.portfolio-hero {

padding-left: 5%;

padding-right: 5%;
}


.portfolio-hero h1 {

font-size: 44px;
}


.case-study {

padding-left: 5%;

padding-right: 5%;
}


.case-study-header {

grid-template-columns: 1fr;

gap: 10px;
}


.case-study-number {

padding-top: 0;
}


.case-study-header h2 {

font-size: 38px;
}


.case-study-visual {

height: 300px;
}


.case-study-description h3 {

font-size: 26px;
}


.portfolio-future {

padding-left: 5%;

padding-right: 5%;
}


.portfolio-cta {

padding-left: 5%;

padding-right: 5%;
}


.portfolio-cta h2 {

font-size: 40px;
}

}







/* =========================================================
ZYNCLY TECHNOLOGIES
SERVICES PAGE
========================================================= */


/* =========================================================
SERVICES PAGE BASE
========================================================= */

.services-page {
margin: 0;
padding: 0;

background: #061321;

color: #ffffff;

overflow-x: hidden;
}


/* =========================================================
SERVICES NAVIGATION
========================================================= */

.services-page .navbar {

position: fixed;

width: 100%;

z-index: 10;

background: #061321;

border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


.services-page .nav-container {

max-width: 1400px;

margin: 0 auto;

padding: 20px 8%;

display: flex;

align-items: center;

justify-content: space-between;
}


.services-page .logo {

display: flex;

align-items: center;

flex-shrink: 0;
}


.services-page .logo img {

width: 165px;

height: auto;

display: block;
}


.services-page .nav-links {

display: flex;

align-items: center;

justify-content: center;

gap: 38px;

margin: 0 auto;

padding: 0;

list-style: none;
}


.services-page .nav-links li {

list-style: none;

margin: 0;

padding: 0;
}


.services-page .nav-links a {

position: relative;

display: inline-block;

color: #b9c9d6;

text-decoration: none;

font-size: 13px;

font-weight: 500;

transition: color 0.3s ease;
}


.services-page .nav-links a:hover {

color: #35b9f4;
}


.services-page .nav-links a.active {

color: #35b9f4;
}


.services-page .nav-links a.active::after {

content: "";

position: absolute;

left: 50%;

bottom: -9px;

width: 18px;

height: 2px;

background: #35b9f4;

border-radius: 10px;

transform: translateX(-50%);
}


/* =========================================================
GLOBAL SECTION TAG
========================================================= */

.services-page .section-tag {

display: inline-block;

margin-bottom: 18px;

color: #35b9f4;

font-size: 10px;

font-weight: 700;

letter-spacing: 2.5px;

text-transform: uppercase;
}


/* =========================================================
SERVICES HERO
========================================================= */

.services-hero {

min-height: 68vh;

padding: 105px 8% 90px;

padding-top: 180px;

display: flex;

align-items: center;

justify-content: space-between;

position: relative;

overflow: hidden;

background:
radial-gradient(
circle at 82% 45%,
rgba(53, 185, 244, 0.14),
transparent 32%
),
#061321;
}


.services-hero-content {

max-width: 850px;

position: relative;

z-index: 2;
}


.services-hero h1 {

margin: 0 0 28px;

color: #ffffff;

font-size: clamp(50px, 7vw, 90px);

line-height: 0.95;

letter-spacing: -4px;

font-weight: 700;
}


.services-hero h1 span {

display: block;

color: #35b9f4;
}


.services-hero p {

max-width: 620px;

margin: 0;

color: #94a9ba;

font-size: 17px;

line-height: 1.8;
}


/* =========================================================
HERO Z MARK
========================================================= */

.services-hero-mark {

width: 430px;

height: 430px;

position: absolute;

right: -80px;

top: 50%;

transform: translateY(-50%);

display: flex;

align-items: center;

justify-content: center;

border: 1px solid rgba(53, 185, 244, 0.12);

border-radius: 50%;

pointer-events: none;
}


.services-hero-mark::before {

content: "";

position: absolute;

width: 300px;

height: 300px;

border: 1px solid rgba(53, 185, 244, 0.16);

border-radius: 50%;
}


.services-hero-mark::after {

content: "";

position: absolute;

width: 170px;

height: 170px;

border: 1px solid rgba(53, 185, 244, 0.22);

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(53, 185, 244, 0.1),
transparent 70%
);
}


.services-hero-mark span {

position: relative;

z-index: 2;

color: rgba(53, 185, 244, 0.75);

font-size: 80px;

font-weight: 700;

text-shadow:
0 0 35px rgba(53, 185, 244, 0.25);
}


/* =========================================================
SERVICES INTRO
========================================================= */

.services-intro {

padding: 120px 8%;

display: grid;

grid-template-columns: 0.35fr 1fr;

gap: 100px;

background: #071827;

border-top: 1px solid rgba(255, 255, 255, 0.04);

border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}


.services-intro-content {

max-width: 850px;
}


.services-intro-content h2 {

margin: 0 0 30px;

color: #ffffff;

font-size: clamp(43px, 5vw, 68px);

line-height: 1;

letter-spacing: -3px;
}


.services-intro-content h2 span {

color: #35b9f4;
}


.services-intro-content p {

max-width: 750px;

margin: 0 0 22px;

color: #8fa4b6;

font-size: 16px;

line-height: 1.9;
}


.services-intro-content p:last-child {

margin-bottom: 0;
}


/* =========================================================
SERVICES SECTION
========================================================= */

.services-section {

padding: 140px 8%;

background: #061321;
}


.services-heading {

max-width: 800px;

margin-bottom: 65px;
}


.services-heading h2 {

margin: 0;

color: #ffffff;

font-size: clamp(45px, 5.5vw, 72px);

line-height: 0.98;

letter-spacing: -3px;
}


.services-heading h2 span {

color: #35b9f4;
}


/* =========================================================
SERVICES GRID
========================================================= */

.services-grid {

display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 25px;

max-width: 1200px;
}


/* =========================================================
SERVICE CARD
========================================================= */

.service-card {

min-height: 600px;

padding: 38px;

position: relative;

display: flex;

flex-direction: column;

overflow: hidden;

background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.04),
rgba(255, 255, 255, 0.012)
);

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 22px;

transition:
transform 0.4s ease,
border-color 0.4s ease,
box-shadow 0.4s ease;
}


.service-card::before {

content: "";

position: absolute;

width: 280px;

height: 280px;

right: -150px;

bottom: -150px;

border-radius: 50%;

background: rgba(53, 185, 244, 0.08);

filter: blur(8px);

transition: transform 0.5s ease;
}


.service-card:hover {

transform: translateY(-8px);

border-color: rgba(53, 185, 244, 0.35);

box-shadow:
0 25px 70px rgba(0, 0, 0, 0.3);
}


.service-card:hover::before {

transform: scale(1.25);
}


/* =========================================================
CARD TOP
========================================================= */

.service-card-top {

display: flex;

align-items: center;

justify-content: space-between;
}


.service-number {

color: rgba(255, 255, 255, 0.18);

font-size: 13px;

font-weight: 700;

letter-spacing: 2px;
}


.service-arrow {

color: #35b9f4;

font-size: 25px;

transition: transform 0.35s ease;
}


.service-card:hover .service-arrow {

transform: translate(4px, -4px);
}


/* =========================================================
SERVICE ICON
========================================================= */

.service-icon {

width: 62px;

height: 62px;

margin: 55px 0 28px;

display: flex;

align-items: center;

justify-content: center;

border: 1px solid rgba(53, 185, 244, 0.3);

border-radius: 12px;

background: rgba(53, 185, 244, 0.05);

color: #35b9f4;

font-size: 22px;

font-weight: 600;
}


/* =========================================================
SERVICE LABEL
========================================================= */

.service-label {

display: block;

margin-bottom: 13px;

color: #35b9f4;

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;
}


/* =========================================================
SERVICE TITLE
========================================================= */

.service-card h3 {

margin: 0 0 18px;

color: #ffffff;

font-size: 36px;

font-weight: 600;

line-height: 1.05;

letter-spacing: -1px;
}


/* =========================================================
SERVICE DESCRIPTION
========================================================= */

.service-card > p {

max-width: 500px;

margin: 0 0 28px;

color: #8da2b4;

font-size: 14px;

line-height: 1.85;
}


/* =========================================================
SERVICE FEATURES
========================================================= */

.service-features {

display: flex;

flex-wrap: wrap;

gap: 9px;

margin-top: auto;

margin-bottom: 30px;
}


.service-features span {

padding: 9px 12px;

border: 1px solid rgba(53, 185, 244, 0.16);

border-radius: 5px;

background: rgba(53, 185, 244, 0.045);

color: #9dafbe;

font-size: 10px;

font-weight: 500;
}


/* =========================================================
SERVICE LINK
========================================================= */

.service-link {

display: inline-flex;

align-items: center;

gap: 10px;

width: fit-content;

color: #ffffff;

text-decoration: none;

font-size: 12px;

font-weight: 700;

transition: color 0.3s ease;
}


.service-link span {

color: #35b9f4;

font-size: 18px;

transition: transform 0.3s ease;
}


.service-link:hover {

color: #35b9f4;
}


.service-link:hover span {

transform: translateX(5px);
}


/* =========================================================
HOW WE WORK
========================================================= */

.services-process {

padding: 140px 8%;

background: #071827;

border-top: 1px solid rgba(255, 255, 255, 0.04);
}


.process-heading {

max-width: 800px;

margin-bottom: 75px;
}


.process-heading h2 {

margin: 0 0 25px;

color: #ffffff;

font-size: clamp(45px, 5vw, 70px);

line-height: 0.98;

letter-spacing: -3px;
}


.process-heading h2 span {

color: #35b9f4;
}


.process-heading p {

max-width: 570px;

margin: 0;

color: #8499ab;

font-size: 15px;

line-height: 1.8;
}


/* =========================================================
PROCESS GRID
========================================================= */

.process-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

max-width: 1200px;

border-top: 1px solid rgba(255, 255, 255, 0.08);

border-left: 1px solid rgba(255, 255, 255, 0.08);
}


.process-item {

min-height: 260px;

padding: 30px;

border-right: 1px solid rgba(255, 255, 255, 0.08);

border-bottom: 1px solid rgba(255, 255, 255, 0.08);

transition: background 0.3s ease;
}


.process-item:hover {

background: rgba(53, 185, 244, 0.035);
}


.process-item > span {

display: block;

margin-bottom: 65px;

color: #35b9f4;

font-size: 11px;

font-weight: 700;

letter-spacing: 2px;
}


.process-item h3 {

margin: 0 0 13px;

color: #ffffff;

font-size: 23px;

font-weight: 600;
}


.process-item p {

margin: 0;

color: #7f94a6;

font-size: 13px;

line-height: 1.75;
}


/* =========================================================
FUTURE SECTION
========================================================= */

.services-future {

padding: 140px 8%;

display: grid;

grid-template-columns: 0.35fr 1fr;

gap: 100px;

background: #061321;

border-top: 1px solid rgba(255, 255, 255, 0.04);
}


.services-future-content {

max-width: 850px;
}


.services-future-content h2 {

margin: 0 0 30px;

color: #ffffff;

font-size: clamp(45px, 5.5vw, 75px);

line-height: 0.96;

letter-spacing: -3px;
}


.services-future-content h2 span {

color: #35b9f4;
}


.services-future-content > p {

max-width: 700px;

margin: 0 0 30px;

color: #8ca1b2;

font-size: 16px;

line-height: 1.9;
}


/* Future pill */

.future-pill {

display: inline-flex;

align-items: center;

gap: 12px;

padding: 12px 16px;

border: 1px solid rgba(53, 185, 244, 0.18);

border-radius: 5px;

color: #a4b5c2;

font-size: 11px;

font-weight: 500;
}


.future-pill span {

width: 7px;

height: 7px;

border-radius: 50%;

background: #35b9f4;

box-shadow: 0 0 12px rgba(53, 185, 244, 0.7);
}


/* =========================================================
SERVICES CTA
========================================================= */

.services-cta {

padding: 130px 8%;

background:
radial-gradient(
circle at 80% 50%,
rgba(53, 185, 244, 0.14),
transparent 35%
),
#071a2b;

border-top: 1px solid rgba(255, 255, 255, 0.05);
}


.services-cta-content {

max-width: 800px;
}


.services-cta h2 {

margin: 0 0 25px;

color: #ffffff;

font-size: clamp(45px, 6vw, 76px);

line-height: 0.95;

letter-spacing: -3px;
}


.services-cta h2 span {

color: #35b9f4;
}


.services-cta p {

max-width: 570px;

margin: 0 0 32px;

color: #8ca0b1;

font-size: 16px;

line-height: 1.8;
}


/* CTA button */

.services-cta .cta-button {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 12px;

padding: 15px 25px;

background: #35b9f4;

border: 1px solid #35b9f4;

border-radius: 5px;

color: #061321;

text-decoration: none;

font-size: 12px;

font-weight: 700;

transition: all 0.3s ease;
}


.services-cta .cta-button span {

font-size: 18px;

transition: transform 0.3s ease;
}


.services-cta .cta-button:hover {

background: #ffffff;

border-color: #ffffff;
}


.services-cta .cta-button:hover span {

transform: translateX(5px);
}


/* =========================================================
FOOTER
========================================================= */

.services-page .site-footer {

padding: 45px 8%;

background: #04101c;

border-top: 1px solid rgba(255, 255, 255, 0.05);
}


.services-page .footer-container {

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;
}


.services-page .footer-logo img {

width: 165px;

height: auto;

display: block;
}


.services-page .footer-container p {

margin: 0;

color: #63788c;

font-size: 12px;
}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 1050px) {

.services-page .nav-links {

gap: 25px;
}


.services-grid {

grid-template-columns: 1fr;
}


.service-card {

min-height: 520px;
}


.process-grid {

grid-template-columns: repeat(2, 1fr);
}


.services-future {

grid-template-columns: 1fr;

gap: 35px;
}
}


/* =========================================================
SMALL LAPTOP / TABLET
========================================================= */

@media (max-width: 900px) {

.services-page .nav-container {

padding: 20px 6%;
}


.services-hero {

min-height: 60vh;

padding: 90px 6%;
}


.services-hero-mark {

right: -220px;

opacity: 0.55;
}


.services-intro {

grid-template-columns: 1fr;

gap: 30px;

padding: 100px 6%;
}


.services-section {

padding: 110px 6%;
}


.services-process {

padding: 110px 6%;
}


.services-future {

padding: 110px 6%;
}


.services-cta {

padding: 100px 6%;
}


.services-page .site-footer {

padding: 40px 6%;
}
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {

/* Navigation */

.services-page .nav-container {

padding: 18px 5%;

flex-direction: column;

gap: 18px;
}


.services-page .logo img {

width: 150px;
}


.services-page .nav-links {

width: 100%;

margin: 0;

gap: 16px;

flex-wrap: wrap;

justify-content: center;
}


.services-page .nav-links a {

font-size: 11px;
}


/* Hero */

.services-hero {

min-height: auto;

padding: 75px 5% 80px;
}


.services-hero h1 {

font-size: 47px;

letter-spacing: -2.5px;
}


.services-hero p {

font-size: 15px;
}


.services-hero-mark {

width: 300px;

height: 300px;

right: -190px;

top: 65%;

opacity: 0.4;
}


.services-hero-mark::before {

width: 220px;

height: 220px;
}


.services-hero-mark::after {

width: 130px;

height: 130px;
}


.services-hero-mark span {

font-size: 55px;
}


/* Intro */

.services-intro {

padding: 80px 5%;

gap: 25px;
}


.services-intro-content h2 {

font-size: 42px;

letter-spacing: -2px;
}


.services-intro-content p {

font-size: 14px;
}


/* Services */

.services-section {

padding: 85px 5%;
}


.services-heading {

margin-bottom: 50px;
}


.services-heading h2 {

font-size: 44px;

letter-spacing: -2px;
}


.service-card {

min-height: 0;

padding: 28px;

border-radius: 18px;
}


.service-icon {

margin-top: 40px;
}


.service-card h3 {

font-size: 31px;
}


.service-card > p {

font-size: 13px;
}


.service-features span {

font-size: 10px;

padding: 8px 10px;
}


/* Process */

.services-process {

padding: 85px 5%;
}


.process-heading {

margin-bottom: 55px;
}


.process-heading h2 {

font-size: 44px;

letter-spacing: -2px;
}


.process-grid {

grid-template-columns: 1fr;
}


.process-item {

min-height: auto;

padding: 27px;
}


.process-item > span {

margin-bottom: 40px;
}


/* Future */

.services-future {

padding: 85px 5%;

gap: 25px;
}


.services-future-content h2 {

font-size: 46px;

letter-spacing: -2px;
}


.services-future-content > p {

font-size: 14px;
}


/* CTA */

.services-cta {

padding: 80px 5%;
}


.services-cta h2 {

font-size: 45px;

letter-spacing: -2px;
}


.services-cta p {

font-size: 14px;
}


/* Footer */

.services-page .site-footer {

padding: 35px 5%;
}


.services-page .footer-container {

flex-direction: column;

text-align: center;
}
}



/* =========================================================
ZYNCLY TECHNOLOGIES
ABOUT PAGE
========================================================= */


/* =========================================================
BASE
========================================================= */

.about-page {
margin: 0;
padding: 0;

background: #061321;

color: #ffffff;

overflow-x: hidden;
}


/* =========================================================
NAVIGATION
========================================================= */

.about-page .navbar {

position: relative;

top: auto;
left: auto;

width: 100%;

z-index: 10;

background: #061321;

border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


.about-page .nav-container {

max-width: 1400px;

margin: 0 auto;

padding: 20px 8%;

display: flex;

align-items: center;

justify-content: space-between;
}


/* Logo */

.about-page .logo {

display: flex;

align-items: center;

flex-shrink: 0;
}


.about-page .logo img {

width: 165px;

height: auto;

display: block;
}


/* Navigation links */

.about-page .nav-links {

display: flex;

align-items: center;

justify-content: center;

gap: 38px;

margin: 0 auto;

padding: 0;

list-style: none;
}


.about-page .nav-links li {

list-style: none;

margin: 0;

padding: 0;
}


.about-page .nav-links a {

position: relative;

display: inline-block;

color: #b9c9d6;

text-decoration: none;

font-size: 13px;

font-weight: 500;

transition: color 0.3s ease;
}


.about-page .nav-links a:hover {

color: #35b9f4;
}


.about-page .nav-links a.active {

color: #35b9f4;
}


.about-page .nav-links a.active::after {

content: "";

position: absolute;

left: 50%;

bottom: -9px;

width: 18px;

height: 2px;

background: #35b9f4;

border-radius: 10px;

transform: translateX(-50%);
}


/* =========================================================
GLOBAL SECTION TAG
========================================================= */

.about-page .section-tag {

display: inline-block;

margin-bottom: 18px;

color: #35b9f4;

font-size: 10px;

font-weight: 700;

letter-spacing: 2.5px;

text-transform: uppercase;
}


/* =========================================================
HERO
========================================================= */

.about-hero {

min-height: 72vh;

padding: 100px 8% 100px;

padding-top: 180px;

display: flex;

align-items: center;

justify-content: space-between;

position: relative;

overflow: hidden;

background:
radial-gradient(
circle at 85% 40%,
rgba(53, 185, 244, 0.15),
transparent 32%
),
#061321;
}


.about-hero-content {

max-width: 850px;

position: relative;

z-index: 2;
}


.about-hero h1 {

margin: 0 0 28px;

color: #ffffff;

font-size: clamp(50px, 7vw, 92px);

line-height: 0.95;

letter-spacing: -4px;

font-weight: 700;
}


.about-hero h1 span {

display: block;

color: #35b9f4;
}


.about-hero p {

max-width: 650px;

margin: 0;

color: #9aacbe;

font-size: 18px;

line-height: 1.8;
}


/* =========================================================
HERO ORBIT
========================================================= */

.about-hero-orbit {

position: absolute;

width: 520px;

height: 520px;

right: -120px;

top: 50%;

transform: translateY(-50%);

pointer-events: none;
}


.orbit {

position: absolute;

border: 1px solid rgba(53, 185, 244, 0.12);

border-radius: 50%;
}


.orbit-one {

width: 520px;

height: 520px;

top: 0;

left: 0;
}


.orbit-two {

width: 350px;

height: 350px;

top: 85px;

left: 85px;

border-color: rgba(53, 185, 244, 0.16);
}


.orbit-dot {

position: absolute;

width: 12px;

height: 12px;

top: 55px;

left: 255px;

border-radius: 50%;

background: #35b9f4;

box-shadow:
0 0 20px rgba(53, 185, 244, 0.7),
0 0 50px rgba(53, 185, 244, 0.25);
}


/* =========================================================
WHO WE ARE
========================================================= */

.about-introduction {

padding: 130px 8%;

display: grid;

grid-template-columns: 0.35fr 1fr;

gap: 100px;

background: #071827;

border-top: 1px solid rgba(255, 255, 255, 0.04);

border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}


.about-intro-label {

padding-top: 12px;
}


.about-intro-content {

max-width: 850px;
}


.about-intro-content h2 {

margin: 0 0 35px;

color: #ffffff;

font-size: clamp(42px, 5vw, 68px);

line-height: 1;

letter-spacing: -3px;
}


.about-intro-content h2 span {

color: #35b9f4;
}


.about-intro-content p {

max-width: 780px;

margin: 0 0 22px;

color: #8fa4b6;

font-size: 16px;

line-height: 1.9;
}


.about-intro-content p:last-child {

margin-bottom: 0;
}


/* =========================================================
BELIEFS
========================================================= */

.beliefs-section {

padding: 140px 8%;

background: #061321;
}


.beliefs-heading {

display: grid;

grid-template-columns: 1fr 0.55fr;

gap: 70px;

align-items: end;

margin-bottom: 65px;
}


.beliefs-heading h2 {

margin: 0;

color: #ffffff;

font-size: clamp(42px, 5vw, 68px);

line-height: 0.98;

letter-spacing: -3px;
}


.beliefs-heading h2 span {

color: #35b9f4;
}


.beliefs-heading > p {

max-width: 430px;

margin: 0;

color: #8297aa;

font-size: 15px;

line-height: 1.8;
}


/* =========================================================
PRINCIPLES GRID
========================================================= */

.principles-grid {

display: grid;

grid-template-columns: repeat(4, minmax(0, 1fr));

gap: 18px;
}


.principle-card {

min-height: 350px;

padding: 30px;

position: relative;

display: flex;

flex-direction: column;

background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.035),
rgba(255, 255, 255, 0.012)
);

border: 1px solid rgba(255, 255, 255, 0.07);

border-radius: 18px;

overflow: hidden;

transition:
transform 0.35s ease,
border-color 0.35s ease,
background 0.35s ease;
}


.principle-card::before {

content: "";

position: absolute;

width: 140px;

height: 140px;

right: -70px;

bottom: -70px;

border-radius: 50%;

background: rgba(53, 185, 244, 0.08);

filter: blur(5px);
}


.principle-card:hover {

transform: translateY(-7px);

border-color: rgba(53, 185, 244, 0.35);

background:
linear-gradient(
145deg,
rgba(53, 185, 244, 0.07),
rgba(255, 255, 255, 0.015)
);
}


/* Number */

.principle-number {

color: rgba(255, 255, 255, 0.17);

font-size: 12px;

font-weight: 700;

letter-spacing: 2px;
}


/* Icon */

.principle-icon {

width: 48px;

height: 48px;

margin: 45px 0 28px;

display: flex;

align-items: center;

justify-content: center;

border: 1px solid rgba(53, 185, 244, 0.25);

border-radius: 10px;

color: #35b9f4;

font-size: 22px;

background: rgba(53, 185, 244, 0.05);
}


/* Title */

.principle-card h3 {

margin: 0 0 15px;

color: #ffffff;

font-size: 24px;

font-weight: 600;
}


/* Text */

.principle-card p {

margin: 0;

color: #7f95a8;

font-size: 13px;

line-height: 1.8;
}


/* =========================================================
OUR APPROACH
========================================================= */

.approach-section {

padding: 140px 8%;

background: #071827;
}


.approach-heading {

max-width: 800px;

margin-bottom: 90px;
}


.approach-heading h2 {

margin: 0 0 25px;

color: #ffffff;

font-size: clamp(45px, 5.5vw, 72px);

line-height: 0.98;

letter-spacing: -3px;
}


.approach-heading h2 span {

color: #35b9f4;
}


.approach-heading p {

max-width: 600px;

margin: 0;

color: #8499ab;

font-size: 16px;

line-height: 1.8;
}


/* =========================================================
APPROACH TIMELINE
========================================================= */

.approach-timeline {

max-width: 1050px;

margin: 0 auto;
}


.approach-step {

display: grid;

grid-template-columns: 90px 1px 1fr;

gap: 35px;

min-height: 180px;

position: relative;
}


.step-number {

color: #35b9f4;

font-size: 13px;

font-weight: 700;

letter-spacing: 1px;

padding-top: 4px;
}


.step-line {

width: 1px;

min-height: 100%;

background:
linear-gradient(
to bottom,
rgba(53, 185, 244, 0.5),
rgba(53, 185, 244, 0.05)
);

position: relative;
}


.step-line::before {

content: "";

position: absolute;

width: 8px;

height: 8px;

left: 50%;

top: 4px;

transform: translateX(-50%);

border-radius: 50%;

background: #35b9f4;

box-shadow: 0 0 15px rgba(53, 185, 244, 0.5);
}


.step-content {

padding-bottom: 65px;
}


.step-content > span {

display: block;

margin-bottom: 10px;

color: #35b9f4;

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;
}


.step-content h3 {

margin: 0 0 14px;

color: #ffffff;

font-size: 29px;

font-weight: 600;

letter-spacing: -0.5px;
}


.step-content p {

max-width: 650px;

margin: 0;

color: #8196a8;

font-size: 14px;

line-height: 1.8;
}


/* =========================================================
FUTURE / WHERE WE ARE GOING
========================================================= */

.future-section {

min-height: 700px;

padding: 140px 8%;

display: grid;

grid-template-columns: 1fr 0.8fr;

gap: 100px;

align-items: center;

position: relative;

overflow: hidden;

background: #061321;
}


.future-content {

max-width: 750px;

position: relative;

z-index: 2;
}


.future-content h2 {

margin: 0 0 30px;

color: #ffffff;

font-size: clamp(48px, 6vw, 82px);

line-height: 0.95;

letter-spacing: -4px;
}


.future-content h2 span {

color: #35b9f4;
}


.future-content > p {

max-width: 650px;

margin: 0 0 22px;

color: #8ca1b3;

font-size: 16px;

line-height: 1.9;
}


/* Future statement */

.future-statement {

display: flex;

align-items: center;

gap: 15px;

margin-top: 40px;
}


.future-line {

width: 45px;

height: 1px;

background: #35b9f4;
}


.future-statement strong {

color: #ffffff;

font-size: 13px;

font-weight: 500;

letter-spacing: 0.5px;
}


/* =========================================================
FUTURE VISUAL
========================================================= */

.future-visual {

height: 520px;

position: relative;

display: flex;

align-items: center;

justify-content: center;
}


.future-circle {

position: absolute;

border-radius: 50%;

border: 1px solid rgba(53, 185, 244, 0.12);
}


.circle-one {

width: 500px;

height: 500px;
}


.circle-two {

width: 350px;

height: 350px;

border-color: rgba(53, 185, 244, 0.17);
}


.circle-three {

width: 210px;

height: 210px;

border-color: rgba(53, 185, 244, 0.25);

background:
radial-gradient(
circle,
rgba(53, 185, 244, 0.12),
transparent 65%
);
}


.future-center {

width: 85px;

height: 85px;

display: flex;

align-items: center;

justify-content: center;

position: relative;

z-index: 2;

border: 1px solid rgba(53, 185, 244, 0.45);

border-radius: 50%;

background: #061321;

box-shadow:
0 0 40px rgba(53, 185, 244, 0.12);
}


.future-center span {

color: #35b9f4;

font-size: 34px;

font-weight: 700;
}


/* =========================================================
ABOUT CTA
========================================================= */

.about-cta {

padding: 130px 8%;

position: relative;

overflow: hidden;

background:
radial-gradient(
circle at 80% 50%,
rgba(53, 185, 244, 0.14),
transparent 35%
),
#071a2b;

border-top: 1px solid rgba(255, 255, 255, 0.05);
}


.about-cta-content {

max-width: 800px;
}


.about-cta h2 {

margin: 0 0 25px;

color: #ffffff;

font-size: clamp(45px, 6vw, 76px);

line-height: 0.95;

letter-spacing: -3px;
}


.about-cta h2 span {

color: #35b9f4;
}


.about-cta p {

max-width: 570px;

margin: 0 0 32px;

color: #8ca0b1;

font-size: 16px;

line-height: 1.8;
}


/* CTA Button */

.cta-button {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 12px;

padding: 15px 25px;

background: #35b9f4;

border: 1px solid #35b9f4;

border-radius: 5px;

color: #061321;

text-decoration: none;

font-size: 12px;

font-weight: 700;

transition: all 0.3s ease;
}


.cta-button span {

font-size: 18px;

line-height: 1;

transition: transform 0.3s ease;
}


.cta-button:hover {

background: #ffffff;

border-color: #ffffff;
}


.cta-button:hover span {

transform: translateX(4px);
}


/* =========================================================
FOOTER
========================================================= */

.about-page .site-footer {

padding: 45px 8%;

background: #04101c;

border-top: 1px solid rgba(255, 255, 255, 0.05);
}


.about-page .footer-container {

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;
}


.about-page .footer-logo img {

width: 165px;

height: auto;

display: block;
}


.about-page .footer-container p {

margin: 0;

color: #63788c;

font-size: 12px;
}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 1050px) {

.about-page .nav-links {

gap: 25px;
}


.principles-grid {

grid-template-columns: repeat(2, 1fr);
}


.future-section {

grid-template-columns: 1fr;

gap: 60px;
}


.future-visual {

height: 450px;
}
}


/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

.about-page .nav-container {

padding: 20px 6%;
}


.about-hero {

min-height: 60vh;

padding: 90px 6%;
}


.about-hero-orbit {

right: -220px;

opacity: 0.6;
}


.about-introduction {

grid-template-columns: 1fr;

gap: 30px;

padding: 100px 6%;
}


.beliefs-section {

padding: 110px 6%;
}


.beliefs-heading {

grid-template-columns: 1fr;

gap: 30px;
}


.approach-section {

padding: 110px 6%;
}


.future-section {

padding: 110px 6%;
}


.about-cta {

padding: 100px 6%;
}


.about-page .site-footer {

padding: 40px 6%;
}
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {

/* Navigation */

.about-page .nav-container {

padding: 18px 5%;

flex-direction: column;

gap: 18px;
}


.about-page .logo img {

width: 150px;
}


.about-page .nav-links {

width: 100%;

gap: 16px;

margin: 0;

flex-wrap: wrap;

justify-content: center;
}


.about-page .nav-links a {

font-size: 11px;
}


/* Hero */

.about-hero {

min-height: auto;

padding: 75px 5% 80px;
}


.about-hero h1 {

font-size: 47px;

letter-spacing: -2.5px;
}


.about-hero p {

font-size: 15px;
}


.about-hero-orbit {

width: 350px;

height: 350px;

right: -210px;

top: 60%;

opacity: 0.45;
}


.orbit-one {

width: 350px;

height: 350px;
}


.orbit-two {

width: 240px;

height: 240px;

top: 55px;

left: 55px;
}


.orbit-dot {

left: 170px;

top: 40px;
}


/* Who we are */

.about-introduction {

padding: 80px 5%;

gap: 25px;
}


.about-intro-content h2 {

font-size: 42px;

letter-spacing: -2px;
}


.about-intro-content p {

font-size: 14px;

line-height: 1.8;
}


/* Beliefs */

.beliefs-section {

padding: 85px 5%;
}


.beliefs-heading h2 {

font-size: 43px;

letter-spacing: -2px;
}


.beliefs-heading > p {

font-size: 14px;
}


.principles-grid {

grid-template-columns: 1fr;

gap: 15px;
}


.principle-card {

min-height: 300px;

padding: 28px;
}


.principle-icon {

margin-top: 35px;
}


/* Approach */

.approach-section {

padding: 85px 5%;
}


.approach-heading {

margin-bottom: 65px;
}


.approach-heading h2 {

font-size: 45px;

letter-spacing: -2px;
}


.approach-step {

grid-template-columns: 55px 1px 1fr;

gap: 20px;

min-height: 190px;
}


.step-content {

padding-bottom: 55px;
}


.step-content h3 {

font-size: 23px;
}


.step-content p {

font-size: 13px;
}


/* Future */

.future-section {

padding: 85px 5%;

gap: 30px;
}


.future-content h2 {

font-size: 48px;

letter-spacing: -2px;
}


.future-content > p {

font-size: 14px;
}


.future-visual {

height: 360px;
}


.circle-one {

width: 330px;

height: 330px;
}


.circle-two {

width: 240px;

height: 240px;
}


.circle-three {

width: 150px;

height: 150px;
}


.future-center {

width: 70px;

height: 70px;
}


.future-center span {

font-size: 28px;
}


/* CTA */

.about-cta {

padding: 80px 5%;
}


.about-cta h2 {

font-size: 45px;

letter-spacing: -2px;
}


.about-cta p {

font-size: 14px;
}


/* Footer */

.about-page .site-footer {

padding: 35px 5%;
}


.about-page .footer-container {

flex-direction: column;

text-align: center;
}
}







/* =========================================================
CONTACT PAGE
========================================================= */

.contact-page {
background: #061321;
}


/* =========================================================
CONTACT HERO
========================================================= */

.contact-hero {

min-height: 68vh;

padding: 190px 8% 100px;

padding-top: 180px;

display: flex;

align-items: flex-end;

justify-content: space-between;

position: relative;

overflow: hidden;

background:
radial-gradient(
circle at 75% 45%,
rgba(0,198,255,.12),
transparent 32%
),
#061321;

border-bottom:
1px solid rgba(255,255,255,.06);
}


.contact-hero::before {

content: "";

position: absolute;

width: 650px;

height: 650px;

right: -350px;

top: 50%;

transform: translateY(-50%);

border: 1px solid rgba(0,198,255,.08);

border-radius: 50%;
}


.contact-hero-content {

position: relative;

z-index: 2;

max-width: 850px;
}


.contact-tag {

display: inline-block;

margin-bottom: 22px;

color: #00c6ff;

font-size: 10px;

font-weight: 600;

letter-spacing: 3px;
}


.contact-hero h1 {

margin-bottom: 30px;

color: #ffffff;

font-size: clamp(52px, 7vw, 90px);

line-height: .96;

font-weight: 300;

letter-spacing: -4px;
}


.contact-hero h1 span {

display: block;

color: #00c6ff;
}


.contact-hero p {

max-width: 600px;

color: #8ea4b6;

font-size: 16px;

line-height: 1.9;
}


.contact-number {

position: relative;

z-index: 2;

display: flex;

flex-direction: column;

align-items: flex-end;

gap: 5px;
}


.contact-number span {

color: rgba(255,255,255,.16);

font-size: 80px;

font-weight: 200;

line-height: .8;

letter-spacing: -5px;
}


.contact-number small {

color: #6e8496;

font-size: 9px;

letter-spacing: 3px;
}


/* =========================================================
CONTACT SECTION
========================================================= */

.contact-section {

padding: 130px 8%;

display: grid;

grid-template-columns: .85fr 1.15fr;

gap: 100px;

background: #071321;
}


/* INFORMATION */

.contact-information {

max-width: 500px;
}


.contact-section-tag {

display: block;

margin-bottom: 18px;

color: #00c6ff;

font-size: 10px;

font-weight: 600;

letter-spacing: 3px;
}


.contact-information h2 {

margin-bottom: 22px;

color: #ffffff;

font-size: 48px;

line-height: 1;

font-weight: 300;

letter-spacing: -2px;
}


.contact-intro {

margin-bottom: 60px;

color: #8da2b4;

font-size: 14px;

line-height: 1.9;
}


/* CONTACT DETAILS */

.contact-detail {

padding: 22px 0;

border-top:
1px solid rgba(255,255,255,.08);
}


.contact-detail:last-child {

border-bottom:
1px solid rgba(255,255,255,.08);
}


.contact-detail span {

display: block;

margin-bottom: 10px;

color: #61788b;

font-size: 9px;

font-weight: 600;

letter-spacing: 2px;
}


.contact-detail a,
.contact-detail p {

color: #d4e0e8;

text-decoration: none;

font-size: 14px;

line-height: 1.7;

transition: color .3s ease;
}


.contact-detail a:hover {

color: #00c6ff;
}


/* =========================================================
CONTACT FORM
========================================================= */

.contact-form-container {

padding: 45px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.045),
rgba(255,255,255,.012)
);

border:
1px solid rgba(255,255,255,.09);

border-radius: 22px;
}


.form-heading {

margin-bottom: 40px;
}


.form-heading > span {

display: block;

margin-bottom: 12px;

color: #00c6ff;

font-size: 9px;

font-weight: 600;

letter-spacing: 2.5px;
}


.form-heading h3 {

color: #ffffff;

font-size: 31px;

font-weight: 400;

letter-spacing: -1px;
}


/* FORM GROUP */

.form-group {

margin-bottom: 27px;
}


.form-group label {

display: block;

margin-bottom: 10px;

color: #a8b9c6;

font-size: 11px;

font-weight: 400;
}


/* INPUTS */

.form-group input,
.form-group select,
.form-group textarea {

width: 100%;

padding: 15px 16px;

background: rgba(0,0,0,.16);

border:
1px solid rgba(255,255,255,.10);

border-radius: 7px;

outline: none;

color: #ffffff;

font-family: 'Outfit', sans-serif;

font-size: 13px;

transition:
border-color .3s ease,
background .3s ease;
}


.form-group input::placeholder,
.form-group textarea::placeholder {

color: #536b7c;
}


.form-group select {

color: #8ea2b1;

cursor: pointer;
}


.form-group select option {

background: #071321;

color: #ffffff;
}


.form-group textarea {

min-height: 130px;

resize: vertical;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

border-color: #00c6ff;

background: rgba(0,198,255,.025);
}


/* SUBMIT BUTTON */

.contact-submit {

width: 100%;

padding: 16px 25px;

display: flex;

align-items: center;

justify-content: center;

gap: 12px;

background: #00c6ff;

border: 1px solid #00c6ff;

border-radius: 6px;

color: #061321;

font-family: 'Outfit', sans-serif;

font-size: 12px;

font-weight: 600;

cursor: pointer;

transition: all .3s ease;
}


.contact-submit span {

font-size: 18px;

transition: transform .3s ease;
}


.contact-submit:hover {

background: #ffffff;

border-color: #ffffff;
}


.contact-submit:hover span {

transform: translateX(5px);
}


/* =========================================================
CONTACT CTA
========================================================= */

.contact-cta {

padding: 140px 8%;

background:
radial-gradient(
circle at 75% 50%,
rgba(0,198,255,.13),
transparent 35%
),
#081826;

border-top:
1px solid rgba(255,255,255,.05);

text-align: left;
}


.contact-cta h2 {

max-width: 900px;

margin-bottom: 35px;

color: #ffffff;

font-size: clamp(45px, 6vw, 78px);

line-height: .95;

font-weight: 300;

letter-spacing: -4px;
}


.contact-cta h2 span {

display: block;

color: #00c6ff;
}


.contact-email-button {

display: inline-flex;

align-items: center;

gap: 15px;

padding: 15px 23px;

border: 1px solid rgba(0,198,255,.4);

border-radius: 5px;

color: #ffffff;

text-decoration: none;

font-size: 13px;

transition: all .3s ease;
}


.contact-email-button span {

color: #00c6ff;

font-size: 18px;
}


.contact-email-button:hover {

background: #00c6ff;

border-color: #00c6ff;

color: #061321;
}


.contact-email-button:hover span {

color: #061321;
}


/* =========================================================
CONTACT MOBILE
========================================================= */

@media (max-width: 850px) {

.contact-hero {

min-height: auto;

padding: 170px 6% 90px;

align-items: flex-start;
}


.contact-number {

display: none;
}


.contact-section {

grid-template-columns: 1fr;

gap: 70px;

padding: 90px 6%;
}


.contact-form-container {

padding: 30px;
}


.contact-cta {

padding: 90px 6%;
}

}


@media (max-width: 500px) {

.contact-hero {

padding-left: 5%;

padding-right: 5%;
}


.contact-hero h1 {

font-size: 45px;

letter-spacing: -2.5px;
}


.contact-section {

padding-left: 5%;

padding-right: 5%;
}


.contact-information h2 {

font-size: 40px;
}


.contact-form-container {

padding: 25px;

border-radius: 16px;
}


.form-heading h3 {

font-size: 27px;
}


.contact-cta {

padding-left: 5%;

padding-right: 5%;
}


.contact-cta h2 {

font-size: 43px;

letter-spacing: -2.5px;
}

}