/* ============================================================================
 * SEnergy IoT brand theme (2026-10-07)
 * ----------------------------------------------------------------------------
 * Loaded after style.css. Overrides the legacy colour palette with the
 * canonical dark-navy + orange brand established on the case-study pages.
 *
 * Rules:
 *   - Change COLOURS, not LAYOUTS. Geometry (padding, grids, breakpoints)
 *     stays untouched to avoid regressions.
 *   - Use CSS custom properties for the palette so future tweaks are one-liners.
 *   - Prefer specificity > !important. Use !important only where style.css
 *     fights back with inline-image backgrounds.
 * ============================================================================ */

:root {
    --sg-navy:            #1a2b4a;
    --sg-navy-dark:       #0e1a30;
    --sg-navy-light:      #243d6b;
    --sg-orange:          #f26522;
    --sg-orange-dark:     #d9541c;
    --sg-text-dark:       #222222;
    --sg-text-mute:       #666666;
    --sg-text-on-dark:    #ffffff;
    --sg-text-mute-on-dark: #cdd5e3;
    --sg-offwhite:        #f7f8fa;
    --sg-border:          #e5e8ef;
}

/* ----------------------------------------------------------------------------
 * Page hero banners.
 * style.css loads a bright-blue hex-pattern JPEG for .morefbg / .whybg / .bunsbg.
 * Override to the brand dark-navy gradient.
 * ---------------------------------------------------------------------------- */

.page-header-wrapper,
.page-header-wrapper.morefbg,
.page-header-wrapper.whybg,
.page-header-wrapper.bunsbg {
    background-image: linear-gradient(135deg, var(--sg-navy) 0%, var(--sg-navy-dark) 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: var(--sg-navy) !important;
    color: var(--sg-text-on-dark);
    padding: 100px 0 80px;
    position: relative;
}

/* Subtle hex-pattern overlay for texture — SVG, inline so no extra request. */
.page-header-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0 L30 8.66 L30 25.98 L15 34.64 L0 25.98 L0 8.66 Z M45 17.32 L60 25.98 L60 43.3 L45 51.96 L30 43.3 L30 25.98 Z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.page-header-wrapper .page-header-content {
    position: relative;
    z-index: 2;
}

.page-header-wrapper .page-header-content h1,
.page-header-wrapper .page-header-content.layout--2 h1,
.page-header-wrapper h1 {
    color: var(--sg-text-on-dark) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.page-header-wrapper .mywhite {
    color: var(--sg-text-on-dark) !important;
}

/* ----------------------------------------------------------------------------
 * Buttons — unified orange / navy palette.
 * ---------------------------------------------------------------------------- */

.btn.btn-brand,
.btn-brand {
    background: var(--sg-orange) !important;
    border-color: var(--sg-orange) !important;
    color: var(--sg-text-on-dark) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.btn.btn-brand:hover,
.btn.btn-brand:focus,
.btn.btn-brand:active,
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
    background: var(--sg-orange-dark) !important;
    border-color: var(--sg-orange-dark) !important;
    color: var(--sg-text-on-dark) !important;
}

.btn.btn-black,
.btn-black {
    background: var(--sg-navy) !important;
    border-color: var(--sg-navy) !important;
    color: var(--sg-text-on-dark) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.btn.btn-black:hover,
.btn.btn-black:focus,
.btn.btn-black:active,
.btn-black:hover,
.btn-black:focus,
.btn-black:active {
    background: var(--sg-navy-dark) !important;
    border-color: var(--sg-navy-dark) !important;
    color: var(--sg-text-on-dark) !important;
}

.btn.btn-outline-dark,
.btn-outline-dark {
    background: transparent !important;
    border: 2px solid var(--sg-navy) !important;
    color: var(--sg-navy) !important;
    font-weight: 600;
}

.btn.btn-outline-dark:hover,
.btn-outline-dark:hover {
    background: var(--sg-navy) !important;
    color: var(--sg-text-on-dark) !important;
}

/* ----------------------------------------------------------------------------
 * Case-study index tiles (team-member-item on case-studies.php) — unify
 * the sand/brown prose and bright-white card look with the brand palette.
 * ---------------------------------------------------------------------------- */

.casest .team-member-element-2 .team-member-info h2,
.casest .team-member-info h2 {
    color: var(--sg-navy) !important;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
}

.casest .team-member-element-2 .team-member-info h4,
.casest .team-member-info h4 {
    color: var(--sg-text-dark) !important;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 8px 0 12px;
}

.casest .team-member-element-2 .team-member-info p,
.casest .team-member-info p {
    color: var(--sg-text-mute) !important;
    font-size: 14px;
    line-height: 1.6;
}

.casest .team-member-element-2 .team-member-info .myp p,
.casest .team-member-info .myp p,
.casest .myp,
.casest .myp p {
    color: var(--sg-text-mute) !important;
    font-size: 13px;
}

.casest .myp b {
    color: var(--sg-navy) !important;
}

.casest .team-member-item {
    background: #ffffff;
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    margin-bottom: 20px;
}

.casest .team-member-item:hover {
    border-color: var(--sg-orange);
    box-shadow: 0 8px 24px rgba(26, 43, 74, 0.08);
}

/* The two buttons at the bottom of each case-study tile — space them out. */
.casest .team-member-info .btn + .btn,
.casest .team-member-info a.btn + a.btn {
    margin-left: 8px;
}

/* ----------------------------------------------------------------------------
 * Section titles and the "myener" / "myline" blocks on index.php.
 * ---------------------------------------------------------------------------- */

.section-title-wrap h2,
.section-title-wrap .section-title,
.myener h2,
.myline h2 {
    color: var(--sg-navy) !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.myener .myspan span,
.myspan span {
    color: var(--sg-text-dark);
    margin-right: 16px;
    display: inline-block;
    line-height: 1.9;
    font-size: 14px;
}

.myener .myspan span i.fa,
.myspan span i.fa {
    color: var(--sg-orange);
    margin-right: 6px;
}

/* ----------------------------------------------------------------------------
 * Welcome / off-white sections — gentle neutral background.
 * ---------------------------------------------------------------------------- */

.bg-offwhite,
.welcome,
.page-wrapper {
    background: var(--sg-offwhite);
}

/* ----------------------------------------------------------------------------
 * "HOW WE WORK" and other call-to-action strips — unify to brand palette.
 * ---------------------------------------------------------------------------- */

.call-to-action-wrapper {
    background: var(--sg-navy) !important;
}

/* The two inner panels inherit background from style.css lines 4730/3905:
 *   .single-call-action-wrap            -> #222 (black)
 *   .single-call-action-wrap:nth-child(2n) -> #fdc657 (yellow)
 * Override both so alternating cells stay in the brand palette.
 */
.single-call-action-wrap {
    background-color: var(--sg-navy) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.single-call-action-wrap:nth-child(2n) {
    background-color: var(--sg-navy-light) !important;
}

.single-call-action-wrap:last-child {
    border-right: none;
}

.call-to-action-wrapper .call-action-info h2,
.single-call-action-wrap .call-action-info h2 {
    color: var(--sg-text-on-dark) !important;
    letter-spacing: 0.3px;
}

.call-to-action-wrapper .call-action-info p,
.call-to-action-wrapper .call-action-info .text-white,
.single-call-action-wrap .call-action-info p,
.single-call-action-wrap .call-action-info .text-white {
    color: var(--sg-text-mute-on-dark) !important;
}

/* Inner buttons: style.css gives them yellow (#fdc657) text with white border.
 * Rebrand to orange text with brand-orange border on dark background.
 */
.single-call-action-wrap .call-action-info .btn {
    color: var(--sg-orange) !important;
    border-color: var(--sg-orange) !important;
    background: transparent !important;
}

.single-call-action-wrap .call-action-info .btn:hover {
    background: var(--sg-orange) !important;
    color: var(--sg-text-on-dark) !important;
    border-color: var(--sg-orange) !important;
}

.single-call-action-wrap .call-action-icon {
    color: var(--sg-orange) !important;
}

/* ----------------------------------------------------------------------------
 * The three "philosophy" cards on index.php — .senergy .componet_image carries
 * a yellow (#fdc657) icon-tile background from style.css line ~10706. Rebrand
 * to navy with white icon. Hover accent in orange.
 * ---------------------------------------------------------------------------- */

.senergy .componet_image {
    background-color: var(--sg-navy) !important;
    border-radius: 6px !important;
    width: 72px !important;
    height: 72px !important;
}

.senergy .single_componet .feature-icon i,
.senergy .componet_image i {
    color: var(--sg-text-on-dark) !important;
}

.senergy .single_componet:hover .componet_image {
    background-color: var(--sg-orange) !important;
}

.senergy .single_componet a,
.single_componet a {
    color: var(--sg-navy) !important;
    font-weight: 600;
}

.senergy .single_componet a:hover,
.single_componet a:hover {
    color: var(--sg-orange) !important;
}

.senergy .single_componet .philo {
    color: var(--sg-navy) !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ----------------------------------------------------------------------------
 * Request / form areas — soften the yellow/sand accents to brand neutrals.
 * ---------------------------------------------------------------------------- */

.requestcard1,
.request1 .requestcard1 {
    background: #ffffff;
    border: 1px solid var(--sg-border);
    border-radius: 6px;
}

/* ----------------------------------------------------------------------------
 * Case-study hero (dark navy strip already in-brand) — reinforce.
 * ---------------------------------------------------------------------------- */

.cs-hero,
.cs-featured-strip,
.sg-tagline-strip {
    background: linear-gradient(135deg, var(--sg-navy) 0%, var(--sg-navy-dark) 100%) !important;
}

.cs-cta {
    background: var(--sg-orange) !important;
}

/* ----------------------------------------------------------------------------
 * Headings — standard brand heading colour across the site.
 * ---------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    color: var(--sg-navy);
}

/* Preserve white when the heading is explicitly on a dark surface. */
.page-header-wrapper h1,
.page-header-wrapper h2,
.cs-hero h1,
.cs-hero h2,
.cs-featured-strip h2,
.sg-tagline-strip h2,
.call-to-action-wrapper h2,
.cs-cta h2 {
    color: var(--sg-text-on-dark);
}

/* ----------------------------------------------------------------------------
 * Links in body prose — brand orange accent.
 * ---------------------------------------------------------------------------- */

.cs-body a,
.page-wrapper a:not(.btn),
.welcome a:not(.btn) {
    color: var(--sg-orange);
    text-decoration: none;
}

.cs-body a:hover,
.page-wrapper a:not(.btn):hover,
.welcome a:not(.btn):hover {
    color: var(--sg-orange-dark);
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
 * Footer — yellow heading underlines + yellow fa icons -> brand orange.
 * The .single-widget-wrap .widget-title::before pseudo-element is the yellow
 * 35x3 bar under each footer section heading. Icons inside the footer
 * (phone, mail) also carry the legacy yellow.
 * ---------------------------------------------------------------------------- */

.single-widget-wrap .widget-title::before,
.footer-widget-wrapper .widget-title::before,
footer .widget-title::before {
    background-color: var(--sg-orange) !important;
}

footer .fa,
footer i.fa,
.footer-widget-wrapper .fa,
.single-widget-wrap .fa,
.single-widget-wrap i.fa {
    color: var(--sg-orange) !important;
}

footer hr,
.single-widget-wrap hr,
.footer-widget-wrapper hr {
    border-color: var(--sg-orange) !important;
    background-color: var(--sg-orange) !important;
}

/* ----------------------------------------------------------------------------
 * Scrollbar — a yellow strip was visible on the right of the viewport.
 * Repaint document scrollbar to the brand palette.
 *   Firefox: scrollbar-color (thumb track)
 *   WebKit/Chromium: ::-webkit-scrollbar pseudo-elements
 * Both set here; browsers ignore what they don't recognise.
 * ---------------------------------------------------------------------------- */

html {
    scrollbar-color: var(--sg-orange) var(--sg-offwhite);
    scrollbar-width: thin;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--sg-offwhite);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--sg-orange);
    border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: var(--sg-orange-dark);
}

/* ============================================================================
 * COMPREHENSIVE YELLOW SCRUB (2026-10-07e)
 * ----------------------------------------------------------------------------
 * style.css contains 91 selectors that use the legacy yellow #fdc657 for
 * color / background / border. This block overrides every one of them to the
 * brand orange (--sg-orange). Grouped by property so maintenance is a search
 * away.
 *
 * Discovered via `grep -nB1 "#fdc657" assets/css/style.css` + extraction.
 * If style.css adds more yellow selectors later, extend these three lists.
 * ============================================================================ */

/* -- COLOR overrides (42 selectors) -- */
a:hover,
.about-desc-item h3,
.author-con-inner h2,
.con-method-item i,
.event-call-to-action-content h2 span,
.event-date-day,
.footer-wrapper.layout--2 .footer-social-icons a:hover,
.latest-blog-widget .single-blog-item .post-date i.fa,
.manucardimg .card-header .btn:hover,
.manufacturing .manucard .accordion .card-header .btn:not(.collapsed),
.manufacturing .manucardimg .accordion .card-header .btn:not(.collapsed),
.newsletter-form-wrap form .btn-newsletter,
.our-chefs-content .chef-footer h4,
.port-con-item h2,
.post-quote blockquote .blockquote-footer a,
.pricing-table-item-wrap .price,
.product_features .single-blog-post-wrap i.fa,
.section-title-wrap p span,
.section-title-wrap.layout--2 i.fa,
.senergy .single_componet:hover .componet_heading,
.service-list-item-price,
.single-blog-metro-post .blog-post-details .post-date i.fa,
.single-call-action-wrap .call-action-icon,
.single-category-product .cate-product-banner-area .banner-rotate-text:hover,
.single-custom-search-item i,
.single-freelancer-name .freelance-title,
.single-fun-fact-wrap h4,
.single-portfolio-wrap.layout--2 .portfolio-details .port-info a:hover,
.single-post-details .post-meta a i,
.single-post-details__footer__item .cate-list li a:hover,
.single-post-details__footer__item .share-item a:hover,
.single-product-slide .product-content .btn-shop,
.single-recent-view-prod h3 a:hover,
.single-service-wrap .service-icon,
.single-testimonial-wrap .client-name,
.single-testimonial-wrap.layout--4 .client-name,
.single_componet a:hover,
.song-table a:hover,
.speaker-member-wrap .speaker-info h6,
.useful-link-menu li a:hover,
.vCard-profile-about-wrap h1 span,
.work-experience-item h3,
/* Menu / nav hover states — key fix for the screenshots the user flagged */
.main-menu>li:hover>a,
.off-canvas-area-wrap a:hover,
.off-canvas-area-wrap button:hover,
.single-portfolio-wrap .portfolio-details a:hover,
.sticky-header.sticky :hover {
    color: var(--sg-orange) !important;
}

/* -- BACKGROUND overrides (33 selectors) -- */
blockquote:before,
.cd-timeline--aligned .cd-timeline-block:before,
.cd-timeline-block .cd-timeline-dot,
.dropdown-navbar .dropdown-nav>li a:not(.mega-title):before,
.funfact-icon,
.header-fix-left-two .main-menu.nav>li:hover>a,
.ht-slick-nav--two button:hover,
.messspop .modal-header,
.mfp-wrap.imagesGallery .mfp-bottom-bar,
.mfp-wrap.video-popup-wrap .mfp-close:hover,
.newsletter-form-wrap.layout--2 form .btn-newsletter,
.portfolio-filter-menu ul li:before,
.post-quote blockquote .blockquote-footer:before,
.pro-qty a:hover,
.sale-badge,
.search-box-content .btn-search,
.section-title-wrap.myline:after,
.single-banner-wrap:nth-child(2n) .hero-content-wrap .btn-bordered:hover,
.single-banner-wrap:nth-child(2n) .service-list-wrap .btn-bordered:hover,
.single-blog-post-wrap .post-type,
.single-call-action-wrap .call-action-info .btn:hover,
.single-product-wrap .product-thumb .btn-add-cart,
.single-sidebar-item-wrap .sidebar-title:before,
.single-social-button:hover,
.single-testimonial-wrap.layout--2 .client-name:before,
.single-testimonial-wrap.layout--3 .client-name:before,
.single-widget-wrap .widget-title:before,
.social-links a:hover,
.src-from-content .btn-search,
.startup-call-to-action,
.tippy-popper .tippy-tooltip,
.tooltip .tooltip-inner,
.video-popup-area .btn-video-popup,
/* Hamburger close + off-canvas hover states — screenshots fix */
.ht-slick-nav--three button:hover,
.off-canvas-area-wrapper .off-canvas-content-wrap .btn-close:hover,
.off-canvas-responsive-menu .off-canvas-content-wrap .btn-close:hover,
.off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav .slicknav_open>.slicknav_item .slicknav_arrow,
.off-canvas-search-box .off-canvas-content-wrap .btn-close:hover,
.product-description-review .desc-review-tab-menu li a.active,
.single-product-wrap .product-thumb .btn-quick-view:hover {
    background-color: var(--sg-orange) !important;
}

/* -- BORDER overrides (16 selectors) -- */
.btn.btn-transparent,
.cd-timeline--aligned .cd-timeline-block,
.config-item .config-list li:hover,
.freelancer-hero-area .mouse-wheel,
.mfp-wrap.imagesGallery .mfp-arrow:before,
.mfp-wrap.imagesGallery .mfp-close,
.mfp-wrap.video-popup-wrap.mfp-ready .mfp-content,
.pricing__info,
.registration-ticket-price-item.featured:before,
.registration-ticket-price-item:hover .btn.btn-black:hover,
.single-input-item textarea:focus,
.tippy-popper[x-placement^="bottom"] .tippy-arrow,
.tippy-popper[x-placement^="left"] .tippy-arrow,
.tippy-popper[x-placement^="right"] .tippy-arrow,
.tooltip .arrow:before,
.work-process-content .single-desc-item-wrap .desc-number {
    border-color: var(--sg-orange) !important;
}

/* -- Yellow-to-faa700 gradient on .btn-video-popup — repaint as orange gradient -- */
.btn-video-popup {
    background: linear-gradient(45deg, var(--sg-orange) 0%, var(--sg-orange-dark) 100%) !important;
}