/* =========================================================
   FLUENCE SYSTEMS
   MAIN STYLESHEET
   ========================================================= */


/* =========================================================
   1. DESIGN SYSTEM
   ========================================================= */

   :root {

    /* ---------------------------------------------------------
       LAYOUT
       --------------------------------------------------------- */

    --header-height: 92px;
    --header-height-tablet: 82px;
    --header-height-mobile: 76px;

    --container-gutter: 3rem;


    /* ---------------------------------------------------------
       BRAND COLORS
       --------------------------------------------------------- */

    --fluence-blue: #0A89E9;
    --fluence-blue-medium: #149BE8;

    --fluence-cyan: #2EC9E5;
    --fluence-aqua: #52E8E6;


    /* ---------------------------------------------------------
       BRAND TOKENS
       --------------------------------------------------------- */

    --primary-color: var(--fluence-blue);
    --primary-hover: #0878CF;

    --accent-color: var(--fluence-cyan);
    --accent-hover: #20B8D5;

    --secondary-accent: var(--fluence-aqua);


    /* ---------------------------------------------------------
       CORPORATE DARK COLORS
       --------------------------------------------------------- */

    --navy-color: #0B3158;
    --navy-dark: #072641;
    --navy-light: #104A80;

    --dark-color: #1C1C1C;
    --heading-color: var(--navy-color);


    /* ---------------------------------------------------------
       TEXT COLORS
       --------------------------------------------------------- */

    --text-color: #465461;
    --text-muted: #6B7280;
    --text-light: #8A949D;

    --text-on-dark: rgba(255, 255, 255, 0.78);
    --text-on-dark-muted: rgba(255, 255, 255, 0.66);


    /* ---------------------------------------------------------
       BACKGROUNDS
       --------------------------------------------------------- */

    --white: #FFFFFF;

    --light-color: #FFFFFF;
    --light-blue-color: #F4FAFD;
    --light-cyan-color: #EFFBFD;
    --light-grey-color: #F7F9FA;

    --surface-color: #FFFFFF;
    --surface-muted: #F5F8FA;


    /* ---------------------------------------------------------
       BORDER COLORS
       --------------------------------------------------------- */

    --grey-color: #DCE4EA;
    --border-color: #E2E9EE;

    --border-soft:
        rgba(11, 49, 88, 0.08);

    --border-medium:
        rgba(11, 49, 88, 0.12);

    --border-brand:
        rgba(46, 201, 229, 0.32);


    /* ---------------------------------------------------------
       RGB TOKENS
       --------------------------------------------------------- */

    --fluence-blue-rgb: 10, 137, 233;
    --fluence-cyan-rgb: 46, 201, 229;
    --fluence-aqua-rgb: 82, 232, 230;

    --navy-rgb: 11, 49, 88;


    /* ---------------------------------------------------------
       TYPOGRAPHY
       --------------------------------------------------------- */

    --body-font:
        "Open Sans",
        sans-serif;

    --heading-font:
        "Nunito",
        sans-serif;


    /* ---------------------------------------------------------
       RADIUS
       --------------------------------------------------------- */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-xxl: 28px;

    --radius-pill: 999px;


    /* ---------------------------------------------------------
       SHADOWS
       --------------------------------------------------------- */

    --shadow-xs:
        0 3px 12px
        rgba(var(--navy-rgb), 0.04);

    --shadow-sm:
        0 5px 20px
        rgba(var(--navy-rgb), 0.06);

    --shadow-md:
        0 12px 34px
        rgba(var(--navy-rgb), 0.10);

    --shadow-lg:
        0 22px 55px
        rgba(var(--navy-rgb), 0.14);


    /* ---------------------------------------------------------
       FOCUS
       --------------------------------------------------------- */

    --focus-ring:
        0 0 0 3px
        rgba(var(--fluence-blue-rgb), 0.14);


    /* ---------------------------------------------------------
       TRANSITIONS
       --------------------------------------------------------- */

    --transition-fast:
        0.2s ease;

    --transition-normal:
        0.3s ease;

    --transition-slow:
        0.4s ease;
}



/* =========================================================
   2. BASE / RESET
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;

    color: var(--text-color);
    background: var(--white);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;


    /* Bootstrap mapping */

    --bs-font-sans-serif:
        var(--body-font);

    --bs-body-font-family:
        var(--body-font);

    --bs-body-font-size:
        1rem;

    --bs-body-font-weight:
        400;

    --bs-body-line-height:
        1.75;

    --bs-body-color:
        var(--text-color);

    --bs-body-bg:
        var(--white);


    /* Links */

    --bs-link-color:
        var(--navy-color);

    --bs-link-hover-color:
        var(--primary-color);

    --bs-link-color-rgb:
        var(--navy-rgb);

    --bs-link-hover-color-rgb:
        var(--fluence-blue-rgb);


    /* Brand */

    --bs-primary:
        var(--primary-color);

    --bs-primary-rgb:
        var(--fluence-blue-rgb);

    --bs-info:
        var(--accent-color);

    --bs-info-rgb:
        var(--fluence-cyan-rgb);


    /* Layout */

    --bs-border-color:
        var(--border-color);

    --bs-light-rgb:
        247, 249, 250;

    --bs-secondary-rgb:
        244, 250, 253;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


img,
svg {
    max-width: 100%;
}


img {
    height: auto;
}


button,
input,
textarea,
select {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: var(--navy-color);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color var(--transition-fast);
}


a:hover {
    color: var(--primary-color);
}


::selection {
    background:
        rgba(
            var(--fluence-cyan-rgb),
            0.24
        );

    color: var(--navy-dark);
}



/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1.2;

    color: var(--heading-color);
}


h1 {
    font-size:
        clamp(
            2.5rem,
            5vw,
            4.75rem
        );
}


h2 {
    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );
}


h3 {
    font-size:
        clamp(
            1.45rem,
            2.4vw,
            2rem
        );
}


h4 {
    font-size: 1.35rem;
}


h5 {
    font-size: 1.1rem;
}


h6 {
    font-size: 1rem;
}


p {
    margin-top: 0;
}


.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--heading-font);
    font-weight: 700;
}


small,
.small {
    line-height: 1.5;
}



/* =========================================================
   4. GLOBAL LAYOUT
   ========================================================= */

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x:
        var(--container-gutter);
}


#main-content {
    min-height: 60vh;
}


section {
    position: relative;
}



/* =========================================================
   5. ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline: none;

    box-shadow:
        var(--focus-ring);
}


.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}



/* =========================================================
   6. BOOTSTRAP BRAND OVERRIDES
   ========================================================= */

.btn {
    border-radius: var(--radius-sm);

    font-weight: 700;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


.btn:focus-visible {
    box-shadow:
        var(--focus-ring);
}



/* Primary */

.btn-primary {
    --bs-btn-color:
        #ffffff;

    --bs-btn-bg:
        var(--primary-color);

    --bs-btn-border-color:
        var(--primary-color);


    --bs-btn-hover-color:
        #ffffff;

    --bs-btn-hover-bg:
        var(--primary-hover);

    --bs-btn-hover-border-color:
        var(--primary-hover);


    --bs-btn-focus-shadow-rgb:
        var(--fluence-blue-rgb);


    --bs-btn-active-color:
        #ffffff;

    --bs-btn-active-bg:
        var(--primary-hover);

    --bs-btn-active-border-color:
        var(--primary-hover);


    --bs-btn-disabled-color:
        #ffffff;

    --bs-btn-disabled-bg:
        #A9CBE6;

    --bs-btn-disabled-border-color:
        #A9CBE6;
}


.btn-primary:hover {
    transform: translateY(-1px);
}



/* Outline Primary */

.btn-outline-primary {
    --bs-btn-color:
        var(--primary-color);

    --bs-btn-border-color:
        var(--primary-color);


    --bs-btn-hover-color:
        #ffffff;

    --bs-btn-hover-bg:
        var(--primary-color);

    --bs-btn-hover-border-color:
        var(--primary-color);


    --bs-btn-focus-shadow-rgb:
        var(--fluence-blue-rgb);


    --bs-btn-active-color:
        #ffffff;

    --bs-btn-active-bg:
        var(--primary-hover);

    --bs-btn-active-border-color:
        var(--primary-hover);


    --bs-btn-disabled-color:
        #A9CBE6;

    --bs-btn-disabled-bg:
        transparent;

    --bs-btn-disabled-border-color:
        #A9CBE6;
}



/* Outline Light */

.btn-outline-light {
    --bs-btn-color:
        var(--text-color);

    --bs-btn-border-color:
        var(--border-color);


    --bs-btn-hover-color:
        var(--navy-color);

    --bs-btn-hover-bg:
        var(--light-blue-color);

    --bs-btn-hover-border-color:
        var(--border-color);
}



/* =========================================================
   7. BRAND UTILITIES
   ========================================================= */

.text-primary {
    color:
        var(--primary-color) !important;
}


.bg-primary {
    background-color:
        var(--primary-color) !important;
}


.border-primary {
    border-color:
        var(--primary-color) !important;
}


.primary-text {
    color:
        var(--primary-color);
}


.text-accent {
    color:
        var(--accent-color) !important;
}


.bg-light-blue {
    background:
        var(--light-blue-color);
}


.bg-light-cyan {
    background:
        var(--light-cyan-color);
}



/* =========================================================
   8. NAV PILLS / DROPDOWNS / BREADCRUMBS
   ========================================================= */

.nav-pills .nav-link {
    --bs-nav-pills-link-active-color:
        #ffffff;

    --bs-nav-pills-link-active-bg:
        var(--primary-color);
}


.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color:
        #ffffff;

    background-color:
        var(--primary-color) !important;
}


.dropdown-menu {
    --bs-dropdown-link-active-bg:
        var(--primary-color);
}


.breadcrumb.text-white {
    --bs-breadcrumb-divider-color:
        #ffffff;

    --bs-breadcrumb-item-active-color:
        var(--accent-color);
}



/* =========================================================
   9. FORM BASE
   ========================================================= */

.form-control,
.form-select {
    min-height: 48px;

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-sm);

    background:
        var(--white);

    color:
        var(--text-color);

    box-shadow: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}


.form-control:focus,
.form-select:focus {
    border-color:
        var(--primary-color);

    box-shadow:
        var(--focus-ring);
}


.form-control::placeholder {
    color:
        var(--text-light);
}


textarea.form-control {
    min-height: 130px;

    resize: vertical;
}



/* =========================================================
   10. GENERIC CARD
   ========================================================= */

.fluence-card {
    height: 100%;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}


.fluence-card:hover {
    border-color:
        var(--border-brand);

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-5px);
}



/* =========================================================
   11. PRELOADER
   ========================================================= */

.preloader-wrapper {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        var(--white);
}


.preloader-wrapper .preloader {
    position: relative;

    width: 2em;
    height: 2em;

    border-radius: 50%;

    animation:
        fluence-preloader
        1.2s
        infinite
        ease-in-out;

    animation-delay:
        -0.16s;
}


.preloader-wrapper .preloader::before,
.preloader-wrapper .preloader::after {
    content: "";

    position: absolute;

    top: 0;

    width: 2em;
    height: 2em;

    border-radius: 50%;

    animation:
        fluence-preloader
        1.2s
        infinite
        ease-in-out;
}


.preloader-wrapper .preloader::before {
    left: -3.5em;

    animation-delay:
        -0.32s;
}


.preloader-wrapper .preloader::after {
    left: 3.5em;
}


@keyframes fluence-preloader {

    0%,
    80%,
    100% {
        box-shadow:
            0 2em 0 -1em
            var(--primary-color);
    }

    40% {
        box-shadow:
            0 2em 0 0
            var(--accent-color);
    }

}



/* =========================================================
   12. GLOBAL SMALL UTILITIES
   ========================================================= */

.mb-10 {
    margin-bottom: 3rem;
}


.shadow-sm-ola {
    box-shadow:
        0 0.01rem 0.3rem
        rgba(0, 0, 0, 0.075) !important;
}


.modal-backdrop.show {
    z-index: 1040;
}



/* =========================================================
   13. GLOBAL RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    :root {
        --container-gutter:
            2rem;
    }

}


@media (max-width: 575.98px) {

    :root {
        --container-gutter:
            1.5rem;
    }

    body {
        font-size:
            0.96rem;
    }

}



/* =========================================================
   14. SITE HEADER
   ========================================================= */

   .site-header {
    position: relative;
    z-index: 1030;

    width: 100%;

    background: var(--white);

    border-bottom:
        1px solid
        var(--border-soft);
}


.site-header__inner {
    min-height:
        var(--header-height);

    display: flex;

    align-items: center;

    gap: 2rem;
}



/* =========================================================
   15. HEADER BRAND / LOGO
   ========================================================= */

.site-header__brand {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    text-decoration: none;
}


.site-header__logo {
    display: block;

    width: auto;

    max-width: 250px;
    max-height: 68px;

    object-fit: contain;
}



/* =========================================================
   16. MAIN NAVIGATION
   ========================================================= */

.site-nav {
    flex: 1 1 auto;

    min-width: 0;

    padding: 0;
}


.site-nav__body {
    display: flex;

    align-items: center;

    width: 100%;
}


.site-nav__list {
    display: flex;

    align-items: center;

    gap: 0.25rem;

    margin:
        0
        auto;

    padding: 0;

    list-style: none;
}



/* =========================================================
   17. NAV LINKS
   ========================================================= */

.site-nav__link {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 44px;

    padding:
        0.75rem
        0.85rem !important;

    border-radius:
        var(--radius-sm);

    color:
        var(--navy-color);

    font-size: 0.94rem;

    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}


.site-nav__link:hover,
.site-nav__link:focus {
    color:
        var(--primary-color);

    background:
        rgba(
            var(--fluence-blue-rgb),
            0.05
        );
}


.site-nav__link.is-active {
    color:
        var(--primary-color);
}


/* =========================================================
   ACTIVE NAV UNDERLINE
========================================================= */

.site-nav__link {
  position: relative;
}


.site-nav__link.is-active::before {
  content: "";

  position: absolute;

  left: 0.85rem;
  right: 0.85rem;

  bottom: 0.25rem;

  height: 2px;

  border-radius:
      var(--radius-pill);

  background:
      linear-gradient(
          90deg,
          var(--primary-color),
          var(--accent-color)
      );

  pointer-events: none;
}



/* =========================================================
   18. NAV DROPDOWN
   ========================================================= */

.site-nav__dropdown {
    position: relative;
}


.site-nav__dropdown-menu {
    min-width: 245px;

    margin-top:
        0.7rem !important;

    padding:
        0.55rem;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-md);

    background:
        var(--white);

    box-shadow:
        var(--shadow-md);
}


.site-nav__dropdown-item {
    display: block;

    width: 100%;

    padding:
        0.7rem
        0.85rem;

    border-radius:
        var(--radius-sm);

    color:
        var(--navy-color);

    font-size:
        0.9rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}


.site-nav__dropdown-item:hover,
.site-nav__dropdown-item:focus {
    color:
        var(--navy-color);

    background:
        linear-gradient(
            90deg,
            rgba(
                var(--fluence-blue-rgb),
                0.07
            ),
            rgba(
                var(--fluence-cyan-rgb),
                0.09
            )
        );
}



/* Bootstrap dropdown arrow */

.site-nav__dropdown
.dropdown-toggle::after {
    margin-left:
        0.4rem;

    vertical-align:
        0.12em;
}



/* =========================================================
   19. SITE SEARCH
   ========================================================= */

.site-search {
    position: relative;

    flex: 0 0 auto;

    align-items: center;
}


.site-search--desktop {
    width:
        min(
            220px,
            18vw
        );
}


.site-search__input {
    width: 100%;

    min-height: 44px;

    padding:
        0.65rem
        2.9rem
        0.65rem
        1rem;

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-pill);

    background:
        var(--light-grey-color);

    color:
        var(--text-color);

    font-size:
        0.9rem;

    outline:
        none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}


.site-search__input::placeholder {
    color:
        var(--text-light);
}


.site-search__input:focus {
    border-color:
        var(--primary-color);

    background:
        var(--white);

    box-shadow:
        0 0 0 3px
        rgba(
            var(--fluence-blue-rgb),
            0.11
        );
}



/* =========================================================
   20. SEARCH BUTTON
   ========================================================= */

.site-search__button {
    position: absolute;

    top: 50%;
    right: 0.4rem;

    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--navy-color);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.site-search__button:hover,
.site-search__button:focus {
    color:
        var(--primary-color);

    background:
        rgba(
            var(--fluence-blue-rgb),
            0.08
        );
}


.site-search__button:active {
    transform:
        translateY(-50%)
        scale(0.96);
}



/* =========================================================
   21. MOBILE NAV TOGGLE
   ========================================================= */

.site-nav__toggle {
    margin-left:
        auto;

    border:
        0;

    border-radius:
        var(--radius-sm);

    color:
        var(--navy-color);

    background:
        transparent;

    box-shadow:
        none !important;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}


.site-nav__toggle:hover,
.site-nav__toggle:focus {
    color:
        var(--primary-color);

    background:
        rgba(
            var(--fluence-blue-rgb),
            0.06
        );
}



/* =========================================================
   22. MOBILE OFFCANVAS HEADER
   ========================================================= */

.site-nav__offcanvas {
    background:
        var(--white);
}


.site-nav__mobile-header {
    min-height:
        84px;

    border-bottom:
        1px solid
        var(--border-color);
}


.site-nav__mobile-brand {
    display:
        inline-flex;

    align-items:
        center;

    text-decoration:
        none;
}


.site-nav__mobile-brand img {
    display:
        block;

    width:
        auto;

    max-width:
        155px;

    max-height:
        55px;

    object-fit:
        contain;
}



/* =========================================================
   23. HEADER / NAV RESPONSIVE
   ========================================================= */

@media (
    max-width: 1199.98px
)
and (
    min-width: 992px
) {

    .site-header__inner {
        gap:
            1rem;
    }


    .site-header__logo {
        max-width:
            200px;
    }


    .site-nav__list {
        gap:
            0;
    }


    .site-nav__link {
        padding-left:
            0.55rem !important;

        padding-right:
            0.55rem !important;

        font-size:
            0.87rem;
    }


    .site-nav__link.is-active::after {
        left:
            0.55rem;

        right:
            0.55rem;
    }


    .site-search--desktop {
        width:
            160px;
    }

}



/* =========================================================
   24. TABLET / MOBILE NAVIGATION
   ========================================================= */

@media (
    max-width: 991.98px
) {

    .site-header__inner {
        min-height:
            var(--header-height-tablet);

        gap:
            1rem;
    }


    .site-header__logo {
        max-width:
            200px;

        max-height:
            58px;
    }


    .site-nav {
        flex:
            0 0 auto;

        margin-left:
            auto;
    }


    .site-nav__offcanvas {
        width:
            min(
                88vw,
                390px
            ) !important;
    }


    .site-nav__body {
        display:
            block;

        padding:
            0.75rem
            1.25rem
            1.5rem;
    }


    .site-nav__list {
        display:
            block;

        margin:
            0;

        width:
            100%;
    }


    .site-nav__body
    .nav-item {
        border-bottom:
            1px solid
            var(--border-color);

        font-weight:
            inherit;
    }


    .site-nav__body
    .nav-item:last-child {
        border-bottom:
            0;
    }


    .site-nav__link {
        display:
            flex;

        justify-content:
            space-between;

        width:
            100%;

        min-height:
            0;

        padding:
            1rem
            0 !important;

        border-radius:
            0;

        font-size:
            1rem;
    }


    .site-nav__link:hover,
    .site-nav__link:focus {
        background:
            transparent;
    }


    .site-nav__link.is-active {
        color:
            var(--primary-color);
    }


    .site-nav__link.is-active::after {
        display:
            none;
    }



    /* Mobile Dropdown */

    .site-nav__dropdown-menu {
        min-width:
            0;

        margin:
            0
            0
            0.75rem !important;

        padding:
            0.35rem
            0
            0.35rem
            1rem;

        border:
            0;

        border-left:
            2px solid
            rgba(
                var(--fluence-cyan-rgb),
                0.35
            );

        border-radius:
            0;

        background:
            transparent;

        box-shadow:
            none;
    }


    .site-nav__dropdown-item {
        padding:
            0.65rem
            0.75rem;
    }


    .site-nav__dropdown
    .dropdown-toggle::after {
        position:
            static;

        margin-left:
            0.4rem;

        vertical-align:
            0.15em;
    }



    /* Mobile Search */

    .site-search--mobile {
        display:
            flex;

        width:
            100%;

        margin-top:
            1.5rem;
    }


    .site-search--mobile
    .site-search__input {
        min-height:
            48px;
    }

}



/* =========================================================
   25. SMALL MOBILE HEADER
   ========================================================= */

@media (
    max-width: 575.98px
) {

    .site-header__inner {
        min-height:
            var(--header-height-mobile);
    }


    .site-header__logo {
        max-width:
            195px;

        max-height:
            52px;
    }


    .site-header
    .container-fluid {
        --bs-gutter-x:
            1.75rem;
    }


    .site-nav__offcanvas {
        width:
            92vw !important;
    }

}


/* =========================================================
   26. SHARED CAROUSEL CONTROLS
   ========================================================= */

   .swiper-prev,
   .swiper-next {
       width: 42px;
       height: 42px;
   
       display: inline-flex;
       align-items: center;
       justify-content: center;
   
       padding: 0;
   
       border:
           1px solid
           var(--border-color);
   
       border-radius:
           var(--radius-sm);
   
       background:
           var(--light-grey-color);
   
       color:
           var(--navy-color);
   
       line-height: 1;
   
       text-align: center;
   
       box-shadow:
           none;
   
       transition:
           color var(--transition-fast),
           background-color var(--transition-fast),
           border-color var(--transition-fast),
           transform var(--transition-fast),
           box-shadow var(--transition-fast);
   
       --bs-btn-border-color:
           transparent;
   
       --bs-btn-active-bg:
           var(--primary-color);
   
       --bs-btn-active-border-color:
           var(--primary-color);
   
       --bs-btn-hover-bg:
           var(--primary-color);
   
       --bs-btn-hover-border-color:
           var(--primary-color);
   }
   
   
   .swiper-prev:hover,
   .swiper-next:hover,
   .swiper-prev:focus,
   .swiper-next:focus {
       border-color:
           var(--primary-color);
   
       background:
           var(--primary-color);
   
       color:
           var(--white);
   
       box-shadow:
           0 8px 18px
           rgba(
               var(--fluence-blue-rgb),
               0.18
           );
   
       transform:
           translateY(-1px);
   }
   
   
   .swiper-prev:disabled,
   .swiper-next:disabled {
       border-color:
           var(--border-color);
   
       background:
           var(--light-grey-color);
   
       color:
           var(--text-light);
   
       box-shadow:
           none;
   
       opacity:
           0.6;
   
       cursor:
           not-allowed;
   
       transform:
           none;
   }
   
   
   
   /* =========================================================
      27. LEGACY BANNER COMPONENT
      ========================================================= */
   
   .banner-blocks {
       display:
           grid;
   
       grid-template-columns:
           repeat(12, 1fr);
   
       grid-template-rows:
           repeat(2, 1fr);
   
       gap:
           2rem;
   }
   
   
   .block-1 {
       grid-area:
           1 / 1 / 3 / 8;
   }
   
   
   .block-2 {
       grid-area:
           1 / 8 / 2 / 13;
   }
   
   
   .block-3 {
       grid-area:
           2 / 8 / 3 / 13;
   }
   
   
   .banner-ad {
       position:
           relative;
   
       min-height:
           260px;
   
       overflow:
           hidden;
   
       border-radius:
           var(--radius-md);
   
       background:
           var(--light-blue-color);
   }
   
   
   .banner-ad.blue {
       background:
           var(--light-blue-color);
   }
   
   
   .banner-bottom-image {
       position:
           absolute;
   
       right:
           1rem;
   
       bottom:
           0;
   
       max-height:
           85%;
   }
   
   
   .banner-ad
   .swiper-slide {
       min-height:
           630px;
   
       display:
           flex;
   }
   
   
   .banner-ad
   .swiper-pagination {
       right:
           0;
   
       bottom:
           40px;
   
       left:
           0;
   }
   
   
   .banner-ad
   .swiper-pagination
   .swiper-pagination-bullet {
       width:
           12px;
   
       height:
           12px;
   
       margin:
           4px;
   
       background:
           var(--white);
   
       opacity:
           0.65;
   
       transition:
           width var(--transition-fast),
           background-color var(--transition-fast),
           opacity var(--transition-fast);
   }
   
   
   .banner-ad
   .swiper-pagination
   .swiper-pagination-bullet-active {
       width:
           28px;
   
       border-radius:
           var(--radius-pill);
   
       background:
           var(--primary-color);
   
       opacity:
           1;
   }
   
   
   .banner-ad
   .banner-content
   .categories {
       font-family:
           var(--heading-font);
   
       font-size:
           clamp(
               1.8rem,
               3vw,
               2.3rem
           );
   
       font-weight:
           700;
   
       color:
           var(--navy-color);
   
       text-transform:
           capitalize;
   }
   
   
   .banner-ad.large
   .banner-content
   .categories {
       color:
           var(--primary-color);
   }
   
   
   .banner-ad
   .banner-content
   .banner-title {
       font-size:
           clamp(
               2rem,
               4vw,
               3.4rem
           );
   
       letter-spacing:
           -0.02em;
   }
   
   
   
   /* =========================================================
      28. SHARED BUTTON LINK
      ========================================================= */
   
   .btn-link {
       display:
           inline-flex;
   
       align-items:
           center;
   
       gap:
           0.45rem;
   
       padding:
           0;
   
       border:
           0;
   
       background:
           transparent;
   
       color:
           var(--navy-color);
   
       font-size:
           0.95rem;
   
       font-weight:
           700;
   
       line-height:
           1.4;
   
       text-decoration:
           none;
   
       transition:
           color var(--transition-fast);
   }
   
   
   .btn-link:hover,
   .btn-link:focus {
       color:
           var(--primary-color);
   }
   
   
   
   /* =========================================================
      29. CATEGORY CAROUSEL
      ========================================================= */
   
   .category-carousel
   .category-item {
       height:
           100%;
   
       margin:
           20px 0;
   
       padding:
           48px 20px;
   
       border:
           1px solid
           var(--border-soft);
   
       border-radius:
           var(--radius-lg);
   
       background:
           var(--white);
   
       text-align:
           center;
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           transform var(--transition-normal),
           border-color var(--transition-normal),
           box-shadow var(--transition-normal);
   }
   
   
   .category-carousel
   .category-item:hover {
       border-color:
           var(--border-brand);
   
       box-shadow:
           var(--shadow-md);
   
       transform:
           translateY(-7px);
   }
   
   
   .category-carousel
   .category-item
   .category-title {
       margin-top:
           20px;
   
       margin-bottom:
           0;
   
       color:
           var(--navy-color);
   
       font-family:
           var(--heading-font);
   
       font-size:
           1.15rem;
   
       font-weight:
           700;
   
       line-height:
           1.4;
   
       text-transform:
           capitalize;
   }
   
   
   
   /* =========================================================
      30. BRAND CAROUSEL
      ========================================================= */
   
   .brand-carousel
   .brand-item {
       height:
           100%;
   
       padding:
           16px;
   
       border:
           1px solid
           var(--border-soft);
   
       border-radius:
           var(--radius-lg);
   
       background:
           var(--white);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           border-color var(--transition-normal),
           box-shadow var(--transition-normal),
           transform var(--transition-normal);
   }
   
   
   .brand-carousel
   .brand-item:hover {
       border-color:
           var(--border-brand);
   
       box-shadow:
           var(--shadow-md);
   
       transform:
           translateY(-4px);
   }
   
   
   .brand-carousel
   .brand-item img {
       display:
           block;
   
       width:
           100%;
   
       border-radius:
           var(--radius-md);
   }
   
   
   .brand-carousel
   .brand-item
   .brand-details {
       margin-left:
           15px;
   }
   
   
   .brand-carousel
   .brand-item
   .brand-title {
       margin:
           0;
   
       color:
           var(--navy-color);
   
       font-weight:
           700;
   }
   
   
   
   /* =========================================================
      31. PRODUCT TABS
      ========================================================= */
   
   .product-tabs
   .nav-tabs {
       justify-content:
           flex-end;
   
       gap:
           0.25rem;
   
       border:
           0;
   
       --bs-nav-link-color:
           var(--text-muted);
   
       --bs-nav-link-hover-color:
           var(--primary-color);
   
       --bs-nav-tabs-link-border-color:
           transparent;
   
       --bs-nav-tabs-link-hover-border-color:
           transparent;
   
       --bs-nav-tabs-link-active-border-color:
           transparent;
   }
   
   
   .product-tabs
   .nav-tabs
   .nav-link {
       position:
           relative;
   
       padding:
           0.7rem
           0.9rem;
   
       border:
           0;
   
       border-radius:
           0;
   
       color:
           var(--text-muted);
   
       font-weight:
           700;
   
       background:
           transparent;
   }
   
   
   .product-tabs
   .nav-tabs
   .nav-link:hover {
       color:
           var(--primary-color);
   }
   
   
   .product-tabs
   .nav-tabs
   .nav-link.active,
   .product-tabs
   .nav-tabs
   .nav-item.show
   .nav-link {
       color:
           var(--navy-color);
   
       background:
           transparent;
   }
   
   
   .product-tabs
   .nav-tabs
   .nav-link.active::after {
       content:
           "";
   
       position:
           absolute;
   
       right:
           0.9rem;
   
       bottom:
           0;
   
       left:
           0.9rem;
   
       height:
           3px;
   
       border-radius:
           var(--radius-pill);
   
       background:
           linear-gradient(
               90deg,
               var(--primary-color),
               var(--accent-color)
           );
   }
   
   
   
   /* =========================================================
      32. SHARED PRODUCT CARD
      ========================================================= */
   
   .product-item {
       position:
           relative;
   
       height:
           100%;
   
       margin-bottom:
           30px;
   
       padding:
           16px;
   
       overflow:
           hidden;
   
       border:
           1px solid
           var(--border-soft);
   
       border-radius:
           var(--radius-lg);
   
       background:
           var(--white);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           border-color var(--transition-normal),
           box-shadow var(--transition-normal),
           transform var(--transition-normal);
   }
   
   
   .product-item:hover {
       border-color:
           var(--border-brand);
   
       box-shadow:
           var(--shadow-md);
   
       transform:
           translateY(-5px);
   }
   
   
   
   /* =========================================================
      33. PRODUCT NEW BADGE
      ========================================================= */
   
   .product-item.is-new::before {
       content:
           "NEW";
   
       position:
           absolute;
   
       top:
           12px;
   
       left:
           12px;
   
       z-index:
           5;
   
       padding:
           5px
           9px;
   
       border-radius:
           5px;
   
       background:
           linear-gradient(
               135deg,
               var(--primary-color) 0%,
               var(--accent-color) 65%,
               var(--secondary-accent) 100%
           );
   
       color:
           var(--white);
   
       font-size:
           0.68rem;
   
       font-weight:
           800;
   
       line-height:
           1.2;
   
       letter-spacing:
           0.08em;
   
       box-shadow:
           0 5px 14px
           rgba(
               var(--fluence-blue-rgb),
               0.24
           );
   }
   
   
   
   /* =========================================================
      34. PRODUCT CARD IMAGE
      ========================================================= */
   
   .product-item figure {
       position:
           relative;
   
       display:
           flex;
   
       align-items:
           center;
   
       justify-content:
           center;
   
       min-height:
           230px;
   
       margin:
           0
           0
           1rem;
   
       overflow:
           hidden;
   
       border-radius:
           var(--radius-md);
   
       background:
           var(--light-grey-color);
   }
   
   
   .product-item
   figure img {
       display:
           block;
   
       width:
           100%;
   
       max-width:
           100%;
   
       max-height:
           210px;
   
       object-fit:
           contain;
   
       transition:
           transform var(--transition-normal);
   }
   
   
   .product-item:hover
   figure img {
       transform:
           scale(1.035);
   }
   
   
   
   /* =========================================================
      35. PRODUCT CARD CONTENT
      ========================================================= */
   
   .product-item h3 {
       width:
           100%;
   
       margin:
           0;
   
       color:
           var(--navy-color);
   
       font-family:
           var(--heading-font);
   
       font-size:
           1.05rem;
   
       font-weight:
           700;
   
       line-height:
           1.45;
   
       text-transform:
           none;
   }
   
   
   .product-item h3 a {
       color:
           inherit;
   
       text-decoration:
           none;
   }
   
   
   .product-item h3 a:hover {
       color:
           var(--primary-color);
   }
   
   
   .product-item
   .qty {
       color:
           var(--text-light);
   
       font-size:
           0.78rem;
   
       font-weight:
           500;
   
       line-height:
           1.4;
   
       letter-spacing:
           0.04em;
   
       text-transform:
           uppercase;
   }
   
   
   .product-item
   .rating {
       color:
           var(--navy-color);
   
       font-size:
           0.8rem;
   
       font-weight:
           700;
   
       line-height:
           1.4;
   }
   
   
   .product-item
   .rating
   iconify-icon {
       color:
           var(--accent-color);
   }
   
   
   .product-item
   .price {
       display:
           block;
   
       width:
           100%;
   
       color:
           var(--navy-color);
   
       font-size:
           1.3rem;
   
       font-weight:
           800;
   
       line-height:
           1.4;
   }
   
   
   
   /* =========================================================
      36. PRODUCT WISHLIST BUTTON
      ========================================================= */
   
   .product-item
   .btn-wishlist {
       position:
           absolute;
   
       top:
           20px;
   
       right:
           20px;
   
       z-index:
           4;
   
       width:
           44px;
   
       height:
           44px;
   
       display:
           inline-flex;
   
       align-items:
           center;
   
       justify-content:
           center;
   
       padding:
           0;
   
       border:
           1px solid
           var(--border-color);
   
       border-radius:
           50%;
   
       background:
           rgba(
               255,
               255,
               255,
               0.94
           );
   
       color:
           var(--navy-color);
   
       box-shadow:
           var(--shadow-xs);
   
       transition:
           color var(--transition-fast),
           background-color var(--transition-fast),
           border-color var(--transition-fast),
           transform var(--transition-fast);
   }
   
   
   .product-item
   .btn-wishlist:hover {
       border-color:
           var(--primary-color);
   
       background:
           var(--primary-color);
   
       color:
           var(--white);
   
       transform:
           translateY(-2px);
   }
   
   
   
   /* =========================================================
      37. PRODUCT QUANTITY
      ========================================================= */
   
   .product-item
   .product-qty {
       width:
           90px;
   }
   
   
   .product-item
   #quantity {
       width:
           30px;
   
       height:
           auto;
   
       margin:
           0;
   
       padding:
           0;
   
       border:
           0;
   
       background:
           transparent;
   
       color:
           var(--navy-color);
   
       text-align:
           center;
   }
   
   
   .product-item
   .btn-number {
       width:
           28px;
   
       height:
           28px;
   
       display:
           inline-flex;
   
       align-items:
           center;
   
       justify-content:
           center;
   
       padding:
           0;
   
       border:
           1px solid
           var(--border-color);
   
       border-radius:
           6px;
   
       background:
           var(--white);
   
       color:
           var(--navy-color);
   
       line-height:
           1;
   
       transition:
           color var(--transition-fast),
           background-color var(--transition-fast),
           border-color var(--transition-fast);
   }
   
   
   .product-item
   .btn-number:hover {
       border-color:
           var(--primary-color);
   
       background:
           var(--primary-color);
   
       color:
           var(--white);
   }
   
   
   .product-item
   .btn-link {
       text-decoration:
           none;
   }
   
   
   .cart
   .product-qty {
       min-width:
           130px;
   }
   
   
   
   /* =========================================================
      38. FLOATING IMAGE
      ========================================================= */
   
   .image-float {
       margin-top:
           -140px;
   
       margin-bottom:
           -140px;
   }
   
   
   
   /* =========================================================
      39. POST META
      ========================================================= */
   
   .post-item
   .post-meta {
       color:
           var(--text-muted);
   
       font-size:
           0.8rem;
   
       line-height:
           1;
   }
   
   
   .post-item
   .post-meta svg {
       margin-right:
           5px;
   }
   
   
   
   /* =========================================================
      40. SHARED SWIPER FADE
      ========================================================= */
   
   .product-large-slider.swiper-fade
   .swiper-slide {
       opacity:
           0 !important;
   
       pointer-events:
           none;
   }
   
   
   .product-large-slider.swiper-fade
   .swiper-slide-active {
       opacity:
           1 !important;
   
       pointer-events:
           auto;
   }
   
   
   
   /* =========================================================
      41. LEGACY COMPONENT RESPONSIVE
      ========================================================= */
   
   @media (
       max-width: 1140px
   ) {
   
       .banner-blocks {
           grid-template-columns:
               1fr;
   
           grid-template-rows:
               repeat(4, 1fr);
       }
   
   
       .block-1 {
           grid-area:
               1 / 1 / 3 / 2;
       }
   
   
       .block-2 {
           grid-area:
               3 / 1 / 4 / 2;
       }
   
   
       .block-3 {
           grid-area:
               4 / 1 / 5 / 2;
       }
   
   }
   
   
   @media (
       max-width: 991.98px
   ) {
   
       .image-float {
           margin:
               0;
       }
   
   
       .product-tabs
       .nav-tabs {
           justify-content:
               flex-start;
       }
   
   }
   
   
   @media (
       max-width: 575.98px
   ) {
   
       .category-carousel
       .category-item {
           padding:
               36px
               18px;
       }
   
   
       .product-item {
           margin-bottom:
               20px;
       }
   
   
       .product-item figure {
           min-height:
               210px;
       }
   
   
       .product-tabs
       .nav-tabs {
           gap:
               0;
       }
   
   
       .product-tabs
       .nav-tabs
       .nav-link {
           padding:
               0.65rem;
       }
   
   }

/* =========================================================
   42. PRODUCT DETAIL LAYOUT
   ========================================================= */

   .product-detail-wrap {
    align-items: stretch;
}

.product-left,
.product-right {
    display: flex;
    flex-direction: column;
}

.product-left .product-media,
.product-right .product-info {
    height: 100%;
}



/* =========================================================
   43. PRODUCT THUMBNAIL SLIDER
   ========================================================= */

.product-thumbnail-slider {
    height: auto;
}

.product-thumbnail-slider .swiper-slide {
    height: auto !important;
}

.thumb-image {
    width: 100%;
    height: 82px !important;

    padding: 6px;

    object-fit: contain;

    cursor: pointer;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-md);

    background:
        var(--light-grey-color);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.thumb-image:hover {
    border-color:
        var(--border-brand);

    box-shadow:
        var(--shadow-sm);

    transform:
        translateY(-2px);
}

.product-thumbnail-slider
.swiper-slide-thumb-active
.thumb-image {
    border-color:
        var(--primary-color);

    box-shadow:
        0 0 0 2px
        rgba(
            var(--fluence-blue-rgb),
            0.10
        );
}



/* =========================================================
   44. PRODUCT LARGE IMAGE PANEL
   ========================================================= */

.product-large-slider {
    height: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-xl);

    background:
        var(--light-grey-color);
}

.product-large-slider .swiper-slide {
    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.product-large-slider img {
    border-radius:
        var(--radius-lg);
}

.product-main-img {
    width: 100%;
    max-width: 100%;
    max-height: 520px;

    padding: 28px;

    object-fit: contain;
}



/* =========================================================
   45. PRODUCT INFO
   ========================================================= */

.product-info {
    padding:
        0.5rem
        0;
}

.product-info h1,
.product-info h2 {
    color:
        var(--navy-color);
}

.product-info .product-category,
.product-info .category {
    color:
        var(--primary-color);

    font-size:
        0.8rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.product-info .product-sku,
.product-info .sku,
.product-info .product-code {
    color:
        var(--text-muted);

    font-size:
        0.86rem;
}

.product-info .price {
    color:
        var(--navy-color);

    font-size:
        1.65rem;

    font-weight:
        800;
}



/* =========================================================
   46. PRODUCT DESCRIPTION CLAMP
   ========================================================= */

.desc-box {
    display: flex;
    flex-direction: column;
}

.desc-content {
    position: relative;

    overflow: hidden;
}

.desc-content.is-clamped::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 70px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );

    pointer-events: none;
}

.desc-content.is-expanded {
    overflow: visible;
}

.readmore-btn {
    align-self: flex-start;

    margin-top: 12px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        var(--primary-color);

    font-weight:
        700;

    text-decoration:
        none;
}

.readmore-btn:hover,
.readmore-btn:focus {
    color:
        var(--primary-hover);
}



/* =========================================================
   47. PRODUCT DETAIL TABS
   ========================================================= */

.nav-tabs {
    border-bottom:
        1px solid
        var(--border-color);
}

.nav-tabs .nav-link {
    margin-bottom:
        -1px;

    padding:
        0.85rem
        1rem;

    border:
        0;

    border-bottom:
        2px solid
        transparent;

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--text-muted);

    font-weight:
        700;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color:
        var(--primary-color);

    border-bottom-color:
        rgba(
            var(--fluence-blue-rgb),
            0.30
        );
}

.nav-tabs .nav-link.active {
    color:
        var(--navy-color);

    border-bottom-color:
        var(--primary-color);

    background:
        transparent;
}



/* =========================================================
   48. CLEAN SPEC TABLE
   ========================================================= */

.spec-table {
    overflow: hidden;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);
}

.spec-table table {
    margin: 0;
}

.spec-table .table {
    margin-bottom: 0;

    border-color:
        var(--border-soft) !important;
}

.spec-table th,
.spec-table td {
    padding:
        14px
        16px;

    vertical-align: middle;
}

.spec-table th {
    width: 40%;

    background:
        var(--light-grey-color);

    color:
        var(--navy-color);

    font-weight:
        700;
}

.spec-table td {
    color:
        var(--text-color);
}

.spec-table tr + tr th,
.spec-table tr + tr td {
    border-top:
        1px solid
        var(--border-soft) !important;
}



/* =========================================================
   49. SPECIFICATION SHEET
   ========================================================= */

.spec-sheet {
    width: 100%;

    max-width: 1100px;

    margin:
        0
        auto;

    overflow: hidden;

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

    background:
        var(--white);
}

.spec-section-title {
    padding:
        14px
        18px;

    border-top:
        1px solid
        var(--border-color);

    background:
        var(--light-grey-color);

    color:
        var(--navy-color);

    font-size:
        1.05rem;

    font-weight:
        800;
}

.spec-section-title:first-child {
    border-top: 0;
}

.spec-row {
    display: grid;

    grid-template-columns:
        38%
        62%;

    gap:
        18px;

    padding:
        18px;

    border-top:
        1px solid
        var(--border-color);
}

.spec-label {
    color:
        var(--navy-color);

    font-weight:
        700;

    line-height:
        1.4;
}

.spec-value {
    color:
        var(--text-color);

    line-height:
        1.55;

    white-space:
        pre-line;

    word-break:
        break-word;
}



/* =========================================================
   50. RELATED DOCUMENTS GRID
   ========================================================= */

.docs-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        16px;
}



/* =========================================================
   51. DOCUMENT CARD
   ========================================================= */

.doc-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding:
        18px;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

.doc-card:hover {
    border-color:
        var(--border-brand);

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-4px);
}

.doc-card__top {
    display: flex;

    gap:
        12px;

    align-items:
        flex-start;
}

.doc-icon {
    flex:
        0 0 auto;

    width:
        44px;

    height:
        44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(
            var(--fluence-blue-rgb),
            0.10
        );

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--fluence-blue-rgb),
                0.07
            ),
            rgba(
                var(--fluence-cyan-rgb),
                0.10
            )
        );

    color:
        var(--primary-color);
}

.doc-icon i {
    color:
        inherit;

    font-size:
        1.1rem;
}

.doc-title {
    margin:
        0;

    color:
        var(--navy-color);

    font-size:
        0.95rem;

    font-weight:
        800;

    line-height:
        1.4;
}

.doc-title a {
    color:
        inherit;

    text-decoration:
        none;
}

.doc-title a:hover {
    color:
        var(--primary-color);
}

.doc-desc {
    margin:
        6px
        0
        0;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.55;
}

.doc-card__bottom {
    margin-top:
        auto;

    padding-top:
        14px;

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border-top:
        1px solid
        var(--border-soft);
}

.doc-meta {
    color:
        var(--text-light);

    font-size:
        0.76rem;
}



/* =========================================================
   52. DOCUMENT ACTION
   ========================================================= */

.doc-card__action,
.doc-download {
    display: inline-flex;

    align-items: center;

    gap:
        0.4rem;

    color:
        var(--primary-color);

    font-size:
        0.8rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}

.doc-card__action:hover,
.doc-download:hover {
    color:
        var(--primary-hover);
}



/* =========================================================
   53. PRODUCT DETAIL RESPONSIVE
   ========================================================= */

@media (
    max-width: 991.98px
) {

    .product-thumbnail-slider {
        margin-top:
            20px;
    }


    .product-large-slider
    .swiper-slide {
        min-height:
            420px;
    }


    .product-main-img {
        max-height:
            420px;
    }


    .docs-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 767.98px
) {

    .spec-row {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .spec-label {
        font-size:
            0.9rem;
    }


    .product-large-slider
    .swiper-slide {
        min-height:
            360px;
    }


    .product-main-img {
        max-height:
            360px;

        padding:
            20px;
    }

}


@media (
    max-width: 575.98px
) {

    .docs-grid {
        grid-template-columns:
            1fr;
    }


    .thumb-image {
        height:
            72px !important;
    }


    .product-large-slider
    .swiper-slide {
        min-height:
            320px;
    }


    .product-main-img {
        max-height:
            320px;

        padding:
            16px;
    }


    .spec-table th,
    .spec-table td {
        padding:
            12px;
    }


    .nav-tabs {
        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scrollbar-width:
            thin;
    }


    .nav-tabs .nav-link {
        white-space:
            nowrap;
    }

}

/* =========================================================
   54. HOME HERO
   ========================================================= */

   .home-hero {
    position: relative;
    overflow: hidden;

    background:
        var(--navy-dark);
}


.home-hero__carousel {
    position: relative;
}


.home-hero__carousel
.carousel-item {
    position: relative;

    height:
        clamp(
            520px,
            72vh,
            760px
        );

    background:
        var(--navy-dark);
}



/* =========================================================
   55. HERO IMAGE
   ========================================================= */

.home-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}



/* =========================================================
   56. HERO OVERLAY
   ========================================================= */

.home-hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(
                var(--navy-rgb),
                0.96
            ) 0%,
            rgba(
                var(--navy-rgb),
                0.84
            ) 38%,
            rgba(
                var(--navy-rgb),
                0.48
            ) 72%,
            rgba(
                var(--navy-rgb),
                0.20
            ) 100%
        );
}



/* =========================================================
   57. HERO CONTENT
   ========================================================= */

.home-hero__content {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    pointer-events: none;
}


.home-hero__content
.container {
    width: 100%;
}


.home-hero__content-inner {
    max-width:
        900px;
}



/* =========================================================
   58. HERO EYEBROW
   ========================================================= */

.home-hero__eyebrow {
    margin:
        0
        0
        1.15rem;

    color:
        var(--accent-color);

    font-size:
        0.8rem;

    font-weight:
        800;

    line-height:
        1.35;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}



/* =========================================================
   59. HERO TITLE
   ========================================================= */

.home-hero__title {
    max-width:
        850px;

    margin:
        0;

    color:
        var(--white);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.7rem,
            5vw,
            5rem
        );

    font-weight:
        800;

    line-height:
        1.02;

    letter-spacing:
        -0.035em;
}


.home-hero__title
span {
    display: block;

    color:
        var(--accent-color);
}



/* =========================================================
   60. HERO DESCRIPTION
   ========================================================= */

.home-hero__description {
    max-width:
        670px;

    margin:
        1.55rem
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.80
        );

    font-size:
        1.05rem;

    line-height:
        1.8;
}



/* =========================================================
   61. HERO ACTIONS
   ========================================================= */

.home-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap:
        0.8rem;

    margin-top:
        2rem;

    pointer-events:
        auto;
}


.home-hero__primary-btn,
.home-hero__secondary-btn {
    min-height:
        50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        0.55rem;

    padding:
        0.8rem
        1.5rem;

    border-radius:
        var(--radius-sm);

    font-size:
        0.92rem;

    font-weight:
        800;

    line-height:
        1.2;

    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}



/* =========================================================
   62. HERO PRIMARY BUTTON
   ========================================================= */

.home-hero__primary-btn {
    border:
        1px solid
        var(--primary-color);

    background:
        var(--primary-color);

    color:
        var(--white);

    box-shadow:
        0 10px 26px
        rgba(
            var(--fluence-blue-rgb),
            0.18
        );
}


.home-hero__primary-btn:hover,
.home-hero__primary-btn:focus {
    border-color:
        var(--primary-hover);

    background:
        var(--primary-hover);

    color:
        var(--white);

    box-shadow:
        0 14px 30px
        rgba(
            var(--fluence-blue-rgb),
            0.26
        );

    transform:
        translateY(-2px);
}



/* =========================================================
   63. HERO SECONDARY BUTTON
   ========================================================= */

.home-hero__secondary-btn {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.50
        );

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    color:
        var(--white);

    backdrop-filter:
        blur(4px);
}


.home-hero__secondary-btn:hover,
.home-hero__secondary-btn:focus {
    border-color:
        var(--accent-color);

    background:
        rgba(
            var(--fluence-cyan-rgb),
            0.12
        );

    color:
        var(--white);

    transform:
        translateY(-2px);
}



/* =========================================================
   64. HERO CAROUSEL CONTROLS
   ========================================================= */

.home-hero__control {
    position: absolute;

    top: 50%;

    z-index: 4;

    width:
        52px;

    height:
        52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        50%;

    background:
        rgba(
            var(--navy-rgb),
            0.45
        );

    color:
        var(--white);

    opacity:
        0;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(5px);

    transition:
        opacity var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.home-hero:hover
.home-hero__control,
.home-hero__control:focus {
    opacity:
        1;
}


.home-hero__control:hover {
    border-color:
        var(--primary-color);

    background:
        var(--primary-color);

    transform:
        translateY(-50%)
        scale(1.03);
}


.home-hero__control--prev {
    left:
        1.25rem;
}


.home-hero__control--next {
    right:
        1.25rem;
}


.home-hero__control
span:first-child {
    font-size:
        1rem;
}



/* =========================================================
   65. HERO CAROUSEL INDICATORS
   ========================================================= */

.home-hero
.carousel-indicators {
    z-index:
        5;

    gap:
        0.35rem;

    margin-bottom:
        1.6rem;
}


.home-hero
.carousel-indicators
button {
    width:
        8px;

    height:
        8px;

    margin:
        0;

    border:
        0;

    border-radius:
        var(--radius-pill);

    background:
        rgba(
            255,
            255,
            255,
            0.48
        );

    opacity:
        1;

    transition:
        width var(--transition-fast),
        background-color var(--transition-fast);
}


.home-hero
.carousel-indicators
button.active {
    width:
        28px;

    background:
        var(--accent-color);
}



/* =========================================================
   66. HERO DECORATIVE GLOW
   ========================================================= */

.home-hero::after {
    content: "";

    position: absolute;

    top:
        -240px;

    right:
        -190px;

    z-index:
        1;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--fluence-cyan-rgb),
                0.14
            ) 0%,
            rgba(
                var(--fluence-blue-rgb),
                0.06
            ) 45%,
            transparent 70%
        );

    pointer-events:
        none;
}



/* =========================================================
   67. HERO TABLET
   ========================================================= */

@media (
    max-width: 991.98px
) {

    .home-hero__carousel
    .carousel-item {
        height:
            610px;
    }


    .home-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(
                    var(--navy-rgb),
                    0.97
                ) 0%,
                rgba(
                    var(--navy-rgb),
                    0.84
                ) 65%,
                rgba(
                    var(--navy-rgb),
                    0.64
                ) 100%
            );
    }


    .home-hero__content-inner {
        max-width:
            720px;
    }


    .home-hero__title {
        max-width:
            700px;
    }


    .home-hero__description {
        max-width:
            620px;
    }


    .home-hero__control {
        display:
            none;
    }

}



/* =========================================================
   68. HERO MOBILE
   ========================================================= */

@media (
    max-width: 575.98px
) {

    .home-hero__carousel
    .carousel-item {
        height:
            570px;
    }


    .home-hero__content {
        align-items:
            flex-end;

        padding-bottom:
            4.25rem;
    }


    .home-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(
                    var(--navy-rgb),
                    0.24
                ) 0%,
                rgba(
                    var(--navy-rgb),
                    0.65
                ) 45%,
                rgba(
                    var(--navy-rgb),
                    0.98
                ) 100%
            );
    }


    .home-hero__eyebrow {
        margin-bottom:
            0.9rem;

        font-size:
            0.7rem;

        letter-spacing:
            0.12em;
    }


    .home-hero__title {
        font-size:
            clamp(
                2.2rem,
                11vw,
                3.15rem
            );

        line-height:
            1.04;
    }


    .home-hero__description {
        margin-top:
            1.15rem;

        font-size:
            0.94rem;

        line-height:
            1.65;
    }


    .home-hero__actions {
        margin-top:
            1.5rem;

        gap:
            0.65rem;
    }


    .home-hero__primary-btn,
    .home-hero__secondary-btn {
        width:
            100%;

        min-height:
            48px;
    }


    .home-hero
    .carousel-indicators {
        justify-content:
            flex-start;

        margin-right:
            0;

        margin-left:
            1.5rem;

        margin-bottom:
            1.35rem;
    }


    .home-hero::after {
        width:
            330px;

        height:
            330px;

        top:
            -140px;

        right:
            -160px;
    }

}


/* =========================================================
   69. HOME INTRO / SOLUTIONS PORTFOLIO
   ========================================================= */

   .home-intro {
    position: relative;

    overflow: hidden;

    background:
        var(--white);
}



/* =========================================================
   70. HOME INTRO SHARED ELEMENTS
   ========================================================= */

.home-intro__eyebrow {
    margin:
        0
        0
        0.45rem;

    color:
        var(--accent-color);

    font-size:
        0.82rem;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.home-intro__title-line {
    display: flex;

    align-items: center;

    gap:
        0.45rem;

    margin-top:
        1.6rem;
}


.home-intro__title-line span {
    display: block;

    width:
        68px;

    height:
        4px;

    border-radius:
        var(--radius-pill);

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--accent-color)
        );
}


.home-intro__title-line i {
    display: block;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--accent-color);
}



/* =========================================================
   71. HOME INTRO LEFT SIDE
   ========================================================= */

.home-intro__portfolio {
    position: relative;

    height: 100%;

    min-height:
        720px;

    padding:
        90px
        65px
        80px;

    overflow:
        hidden;

    border-top:
        2px solid
        var(--accent-color);

    border-right:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.34
        );

    border-bottom-right-radius:
        110px;

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(
                var(--fluence-cyan-rgb),
                0.11
            ),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            var(--light-blue-color) 0%,
            var(--light-cyan-color) 100%
        );
}



/* Decorative dots */

.home-intro__portfolio::after {
    content: "";

    position: absolute;

    top:
        0;

    right:
        0;

    width:
        220px;

    height:
        220px;

    opacity:
        0.34;

    pointer-events:
        none;

    background-image:
        radial-gradient(
            rgba(
                var(--fluence-cyan-rgb),
                0.28
            ) 1px,
            transparent 1px
        );

    background-size:
        10px
        10px;

    mask-image:
        linear-gradient(
            135deg,
            #000,
            transparent 78%
        );
}


.home-intro__portfolio-inner {
    position: relative;

    z-index:
        2;

    max-width:
        720px;

    margin-left:
        auto;
}



/* =========================================================
   72. PORTFOLIO TITLE
   ========================================================= */

.home-intro__portfolio-title {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.8rem,
            4vw,
            4.25rem
        );

    font-weight:
        800;

    line-height:
        0.98;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;
}


.home-intro__portfolio-title span {
    display:
        block;

    font-weight:
        400;
}



/* =========================================================
   73. PORTFOLIO CARDS
   ========================================================= */

.home-intro__cards {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        14px;

    margin-top:
        2.7rem;
}


.home-intro__card {
    overflow:
        hidden;

    margin:
        0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        var(--radius-lg);

    background:
        var(--navy-color);

    box-shadow:
        0 12px 30px
        rgba(
            var(--navy-rgb),
            0.12
        );

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.home-intro__card:hover {
    border-color:
        rgba(
            var(--fluence-cyan-rgb),
            0.28
        );

    box-shadow:
        0 20px 40px
        rgba(
            var(--navy-rgb),
            0.18
        );

    transform:
        translateY(-7px);
}



/* =========================================================
   74. PORTFOLIO CARD IMAGE
   ========================================================= */

.home-intro__card-image {
    position:
        relative;

    height:
        270px;

    overflow:
        hidden;
}


.home-intro__card-image::after {
    content:
        "";

    position:
        absolute;

    inset:
        auto
        0
        0;

    height:
        38%;

    background:
        linear-gradient(
            to top,
            rgba(
                var(--navy-rgb),
                0.52
            ),
            transparent
        );
}


.home-intro__card-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform var(--transition-slow);
}


.home-intro__card:hover
.home-intro__card-image img {
    transform:
        scale(1.045);
}



/* =========================================================
   75. PORTFOLIO CARD FOOTER
   ========================================================= */

.home-intro__card-footer {
    min-height:
        108px;

    display:
        flex;

    align-items:
        center;

    gap:
        0.9rem;

    padding:
        1.15rem
        1rem;

    background:
        linear-gradient(
            135deg,
            var(--navy-dark) 0%,
            var(--navy-color) 68%,
            var(--navy-light) 100%
        );
}


.home-intro__card-icon {
    flex:
        0 0 auto;

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        var(--radius-sm);

    background:
        rgba(
            var(--fluence-cyan-rgb),
            0.10
        );

    color:
        var(--accent-color);

    font-size:
        1.4rem;
}


.home-intro__card-title {
    color:
        var(--white);

    font-size:
        0.86rem;

    font-weight:
        700;

    line-height:
        1.35;

    text-transform:
        uppercase;
}


.home-intro__card-title strong {
    display:
        block;

    font-weight:
        800;
}



/* =========================================================
   76. PORTFOLIO CTA
   ========================================================= */

.home-intro__portfolio-btn {
    width:
        fit-content;

    min-height:
        52px;

    margin-top:
        2.5rem;

    padding:
        0.8rem
        1.2rem;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        1.3rem;

    border:
        2px solid
        var(--primary-color);

    border-radius:
        var(--radius-sm);

    background:
        var(--white);

    color:
        var(--navy-color);

    font-size:
        0.84rem;

    font-weight:
        800;

    letter-spacing:
        0.02em;

    text-decoration:
        none;

    text-transform:
        uppercase;

    box-shadow:
        var(--shadow-xs);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


.home-intro__portfolio-btn i {
    color:
        var(--primary-color);

    font-size:
        1.05rem;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-intro__portfolio-btn:hover,
.home-intro__portfolio-btn:focus {
    border-color:
        var(--primary-color);

    background:
        var(--primary-color);

    color:
        var(--white);

    box-shadow:
        0 10px 22px
        rgba(
            var(--fluence-blue-rgb),
            0.20
        );

    transform:
        translateY(-2px);
}


.home-intro__portfolio-btn:hover i,
.home-intro__portfolio-btn:focus i {
    color:
        var(--white);

    transform:
        translateX(4px);
}



/* =========================================================
   77. HOME INTRO RIGHT SIDE
   ========================================================= */

.home-intro__content {
    position:
        relative;

    height:
        100%;

    min-height:
        720px;

    padding:
        90px
        70px
        80px;

    background:
        var(--white);
}



/* Decorative background */

.home-intro__content::after {
    content: "";

    position:
        absolute;

    right:
        -160px;

    bottom:
        -180px;

    width:
        380px;

    height:
        380px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--fluence-blue-rgb),
                0.07
            ) 0%,
            rgba(
                var(--fluence-cyan-rgb),
                0.035
            ) 45%,
            transparent 70%
        );

    pointer-events:
        none;
}


.home-intro__content-inner {
    position:
        relative;

    z-index:
        2;

    max-width:
        680px;
}



/* =========================================================
   78. COMPANY TITLE
   ========================================================= */

.home-intro__company-title {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.3rem,
            3.5vw,
            3.7rem
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


.home-intro__company-title span {
    color:
        var(--primary-color);
}



/* =========================================================
   79. COMPANY TEXT
   ========================================================= */

.home-intro__text {
    margin-top:
        2rem;
}


.home-intro__text p {
    margin-bottom:
        1rem;

    color:
        var(--text-color);

    font-size:
        0.98rem;

    line-height:
        1.8;
}


.home-intro__text p:last-child {
    margin-bottom:
        0;
}



/* =========================================================
   80. MISSION CRITICAL EXPERTISE
   ========================================================= */

.home-intro__expertise {
    margin-top:
        2.5rem;

    padding-top:
        2rem;

    display:
        flex;

    align-items:
        center;

    gap:
        1.2rem;

    border-top:
        1px solid
        rgba(
            var(--navy-rgb),
            0.12
        );
}


.home-intro__expertise-icon {
    flex:
        0 0 auto;

    width:
        54px;

    height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            var(--fluence-blue-rgb),
            0.12
        );

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--fluence-blue-rgb),
                0.08
            ),
            rgba(
                var(--fluence-cyan-rgb),
                0.12
            )
        );

    color:
        var(--navy-color);

    font-size:
        1.35rem;
}


.home-intro__expertise-divider {
    width:
        1px;

    align-self:
        stretch;

    background:
        rgba(
            var(--navy-rgb),
            0.16
        );
}


.home-intro__expertise-text {
    margin:
        0;

    color:
        var(--navy-color);

    font-size:
        0.9rem;

    font-weight:
        700;

    line-height:
        1.6;
}


.home-intro__expertise-text strong {
    display:
        block;

    margin-bottom:
        0.15rem;

    color:
        var(--primary-color);

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}



/* =========================================================
   81. HOME INTRO RESPONSIVE
   ========================================================= */

@media (
    max-width: 1199.98px
) {

    .home-intro__portfolio {
        padding:
            80px
            45px
            70px;
    }


    .home-intro__content {
        padding:
            80px
            50px
            70px;
    }


    .home-intro__card-image {
        height:
            235px;
    }

}



/* =========================================================
   82. HOME INTRO TABLET
   ========================================================= */

@media (
    max-width: 991.98px
) {

    .home-intro__portfolio,
    .home-intro__content {
        min-height:
            auto;
    }


    .home-intro__portfolio {
        padding:
            70px
            2.5rem;

        border-right:
            0;

        border-bottom-right-radius:
            70px;
    }


    .home-intro__portfolio-inner {
        max-width:
            none;

        margin:
            0;
    }


    .home-intro__content {
        padding:
            70px
            2.5rem;
    }


    .home-intro__content-inner {
        max-width:
            none;
    }


    .home-intro__cards {
        max-width:
            820px;
    }

}



/* =========================================================
   83. HOME INTRO MOBILE
   ========================================================= */

@media (
    max-width: 767.98px
) {

    .home-intro__portfolio {
        padding:
            60px
            2rem;

        border-bottom-right-radius:
            50px;
    }


    .home-intro__content {
        padding:
            60px
            2rem;
    }


    .home-intro__cards {
        grid-template-columns:
            1fr;
    }


    .home-intro__card {
        display:
            grid;

        grid-template-columns:
            145px
            1fr;
    }


    .home-intro__card-image {
        height:
            100%;

        min-height:
            150px;
    }


    .home-intro__card-footer {
        min-height:
            150px;
    }


    .home-intro__expertise {
        align-items:
            flex-start;
    }

}



/* =========================================================
   84. HOME INTRO SMALL MOBILE
   ========================================================= */

@media (
    max-width: 575.98px
) {

    .home-intro__portfolio {
        padding:
            55px
            1.5rem;

        border-bottom-right-radius:
            38px;
    }


    .home-intro__content {
        padding:
            55px
            1.5rem;
    }


    .home-intro__portfolio-title {
        font-size:
            clamp(
                2.25rem,
                12vw,
                3rem
            );
    }


    .home-intro__company-title {
        font-size:
            clamp(
                2rem,
                10vw,
                2.7rem
            );
    }


    .home-intro__card {
        display:
            block;
    }


    .home-intro__card-image {
        height:
            210px;
    }


    .home-intro__card-footer {
        min-height:
            100px;
    }


    .home-intro__portfolio-btn {
        width:
            100%;

        justify-content:
            space-between;
    }


    .home-intro__expertise {
        gap:
            0.9rem;
    }


    .home-intro__expertise-divider {
        display:
            none;
    }

}

/* =========================================================
   85. SHARED HOME SECTION HEADING
   ========================================================= */

   .home-section-heading {
    max-width:
        820px;

    margin:
        0
        auto
        3.2rem;

    text-align:
        center;
}


.home-section-heading__eyebrow,
.home-showcase-heading__eyebrow {
    display:
        inline-block;

    margin:
        0
        0
        0.7rem;

    color:
        var(--primary-color);

    font-size:
        0.76rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.home-section-heading h2 {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.7rem
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -0.035em;
}


.home-section-heading h2 span {
    color:
        var(--accent-color);
}


.home-section-heading__description {
    max-width:
        700px;

    margin:
        1.1rem
        auto
        0;

    color:
        var(--text-muted);

    font-size:
        1rem;

    line-height:
        1.75;
}


.home-section-heading__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-top:
        1.2rem;

    color:
        var(--navy-color);

    font-size:
        0.88rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-section-heading__link i {
    color:
        var(--primary-color);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-section-heading__link:hover,
.home-section-heading__link:focus {
    color:
        var(--primary-color);
}


.home-section-heading__link:hover i,
.home-section-heading__link:focus i {
    color:
        var(--accent-color);

    transform:
        translateX(4px);
}



/* =========================================================
   86. HOME CATALOG SECTIONS
   ========================================================= */

.home-catalog-section {
    position:
        relative;

    overflow:
        hidden;

    padding:
        100px
        0;
}


.home-catalog-section--products {
    background:
        var(--white);
}


.home-catalog-section--solutions {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(
                var(--fluence-cyan-rgb),
                0.08
            ),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            var(--light-blue-color) 0%,
            #ffffff 100%
        );
}



/* Subtle decorative shape */

.home-catalog-section--solutions::before {
    content:
        "";

    position:
        absolute;

    top:
        -170px;

    right:
        -180px;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.12
        );

    pointer-events:
        none;
}



/* =========================================================
   87. HOME CATALOG OWL SLIDER
   ========================================================= */

.home-catalog-slider {
    position:
        relative;
}


.home-catalog-slider
.owl-stage {
    display:
        flex;
}


.home-catalog-slider
.owl-item {
    display:
        flex;

    min-height:
        100%;
}


.home-catalog-slider
.owl-item > * {
    width:
        100%;
}



/* =========================================================
   88. HOME CATALOG CARD
   ========================================================= */

.home-catalog-card {
    position:
        relative;

    width:
        100%;

    min-height:
        360px;

    padding:
        2.2rem
        2rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        18px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}



/* Top brand line */

.home-catalog-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--accent-color)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform var(--transition-normal);
}


.home-catalog-card:hover {
    border-color:
        var(--border-brand);

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-6px);
}


.home-catalog-card:hover::before {
    transform:
        scaleX(1);
}



/* =========================================================
   89. CATALOG CARD ICON
   ========================================================= */

.home-catalog-card__icon {
    width:
        76px;

    height:
        76px;

    margin-bottom:
        1.5rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            var(--fluence-blue-rgb),
            0.08
        );

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--fluence-blue-rgb),
                0.07
            ),
            rgba(
                var(--fluence-cyan-rgb),
                0.11
            )
        );

    color:
        var(--primary-color);

    transition:
        background-color var(--transition-normal),
        transform var(--transition-normal);
}


.home-catalog-card:hover
.home-catalog-card__icon {
    transform:
        translateY(-2px);
}


.home-catalog-card__icon img {
    display:
        block;

    width:
        54px;

    height:
        54px;

    object-fit:
        contain;
}


.home-catalog-card__icon i {
    font-size:
        2rem;
}



/* =========================================================
   90. CATALOG CARD CONTENT
   ========================================================= */

.home-catalog-card__title {
    margin:
        0
        0
        0.9rem;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        1.25rem;

    font-weight:
        800;

    line-height:
        1.3;
}


.home-catalog-card__title a {
    color:
        inherit;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-catalog-card__title a:hover,
.home-catalog-card__title a:focus {
    color:
        var(--primary-color);
}


.home-catalog-card__description {
    margin:
        0
        0
        1.5rem;

    color:
        var(--text-muted);

    font-size:
        0.94rem;

    line-height:
        1.7;
}



/* =========================================================
   91. CATALOG CARD LINK
   ========================================================= */

.home-catalog-card__link {
    margin-top:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--navy-color);

    font-size:
        0.86rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-catalog-card__link i {
    color:
        var(--primary-color);

    font-size:
        0.78rem;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-catalog-card__link:hover,
.home-catalog-card__link:focus {
    color:
        var(--primary-color);
}


.home-catalog-card__link:hover i,
.home-catalog-card__link:focus i {
    color:
        var(--accent-color);

    transform:
        translateX(4px);
}



/* =========================================================
   92. OWL CAROUSEL DOTS
   ========================================================= */

.home-catalog-slider.owl-theme
.owl-dots {
    margin-top:
        2.2rem !important;

    text-align:
        center;
}


.home-catalog-slider.owl-theme
.owl-dots
.owl-dot {
    padding:
        4px !important;
}


.home-catalog-slider.owl-theme
.owl-dots
.owl-dot span {
    width:
        8px;

    height:
        8px;

    margin:
        0
        4px;

    border-radius:
        var(--radius-pill);

    background:
        var(--grey-color);

    transition:
        width var(--transition-fast),
        background-color var(--transition-fast);
}


.home-catalog-slider.owl-theme
.owl-dots
.owl-dot:hover span {
    background:
        rgba(
            var(--fluence-blue-rgb),
            0.45
        );
}


.home-catalog-slider.owl-theme
.owl-dots
.owl-dot.active
span {
    width:
        28px;

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--accent-color)
        );
}



/* =========================================================
   93. OWL NAVIGATION
   ========================================================= */

.home-catalog-slider.owl-theme
.owl-nav {
    display:
        flex;

    justify-content:
        center;

    gap:
        0.6rem;

    margin-top:
        1.5rem;
}


.home-catalog-slider.owl-theme
.owl-nav
button.owl-prev,
.home-catalog-slider.owl-theme
.owl-nav
button.owl-next {
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    border:
        1px solid
        var(--border-color);

    border-radius:
        50%;

    background:
        var(--white);

    color:
        var(--navy-color);

    box-shadow:
        var(--shadow-xs);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


.home-catalog-slider.owl-theme
.owl-nav
button.owl-prev:hover,
.home-catalog-slider.owl-theme
.owl-nav
button.owl-next:hover {
    border-color:
        var(--primary-color);

    background:
        var(--primary-color);

    color:
        var(--white);

    box-shadow:
        0 8px 20px
        rgba(
            var(--fluence-blue-rgb),
            0.18
        );

    transform:
        translateY(-2px);
}



/* =========================================================
   94. HOME CATALOG RESPONSIVE
   ========================================================= */

@media (
    max-width: 991.98px
) {

    .home-catalog-section {
        padding:
            80px
            0;
    }


    .home-section-heading {
        margin-bottom:
            2.7rem;
    }


    .home-catalog-card {
        min-height:
            340px;

        padding:
            2rem
            1.75rem;
    }

}


@media (
    max-width: 767.98px
) {

    .home-section-heading {
        margin-bottom:
            2.4rem;
    }


    .home-section-heading__description {
        font-size:
            0.95rem;
    }


    .home-catalog-card {
        min-height:
            320px;
    }

}


@media (
    max-width: 575.98px
) {

    .home-catalog-section {
        padding:
            65px
            0;
    }


    .home-section-heading {
        margin-bottom:
            2rem;
    }


    .home-section-heading h2 {
        font-size:
            clamp(
                2rem,
                11vw,
                2.7rem
            );
    }


    .home-section-heading__description {
        margin-top:
            0.9rem;

        font-size:
            0.92rem;

        line-height:
            1.65;
    }


    .home-catalog-card {
        min-height:
            0;

        padding:
            1.8rem
            1.5rem;
    }


    .home-catalog-card__icon {
        width:
            68px;

        height:
            68px;
    }


    .home-catalog-card__icon img {
        width:
            48px;

        height:
            48px;
    }


    .home-catalog-slider.owl-theme
    .owl-dots {
        margin-top:
            1.7rem !important;
    }

}


/* =========================================================
   95. HOME PRODUCT SHOWCASE
   ========================================================= */

   .home-products-showcase {
    position:
        relative;

    padding:
        100px
        0;

    background:
        var(--white);
}


.home-products-showcase--new {
    background:
        linear-gradient(
            180deg,
            var(--light-grey-color) 0%,
            var(--white) 100%
        );
}



/* =========================================================
   96. SHOWCASE HEADING
   ========================================================= */

.home-showcase-heading {
    margin-bottom:
        2.6rem;

    padding-bottom:
        1.4rem;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    border-bottom:
        1px solid
        var(--border-medium);
}


.home-showcase-heading__content {
    min-width:
        0;
}


.home-showcase-heading h2 {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;
}


.home-showcase-heading h2 span {
    color:
        var(--accent-color);
}



/* =========================================================
   97. SHOWCASE LINK
   ========================================================= */

.home-showcase-heading__link {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.7rem;

    padding-bottom:
        0.2rem;

    color:
        var(--navy-color);

    font-size:
        0.88rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-showcase-heading__link i {
    color:
        var(--primary-color);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-showcase-heading__link:hover,
.home-showcase-heading__link:focus {
    color:
        var(--primary-color);
}


.home-showcase-heading__link:hover i,
.home-showcase-heading__link:focus i {
    color:
        var(--accent-color);

    transform:
        translateX(4px);
}



/* =========================================================
   98. HOME PRODUCT CARD
   ========================================================= */

.home-product-card {
    position:
        relative;

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.home-product-card:hover {
    border-color:
        var(--border-brand);

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-6px);
}



/* =========================================================
   99. PRODUCT CARD IMAGE
   ========================================================= */

.home-product-card__image {
    position:
        relative;

    height:
        245px;

    display:
        block;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            var(--light-grey-color) 0%,
            var(--light-blue-color) 100%
        );
}


.home-product-card__image::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    border-bottom:
        1px solid
        var(--border-soft);

    pointer-events:
        none;
}


.home-product-card__image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    padding:
        1.2rem;

    object-fit:
        contain;

    transition:
        transform var(--transition-normal);
}


.home-product-card:hover
.home-product-card__image img {
    transform:
        scale(1.045);
}



/* =========================================================
   100. PRODUCT CARD BADGE
   ========================================================= */

.home-product-card__badge {
    position:
        absolute;

    top:
        1rem;

    left:
        1rem;

    z-index:
        3;

    padding:
        0.42rem
        0.72rem;

    border-radius:
        var(--radius-pill);

    background:
        linear-gradient(
            135deg,
            var(--primary-color) 0%,
            var(--accent-color) 70%
        );

    color:
        var(--white);

    font-size:
        0.66rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    box-shadow:
        0 6px 16px
        rgba(
            var(--fluence-blue-rgb),
            0.20
        );
}



/* =========================================================
   101. PRODUCT CARD BODY
   ========================================================= */

.home-product-card__body {
    min-height:
        235px;

    padding:
        1.45rem;

    display:
        flex;

    flex-direction:
        column;
}



/* =========================================================
   102. PRODUCT CATEGORY
   ========================================================= */

.home-product-card__category {
    margin:
        0
        0
        0.55rem;

    color:
        var(--primary-color);

    font-size:
        0.7rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}



/* =========================================================
   103. PRODUCT TITLE
   ========================================================= */

.home-product-card__title {
    margin:
        0
        0
        0.8rem;

    font-size:
        1.1rem;

    line-height:
        1.35;
}


.home-product-card__title a {
    color:
        var(--navy-color);

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-product-card__title a:hover,
.home-product-card__title a:focus {
    color:
        var(--primary-color);
}



/* =========================================================
   104. PRODUCT DESCRIPTION
   ========================================================= */

.home-product-card__description {
    margin:
        0
        0
        1.25rem;

    color:
        var(--text-muted);

    font-size:
        0.88rem;

    line-height:
        1.65;
}



/* =========================================================
   105. PRODUCT CARD LINK
   ========================================================= */

.home-product-card__link {
    margin-top:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--navy-color);

    font-size:
        0.84rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-product-card__link i {
    color:
        var(--primary-color);

    font-size:
        0.72rem;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-product-card__link:hover,
.home-product-card__link:focus {
    color:
        var(--primary-color);
}


.home-product-card__link:hover i,
.home-product-card__link:focus i {
    color:
        var(--accent-color);

    transform:
        translateX(4px);
}



/* =========================================================
   106. FEATURED / NEW PRODUCT GRID
   ========================================================= */

.home-products-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        1.5rem;
}



/* =========================================================
   107. EMPTY PRODUCT STATE
   ========================================================= */

.home-products-empty {
    padding:
        3rem
        2rem;

    border:
        1px dashed
        var(--border-color);

    border-radius:
        var(--radius-lg);

    background:
        var(--light-grey-color);

    text-align:
        center;
}


.home-products-empty__icon {
    width:
        64px;

    height:
        64px;

    margin:
        0
        auto
        1rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            var(--fluence-blue-rgb),
            0.08
        );

    color:
        var(--primary-color);

    font-size:
        1.4rem;
}


.home-products-empty h3 {
    margin-bottom:
        0.5rem;

    color:
        var(--navy-color);

    font-size:
        1.2rem;
}


.home-products-empty p {
    max-width:
        540px;

    margin:
        0
        auto;

    color:
        var(--text-muted);
}



/* =========================================================
   108. SHOWCASE RESPONSIVE
   ========================================================= */

@media (
    max-width: 1199.98px
) {

    .home-products-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 991.98px
) {

    .home-products-showcase {
        padding:
            80px
            0;
    }


    .home-showcase-heading {
        margin-bottom:
            2.3rem;
    }


    .home-products-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 767.98px
) {

    .home-showcase-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.8rem;
    }


    .home-showcase-heading__link {
        padding-bottom:
            0;
    }


    .home-product-card__image {
        height:
            225px;
    }


    .home-product-card__body {
        min-height:
            220px;
    }

}


@media (
    max-width: 575.98px
) {

    .home-products-showcase {
        padding:
            65px
            0;
    }


    .home-showcase-heading {
        margin-bottom:
            2rem;

        padding-bottom:
            1.15rem;
    }


    .home-showcase-heading h2 {
        font-size:
            clamp(
                1.9rem,
                10vw,
                2.55rem
            );
    }


    .home-products-grid {
        grid-template-columns:
            1fr;
    }


    .home-product-card__image {
        height:
            240px;
    }


    .home-product-card__body {
        min-height:
            0;

        padding:
            1.3rem;
    }

}


/* =========================================================
   109. HOME ADVANTAGES / WHY FLUENCE
   ========================================================= */

   .home-advantages {
    position:
        relative;

    overflow:
        hidden;

    padding:
        100px
        0;

    background:
        linear-gradient(
            135deg,
            var(--navy-dark) 0%,
            var(--navy-color) 58%,
            var(--navy-light) 100%
        );

    color:
        var(--white);
}



/* =========================================================
   110. WHY FLUENCE DECORATIVE LAYERS
   ========================================================= */

.home-advantages::before {
    content:
        "";

    position:
        absolute;

    top:
        -160px;

    right:
        -120px;

    width:
        450px;

    height:
        450px;

    border:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.12
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


.home-advantages::after {
    content:
        "";

    position:
        absolute;

    left:
        -170px;

    bottom:
        -210px;

    width:
        430px;

    height:
        430px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--fluence-cyan-rgb),
                0.13
            ) 0%,
            rgba(
                var(--fluence-blue-rgb),
                0.06
            ) 42%,
            transparent 70%
        );

    pointer-events:
        none;
}


.home-advantages
.container {
    position:
        relative;

    z-index:
        2;
}



/* =========================================================
   111. WHY FLUENCE HEADING
   ========================================================= */

.home-advantages__heading {
    max-width:
        760px;

    margin-bottom:
        3rem;
}


.home-advantages__eyebrow {
    margin:
        0
        0
        0.75rem;

    color:
        var(--accent-color);

    font-size:
        0.76rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.home-advantages__heading h2 {
    margin:
        0;

    color:
        var(--white);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.4rem,
            4vw,
            3.8rem
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -0.035em;
}


.home-advantages__heading h2 span {
    color:
        var(--accent-color);
}


.home-advantages__description {
    max-width:
        680px;

    margin:
        1.15rem
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        1rem;

    line-height:
        1.8;
}



/* =========================================================
   112. ADVANTAGES GRID
   ========================================================= */

.home-advantages__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        1rem;
}



/* =========================================================
   113. ADVANTAGE CARD
   ========================================================= */

.home-advantage-card {
    position:
        relative;

    min-height:
        300px;

    padding:
        2rem
        1.6rem;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    backdrop-filter:
        blur(5px);

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}


.home-advantage-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--accent-color)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform var(--transition-normal);
}


.home-advantage-card:hover {
    border-color:
        rgba(
            var(--fluence-cyan-rgb),
            0.24
        );

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    box-shadow:
        0 16px 34px
        rgba(
            0,
            0,
            0,
            0.15
        );

    transform:
        translateY(-6px);
}


.home-advantage-card:hover::before {
    transform:
        scaleX(1);
}



/* =========================================================
   114. ADVANTAGE ICON
   ========================================================= */

.home-advantage-card__icon {
    width:
        58px;

    height:
        58px;

    margin-bottom:
        1.5rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.15
        );

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--fluence-blue-rgb),
                0.16
            ),
            rgba(
                var(--fluence-cyan-rgb),
                0.12
            )
        );

    color:
        var(--accent-color);

    font-size:
        1.45rem;

    transition:
        background-color var(--transition-normal),
        transform var(--transition-normal);
}


.home-advantage-card:hover
.home-advantage-card__icon {
    transform:
        translateY(-2px);
}



/* =========================================================
   115. ADVANTAGE CONTENT
   ========================================================= */

.home-advantage-card__title {
    margin:
        0
        0
        0.75rem;

    color:
        var(--white);

    font-size:
        1.08rem;

    font-weight:
        800;

    line-height:
        1.35;
}


.home-advantage-card__description {
    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size:
        0.9rem;

    line-height:
        1.7;
}



/* =========================================================
   116. ADVANTAGE NUMBER / DECORATIVE INDEX
   ========================================================= */

.home-advantage-card__number {
    position:
        absolute;

    right:
        1.2rem;

    bottom:
        0.5rem;

    color:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font-family:
        var(--heading-font);

    font-size:
        5rem;

    font-weight:
        800;

    line-height:
        1;

    pointer-events:
        none;

    user-select:
        none;
}



/* =========================================================
   117. WHY FLUENCE CTA
   ========================================================= */

.home-advantages__action {
    margin-top:
        2.7rem;
}


.home-advantages__link {
    min-height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    padding:
        0.8rem
        1.35rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    border-radius:
        var(--radius-sm);

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    color:
        var(--white);

    font-size:
        0.88rem;

    font-weight:
        800;

    text-decoration:
        none;

    backdrop-filter:
        blur(4px);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


.home-advantages__link i {
    color:
        var(--accent-color);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-advantages__link:hover,
.home-advantages__link:focus {
    border-color:
        var(--primary-color);

    background:
        var(--primary-color);

    color:
        var(--white);

    box-shadow:
        0 10px 24px
        rgba(
            var(--fluence-blue-rgb),
            0.22
        );

    transform:
        translateY(-2px);
}


.home-advantages__link:hover i,
.home-advantages__link:focus i {
    color:
        var(--white);

    transform:
        translateX(4px);
}



/* =========================================================
   118. WHY FLUENCE RESPONSIVE
   ========================================================= */

@media (
    max-width: 1199.98px
) {

    .home-advantages__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .home-advantage-card {
        min-height:
            260px;
    }

}


@media (
    max-width: 991.98px
) {

    .home-advantages {
        padding:
            80px
            0;
    }


    .home-advantages__heading {
        margin-bottom:
            2.5rem;
    }

}


@media (
    max-width: 767.98px
) {

    .home-advantage-card {
        padding:
            1.7rem
            1.4rem;
    }

}


@media (
    max-width: 575.98px
) {

    .home-advantages {
        padding:
            65px
            0;
    }


    .home-advantages__grid {
        grid-template-columns:
            1fr;
    }


    .home-advantages__heading {
        margin-bottom:
            2rem;
    }


    .home-advantages__heading h2 {
        font-size:
            clamp(
                2rem,
                11vw,
                2.8rem
            );
    }


    .home-advantages__description {
        font-size:
            0.93rem;

        line-height:
            1.7;
    }


    .home-advantage-card {
        min-height:
            0;
    }


    .home-advantages__link {
        width:
            100%;
    }

}

/* =========================================================
   119. HOME CONTACT
   ========================================================= */

   .home-contact {
    position:
        relative;

    overflow:
        hidden;

    padding:
        110px
        0;

    background:
        linear-gradient(
            180deg,
            var(--light-grey-color) 0%,
            var(--white) 100%
        );
}



/* =========================================================
   120. HOME CONTACT PANEL
   ========================================================= */

.home-contact__panel {
    overflow:
        hidden;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        28px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-lg);
}



/* =========================================================
   121. HOME CONTACT INFO SIDE
   ========================================================= */

.home-contact__info {
    position:
        relative;

    height:
        100%;

    padding:
        4rem
        3.3rem;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            var(--navy-dark) 0%,
            var(--navy-color) 65%,
            var(--navy-light) 100%
        );
}



/* Decorative circle */

.home-contact__info::after {
    content:
        "";

    position:
        absolute;

    right:
        -130px;

    bottom:
        -130px;

    width:
        360px;

    height:
        360px;

    border:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.13
        );

    border-radius:
        50%;

    box-shadow:
        0 0 0 35px
        rgba(
            var(--fluence-cyan-rgb),
            0.025
        ),
        0 0 0 70px
        rgba(
            var(--fluence-cyan-rgb),
            0.018
        );

    pointer-events:
        none;
}


.home-contact__info > * {
    position:
        relative;

    z-index:
        2;
}



/* =========================================================
   122. CONTACT INFO HEADING
   ========================================================= */

.home-contact__eyebrow {
    margin:
        0
        0
        0.75rem;

    color:
        var(--accent-color);

    font-size:
        0.76rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.home-contact__info h2 {
    margin:
        0;

    color:
        var(--white);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.2rem,
            3vw,
            3.4rem
        );

    font-weight:
        800;

    line-height:
        1.07;

    letter-spacing:
        -0.035em;
}


.home-contact__info h2 span {
    display:
        block;

    color:
        var(--accent-color);
}


.home-contact__intro {
    max-width:
        520px;

    margin:
        1.4rem
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        0.95rem;

    line-height:
        1.75;
}



/* =========================================================
   123. CONTACT DETAILS
   ========================================================= */

.home-contact__details {
    margin-top:
        2.4rem;
}


.home-contact__detail {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        1rem;

    padding:
        1rem
        0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.home-contact__detail:last-child {
    border-bottom:
        0;
}



/* =========================================================
   124. CONTACT DETAIL ICON
   ========================================================= */

.home-contact__detail-icon {
    flex:
        0 0 auto;

    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.14
        );

    border-radius:
        10px;

    background:
        rgba(
            var(--fluence-cyan-rgb),
            0.10
        );

    color:
        var(--accent-color);
}



/* =========================================================
   125. CONTACT DETAIL TEXT
   ========================================================= */

.home-contact__detail strong {
    display:
        block;

    margin-bottom:
        0.2rem;

    color:
        var(--white);

    font-size:
        0.8rem;

    font-weight:
        700;
}


.home-contact__detail p {
    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );

    font-size:
        0.88rem;

    line-height:
        1.55;
}


.home-contact__detail a {
    color:
        rgba(
            255,
            255,
            255,
            0.80
        );

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-contact__detail a:hover,
.home-contact__detail a:focus {
    color:
        var(--accent-color);
}



/* =========================================================
   126. BUSINESS HOURS BUTTON
   ========================================================= */

.home-contact__hours-btn {
    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.74
        );

    font-size:
        0.88rem;

    line-height:
        1.5;

    text-align:
        left;

    transition:
        color var(--transition-fast);
}


.home-contact__hours-btn:hover,
.home-contact__hours-btn:focus {
    color:
        var(--accent-color);
}



/* =========================================================
   127. FULL CONTACT PAGE LINK
   ========================================================= */

.home-contact__full-contact-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.7rem;

    margin-top:
        2rem;

    color:
        var(--white);

    font-size:
        0.86rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.home-contact__full-contact-link i {
    color:
        var(--accent-color);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.home-contact__full-contact-link:hover,
.home-contact__full-contact-link:focus {
    color:
        var(--accent-color);
}


.home-contact__full-contact-link:hover i,
.home-contact__full-contact-link:focus i {
    transform:
        translateX(4px);
}



/* =========================================================
   128. CONTACT FORM PANEL
   ========================================================= */

.home-contact__form-panel {
    height:
        100%;

    padding:
        4rem
        3.5rem;

    background:
        var(--white);
}



/* =========================================================
   129. CONTACT FORM HEADING
   ========================================================= */

.home-contact__form-heading {
    margin-bottom:
        2rem;
}


.home-contact__form-heading p {
    margin:
        0
        0
        0.4rem;

    color:
        var(--primary-color);

    font-size:
        0.74rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.home-contact__form-heading h3 {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        2rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -0.025em;
}



/* =========================================================
   130. HOME CONTACT FORM
   ========================================================= */

.home-contact-form
.form-label {
    margin-bottom:
        0.45rem;

    color:
        var(--navy-color);

    font-size:
        0.83rem;

    font-weight:
        700;
}


.home-contact-form
.form-control,
.home-contact-form
.form-select {
    min-height:
        50px;

    padding:
        0.75rem
        0.95rem;

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-sm);

    background:
        var(--light-grey-color);

    color:
        var(--text-color);

    font-size:
        0.92rem;

    box-shadow:
        none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}


.home-contact-form
textarea.form-control {
    min-height:
        155px;

    resize:
        vertical;
}


.home-contact-form
.form-control:focus,
.home-contact-form
.form-select:focus {
    border-color:
        var(--primary-color);

    background:
        var(--white);

    box-shadow:
        0 0 0 3px
        rgba(
            var(--fluence-blue-rgb),
            0.10
        );
}


.home-contact-form
.form-control::placeholder {
    color:
        var(--text-light);
}



/* =========================================================
   131. INVALID CONTACT FIELD
   ========================================================= */

.home-contact-form
.form-control.is-invalid,
.home-contact-form
.form-select.is-invalid {
    border-color:
        var(--danger-color, #dc3545);
}


.home-contact-field-error {
    margin-top:
        0.35rem;

    margin-bottom:
        0.4rem;

    color:
        var(--danger-color, #dc3545);

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.4;
}



/* =========================================================
   132. CONTACT SUBMIT BUTTON
   ========================================================= */

.home-contact__submit {
    min-height:
        52px;

    padding:
        0.85rem
        1.5rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.75rem;

    border:
        1px solid
        var(--primary-color);

    border-radius:
        var(--radius-sm);

    background:
        var(--primary-color);

    color:
        var(--white);

    font-size:
        0.9rem;

    font-weight:
        800;

    line-height:
        1.2;

    box-shadow:
        0 8px 20px
        rgba(
            var(--fluence-blue-rgb),
            0.16
        );

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


.home-contact__submit:hover,
.home-contact__submit:focus {
    border-color:
        var(--primary-hover);

    background:
        var(--primary-hover);

    color:
        var(--white);

    box-shadow:
        0 12px 26px
        rgba(
            var(--fluence-blue-rgb),
            0.24
        );

    transform:
        translateY(-2px);
}


.home-contact__submit:disabled {
    opacity:
        0.65;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}



/* =========================================================
   133. HOME CONTACT RESPONSIVE
   ========================================================= */

@media (
    max-width: 1199.98px
) {

    .home-contact {
        padding:
            90px
            0;
    }


    .home-contact__info,
    .home-contact__form-panel {
        padding:
            3.5rem
            2.5rem;
    }

}


@media (
    max-width: 991.98px
) {

    .home-contact {
        padding:
            75px
            0;
    }


    .home-contact__panel {
        border-radius:
            22px;
    }


    .home-contact__info,
    .home-contact__form-panel {
        padding:
            3rem
            2.5rem;
    }

}


@media (
    max-width: 767.98px
) {

    .home-contact {
        padding:
            65px
            0;
    }


    .home-contact__info,
    .home-contact__form-panel {
        padding:
            2.7rem
            2rem;
    }


    .home-contact__submit {
        width:
            100%;
    }

}


@media (
    max-width: 575.98px
) {

    .home-contact {
        padding:
            55px
            0;
    }


    .home-contact__panel {
        border-radius:
            18px;
    }


    .home-contact__info,
    .home-contact__form-panel {
        padding:
            2.4rem
            1.5rem;
    }


    .home-contact__info h2 {
        font-size:
            2.15rem;
    }


    .home-contact__form-heading h3 {
        font-size:
            1.7rem;
    }


    .home-contact__detail {
        gap:
            0.8rem;
    }


    .home-contact__detail-icon {
        width:
            38px;

        height:
            38px;
    }


    .home-contact__info::after {
        right:
            -190px;

        bottom:
            -180px;
    }

}

/* =========================================================
   134. SITE FOOTER
   ========================================================= */

   .site-footer {
    position:
        relative;

    overflow:
        hidden;

    background:
        var(--navy-dark);

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );
}



/* =========================================================
   135. FOOTER TOP
   ========================================================= */

.site-footer__top {
    position:
        relative;

    z-index:
        2;

    padding:
        80px
        0
        65px;
}



/* =========================================================
   136. FOOTER DECORATIVE BACKGROUND
   ========================================================= */

.site-footer::before {
    content:
        "";

    position:
        absolute;

    top:
        -260px;

    right:
        -230px;

    width:
        560px;

    height:
        560px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--fluence-cyan-rgb),
                0.10
            ) 0%,
            rgba(
                var(--fluence-blue-rgb),
                0.045
            ) 45%,
            transparent 70%
        );

    pointer-events:
        none;
}


.site-footer::after {
    content:
        "";

    position:
        absolute;

    left:
        -180px;

    bottom:
        -240px;

    width:
        460px;

    height:
        460px;

    border:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.07
        );

    border-radius:
        50%;

    pointer-events:
        none;
}



/* =========================================================
   137. FOOTER BRAND
   ========================================================= */

.site-footer__brand {
    display:
        inline-block;

    margin-bottom:
        1.4rem;
}


.site-footer__logo {
    display:
        block;

    width:
        auto;

    max-width:
        190px;

    max-height:
        58px;

    object-fit:
        contain;
}



/* =========================================================
   138. FOOTER COMPANY DESCRIPTION
   ========================================================= */

.site-footer__description {
    max-width:
        390px;

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );

    font-size:
        0.9rem;

    line-height:
        1.75;
}



/* =========================================================
   139. FOOTER SOCIAL LINKS
   ========================================================= */

.site-footer__social {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.6rem;

    margin-top:
        1.6rem;
}


.site-footer__social-link {
    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


.site-footer__social-link:hover,
.site-footer__social-link:focus {
    border-color:
        var(--primary-color);

    background:
        var(--primary-color);

    color:
        var(--white);

    transform:
        translateY(-2px);
}



/* =========================================================
   140. FOOTER COLUMN TITLE
   ========================================================= */

.site-footer__title {
    position:
        relative;

    margin:
        0
        0
        1.35rem;

    padding-bottom:
        0.8rem;

    color:
        var(--white);

    font-family:
        var(--heading-font);

    font-size:
        0.95rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.02em;
}


.site-footer__title::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        32px;

    height:
        2px;

    border-radius:
        var(--radius-pill);

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--accent-color)
        );
}



/* =========================================================
   141. FOOTER NAVIGATION
   ========================================================= */

.site-footer__links {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.site-footer__links li {
    margin-bottom:
        0.75rem;
}


.site-footer__links li:last-child {
    margin-bottom:
        0;
}


.site-footer__links a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );

    font-size:
        0.88rem;

    line-height:
        1.5;

    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.site-footer__links a::before {
    content:
        "";

    width:
        5px;

    height:
        5px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        rgba(
            var(--fluence-cyan-rgb),
            0.55
        );

    transition:
        background-color var(--transition-fast);
}


.site-footer__links a:hover,
.site-footer__links a:focus {
    color:
        var(--white);

    transform:
        translateX(3px);
}


.site-footer__links a:hover::before,
.site-footer__links a:focus::before {
    background:
        var(--accent-color);
}



/* =========================================================
   142. FOOTER CONTACT DETAILS
   ========================================================= */

.site-footer__contact {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.site-footer__contact-item {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.8rem;

    margin-bottom:
        1rem;
}


.site-footer__contact-item:last-child {
    margin-bottom:
        0;
}


.site-footer__contact-icon {
    flex:
        0 0 auto;

    width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        rgba(
            var(--fluence-cyan-rgb),
            0.09
        );

    color:
        var(--accent-color);

    font-size:
        0.85rem;
}


.site-footer__contact-text {
    min-width:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );

    font-size:
        0.86rem;

    line-height:
        1.55;
}


.site-footer__contact-text strong {
    display:
        block;

    margin-bottom:
        0.15rem;

    color:
        rgba(
            255,
            255,
            255,
            0.90
        );

    font-size:
        0.78rem;

    font-weight:
        700;
}


.site-footer__contact-text a {
    color:
        inherit;

    text-decoration:
        none;

    word-break:
        break-word;

    transition:
        color var(--transition-fast);
}


.site-footer__contact-text a:hover,
.site-footer__contact-text a:focus {
    color:
        var(--accent-color);
}



/* =========================================================
   143. FOOTER BUSINESS HOURS
   ========================================================= */

.site-footer__hours {
    margin-top:
        1.2rem;

    padding:
        1rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        var(--radius-md);

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );
}


.site-footer__hours-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        0.35rem
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        0.8rem;
}


.site-footer__hours-row strong {
    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-weight:
        700;
}



/* =========================================================
   144. FOOTER BOTTOM
   ========================================================= */

.site-footer__bottom {
    position:
        relative;

    z-index:
        2;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );
}


.site-footer__bottom-inner {
    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1.5rem;

    padding:
        1rem
        0;
}



/* =========================================================
   145. FOOTER COPYRIGHT
   ========================================================= */

.site-footer__copyright {
    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.54
        );

    font-size:
        0.8rem;

    line-height:
        1.5;
}



/* =========================================================
   146. FOOTER LEGAL LINKS
   ========================================================= */

.site-footer__legal {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.4rem
        1.25rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.site-footer__legal a {
    color:
        rgba(
            255,
            255,
            255,
            0.54
        );

    font-size:
        0.78rem;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.site-footer__legal a:hover,
.site-footer__legal a:focus {
    color:
        var(--accent-color);
}



/* =========================================================
   147. FOOTER RESPONSIVE
   ========================================================= */

@media (
    max-width: 991.98px
) {

    .site-footer__top {
        padding:
            65px
            0
            55px;
    }


    .site-footer__bottom-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            0.75rem;

        padding:
            1.4rem
            0;
    }

}


@media (
    max-width: 767.98px
) {

    .site-footer__top {
        padding:
            55px
            0
            45px;
    }


    .site-footer__description {
        max-width:
            none;
    }

}


@media (
    max-width: 575.98px
) {

    .site-footer__top {
        padding:
            50px
            0
            40px;
    }


    .site-footer__logo {
        max-width:
            170px;
    }


    .site-footer__legal {
        gap:
            0.55rem
            1rem;
    }


    .site-footer__hours-row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.15rem;
    }

}

/* =========================================================
   148. INNER PAGE
   ========================================================= */

   .inner-page {
    position:
        relative;

    min-height:
        60vh;

    background:
        var(--white);
}



/* =========================================================
   149. INNER PAGE HERO
   ========================================================= */

.inner-hero {
    position:
        relative;

    overflow:
        hidden;

    padding:
        82px
        0
        76px;

    background:
        linear-gradient(
            135deg,
            var(--navy-dark) 0%,
            var(--navy-color) 60%,
            var(--navy-light) 100%
        );

    color:
        var(--white);
}



/* =========================================================
   150. INNER HERO DECORATIVE BACKGROUND
   ========================================================= */

.inner-hero::before {
    content:
        "";

    position:
        absolute;

    top:
        -210px;

    right:
        -160px;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                var(--fluence-cyan-rgb),
                0.16
            ) 0%,
            rgba(
                var(--fluence-blue-rgb),
                0.065
            ) 42%,
            transparent 70%
        );

    pointer-events:
        none;
}


.inner-hero::after {
    content:
        "";

    position:
        absolute;

    left:
        -110px;

    bottom:
        -250px;

    width:
        400px;

    height:
        400px;

    border:
        1px solid
        rgba(
            var(--fluence-cyan-rgb),
            0.10
        );

    border-radius:
        50%;

    box-shadow:
        0 0 0 45px
        rgba(
            var(--fluence-cyan-rgb),
            0.018
        ),
        0 0 0 90px
        rgba(
            var(--fluence-cyan-rgb),
            0.012
        );

    pointer-events:
        none;
}


.inner-hero
.container {
    position:
        relative;

    z-index:
        2;
}



/* =========================================================
   151. INNER HERO CONTENT
   ========================================================= */

.inner-hero__content {
    max-width:
        850px;
}


.inner-hero__eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    margin-bottom:
        0.8rem;

    color:
        var(--accent-color);

    font-size:
        0.76rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.inner-hero__eyebrow::before {
    content:
        "";

    width:
        28px;

    height:
        2px;

    border-radius:
        var(--radius-pill);

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--accent-color)
        );
}



/* =========================================================
   152. INNER HERO TITLE
   ========================================================= */

.inner-hero__title {
    max-width:
        900px;

    margin:
        0;

    color:
        var(--white);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.65rem,
            5vw,
            4.5rem
        );

    font-weight:
        800;

    line-height:
        1.03;

    letter-spacing:
        -0.04em;
}


.inner-hero__title span {
    color:
        var(--accent-color);
}



/* =========================================================
   153. INNER HERO DESCRIPTION
   ========================================================= */

.inner-hero__description {
    max-width:
        690px;

    margin:
        1.15rem
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    font-size:
        1rem;

    line-height:
        1.75;
}



/* =========================================================
   154. INNER BREADCRUMB
   ========================================================= */

.inner-breadcrumb {
    margin:
        0
        0
        1.5rem;

    padding:
        0;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.45rem;

    list-style:
        none;
}


.inner-breadcrumb__item {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        rgba(
            255,
            255,
            255,
            0.54
        );

    font-size:
        0.8rem;

    line-height:
        1.4;
}


.inner-breadcrumb__item:not(:last-child)::after {
    content:
        "/";

    color:
        rgba(
            255,
            255,
            255,
            0.30
        );
}


.inner-breadcrumb__item a {
    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.inner-breadcrumb__item a:hover,
.inner-breadcrumb__item a:focus {
    color:
        var(--accent-color);
}


.inner-breadcrumb__item.is-active {
    color:
        var(--accent-color);
}



/* =========================================================
   155. INNER PAGE BODY
   ========================================================= */

.inner-page__body {
    position:
        relative;

    padding:
        90px
        0;
}



/* =========================================================
   156. SHARED PAGE SECTION
   ========================================================= */

.page-section {
    position:
        relative;

    padding:
        90px
        0;
}


.page-section--sm {
    padding:
        65px
        0;
}


.page-section--lg {
    padding:
        110px
        0;
}


.page-section--white {
    background:
        var(--white);
}


.page-section--light {
    background:
        var(--light-grey-color);
}


.page-section--blue {
    background:
        var(--light-blue-color);
}


.page-section--cyan {
    background:
        var(--light-cyan-color);
}



/* =========================================================
   157. PAGE SECTION HEADING
   ========================================================= */

.page-section-heading {
    max-width:
        760px;

    margin-bottom:
        3rem;
}


.page-section-heading--center {
    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;
}


.page-section-heading__eyebrow {
    margin:
        0
        0
        0.65rem;

    color:
        var(--primary-color);

    font-size:
        0.74rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.page-section-heading__title {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.25rem
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.03em;
}


.page-section-heading__title span {
    color:
        var(--accent-color);
}


.page-section-heading__description {
    max-width:
        680px;

    margin:
        1rem
        0
        0;

    color:
        var(--text-muted);

    font-size:
        0.96rem;

    line-height:
        1.75;
}


.page-section-heading--center
.page-section-heading__description {
    margin-left:
        auto;

    margin-right:
        auto;
}



/* =========================================================
   158. GENERIC CONTENT BLOCK
   ========================================================= */

.page-content {
    color:
        var(--text-color);

    font-size:
        0.97rem;

    line-height:
        1.8;
}


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


.page-content > *:last-child {
    margin-bottom:
        0;
}


.page-content p {
    margin-bottom:
        1.1rem;
}


.page-content h2,
.page-content h3,
.page-content h4 {
    margin-top:
        2rem;

    margin-bottom:
        0.8rem;

    color:
        var(--navy-color);
}


.page-content h2 {
    font-size:
        1.85rem;
}


.page-content h3 {
    font-size:
        1.45rem;
}


.page-content h4 {
    font-size:
        1.15rem;
}


.page-content ul,
.page-content ol {
    margin-bottom:
        1.2rem;

    padding-left:
        1.35rem;
}


.page-content li {
    margin-bottom:
        0.45rem;
}


.page-content a {
    color:
        var(--primary-color);

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}


.page-content a:hover {
    color:
        var(--primary-hover);
}



/* =========================================================
   159. SHARED INFO CARD
   ========================================================= */

.page-card {
    position:
        relative;

    height:
        100%;

    padding:
        2rem;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.page-card:hover {
    border-color:
        var(--border-brand);

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-5px);
}



/* =========================================================
   160. PAGE CARD ICON
   ========================================================= */

.page-card__icon {
    width:
        54px;

    height:
        54px;

    margin-bottom:
        1.3rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--fluence-blue-rgb),
                0.08
            ),
            rgba(
                var(--fluence-cyan-rgb),
                0.12
            )
        );

    color:
        var(--primary-color);

    font-size:
        1.3rem;
}


.page-card__title {
    margin:
        0
        0
        0.75rem;

    color:
        var(--navy-color);

    font-size:
        1.1rem;

    font-weight:
        800;

    line-height:
        1.35;
}


.page-card__text {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.9rem;

    line-height:
        1.7;
}



/* =========================================================
   161. PAGE CARD LINK
   ========================================================= */

.page-card__link {
    margin-top:
        1.25rem;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--navy-color);

    font-size:
        0.84rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.page-card__link i {
    color:
        var(--primary-color);

    font-size:
        0.75rem;

    transition:
        transform var(--transition-fast);
}


.page-card__link:hover,
.page-card__link:focus {
    color:
        var(--primary-color);
}


.page-card__link:hover i,
.page-card__link:focus i {
    transform:
        translateX(4px);
}



/* =========================================================
   162. GENERIC PAGE GRID
   ========================================================= */

.page-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        1.5rem;
}


.page-grid--2 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.page-grid--4 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}



/* =========================================================
   163. SHARED EMPTY STATE
   ========================================================= */

.empty-state {
    max-width:
        720px;

    margin:
        0
        auto;

    padding:
        4rem
        2rem;

    border:
        1px dashed
        var(--border-color);

    border-radius:
        var(--radius-lg);

    background:
        var(--light-grey-color);

    text-align:
        center;
}


.empty-state__icon {
    width:
        72px;

    height:
        72px;

    margin:
        0
        auto
        1.3rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            var(--fluence-blue-rgb),
            0.08
        );

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--fluence-blue-rgb),
                0.08
            ),
            rgba(
                var(--fluence-cyan-rgb),
                0.12
            )
        );

    color:
        var(--primary-color);

    font-size:
        1.6rem;
}


.empty-state__title {
    margin:
        0
        0
        0.55rem;

    color:
        var(--navy-color);

    font-size:
        1.35rem;

    font-weight:
        800;
}


.empty-state__text {
    max-width:
        520px;

    margin:
        0
        auto;

    color:
        var(--text-muted);

    font-size:
        0.92rem;

    line-height:
        1.7;
}


.empty-state__action {
    margin-top:
        1.4rem;
}



/* =========================================================
   164. SHARED STATUS / NOTICE PANEL
   ========================================================= */

.page-notice {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.85rem;

    padding:
        1rem
        1.1rem;

    border:
        1px solid
        rgba(
            var(--fluence-blue-rgb),
            0.15
        );

    border-radius:
        var(--radius-md);

    background:
        rgba(
            var(--fluence-blue-rgb),
            0.055
        );

    color:
        var(--text-color);

    font-size:
        0.87rem;

    line-height:
        1.6;
}


.page-notice__icon {
    flex:
        0 0 auto;

    color:
        var(--primary-color);

    font-size:
        1rem;
}



/* =========================================================
   165. PAGE CTA
   ========================================================= */

.page-cta {
    position:
        relative;

    overflow:
        hidden;

    padding:
        70px
        0;

    background:
        linear-gradient(
            135deg,
            var(--primary-color) 0%,
            var(--accent-color) 65%,
            var(--secondary-accent) 100%
        );
}


.page-cta::after {
    content:
        "";

    position:
        absolute;

    top:
        -130px;

    right:
        -80px;

    width:
        310px;

    height:
        310px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


.page-cta
.container {
    position:
        relative;

    z-index:
        2;
}



/* =========================================================
   166. PAGE CTA CONTENT
   ========================================================= */

.page-cta__inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        3rem;
}


.page-cta__content {
    max-width:
        700px;
}


.page-cta__eyebrow {
    margin-bottom:
        0.45rem;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.page-cta__title {
    margin:
        0;

    color:
        var(--white);

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.8rem
        );

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;
}


.page-cta__text {
    margin:
        0.8rem
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        0.92rem;

    line-height:
        1.7;
}



/* =========================================================
   167. PAGE CTA BUTTON
   ========================================================= */

.page-cta__button {
    flex:
        0
        0 auto;

    min-height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    padding:
        0.8rem
        1.3rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.65
        );

    border-radius:
        var(--radius-sm);

    background:
        var(--white);

    color:
        var(--navy-color);

    font-size:
        0.86rem;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 10px 24px
        rgba(
            0,
            0,
            0,
            0.10
        );

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


.page-cta__button:hover,
.page-cta__button:focus {
    background:
        var(--navy-color);

    color:
        var(--white);

    box-shadow:
        0 14px 30px
        rgba(
            var(--navy-rgb),
            0.20
        );

    transform:
        translateY(-2px);
}



/* =========================================================
   168. INNER PAGE RESPONSIVE
   ========================================================= */

@media (
    max-width: 1199.98px
) {

    .inner-page__body,
    .page-section {
        padding:
            80px
            0;
    }


    .page-section--lg {
        padding:
            95px
            0;
    }


    .page-grid--4 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 991.98px
) {

    .inner-hero {
        padding:
            70px
            0
            65px;
    }


    .page-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-cta__inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1.6rem;
    }

}


@media (
    max-width: 767.98px
) {

    .inner-page__body,
    .page-section,
    .page-section--sm,
    .page-section--lg {
        padding:
            65px
            0;
    }


    .page-section-heading {
        margin-bottom:
            2.3rem;
    }


    .page-grid,
    .page-grid--2,
    .page-grid--4 {
        grid-template-columns:
            1fr;
    }


    .page-card {
        padding:
            1.7rem;
    }


    .page-cta {
        padding:
            60px
            0;
    }

}


@media (
    max-width: 575.98px
) {

    .inner-hero {
        padding:
            58px
            0
            54px;
    }


    .inner-hero__title {
        font-size:
            clamp(
                2.2rem,
                12vw,
                3rem
            );
    }


    .inner-hero__description {
        font-size:
            0.92rem;
    }


    .inner-breadcrumb {
        margin-bottom:
            1.2rem;
    }


    .inner-page__body,
    .page-section,
    .page-section--sm,
    .page-section--lg {
        padding:
            55px
            0;
    }


    .page-section-heading__title {
        font-size:
            clamp(
                1.85rem,
                10vw,
                2.5rem
            );
    }


    .empty-state {
        padding:
            3rem
            1.4rem;
    }


    .page-cta {
        padding:
            52px
            0;
    }


    .page-cta__button {
        width:
            100%;
    }

}




/* =========================================================
   169. PRODUCTS PAGE
   ========================================================= */

   .products-page {
    position:
        relative;

    background:
        var(--white);
}



/* =========================================================
   170. PRODUCTS PAGE CONTENT
   ========================================================= */

.products-page__content {
    padding:
        90px
        0;
}



/* =========================================================
   171. PRODUCTS INTRO
   ========================================================= */

.products-intro {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-bottom:
        3rem;

    padding-bottom:
        1.5rem;

    border-bottom:
        1px solid
        var(--border-soft);
}


.products-intro__content {
    max-width:
        720px;
}


.products-intro__eyebrow {
    margin:
        0
        0
        0.55rem;

    color:
        var(--primary-color);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.products-intro__title {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.15rem
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.03em;
}


.products-intro__description {
    max-width:
        650px;

    margin:
        0.9rem
        0
        0;

    color:
        var(--text-muted);

    font-size:
        0.94rem;

    line-height:
        1.75;
}



/* =========================================================
   172. PRODUCTS COUNT
   ========================================================= */

.products-count {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    padding:
        0.6rem
        0.85rem;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-pill);

    background:
        var(--light-blue-color);

    color:
        var(--navy-color);

    font-size:
        0.8rem;

    font-weight:
        700;
}


.products-count i {
    color:
        var(--primary-color);
}



/* =========================================================
   173. PRODUCT CATEGORY GROUP
   ========================================================= */

.product-category-group {
    position:
        relative;

    margin-bottom:
        5rem;
}


.product-category-group:last-child {
    margin-bottom:
        0;
}



/* =========================================================
   174. PRODUCT CATEGORY HEADER
   ========================================================= */

.product-category-group__header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        1.5rem;

    margin-bottom:
        2rem;

    padding-bottom:
        1rem;

    border-bottom:
        1px solid
        var(--border-soft);
}


.product-category-group__heading {
    min-width:
        0;
}


.product-category-group__eyebrow {
    margin:
        0
        0
        0.35rem;

    color:
        var(--primary-color);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.product-category-group__title {
    margin:
        0;

    color:
        var(--navy-color);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            1.65rem,
            2.5vw,
            2.35rem
        );

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        -0.025em;
}



/* =========================================================
   175. CATEGORY GROUP ACCENT
   ========================================================= */

.product-category-group__title::after {
    content:
        "";

    display:
        block;

    width:
        44px;

    height:
        3px;

    margin-top:
        0.65rem;

    border-radius:
        var(--radius-pill);

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--accent-color)
        );
}



/* =========================================================
   176. CATEGORY VIEW ALL LINK
   ========================================================= */

.product-category-group__link {
    flex:
        0
        0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--navy-color);

    font-size:
        0.82rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.product-category-group__link i {
    color:
        var(--primary-color);

    font-size:
        0.75rem;

    transition:
        transform var(--transition-fast);
}


.product-category-group__link:hover,
.product-category-group__link:focus {
    color:
        var(--primary-color);
}


.product-category-group__link:hover i,
.product-category-group__link:focus i {
    transform:
        translateX(4px);
}



/* =========================================================
   177. PRODUCTS GRID
   ========================================================= */

.products-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        1.5rem;
}



/* Existing legacy product card participates in grid */

.products-grid
.product-item {
    width:
        100%;

    height:
        100%;

    margin-bottom:
        0;

    display:
        flex;

    flex-direction:
        column;
}



/* =========================================================
   178. PRODUCT GRID IMAGE AREA
   ========================================================= */

.products-grid
.product-item figure {
    position:
        relative;

    width:
        100%;

    min-height:
        220px;

    margin:
        0
        0
        1.2rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


.products-grid
.product-item figure a {
    width:
        100%;

    min-height:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.products-grid
.product-item figure img {
    max-width:
        100%;

    max-height:
        200px;

    object-fit:
        contain;

    transition:
        transform var(--transition-normal);
}


.products-grid
.product-item:hover figure img {
    transform:
        scale(1.045);
}



/* =========================================================
   179. PRODUCT ITEM CONTENT IN LISTING
   ========================================================= */

.products-grid
.product-item h3 {
    margin-bottom:
        0.65rem;

    font-size:
        1.05rem;

    line-height:
        1.4;
}


.products-grid
.product-item h3 a {
    color:
        var(--navy-color);

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.products-grid
.product-item h3 a:hover,
.products-grid
.product-item h3 a:focus {
    color:
        var(--primary-color);
}



/* =========================================================
   180. PRODUCT CATEGORY LABEL
   ========================================================= */

.product-item__category {
    margin:
        0
        0
        0.5rem;

    color:
        var(--primary-color);

    font-size:
        0.69rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}



/* =========================================================
   181. PRODUCT SHORT DESCRIPTION
   ========================================================= */

.product-item__description {
    margin:
        0
        0
        1rem;

    color:
        var(--text-muted);

    font-size:
        0.84rem;

    line-height:
        1.65;
}



/* =========================================================
   182. PRODUCT ITEM FOOTER
   ========================================================= */

.product-item__footer {
    margin-top:
        auto;

    padding-top:
        1rem;

    border-top:
        1px solid
        var(--border-soft);
}



/* =========================================================
   183. PRODUCT DETAILS LINK
   ========================================================= */

.product-item__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.5rem;

    color:
        var(--navy-color);

    font-size:
        0.82rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.product-item__link i {
    color:
        var(--primary-color);

    font-size:
        0.72rem;

    transition:
        transform var(--transition-fast);
}


.product-item__link:hover,
.product-item__link:focus {
    color:
        var(--primary-color);
}


.product-item__link:hover i,
.product-item__link:focus i {
    transform:
        translateX(4px);
}



/* =========================================================
   184. PRODUCT NEW BADGE REFINEMENT
   ========================================================= */

.products-grid
.product-item.is-new::before {
    top:
        14px;

    left:
        14px;

    padding:
        0.4rem
        0.65rem;

    border-radius:
        var(--radius-pill);

    background:
        linear-gradient(
            135deg,
            var(--primary-color) 0%,
            var(--accent-color) 70%,
            var(--secondary-accent) 100%
        );

    color:
        var(--white);

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    box-shadow:
        0 6px 16px
        rgba(
            var(--fluence-blue-rgb),
            0.20
        );
}



/* =========================================================
   185. CATEGORY PRODUCT PAGE
   ========================================================= */

.category-products {
    position:
        relative;
}



/* =========================================================
   186. CATEGORY PRODUCT HEADER
   ========================================================= */

.category-products__header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-bottom:
        2.5rem;
}


.category-products__content {
    max-width:
        720px;
}


.category-products__label {
    margin:
        0
        0
        0.5rem;

    color:
        var(--primary-color);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.category-products__title {
    margin:
        0;

    color:
        var(--navy-color);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;
}


.category-products__description {
    max-width:
        640px;

    margin:
        0.85rem
        0
        0;

    color:
        var(--text-muted);

    font-size:
        0.92rem;

    line-height:
        1.7;
}



/* =========================================================
   187. BACK TO ALL PRODUCTS
   ========================================================= */

.category-products__back {
    flex:
        0
        0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--navy-color);

    font-size:
        0.82rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.category-products__back i {
    color:
        var(--primary-color);

    transition:
        transform var(--transition-fast);
}


.category-products__back:hover,
.category-products__back:focus {
    color:
        var(--primary-color);
}


.category-products__back:hover i,
.category-products__back:focus i {
    transform:
        translateX(-3px);
}



/* =========================================================
   188. PRODUCTS TOOLBAR
   ========================================================= */

.products-toolbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        2rem;

    padding:
        0.9rem
        1rem;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-md);

    background:
        var(--light-grey-color);
}


.products-toolbar__summary {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


.products-toolbar__summary strong {
    color:
        var(--navy-color);
}



/* =========================================================
   189. PRODUCT LIST EMPTY STATE
   ========================================================= */

.products-empty {
    padding:
        4rem
        2rem;

    border:
        1px dashed
        var(--border-color);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            180deg,
            var(--light-grey-color),
            var(--white)
        );

    text-align:
        center;
}


.products-empty__icon {
    width:
        70px;

    height:
        70px;

    margin:
        0
        auto
        1.25rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            var(--fluence-blue-rgb),
            0.08
        );

    color:
        var(--primary-color);

    font-size:
        1.6rem;
}


.products-empty__title {
    margin:
        0
        0
        0.5rem;

    color:
        var(--navy-color);

    font-size:
        1.3rem;

    font-weight:
        800;
}


.products-empty__text {
    max-width:
        520px;

    margin:
        0
        auto;

    color:
        var(--text-muted);

    font-size:
        0.9rem;

    line-height:
        1.7;
}



/* =========================================================
   190. EMPTY CATEGORY GROUP
   ========================================================= */

.product-category-group__empty {
    padding:
        1.5rem;

    border:
        1px dashed
        var(--border-color);

    border-radius:
        var(--radius-md);

    background:
        var(--light-grey-color);

    color:
        var(--text-muted);

    font-size:
        0.88rem;

    line-height:
        1.6;
}



/* =========================================================
   191. PRODUCTS RESPONSIVE — LARGE
   ========================================================= */

@media (
    max-width: 1199.98px
) {

    .products-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}



/* =========================================================
   192. PRODUCTS RESPONSIVE — TABLET
   ========================================================= */

@media (
    max-width: 991.98px
) {

    .products-page__content {
        padding:
            80px
            0;
    }


    .products-intro {
        align-items:
            flex-start;
    }


    .products-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .product-category-group {
        margin-bottom:
            4rem;
    }

}



/* =========================================================
   193. PRODUCTS RESPONSIVE — MOBILE
   ========================================================= */

@media (
    max-width: 767.98px
) {

    .products-page__content {
        padding:
            65px
            0;
    }


    .products-intro,
    .category-products__header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .product-category-group__header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.8rem;
    }


    .products-toolbar {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}



/* =========================================================
   194. PRODUCTS RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (
    max-width: 575.98px
) {

    .products-page__content {
        padding:
            55px
            0;
    }


    .products-grid {
        grid-template-columns:
            1fr;
    }


    .product-category-group {
        margin-bottom:
            3.5rem;
    }


    .product-category-group__header {
        margin-bottom:
            1.5rem;
    }


    .products-grid
    .product-item figure,
    .products-grid
    .product-item figure a {
        min-height:
            210px;
    }


    .products-grid
    .product-item figure img {
        max-height:
            190px;
    }


    .products-empty {
        padding:
            3rem
            1.4rem;
    }


    .products-count {
        width:
            fit-content;
    }

}








/* =========================================================
   ABOUT PAGE
   ========================================================= */

   .about-page {
    background: var(--white);
}


/* Image */

.about-page__image-wrap {
    position: relative;

    height: 100%;
    min-height: 500px;

    overflow: hidden;

    border-radius: var(--radius-lg);

    background: var(--light-grey-color);

    box-shadow: var(--shadow-sm);
}


.about-page__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Heading */

.about-page__heading {
    position: relative;

    padding-left: 1.75rem;

    border-left:
        5px solid
        var(--primary-color);
}


.about-page__eyebrow {
    margin-bottom: 0.5rem;

    color: var(--primary-color);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.about-page__title {
    margin: 0;

    color: var(--navy-color);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.2rem
        );

    font-weight: 800;

    line-height: 1.1;

    text-transform: uppercase;
}


/* Intro */

.about-page__lead {
    color: var(--text-color);

    font-size:
        clamp(
            1.05rem,
            1.5vw,
            1.25rem
        );

    font-weight: 600;

    line-height: 1.65;
}


/* Tabs Box */

.about-page__tabs {
    padding: 1.5rem;

    border:
        1px solid
        var(--border-soft);

    border-radius: var(--radius-md);

    background: var(--light-grey-color);

    box-shadow: var(--shadow-xs);
}


/* Tab Navigation */

.about-page__nav {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 0.65rem;
}


.about-page__nav .nav-item {
    width: 100%;
}


.about-page__nav .nav-link {
    width: 100%;

    min-height: 48px;

    padding:
        0.75rem
        1rem;

    border:
        1px solid
        var(--border-color);

    border-radius: var(--radius-sm);

    background: var(--white);

    color: var(--navy-color);

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


.about-page__nav .nav-link:hover {
    border-color: var(--primary-color);

    color: var(--primary-color);
}


.about-page__nav .nav-link.active {
    border-color: var(--primary-color);

    background: var(--primary-color);

    color: var(--white);

    box-shadow:
        0 6px 16px
        rgba(
            var(--fluence-blue-rgb),
            0.16
        );
}


/* Tab Content */

.about-page__tab-content {
    color: var(--text-color);
}


.about-page__tab-content p {
    margin-bottom: 1rem;

    font-size: 0.94rem;

    line-height: 1.75;
}


.about-page__tab-content p:last-of-type {
    margin-bottom: 0;
}


/* Actions */

.about-page__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 1.5rem;
}


/* =========================================================
   ABOUT RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .about-page__image-wrap {
        min-height: 420px;
    }

}


@media (max-width: 767.98px) {

    .about-page__heading {
        padding-left: 1.25rem;

        border-left-width: 4px;
    }


    .about-page__tabs {
        padding: 1.25rem;
    }

}


@media (max-width: 575.98px) {

    .about-page__image-wrap {
        min-height: 330px;
    }


    .about-page__title {
        font-size: 1.9rem;
    }


    .about-page__nav {
        grid-template-columns: 1fr;
    }


    .about-page__actions {
        flex-direction: column;
    }


    .about-page__actions .btn {
        width: 100%;
    }

}





/* =========================================================
   SOLUTIONS LIST PAGE
   ========================================================= */

.solutions-page {
    background: var(--white);
}


/* =========================================================
   SOLUTIONS GRID
   ========================================================= */

.solutions-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 1.5rem;
}


/* =========================================================
   SOLUTION CARD
   ========================================================= */

.solution-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-lg);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}


.solution-card:hover {
    border-color:
        var(--border-brand);

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-5px);
}


/* =========================================================
   SOLUTION IMAGE
   ========================================================= */

.solution-card__image {
    position: relative;

    height: 230px;

    margin: 0;

    overflow: hidden;

    background:
        var(--light-grey-color);
}


.solution-card__image a {
    display: flex;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
}


.solution-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--transition-normal);
}


.solution-card:hover
.solution-card__image img {
    transform:
        scale(1.045);
}


/* =========================================================
   SOLUTION BODY
   ========================================================= */

.solution-card__body {
    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    padding: 1.25rem;
}


/* Category */

.solution-card__category {
    margin-bottom: 0.45rem;

    color:
        var(--primary-color);

    font-size: 0.72rem;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


/* Title */

.solution-card__title {
    margin:
        0
        0
        0.65rem;

    color:
        var(--navy-color);

    font-size:
        1.05rem;

    font-weight:
        800;

    line-height:
        1.4;
}


.solution-card__title a {
    color:
        inherit;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.solution-card__title a:hover,
.solution-card__title a:focus {
    color:
        var(--primary-color);
}


/* Summary */

.solution-card__summary {
    margin:
        0
        0
        1rem;

    color:
        var(--text-muted);

    font-size:
        0.88rem;

    line-height:
        1.65;
}


/* Footer */

.solution-card__footer {
    margin-top:
        auto;

    padding-top:
        0.3rem;
}


/* =========================================================
   SOLUTION LINK
   ========================================================= */

.solution-card__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        var(--primary-color);

    font-size:
        0.86rem;

    font-weight:
        800;

    line-height:
        1.4;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.solution-card__link i {
    font-size:
        0.78rem;

    transition:
        transform var(--transition-fast);
}


.solution-card__link:hover,
.solution-card__link:focus {
    color:
        var(--primary-hover);
}


.solution-card__link:hover i,
.solution-card__link:focus i {
    transform:
        translateX(4px);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.solutions-empty {
    grid-column:
        1 / -1;

    padding:
        4rem
        2rem;

    border:
        1px dashed
        var(--border-color);

    border-radius:
        var(--radius-lg);

    background:
        var(--light-grey-color);

    text-align:
        center;
}


.solutions-empty__icon {
    width:
        64px;

    height:
        64px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        1rem;

    border-radius:
        50%;

    background:
        rgba(
            var(--fluence-blue-rgb),
            0.08
        );

    color:
        var(--primary-color);

    font-size:
        1.5rem;
}


.solutions-empty__title {
    margin-bottom:
        0.5rem;

    color:
        var(--navy-color);

    font-size:
        1.25rem;
}


.solutions-empty__text {
    margin:
        0;

    color:
        var(--text-muted);
}


/* =========================================================
   SOLUTIONS RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

    .solutions-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 991.98px) {

    .solutions-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 767.98px) {

    .solutions-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            1.25rem;
    }


    .solution-card__image {
        height:
            210px;
    }

}


@media (max-width: 575.98px) {

    .solutions-grid {
        grid-template-columns:
            1fr;
    }


    .solution-card__image {
        height:
            235px;
    }

}



















/* =========================================================
   SOLUTIONS PAGE
   ========================================================= */

   .solutions-page {
    padding: 4rem 0 5rem;
    background: var(--white);
}


.solutions-page__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);
}


.solutions-page__header h1 {
    margin: 0;

    color: var(--navy-color);

    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
}


/* =========================================================
   SOLUTION CARD
   ========================================================= */

.solution-item {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);

    background: var(--white);

    box-shadow: var(--shadow-xs);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.solution-item:hover {
    transform: translateY(-4px);

    border-color: var(--border-brand);

    box-shadow: var(--shadow-md);
}


/* Image */

.solution-item__image {
    display: block;

    width: 100%;
    height: 260px;

    overflow: hidden;

    background: var(--light-grey-color);
}


.solution-item__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--transition-normal);
}


.solution-item:hover
.solution-item__image img {
    transform: scale(1.035);
}


/* Body */

.solution-item__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 1.5rem;
}


.solution-item__category {
    margin-bottom: 0.5rem;

    color: var(--primary-color);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.solution-item__title {
    margin-bottom: 0.75rem;

    font-size: 1.2rem;
    line-height: 1.4;
}


.solution-item__title a {
    color: var(--navy-color);

    text-decoration: none;
}


.solution-item__title a:hover {
    color: var(--primary-color);
}


.solution-item__summary {
    margin-bottom: 1.25rem;

    color: var(--text-muted);

    font-size: 0.92rem;
    line-height: 1.7;
}


.solution-item__footer {
    margin-top: auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .solutions-page {
        padding-top: 3rem;
    }

}


@media (max-width: 575.98px) {

    .solutions-page {
        padding:
            2.5rem
            0
            3.5rem;
    }


    .solutions-page__header {
        margin-bottom: 1.75rem;
    }


    .solution-item__image {
        height: 220px;
    }


    .solution-item__body {
        padding: 1.25rem;
    }

}




.solutions-page-title {
  position: relative;

  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
}


.solutions-page-title h1 {
  margin: 0;

  color: var(--navy-color);

  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
}


.solutions-page-title::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 54px;
  height: 3px;

  border-radius: var(--radius-pill);

  background:
      linear-gradient(
          90deg,
          var(--primary-color),
          var(--accent-color)
      );
}


.solutions-page {
  padding: 3rem 0 5rem;
  background: var(--white);
}






/* =========================================================
   SOLUTION DETAIL PAGE
   ========================================================= */

   .solution-detail-page {
    padding:
        4rem
        0
        5rem;

    background:
        var(--white);
}


/* Image */

.solution-detail-page__image {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        460px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        var(--light-grey-color);
}


.solution-detail-page__image img {
    display:
        block;

    width:
        100%;

    max-height:
        520px;

    object-fit:
        contain;
}


/* Info */

.solution-detail-page__info {
    padding-top:
        0.5rem;
}


.solution-detail-page__category {
    margin-bottom:
        0.75rem;

    color:
        var(--primary-color);

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.solution-detail-page__title {
    margin-bottom:
        1.5rem;

    color:
        var(--navy-color);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.4rem
        );

    font-weight:
        800;

    line-height:
        1.15;
}


/* Content */

.solution-detail-page__content {
    color:
        var(--text-color);

    font-size:
        1rem;

    line-height:
        1.8;
}


.solution-detail-page__content p {
    margin-bottom:
        1rem;
}


.solution-detail-page__content p:last-child {
    margin-bottom:
        0;
}


/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

.solution-related-products {
    margin-top:
        4.5rem;

    padding-top:
        2rem;

    border-top:
        1px solid
        var(--border-color);
}


.solution-related-products__header {
    margin-bottom:
        1.75rem;
}


.solution-related-products__header h2 {
    margin:
        0;

    color:
        var(--navy-color);

    font-size:
        1.75rem;

    font-weight:
        800;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .solution-detail-page {
        padding-top:
            3rem;
    }


    .solution-detail-page__image {
        min-height:
            380px;
    }


    .solution-detail-page__title {
        font-size:
            2.4rem;
    }

}


@media (max-width: 575.98px) {

    .solution-detail-page {
        padding:
            2.5rem
            0
            3.5rem;
    }


    .solution-detail-page__image {
        min-height:
            300px;

        border-radius:
            var(--radius-md);
    }


    .solution-detail-page__title {
        font-size:
            2rem;
    }


    .solution-related-products {
        margin-top:
            3rem;
    }

}








/* =========================================================
   CONTACT PAGE
   ========================================================= */

   .contact-page__heading {
    max-width: 700px;

    padding-left: 1.75rem;

    border-left:
        5px solid
        var(--primary-color);
}


.contact-page__form .form-control {
    min-height: 55px;
}


.contact-page__form textarea.form-control {
    min-height: 160px;
}


.field-error {
    margin-bottom: 0.35rem;

    color: #dc3545;

    font-size: 0.875rem;
}


.contact-page__form .form-control.is-invalid {
    border:
        1px solid
        #dc3545 !important;
}


.contact-help-text {
    font-size: 0.85rem;
}


/* Contact Information */

.contact-page__info {
    margin-bottom: 3rem;
}


.contact-page__info h6 {
    color: var(--navy-color);

    font-weight: 800;
}


.contact-page__info a {
    transition:
        color var(--transition-fast);
}


.contact-page__info a:hover {
    color:
        var(--primary-color) !important;
}


/* Map */

.contact-page__map {
    overflow: hidden;

    border-radius:
        var(--radius-md);
}


.contact-page__map iframe {
    display: block;

    width: 100%;
    height: 260px;

    border: 0;
}


/* Responsive */

@media (max-width: 767.98px) {

    .contact-page__heading {
        padding-left: 1.25rem;

        border-left-width: 4px;
    }


    .contact-page__info {
        padding: 2rem !important;
    }

}


@media (max-width: 575.98px) {

    .contact-page__info {
        padding: 1.5rem !important;
    }

}






/* =========================================================
   DOCUMENTS PAGE
   ========================================================= */

.documents-page {
    background: var(--white);
}


/* =========================================================
   DOCUMENT GROUP
   ========================================================= */

.documents-group__title {
    color: var(--navy-color);

    font-size: 1.35rem;
    font-weight: 800;
}


/* =========================================================
   PRODUCT DOCUMENT CARD
   ========================================================= */

.documents-product-card {
    overflow: hidden;

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-xs);
}


.documents-product-card .card-header {
    padding:
        1rem
        1.25rem;

    border-bottom:
        1px solid
        var(--border-color);
}


.documents-product-card__heading {
    min-width: 0;

    color:
        var(--navy-color);
}


.documents-product-card__heading strong {
    font-family:
        var(--heading-font);

    font-weight:
        800;
}


.documents-product-card .card-body {
    padding:
        1.25rem;
}


/* =========================================================
   DOCUMENT LIST
   ========================================================= */

.documents-list__item {
    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    padding:
        0.8rem
        0;

    border-bottom:
        1px solid
        var(--border-soft);
}


.documents-list__item:first-child {
    padding-top: 0;
}


.documents-list__item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.documents-list__item > i {
    flex: 0 0 auto;

    margin-top: 0.25rem;
}


.documents-list__content {
    min-width: 0;

    flex: 1;
}


.documents-list__link {
    color:
        var(--navy-color);

    font-weight:
        700;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

    transition:
        color var(--transition-fast);
}


a.documents-list__link:hover,
a.documents-list__link:focus {
    color:
        var(--primary-color);
}


/* Metadata */

.documents-list__meta {
    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-top:
        0.45rem;
}


.documents-list__meta .badge {
    font-size:
        0.7rem;

    font-weight:
        700;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 575.98px) {

    .documents-product-card .card-header {
        align-items:
            flex-start !important;

        flex-direction:
            column;
    }


    .documents-product-card .card-header .btn {
        width:
            100%;
    }

}










/* =========================================================
   SEARCH PAGE
   ========================================================= */

   .search-page {
    padding: 3.5rem 0 5rem;

    background:
        linear-gradient(
            180deg,
            #f8fdff 0,
            #ffffff 360px
        );
}


/* =========================================================
   SEARCH HERO
   ========================================================= */

.search-hero {
    position: relative;

    overflow: hidden;

    margin-bottom: 3.5rem;

    padding: 3.25rem;

    border:
        1px solid
        rgba(10, 137, 233, 0.12);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f1faff 0%,
            #f3fdff 55%,
            #f8ffff 100%
        );

    box-shadow:
        0 18px 55px
        rgba(10, 137, 233, 0.07);
}


/* decorative glow */

.search-hero::before {
    content: "";

    position: absolute;

    top: -120px;
    right: -80px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(82, 232, 230, 0.16);

    filter: blur(10px);

    pointer-events: none;
}


.search-hero::after {
    content: "";

    position: absolute;

    right: 140px;
    bottom: -150px;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background:
        rgba(10, 137, 233, 0.08);

    pointer-events: none;
}


.search-hero__content,
.search-hero__form {
    position: relative;

    z-index: 1;
}


/* eyebrow */

.search-hero__eyebrow {
    display: inline-block;

    margin-bottom: 0.7rem;

    color:
        var(--fluence-blue);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.search-hero h1 {
    max-width: 720px;

    margin: 0 0 0.8rem;

    color: #263746;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight: 800;

    line-height: 1.12;
}


.search-hero p {
    max-width: 680px;

    margin: 0;

    color: #687985;

    font-size: 1rem;

    line-height: 1.7;
}


.search-hero p strong {
    color:
        var(--fluence-blue);
}


/* =========================================================
   SEARCH INPUT
   ========================================================= */

.search-hero__form {
    max-width: 800px;

    margin-top: 2rem;
}


.search-hero__input {
    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding:
        0.45rem
        0.45rem
        0.45rem
        1.2rem;

    border:
        1px solid
        rgba(10, 137, 233, 0.15);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(10, 137, 233, 0.08);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.search-hero__input:focus-within {
    border-color:
        rgba(10, 137, 233, 0.5);

    box-shadow:
        0 12px 35px
        rgba(10, 137, 233, 0.13);
}


.search-hero__input > i {
    flex: 0 0 auto;

    color:
        var(--fluence-blue);

    font-size: 1.1rem;
}


.search-hero__input input {
    min-width: 0;

    flex: 1;

    padding: 0.8rem 0;

    border: 0;

    outline: 0;

    color: #263746;

    background: transparent;

    font-size: 0.95rem;
}


.search-hero__input input::placeholder {
    color: #9aa8b2;
}


.search-hero__input button {
    flex: 0 0 auto;

    min-height: 48px;

    padding: 0 1.7rem;

    border:
        1px solid
        var(--fluence-blue);

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--fluence-blue),
            var(--fluence-cyan)
        );

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.search-hero__input button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(10, 137, 233, 0.2);
}


/* =========================================================
   RESULT SECTION
   ========================================================= */

.search-result-section {
    margin-bottom: 4.5rem;
}


.search-result-section__header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.75rem;

    padding-bottom: 1rem;

    border-bottom:
        1px solid
        #e5eef3;
}


.search-result-section__header h2 {
    position: relative;

    margin: 0;

    padding-left: 16px;

    color: #263746;

    font-size: 1.45rem;

    font-weight: 800;
}


.search-result-section__header h2::before {
    content: "";

    position: absolute;

    top: 3px;
    bottom: 3px;
    left: 0;

    width: 4px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            var(--fluence-blue),
            var(--fluence-cyan)
        );
}


.search-result-section__header span {
    padding:
        0.35rem
        0.7rem;

    border-radius: 999px;

    color:
        var(--fluence-blue);

    background:
        #edf8ff;

    font-size: 0.78rem;

    font-weight: 700;
}


/* =========================================================
   CATEGORY LINKS
   ========================================================= */

.search-category-links {
    display: flex;

    flex-wrap: wrap;

    gap: 0.7rem;
}


.search-category-links .btn {
    padding:
        0.65rem
        1rem;

    border-color:
        #d6e9f3;

    border-radius: 999px;

    color: #47606f;

    background: #ffffff;

    font-size: 0.86rem;

    font-weight: 700;
}


.search-category-links .btn:hover {
    border-color:
        var(--fluence-blue);

    color:
        var(--fluence-blue);

    background:
        #f2faff;
}


/* =========================================================
   PRODUCT / SOLUTION CARD ENHANCEMENT
   ========================================================= */

.search-page .product-item {
    border:
        1px solid
        #e1edf3;

    background: #ffffff;

    box-shadow:
        0 8px 28px
        rgba(30, 83, 110, 0.06);
}


.search-page .product-item:hover {
    border-color:
        rgba(10, 137, 233, 0.25);

    box-shadow:
        0 16px 40px
        rgba(10, 137, 233, 0.1);
}


.search-page .product-item figure {
    background:
        linear-gradient(
            135deg,
            #f8fcfe,
            #f0faff
        );
}


.search-page .product-item h3 a {
    color: #263746;
}


.search-page .product-item h3 a:hover {
    color:
        var(--fluence-blue);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.search-empty-state {
    max-width: 680px;

    margin:
        1rem
        auto
        3rem;

    padding:
        3.5rem
        2rem;

    text-align: center;

    border:
        1px solid
        #dceef6;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #f7fcff,
            #f3fdff
        );
}


.search-empty-state__icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;
    height: 72px;

    margin:
        0
        auto
        1.25rem;

    border:
        1px solid
        #d9eef8;

    border-radius: 50%;

    color:
        var(--fluence-blue);

    background: #ffffff;

    font-size: 1.8rem;

    box-shadow:
        0 10px 28px
        rgba(10, 137, 233, 0.08);
}


.search-empty-state h2 {
    margin-bottom: 0.65rem;

    color: #263746;

    font-size: 1.45rem;

    font-weight: 800;
}


.search-empty-state p {
    max-width: 520px;

    margin:
        0
        auto
        1.5rem;

    color: #6f7f8a;

    line-height: 1.7;
}


/* =========================================================
   NOTICE
   ========================================================= */

.search-page__notice {
    display: flex;

    align-items: flex-start;

    gap: 1rem;

    max-width: 800px;

    padding: 1.4rem;

    border:
        1px solid
        #cfeaf7;

    border-radius: 16px;

    background: #f2fbff;
}


.search-page__notice-icon {
    color:
        var(--fluence-blue);

    font-size: 1.3rem;
}


.search-page__notice h2 {
    margin:
        0
        0
        0.3rem;

    color: #263746;

    font-size: 1.05rem;

    font-weight: 800;
}


.search-page__notice p {
    margin: 0;

    color: #6c7c87;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.search-page .pagination {
    gap: 0.35rem;
}


.search-page .page-link {
    min-width: 40px;

    border:
        1px solid
        #dceaf1;

    border-radius:
        9px !important;

    color:
        var(--fluence-blue);

    background:
        #ffffff;

    text-align: center;
}


.search-page .page-link:hover {
    border-color:
        var(--fluence-blue);

    background:
        #f2faff;
}


.search-page .page-item.active .page-link {
    border-color:
        var(--fluence-blue);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--fluence-blue),
            var(--fluence-cyan)
        );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {

    .search-page {
        padding:
            2rem
            0
            4rem;
    }


    .search-hero {
        margin-bottom:
            2.5rem;

        padding:
            2rem
            1.25rem;

        border-radius:
            20px;
    }


    .search-hero__input {
        align-items:
            stretch;

        flex-wrap:
            wrap;

        padding:
            0.7rem;
    }


    .search-hero__input > i {
        display: none;
    }


    .search-hero__input input {
        width: 100%;

        flex:
            0
            0
            100%;

        padding:
            0.75rem;
    }


    .search-hero__input button {
        width: 100%;
    }

}


@media (max-width: 575.98px) {

    .search-result-section__header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}





/* =========================================================
   HOME LIGHT SECTION HEADINGS
   ========================================================= */

   .home-light-heading {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2.5rem;

    overflow: hidden;

    margin-bottom: 3rem;

    padding:
        2.6rem
        3rem;

    border:
        1px solid
        rgba(10, 137, 233, 0.12);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f1faff 0%,
            #f4fdff 55%,
            #f9ffff 100%
        );

    box-shadow:
        0 18px 55px
        rgba(10, 137, 233, 0.06);
}


/* decorative aqua circle */

.home-light-heading::before {
    content: "";

    position: absolute;

    top: -90px;
    right: -70px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        rgba(82, 232, 230, 0.13);

    pointer-events: none;
}


/* second subtle shape */

.home-light-heading::after {
    content: "";

    position: absolute;

    right: 110px;
    bottom: -130px;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        rgba(10, 137, 233, 0.06);

    pointer-events: none;
}


.home-light-heading__content,
.home-light-heading__action {
    position: relative;

    z-index: 1;
}


.home-light-heading__content {
    max-width: 720px;
}


.home-light-heading__eyebrow {
    display: inline-block;

    margin-bottom: 0.65rem;

    color:
        var(--fluence-blue);

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.home-light-heading h2 {
    margin:
        0
        0
        0.8rem;

    color: #263746;

    font-size:
        clamp(
            2rem,
            3.7vw,
            2.75rem
        );

    font-weight: 800;

    line-height: 1.12;
}


.home-light-heading h2 span {
    color:
        var(--fluence-blue);
}


.home-light-heading p {
    max-width: 680px;

    margin: 0;

    color: #687985;

    font-size: 0.98rem;

    line-height: 1.75;
}


/* action */

.home-light-heading__action {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 0.7rem;

    padding:
        0.85rem
        1.25rem;

    border:
        1px solid
        rgba(10, 137, 233, 0.18);

    border-radius: 12px;

    color:
        var(--fluence-blue);

    background:
        #ffffff;

    font-size: 0.88rem;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 8px 24px
        rgba(10, 137, 233, 0.06);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.home-light-heading__action:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--fluence-blue);

    color:
        var(--fluence-blue);

    box-shadow:
        0 12px 28px
        rgba(10, 137, 233, 0.11);
}


.home-light-heading__action i {
    transition:
        transform 0.2s ease;
}


.home-light-heading__action:hover i {
    transform:
        translateX(4px);
}


/* centered version */

.home-light-heading--center {
    justify-content: center;

    text-align: center;
}


.home-light-heading--center
.home-light-heading__content {
    margin:
        0 auto;
}


/* =========================================================
   LIGHTER HOME SECTIONS
   ========================================================= */

.home-catalog-section {
    background:
        #ffffff;
}


.home-catalog-section--solutions {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fcff 50%,
            #ffffff 100%
        );
}


.home-products-showcase {
    background:
        #ffffff;
}


.home-products-showcase--new {
    background:
        linear-gradient(
            180deg,
            #f7fcff 0%,
            #ffffff 100%
        );
}


.home-advantages {
    background:
        #ffffff;
}


/* =========================================================
   ADVANTAGE CARDS - LIGHT STYLE
   ========================================================= */

.home-advantage-card {
    height: 100%;

    padding:
        2rem
        1.5rem;

    border:
        1px solid
        #e1edf3;

    border-radius: 20px;

    background:
        #ffffff;

    box-shadow:
        0 10px 32px
        rgba(30, 83, 110, 0.055);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.home-advantage-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(10, 137, 233, 0.24);

    box-shadow:
        0 18px 42px
        rgba(10, 137, 233, 0.09);
}


.home-advantage-card__icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 1.3rem;

    border:
        1px solid
        #d9eef8;

    border-radius: 16px;

    color:
        var(--fluence-blue);

    background:
        linear-gradient(
            135deg,
            #eef9ff,
            #f2fdff
        );

    font-size: 1.35rem;
}


.home-advantage-card h3 {
    color: #263746;
}


.home-advantage-card p {
    color: #6a7b87;
}


.home-advantage-card a {
    color:
        var(--fluence-blue);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .home-light-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 1.5rem;

        padding:
            2.25rem;
    }

}


@media (max-width: 575.98px) {

    .home-light-heading {
        margin-bottom:
            2rem;

        padding:
            1.8rem
            1.25rem;

        border-radius:
            20px;
    }


    .home-light-heading__action {
        width: 100%;

        justify-content: center;
    }

}


/* =========================================================
   HOME CONTACT - LIGHT FLUENCE STYLE
   ========================================================= */

   .home-contact {
    position: relative;
    overflow: hidden;

    padding: 6rem 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fdff 50%,
            #ffffff 100%
        );
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.home-contact__panel {
    position: relative;
    overflow: hidden;

    border:
        1px solid
        rgba(10, 137, 233, 0.12);

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 20px 60px
        rgba(10, 137, 233, 0.07);
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.home-contact__info {
    position: relative;
    z-index: 1;

    height: 100%;

    padding:
        3.5rem
        3rem;

    background:
        linear-gradient(
            145deg,
            #eff9ff 0%,
            #f2fcff 55%,
            #f8ffff 100%
        );
}


/* decorative glow */

.home-contact__info::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -90px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        rgba(82, 232, 230, 0.15);

    pointer-events: none;
}


.home-contact__info::after {
    content: "";

    position: absolute;

    right: 80px;
    bottom: -150px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        rgba(10, 137, 233, 0.06);

    pointer-events: none;
}


.home-contact__info > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.home-contact__eyebrow {
    margin:
        0
        0
        0.75rem;

    color:
        var(--fluence-blue);

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.home-contact__info h2 {
    max-width: 460px;

    margin:
        0
        0
        1rem;

    color: #263746;

    font-size:
        clamp(
            2rem,
            3.5vw,
            2.75rem
        );

    font-weight: 800;

    line-height: 1.12;
}


.home-contact__info h2 span {
    display: block;

    color:
        var(--fluence-blue);
}


/* =========================================================
   INTRO
   ========================================================= */

.home-contact__intro {
    max-width: 500px;

    margin:
        0
        0
        2.25rem;

    color: #687985;

    font-size: 0.95rem;

    line-height: 1.75;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.home-contact__details {
    display: grid;

    gap: 0.8rem;

    margin-top: 2rem;
}


.home-contact__details-label {
    margin:
        0
        0
        0.25rem;

    color: #81909c;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


/* individual contact item */

.home-contact__detail {
    display: flex;

    align-items: center;

    gap: 1rem;

    padding:
        0.95rem
        1rem;

    border:
        1px solid
        rgba(10, 137, 233, 0.10);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.72);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.home-contact__detail:hover {
    transform:
        translateX(3px);

    border-color:
        rgba(10, 137, 233, 0.25);

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(10, 137, 233, 0.07);
}


/* icon */

.home-contact__detail-icon {
    display: flex;

    flex:
        0
        0
        46px;

    align-items: center;

    justify-content: center;

    width: 46px;
    height: 46px;

    border:
        1px solid
        #d9eef8;

    border-radius: 13px;

    color:
        var(--fluence-blue);

    background:
        linear-gradient(
            135deg,
            #edf8ff,
            #f2fdff
        );

    font-size: 1rem;
}


.home-contact__detail strong {
    display: block;

    margin-bottom: 0.2rem;

    color: #263746;

    font-size: 0.82rem;

    font-weight: 800;
}


.home-contact__detail p {
    margin: 0;

    color: #6b7c88;

    font-size: 0.86rem;

    line-height: 1.5;
}


.home-contact__detail a {
    color: #5f7180;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.home-contact__detail a:hover {
    color:
        var(--fluence-blue);
}


/* =========================================================
   BUSINESS HOURS
   ========================================================= */

.home-contact__hours-btn {
    padding: 0;

    border: 0;

    color: #5f7180;

    background: transparent;

    font-size: 0.86rem;

    text-align: left;
}


.home-contact__hours-btn:hover,
.home-contact__hours-btn:focus {
    color:
        var(--fluence-blue);

    background: transparent;

    box-shadow: none;
}


.home-contact__info .dropdown-menu {
    padding: 0.5rem;

    border:
        1px solid
        #dcecf4;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 12px 35px
        rgba(10, 137, 233, 0.10);
}


.home-contact__info .dropdown-item {
    padding:
        0.5rem
        0.75rem;

    border-radius: 8px;

    color: #5f7180;

    font-size: 0.82rem;
}


/* =========================================================
   CONTACT PAGE LINK
   ========================================================= */

.home-contact__full-contact-link {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    margin-top: 1.75rem;

    color:
        var(--fluence-blue);

    font-size: 0.88rem;

    font-weight: 800;

    text-decoration: none;
}


.home-contact__full-contact-link i {
    transition:
        transform 0.2s ease;
}


.home-contact__full-contact-link:hover {
    color:
        var(--fluence-blue);
}


.home-contact__full-contact-link:hover i {
    transform:
        translateX(5px);
}


/* =========================================================
   RIGHT FORM PANEL
   ========================================================= */

.home-contact__form-panel {
    height: 100%;

    padding:
        3.5rem
        3rem;

    background: #ffffff;
}


/* =========================================================
   FORM HEADING
   ========================================================= */

.home-contact__form-heading {
    margin-bottom: 2rem;
}


.home-contact__form-heading p {
    margin:
        0
        0
        0.5rem;

    color:
        var(--fluence-blue);

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.home-contact__form-heading h3 {
    margin: 0;

    color: #263746;

    font-size: 1.75rem;

    font-weight: 800;
}


/* =========================================================
   FORM LABELS
   ========================================================= */

.home-contact-form .form-label {
    margin-bottom: 0.5rem;

    color: #40515e;

    font-size: 0.82rem;

    font-weight: 700;
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.home-contact-form .form-control {
    min-height: 52px;

    padding:
        0.8rem
        1rem;

    border:
        1px solid
        #dceaf1;

    border-radius: 12px;

    color: #263746;

    background: #fbfdfe;

    font-size: 0.9rem;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.home-contact-form textarea.form-control {
    min-height: 150px;

    resize: vertical;
}


.home-contact-form .form-control::placeholder {
    color: #a0adb6;
}


.home-contact-form .form-control:hover {
    border-color:
        #c9e2ed;

    background: #ffffff;
}


.home-contact-form .form-control:focus {
    border-color:
        rgba(10, 137, 233, 0.55);

    background: #ffffff;

    box-shadow:
        0 0 0 0.2rem
        rgba(10, 137, 233, 0.09);
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.home-contact__submit {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.65rem;

    min-height: 50px;

    padding:
        0.8rem
        1.5rem;

    border:
        1px solid
        var(--fluence-blue);

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--fluence-blue) 0%,
            var(--fluence-cyan) 100%
        );

    font-size: 0.9rem;

    font-weight: 800;

    box-shadow:
        0 8px 22px
        rgba(10, 137, 233, 0.16);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.home-contact__submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(10, 137, 233, 0.22);
}


.home-contact__submit i {
    font-size: 0.85rem;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.home-contact-field-error {
    margin-bottom: 0.4rem;

    color: #c0392b;

    font-size: 0.78rem;
}


.home-contact-form .form-control.is-invalid {
    border-color: #dc6b60;

    background-image: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .home-contact {
        padding:
            4.5rem
            0;
    }


    .home-contact__info,
    .home-contact__form-panel {
        padding:
            2.75rem
            2.25rem;
    }

}


@media (max-width: 575.98px) {

    .home-contact {
        padding:
            3.5rem
            0;
    }


    .home-contact__panel {
        border-radius:
            20px;
    }


    .home-contact__info,
    .home-contact__form-panel {
        padding:
            2rem
            1.25rem;
    }


    .home-contact__info h2 {
        font-size:
            2rem;
    }


    .home-contact__detail {
        align-items:
            flex-start;
    }


    .home-contact__submit {
        width: 100%;
    }

}





/* =========================================================
   HOME V2
   PART 1
========================================================= */


/* =========================================================
   HERO
========================================================= */

.home-v2-hero {
  position: relative;
  overflow: hidden;
}


.home-v2-hero__carousel {
  position: relative;
  min-height: 680px;
}


.home-v2-hero .carousel-inner,
.home-v2-hero .carousel-item {
  min-height: 680px;
}


.home-v2-hero__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.home-v2-hero__overlay {
  position: absolute;
  inset: 0;

  background:
      linear-gradient(
          90deg,
          rgba(7, 100, 170, 0.78) 0%,
          rgba(10, 137, 233, 0.55) 38%,
          rgba(46, 201, 229, 0.20) 72%,
          rgba(82, 232, 230, 0.05) 100%
      );
}


.home-v2-hero__content {
  position: absolute;
  z-index: 5;

  inset: 0;

  display: flex;
  align-items: center;
}


.home-v2-hero__eyebrow {
  display: inline-flex;

  margin-bottom: 1rem;

  padding:
      0.45rem
      0.8rem;

  border:
      1px solid
      rgba(255, 255, 255, 0.32);

  border-radius: 999px;

  color: #ffffff;

  background:
      rgba(255, 255, 255, 0.10);

  backdrop-filter:
      blur(8px);

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.home-v2-hero h1 {
  max-width: 800px;

  margin:
      0
      0
      1.4rem;

  color: #ffffff;

  font-size:
      clamp(
          2.8rem,
          5vw,
          4.8rem
      );

  font-weight: 800;

  line-height: 1.02;

  letter-spacing:
      -0.035em;
}


.home-v2-hero h1 span {
  display: block;

  color: #bff8ff;
}


.home-v2-hero__description {
  max-width: 680px;

  margin:
      0
      0
      2rem;

  color:
      rgba(255, 255, 255, 0.90);

  font-size: 1.05rem;

  line-height: 1.75;
}


.home-v2-hero__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 0.85rem;
}


/* HERO BUTTONS */

.home-v2-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.65rem;

  min-height: 52px;

  padding:
      0.8rem
      1.4rem;

  border-radius: 12px;

  font-size: 0.88rem;

  font-weight: 800;

  text-decoration: none;

  transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      background 0.2s ease;
}


.home-v2-btn--primary {
  border:
      1px solid
      #ffffff;

  color:
      var(--fluence-blue);

  background:
      #ffffff;

  box-shadow:
      0 12px 28px
      rgba(0, 0, 0, 0.12);
}


.home-v2-btn--primary:hover {
  transform:
      translateY(-2px);

  color:
      var(--fluence-blue);

  box-shadow:
      0 16px 34px
      rgba(0, 0, 0, 0.16);
}


.home-v2-btn--glass {
  border:
      1px solid
      rgba(255, 255, 255, 0.42);

  color: #ffffff;

  background:
      rgba(255, 255, 255, 0.10);

  backdrop-filter:
      blur(8px);
}


.home-v2-btn--glass:hover {
  transform:
      translateY(-2px);

  color: #ffffff;

  background:
      rgba(255, 255, 255, 0.18);
}


/* CONTROLS */

.home-v2-hero__controls {
  position: absolute;
  z-index: 7;

  right: 3rem;
  bottom: 2.5rem;

  display: flex;

  gap: 0.5rem;
}


.home-v2-hero__controls button {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border:
      1px solid
      rgba(255, 255, 255, 0.32);

  border-radius: 50%;

  color: #ffffff;

  background:
      rgba(255, 255, 255, 0.10);

  backdrop-filter:
      blur(8px);

  transition:
      background 0.2s ease,
      transform 0.2s ease;
}


.home-v2-hero__controls button:hover {
  transform:
      translateY(-2px);

  background:
      rgba(255, 255, 255, 0.22);
}


/* =========================================================
 SHARED
========================================================= */

.home-v2-eyebrow {
  display: inline-block;

  margin-bottom: 0.75rem;

  color:
      var(--fluence-blue);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.home-v2-text-link {
  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  color:
      var(--fluence-blue);

  font-size: 0.87rem;

  font-weight: 800;

  text-decoration: none;
}


.home-v2-text-link i {
  transition:
      transform 0.2s ease;
}


.home-v2-text-link:hover {
  color:
      var(--fluence-blue);
}


.home-v2-text-link:hover i {
  transform:
      translateX(5px);
}


/* =========================================================
 ABOUT
========================================================= */

.home-v2-about {
  padding:
      6rem
      0;

  background: #ffffff;
}


.home-v2-about__panel {
  overflow: hidden;

  border:
      1px solid
      #dcecf4;

  border-radius: 28px;

  background: #ffffff;

  box-shadow:
      0 20px 60px
      rgba(10, 137, 233, 0.065);
}


.home-v2-about__content {
  height: 100%;

  padding:
      4rem
      4rem
      3.75rem;
}


.home-v2-about__content h2 {
  max-width: 700px;

  margin:
      0
      0
      1.35rem;

  color: #263746;

  font-size:
      clamp(
          2.25rem,
          4vw,
          3.35rem
      );

  font-weight: 800;

  line-height: 1.08;

  letter-spacing:
      -0.025em;
}


.home-v2-about__content h2 span {
  color:
      var(--fluence-blue);
}


.home-v2-about__lead {
  max-width: 700px;

  color: #435866;

  font-size: 1.05rem;

  font-weight: 500;

  line-height: 1.8;
}


.home-v2-about__content > p:not(.home-v2-about__lead) {
  max-width: 700px;

  color: #71818c;

  line-height: 1.8;
}


/* FEATURES */

.home-v2-about__features {
  display: grid;

  grid-template-columns:
      repeat(2, minmax(0, 1fr));

  gap: 1rem;

  margin:
      2rem
      0;
}


.home-v2-about-feature {
  display: flex;

  align-items: center;

  gap: 0.9rem;

  padding:
      1rem;

  border:
      1px solid
      #e1edf3;

  border-radius: 15px;

  background:
      #fbfdfe;
}


.home-v2-about-feature > span {
  display: flex;

  flex:
      0
      0
      44px;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 12px;

  color:
      var(--fluence-blue);

  background:
      #edf8ff;
}


.home-v2-about-feature strong {
  display: block;

  margin-bottom: 0.15rem;

  color: #263746;

  font-size: 0.84rem;
}


.home-v2-about-feature small {
  display: block;

  color: #81909c;

  font-size: 0.73rem;

  line-height: 1.45;
}


/* ABOUT VISUAL */

.home-v2-about__visual {
  position: relative;

  height: 100%;

  padding:
      3.25rem
      2rem;

  background:
      linear-gradient(
          145deg,
          #eff9ff 0%,
          #f2fcff 55%,
          #f8ffff 100%
      );
}


.home-v2-about__visual-label {
  display: block;

  margin-bottom: 1.25rem;

  color:
      var(--fluence-blue);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.home-v2-about__visual-grid {
  display: grid;

  gap: 0.9rem;
}


.home-v2-solution-preview {
  overflow: hidden;

  display: grid;

  grid-template-columns:
      120px 1fr;

  min-height: 105px;

  border:
      1px solid
      rgba(10, 137, 233, 0.11);

  border-radius: 16px;

  background:
      rgba(255, 255, 255, 0.82);

  color: inherit;

  text-decoration: none;

  transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
}


.home-v2-solution-preview:hover {
  transform:
      translateX(4px);

  border-color:
      rgba(10, 137, 233, 0.27);

  box-shadow:
      0 10px 26px
      rgba(10, 137, 233, 0.08);
}


.home-v2-solution-preview__image {
  overflow: hidden;
}


.home-v2-solution-preview__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.home-v2-solution-preview__content {
  display: flex;

  align-items: center;

  gap: 0.85rem;

  padding:
      1rem;
}


.home-v2-solution-preview__content span {
  display: flex;

  flex:
      0
      0
      38px;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  color:
      var(--fluence-blue);

  background:
      #edf8ff;
}


.home-v2-solution-preview__content strong {
  color: #263746;

  font-size: 0.86rem;
}


/* =========================================================
 GENERAL HOME SECTION
========================================================= */

.home-v2-section {
  padding:
      6rem
      0;
}


.home-v2-section--products {
  background:
      linear-gradient(
          180deg,
          #f8fdff 0%,
          #ffffff 100%
      );
}


.home-v2-section--solutions {
  background: #ffffff;
}


/* =========================================================
 SECTION HEADING
========================================================= */

.home-v2-section-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 3rem;

  margin-bottom: 2.75rem;
}


.home-v2-section-heading > div {
  max-width: 720px;
}


.home-v2-section-heading h2 {
  margin:
      0
      0
      0.85rem;

  color: #263746;

  font-size:
      clamp(
          2rem,
          3.5vw,
          3rem
      );

  font-weight: 800;

  line-height: 1.1;

  letter-spacing:
      -0.02em;
}


.home-v2-section-heading h2 span {
  color:
      var(--fluence-blue);
}


.home-v2-section-heading p {
  max-width: 650px;

  margin: 0;

  color: #71818c;

  line-height: 1.75;
}


/* =========================================================
 CATEGORY / SOLUTION CARD
========================================================= */

.home-v2-category-card {
  overflow: hidden;

  height: 100%;

  border:
      1px solid
      #dfebf1;

  border-radius: 19px;

  background: #ffffff;

  box-shadow:
      0 8px 28px
      rgba(30, 83, 110, 0.05);

  transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
}


.home-v2-category-card:hover {


  border-color:
      rgba(10, 137, 233, 0.25);

  box-shadow:
      0 18px 40px
      rgba(10, 137, 233, 0.09);
}


.home-v2-category-card__icon {
  display: flex;

  align-items: center;
  justify-content: center;

  height: 205px;

  padding: 1.5rem;

  background:
      linear-gradient(
          145deg,
          #f8fcfe,
          #eff9ff
      );
}


.home-v2-category-card__icon img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  transition:
      transform 0.3s ease;
}


.home-v2-category-card:hover
.home-v2-category-card__icon img {
  transform:
      scale(1.04);
}


.home-v2-category-card__icon--solution {
  padding: 0;
}


.home-v2-category-card__icon--solution img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.home-v2-category-card__body {
  padding:
      1.4rem
      1.4rem
      1.5rem;
}


.home-v2-category-card__body h3 {
  margin:
      0
      0
      0.65rem;

  font-size: 1rem;

  font-weight: 800;
}


.home-v2-category-card__body h3 a {
  color: #263746;

  text-decoration: none;
}


.home-v2-category-card__body h3 a:hover {
  color:
      var(--fluence-blue);
}


.home-v2-category-card__body p {
  min-height: 66px;

  margin:
      0
      0
      1rem;

  color: #75858f;

  font-size: 0.83rem;

  line-height: 1.65;
}


.home-v2-card-link {
  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  color:
      var(--fluence-blue);

  font-size: 0.8rem;

  font-weight: 800;

  text-decoration: none;
}


.home-v2-card-link i {
  font-size: 0.7rem;

  transition:
      transform 0.2s ease;
}


.home-v2-card-link:hover {
  color:
      var(--fluence-blue);
}


.home-v2-card-link:hover i {
  transform:
      translateX(4px);
}


/* =========================================================
 OWL DOTS
========================================================= */

.home-v2-category-slider .owl-stage {
  display: flex;
}


.home-v2-category-slider .owl-item {
  display: flex;
}


.home-v2-category-slider .owl-item > * {
  width: 100%;
}


.home-v2-category-slider .owl-dots {
  margin-top:
      1.75rem !important;
}


.home-v2-category-slider
.owl-dot span {
  width: 7px !important;
  height: 7px !important;

  margin:
      4px !important;

  background:
      #cfe5ef !important;
}


.home-v2-category-slider
.owl-dot.active span {
  width:
      22px !important;

  border-radius:
      999px !important;

  background:
      var(--fluence-blue) !important;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .home-v2-hero__carousel,
  .home-v2-hero .carousel-inner,
  .home-v2-hero .carousel-item {
      min-height:
          620px;
  }


  .home-v2-about {
      padding:
          4.5rem
          0;
  }


  .home-v2-about__content {
      padding:
          3rem
          2.5rem;
  }


  .home-v2-about__visual {
      padding:
          2.5rem;
  }


  .home-v2-section {
      padding:
          4.5rem
          0;
  }


  .home-v2-section-heading {
      align-items:
          flex-start;

      flex-direction:
          column;

      gap: 1rem;
  }

}


@media (max-width: 767.98px) {

  .home-v2-hero__carousel,
  .home-v2-hero .carousel-inner,
  .home-v2-hero .carousel-item {
      min-height:
          570px;
  }


  .home-v2-hero__overlay {
      background:
          linear-gradient(
              90deg,
              rgba(7, 100, 170, 0.80),
              rgba(10, 137, 233, 0.58)
          );
  }


  .home-v2-hero__controls {
      right:
          1rem;

      bottom:
          1.25rem;
  }


  .home-v2-about__features {
      grid-template-columns:
          1fr;
  }

}


@media (max-width: 575.98px) {

  .home-v2-hero h1 {
      font-size:
          2.5rem;
  }


  .home-v2-hero__description {
      font-size:
          0.95rem;
  }


  .home-v2-hero__actions {
      align-items:
          stretch;

      flex-direction:
          column;
  }


  .home-v2-btn {
      width: 100%;
  }


  .home-v2-about {
      padding:
          3.5rem
          0;
  }


  .home-v2-about__panel {
      border-radius:
          20px;
  }


  .home-v2-about__content,
  .home-v2-about__visual {
      padding:
          2rem
          1.25rem;
  }


  .home-v2-solution-preview {
      grid-template-columns:
          95px
          1fr;
  }


  .home-v2-section {
      padding:
          3.75rem
          0;
  }


  .home-v2-category-card__icon {
      height:
          190px;
  }

}



/* =========================================================
   HOME V2
   PART 2
========================================================= */


/* =========================================================
   PRODUCTS
========================================================= */

.home-v2-products {
  padding:
      6rem
      0;

  background: #ffffff;
}


.home-v2-products--new {
  background:
      linear-gradient(
          180deg,
          #f7fcff 0%,
          #ffffff 100%
      );
}


/* PRODUCT CARD */

.home-v2-product-card {
  overflow: hidden;

  height: 100%;

  border:
      1px solid
      #dfebf1;

  border-radius: 19px;

  background: #ffffff;

  box-shadow:
      0 8px 28px
      rgba(30, 83, 110, 0.05);

  transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
}


.home-v2-product-card:hover {
  transform:
      translateY(-5px);

  border-color:
      rgba(10, 137, 233, 0.24);

  box-shadow:
      0 18px 42px
      rgba(10, 137, 233, 0.09);
}


.home-v2-product-card__image {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  height: 250px;

  padding: 1.5rem;

  overflow: hidden;

  background:
      linear-gradient(
          145deg,
          #fafcfd,
          #f1f9fd
      );
}


.home-v2-product-card__image img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  transition:
      transform 0.35s ease;
}


.home-v2-product-card:hover
.home-v2-product-card__image img {
  transform:
      scale(1.045);
}


.home-v2-product-card__badge {
  position: absolute;

  top: 1rem;
  left: 1rem;

  padding:
      0.35rem
      0.65rem;

  border-radius: 999px;

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  box-shadow:
      0 5px 15px
      rgba(10, 137, 233, 0.16);
}


.home-v2-product-card__body {
  display: flex;

  flex-direction: column;

  min-height: 205px;

  padding:
      1.4rem;
}


.home-v2-product-card__category {
  display: block;

  margin-bottom: 0.5rem;

  color:
      var(--fluence-blue);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.home-v2-product-card h3 {
  margin:
      0
      0
      0.65rem;

  font-size: 1rem;

  font-weight: 800;

  line-height: 1.4;
}


.home-v2-product-card h3 a {
  color: #263746;

  text-decoration: none;
}


.home-v2-product-card h3 a:hover {
  color:
      var(--fluence-blue);
}


.home-v2-product-card__body > p {
  margin:
      0
      0
      1rem;

  color: #75858f;

  font-size: 0.82rem;

  line-height: 1.65;
}


.home-v2-product-card
.home-v2-card-link {
  margin-top: auto;
}


/* =========================================================
 WHY FLUENCE
========================================================= */

.home-v2-value {
  padding:
      6.5rem
      0;

  background: #ffffff;
}


.home-v2-value__top {
  display: grid;

  grid-template-columns:
      minmax(0, 1.15fr)
      minmax(280px, 0.65fr);

  align-items: end;

  gap: 4rem;

  margin-bottom: 3.5rem;
}


.home-v2-value__top h2 {
  max-width: 700px;

  margin: 0;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.4rem
      );

  font-weight: 800;

  line-height: 1.08;

  letter-spacing:
      -0.025em;
}


.home-v2-value__top h2 span {
  display: block;

  color:
      var(--fluence-blue);
}


.home-v2-value__top > p {
  margin: 0;

  color: #71818c;

  line-height: 1.8;
}


/* VALUE GRID */

.home-v2-value__grid {
  display: grid;

  grid-template-columns:
      repeat(4, minmax(0, 1fr));

  border-top:
      1px solid
      #dceaf1;

  border-bottom:
      1px solid
      #dceaf1;
}


.home-v2-value-card {
  position: relative;

  min-height: 310px;

  padding:
      2.2rem
      1.75rem;

  border-right:
      1px solid
      #dceaf1;

  background: #ffffff;

  transition:
      background 0.25s ease;
}


.home-v2-value-card:last-child {
  border-right: 0;
}


.home-v2-value-card:hover {
  background:
      #f7fcff;
}


.home-v2-value-card__number {
  position: absolute;

  top: 1.5rem;
  right: 1.5rem;

  color: #d9e8ef;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.home-v2-value-card__icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  margin-bottom: 1.6rem;

  border:
      1px solid
      #d8edf7;

  border-radius: 14px;

  color:
      var(--fluence-blue);

  background:
      #eef9ff;

  font-size: 1.15rem;
}


.home-v2-value-card h3 {
  margin:
      0
      0
      0.75rem;

  color: #263746;

  font-size: 1rem;

  font-weight: 800;
}


.home-v2-value-card p {
  margin:
      0
      0
      1rem;

  color: #75858f;

  font-size: 0.83rem;

  line-height: 1.7;
}


/* =========================================================
 CONTACT
========================================================= */

.home-v2-contact {
  position: relative;

  padding:
      6.5rem
      0;

  background:
      linear-gradient(
          180deg,
          #f7fcff 0%,
          #ffffff 100%
      );
}


/* CONTACT HEADING */

.home-v2-contact__header {
  display: grid;

  grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.65fr);

  align-items: end;

  gap: 4rem;

  margin-bottom: 3.25rem;
}


.home-v2-contact__header h2 {
  max-width: 720px;

  margin: 0;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.4rem
      );

  font-weight: 800;

  line-height: 1.08;

  letter-spacing:
      -0.025em;
}


.home-v2-contact__header h2 span {
  display: block;

  color:
      var(--fluence-blue);
}


.home-v2-contact__header > p {
  margin: 0;

  color: #71818c;

  line-height: 1.8;
}


/* CONTACT LAYOUT */

.home-v2-contact__layout {
  display: grid;

  grid-template-columns:
      minmax(300px, 0.78fr)
      minmax(0, 1.35fr);

  overflow: hidden;

  border:
      1px solid
      #dceaf1;

  border-radius: 24px;

  background: #ffffff;

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.06);
}


/* =========================================================
 CONTACT INFO
========================================================= */

.home-v2-contact__info {
  position: relative;

  padding:
      3rem
      2.5rem;

  border-right:
      1px solid
      #dceaf1;

  background:
      linear-gradient(
          145deg,
          #edf9ff 0%,
          #f3fdff 58%,
          #f9ffff 100%
      );
}




.home-v2-contact__info > * {
  position: relative;

  z-index: 1;
}


.home-v2-contact__info-top > span {
  display: block;

  margin-bottom: 0.6rem;

  color:
      var(--fluence-blue);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.home-v2-contact__info-top h3 {
  max-width: 360px;

  margin:
      0
      0
      0.8rem;

  color: #263746;

  font-size: 1.55rem;

  font-weight: 800;

  line-height: 1.25;
}


.home-v2-contact__info-top p {
  margin: 0;

  color: #748590;

  font-size: 0.85rem;

  line-height: 1.7;
}


/* DETAILS */

.home-v2-contact__details {
  margin:
      2rem
      0;
}


.home-v2-contact-detail {
  display: flex;

  align-items: center;

  gap: 1rem;

  padding:
      1rem
      0;

  border-bottom:
      1px solid
      rgba(10, 137, 233, 0.11);
}


.home-v2-contact-detail:first-child {
  padding-top: 0;
}


.home-v2-contact-detail:last-child {
  border-bottom: 0;
}


.home-v2-contact-detail__icon {
  display: flex;

  flex:
      0
      0
      42px;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border:
      1px solid
      #d7edf7;

  border-radius: 12px;

  color:
      var(--fluence-blue);

  background:
      rgba(255, 255, 255, 0.82);
}


.home-v2-contact-detail small {
  display: block;

  margin-bottom: 0.15rem;

  color: #8a99a3;

  font-size: 0.67rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;
}


.home-v2-contact-detail strong,
.home-v2-contact-detail a {
  display: block;

  color: #314755;

  font-size: 0.86rem;

  font-weight: 700;

  text-decoration: none;
}


.home-v2-contact-detail a:hover {
  color:
      var(--fluence-blue);
}


.home-v2-contact-detail p {
  margin:
      0.1rem
      0
      0;

  color: #73838e;

  font-size: 0.8rem;
}


/* HOURS */

.home-v2-contact__hours {
  padding: 0;

  border: 0;

  color: #314755;

  background: transparent;

  font-size: 0.84rem;

  font-weight: 700;

  text-align: left;
}


.home-v2-contact__hours:hover,
.home-v2-contact__hours:focus {
  color:
      var(--fluence-blue);

  outline: none;
}


.home-v2-contact__info
.dropdown-menu {
  padding: 0.45rem;

  border:
      1px solid
      #dceaf1;

  border-radius: 11px;

  box-shadow:
      0 12px 30px
      rgba(10, 137, 233, 0.10);
}


.home-v2-contact__info
.dropdown-item {
  padding:
      0.45rem
      0.65rem;

  border-radius: 7px;

  color: #667985;

  font-size: 0.78rem;
}


/* =========================================================
 CONTACT FORM
========================================================= */

.home-v2-contact__form {
  padding:
      3rem;
}


.home-v2-contact__form-heading {
  margin-bottom:
      2rem;
}


.home-v2-contact__form-heading > span {
  display: block;

  margin-bottom: 0.4rem;

  color:
      var(--fluence-blue);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.home-v2-contact__form-heading h3 {
  margin:
      0
      0
      0.45rem;

  color: #263746;

  font-size: 1.65rem;

  font-weight: 800;
}


.home-v2-contact__form-heading p {
  margin: 0;

  color: #82919b;

  font-size: 0.84rem;
}


/* FORM */

.home-v2-contact-form
.form-label {
  margin-bottom:
      0.5rem;

  color: #425662;

  font-size: 0.78rem;

  font-weight: 800;
}


.home-v2-contact-form
.form-control {
  min-height: 52px;

  padding:
      0.8rem
      0.95rem;

  border:
      1px solid
      #dce8ee;

  border-radius: 11px;

  color: #263746;

  background: #fbfdfe;

  font-size: 0.87rem;

  transition:
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease;
}


.home-v2-contact-form
textarea.form-control {
  min-height: 160px;

  resize: vertical;
}


.home-v2-contact-form
.form-control::placeholder {
  color: #a6b1b8;
}


.home-v2-contact-form
.form-control:focus {
  border-color:
      rgba(10, 137, 233, 0.50);

  background: #ffffff;

  box-shadow:
      0 0 0 3px
      rgba(10, 137, 233, 0.07);
}


.home-v2-contact-form
.form-control.is-invalid {
  border-color: #d86c64;

  background-image: none;
}


.home-v2-field-error {
  margin-bottom: 0.4rem;

  color: #c14e46;

  font-size: 0.74rem;
}


/* SUBMIT */

.home-v2-contact__submit-row {
  display: flex;

  align-items: center;

  gap: 1.2rem;
}


.home-v2-contact__submit {
  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  gap: 0.6rem;

  min-height: 50px;

  padding:
      0.8rem
      1.4rem;

  border:
      1px solid
      var(--fluence-blue);

  border-radius: 11px;

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  font-size: 0.84rem;

  font-weight: 800;

  box-shadow:
      0 8px 22px
      rgba(10, 137, 233, 0.15);

  transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
}


.home-v2-contact__submit:hover {
  transform:
      translateY(-2px);

  box-shadow:
      0 12px 28px
      rgba(10, 137, 233, 0.21);
}


.home-v2-contact__submit-row > span {
  max-width: 280px;

  color: #94a1a9;

  font-size: 0.7rem;

  line-height: 1.5;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {

  .home-v2-value__grid {
      grid-template-columns:
          repeat(2, minmax(0, 1fr));
  }


  .home-v2-value-card:nth-child(2) {
      border-right: 0;
  }


  .home-v2-value-card:nth-child(-n + 2) {
      border-bottom:
          1px solid
          #dceaf1;
  }

}


@media (max-width: 991.98px) {

  .home-v2-products,
  .home-v2-value,
  .home-v2-contact {
      padding:
          4.5rem
          0;
  }


  .home-v2-value__top,
  .home-v2-contact__header {
      grid-template-columns:
          1fr;

      gap: 1.25rem;
  }


  .home-v2-contact__layout {
      grid-template-columns:
          1fr;
  }


  .home-v2-contact__info {
      border-right: 0;

      border-bottom:
          1px solid
          #dceaf1;
  }

}


@media (max-width: 767.98px) {

  .home-v2-value__grid {
      grid-template-columns:
          1fr;
  }


  .home-v2-value-card,
  .home-v2-value-card:nth-child(2) {
      min-height: auto;

      border-right: 0;

      border-bottom:
          1px solid
          #dceaf1;
  }


  .home-v2-value-card:last-child {
      border-bottom: 0;
  }

}


@media (max-width: 575.98px) {

  .home-v2-products,
  .home-v2-value,
  .home-v2-contact {
      padding:
          3.75rem
          0;
  }


  .home-v2-product-card__image {
      height:
          220px;
  }


  .home-v2-contact__layout {
      border-radius:
          18px;
  }


  .home-v2-contact__info,
  .home-v2-contact__form {
      padding:
          2rem
          1.25rem;
  }


  .home-v2-contact__submit-row {
      align-items:
          flex-start;

      flex-direction:
          column;
  }


  .home-v2-contact__submit {
      width: 100%;
  }

}




/* =========================================================
   DOCUMENTS CENTER
   FLUENCE LIGHT STYLE
========================================================= */

.documents-page {
  padding: 3.5rem 0 6rem;

  background:
      linear-gradient(
          180deg,
          #f8fdff 0,
          #ffffff 380px
      );
}


/* =========================================================
 HERO
========================================================= */

.documents-hero {
  position: relative;

  overflow: hidden;

  margin-bottom: 4rem;

  padding:
      3.25rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.12);

  border-radius: 28px;

  background:
      linear-gradient(
          135deg,
          #f1faff 0%,
          #f3fdff 55%,
          #f8ffff 100%
      );

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.07);
}


.documents-hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -80px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
      rgba(82, 232, 230, 0.16);

  filter:
      blur(10px);

  pointer-events: none;
}


.documents-hero::after {
  content: "";

  position: absolute;

  right: 140px;
  bottom: -150px;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background:
      rgba(10, 137, 233, 0.08);

  pointer-events: none;
}


.documents-hero__content {
  position: relative;

  z-index: 1;

  max-width: 760px;
}


.documents-hero__eyebrow {
  display: inline-block;

  margin-bottom: 0.7rem;

  color:
      var(--fluence-blue);

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.documents-hero h1 {
  margin:
      0
      0
      0.85rem;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.2rem
      );

  font-weight: 800;

  line-height: 1.1;
}


.documents-hero h1 span {
  color:
      var(--fluence-blue);
}


.documents-hero p {
  max-width: 680px;

  margin: 0;

  color: #687985;

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
 GROUP
========================================================= */

.documents-group {
  margin-bottom: 4.5rem;
}


.documents-group:last-child {
  margin-bottom: 0;
}


.documents-group__header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 2rem;

  margin-bottom: 2rem;

  padding-bottom: 1rem;

  border-bottom:
      1px solid
      #e4eef3;
}


.documents-group__header > div {
  position: relative;

  padding-left: 16px;
}


.documents-group__header > div::before {
  content: "";

  position: absolute;

  top: 2px;
  bottom: 2px;
  left: 0;

  width: 4px;

  border-radius: 999px;

  background:
      linear-gradient(
          180deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );
}


.documents-group__eyebrow {
  display: block;

  margin-bottom: 0.25rem;

  color:
      var(--fluence-blue);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.documents-group__header h2 {
  margin: 0;

  color: #263746;

  font-size: 1.55rem;

  font-weight: 800;
}


/* =========================================================
 PRODUCT CARD
========================================================= */

.documents-product-card {
  overflow: hidden;

  height: 100%;

  border:
      1px solid
      #dfebf1;

  border-radius: 20px;

  background: #ffffff;

  box-shadow:
      0 8px 28px
      rgba(30, 83, 110, 0.05);

  transition:
      border-color 0.25s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
}


.documents-product-card:hover {
  transform:
      translateY(-3px);

  border-color:
      rgba(10, 137, 233, 0.22);

  box-shadow:
      0 16px 38px
      rgba(10, 137, 233, 0.08);
}


/* =========================================================
 PRODUCT HEADER
========================================================= */

.documents-product-card__header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  min-height: 95px;

  padding:
      1.25rem
      1.4rem;

  border-bottom:
      1px solid
      #e6eef2;

  background:
      linear-gradient(
          135deg,
          #f7fcff,
          #f3fdff
      );
}


.documents-product-card__identity {
  display: flex;

  align-items: center;

  gap: 0.9rem;

  min-width: 0;
}


.documents-product-card__icon {
  display: flex;

  flex:
      0
      0
      44px;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border:
      1px solid
      #d9edf7;

  border-radius: 12px;

  color:
      var(--fluence-blue);

  background: #ffffff;

  font-size: 1rem;

  box-shadow:
      0 5px 16px
      rgba(10, 137, 233, 0.06);
}


.documents-product-card__header h3 {
  margin:
      0
      0
      0.2rem;

  color: #263746;

  font-size: 0.98rem;

  font-weight: 800;
}


.documents-product-card__header p {
  margin: 0;

  color: #82909a;

  font-size: 0.73rem;
}


.documents-product-card__product-link {
  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;

  gap: 0.5rem;

  padding:
      0.6rem
      0.8rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.18);

  border-radius: 9px;

  color:
      var(--fluence-blue);

  background: #ffffff;

  font-size: 0.72rem;

  font-weight: 800;

  text-decoration: none;

  transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
}


.documents-product-card__product-link:hover {
  transform:
      translateY(-1px);

  border-color:
      var(--fluence-blue);

  color:
      var(--fluence-blue);

  box-shadow:
      0 7px 18px
      rgba(10, 137, 233, 0.08);
}


/* =========================================================
 PRODUCT BODY
========================================================= */

.documents-product-card__body {
  padding:
      0.4rem
      1.35rem;
}


/* =========================================================
 DOCUMENT ROW
========================================================= */

.documents-item {
  display: grid;

  grid-template-columns:
      42px
      minmax(0, 1fr)
      34px;

  align-items: center;

  gap: 0.85rem;

  min-height: 82px;

  padding:
      1rem
      0;

  border-bottom:
      1px solid
      #ebf1f4;
}


.documents-item:last-child {
  border-bottom: 0;
}


.documents-item__icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border:
      1px solid
      #deedf4;

  border-radius: 11px;

  color:
      var(--fluence-blue);

  background:
      #f4fbff;

  font-size: 0.95rem;
}


.documents-item__content {
  min-width: 0;
}


.documents-item__title {
  display: inline-block;

  max-width: 100%;

  margin-bottom: 0.45rem;

  overflow: hidden;

  color: #314653;

  font-size: 0.84rem;

  font-weight: 750;

  text-decoration: none;

  text-overflow: ellipsis;

  white-space: nowrap;
}


a.documents-item__title:hover {
  color:
      var(--fluence-blue);
}


/* =========================================================
 DOCUMENT META
========================================================= */

.documents-item__meta {
  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;
}


.documents-item__type,
.documents-item__language {
  display: inline-flex;

  align-items: center;

  min-height: 23px;

  padding:
      0.2rem
      0.55rem;

  border-radius: 999px;

  font-size: 0.62rem;

  font-weight: 800;
}


.documents-item__type {
  color:
      var(--fluence-blue);

  background:
      #eaf7ff;
}


.documents-item__language {
  color: #687985;

  background:
      #f2f5f7;
}


/* =========================================================
 OPEN BUTTON
========================================================= */

.documents-item__open {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border:
      1px solid
      transparent;

  border-radius: 9px;

  color: #8da0aa;

  text-decoration: none;

  transition:
      color 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease;
}


.documents-item__open:hover {
  border-color:
      #d8ebf4;

  color:
      var(--fluence-blue);

  background:
      #f3fbff;
}


/* =========================================================
 PRODUCT EMPTY STATE
========================================================= */

.documents-product-card__empty {
  display: flex;

  align-items: center;

  gap: 1rem;

  padding:
      1.5rem
      0;
}


.documents-product-card__empty-icon {
  display: flex;

  flex:
      0
      0
      46px;

  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border-radius: 12px;

  color: #94a7b1;

  background:
      #f3f7f9;
}


.documents-product-card__empty strong {
  display: block;

  margin-bottom: 0.2rem;

  color: #526570;

  font-size: 0.82rem;
}


.documents-product-card__empty p {
  margin: 0;

  color: #95a3ac;

  font-size: 0.75rem;
}


/* =========================================================
 GLOBAL EMPTY STATE
========================================================= */

.documents-empty-state {
  max-width: 720px;

  margin:
      1rem
      auto
      2rem;

  padding:
      3.5rem
      2rem;

  text-align: center;

  border:
      1px solid
      #dceef6;

  border-radius: 24px;

  background:
      linear-gradient(
          135deg,
          #f7fcff,
          #f3fdff
      );
}


.documents-empty-state__icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  margin:
      0
      auto
      1.25rem;

  border:
      1px solid
      #d9eef8;

  border-radius: 50%;

  color:
      var(--fluence-blue);

  background: #ffffff;

  font-size: 1.75rem;

  box-shadow:
      0 10px 28px
      rgba(10, 137, 233, 0.08);
}


.documents-empty-state h2 {
  margin:
      0
      0
      0.65rem;

  color: #263746;

  font-size: 1.4rem;

  font-weight: 800;
}


.documents-empty-state p {
  max-width: 520px;

  margin:
      0
      auto
      1.4rem;

  color: #748590;

  font-size: 0.88rem;

  line-height: 1.7;
}


.documents-empty-state__action {
  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  padding:
      0.75rem
      1rem;

  border:
      1px solid
      var(--fluence-blue);

  border-radius: 10px;

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  font-size: 0.8rem;

  font-weight: 800;

  text-decoration: none;
}


.documents-empty-state__action:hover {
  color: #ffffff;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

  .documents-page {
      padding:
          2rem
          0
          4rem;
  }


  .documents-hero {
      margin-bottom: 3rem;

      padding:
          2.2rem
          1.6rem;

      border-radius: 22px;
  }


  .documents-product-card__header {
      align-items:
          flex-start;

      flex-direction:
          column;
  }


  .documents-product-card__product-link {
      width: 100%;

      justify-content: center;
  }

}


@media (max-width: 575.98px) {

  .documents-hero {
      padding:
          1.8rem
          1.25rem;
  }


  .documents-item {
      grid-template-columns:
          38px
          minmax(0, 1fr);
  }


  .documents-item__open {
      display: none;
  }


  .documents-item__title {
      white-space: normal;
  }

}




/* =========================================================
   SEARCH AJAX PAGINATION
========================================================= */

.search-result-section {
  position: relative;

  transition:
      opacity 0.2s ease,
      transform 0.2s ease;
}


/* =========================================================
 LOADING
========================================================= */

.search-result-section--loading {
  opacity: 0.48;

  pointer-events: none;
}


.search-result-section--loading::before {
  content: "";

  position: absolute;

  z-index: 20;

  top: 50%;
  left: 50%;

  width: 38px;
  height: 38px;

  margin:
      -19px
      0
      0
      -19px;

  border:
      3px solid
      rgba(10, 137, 233, 0.14);

  border-top-color:
      var(--fluence-blue);

  border-radius: 50%;

  background: transparent;

  animation:
      searchPaginationSpin
      0.7s
      linear
      infinite;
}


/* =========================================================
 NEW RESULTS ENTER
========================================================= */

.search-result-section--entering {
  opacity: 0;

  transform:
      translateY(6px);
}


/* =========================================================
 PAGINATION
========================================================= */

.search-page .pagination {
  gap: 0.35rem;
}


.search-page .page-link {
  min-width: 40px;

  border:
      1px solid
      #dceaf1;

  border-radius:
      9px !important;

  color:
      var(--fluence-blue);

  background:
      #ffffff;

  text-align: center;

  box-shadow: none;

  transition:
      color 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease,
      transform 0.2s ease;
}


.search-page
.page-link:hover {
  transform:
      translateY(-1px);

  border-color:
      rgba(10, 137, 233, 0.35);

  color:
      var(--fluence-blue);

  background:
      #f4fbff;
}


.search-page
.page-item.active
.page-link {
  border-color:
      var(--fluence-blue);

  color:
      #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );
}


.search-page
.page-item.disabled
.page-link {
  color:
      #a1adb5;

  background:
      #f8fafb;

  opacity: 0.75;
}


/* =========================================================
 SPINNER
========================================================= */

@keyframes searchPaginationSpin {

  to {
      transform:
          rotate(360deg);
  }

}







/* =========================================================
   CONTACT V2
========================================================= */

.contact-v2 {
  padding: 3.5rem 0 6rem;

  background:
      linear-gradient(
          180deg,
          #f8fdff 0,
          #ffffff 380px
      );
}


/* =========================================================
 HERO
========================================================= */

.contact-v2__hero {
  position: relative;
  overflow: hidden;

  margin-bottom: 4rem;

  padding: 3.25rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.12);

  border-radius: 28px;

  background:
      linear-gradient(
          135deg,
          #f1faff 0%,
          #f3fdff 55%,
          #f8ffff 100%
      );

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.07);
}


.contact-v2__hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -80px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
      rgba(82, 232, 230, 0.16);

  filter: blur(10px);

  pointer-events: none;
}


.contact-v2__hero::after {
  content: "";

  position: absolute;

  right: 140px;
  bottom: -150px;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background:
      rgba(10, 137, 233, 0.08);

  pointer-events: none;
}


.contact-v2__hero-content {
  position: relative;
  z-index: 1;

  max-width: 760px;
}


.contact-v2__eyebrow {
  display: inline-block;

  margin-bottom: 0.7rem;

  color: var(--fluence-blue);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.contact-v2__hero h1 {
  margin: 0 0 0.85rem;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.2rem
      );

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.025em;
}


.contact-v2__hero h1 span {
  color: var(--fluence-blue);
}


.contact-v2__hero p {
  max-width: 680px;

  margin: 0;

  color: #687985;

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
 LAYOUT
========================================================= */

.contact-v2__layout {
  display: grid;

  grid-template-columns:
      minmax(0, 1.35fr)
      minmax(330px, 0.75fr);

  overflow: hidden;

  border:
      1px solid
      #dceaf1;

  border-radius: 26px;

  background: #ffffff;

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.06);
}


/* =========================================================
 FORM SIDE
========================================================= */

.contact-v2__form-side {
  padding: 3rem;
}


.contact-v2__section-heading {
  margin-bottom: 2.25rem;
}


.contact-v2__section-heading > span,
.contact-v2__info-heading > span {
  display: block;

  margin-bottom: 0.4rem;

  color: var(--fluence-blue);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.contact-v2__section-heading h2,
.contact-v2__info-heading h2 {
  margin: 0 0 0.5rem;

  color: #263746;

  font-size: 1.75rem;
  font-weight: 800;
}


.contact-v2__section-heading p,
.contact-v2__info-heading p {
  max-width: 560px;

  margin: 0;

  color: #7a8a94;

  font-size: 0.86rem;

  line-height: 1.7;
}


/* =========================================================
 FORM
========================================================= */

.contact-v2__label {
  display: block;

  margin-bottom: 0.5rem;

  color: #425762;

  font-size: 0.77rem;
  font-weight: 800;
}


.contact-v2__label span {
  color: var(--fluence-blue);
}


.contact-v2__form .form-control {
  min-height: 52px;

  padding: 0.8rem 0.95rem;

  border:
      1px solid
      #dce8ee;

  border-radius: 11px;

  color: #263746;

  background: #fbfdfe;

  font-size: 0.86rem;

  box-shadow: none;

  transition:
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease;
}


.contact-v2__form textarea.form-control {
  min-height: 165px;

  resize: vertical;
}


.contact-v2__form .form-control::placeholder {
  color: #a5b1b8;
}


.contact-v2__form .form-control:focus {
  border-color:
      rgba(10, 137, 233, 0.5);

  background: #ffffff;

  box-shadow:
      0 0 0 3px
      rgba(10, 137, 233, 0.07);
}


.contact-v2__form .form-control.is-invalid {
  border-color: #dc6b63;

  background-image: none;
}


.contact-v2__field-error {
  margin-bottom: 0.4rem;

  color: #c65049;

  font-size: 0.73rem;
}


/* =========================================================
 FILE UPLOAD
========================================================= */

.contact-v2__upload {
  padding: 1.15rem;

  border:
      1px dashed
      #cfe4ee;

  border-radius: 14px;

  background:
      #f8fcfe;
}


.contact-v2__upload-heading {
  display: flex;

  align-items: center;

  gap: 0.85rem;

  margin-bottom: 1rem;
}


.contact-v2__upload-icon {
  display: flex;

  flex: 0 0 42px;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 11px;

  color: var(--fluence-blue);

  background: #eaf7ff;
}


.contact-v2__upload-heading label {
  display: block;

  margin-bottom: 0.15rem;

  color: #3d5360;

  font-size: 0.8rem;
  font-weight: 800;
}


.contact-v2__upload-heading p {
  margin: 0;

  color: #8998a1;

  font-size: 0.72rem;
}


.contact-v2__upload .form-control {
  min-height: auto;

  background: #ffffff;
}


.contact-v2__upload-help {
  margin-top: 0.55rem;

  color: #94a1a9;

  font-size: 0.68rem;
}


/* =========================================================
 SUBMIT
========================================================= */

.contact-v2__submit-row {
  display: flex;

  align-items: center;

  gap: 1.2rem;
}


.contact-v2__submit {
  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  gap: 0.6rem;

  min-height: 50px;

  padding: 0.8rem 1.5rem;

  border:
      1px solid
      var(--fluence-blue);

  border-radius: 11px;

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  font-size: 0.83rem;
  font-weight: 800;

  box-shadow:
      0 8px 22px
      rgba(10, 137, 233, 0.15);

  transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
}


.contact-v2__submit:hover {
  transform: translateY(-2px);

  box-shadow:
      0 12px 28px
      rgba(10, 137, 233, 0.21);
}


.contact-v2__submit-row p {
  max-width: 260px;

  margin: 0;

  color: #94a1a9;

  font-size: 0.7rem;

  line-height: 1.5;
}


/* =========================================================
 INFO SIDE
========================================================= */

.contact-v2__info {
  position: relative;

  padding: 3rem 2.5rem;

  border-left:
      1px solid
      #dceaf1;

  background:
      linear-gradient(
          145deg,
          #edf9ff 0%,
          #f3fdff 58%,
          #f9ffff 100%
      );
}


.contact-v2__info::after {
  content: "";

  position: absolute;

  right: -100px;
  top: 100px;

  width: 280px;
  height: 280px;

  border-radius: 50%;

  background:
      rgba(82, 232, 230, 0.09);

  pointer-events: none;
}


.contact-v2__info > * {
  position: relative;
  z-index: 1;
}


.contact-v2__details {
  margin: 2rem 0;
}


/* =========================================================
 DETAILS
========================================================= */

.contact-v2__detail {
  display: flex;

  align-items: flex-start;

  gap: 1rem;

  padding: 1rem 0;

  border-bottom:
      1px solid
      rgba(10, 137, 233, 0.11);
}


.contact-v2__detail:first-child {
  padding-top: 0;
}


.contact-v2__detail:last-child {
  border-bottom: 0;
}


.contact-v2__detail-icon {
  display: flex;

  flex: 0 0 44px;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border:
      1px solid
      #d7edf7;

  border-radius: 12px;

  color: var(--fluence-blue);

  background:
      rgba(255, 255, 255, 0.85);

  font-size: 1rem;
}


.contact-v2__detail span {
  display: block;

  margin-bottom: 0.15rem;

  color: #8b9aa3;

  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


.contact-v2__detail strong,
.contact-v2__detail a {
  display: block;

  color: #314755;

  font-size: 0.84rem;
  font-weight: 750;

  text-decoration: none;
}


.contact-v2__detail a:hover {
  color: var(--fluence-blue);
}


.contact-v2__detail p {
  margin: 0.15rem 0 0;

  color: #71838e;

  font-size: 0.77rem;

  line-height: 1.5;
}


/* =========================================================
 MAP
========================================================= */

.contact-v2__map {
  overflow: hidden;

  height: 260px;

  margin-top: 1.5rem;

  border:
      1px solid
      #d6eaf3;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
      0 8px 24px
      rgba(10, 137, 233, 0.06);
}


.contact-v2__map iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .contact-v2__layout {
      grid-template-columns: 1fr;
  }


  .contact-v2__info {
      border-left: 0;

      border-top:
          1px solid
          #dceaf1;
  }

}


@media (max-width: 767.98px) {

  .contact-v2 {
      padding:
          2rem
          0
          4rem;
  }


  .contact-v2__hero {
      margin-bottom: 3rem;

      padding:
          2.2rem
          1.6rem;

      border-radius: 22px;
  }


  .contact-v2__form-side,
  .contact-v2__info {
      padding:
          2.2rem
          1.5rem;
  }

}


@media (max-width: 575.98px) {

  .contact-v2__hero {
      padding:
          1.8rem
          1.25rem;
  }


  .contact-v2__layout {
      border-radius: 18px;
  }


  .contact-v2__submit-row {
      align-items: flex-start;

      flex-direction: column;
  }


  .contact-v2__submit {
      width: 100%;
  }


  .contact-v2__map {
      height: 220px;
  }

}








/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page {
  padding: 3.5rem 0 6rem;

  background:
      linear-gradient(
          180deg,
          #f8fdff 0,
          #ffffff 390px
      );
}


/* =========================================================
 INTRO
========================================================= */

.about-page__intro {
  position: relative;

  overflow: hidden;

  margin-bottom: 4rem;

  padding: 3.2rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.12);

  border-radius: 28px;

  background:
      linear-gradient(
          135deg,
          #f1faff 0%,
          #f4fdff 56%,
          #f9ffff 100%
      );

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.07);
}


.about-page__intro::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -80px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
      rgba(82, 232, 230, 0.16);

  filter: blur(10px);

  pointer-events: none;
}


.about-page__intro::after {
  content: "";

  position: absolute;

  right: 150px;
  bottom: -150px;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background:
      rgba(10, 137, 233, 0.08);

  pointer-events: none;
}


.about-page__intro > * {
  position: relative;
  z-index: 1;
}


.about-page__intro-eyebrow {
  display: inline-block;

  margin-bottom: 0.7rem;

  color: var(--fluence-blue);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.about-page__intro h1 {
  max-width: 820px;

  margin: 0 0 0.9rem;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4.5vw,
          3.3rem
      );

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.025em;
}


.about-page__intro h1 span {
  color: var(--fluence-blue);
}


.about-page__intro p {
  max-width: 720px;

  margin: 0;

  color: #687985;

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
 MAIN PANEL
========================================================= */

.about-page__panel {
  overflow: hidden;

  padding: 2rem;

  border:
      1px solid
      #deebf1;

  border-radius: 26px;

  background: #ffffff;

  box-shadow:
      0 18px 50px
      rgba(10, 137, 233, 0.055);
}


/* =========================================================
 IMAGE
========================================================= */

.about-page__image-wrap {
  position: relative;

  overflow: hidden;

  min-height: 100%;

  border-radius: 20px;

  background:
      #edf8fc;
}


.about-page__image {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 580px;

  object-fit: cover;
}


.about-page__image-accent {
  position: absolute;

  right: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;

  padding: 1rem 1.15rem;

  border:
      1px solid
      rgba(255, 255, 255, 0.65);

  border-radius: 14px;

  background:
      rgba(255, 255, 255, 0.91);

  backdrop-filter: blur(10px);

  box-shadow:
      0 10px 30px
      rgba(10, 137, 233, 0.1);
}


.about-page__image-accent-label {
  display: block;

  margin-bottom: 0.2rem;

  color: var(--fluence-blue);

  font-size: 0.67rem;
  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.about-page__image-accent strong {
  display: block;

  color: #2f4350;

  font-size: 0.88rem;
  font-weight: 800;

  line-height: 1.45;
}


/* =========================================================
 CONTENT
========================================================= */

.about-page__content {
  display: flex;

  flex-direction: column;

  min-height: 100%;

  padding:
      1rem
      1rem
      1rem
      0;
}


.about-page__heading {
  margin-bottom: 1.7rem;
}


.about-page__eyebrow {
  display: inline-block;

  margin-bottom: 0.55rem;

  color: var(--fluence-blue);

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.about-page__title {
  max-width: 700px;

  margin: 0;

  color: #263746;

  font-size:
      clamp(
          1.8rem,
          3vw,
          2.5rem
      );

  font-weight: 800;

  line-height: 1.16;

  letter-spacing: -0.02em;
}


.about-page__lead {
  margin-bottom: 2rem;

  color: #526875;

  font-size: 1rem;
  font-weight: 500;

  line-height: 1.75;
}


/* =========================================================
   ABOUT TABS
========================================================= */

/* =========================================================
   ABOUT TABS - FORCE SIDE BY SIDE
========================================================= */

.about-page__nav {
  display: flex !important;
  flex-wrap: nowrap !important;

  width: fit-content !important;

  gap: 0.4rem !important;

  margin-bottom: 1.8rem;

  padding: 0.3rem;

  border: 1px solid #dceaf1;

  border-radius: 12px;

  background: #f7fbfd;
}


.about-page__nav .nav-item {
  flex: 0 0 auto !important;

  width: auto !important;
}


.about-page__nav .nav-link {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  width: auto !important;

  min-width: 0 !important;

  padding: 0.7rem 1.25rem;

  border: 0;

  border-radius: 9px;

  color: #71828d;

  background: transparent;

  font-size: 0.76rem;
  font-weight: 800;

  white-space: nowrap;
}


.about-page__nav .nav-link.active {
  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  box-shadow:
      0 6px 16px
      rgba(10, 137, 233, 0.16);
}

/* =========================================================
 TAB CONTENT
========================================================= */

.about-page__tab-content {
  color: #647680;
}


.about-page__tab-content p {
  margin-bottom: 1rem;

  font-size: 0.89rem;

  line-height: 1.75;
}


.about-page__tab-content p:last-of-type {
  margin-bottom: 0;
}


/* =========================================================
 ACTIONS
========================================================= */

.about-page__actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.75rem;

  margin-top: 1.8rem;
}


.about-page__primary-action,
.about-page__secondary-action {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  min-height: 46px;

  padding:
      0.7rem
      1.2rem;

  border-radius: 10px;

  font-size: 0.78rem;
  font-weight: 800;

  text-decoration: none;

  transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease;
}


.about-page__primary-action {
  border:
      1px solid
      var(--fluence-blue);

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  box-shadow:
      0 8px 20px
      rgba(10, 137, 233, 0.15);
}


.about-page__primary-action:hover {
  transform: translateY(-2px);

  color: #ffffff;

  box-shadow:
      0 12px 26px
      rgba(10, 137, 233, 0.22);
}


.about-page__secondary-action {
  border:
      1px solid
      #cfe3ec;

  color: var(--fluence-blue);

  background: #ffffff;
}


.about-page__secondary-action:hover {
  transform: translateY(-2px);

  border-color:
      rgba(10, 137, 233, 0.35);

  color: var(--fluence-blue);

  background: #f6fcff;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .about-page__image {
      min-height: 460px;
  }


  .about-page__content {
      padding: 0.5rem;
  }

}


@media (max-width: 767.98px) {

  .about-page {
      padding:
          2rem
          0
          4rem;
  }


  .about-page__intro {
      margin-bottom: 3rem;

      padding:
          2.25rem
          1.6rem;

      border-radius: 22px;
  }


  .about-page__panel {
      padding: 1rem;

      border-radius: 20px;
  }


  .about-page__image {
      min-height: 380px;
  }


  .about-page__content {
      padding:
          0.75rem
          0.5rem;
  }


  .about-page__nav {
    display: flex;
    width: 100%;
}


.about-page__nav .nav-item {
    flex: 1;
}


.about-page__nav .nav-link {
    width: 100%;
}

}


@media (max-width: 575.98px) {

  .about-page__intro {
      padding:
          1.8rem
          1.25rem;
  }


  .about-page__image {
      min-height: 320px;
  }


  .about-page__image-accent {
      right: 0.8rem;
      bottom: 0.8rem;
      left: 0.8rem;
  }


  .about-page__actions {
      align-items: stretch;

      flex-direction: column;
  }


  .about-page__primary-action,
  .about-page__secondary-action {
      width: 100%;
  }

}





/* =========================================================
   SOLUTIONS PAGE
========================================================= */

.solutions-page {
  padding: 3.5rem 0 6rem;

  background:
      linear-gradient(
          180deg,
          #f8fdff 0,
          #ffffff 380px
      );
}


/* =========================================================
 HERO
========================================================= */

.solutions-page__hero {
  position: relative;

  overflow: hidden;

  margin-bottom: 4rem;

  padding: 3.25rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.12);

  border-radius: 28px;

  background:
      linear-gradient(
          135deg,
          #f1faff 0%,
          #f3fdff 55%,
          #f8ffff 100%
      );

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.07);
}


.solutions-page__hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -80px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
      rgba(82, 232, 230, 0.16);

  filter: blur(10px);

  pointer-events: none;
}


.solutions-page__hero::after {
  content: "";

  position: absolute;

  right: 140px;
  bottom: -150px;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background:
      rgba(10, 137, 233, 0.08);

  pointer-events: none;
}


.solutions-page__hero-content {
  position: relative;

  z-index: 1;

  max-width: 760px;
}


.solutions-page__eyebrow {
  display: inline-block;

  margin-bottom: 0.7rem;

  color: var(--fluence-blue);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.solutions-page__hero h1 {
  margin: 0 0 0.9rem;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.2rem
      );

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.025em;
}


.solutions-page__hero h1 span {
  color: var(--fluence-blue);
}


.solutions-page__hero p {
  max-width: 680px;

  margin: 0;

  color: #687985;

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
 SECTION HEADING
========================================================= */

.solutions-page__heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 1.5rem;

  margin-bottom: 2rem;
}


.solutions-page__section-eyebrow {
  display: block;

  margin-bottom: 0.35rem;

  color: var(--fluence-blue);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.solutions-page__heading h2 {
  margin: 0;

  color: #263746;

  font-size:
      clamp(
          1.7rem,
          3vw,
          2.25rem
      );

  font-weight: 800;

  line-height: 1.2;
}


.solutions-page__count {
  flex: 0 0 auto;

  padding: 0.5rem 0.8rem;

  border:
      1px solid
      #d9eaf2;

  border-radius: 999px;

  color: #687985;

  background: #f8fcfe;

  font-size: 0.72rem;
  font-weight: 700;
}


/* =========================================================
 SOLUTION CARD
========================================================= */

.solution-item {
  display: flex;

  overflow: hidden;

  flex-direction: column;

  border:
      1px solid
      #dfeaf0;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
      0 10px 30px
      rgba(10, 137, 233, 0.045);

  transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
}


.solution-item:hover {
  transform:
      translateY(-4px);

  border-color:
      rgba(10, 137, 233, 0.2);

  box-shadow:
      0 18px 38px
      rgba(10, 137, 233, 0.09);
}


/* =========================================================
 IMAGE
========================================================= */

.solution-item__image {
  position: relative;

  display: block;

  overflow: hidden;

  aspect-ratio: 16 / 10;

  background:
      #f3f8fa;
}


.solution-item__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
      transform 0.35s ease;
}


.solution-item:hover
.solution-item__image img {
  transform:
      scale(1.035);
}


/* =========================================================
 CARD BODY
========================================================= */

.solution-item__body {
  display: flex;

  flex: 1;

  flex-direction: column;

  padding: 1.35rem;
}


.solution-item__category {
  display: inline-flex;

  align-self: flex-start;

  margin-bottom: 0.65rem;

  padding:
      0.32rem
      0.6rem;

  border-radius: 999px;

  color: var(--fluence-blue);

  background: #edf8ff;

  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


/* =========================================================
 TITLE
========================================================= */

.solution-item__title {
  margin: 0 0 0.7rem;

  font-size: 1.08rem;

  line-height: 1.4;
}


.solution-item__title a {
  color: #2d414e;

  font-weight: 800;

  text-decoration: none;

  transition:
      color 0.2s ease;
}


.solution-item__title a:hover {
  color: var(--fluence-blue);
}


/* =========================================================
 SUMMARY
========================================================= */

.solution-item__summary {
  margin: 0;

  color: #73838e;

  font-size: 0.82rem;

  line-height: 1.65;
}


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

.solution-item__footer {
  margin-top: auto;

  padding-top: 1.2rem;
}


.solution-item__action {
  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  color: var(--fluence-blue);

  font-size: 0.75rem;
  font-weight: 800;

  text-decoration: none;

  transition:
      gap 0.2s ease,
      color 0.2s ease;
}


.solution-item__action:hover {
  gap: 0.65rem;

  color: #087acb;
}


/* =========================================================
 EMPTY STATE
========================================================= */

.solutions-page__empty {
  padding: 4rem 2rem;

  border:
      1px solid
      #dceaf1;

  border-radius: 20px;

  background:
      #f8fcfe;

  text-align: center;
}


.solutions-page__empty-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin:
      0
      auto
      1rem;

  border-radius: 50%;

  color: var(--fluence-blue);

  background: #e8f6ff;

  font-size: 1.2rem;
}


.solutions-page__empty h2 {
  margin-bottom: 0.45rem;

  color: #314652;

  font-size: 1.25rem;
  font-weight: 800;
}


.solutions-page__empty p {
  margin: 0;

  color: #81909a;

  font-size: 0.82rem;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

  .solutions-page {
      padding:
          2rem
          0
          4rem;
  }


  .solutions-page__hero {
      margin-bottom: 3rem;

      padding:
          2.2rem
          1.6rem;

      border-radius: 22px;
  }


  .solutions-page__heading {
      align-items: flex-start;

      flex-direction: column;

      gap: 0.8rem;
  }

}


@media (max-width: 575.98px) {

  .solutions-page__hero {
      padding:
          1.8rem
          1.25rem;
  }

}



/* =========================================================
   SOLUTION DETAIL PAGE
========================================================= */

.solution-detail-page {
  padding: 3.5rem 0 6rem;

  background:
      linear-gradient(
          180deg,
          #f8fdff 0,
          #ffffff 420px
      );
}


/* =========================================================
 MAIN PANEL
========================================================= */

.solution-detail-page__panel {
  overflow: hidden;

  padding: 2rem;

  border: 1px solid #dceaf1;

  border-radius: 26px;

  background: #ffffff;

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.06);
}


/* =========================================================
 IMAGE
========================================================= */

.solution-detail-page__image {
  overflow: hidden;

  height: 100%;
  min-height: 560px;

  border-radius: 20px;

  background: #f2f8fb;
}


.solution-detail-page__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
 INFO
========================================================= */

.solution-detail-page__info {
  display: flex;

  flex-direction: column;
  justify-content: center;

  min-height: 100%;

  padding:
      1.5rem
      1.25rem
      1.5rem
      0;
}


.solution-detail-page__eyebrow {
  display: inline-block;

  margin-bottom: 0.65rem;

  color: var(--fluence-blue);

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


/* =========================================================
 CATEGORY
========================================================= */

.solution-detail-page__category {
  display: inline-flex;

  align-self: flex-start;

  margin-bottom: 1rem;

  padding:
      0.4rem
      0.7rem;

  border-radius: 999px;

  color: var(--fluence-blue);

  background: #edf8ff;

  font-size: 0.67rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


/* =========================================================
 TITLE
========================================================= */

.solution-detail-page__title {
  max-width: 700px;

  margin:
      0
      0
      1.15rem;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.4rem
      );

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -0.03em;
}


/* =========================================================
 SUMMARY
========================================================= */

.solution-detail-page__summary {
  max-width: 680px;

  margin-bottom: 1.5rem;

  color: #526975;

  font-size: 1rem;
  font-weight: 500;

  line-height: 1.75;
}


/* =========================================================
 CONTENT
========================================================= */

.solution-detail-page__content {
  max-width: 720px;

  color: #6d7f89;

  font-size: 0.9rem;

  line-height: 1.8;
}


.solution-detail-page__content p {
  margin-bottom: 1rem;
}


.solution-detail-page__content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
 ACTIONS
========================================================= */

.solution-detail-page__actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.75rem;

  margin-top: 2rem;
}


.solution-detail-page__primary-action,
.solution-detail-page__secondary-action {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.5rem;

  min-height: 46px;

  padding:
      0.72rem
      1.2rem;

  border-radius: 10px;

  font-size: 0.77rem;
  font-weight: 800;

  text-decoration: none;

  transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease;
}


.solution-detail-page__primary-action {
  border: 1px solid var(--fluence-blue);

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  box-shadow:
      0 8px 20px
      rgba(10, 137, 233, 0.15);
}


.solution-detail-page__primary-action:hover {
  transform: translateY(-2px);

  color: #ffffff;

  box-shadow:
      0 12px 26px
      rgba(10, 137, 233, 0.22);
}


.solution-detail-page__secondary-action {
  border: 1px solid #cfe3ec;

  color: var(--fluence-blue);

  background: #ffffff;
}


.solution-detail-page__secondary-action:hover {
  transform: translateY(-2px);

  border-color:
      rgba(10, 137, 233, 0.35);

  color: var(--fluence-blue);

  background: #f6fcff;
}


/* =========================================================
 RELATED PRODUCTS
========================================================= */

.solution-related-products {
  margin-top: 5rem;
}


.solution-related-products__header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 2rem;
}


.solution-related-products__eyebrow {
  display: block;

  margin-bottom: 0.35rem;

  color: var(--fluence-blue);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.solution-related-products__header h2 {
  margin: 0;

  color: #263746;

  font-size:
      clamp(
          1.7rem,
          3vw,
          2.25rem
      );

  font-weight: 800;

  line-height: 1.2;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .solution-detail-page__image {
      min-height: 460px;
  }


  .solution-detail-page__info {
      padding:
          0.75rem
          0.5rem;
  }

}


@media (max-width: 767.98px) {

  .solution-detail-page {
      padding:
          2rem
          0
          4rem;
  }


  .solution-detail-page__panel {
      padding: 1rem;

      border-radius: 20px;
  }


  .solution-detail-page__image {
      min-height: 360px;

      border-radius: 16px;
  }


  .solution-related-products {
      margin-top: 3.5rem;
  }

}


@media (max-width: 575.98px) {

  .solution-detail-page__image {
      min-height: 300px;
  }


  .solution-detail-page__actions {
      align-items: stretch;

      flex-direction: column;
  }


  .solution-detail-page__primary-action,
  .solution-detail-page__secondary-action {
      width: 100%;
  }

}



/* =========================================================
   PRODUCTS PAGE
========================================================= */

.products-page {
  padding: 3.5rem 0 6rem;

  background:
      linear-gradient(
          180deg,
          #f8fdff 0,
          #ffffff 380px
      );
}


/* =========================================================
 HERO
========================================================= */

.products-page__hero {
  position: relative;

  overflow: hidden;

  margin-bottom: 4rem;

  padding: 3.25rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.12);

  border-radius: 28px;

  background:
      linear-gradient(
          135deg,
          #f1faff 0%,
          #f3fdff 55%,
          #f8ffff 100%
      );

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.07);
}


.products-page__hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -80px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
      rgba(82, 232, 230, 0.16);

  filter: blur(10px);

  pointer-events: none;
}


.products-page__hero::after {
  content: "";

  position: absolute;

  right: 140px;
  bottom: -150px;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background:
      rgba(10, 137, 233, 0.08);

  pointer-events: none;
}


.products-page__hero-content {
  position: relative;

  z-index: 1;

  max-width: 760px;
}


.products-page__eyebrow {
  display: inline-block;

  margin-bottom: 0.7rem;

  color: var(--fluence-blue);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.products-page__hero h1 {
  margin: 0 0 0.9rem;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.2rem
      );

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.025em;
}


.products-page__hero p {
  max-width: 680px;

  margin: 0;

  color: #687985;

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
 SECTION HEADING
========================================================= */

.products-page__heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 1.5rem;

  margin-bottom: 2rem;
}


.products-page__section-eyebrow {
  display: block;

  margin-bottom: 0.35rem;

  color: var(--fluence-blue);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.products-page__heading h2 {
  margin: 0;

  color: #263746;

  font-size:
      clamp(
          1.7rem,
          3vw,
          2.25rem
      );

  font-weight: 800;

  line-height: 1.2;
}


.products-page__count {
  flex: 0 0 auto;

  padding:
      0.5rem
      0.8rem;

  border:
      1px solid
      #d9eaf2;

  border-radius: 999px;

  color: #687985;

  background: #f8fcfe;

  font-size: 0.72rem;
  font-weight: 700;
}


/* =========================================================
 PRODUCT CARDS
========================================================= */

.products-page .product-item {
  display: flex;

  flex-direction: column;

  height: 100%;

  padding: 1rem;

  border:
      1px solid
      #e0ebf0;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
      0 8px 26px
      rgba(10, 137, 233, 0.04);

  transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
}


.products-page .product-item:hover {
  transform: translateY(-4px);

  border-color:
      rgba(10, 137, 233, 0.2);

  box-shadow:
      0 16px 34px
      rgba(10, 137, 233, 0.085);
}


/* =========================================================
 PRODUCT IMAGE
========================================================= */

.products-page .product-item figure {
  overflow: hidden;

  margin-bottom: 1rem !important;

  border-radius: 12px;

  background: #f4f9fb;
}


.products-page .product-item figure a {
  display: block;
}


.products-page .product-item .tab-image {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: contain;

  padding: 0.5rem;

  transition:
      transform 0.3s ease;
}


.products-page .product-item:hover .tab-image {
  transform: scale(1.03);
}


/* =========================================================
 PRODUCT TITLE
========================================================= */

.products-page .product-item h3 {
  font-size: 0.95rem;

  line-height: 1.4;
}


.products-page .product-item h3 a {
  color: #30434f;

  font-weight: 800;

  transition:
      color 0.2s ease;
}


.products-page .product-item h3 a:hover {
  color: var(--fluence-blue);
}


/* =========================================================
 PRODUCT TEXT
========================================================= */

.products-page .product-item .small.text-muted {
  color: #81909a !important;
}


.products-page .product-item p {
  line-height: 1.6;
}


/* =========================================================
 BUTTON
========================================================= */

.products-page .product-item .btn {
  align-self: flex-start;

  margin-top: auto;

  border-radius: 9px;

  font-size: 0.7rem;
  font-weight: 800;
}


/* =========================================================
 NEW PRODUCT
========================================================= */

.products-page .product-item.is-new {
  position: relative;
}


.products-page .product-item.is-new::before {
  content: "New";

  position: absolute;

  z-index: 2;

  top: 1.65rem;
  left: 1.65rem;

  padding:
      0.3rem
      0.55rem;

  border-radius: 999px;

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  font-size: 0.6rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  box-shadow:
      0 5px 14px
      rgba(10, 137, 233, 0.18);
}


/* =========================================================
 EMPTY STATE
========================================================= */

.products-page__empty {
  padding:
      4rem
      2rem;

  border:
      1px solid
      #dceaf1;

  border-radius: 20px;

  background: #f8fcfe;

  text-align: center;
}


.products-page__empty-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin:
      0
      auto
      1rem;

  border-radius: 50%;

  color: var(--fluence-blue);

  background: #e8f6ff;

  font-size: 1.15rem;
}


.products-page__empty h2 {
  margin-bottom: 0.45rem;

  color: #314652;

  font-size: 1.25rem;
  font-weight: 800;
}


.products-page__empty p {
  margin: 0;

  color: #81909a;

  font-size: 0.82rem;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

  .products-page {
      padding:
          2rem
          0
          4rem;
  }


  .products-page__hero {
      margin-bottom: 3rem;

      padding:
          2.2rem
          1.6rem;

      border-radius: 22px;
  }


  .products-page__heading {
      align-items: flex-start;

      flex-direction: column;

      gap: 0.8rem;
  }

}


@media (max-width: 575.98px) {

  .products-page__hero {
      padding:
          1.8rem
          1.25rem;
  }

}





/* =========================================================
   ALL PRODUCTS PAGE
========================================================= */

.all-products-page {
  padding: 3.5rem 0 6rem;

  background:
      linear-gradient(
          180deg,
          #f8fdff 0,
          #ffffff 380px
      );
}


/* =========================================================
 HERO
========================================================= */

.all-products-page__hero {
  position: relative;

  overflow: hidden;

  margin-bottom: 4rem;

  padding: 3.25rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.12);

  border-radius: 28px;

  background:
      linear-gradient(
          135deg,
          #f1faff 0%,
          #f3fdff 55%,
          #f8ffff 100%
      );

  box-shadow:
      0 18px 55px
      rgba(10, 137, 233, 0.07);
}


.all-products-page__hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -80px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
      rgba(82, 232, 230, 0.16);

  filter: blur(10px);

  pointer-events: none;
}


.all-products-page__hero::after {
  content: "";

  position: absolute;

  right: 140px;
  bottom: -150px;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background:
      rgba(10, 137, 233, 0.08);

  pointer-events: none;
}


.all-products-page__hero-content {
  position: relative;

  z-index: 1;

  max-width: 760px;
}


.all-products-page__eyebrow {
  display: inline-block;

  margin-bottom: 0.7rem;

  color: var(--fluence-blue);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.all-products-page__hero h1 {
  margin: 0 0 0.9rem;

  color: #263746;

  font-size:
      clamp(
          2.2rem,
          4vw,
          3.2rem
      );

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.025em;
}


.all-products-page__hero p {
  max-width: 680px;

  margin: 0;

  color: #687985;

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
 PRODUCT GROUP
========================================================= */

.all-products-group {
  margin-bottom: 4.5rem;
}


.all-products-group:last-child {
  margin-bottom: 0;
}


/* =========================================================
 CATEGORY HEADER
========================================================= */

.all-products-group__header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 1.5rem;

  margin-bottom: 2rem;

  padding-bottom: 1rem;

  border-bottom:
      1px solid
      #dfeaf0;
}


.all-products-group__eyebrow {
  display: block;

  margin-bottom: 0.35rem;

  color: var(--fluence-blue);

  font-size: 0.68rem;
  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.all-products-group__header h2 {
  margin: 0;

  color: #263746;

  font-size:
      clamp(
          1.55rem,
          2.5vw,
          2rem
      );

  font-weight: 800;

  line-height: 1.2;
}


.all-products-group__count {
  flex: 0 0 auto;

  padding:
      0.48rem
      0.8rem;

  border:
      1px solid
      #d9eaf2;

  border-radius: 999px;

  color: #687985;

  background: #f8fcfe;

  font-size: 0.7rem;
  font-weight: 700;
}


/* =========================================================
 PRODUCT CARDS
========================================================= */

.all-products-page .product-item {
  display: flex;

  flex-direction: column;

  height: 100%;

  padding: 1rem;

  border:
      1px solid
      #e0ebf0;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
      0 8px 26px
      rgba(10, 137, 233, 0.04);

  transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
}


.all-products-page .product-item:hover {
  transform:
      translateY(-4px);

  border-color:
      rgba(10, 137, 233, 0.2);

  box-shadow:
      0 16px 34px
      rgba(10, 137, 233, 0.085);
}


/* =========================================================
 PRODUCT IMAGE
========================================================= */

.all-products-page .product-item figure {
  overflow: hidden;

  margin-bottom: 1rem !important;

  border-radius: 12px;

  background: #f4f9fb;
}


.all-products-page .product-item figure a {
  display: block;
}


.all-products-page .product-item .tab-image {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: contain;

  padding: 0.5rem;

  transition:
      transform 0.3s ease;
}


.all-products-page .product-item:hover .tab-image {
  transform:
      scale(1.03);
}


/* =========================================================
 PRODUCT TITLE
========================================================= */

.all-products-page .product-item h3 {
  font-size: 0.95rem;

  line-height: 1.4;
}


.all-products-page .product-item h3 a {
  color: #30434f;

  font-weight: 800;

  transition:
      color 0.2s ease;
}


.all-products-page .product-item h3 a:hover {
  color:
      var(--fluence-blue);
}


/* =========================================================
 PRODUCT TEXT
========================================================= */

.all-products-page .product-item .small.text-muted {
  color:
      #81909a !important;
}


.all-products-page .product-item p {
  line-height: 1.6;
}


/* =========================================================
 BUTTON
========================================================= */

.all-products-page .product-item .btn {
  align-self: flex-start;

  margin-top: auto;

  border-radius: 9px;

  font-size: 0.7rem;
  font-weight: 800;
}


/* =========================================================
 NEW PRODUCT
========================================================= */

.all-products-page .product-item.is-new {
  position: relative;
}


.all-products-page .product-item.is-new::before {
  content: "New";

  position: absolute;

  z-index: 2;

  top: 1.65rem;
  left: 1.65rem;

  padding:
      0.3rem
      0.55rem;

  border-radius: 999px;

  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  font-size: 0.6rem;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  box-shadow:
      0 5px 14px
      rgba(10, 137, 233, 0.18);
}


/* =========================================================
 CATEGORY EMPTY
========================================================= */

.all-products-group__empty {
  padding:
      1.5rem;

  border:
      1px solid
      #dceaf1;

  border-radius: 14px;

  color: #81909a;

  background: #f8fcfe;

  font-size: 0.82rem;

  text-align: center;
}


/* =========================================================
 PAGE EMPTY
========================================================= */

.all-products-page__empty {
  padding:
      4rem
      2rem;

  border:
      1px solid
      #dceaf1;

  border-radius: 20px;

  background:
      #f8fcfe;

  text-align: center;
}


.all-products-page__empty-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  margin:
      0
      auto
      1rem;

  border-radius: 50%;

  color:
      var(--fluence-blue);

  background:
      #e8f6ff;

  font-size: 1.15rem;
}


.all-products-page__empty h2 {
  margin-bottom: 0.45rem;

  color: #314652;

  font-size: 1.25rem;
  font-weight: 800;
}


.all-products-page__empty p {
  margin: 0;

  color: #81909a;

  font-size: 0.82rem;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

  .all-products-page {
      padding:
          2rem
          0
          4rem;
  }


  .all-products-page__hero {
      margin-bottom: 3rem;

      padding:
          2.2rem
          1.6rem;

      border-radius: 22px;
  }


  .all-products-group {
      margin-bottom: 3.5rem;
  }


  .all-products-group__header {
      align-items: flex-start;

      flex-direction: column;

      gap: 0.8rem;
  }

}


@media (max-width: 575.98px) {

  .all-products-page__hero {
      padding:
          1.8rem
          1.25rem;
  }

}









/* =========================================================
   PRODUCT DESCRIPTION
========================================================= */

.desc-box {
  position: relative;
}


.desc-content {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding-right: 0.5rem;

  color: #687b86;

  line-height: 1.8;

  transition:
      opacity 0.2s ease;
}


/* =========================================================
 COLLAPSED
========================================================= */

.desc-content.is-clamped {
  overflow: hidden;
}


.desc-content.is-clamped::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 65px;

  pointer-events: none;

  background:
      linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          #ffffff 90%
      );
}


/* =========================================================
 EXPANDED
 SAME HEIGHT - INTERNAL SCROLL
========================================================= */

.desc-content.is-expanded {
  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color:
      rgba(10, 137, 233, 0.35)
      transparent;
}


.desc-content.is-expanded::after {
  display: none;
}


/* Chrome / Safari */

.desc-content.is-expanded::-webkit-scrollbar {
  width: 5px;
}


.desc-content.is-expanded::-webkit-scrollbar-track {
  background: transparent;
}


.desc-content.is-expanded::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
      rgba(10, 137, 233, 0.3);
}


.desc-content.is-expanded::-webkit-scrollbar-thumb:hover {
  background:
      rgba(10, 137, 233, 0.5);
}


/* =========================================================
 READ MORE BUTTON
========================================================= */

.readmore-btn {
  margin-top: 0.7rem;

  padding:
      0.2rem
      0;

  border: 0;

  color: var(--fluence-blue);

  background: transparent;

  font-size: 0.78rem;
  font-weight: 800;

  text-decoration: none;
}


.readmore-btn:hover,
.readmore-btn:focus {
  color: var(--fluence-cyan);

  text-decoration: none;

  box-shadow: none;
}








/* =========================================================
   PRODUCT DETAIL TABS
========================================================= */

.product-tabs {
  margin-top: 4.5rem;
}


/* =========================================================
 TAB NAVIGATION WRAPPER
========================================================= */

.product-tabs__nav-wrap {
  display: flex;
  justify-content: center;

  margin-bottom: 1.5rem;
}


/* =========================================================
 TAB NAVIGATION
========================================================= */

.product-tabs__nav {
  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  width: auto;

  margin: 0;

  padding: 0.4rem;

  border: 1px solid #dcecf4;

  border-radius: 16px;

  background:
      linear-gradient(
          135deg,
          #f5fbff 0%,
          #f3fcfd 100%
      );

  box-shadow:
      0 8px 24px
      rgba(10, 137, 233, 0.05);
}


/* remove bootstrap tab borders */

.product-tabs__nav .nav-item {
  flex: 0 0 auto;
}


.product-tabs__nav .nav-link {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  min-height: 46px;

  padding:
      0.7rem
      1.15rem;

  margin: 0;

  border: 0 !important;

  border-radius: 11px;

  color: #71828d;

  background: transparent;

  font-size: 0.76rem;
  font-weight: 800;

  white-space: nowrap;

  transition:
      color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
}


/* =========================================================
 TAB ICON
========================================================= */

.product-tabs__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 8px;

  color: var(--fluence-blue);

  background:
      rgba(10, 137, 233, 0.08);

  font-size: 0.75rem;

  transition:
      color 0.2s ease,
      background 0.2s ease;
}


/* =========================================================
 HOVER
========================================================= */

.product-tabs__nav .nav-link:hover {
  color: var(--fluence-blue);

  background:
      rgba(255, 255, 255, 0.75);
}


/* =========================================================
 ACTIVE TAB
========================================================= */

.product-tabs__nav .nav-link.active {
  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue) 0%,
          var(--fluence-cyan) 100%
      );

  box-shadow:
      0 7px 18px
      rgba(10, 137, 233, 0.18);

  transform:
      translateY(-1px);
}


.product-tabs__nav .nav-link.active .product-tabs__icon {
  color: #ffffff;

  background:
      rgba(255, 255, 255, 0.16);
}


/* =========================================================
 TAB CONTENT PANEL
========================================================= */

.product-tabs__content {
  padding: 2rem;

  border: 1px solid #dfeaf0;

  border-radius: 20px;

  background: #ffffff;

  box-shadow:
      0 14px 42px
      rgba(10, 137, 233, 0.045);
}


/* =========================================================
 TAB PANE ANIMATION
========================================================= */

.product-tabs__content .tab-pane {
  color: #657985;

  animation:
      productTabFade
      0.22s ease;
}


@keyframes productTabFade {

  from {
      opacity: 0;
      transform:
          translateY(4px);
  }

  to {
      opacity: 1;
      transform:
          translateY(0);
  }

}


/* =========================================================
 SPECIFICATION TITLE
========================================================= */

.product-tabs__content .spec-section-title {
  margin-bottom: 1rem;

  color: #263746;

  font-size: 0.95rem;
  font-weight: 800;
}


/* =========================================================
 SPECIFICATION TABLE
========================================================= */

.product-tabs__content .spec-sheet {
  overflow: hidden;

  border: 1px solid #e0eaf0;

  border-radius: 14px;
}


.product-tabs__content .spec-section-title {
  padding:
      0.9rem
      1rem;

  margin: 0;

  border-bottom:
      1px solid #e4edf2;

  background:
      #f5fbfe;
}


.product-tabs__content .spec-row {
  display: grid;

  grid-template-columns:
      minmax(180px, 32%)
      1fr;

  border-bottom:
      1px solid #e8eff3;
}


.product-tabs__content .spec-row:last-child {
  border-bottom: 0;
}


.product-tabs__content .spec-label,
.product-tabs__content .spec-value {
  padding:
      0.85rem
      1rem;

  font-size: 0.8rem;

  line-height: 1.55;
}


.product-tabs__content .spec-label {
  color: #435a67;

  background: #f9fcfd;

  font-weight: 700;
}


.product-tabs__content .spec-value {
  color: #697d88;

  background: #ffffff;
}


/* =========================================================
 DESCRIPTION TAB
========================================================= */

.product-tabs__content
#tabDescription {
  max-width: 1000px;

  color: #687b86;

  font-size: 0.9rem;

  line-height: 1.85;
}


.product-tabs__content
#tabDescription p:last-child {
  margin-bottom: 0;
}


/* =========================================================
 DOCUMENT TAB
========================================================= */

.product-tabs__content .docs-grid {
  gap: 1rem;
}


/* =========================================================
 MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .product-tabs {
      margin-top: 3.5rem;
  }


  .product-tabs__nav-wrap {
      justify-content: flex-start;

      overflow-x: auto;

      padding-bottom: 0.35rem;

      scrollbar-width: none;
  }


  .product-tabs__nav-wrap::-webkit-scrollbar {
      display: none;
  }


  .product-tabs__nav {
      flex-wrap: nowrap;

      min-width: max-content;
  }


  .product-tabs__nav .nav-link {
      min-height: 44px;

      padding:
          0.65rem
          0.9rem;

      font-size: 0.72rem;
  }


  .product-tabs__icon {
      width: 26px;
      height: 26px;
  }


  .product-tabs__content {
      padding: 1.25rem;

      border-radius: 16px;
  }

}


/* =========================================================
 SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .product-tabs__content .spec-row {
      grid-template-columns: 1fr;
  }


  .product-tabs__content .spec-label {
      border-bottom:
          1px solid #e8eff3;
  }

}





/* =========================================================
   PRODUCT TABS SECTION
========================================================= */

.product-tabs-section {
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
}


/* =========================================================
 EMPTY TAB STATE
========================================================= */

.product-tabs__empty {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-height: 180px;

  padding: 2rem;

  text-align: center;

  color: #81909c;
}


.product-tabs__empty i {
  margin-bottom: 0.8rem;

  color: var(--fluence-blue);

  font-size: 1.6rem;

  opacity: 0.65;
}


.product-tabs__empty p {
  margin: 0;

  font-size: 0.85rem;
}


/* =========================================================
 DESCRIPTION CONTENT
========================================================= */

.product-tab-description {
  max-width: 1050px;

  color: #687b86;

  font-size: 0.9rem;
  line-height: 1.85;
}


.product-tab-description p:last-child {
  margin-bottom: 0;
}












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

.site-footer {
  position: relative;

  padding:
      4.5rem
      0
      1.5rem;

  border-top:
      1px solid
      rgba(10, 137, 233, 0.1);

  background:
      linear-gradient(
          180deg,
          #f8fdff 0%,
          #f3fbfe 100%
      );
}


/* =========================================================
 BRAND
========================================================= */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  max-width: 285px;
}

.site-footer__logo {
  display: block;
  margin: 0;
}

.site-footer__tagline {
  margin: 0;
}

/* =========================================================
 TITLES
========================================================= */

.site-footer__title {
  position: relative;

  margin:
      0
      0
      1.35rem;

  padding-bottom: 0.65rem;

  color: #263746;

  font-size: 0.88rem;
  font-weight: 800;
}


.site-footer__title::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 28px;
  height: 2px;

  border-radius: 999px;

  background:
      linear-gradient(
          90deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );
}


/* =========================================================
 LINKS
========================================================= */

.site-footer__links {
  display: flex;

  flex-direction: column;

  gap: 0.7rem;

  margin: 0;
  padding: 0;

  list-style: none;
}


.site-footer__links a {
  display: inline-block;

  color: #71828d;

  font-size: 0.8rem;
  line-height: 1.5;

  text-decoration: none;

  transition:
      color 0.2s ease,
      transform 0.2s ease;
}


.site-footer__links a:hover {
  color: var(--fluence-blue);

  transform:
      translateX(3px);
}


/* =========================================================
 CONTACT
========================================================= */

.site-footer__contact {
  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin: 0;
  padding: 0;

  list-style: none;
}


.site-footer__contact li {
  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  color: #71828d;

  font-size: 0.8rem;
  line-height: 1.6;
}


.site-footer__contact a {
  color: inherit;

  text-decoration: none;

  transition:
      color 0.2s ease;
}


.site-footer__contact a:hover {
  color: var(--fluence-blue);
}


/* =========================================================
 CONTACT ICON
========================================================= */

.site-footer__contact-icon {
  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  margin-top: -0.15rem;

  border-radius: 9px;

  color: var(--fluence-blue);

  background:
      rgba(10, 137, 233, 0.08);

  font-size: 0.72rem;
}


/* =========================================================
 BOTTOM
========================================================= */

.site-footer__bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;

  margin-top: 3.75rem;
  padding-top: 1.4rem;

  border-top:
      1px solid
      rgba(10, 137, 233, 0.1);
}


.site-footer__copyright {
  margin: 0;

  color: #8a98a2;

  font-size: 0.74rem;
}


.site-footer__bottom-links {
  display: flex;

  align-items: center;

  gap: 1.35rem;
}


.site-footer__bottom-links a {
  color: #7c8c97;

  font-size: 0.74rem;

  text-decoration: none;

  transition:
      color 0.2s ease;
}


.site-footer__bottom-links a:hover {
  color: var(--fluence-blue);
}


/* =========================================================
 TABLET
========================================================= */

@media (max-width: 991.98px) {

  .site-footer {
      padding-top: 4rem;
  }


  .site-footer__brand {
      max-width: 320px;
  }

}

/* =========================================================
   FOOTER — MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .site-footer {
      padding:
          3.5rem
          0
          1.5rem;
  }


  /* Brand / Logo area */

  .site-footer__brand {
      display: flex;
      flex-direction: column;
      align-items: center;

      max-width: 100%;

      margin:
          0
          auto
          1.75rem;

      text-align: center;
  }


  .site-footer__logo {
      display: block;

      margin:
          0
          auto
          1.4rem;
  }


  .site-footer__logo img {
      display: block;

      width: 145px;
      height: auto;

      margin: 0 auto;
  }


  .site-footer__tagline {
      max-width: 330px;

      margin: 0 auto;

      color: #71828d;

      font-size: 0.8rem;
      line-height: 1.75;

      text-align: center;
  }


  /* Give space between brand and footer columns */

  .site-footer__brand + * {
      margin-top: 0;
  }


  .site-footer__bottom {
      flex-direction: column;

      align-items: center;

      margin-top: 3rem;

      text-align: center;
  }


  .site-footer__bottom-links {
      justify-content: center;
  }

}


@media (max-width: 767.98px) {

    .site-footer__brand-column {
        display: flex;
        justify-content: center;

        margin-bottom: 0.75rem;
    }

}




/* =========================================================
   ALL PRODUCTS — CATEGORY HEADER
========================================================= */

.all-products-group__header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 2rem;

  margin-bottom: 1.75rem;
}


.all-products-group__actions {
  display: flex;

  align-items: center;

  gap: 1rem;
}


/* =========================================================
 CATEGORY COUNT
========================================================= */

.all-products-group__count {
  display: inline-flex;

  align-items: center;

  min-height: 34px;

  padding:
      0.45rem
      0.8rem;

  border:
      1px solid
      rgba(10, 137, 233, 0.1);

  border-radius: 999px;

  color: #70838f;

  background: #f5fbfe;

  font-size: 0.72rem;
  font-weight: 700;
}


/* =========================================================
 VIEW ALL
========================================================= */

.all-products-group__view-all {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: var(--fluence-blue);

  font-size: 0.78rem;
  font-weight: 800;

  text-decoration: none;

  white-space: nowrap;

  transition:
      color 0.2s ease,
      gap 0.2s ease;
}


.all-products-group__view-all i {
  font-size: 0.7rem;

  transition:
      transform 0.2s ease;
}


.all-products-group__view-all:hover {
  color: var(--fluence-cyan);

  gap: 0.65rem;
}


.all-products-group__view-all:hover i {
  transform:
      translateX(3px);
}


/* =========================================================
 OPTIONAL BOTTOM CTA
========================================================= */

.all-products-group__footer {
  display: flex;

  justify-content: center;

  margin-top: 2rem;
}


.all-products-group__more {
  border-radius: 10px;

  padding:
      0.7rem
      1.15rem;

  font-size: 0.78rem;
  font-weight: 700;
}


/* =========================================================
 MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .all-products-group__header {
      align-items: flex-start;

      gap: 1rem;
  }


  .all-products-group__actions {
      flex-direction: column;

      align-items: flex-end;

      gap: 0.6rem;
  }

}


/* =========================================================
 SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .all-products-group__header {
      flex-direction: column;

      align-items: flex-start;
  }


  .all-products-group__actions {
      flex-direction: row;

      align-items: center;
      justify-content: space-between;

      width: 100%;
  }

}



/* =========================================================
   PRODUCTS PAGINATION
========================================================= */

.products-pagination {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  margin-top: 3.5rem;
}


.products-pagination__inner {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.4rem;

  border:
      1px solid
      #dcecf4;

  border-radius: 15px;

  background:
      linear-gradient(
          135deg,
          #f5fbff 0%,
          #f4fcfd 100%
      );

  box-shadow:
      0 10px 30px
      rgba(10, 137, 233, 0.05);
}


/* =========================================================
 PREVIOUS / NEXT
========================================================= */

.products-pagination__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.5rem;

  min-height: 40px;

  padding:
      0.6rem
      0.9rem;

  border-radius: 10px;

  color: #5f7180;

  background: #ffffff;

  font-size: 0.75rem;
  font-weight: 800;

  text-decoration: none;

  transition:
      color 0.2s ease,
      background 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
}


.products-pagination__button:hover {
  color: var(--fluence-blue);

  background: #ffffff;

  transform:
      translateY(-1px);

  box-shadow:
      0 5px 14px
      rgba(10, 137, 233, 0.1);
}


.products-pagination__button.is-disabled {
  color: #b4c0c7;

  background: transparent;

  cursor: not-allowed;

  box-shadow: none;

  transform: none;
}


/* =========================================================
 PAGE NUMBERS
========================================================= */

.products-pagination__pages {
  display: flex;

  align-items: center;

  gap: 0.3rem;
}


.products-pagination__page {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 10px;

  color: #697d89;

  font-size: 0.75rem;
  font-weight: 800;

  text-decoration: none;

  transition:
      color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease;
}


.products-pagination__page:hover {
  color: var(--fluence-blue);

  background:
      rgba(10, 137, 233, 0.07);
}


.products-pagination__page.is-active {
  color: #ffffff;

  background:
      linear-gradient(
          135deg,
          var(--fluence-blue),
          var(--fluence-cyan)
      );

  box-shadow:
      0 6px 16px
      rgba(10, 137, 233, 0.18);
}


/* =========================================================
 PAGE INFO
========================================================= */

.products-pagination__info {
  color: #85949e;

  font-size: 0.72rem;
}


.products-pagination__info strong {
  color: #526773;

  font-weight: 800;
}


/* =========================================================
 AJAX LOADING
========================================================= */

.products-page__results {
  position: relative;

  transition:
      opacity 0.2s ease;
}


.products-page__results.is-loading {
  opacity: 0.45;

  pointer-events: none;
}


/* =========================================================
 MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .products-pagination {
      margin-top: 2.75rem;
  }


  .products-pagination__inner {
      width: 100%;

      justify-content: space-between;
  }


  .products-pagination__button {
      width: 42px;

      padding:
          0.6rem
          0.7rem;
  }


  .products-pagination__button span {
      display: none;
  }


  .products-pagination__page {
      width: 36px;
      height: 36px;
  }


  .products-pagination__pages {
      gap: 0.15rem;
  }

}







.home-v2-contact__layout,

.home-v2-contact-detail .dropdown {
    overflow: visible !important;
}




.home-v2-contact__info::after {
  overflow: hidden !important;

}


.home-v2-contact__details {
    position: relative !important;
    z-index: 50 !important;
}

.home-v2-contact-detail:has(.dropdown.show) {
    position: relative !important;
    z-index: 100 !important;
}

.home-v2-contact-detail .dropdown.show {
    position: relative !important;
    z-index: 200 !important;
}

.home-v2-contact-detail .dropdown-menu.show {
    position: absolute !important;
    z-index: 9999 !important;
}