/* General Body Styling */

@font-face {
    font-family: "CiscoSansTT";
    src: url('fonts/CiscoSansTTBold.ttf') format("truetype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "CiscoSansTT";
    src: url('fonts/CiscoSansTTRegular.ttf') format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "CiscoSansTT";
    src: url('fonts/CiscoSansTTLight.ttf') format("truetype");
    font-weight: 350;
    font-display: swap;
}

body {
    font-family: "CiscoSansTT", sans-serif;
    background-color: #0D274D;
    color: #fff;
}


a, a:hover {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

p {
    font-weight:400;
    margin: 1em 0em;
    font-size: 16px;
}

p.lead{
    font-weight:400;
    font-size:1.125em;
}

p:first-of-type {
    margin: 0em 0em 1em 0em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 16px;
    font-weight: 400;
    line-height: 140%;
}

h1.display-4 {
    font-weight: 350;
    margin: 24px 0px;
}

ul {
    margin: 1em 0em;
}

li {
    font-weight: 350;
    margin-bottom: 1em;
    line-height: 140%;
}

b,
strong {
    font-weight: 700;
}

.eyebrow {
    font-weight: 700;
    letter-spacing: 0.18px;
    font-size:18px;
}

/* .row.content {
    padding: 0px;
} */


/* Landing */

#landingHero {
    height: 76vh;
    text-align: center;
    background: linear-gradient(180deg, #33363D 0%, rgba(51, 54, 61, 0.00) 50%);
    flex-direction: column;
    width: 100%;
    padding-top: 168px;
    min-height: 600px;
    position: relative;
}

#landingHero img.bg-image {
    height: 100%;
    object-position: 50% 100%;
    z-index: -1;
}

#Landing .display-1 {
    font-size: 70px;
    font-weight: 350;
    line-height: 105%;
}


#Landing.section {
    background-color: #0B0F1A;
    position: relative;
    margin-top: -87px;
    margin-bottom: -100px;
    z-index: 0;
}

#landingHero p {
    font-size: 18px;
    font-weight: 350;
}

#landingHero .eyebrow {
    color:#fff;
}


.projectDetails {
    text-align: center;
    height: 23.9vh;
    min-height: 300px;
    background-color: #0B0F1A;
}

.projectDetails .display-6{
    font-size:36px;
    line-height: 120%; /* 43.2px */
}

.projectDetails .eyebrow{
    color:#C8F4FF;
}


.accordion-body .row.content:first-of-type,
.accordion-body .row.content:last-of-type {
    padding: 0px;
}

.row.content:first-of-type {
    padding: 80px 0px;
}

.row.content:last-of-type {
    padding-bottom: 80px;
}

.bg-primary {
    background-color: #071632 !important;
}

.color-text {
    color: #00BCEB;
}

/* HEROS*/

img.bg-image {
    object-fit: cover;
    position: absolute;
    width: 100%;
    object-position: 100% 30%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.hero .eyebrow {
    color: #C8F4FF;
}


.hero {
    min-height: 585px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 30%;
    background-position-x: right;
    display: flex;
    align-items: center;
}

.hero-text.row {
    position: relative;
    z-index: 1;
    height: 100%;
}


.hero:after {
    content: "";
    background-image: linear-gradient(0deg, rgba(13, 39, 77, 0.00) 92.18%, #0D274D 100%), linear-gradient(270deg, rgba(13, 39, 77, 0.00) 37.99%, #0D274D 62.1%), linear-gradient(180deg, rgba(13, 39, 77, 0.00) 67.82%, #0D274D 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.hero-section {
    background: linear-gradient(180deg, #3a5a98, #f8f9fa);
    height: 60vh;
    align-items: center;
    justify-content: center;
    color: white;
}

.hero-section h1 {
    font-size: 3rem;
    font-weight: 700;
}

.hero-section h4 {
    font-size: 1.5rem;
    margin-top: 10px;
}

.hero-section .btn {
    margin: 10px;
}

/* Navbar Styling */
.navbar-toggler-icon::after {
    content: "\F479";
    color: #fff;
    font-family: 'bootstrap-icons';
    font-size: 30px;
}

.navbar-toggler-icon {
    background-image: none;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.navbar-nav {
    flex-direction: column;
}

.navbar {
    background: transparent;
    z-index: 1;
}

.navbar-nav {
    margin-left: auto;
    /* Pushes the nav items to the right */
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.navbar-brand img {
    width: auto;
    max-height: 60px;
}

.navbar-nav .nav-item .nav-link {
    font-weight: 400;
    color: #fff;
    font-size: 18px;
    border-bottom: transparent solid 2px;
    transition: all 200ms ease-out;
}

.nav-underline {
    column-gap: 16px;
}

.nav-underline .nav-item .nav-link:focus,
.nav-underline .nav-item .nav-link:hover,
.nav-underline .nav-item.active .nav-link{
    border-bottom-color: #00BCEB;
}

.navbar-nav .nav-link:hover {
    color: #fff;
}

.container-xxl {
    max-width: 1440px;
}

.container {
    max-width: 1280px;
}

/*Columns*/


.keymetric-item {
    padding: 40px 36px;
}

.metric-value {
    font-weight: 700;
    font-size: 80px;
    color: #00BCEB;
    line-height: 120%;
}

.metric-text {
    text-transform: uppercase;
    color: #C8F4FF;
    font-weight: 800;
    letter-spacing: 3.2px;
    margin: 0;
}

.icon-list-item {
    /* margin-bottom: 60px; */
    padding: 60px;
}

.icon-list-item:last-child {
    margin-bottom: 0px;
    padding: 0px 60px 60px 60px;
}

.icon-list-item .list-styled {
    padding-left: 1em;
}

.list-column-item h4 {
    color: #C8F4FF;
    font-weight: 700;
    letter-spacing: 4.8px;
    text-transform: uppercase;
}

/* Table */

.table-primary {
    background: rgba(7, 22, 50, 0.50) !important;
    border-color: rgb(4 159 217 / 50%);
}

.table{
    border-color: rgb(4 159 217 / 50%);
}

.table-primary.table-row-striped {
    background: rgba(7, 22, 50, 0.50) !important;
    border-color: #071632;
}

.table-row-striped tr:nth-child(even) {
    background-color: #049fd980 !important;
}
.table>:not(:last-child)>:last-child>*{
    border-bottom-color: #071632;
}

/* .table-row-striped tr:nth-child(odd) {
    background-color: #071632 !important;
} */

.table-responsive {
    margin-bottom: 80px;
}

.table-responsive:last-child {
    margin-bottom: 0px;
}

.table-dark {
    background-color: #071632;
    border-color: #071632;
}

.table-dark tr th {
    color: #00BCEB;
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    padding: 16px 24px;
}

table span.subtitle {
    font-size: 14px;
    color: #D9D9D9;
    font-weight: 350;
}

.table h4 {
    color: #C8F4FF;
    font-weight: 350;
}

.table>:not(caption)>*>* {
    background: transparent !important;
    color: #fff;
    padding: 28px 20px;
    font-size: 18px;
    font-weight: 350;
}

th.numberAlign {
    font-weight: 700;
    color: #C8F4FF;
    line-height: 120%; /* 21.6px */
    letter-spacing: 0.18px;
    white-space: nowrap;
}
.numberAlign{
    text-align: right;
}

/* Button Styling */

.btn-primary {
    width: auto;
    font-size: 1rem;
    margin: 10px 0;
}

.btn-primary {
    background-color: #0070D2;
    border: none;
    border-radius: 39px;
    padding: 12px 24px;
    font-weight: 700;
}

.btn-primary:hover {
    background-color: #0259a4;
}

/* Section Visibility Control (for Dynamic Content Switching) */
.section-content {
    display: none;
}

.section-content.active {
    display: block;
}

/* .section {
    display: none;
} */

.active-section {
    display: block;
}

/* Executive Summary Section */

.figureTitle {
    font-weight: 700;
    color: #C8F4FF;
    text-transform: uppercase;
    letter-spacing: 3.2px;
}

.figureChartContent {
    padding: 36px;
}

/* Subsection Navigation Styling */

.sub-nav{
    max-width: 166px;
}

.sub-nav li.nav-item{
    position:relative;
}
.sub-nav .nav-link {
    font-size: 1.125rem;
    font-weight: 400;
    padding:0;
    color: #fff;
    text-align: right;
    position: relative;
    gap:4px;
    align-items: center;
}

.sub-nav .nav-link span{
    width:100%;
    opacity: 55%;
}

.sub-nav .nav-link.active span,
.sub-nav .nav-link:hover span{
    opacity: 100%;
}

.sub-nav .nav-link.active:after,
.sub-nav .nav-link.active:hover:after {
    content: "";
    width: 32px;
    height: 32px;
    background: radial-gradient(50% 50% at 50% 50%, #00BCEB 0%, rgba(0, 188, 235, 0.00) 100%);
    position: absolute;
    right: 0px;
}

.sub-nav .nav-link:hover:after {
    background: radial-gradient(15% 15%, #00BCEB 100%, rgba(0, 188, 235, 0.00) 100%);

}

.circle-wrapper {
    min-width: 32px;
    min-height: 32px;
    height: 100%;
    align-items: center;
    display: flex;
    margin: 0 auto;
    position: relative;
}

.sub-nav .nav-link.active .circle {
    width: 10px;
    height: 10px;
    display: block;
    background-color: #00BCEB;
    border-radius: 30px;
    margin:0 auto;
}

.sub-nav .nav-link .circle {
    width: 10px;
    height: 10px;
    display: block;
    background-color: #CDCED0;
    top: 14px;
    bottom: 0;
    right: 11px;
    border-radius: 30px;
    margin: 0 auto;
}

.sub-nav .nav-link:hover .circle {
    width: 10px;
    height: 10px;
    display: block;
    background-color: #00BCEB;
    top: 14px;
    bottom: 0;
    right: 11px;
    border-radius: 30px;
}

.sub-nav li.nav-item:after {
    content: "";
    border: 0.5px solid #FFFFFF80;
    position: absolute;
    right: 15.5px;
    height: 40%;
    bottom: -8px;
}

.sub-nav li.nav-item:before {
    content: "";
    border: 0.5px solid #FFFFFF80;
    position: absolute;
    right: 15.5px;
    height: 40%;
    top: -8px;
}

.sub-nav li.nav-item:first-child:before,.sub-nav li.nav-item:last-child:after {
    display:none;
    
}

.sub-nav li.nav-item {
    position: relative;
    margin-top: 0.5000em;
    margin-bottom: 0.5000em;
}

.sub-nav li.nav-item:first-child {
    position: relative;
    margin-top: 0em;
}

/* Placeholder Subsections */


/* Icon Styling */
.icon {
    font-size: 2rem;
    color: #3a5a98;
}

img.icon {
    max-height: 60px;
}

.icon-column-item .icon {
    margin-bottom: 24px;
}

.icon-column-item h3 {
    margin-bottom: 16px;
    color: #C8F4FF;
    font-weight: 400;
    line-height: 140%;
}

.icon-column-item {
    text-align: center;
}

/*Accordion*/

.accordion-body {
    padding: 20px 100px;
}

.accordion-body h3 {
    color: #C8F4FF;
    font-weight: 350;
}

.accordion-body p {
    font-size: 18px;
    font-weight: 350;
    line-height: 140%;
}

.accordion-body li {
    font-size: 20px;
}

.accordion-marker {
    font-weight: 700;
    font-size: 24px;
    color: #00BCEB;
    margin-right: 40px;
    width: 40px;
    text-align: center;
}

.accordion-button::after {
    display: none;
}

.accordion-button,
.accordion-button:first-of-type {
    padding: 16px;
    background-color: transparent;
    border-color: #10398C;
    box-shadow: none;
    margin: 0;
    font-weight: 350;
    color: #fff;
    font-size: 40px;
}

.accordion-item {
    background-color: transparent;
    color: #fff;
}

.accordion-item,
.accordion-item:first-of-type,
.accordion-item:last-of-type {
    border-radius: 0px;
    border-color: #10398C;
}

/*steps*/

.steps h1 {
    font-weight: 350;
    margin-bottom: 10px;
}

.steps .subtitle {
    font-size: 18px;
    font-weight: 350;
    color: #D9D9D9;
}

.steps-content {
    position: relative;
    padding: 64px 90px;
}

.steps-content:before {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0;
    border-left: 2px solid #fff;
    left: 15px;
}

.steps-content:after {
    width: 15px;
    height: 15px;
    background-color: #00BCEB;
    border-radius: 30px;
    content: "";
    left: 10px;
    position: absolute;
    outline: 16px solid #0D274D;
    top: 81px;
}

.steps-marker {
    font-size: 36px;
    font-weight: 700;
    padding: 64px 0px;
    text-align: center;
}
/* Footer Styling */
.footer {
    padding: 30px;
    color: #9B9CA0;
    background-color: transparent;
    margin-top: auto;
    position: relative;
}

@media (max-width: 992px) {

    .bg-image {
        height: 270px;
    }


    .hero {
        min-height: 510px;
        align-items: end;
    }

    .hero:after {
        background-image: linear-gradient(0deg, rgba(13, 39, 77, 0.00) 92.18%, #0D274D 100%), linear-gradient(270deg, rgba(13, 39, 77, 0.00) 37.99%, #0D274D 69.1%), linear-gradient(180deg, rgba(13, 39, 77, 0.00) 67.82%, #0D274D 100%);
        height: 270px;
    }

    .hero-text.row>div {
        margin-bottom: 100px;
    }

    .hero-text.row>div:last-child {
        margin-bottom: 0px;
    }


.row.content:first-of-type {
    padding: 40px 0px;
}

.row.content:last-of-type {
    padding-bottom: 40px;
}

    .row.content>div {
        margin-bottom: 20px;
    }

    .row.content>div:last-child {
        margin-bottom: 0px;
    }

    .accordion-body .row.content>div {
        margin-bottom: 20px;
    }

    .accordion-body {
        padding: 20px 20px;
    }

    .sub-nav {
        float: left;
    }

    .table>:not(caption)>*>* {
        padding: 8px;
        font-size: 16px;
    }

    .table-dark tr th{
        padding:8px;
    }

    #navbarNav {
        padding: 0 15px;
        margin-bottom: 80px;
    }

    .navbar-nav .nav-link {
        display: inline;
        float: right;
    }
}

@media (max-width: 768px) {
    #Landing .display-1 {
        font-size: 36px;
    }

    .projectDetails .display-6{
        font-size:24px;
    }
    .icon-list-item {
        padding: 20px;
    }

    .icon-list-item:last-child {
        margin-bottom: 0px;
        padding: 0px 20px 20px 20px;
    }

    .metric-value {
        font-size: 60px;
    }

    .accordion-button,
    .accordion-button:first-of-type {
        font-size: 30px;
    }

    .footer {
        font-size: 0.8rem;
        padding: 30px;
    }

    /* Adjustments for Hero Section on Mobile */
    .hero-section {
        height: 40vh;
        padding: 20px;
        text-align: center;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-section h4 {
        font-size: 1.1rem;
    }

    /* Executive Summary Mobile Adjustments */

    /* .subsection-link {
        display: block;
        margin-bottom: 10px;
    } */

    .icon {
        font-size: 1.5rem;
    }

    .icon-list-item,
    .icon-list-item:last-child {
        margin: 0;
    }

    /*HighChart*/
    .figureChartContent {
        padding: 16px;
    }

    .steps-marker{
        font-size:24px;
        padding:26px 0px;
    }

    .steps-content {
        padding: 20px 50px;
        height: 100%;
    }

    .steps-content:after{
        top:32px;
    }

    .table h4{
        font-size:18px;
    }
    .table>:not(caption)>*>*, .table>:not(caption)>*>* p{
        font-size:14px;
    }

}

@media (max-width:576px) {
      .bg-image{
        height:247px;
    }
    .hero:after {
        background-image: linear-gradient(0deg, rgba(13, 39, 77, 0.00) 92.18%, #0D274D 100%), linear-gradient(270deg, rgba(13, 39, 77, 0.00) 37.99%, #0D274D 67.1%), linear-gradient(180deg, rgba(13, 39, 77, 0.00) 67.82%, #0D274D 100%);
        height: 247px;
    }

}