@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

[x-cloak] { display: none !important; }


/* Body copy is Noto Sans 18/1.9 in the design; headings opt into Raleway. */
body {
    font-family: "Noto Sans", sans-serif;
    color: #000;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
}

/* ---------------------------------------------------------------- header */

/* Announcement bar + floating nav pill sit over the hero on the front page,
   so the header is taken out of flow there. */
.header-overlay {
    position: absolute;
    inset-inline: 0;
    top: 0;
}

/* Desktop dropdowns for the main menu. */
.headermain .menu > li {
    position: relative;
}

/* The nav pill floats 100px down the page, then slides flush to the top once
   the user scrolls past 60px (body.headerbg is toggled in header.php).
   Animating `top` rather than `transform` is deliberate: a transform on
   .headermain would make it the containing block for #headermobile-popup,
   which is `position: fixed` to the viewport under 1000px. */
.headermain {
    transition: top .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease;
    will-change: top;
}

.headerbg .headermain {
    top: 0;
    box-shadow: 0 6px 20px rgb(0 0 0 / .08);
}

/* ---------------------------------------------------------------- footer */

/* The Services / Quick Links columns come from wp_nav_menu(), so the row
   rhythm (40px per link, matching the Get In Touch column) lives here. */
.footer-links .menu li a {
    display: block;
    padding: 9px 0;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #2d2828;
    transition: color .3s ease, padding-left .3s ease;
}

.footer-links .menu li a:hover {
    color: #00a59c;
    padding-left: 6px;
}

.copyrightlinkwrap {
     pointer-events: none;
     text-decoration: none;
}

.home .copyrightlinkwrap {
     pointer-events: auto;
     text-decoration: underline;
}

ul#menu-header-menu .current-menu-item a {
    color: #00a59c;
}


/* -------------------------------------------------------- post content */

/* Everything a post editor can produce, styled once.
 *
 * This has to be plain CSS rather than Tailwind classes: the markup comes out
 * of the_content() at render time and carries no classes to hang utilities on,
 * so there is nothing for Tailwind to match. Same reason .footer-links and
 * .gallery-pagination are written this way — wp_nav_menu() and paginate_links()
 * generate their own markup too.
 *
 * The scale follows the rest of the theme: Noto Sans 18/1.9 for body, Raleway
 * SemiBold for headings, stepping 42 / 30 / 25 / 20 down the levels. Spacing is
 * asymmetric on purpose — a heading sits closer to the text it introduces than
 * to the paragraph it follows, which is what makes a long article scan. */

.blog-content {
    font-family: "Noto Sans", sans-serif;
    font-size: 18px;
    line-height: 1.9;
    color: #2d2828;
}

.blog-content > *:first-child {
    margin-top: 0;
}

.blog-content p {
       margin: 0 0 12px;
    color: #000;
    font-size: 18px;
    font-family: "Noto Sans";
    font-weight: 400;
}

.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    color: #000;
    line-height: 1.35;
    margin: 40px 0 14px;
}

.blog-content h2 { font-size: 42px; }
.blog-content h3 { font-size: 30px; }
.blog-content h4 { font-size: 25px; }
.blog-content h5 { font-size: 20px; }
.blog-content h6 { font-size: 18px; }

/* Lists. The marker is the theme's teal, drawn with a pseudo-element rather
   than list-style so it can be coloured and positioned independently of the
   text — the browser gives no control over a native bullet's colour. */
.blog-content ul,
.blog-content ol {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.blog-content ul li,
.blog-content ol li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
}

.blog-content ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00a59c;
}

/* Numbered lists keep their count, so the counter is restarted per list and
   drawn in the same teal as the bullets. */
.blog-content ol {
    counter-reset: cag-ol;
}

.blog-content ol li {
    counter-increment: cag-ol;
}

.blog-content ol li::before {
    content: counter(cag-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: #00a59c;
}

/* Nested lists stay indented and drop to a ring so the levels read apart. */
.blog-content li > ul,
.blog-content li > ol {
    margin: 8px 0 0;
    padding-left: 6px;
}

.blog-content li > ul li::before {
    background: transparent;
    border: 1px solid #00a59c;
}

.blog-content a {
    color: #00a59c;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .3s ease;
}

.blog-content a:hover {
    color: #2d2828;
}

.blog-content strong,
.blog-content b {
    font-weight: 600;
    color: #000;
}

.blog-content blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 26px;
    border-left: 3px solid #00a59c;
    font-size: 20px;
    font-style: italic;
}

.blog-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Anything the editor drops in — images, embeds, iframes — is held inside the
   column and given the theme's radius rather than being allowed to overflow. */
.blog-content img,
.blog-content iframe,
.blog-content video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.blog-content figure {
    margin: 28px 0;
}

.blog-content figcaption {
    padding-top: 10px;
    font-size: 15px;
    color: #5a5a5a;
}

/* A wide table would otherwise push the whole page sideways. */
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    display: block;
    overflow-x: auto;
}

.blog-content th,
.blog-content td {
    border: 1px solid #dbdbdb;
    padding: 10px 14px;
    text-align: left;
}

.blog-content th {
    font-weight: 600;
    background: #f7f7f7;
}

.blog-content hr {
    margin: 36px 0;
    border: 0;
    border-top: 1px solid #dbdbdb;
}

@media (max-width: 767px) {
    .blog-content { font-size: 16px; }
    .blog-content h2 { font-size: 30px; }
    .blog-content h3 { font-size: 25px; }
    .blog-content h4 { font-size: 21px; }
    .blog-content h5 { font-size: 18px; }
    .blog-content h6 { font-size: 17px; }

    .blog-content h2,
    .blog-content h3,
    .blog-content h4,
    .blog-content h5,
    .blog-content h6 { margin-top: 30px; }
}

/* ---------------------------------------------------------- date input */

/* Career application — Start Date. type="date" is what gives each platform its
   own picker, but it also brings chrome the frame does not draw. These rules
   keep that chrome inside the pill rather than trying to hide it: a native
   control cannot be restyled into a plain text field, and replacing it with a
   scripted calendar would cost a dependency and the mobile pickers. */
.cag-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .5;
    transition: opacity .3s ease;
}

.cag-date::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Without this Safari and iOS centre the value in the field rather than
   aligning it with every other control in the form. */
.cag-date::-webkit-date-and-time-value {
    text-align: left;
}

/* The stepper arrows are redundant next to the picker and push the value off
   its 24px inset. */
.cag-date::-webkit-inner-spin-button {
    display: none;
}

/* Firefox and Safari render the field a shade shorter than the text inputs
   beside it, which shows up as a 1-2px mismatch across the row.

   The pointer is not decoration: a click anywhere in this field opens the
   picker (see openPicker() in career-openings.php), so the whole control is a
   button in practice and a text caret would advertise the wrong thing. */
.cag-date {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* --------------------------------------------------------- media rows */

/* templates/common/media-row.php sets --media-row-cols per band, because the
   Services and Facilities frames do not all split the 1500 column evenly:
   727/682 for the lamination and tracing bands, 663/772 for the washing
   station, 727/707 for the IGU machines, even 1fr 1fr for the rest.

   It arrives as a custom property rather than a Tailwind class because the
   value is chosen at runtime, and Tailwind only generates classes it can see
   written out in a source file. Reading it here rather than from an inline
   grid-template-columns also leaves the stacking rule below able to win — an
   inline style would outrank any selector, media query or not. */
.media-row-grid {
    grid-template-columns: var(--media-row-cols, 1fr 1fr);
}

@media (max-width: 991px) {
    .media-row-grid {
        grid-template-columns: 1fr;
    }
}

/* Same idea for the copy column: text_width caps the paragraph measure at the
   frame width (547 on Career, 727 on CNC, and so on), but once the band has
   stacked there is no photo beside it, so the cap only leaves dead space. */
.media-row-copy {
    max-width: var(--media-row-text-w, none);
}

@media (max-width: 991px) {
    .media-row-copy {
        max-width: none;
    }
}

/* copy_inset nudges the copy away from the photo — 35px on the Services
   Installation band, the only one whose frame asks for it. Under 767px there
   is no photo alongside any more, so the inset is just a margin on one side. */
.media-row-col {
    padding-left: var(--media-row-inset, 0);
}

@media (max-width: 767px) {
    .media-row-col {
        padding-left: 0;
    }
}

/* ------------------------------------------------------ slider arrows */

/* The Related Products row uses its own buttons rather than Swiper's, which
   means Swiper no longer greys them out for us: it only marks the one that has
   run out of cards with this class, and the row does not loop, so without a
   rule here a dead arrow would still look and behave like a live one. Left
   clickable but visibly spent — hiding it outright would make the pair jump. */
.swiper-button-prev1.swiper-button-disabled,
.swiper-button-next1.swiper-button-disabled {
    opacity: .35;
}

/* -------------------------------------------------------- pagination */

/* paginate_links() on the Galleries archive builds its own <ul>, so the pill
   styling sits here rather than in the template. Same teal-on-hover language as
   the gallery filter tabs. */
.gallery-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-pagination .page-numbers {
    display: block;
    padding: 8px 18px;
    border: 1px solid #bdbdbd;
    border-radius: 50px;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #2d2828;
    transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

.gallery-pagination a.page-numbers:hover {
    border-color: #00a59c;
    color: #00a59c;
}

.gallery-pagination .page-numbers.current {
    border-color: #00a59c;
    background: #00a59c;
    color: #fff;
}

.gallery-pagination .page-numbers.dots {
    border-color: transparent;
}

/* ------------------------------------------------------------ side panel */

/* Slide-in panel behind the header hamburger. The panel itself slides via
   Tailwind's transition-transform; these rules handle the link list and the
   staggered reveal, which fires off the .is-open class Alpine adds. */
/* The panel scrolls its own overflow, so a sub-menu opening can be what tips
   the content past the viewport and brings the scrollbar in. That narrows the
   content box, which reflows the row under the pointer and can drop the hover
   that opened the sub-menu in the first place — it closes, the scrollbar goes,
   and the loop repeats. Reserving the gutter up front means the width never
   changes. Browsers without support keep today's behaviour. */
.side-panel {
    scrollbar-gutter: stable;
}

/* Top-level rows only — the divider, the stagger and the flex row must not
   leak into .sub-menu items. */
.side-panel-menu > .menu > li {
    border-bottom: 1px solid #e9e9e9;
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .45s ease, transform .45s ease;
}

.side-panel-menu > .menu > li:last-child {
    border-bottom: 0;
}

/* A parent item holds the link, the caret and the sub-menu. Wrapping flex keeps
   the caret beside the label and pushes the sub-menu onto its own row. */
.side-panel-menu .menu li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* AWP_Menu_Walker emits this for the main nav; nothing needs it here. */
.side-panel-menu .transition-div {
    display: none;
}

.side-panel-menu .menu li > a,
.side-panel-menu .menu li > span {
    flex: 1 1 auto;
    display: block;
    padding: 21px 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #2d2828;
    transition: color .3s ease, padding-left .3s ease;
}

.side-panel-menu .menu li > a:hover,
.side-panel-menu .menu li.current-menu-item > a {
    color: #00a59c;
    padding-left: 8px;
}

/* ---------------------------------------------- side panel sub-menus */

.side-panel-menu .menu .caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Wide enough to tap comfortably on a phone. */
    width: 44px;
    align-self: stretch;
    margin-right: -10px;
    font-size: 16px;
    color: #2d2828;
    cursor: pointer;
    transition: transform .35s ease, color .3s ease;
}

.side-panel-menu .menu .caret:hover {
    color: #00a59c;
}

/* The height animation has to clear a ceiling far taller than the real content
   — a sub-menu here is usually one or two rows against a 520px max-height — so
   a symmetrical curve would spend nearly all of its time crossing empty space:
   the panel would snap open in a few frames, sit still, then snap shut. That
   reads as a blink rather than a slide.

   The fix is to ease the two directions differently. This rule is the closed
   state, so its curve is the one used while collapsing: it moves fast at the
   start to get the empty space out of the way, then gives the part you can
   actually see the rest of the duration. The open state below mirrors it with
   a slow-start curve. Keep the ceiling generous — clipping a long sub-menu is
   a real bug, while overshoot is now only a timing detail. */
.side-panel-menu .menu .sub-menu,
.side-panel-menu .menu .children {
    flex: 0 0 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-left: 14px;
    transform: translateY(-6px);
    transition:
        max-height .38s cubic-bezier(.15, .85, .3, 1),
        opacity    .2s ease,
        transform  .3s ease;
}

.side-panel-menu .menu .sub-menu li,
.side-panel-menu .menu .children li {
    border: 0;
}

.side-panel-menu .menu .sub-menu li > a,
.side-panel-menu .menu .children li > a {
    padding: 11px 0;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #5a5a5a;
}

/* Needs to outrank the rule above, which would otherwise win on source order
   and swallow both the hover colour and the indent. */
.side-panel-menu .menu .sub-menu li > a:hover,
.side-panel-menu .menu .children li > a:hover,
.side-panel-menu .menu .sub-menu li.current-menu-item > a,
.side-panel-menu .menu .children li.current-menu-item > a {
    color: #00a59c;
    padding-left: 8px;
}

/* Clicking the caret toggles .active (handler lives in functions.php), so tap
   works at every width — required below 1024px where there is no hover. */
.side-panel-menu .menu li.active > .sub-menu,
.side-panel-menu .menu li.active > .children {
    max-height: 520px;
    opacity: 1;
    transform: none;
    /* Opening: the slow-start half of the pair described above, so the first
       rows unfold at a readable speed instead of appearing in one frame. */
    transition:
        max-height .42s cubic-bezier(.65, 0, .85, .2),
        opacity    .3s ease .04s,
        transform  .35s ease;
}

.side-panel-menu .menu li.active > .caret {
    transform: rotate(180deg);
    color: #00a59c;
}

/* On large screens hovering the row opens it as well.

   .is-collapsed is the escape hatch: hover and the caret click both drive the
   same sub-menu, so without it a click meant to close a row the pointer is
   still resting on would be overruled by :hover on the very next frame — the
   row would flick shut and reopen, and the caret would look dead. The handler
   in functions.php sets the class on that click and drops it again on
   mouseleave, so hover resumes as soon as the pointer moves away. */
@media (min-width: 1024px) {
    .side-panel-menu .menu li.menu-item-has-children:not(.is-collapsed):hover > .sub-menu,
    .side-panel-menu .menu li.menu-item-has-children:not(.is-collapsed):hover > .children {
        max-height: 520px;
        opacity: 1;
        transform: none;
        transition:
            max-height .42s cubic-bezier(.65, 0, .85, .2),
            opacity    .3s ease .04s,
            transform  .35s ease;
    }

    .side-panel-menu .menu li.menu-item-has-children:not(.is-collapsed):hover > .caret {
        transform: rotate(180deg);
        color: #00a59c;
    }
}

.side-panel-foot {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .45s ease, transform .45s ease;
}

/* Links cascade in one after another once the panel is open. Delays live only
   on .is-open so closing collapses everything together instead of unwinding. */
.side-panel.is-open .side-panel-menu > .menu > li,
.side-panel.is-open .side-panel-foot {
    opacity: 1;
    transform: none;
}

.side-panel.is-open .side-panel-menu > .menu > li:nth-child(1) { transition-delay: .14s; }
.side-panel.is-open .side-panel-menu > .menu > li:nth-child(2) { transition-delay: .20s; }
.side-panel.is-open .side-panel-menu > .menu > li:nth-child(3) { transition-delay: .26s; }
.side-panel.is-open .side-panel-menu > .menu > li:nth-child(4) { transition-delay: .32s; }
.side-panel.is-open .side-panel-menu > .menu > li:nth-child(5) { transition-delay: .38s; }
.side-panel.is-open .side-panel-menu > .menu > li:nth-child(6) { transition-delay: .44s; }
.side-panel.is-open .side-panel-menu > .menu > li:nth-child(7) { transition-delay: .50s; }
.side-panel.is-open .side-panel-menu > .menu > li:nth-child(8) { transition-delay: .56s; }
.side-panel.is-open .side-panel-foot { transition-delay: .46s; }

/* No sliding for anyone who asked the OS to cut down on motion. */
@media (prefers-reduced-motion: reduce) {
    .headermain,
    .side-panel,
    .side-panel-menu > .menu > li,
    .side-panel-menu .menu .sub-menu,
    .side-panel-menu .menu .children,
    .side-panel-menu .menu .caret,
    .side-panel-foot {
        transition: none;
    }

    .side-panel-menu > .menu > li,
    .side-panel-foot {
        opacity: 1;
        transform: none;
    }
}

.headermain .menu .sub-menu,
.headermain .menu .children {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 10px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .3s ease;
    z-index: 50;
}

.headermain .menu > li:hover > .sub-menu,
.headermain .menu li:hover > .children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.headermain .menu .sub-menu li a,
.headermain .menu .children li a {
    display: block;
    padding: 8px 20px;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    transition: .3s ease;
}

.headermain .menu .sub-menu li a:hover,
.headermain .menu .children li a:hover {
    color: #00a59c;
}

.headermain .menu .caret {
    display: inline-flex;
    margin-left: 7px;
    cursor: pointer;
}

.headermain .menu  li {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Off-canvas panel (hamburger) */
@media (max-width: 1000px) {
    .headermain .menu .sub-menu,
    .headermain .menu .children {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0 0 0 15px;
        display: none;
    }

    .headermain .menu .menu-item-has-children.active > .sub-menu,
    .headermain .menu .menu-item-has-children.active > .children {
        display: block;
    }
}

 

  .shinewrap {
    overflow: hidden;
    position: relative;
  }

  .shinewrap:hover::before {
    animation: shine .75s
  }

  .shinewrap::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,#fff0 0%,rgb(255 255 255 / .3) 100%);
    transform: skewX(-25deg)
  }

@keyframes shine {
  100% {
    left: 125%
  }
}






@media (max-width:1650px){ 

.headermain {
  width: 98%;
}
}

@media (max-width:1600px){ 



}

@media (max-width:1510px){ 

}



@media (max-width:1500px){ 

}


@media (max-width:1400px){ 

 
    
}




@media (max-width:1320px){  


}

@media (max-width:1200px){   
 

  

}

@media (max-width:1100px){

}


@media (max-width:1024px){


}



@media (max-width:1200px){  

}

@media (max-width:1100px){  


}

@media (max-width:1000px){   
 h1 br,
 h2 br,
 h3 br,
 h4 br,
  h5 br{
    display: none;
 }


}


@media (max-width:991px){  
 

  
}

@media (max-width:767px){

  /* Home "What We Offer" — two columns at this width and one below 480px, so
     the tail of the grid is held back until the Load More button is pressed.
     The rule lives here rather than on the cards so the collapsed state is CSS
     from the first paint: there is no frame where all seven are visible before
     Alpine boots. home-offer.php marks the overflow cards and toggles
     .is-expanded on the grid. */
  .offer-grid:not(.is-expanded) .offer-card-extra {
    display: none;
  }

}


/* Rich-text copy inside a page band — a WYSIWYG field that is a column of
   paragraphs rather than an article body
   (templates/facilities/facilities-beveling.php).

   Font, size, leading and colour stay on the wrapper in the markup and are
   inherited, so this class carries nothing but the rhythm and the same one can
   sit on the white-on-teal Sandblasting card as on the black-on-mint Beveling
   column. What it exists for is the part the markup can no longer express: once
   the paragraphs come out of an editor instead of a foreach, there is no per-<p>
   class to hang a gap on.

   18px between paragraphs. The Facilities frame draws 8, but at 18px on 1.9 that
   is *less* than the 9.7 of leading between two lines inside a paragraph, so the
   break does not read as a break — which is the whole complaint. 18 is what
   faq-list.php already uses at this exact size and leading.

   Deliberately not .blog-content: that is an article body, with 42px headings,
   teal bullets and 22px list gaps, and it would swamp a 697px column.
   -------------------------------------------------------------------------- */
.cag-copy p {
  margin: 0 0 18px;
}

.cag-copy strong,
.cag-copy b {
  font-weight: 600;
}

.cag-copy em,
.cag-copy i {
  font-style: italic;
}

.cag-copy ul,
.cag-copy ol {
  margin: 0 0 18px;
  padding-left: 22px;
  list-style: disc;
}

.cag-copy ol {
  list-style: decimal;
}

.cag-copy li {
  margin: 0 0 6px;
}

.cag-copy a {
  color: #00a59c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* After the rules above, so it wins on source order — they have the same
   specificity. Keeps the block's own bottom padding the only thing under it. */
.cag-copy > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {

  .cag-copy p,
  .cag-copy ul,
  .cag-copy ol {
    margin-bottom: 14px;
  }

}

/* ---------------------------------------------------------------------------
   About — "Our Specialities" accordion column.

   The card is a fixed height (the 1500x693 frame), so the three panels can no
   longer be resized by whichever row is open: the photo keeps its crop and the
   black panel keeps its centring instead of re-laying-out on every frame of the
   collapse animation. The column takes the overflow itself, and only when an
   editor's copy actually needs it — a thin rule rather than the OS scrollbar so
   it does not cut into the 46px right padding.
   -------------------------------------------------------------------------- */
.about-spec-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cfcfcf transparent;
  scroll-behavior: smooth;
}

.about-spec-scroll::-webkit-scrollbar {
  width: 4px;
}

.about-spec-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.about-spec-scroll::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 4px;
}

.about-spec-scroll::-webkit-scrollbar-thumb:hover {
  background: #00a59c;
}

@media (max-width: 991px) {

  /* Stacked card: the column is in normal flow again, so no inner scroller. */
  .about-spec-scroll {
    overflow: visible;
  }

}