*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#030b16;color:var(--text);line-height:1.65;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px;z-index:0}a{color:inherit;text-decoration:none}.site-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 7%;background:rgba(3,11,22,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,217,255,.14)}.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:#fff;letter-spacing:.2px}.brand img{width:var(--logo-width,78px);max-height:72px;height:auto;object-fit:contain}.brand.logo-only{min-width:90px}.logo-fallback{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#02101f!important;font-weight:900;letter-spacing:.5px}.brand span:not(.logo-fallback){background:linear-gradient(90deg,#fff,var(--primary));-webkit-background-clip:text;color:transparent}.site-nav{display:flex;gap:26px;align-items:center}.site-nav a{font-weight:600;color:#d7e3f4;opacity:.9}.site-nav a:hover{color:var(--primary)}.nav-cta,.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#02101f!important;padding:13px 22px;border-radius:999px;font-weight:800;box-shadow:0 0 26px rgba(0,217,255,.28);border:none;cursor:pointer}.btn.ghost{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.18);box-shadow:none}.nav-toggle{display:none}.hero{position:relative;padding:115px 7% 85px;min-height:740px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:45px;background:radial-gradient(circle at 15% 15%,rgba(0,217,255,.18),transparent 35%),radial-gradient(circle at 85% 30%,rgba(25,255,163,.12),transparent 28%),linear-gradient(135deg,#03101f,#061b35 55%,#020814)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000,transparent);opacity:.45}.hero>*{position:relative}.eyebrow{display:inline-flex;gap:10px;align-items:center;border:1px solid rgba(0,217,255,.25);background:rgba(0,217,255,.08);border-radius:999px;padding:8px 14px;color:var(--primary);font-weight:800;font-size:14px}.hero h1{font-size:clamp(42px,6vw,78px);line-height:1.02;margin:18px 0 20px;color:#fff;letter-spacing:-2px}.hero p{font-size:18px;max-width:720px;color:#c9d8eb}.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}.hero-card{background:linear-gradient(180deg,rgba(11,32,58,.88),rgba(4,15,29,.95));border:1px solid rgba(0,217,255,.2);border-radius:32px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.42);position:relative;overflow:hidden}.hero-card:after{content:"";position:absolute;inset:auto -80px -80px auto;width:210px;height:210px;background:var(--primary);filter:blur(90px);opacity:.25}.scanner{height:380px;border-radius:24px;background:linear-gradient(135deg,rgba(0,217,255,.16),rgba(25,255,163,.08)),url('/assets/images/cyber-panel.svg');background-size:cover;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center}.scanner-inner{width:210px;height:210px;border-radius:50%;border:2px solid rgba(0,217,255,.55);display:grid;place-items:center;box-shadow:0 0 80px rgba(0,217,255,.22),inset 0 0 45px rgba(0,217,255,.18);font-size:66px;animation:pulse 2.4s infinite}@keyframes pulse{50%{transform:scale(1.04);box-shadow:0 0 120px rgba(0,217,255,.36),inset 0 0 60px rgba(25,255,163,.2)}}.section{padding:90px 7%;position:relative}.section.alt{background:#061326}.section-head{max-width:760px;margin-bottom:42px}.section-head.center{text-align:center;margin-left:auto;margin-right:auto}.section h2{font-size:clamp(32px,4vw,54px);line-height:1.1;color:#fff;margin:0 0 14px;letter-spacing:-1px}.muted{color:#aebed3}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:linear-gradient(180deg,rgba(12,33,60,.9),rgba(7,20,38,.92));border:1px solid rgba(0,217,255,.16);border-radius:24px;padding:28px;transition:.25s;box-shadow:0 18px 50px rgba(0,0,0,.22)}.card:hover{transform:translateY(-6px);border-color:rgba(0,217,255,.45)}.icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(0,217,255,.11);font-size:28px;margin-bottom:18px}.card h3{color:#fff;margin:0 0 10px;font-size:23px}.read-more{color:var(--primary);font-weight:800}.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.glass{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:34px}.check{display:flex;gap:13px;margin:14px 0}.check b{color:#fff}.check span:first-child{color:var(--accent)}.steps{counter-reset:step}.step{position:relative;padding:24px 24px 24px 78px;margin-bottom:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:20px}.step:before{counter-increment:step;content:counter(step);position:absolute;left:22px;top:24px;width:38px;height:38px;border-radius:50%;background:var(--primary);color:#02101f;display:grid;place-items:center;font-weight:900}.cta{margin:0 7% 90px;padding:56px;border-radius:34px;background:linear-gradient(135deg,rgba(0,217,255,.18),rgba(25,255,163,.12)),#06182d;border:1px solid rgba(0,217,255,.22);display:flex;justify-content:space-between;align-items:center;gap:24px}.page-hero{padding:90px 7%;background:linear-gradient(135deg,#03101f,#09213d);border-bottom:1px solid rgba(0,217,255,.14)}.page-hero h1{font-size:clamp(38px,5vw,66px);line-height:1.08;color:#fff;margin:0}.content{max-width:950px}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}.form-card input,.form-card textarea,.form-card select,.admin-form input,.admin-form textarea,.admin-form select{width:100%;background:#061a31;color:#fff;border:1px solid rgba(0,217,255,.16);padding:14px 16px;border-radius:14px;margin-bottom:14px;outline:none}.form-card textarea,.admin-form textarea{min-height:150px}.alert{padding:14px 18px;border-radius:14px;margin-bottom:18px;background:rgba(25,255,163,.12);border:1px solid rgba(25,255,163,.3);color:#caffea}.site-footer{background:#020814;border-top:1px solid rgba(0,217,255,.12);padding:55px 7% 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}.footer-grid a{display:block;color:#aebed3;margin:8px 0}.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.08);margin-top:36px;padding-top:22px;color:#8fa0b7}.post-meta{font-size:14px;color:var(--primary);font-weight:800}.empty{padding:30px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;color:#aebed3}@media(max-width:900px){.site-nav{position:fixed;left:20px;right:20px;top:82px;display:none;flex-direction:column;padding:22px;background:#071b33;border:1px solid rgba(0,217,255,.2);border-radius:22px}.nav-open .site-nav{display:flex}.nav-toggle{display:block;background:transparent;color:#fff;border:0;font-size:26px}.hero,.split,.contact-grid,.footer-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.hero{padding-top:80px;min-height:auto}.cta{flex-direction:column;align-items:flex-start;padding:32px;margin-bottom:55px}.site-header{padding:14px 5%}.brand span:not(.logo-fallback){font-size:14px}.brand img{max-width:150px}.section,.page-hero{padding-left:5%;padding-right:5%}}
.card-image{width:100%;height:170px;object-fit:cover;border-radius:18px;margin-bottom:18px;border:1px solid rgba(0,217,255,.18);background:#071326}.content-featured-image{display:block;max-width:100%;border-radius:24px;margin:0 0 28px;border:1px solid rgba(0,217,255,.18);box-shadow:0 18px 60px rgba(0,0,0,.22)}.rich-content{line-height:1.85}.rich-content h2,.rich-content h3{color:#fff;letter-spacing:-.3px}.rich-content ul{padding-left:22px}.rich-content a{color:var(--primary)}.rich-content img{max-width:100%;height:auto;border-radius:18px;margin:14px 0;border:1px solid rgba(0,217,255,.16)}
/* v4 Service Template + Footer Enhancements */
.footer-logo{max-width:160px;max-height:92px;object-fit:contain;margin-bottom:14px}.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.social-links a,.footer-wa{display:inline-flex!important;padding:8px 12px;border-radius:999px;border:1px solid rgba(0,217,255,.18);color:var(--primary)!important;background:rgba(0,217,255,.06)}.floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:30;background:#19ffa3;color:#02101f!important;padding:13px 18px;border-radius:999px;font-weight:900;box-shadow:0 18px 42px rgba(25,255,163,.24)}.hero-side-image{width:100%;height:380px;object-fit:cover;border-radius:24px;border:1px solid rgba(255,255,255,.10)}
.service-hero{min-height:520px;display:flex;align-items:center;background-size:cover;background-position:center;padding:120px 7% 80px;position:relative}.service-hero-content{max-width:800px}.service-hero h1{font-size:clamp(38px,6vw,72px);line-height:1.05;margin:18px 0 22px;color:#fff;letter-spacing:-1.6px}.service-hero p{max-width:720px;color:#cbd5e1;font-size:18px;line-height:1.8}.service-main-section{padding:90px 7%;background:radial-gradient(circle at top left,rgba(0,217,255,.08),transparent 32%),#050d1c}.service-layout{display:grid;grid-template-columns:minmax(0,1fr)340px;gap:32px;align-items:start}.service-content-card,.sidebar-card{background:rgba(9,22,43,.86);border:1px solid rgba(148,163,184,.18);border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.26)}.service-content-card{overflow:hidden}.service-featured-image{display:block;object-fit:cover;max-width:100%;border-bottom:1px solid rgba(148,163,184,.18)}.content-area{padding:36px;color:#cbd5e1;line-height:1.9;font-size:16px}.service-block{padding:0 36px 36px}.service-block h2{color:#fff;font-size:30px;margin:0 0 22px}.key-points-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.key-point-item{display:flex;gap:12px;align-items:flex-start;padding:18px;background:rgba(0,217,255,.06);border:1px solid rgba(0,217,255,.16);border-radius:16px}.key-point-item span{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,217,255,.16);color:var(--primary);font-weight:900}.key-point-item p{margin:0;color:#dbeafe;line-height:1.6}.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.process-card{padding:22px;border-radius:18px;background:rgba(15,36,66,.78);border:1px solid rgba(148,163,184,.16)}.process-number{font-size:28px;font-weight:900;color:rgba(0,217,255,.75);margin-bottom:14px}.process-card h3{color:#fff;margin:0 0 10px}.process-card p{color:#b6c6d8;line-height:1.7;margin:0}.faq-list{display:grid;gap:12px}.faq-item{border-radius:16px;background:rgba(15,36,66,.72);border:1px solid rgba(148,163,184,.16);overflow:hidden}.faq-item summary{cursor:pointer;padding:18px 20px;color:#fff;font-weight:800}.faq-item p{padding:0 20px 20px;color:#b6c6d8;line-height:1.7;margin:0}.service-sidebar{position:sticky;top:110px;display:grid;gap:20px}.sidebar-card{padding:26px}.sidebar-card h3{margin:0 0 12px;color:#fff;font-size:22px}.sidebar-card p{color:#b6c6d8;line-height:1.7}.full-btn{width:100%;justify-content:center}.sidebar-links{list-style:none;margin:0;padding:0}.sidebar-links li{border-bottom:1px solid rgba(148,163,184,.12)}.sidebar-links li:last-child{border-bottom:0}.sidebar-links a{display:block;padding:13px 0;color:#cbd5e1}.sidebar-links a:hover{color:var(--primary)}
@media(max-width:992px){.service-layout{grid-template-columns:1fr}.service-sidebar{position:static}.process-grid,.key-points-grid{grid-template-columns:1fr}.service-hero{min-height:auto;padding:90px 5% 60px}.service-main-section{padding-left:5%;padding-right:5%}.content-area,.service-block{padding-left:22px;padding-right:22px}.service-block{padding-bottom:28px}}
.footer-logo img,
.site-footer img,
footer img {
max-width: 100px;
height: auto;
}
.dynamic-hero {
background-size: cover;
background-position: center;
}
.hero-text {
max-width: 640px;
color: #cbd5e1;
font-size: 17px;
line-height: 1.8;
}
.hero-text p {
margin: 0;
}
.hero-card img,
.section-image-card img {
width: 100%;
max-height: 430px;
object-fit: contain;
display: block;
}
.section-grid {
display: grid;
grid-template-columns: 1fr 0.85fr;
gap: 50px;
align-items: center;
}
.section-image-card {
background: rgba(9, 22, 43, .86);
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 24px;
padding: 28px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}
.cta-section {
background-size: cover;
background-position: center;
border-radius: 0;
}
.custom-section .section-head {
max-width: 900px;
}
@media (max-width: 768px) {
.section-grid {
grid-template-columns: 1fr;
}
}
/* ===== Premium Homepage Redesign ===== */
.container {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
.ced-hero,
.ced-section {
position: relative;
overflow: hidden;
}
.ced-hero {
min-height: 720px;
display: flex;
align-items: center;
padding: 110px 0 90px;
background:
radial-gradient(circle at 20% 20%, rgba(0, 200, 255, .18), transparent 32%),
radial-gradient(circle at 80% 35%, rgba(0, 112, 255, .16), transparent 28%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
background-size: cover;
background-position: center;
border-bottom: 1px solid rgba(0, 200, 255, .14);
}
.ced-hero::before,
.ced-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(circle at center, black, transparent 78%);
}
.ced-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 70px;
align-items: center;
}
.ced-hero-content {
max-width: 760px;
}
.ced-hero h1 {
margin: 18px 0 24px;
max-width: 720px;
font-size: clamp(46px, 6vw, 84px);
line-height: .98;
letter-spacing: -2.6px;
color: #fff;
}
.ced-hero p,
.ced-text {
color: #c8d7ea;
font-size: 17px;
line-height: 1.85;
}
.ced-text p {
margin-top: 0;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
color: #00d9ff;
background: rgba(0, 200, 255, .09);
border: 1px solid rgba(0, 200, 255, .28);
font-weight: 800;
font-size: 12px;
letter-spacing: .3px;
}
.hero-actions {
margin-top: 32px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 24px;
border-radius: 999px;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
color: #00111f;
text-decoration: none;
font-weight: 900;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 14px 38px rgba(0, 200, 255, .24);
}
.btn.ghost {
background: rgba(255,255,255,.04);
color: #fff;
box-shadow: none;
border: 1px solid rgba(255,255,255,.16);
}
.ced-trust-row {
margin-top: 34px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ced-trust-row span {
padding: 10px 13px;
border-radius: 999px;
color: #dbeafe;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.09);
font-size: 13px;
font-weight: 700;
}
.ced-hero-visual {
display: flex;
justify-content: center;
}
.ced-cyber-card,
.ced-image-panel {
position: relative;
width: 100%;
min-height: 360px;
border-radius: 32px;
background:
radial-gradient(circle at 50% 42%, rgba(0, 217, 255, .24), transparent 32%),
linear-gradient(145deg, rgba(8, 42, 66, .84), rgba(5, 21, 39, .92));
border: 1px solid rgba(0, 200, 255, .24);
box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
overflow: hidden;
}
.ced-cyber-card::before,
.ced-image-panel::before {
content: "";
position: absolute;
inset: 28px;
border-radius: 24px;
background-image:
linear-gradient(90deg, transparent 0 18%, rgba(0, 200, 255, .18) 18% 19%, transparent 19% 100%),
linear-gradient(rgba(0, 200, 255, .13) 1px, transparent 1px);
background-size: 150px 80px, 100% 70px;
opacity: .75;
}
.ced-orbit {
position: absolute;
width: 190px;
height: 190px;
inset: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(0, 217, 255, .75);
display: grid;
place-items: center;
box-shadow: 0 0 45px rgba(0, 217, 255, .22);
}
.ced-shield {
width: 76px;
height: 76px;
border-radius: 24px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #00e5ff, #1367ff);
box-shadow: 0 18px 38px rgba(0, 200, 255, .28);
font-size: 34px;
}
.ced-cyber-card.small {
min-height: 320px;
}
.ced-section {
padding: 115px 0;
background:
radial-gradient(circle at 12% 20%, rgba(0, 200, 255, .08), transparent 28%),
#020914;
}
.ced-section + .ced-section {
border-top: 1px solid rgba(255,255,255,.045);
}
.ced-split {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 70px;
align-items: center;
}
.ced-section-content h2,
.ced-section-head h2,
.ced-cta-box h2 {
margin: 16px 0 20px;
color: #fff;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.05;
letter-spacing: -1.4px;
}
.ced-section-head {
position: relative;
z-index: 1;
max-width: 820px;
margin-bottom: 48px;
}
.ced-section-head.center {
text-align: center;
margin-inline: auto;
}
.ced-image-panel {
min-height: 360px;
padding: 26px;
display: grid;
place-items: center;
}
.ced-image-panel img,
.ced-hero-visual img {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 430px;
object-fit: contain;
display: block;
}
.ced-card-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.ced-service-card,
.ced-feature-card,
.ced-empty-box {
border-radius: 26px;
background:
linear-gradient(145deg, rgba(10, 31, 55, .94), rgba(5, 18, 34, .96));
border: 1px solid rgba(148, 163, 184, .16);
box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
overflow: hidden;
transition: .25s ease;
}
.ced-service-card:hover,
.ced-feature-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 200, 255, .42);
box-shadow: 0 34px 95px rgba(0, 200, 255, .12);
}
.ced-service-card img {
width: 100%;
height: 235px;
object-fit: cover;
display: block;
}
.ced-card-body,
.ced-feature-card,
.ced-empty-box {
padding: 30px;
}
.card-icon,
.ced-feature-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 16px;
margin-bottom: 18px;
color: #00111f;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
font-weight: 900;
}
.ced-service-card h3,
.ced-feature-card h3 {
color: #fff;
margin: 0 0 14px;
font-size: 24px;
line-height: 1.22;
}
.ced-service-card p,
.ced-feature-card p,
.ced-empty-box {
color: #b8c8dc;
line-height: 1.75;
}
.read-more {
display: inline-flex;
margin-top: 16px;
color: #00d9ff;
text-decoration: none;
font-weight: 900;
}
.ced-cta {
background:
radial-gradient(circle at 80% 50%, rgba(0, 200, 255, .15), transparent 30%),
#020914;
background-size: cover;
background-position: center;
}
.ced-cta-box {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
padding: 54px;
border-radius: 34px;
background:
linear-gradient(135deg, rgba(9, 38, 68, .94), rgba(4, 18, 34, .96));
border: 1px solid rgba(0, 200, 255, .22);
box-shadow: 0 30px 95px rgba(0, 0, 0, .28);
}
.ced-cta-box > div {
max-width: 760px;
}
/* Fix old sections if old classes still exist */
.section {
padding-top: 110px;
padding-bottom: 110px;
}
.services-grid,
.grid-3 {
gap: 26px;
}
.service-card,
.card {
padding: 0;
border-radius: 24px;
}
/* Mobile */
@media (max-width: 992px) {
.ced-hero-grid,
.ced-split {
grid-template-columns: 1fr;
gap: 42px;
}
.ced-card-grid {
grid-template-columns: 1fr 1fr;
}
.ced-cta-box {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.container {
width: min(100% - 26px, 1180px);
}
.ced-hero {
min-height: auto;
padding: 80px 0 70px;
}
.ced-hero h1 {
font-size: 42px;
letter-spacing: -1.4px;
}
.ced-section {
padding: 78px 0;
}
.ced-card-grid {
grid-template-columns: 1fr;
}
.ced-cyber-card,
.ced-image-panel {
min-height: 280px;
}
.ced-cta-box {
padding: 30px;
}
}
/* ===== Service Card Media + Icon Box Fix ===== */
.ced-service-media {
position: relative;
height: 240px;
overflow: hidden;
background:
radial-gradient(circle at 50% 40%, rgba(0, 200, 255, .20), transparent 34%),
linear-gradient(145deg, rgba(8, 42, 66, .92), rgba(5, 21, 39, .96));
border-bottom: 1px solid rgba(0, 200, 255, .14);
}
.ced-service-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: .92;
transition: .3s ease;
}
.ced-service-card:hover .ced-service-media img {
transform: scale(1.06);
opacity: 1;
}
.ced-service-placeholder {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.ced-service-placeholder span {
width: 90px;
height: 90px;
display: grid;
place-items: center;
border-radius: 28px;
background: linear-gradient(135deg, #00e5ff, #006dff);
box-shadow: 0 22px 55px rgba(0, 200, 255, .24);
font-size: 42px;
}
.ced-service-icon {
position: absolute;
left: 24px;
bottom: -24px;
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 18px;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
color: #00111f;
border: 4px solid #061426;
box-shadow: 0 16px 35px rgba(0, 200, 255, .28);
font-size: 26px;
z-index: 2;
}
.ced-service-card .ced-card-body {
padding-top: 46px;
}
/* ===== Service Card Media + Real Icon Image ===== */
.ced-service-media {
position: relative;
height: 240px;
overflow: hidden;
background:
radial-gradient(circle at 50% 40%, rgba(0, 200, 255, .20), transparent 34%),
linear-gradient(145deg, rgba(8, 42, 66, .92), rgba(5, 21, 39, .96));
border-bottom: 1px solid rgba(0, 200, 255, .14);
}
.ced-service-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: .92;
transition: .3s ease;
}
.ced-service-card:hover .ced-service-media img {
transform: scale(1.06);
opacity: 1;
}
.ced-service-placeholder {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.ced-service-placeholder span {
width: 90px;
height: 90px;
display: grid;
place-items: center;
border-radius: 28px;
background: linear-gradient(135deg, #00e5ff, #006dff);
box-shadow: 0 22px 55px rgba(0, 200, 255, .24);
font-size: 42px;
}
.ced-service-icon {
position: absolute;
left: 24px;
bottom: -24px;
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 18px;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
color: #00111f;
border: 4px solid #061426;
box-shadow: 0 16px 35px rgba(0, 200, 255, .28);
z-index: 2;
}
.ced-service-icon img {
width: 32px;
height: 32px;
object-fit: contain;
display: block;
}
.ced-service-icon span {
font-size: 26px;
line-height: 1;
}
.ced-service-card .ced-card-body {
padding-top: 46px;
}
/* ===== Homepage Services Clean Card Layout ===== */
.homepage-services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
position: relative;
z-index: 2;
}
.homepage-service-card {
min-height: 330px;
padding: 36px 34px;
border-radius: 28px;
background:
radial-gradient(circle at top left, rgba(0, 200, 255, .12), transparent 34%),
linear-gradient(145deg, rgba(10, 31, 55, .96), rgba(5, 18, 34, .98));
border: 1px solid rgba(0, 200, 255, .22);
box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
transition: .25s ease;
}
.homepage-service-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 200, 255, .48);
box-shadow: 0 34px 95px rgba(0, 200, 255, .14);
}
.homepage-service-icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 22px;
margin-bottom: 30px;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 25%),
linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 18px 45px rgba(0, 200, 255, .22);
}
.homepage-service-icon img {
width: 42px;
height: 42px;
object-fit: contain;
display: block;
}
.homepage-service-icon span {
font-size: 34px;
line-height: 1;
}
.homepage-service-card h3 {
color: #ffffff;
font-size: 28px;
line-height: 1.2;
margin: 0 0 18px;
}
.homepage-service-card p {
color: #c8d7ea;
font-size: 17px;
line-height: 1.75;
margin: 0 0 28px;
}
.homepage-service-card .read-more {
color: #00d9ff;
font-weight: 900;
text-decoration: none;
}
/* Hide old huge service media if old classes still affect homepage */
.homepage-services-grid .ced-service-media,
.homepage-services-grid .ced-service-placeholder,
.homepage-services-grid .ced-service-icon {
display: none !important;
}
@media (max-width: 992px) {
.homepage-services-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.homepage-services-grid {
grid-template-columns: 1fr;
}
.homepage-service-card {
min-height: auto;
padding: 30px 26px;
}
}
/* ===== Services Page Clean Layout ===== */
.services-page-hero {
padding: 135px 0 80px;
text-align: center;
background:
radial-gradient(circle at top center, rgba(0, 200, 255, .16), transparent 34%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
border-bottom: 1px solid rgba(0, 200, 255, .14);
}
.services-page-hero h1 {
margin: 18px 0 20px;
color: #ffffff;
font-size: clamp(42px, 6vw, 76px);
line-height: 1;
letter-spacing: -2px;
}
.services-page-hero p {
max-width: 760px;
margin: 0 auto;
color: #c8d7ea;
font-size: 17px;
line-height: 1.8;
}
.services-page-section {
padding-top: 95px;
}
.services-page-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
position: relative;
z-index: 2;
}
.services-page-card {
min-height: 330px;
padding: 36px 34px;
border-radius: 28px;
background:
radial-gradient(circle at top left, rgba(0, 200, 255, .12), transparent 34%),
linear-gradient(145deg, rgba(10, 31, 55, .96), rgba(5, 18, 34, .98));
border: 1px solid rgba(0, 200, 255, .22);
box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
transition: .25s ease;
}
.services-page-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 200, 255, .48);
box-shadow: 0 34px 95px rgba(0, 200, 255, .14);
}
.services-page-icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 22px;
margin-bottom: 30px;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 25%),
linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 18px 45px rgba(0, 200, 255, .22);
}
.services-page-icon img {
width: 42px;
height: 42px;
object-fit: contain;
display: block;
}
.services-page-icon span {
font-size: 34px;
line-height: 1;
}
.services-page-card h3 {
color: #ffffff;
font-size: 28px;
line-height: 1.2;
margin: 0 0 18px;
}
.services-page-card p {
color: #c8d7ea;
font-size: 17px;
line-height: 1.75;
margin: 0 0 28px;
}
.services-page-card .read-more {
color: #00d9ff;
font-weight: 900;
text-decoration: none;
}
/* Hide old services page card/image styles if cached classes still exist */
.services-page-grid .service-card,
.services-page-grid .ced-service-card {
all: unset;
}
@media (max-width: 992px) {
.services-page-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.services-page-grid {
grid-template-columns: 1fr;
}
.services-page-card {
min-height: auto;
padding: 30px 26px;
}
.services-page-hero {
padding: 100px 0 60px;
}
}
/* =========================================================
HOMEPAGE CLEAN REPAIR - chunk safe override
Scope: homepage ced sections only. Keeps global header/footer.
========================================================= */
.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.ced-section,.ced-hero{position:relative;overflow:hidden}.ced-section{padding:110px 0;background:#020914}.ced-section + .ced-section{border-top:1px solid rgba(0,217,255,.08)}.ced-section::before,.ced-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}.ced-section .container,.ced-hero .container{position:relative;z-index:1}.ced-section-head{max-width:820px;margin-bottom:46px}.ced-section-head.center{text-align:center;margin-inline:auto}.ced-section-head h2,.ced-about-content h2,.ced-cta-box h2{font-size:clamp(34px,4vw,58px);line-height:1.06;letter-spacing:-1.4px;color:#fff;margin:16px 0 18px}.ced-text{color:#c8d7ea;font-size:17px;line-height:1.85}.ced-text p{margin-top:0}.eyebrow{display:inline-flex;align-items:center;width:max-content;padding:8px 14px;border-radius:999px;color:#00d9ff;background:rgba(0,217,255,.09);border:1px solid rgba(0,217,255,.28);font-weight:800;font-size:12px;letter-spacing:.3px}.ced-home-hero{min-height:720px;display:flex;align-items:center;padding:110px 0 95px;background:radial-gradient(circle at 20% 20%,rgba(0,217,255,.18),transparent 32%),radial-gradient(circle at 80% 35%,rgba(0,112,255,.16),transparent 28%),linear-gradient(135deg,#031225 0%,#061426 48%,#020813 100%);background-size:cover;background-position:center;border-bottom:1px solid rgba(0,217,255,.14)}.ced-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.ced-hero-content{max-width:760px}.ced-hero-content h1{font-size:clamp(46px,6vw,82px);line-height:.99;letter-spacing:-2.6px;color:#fff;margin:18px 0 24px}.ced-hero-content p{color:#c8d7ea;font-size:17px;line-height:1.85}.hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 24px;border-radius:999px;background:linear-gradient(135deg,#00e5ff,#00a7ff);color:#00111f!important;text-decoration:none;font-weight:900;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 38px rgba(0,217,255,.24)}.btn.ghost{background:rgba(255,255,255,.04);color:#fff!important;box-shadow:none;border:1px solid rgba(255,255,255,.16)}.ced-trust-row{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}.ced-trust-row span{padding:10px 13px;border-radius:999px;color:#dbeafe;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:700}.ced-hero-photo-frame{width:min(100%,460px);margin-left:auto;border-radius:30px;padding:16px;background:linear-gradient(145deg,rgba(8,42,66,.7),rgba(5,21,39,.94));border:1px solid rgba(0,217,255,.24);box-shadow:0 30px 90px rgba(0,0,0,.38)}.ced-hero-photo-frame img{width:100%;height:430px;object-fit:cover;object-position:center;border-radius:20px;display:block}.ced-cyber-card{position:relative;width:100%;min-height:360px;border-radius:32px;background:radial-gradient(circle at 50% 42%,rgba(0,217,255,.24),transparent 32%),linear-gradient(145deg,rgba(8,42,66,.84),rgba(5,21,39,.92));border:1px solid rgba(0,217,255,.24);box-shadow:0 30px 90px rgba(0,0,0,.38);overflow:hidden}.ced-orbit{position:absolute;width:190px;height:190px;inset:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(0,217,255,.75);display:grid;place-items:center;box-shadow:0 0 45px rgba(0,217,255,.22)}.ced-shield{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,#00e5ff,#1367ff);font-size:34px}.ced-mini-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.ced-mini-card,.ced-home-service-card,.ced-feature-card,.ced-process-card{background:linear-gradient(145deg,rgba(10,31,55,.95),rgba(5,18,34,.98));border:1px solid rgba(0,217,255,.18);border-radius:24px;padding:28px;box-shadow:0 20px 65px rgba(0,0,0,.22);transition:.25s ease}.ced-mini-card:hover,.ced-home-service-card:hover,.ced-feature-card:hover,.ced-process-card:hover{transform:translateY(-7px);border-color:rgba(0,217,255,.42)}.ced-mini-icon,.ced-feature-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,#00e5ff,#00a7ff);color:#00111f;font-weight:900;margin-bottom:16px}.ced-mini-card h3,.ced-home-service-card h3,.ced-feature-card h3,.ced-process-card h3{color:#fff;font-size:23px;line-height:1.22;margin:0 0 12px}.ced-mini-card p,.ced-home-service-card p,.ced-feature-card p,.ced-process-card p{color:#b8c8dc;line-height:1.72;margin:0}.ced-about-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.ced-about-visual{position:relative;border-radius:30px;padding:28px;background:linear-gradient(145deg,rgba(10,31,55,.82),rgba(5,18,34,.96));border:1px solid rgba(0,217,255,.18);box-shadow:0 24px 80px rgba(0,0,0,.25)}.ced-about-visual img{width:100%;border-radius:22px;display:block}.ced-about-badge-card{min-height:280px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:24px;background:radial-gradient(circle at center,rgba(0,217,255,.16),transparent 38%),rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);padding:28px}.ced-about-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(135deg,#00e5ff,#006dff);font-size:34px;margin-bottom:18px}.ced-about-badge-card h3{color:#fff;margin:0 0 10px}.ced-about-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.ced-about-stat-row div{padding:15px;border-radius:16px;background:rgba(0,217,255,.07);border:1px solid rgba(0,217,255,.12)}.ced-about-stat-row strong{display:block;color:#00d9ff;font-size:22px}.ced-about-stat-row span{font-size:12px;color:#b8c8dc}.ced-about-checks{display:grid;gap:10px;margin:24px 0}.ced-about-checks div{padding:12px 14px;border-radius:14px;color:#dbeafe;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.ced-home-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.ced-home-service-card{min-height:315px}.ced-home-service-icon{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#00e5ff,#0077ff);box-shadow:0 18px 45px rgba(0,217,255,.22);margin-bottom:28px}.ced-home-service-icon img{width:40px;height:40px;object-fit:contain}.ced-home-service-icon span{font-size:32px}.read-more{display:inline-flex;margin-top:20px;color:#00d9ff!important;text-decoration:none;font-weight:900}.ced-section-action{text-align:center;margin-top:36px}.ced-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.ced-process-card span{display:inline-flex;color:#00d9ff;font-size:28px;font-weight:900;margin-bottom:18px}.ced-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.ced-faq-section .ced-section-head{margin-left:0;text-align:left}.ced-faq-list{display:grid;gap:14px}.ced-faq-item{border-radius:16px;background:rgba(10,31,55,.92);border:1px solid rgba(0,217,255,.16);overflow:hidden}.ced-faq-item summary{cursor:pointer;padding:18px 22px;color:#fff;font-weight:800;list-style:none}.ced-faq-item summary::-webkit-details-marker{display:none}.ced-faq-item p{padding:0 22px 20px;color:#b8c8dc;margin:0}.ced-cta-box{display:flex;align-items:center;justify-content:space-between;gap:38px;padding:54px;border-radius:34px;background:linear-gradient(135deg,rgba(9,38,68,.94),rgba(4,18,34,.96));border:1px solid rgba(0,217,255,.22);box-shadow:0 30px 95px rgba(0,0,0,.28)}.ced-cta-box>div{max-width:760px}
@media(max-width:1100px){.ced-mini-card-grid,.ced-process-grid{grid-template-columns:repeat(2,1fr)}.ced-hero-grid,.ced-about-layout{grid-template-columns:1fr;gap:42px}.ced-hero-photo-frame{margin-left:0}.ced-home-service-grid,.ced-feature-grid{grid-template-columns:1fr 1fr}.site-header{padding-left:5%;padding-right:5%}}
@media(max-width:700px){.container{width:min(100% - 28px,1180px)}.site-header{padding:12px 18px}.ced-home-hero{min-height:auto;padding:72px 0 68px}.ced-hero-content h1{font-size:40px;letter-spacing:-1.4px}.ced-hero-photo-frame img{height:auto;max-height:360px}.ced-section{padding:74px 0}.ced-mini-card-grid,.ced-home-service-grid,.ced-feature-grid,.ced-process-grid{grid-template-columns:1fr}.ced-about-stat-row{grid-template-columns:1fr}.ced-cta-box{padding:30px;flex-direction:column;align-items:flex-start}.ced-section-head h2,.ced-about-content h2,.ced-cta-box h2{font-size:34px}.footer-grid{grid-template-columns:1fr!important}.site-nav{max-height:calc(100vh - 110px);overflow:auto}}
/* =========================================================
OUR TEAM PAGE + TEAM DASHBOARD SAFE STYLES
Scope: team page only; does not modify homepage section classes.
========================================================= */
.team-hero-section {
position: relative;
overflow: hidden;
padding: 125px 0 95px;
background:
radial-gradient(circle at 18% 20%, rgba(0, 217, 255, .20), transparent 34%),
radial-gradient(circle at 84% 38%, rgba(25, 255, 163, .11), transparent 28%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
border-bottom: 1px solid rgba(0, 217, 255, .14);
}
.team-hero-section::before,
.team-members-section::before,
.team-strength-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.team-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 70px;
align-items: center;
}
.team-hero-content h1 {
color: #fff;
font-size: clamp(46px, 6vw, 82px);
line-height: .98;
letter-spacing: -2.4px;
margin: 18px 0 24px;
}
.team-hero-content p {
max-width: 720px;
color: #c8d7ea;
font-size: 18px;
line-height: 1.85;
}
.team-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}
.team-hero-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 34px;
max-width: 650px;
}
.team-hero-stats div {
padding: 18px;
border-radius: 20px;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.09);
}
.team-hero-stats strong {
display: block;
color: #00d9ff;
font-size: 30px;
line-height: 1;
margin-bottom: 8px;
}
.team-hero-stats span {
color: #b8c8dc;
font-size: 13px;
font-weight: 700;
}
.team-hero-panel {
display: flex;
justify-content: center;
}
.team-orbit-card {
position: relative;
width: min(100%, 460px);
min-height: 460px;
display: grid;
place-items: center;
border-radius: 38px;
background:
radial-gradient(circle at center, rgba(0,217,255,.22), transparent 34%),
linear-gradient(145deg, rgba(8,42,66,.84), rgba(5,21,39,.94));
border: 1px solid rgba(0,217,255,.24);
box-shadow: 0 30px 90px rgba(0,0,0,.38);
overflow: hidden;
}
.team-orbit-card::before {
content: "";
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
border: 1px solid rgba(0,217,255,.55);
box-shadow: 0 0 80px rgba(0,217,255,.14);
}
.team-orbit-icon {
position: relative;
z-index: 1;
width: 118px;
height: 118px;
display: grid;
place-items: center;
border-radius: 34px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 22px 65px rgba(0,217,255,.28);
font-size: 54px;
}
.orbit-dot {
position: absolute;
z-index: 1;
width: 68px;
height: 68px;
display: grid;
place-items: center;
border-radius: 22px;
background: rgba(10,31,55,.95);
border: 1px solid rgba(0,217,255,.28);
box-shadow: 0 18px 48px rgba(0,0,0,.25);
font-size: 30px;
}
.dot-one { top: 70px; right: 84px; }
.dot-two { left: 72px; bottom: 96px; }
.dot-three { right: 88px; bottom: 72px; }
.team-intro-section {
padding: 80px 0;
background: #020914;
}
.team-intro-card {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 44px;
align-items: center;
padding: 44px;
border-radius: 32px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.12), transparent 36%),
linear-gradient(145deg, rgba(10,31,55,.95), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 80px rgba(0,0,0,.24);
}
.team-intro-card h2 {
color: #fff;
font-size: clamp(34px, 4vw, 54px);
line-height: 1.05;
letter-spacing: -1.3px;
margin: 16px 0 0;
}
.team-intro-card p {
color: #c8d7ea;
font-size: 17px;
line-height: 1.85;
margin: 0;
}
.team-members-section,
.team-strength-section,
.team-cta-section {
position: relative;
overflow: hidden;
padding: 105px 0;
background: #020914;
border-top: 1px solid rgba(0,217,255,.08);
}
.premium-team-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
}
.premium-team-card {
position: relative;
overflow: hidden;
border-radius: 30px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.14), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 70px rgba(0,0,0,.25);
transition: .28s ease;
}
.premium-team-card:hover {
transform: translateY(-9px);
border-color: rgba(0,217,255,.46);
box-shadow: 0 34px 95px rgba(0,217,255,.12);
}
.team-card-top {
position: relative;
padding: 28px 28px 0;
}
.team-photo-frame {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 26px;
overflow: hidden;
display: grid;
place-items: center;
background:
radial-gradient(circle at center, rgba(0,217,255,.20), transparent 34%),
linear-gradient(145deg, rgba(8,42,66,.92), rgba(5,21,39,.96));
border: 1px solid rgba(0,217,255,.20);
}
.team-photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-photo-frame span {
width: 106px;
height: 106px;
display: grid;
place-items: center;
border-radius: 32px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
color: #02101f;
font-size: 38px;
font-weight: 900;
box-shadow: 0 18px 45px rgba(0,217,255,.28);
}
.team-role-pill {
position: absolute;
left: 44px;
right: 44px;
bottom: -18px;
min-height: 44px;
display: grid;
place-items: center;
text-align: center;
padding: 9px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
color: #00111f;
font-weight: 900;
font-size: 13px;
box-shadow: 0 14px 38px rgba(0,217,255,.24);
}
.team-card-body {
padding: 48px 28px 28px;
}
.team-card-body h3 {
color: #fff;
font-size: 25px;
line-height: 1.18;
margin: 0 0 10px;
}
.team-location {
display: inline-flex;
align-items: center;
gap: 6px;
color: #00d9ff;
font-weight: 800;
font-size: 13px;
margin-bottom: 16px;
}
.team-card-body p {
color: #b8c8dc;
line-height: 1.75;
margin: 0 0 22px;
}
.team-social-row {
display: flex;
flex-wrap: wrap;
gap: 9px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.08);
}
.team-social-row a {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 14px;
background: rgba(0,217,255,.08);
border: 1px solid rgba(0,217,255,.18);
color: #00d9ff;
font-weight: 900;
font-size: 12px;
transition: .22s ease;
}
.team-social-row a:hover {
background: #00d9ff;
color: #00111f;
}
.team-strength-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.team-strength-card {
min-height: 250px;
padding: 32px;
border-radius: 28px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.12), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
.team-strength-card span {
display: inline-flex;
color: #00d9ff;
font-size: 34px;
font-weight: 900;
margin-bottom: 18px;
}
.team-strength-card h3 {
color: #fff;
font-size: 26px;
margin: 0 0 14px;
}
.team-strength-card p {
color: #b8c8dc;
line-height: 1.75;
margin: 0;
}
.team-cta-section {
padding-top: 70px;
}
.team-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 34px;
padding: 54px;
border-radius: 34px;
background:
radial-gradient(circle at top right, rgba(0,217,255,.16), transparent 38%),
linear-gradient(135deg, rgba(9,38,68,.94), rgba(4,18,34,.96));
border: 1px solid rgba(0,217,255,.22);
box-shadow: 0 30px 95px rgba(0,0,0,.28);
}
.team-cta-box h2 {
color: #fff;
font-size: clamp(34px, 4vw, 54px);
line-height: 1.05;
letter-spacing: -1.3px;
margin: 16px 0;
}
.team-cta-box p {
color: #c8d7ea;
line-height: 1.8;
max-width: 780px;
margin: 0;
}
.table-thumb {
width: 54px;
height: 54px;
border-radius: 14px;
object-fit: cover;
display: block;
}
.table-icon-text {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 14px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
color: #00111f;
font-weight: 900;
}
.actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
@media (max-width: 1180px) {
.premium-team-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 992px) {
.team-hero-grid,
.team-intro-card {
grid-template-columns: 1fr;
}
.team-hero-stats,
.team-strength-grid {
grid-template-columns: 1fr;
}
.premium-team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.team-orbit-card {
min-height: 360px;
}
.team-cta-box {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.team-hero-section {
padding: 80px 0 65px;
}
.team-hero-content h1 {
font-size: 40px;
letter-spacing: -1.4px;
}
.team-members-section,
.team-strength-section,
.team-cta-section,
.team-intro-section {
padding: 72px 0;
}
.premium-team-grid {
grid-template-columns: 1fr;
}
.team-intro-card,
.team-cta-box {
padding: 30px;
}
.team-card-top {
padding: 22px 22px 0;
}
.team-card-body {
padding: 46px 22px 24px;
}
.team-role-pill {
left: 34px;
right: 34px;
}
.team-social-row a {
width: 36px;
height: 36px;
}
}
/* =========================================================
OUR TEAM PAGE REDESIGN - scoped team-only styles
========================================================= */
.team-hero-section {
position: relative;
overflow: hidden;
padding: 130px 0 95px;
background:
radial-gradient(circle at 18% 18%, rgba(0,217,255,.18), transparent 32%),
radial-gradient(circle at 82% 20%, rgba(25,255,163,.11), transparent 28%),
linear-gradient(135deg, #031225 0%, #061426 54%, #020813 100%);
border-bottom: 1px solid rgba(0,217,255,.14);
}
.team-hero-section::before,
.team-department-section::before,
.team-leadership-section::before,
.team-trust-section::before,
.team-cta-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(circle at center, black, transparent 80%);
}
.team-hero-inner,
.team-section-head,
.team-grid,
.team-founder-card,
.team-coming-soon-card,
.team-trust-grid,
.team-cta-box,
.team-empty-box {
position: relative;
z-index: 1;
}
.team-hero-inner {
max-width: 920px;
text-align: center;
margin: 0 auto;
}
.team-hero-inner h1 {
margin: 18px 0 22px;
color: #fff;
font-size: clamp(44px, 6vw, 82px);
line-height: .98;
letter-spacing: -2.4px;
}
.team-hero-inner p {
max-width: 790px;
margin: 0 auto;
color: #c8d7ea;
font-size: 18px;
line-height: 1.85;
}
.team-hero-pills {
margin-top: 34px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.team-hero-pills a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 16px;
border-radius: 999px;
color: #dbeafe;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
font-weight: 800;
}
.team-hero-pills a:hover {
color: #00111f;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
}
.team-leadership-section,
.team-department-section,
.team-trust-section,
.team-cta-section {
position: relative;
overflow: hidden;
padding: 105px 0;
background:
radial-gradient(circle at 12% 15%, rgba(0,217,255,.08), transparent 28%),
#020914;
}
.team-department-section.alt {
background:
radial-gradient(circle at 78% 18%, rgba(25,255,163,.08), transparent 30%),
#041022;
}
.team-section-head {
max-width: 850px;
margin-bottom: 45px;
}
.team-section-head.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.team-section-head h2,
.team-trust-grid h2,
.team-cta-box h2 {
margin: 16px 0 18px;
color: #fff;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.05;
letter-spacing: -1.4px;
}
.team-section-head p,
.team-trust-grid p,
.team-cta-box p {
color: #c8d7ea;
font-size: 17px;
line-height: 1.85;
margin: 0;
}
.team-founder-card {
display: grid;
grid-template-columns: 420px 1fr;
gap: 42px;
align-items: center;
padding: 34px;
border-radius: 36px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.14), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.24);
box-shadow: 0 34px 105px rgba(0,0,0,.30);
}
.team-member-photo {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 28px;
background:
radial-gradient(circle at center, rgba(0,217,255,.16), transparent 42%),
#061426;
border: 1px solid rgba(0,217,255,.20);
display: grid;
place-items: center;
}
.team-member-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: .35s ease;
}
.team-member-photo span {
width: 84px;
height: 84px;
border-radius: 26px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #00e5ff, #0077ff);
color: #00111f;
font-size: 38px;
font-weight: 900;
}
.founder-photo {
border-radius: 30px;
box-shadow: 0 28px 70px rgba(0,217,255,.12);
}
.team-member-content h3 {
color: #fff;
font-size: clamp(28px, 3vw, 46px);
line-height: 1.05;
margin: 12px 0 10px;
letter-spacing: -1px;
}
.team-member-content strong {
display: block;
color: #00d9ff;
font-size: 17px;
margin-bottom: 8px;
}
.team-ribbon {
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
background: rgba(0,217,255,.10);
border: 1px solid rgba(0,217,255,.28);
color: #00d9ff;
font-weight: 900;
font-size: 12px;
letter-spacing: .4px;
}
.team-location {
margin: 0 0 14px;
color: #dbeafe;
font-weight: 700;
}
.team-bio {
color: #b8c8dc;
line-height: 1.75;
margin: 0 0 22px;
}
.team-grid.three-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.team-member-card {
overflow: hidden;
border-radius: 30px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.10), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
transition: .25s ease;
}
.team-member-card:hover {
transform: translateY(-8px);
border-color: rgba(0,217,255,.46);
box-shadow: 0 34px 95px rgba(0,217,255,.12);
}
.team-member-card:hover .team-member-photo img {
transform: scale(1.05);
}
.team-member-card .team-member-photo {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(0,217,255,.16);
}
.team-member-card .team-member-content {
padding: 28px;
}
.team-member-card .team-member-content h3 {
font-size: 26px;
line-height: 1.16;
margin-top: 0;
}
.team-socials {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.team-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 7px 11px;
border-radius: 999px;
color: #00d9ff;
background: rgba(0,217,255,.07);
border: 1px solid rgba(0,217,255,.18);
font-size: 12px;
font-weight: 900;
}
.team-socials a:hover {
color: #00111f;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
}
.team-empty-box,
.team-coming-soon-card {
padding: 34px;
border-radius: 28px;
background: rgba(10,31,55,.86);
border: 1px dashed rgba(0,217,255,.30);
color: #c8d7ea;
}
.team-empty-box.wide {
grid-column: 1 / -1;
}
.team-empty-box h3,
.team-coming-soon-card h3 {
margin: 0 0 10px;
color: #fff;
font-size: 24px;
}
.team-coming-soon-card {
display: flex;
align-items: center;
gap: 24px;
}
.team-coming-icon {
width: 76px;
height: 76px;
flex: 0 0 76px;
display: grid;
place-items: center;
border-radius: 24px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
font-size: 34px;
}
.team-trust-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 48px;
align-items: center;
}
.team-trust-cards {
display: grid;
gap: 16px;
}
.team-trust-cards div {
padding: 22px;
border-radius: 22px;
background: rgba(10,31,55,.92);
border: 1px solid rgba(0,217,255,.16);
}
.team-trust-cards strong {
display: block;
color: #fff;
font-size: 20px;
margin-bottom: 6px;
}
.team-trust-cards span {
color: #b8c8dc;
line-height: 1.7;
}
.team-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 34px;
padding: 54px;
border-radius: 34px;
background:
radial-gradient(circle at top right, rgba(0,217,255,.16), transparent 34%),
linear-gradient(135deg, rgba(9,38,68,.94), rgba(4,18,34,.96));
border: 1px solid rgba(0,217,255,.22);
box-shadow: 0 30px 95px rgba(0,0,0,.28);
}
.team-cta-box > div {
max-width: 760px;
}
.team-admin-thumb,
.team-admin-initial {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
object-fit: cover !important;
object-position: top center !important;
border-radius: 16px !important;
display: grid;
place-items: center;
}
.small-team-preview img,
.admin-form .small-team-preview img {
width: 120px !important;
height: 120px !important;
max-width: 120px !important;
max-height: 120px !important;
object-fit: cover !important;
object-position: top center !important;
border-radius: 18px !important;
}
@media (max-width: 1100px) {
.team-founder-card,
.team-trust-grid {
grid-template-columns: 1fr;
}
.team-grid.three-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.team-hero-section {
padding: 88px 0 68px;
}
.team-hero-inner h1 {
font-size: 40px;
letter-spacing: -1.3px;
}
.team-leadership-section,
.team-department-section,
.team-trust-section,
.team-cta-section {
padding: 74px 0;
}
.team-founder-card {
padding: 22px;
gap: 24px;
}
.team-grid.three-columns {
grid-template-columns: 1fr;
}
.team-coming-soon-card {
flex-direction: column;
align-items: flex-start;
}
.team-cta-box {
padding: 30px;
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
SERVICES SECTION FIX + SERVICES PAGE REDESIGN
Safe scope: homepage service cards + services page only.
No images are used for service cards in these sections.
========================================================= */
/* Homepage services: keep box size, increase only the icon/emoji size */
.ced-services-section .ced-home-service-icon {
width: 68px;
height: 68px;
}
.ced-services-section .ced-home-service-icon img {
display: none !important;
}
.ced-services-section .ced-home-service-icon span {
font-size: 44px;
line-height: 1;
display: grid;
place-items: center;
}
.ced-services-section .ced-home-service-card {
min-height: 330px;
}
/* New services page design */
.ced-services-hero {
position: relative;
overflow: hidden;
padding: 125px 0 95px;
background:
radial-gradient(circle at 18% 20%, rgba(0, 217, 255, .20), transparent 34%),
radial-gradient(circle at 84% 38%, rgba(25, 255, 163, .10), transparent 28%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
border-bottom: 1px solid rgba(0, 217, 255, .14);
}
.ced-services-hero::before,
.ced-services-overview::before,
.ced-services-list-section::before,
.ced-services-process-section::before,
.ced-services-why-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.ced-services-hero .container,
.ced-services-overview .container,
.ced-services-list-section .container,
.ced-services-process-section .container,
.ced-services-why-section .container {
position: relative;
z-index: 1;
}
.ced-services-hero-grid {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 70px;
align-items: center;
}
.ced-services-hero h1 {
margin: 18px 0 24px;
max-width: 780px;
font-size: clamp(44px, 6vw, 80px);
line-height: .99;
letter-spacing: -2.4px;
color: #fff;
}
.ced-services-hero p {
max-width: 740px;
color: #c8d7ea;
font-size: 18px;
line-height: 1.85;
}
.ced-services-hero-card {
min-height: 430px;
border-radius: 34px;
padding: 34px;
display: grid;
align-content: center;
gap: 30px;
background:
radial-gradient(circle at 50% 35%, rgba(0, 217, 255, .24), transparent 32%),
linear-gradient(145deg, rgba(8, 42, 66, .88), rgba(5, 21, 39, .96));
border: 1px solid rgba(0, 217, 255, .24);
box-shadow: 0 30px 90px rgba(0,0,0,.36);
}
.ced-services-orbit {
width: 180px;
height: 180px;
margin: 0 auto;
border-radius: 50%;
border: 1px solid rgba(0, 217, 255, .62);
display: grid;
place-items: center;
box-shadow: 0 0 65px rgba(0, 217, 255, .18), inset 0 0 35px rgba(0, 217, 255, .12);
}
.ced-services-orbit span {
width: 84px;
height: 84px;
border-radius: 26px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #00e5ff, #006dff);
font-size: 46px;
box-shadow: 0 18px 45px rgba(0, 217, 255, .28);
}
.ced-services-mini-list {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.ced-services-mini-list div {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
}
.ced-services-mini-list strong {
color: #fff;
}
.ced-services-mini-list small {
color: #b8c8dc;
text-align: right;
}
.ced-services-overview,
.ced-services-list-section,
.ced-services-process-section,
.ced-services-why-section {
position: relative;
overflow: hidden;
padding: 105px 0;
background:
radial-gradient(circle at 12% 20%, rgba(0, 217, 255, .08), transparent 28%),
#020914;
border-top: 1px solid rgba(0, 217, 255, .08);
}
.ced-services-trust-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.ced-services-trust-grid article,
.ced-services-clean-card,
.ced-services-process-grid article {
border-radius: 26px;
padding: 30px;
background:
radial-gradient(circle at top left, rgba(0, 217, 255, .10), transparent 36%),
linear-gradient(145deg, rgba(10,31,55,.95), rgba(5,18,34,.98));
border: 1px solid rgba(0, 217, 255, .18);
box-shadow: 0 22px 70px rgba(0,0,0,.22);
transition: .25s ease;
}
.ced-services-trust-grid article:hover,
.ced-services-clean-card:hover,
.ced-services-process-grid article:hover {
transform: translateY(-7px);
border-color: rgba(0, 217, 255, .42);
}
.ced-services-trust-grid span,
.ced-services-process-grid span {
display: inline-flex;
color: #00d9ff;
font-size: 30px;
font-weight: 900;
margin-bottom: 18px;
}
.ced-services-trust-grid h3,
.ced-services-clean-card h3,
.ced-services-process-grid h3 {
color: #fff;
margin: 0 0 12px;
font-size: 24px;
line-height: 1.22;
}
.ced-services-trust-grid p,
.ced-services-clean-card p,
.ced-services-process-grid p,
.ced-services-why-box p {
color: #b8c8dc;
line-height: 1.75;
margin: 0;
}
.ced-services-clean-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.ced-services-clean-card {
min-height: 360px;
display: flex;
flex-direction: column;
}
.ced-services-clean-icon {
width: 72px;
height: 72px;
flex: 0 0 72px;
display: grid;
place-items: center;
border-radius: 22px;
margin-bottom: 26px;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 25%),
linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 18px 45px rgba(0, 217, 255, .22);
}
.ced-services-clean-icon span {
font-size: 46px;
line-height: 1;
display: grid;
place-items: center;
}
.ced-services-clean-icon img {
display: none !important;
}
.ced-services-process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
.ced-services-why-box {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 44px;
align-items: center;
padding: 54px;
border-radius: 34px;
background:
radial-gradient(circle at 80% 50%, rgba(0, 217, 255, .14), transparent 30%),
linear-gradient(135deg, rgba(9,38,68,.94), rgba(4,18,34,.96));
border: 1px solid rgba(0, 217, 255, .22);
box-shadow: 0 30px 95px rgba(0,0,0,.28);
}
.ced-services-why-box h2 {
margin: 16px 0 18px;
color: #fff;
font-size: clamp(34px, 4vw, 56px);
line-height: 1.05;
letter-spacing: -1.3px;
}
.ced-services-check-list {
display: grid;
gap: 14px;
}
.ced-services-check-list div {
padding: 16px 18px;
border-radius: 16px;
color: #dbeafe;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
font-weight: 700;
}
@media (max-width: 1100px) {
.ced-services-hero-grid,
.ced-services-why-box {
grid-template-columns: 1fr;
gap: 42px;
}
.ced-services-clean-grid,
.ced-services-trust-grid {
grid-template-columns: 1fr 1fr;
}
.ced-services-process-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 700px) {
.ced-services-hero {
padding: 82px 0 70px;
}
.ced-services-hero h1 {
font-size: 40px;
letter-spacing: -1.3px;
}
.ced-services-hero-card {
min-height: auto;
padding: 28px;
}
.ced-services-overview,
.ced-services-list-section,
.ced-services-process-section,
.ced-services-why-section {
padding: 74px 0;
}
.ced-services-clean-grid,
.ced-services-trust-grid,
.ced-services-process-grid {
grid-template-columns: 1fr;
}
.ced-services-why-box {
padding: 30px;
}
.ced-services-mini-list div {
display: block;
}
.ced-services-mini-list small {
display: block;
text-align: left;
margin-top: 4px;
}
}
/* =========================================================
ABOUT PAGE REDESIGN - scoped only for /about page
Does not modify homepage, services page, team page, header or footer.
========================================================= */
.about-premium-hero,
.about-premium-section {
position: relative;
overflow: hidden;
}
.about-premium-hero {
padding: 125px 0 95px;
background:
radial-gradient(circle at 16% 18%, rgba(0,217,255,.20), transparent 34%),
radial-gradient(circle at 86% 34%, rgba(25,255,163,.10), transparent 28%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
border-bottom: 1px solid rgba(0,217,255,.14);
}
.about-premium-hero::before,
.about-premium-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.about-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 70px;
align-items: center;
}
.about-hero-content h1 {
color: #fff;
font-size: clamp(44px, 6vw, 82px);
line-height: .99;
letter-spacing: -2.4px;
margin: 18px 0 24px;
}
.about-hero-content p {
max-width: 720px;
color: #c8d7ea;
font-size: 18px;
line-height: 1.85;
}
.about-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
.about-hero-points {
margin-top: 34px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.about-hero-points span {
padding: 10px 13px;
border-radius: 999px;
color: #dbeafe;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.09);
font-size: 13px;
font-weight: 700;
}
.about-hero-visual {
display: flex;
justify-content: center;
}
.about-command-card {
width: min(100%, 470px);
border-radius: 34px;
overflow: hidden;
background:
radial-gradient(circle at center, rgba(0,217,255,.18), transparent 36%),
linear-gradient(145deg, rgba(8,42,66,.88), rgba(5,21,39,.96));
border: 1px solid rgba(0,217,255,.24);
box-shadow: 0 30px 90px rgba(0,0,0,.38);
}
.about-command-top {
display: flex;
gap: 8px;
padding: 18px 22px;
background: rgba(255,255,255,.045);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.about-command-top span {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(0,217,255,.65);
}
.about-command-body {
padding: 44px 34px 36px;
text-align: center;
}
.about-command-shield {
width: 112px;
height: 112px;
margin: 0 auto 24px;
display: grid;
place-items: center;
border-radius: 34px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 22px 65px rgba(0,217,255,.28);
font-size: 54px;
}
.about-command-body h3 {
color: #fff;
font-size: 28px;
margin: 0 0 10px;
}
.about-command-body p {
color: #b8c8dc;
margin: 0 0 26px;
}
.about-command-list {
display: grid;
gap: 12px;
text-align: left;
}
.about-command-list div {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
border-radius: 16px;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
}
.about-command-list strong {
color: #00d9ff;
font-size: 18px;
}
.about-command-list span {
color: #dbeafe;
font-weight: 700;
}
.about-premium-section {
padding: 105px 0;
background: #020914;
border-top: 1px solid rgba(0,217,255,.08);
}
.about-premium-section .container {
position: relative;
z-index: 1;
}
.about-section-head {
max-width: 820px;
margin-bottom: 48px;
}
.about-section-head.center {
text-align: center;
margin-inline: auto;
}
.about-section-head h2,
.about-intro-card h2,
.about-mvv-card h2,
.about-cta-box h2 {
color: #fff;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.06;
letter-spacing: -1.4px;
margin: 16px 0 18px;
}
.about-section-head p,
.about-rich-text,
.about-mvv-card p,
.about-cta-box p {
color: #c8d7ea;
font-size: 17px;
line-height: 1.85;
}
.about-intro-grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 34px;
align-items: stretch;
}
.about-intro-card,
.about-side-box,
.about-service-box,
.about-mvv-card,
.about-process-card {
border-radius: 28px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.12), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.95), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
.about-intro-card {
padding: 44px;
}
.about-intro-side {
display: grid;
gap: 20px;
}
.about-side-box {
padding: 32px;
}
.about-side-box span,
.about-process-card span {
display: inline-flex;
color: #00d9ff;
font-size: 30px;
font-weight: 900;
margin-bottom: 18px;
}
.about-side-box h3,
.about-service-box h3,
.about-mvv-card h3,
.about-process-card h3 {
color: #fff;
font-size: 25px;
line-height: 1.22;
margin: 0 0 12px;
}
.about-side-box p,
.about-service-box p,
.about-process-card p {
color: #b8c8dc;
line-height: 1.76;
margin: 0;
}
.about-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.about-service-box {
padding: 34px;
transition: .25s ease;
}
.about-service-box:hover,
.about-process-card:hover,
.about-mvv-card:hover {
transform: translateY(-7px);
border-color: rgba(0,217,255,.42);
}
.about-service-icon,
.about-mvv-icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 22px;
margin-bottom: 26px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
color: #00111f;
font-size: 38px;
box-shadow: 0 18px 45px rgba(0,217,255,.22);
}
.about-mvv-grid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 24px;
}
.about-mvv-card {
padding: 34px;
}
.about-mvv-card.featured {
grid-row: span 3;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 520px;
padding: 48px;
background:
radial-gradient(circle at 20% 20%, rgba(0,217,255,.16), transparent 36%),
linear-gradient(145deg, rgba(12,38,68,.95), rgba(5,18,34,.98));
}
.about-process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
.about-process-card {
padding: 30px;
}
.about-trust-grid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 54px;
align-items: center;
}
.about-trust-list {
display: grid;
gap: 16px;
}
.about-trust-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 20px;
border-radius: 20px;
background: rgba(10,31,55,.92);
border: 1px solid rgba(0,217,255,.16);
}
.about-trust-item span {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(135deg, #00e5ff, #00a7ff);
color: #00111f;
font-weight: 900;
}
.about-trust-item p {
color: #c8d7ea;
margin: 0;
line-height: 1.7;
}
.about-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 38px;
padding: 54px;
border-radius: 34px;
background:
radial-gradient(circle at 80% 50%, rgba(0,217,255,.14), transparent 30%),
linear-gradient(135deg, rgba(9,38,68,.94), rgba(4,18,34,.96));
border: 1px solid rgba(0,217,255,.22);
box-shadow: 0 30px 95px rgba(0,0,0,.28);
}
.about-cta-box > div {
max-width: 760px;
}
@media (max-width: 1100px) {
.about-hero-grid,
.about-intro-grid,
.about-trust-grid {
grid-template-columns: 1fr;
gap: 42px;
}
.about-service-grid,
.about-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-mvv-grid {
grid-template-columns: 1fr;
}
.about-mvv-card.featured {
grid-row: auto;
min-height: auto;
}
}
@media (max-width: 700px) {
.about-premium-hero {
padding: 76px 0 68px;
}
.about-hero-content h1 {
font-size: 40px;
letter-spacing: -1.4px;
}
.about-premium-section {
padding: 74px 0;
}
.about-intro-card,
.about-mvv-card.featured,
.about-cta-box {
padding: 30px;
}
.about-service-grid,
.about-process-grid {
grid-template-columns: 1fr;
}
.about-section-head h2,
.about-intro-card h2,
.about-mvv-card h2,
.about-cta-box h2 {
font-size: 34px;
}
.about-cta-box {
flex-direction: column;
align-items: flex-start;
}
.about-command-body {
padding: 34px 24px 28px;
}
}
/* =========================================================
BLOG + ARTICLE PAGE REDESIGN
Scope: blog and article pages only. Does not modify homepage/team/services/about classes.
========================================================= */
.blog-hero-section,
.blog-featured-section,
.blog-listing-section,
.blog-topics-section,
.blog-cta-section,
.article-hero-section,
.article-main-section {
position: relative;
overflow: hidden;
background: #020914;
}
.blog-hero-section {
padding: 125px 0 95px;
background:
radial-gradient(circle at 18% 20%, rgba(0, 217, 255, .20), transparent 34%),
radial-gradient(circle at 84% 38%, rgba(25, 255, 163, .11), transparent 28%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
border-bottom: 1px solid rgba(0, 217, 255, .14);
}
.blog-hero-section::before,
.blog-featured-section::before,
.blog-listing-section::before,
.blog-topics-section::before,
.article-hero-section::before,
.article-main-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.blog-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 70px;
align-items: center;
}
.blog-hero-content h1,
.article-hero-content h1 {
color: #fff;
font-size: clamp(44px, 6vw, 82px);
line-height: .99;
letter-spacing: -2.4px;
margin: 18px 0 24px;
}
.blog-hero-content p,
.article-hero-content p,
.blog-section-head p,
.blog-cta-box p {
color: #c8d7ea;
font-size: 17px;
line-height: 1.85;
max-width: 760px;
}
.blog-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}
.blog-topic-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
.blog-topic-pills span {
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.09);
color: #dbeafe;
font-weight: 800;
font-size: 13px;
}
.blog-hero-panel {
display: flex;
justify-content: center;
}
.blog-knowledge-card {
width: min(100%, 460px);
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 38px;
padding: 42px;
background:
radial-gradient(circle at center, rgba(0,217,255,.20), transparent 34%),
linear-gradient(145deg, rgba(8,42,66,.84), rgba(5,21,39,.94));
border: 1px solid rgba(0,217,255,.24);
box-shadow: 0 30px 90px rgba(0,0,0,.38);
}
.blog-knowledge-icon {
width: 108px;
height: 108px;
display: grid;
place-items: center;
border-radius: 34px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
color: #00111f;
box-shadow: 0 22px 65px rgba(0,217,255,.28);
font-size: 48px;
margin-bottom: 28px;
}
.blog-knowledge-card h3 {
color: #fff;
font-size: 34px;
line-height: 1.08;
margin: 0 0 14px;
}
.blog-knowledge-card p {
color: #b8c8dc;
line-height: 1.75;
margin: 0 0 24px;
}
.blog-knowledge-list {
display: grid;
gap: 10px;
}
.blog-knowledge-list span {
padding: 12px 14px;
border-radius: 14px;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
color: #dbeafe;
font-weight: 700;
}
.blog-featured-section,
.blog-listing-section,
.blog-topics-section,
.article-main-section {
padding: 105px 0;
border-top: 1px solid rgba(0,217,255,.08);
}
.blog-section-head {
position: relative;
z-index: 1;
margin-bottom: 42px;
max-width: 820px;
}
.blog-section-head.center {
text-align: center;
margin-inline: auto;
}
.blog-section-head h2,
.blog-featured-content h2,
.blog-cta-box h2 {
color: #fff;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.06;
letter-spacing: -1.4px;
margin: 16px 0 18px;
}
.blog-featured-card {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 0;
overflow: hidden;
border-radius: 34px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.12), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.20);
box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.blog-featured-media {
min-height: 430px;
background:
radial-gradient(circle at center, rgba(0,217,255,.18), transparent 34%),
linear-gradient(145deg, rgba(8,42,66,.92), rgba(5,21,39,.96));
display: grid;
place-items: center;
overflow: hidden;
}
.blog-featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-featured-placeholder {
width: 150px;
height: 150px;
display: grid;
place-items: center;
border-radius: 42px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 22px 65px rgba(0,217,255,.28);
font-size: 64px;
}
.blog-featured-content {
padding: 54px;
align-self: center;
}
.blog-meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.blog-meta-row span {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
background: rgba(0,217,255,.08);
border: 1px solid rgba(0,217,255,.18);
color: #00d9ff;
font-weight: 900;
font-size: 12px;
}
.blog-featured-content p,
.blog-card-body p,
.blog-topic-card p,
.article-side-card p {
color: #b8c8dc;
line-height: 1.75;
}
.blog-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.blog-card {
overflow: hidden;
border-radius: 30px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.12), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
transition: .28s ease;
}
.blog-card:hover {
transform: translateY(-8px);
border-color: rgba(0,217,255,.44);
box-shadow: 0 34px 95px rgba(0,217,255,.12);
}
.blog-card-media {
height: 230px;
display: grid;
place-items: center;
background:
radial-gradient(circle at center, rgba(0,217,255,.16), transparent 34%),
linear-gradient(145deg, rgba(8,42,66,.92), rgba(5,21,39,.96));
border-bottom: 1px solid rgba(0,217,255,.12);
overflow: hidden;
}
.blog-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-card-icon {
width: 92px;
height: 92px;
display: grid;
place-items: center;
border-radius: 30px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 18px 45px rgba(0,217,255,.24);
font-size: 42px;
}
.blog-card-body {
padding: 30px;
}
.blog-card-body h3 {
color: #fff;
font-size: 26px;
line-height: 1.18;
margin: 0 0 14px;
}
.blog-topics-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.blog-topic-card {
min-height: 260px;
padding: 34px;
border-radius: 30px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.12), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
.blog-topic-card span {
display: inline-flex;
color: #00d9ff;
font-size: 34px;
font-weight: 900;
margin-bottom: 20px;
}
.blog-topic-card h3 {
color: #fff;
font-size: 26px;
line-height: 1.18;
margin: 0 0 14px;
}
.blog-cta-section {
padding: 70px 0 105px;
}
.blog-cta-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 34px;
padding: 54px;
border-radius: 34px;
background:
radial-gradient(circle at top right, rgba(0,217,255,.16), transparent 38%),
linear-gradient(135deg, rgba(9,38,68,.94), rgba(4,18,34,.96));
border: 1px solid rgba(0,217,255,.22);
box-shadow: 0 30px 95px rgba(0,0,0,.28);
}
.blog-empty-state {
position: relative;
z-index: 1;
text-align: center;
max-width: 720px;
margin-inline: auto;
padding: 60px;
border-radius: 32px;
background: linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
}
.blog-empty-state span {
font-size: 54px;
}
.blog-empty-state h2 {
color: #fff;
font-size: 38px;
margin: 14px 0 10px;
}
.blog-empty-state p {
color: #b8c8dc;
}
.article-hero-section {
padding: 120px 0 80px;
background:
radial-gradient(circle at 18% 20%, rgba(0,217,255,.18), transparent 34%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
border-bottom: 1px solid rgba(0,217,255,.14);
}
.article-hero-content {
position: relative;
z-index: 1;
max-width: 940px;
}
.article-back-link {
display: inline-flex;
margin-bottom: 24px;
color: #00d9ff;
font-weight: 900;
}
.article-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 30px;
align-items: start;
}
.article-content-card,
.article-side-card {
border-radius: 30px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.08), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
.article-content-card {
overflow: hidden;
}
.article-featured-image {
display: block;
max-width: 100%;
border-bottom: 1px solid rgba(0,217,255,.14);
}
.article-rich-content {
padding: 42px;
color: #c8d7ea;
font-size: 18px;
line-height: 1.9;
}
.article-rich-content p:first-child {
margin-top: 0;
}
.article-rich-content h2,
.article-rich-content h3,
.article-rich-content h4 {
color: #fff;
letter-spacing: -.4px;
}
.article-rich-content a {
color: #00d9ff;
font-weight: 800;
}
.article-rich-content ul,
.article-rich-content ol {
padding-left: 22px;
}
.article-sidebar {
position: sticky;
top: 110px;
display: grid;
gap: 20px;
}
.article-side-card {
padding: 28px;
}
.article-side-icon {
width: 62px;
height: 62px;
display: grid;
place-items: center;
border-radius: 20px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 18px 45px rgba(0,217,255,.22);
font-size: 28px;
margin-bottom: 18px;
}
.article-side-card h3 {
color: #fff;
font-size: 23px;
line-height: 1.2;
margin: 0 0 12px;
}
.article-topic-list {
display: grid;
gap: 10px;
}
.article-topic-list span {
padding: 12px 14px;
border-radius: 14px;
color: #dbeafe;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
font-weight: 700;
}
@media (max-width: 1100px) {
.blog-hero-grid,
.blog-featured-card,
.article-layout {
grid-template-columns: 1fr;
}
.article-sidebar {
position: static;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog-grid,
.blog-topics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.blog-hero-section,
.article-hero-section {
padding: 80px 0 65px;
}
.blog-hero-content h1,
.article-hero-content h1 {
font-size: 40px;
letter-spacing: -1.4px;
}
.blog-featured-section,
.blog-listing-section,
.blog-topics-section,
.article-main-section {
padding: 72px 0;
}
.blog-grid,
.blog-topics-grid,
.article-sidebar {
grid-template-columns: 1fr;
}
.blog-featured-content,
.article-rich-content,
.blog-cta-box,
.blog-empty-state {
padding: 30px;
}
.blog-featured-media {
min-height: 280px;
}
.blog-card-media {
height: 210px;
}
.blog-cta-box {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
HERO FOUNDER CAPTION - homepage only
Safe scoped patch: only affects the hero image name plate.
========================================================= */
.ced-home-hero .ced-hero-photo-frame {
display: flex;
flex-direction: column;
gap: 14px;
}
.ced-home-hero .ced-hero-founder-caption {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 18px;
border-radius: 18px;
background:
radial-gradient(circle at top left, rgba(0, 217, 255, .16), transparent 34%),
rgba(5, 18, 34, .96);
border: 1px solid rgba(0, 217, 255, .22);
box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
}
.ced-home-hero .ced-hero-founder-caption span {
color: #00d9ff;
font-size: 12px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .7px;
}
.ced-home-hero .ced-hero-founder-caption strong {
color: #ffffff;
font-size: 18px;
line-height: 1.1;
font-weight: 900;
text-align: right;
}
@media (max-width: 640px) {
.ced-home-hero .ced-hero-founder-caption {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
.ced-home-hero .ced-hero-founder-caption strong {
text-align: left;
}
}
/* =========================================================
Floating WhatsApp Round Icon Fix
Scope: only .floating-whatsapp button
========================================================= */
.floating-whatsapp {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
width: 66px;
height: 66px;
padding: 0 !important;
border-radius: 50% !important;
display: grid !important;
place-items: center;
background: #25D366 !important;
color: #fff !important;
font-size: 0 !important;
line-height: 0 !important;
box-shadow: 0 18px 42px rgba(37, 211, 102, .34) !important;
border: 1px solid rgba(255, 255, 255, .18);
transition: transform .22s ease, box-shadow .22s ease;
}
.floating-whatsapp:hover {
transform: translateY(-4px) scale(1.04);
box-shadow: 0 24px 55px rgba(37, 211, 102, .45) !important;
}
.floating-whatsapp::before {
content: "";
width: 34px;
height: 34px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M16.04 3.2C9.07 3.2 3.4 8.78 3.4 15.64c0 2.2.6 4.34 1.73 6.22L3.3 28.8l7.14-1.8a12.8 12.8 0 0 0 5.6 1.29c6.97 0 12.64-5.58 12.64-12.44S23.01 3.2 16.04 3.2Zm0 22.97c-1.83 0-3.62-.48-5.18-1.38l-.37-.22-4.22 1.06 1.08-4.06-.25-.41a10.18 10.18 0 0 1-1.57-5.52c0-5.69 4.72-10.32 10.51-10.32s10.51 4.63 10.51 10.32-4.72 10.53-10.51 10.53Zm5.76-7.72c-.31-.15-1.86-.9-2.15-1-.29-.1-.5-.15-.72.15-.21.31-.83 1-.99 1.21-.18.2-.36.23-.67.08-.31-.15-1.32-.48-2.52-1.52-.93-.82-1.56-1.84-1.74-2.15-.18-.31-.02-.48.14-.63.14-.13.31-.36.47-.54.16-.18.21-.31.32-.52.1-.2.05-.39-.03-.54-.08-.15-.72-1.7-.98-2.33-.26-.61-.52-.53-.72-.54h-.61c-.21 0-.55.08-.84.39-.29.31-1.1 1.06-1.1 2.58s1.13 3 1.29 3.2c.16.2 2.23 3.35 5.41 4.7.76.32 1.35.51 1.81.65.76.24 1.45.2 2 .12.61-.09 1.86-.75 2.12-1.47.26-.72.26-1.34.18-1.47-.08-.13-.29-.2-.6-.36Z'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
.floating-whatsapp {
right: 16px;
bottom: 16px;
width: 58px;
height: 58px;
}
.floating-whatsapp::before {
width: 30px;
height: 30px;
}
}
/* =========================================================
Floating Social Icons - safe global footer/widget patch
========================================================= */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.floating-whatsapp {
display: none !important;
}
.floating-socials {
position: fixed;
right: 22px;
bottom: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
}
.floating-social-link {
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 999px;
color: #ffffff !important;
text-decoration: none !important;
pointer-events: auto;
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
transform: translateZ(0);
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.floating-social-link:hover {
transform: translateY(-4px) scale(1.04);
box-shadow: 0 24px 54px rgba(0, 217, 255, .18), 0 18px 42px rgba(0, 0, 0, .30);
filter: brightness(1.06);
}
.floating-social-link svg {
width: 27px;
height: 27px;
display: block;
}
.floating-social-link svg path,
.floating-social-link svg rect,
.floating-social-link svg circle {
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.floating-social-facebook svg path,
.floating-social-youtube svg path,
.floating-social-tiktok svg path,
.floating-social-linkedin svg path,
.floating-social-twitter svg path,
.floating-social-telegram svg path {
fill: currentColor;
stroke: none;
}
.floating-social-whatsapp { background: #25D366; }
.floating-social-facebook { background: #1877F2; }
.floating-social-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0 10%, #fd5949 38%, #d6249f 62%, #285AEB 100%); }
.floating-social-youtube { background: #FF0033; }
.floating-social-tiktok { background: #111111; }
.floating-social-linkedin { background: #0A66C2; }
.floating-social-twitter { background: #111111; }
.floating-social-telegram { background: #229ED9; }
@media (max-width: 768px) {
.floating-socials {
left: 50%;
right: auto;
bottom: 14px;
transform: translateX(-50%);
flex-direction: row;
gap: 8px;
max-width: calc(100vw - 24px);
padding: 8px;
border-radius: 999px;
background: rgba(3, 11, 22, .74);
border: 1px solid rgba(0, 217, 255, .16);
backdrop-filter: blur(14px);
overflow-x: auto;
scrollbar-width: none;
}
.floating-socials::-webkit-scrollbar {
display: none;
}
.floating-social-link {
width: 46px;
height: 46px;
flex: 0 0 46px;
box-shadow: 0 14px 30px rgba(0, 0, 0, .26);
}
.floating-social-link svg {
width: 22px;
height: 22px;
}
}
/* =========================================================
Floating Social Icons - YouTube icon correction
Scope: floating YouTube icon only
========================================================= */
.floating-social-youtube svg path:first-child {
display: none !important;
}
.floating-social-youtube svg path:last-child {
display: block !important;
fill: #ffffff !important;
stroke: none !important;
}
.floating-social-youtube svg {
width: 30px !important;
height: 30px !important;
}
@media (max-width: 768px) {
.floating-social-youtube svg {
width: 24px !important;
height: 24px !important;
}
}
/* =========================================================
Homepage Hero Support Cards + About Stats Update
Scope: homepage only
========================================================= */
.ced-home-hero .ced-trust-row {
display: none !important;
}
.ced-hero-support-section {
padding: 72px 0;
margin-top: 0;
background:
radial-gradient(circle at 18% 5%, rgba(0, 217, 255, .11), transparent 32%),
#020914;
border-top: 1px solid rgba(0, 217, 255, .12);
border-bottom: 1px solid rgba(0, 217, 255, .08);
}
.ced-hero-support-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.ced-hero-support-card {
min-height: 255px;
padding: 34px 32px;
border-radius: 28px;
background:
radial-gradient(circle at top left, rgba(0, 217, 255, .13), transparent 34%),
linear-gradient(145deg, rgba(10, 31, 55, .96), rgba(5, 18, 34, .98));
border: 1px solid rgba(0, 217, 255, .22);
box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ced-hero-support-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 217, 255, .48);
box-shadow: 0 34px 95px rgba(0, 217, 255, .14);
}
.ced-hero-support-icon {
width: 68px;
height: 68px;
display: grid;
place-items: center;
border-radius: 22px;
margin-bottom: 26px;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 25%),
linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 18px 45px rgba(0, 217, 255, .22);
font-size: 34px;
line-height: 1;
}
.ced-hero-support-card h3 {
color: #fff;
font-size: 26px;
line-height: 1.18;
margin: 0 0 16px;
}
.ced-hero-support-card p {
color: #c8d7ea;
font-size: 16px;
line-height: 1.75;
margin: 0;
}
.ced-about-stat-row strong {
font-size: 26px;
line-height: 1.1;
white-space: nowrap;
}
@media (max-width: 992px) {
.ced-hero-support-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.ced-hero-support-section {
padding: 56px 0;
}
.ced-hero-support-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.ced-hero-support-card {
min-height: auto;
padding: 28px 24px;
}
}
/* =========================================================
Office Locations + Certificates Pages
Scope: new pages only
========================================================= */
.office-locations-hero,
.certificates-hero {
position: relative;
overflow: hidden;
padding: 120px 0 90px;
background:
radial-gradient(circle at 18% 18%, rgba(0,217,255,.18), transparent 34%),
radial-gradient(circle at 82% 35%, rgba(25,255,163,.10), transparent 30%),
linear-gradient(135deg, #031225 0%, #061426 48%, #020813 100%);
border-bottom: 1px solid rgba(0,217,255,.14);
}
.office-locations-hero::before,
.certificates-hero::before,
.office-locations-section::before,
.certificates-doc-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.office-locations-hero-grid,
.certificates-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr .95fr;
gap: 62px;
align-items: center;
}
.office-locations-hero h1,
.certificates-hero h1 {
color: #fff;
font-size: clamp(42px, 6vw, 76px);
line-height: 1;
letter-spacing: -2px;
margin: 18px 0 22px;
}
.office-locations-hero p,
.certificates-hero p,
.office-section-head p,
.certificates-section-head p {
color: #c8d7ea;
font-size: 17px;
line-height: 1.85;
max-width: 780px;
}
.office-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 30px;
}
.office-map-panel,
.certificates-summary-card {
border-radius: 32px;
padding: 18px;
background:
radial-gradient(circle at top left, rgba(0,217,255,.14), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.95), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.22);
box-shadow: 0 30px 95px rgba(0,0,0,.30);
}
.office-map-panel iframe {
width: 100%;
height: 420px;
display: block;
border: 0;
border-radius: 22px;
filter: saturate(.9) contrast(.95);
}
.office-locations-section,
.certificates-doc-section,
.certificates-info-section,
.office-process-section,
.office-cta-section,
.certificates-cta-section {
position: relative;
overflow: hidden;
padding: 105px 0;
background: #020914;
border-top: 1px solid rgba(0,217,255,.08);
}
.office-section-head,
.certificates-section-head {
position: relative;
z-index: 1;
max-width: 850px;
margin-bottom: 48px;
}
.office-section-head.center,
.certificates-section-head.center {
text-align: center;
margin-inline: auto;
}
.office-section-head h2,
.certificates-section-head h2,
.office-process-card h2,
.office-cta-box h2,
.certificates-cta-box h2 {
color: #fff;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.06;
letter-spacing: -1.4px;
margin: 16px 0 18px;
}
.office-location-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 20px;
}
.office-location-card,
.certificates-info-grid article,
.certificate-card {
background:
radial-gradient(circle at top left, rgba(0,217,255,.12), transparent 34%),
linear-gradient(145deg, rgba(10,31,55,.96), rgba(5,18,34,.98));
border: 1px solid rgba(0,217,255,.18);
border-radius: 26px;
box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
.office-location-card {
min-height: 300px;
padding: 28px;
transition: .25s ease;
}
.office-location-card:hover,
.certificate-card:hover {
transform: translateY(-7px);
border-color: rgba(0,217,255,.42);
}
.office-location-icon,
.cert-summary-icon,
.certificate-icon {
width: 66px;
height: 66px;
display: grid;
place-items: center;
border-radius: 22px;
background: linear-gradient(135deg, #00e5ff, #0077ff);
box-shadow: 0 18px 45px rgba(0,217,255,.22);
font-size: 31px;
margin-bottom: 22px;
}
.office-location-card h3,
.certificates-summary-card h3,
.certificates-info-grid h3,
.certificate-card h3 {
color: #fff;
margin: 0 0 10px;
line-height: 1.22;
}
.office-location-card h3 {
font-size: 27px;
}
.office-location-card span,
.certificate-card-head span {
display: inline-flex;
color: #00d9ff;
font-weight: 800;
font-size: 13px;
margin-bottom: 14px;
}
.office-location-card p,
.certificates-summary-card p,
.certificates-info-grid p,
.certificate-card p,
.office-process-card p,
.office-cta-box p,
.certificates-cta-box p {
color: #b8c8dc;
line-height: 1.75;
}
.office-process-card,
.office-cta-box,
.certificates-cta-box {
display: grid;
grid-template-columns: 1fr .75fr;
gap: 38px;
align-items: center;
padding: 48px;
border-radius: 34px;
background:
radial-gradient(circle at top right, rgba(0,217,255,.15), transparent 36%),
linear-gradient(135deg, rgba(9,38,68,.94), rgba(4,18,34,.96));
border: 1px solid rgba(0,217,255,.22);
box-shadow: 0 30px 95px rgba(0,0,0,.28);
}
.office-process-list {
display: grid;
gap: 14px;
}
.office-process-list div {
display: grid;
grid-template-columns: 62px 1fr;
align-items: center;
gap: 14px;
padding: 16px;
border-radius: 18px;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.08);
}
.office-process-list strong {
color: #00d9ff;
font-size: 25px;
}
.office-process-list span {
color: #dbeafe;
font-weight: 700;
}
.office-cta-box,
.certificates-cta-box {
grid-template-columns: 1fr auto;
}
.certificates-summary-card {
padding: 34px;
}
.certificates-badges {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 28px;
}
.certificates-badges span {
padding: 10px 13px;
border-radius: 999px;
color: #dbeafe;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.09);
font-size: 13px;
font-weight: 800;
}
.certificates-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.certificates-info-grid article {
padding: 30px;
}
.certificates-info-grid article span {
display: inline-flex;
color: #00d9ff;
font-size: 30px;
font-weight: 900;
margin-bottom: 18px;
}
.certificate-card-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.certificate-card {
padding: 28px;
transition: .25s ease;
}
.certificate-card-head {
display: grid;
grid-template-columns: 78px 1fr;
gap: 18px;
align-items: center;
margin-bottom: 16px;
}
.certificate-icon {
margin: 0;
}
.certificate-frame {
margin-top: 22px;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(0,217,255,.16);
background: rgba(255,255,255,.04);
}
.certificate-frame iframe {
width: 100%;
height: 560px;
display: block;
border: 0;
background: #fff;
}
.certificate-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 18px;
}
@media (max-width: 1180px) {
.office-location-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 992px) {
.office-locations-hero-grid,
.certificates-hero-grid,
.office-process-card,
.office-cta-box,
.certificates-cta-box {
grid-template-columns: 1fr;
}
.certificate-card-grid,
.certificates-info-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.office-locations-hero,
.certificates-hero {
padding: 82px 0 65px;
}
.office-locations-hero h1,
.certificates-hero h1 {
font-size: 40px;
letter-spacing: -1.3px;
}
.office-locations-section,
.certificates-doc-section,
.certificates-info-section,
.office-process-section,
.office-cta-section,
.certificates-cta-section {
padding: 72px 0;
}
.office-location-grid {
grid-template-columns: 1fr;
}
.office-map-panel iframe {
height: 320px;
}
.office-process-card,
.office-cta-box,
.certificates-cta-box,
.certificate-card {
padding: 28px;
}
.certificate-card-head {
grid-template-columns: 1fr;
}
.certificate-frame iframe {
height: 430px;
}
}
/* Header compact spacing for added navigation links */
.site-nav {
gap: 20px;
}
.site-nav a {
white-space: nowrap;
}
@media (max-width: 1100px) and (min-width: 901px) {
.site-header {
padding-left: 4%;
padding-right: 4%;
}
.site-nav {
gap: 15px;
}
.nav-cta {
padding-left: 18px;
padding-right: 18px;
}
}
/* Floating social icon correction */
.floating-social-youtube .youtube-play {
fill: #FF0033 !important;
stroke: none !important;
}
.floating-social-youtube svg path:first-child {
fill: #ffffff !important;
stroke: none !important;
}