/* INET Systems & Solutions - Brand Theme Override
   Loaded AFTER style.css so these values win the cascade.
   Re-maps every template color variant to the INET brand palette. */
:root{
    --color-primary:#e57916;
    --color-primary-2:#e57916;
    --color-primary-3:#e57916;
    --color-primary-4:#e57916;
    --color-primary-5:#e57916;
    --color-primary-6:#e57916;
    --color-primary-7:#e57916;
    --color-primary-8:#e57916;
    --color-primary-9:#e57916;
    --color-primary-10:#e57916;
    --color-primary-11:#ffffff;
    --color-primary-alta:#fdece0;
    --color-secondary:#211812;
    --color-terciary:#e57916;
    --color-subtitle:#e57916;
    --color-body:#5d666f;
    --color-body-2:#516669;
    --color-heading-1:#211812;
    --background-color-1:#211812;
    --color-white:#ffffff;
    --color-light-heading:#211812;
    --color-light-body:#65676b;
}

/* Header logo: the template's generic ".thumbnail img{width:100%}" rule
   makes the logo fill its column, which is too large. Scoped overrides
   only — the bare ".thumbnail" class is reused by team/blog/service
   cards elsewhere, so it must not be touched globally. */
.header-main-one .thumbnail img{
    max-width:130px;
    width:100%;
    height:auto;
}
.rts-sidebar-menu-desktop .logo{
    max-width:130px;
}

/* Hardcoded hex values used by specific template demos (not run through
   CSS variables) that would otherwise leak the original template colors. */
.header-two.eight .header-right button,
.rts-service-area.eight,
.rts-banner-area-two .swiper-navigation .swiper-button-prev,
.rts-banner-area-two .swiper-navigation .swiper-button-next{
    background:#f7f7f7;
}
.primary{color:#e57916!important;}
.btn-primary,
.btn-primary-2,.btn-primary-3,.btn-primary-4,.btn-primary-5,
.btn-primary-6,.btn-primary-7,.btn-primary-8,.btn-primary-9,
.btn-primary-11,.btn-primary-alta,.btn-primary-alta-four{
    background:var(--color-primary)!important;
    color:#ffffff!important;
    border-color:#e57916!important;
}
.btn-primary:hover,.btn-primary-2:hover,.btn-primary-3:hover,
.btn-primary-4:hover,.btn-primary-5:hover,.btn-primary-6:hover,
.btn-primary-7:hover,.btn-primary-8:hover,.btn-primary-9:hover{
    background:#211812!important;
    color:#ffffff!important;
}
.rts-btn.btn-border,.rts-read-more{
    border-color:#e57916!important;
    color:#211812!important;
}
.rts-btn.btn-border:hover,.rts-read-more:hover{
    background:#e57916!important;
    color:#ffffff!important;
    border-color:#e57916!important;
}
a:hover,.nav-main ul li.menu-item a:hover,.nav-main ul li.menu-item.active a{
    color:#e57916!important;
}
::selection{background:#e57916;color:#ffffff;}

/* ---------------------------------------------------------------------
   Home page UI fixes: equal-height cards, "Read More" button styling,
   tab active-state color, hover/entrance polish. */

/* Equal-height cards for "Why Choose Us?" and "Our Core Services" grids.
   The flex row already stretches the column, this stretches the visible
   card box inside it so short/long copy no longer produces mismatched
   card heights. */
.inet-equal-col{display:flex;}
.inet-equal-card{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    transition:transform .35s ease, box-shadow .35s ease;
}
.inet-equal-card .content,
.inet-equal-card .service-details{
    display:flex;
    flex-direction:column;
    flex:1;
}
.inet-equal-card .content .disc,
.inet-equal-card .service-details p.disc{
    flex:1;
}
.inet-equal-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px 0 rgba(33,24,18,.12);
}
.inet-equal-card .icon img,
.inet-equal-card .thumbnail img{
    transition:transform .4s ease;
}
.inet-equal-card:hover .icon img,
.inet-equal-card:hover .thumbnail img{
    transform:scale(1.1);
}

/* "Read More" link used on the Core Services cards: a clean pill button
   in brand orange instead of the broken .rts-read-more + .btn-primary
   combo (that combo fought over background/padding and rendered oddly). */
.inet-read-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:auto;
    padding:12px 22px;
    border-radius:100px;
    background:#e57916;
    color:#ffffff!important;
    font-weight:600;
    font-size:15px;
    line-height:1;
    transition:all .3s ease;
    width:fit-content;
}
.inet-read-more i{
    font-size:13px;
    transition:transform .3s ease;
}
.inet-read-more:hover{
    background:#211812;
    color:#ffffff!important;
}
.inet-read-more:hover i{
    transform:translateX(4px);
}
.inet-service-card .thumbnail{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Kill the template's hardcoded Bootstrap-pill blue on any other page
   still using the accordion/pill tab pattern (our-service.html,
   about-us.html etc.). The Home page's own tab styling is handled by
   the delimited INET CUSTOM OVERRIDES block further down, which also
   targets .rts-tab-style-one — the two are compatible, this one is
   just the site-wide fallback for pages outside that block's scope. */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{
    color:#e57916!important;
    background:transparent!important;
}

/* Generic scroll-entrance support: sal.js (already bundled in
   assets/js/plugins/sal.min.js and initialized in main.js) reads
   data-sal attributes and fades/slides elements in as they enter the
   viewport. Give it a sensible default easing/duration site-wide. */
[data-sal]{
    transition-timing-function:cubic-bezier(.25,.46,.45,.94)!important;
}

/* ---------------------------------------------------------------------
   index-fourteen ("Business Consulting" demo) based Home page fixes. */

/* Hero background overlay: template used a dark teal (#001d21) gradient
   here; shift it to brand dark brown. */
.banner-bg-f14:after{
    background:linear-gradient(90deg,#211812 .86%,rgba(33,24,18,.1) 71.09%)!important;
}

/* Scroll-to-top progress button: template's glow/border was hardcoded
   template blue (#0742e952); brand-ize it. */
.home-fourteen .progress-wrap:before{
    border-color:#e57916!important;
    box-shadow:0 3px 20px 6px rgba(229,121,22,.32)!important;
}
.progress-wrap svg{color:#e57916!important;}
.progress-wrap svg.progress-circle path{stroke:#e57916!important;}

/* "Our Core Services" dark cards: template default was a dark teal
   (#01191c); switch to brand dark brown, and the section's own
   near-black background to match. */
.rts-service-area-14.bg-14{background:#211812!important;}
.rts-service-area-14 .rts-service-wrapper .single-item{
    background:#2c2019!important;
}
.rts-service-area-14 .single-item .service-list li img{
    filter:brightness(0) saturate(100%) invert(53%) sepia(65%) saturate(1000%) hue-rotate(340deg) brightness(101%) contrast(96%);
}

/* === INET CUSTOM OVERRIDES START ===
   Home page (index.html) component-extraction pass.
   Sections were assembled from THREE different template source files
   (index-fourteen.html hero/services, index-eight.html icon-grid/tabs) —
   see the HTML comments in index.html for the exact source of each
   section. This block is the "deliverable" custom-CSS layer for that
   pass: brand color tokens + the equal-height and button-alignment
   fixes. Everything here targets the real selectors those extracted
   components ship with (no invented wrapper classes), so it stays
   attached to the markup as long as the section comments above it do. */

:root{
    --inet-accent:#e57916;   /* primary accent: buttons, active/hover states, icon accents */
    --inet-dark:#211812;     /* dark text / dark backgrounds */
    --inet-light:#ffffff;    /* light backgrounds */
    --inet-accent-soft:rgba(229,121,22,.14);
}

/* --- "Why Choose Us" icon grid (adapted from index-eight.html
   .rts-working-process-section.eight .wrapper) ---
   Card-height fix: the template's .wrapper has no height rule, so with
   the row's default flex "stretch" the invisible column stretches but
   the visible card box does not — cards render at different heights
   when copy length differs. Fix: flex column + height:100% on the card
   itself, and let the text block grow to fill the remainder. */
.rts-working-process-section .rts-working-process-inner .wrapper{
    height:100%;
    display:flex;
    flex-direction:column;
    transition:transform .35s ease, box-shadow .35s ease;
}
.rts-working-process-section .rts-working-process-inner .wrapper .content{
    display:flex;
    flex-direction:column;
    flex:1;
}
.rts-working-process-section .rts-working-process-inner .wrapper:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px 0 rgba(33,24,18,.12);
}
.rts-working-process-section .rts-working-process-inner .wrapper .icon img{
    transition:transform .4s ease;
}
.rts-working-process-section .rts-working-process-inner .wrapper:hover .icon img{
    transform:scale(1.1);
}
.rts-working-process-section .rts-working-process-inner .wrapper:hover .content .title{
    color:var(--inet-accent)!important;
}

/* --- "Our Core Services" dark cards (adapted from index-fourteen.html
   .rts-service-area-14 .single-item) ---
   Button-alignment fix: .service-btn had a fixed margin-top:30px, so
   with unequal copy length the buttons landed at different heights.
   Fix: flex column + height:100% on the card, margin-top:auto on the
   button so it always pins to the card's bottom edge regardless of how
   much text sits above it. */
.rts-service-area-14 .rts-service-wrapper .single-item{
    height:100%;
    display:flex;
    flex-direction:column;
}
.rts-service-area-14 .rts-service-wrapper .single-item .content{
    flex:1;
}
.rts-service-area-14 .rts-service-wrapper .single-item .service-btn{
    margin-top:auto;
    width:100%;
    box-sizing:border-box;
    border-color:var(--inet-accent-soft)!important;
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.rts-service-area-14 .rts-service-wrapper .single-item:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px 0 rgba(0,0,0,.35);
}
.rts-service-area-14 .rts-service-wrapper .single-item .content .title:hover{
    color:var(--inet-accent)!important;
}

/* --- "Industries We Serve" vertical tabs (adapted from index-eight.html
   .rts-tab-style-one nav-pills) ---
   The template hardcoded the active-tab text color to its own blue
   (#0b4df5) directly in style.css, bypassing the --color-primary
   variable entirely. Overridden here via the shared --inet-accent
   token instead of a second hardcoded hex, and given a real hover/focus
   transition so keyboard users get the same feedback as mouse users. */
.rts-tab-style-one .button-area button.active{
    color:var(--inet-accent)!important;
    background:var(--inet-accent-soft)!important;
    border-radius:8px;
}
.rts-tab-style-one .button-area button{
    transition:color .3s ease, background .3s ease;
    border-radius:8px;
}
.rts-tab-style-one .button-area button:hover,
.rts-tab-style-one .button-area button:focus-visible{
    color:var(--inet-accent)!important;
}
.rts-tab-style-one .button-area button:focus-visible{
    outline:2px solid var(--inet-accent);
    outline-offset:2px;
}
.rts-tab-content-one .check-area i{
    color:var(--inet-accent);
}

/* Home page "Technology Solutions for Your Business" cards: give the
   "Read More" link real button padding (the template ships it as a bare
   text+icon link) and pin it to the same line in every card regardless
   of how long each card's description text runs. Scoped to
   .rts-service-area .service-one-inner only — other pages use a
   different card class (.service-one-inner-four) and are unaffected. */
.rts-service-area .service-one-inner .service-details{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}
.rts-service-area .service-one-inner .service-details p.disc{
    flex:1 1 auto;
}
.rts-service-area .rts-read-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    align-self:flex-start;
    margin-top:auto;
    padding:10px 20px;
    border:1px solid var(--color-primary);
    border-radius:6px;
    color:#211812;
}
.rts-service-area .rts-read-more:hover{
    background:var(--color-primary);
    color:#ffffff!important;
}

/* Main menu (header-one, used on every INET page): the template's
   generic ".nav-main ul li:hover a.nav-link::before" rule injects a
   Font Awesome chevron character on hover — with no font-family, size
   or position ever set for it — so it renders as a stray, broken glyph
   next to the link text. Removed entirely rather than replaced: every
   attempt to render a real icon there (CSS ::after content code, then
   a real <i> element) ran into the same header wrapper eating the
   pseudo-element's content or produced other regressions, so a plain
   underline hover effect is the reliable option here. Same treatment
   is reused for the current-page link (see inline.js, which adds
   .active to the matching link on load). */
.header-one .mainmenu > li > a.nav-link::before{
    content:none!important;
}
.header-one .mainmenu > li > a.nav-link::after{
    content:none!important;
}
.header-one .mainmenu > li > a.nav-link{
    position:relative;
    background-image:linear-gradient(currentColor, currentColor);
    background-repeat:no-repeat;
    background-position:left bottom;
    background-size:0% 2px;
    transition:background-size .3s ease;
    padding-bottom:4px;
}
.header-one .mainmenu > li:hover > a.nav-link,
.header-one .mainmenu > li > a.nav-link.active{
    background-size:100% 2px;
}
.header-one .mainmenu > li > a.nav-link.active{
    color:var(--color-primary);
}
.header-one .rts-sidebar-menu-desktop .body-mobile .mainmenu .menu-link.active{
    color:var(--color-primary);
}

/* Home page "Practical Technology Advice" blog cards: same issue and
   same fix as the "Technology Solutions" service cards above — the
   template's bare .rts-read-more link has no button padding, and with
   descriptions of different lengths the link lands at a different
   height in each card. Scoped to .rts-blog-area .single-blog-one-wrapper
   so it doesn't touch the same component's other blog-listing pages. */
.rts-blog-area .single-blog-one-wrapper{
    display:flex;
    flex-direction:column;
    height:100%;
}
.rts-blog-area .single-blog-one-wrapper .blog-content{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}
.rts-blog-area .single-blog-one-wrapper .blog-content a:not(.rts-read-more){
    flex:1 1 auto;
}
.rts-blog-area .rts-read-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    align-self:flex-start;
    margin-top:20px;
    padding:10px 20px;
    border:1px solid var(--color-primary);
    border-radius:6px;
}
.rts-blog-area .rts-read-more i{
    background:transparent!important;
    color:inherit!important;
}
.rts-blog-area .rts-read-more:hover{
    background:var(--color-primary);
    color:#ffffff!important;
}
.rts-blog-area .swiper-slide{
    height:auto;
    align-items:stretch!important;
}

/* Footer "Contact Us" column: the template's .single-opening component
   was built for short "day / time" pairs (e.g. "Saturday" / "9-5") laid
   out with justify-content:space-between, so it shoves our long address
   and multi-line phone/email values to the far edge instead of sitting
   next to their label. Stack label above value instead, and give the
   label (Address/Phone/Email) a small icon + brand-color treatment so
   it reads as a mini heading. Scoped to the footer only. */
.rts-footer-area .opening-time-inner .single-opening{
    display:block;
    margin-bottom:16px;
}
.rts-footer-area .opening-time-inner .single-opening:last-of-type{
    margin-bottom:20px;
}
.rts-footer-area .opening-time-inner .single-opening .day{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--color-primary);
    font-weight:700;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:6px!important;
}
.rts-footer-area .opening-time-inner .single-opening .day i{
    font-size:13px;
}
.rts-footer-area .opening-time-inner .single-opening .time{
    margin-bottom:0;
    line-height:1.5;
}

/* Home page "Our Numbers" counter section:
   1. The template adds its own "+" via a ::after on the counter span,
      on top of the literal "+" already in the markup, so every number
      showed a doubled/overlapping "+". The last counter also carried a
      leftover ".happy" class from the original template (meant for a
      "28K+" stat) that appended a "k+" suffix — removed from the
      markup separately; the ::after "+" duplicate is killed here for
      all four counters.
   2. ".counter-bg" hardcodes height:640px for a decorative background
      image sized for a much busier layout, so most of the section was
      empty space below the short counter row regardless of padding.
      Let height follow the content instead. */
.rts-counter-up-area .single-counter .counter-details .title span:after{
    content:none;
}
.rts-counter-up-area.rts-section-gap{
    padding:50px 0;
}
.rts-counter-up-area.counter-bg{
    height:auto;
}

/* === INET CUSTOM OVERRIDES END === */


/* Fix the missing font-family to display the hover icon */
.nav-main ul li:hover a.nav-link::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    margin-right: 8px; /* Adds a little breathing room */
}