/* ---------------- */
/* IIR Theme Styles */
/* ---------------- */

:root {
    /* Logo Based Colors */
    --logo-light-blue: #4197cb;
    --logo-dark-blue: #194f90;
    --logo-orange: #f88d2b;
    --logo-orange-dark: #b05706;
    --iir-energy-blue: #0847ad;
    /* Primary Colors */
    --primary-darkest-blue: #00041f;
    --primary-dark-blue: #00263d;
    --primary-teal: #04757f;
    /* --primary-teal: #045c7f; */ /* less green */
    /* slightly darker teal for WCAG accessibility */
    --primary-teal-dark: #005860;
    /* --primary-teal-dark: #034661; */ /* less green */
    --primary-light-blue: #66ffff;
    --primary-grey: #f2f2f2;
    --primary-light-grey: #f7f8fa;
    /* Fonts */
    --font-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif;
    --font-inter-tight: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif;
    --bs-font-sans-serif: var(--font-inter);
    /* override bootstrap font variable */
    --bs-border-color: #cecece;
    /* slightly darken up the default border color */
}

/* REMOVE TEST WEBSITE BADGE FOR TIME BEING */
.bg-danger.subtitle-white.p-2.position-fixed {
    display: none !important;
}
/* ----- */
/* Fonts */
/* ----- */

@font-face {
    /* Inter Regular */
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-Regular-Variable.woff2') format('woff2-variations'), url('/fonts/inter/Inter-Regular-Variable.woff2') format('woff2'), url('/fonts/inter/Inter-Regular-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    /* Inter Italic */
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-Italic-Variable.woff2') format('woff2-variations'), url('/fonts/inter/Inter-Italic-Variable.woff2') format('woff2'), url('/fonts/inter/Inter-Italic-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    /* Inter Tight Regular */
    font-family: 'Inter Tight';
    src: url('/fonts/inter/InterTight-Regular-Variable.woff2') format('woff2-variations'), url('/fonts/inter/InterTight-Regular-Variable.woff2') format('woff2'), url('/fonts/inter/InterTight-Regular-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    /* Inter Tight Italic */
    font-family: 'Inter Tight';
    src: url('/fonts/inter/InterTight-Italic-Variable.woff2') format('woff2-variations'), url('/fonts/inter/InterTight-Italic-Variable.woff2') format('woff2'), url('/fonts/inter/InterTight-Italic-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

body,
.inter {
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.inter-tight {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
}

h6 {
    font-size: 1.05rem;
}

.fs-7 {
    font-size: 0.775em;
}

.fs-3r {
    font-size: 3rem;
}

/* ----------------- */
/* Responsive Images */
/* ----------------- */

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* ----- */
/* Links */
/* ----- */

a {
    text-decoration: none;
    color: var(--primary-teal);
    transition: all 0.15s ease;
    cursor: pointer;
}

a:hover {
    color: var(--logo-orange);
}

.d-grid {
    display: inline-grid;
}

/* --------------------------- */
/* Override default page width */
/* --------------------------- */

/* .container {
  max-width: 75rem;
} */

/* ------------------------ */
/* Background Color Classes */
/* ------------------------ */
.bg-primary {
    background-color: var(--iir-energy-blue) !important;
}

.bg-stats {
    background: linear-gradient(var(--primary-dark-blue), var(--primary-teal)) !important;
}
.bg-black-50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

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

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

.bg-dark-blue-gradient {
    background: linear-gradient(to right, #000000 0%, #05233c 46%) !important;
}
.bg-dark-blue-gradient-reverse {
    background: linear-gradient(to right, #000000 0%, #05233c 46%) !important;
}

.bg-cta-gradient {
    background: linear-gradient(to right, #004881 0%, #000000 46%) !important;
}

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

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

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

.bg-orange-dark {
    background-color: var(--logo-orange-dark) !important;
}

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

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

.bg-blue-grey {
    background-color: #dee2e6;
}

.bg-black {
    background-color: #000000;
}

.bg-white {
    background-color: #ffffff;
}

.bg-none {
    background-color: transparent;
}

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

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

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

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

.bg-hover-orange:hover {
    background-color: var(--logo-orange) !important;
}

.bg-hover-dark-orange:hover {
    background-color: var(--logo-orange-dark) !important;
}

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

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

.bg-hover-black:hover {
    background-color: #000000 !important;
}

.bg-hover-white:hover {
    background-color: #ffffff !important;
}

.powdah-bloo {
    background-color: #384b61;
}

/* ------------------- */
/* Background Overlays */
/* ------------------- */

.bg-overlay {
    background-color: rgb(0, 0, 0, 0.5);
}

.bg-overlay-top {
    background: linear-gradient(to bottom, #00000080 0%, transparent 50%);
}

.bg-overlay-bottom {
    background: linear-gradient(to top, #00000080 0%, transparent 50%);
}

.bg-overlay-left {
    background: linear-gradient(to right, #00000080 0%, transparent 50%);
}

.bg-overlay-right {
    background: linear-gradient(to left, #00000080 0%, transparent 50%);
}

/* ------------------ */
/* Text Color Classes */
/* ------------------ */

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

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

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

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

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

.text-transparent {
    color: #ffffff82 !important;
}

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

.text-logo-dark-blue {
    color: var(--logo-dark-blue) !important;
}

.text-logo-light-blue {
    color: var(--logo-light-blue) !important;
}

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

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

.text-black {
    color: #000000;
}

.text-white {
    color: #ffffff;
}

.text-muted {
    --bs-text-opacity: 1;
    color: rgba(33, 37, 41, 1) !important;
}

/* ------------------------ */
/* Text Hover Color Classes */
/* ------------------------ */

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

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

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

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

.text-hover-orange:hover {
    color: var(--logo-orange) !important;
}

.text-hover-black:hover {
    color: #000000 !important;
}

.text-hover-white:hover {
    color: #ffffff !important;
}

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

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

/* Text Line Spacing */
.fw-light {
    font-weight: 300 !important;
    line-height: 1.8rem;
}

/* --------- */
/* Subtitles */
/* --------- */

.subtitle-dark-blue,
.subtitle-light-blue,
.subtitle-teal,
.subtitle-orange,
.subtitle-white,
.subtitle-black {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 0.75rem;
}

.subtitle-dark-blue {
    color: var(--primary-dark-blue);
}

.subtitle-light-blue {
    color: var(--primary-light-blue);
}

.subtitle-teal {
    color: var(--primary-teal);
}

.subtitle-orange {
    color: var(--logo-orange);
}

.subtitle-white {
    color: #fff;
}

.subtitle-black {
    color: #000;
}

/* -------------------- */
/* Border Color Classes */
/* -------------------- */

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

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

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

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

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

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

.border-logo-dark-blue {
    border-color: var(--logo-dark-blue) !important;
}

.border-logo-light-blue {
    border-color: var(--logo-light-blue) !important;
}

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

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

.border-black {
    border-color: #000000;
}

.border-white {
    border-color: #ffffff;
}

/* ----------------------- */
/* Border hover classes */
/* ----------------------- */
.border-hover-orange:hover {
    border-color: var(--logo-orange) !important;
}

/* ------------- */
/* Button Styles */
/* ------------- */

.btn {
    border-radius: 0;
}

.btn:focus {
    box-shadow: none !important;
}

/* primary button (dark blue) */
.btn-primary {
    background-color: var(--primary-dark-blue);
    color: var(--primary-light-blue);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--primary-dark-blue);
    color: var(--primary-light-blue);
    opacity: 0.5;
    cursor: no-drop;
}

.btn-primary:hover {
    background-color: var(--primary-teal);
    color: var(--primary-light-blue);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--primary-light-blue);
    color: var(--primary-dark-blue);
}

.btn-primary-inverted {
    background-color: var(--primary-light-blue);
    color: var(--primary-dark-blue);
}

.btn-primary-inverted.disabled,
.btn-primary-inverted:disabled {
    background-color: var(--primary-light-blue);
    color: var(--primary-dark-blue);
    opacity: 0.5;
    cursor: no-drop;
}

.btn-primary-inverted:hover,
.btn-primary-inverted:not(:disabled):not(.disabled):active,
.btn-primary-inverted:not(:disabled):not(.disabled):focus {
    background-color: var(--primary-dark-blue);
    color: var(--primary-light-blue);
}

.btn-primary-wire {
    outline: 1px solid var(--primary-dark-blue);
    outline-offset: -1px;
    color: var(--primary-dark-blue);
}

.btn-primary-wire.disabled,
.btn-primary-wire:disabled {
    outline: 1px solid var(--primary-dark-blue);
    outline-offset: -1px;
    color: var(--primary-dark-blue);
    opacity: 0.5;
    cursor: no-drop;
}

.btn-primary-wire:hover,
.btn-primary-wire:not(:disabled):not(.disabled):active,
.btn-primary-wire:not(:disabled):not(.disabled):focus {
    background-color: var(--primary-dark-blue);
    color: var(--primary-light-blue);
}

.btn-primary-inverted-wire {
    outline: 1px solid var(--primary-teal);
    outline-offset: -1px;
    color: var(--primary-teal);
}

.btn-primary-inverted-wire.disabled,
.btn-primary-inverted-wire:disabled {
    outline: 1px solid var(--primary-teal);
    outline-offset: -1px;
    color: var(--primary-teal);
    opacity: 0.5;
    cursor: no-drop;
}

.btn-primary-inverted-wire:hover,
.btn-primary-inverted-wire:not(:disabled):not(.disabled):active,
.btn-primary-inverted-wire:not(:disabled):not(.disabled):focus {
    background-color: var(--primary-teal);
    color: var(--primary-light-blue);
}

/* secondary button (orange) */
.btn-secondary {
    background-color: var(--logo-orange);
    color: #fff;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    background-color: var(--logo-orange);
    color: #fff;
    opacity: 0.5;
    cursor: no-drop;
}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled):focus {
    background-color: var(--logo-orange-dark);
}

.btn-secondary-inverted {
    background-color: var(--logo-orange-dark);
    color: #fff;
}

.btn-secondary-inverted.disabled,
.btn-secondary-inverted:disabled {
    background-color: var(--logo-orange-dark);
    color: #fff;
    opacity: 0.5;
    cursor: no-drop;
}

.btn-secondary-inverted:hover,
.btn-secondary-inverted:not(:disabled):not(.disabled):active,
.btn-secondary-inverted:not(:disabled):not(.disabled):focus {
    background-color: var(--logo-orange);
    color: #fff;
}

.btn-secondary-wire {
    outline: 1px solid var(--logo-orange);
    outline-offset: -1px;
    color: var(--logo-orange);
}

.btn-secondary-wire.disabled,
.btn-secondary-wire:disabled {
    outline: 1px solid var(--logo-orange);
    outline-offset: -1px;
    color: var(--logo-orange);
    opacity: 0.5;
    cursor: no-drop;
}

.btn-secondary-wire:hover {
    background-color: var(--logo-orange);
    color: #fff;
}

.btn-secondary-wire:not(:disabled):not(.disabled):active,
.btn-secondary-wire:not(:disabled):not(.disabled):focus {
    background-color: var(--logo-orange);
    color: #fff;
}

/* tertiary button (teal) */
.btn-tertiary {
    background-color: var(--primary-teal);
    color: #fff;
}

.btn-tertiary.disabled,
.btn-tertiary:disabled {
    background-color: var(--primary-teal);
    color: #fff;
    opacity: 0.5;
    cursor: no-drop;
}

.btn-tertiary:hover,
.btn-tertiary:not(:disabled):not(.disabled):active,
.btn-tertiary:not(:disabled):not(.disabled):focus {
    background-color: var(--primary-teal-dark);
    color: #fff;
}

.btn-tertiary-inverted {
    background-color: var(--primary-teal-dark);
    color: #fff;
}

.btn-tertiary-inverted.disabled,
.btn-tertiary-inverted:disabled {
    background-color: var(--primary-teal-dark);
    color: #fff;
    opacity: 0.5;
    cursor: no-drop;
}

.btn-tertiary-inverted:hover,
.btn-tertiary-inverted:not(:disabled):not(.disabled):active,
.btn-tertiary-inverted:not(:disabled):not(.disabled):focus {
    background-color: var(--primary-teal);
    color: #fff;
}

.btn-tertiary-wire {
    outline: 1px solid var(--primary-teal);
    outline-offset: -1px;
    color: var(--primary-teal);
}

.btn-tertiary-wire.disabled,
.btn-tertiary-wire:disabled {
    outline: 1px solid var(--primary-teal);
    outline-offset: -1px;
    color: var(--primary-teal);
    opacity: 0.5;
    cursor: no-drop;
}

.btn-tertiary-wire:hover {
    background-color: var(--primary-teal);
    color: #fff;
}

.btn-tertiary-wire:not(:disabled):not(.disabled):active,
.btn-tertiary-wire:not(:disabled):not(.disabled):focus {
    background-color: var(--primary-teal);
    color: #fff;
}

/* ---------------- */
/* Input Components */
/* ---------------- */

.form-check .form-check-label,
.form-check.form-switch,
.form-check.form-switch .form-check-input,
.form-check-input label {
    cursor: pointer;
}

.form-check-input:checked,
.bootstrap .form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate,
.bootstrap .form-check-input[type='checkbox']:indeterminate {
    background-color: var(--primary-dark-blue);
    border-color: var(--primary-dark-blue);
}

/* ----- */
/* Lists */
/* ----- */

ul.arrow li {
    list-style: none;
}

ul.arrow li:before {
    content: '\f124';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    display: inline-block;
    color: var(--logo-orange);
    transform: translateX(-1.5rem) rotate(45deg);
    font-size: 0.7rem;
    margin-right: -0.8rem;
}

/* ---------- */
/* Accordions */
/* ---------- */

.accordion-button:not(.collapsed),
.accordion-button.collapsed:hover {
    color: var(--logo-orange);
    background: transparent;
}

.accordion-button.collapsed:hover::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f88d2b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Teal Arrow */
.accordion-button.collapsed:hover::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2304757f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
    color: var(--primary-teal);
}

/* ---------- */
/* Popovers */
/* ---------- */
.popover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* -------------- */
/* Opacity Styles */
/* -------------- */

.opacity-0 {
    opacity: 0 !important;
}

.opacity-1 {
    opacity: 0.2 !important;
}

.opacity-2 {
    opacity: 0.4 !important;
}

.opacity-3 {
    opacity: 0.6 !important;
}

.opacity-4 {
    opacity: 0.8 !important;
}

.opacity-5 {
    opacity: 1 !important;
}

.opacity-0h5 {
    opacity: 0 !important;
    transition: opacity 0.25s ease-in-out !important;
    -moz-transition: opacity 0.25s ease-in-out !important;
    -webkit-transition: opacity 0.25s ease-in-out !important;
}

.opacity-0h5:hover {
    opacity: 1 !important;
}

.opacity-2h5 {
    opacity: 0.4 !important;
    transition: opacity 0.25s ease-in-out !important;
    -moz-transition: opacity 0.25s ease-in-out !important;
    -webkit-transition: opacity 0.25s ease-in-out !important;
}

.opacity-2h5:hover {
    opacity: 1 !important;
}

.opacity-5h2 {
    opacity: 1 !important;
    transition: opacity 0.25s ease-in-out !important;
    -moz-transition: opacity 0.25s ease-in-out !important;
    -webkit-transition: opacity 0.25s ease-in-out !important;
}

.opacity-5h2:hover {
    opacity: 0.4 !important;
}

.opacity-5h3 {
    opacity: 1 !important;
    transition: opacity 0.25s ease-in-out !important;
    -moz-transition: opacity 0.25s ease-in-out !important;
    -webkit-transition: opacity 0.25s ease-in-out !important;
}

.opacity-5h3:hover {
    opacity: 0.6 !important;
}

/* ------------------- */
/* Text Shadow Classes */
/* ------------------- */

.text-shadow-0 {
    text-shadow: none;
}

.text-shadow-1 {
    text-shadow: 0 0 0.5rem rgb(0, 0, 0);
}

.text-shadow-2 {
    text-shadow: 0 0 0.5rem rgb(0, 0, 0), 0 0 1rem rgb(0, 0, 0);
}

.text-shadow-3 {
    text-shadow: 0 0 0.5rem rgb(0, 0, 0), 0 0 1rem rgb(0, 0, 0), 0 0 1.5rem rgb(0, 0, 0);
}

.text-shadow-4 {
    text-shadow: 0 0 0.5rem rgb(0, 0, 0), 0 0 1rem rgb(0, 0, 0), 0 0 1.5rem rgb(0, 0, 0), 0 0 2rem rgb(0, 0, 0);
}

.text-shadow-5 {
    text-shadow: 0 0 0.5rem rgb(0, 0, 0), 0 0 1rem rgb(0, 0, 0), 0 0 1.5rem rgb(0, 0, 0), 0 0 2rem rgb(0, 0, 0), 0 0 2.5rem rgb(0, 0, 0);
}

/* -------------------- */
/* Hover Effects Styles */
/* -------------------- */

.card-hover,
.grow-hover,
.shadow-hover {
    transition: all 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
}

.grow-hover {
    transform: scale(1);
    transform-origin: center;
}

.grow-hover:hover {
    transform: scale(1.1);
    z-index: 1;
}

.shadow-hover:hover {
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2);
}
/* Hover Effects */

.hover-grow,
.hover-up,
.hover-down,
.hover-left,
.hover-right {
    transition: all 0.25s ease;
}

.hover-grow:hover {
    transform: scale(103%);
}

.hover-up:hover {
    transform: translateY(-4px);
}

.hover-down:hover {
    transform: translateY(4px);
}

.hover-left:hover {
    transform: translateX(-4px);
}

.hover-right:hover {
    transform: translateX(4px);
}

.intelligence-platform {
    background: url('https://media.industrialinfo.com/images/bg-white-abstract-2.webp') no-repeat top center;
    background-size: cover;
}
/* PLatform Cards */
.platform-card {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 110%);
}
.platform-card ul {
    list-style: none;
    padding-left: 0.25rem;
}

.platform-card ul li {
    margin-top: 0.75rem;
}
.hero-wrapper {
    height: calc(100vh - 6.5rem);
}
/* .platform-card ul li:before {
  content: '\f058';
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  margin-right: 0.5rem;
  color: green;
} */

/* ---------------------- */
/* Filter Property Styles */
/* ---------------------- */

.filter-invert-1 {
    filter: invert(1);
}

/* ------------- */
/* Navbar Styles */
/* ------------- */

.navbar.bg-darkest-blue .navbar-toggler-icon,
.navbar.bg-dark-blue .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(102,255,255, 1)' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ------------ */
/* Quick Styles */
/* ------------ */

/* z-index */

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.z-4 {
    z-index: 4;
}

.z-5 {
    z-index: 5;
}

.z-6 {
    z-index: 6;
}

.z-7 {
    z-index: 7;
}

.z-8 {
    z-index: 8;
}

.z-9 {
    z-index: 9;
}

.z-10 {
    z-index: 10;
}

/* padding */

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pt-50 {
    padding-top: 60px !important;
}

.pt-60 {
    padding-top: 60px !important;
}

.pt-70 {
    padding-top: 70px !important;
}

.pt-80 {
    padding-top: 80px !important;
}

.pt-90 {
    padding-top: 90px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-30 {
    padding-bottom: 30px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

.pb-50 {
    padding-bottom: 60px !important;
}

.pb-60 {
    padding-bottom: 60px !important;
}

.pb-70 {
    padding-bottom: 70px !important;
}

.pb-80 {
    padding-bottom: 80px !important;
}

.pb-90 {
    padding-bottom: 90px !important;
}

.pb-100 {
    padding-bottom: 100px !important;
}

.pb-100p {
    padding-bottom: 100% !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-5 {
    padding-left: 5px !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-30 {
    padding-left: 30px !important;
}

.pl-40 {
    padding-left: 40px !important;
}

.pl-50 {
    padding-left: 60px !important;
}

.pl-60 {
    padding-left: 60px !important;
}

.pl-70 {
    padding-left: 70px !important;
}

.pl-80 {
    padding-left: 80px !important;
}

.pl-90 {
    padding-left: 90px !important;
}

.pl-100 {
    padding-left: 100px !important;
}

.pr-0 {
    padding-right: 0px !important;
}

.pr-5 {
    padding-right: 5px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pr-20 {
    padding-right: 20px !important;
}

.pr-30 {
    padding-right: 30px !important;
}

.pr-40 {
    padding-right: 40px !important;
}

.pr-50 {
    padding-right: 60px !important;
}

.pr-60 {
    padding-right: 60px !important;
}

.pr-70 {
    padding-right: 70px !important;
}

.pr-80 {
    padding-right: 80px !important;
}

.pr-90 {
    padding-right: 90px !important;
}

.pr-100 {
    padding-right: 100px !important;
}

/* margin */

.ms-n1 {
    margin-left: -1px !important;
}

.ms-n2 {
    margin-left: -2px !important;
}

.ms-n3 {
    margin-left: -3px !important;
}

.ms-n4 {
    margin-left: -4px !important;
}

.ms-n5 {
    margin-left: -5px !important;
}

.me-n1 {
    margin-right: -1px !important;
}

.me-n2 {
    margin-right: -2px !important;
}

.me-n3 {
    margin-right: -3px !important;
}

.me-n4 {
    margin-right: -4px !important;
}

.m-n5 {
    margin-right: -5px !important;
}

.mt-n1 {
    margin-top: -0.25rem !important;
}

.mt-n2 {
    margin-top: -0.5rem !important;
}

.mt-n3 {
    margin-top: -0.75rem !important;
}

.mt-n4 {
    margin-top: -1rem !important;
}

.mt-n5 {
    margin-top: -1.5rem !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 60px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mt-70 {
    margin-top: 70px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mt-90 {
    margin-top: 90px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

.mt-25rem {
    margin-top: 15% !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 60px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mb-80 {
    margin-bottom: 80px !important;
}

.mb-90 {
    margin-bottom: 90px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.ml-0 {
    margin-left: 0px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.ml-40 {
    margin-left: 40px !important;
}

.ml-50 {
    margin-left: 60px !important;
}

.ml-60 {
    margin-left: 60px !important;
}

.ml-70 {
    margin-left: 70px !important;
}

.ml-80 {
    margin-left: 80px !important;
}

.ml-90 {
    margin-left: 90px !important;
}

.ml-100 {
    margin-left: 100px !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

.mr-40 {
    margin-right: 40px !important;
}

.mr-50 {
    margin-right: 60px !important;
}

.mr-60 {
    margin-right: 60px !important;
}

.mr-70 {
    margin-right: 70px !important;
}

.mr-80 {
    margin-right: 80px !important;
}

.mr-90 {
    margin-right: 90px !important;
}

.mr-100 {
    margin-right: 100px !important;
}

/* letter-spacing */

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-2 {
    letter-spacing: 2px;
}

/*  blur */

.blur-5 {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.blur-10 {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.blur-15 {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.blur-20 {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Center position : absolute element */

.transform-origin-center {
    transform: translate(-50%, -50%);
}

/* Padding */

.py-lg {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

/* Font Size */

/* Default */
.fs-lg {
    font-size: 2rem;
}
.fs-xl {
    font-size: 3rem;
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .fs-lg {
        font-size: 2.5rem;
    }
    .fs-xl {
        font-size: 4rem;
    }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
    .fs-lg {
        font-size: 3rem;
    }
    .fs-xl {
        font-size: 5rem;
    }
}

@media (max-width: 768px) {
    .small {
        font-size: 0.75rem !important;
    }
}

/* Text Balance */

.text-balance {
    text-wrap: balance;
}

/* PowerGen Custom Styles */
.powergen-bg {
    background-color: #f8f9fa;
}

.powergen-cards-shell {
    background: #f8f9fa;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 0.75rem 2rem rgba(5, 35, 60, 0.08);
    border: 1px solid var(--primary-teal);
}

.powergen-section-title {
    color: #05233c;
    font-weight: 650;
}

.powergen-section-title i {
    color: var(--primary-teal);
}

.powergen-card {
    background-color: #ffffff;
    border: 1px solid rgba(5, 35, 60, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
}

.powergen-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(5, 35, 60, 0.14);
    border-color: rgba(8, 71, 173, 0.22);
}

.powergen-card-image-wrap {
    position: relative;
    aspect-ratio: 9 / 5.2;
    overflow: hidden;
    border-bottom: 1px solid rgba(5, 35, 60, 0.08);
}

.powergen-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    padding: 0.75rem;
}

.powergen-card-body {
    color: #000;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    height: 35%;
}

.powergen-card-title {
    color: #000;
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 650;
    margin: 0 0 0.5rem 0;
    min-height: 3.25rem;
}

.powergen-meta {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--primary-teal);
    font-size: 0.86rem;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.powergen-meta i {
    width: 1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.powergen-meta-text {
    color: #000;
    font-weight: 400;
    font-size: 0.92rem;
}

.powergen-actions {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.powergen-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 38px;
    padding: 0.55rem 0.8rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 180ms ease;
    border-radius: 0.5rem;
}

.powergen-action-recording {
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    background: transparent;
}

.powergen-action-recording:hover {
    background: linear-gradient(#326896, #0e2b43);
    border-color: var(--primary-teal);
    color: #fff;
}

.bg-modal-frame {
  background: #d6d6d6;
}

.powergen-action-presentation {
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    background: transparent;
}

.powergen-action-presentation:hover {
    background: var(--logo-orange);
    color: #fff;
    border-color: var(--logo-orange);
}

@media (min-width: 992px) {
    .powergen-cards-shell {
        padding: 2rem;
    }

    .powergen-card-title {
        font-size: 1.18rem;
    }
}

@media (max-width: 991.98px) {
    .powergen-cards-shell {
        padding: 1.25rem;
    }

    .powergen-card-title {
        font-size: 1.08rem;
    }

    .powergen-meta {
        font-size: 0.88rem;
    }

    .powergen-meta-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .powergen-cards-shell {
        padding: 1rem;
    }

    .powergen-card-body {
        padding: 1rem;
    }

    .powergen-card-title {
        font-size: 1rem;
    }

    .powergen-meta {
        font-size: 0.84rem;
        margin-bottom: 0.6rem;
    }

    .powergen-meta-text {
        font-size: 0.92rem;
    }

    .powergen-action {
        min-height: 40px;
        padding: 0.62rem 0.85rem;
        font-size: 0.94rem;
    }
}