/* ---------------------------------------------------------------------------
   Heelion Power Solutions - styles the Electron template did not ship.
   The template's style.css covers the header, sliders and most content blocks,
   but the footer chrome, back-to-top button, product tabs and modal title block
   were in the vendor's missing "styles__loaded_later.css". They are written here.
   Design tokens follow the template's own :root variables.
   --------------------------------------------------------------------------- */

:root {
    --heelion_footer_bg: #303442;
    --heelion_footer_text: #9b9daa;
    --heelion_footer_link: #d7d8de;
    --heelion_footer_rule: rgba(255, 255, 255, .09);
}

/* ============================ FOOTER ============================ */

#tt-footer {
    background-color: var(--heelion_footer_bg);
    color: var(--heelion_footer_text);
    font-size: 14px;
    line-height: 1.7;
    margin-top: 60px;
}

#tt-footer a {
    color: var(--heelion_footer_link);
    transition: color var(--speed, .2s) linear;
}

#tt-footer a:hover {
    color: var(--default_color, #f47629);
    text-decoration: none;
}

#tt-footer address {
    margin-bottom: 0;
}

/* --- newsletter strip --- */

#tt-footer .f-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--heelion_footer_rule);
}

#tt-footer .f-form__label {
    font-family: var(--default_font2, 'Poppins', sans-serif);
    font-size: 18px;
    line-height: 1.3;
    color: #fff;
    margin-right: 30px;
}

#tt-footer .f-form__input {
    flex: 1 1 240px;
    min-width: 200px;
    margin-right: 18px;
}

#tt-footer .f-form__input .form-control {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid var(--heelion_footer_rule);
    border-radius: var(--radius, 4px);
}

#tt-footer .f-form__input .form-control::placeholder {
    color: #7f818e;
}

#tt-footer .f-form__input .form-control:focus {
    outline: none;
    background-color: rgba(255, 255, 255, .1);
    border-color: var(--default_color, #f47629);
    box-shadow: none;
}

#tt-footer .f-form__btn {
    flex: 0 0 auto;
}

#tt-footer .tt-modal-message {
    flex: 1 1 100%;
    margin-top: 12px;
    color: #6fcf97;
}

/* --- main footer body --- */

#tt-footer .f-holder {
    padding: 48px 0 34px;
}

#tt-footer .additional-strut {
    margin-bottom: 32px;
}

#tt-footer .f-logo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

#tt-footer .f-logo .tt-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

#tt-footer .f-logo .tt-icon img {
    max-height: 40px;
    width: auto;
}

#tt-footer .f-logo .tt-text {
    font-family: var(--default_font2, 'Poppins', sans-serif);
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}

#tt-footer .f-logo__tagline {
    flex: 1 1 100%;
    font-size: 13px;
    color: var(--heelion_footer_text);
}

#tt-footer .f-info-text {
    font-size: 14px;
    line-height: 1.75;
    color: var(--heelion_footer_text);
}

#tt-footer .f-nav ul,
#tt-footer .f-info-icon {
    list-style: none;
    margin: 0;
    padding: 0;
}

#tt-footer .f-nav ul {
    column-count: 2;
    column-gap: 24px;
}

#tt-footer .f-nav ul li {
    margin-bottom: 11px;
    break-inside: avoid;
}

#tt-footer .f-nav ul li a {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
}

#tt-footer .f-nav ul li a:before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--default_color, #f47629);
}

#tt-footer .f-info-icon li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 1.6;
}

#tt-footer .f-info-icon li > span[class^="icon-"],
#tt-footer .f-info-icon li > a > span[class^="icon-"] {
    position: absolute;
    top: 3px;
    left: 0;
    font-size: 16px;
    color: var(--default_color, #f47629);
}

/* --- map --- */

#tt-footer .f-map-embed {
    margin-bottom: 6px;
    border-radius: var(--radius, 4px);
    overflow: hidden;
    line-height: 0;
}

#tt-footer .f-map-embed iframe {
    filter: grayscale(35%);
}

/* --- copyright row --- */

#tt-footer .f-copyright {
    align-items: center;
    padding: 20px 0;
    margin-top: 10px;
    border-top: 1px solid var(--heelion_footer_rule);
    font-size: 13px;
    color: #83858f;
}

#tt-footer .f-social {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#tt-footer .f-social li {
    margin-left: 8px;
}

#tt-footer .f-social li:first-child {
    margin-left: 0;
}

#tt-footer .f-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--heelion_footer_link);
    background-color: rgba(255, 255, 255, .07);
}

#tt-footer .f-social li a:hover {
    color: #fff;
    background-color: var(--default_color, #f47629);
}

@media (max-width: 767px) {
    #tt-footer .f-form {
        padding: 22px 0;
    }

    #tt-footer .f-form__label {
        flex: 1 1 100%;
        margin: 0 0 14px;
    }

    #tt-footer .f-form__input {
        margin: 0 0 12px;
    }

    #tt-footer .f-nav ul {
        column-count: 1;
    }

    #tt-footer .f-copyright {
        flex-direction: column;
        align-items: flex-start;
    }

    #tt-footer .f-social {
        margin-top: 14px;
    }
}

/* ====================== HEADER ODDS AND ENDS ====================== */

#tt-header {
    position: relative;
    z-index: 20;
    background-color: #fff;
}

#tt-header .tt-col-logo {
    flex: 0 0 auto;
}

#tt-header .tt-logo-alignment {
    display: flex;
    align-items: center;
}

/* ==================== HEADER DROPDOWN MENUS ==================== */
/* The theme hard-codes the dropdown to width:185px, which leaves only ~139px of
   text room once the 23px link padding is taken off - long service and category
   names wrapped onto two or three lines. Size the panel to its content instead. */

#tt-nav > ul > li ul {
    width: max-content;
    min-width: 200px;
    max-width: 360px;
}

#tt-nav > ul > li ul li a {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 22px;
}

/* A dropdown on one of the last menu items would run off the right edge of the
   window, so flip those to open leftwards. */
#tt-nav > ul > li:nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
}

#tt-nav > ul > li:nth-last-child(-n+2) > ul li ul {
    left: auto;
    right: 100%;
}

/* ===================== UPLOADED LOGO ===================== */
/* The theme's .tt-logo is a text wordmark with a 30px icon absolutely positioned
   behind it. A real uploaded logo needs its own box, so these rules undo that. */

.tt-logo.tt-logo--image {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    top: 0;
    letter-spacing: normal;
}

.tt-logo.tt-logo--image:before {
    display: none;
}

.tt-logo.tt-logo--image img {
    display: block;
    max-height: 58px;
    max-width: 260px;
    width: auto;
    height: auto;
}

.tt-logo.tt-logo--image .tt-logo__text {
    font-family: var(--default_font2, 'Poppins', sans-serif);
    font-size: 24px;
    line-height: 1.1;
    color: var(--default_color02, #303442);
}

#tt-footer .f-logo-block {
    margin-bottom: 8px;
}

#tt-footer .f-logo.f-logo--image {
    display: flex;
    align-items: center;
    gap: 12px;
}

#tt-footer .f-logo.f-logo--image .tt-icon img {
    max-height: 52px;
    max-width: 230px;
    width: auto;
    height: auto;
}

#tt-footer .f-logo__tagline {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--heelion_footer_text);
}

@media (max-width: 1024px) {
    .tt-logo.tt-logo--image img {
        max-height: 46px;
        max-width: 200px;
    }
}

@media (max-width: 575px) {
    .tt-logo.tt-logo--image img {
        max-height: 38px;
        max-width: 160px;
    }

    .tt-logo.tt-logo--image .tt-logo__text {
        font-size: 18px;
    }
}

/* ========================= BACK TO TOP ========================= */

.tt-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    background-color: var(--default_color02, #303442);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: background-color var(--speed, .2s) linear, opacity var(--speed, .2s) linear;
}

.tt-back-to-top:hover {
    color: #fff;
    background-color: var(--default_color, #f47629);
}

/* ================== PRODUCT DETAIL TABS & GALLERY ================== */

.tt-tab-wrapper {
    margin-top: 6px;
}

.nav-tabs.tt-tabs-default {
    border-bottom: 1px solid var(--border, #e9e9eb);
    margin-bottom: 26px;
}

.nav-tabs.tt-tabs-default .nav-link {
    padding: 12px 20px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: var(--default_font2, 'Poppins', sans-serif);
    font-size: 15px;
    color: var(--default_color02, #303442);
    background-color: transparent;
}

.nav-tabs.tt-tabs-default .nav-link:hover {
    color: var(--default_color, #f47629);
}

.nav-tabs.tt-tabs-default .nav-link.active {
    color: var(--default_color, #f47629);
    border-bottom-color: var(--default_color, #f47629);
    background-color: transparent;
}

.tt-tab-wrapper .tab-content .table th {
    width: 38%;
    font-family: var(--default_font2, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: normal;
    color: var(--default_color02, #303442);
}

.tt-product-single-img {
    border: 1px solid var(--border, #e9e9eb);
    border-radius: var(--radius, 4px);
    overflow: hidden;
}

.tt-product-single-img img,
.tt-mobile-product-slider img {
    width: 100%;
    height: auto;
}

.product-images-carousel {
    margin-top: 14px;
}

.product-images-carousel ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 -5px;
    padding: 0;
}

.product-images-carousel ul li {
    width: 25%;
    padding: 5px;
}

.product-images-carousel ul li a {
    display: block;
    border: 1px solid var(--border, #e9e9eb);
    border-radius: var(--radius, 4px);
    overflow: hidden;
}

.product-images-carousel ul li a.zoomGalleryActive,
.product-images-carousel ul li a:hover {
    border-color: var(--default_color, #f47629);
}

.product-images-carousel ul li img {
    width: 100%;
    height: auto;
}

/* ====================== QUOTE MODAL ====================== */

.modal-titleblock {
    margin-bottom: 22px;
    padding-right: 30px;
}

.modal-titleblock .modal-title {
    font-family: var(--default_font2, 'Poppins', sans-serif);
    font-size: 22px;
    line-height: 1.3;
    color: var(--default_color02, #303442);
}

.modal-layout-dafault {
    padding: 30px;
}

.modal-layout-dafault .close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 2;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    opacity: .6;
}

.modal-layout-dafault .close:hover {
    opacity: 1;
}

.form-modal .form-group {
    margin-bottom: 14px;
}

/* ====================== SMALL UTILITIES ====================== */

.tt-link.tt-link__lg {
    font-size: 16px;
}

.tt-icon-left {
    margin-right: 6px;
}

.tt-select {
    width: 100%;
}

@media (max-width: 575px) {
    .tt-short-text {
        display: none;
    }
}

/* =====================================================================
   RESPONSIVE
   The theme is Bootstrap 4 based and already reflows, but it sizes the
   hero to a short fixed band on small screens and leaks the sectors
   band past the viewport between 767 and 1024px. Both are fixed here,
   along with the blocks this project added.
   ===================================================================== */

/* ---- Full-screen hero on phones and tablets ----
   The theme pins .mainSlider to 774px desktop / 365px tablet / 250px phone.
   Below 1025px it now fills the viewport under the header instead.
   svh is the small-viewport height: it does not jump when a mobile
   browser's address bar hides, the way vh does. vh stays as a fallback. */

@media (max-width: 1024px) {
    .mainSlider,
    .mainSlider .slide,
    .mainSlider .slide .img--holder {
        height: calc(100vh - 112px);
        height: calc(100svh - 112px);
        min-height: 420px;
    }

    .mainSlider .slide .img--holder img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* The image is cropped hard at this aspect, so lift the white text off it. */
    .mainSlider .slide .slide-content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(23, 25, 32, .12) 0%, rgba(23, 25, 32, .58) 100%);
    }

    /* A full screen can carry far more type than the theme's 24px. */
    .mainSlider .slide .slide-content .tt-title-01 {
        font-size: 15px;
        line-height: 22px;
        letter-spacing: .04em;
    }

    .mainSlider .slide .slide-content .tt-title-02 {
        font-size: 44px;
        line-height: 1.16;
        margin-top: 18px;
    }

    .mainSlider .slide .slide-content .tt-row-btn {
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .mainSlider,
    .mainSlider .slide,
    .mainSlider .slide .img--holder {
        height: calc(100vh - 92px);
        height: calc(100svh - 92px);
    }

    .mainSlider .slide .slide-content .tt-title-02 {
        font-size: 32px;
        line-height: 1.2;
    }
}

/* ---- Sectors band overflow ----
   The theme bleeds this band with margin:0 -52px between 767 and 1024px
   for the skewed panels, but nothing clips it, so the page scrolls
   sideways by ~37px. Pull the margins in and clip the bleed. */

@media (max-width: 1024px) {
    .tt-slideinfo-wrapper {
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
    }

    .tt-slideinfo-wrapper .tt-slideinfo .tt-item__bg {
        margin-left: 0;
        width: 100%;
    }
}

/* ---- Sideways scroll ----
   The sectors band is deliberately 75px wider than the viewport on each side
   at desktop widths too, which made the page scroll sideways by 60px at
   1440px. Clip it at its own section. clip behaves like hidden but does not
   create a scroll container, so nothing sticky or fixed inside it breaks. */

.section-bleed {
    overflow-x: clip;
}

/* Net for anything else that leaks in future. */
body {
    overflow-x: clip;
}

/* ---- Blocks this project added ---- */

@media (max-width: 767px) {
    /* Product detail: tabs wrap instead of squashing, spec table scrolls. */
    .nav-tabs.tt-tabs-default {
        flex-wrap: wrap;
    }

    .nav-tabs.tt-tabs-default .nav-link {
        padding: 10px 14px;
        font-size: 14px;
    }

    .tt-tab-wrapper .tab-content .table th {
        width: 45%;
    }

    /* Thumbnails: four across is too small on a phone. */
    .product-images-carousel ul li {
        width: 33.333%;
    }

    /* Keep the two floating buttons clear of each other and the edge. */
    .tt-back-to-top {
        right: 14px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

    .tt-whatsapp-float {
        right: 14px !important;
        bottom: 68px !important;
        width: 46px !important;
        height: 46px !important;
    }
}

/* Breadcrumb: the theme's background image is fixed-height; keep the label
   readable rather than letting it collide with the edge. */
@media (max-width: 575px) {
    .tt-breadcrumb {
        background-position: center;
    }

    .tt-breadcrumb ul {
        padding-left: 0;
    }
}

/* Forms: iOS zooms the page when a focused input is under 16px. */
@media (max-width: 767px) {
    .form-control,
    .tt-select,
    select.form-control {
        font-size: 16px;
    }
}

/* ==================== PRODUCT CATEGORY CARDS ====================
   The theme masks this image into a light-bulb silhouette: a 142px-wide
   image at 30% opacity on a dark #242835 panel, with mask-img01.png laid
   over it and a 54px icon glyph in the middle. Replaced with a plain
   rectangular image box; the category's own icon becomes a corner badge. */

.tt-box02 .tt-box02__img {
    display: block;
    position: relative;
    margin-bottom: 20px;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    border-radius: var(--radius, 4px);
    overflow: hidden;
    background-color: #eceef1;
}

.tt-box02 .tt-box02__img img.tt-img-main {
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform .6s ease;
}

.tt-box02:hover .tt-box02__img img.tt-img-main {
    opacity: 1;
    transform: scale(1.05);
}

/* The theme centres a 54px glyph over the bulb; make it a badge instead. */
.tt-box02 .tt-box02__img:before {
    top: auto;
    bottom: 12px;
    left: 12px;
    -webkit-transform: none;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    background-color: var(--default_color, #f47629);
}

.tt-box02:hover .tt-box02__img:before {
    color: #fff;
    background-color: var(--default_color02, #303442);
}

@media (max-width: 575px) {
    .tt-box02 .tt-box02__img {
        margin-bottom: 16px;
    }

    .tt-box02 .tt-box02__img:before {
        width: 36px;
        height: 36px;
        font-size: 17px;
        bottom: 10px;
        left: 10px;
    }
}

/* ==================== IMAGE BOXES ====================
   Fixed aspect ratios on every image the client uploads into. Two reasons:
   the browser reserves the space before the image arrives, so nothing jumps
   as the page loads (layout shift); and a set of photos cropped differently
   by whoever uploaded them still lines up as an even grid. */

.tt-product .tt-product__img,
.tt-product .tt-product__img a {
    display: block;
}

.tt-product .tt-product__img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #f4f5f7;
}

#tt-pageContent .tt-obj .tt-obj__img,
.tt-obj .tt-obj__img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #eceef1;
}

.tt-news-obj .tt-news-obj__img,
.blog-obj .blog-obj__img > a,
.tt-recent-obj .recent-obj__img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #eceef1;
}

.tt-box05 .tt-box05__img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.tt-testimonials .tt-testimonials__data .tt-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
}

/* Fill those boxes without distorting whatever shape was uploaded. */
.tt-product .tt-product__img img,
.tt-obj .tt-obj__img img,
.tt-news-obj .tt-news-obj__img img,
.blog-obj .blog-obj__img > a img,
.tt-recent-obj .recent-obj__img img,
.tt-box05 .tt-box05__img img.tt-img-main,
.tt-testimonials .tt-testimonials__data .tt-img img,
.tt-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The gallery grid is square tiles; keep them square whatever is uploaded. */
.tt-gallery-wrapper .tt-gallery,
.gallery-innerlayout-wrapper .tt-gallery {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #eceef1;
}