:root {
  --navy: #110a2f;
  --accent: #5056a2;
  --ink: #3a3a3a;
  --muted: #6e6e73;
  --line: #e8e8ed;
  --soft: #f7f7f9;
  --white: #ffffff;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* a { color: inherit; text-decoration: none; } */
button, input, textarea, select { font: inherit; }
.section-shell { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.nav-wrap { height: 72px; width: min(var(--max), calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:10px; letter-spacing:-.035em; white-space:nowrap; }
.brand-ba { color:var(--navy); font-weight:760; font-size:28px; }
.brand-rule { width:2px; height:32px; background:var(--accent); display:inline-block; }
.brand-dev { color:var(--ink); font-weight:350; font-size:25px; }
.desktop-nav { display:flex; align-items:center; gap:34px; font-size:14px; color:#4a4a4d; }
.desktop-nav a { transition:opacity .2s ease; }
.desktop-nav a:hover { opacity:.55; }
.nav-cta { padding:10px 16px; border-radius:999px; background:var(--navy); color:white !important; }
.menu-button,.mobile-nav { display:none; }
.hero { padding-top:130px; }
.eyebrow,.section-label { color:var(--accent); font-size:13px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(64px,8.3vw,122px); line-height:.92; letter-spacing:-.066em; font-weight:620; color:var(--navy); margin:22px 0 34px; max-width:1050px; }
.hero-copy { max-width:760px; font-size:clamp(21px,2.3vw,30px); line-height:1.38; letter-spacing:-.025em; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:32px; margin-top:42px; }
.button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:15px 24px; font-weight:600; cursor:pointer; transition:transform .2s ease, opacity .2s ease; }
.button:hover { transform:translateY(-1px); opacity:.92; }
.button-primary { background:var(--navy); color:#fff; }
.text-link { font-weight:600; color:var(--navy); }
.text-link span { color:var(--accent); margin-left:4px; }
.hero-visual { margin-top:100px; height:510px; border-radius:38px; position:relative; overflow:hidden; background:linear-gradient(145deg,#f7f7fb 0%,#f2f3f9 55%,#eceef8 100%); isolation:isolate; }
.visual-grid { position:absolute; inset:0; opacity:.32; background-image:linear-gradient(rgba(80,86,162,.12) 1px, transparent 1px), linear-gradient(90deg,rgba(80,86,162,.12) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to right,transparent,black 25%,black 70%,transparent); }
.visual-orb { position:absolute; border-radius:50%; filter:blur(4px); }
.orb-a { width:430px; height:430px; right:10%; top:-18%; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(80,86,162,.42) 58%,rgba(17,10,47,.10)); box-shadow:0 40px 100px rgba(80,86,162,.16); }
.orb-b { width:250px; height:250px; right:35%; bottom:-20%; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.9),rgba(17,10,47,.18)); }
.visual-content { position:absolute; left:8%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; }
.visual-kicker { color:var(--accent); font-size:14px; font-weight:650; margin-bottom:24px; }
.visual-content strong { font-size:clamp(54px,6vw,88px); line-height:.92; letter-spacing:-.055em; color:var(--navy); font-weight:610; }
.intro { padding-top:190px; display:grid; grid-template-columns:1fr 1.4fr; column-gap:80px; }
.intro .section-label { grid-column:1; }
.intro h2 { grid-column:1 / -1; font-size:clamp(48px,6vw,78px); line-height:.98; letter-spacing:-.055em; font-weight:580; color:var(--navy); margin:24px 0 42px; }
.section-intro { grid-column:2; font-size:22px; line-height:1.5; color:var(--muted); max-width:620px; }
.services { padding-top:90px; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.service-card { background:var(--soft); border-radius:30px; padding:42px; min-height:510px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.service-featured { grid-column:1/-1; min-height:540px; background:linear-gradient(135deg,var(--navy),#27205b 72%,#555ba6); color:#fff; }
.service-index { font-size:13px; opacity:.55; letter-spacing:.08em; }
.service-icon { width:58px; height:58px; margin:72px 0 34px; }
.service-icon svg { width:100%; height:100%; stroke:var(--accent); stroke-width:1.5; }
.service-featured .service-icon svg { stroke:#b9bdf0; }
.service-card h3 { font-size:40px; letter-spacing:-.04em; color:var(--navy); margin-bottom:18px; }
.service-featured h3 { color:#fff; font-size:56px; }
.service-card p { font-size:18px; line-height:1.55; color:var(--muted); max-width:680px; }
.service-featured p { color:rgba(255,255,255,.72); font-size:21px; max-width:760px; }
.service-tags { margin-top:auto; padding-top:30px; display:flex; flex-wrap:wrap; gap:8px; }
.service-tags span { border:1px solid #dedee5; border-radius:999px; padding:8px 12px; font-size:12px; color:#59595e; background:rgba(255,255,255,.55); }
.service-featured .service-tags span { border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.82); background:rgba(255,255,255,.05); }
.statement { padding:200px 0; }
.statement-inner { max-width:980px; margin:auto; text-align:center; }
.statement-inner p { color:var(--accent); font-weight:650; }
.statement-inner h2 { color:var(--navy); font-size:clamp(44px,5vw,72px); line-height:1.08; letter-spacing:-.05em; font-weight:560; }
.approach { padding:120px 0 180px; border-top:1px solid var(--line); }
.approach-heading { display:grid; grid-template-columns:1fr 2fr; align-items:start; }
.approach-heading h2 { font-size:clamp(46px,5vw,68px); letter-spacing:-.05em; line-height:1; color:var(--navy); font-weight:580; }
.steps { margin-top:92px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.step { padding:26px 26px 0 0; border-right:1px solid var(--line); min-height:300px; }
.step + .step { padding-left:26px; }
.step:last-child { border-right:0; }
.step > span { color:var(--accent); font-size:13px; }
.step h3 { color:var(--navy); margin:58px 0 14px; font-size:24px; }
.step p { color:var(--muted); line-height:1.58; font-size:15px; }
.why { padding-bottom:180px; }
.why-panel { background:var(--navy); border-radius:38px; padding:78px; color:#fff; display:grid; grid-template-columns:1.1fr .9fr; gap:90px; }
.section-label.light { color:#aeb3ea; }
.why-copy h2 { font-size:clamp(46px,5vw,70px); letter-spacing:-.055em; line-height:.98; font-weight:570; margin:26px 0 28px; }
.why-copy > p:last-child { color:rgba(255,255,255,.67); font-size:18px; line-height:1.6; max-width:540px; }
.why-points { display:flex; flex-direction:column; justify-content:center; }
.why-points div { display:grid; grid-template-columns:42px 1fr; gap:18px; padding:23px 0; border-bottom:1px solid rgba(255,255,255,.13); }
.why-points strong { color:#aeb3ea; font-size:12px; }
.why-points span { font-size:17px; color:rgba(255,255,255,.9); }
.contact { padding:80px 0 170px; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; }
.contact-copy h2 { color:var(--navy); font-size:clamp(48px,5vw,72px); letter-spacing:-.055em; line-height:1; font-weight:580; margin:24px 0; }
.contact-copy > p:last-child { color:var(--muted); font-size:19px; line-height:1.55; max-width:480px; }
.contact-form { padding:38px; border:1px solid var(--line); border-radius:28px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label { display:block; margin-bottom:18px; }
.contact-form label > span { display:block; font-size:12px; font-weight:650; color:#5c5c60; margin-bottom:9px; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid #dedee4; background:#fbfbfc; border-radius:13px; padding:14px; outline:none; transition:border .2s, box-shadow .2s; color:var(--ink); }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(80,86,162,.09); }
.contact-form textarea { resize:vertical; }
.contact-form .button { width:100%; margin-top:4px; }
.contact-form small { display:block; color:#929298; line-height:1.45; margin-top:12px; }
.footer { border-top:1px solid var(--line); padding:55px 0 30px; display:grid; grid-template-columns:1fr auto; }
.footer-brand p { color:#8b8b90; font-size:13px; margin:14px 0 0; }
.footer-links { display:flex; gap:26px; font-size:13px; align-items:center; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; border-top:1px solid var(--line); margin-top:50px; padding-top:20px; color:#9a9aa0; font-size:12px; }
/* .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; } */
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.07s; }.delay-2 { transition-delay:.14s; }.delay-3 { transition-delay:.21s; }.delay-4 { transition-delay:.28s; }
@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .menu-button { display:flex; width:42px; height:42px; border:0; background:transparent; flex-direction:column; justify-content:center; gap:6px; padding:0 8px; }
  .menu-button span { width:100%; height:1px; background:var(--navy); transition:.2s; }
  .mobile-nav { display:none; padding:10px 24px 24px; flex-direction:column; gap:6px; }
  .mobile-nav.open { display:flex; }
  .mobile-nav a { padding:14px 0; border-bottom:1px solid var(--line); }
  .hero { padding-top:90px; }
  .hero-visual { height:420px; margin-top:70px; }
  .intro { display:block; padding-top:130px; }
  .section-intro { max-width:100%; }
  .services { grid-template-columns:1fr; }
  .service-featured { grid-column:auto; }
  .service-card,.service-featured { min-height:470px; }
  .approach-heading { grid-template-columns:1fr; gap:18px; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2) { border-right:0; }
  .step:nth-child(n+3) { border-top:1px solid var(--line); }
  .why-panel { grid-template-columns:1fr; gap:50px; padding:52px; }
  .contact { grid-template-columns:1fr; gap:50px; }
}
@media (max-width: 620px) {
  .section-shell,.nav-wrap { width:min(100% - 32px,var(--max)); }
  .brand-ba { font-size:24px; }.brand-dev{font-size:21px}.brand-rule{height:28px}
  .hero { padding-top:70px; }
  h1 { font-size:58px; }
  .hero-copy { font-size:20px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .hero-visual { border-radius:24px; height:370px; }
  .visual-content { left:9%; }
  .visual-content strong { font-size:52px; }
  .orb-a { width:300px; height:300px; right:-25%; }
  .intro h2 { font-size:47px; }
  .service-card { padding:30px; border-radius:24px; }
  .service-featured h3 { font-size:44px; }
  .service-icon { margin-top:52px; }
  .statement { padding:130px 0; }
  .approach { padding:100px 0 120px; }
  .steps { grid-template-columns:1fr; }
  .step,.step + .step { padding:26px 0 34px; border-right:0; border-top:1px solid var(--line); min-height:0; }
  .step:first-child { border-top:0; }
  .step h3 { margin-top:28px; }
  .why { padding-bottom:120px; }
  .why-panel { padding:38px 28px; border-radius:26px; }
  .contact { padding-bottom:120px; }
  .contact-form { padding:24px; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .footer { grid-template-columns:1fr; gap:30px; }
  .footer-links { flex-wrap:wrap; }
  .footer-bottom { flex-direction:column; gap:10px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}




 

ul#menu-primary {
    display: flex;
}

a {
    color: black !important;
    text-decoration: none !important;
}
 

ul#menu-primary li {
    margin-right: 25px;
    list-style-type: none;
    font-size: 18px;
    font-weight: 500;
    color: #3a3a3a;
}

ul#menu-primary li:nth-last-child(2) {
    margin-right: 0;
}


a.button.button-primary {
    color: white !important;
}

ul#menu-primary li:last-child a {
     padding: 10px 16px; 
    border-radius: 999px; 
    background: var(--navy); 
    color: white !important;
    font-size: 14px;
    font-weight: 300;
     margin-left: 25px;

}





























/* =========================================================
   ABOUT PAGE
   Everything is scoped under .about-page
   ========================================================= */

.about-page {
    --about-navy: #110a2f;
    --about-accent: #5056a2;
    --about-muted: #6e6e73;
    --about-line: #e8e8ed;
    --about-soft: #f7f7f9;
    --about-white: #ffffff;

    color: var(--about-navy);
    overflow: hidden;
}


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

.about-page .about-hero {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
}

.about-page .about-hero-content {
    position: relative;
    z-index: 2;
    padding: 100px 0;
}

.about-page .about-label {
    color: var(--about-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 22px;
}

.about-page .about-hero h1 {
    color: var(--about-navy);
    font-size: clamp(52px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.06em;
    font-weight: 600;
    margin: 0 0 30px;
    max-width: 650px;
}

.about-page .about-hero-text {
    color: var(--about-muted);
    font-size: 20px;
    line-height: 1.55;
    max-width: 560px;
    margin: 0;
}


/* Hero visual */

.about-page .about-hero-visual {
    position: absolute;
    right: -100px;
    top: 0;
    width: 65%;
    height: 100%;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(247,247,251,.2),
            rgba(236,238,248,.85)
        );
    z-index: 1;
}

.about-page .about-orb {
    position: absolute;
    border-radius: 50%;
    /* filter: blur(5px); */
}

.about-page .about-orb-one {
    width: 360px;
    height: 360px;
    right: 5%;
    top: 10%;
    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,255,255,.95),
            rgba(80,86,162,.42) 60%,
            rgba(17,10,47,.1)
        );
    box-shadow: 0 40px 100px rgba(80,86,162,.16);
}

.about-page .about-orb-two {
    width: 150px;
    height: 150px;
    right: 45%;
    top: 48%;
    background:
        radial-gradient(
            circle at 35% 35%,
            #fff,
            rgba(17,10,47,.13)
        );
}

.about-page .about-orb-three {
    width: 230px;
    height: 230px;
    right: 15%;
    bottom: -80px;
    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255,255,255,.8),
            rgba(80,86,162,.15)
        );
}


/* =========================
   STORY
   ========================= */

.about-page .about-story {
    width: min(1180px, calc(100% - 48px));
    margin: 70px auto 0;
    padding: 65px;
    border-radius: 30px;
    background: linear-gradient(
        135deg,
        #f8f8fc,
        #f3f4fa
    );
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 70px;
    align-items: center;
}

.about-page .about-story-content h2 {
    color: var(--about-navy);
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 580;
    margin: 0 0 25px;
}

.about-page .about-story-content > p:last-child {
    color: var(--about-muted);
    font-size: 17px;
    line-height: 1.6;
    max-width: 450px;
    margin: 0;
}


/* Stats */

.about-page .about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.about-page .about-stat {
    padding: 0 25px;
    border-left: 1px solid #d9d9e2;
    margin-bottom: 25px;
}

.about-page .about-stat strong {
    display: block;
    color: var(--about-navy);
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.04em;
    margin-bottom: 12px;
}

.about-page .about-stat span {
    display: block;
    color: var(--about-muted);
    font-size: 13px;
    line-height: 1.4;
}


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

.about-page .about-services {
    width: min(1180px, calc(100% - 48px));
    margin: 150px auto 0;
}

.about-page .about-services-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 55px;
}

.about-page .about-services-heading h2 {
    color: var(--about-navy);
    font-size: clamp(42px, 5vw, 65px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 580;
    margin: 0;
}

.about-page .about-services-heading > p {
    color: var(--about-muted);
    font-size: 17px;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 0 5px auto;
}


/* Service cards */

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

.about-page .about-service-card {
    min-height: 390px;
    padding: 32px;
    border-radius: 28px;
    background: var(--about-soft);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease;
}

.about-page .about-service-card:hover {
    transform: translateY(-5px);
}

.about-page .about-service-number {
    color: var(--about-muted);
    font-size: 12px;
    letter-spacing: .08em;
}

.about-page .about-service-icon {
    width: 55px;
    height: 55px;
    margin: 65px 0 30px;
    border: 1px solid #b8bce5;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--about-accent);
    font-size: 20px;
    font-weight: 600;
}

.about-page .about-service-card h3 {
    color: var(--about-navy);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.04em;
    margin: 0 0 16px;
}

.about-page .about-service-card p {
    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}


/* =========================
   PEOPLE
   ========================= */

.about-page .about-people {
    width: min(1180px, calc(100% - 48px));
    margin: 150px auto 120px;
    padding: 55px;
    border-radius: 30px;
    background: #f7f7fa;
}

.about-page .about-people-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 55px;
}

.about-page .about-people-heading h2 {
    color: var(--about-navy);
    font-size: clamp(42px, 4vw, 58px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 580;
    margin: 0;
}

.about-page .about-people-heading > p {
    color: var(--about-muted);
    font-size: 17px;
    line-height: 1.55;
    max-width: 350px;
    margin: 35px 0 0 auto;
}


/* People grid */

.about-page .about-people-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.about-page .about-person-image {
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        #dddde5,
        #f4f4f7
    );
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-page .about-person-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #d1d3e8;
    color: var(--about-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 600;
}

.about-page .about-person h3 {
    color: var(--about-navy);
    font-size: 18px;
    margin: 16px 0 5px;
}

.about-page .about-person span {
    color: var(--about-muted);
    font-size: 13px;
}


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

@media (max-width: 900px) {

    .about-page .about-hero {
        grid-template-columns: 1fr;
        min-height: 650px;
    }

    .about-page .about-hero-content {
        padding: 90px 0;
    }

    .about-page .about-hero-visual {
        right: 0;
        width: 100%;
        opacity: .7;
    }

    .about-page .about-story {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 50px;
    }

    .about-page .about-services-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-page .about-services-heading > p {
        margin: 0;
    }

    .about-page .about-service-grid {
        grid-template-columns: 1fr;
    }

    .about-page .about-service-card {
        min-height: 350px;
    }

    .about-page .about-people-heading {
        grid-template-columns: 1fr;
    }

    .about-page .about-people-heading > p {
        margin: 0;
    }

    .about-page .about-people-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 620px) {

    .about-page .about-hero,
    .about-page .about-story,
    .about-page .about-services,
    .about-page .about-people {
        width: min(100% - 32px, 1180px);
    }

    .about-page .about-hero {
        min-height: 600px;
    }

    .about-page .about-hero-content {
        padding: 70px 0;
    }

    .about-page .about-hero h1 {
        font-size: 50px;
    }

    .about-page .about-hero-text {
        font-size: 18px;
    }

    .about-page .about-hero-visual {
        right: -30%;
        width: 120%;
    }

    .about-page .about-orb-one {
        width: 280px;
        height: 280px;
        right: 5%;
    }

    .about-page .about-story {
        margin-top: 40px;
        padding: 30px;
        border-radius: 24px;
    }

    .about-page .about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 0;
    }

    .about-page .about-stat {
        padding: 0 15px;
    }

    .about-page .about-stat:nth-child(3) {
        border-left: 0;
    }

    .about-page .about-services {
        margin-top: 100px;
    }

    .about-page .about-services-heading h2 {
        font-size: 45px;
    }

    .about-page .about-service-card {
        min-height: 330px;
        padding: 28px;
        border-radius: 24px;
    }

    .about-page .about-service-icon {
        margin-top: 45px;
    }

    .about-page .about-people {
        margin-top: 100px;
        margin-bottom: 70px;
        padding: 30px;
        border-radius: 24px;
    }

    .about-page .about-people-heading h2 {
        font-size: 43px;
    }

    .about-page .about-people-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .about-page .about-person-image {
        border-radius: 15px;
    }

}



















/* services */


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

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

.it-services {
    position: relative;
    width: 100%;
    padding: 90px 0 100px;
    background: #ffffff;
    overflow: hidden;
}

.it-services__container {
    width: calc(100% - 340px);
    max-width: 1470px;
    margin: 0 auto;
}


/* ==========================================
   HEADER
========================================== */

.it-services__header {
    max-width: 760px;
    margin-bottom: 38px;
}

.it-services__label {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 20px;

    color: #536cff;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.it-services__label > span {
    display: block;

    width: 28px;
    height: 2px;

    background: #536cff;
}


.it-services__header h2 {
    margin: 0 0 20px;

    color: #11153f;

    font-size: 52px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.it-services__header h2 strong {
    color: #536cff;
    font-weight: 700;
}


.it-services__header p {
    max-width: 650px;

    margin: 0;

    color: #6c7593;

    font-size: 17px;
    line-height: 1.65;
}


/* ==========================================
   IT CONSULTING FEATURE
========================================== */

.it-consulting {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 335px;

    padding: 34px 46px;

    border: 1px solid #dce3ff;
    border-radius: 16px;

    background:
        linear-gradient(
            105deg,
            #f1f4ff 0%,
            #edf0ff 45%,
            #e2e8ff 100%
        );

    overflow: hidden;
}


/* LEFT CONTENT */

.it-consulting__content {
    position: relative;
    z-index: 5;

    width: 68%;
}


.it-consulting__tag {
    display: inline-block;

    margin-bottom: 16px;
    padding: 6px 13px;

    border-radius: 30px;

    background: #dce4ff;

    color: #536cff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* TITLE */

.it-consulting__title {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}


.it-consulting__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 64px;
    height: 64px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #526cff,
        #6949ef
    );

    box-shadow: 0 12px 25px rgba(83, 108, 255, 0.25);
}


.it-consulting__icon span {
    color: #ffffff;

    font-size: 31px;
}


.it-consulting__title h3 {
    margin: 0 0 7px;

    color: #10143d;

    font-size: 31px;
    line-height: 1.2;
    font-weight: 700;
}


.it-consulting__title p {
    max-width: 590px;

    margin: 0;

    color: #5e6886;

    font-size: 15px;
    line-height: 1.6;
}


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

.it-consulting__features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 14px 27px;

    margin-top: 21px;
}


.it-consulting__features div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #4f5b7c;

    font-size: 13px;
    white-space: nowrap;
}


.it-consulting__features div span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #ffffff;

    color: #526cff;

    font-size: 12px;
    font-weight: 700;
}


/* ==========================================
   BUTTON
========================================== */

.it-consulting__button {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    margin-top: 21px;
    padding: 13px 22px;

    border-radius: 30px;

    background: #10143d;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}


.it-consulting__button:hover {
    background: #536cff;
    transform: translateY(-2px);
}


.it-consulting__button span {
    font-size: 18px;

    transition: transform 0.3s ease;
}


.it-consulting__button:hover span {
    transform: translateX(4px);
}


/* ==========================================
   RIGHT VISUAL
========================================== */

.it-consulting__visual {
    position: absolute;

    top: 0;
    right: 0;

    width: 42%;
    height: 100%;
}


.it-consulting__circle {
    position: absolute;

    top: -110px;
    right: -40px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.4);
}


/* ==========================================
   LAPTOP
========================================== */

.it-laptop {
    position: absolute;

    z-index: 3;

    right: 85px;
    bottom: 55px;

    width: 315px;

    transform:
        perspective(1000px)
        rotateY(-12deg)
        rotateX(4deg);

    filter: drop-shadow(
        0 25px 25px rgba(43, 52, 115, 0.18)
    );
}


.it-laptop__screen {
    position: relative;

    width: 100%;
    height: 190px;

    padding: 15px;

    border: 7px solid #202542;
    border-bottom: 10px solid #202542;

    border-radius: 12px 12px 5px 5px;

    background: #101329;
}


.it-laptop__top {
    display: flex;
    gap: 5px;

    margin-bottom: 14px;
}


.it-laptop__top span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #7782b6;
}


.it-laptop__chart {
    display: flex;
    align-items: center;
    gap: 15px;

    height: 120px;

    padding: 15px;

    border-radius: 7px;

    background: #1a1e3c;
}


.chart-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.chart-box small {
    color: #8f99bd;

    font-size: 9px;
}


.chart-box strong {
    color: #ffffff;

    font-size: 25px;
}


.chart-line {
    position: relative;

    width: 130px;
    height: 65px;

    border-bottom: 2px solid #536cff;
    border-right: 2px solid transparent;

    transform: skewY(-15deg);
}


.it-laptop__base {
    width: 112%;
    height: 13px;

    margin-left: -6%;

    border-radius: 0 0 15px 15px;

    background: #c8cee4;
}


/* ==========================================
   DECORATIONS
========================================== */

.it-decoration {
    position: absolute;

    z-index: 2;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.7);
}


.it-decoration--one {
    top: 45px;
    right: 40px;

    width: 30px;
    height: 30px;
}


.it-decoration--two {
    bottom: 30px;
    right: 30px;

    width: 18px;
    height: 18px;
}


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

.it-sub-services {
    display: grid;

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

    gap: 28px;

    margin-top: 28px;
}


.it-sub-card {
    min-height: 225px;

    padding: 34px 39px;

    border: 1px solid #e0e4ed;
    border-radius: 15px;

    background: #ffffff;

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


.it-sub-card:hover {
    transform: translateY(-5px);

    border-color: #ccd5ff;

    box-shadow:
        0 20px 45px rgba(35, 45, 100, 0.08);
}


/* ==========================================
   SUB ICONS
========================================== */

.it-sub-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 23px;

    border-radius: 13px;

    color: #ffffff;

    font-size: 21px;
    font-weight: 600;
}


.it-sub-card__icon--blue {
    background: #526cff;
}


.it-sub-card__icon--azure {
    background: #3479f5;
}


.it-sub-card__icon--green {
    background: #35ad8b;
}


/* ==========================================
   SUB CONTENT
========================================== */

.it-sub-card h3 {
    margin: 0 0 11px;

    color: #11153f;

    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}


.it-sub-card p {
    max-width: 390px;

    margin: 0 0 20px;

    color: #6c7593;

    font-size: 14px;
    line-height: 1.6;
}


.it-sub-card a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #526cff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}


.it-sub-card a span {
    font-size: 18px;

    transition: transform 0.3s ease;
}


.it-sub-card a:hover span {
    transform: translateX(5px);
}


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

@media (max-width: 1100px) {

    .it-services__container {
        width: calc(100% - 50px);
    }

    .it-services__header h2 {
        font-size: 46px;
    }

    .it-consulting__content {
        width: 75%;
    }

    .it-consulting__visual {
        opacity: 0.35;
    }

}


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

@media (max-width: 768px) {
    .it-consulting__visual1 img {
        width: 100% !important;
        margin-top: 30px;
    }

    .it-consulting{
        display: block;
    }
    .it-services {
        padding: 65px 0;
    }

    .it-services__container {
        width: calc(100% - 35px);
    }


    .it-services__header {
        margin-bottom: 30px;
    }

    .it-services__header h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .it-services__header p {
        font-size: 15px;
    }


    /* Consulting */

    .it-consulting {
        min-height: auto;

        padding: 30px 25px;
    }

    .it-consulting__content {
        width: 100%;
    }

    .it-consulting__visual {
        display: none;
    }


    .it-consulting__title {
        gap: 15px;
    }

    .it-consulting__title h3 {
        font-size: 27px;
    }

    .it-consulting__title p {
        font-size: 14px;
    }


    .it-consulting__features {
        flex-direction: column;
        align-items: flex-start;

        gap: 11px;
    }


    /* Cards */

    .it-sub-services {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .it-sub-card {
        min-height: auto;

        padding: 30px;
    }

}


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

@media (max-width: 480px) {

    .it-services__header h2 {
        font-size: 32px;
    }

    .it-consulting__title {
        flex-direction: column;
    }

    .it-consulting__title h3 {
        font-size: 25px;
    }

    .it-consulting__features {
        margin-top: 20px;
    }

}









/* mobile responsive menu hamburger */





@media (max-width: 991.98px) {

    /* Hamburger */
    .mobile-menu-btn {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        position: relative;
        z-index: 1055;
        transition: transform 0.3s ease;
    }

    .mobile-menu-btn:hover {
        transform: scale(1.05);
    }

    /* Menu */
    #primaryMenu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;

        background: #fff;

        padding: 100px 30px 40px;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);

        transition:
            opacity 0.35s ease,
            transform 0.4s ease,
            visibility 0.35s ease;

        z-index: 1050;
        overflow-y: auto;
    }

    /* Kur menuja hapet */
    #primaryMenu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Links */
    #primaryMenu .navbar-nav {
        width: 100%;
        margin: 0 !important;
        padding: 0;
    }

    #primaryMenu .navbar-nav li {
        opacity: 0;
        transform: translateY(15px);
        transition:
            opacity 0.35s ease,
            transform 0.35s ease;
    }

    /* Animacioni i linkave */
    #primaryMenu.show .navbar-nav li {
        opacity: 1;
        transform: translateY(0);
    }

    #primaryMenu.show .navbar-nav li:nth-child(1) {
        transition-delay: 0.08s;
    }

    #primaryMenu.show .navbar-nav li:nth-child(2) {
        transition-delay: 0.13s;
    }

    #primaryMenu.show .navbar-nav li:nth-child(3) {
        transition-delay: 0.18s;
    }

    #primaryMenu.show .navbar-nav li:nth-child(4) {
        transition-delay: 0.23s;
        margin-top: 20px;
        text-align: center;
    }

    #primaryMenu.show .navbar-nav li:nth-child(5) {
        transition-delay: 0.28s;
    }

    /* Link design */
    #primaryMenu .navbar-nav a {
        display: block;
        padding: 18px 0;

        font-size: 28px;
        font-weight: 500;

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

        transition: padding-left 0.25s ease;
    }

    #primaryMenu .navbar-nav a:hover {
        padding-left: 8px;
    }

    /* Mos lejo scroll-in kur menuja hapet */
    body:has(#primaryMenu.show) {
        overflow: hidden;
    }
}





@media (max-width: 991.98px) {

    .navbar-toggler {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        position: relative;
        z-index: 1060;
    }

    .navbar-toggler-icon {
        width: 24px;
        height: 18px;

        background-image: none !important;

        position: relative;
        display: block;

        transition: transform 0.35s ease;
    }

    /* 3 vijat */
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;

        width: 24px;
        height: 2px;

        background-color: currentColor;
        border-radius: 10px;

        transition:
            transform 0.35s cubic-bezier(.68,-0.55,.27,1.55),
            top 0.35s ease;
    }

    .navbar-toggler-icon::before {
        top: 2px;
        box-shadow: 0 7px 0 currentColor;
    }

    .navbar-toggler-icon::after {
        top: 16px;
    }


    /* =========================
       HAPET → X
    ========================= */

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 9px;
        transform: rotate(45deg);
        box-shadow: none;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        top: 9px;
        transform: rotate(-45deg);
    }

    /* Pak rotation për efekt më smooth */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        transform: rotate(90deg);
    }
}


/* image about page */

.image-about{
    width: 600px;
}
.about-img-cards-wwhat-we-do-icon{
    width: 35px;
    height: 25px;
}


/*  */


/* contact forma */


input.wpcf7-form-control.wpcf7-submit.has-spinner.button.button-primary {
    background: var(--navy);
    color: #fff;
    border-radius: 50px;
}


/* service image */

.it-consulting__visual1 img{
    width: 450px;
}




/* media */




.it-sub-card__icon img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}