:root{
  --apex-navy:#13263D;
  --apex-navy-2:#1a3150;
  --apex-blue:#4E85B4;
  --apex-blue-hover:#3d6f9a;
  --apex-sky:#8ab4d9;
  --apex-ink:#13263D;
  --apex-muted:#5b6b82;
  --apex-line:#e3e9f1;
  --apex-soft:#F3F6F9;
}
html{scroll-behavior:smooth}
section[id],header[id],footer[id],[id].service-anchor{scroll-margin-top:80px}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--apex-ink);-webkit-font-smoothing:antialiased}
a{color:var(--apex-blue);text-decoration:none}
a:hover{color:var(--apex-blue-hover)}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}

/* Buttons */
.btn-apex{background:var(--apex-blue);border:1px solid var(--apex-blue);color:#fff;font-weight:600;padding:.8rem 1.5rem;border-radius:4px;font-size:.9rem}
.btn-apex:hover,.btn-apex:focus{background:var(--apex-blue-hover);border-color:var(--apex-blue-hover);color:#fff}
.btn-apex-outline{border:1.5px solid rgba(255,255,255,.85);color:#fff;font-weight:600;padding:.8rem 1.5rem;border-radius:4px;font-size:.9rem;background:transparent}
.btn-apex-outline:hover{background:#fff;color:var(--apex-navy)}
.btn-apex-sm{padding:.45rem 1rem;font-size:.8rem}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--apex-blue)}
.eyebrow-light{color:#c9d6e8}
.text-sky{color:var(--apex-sky)!important}

/* Navbar */
.apex-nav{background:#fff;box-shadow:0 1px 0 var(--apex-line);padding:.9rem 0}
.apex-nav .navbar-brand img{height:44px;width:auto}
.apex-nav .nav-link{color:var(--apex-ink);font-size:.85rem;font-weight:500;padding:.5rem .9rem!important}
.apex-nav .nav-link:hover,.apex-nav .nav-link.active{color:var(--apex-blue)}

/* Image placeholders — drop your photos into assets/img with these names */
.img-cover{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#1a3558}

/* Hero */
.hero1{position:relative;color:#fff;min-height:620px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(120deg,#13263D 0%,#1a3150 60%,#22405f 100%)}

.hero{position:relative;color:#fff;min-height:620px;display:flex;align-items:center;overflow:hidden;background: linear-gradient(to right, rgb(40 103 162) 66%, rgb(50 94 85) 71% 71%, rgb(85 130 181) 94%)}

.hero::before{content:"";position:absolute;top:0;right:0;bottom:0;width:58%;background:url('../img/Building-1.png') center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%)}
.hero>.container{position:relative;z-index:1}
@media(max-width:991px){.hero::before{width:100%;opacity:.35;-webkit-mask-image:none;mask-image:none}}
.img-cover,.hero::before,.login-left::before{image-rendering:auto;-webkit-backface-visibility:hidden}
.hero h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;font-weight:700}
.hero p.lead{font-size:1.05rem;line-height:1.65;color:#dbe4f0;max-width:520px}

/* Stats */
.stats{background:var(--apex-soft);border-bottom:1px solid var(--apex-line)}
.stat{display:flex;align-items:center;gap:1rem;padding:1.6rem 0}
.stat i{font-size:2rem;color:var(--apex-blue)}
.stat strong{display:block;font-size:1.05rem}
.stat span{font-size:.8rem;color:var(--apex-muted)}
@media(min-width:992px){.stats .col-lg-3+.col-lg-3 .stat{border-left:1px solid var(--apex-line);padding-left:2rem}}

/* Sections */
.section{padding:5.5rem 0}
.section-title{font-size:clamp(1.8rem,3vw,2.4rem)}
.section-sub{color:var(--apex-muted);max-width:620px;margin:0 auto;line-height:1.7}

/* Service cards */
.service-card{border:1px solid var(--apex-line);border-radius:6px;overflow:hidden;background:#fff;height:100%;transition:box-shadow .25s,transform .25s}
.service-card:hover{box-shadow:0 18px 40px -18px rgba(19,38,61,.25);transform:translateY(-3px)}
.service-card .img-cover{height:220px}
.service-card .card-body{padding:1.75rem}
.service-card h3{font-size:1.15rem;display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.service-card h3 i{font-size:1.6rem;color:var(--apex-blue)}
.check-list{list-style:none;padding:0;margin:0 0 1.4rem}
.check-list li{display:flex;gap:.6rem;font-size:.88rem;color:#3d4c63;padding:.3rem 0}
.check-list li i{color:var(--apex-blue)}
.link-more{font-weight:600;font-size:.88rem}
.link-more i{transition:transform .2s}
.link-more:hover i{transform:translateX(4px)}

/* Process */
.process{background:var(--apex-navy);color:#fff}
.process .section-sub{color:#b9c7da}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem;margin-top:3.5rem}
.step{text-align:center;position:relative}
.step .num{width:62px;height:62px;border-radius:50%;background:var(--apex-blue);display:flex;align-items:center;justify-content:center;font-weight:600;margin:0 auto 1.2rem;position:relative;z-index:1;box-shadow:0 0 0 6px rgba(78,133,180,.18)}
.step:not(:last-child)::after{content:"\203A";position:absolute;top:31px;left:calc(50% + 40px);right:calc(-50% + 40px);height:1px;background:rgba(138,180,217,.35);color:var(--apex-sky);line-height:0;text-align:center;font-size:1.4rem}
.step h4{font-size:1.05rem;color:var(--apex-sky);margin-bottom:.5rem}
.step p{font-size:.83rem;color:#c3cfdf;line-height:1.55;max-width:180px;margin:0 auto}
@media(max-width:991px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.step::after{display:none}}
@media(max-width:575px){.steps{grid-template-columns:1fr}}

/* Platform */
.platform{background:linear-gradient(180deg,#f7f9fc,#fff);overflow:hidden}
.check-circle{list-style:none;padding:0;margin:1.5rem 0 2rem}
.check-circle li{display:flex;align-items:center;gap:.8rem;padding:.45rem 0;font-size:.95rem}
.check-circle li i{color:var(--apex-blue);font-size:1.25rem}
.laptop{position:relative;margin-right:-12%}
.laptop .screen{background:#101826;border-radius:16px 16px 0 0;padding:12px;box-shadow:0 30px 60px -20px rgba(19,38,61,.45)}
.laptop .base{height:16px;background:linear-gradient(#cfd6e0,#9aa5b5);border-radius:0 0 14px 14px;margin:0 -5%}
.dash{display:flex;background:#fff;border-radius:6px;overflow:hidden;min-height:320px;font-size:.7rem}
.dash-side{width:28%;background:var(--apex-navy);color:#c3cfdf;padding:14px 0}
.dash-side img{height:22px;margin:0 14px 16px}
.dash-side div{padding:7px 14px;display:flex;gap:8px;align-items:center}
.dash-side div.on{background:var(--apex-blue);color:#fff}
.dash-main{flex:1;padding:16px;color:var(--apex-ink)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 14px}
.kpi{border:1px solid var(--apex-line);border-radius:4px;padding:10px;text-align:center}
.kpi b{display:block;font-size:1.25rem}
.kpi small{color:var(--apex-muted);font-size:.6rem}
.bar{height:6px;background:#e7edf5;border-radius:3px;overflow:hidden}
.bar span{display:block;height:100%;width:70%;background:var(--apex-blue)}
.act{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #eef2f7}
.act .dot{width:8px;height:8px;border-radius:50%}
.act small{margin-left:auto;color:var(--apex-muted);font-size:.6rem}
.act span em{display:block;font-style:normal;color:var(--apex-muted);font-size:.58rem}
@media(max-width:991px){.laptop{margin:3rem 0 0}}

/* Projects */
.project .img-cover{aspect-ratio:4/3;border-radius:4px;margin-bottom:.9rem;transition:transform .3s}
.project:hover .img-cover{transform:scale(1.02)}
.project h5{font-size:.95rem;margin-bottom:.2rem}
.project small{color:var(--apex-muted);font-size:.78rem}

/* CTA */
.cta{background:var(--apex-navy);color:#fff}
.cta .img-cover{background-image:linear-gradient(90deg,rgba(19,38,61,0) 75%,#13263D),url('../img/cta.png')!important}
.cta .img-cover{min-height:420px;height:100%;background-image:linear-gradient(90deg,rgba(19,38,61,0) 75%,rgba(19,38,61,1)),url('../img/cta.png')}
.cta h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.cta p{color:#c3cfdf}

/* Footer */
.footer{background:#13263D;color:#b9c7da;font-size:.86rem;padding:4.5rem 0 0}
.footer img.logo{height:54px}
.footer h6{color:var(--apex-sky);font-weight:600;font-size:.9rem;margin-bottom:1rem}
.footer ul{list-style:none;padding:0;margin:0}
.footer ul li{padding:.25rem 0}
.footer a{color:#dbe4f0}
.footer a:hover{color:#fff}
.footer .contact li{display:flex;gap:.6rem;align-items:center}
.footer .contact i{color:var(--apex-sky)}
.social a{width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:3.5rem;padding:1.5rem 0;font-size:.78rem}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;background:#eef3f9;position:relative;overflow:hidden}
.login-left{position:relative;flex:0 0 55%;color:#fff;padding:5rem 5% 4rem 5%;
  background:linear-gradient(120deg,#13263D 0%,#1a3150 70%);
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.login-left::before{content:"";position:absolute;top:0;right:0;bottom:0;width:62%;background:url('../img/login.jpg') center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
.login-left>*{position:relative;z-index:1}
@media(max-width:991px){.login-left::before{width:100%;opacity:.3;-webkit-mask-image:none;mask-image:none}}
.login-left .brand img{height:60px}
.login-left h1{font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.15;margin:3rem 0 1.25rem;max-width:520px}
.login-left .lead{font-size:1rem;color:#dbe4f0;max-width:420px;line-height:1.6}
.feature{display:flex;gap:1.25rem;align-items:flex-start;margin-top:1.6rem;max-width:380px}
.feature .ico{flex:0 0 62px;height:62px;border:1px solid rgba(255,255,255,.25);background:rgba(19,38,61,.55);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.7rem}
.feature strong{display:block;font-size:.98rem;margin-bottom:.15rem}
.feature span{font-size:.88rem;color:#c9d5e5;line-height:1.5}
.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:3rem 2rem;position:relative;z-index:1}
.login-wrap::after{content:"";position:absolute;right:-10%;top:0;bottom:0;width:45%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 40%,rgba(255,255,255,.55) 60%,transparent 60%);pointer-events:none}
.login-card{background:#fff;border-radius:14px;box-shadow:0 30px 80px -30px rgba(19,38,61,.25);padding:3.25rem 4.25rem;width:100%;max-width:580px;margin-left:-8%}
.login-card .logo{height:62px;display:block;margin:0 auto 1.75rem}
.login-card h2{font-size:1.6rem;text-align:center}
.login-card .sub{text-align:center;color:var(--apex-muted);font-size:.92rem;max-width:340px;margin:0 auto 2rem;line-height:1.6}
.login-card label{font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.input-ico{position:relative}
.input-ico>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7a889c}
.input-ico .form-control{padding:.8rem 2.75rem;border-color:#d7dfea;font-size:.9rem;border-radius:5px}
.input-ico .form-control:focus{border-color:var(--apex-blue);box-shadow:0 0 0 .2rem rgba(78,133,180,.15)}
.input-ico .toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;color:#5b6b82;padding:4px 6px}
.form-check-input:checked{background-color:var(--apex-blue);border-color:var(--apex-blue)}
.divider{display:flex;align-items:center;gap:1rem;color:var(--apex-muted);font-size:.85rem;margin:1.5rem 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--apex-line)}
.btn-ms{border:1.5px solid var(--apex-blue);color:var(--apex-ink);font-weight:600;padding:.8rem;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.75rem;border-radius:5px;width:100%;background:#fff}
.btn-ms:hover{background:var(--apex-soft)}
.ms-logo{display:grid;grid-template-columns:10px 10px;gap:2px}
.ms-logo i{width:10px;height:10px;display:block}
@media(max-width:991px){
  .login-wrap{flex-direction:column}
  .login-left{flex:none;clip-path:none;padding:3rem 1.5rem}
  .login-card{margin:0;padding:2.5rem 1.5rem}
  .login-wrap::after{display:none}
}

/* ---- v2 (Website Notes) ---- */
.apex-nav .navbar-brand img{height:38px}
.btn-login{border:1.5px solid var(--apex-blue);color:var(--apex-blue);font-weight:600;font-size:.8rem;padding:.45rem 1.1rem;border-radius:4px;display:inline-flex;gap:.4rem;align-items:center}
.btn-login:hover{background:var(--apex-blue);color:#fff}
.btn-video{display:inline-flex;align-items:center;gap:.6rem}
.btn-video i{font-size:1.2rem}
.features{background:#fff;border-bottom:1px solid var(--apex-line)}
.features .row>div{padding:2.2rem 1.4rem;text-align:center}
@media(min-width:992px){.features .row>div+div{border-left:1px solid var(--apex-line)}}
.features i{font-size:2.1rem;color:var(--apex-blue);display:block;margin-bottom:.9rem}
.features h3{font-size:.98rem;margin-bottom:.5rem}
.features p{font-size:.82rem;color:var(--apex-muted);line-height:1.55;margin:0}
.service-card p.desc{font-size:.88rem;color:#3d4c63;line-height:1.6;margin-bottom:1rem}
.service-card .check-list{margin-bottom:0}
.hosting{background:var(--apex-soft)}
.hosting img{width:100%;height:auto;display:block;border-radius:8px}
.proj-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.proj-arrows{display:flex;gap:.5rem}
.proj-arrows button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--apex-blue);background:#fff;color:var(--apex-blue);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .2s,color .2s}
.proj-arrows button:hover:not(:disabled){background:var(--apex-blue);color:#fff}
.proj-arrows button:disabled{opacity:.35;cursor:default}
.proj-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*1.5rem)/4);gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.proj-track::-webkit-scrollbar{display:none}
.proj-track .project{scroll-snap-align:start}
@media(max-width:991px){.proj-track{grid-auto-columns:calc((100% - 1.5rem)/2)}}
@media(max-width:575px){.proj-track{grid-auto-columns:85%}}
.footer .addr{align-items:flex-start!important}
.footer .addr i{margin-top:3px}
.quote-modal .modal-content{border:0;border-radius:12px}
.quote-modal .modal-header{background:var(--apex-navy);color:#fff;border-radius:12px 12px 0 0;padding:1.4rem 1.75rem}
.quote-modal .modal-header .btn-close{filter:invert(1)}
.quote-modal .modal-body{padding:1.75rem}
.quote-modal h6{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--apex-blue);margin:1.5rem 0 1rem}
.quote-modal h6:first-child{margin-top:0}
.quote-modal label{font-size:.82rem;font-weight:600}
.quote-modal .form-control,.quote-modal .form-select{font-size:.88rem;border-color:#d7dfea;padding:.6rem .8rem}
.quote-modal .form-control:focus,.quote-modal .form-select:focus{border-color:var(--apex-blue);box-shadow:0 0 0 .2rem rgba(78,133,180,.15)}
.quote-modal .form-check-label{font-size:.88rem;font-weight:500}

/* How we work – building + panel */
.process{position:relative;overflow:hidden;background:linear-gradient(120deg,#13263D 0%,#162c47 55%,#1b3554 100%)}
.process-bg{position:absolute;top:0;bottom:0;left:38%;width:52%;background:url('../img/process-building.png') center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 70%,transparent 100%),linear-gradient(180deg,#000 60%,transparent 92%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 70%,transparent 100%),linear-gradient(180deg,#000 60%,transparent 92%);mask-composite:intersect}
.process-title{font-size:clamp(2rem,3.6vw,3rem);line-height:1.12;color:#fff}
.process-lead{color:#dbe4f0;font-size:1.02rem;line-height:1.65;max-width:440px}
.process-panel{list-style:none;margin:0;padding:1.4rem 1.6rem;background:rgba(40,66,98,.55);border:1px solid rgba(255,255,255,.14);border-radius:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-width:280px}
.process-panel li{display:flex;align-items:center;gap:1rem;padding:.6rem 0;font-size:.95rem;color:#fff}
.process-panel li+li{border-top:1px solid rgba(255,255,255,.08)}
.process-panel i{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.35);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.process .steps{position:relative;margin-top:4rem}
@media(max-width:991px){.process-bg{left:0;width:100%;opacity:.3;-webkit-mask-image:none;mask-image:none}}

/* Partner logos */
#projects{padding-bottom:3.5rem}
.partners{background:var(--apex-soft);border-top:1px solid var(--apex-line);border-bottom:1px solid var(--apex-line);padding:2.25rem 0 2.5rem;overflow:hidden}
.partners-label{text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--apex-muted);margin-bottom:1.5rem}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:apexMarquee 35s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.logo-item{flex:0 0 auto;width:220px;height:64px;display:flex;align-items:center;justify-content:center;gap:.5rem;color:#5d6878;font-size:1.35rem;font-weight:700;opacity:.85;transition:opacity .2s,color .2s;white-space:nowrap}
.logo-item:hover{opacity:1;color:var(--apex-navy)}
.logo-item img{max-height:fit-content;max-width:160px;filter:grayscale(1);opacity:.8}
@keyframes apexMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation-duration:120s}}

.platform-shot{width:100%;height:auto;display:block;border-radius:14px;}
@media(max-width:991px){.platform-shot{margin-top:2.5rem}}

/* Container for the card */
.trusted-card {
  width: 180px; /* Small size */
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

/* Hover effect */
.trusted-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Image Wrapper */
.trusted-card__image-wrapper {
  width: 100%;
  height: 100px; /* Fixed height for consistency */
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa; /* Very subtle background for the logo */
  border-bottom: 1px solid #f0f0f0;
}

/* The Image itself */
.trusted-card__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Ensures the logo isn't stretched or cropped */
  filter: grayscale(100%); /* Optional: makes all logos look uniform (black and white) */
  opacity: 0.7;
  transition: all 0.3s ease;
}

/* Optional: Bring back color on hover */
.trusted-card:hover .trusted-card__image {
  filter: grayscale(0%);
  opacity: 1;
}

/* Caption Area */
.trusted-card__content {
  padding: 12px 10px;
  text-align: center;
}

/* Text Styling */
.trusted-card__caption {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  letter-spacing: 0.3px;
}