:root {
  /* Fluid base font size:
     - 12px at 360px
     - 16px at 992px
  */
  --base-fs: 16px;
}

@media (min-width: 992px) {
  :root {
    --base-fs: 16px; /* fixed 16px until 1199px */
  }
}

@media (min-width: 1200px) {
  :root {
    --base-fs: 16px; /* fixed 18px from 1200px upwards */
  }
}

:root {
    --color-primary: #1e91e9;
    --color-secondary: #727f96;
    --color-tertiary: #e91e91;
    --color-dark: #0A2540;
    --color-light: #E7ECF1;
    --color-error: #B71D1C;
    --color-error-secondary: #FFF5F4;
    --color-success: #1B5E20;
    --color-link: #007AFF;
    --color-primary-muted: #F6F9FC;
    --color-white: #fff;
    --color-block: #000;

    --spacer-1: 0.25rem;
    --spacer-2: 0.5rem;
    --spacer-3: 0.5rem;
    --spacer-4: 1rem;
    --spacer-5: 1.5rem;
    --spacer-6: 1.5rem;
    --spacer-7: 3rem;
    --spacer-8: 3rem;
    --spacer-9: 3rem;
    --spacer-10: 3rem;

    --border-radius-1: 0px;
    --border-radius-2: 4px;

    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
    /* --box-shadow-card: 0 6px 12px -6px #0000001A, 0 10px 15px -10px #32325D40; */
    --box-shadow-card-hover: 0 12px 24px -12px #1e91e933, 0 20px 30px -20px #1e91e980;

    --border-width: 1px;
    
    --border-primary: var(--border-width) solid var(--color-primary);
    --border-secondary: var(--border-width) solid var(--color-secondary);
    --border-tertiary: var(--border-width) solid var(--color-tertiary);
    --border-dark: var(--border-width) solid var(--color-dark);
    --border-light: var(--border-width) solid var(--color-light);
    --border-error: var(--border-width) solid var(--color-error);
    --border-error-secondary: var(--border-width) solid var(--color-error-secondary);
    --border-link: var(--border-width) solid var(--color-link);

    --border-card: var(--border-light);

    --container-max-width-sm: 540px; /* bootstrap default: 540px */
    --container-max-width-md: 720px; /* bootstrap default: 720px */
    --container-max-width-lg: 960px; /* bootstrap default: 960px */
    --container-max-width-xl: 1080px; /* bootstrap default: 1140px */
    --container-max-width-xxl: 1080px; /* bootstrap default: 1320px */

    /* Font Family 1 */

    --ff-1: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Font Weights */

    --fw-100: 100;
    --fw-150: 150;
    --fw-200: 200;
    --fw-250: 250;
    --fw-300: 300;
    --fw-350: 350;
    --fw-400: 400;
    --fw-450: 450;
    --fw-500: 500;
    --fw-550: 550;
    --fw-600: 600;
    --fw-650: 650;
    --fw-700: 700;
    --fw-750: 750;
    --fw-800: 800;
    --fw-850: 850;
    --fw-900: 900;
  
    /* h1 */
    --h1-fs: calc(4 * var(--base-fs));                     /* 72px */
    --h1-lh: calc(1.06 * var(--h1-fs));                    /* ~76px */
    --h1-font: var(--fw-700) var(--h1-fs)/var(--h1-lh) var(--ff-1);
    --h1-ls: normal;
  
    /* h2 */
    --h2-fs: calc(3.063 * var(--base-fs));                 /* ~55px */
    --h2-lh: calc(1.23 * var(--h2-fs));                    /* ~68px */
    --h2-font: var(--fw-700) var(--h2-fs)/var(--h2-lh) var(--ff-1);
    --h2-ls: normal;
  
    /* h3 */
    --h3-fs: calc(2.062 * var(--base-fs));                 /* ~37px */
    --h3-lh: calc(1.29 * var(--h3-fs));                    /* ~48px */
    --h3-font: var(--fw-700) var(--h3-fs)/var(--h3-lh) var(--ff-1);
    --h3-ls: normal;
  
    /* h4 */
    --h4-fs: calc(1.411 * var(--base-fs));                 /* ~25px */
    --h4-lh: calc(1.42 * var(--h4-fs));                    /* ~36px */
    --h4-font: var(--fw-700) var(--h4-fs)/var(--h4-lh) var(--ff-1);
    --h4-ls: normal;
  
    /* h5 */
    --h5-fs: calc(1.254 * var(--base-fs));                 /* ~23px */
    --h5-lh: calc(1.42 * var(--h5-fs));                    /* ~32px */
    --h5-font: var(--fw-700) var(--h5-fs)/var(--h5-lh) var(--ff-1);
    --h5-ls: normal;
  
    /* p1 */
    --p1-fs: calc(1 * var(--base-fs));                     /* 18px */
    --p1-lh: calc(1.56 * var(--p1-fs));                    /* ~28px */
    --p1-font: var(--fw-400) var(--p1-fs)/var(--p1-lh) var(--ff-1);
    --p1-ls: normal;
  
    /* p2 */
    --p2-fs: calc(0.889 * var(--base-fs));                 /* ~16px */
    --p2-lh: calc(1.5 * var(--p2-fs));                     /* ~24px */
    --p2-font: var(--fw-400) var(--p2-fs)/var(--p2-lh) var(--ff-1);
    --p2-ls: normal;
  
    /* Accent 1 */
    --accent-1-fs: calc(0.969 * var(--base-fs));           /* ~17px */
    --accent-1-lh: calc(1.6 * var(--accent-1-fs));         /* ~28px */
    --accent-1-font: var(--fw-500) var(--accent-1-fs)/var(--accent-1-lh) var(--ff-1);
    --accent-1-ls: normal;
  
    /* Link 1 */
    --link-1-fs: calc(0.847 * var(--base-fs));             /* ~15px */
    --link-1-lh: 1;                                        /* tight for inline use */
    --link-1-font: var(--fw-400) var(--link-1-fs)/var(--link-1-lh) var(--ff-1);
    --link-1-ls: normal;
}

.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}

.svg-16px {
    height: var(--spacer-4);
    width: var(--spacer-4);
}
.svg-20px {
    height: 20px;
    width: 20px;
}

.enine-text-primary {
    color: var(--color-primary);
}
.enine-text-secondary {
    color: var(--color-secondary);
}
.enine-text-tertiary {
    color: var(--color-tertiary);
}
.enine-text-dark {
    color: var(--color-dark)
}

.enine-btn-primary {
    --bs-btn-color: var(--color-light);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-light);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 211,212,213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.enine-btn-primary:visited {
    color: var(--color-light);
}
.enine-btn-primary:hover {
    color: var(--color-primary);
}
.enine-btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-light);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 211,212,213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.enine-btn-outline-primary:visited {
    color: var(--color-primary);
}
.enine-btn-outline-primary:hover {
    color: var(--color-light);
}

.enine-btn-light {
    --bs-btn-color: var(--color-primary);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 211,212,213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.enine-btn-light:visited {
    color: var(--color-primary);
}
.enine-btn-light:hover {
    color: var(--color-light);
}
.enine-btn-outline-light {
    --bs-btn-color: var(--color-light);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-light);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-light);
    --bs-btn-hover-border-color: var(--color-light);
    --bs-btn-focus-shadow-rgb: 211,212,213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.enine-btn-outline-light:visited {
    color: var(--color-light);
}
.enine-btn-outline-light:hover {
    color: var(--color-primary);
}

/*  Website Structure */

body {
    color: var(--color-dark);
}

/* #enineFooter > .header,
#enineFooter > .body,
#enineFooter > .footer,
#enineHeader, .enine-section {
    width: 100%;
    padding-inline: var(--spacer-4);
} */
.enine-section {
    padding-block: 1rem;
}

#enineHeader {
    position: sticky;
    top: 0;
    z-index: 2000;
    background-color: var(--color-primary-muted);
}

/* @media screen and (min-width: 768px) {
    #enineFooter > .header,
    #enineFooter > .body,
    #enineFooter > .footer,
    #enineHeader, .enine-section {
        padding-inline: var(--spacer-6);
    }
} */
@media screen and (min-width: 992px) {
    /* #enineFooter > .header,
    #enineFooter > .body,
    #enineFooter > .footer,
    #enineHeader, .enine-section {
        padding-inline: calc((100vw - var(--container-max-width-lg))/2);
    } */
    /* .enine-section {
        padding-block: 96px;
    } */
}
/* @media screen and (min-width: 1200px) {
    #enineFooter > .header,
    #enineFooter > .body,
    #enineFooter > .footer,
    #enineHeader, .enine-section {
        padding-inline: calc((100vw - var(--container-max-width-xl))/2);
    } */
    .enine-section {
        padding-block: 3rem;
    }
}
/* @media screen and (min-width: 1400px) {
    #enineFooter > .header,
    #enineFooter > .body,
    #enineFooter > .footer,
    #enineHeader, .enine-section {
        padding-inline: calc((100vw - var(--container-max-width-xxl))/2);
    }
} */

/* Alert */

.alert.enine-alert {
    width: 100%;
    background-color: var(--color-primary);
    border: none;
    color: var(--color-light);
}
.alert.enine-alert.success {
    background-color: var(--color-primary);
    border: none;
    color: var(--color-light);
}
.alert.enine-alert.danger {
    background-color: var(--color-error);
    border: none;
    color: var(--color-light);
}


/*  Truncate */

/* ===== Base truncation styles ===== */
[class*="truncate-"] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== XS (default) ===== */
.truncate-1 { -webkit-line-clamp: 1; }
.truncate-2 { -webkit-line-clamp: 2; }
.truncate-3 { -webkit-line-clamp: 3; }
.truncate-4 { -webkit-line-clamp: 4; }
.truncate-5 { -webkit-line-clamp: 5; }

/* ===== SM and up (≥576px) ===== */
@media (min-width: 576px) {
    .truncate-sm-1 { -webkit-line-clamp: 1; }
    .truncate-sm-2 { -webkit-line-clamp: 2; }
    .truncate-sm-3 { -webkit-line-clamp: 3; }
    .truncate-sm-4 { -webkit-line-clamp: 4; }
    .truncate-sm-5 { -webkit-line-clamp: 5; }
}

/* ===== MD and up (≥768px) ===== */
@media (min-width: 768px) {
    .truncate-md-1 { -webkit-line-clamp: 1; }
    .truncate-md-2 { -webkit-line-clamp: 2; }
    .truncate-md-3 { -webkit-line-clamp: 3; }
    .truncate-md-4 { -webkit-line-clamp: 4; }
    .truncate-md-5 { -webkit-line-clamp: 5; }
}

/* ===== LG and up (≥992px) ===== */
@media (min-width: 992px) {
    .truncate-lg-1 { -webkit-line-clamp: 1; }
    .truncate-lg-2 { -webkit-line-clamp: 2; }
    .truncate-lg-3 { -webkit-line-clamp: 3; }
    .truncate-lg-4 { -webkit-line-clamp: 4; }
    .truncate-lg-5 { -webkit-line-clamp: 5; }
}

/* ===== XL and up (≥1200px) ===== */
@media (min-width: 1200px) {
    .truncate-xl-1 { -webkit-line-clamp: 1; }
    .truncate-xl-2 { -webkit-line-clamp: 2; }
    .truncate-xl-3 { -webkit-line-clamp: 3; }
    .truncate-xl-4 { -webkit-line-clamp: 4; }
    .truncate-xl-5 { -webkit-line-clamp: 5; }
}

/* ===== XXL and up (≥1400px) ===== */
@media (min-width: 1400px) {
    .truncate-xxl-1 { -webkit-line-clamp: 1; }
    .truncate-xxl-2 { -webkit-line-clamp: 2; }
    .truncate-xxl-3 { -webkit-line-clamp: 3; }
    .truncate-xxl-4 { -webkit-line-clamp: 4; }
    .truncate-xxl-5 { -webkit-line-clamp: 5; }
}

/* Footer */

#enineFooter.primary {
    background-color: var(--color-primary);
    color: var(--color-light);
}
#enineFooter.secondary {
    background-color: var(--color-secondary);
    color: var(--color-dark);
}
#enineFooter.tertiary {
    background-color: var(--color-tertiary);
    color: var(--color-light);
}
#enineFooter .header > div {
    border-bottom: 1px solid var(--color-primary);
}
#enineFooter.light {
    background-color: var(--color-primary-muted);
}
#enineFooter .header > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#enineFooter .footer > div {
    border-top: 1px solid var(--color-primary);
}

/*  Header */

#enineHeader nav {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: var(--spacer-4);
    color: var(--color-primary);
}
@media screen and (min-width: 992px) {
    #enineHeader nav {
        min-height: 72px;
        --bs-navbar-padding-y: 0;
    }
}
#enineHeader nav .nav-link {
    color: var(--color-primary) !important;
    border-radius: 0.25rem;
    background-color: transparent;
    border: 1px solid transparent;
    padding: var(--spacer-1) var(--spacer-2);
}
#enineHeader nav .nav-link:hover {
    color: var(--color-light) !important;
    background-color: var(--color-primary);
}
#enineHeader nav .nav-link.cta {
    color: var(--color-light) !important;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
#enineHeader nav .nav-link.cta:hover {
    color: var(--color-primary) !important;
    background-color: transparent;
}

/*  Breadcrumbs */

.enine-section.breadcrumbs {
    padding-block: 1rem;
}

/* Landing Hero Section */

.enine-section.landing-hero {
    padding-block: 0px;
}

.enine-section.landing-hero > div {
    display: flex;
    flex-direction: column;
    height: clamp(350px, calc(100vh - (72px)), 650px);
    position: relative;
}
.enine-section.landing-hero .title {
    width: 100%;
    margin-top: auto;
    margin-bottom: var(--spacer-4);
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
}
.enine-section.landing-hero .description {
    width: 100%;
    margin-bottom: var(--spacer-4);
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}
.enine-section.landing-hero .content {
    width: 100%;
    margin-bottom: auto;
    display: flex;
    gap: var(--spacer-3);
}
.enine-section.landing-hero > div > img {
    display: none;
}
@media screen and (min-width: 992px) {
    .enine-section.landing-hero > div {
        align-items: end;
        height: clamp(500px, calc(100vh - (72px)), 1000px);
    }
    .enine-section.landing-hero .title {
        margin-bottom: var(--spacer-6);
        width: 63%;
        font: var(--h2-font);
        letter-spacing: var(--h2-ls);
    }
    .enine-section.landing-hero .description {
        width: 63%;
        margin-bottom: var(--spacer-6);
        font: var(--p1-font);
        letter-spacing: var(--p1-ls);
    }
    .enine-section.landing-hero .content {
        width: 63%;
    }
    .enine-section.landing-hero > div > img {
        height: 100%;
        width: 37%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: contain;
    }
}
@media screen and (min-width: 1200px) {
    .enine-section.landing-hero .title {
        width: 58%;
        font: var(--h1-font);
        letter-spacing: var(--h1-ls);
    }
    .enine-section.landing-hero .description {
        width: 58%;
    }
    .enine-section.landing-hero .content {
        width: 58%;
    }
    .enine-section.landing-hero > img {
        width: 42%;
    }
}

/* Detail Hero */

.enine-section.hero {
    padding-block: 0px;
}

.enine-section.hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-top: var(--spacer-9);
}
@media screen and (min-width: 992px) {
    .enine-section.hero img {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-top: 96px;
    }    
}
@media screen and (min-width: 1200px) {
    .enine-section.hero img {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-top: 128px;
    }    
}


/* Table */

.enine-section.table-section {
    padding-block: 3rem;
}

.auto-width {
  width: calc((100vw - 48px)/6);
}


.enine-section.table-section .table-wrapper {
    width: 100%;
    height: auto;
    border: var(--border-light);
    border-radius: var(--border-radius-2);
    overflow: hidden;
}

.enine-section.table-section table {
    text-wrap: nowrap;
    font-variant-numeric: tabular-nums;
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
    margin-bottom: -1px;
}

table.enine-table thead {
    background-color: var(--color-primary) !important;
    color: var(--color-light) !important;
    font-weight: 300 !important;
    text-transform: uppercase;
}
table.enine-table thead th {
    font-weight: 300 !important;
}

.enine-section.table-section .card {
    height: 100%;
    border: var(--border-card);
    background-color: transparent;
    box-shadow: var(--box-shadow-card);
    transition: all 0.25s ease-in-out;
    border-radius: var(--border-radius-2);
}
/* .enine-section.table-section .card:hover {
    box-shadow: var(--box-shadow-card-hover);
} */
.enine-section.table-section .card .card-header {
    background-color: var(--color-primary);
    color: var(--color-light);
    text-align: center;
    align-content: center;
    flex-grow: 1;
    padding-block: var(--spacer-1);
    text-transform: uppercase;
    border-radius: var(--border-radius-2) var(--border-radius-2) var(--border-radius-1) var(--border-radius-1);
    font: var(--p1-font);
    letter-spacing: var((--p1-ls));
}
.enine-section.table-section .card .card-body {
    background-color: transparent;
    color: var(--color-dark);
    text-align: center;
    align-content: end;
    flex-grow: 0;
    font: var(--h5-font);
    letter-spacing: var(--h5-ls);
    border-radius: var(--border-radius-2);
}


/* .enine-section.hero {
    padding-block: 3rem;
    height: calc(50vh - 72px);
    align-content: center;
    position: relative;
}
.enine-section.hero .content {
    position: absolute;
    top: 0;
    width: 100%;
    padding-block: 1rem;
    margin-inline: calc(-1 * 1rem);
}
@media screen and (min-width: 768px) {
    .enine-section.hero .content {
        margin-inline: calc(-1 * 2rem);
    }
}
@media screen and (min-width: 1200px) {
    .enine-section.hero .content {
        margin-inline: calc((100vw - var(--container-max-width-xl)) / -2);
    }
}
@media screen and (min-width: 1400px) {
    .enine-section.hero .content {
        margin-inline: calc((100vw - var(--container-max-width-xxl)) / -2);
    }
} */

/* About Hero */

.enine-section.about-hero {
    padding-block: var(--spacer-6);
}
.enine-section.about-hero .title {
    font: var(--h1-font);
    letter-spacing: var(--h1-ls);
    text-align: center;
}


/* Section 1 */

.enine-section.section-1 {
    background-color: var(--color-primary-muted);
}

.enine-section.section-1 .accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
    color: var(--color-primary);
    margin-bottom: var(--spacer-5);
}
.enine-section.section-1 .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-5);
}
.enine-section.section-1 .description {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    margin-bottom: var(--spacer-9);
    gap: var(--spacer-6);
}
@media screen and (min-width: 992px) {
    .enine-section.section-1 .description {
        flex-direction: row;
    }
}

.enine-section.section-1 .card-container {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

.enine-section.section-1 .card {
    width: 100%;
    height: auto;
    display: block;
    border: solid 0px transparent;
    overflow: hidden;
    transition: all 0.25s ease-in-out;
    box-shadow: var(--box-shadow-card);
    border-radius: var(--spacer-2);
}
.enine-section.section-1 .card:hover {
    box-shadow: var(--box-shadow-card-hover);
}
.enine-section.section-1 img {
    width: 100%;
    aspect-ratio: 16/9;
    padding: var(--spacer-1);
    object-fit: cover;
    border: none;
    border-radius: var(--spacer-1);
    max-width: 70%; 
    max-height: 70%; 
    object-fit: contain;
}
@media screen and (min-width: 992px) {
    .enine-section.section-1 img {
        height: 140px;
        aspect-ratio: 1;
    }
}
.enine-section.section-1 .card-body {
    height: auto;
    width: 100%;
    padding: var(--spacer-6);
    display: flex;
    flex-direction: column;
    align-items: start;
    transition: height 0.25s ease-in-out;
    position: relative;
}
.enine-section.section-1 .card .card-title {
    font: var(--h4-font);
    letter-spacing: var(--h4-ls);
    margin-bottom: var(--spacer-3);
}
.enine-section.section-1 .card .card-text {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.enine-section.section-1 .card .card-link {
    display: block;
    font: var(--link-1-font);
    letter-spacing: var(--link-1-ls);
    color: var(--color-primary);
    height: auto;
    margin-top: var(--spacer-6);
    transition: all 0.25s ease-in-out;
    text-decoration: underline !important;
    overflow: hidden;
}
@media screen and (min-width: 992px) {
    .enine-section.section-1 .card .card-link {
        position: absolute;
        top: calc( 100% - var(--spacer-6));
        left: var(--spacer-6);
        right: var(--spacer-6);
        opacity: 0;
    }    
    .enine-section.section-1 .card .card-link.visible {
        position: static;
        opacity: 1;
        top: auto;
    }    
}

/* Section 2 */

.enine-section.section-2 {
    padding-block: var(--spacer-5);
}

.enine-section.section-2 .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-5);
}
.enine-section.section-2 .description {
    width: 100%;
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
@media screen and (min-width: 992px) {
    .enine-section.section-2 .description {
        flex-direction: row;
    }
}

.enine-section.section-2 .card-container-wrapper {
    position: relative;
}

.enine-section.section-2 .card-container {
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    --bs-gutter-x: 24px;
    --bs-gutter-y: 0px;
    padding-block: var(--spacer-9);
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.enine-section.section-2 .card-container::-webkit-scrollbar {
  display: none;
}
.enine-section.section-2 .card-container-wrapper .scroll-bar {
    width: 176px;
    height: 2px;
    background-color: var(--color-light);
    overflow: hidden;
    padding: 0px;
}
.enine-section.section-2 .card-container-wrapper .scroll-bar > div {
    height: 100%;
    width: 100%;
    position: relative;
}
.enine-section.section-2 .card-container-wrapper .scroll-bar > div > div {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    background-color: var(--color-primary);
}

.enine-section.section-2 .card {
    height: 100%;
    border-radius: var(--spacer-2);
    border-top: solid 8px var(--color-primary);
    border-left: solid 0px transparent;
    border-right: solid 0px transparent;
    border-bottom: solid 0px transparent;
    transition: all 0.25s ease-in-out;
    box-shadow: var(--box-shadow-card);
    background-color: var(--color-primary-muted);
}
.enine-section.section-2 .card:hover {
    box-shadow: var(--box-shadow-card-hover);
}
.enine-section.section-2 .card-body {
    height: 100%;
    width: 100%;
    padding-block: var(--spacer-9);
    padding-inline: var(--spacer-6);
    display: flex;
    flex-direction: column;
}
.enine-section.section-2 .card .card-title {
    font: var(--h4-font);
    letter-spacing: var(--h4-ls);
    margin-bottom: var(--spacer-3);
}
.enine-section.section-2 .card .card-text {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.enine-section.section-2 .card .card-link {
    display: block;
    font: var(--link-1-font);
    letter-spacing: var(--link-1-ls);
    color: var(--color-primary);
    transition: all 0.25s ease-in-out;
    text-decoration: underline !important;
    overflow: hidden;
    margin-top: var(--spacer-6);
}
.enine-section.section-2 .accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
    color: var(--color-primary);
    margin-top: var(--spacer-1);
}

/* Section 3 */

.enine-section.section-3 {
    --bs-gutter-x: var(--spacer-5);
}
.enine-section.section-3 .accent {
    color: var(--color-primary);
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
    margin-bottom: var(--spacer-6);
    padding-right: var(--spacer-9);
}
.enine-section.section-3 .title {
    font: var(--h3-font);
    letter-spacing: var(--h2-ls);
    margin-bottom: var(--spacer-6);
}
@media screen and (min-width: 992px) {
    .enine-section.section-3 .title {
        padding-right: var(--spacer-9);
    }
}
.enine-section.section-3 .description,
.enine-section.section-3 .content {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    margin-bottom: var(--spacer-6);
}
@media screen and (min-width: 992px) {
    .enine-section.section-3 .description {
        padding-right: var(--spacer-9);
    }
}
.enine-section.section-3 .content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--spacer-2);
}
.enine-section.section-3 img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--spacer-1);
    max-width: 70%; 
    max-height: 70%; 
    object-fit: contain;
}
.enine-section.section-3 .section {
    padding-top: 48px;
}
@media screen and (min-width: 992px) {
    .enine-section.section-3 .section {
        padding-top: 48px;
    }
}
@media screen and (min-width: 1200px) {
    .enine-section.section-3 .section {
        padding-top: 48px;
    }
}
.enine-section.section-3 .section-icon {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
    margin-bottom: var(--spacer-4);
}
.enine-section.section-3 .section-title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-5);
    padding-right: var(--spacer-9)
}
.enine-section.section-3 .section-data {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    padding-right: var(--spacer-9)
}
@media screen and (min-width: 992px) {
    .enine-section.section-3 .content {
        flex-direction: row;
    }
    .enine-section.section-3.odd .title,
    .enine-section.section-3.odd .accent,
    .enine-section.section-3.odd p.description,
    .enine-section.section-3.odd .redirect-button,
    .enine-section.section-3.odd .content {
        padding-left: var(--spacer-4);
    }
    .enine-section.section-3.odd ul.description {
        padding-left: var(--spacer-8);
    }
    .enine-section.section-3.even .row div:first-of-type {
        order: 1;
    }
    .enine-section.section-3.even .row div:nth-of-type(2) {
        order: 2;
    }
    /* Changes made by Akbar */
    .enine-section.section-3.odd .row > div:first-of-type {
        order: 2;
    }
    .enine-section.section-3.odd .row div:nth-of-type(2) {
        order: 1;
    }
    .enine-section.section-3 .row div:nth-of-type(3) {
        order: 3;
    }
    .enine-section.section-3 .row div:nth-of-type(4) {
        order: 4;
    }
    .enine-section.section-3 .row div:nth-of-type(5) {
        order: 5;
    }
    .enine-section.section-3 .row div:nth-of-type(6) {
        order: 6;
    }
    .enine-section.section-3 .row div:nth-of-type(7) {
        order: 7;
    }
    .enine-section.section-3 .row div:nth-of-type(8) {
        order: 8;
    }
    .enine-section.section-3 .row div:nth-of-type(9) {
        order: 9;
    }
}

/* Section 4 */

.enine-section.section-4 {
    padding-block: var(--spacer-7);
    background-color: var(--color-primary-muted);
}
.enine-section.section-4 .title {
    font: var(--h3-font);
    font-weight: 500;
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-5);
}
.enine-section.section-4 .description {
    width: 100%;
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}

.enine-section.section-4 .card-container {
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    --bs-gutter-x: 24px;
    --bs-gutter-y: 0px;
    padding-block: var(--spacer-9);
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.enine-section.section-4 .card-container::-webkit-scrollbar {
  display: none;
}
.enine-section.section-4 .scroll-bar {
    width: 176px;
    height: 2px;
    background-color: var(--color-light);
    overflow: hidden;
    padding: 0px;
}
.enine-section.section-4 .scroll-bar > div {
    height: 100%;
    width: 100%;
    position: relative;
}
.enine-section.section-4 .scroll-bar > div > div {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    background-color: var(--color-primary);
}

.enine-section.section-4 .section-title {
    font: var(--h4-font);
    font-weight: 500;
    letter-spacing: var(--h4-ls);
    margin-bottom: var(--spacer-3);
}
.enine-section.section-4 .section-text {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}

/* Section 5 */

.enine-section.section-5 {
    padding-block: var(--spacer-7);
}
.enine-section.section-5 .accent {
    font: var(--accent-1-font);
    letter-spacing: var(--accent-1-ls);
    color: var(--color-primary);
    margin-bottom: var(--spacer-5);
}
.enine-section.section-5 .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-5);
}
.enine-section.section-5 .description {
    width: 100%;
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    margin-bottom: var(--spacer-9);
}
@media screen and (min-width: 992px) {
    .enine-section.section-5 .description {
        width: calc(100%/1.5);
    }    
}

.enine-section.section-5 .card-container {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

.enine-section.section-5 .card {
    height: 100%;
    border-radius: var(--spacer-2);
    border: solid 0px transparent;
    transition: all 0.25s ease-in-out;
    box-shadow: var(--box-shadow-card);
    background-color: var(--color-primary-muted);
}
.enine-section.section-5 .card:hover {
    box-shadow: var(--box-shadow-card-hover);
}
.enine-section.section-5 .card-img {
    width: 20%;
    aspect-ratio: 1;
    margin: var(--spacer-1);
    border-radius: var(--spacer-1);
    object-fit: cover;
    border: none;
}
.enine-section.section-5 .card-body {
    padding: var(--spacer-6);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.enine-section.section-5 .card-body > div {
    flex: 1 0;
    align-content: center;
}
.enine-section.section-5 .card .card-title {
    font: var(--h5-font);
    letter-spacing: var(--h5-ls);
    margin-bottom: var(--spacer-3);
}
.enine-section.section-5 .card .card-text {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}
.enine-section.section-5 .card .card-link {
    display: block;
    font: var(--link-1-font);
    letter-spacing: var(--link-1-ls);
    color: var(--color-primary);
    height: 0px;
    margin-top: 0px;
    transition: all 0.25s ease-in-out;
    text-decoration: underline !important;
    overflow: hidden;
}
.enine-section.section-5 .card:hover .card-link {
    height: 28px;
    margin-top: var(--spacer-6);
}

/* Problem Solved Section */

.enine-section.problem-solved .title {
    font: var(--h2-font);
    letter-spacing: var(--h1-ls);
    margin-bottom: var(--spacer-4);
}
.enine-section.problem-solved .sub-title,
.enine-section.problem-solved .metric-title {
    font: var(--h3-font);
    letter-spacing: var(--h2-ls);
    margin-bottom: var(--spacer-4);
}
.enine-section.problem-solved .sub-title {
    margin-top: var(--spacer-6);
}
.enine-section.problem-solved .description,
.enine-section.problem-solved .metric-value {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.enine-section.problem-solved .metric-value {
    margin-bottom: var(--spacer-5);
}


/* Results Section */

.enine-section.results .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-4);
    text-align: center;
}
.enine-section.results .metric-title {
    font: var(--h5-font);
    letter-spacing: var(--h5-ls);
    margin-bottom: var(--spacer-2);
    text-align: center;
}
.enine-section.results .metric-value {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
    margin-bottom: var(--spacer-5);
    text-align: center;
}

.enine-section.results .sub-title {
    font: var(--h2-font);
    letter-spacing: var(--h2-ls);
    margin-bottom: var(--spacer-4);
    text-align: center;
}
.enine-section.results .content-title {
    font: var(--h4-font);
    letter-spacing: var(--h4-ls);
    margin-bottom: var(--spacer-2);
    text-align: center;
}
.enine-section.results .content-value {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    text-align: center;
}

/* Form Section */

.enine-section.form {
    padding-block: var(--spacer-6);
}
.enine-section.form .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-4);
}
.enine-section.form .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    margin-bottom: var(--spacer-6);
}
.enine-section.form .content {
    font: var(--p2-font);
    letter-spacing: var(--p2-ls);
}

/* Get In Touch Section */

.enine-section.get-in-touch .content {
    width: 100%;
}

/* Career Cards section */

.enine-section.career-cards {
    padding-block: var(--spacer-6);
}
/* .enine-section.career-cards .title {
    font: var(--h1-font);
    letter-spacing: var(--h1-ls);
    margin-bottom: var(--spacer-7);
    text-align: center;
} */
.career-cards-hero .title {
    margin-left: var(--spacer-4);
}
.career-cards-hero .description {
    margin-left: var(--spacer-4);
}
.enine-section.career-cards .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    margin-bottom: var(--spacer-6);
}
.enine-section.career-cards .enine-card .card-title {
    font: var(--h4-font);
    letter-spacing: var(--h4-ls);
}
.enine-section.career-cards .enine-card {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
    border: none;
    background-color: var(--color-primary-muted);
}

/*  Career Details */

.enine-section.career-detail {
    padding-block: var(--spacer-6);
}
.enine-section.career-detail .title {
    font: var(--h1-font);
    letter-spacing: var(--h1-ls);
}
.enine-section.career-detail .description,
.enine-section.career-detail .attributes,
.enine-section.career-detail .requirements {
    font: var(--h4-font);
    letter-spacing: var(--h4-ls);
    margin-bottom: var(--spacer-6);
}
.enine-section.career-detail .attributes {
    margin-bottom: var(--spacer-7);
}


/* CTA */
.enine-section.cta {
    padding-block: 64px;
    background-color: var(--color-primary);
    color: var(--color-light);
}
.enine-section.cta .title,
.enine-section.cta .description {
    color: var(--color-light);
}
.enine-section.cta .title {
    font: var(--h3-font);
    letter-spacing: var(--h3-ls);
    margin-bottom: var(--spacer-5);
}
.enine-section.cta .description {
    font: var(--p1-font);
    letter-spacing: var(--p1-ls);
}
.enine-section.cta .content {
    width: 100%;
    display: flex;
    gap: var(--spacer-2);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacer-5);
}

/* Card */

.enine-card .card-icon {
    height: 48px;
    width: 48px;
    background-color: var(--color-primary-muted);
    border-radius: 0.5rem;
    margin-right: 0.5rem;
}

/* Scroll Buttons & Bar */

.scroll-btn-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacer-1);
    align-items: center;
    flex-shrink: 0;
}
.scroll-btn-container button {
    display: flex;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    padding: 0px;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    background-color: var(--color-primary-muted);
    color: var(--color-primary);
    transition: all 0.25s ease-in-out;
}
.scroll-btn-container button:hover {
    color: var(--color-light);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.scroll-btn-container button:disabled {
    color: var(--color-secondary);
    background-color: transparent;
    border-color: var(--color-light);
}

/* temp hero */
.enine-section.about-hero-temp {
    background: linear-gradient(to right, white 50%, rgba(255,255,255,0) 100%), url("../img/tesellating_tile.svg") repeat;
}

.enine-section.about-hero-temp .title {
    font-weight: 700;
    font-size: 72px;
}

.enine-section.about-hero-temp .description {
    font-weight: 400;
    font-size: 16px;
}
.enine-footer {
    font-family: var(--ff-1);
}


.enine-section.section-privacy {
    padding-block: var(--spacer-1);
}

.enine-section.section-privacy .title {
    font: var(--h2-font);
    font-weight: 400;
    letter-spacing: var(--h2-ls);
    margin-bottom: var(--spacer-4);
}
.enine-section.section-privacy .sub-title {
    font: var(--p1-font);
    font-weight: 500;
    letter-spacing: var(--p1-ls);
    margin-bottom: var(--spacer-4);
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* align properly */
  }
  
  /* Keep dropdown active when hovering over parent link */
  .nav-item.dropdown:hover > .nav-link {
    color: var(--bs-primary); /* optional, highlight Services */
  }

  .enine-header {
    font-family: var(--ff-1);
  }