/* =====================================================================
   TND PRIDE IT SERVICES PVT. LTD. - PREMIUM BRAND THEME (White & Blue)
   ---------------------------------------------------------------------
   Centralized brand/theme layer for the existing site. Loaded LAST
   (after style.css / <page>.css / media-querie.css) on every page so
   it can safely re-theme colors, the header, buttons, cards, motion
   and accessibility WITHOUT touching the original stylesheets, markup
   structure, routes, forms or JS behaviour.

   Palette: white/light-blue-tint surfaces with Primary/Electric Blue
   as the accent (matching the logo), alternating with Deep Navy bands
   for rhythm (hero, facts, consultation, clients, footer) - the
   classic enterprise B2B pairing this brand's logo calls for.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. COLOR SYSTEM
   --------------------------------------------------------------------- */
:root {
    /* re-mapped legacy tokens (used throughout style.css/services.css/contact.css/about.css) */
    --primaryColor: #0869C9;
    --secondaryColor: #168BE8;
    --brandColor: #0B2D6B;
    --brandColor2: #124A9E;
    --primaryBtnBgColor: #0869C9;
    --primaryBtnColor: #FFFFFF;
    --btnBgLinearGradient: linear-gradient(90deg, #0B2D6B, #168BE8, #0B2D6B);
    --LinearGradientColor: linear-gradient(90deg, #0B2D6B, #124A9E, #0869C9, #168BE8);

    /* light-theme surfaces (the majority of the site) */
    --tnd-bg: #FFFFFF;
    --tnd-bg-alt: #F1F7FF;         /* light blue-tint alternating section */
    --tnd-surface: #FFFFFF;        /* card / panel surface */
    --tnd-surface-2: #F1F7FF;      /* icon chips / subtle raised surface */
    --tnd-heading: #0F172A;
    --tnd-body: #475569;
    --tnd-body-dim: #94A3B8;
    --tnd-border: #E2E8F0;

    /* brand accent (blue, from the logo) */
    --tnd-accent: #0869C9;
    --tnd-accent-hover: #168BE8;
    --tnd-accent-soft: rgba(8, 105, 201, .10);
    --tnd-royal: #124A9E;
    --tnd-bright: #1DA1F2;
    --tnd-navy: #0B2D6B;           /* deep navy - used for dark bands */

    /* dark-band tokens (Hero scrim, Facts, Consultation, Clients,
       Footer, Mission & Vision, page-CTA bands) - text/surfaces that
       sit directly on a navy background, not inside a white card */
    --tnd-dark-bg: #0B2D6B;
    --tnd-dark-heading: #FFFFFF;
    --tnd-dark-body: #C7D6EF;
    --tnd-dark-chip: rgba(255, 255, 255, .10);
    --tnd-dark-border: rgba(255, 255, 255, .16);

    --tnd-shadow-sm: 0 4px 16px -6px rgba(15, 23, 42, .10);
    --tnd-shadow-md: 0 14px 34px -12px rgba(15, 23, 42, .14);
    --tnd-shadow-lg: 0 22px 48px -16px rgba(15, 23, 42, .18);
    --tnd-radius-card: 16px;
    --tnd-radius-btn: 10px;
}

/* ---------------------------------------------------------------------
   1b. TYPOGRAPHY
   --------------------------------------------------------------------- */
.subheading-common {
    font-family: Barlow-ExtraBold, Nunito-Regular, sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--tnd-heading);
}
/* headings on dark navy bands (hero, facts, consultation, clients,
   mission & vision, page-CTA bands) need explicit light text - the
   markup already tags these consistently with "dark-heading_blurHead"
   right next to the heading, so this one rule covers all of them. */
.dark-heading_blurHead + .subheading-common { color: var(--tnd-dark-heading); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

@media screen and (max-width: 1200px) {
    .subheading-common { font-size: 32px; }
}
@media screen and (max-width: 767px) {
    .subheading-common { font-size: 26px; }
}

/* ---------------------------------------------------------------------
   2. BASE / SURFACES / ACCESSIBILITY / MOTION
   --------------------------------------------------------------------- */
/* AOS entrance animations (fade-left/fade-right in particular) work by
   pre-positioning elements off-screen via transform:translateX before
   they scroll into view, which can push the page's scrollable width
   past 100% on mobile. Clips that at the root without touching any
   element's real layout, visibility, or vertical scrolling. */
html, body { overflow-x: hidden; max-width: 100%; }
body { background-color: var(--tnd-bg); color: var(--tnd-body); }
a { color: var(--tnd-body); }
a:hover { color: var(--tnd-accent); }
p { color: var(--tnd-body); }

/* Bootstrap's default `.card` is already white, which now matches -
   safety net so any un-styled `.card` still gets a consistent border. */
.card { background-color: var(--tnd-surface); border-color: var(--tnd-border); color: var(--tnd-body); }

::selection { background: var(--tnd-accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tnd-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--tnd-royal); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--tnd-accent); }

/* visible keyboard focus states (originals strip outlines for mouse users) */
a:focus-visible,
button:focus-visible,
.quote_btn:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
.navbar-toggler:focus-visible {
    outline: 3px solid var(--tnd-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   3. HEADER / NAVIGATION - clean white bar, dark text, blue accent
   --------------------------------------------------------------------- */
#stickTop-bgg { background: linear-gradient(90deg, var(--tnd-navy), var(--tnd-royal)); }
#stickTop-bgg .col-md-6 .stick_contact .fas,
#stickTop-bgg .col-md-6 .stick_contact .stcik_numb { color: var(--tnd-dark-body); }
#stickTop-bgg .social-icon li a { color: var(--tnd-dark-body); }
#stickTop-bgg .col-md-6 .contact-name:hover,
#stickTop-bgg .social-icon li:hover { background: var(--tnd-accent); }
#stickTop-bgg .col-md-6 .contact-name:hover .stcik_numb,
#stickTop-bgg .col-md-6 .contact-name:hover .fas,
#stickTop-bgg .social-icon li:hover a { color: #fff; }

.navbar {
    padding: 18px 40px;
    background-color: var(--tnd-bg);
    border-bottom: 1px solid var(--tnd-border);
    transition: box-shadow .35s ease, padding .35s ease, background-color .35s ease;
}
.navbar.sticky {
    padding: 12px 40px;
    background-color: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--tnd-shadow-md);
}
/* Compact header mark: TND icon + "PRIDE" + "IT SERVICES PVT. LTD."
   (logo/tnd-icon-pride.png) - transparent background, blue artwork,
   sits directly on the white navbar with no wrapper needed. */
.brand--logo {
    display: flex;
    align-items: center;
    line-height: 0;
}
.brand--logo img {
    height: 78px;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
}
#navbarSupportedContent .nav-link {
    font-family: Nunito-Bold, sans-serif;
    letter-spacing: .3px;
    color: var(--tnd-heading) !important;
}
#navbarSupportedContent .nav-link:after { background: var(--tnd-accent); height: 3px; border-radius: 3px; }
#navbarSupportedContent .nav-link:hover { color: var(--tnd-accent) !important; }
.quote_btn--wrap .quote_btn { border-radius: var(--tnd-radius-btn); }

/* Bootstrap's own `.navbar-light .navbar-toggler-icon` ships a dark
   icon by default, which is now exactly right for a white navbar - no
   override needed there. Only the border needs a touch of brand polish. */
.navbar-light .navbar-toggler { border-color: var(--tnd-border); }

@media screen and (max-width: 1023px) {
    /* the unconditional 40px horizontal .navbar padding above would
       otherwise win over the original template's mobile reset
       (padding:0) due to load order, eating 80px out of a 320px-wide
       screen - restoring it here. */
    .navbar { padding: 10px 0; }
    .navbar.sticky { padding: 8px 0; }
    .brand--logo img { height: 56px; }
    .navbar-collapse { background: var(--tnd-bg-alt); border-top: 1px solid var(--tnd-border); }
    #navbarSupportedContent .nav-link { color: var(--tnd-heading) !important; }
}

/* ---------------------------------------------------------------------
   4. BUTTON SYSTEM - solid blue fill, white text, moderate rounding
   (per the brand's own spec: 8-10px radius, not full pill).
   --------------------------------------------------------------------- */
.quote_btn,
.quote_btn:hover {
    color: #fff;
}
.quote_btn {
    border-radius: var(--tnd-radius-btn);
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: var(--tnd-shadow-sm);
    transition: box-shadow .3s ease, transform .3s ease;
}
.quote_btn:after { border-radius: var(--tnd-radius-btn); }
.quote_btn:hover {
    box-shadow: var(--tnd-shadow-md);
    transform: translateY(-2px);
}
.quote_btn.btn-lg-custom { width: auto; padding: 15px 32px; }
.btn-border-white {
    border-radius: var(--tnd-radius-btn);
    font-weight: 600;
    color: #fff;
    border-color: #fff;
}
.service-left-sidebar .service-contact-wrapper .contact-content .ct-info-button {
    transition: transform .3s ease;
}
.service-left-sidebar .service-contact-wrapper .contact-content .ct-info-button:hover {
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   5. SECTION HEADINGS - eyebrow label + accent bar in normal flow,
   replacing the original's huge blurred ghost-text behind every
   heading site-wide. Eyebrow stays blue regardless of section (light
   or dark), since it's already a saturated accent color either way.
   --------------------------------------------------------------------- */
.common-heading_blurHead {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-image: none;
    background-color: transparent;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--tnd-accent);
    color: var(--tnd-accent);
    opacity: 1;
    font-family: Nunito-ExtraBold, Nunito-Bold, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.common-heading_blurHead:before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: var(--tnd-accent);
    display: inline-block;
    flex: none;
}
.dark-heading_blurHead {
    -webkit-text-fill-color: var(--tnd-accent-hover);
    color: var(--tnd-accent-hover);
}
.dark-heading_blurHead:before { background: var(--tnd-accent-hover); }

.subheading-common span {
    background: linear-gradient(90deg, var(--tnd-navy), var(--tnd-accent), var(--tnd-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------
   6. HERO / SLIDER - the hero is full-bleed photography regardless of
   the overall theme, so it keeps a dark navy scrim for legible white
   text over any image, with a blue dotted "circuit" wash.

   Sizing rewrite: style.css/media-querie.css gave .carousel-inner a
   FIXED pixel height per breakpoint tier (540px above ~1200px, 320px
   at 1024-1200, 250px at 768-1023, 200px below that), while the hero
   itself is full-bleed (width:100vw). Because the image fills that box
   with object-fit:cover, a fixed height paired with a fluid width means
   the effective aspect ratio balloons on wide screens - at 1920px it
   was rendering a 1920x540 box, a 3.56:1 ratio, against source photos
   shot much closer to 1.8:1. Cover has to scale the image up until its
   width fills the box, which pushes its height far past 540px, so
   roughly half of the photo's vertical extent (including whatever sits
   near the top or bottom) was being cropped away - worse the wider the
   screen, which is exactly the "excessive zoom" being reported.
   aspect-ratio ties the box's height directly to its width, so the
   fraction of the photo that's visible stays constant across every
   desktop size instead of shrinking as the screen widens; min/max-height
   just keeps it from getting absurdly short or tall at the extremes.
   .carousel-item/.carousel-caption/.slider-wrapper are set to height:
   100% so the caption's vertical centering always tracks whatever
   height the tier below actually produces, instead of needing its own
   hand-kept pixel value per breakpoint (the old rules had these two
   numbers - image height and caption height - duplicated in lockstep
   at every tier; one shared 100% chain can't drift out of sync). */
#carouselExampleCaptions .carousel-inner {
    aspect-ratio: 2.8 / 1;
    height: auto;
    min-height: 460px;
    max-height: 680px;
}
#carouselExampleCaptions .carousel-item,
#carouselExampleCaptions .carousel-caption,
#carouselExampleCaptions .carousel-caption .slider-wrapper {
    height: 100%;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    #carouselExampleCaptions .carousel-inner { aspect-ratio: 2 / 1; min-height: 340px; max-height: 460px; }
}
/* Mobile gets its own strategy rather than the desktop ratio scaled
   down - at 2.8:1 a 375px-wide screen would be squeezed to a ~134px
   tall strip, nowhere near enough room for the heading, paragraph and
   two buttons without them overlapping the image or each other. A
   fixed min-height (taller than the old 200px) gives the text real
   space; object-fit:cover on a portrait-ish box still shows a sensible
   centred vertical slice of the same wide photo used on desktop. */
@media screen and (max-width: 767px) {
    #carouselExampleCaptions .carousel-inner { aspect-ratio: auto; height: 480px; min-height: 0; max-height: none; }
}
#carouselExampleCaptions .carousel-inner img.mob-img--height {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#carouselExampleCaptions:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(11, 45, 107, .82) 0%, rgba(11, 45, 107, .55) 45%, rgba(11, 45, 107, .3) 100%);
}
#carouselExampleCaptions:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .5;
}
#carouselExampleCaptions .carousel-indicators li { background-color: var(--tnd-accent-hover); }
/* raised clear of the hero-stats-strip floating card just below (see
   20a) - that card overlaps the bottom of the hero by design via a
   negative margin-top, which otherwise sits right on top of the dots
   at their default bottom:0 position and blocks clicks on them. */
#carouselExampleCaptions .carousel-indicators { bottom: 90px; }
#carouselExampleCaptions .carousel-caption .banner-title {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
#carouselExampleCaptions .carousel-caption .banner-subtitle {
    font-family: Barlow-ExtraBold, sans-serif;
    letter-spacing: -.01em;
    color: #fff;
}
#carouselExampleCaptions .carousel-caption .banner-para { color: var(--tnd-dark-body); }
#carouselExampleCaptions .carousel-caption .row .slider-right-img img {
    border-color: rgba(255, 255, 255, .3);
}
#carouselExampleCaptions .carousel-caption .row .slider-right-img.last-bannerImg img {
    border-color: rgba(22, 139, 232, .4);
}

/* ---------------------------------------------------------------------
   7. ABOUT / WHY CHOOSE - light sections
   --------------------------------------------------------------------- */
.About-bgg { background-color: var(--tnd-bg); }
.About_numCon { color: var(--tnd-body); }
/* label now sits as its own heading line above the description
   instead of running inline before it with a colon */
.About_numCon span {
    display: block;
    color: var(--tnd-heading);
    font-size: 16px;
    margin-bottom: 4px;
}
.About_numCon p { margin: 0; color: var(--tnd-body); text-align: left; }
.About_num {
    background-image: linear-gradient(90deg, var(--tnd-navy), var(--tnd-accent), var(--tnd-accent-hover));
}
.About_holder { background-color: var(--tnd-surface); box-shadow: var(--tnd-shadow-md); }
.award-heading { color: var(--tnd-heading); }
.item--desc { color: var(--tnd-body); }
/* "Best Quality of Work" proof card: every other card on the site
   (hero trust-strip, facts cards, service cards...) pairs its shadow
   with a hairline border - this one only ever got the shadow, so
   against the light --tnd-bg-alt page background it read as slightly
   unfinished/flat rather than a defined card. Also swaps the bare
   64px icon glyph for the same soft-circle badge treatment used for
   icons elsewhere (e.g. the hero trust-strip), instead of a raw
   Font Awesome glyph floating with no container. */
.About_holder { border: 1px solid var(--tnd-border); }
.Award_icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 50%;
    background: var(--tnd-accent-soft);
}
.Award_icon i { color: var(--tnd-accent); font-size: 28px; }
.why-choose--mainwrapper { background-color: var(--tnd-bg-alt); }
/* the original template's images here had no width constraint at all -
   harmless with its own small pre-sized assets, but a full-resolution
   photo would render at native pixel size and blow out the whole
   section. Constraining explicitly, with object-fit so nothing distorts. */
.why-choose-imgs img:first-child {
    width: 100%;
    height: 420px;
    object-fit: cover;
}
.why-choose-imgs img:nth-child(2) {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-color: var(--tnd-bg);
}
@media screen and (max-width: 767px) {
    .why-choose-imgs img:first-child { height: 280px; }
    .why-choose-imgs img:nth-child(2) { width: 130px; height: 130px; bottom: -30px; }
}
/* media-querie.css's stacked-column spacing rule for this section
   ("...why-choose--rowwrap .col-lg-6{margin-top:100px}") targets
   .col-lg-6 - a leftover from before this row was changed to a 7/5
   split, so it never matches the actual .col-lg-5 markup and the image
   column has landed with zero space above it, right under the "Learn
   More" button, ever since. Re-added against the real column class. */
@media screen and (max-width: 991px) {
    .why-choose--rowwrap .col-lg-5 { margin-top: 40px; }
}
.feature-circle_title { color: var(--tnd-heading); }
.feature-circle_text { color: var(--tnd-body); }
.whychoose-circle .whychoose-circle-value {
    background: var(--tnd-surface);
    border-color: var(--tnd-border);
    color: var(--tnd-heading);
}
.whychoose-circle.blue .whychoose-circle-value { color: var(--tnd-accent); }
.faq-bgg .circle-shape {
    background: linear-gradient(-62.5deg, transparent, rgba(8, 105, 201, .10));
}

/* ---------------------------------------------------------------------
   8. SERVICES - light section, photo cards keep their own dark
   gradient caption (independent of the overall theme) so titles stay
   legible on any image, with a blue hover glow.
   --------------------------------------------------------------------- */
.service-section { background-color: var(--tnd-bg); }
.service-section:before { background: rgba(255, 255, 255, .82); }
.service-wrapper > .service-item {
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}
.service-wrapper > .service-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--tnd-shadow-lg);
}
.service-item img { border-radius: 0; transition: transform .5s ease; }
.box:hover img { transform: scale(1.08); }
.box:before,
.box .box-content:after { display: none; }
.box .box-content {
    padding: 0;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(0deg, rgba(11, 45, 107, .95) 0%, rgba(11, 45, 107, .55) 40%, rgba(11, 45, 107, 0) 75%);
}
.box .title {
    position: static;
    width: 100%;
    background: none;
    color: #fff;
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
    padding: 20px;
    border-radius: 0;
    text-align: left;
}

/* The mosaic cards never had an explicit height - each cell's height
   was implicitly set by that card's own image aspect ratio. Different
   source photos have different proportions, so cards ended up
   different heights and the bottom-anchored titles landed at
   different Y positions row to row. Fixing every card to an explicit
   height so the grid is consistent regardless of each photo's shape. */
.service-item.item2, .service-item.item4, .service-item.item6 { height: 260px; }
.service-item.item5 { height: 550px; }
.service-item.item1, .service-item.item3 { height: 840px; }
.service-item .box, .service-item .box img { height: 100%; width: 100%; }
.service-item img { object-fit: cover; }

@media screen and (max-width: 1023px) {
    .service-item.item2, .service-item.item4, .service-item.item6 { height: 190px; }
    .service-item.item5 { height: 410px; }
    .service-item.item1, .service-item.item3 { height: 630px; }
}
@media screen and (max-width: 767px) {
    .service-item.item1, .service-item.item2, .service-item.item3,
    .service-item.item4, .service-item.item5, .service-item.item6 { height: 220px; }
}

/* ---------------------------------------------------------------------
   8b. WORK PROCESS - light section, white cards
   --------------------------------------------------------------------- */
.process-bgg { background-color: var(--tnd-bg-alt); }
.info-wrapper { padding: 8px 0 0; }

/* a functional stepper, not another decorative grid: click a step in
   the numbered nav strip and its detail swaps into one large panel
   below (plain Bootstrap pills/tab-content - no custom JS needed). */
.process-stepper__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 44px;
    border-bottom: 1px solid var(--tnd-border);
}
.process-stepper__nav .nav-item { flex: 1 1 160px; max-width: 210px; }
.process-stepper__nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 6px 10px 20px;
    margin: 0;
    border-bottom: 3px solid transparent;
    color: var(--tnd-body);
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease;
}
.process-stepper__num {
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--tnd-body-dim);
    transition: color .3s ease;
}
.process-stepper__label { font-size: 14px; font-weight: 700; }
.process-stepper__nav .nav-link:hover { color: var(--tnd-heading); }
.process-stepper__nav .nav-link.active { color: var(--tnd-heading); }
.nav-link.fontColor1.active { border-color: var(--tnd-navy); }
.nav-link.fontColor1.active .process-stepper__num { color: var(--tnd-navy); }
.nav-link.fontColor2.active { border-color: var(--tnd-royal); }
.nav-link.fontColor2.active .process-stepper__num { color: var(--tnd-royal); }
.nav-link.fontColor3.active { border-color: var(--tnd-accent); }
.nav-link.fontColor3.active .process-stepper__num { color: var(--tnd-accent); }
.nav-link.fontColor4.active { border-color: var(--tnd-accent-hover); }
.nav-link.fontColor4.active .process-stepper__num { color: var(--tnd-accent-hover); }
.nav-link.fontColor5.active { border-color: var(--tnd-bright); }
.nav-link.fontColor5.active .process-stepper__num { color: var(--tnd-bright); }

/* the swapping panel */
.process-stepper__panels .tab-pane.fade {
    transition: opacity .35s ease, transform .35s ease;
    transform: translateY(10px);
}
.process-stepper__panels .tab-pane.fade.show { transform: translateY(0); }
.process-stepper__panel {
    display: flex;
    align-items: center;
    gap: 40px;
    background: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-md);
    padding: 46px;
}
.process-stepper__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    color: #fff;
    font-size: 44px;
    box-shadow: var(--tnd-shadow-lg);
}
.process-stepper__icon.fontColor1 { background: linear-gradient(135deg, var(--tnd-navy), var(--tnd-royal)); }
.process-stepper__icon.fontColor2 { background: linear-gradient(135deg, var(--tnd-royal), var(--tnd-accent)); }
.process-stepper__icon.fontColor3 { background: linear-gradient(135deg, var(--tnd-accent), var(--tnd-accent-hover)); }
.process-stepper__icon.fontColor4 { background: linear-gradient(135deg, var(--tnd-accent-hover), var(--tnd-bright)); }
.process-stepper__icon.fontColor5 { background: linear-gradient(135deg, var(--tnd-bright), var(--tnd-royal)); }
.process-stepper__tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tnd-accent);
    margin-bottom: 10px;
}
.process-stepper__body h2 { font-size: 28px; margin: 0 0 12px; color: var(--tnd-heading); }
.process-stepper__body p { font-size: 15px; margin: 0; color: var(--tnd-body); max-width: 62ch; }

@media screen and (max-width: 767px) {
    .process-stepper__nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 30px;
    }
    .process-stepper__nav .nav-item { flex: 0 0 auto; }
    .process-stepper__panel { flex-direction: column; text-align: center; gap: 20px; padding: 32px 22px; }
    .process-stepper__icon { width: 88px; height: 88px; font-size: 32px; }
    .process-stepper__body h2 { font-size: 22px; }
    .process-stepper__body p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .process-stepper__panels .tab-pane.fade { transition: opacity .35s ease; transform: none; }
}

/* ---------------------------------------------------------------------
   9. FACTS / COUNTER - dark navy band with a white stat card floating
   on top (so the numbers/icons stay simply "dark text on white card",
   no special dark-section text tokens needed here).
   --------------------------------------------------------------------- */
.counter-style-three { background-color: var(--tnd-navy); }
.counter-wrapper { background-color: var(--tnd-surface); box-shadow: var(--tnd-shadow-md); }
.ct-counter-icon i { color: var(--tnd-accent); }
#ct_counter-a6544b9.ct-counter-layout2 .ct-counter-hexagon.hexagon-broder:before,
#ct_counter-a6544b9.ct-counter-layout2 .ct-counter-icon i {
    background-image: linear-gradient(270deg, var(--tnd-accent-hover), var(--tnd-royal));
}
.ct-counter-layout2.style1 .ct-counter-hexagon.hexagon-bg:before,
.ct-counter-layout2.style1 .ct-counter-hexagon.hexagon-main:before {
    background: var(--tnd-surface-2);
}
.ct-counter-layout2.style1 .ct-counter-number,
.ct-counter-layout2.style1 .ct-counter-title { color: var(--tnd-heading); }

/* ---------------------------------------------------------------------
   10. CONSULTATION / FORM - dark navy photo band; the left column's
   text sits directly on it (needs explicit light color), while the
   form on the right sits in its own white card (normal light tokens).
   --------------------------------------------------------------------- */
.consultation-bgg {
    background-color: var(--tnd-navy);
    background-image: none;
}
.faq-real-img {
    width: 100%;
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-lg);
}
/* the :before was a darkening tint over the old background photo -
   with no photo left it's not needed, so it's switched off rather
   than left muddying the flat navy background */
.consultation-bgg:before { background: none; opacity: 0; }
.left-content-para,
.left-content-wrap li p { color: var(--tnd-dark-body); }
.left-content-wrap li i { color: var(--tnd-accent-hover); }
.right-content-wrap .form-container {
    background: var(--tnd-surface);
    box-shadow: var(--tnd-shadow-md);
    border-radius: var(--tnd-radius-card);
}
.right-content-wrap .form-container .text { color: var(--tnd-heading); }
/* mobile: several legacy mobile rules across style.css/media-querie.css
   independently set padding/margin around this heading, paragraph and
   form (tuned at different points for different screen widths), and
   between them they add up to a much bigger gap than the same section
   shows on desktop, where a single tighter rule set wins outright.
   Pinning explicit, small values here - specific and late-loaded enough
   to win over all of them - so mobile matches the desktop spacing. */
@media screen and (max-width: 767px) {
    .services-contact-container .right-content-wrap .form-container { padding: 20px 16px; margin-bottom: 0; }
    .services-contact-container .form-container .text { margin: 0 0 10px; }
    .services-contact-container .form-container > p { margin: 0 0 14px; }
    .services-contact-container .form-container form { padding-top: 10px; }
}

/* Floating labels - robust "has content" detection via :not(:placeholder-shown) */
.input-data { padding-top: 14px; }
.input-data input,
.textarea textarea {
    background: transparent;
    color: var(--tnd-heading);
    border-bottom: 2px solid var(--tnd-border);
    transition: border-color .25s ease;
}
.input-data input:focus,
.textarea textarea:focus { border-color: var(--tnd-accent); }
.input-data input:focus,
.input-data input:focus-visible,
.textarea textarea:focus,
.textarea textarea:focus-visible { outline: none; }

.input-data label {
    top: 14px;
    bottom: auto;
    left: 0;
    color: var(--tnd-body-dim);
    font-size: 15px;
    font-weight: 400;
    transform: translateY(0);
    transform-origin: left top;
    transition: transform .22s ease, font-size .22s ease, color .22s ease, font-weight .22s ease;
}
.textarea label { top: 10px; }

.input-data input:focus ~ label,
.input-data input:not(:placeholder-shown) ~ label,
.textarea textarea:focus ~ label,
.textarea textarea:not(:placeholder-shown) ~ label {
    bottom: auto;
    transform: translateY(-22px);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--tnd-accent);
}

.input-data .underline:before { background: var(--tnd-accent); }
.input-data input:focus ~ .underline:before,
.input-data input:not(:placeholder-shown) ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:not(:placeholder-shown) ~ .underline:before {
    transform: scale(1);
}

/* ---------------------------------------------------------------------
   11. CLIENTS / TESTIMONIALS
   --------------------------------------------------------------------- */
.our-client-bgg { background-color: var(--tnd-navy); }
.review-bgg { background-color: var(--tnd-bg-alt); }
.review-bgg .container .row .col-lg-5 p { color: var(--tnd-body); }
.user-team_innerCard { color: var(--tnd-body); }
.Testimonials .card {
    background: var(--tnd-surface);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-md);
}
.Testimonials .card .carousel-caption { background: var(--tnd-surface); color: var(--tnd-body); }
.Testimonials .testi-title h3 { color: var(--tnd-heading); }
.Testimonials .testi-title h3 span { color: var(--tnd-accent); }
.Testimonials .testimonials-text p { color: var(--tnd-body); }
.Testimonials .carousel-control-next-icon,
.Testimonials .carousel-control-prev-icon { background-color: var(--tnd-accent); color: #fff; }

/* ---------------------------------------------------------------------
   12. FOOTER - dark navy; all direct text needs explicit light tokens
   since there's no white card wrapping it. Clean gradient instead of
   the old photo-texture background, with two soft glow blobs for
   depth, unified circular icon treatment throughout, and a crisper
   type hierarchy for a more premium finish.
   --------------------------------------------------------------------- */
.Footer-bgg {
    background-color: var(--tnd-navy);
    background-image: linear-gradient(160deg, var(--tnd-navy) 0%, #0a2657 55%, var(--tnd-navy) 100%);
}
.Footer-bgg:before {
    background: none;
    opacity: 1;
    background-image:
        radial-gradient(480px 320px at 8% 0%, rgba(22, 139, 232, .16), transparent 70%),
        radial-gradient(420px 300px at 96% 100%, rgba(29, 161, 242, .14), transparent 70%);
}
.footer-logo {
    display: block;
    height: 100px;
    width: auto;
    max-width: none;
    /* the source PNG has ~12% transparent padding baked in before the
       visible artwork starts, so the <img> box's left edge sits well
       right of the logo's actual glyph - this pulls it back so the
       visible logo lines up with the "Help links" column below it */
    margin-left: -37px;
    /* the logo artwork is blue (icon + "IT SERVICES" text) so it was
       nearly disappearing against the footer's navy background - this
       turns every visible (non-transparent) pixel solid white while
       keeping the transparency intact, without needing a second image
       asset. The header keeps the original blue version on white. */
    filter: brightness(0) invert(1);
}
.Footer-bgg:after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--tnd-navy), var(--tnd-accent-hover), var(--tnd-bright), var(--tnd-accent-hover), var(--tnd-navy));
    z-index: 1;
}
.Footer-bgg h4 {
    color: #fff;
    font-family: Nunito-ExtraBold, sans-serif;
    font-size: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
}
.Footer-bgg h4:before {
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tnd-accent-hover), var(--tnd-bright));
}
.Footer-bgg p,
.Footer-bgg ul li a,
.Footer-bgg ul li span,
.Footer-bgg .col-md-3 span,
.Footer-bgg .col-md-4 a { color: var(--tnd-dark-body); }
.Footer-bgg p { line-height: 1.7; }
/* the tagline paragraph carries 1rem top+bottom padding (from
   media-querie.css, even at mobile widths) plus the browser's own
   default 1rem paragraph margin-bottom stacking underneath it - on
   mobile that's roughly 48px of dead air before the social icons row,
   reading as a stray gap rather than intentional spacing. Tightened to
   a single deliberate space below the text. */
@media screen and (max-width: 767px) {
    .Footer-bgg .col-md-3 p { padding: 0 0 10px; margin-bottom: 0; }
}
.Footer-bgg .hover-effect ul li a { transition: color .25s ease, padding-left .25s ease; }
.Footer-bgg .hover-effect ul li a:hover { color: #fff; }
.Footer-bgg .hover-effect ul li a:before { background: var(--tnd-accent-hover); border-radius: 2px; }

/* social + official-info icons now share one consistent circular
   treatment instead of the old mismatched circle/square pairing */
.Footer-bgg .col-md-3 .Foot_icon,
.Footer-bgg ul li i {
    background: var(--tnd-dark-chip);
    border: 1px solid var(--tnd-dark-border);
    border-radius: 50%;
    color: var(--tnd-dark-body);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.Footer-bgg .col-md-3 .Foot_icon:hover {
    background: var(--tnd-accent-hover);
    border-color: var(--tnd-accent-hover);
    transform: translateY(-3px);
}
.Footer-bgg .col-md-3 .Foot_icon:hover i.fab { color: #fff; }
.Footer-bgg .footer-company-info ul li:hover i {
    background: var(--tnd-accent-hover);
    border-color: var(--tnd-accent-hover);
    color: #fff;
}
.Footer-bgg .footer-company-info ul li a { transition: color .25s ease; }
.Footer-bgg .footer-company-info ul li a:hover { color: #fff; }

.copy-bgg {
    background: #081c40;
    border-top: 1px solid var(--tnd-dark-border);
    padding: 18px 0;
}
.copy_desg { color: var(--tnd-dark-body); font-size: 13.5px; letter-spacing: .02em; }

/* ---------------------------------------------------------------------
   13. CONTACT PAGE - dark navy photo banner; white info/form cards.
   --------------------------------------------------------------------- */
.common-innerhead-sec { background-color: var(--tnd-navy); }
/* Contact page gets its own banner photo instead of sharing the
   About/Services page-banner image (higher specificity than the
   shared .common-innerhead-sec:before rule, so only this page changes). */
.contact-page .common-innerhead-sec:before { background-image: url(../assest/images/network-cabling-closeup.jpg); }
.common-innerhead-sec:after { background-color: rgba(11, 45, 107, .82); }

/* the card background (--tnd-surface, white) and the section behind it
   (--tnd-bg, also white) are the same colour, and there was no border
   at all - just a faint shadow - so the card was practically invisible.
   Giving it a real border plus a proper icon badge instead of a bare
   gradient-text glyph floating in the layout. */
.ct-fancy-box-layout5 .item--inner {
    background-color: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    box-shadow: var(--tnd-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ct-fancy-box-layout5 .item--inner:hover {
    transform: translateY(-6px);
    box-shadow: var(--tnd-shadow-lg);
    border-color: var(--tnd-accent-hover);
}
.ct-fancy-box-layout5 .item--icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tnd-accent-soft);
    transition: background-color .3s ease;
}
/* navy rather than the bright accent, so the icon's own blue gradient
   glyph still reads clearly against the badge behind it on hover */
.ct-fancy-box-layout5 .item--inner:hover .item--icon { background: var(--tnd-navy); }
.ct-fancy-box-layout5 .item--icon i { font-size: 24px; }
.ct-fancy-box-layout5 .item--title { color: var(--tnd-heading); }
.ct-fancy-box-layout5 span.item--title-value { color: var(--tnd-body); font-weight: 600; }
#ct_fancy_box-d2a6e00.ct-fancy-box .item--icon i {
    background-image: linear-gradient(270deg, var(--tnd-accent), var(--tnd-accent-hover));
    background-color: transparent !important;
}
#ct_fancy_box-d2a6e00.ct-fancy-box .item--inner .item--overlay:before {
    background-image: linear-gradient(270deg, var(--tnd-royal), var(--tnd-accent));
    background-color: transparent !important;
}

.Dealer__container { background-color: var(--tnd-surface); border-radius: var(--tnd-radius-card); overflow: hidden; box-shadow: var(--tnd-shadow-md); }
.Dealer__content .deal_formTop h6 { color: var(--tnd-heading); }
.Dealer__featured {
    border-radius: 0;
    position: relative;
    background: url(../assest/images/cracked-shield-security-alert.jpg) center/cover no-repeat;
}
.Dealer__featured:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 45, 107, .55), rgba(11, 45, 107, .9));
}
.Dealer__featured .position-relative { position: relative; z-index: 1; padding: 40px 0; }
.Dealer__circle { display: none; }
@media screen and (max-width: 767px) {
    /* .Dealer__container switches to display:block (stacked) at this
       breakpoint, so .Dealer__featured loses the flex-stretch height
       it matched to the form beside it - give it an explicit height
       so the background photo has room to actually show. */
    .Dealer__featured { min-height: 220px; }
}
.dealer_sec .form-list input,
.dealer_sec .form-list textarea { background: transparent; color: var(--tnd-heading); border-bottom-color: var(--tnd-border); }
.dealer_sec .form-list input:focus,
.dealer_sec .form-list textarea:focus { border-color: var(--tnd-accent); }
.dealer_sec .form-list .form-list__row label { color: var(--tnd-royal); }
.service-left-sidebar .service-tabs-wrapper button.active { background: var(--tnd-royal); }
.service-left-sidebar .service-tabs-wrapper button.nav-link { background: var(--tnd-navy); }

/* ---------------------------------------------------------------------
   14. SERVICES DETAIL PAGE
   --------------------------------------------------------------------- */
.service-left-title,
.exps-private-wrap .card-title {
    background: var(--btnBgLinearGradient);
    background-size: 220% 150%;
    color: #fff;
}
.number-main-wrapper .num-content,
.how-tohelp-main--wrapper .help-main-wrap .number-main-wrapper .num-content {
    background: var(--tnd-surface);
    border-top-color: var(--tnd-accent);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
}
.number-main-wrapper .num-content .our-number-title,
.how-tohelp-main--wrapper .num-content .our-number-title p { color: var(--tnd-body); }
.service-left-sidebar .service-broucher-wrapper,
.service-left-sidebar .service-contact-wrapper,
.service-left-sidebar .service-tabs-wrapper {
    background-color: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
}
/* dark-navy CTA-style bands (per the original template's own design) */
.oursolution-bgg,
.about-contact-bgg,
.services-contact-container { background-color: var(--tnd-navy); }
/* had no padding at all defined anywhere - sat flush against the
   services list above and the footer below with no breathing room */
.services-contact-container { padding: 5rem 0 6rem; }
/* light bands */
.our-number-bgg,
.ourmission-bgg,
.steps-bgg { background-color: var(--tnd-bg); }
.managed-services-content .services-text--area,
.cloud-analytics-services--wrapp .cloud-analytics-serv-content .services-text--area,
.how-we-help-wrap li.list-group-item,
.suit-sap-main--container .suit-sap--cont-wrap,
.key-use-wrap { background-color: var(--tnd-surface); border-color: var(--tnd-border); }
.managed-services-content .services-text--area h5,
.how-we-help-wrap .list-group-item .how-help-text h6,
.suit-sap-main--container .suit-sap-text-wrapper h5 { color: var(--tnd-heading); }
.managed-services-content .services-text--area p,
.how-we-help-wrap .list-group-item .how-help-text p,
.suit-sap-main--container .suit-sap-text-wrapper li,
.cloud-analytics-services--wrapp .cloud-analytics-serv-content .services-text--area p { color: var(--tnd-body); }
.private5g-textarea .private-text h4 { color: var(--tnd-heading); }
.private5g-textarea .private-text p { color: var(--tnd-body); }
.principal-result-wrap .box { background-color: var(--tnd-surface); box-shadow: var(--tnd-shadow-sm); }
.principal-result-wrap .box h4 { color: var(--tnd-accent); }
.principal-result-wrap .box p { color: var(--tnd-body); }

/* ---------------------------------------------------------------------
   15. ABOUT PAGE
   --------------------------------------------------------------------- */
.about-intro-bgg,
.values-bgg { background-color: var(--tnd-bg); }
/* had no vertical padding at all defined anywhere, unlike the
   Mission & Vision band right above it (padding: 6rem 0 5rem) - it
   was sitting flush against its neighbours top and bottom */
.values-bgg { padding: 6rem 0; }
.about-intro-row { margin-top: 40px; }
.about-intro-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-md);
}
.about-intro-text { margin-top: 14px; }
@media screen and (max-width: 991px) {
    .about-intro-img { height: 260px; margin-bottom: 30px; }
}
.about-intro-text p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--tnd-body);
    text-align: left;
    margin-bottom: 20px;
}
.about-intro-text p:last-child { margin-bottom: 0; }

/* Mission & Vision - dark navy photo band, white cards on top */
.mission-vision-bgg {
    position: relative;
    padding: 6rem 0 5rem;
    background: url(../assest/images/ai-network-datacenter-hologram.jpg) center/cover no-repeat;
    background-color: var(--tnd-navy);
}
.mission-vision-bgg:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 45, 107, .92), rgba(11, 45, 107, .82));
}
.mission-vision-bgg .container { position: relative; z-index: 1; }
.mv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
}
.mv-card {
    background: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-md);
    padding: 2.5em 2em;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mv-card:hover { transform: translateY(-6px); border-color: var(--tnd-accent); box-shadow: var(--tnd-shadow-lg); }
.mv-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tnd-surface-2);
    margin-bottom: 20px;
}
.mv-icon i { font-size: 26px; color: var(--tnd-accent); }
.mv-card h3 { font-size: 22px; font-weight: 700; color: var(--tnd-heading); margin-bottom: 12px; }
.mv-card p { color: var(--tnd-body); margin: 0; }

/* What We Stand For - light section, white cards */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
}
.value-card {
    background: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
    padding: 2em 1.75em;
    text-align: left;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.value-card:hover { transform: translateY(-6px); border-color: var(--tnd-accent); box-shadow: var(--tnd-shadow-md); }
.value-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tnd-surface-2);
    margin-bottom: 18px;
}
.value-icon i { font-size: 22px; color: var(--tnd-accent); }
.value-card h3 { font-size: 18px; font-weight: 700; color: var(--tnd-heading); margin-bottom: 8px; }
.value-card p { font-size: 14px; color: var(--tnd-body); margin: 0; }

/* About-page CTA band - dark navy, text sits directly on it */
.about-contact-bgg .about-text-area h5,
.about-contact-bgg .about-call-area p { color: var(--tnd-dark-heading); }
.about-contact-bgg .about-text-area p { color: var(--tnd-dark-body); }
.about-contact-bgg .about-call-area h2 { color: var(--tnd-accent-hover); }
.about-contact-bgg .about-call-area h2 a { color: inherit; }

@media screen and (max-width: 1023px) {
    .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
    .mv-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 600px) {
    .value-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   16. BROKEN ASSET PATHS - several background-image url()s across the
   original stylesheets used an absolute "/assest/..." path (which
   404s unless the site is served from a domain root) or a relative
   path missing/duplicating the "assest" folder segment, so the fonts
   and section background images never actually loaded. Corrected here
   with paths relative to /css (where every stylesheet lives), using
   the exact same selectors so these simply replace the broken values.
   --------------------------------------------------------------------- */
@font-face { font-family: Nunito-Regular; src: url(../assest/Fonts/Nunito-Regular.ttf); }
@font-face { font-family: Nunito-Black; src: url(../assest/Fonts/Nunito-Black.ttf); }
@font-face { font-family: Nunito-Bold; src: url(../assest/Fonts/Nunito-Bold.ttf); }
@font-face { font-family: Nunito-semiBold; src: url(../assest/Fonts/Nunito-SemiBold.ttf); }
@font-face { font-family: Nunito-ExtraBold; src: url(../assest/Fonts/Nunito-ExtraBold.ttf); }
@font-face { font-family: Barlow-Bold; src: url(../assest/Fonts/Barlow-Bold.ttf); }
@font-face { font-family: Barlow-ExtraBold; src: url(../assest/Fonts/Barlow-ExtraBold.ttf); }

.common-innerhead-sec:before { background-image: url(../assest/images/about-bgnew.jpg); }
.About_counter:before { background-image: url(../assest/images/counter-dots.png); }
.why-choose--mainwrapper { background-image: url(../assest/images/whychooseBg.jpg); }
.counter-style-three,
.our-client-bgg { background-image: url(../assest/images/factSectionBg.png); }

#ct_fancy_box-d2a6e00.ct-fancy-box .item--inner .item--overlay:after {
    background-image: url(../assest/images/contact-overlay-shape1.png);
}
.pcss3t > ul { background-image: url(../assest/images/ourmission2.jpg); }

/* was a very dark, dimly-lit server-room photo, and stacking the
   .82-opacity navy overlay below on top of it compounded to almost
   solid black - swallowing the white text entirely. Clean navy
   gradient instead, same technique already used for the Consultation
   section and footer. */
.service-left-sidebar .service-contact-wrapper {
    background-image: linear-gradient(155deg, var(--tnd-navy) 0%, var(--tnd-royal) 100%);
}
.service-right-sidebar .service-content-area .service-content-main--heading,
.service-right-sidebar .service-content-area .service-content-sub--heading {
    background-image: url(../assest/images/project-rightHeadingpattern.png);
}
.service-right-sidebar .service-content-area .service-main-heading--text {
    background-image: url(../assest/images/factSectionBg.png);
}
.services-contact-container { background-image: url(../assest/images/ourmission3.jpg); }

/* ---------------------------------------------------------------------
   17. FAQ - light accordion
   --------------------------------------------------------------------- */
.faq-bgg { background-color: var(--tnd-bg-alt); }
.faq-bgg .card .card-header button { color: var(--tnd-heading); border-bottom-color: var(--tnd-border); }
.faq-bgg .card .card-header button:hover,
.faq-bgg .card .card-header button:not(.collapsed) { color: var(--tnd-accent); }
.faq-bgg .card .card-body { color: var(--tnd-body); }

/* ---------------------------------------------------------------------
   18. FLOATING CALL-TO-ACTION / BACK TO TOP - blue accent
   --------------------------------------------------------------------- */
.social ul { background: var(--tnd-accent); }
.social ul li { background: var(--tnd-accent); }
.social ul li { border-right-color: rgba(255, 255, 255, .25); }
.social ul li a { color: #fff; }
/* the WhatsApp icon is a flat black PNG (not an icon-font glyph), so
   `color` has no effect on it - needs a light backdrop regardless of
   theme so it stays visible; kept explicitly white/light here rather
   than the heading token (which is dark in this light theme). */
.social ul li i,
.social ul li span { background: #fff; color: var(--tnd-accent); }
.back-to-top,
.back-to-top:active,
.back-to-top:hover { background-color: var(--tnd-accent); }
.back-to-top svg.icon__arrow-up { fill: #fff; }

/* =====================================================================
   19. LAYOUT CREATIVITY & MOTION
   ===================================================================== */

/* --- idle motion tokens -------------------------------------------- */
@keyframes tnd-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes tnd-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

/* --- angled section transition between Facts and Process ----------- */
.About-bgg { position: relative; }
#carouselExampleCaptions:after,
#carouselExampleCaptions:before { pointer-events: none; }
#carouselExampleCaptions { position: relative; z-index: 0; }
.counter-style-three { position: relative; overflow: visible; padding-top: 4rem; }
.counter-style-three:after {
    content: "";
    position: absolute;
    bottom: -1px; left: 0; width: 100%; height: 48px;
    background: var(--tnd-bg-alt);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    z-index: 1;
}
.process-bgg { padding-top: calc(6rem + 24px); }
/* media-querie.css's tablet/mobile rule ("...max-width:1023px...
   .process-bgg{padding:4rem 0 0}") zeroes out the bottom padding that
   the desktop rule in style.css gives this section (padding:6rem 0
   2rem), unlike every sibling section which keeps symmetric 4rem
   padding on mobile. That left the Work Process cards sitting flush
   against the dark Consultation band right below with no gap.
   Restoring it here to match the same 4rem rhythm every other section
   uses at this breakpoint. */
@media screen and (max-width: 1023px) {
    .process-bgg { padding-bottom: 4rem; }
}

/* --- counter section: the stats card lifts slightly off its band --- */
.counter-wrapper {
    position: relative;
    z-index: 2;
    border: 1px solid var(--tnd-border);
    transform: translateY(-8px);
}

/* --- testimonials: a proper card with a large decorative quote mark
   instead of a plain text block ------------------------------------- */
.Testimonials .testi-title { position: relative; }
.Testimonials .card { position: relative; overflow: visible; }
.Testimonials .card:before {
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: -18px;
    left: 24px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: var(--tnd-accent);
    color: #fff;
    font-size: 17px;
    box-shadow: var(--tnd-shadow-md);
}

/* --- primary hero CTA gets a brief attention pulse only once, on
   load, rather than looping forever --------------------------------- */
#carouselExampleCaptions .quote_btn { animation: tnd-pulse-ring 1.8s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
    #carouselExampleCaptions .quote_btn { animation: none; }
}

/* --- About page: mission/vision and value icon chips float gently
   on hover only, not continuously --------------------------------- */
.mv-card:hover .mv-icon,
.value-card:hover .value-icon { animation: tnd-float 1.6s ease-in-out infinite; }

/* ---------------------------------------------------------------------
   20. LAYOUT RESTRUCTURE - new structural elements built from existing
   content only (same stats, same service copy from the client's own
   services document, same numbers). Nothing here invents new text.
   --------------------------------------------------------------------- */

/* --- 20a. Hero trust strip: a floating credibility bar bridging the
   hero photo and the About section, reusing the exact figures already
   used in the Facts/Counter section further down the page. --------- */
.hero-stats-strip {
    position: relative;
    z-index: 3;
    margin-top: -64px;
    margin-bottom: 24px;
}
.hero-stats-strip__inner {
    background: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-lg);
    padding: 26px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.hero-stats-strip__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 20px;
    border-right: 1px solid var(--tnd-border);
    flex: 1 1 0;
    min-width: 180px;
}
.hero-stats-strip__item:last-child { border-right: none; }
.hero-stats-strip__item i {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    border-radius: 50%;
    background: var(--tnd-accent-soft);
    color: var(--tnd-accent);
    font-size: 22px;
}
.hero-stats-strip__num {
    display: block;
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--tnd-heading);
    line-height: 1.2;
}
.hero-stats-strip__label {
    display: block;
    font-size: 13px;
    color: var(--tnd-body);
}
@media screen and (max-width: 991px) {
    .hero-stats-strip { margin-top: -40px; }
    .hero-stats-strip__inner { padding: 20px; }
    .hero-stats-strip__item { flex: 1 1 45%; border-right: none; padding: 10px; }
    /* strip's overlap shrinks from -64px to -40px at this tier, so the
       dots need less clearance to stay above it. */
    #carouselExampleCaptions .carousel-indicators { bottom: 60px; }
}
@media screen and (max-width: 575px) {
    .hero-stats-strip { margin-top: 18px; margin-bottom: 10px; }
    .hero-stats-strip__inner { padding: 16px; gap: 10px; }
    .hero-stats-strip__item i { width: 44px; height: 44px; line-height: 44px; font-size: 18px; }
    .hero-stats-strip__num { font-size: 20px; }
    /* strip no longer overlaps the hero at all here (positive
       margin-top), so the dots can sit back near the bottom edge. */
    #carouselExampleCaptions .carousel-indicators { bottom: 16px; }
}

/* --- 20b. Service cards: reveal each service's real one-line summary
   (sourced from the client's own services document) and a "View
   Details" link on hover, instead of a bare title. ------------------ */
.box .box-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.box .title { padding: 0; margin: 0 0 6px; }
.box .desc {
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease;
}
.box:hover .desc, .box:focus-within .desc { max-height: 90px; opacity: 1; }
.box-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease, color .2s ease;
}
.box-link i { font-size: 11px; transition: transform .25s ease; }
.box-link:hover { color: var(--tnd-accent-hover); text-decoration: none; }
.box-link:hover i { transform: translateX(4px); }
.box:hover .box-link, .box:focus-within .box-link { max-height: 30px; opacity: 1; }
@media screen and (max-width: 767px) {
    /* hover never fires reliably on touch - keep the summary visible */
    .box .desc, .box-link { max-height: none; opacity: 1; overflow: visible; }
}

/* --- 20c. About "why it works" rows become a proper card list instead
   of plain stacked text, with a hover lift for a more tactile feel. - */
.About_numCon {
    align-items: flex-start;
    gap: 16px;
    background: var(--tnd-surface-2);
    border: 1px solid var(--tnd-border);
    border-left: 3px solid var(--tnd-accent);
    border-radius: var(--tnd-radius-card);
    padding: 18px 20px;
    margin: 0 0 14px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.About_numCon:hover {
    transform: translateX(6px);
    box-shadow: var(--tnd-shadow-sm);
    border-left-color: var(--tnd-accent-hover);
}
.About_num.num_empty {
    min-width: 34px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    margin-top: 2px;
}

/* --- 20d. Our Clients: a quiet static "client wall" grid replaces the
   old infinite scrolling marquee rows - calmer, more enterprise/trust
   focused, and easier to scan than constantly-moving text. ---------- */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 44px;
}
.clients-grid__item {
    position: relative;
    overflow: hidden;
    background: var(--tnd-dark-chip);
    border: 1px solid var(--tnd-dark-border);
    border-radius: 8px;
    padding: 18px 12px;
    text-align: center;
    color: var(--tnd-dark-body);
    font-family: Barlow-Bold, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.35;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease, background-color .3s ease;
}
/* diagonal light sweep, held off-canvas until hover fires it once */
.clients-grid__item:before {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
}
.clients-grid__item:hover:before { left: 130%; }
.clients-grid__item:hover {
    transform: translateY(-5px) scale(1.03);
    background: rgba(255, 255, 255, .12);
    border-color: var(--tnd-accent-hover);
    color: #fff;
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .5), 0 0 0 1px var(--tnd-accent-hover) inset;
}
.clients-grid__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    background: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0 0 10px;
}
.clients-grid__logo {
    max-height: 72px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}
.clients-grid__name { display: block; }
@media (prefers-reduced-motion: reduce) {
    .clients-grid__item:before { transition: none; }
}
@media screen and (max-width: 575px) {
    .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
    .clients-grid__item { padding: 14px 8px; font-size: 12px; }
}

/* ---------------------------------------------------------------------
   20e. About section - a dark, immersive feature panel that breaks the
   white page rhythm. Deep navy gradient ground with two soft accent
   glows; the photo sits in a glowing rounded card (slow hover zoom +
   glass "years of experience" pill); on the right a light headline, a
   lead paragraph, a 2x2 grid of frosted-glass capability cards and the
   CTA. Same copy, same image.
   --------------------------------------------------------------------- */
.about-v3 {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 0;
    background: linear-gradient(160deg, #0B2D6B 0%, #0A1F4D 55%, #071630 100%);
}
.about-v3__bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(620px circle at 10% 15%, rgba(29, 161, 242, .22), transparent 60%),
        radial-gradient(680px circle at 92% 90%, rgba(8, 105, 201, .26), transparent 62%);
}
.about-v3 .container { position: relative; z-index: 1; }
.about-v3__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px 60px;
}

/* --- media ---
   the card takes the photo's own 3:2 shape, so object-fit:cover shows
   the WHOLE image with no left/right cropping. The image column is a
   little wider than the text and both are vertically centred. */
.about-v3__media {
    position: relative;
    align-self: center;
}
.about-v3__media:before {
    content: "";
    position: absolute;
    left: -26px;
    top: -22px;
    width: 62%;
    height: 88%;
    border-radius: 26px;
    background: linear-gradient(140deg, rgba(29, 161, 242, .55), rgba(8, 105, 201, .15));
    filter: blur(32px);
    z-index: 0;
}
.about-v3__frame {
    position: relative;
    z-index: 1;
    aspect-ratio: 3 / 2;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 34px 70px -22px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
.about-v3__frame img {
    position: absolute;
    /* overfill by 2px so the photo is fully fitted to the card by
       default - no hairline gap at any edge, no hover needed. */
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    object-position: center;
}
.about-v3__frame:after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(7, 22, 48, 0) 52%, rgba(7, 22, 48, .55));
    pointer-events: none;
}

/* --- experience seal (round, gradient, slow-spinning dashed ring) --- */
.about-v3__badge {
    position: absolute;
    left: -18px;
    bottom: -18px;
    z-index: 3;
    width: 130px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(150deg, #0B2D6B 0%, #0869C9 62%, #1DA1F2 100%);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 22px 48px -14px rgba(0, 0, 0, .62), inset 0 0 24px rgba(29, 161, 242, .35);
}
.about-v3__badge-ring {
    position: absolute;
    top: -9px; left: -9px; right: -9px; bottom: -9px;
    border-radius: 50%;
    border: 1.5px dashed rgba(29, 161, 242, .6);
    animation: about-v3-seal-spin 16s linear infinite;
}
@keyframes about-v3-seal-spin { to { transform: rotate(360deg); } }
.about-v3__badge-num {
    font-family: Barlow-ExtraBold, Nunito-Regular, sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff, #9bd6ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-v3__badge-num sup {
    font-size: .5em;
    vertical-align: .5em;
    margin-left: 1px;
    -webkit-text-fill-color: #bfe2ff;
    color: #bfe2ff;
}
.about-v3__badge-label {
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1.35;
    color: rgba(255, 255, 255, .84);
}
@media (prefers-reduced-motion: reduce) {
    .about-v3__badge-ring { animation: none; }
}

/* --- content --- */
.about-v3__content .common-heading_blurHead { margin-bottom: 6px; }
.about-v3__content .dark-heading_blurHead {
    color: var(--tnd-bright);
    -webkit-text-fill-color: var(--tnd-bright);
}
.about-v3__content .dark-heading_blurHead:before { background: var(--tnd-bright); }
.about-v3__content .subheading-common span {
    background: linear-gradient(90deg, var(--tnd-bright), #8fd0ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-v3__lead {
    margin: 14px 0 22px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--tnd-dark-body);
    max-width: 52ch;
}
.about-v3__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0 0 26px;
}
.about-v3__feature {
    padding: 15px 16px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.about-v3__feature:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, .09);
    border-color: rgba(29, 161, 242, .5);
}
.about-v3__feature-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--tnd-bright), var(--tnd-accent));
    box-shadow: 0 10px 22px -8px rgba(29, 161, 242, .7);
}
.about-v3__feature-title {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.about-v3__feature p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tnd-dark-body);
}
.about-v3__cta { margin-top: 4px; }

/* --- responsive --- */
@media screen and (max-width: 991px) {
    .about-v3 { padding: 4.5rem 0; }
    .about-v3__grid { grid-template-columns: 1fr; gap: 46px; }
    /* single column: keep the seal + its outer ring fully inside the
       photo so nothing is clipped by the section edge on any phone. */
    .about-v3__badge { left: 16px; bottom: 16px; }
    .about-v3__badge-ring { top: -6px; left: -6px; right: -6px; bottom: -6px; }
}
@media screen and (max-width: 575px) {
    .about-v3__grid { gap: 38px; }
    .about-v3__media:before { left: -14px; top: 20px; filter: blur(22px); }
    .about-v3__badge { left: 14px; bottom: 14px; width: 104px; height: 104px; }
    .about-v3__badge-num { font-size: 32px; }
    .about-v3__badge-label { font-size: 8.5px; letter-spacing: .1em; }
    .about-v3__badge-ring { top: -5px; left: -5px; right: -5px; bottom: -5px; }
    .about-v3__lead { font-size: 15px; margin: 14px 0 22px; }
    .about-v3__features { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; }
}

/* ---------------------------------------------------------------------
   21. DELIBERATELY DIFFERENT FROM THE LIVE SITE - the live site
   (tndprideit.com) uses a plain text-left/image-right template for
   almost every section and a left-edge social stack. These rules
   change the arrangement (column order, grid vs. list, floating vs.
   inline) section by section while keeping every word of copy, every
   image and every link exactly as they were.
   --------------------------------------------------------------------- */

/* --- 21a. Floating contact rail: was defaulting to an unstyled stack
   pinned to the top-left corner (no offset was ever set).

   Icon only at rest; hovering pops a text tooltip out to the left,
   built as a ::before pseudo-element with pointer-events:none. That's
   the key fix - because the tooltip can never itself receive the
   mouse, it can never "steal" or drop the hover state, and because the
   icon's own box never changes size, neighbours can never shift.
   Desktop only; mobile/tablet keeps its own full-width bottom bar
   untouched. That bottom bar (in media-querie.css) runs up to
   max-width:1023px, so this floating-pill version has to start exactly
   at 1024px - starting it at 768px (as before) overlapped the bottom
   bar's own range for 768-1023px, and because this selector is more
   specific it silently won that whole band, turning tablets' bottom bar
   into the desktop floating pill a breakpoint early. */
@media screen and (min-width: 1024px) {
    .call-toaction-wrap .social ul {
        position: fixed !important;
        top: 50% !important;
        right: 18px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%);
        flex-direction: column;
        width: auto;
        height: auto;
        gap: 14px;
        padding: 0;
        background: transparent;
    }
    .call-toaction-wrap .social ul li {
        position: relative;
        width: 54px;
        height: 54px;
        overflow: visible;
        border-right: none;
        padding: 0;
        background: none;
        box-shadow: none;
    }
    /* the original template has an unconditional
       ".social ul li:hover{transform:translate(100px)}" left over from
       its own abandoned hover mechanic - that's what was actually
       "dancing": the icon itself jumping 100px sideways on hover, which
       moves it out from under the cursor, drops the hover, snaps back,
       and re-triggers - a flicker loop that also breaks clicking.
       Cancelling it here explicitly. */
    .call-toaction-wrap .social ul li:hover {
        transform: none;
    }
    .call-toaction-wrap .social ul li a {
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 0;
        border-radius: 50%;
        background: var(--tnd-accent);
        box-shadow: var(--tnd-shadow-md);
        transition: background-color .25s ease, box-shadow .25s ease;
    }
    /* no transform/scale on the icon itself - scaling a circle right as
       the cursor crosses its edge is what caused the earlier flicker
       (browser re-testing the hover boundary against a box that's
       changing size mid-hover); a plain colour/shadow swap has no such
       edge case */
    .call-toaction-wrap .social ul li:hover a,
    .call-toaction-wrap .social ul li a:focus {
        background: var(--tnd-accent-hover);
        box-shadow: var(--tnd-shadow-lg);
    }
    /* same original template leftover - cancel the full-turn icon spin
       so nothing inside the badge moves either */
    .call-toaction-wrap .social ul li:hover i,
    .call-toaction-wrap .social ul li:hover img {
        transform: none;
        transition: none;
    }
    /* the base template's icon margins were tuned for its own (broken)
       hover mechanic - zero them out to keep the badge a clean circle */
    .call-toaction-wrap .social ul li > a > i,
    .call-toaction-wrap .social ul li > a > span:not(.social-label) {
        margin: 0;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
    }
    /* pure fade - no left/right slide, so there's no motion at all
       for the cursor's position relative to the icon to interact with */
    .call-toaction-wrap .social ul li a::before {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        right: calc(100% + 14px);
        transform: translateY(-50%);
        background: var(--tnd-navy);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        padding: 9px 16px;
        border-radius: 8px;
        box-shadow: var(--tnd-shadow-md);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        will-change: opacity;
        transition: opacity .2s ease, visibility .2s;
    }
    /* small arrow pointing from the tooltip to the icon */
    .call-toaction-wrap .social ul li a::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(100% + 8px);
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-left-color: var(--tnd-navy);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        will-change: opacity;
        transition: opacity .2s ease, visibility .2s;
    }
    .call-toaction-wrap .social ul li:hover a::before,
    .call-toaction-wrap .social ul li:hover a::after {
        opacity: 1;
        visibility: visible;
    }
    /* the icon link itself must stay clickable at all times - the
       tooltip is pointer-events:none so it never intercepts the click */
    .call-toaction-wrap .social ul li a { pointer-events: auto; }
}

/* --- 21a-fix. The in-flow ".social-label" text ("Whatsapp"/"Mail"/
   "Call now") is never actually needed as visible text at any size - on
   desktop the floating pill's own hover tooltip (built above from
   data-label) replaces it, and on the fixed mobile bottom bar there's
   only ~46px of height and a third of the screen width per button, not
   enough room for an icon and a text label side by side (that's what
   was actually causing the "icon and text merging" look on phones). So
   it's hidden unconditionally, at every breakpoint - this single rule
   is the only thing that should ever need to touch it. */
.call-toaction-wrap .social-label { display: none; }
/* Mobile/tablet bottom bar (media-querie.css, up to max-width:1023px):
   the icon itself carried a leftover left margin tuned for the old
   "label text, then icon" layout - with the label gone that margin just
   pushed the icon off-centre in its button. Zeroing it here mirrors the
   same fix already applied to the desktop pill above, using the same
   precise selector so it only ever touches the actual icon, never the
   (already hidden) label span. */
@media screen and (max-width: 1023px) {
    .call-toaction-wrap .social ul li > a > i,
    .call-toaction-wrap .social ul li > a > span:not(.social-label) {
        margin: 0;
    }
}

/* --- 21b. Why Choose Us: stat circles move off the text column and
   float directly on the photo collage as two overlaid proof cards. -- */
.feature-circle-wrap--float {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    padding: 10px;
}
.feature-circle--card {
    pointer-events: auto;
    background: var(--tnd-surface);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-lg);
    padding: 14px 18px;
    max-width: 240px;
}
.feature-circle--card:first-child { align-self: flex-start; }
.feature-circle--card:last-child { align-self: flex-end; }
@media screen and (max-width: 991px) {
    .feature-circle-wrap--float { position: static; flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 20px; padding: 0; }
    .feature-circle--card { max-width: none; flex: 1 1 200px; }
}

/* --- 21c. Facts strip: four glowing glass cards sitting straight on
   the dark textured band (the white floating card is dropped), gradient
   numbers, a soft light-blob glow behind each icon, and a conic-gradient
   ring that sweeps in around the icon on hover. ---------------------- */
.counter-wrapper {
    background: none;
    box-shadow: none;
    border: none;
    transform: none;
    padding: 0;
}
.facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.facts-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 38px 20px 30px;
    border-radius: var(--tnd-radius-card);
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
    border: 1px solid var(--tnd-dark-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.facts-card:hover {
    transform: translateY(-10px);
    border-color: var(--tnd-accent-hover);
    box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .55);
}
.facts-card__glow {
    position: absolute;
    top: -46px;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--tnd-accent-hover) 0%, transparent 70%);
    opacity: .25;
    filter: blur(12px);
    pointer-events: none;
    transition: opacity .4s ease, transform .5s ease;
}
.facts-card:hover .facts-card__glow { opacity: .55; transform: translateX(-50%) scale(1.15); }
.facts-card__icon {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 27px;
    color: #fff;
    background: linear-gradient(135deg, var(--tnd-accent), var(--tnd-royal));
    box-shadow: 0 12px 26px -10px rgba(8, 105, 201, .65);
}
.facts-card__icon:before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(from 0deg, var(--tnd-accent-hover), transparent 55%, var(--tnd-bright), transparent 90%);
    opacity: 0;
    transition: opacity .4s ease;
}
.facts-card:hover .facts-card__icon:before { opacity: 1; }
.facts-card__number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.facts-card__suffix { font-size: 26px; }
.facts-card__title {
    color: var(--tnd-dark-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
}
@media screen and (max-width: 767px) {
    .facts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .facts-card { padding: 30px 14px 24px; }
    .facts-card__number { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .facts-card, .facts-card__glow, .facts-card__icon:before, .facts-card__number { transition: none; }
}

/* --- 21d. Consultation: benefits list becomes a 2x2 tile grid instead
   of a plain checklist (section itself was already mirrored so the
   form sits first, benefits second). ------------------------------- */
.consult-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
}
.consult-benefits-grid li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--tnd-dark-border);
    border-radius: 10px;
    padding: 14px;
    margin: 0;
    transition: background-color .25s ease, transform .25s ease;
}
.consult-benefits-grid li:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.consult-benefits-grid li i { color: var(--tnd-accent-hover); margin-top: 3px; }
.consult-benefits-grid li p { margin: 0; font-size: 14px; }
@media screen and (max-width: 575px) {
    .consult-benefits-grid { grid-template-columns: 1fr; }
}

/* --- 21e. Footer: a full-width brand band on top (logo, blurb and
   social icons in one row) with the three link columns below it,
   instead of four columns flush side by side. Same markup order on
   every page, so this one rule fixes index/about/services/contact
   together. ----------------------------------------------------------*/
.foot-alig2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "brand brand brand" "help services info";
    gap: 34px;
}
.foot-alig2 > div { max-width: 100%; flex: none; width: auto; }
.foot-alig2 > div:nth-child(1) {
    grid-area: brand;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--tnd-dark-border);
}
.foot-alig2 > div:nth-child(1) p { margin: 0; flex: 1 1 280px; }
.foot-alig2 > div:nth-child(2) { grid-area: help; }
.foot-alig2 > div:nth-child(3) { grid-area: services; }
.foot-alig2 > div:nth-child(4) { grid-area: info; }
@media screen and (max-width: 767px) {
    .foot-alig2 {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "help" "services" "info";
        gap: 26px;
    }
    .foot-alig2 > div:nth-child(1) { flex-direction: column; align-items: flex-start; }
    /* the real cause of the big gap: "flex: 1 1 280px" on the paragraph
       is a WIDTH basis in the desktop row layout above, but flex-basis
       tracks the main axis - once this container switches to
       flex-direction:column here, that same 280px becomes a HEIGHT
       basis instead, forcing the one-line tagline into a ~280px-tall
       box with the icons pushed down below all that empty space. Reset
       it back to its natural content height on mobile. */
    .foot-alig2 > div:nth-child(1) p { flex: 0 0 auto; width: 100%; }
}

/* ---------------------------------------------------------------------
   22. SERVICES PAGE - full design system. Every class below (sidebar,
   nav pills, headings, text blocks, feature lists, cards, CTA banners)
   repeats across all ~30 service/sub-service panels on this page, so
   styling each one once here restyles the whole page without touching
   the repeated content itself. Section 14 above already mapped colours
   to theme tokens; this fills in the missing layout - spacing, radius,
   shadow, hierarchy, hover states - none of which existed before
   (these classes had no rules anywhere except a handful of colours).
   --------------------------------------------------------------------- */

/* --- 22a. page shell + breadcrumb ---------------------------------- */
.service-details--bgg { padding: 5rem 0 6rem; }
.common-breadcrum .breadcumb-inner ul {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    list-style: none;
    padding: 0;
}
.common-breadcrum .breadcumb-inner ul li { color: rgba(255, 255, 255, .75); font-size: 14px; }
.common-breadcrum .breadcumb-inner ul li a { color: #fff; font-weight: 600; }
.common-breadcrum .breadcumb-inner ul li a:hover { color: var(--tnd-bright); }
.common-breadcrum .breadcumb-inner ul li i { font-size: 11px; color: rgba(255, 255, 255, .5); }

/* --- 22b. Deliberately NOT a left-sidebar/right-content split (that's
   the generic template pattern this was rejected for). The category
   switcher becomes a full-width horizontal bar that stays pinned while
   you scroll a category's content, with the "Need Help" and Brochures
   boxes as a supporting row beneath it - then content gets the FULL
   page width below, instead of being squeezed into 8 of 12 columns.
   Achieved entirely with CSS grid-area re-placement, so none of the
   ~4500 lines of repeated service content needed to move in the DOM. */
.service-row-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "sidebar" "content";
    gap: 0;
    margin-top: 44px;
}
.service-left-sidebar,
.service-right-sidebar { width: 100%; max-width: 100%; flex: none; }
.service-left-sidebar { grid-area: sidebar; }
.service-right-sidebar { grid-area: content; margin-top: 40px; }

.service-left-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nav nav" "contact broucher";
    gap: 20px;
}
.service-left-sidebar .service-tabs-wrapper { grid-area: nav; margin: 0; }
.service-left-sidebar .service-contact-wrapper { grid-area: contact; margin: 0; }
.service-left-sidebar .service-broucher-wrapper { grid-area: broucher; margin: 0; }
@media screen and (max-width: 767px) {
    .service-left-sidebar { grid-template-columns: 1fr; grid-template-areas: "nav" "contact" "broucher"; }
}
/* NOTE: this was position:sticky (pinned while scrolling a category's
   content) but sticky nested inside CSS grid is a known source of
   browser rendering bugs - the sticky box can miscalculate and end up
   covering the very content it was meant to sit above, which is
   exactly what "click a card, no content visible" looks like. Dropped
   entirely rather than risk it again; the bar just scrolls normally. */
.service-left-sidebar .service-tabs-wrapper { position: relative; z-index: 2; }

.service-left-sidebar .service-tabs-wrapper,
.service-left-sidebar .service-contact-wrapper,
.service-left-sidebar .service-broucher-wrapper {
    box-shadow: var(--tnd-shadow-sm);
    overflow: hidden;
}
/* the active pill's notch needs to poke past this card's bottom edge -
   .nav-pills gets its own overflow-x:auto for the horizontal scroll,
   so nothing actually depends on the wrapper itself clipping content */
.service-left-sidebar .service-tabs-wrapper { overflow: visible; }
.service-left-title {
    margin: 0;
    padding: 16px 22px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .4px;
    /* matches its own top corners to the card now that .service-tabs-
       wrapper no longer clips via overflow:hidden (needed room for the
       active pill's notch to show below it) */
    border-radius: var(--tnd-radius-card) var(--tnd-radius-card) 0 0;
}
/* horizontal, scrollable pill bar instead of a vertical list - has to
   beat Bootstrap's own .flex-column utility, which ships !important */
.service-tabs-wrapper .nav-pills {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* setting overflow-x alone makes the browser compute overflow-y as
       non-visible too, so the active pill's notch (which pokes out
       below its own box) needs enough bottom padding to still land
       inside this element's box rather than get silently clipped */
    padding: 12px 12px 28px;
    gap: 8px;
}
.service-tabs-wrapper .nav-pills .nav-link {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 50px;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
    position: relative;
    transition: background-color .25s ease, transform .25s ease, color .25s ease;
}
.service-tab-title { font-size: 14px; font-weight: 600; }
.service-tabs-wrapper .nav-pills .nav-link i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 10px;
    opacity: .75;
    transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}
.service-tabs-wrapper .nav-pills .nav-link:hover { transform: translateY(-2px); color: #fff; }
.service-tabs-wrapper .nav-pills .nav-link:hover i { opacity: 1; }
/* the active pill "connects" down into the content below it with a
   notch, and pops up slightly - reads as opening a folder rather than
   a plain colour swap on a list item. Each of the 6 categories gets
   its own colour from the brand palette when active, instead of one
   flat colour for all of them. */
.service-tabs-wrapper .nav-pills .nav-link.active {
    color: #fff;
    box-shadow: var(--tnd-shadow-md);
    transform: translateY(-3px);
    background: var(--tnd-royal);
}
.service-tabs-wrapper .nav-pills .nav-link.active i { opacity: 1; transform: translateX(2px); background: rgba(255, 255, 255, .22); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(1).active { background: var(--tnd-navy); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(2).active { background: var(--tnd-royal); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(3).active { background: var(--tnd-accent); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(4).active { background: var(--tnd-accent-hover); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(5).active { background: var(--tnd-bright); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(6).active { background: var(--tnd-royal); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(1).active:after { background: var(--tnd-navy); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(2).active:after { background: var(--tnd-royal); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(3).active:after { background: var(--tnd-accent); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(4).active:after { background: var(--tnd-accent-hover); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(5).active:after { background: var(--tnd-bright); }
.service-tabs-wrapper .nav-pills .nav-link:nth-child(6).active:after { background: var(--tnd-royal); }
.service-tabs-wrapper .nav-pills .nav-link.active:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--tnd-royal);
    z-index: 2;
}

/* content panel slides + fades in on switch (both the outer category
   panels and the nested sub-service panels) instead of a flat crossfade -
   this rides on Bootstrap's own .fade/.show class toggle, no extra JS */
.service-content-wrapper .tab-pane.fade,
.tabs-wrappur + .tab-content .tab-pane.fade {
    transform: translateX(26px);
    transition: opacity .35s ease, transform .35s ease;
}
.service-content-wrapper .tab-pane.fade.show,
.tabs-wrappur + .tab-content .tab-pane.fade.show { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .service-content-wrapper .tab-pane.fade,
    .tabs-wrappur + .tab-content .tab-pane.fade { transition: opacity .2s ease; transform: none; }
}

/* the darkening overlay this was for only made sense over a photo -
   with a flat gradient background now, it's switched off rather than
   double-darkening an already-navy card */
.service-contact-wrapper { position: relative; }
.service-contact-wrapper:before { content: none; }
.service-contact-wrapper .contact-content { position: relative; z-index: 1; padding: 26px 24px 30px; text-align: center; }
.contact-content h4 { color: rgba(255, 255, 255, .75); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px; }
.contact-content h1 { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 16px; }
.service-contact-num {
    display: inline-block;
    color: #fff !important;
    font-size: 21px;
    font-weight: 800;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50px;
    margin-bottom: 14px;
    transition: background-color .25s ease, border-color .25s ease;
}
.service-contact-num:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.contact-content p { color: rgba(255, 255, 255, .7); margin: 0 0 12px; }
.service-left-sidebar .service-contact-wrapper .contact-content .ct-info-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
/* same gradient header-bar as the other two sidebar cards, so all
   three read as one consistent set - padding lives on .broucher-content
   instead of the wrapper, so the bar still sits flush to the card edge */
.broucher-content { padding: 20px 22px 26px; }
.broucher-content p { color: var(--tnd-body); font-size: 14px; margin-bottom: 16px; }
.broucher-content .btn-wrap { margin-bottom: 10px; }
.broucher-content .btn-wrap:last-child { margin-bottom: 0; }
@media screen and (min-width: 992px) {
    .service-left-sidebar { position: sticky; top: 100px; align-self: flex-start; }
}

/* --- 22c. right content column -------------------------------------- */
.service-content-wrapper { padding: 6px 0 6px 8px; }
.service-content-main--heading { margin-bottom: 28px; }
.service-content-main--heading h5 {
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--tnd-heading);
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--tnd-border);
}
.main-heading-rowrap { display: flex; flex-wrap: wrap; gap: 34px; margin-bottom: 40px; }
.main-heading-col, .main-heading-col2 { flex: 1 1 320px; display: flex; flex-direction: column; gap: 18px; }
.main-heading-col2 { flex-direction: column-reverse; }
.main-heading-img img {
    width: 100%;
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-md);
}
.main-heading-para h4 { font-size: 19px; font-weight: 800; color: var(--tnd-heading); margin-bottom: 10px; }
.main-heading-para p { color: var(--tnd-body); text-align: left; margin: 0; line-height: 1.75; }
@media screen and (max-width: 767px) { .main-heading-col2 { flex-direction: column; } }

/* nested sub-service pill bar - a clean underline tab strip */
.tabs-wrappur { margin: 8px 0 32px; overflow-x: auto; }
.service-content-second--tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--tnd-border);
    margin: 0;
}
.service-content-second--tabs .nav-link {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tnd-body);
    border-radius: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .25s ease, border-color .25s ease;
}
.service-content-second--tabs .nav-link:hover { color: var(--tnd-heading); }
.service-content-second--tabs .nav-link.active {
    color: var(--tnd-accent);
    background: none;
    border-bottom-color: var(--tnd-accent);
}

.service-content-sub--heading { margin: 0 0 16px; }
.service-content-sub--heading h5 {
    font-size: 21px;
    font-weight: 800;
    color: var(--tnd-heading);
    margin: 0;
    padding-left: 14px;
    border-left: 4px solid var(--tnd-accent);
}

/* main text block per sub-service, with the icon-prefixed paragraphs
   the template already uses ("<i class=fa-angle-double-right> text") */
.private5g-textarea { margin-bottom: 34px; }
.private-text p {
    color: var(--tnd-body);
    text-align: left;
    line-height: 1.8;
    display: flex;
    gap: 10px;
}
.private-text p i { color: var(--tnd-accent); margin-top: 6px; flex-shrink: 0; }

/* "how we help" feature list - alternating image/text rows */
.how-we-help-wrap { padding: 6px; margin-bottom: 34px; }
.how-we-help-wrap .list-group-item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px;
    border: none;
    border-radius: var(--tnd-radius-card) !important;
    margin-bottom: 8px;
    transition: box-shadow .25s ease, transform .25s ease;
}
.how-we-help-wrap .list-group-item:last-child { margin-bottom: 0; }
.how-we-help-wrap .list-group-item:hover { box-shadow: var(--tnd-shadow-md); transform: translateY(-2px); }
.how-help-img { flex-shrink: 0; width: 84px; }
.how-help-img img { width: 100%; border-radius: 12px; }
.how-help-text h6 { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.how-help-text p { margin: 0; font-size: 14px; line-height: 1.65; }

/* feature cards (5G experience etc.) */
.expes-private-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 34px; }
.card-one .card {
    height: 100%;
    background: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-one .card:hover { transform: translateY(-6px); box-shadow: var(--tnd-shadow-lg); border-color: var(--tnd-accent-hover); }
.card-one .card-img-top { width: 100%; height: 150px; object-fit: cover; }
.card-one .card-title { font-size: 16px; font-weight: 800; padding: 16px 16px 4px; margin: 0; color: var(--tnd-heading); background: none !important; -webkit-text-fill-color: initial !important; }
.card-one .card-body { padding: 4px 16px 18px; }
.card-one .card-text { color: var(--tnd-body); font-size: 13.5px; margin: 0; }

/* CTA banner ("Speak with our professionals...") */
.key-use-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 32px;
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
    margin-bottom: 34px;
    border-left: 4px solid var(--tnd-accent);
}
.key-use-cases { flex: 1 1 260px; }
/* services.css has a much more specific rule here
   (".key-use-wrap .key-use-cases h2.key-use-left-content") that turns
   this into pale gradient-clipped ghost text at 40% opacity - built for
   a dark background, invisible on the white card this now sits in.
   Matching that exact selector to fully cancel it. */
.key-use-wrap .key-use-cases h2.key-use-left-content,
.key-use-left-content {
    font-size: 22px;
    font-weight: 800;
    color: var(--tnd-heading);
    margin: 0;
    line-height: 1.35;
    background-image: none;
    background-color: transparent;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    opacity: 1;
}
.contact-expert { flex: 1 1 300px; }
.contact-expert p { color: var(--tnd-body); margin-bottom: 14px; }

/* results/outcomes cards - every "Key outcomes of X" block across every
   service/sub-service tab uses this same markup (.principal-result-wrap
   > .principal-result-cards > .box), so elevating it here upgrades all
   ~10 of them at once, Disaster Recovery included, right in its
   original spot in the tab flow - no separate section, matching how
   the live site actually presents it, just a more polished treatment.
   The number badge and check icon are generated in CSS (counter() and
   an icon glyph via ::before/::after) rather than added to the HTML,
   so none of the repeated markup needs to change. */
.principal-result-wrap { margin-bottom: 34px; }
/* services.css force-fixes .box to height:200px inside these two
   specific tabs via ID-scoped selectors (higher specificity than
   anything above) - with the new number/icon badge padding that would
   clip the card's own content, so it's freed back to auto height here */
#digital-marketing .principal-result-wrap .box,
#private-cloud .principal-result-wrap .box { height: auto; min-height: 200px; }
.principal-result-wrap .principal-result-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
    margin-top: 16px;
    counter-reset: outcome-count;
}
.principal-result-wrap .box {
    position: relative;
    overflow: hidden;
    background: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
    padding: 62px 22px 24px;
    counter-increment: outcome-count;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.principal-result-wrap .box:hover { transform: translateY(-6px); box-shadow: var(--tnd-shadow-lg); border-color: var(--tnd-accent-hover); }
/* ghost number, top-right */
.principal-result-wrap .box:before {
    content: counter(outcome-count, decimal-leading-zero);
    position: absolute;
    top: 6px;
    right: 16px;
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: var(--tnd-border);
    line-height: 1;
    z-index: 0;
    transition: color .3s ease;
}
.principal-result-wrap .box:hover:before { color: var(--tnd-accent-soft); }
/* check-circle icon badge, top-left, cycling through the brand palette */
.principal-result-wrap .box:after {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 22px;
    left: 22px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    z-index: 1;
    transition: transform .4s ease;
}
.principal-result-wrap .box:hover:after { transform: rotate(360deg); }
.principal-result-wrap .box:nth-child(4n+1):after { background: var(--tnd-navy); }
.principal-result-wrap .box:nth-child(4n+2):after { background: var(--tnd-royal); }
.principal-result-wrap .box:nth-child(4n+3):after { background: var(--tnd-accent); }
.principal-result-wrap .box:nth-child(4n+4):after { background: var(--tnd-accent-hover); }
.principal-result-wrap .box h4 { position: relative; z-index: 1; font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.principal-result-wrap .box p { position: relative; z-index: 1; font-size: 14px; line-height: 1.65; margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .principal-result-wrap .box:hover:after { transform: none; }
}

/* icon+text split blocks (managed CX, cloud analytics, etc.) */
.services-text--area { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border-radius: var(--tnd-radius-card); margin-bottom: 20px; }
.services-text--area .circle {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tnd-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.services-text--area .circle img { width: 60%; height: auto; }
.services-text--area h5 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.services-text--area p { margin: 0; font-size: 14px; line-height: 1.65; text-align: left; }

/* SAP / suit panels */
.suit-sap-main--container .suit-sap--cont-wrap { border: 1px solid var(--tnd-border); border-radius: var(--tnd-radius-card); padding: 26px; box-shadow: var(--tnd-shadow-sm); margin-bottom: 20px; }
.suit-sap-text-wrapper h5 { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.suit-sap-text-wrapper li { padding: 5px 0; font-size: 14px; }

/* our-number interconnect stats */
.number-main-wrapper .num-content,
.how-tohelp-main--wrapper .help-main-wrap .number-main-wrapper .num-content {
    padding: 24px;
    border-top: 3px solid var(--tnd-accent);
    transition: transform .3s ease, box-shadow .3s ease;
}
.number-main-wrapper .num-content:hover { transform: translateY(-4px); box-shadow: var(--tnd-shadow-md); }
.number-main-wrapper .num-content h5 { font-size: 17px; font-weight: 800; color: var(--tnd-heading); margin-bottom: 12px; }
.num-waveline { margin: 8px 0; }

/* "Why PRIDE" differentiators (6 numbered benefits). This sits inside
   .services-contact-container, a dark navy band - and services.css has
   its own older rules here (.service-contact-wrap .serv-box-2 etc.)
   scoped with just enough specificity that my first pass at this card
   lost the fight on text colour only: the white card background below
   DID win (equal specificity, later file), but "color:#fff"/"#f5f5f5"
   on the heading/paragraph came from a MORE specific base selector and
   silently overrode my dark text - white text on a white card, i.e.
   invisible. Every selector below now matches or beats that specificity
   so nothing gets silently overridden again. */
/* .why-row-one becomes its own CSS grid (3 columns) instead of relying
   on Bootstrap's row/col flex-stretch chain, which was inconsistent
   here - card 1 in particular has a stray
   ".col-md-4:first-child{margin-bottom:30px}" rule from services.css
   that only that one column carries, throwing its height off from its
   siblings. Grid sidesteps all of that: every card in a row matches
   the tallest one by default, with one clean gap value. */
.why-pride-container .why-row-one {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
}
.why-row-one > div {
    width: 100%;
    max-width: 100%;
    flex: none;
    margin-bottom: 0 !important;
    padding: 0;
}
@media screen and (max-width: 767px) {
    .why-pride-container .why-row-one { grid-template-columns: 1fr; }
    /* media-querie.css has an older, unrelated mobile rule -
       ".services-contact-container .service-contact-wrap .col-md-4
       {width:50%...}" - written for a different layout that no longer
       exists on this page. It's more specific (3 classes) than the
       ".why-row-one > div" reset above (1 class + element), so on phones
       it was silently winning and forcing these 6 cards into a lopsided
       2-per-row grid instead of stacking full width. Matching its
       specificity here (and going one better) to reliably beat it. */
    .services-contact-container .why-pride-container .why-row-one > div,
    .services-contact-container .service-contact-wrap .why-row-one .col-md-4,
    .services-contact-container .service-contact-wrap .row .col-md-4:first-child {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        padding-right: 0;
        padding-left: 0;
    }
    /* the contact form (col-md-5) and this "Why TND Pride" column
       (col-md-7) sit side by side on desktop; below Bootstrap's md
       breakpoint they stack, but Bootstrap columns carry no inherent
       vertical gap of their own - the heading was landing flush against
       the Submit button above it with nothing in between. */
    .services-contact-container .service-contact-wrap .col-md-7 { margin-top: 40px; }
}
.why-pride-textarea { height: 100%; display: flex; }
.why-pride-textarea .serv-box-2.s2 { display: flex; flex-direction: column; width: 100%; }
.why-pride-textarea .serv-box-2.s2 .content-box { display: flex; flex-direction: column; flex: 1; }
.why-pride-textarea .serv-box-2.s2 {
    position: relative;
    padding: 46px 24px 26px;
    background: var(--tnd-surface);
    border: 1px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    height: 100%;
}
.why-pride-textarea .serv-box-2.s2:hover { transform: translateY(-6px); box-shadow: var(--tnd-shadow-lg); border-color: var(--tnd-accent-hover); }
/* was top:-6px with a 56px numeral - sat above the card's own padding
   box and overlapped straight into the heading text below it. Pulled
   inside the padding box with real clearance now, same fix as the
   Disaster Recovery outcome cards needed. */
.serv-box-2.s2 .big-number,
.service-contact-wrap .serv-box-2 .big-number {
    position: absolute;
    top: 12px;
    right: 18px;
    left: auto;
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--tnd-border);
    line-height: 1;
    z-index: 0;
}
.serv-box-2.s2 .content-box { position: relative; z-index: 1; }
.serv-box-2 .content-box h5 { font-size: 18px; font-weight: 800; color: var(--tnd-heading); margin: 0 0 8px; }
.serv-box-2 .content-box .cont-para { color: var(--tnd-body); font-size: 14px; line-height: 1.65; }

/* "Key Outcomes of Disaster Recovery & Data Resiliency" - same copy
   already used deep in the MultiCloud tab, surfaced again as its own
   full-width section here, above (and separate from) the "Why PRIDE"
   section below it - not squeezed into that section's column. Brand
   new class names (no legacy services.css rule to fight), and
   deliberately a compact checklist rather than another numbered-card
   grid, so it doesn't just repeat the "Why PRIDE" grid that follows it. */
.dr-outcomes-bgg {
    position: relative;
    background-color: var(--tnd-navy);
    background-image: linear-gradient(160deg, var(--tnd-navy) 0%, #0a2657 55%, var(--tnd-navy) 100%);
    padding: 5rem 0;
    overflow: hidden;
}
.dr-outcomes-bgg:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(480px 320px at 8% 0%, rgba(22, 139, 232, .16), transparent 70%),
        radial-gradient(420px 300px at 96% 100%, rgba(29, 161, 242, .14), transparent 70%);
}
.dr-outcomes-bgg .container { position: relative; z-index: 1; }
.dr-outcomes-bgg .subheading-common { color: #fff; }
.dr-outcomes__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px 24px;
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
}
/* glass card, a ghost number watermark behind the content, and a
   circular icon badge that lights up + spins in on hover - each card
   also cycles through the brand palette instead of one flat colour */
.dr-outcomes__list li {
    position: relative;
    overflow: hidden;
    padding: 46px 22px 24px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--tnd-dark-border);
    border-radius: var(--tnd-radius-card);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.dr-outcomes__list li:hover {
    background: rgba(255, 255, 255, .09);
    border-color: var(--tnd-accent-hover);
    transform: translateY(-6px);
    box-shadow: 0 20px 38px -18px rgba(0, 0, 0, .55);
}
.dr-outcomes__num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: rgba(255, 255, 255, .08);
    line-height: 1;
    z-index: 0;
    transition: color .3s ease;
}
.dr-outcomes__list li:hover .dr-outcomes__num { color: rgba(255, 255, 255, .14); }
.dr-outcomes__icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    margin-bottom: 16px;
    transition: transform .4s ease, background-color .3s ease;
}
.dr-outcomes__list li:hover .dr-outcomes__icon { transform: rotate(360deg); }
.dr-outcomes__list li i { color: #fff; font-size: 19px; }
/* tick colour is now uniform white on every card (matching card 3's
   original look) - only the circle badge behind it still cycles
   through the brand palette for variety */
.dr-outcomes__list li:nth-child(7n+1) .dr-outcomes__icon { background: rgba(11, 45, 107, .5); }
.dr-outcomes__list li:nth-child(7n+2) .dr-outcomes__icon { background: rgba(18, 74, 158, .5); }
.dr-outcomes__list li:nth-child(7n+3) .dr-outcomes__icon { background: rgba(8, 105, 201, .5); }
.dr-outcomes__list li:nth-child(7n+4) .dr-outcomes__icon { background: rgba(22, 139, 232, .5); }
.dr-outcomes__list li:nth-child(7n+5) .dr-outcomes__icon { background: rgba(11, 45, 107, .5); }
.dr-outcomes__list li:nth-child(7n+6) .dr-outcomes__icon { background: rgba(18, 74, 158, .5); }
.dr-outcomes__list li:nth-child(7n+7) .dr-outcomes__icon { background: rgba(8, 105, 201, .5); }
.dr-outcomes__list li h6 { position: relative; z-index: 1; color: #fff; font-size: 15.5px; font-weight: 800; margin: 0 0 8px; }
.dr-outcomes__list li p { position: relative; z-index: 1; color: var(--tnd-dark-body); font-size: 13px; line-height: 1.6; margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .dr-outcomes__list li:hover .dr-outcomes__icon { transform: none; }
}

@media screen and (max-width: 767px) {
    .service-content-main--heading h5 { font-size: 24px; }
    .key-use-wrap { padding: 24px; }
    .key-use-left-content { font-size: 19px; }
}

/* ---------------------------------------------------------------------
   23. SERVICE CATEGORY SECTIONS (re-added one at a time from
   services1.html) - a fresh component vocabulary, deliberately not the
   nested-tabs-inside-tabs pattern the old page used. Each category is
   its own section: a two-image intro band, then a clean accordion for
   its sub-services (built on Bootstrap's existing collapse JS - no new
   script needed), with condensed outcome "chips" instead of a full
   card grid per sub-service.
   --------------------------------------------------------------------- */
.svc-category { padding: 4.5rem 0; background-color: var(--tnd-bg); }
.svc-category:nth-of-type(even) { background-color: var(--tnd-bg-alt); }

.svc-category__intro {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 48px;
}
/* Redesigned as a stacked card: photo full-width on top, content
   full-width below. The earlier side-by-side layout kept fighting itself
   as the image was widened to show more of each photo - a wider image
   left less and less room for the text column, and neither ever fit
   cleanly. Stacking removes that trade-off entirely: the photo always
   gets the full card width (nothing cropped off the sides for lack of
   room) and the text always gets the full card width too. */
.svc-category__intro-col {
    display: flex;
    flex-direction: column;
    background: var(--tnd-surface);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-md);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}
.svc-category__intro-col:hover { box-shadow: var(--tnd-shadow-lg); transform: translateY(-3px); }
/* DOM order for --rev is [text, image] (kept for reading/markup order);
   column-reverse brings the image to the top visually so every category
   card reads the same way - photo on top, content below - regardless of
   markup order. */
.svc-category__intro-col--rev { flex-direction: column-reverse; }
/* single-image variant for categories that only have one photo instead
   of the usual two - same card, just centred and capped narrower */
.svc-category__intro-solo { margin-top: 40px; margin-bottom: 48px; }
.svc-category__intro-solo .svc-category__intro-col { max-width: 640px; margin: 0 auto; }

.svc-category__intro-col img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.svc-category__intro-col:hover img { transform: scale(1.04); }

/* the grid row stretches both intro-cols to equal overall height, but
   their text blocks don't automatically fill that extra height - when
   one card's paragraph is shorter than its neighbour's, the leftover
   space used to just sit blank at the bottom, so the two cards in a row
   looked mismatched in size. flex:1 + centering fixes that: the text
   block now always fills the card and its content sits centered in
   whatever space is available, so every pair of cards reads as the same
   size regardless of copy length. */
.svc-category__intro-col > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 28px;
    border-top: 3px solid var(--tnd-accent);
}
.svc-category__intro-col--rev > div { border-top: none; border-bottom: 3px solid var(--tnd-accent); }

.svc-category__intro-col h4 { font-size: 18px; font-weight: 800; color: var(--tnd-heading); margin: 0 0 10px; line-height: 1.35; }
.svc-category__intro-col p { color: var(--tnd-body); font-size: 14px; line-height: 1.7; margin: 0; text-align: left; }
@media screen and (max-width: 767px) {
    .svc-category__intro { grid-template-columns: 1fr; gap: 26px; }
    .svc-category__intro-col img { height: 220px; }
    .svc-category__intro-col > div { padding: 20px 20px; }
}

.svc-accordion { counter-reset: svc-item; }
.svc-accordion__item {
    position: relative;
    background: var(--tnd-surface);
    border: 1.5px solid var(--tnd-border);
    border-left: 5px solid var(--tnd-border);
    border-radius: var(--tnd-radius-card);
    box-shadow: var(--tnd-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.svc-accordion__item:last-child { margin-bottom: 0; }
/* a plain grey border on every side read flat - on hover, and whenever
   the item is the one currently open, the whole border (not just the
   left edge) switches to that item's own accent colour, so the active
   card reads as clearly framed/selected instead of just tinted on one
   side. */
.svc-accordion__item:hover { transform: translateX(3px); border-color: var(--svc-accent); }
.svc-accordion__item:has(.svc-accordion__trigger[aria-expanded="true"]) { border-color: var(--svc-accent); }
/* each sub-service gets its own colour from the brand palette instead
   of every item looking identical - the left accent bar, icon badge
   and number all follow it */
.svc-accordion__item:nth-child(5n+1) { --svc-accent: var(--tnd-navy); }
.svc-accordion__item:nth-child(5n+2) { --svc-accent: var(--tnd-royal); }
.svc-accordion__item:nth-child(5n+3) { --svc-accent: var(--tnd-accent); }
.svc-accordion__item:nth-child(5n+4) { --svc-accent: var(--tnd-accent-hover); }
.svc-accordion__item:nth-child(5n+5) { --svc-accent: var(--tnd-bright); }
.svc-accordion__item { border-left-color: var(--svc-accent); }
.svc-accordion__trigger {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    counter-increment: svc-item;
}
.svc-accordion__trigger:before {
    content: counter(svc-item, decimal-leading-zero);
    position: absolute;
    top: 50%;
    right: 46px;
    transform: translateY(-50%);
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--tnd-border);
    line-height: 1;
    display: none;
}
@media screen and (min-width: 576px) {
    .svc-accordion__trigger:before { display: block; }
}
.svc-accordion__icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tnd-accent-soft);
    color: var(--svc-accent, var(--tnd-accent));
    font-size: 18px;
    transition: background-color .3s ease, color .3s ease, transform .4s ease;
}
.svc-accordion__title { flex: 1; font-size: 16px; font-weight: 800; color: var(--tnd-heading); }
.svc-accordion__chevron { color: var(--tnd-body-dim); transition: transform .3s ease, color .3s ease; }
.svc-accordion__trigger[aria-expanded="true"] .svc-accordion__chevron { transform: rotate(180deg); color: var(--svc-accent, var(--tnd-accent)); }
.svc-accordion__trigger[aria-expanded="true"] .svc-accordion__icon { background: var(--svc-accent, var(--tnd-accent)); color: #fff; transform: rotate(360deg); }
.svc-accordion__item:has(.svc-accordion__trigger[aria-expanded="true"]) {
    box-shadow: var(--tnd-shadow-md);
}
@media (prefers-reduced-motion: reduce) {
    .svc-accordion__trigger[aria-expanded="true"] .svc-accordion__icon { transform: none; }
}
.svc-accordion__body { padding: 0 24px 26px 84px; }
.svc-accordion__body p { color: var(--tnd-body); font-size: 14.5px; line-height: 1.75; margin: 0 0 16px; text-align: left; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.svc-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    background: var(--tnd-surface-2);
    border: 1px solid var(--tnd-border);
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tnd-royal);
    transition: background-color .2s ease, border-color .2s ease;
}
.svc-chips li:hover { background: var(--tnd-accent-soft); border-color: var(--tnd-accent); }
.svc-chips li:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--svc-accent, var(--tnd-accent)), var(--tnd-royal));
    box-shadow: 0 3px 8px -2px rgba(8, 105, 201, .55);
}
.svc-chips--center { justify-content: center; margin: 0 auto; max-width: 900px; }
.svc-category__desc {
    max-width: 780px;
    margin: 14px auto 0;
    color: var(--tnd-body);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}
.svc-category__desc:last-of-type { margin-bottom: 30px; }
.svc-category__desc--strong { font-weight: 800; color: var(--tnd-heading); }
.svc-category__desc--flow { font-weight: 700; color: var(--tnd-royal); letter-spacing: .01em; }
.svc-category__tagline { color: var(--tnd-accent); font-weight: 700; }
.svc-subgroups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 44px;
}
.svc-subgroup__title {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--tnd-heading);
    margin: 0 0 14px;
}
@media screen and (max-width: 900px) {
    .svc-subgroups { grid-template-columns: 1fr; gap: 34px; }
}

/* ---- Services page: image showcase rows + icon-only cards ---- */
.svc-showcase {
    display: grid;
    grid-template-columns: minmax(300px, 440px) 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 40px;
}
.svc-showcase--rev { grid-template-columns: 1fr minmax(300px, 440px); }
.svc-showcase--rev .svc-showcase__media { order: 2; }
.svc-showcase__media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--tnd-shadow-lg);
    aspect-ratio: 4 / 3;
}
.svc-showcase__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.svc-showcase__media:hover img { transform: scale(1.06); }
.svc-showcase__media:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(6, 20, 46, .75) 100%);
    pointer-events: none;
}
.svc-showcase__icon {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, var(--tnd-accent), var(--tnd-royal));
    box-shadow: 0 12px 26px -10px rgba(8, 105, 201, .65);
    z-index: 1;
}
.svc-showcase__num {
    position: absolute;
    bottom: 10px;
    right: 18px;
    font-family: Barlow-ExtraBold, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 4px 18px rgba(0, 0, 0, .5);
    z-index: 1;
}
.svc-showcase__body { text-align: left; min-width: 0; }
.svc-showcase__body .common-heading_blurHead { margin-bottom: 6px; }
.svc-showcase__body .subheading-common { margin: 0 0 12px; }
.svc-showcase__body .svc-category__desc { text-align: left; margin: 0 0 22px; max-width: none; }
.svc-showcase__body .svc-chips { justify-content: flex-start; margin: 0; max-width: none; }

/* Tablet portrait / small laptops: keep 2-col but tighten spacing before stacking */
@media screen and (max-width: 1023px) {
    .svc-showcase { grid-template-columns: minmax(240px, 360px) 1fr; gap: 30px; }
    .svc-showcase--rev { grid-template-columns: 1fr minmax(240px, 360px); }
}

/* Phones and small tablets: stack image above content (matches the rest of the
   site's 767px mobile breakpoint) */
@media screen and (max-width: 767px) {
    .svc-showcase, .svc-showcase--rev { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
    .svc-showcase--rev .svc-showcase__media { order: 0; }
    .svc-showcase__media { aspect-ratio: 16 / 10; border-radius: 16px; }
    .svc-showcase__body { text-align: center; }
    .svc-showcase__body .svc-category__desc { text-align: center; margin-left: auto; margin-right: auto; }
    .svc-showcase__body .svc-chips { justify-content: center; }
    .svc-showcase__body .common-heading_blurHead { justify-content: center; width: 100%; }
    .svc-showcase__num { font-size: 40px; bottom: 8px; right: 14px; }
    .svc-showcase__icon { width: 46px; height: 46px; font-size: 18px; top: 12px; left: 12px; }
}
/* Small phones: trim further so nothing crowds a ~360px-and-under viewport */
@media screen and (max-width: 400px) {
    .svc-showcase__media { aspect-ratio: 4 / 3; border-radius: 12px; }
    .svc-showcase__num { font-size: 32px; }
    .svc-showcase__icon { width: 40px; height: 40px; font-size: 16px; }
    .svc-chips li { font-size: 11.5px; padding: 6px 12px 6px 8px; }
}

.svc-category__icon-badge {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 27px;
    color: #fff;
    background: linear-gradient(135deg, var(--tnd-accent), var(--tnd-royal));
    box-shadow: 0 12px 26px -10px rgba(8, 105, 201, .65);
}
.svc-subgroup__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--tnd-accent), var(--tnd-royal));
    box-shadow: 0 10px 22px -9px rgba(8, 105, 201, .6);
}
@media screen and (max-width: 767px) {
    .svc-category__icon-badge { width: 60px; height: 60px; font-size: 22px; margin-bottom: 16px; }
}

.svc-hero-banner {
    margin-top: 30px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--tnd-shadow-lg);
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
}
.svc-hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
@media screen and (max-width: 767px) {
    .svc-hero-banner { aspect-ratio: 4 / 3; border-radius: 14px; margin-top: 22px; }
}
@media screen and (max-width: 400px) {
    .svc-hero-banner { aspect-ratio: 1 / 1; }
}
@media screen and (max-width: 575px) {
    .svc-accordion__body { padding: 0 18px 22px 18px; }
    .svc-accordion__trigger { padding: 16px 18px; }
}