/* VTS AI Overseas - site styles (built on utilities.css) */
:root{
  --blue:#0b5cff; --blue-d:#0847c9; --navy:#07142e; --navy-2:#0b1f45;
  --tint:#eef5ff; --tint-2:#f4f8fe; --text:#13213a; --muted:#5b6b82; --line:#e3eaf5;
  --ff:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{font-family:var(--ff);color:var(--text);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
.ico{flex:none;vertical-align:middle}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:.6rem}
.eyebrow::before{content:'\2022';margin-right:.4rem}
.eyebrow-light{color:#cfe0ff}
.section{padding:4.5rem 0}
.section-tint{background: linear-gradient(135deg, #E4EEFF 0%, #F1F6FF 100%);}
.section-tint-2{background:#f5f9ff}
.section-title{font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:700;line-height:1.25;color:var(--navy)}
.section-title.text-white{color:#fff}
.section-head{max-width:760px;margin-inline:auto}
.grad-text{background:linear-gradient(90deg,#4aa3ff,#7ec4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta .grad-text,.hero .grad-text{background:linear-gradient(90deg,#3d8bff,#78c0ff);-webkit-background-clip:text;background-clip:text}
@media(max-widht:767px){.section{padding:60px 0;}}
/* Header */
.site-header .brand{color:var(--navy)}
.brand-mark{font-style:italic;font-weight:800;font-size:1.7rem;letter-spacing:-.04em;color:var(--blue);background:linear-gradient(135deg,#0b5cff,#14c3ff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.2rem}
.brand-mark-light{background:linear-gradient(135deg,#fff,#a9d4ff);-webkit-background-clip:text;background-clip:text}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:1.05rem;font-weight:700}
.brand-text small{font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.site-footer .brand-text small{color:#a9bad6}
.main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--line);box-shadow:0 14px 30px rgba(10,30,70,.1);flex-direction:column}
.main-nav.open{display:flex}
.nav-link{padding:.7rem 0;font-size:.82rem;font-weight:500;color:var(--text);border-bottom:1px solid var(--line);position:relative;display:flex;}
.nav-link.active,.nav-link:hover{color:var(--blue)}
.caret{font-size:.6rem}
.header-phone{color:var(--navy);line-height:1.2}
.header-phone strong{display:block;font-size:.8rem}
.header-phone small{font-size:.68rem;color:var(--muted)}
.phone-bubble{width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--blue);display:inline-flex;align-items:center;justify-content:center}
.nav-toggle{color:var(--navy)}
@media(min-width:992px){
  .main-nav{display:flex!important;position:static;flex-direction:row;gap:1.4rem;padding:0;border:0;box-shadow:none;background:none}
  .nav-link{border:0;padding:.5rem 0;font-size:.78rem}
  .nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:0px;height:2px;background:var(--blue)}
}
@media(min-width:1200px){.main-nav{gap:1.8rem}.nav-link{font-size:.82rem}}

/* Hero */
.hero{padding:4rem 0 5rem;min-height:520px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;
/*background:*/
/*  radial-gradient(900px 500px at 85% 20%,rgba(255,170,90,.38),transparent 60%),*/
/*  radial-gradient(700px 500px at 60% 90%,rgba(40,110,255,.35),transparent 65%),*/
/*  linear-gradient(110deg,#06122b 20%,#0a2a5e 62%,#b4684a 130%)*/
background:url('/../assets/img/hero.jpg');
background-size:cover;
background-repeat:no-repeat;
}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to top,rgba(6,18,43,.7),transparent 40%)}
.hero-title{font-size:clamp(2rem,3vw,3.1rem);font-weight:700;line-height:1.15}
.hero-lead{color:#dbe6f8;max-width:520px;font-size:.98rem;line-height:1.7}
.play-dot{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--navy);align-items:center;justify-content:center}
.hero-visual{position:relative;min-height:360px}
.script-note{position:absolute;top:-8px;left:2%;font-family:'Caveat',cursive;font-size:1.5rem;line-height:1.1;color:#fff;transform:rotate(-8deg);z-index:3}
.panel{position:absolute;width:44%;border-radius:10px;padding:1rem;color:#fff;background:rgba(7,20,46,.62);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);box-shadow:0 20px 40px rgba(0,0,0,.35);transform:perspective(900px) rotateY(-14deg)}
.panel h3{font-size:.8rem;font-weight:700;letter-spacing:.03em;line-height:1.25}
.panel p{font-size:.68rem;color:#cfe0ff;margin-top:.4rem;line-height:1.5}
.panel-art{margin-top:.8rem;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;}
.art-it{background:linear-gradient(160deg,#1c64f2,#0a2a6e)}
.art-acc{background:linear-gradient(160deg,#5b8def,#243b6e)}
.art-log{background:linear-gradient(160deg,#e9eef7,#8aa0c4);color:#12305f}
.panel-art img{
    width:100%;
    object-fit:cover;
}
.panel-it{left:0;top:55px;z-index:1}
.panel-acc{left:28%;top:25px;z-index:2}
.panel-log{left:56%;top:50px;z-index:3}
@media(max-width:767px){
  .hero-visual{min-height:0;display:grid;gap:1rem}
  .panel{position:static;width:100%;transform:none}
  .hero .hero-title{font-size:32px;}
  .section-title{font-size:30px;}
}

/* Stats */
.stats{border-bottom:1px solid var(--line);position:relative;z-index:3}
.stats-row{padding:1.4rem 0}
.stat-ico{color:var(--navy)}
.stat small{font-size:.74rem}
@media(min-width:992px){.stat+.stat{border-left:1px solid var(--line)}}

/* Services */
.service-card{display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,30,70,.16)!important}
.service-img{height:170px;position:relative;background-size:cover;background-position:center}
.img-it{
    background:url('/../assets/img/services/it-solution.jpg');
    background-size:cover;
    background-repeat:no-repeat;
}
.img-acc{background:url('/../assets/img/services/acccount.jpg');
    background-size:cover;
    background-repeat:no-repeat;}
.img-log{background:url('/../assets/img/services/logistics-sol.jpg');
    background-size:cover;
    background-repeat:no-repeat;}
.img-edu{background:url('/../assets/img/services/education.jpg');
    background-size:cover;
    background-repeat:no-repeat;}
.img-energy{background:url('/../assets/img/services/energy.jpg');
    background-size:cover;
    background-repeat:no-repeat;}
.service-badge{position:absolute;left:1.4rem;bottom:-24px;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(10,30,70,.18)}
.service-card .card-body{padding-top:2.2rem;flex:1}
@media(max-width:767px){.service-card h3{font-size:1.2rem!important;}}
.check-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:#2a3b57;margin-bottom:.55rem}
.check-list .ico{color:var(--blue);margin-top:1px}
.link-arrow{font-weight:600;font-size:.85rem;color:var(--blue)}
.link-arrow:hover{gap:.8rem}
/* Carousel */
.carousel {
    --gap: 1.5rem;
    --per-view: 1;
}

.carousel-viewport {
    position: relative;
}

.carousel-track {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0px;
    outline: 0;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track:focus-visible {
    box-shadow: 0 0 0 3px rgba(11, 92, 255, .35);
    border-radius: 12px;
}

.carousel-slide {
    flex: 0 0 calc(
        (100% - var(--gap) * (var(--per-view) - 1))
        / var(--per-view)
    );
    scroll-snap-align: start;
    display: flex;
}

.carousel-slide > * {
    flex: 1;
    min-width: 0;
}

/* Left and right navigation arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(10, 30, 70, .18);
    cursor: pointer;
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

.carousel-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.carousel.is-static .carousel-arrow,
.carousel.is-static .carousel-nav {
    display: none;
}

/* Carousel dots */
.carousel-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #c3d3ee;
    transition: .2s;
}

.carousel-dots button[aria-current="true"] {
    width: 26px;
    border-radius: 99px;
    background: var(--blue);
}

/* Responsive slides */
@media (min-width: 768px) {
    .carousel {
        --per-view: 2;
    }
}

@media (min-width: 992px) {
    .carousel {
        --per-view: 3;
    }

    .carousel-prev {
        left: -21px;
    }

    .carousel-next {
        right: -21px;
    }
}

@media (max-width: 991px) {
    .carousel-arrow {
        width: 36px;
        height: 36px;
    }

    .carousel-prev {
        left: 4px;
    }

    .carousel-next {
        right: 4px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        scroll-behavior: auto;
    }
}
/* Why */
.why{overflow:hidden}
.why-photo{position:relative;}
.why-photo img{border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 30, 70, .2);}
.trust-badge{position:absolute;left:1.5rem;bottom:1.5rem;background:rgba(7,20,46,.82);color:#fff;padding:1rem 1.2rem;border-radius:10px;font-size:.85rem;line-height:1.3}

.why-ico{display: inline-flex;
    color: #f8f8f8;
    padding: 5px;
    border-radius: 7px;
    background: var(--blue);}
.why-item small{font-size:.65rem;line-height:1.4}
.why-item {
    position: relative;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    height: auto;
}

/* subtle separator between items */
.why-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    width: 1px;
    height: 70%;
    background: #e6ebf4;
}

.why-ico {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: var(--blue);
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(15, 91, 255, 0.18);
}

.why-ico .ico {
    width: 27px;
    height: 27px;
}

.why-item strong {
    display: block;
    margin-top: 13px !important;
    color: #071a3d;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
}

.why-item small {
    display: block;
    max-width: 150px;
    margin: 7px auto 0 !important;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45;
}

.why-item:hover .why-ico {
    transform: translateY(-3px);
    box-shadow: 0 11px 24px rgba(15, 91, 255, 0.25);
}

.why-ico {
    transition: all .25s ease;
}

@media (max-width: 767px) {
    .why-item {
        padding: 18px 10px;
    }

    .why-item::after {
        display: none;
    }
}
/* Process */
.process-row{display:grid;gap:1.4rem}
.step-num{width:52px;height:52px;border-radius:50%;background:#dbe9ff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.step-arrow{color:#9db3d6}
.process-step small{font-size:.74rem;display:block;max-width:190px}
@media(min-width:576px){.process-row{grid-template-columns:1fr 1fr}}
@media(min-width:992px){.process-row{display:flex;justify-content:space-between;align-items:center}}

/* Testimonials */
#testimonials{background: linear-gradient(160deg,#06122b 0%,#0a2350 55%,#0b1f45 100%);}
#testimonials .section-title,#testimonials p{color:#fff;}
.t-viewport{overflow:hidden}
.t-track{display:flex;gap:1.5rem;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.t-card{flex:0 0 100%;padding:1.6rem;margin:0;backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.06);-webkit-backdrop-filter: blur(10px);
    transition: transform .3s, border-color .3s, background .3s, box-shadow .3s;
    box-shadow: 0 18px 45px rgba(7, 26, 61, 0.14);}
.t-card blockquote{margin:.6rem 0 0;color:#fff}
.stars{color:#f5a623;letter-spacing:2px;font-size:.9rem;margin-left:auto}
.avatar-box>*{color:#FAFAFA;}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#0b5cff,#14c3ff);color:#fff;font-weight:600;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;flex:none}
.round-btn{width:38px;height:38px;border-radius:50%;border:1px solid #cfdaee;background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.round-btn:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue)}
.round-btn:disabled{opacity:.4;cursor:not-allowed}
@media(min-width:768px){.t-card{flex-basis:calc((100% - 1.5rem)/2)}}
@media(min-width:992px){.t-card{flex-basis:calc((100% - 3rem)/3)}}

/* Clients */
.clients-logos {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 25px;
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 130px;
    height: 65px;
}

.client-logo img {
    display: block;
    max-width: 100%;
    max-height: 45px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.client-logo:hover{opacity:1;transform:scale(1.05)}
.logo-microsoft{color:#3b3b3b}.logo-aws{color:#232f3e;font-size:1.6rem}.logo-googlecloud{color:#4285f4}
.logo-quickbooks{color:#2ca01c}.logo-xero{color:#13b5ea;font-style:italic}.logo-dhl{color:#d40511;background:#ffcc00;padding:.1rem .6rem;font-style:italic;border-radius:2px}
.logo-fedex{color:#4d148c}.logo-royalmail{color:#d4001c}

/* CTA */
.cta{background: linear-gradient(rgba(4, 18, 45, 0.82), rgba(4, 18, 45, 0.88)),
        url(/../assets/img/cta-bg.webp) center center / cover no-repeat;}
.cta-photo{min-height:260px;background:url(/../assets/img/handshake-img.jpg);background-repeat:no-repeat;background-size:cover;}
.cta-content{padding:3rem 1.5rem}
.cta-lead{color:#cfdbf0;max-width:560px;font-size:.92rem}
@media(min-width:992px){.cta-content{padding:4rem 4rem 4rem 2rem}.cta-photo{min-height:340px}}

/* Contact dialog */
.contact-dialog{border:0;border-radius:16px;padding:1.6rem;width:min(560px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.35);font-family:var(--ff);color:var(--text)}
.contact-dialog::backdrop{background:rgba(5,15,35,.65);backdrop-filter:blur(3px)}
.contact-dialog .row>*{margin-bottom:0}

/* Footer */
.site-footer{background:linear-gradient(180deg,#0a1a3a,#06122b)}
.footer-muted{color:#a9bad6}
.footer-list li{margin-bottom:.6rem;font-size:.85rem;color:#c5d3ea}
.footer-list a:hover{color:#fff;text-decoration:underline}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start}
.footer-contact .ico{margin-top:2px;color:#fff}
.social-link{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.social-link:hover{background:var(--blue);border-color:var(--blue)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom a:hover{color:#fff}
.ms-auto{margin-left:auto}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Fixes after render check */
html,body{overflow-x:clip}
.nav-link{white-space:nowrap}
.header-phone,.header-phone strong,.header-phone small{white-space:nowrap}
@media(min-width:992px){.main-nav{gap:1.1rem}.site-header .container{gap:1rem}}
@media(min-width:1200px){.main-nav{gap:1.5rem}}
.hero-title{font-size:clamp(2rem,3vw,2.9rem)}
.hero-title .grad-text{white-space:nowrap}
.script-note{top:-48px;left:6%}
.hero-visual{padding-top:20px}
.panel-it{top:75px}.panel-acc{top:45px}.panel-log{top:70px}

.brand,.brand-text,.brand-text strong,.brand-text small{white-space:nowrap}
.brand-text small{font-size:.5rem}

/* ---- About page ---- */
.page-banner{min-height:300px;display:flex;align-items:center}
.page-banner .hero-bg{background:url(/../assets/img/breadcrumb-bg.webp);background-size:cover;background-repeat:no-repeat;}
.banner-title{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;line-height:1.15}
.crumbs{color:#cfe0ff}.crumbs a:hover{color:#fff;text-decoration:underline}.crumbs span{margin:0 .35rem}
.story-visual{position:relative;min-height:380px;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(10,30,70,.2);background:url(/../assets/img/about-us.webp);background-repeat:no-repeat;background-size:cover;}
@media (min-width:767px) and (max-width:991px){
    .story-visual{
        background:url(/../assets/img/about-us-tablet.jpg);
    }
} 
.story-visual .why-logo{top:35%;left:34%}
.about-stats{border-top:1px solid var(--line);padding-top:1.2rem}
.mv-card .card-body{padding:2rem}
.mv-card{border-top:4px solid var(--navy)}
.division{padding:2rem 1.5rem;border:1px solid var(--line);border-radius:14px;background:#fff;transition:transform .25s,box-shadow .25s}
.division:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(10,30,70,.12)}
.division-ico{display:inline-flex;width:72px;height:72px;border-radius:50%;background:var(--tint);color:var(--blue);align-items:center;justify-content:center}
.value-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.2rem}
.value-card small{font-size:.78rem}
.mx-auto{margin-inline:auto}
.timeline{position:relative;max-width:760px;margin-inline:auto;padding-left:0}
.timeline::before{content:'';position:absolute;left:46px;top:6px;bottom:6px;width:2px;background:#cfdcf2}
.tl-item{display:flex;gap:1.6rem;align-items:flex-start;position:relative;padding-bottom:2rem}
.tl-item:last-child{padding-bottom:0}
.tl-year{flex:none;width:94px;text-align:center;background:var(--blue);color:#fff;font-weight:700;font-size:.85rem;padding:.4rem 0;border-radius:999px;position:relative;z-index:1}
.tl-body{padding-top:.2rem}
.team-photo{height:170px;background:linear-gradient(160deg,#dbe9ff,#a9c8f5);display:flex;align-items:center;justify-content:center}
.team-initials{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#0b5cff,#14c3ff);color:#fff;font-size:1.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(11,92,255,.35)}
.cta .container{padding-block:4rem}
/* ---- Accounting page ---- */
/*.acc-panel{background:linear-gradient(160deg,#eef5ff,#dbe9ff);border-radius:18px;padding:2rem}*/
.acc-panel img{border-radius:16px;box-shadow:0 8px 24px rgba(10,30,70,.08)}
.acc-stat{background:#fff;border-radius:14px;padding:1.4rem 1rem;box-shadow:0 8px 24px rgba(10,30,70,.08)}
.acc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.8rem 1.5rem;transition:transform .25s,box-shadow .25s}
.acc-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(10,30,70,.12)}
.chip{padding:.5rem 1.1rem;border-radius:999px;background:var(--tint);color:var(--blue);font-size:.85rem;font-weight:500;border:1px solid #d4e3fb}
.faq-wrap{max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:12px;padding:0 1.2rem;margin-bottom:.8rem;background:#fff}
.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-weight:600;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--blue);transition:transform .2s}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{padding-bottom:1.1rem;font-size:.92rem}
/* ---- Header dropdown ---- */
.nav-item{position:relative;display:flex;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.nav-item>.nav-link{flex:1;border:0}
.dd-toggle{background:none;border:0;padding:5px .5rem;color:var(--text);line-height:1}
.dd-toggle .caret{display:inline-block;font-size:.65rem;transition:transform .2s}
.nav-item.open .caret{transform:rotate(180deg)}
.dropdown{display:none;width:100%;padding:5px!important;}
.nav-item.open .dropdown{display:block}
.dd-link{display:block;padding:.55rem 0;font-size:.82rem;color:var(--muted)}
.dd-link:hover,.dd-link.active{color:var(--blue)}
@media(min-width:992px){
  .nav-item{border:0}
  .dd-toggle{padding:5px 0 .5rem .25rem}
  .dropdown{display:block;position:absolute;top:calc(100% + 12px);left:-1rem;width:auto;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(10,30,70,.16);padding:.5rem;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:50}
  .dropdown::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
  .nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.nav-item.open .dropdown{visibility:visible;opacity:1;transform:none}
  .dd-link{padding:.65rem .9rem;border-radius:8px;white-space:nowrap;color:var(--text)}
  .dd-link:hover,.dd-link.active{background:var(--navy);color:#fff;}
  .nav-item:hover .caret{transform:rotate(180deg)}
}
/* ---- Our Work page ---- */
.filter-btn{padding:.6rem 1.3rem;border-radius:999px;border:1.5px solid #cfdaee;background:#fff;color:var(--text);font-weight:500;font-size:.88rem;transition:.2s}
.filter-btn:hover{border-color:var(--blue);color:var(--blue)}
.filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff}
.work-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.work-card[hidden]{display:none}
.work-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(10,30,70,.15)}
.work-thumb{position:relative;height:180px;display:flex;align-items:center;justify-content:center;color:#fff}
.thumb-it{background:radial-gradient(circle at 70% 30%,#59b4ff,#0a2f6e 75%)}
.thumb-acc{background:radial-gradient(circle at 30% 40%,#8fb1e8,#243b6e 80%)}
.thumb-log{background:linear-gradient(180deg,#f2a65a 0%,#5d7fb0 55%,#34476a 100%)}
.work-tag{position:absolute;left:1rem;top:1rem;background:rgba(7,20,46,.65);backdrop-filter:blur(4px);color:#fff;font-size:.72rem;font-weight:600;padding:.3rem .75rem;border-radius:999px}
.work-body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.work-body p{margin-bottom:1rem}
.work-result{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1rem;color:var(--blue);font-size:.88rem}
.case-visual{min-height:400px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 24px 60px rgba(10,30,70,.2);background:url(/../assets/img/work.jpg)}
  /* ---- About: five-area grid (3 + 2 centred on desktop) ---- */
.division-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}
.division-grid>.division{flex:1 1 100%;display:flex;flex-direction:column;align-items:center}
.division-grid>.division .link-arrow{margin-top:auto;padding-top:1.1rem}
@media(min-width:768px){.division-grid>.division{flex:0 1 calc((100% - 1.5rem)/2)}}
@media(min-width:992px){.division-grid>.division{flex:0 1 calc((100% - 3rem)/3)}}
  /* ---- About: modern dark "areas" section ---- */
.areas{background:linear-gradient(160deg,#06122b 0%,#0a2350 55%,#0b1f45 100%);padding:5rem 0}
.areas::before,.areas::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.areas::before{width:480px;height:480px;left:-140px;top:-120px;background:rgba(11,92,255,.38)}
.areas::after{width:420px;height:420px;right:-120px;bottom:-140px;background:rgba(20,195,255,.25)}
.areas .division{position:relative;overflow:hidden;align-items:flex-start;text-align:left;padding:2rem 1.7rem 1.8rem;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .3s,border-color .3s,background .3s,box-shadow .3s}
.areas .division::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#0b5cff,#14c3ff);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.areas .division:hover{transform:translateY(-8px);background:rgba(255,255,255,.1);border-color:rgba(120,190,255,.55);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(20,195,255,.15)}
.areas .division:hover::before{transform:scaleX(1)}
.areas .division-num{position:absolute;right:1.3rem;top:.9rem;font-size:3.4rem;font-weight:700;line-height:1;color:rgba(255,255,255,.07);transition:color .3s}
.areas .division:hover .division-num{color:rgba(120,190,255,.28)}
.areas .division-ico{width:62px;height:62px;border-radius:16px;background:linear-gradient(135deg,#0b5cff,#14c3ff);color:#fff;box-shadow:0 10px 28px rgba(11,92,255,.55);transition:transform .3s}
.areas .division:hover .division-ico{transform:scale(1.08) rotate(-4deg)}
.areas .division-title{margin:1.3rem 0 .6rem;font-size:1.15rem;font-weight:700;line-height:1.3;color:#fff}
.areas .division-text{font-size:.88rem;line-height:1.7;color:#b9c9e4;margin-bottom:1.3rem}
.areas .division .link-arrow{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;font-size:.84rem;font-weight:600;transition:.25s}
.areas .division .link-arrow:hover{background:#0b5cff;border-color:#0b5cff;gap:.8rem}
  .stats-section {
    background: linear-gradient(160deg,#06122b 0%,#0a2350 55%,#0b1f45 100%);
    padding:40px 0;
}

.stat-wrapper {
    padding: 30px 20px;
    gap: 15px;
    border-radius: 16px;
   background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .3s, border-color .3s, background .3s, box-shadow .3s;
    box-shadow: 0 18px 45px rgba(7, 26, 61, 0.14);
}

.stat-wrapper .stat-box {
    width: calc(25% - 12px);
    flex: 1;
}

.stat-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;
    border-radius: 12px;
    color: #2F8FFF;
    background: rgba(47, 143, 255, 0.10);
}

.stat-icon svg {
    width: 28px;
    height: 28px;
}

.stat-content {
    min-width: 0;
}

.stat-title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 5px;
}

.stat-text {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    line-height: 1.4;
}

/* Tablet */
@media (max-width: 991px) {
    .stat-wrapper {
        flex-wrap: wrap;
    }

    .stat-wrapper .stat-box {
        flex: 0 0 calc(50% - 8px);
        width: calc(50% - 8px);
    }
}

/* Mobile */
@media (max-width: 575px) {
    .stat-wrapper {
        padding: 20px;
    }

    .stat-wrapper .stat-box {
        flex: 0 0 100%;
        width: 100%;
    }
}
/* =====================================
   CONTACT SECTION
===================================== */

.contact-section {
    position: relative;
    background: #f7faff;
}

.contact-section-head {
    max-width: 760px;
    margin: 0 auto 48px;
}

.contact-section-lead {
    max-width: 700px;
    margin: 15px auto 0;
    color: var(--muted);
    line-height: 1.75;
}


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

#contactForm {
    height: 100%;
    padding: 32px;
    background: #fff;
    border: 1px solid #e7edf6;
    border-radius: 18px;
    box-shadow: 0 16px 45px rgba(7, 31, 70, 0.08);
}

.form-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e9eef5;
}

.form-heading-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #fff;
    background: linear-gradient(135deg, #0b5cff, #14c3ff);
}

.form-heading h3 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
}

.form-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

#contactForm .form-label {
    display: block;
    margin-bottom: 7px;

    color: var(--navy);
    font-size: .85rem;
    font-weight: 600;
}

#contactForm .form-label span {
    color: #0b5cff;
}

#contactForm .form-control {
    width: 100%;
    min-height: 48px;

    padding: 11px 14px;

    background: #f9fbfe;
    border: 1px solid #dfe7f1;
    border-radius: 9px;

    color: var(--navy);
    font-size: .92rem;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

#contactForm textarea.form-control {
    min-height: 135px;
    resize: vertical;
}

#contactForm .form-control:focus {
    outline: none;

    background: #fff;
    border-color: #0b5cff;

    box-shadow: 0 0 0 3px rgba(11, 92, 255, .10);
}

#contactForm .form-control::placeholder {
    color: #9aa6b7;
}

.contact-submit {
    margin-top: 22px;
    min-height: 50px;
}

.form-note {
    margin: 12px 0 0;

    text-align: center;

    color: var(--muted);
    font-size: .75rem;
    line-height: 1.5;
}


/* =====================================
   RIGHT CONTACT PANEL
===================================== */

.contact-details-panel {
    height: 100%;

    padding: 32px;

    background: #071a3d;
    border-radius: 18px;

    box-shadow: 0 16px 45px rgba(7, 31, 70, .12);
}

.contact-panel-head {
    margin-bottom: 25px;
}

.contact-panel-head .eyebrow {
    color: #52a7ff;
}

.contact-panel-head h2 {
    margin: 6px 0 10px;

    color: #fff;
    font-size: 1.65rem;
    font-weight: 700;
}

.contact-panel-head > p:last-child {
    margin: 0;

    color: rgba(255, 255, 255, .70);
    font-size: .9rem;
    line-height: 1.7;
}


/* =====================================
   CONTACT BOXES
===================================== */

.contact-details {
    display: grid;
    gap: 14px;
}

.contact-box {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 17px 18px;
    margin-top: 12px;

    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 13px;

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

.contact-box:hover {
    transform: translateY(-3px);

    background: rgba(255, 255, 255, .09);
    border-color: rgba(82, 167, 255, .45);
}

.contact-ico {
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    background: linear-gradient(135deg, #0b5cff, #14c3ff);

    border-radius: 12px;

    box-shadow: 0 8px 20px rgba(11, 92, 255, .25);
}

.contact-info {
    min-width: 0;
}

.contact-info h3 {
    margin: 0 0 4px;

    color: #66afff;

    font-size: .7rem;
    font-weight: 700;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.contact-info a,
.contact-info p {
    display: block;

    margin: 0;

    color: #fff;

    font-size: .92rem;
    font-weight: 500;
    line-height: 1.55;

    overflow-wrap: anywhere;
}

.contact-info span {
    display: block;

    margin-top: 2px;

    color: rgba(255, 255, 255, .65);
    font-size: .82rem;
}

.contact-info a:hover {
    color: #52a7ff;
}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 991px) {

    .contact-details-panel {
        margin-top: 10px;
    }
    .btn-lg{
        padding: 0.8rem 1rem;
    }

}

@media (max-width: 575px) {
    .page-banner{min-height:250px}

    #contactForm,
    .contact-details-panel {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .contact-section-head {
        margin-bottom: 32px;
    }

    .contact-box {
        padding: 15px;
    }

    .contact-ico {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

}
@media (max-width:991px){
    .why-service .grid-2{
       grid-template-columns:1fr 1fr;
    }
}
@media (max-width:567px){
    .why-service .grid-2{
       grid-template-columns:1fr;
    }
}
@media (max-width: 991px) {
  .main-nav { max-height: calc(100vh - 70px); overflow-y: auto; }
  .dd-toggle { min-width: 44px; }
  .dropdown { padding: 0 0 .5rem .75rem !important; }
}