/* ==========================================================================
   TechDistri — shared brand design system (modern cards, reveal, hovers)
   Scoped under .td-page so it never leaks into untouched legacy templates.
   ========================================================================== */
.td-page {
    --td-navy: #0b1f3f;
    --td-navy-soft: #122a52;
    --td-green: #15a24a;
    --td-red: #e23b3b;
    --td-ink: #0f172a;
    --td-muted: #5b677a;
    --td-line: #e7ebf2;
    --td-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ===== Scroll reveal (lightweight, no extra library) ===== */
.td-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--td-ease), transform .7s var(--td-ease);
    will-change: opacity, transform;
}

.td-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .td-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Section heading ===== */
.td-page .td-head {
    position: relative;
}

.td-page .td-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--td-green);
    margin-bottom: 10px;
}

.td-page .td-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--td-green);
    display: inline-block;
}

.td-page .td-head h1,
.td-page .td-head h2,
.td-page .td-head h3,
.td-page .td-head h4 {
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Brand/partner logo squares (.js-swiper-9) — main.js used to hard-set
   .inner-image's width/height to a pixel value computed once on page load
   from the slide's width at that moment. Swiper resizes slides on every
   breakpoint change (including a plain window resize/orientation change,
   with no reload), but that stale pixel size never updated, so the square
   kept its original dimensions and started overlapping neighbouring slides
   once the layout got narrower. Sizing it in pure CSS instead means it
   always tracks the slide's current width with no JS recalculation needed. */
.td-page .js-swiper-9 .inner-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: normal !important;
}

/* ===== Generic card hover lift (products, categories, team, articles) ===== */
.td-page .card-circle.box-category,
.td-page .card-grid-style-3,
.td-page .card-grid-style-1,
.td-page .td-trust-card,
.td-page .box-feature {
    transition: transform .35s var(--td-ease), box-shadow .35s var(--td-ease), border-color .35s var(--td-ease);
}

.td-page .card-circle.box-category:hover,
.td-page .card-grid-style-3:hover,
.td-page .card-grid-style-1:hover,
.td-page .td-trust-card:hover,
.td-page .box-feature:hover {
    transform: translateY(-6px);
    /* box-shadow: 0 18px 40px rgba(11, 31, 63, .1); */
}

.td-page .card-circle .inner-image img,
.td-page .image-box img {
    transition: transform .45s var(--td-ease);
}

.td-page .card-circle:hover .inner-image img,
.td-page .card-grid-style-3:hover .image-box img {
    transform: scale(1.06);
}

/* partner / brand logos: grayscale -> color on hover */
.td-page .swiper-group-partners .inner-image img {
    filter: grayscale(100%);
    opacity: .75;
    transition: filter .4s var(--td-ease), opacity .4s var(--td-ease);
}

.td-page .swiper-group-partners .card-circle:hover .inner-image img {
    filter: grayscale(0%);
    opacity: 1;
}

.td-page .td-trust-card {
    background: #fff;
    border: 1px solid var(--td-line);
    border-radius: 16px;
    padding: 22px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
}

.td-page .td-trust-card .icon-left img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* ===== About / feature split image treatment ===== */
.td-page .about-thumb {
    position: relative;
}

.td-page .about-thumb img {
    box-shadow: 0 24px 60px rgba(11, 31, 63, .15);
}

/* Opt-in modifier: caps the image to a sensible fixed height and crops it
   with object-fit so it visually matches a form column beside it, instead
   of stretching to its own (often much taller) natural aspect ratio and
   leaving empty space under the shorter column. */
.td-page .about-thumb.is-match-height img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .td-page .about-thumb.is-match-height img {
        height: 320px;
    }
}

.td-page .about-thumb::before {
    content: "";
    position: absolute;
    /* Kept inset on the right edge (not negative) so this never pushes the
       column past the viewport and causes a sitewide horizontal scrollbar;
       the top edge can still peek out since that only affects vertical space. */
    top: -14px;
    right: 6px;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--td-green), var(--td-red));
    border-radius: 18px;
    z-index: -1;
    opacity: .18;
}

/* Keep the template's own checkmark icon + its 37px reserved padding intact;
   only add a hover accent without shifting the text/icon layout. */
.td-page .list-services li {
    transition: transform .3s var(--td-ease);
}

.td-page .list-services li:hover {
    transform: translateX(4px);
}

/* ===== Buttons feel ===== */
.td-page .btn-buy,
.td-page .btn-cart,
.td-page .btn-shop-now {
    transition: transform .3s var(--td-ease), box-shadow .3s var(--td-ease);
}

.td-page .btn-buy:hover,
.td-page .btn-cart:hover,
.td-page .btn-shop-now:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(11, 31, 63, .16);
}

/* ===== Readability ===== */
.td-page p {
    line-height: 1.7;
}

/* ===== Simple page header band (inner pages) ===== */
.td-page .td-page-header {
    position: relative;
    background: linear-gradient(120deg, var(--td-navy) 0%, var(--td-navy-soft) 100%);
    padding: 48px 0;
    color: #fff;
    overflow: hidden;
}

/* Decorative rotated squares + soft grid, kept subtle behind the content.
   Pure CSS (pseudo-elements only) so it applies everywhere automatically,
   with no markup changes needed on any of the pages using .td-page-header. */
.td-page .td-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .9), transparent 70%);
    mask-image: linear-gradient(100deg, rgba(0, 0, 0, .9), transparent 70%);
    pointer-events: none;
}

.td-page .td-page-header::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: 8%;
    top: -70px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    transform: rotate(18deg);
    background: linear-gradient(135deg, rgba(21, 162, 74, .14), transparent 70%);
    pointer-events: none;
}

.td-page .td-page-header .container {
    position: relative;
    z-index: 1;
}

.td-page .td-page-header h1 {
    color: #fff;
    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}

@media (max-width: 767px) {
    .td-page .td-page-header h1 {
        font-size: 26px;
    }
    .td-page .td-page-header::after {
        display: none;
    }
}

.td-page .td-page-header .breadcrumb,
.td-page .td-page-header p,
.td-page .td-page-header .breadcrumb li,
.td-page .td-page-header .breadcrumb li a {
    color: rgba(255, 255, 255, .75);
}

.td-page .td-page-header .breadcrumb li:last-child a {
    color: #fff;
}

/* ==========================================================================
   Site footer — sits outside .td-page (it's in the shared layout), so these
   rules are intentionally unscoped.
   ========================================================================== */
.td-footer {
    position: relative;
    background: linear-gradient(135deg, #0b1f3f 0%, #122a52 100%);
    padding-top: 56px;
    color: rgba(255, 255, 255, .72);
    overflow: hidden;
}

.td-footer-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #15a24a, #0f7c9c, #d89b35);
    z-index: 2;
}

/* ===== Decorative background graphics ===== */
.td-footer-graphics {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.td-footer-graphics::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9) 35%, rgba(0, 0, 0, .4));
    mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9) 35%, rgba(0, 0, 0, .4));
}

.td-footer-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .28;
}

.td-footer-blob-1 {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -80px;
    background: radial-gradient(circle, #15a24a, transparent 70%);
}

.td-footer-blob-2 {
    width: 320px;
    height: 320px;
    bottom: -160px;
    left: 5%;
    background: radial-gradient(circle, #0f7c9c, transparent 70%);
}

.td-footer-blob-3 {
    width: 220px;
    height: 220px;
    bottom: 10%;
    right: 20%;
    background: radial-gradient(circle, #d89b35, transparent 70%);
    opacity: .16;
}

.td-footer-orbit {
    position: absolute;
    top: -60px;
    right: 6%;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.td-footer-orbit::before,
.td-footer-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .06);
}

.td-footer-orbit::before { inset: -40px; }
.td-footer-orbit::after { inset: -80px; }

.td-footer .container { position: relative; z-index: 1; }

@media (max-width: 767px) {
    .td-footer-orbit,
    .td-footer-blob-3 { display: none; }
}

.td-footer-brand {
    display: inline-block;
    margin-bottom: 18px;
}

.td-footer-brand img {
    height: 40px;
    width: auto;
    display: block;
}

.td-footer-tagline {
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6);
    max-width: 340px;
    margin-bottom: 20px;
}

.td-footer-contact {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.td-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.td-footer-contact a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s ease;
}

.td-footer-contact a:hover { color: #2bd47a; }

.td-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #2bd47a;
    flex-shrink: 0;
}

.td-footer-icon svg { width: 15px; height: 15px; }

.td-footer-socials { display: flex; gap: 10px; }

.td-footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}

.td-footer-socials a svg { width: 16px; height: 16px; }

.td-footer-socials a:hover {
    background: #15a24a;
    transform: translateY(-3px);
}

.td-footer-heading {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 22px;
    letter-spacing: .01em;
}

.td-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.td-footer-links li { margin-bottom: 13px; }

.td-footer-links a {
    color: rgba(255, 255, 255, .64);
    text-decoration: none;
    font-size: 13px;
    position: relative;
    transition: color .2s ease, padding-left .2s ease;
}

.td-footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.td-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
}

.td-footer-bottom a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.td-footer-bottom-note {
    color: rgba(255, 255, 255, .4);
}

@media (max-width: 767px) {
    .td-footer { padding-top: 40px; }
    .td-footer-bottom { justify-content: center; text-align: center; }
}

/* ===== Scroll-to-top button (sitewide, injected by the scrollUp plugin) =====
   The scrollUp plugin shows/hides this by toggling its inline `display`
   style as the page scrolls past its threshold (hidden at the top, faded in
   past 300px). Forcing `display: flex !important` here overrode that inline
   toggle, so the button stayed visible at the top of the page too. Centering
   the icon with line-height instead (rather than flex) means this block
   never needs to touch `display` at all, so the plugin's own show/hide
   keeps working — position:fixed computes this to a block box regardless of
   whatever display value the plugin leaves it at. */
#scrollUp {
    width: 52px !important;
    height: 52px !important;
    right: 28px !important;
    bottom: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #15a24a, #0f7c9c) !important;
    box-shadow: 0 10px 28px rgba(11, 31, 63, .3) !important;
    line-height: 52px !important;
    text-align: center !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

#scrollUp i {
    font-size: 22px !important;
    line-height: inherit !important;
    color: #fff !important;
}

#scrollUp:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 16px 36px rgba(11, 31, 63, .4) !important;
}

@media (max-width: 575px) {
    #scrollUp {
        width: 44px !important;
        height: 44px !important;
        right: 16px !important;
        bottom: 16px !important;
        line-height: 44px !important;
    }
    #scrollUp i { font-size: 18px !important; }
}

/* ==========================================================================
   Topbar — same navy gradient as the inner-page breadcrumb band
   (.td-page-header) instead of the old flat dark-gray slab, so the two
   "ribbon" bands on a page read as one consistent brand treatment.
   ========================================================================== */
.topbar.top-brand-2 {
    background: linear-gradient(120deg, #0b1f3f 0%, #122a52 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 2px 10px rgba(11, 31, 63, .12);
    padding-top: 7px;
    padding-bottom: 7px;
}

/* The three topbar columns (left links / center text / right actions) sit
   at different natural heights (icons, pills, plain text) — center them on
   the same line instead of each aligning to the row's own top edge. */
.topbar.top-brand-2 .container-topbar {
    align-items: center;
}

/* nav-small's <li> items are plain inline-block boxes, so their vertical
   position within the row depends on each one's own baseline — which
   differs between an <i> icon (font metrics) and the phone link's <img>
   (image metrics), throwing that one link off by a few px. Making the list
   itself a flex row removes baseline alignment from the equation entirely:
   every <li> centers on the row's cross-axis instead. */
.topbar.top-brand-2 .nav-small {
    display: flex;
    align-items: center;
}

.topbar.top-brand-2 .nav-small li,
.topbar.top-brand-2 .nav-small li a {
    display: inline-flex;
    align-items: center;
}

.topbar.top-brand-2 .info-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar.top-brand-2 .menu-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* The shared .nav-small li a::before divider is pinned to a fixed
   `top: 3px` tuned for the plain-text link it was designed for — once icons
   were added here the row got taller, so that fixed offset no longer lines
   up with the icon+text's vertical center. Centering it relative to the
   link's own height instead keeps it aligned regardless of row height. */
.topbar.top-brand-2 .nav-small li a::before {
    top: 50%;
    transform: translateY(-50%);
}

.topbar.top-brand-2 .nav-small li a {
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
    transition: color .2s ease;
}

.topbar.top-brand-2 .nav-small li a:hover {
    color: #fff;
}

.topbar.top-brand-2 .nav-small li a::before {
    background-color: rgba(255, 255, 255, .16);
}

.topbar.top-brand-2 .info-topbar .color-success {
    color: #3ddc84 !important;
    font-weight: 600;
    letter-spacing: .01em;
}

.topbar.top-brand-2 .blink-link {
    color: #fff !important;
    font-weight: 600;
}

.topbar.top-brand-2 .dropdown-language .btn {
    color: #fff;
    padding: 0;
    border: 0;
    background: transparent;
}

.topbar.top-brand-2 .dropdown-language .btn:hover {
    opacity: .85;
}

.topbar.top-brand-2 .dropdown-language .btn::after {
    filter: invert(1) brightness(2);
}

.topbar.top-brand-2 .nav-small li a i {
    margin-right: 5px;
    font-size: 12px;
    vertical-align: middle;
}

/* "Become a Reseller" — a proper accent pill instead of a plain blinking
   text link, so the topbar's one conversion-oriented action stands out. */
.topbar.top-brand-2 .topbar-reseller-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(120deg, #15a24a 0%, #1C8A4C 100%);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.5;
    transition: transform .15s ease, box-shadow .15s ease;
}

.topbar.top-brand-2 .topbar-reseller-btn i {
    font-size: 11px;
}

.topbar.top-brand-2 .topbar-reseller-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(21, 162, 74, .35);
    color: #fff;
}

/* Country/currency switcher — a clearly-bordered pill with its own caret so
   it reads as a dropdown control, not plain text. */
.topbar.top-brand-2 .topbar-country-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    line-height: 1.5;
    transition: background-color .15s ease, border-color .15s ease;
}

.topbar.top-brand-2 .topbar-country-toggle .dropdown-right {
    margin-left: 0;
    padding: 0;
}

.topbar.top-brand-2 .topbar-country-toggle img {
    width: 13px !important;
    margin-right: 6px !important;
}

.topbar.top-brand-2 .topbar-country-toggle span span {
    font-size: 13px !important;
}

.topbar.top-brand-2 .topbar-country-toggle:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .4) !important;
}

.topbar.top-brand-2 .topbar-country-toggle::after {
    display: none;
}

.topbar.top-brand-2 .topbar-country-caret {
    margin-left: 6px;
    font-size: 9px;
    color: rgba(255, 255, 255, .7);
}