/* ------------ Fonts ------------ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

/* ------------ Root ------------ */
:root {
    --color-white-rgb: 255, 255, 255;
    --color-white: #FFFFFF;
    --color-black-rgb: 0, 0, 0;
    --color-black: rgba(var(--color-black-rgb), 1);
    
    --color-primary: #002D71;
    --color-secondary: #E74C2E;
    --color-black: #13181B;
    --color-soft-white: #F8F6F3;
    --color-light-gray: #CCD5DA;
    --color-light-blue: #E4EBF6;
    --text-color: #535759;

    --color-border: rgba(var(--color-black-rgb), 0.2);
    --color-border-light: rgba(var(--color-white-rgb), 0.25);
    --color-text: var(--color-primary);
    --color-text-light: rgba(var(--color-white-rgb), 0.7);
    --color-alert-error: #ff213e;

    --shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

    --animation-primary: 0.4s cubic-bezier(.75, 0, .25, 1);
    --animation-thumb: 0.4s cubic-bezier(0.5, 0, .25, 1);
    --animation-smooth: 0.7s cubic-bezier(0.5, 0.5, 0, 1);
    --animation-fast: 0.2s cubic-bezier(0.75, 0, 0.25, 1);

    --section-padding-big: min(10vw, 10em);
    --section-padding: min(8vw, 8em);
    --section-padding-medium: min(6vw, 6em);
    --section-padding-small: min(3.5vw, 3.5em);
    --section-padding-xsmall: min(1.5vw, 1.5em);
    --container-padding: min(4vw, 4em);

    --gap-padding: min(4vw, 4em);
    /* --title-size: clamp(3rem, 0.188rem + 12.5vw, 8rem); */
    --title-size: clamp(5em, 7.5vw, 7.5em);
    --border-radius: 16px;
    --border-radius-small: 8px;
    --border-radius-all: 100px;
    --thumb-border-radius: calc(var(--border-radius)* 0.5);

    --vw: 1440;
    --multiplier: 100vw;

    @media (max-width: 767.98px) {
        :root {
            --vw: 375
        }
    }
}

@media screen and (min-width: 1440px) {}

@media screen and (max-width: 1024px) {

    :root {
        --section-padding-big: 15vw;
        --section-padding: 12vw;
        --section-padding-medium: 9vw;
        --section-padding-small: 6vh;
    }
}

@media screen and (max-width: 720px) {

    :root {
        --section-padding-big: 20vw;
        --section-padding: 16vw;
        --section-padding-medium: 12vw;
        --section-padding-small: 9vw;
    }
}

/* ------------ Body ------------ */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    margin: 0;
}

li,
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

body {
    font-family: "Geist", sans-serif;
    color: var(--color-black);
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: clamp(16px, 1.2vw, 19px);
    background-color: var(--color-white);
    overscroll-behavior: none;
}

.main-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Removing background from autofill */
input[type=email]:-webkit-autofill,
input[type=email]:-webkit-autofill:focus,
input[type=text]:-webkit-autofill,
input[type=text]:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important
}

blockquote {
    font-style: italic;
    font-family: "Geist", sans-serif;
    font-weight: 400;
}

blockquote p {
    font-style: italic;
}

/* Selection */
::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-black);
    text-shadow: none;
}

/* General */
img {
    display: block;
}

canvas,
img,
video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

figure {
    margin: 0;
}

/* New gutter / gap */
.g-6,
.gy-6 {
    --bs-gutter-y: 2rem;
}

.g-6,
.gx-6 {
    --bs-gutter-x: 2rem;
}

/* ------------ Typography ------------ */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
ul,
ol,
span,
strong,
em {
    padding: 0;
    margin: 0;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    word-wrap: break-word;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
p:last-child,
p.big:last-child,
p.small:last-child,
a:last-child,
strong:last-child {
    margin-bottom: 0;
}

h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: calc(var(--title-size) * 0.6);
    line-height: 1;
}

h1.big {
    font-size: calc(var(--title-size) * 0.95);
}

h1.medium {
    font-size: calc(var(--title-size) * 0.7);
}

h1.small {
    font-size: calc(var(--title-size) * 0.53);
}

@media screen and (max-width: 540px) {
    h1.medium {
        font-size: calc(var(--title-size) * 0.55);
    }
}

h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    /* font-size: calc(var(--title-size) * 0.475); */
    font-size: calc(var(--title-size) * 0.43);
    line-height: 1;
}

h2.big {
    font-size: calc(var(--title-size) * 1.1);
}

h2.medium {
    font-size: calc(var(--title-size) * 0.7);
}

h2.small {
    font-size: calc(var(--title-size) * 0.35);
}

@media screen and (max-width: 1024px) {
    h2 {
        font-size: calc(var(--title-size) * 0.45);
    }

    h2.medium {
        font-size: calc(var(--title-size) * 0.65);
    }

    h2.big {
        font-size: calc(var(--title-size) * 0.85);
    }

    h2.small {
        font-size: calc(var(--title-size) * 0.35);
    }
}

@media screen and (max-width: 540px) {
    h2 {
        font-size: 8vw;
    }

    h2.medium {
        font-size: 10vw;
    }

    h2.big {
        font-size: 12vw;
    }

    h2.small {
        font-size: 6vw;
    }
}

h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: calc(var(--title-size) * 0.3);
    line-height: 1.3;
}

h3.big {
    font-size: calc(var(--title-size) * 0.45);
    line-height: 1.2;
}


@media screen and (max-width: 1024px) {
    h3 {
        font-size: calc(var(--title-size) * 0.45);
    }

    h3.big {
        font-size: calc(var(--title-size) * 0.6);
    }
}

@media screen and (max-width: 540px) {
    h3 {
        font-size: 6vw;
    }

    h3.big {
        font-size: 7vw;
    }
}

h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: calc(var(--title-size) * 0.25);
    line-height: 1.2;
}

@media screen and (max-width: 1024px) {
    h4 {
        font-size: calc(var(--title-size) * 0.35);
    }
}

@media screen and (max-width: 540px) {
    h4 {
        font-size: 6vw;
        font-weight: 500;
    }
}

span.inactive {
    opacity: .5;
}

b,
strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

a {
    color: var(--color-midnight-blue);
    text-decoration: none;
    transition: var(--animation-primary);
    outline: 0;
}

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

p a {
    opacity: 1;
    text-decoration: none;
    transition: var(--animation-primary);
    position: relative;
    white-space: nowrap;
}

p a::after {
    content: "";
    bottom: -2px;
    width: 100%;
    background: rgba(var(--color-dark-rgb), 0.3);
    height: 1px;
    position: absolute;
    left: 0;
    transition: all var(--animation-primary);
}

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

p span {
    font-weight: inherit;
}

li {
    font-size: 1rem;
}

/* Styled Typography */
p {
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.66;
    color: var(--text-color);
    margin: 0 0 .9375rem;
}

.styled p strong {
    font-weight: 700;
}

.styled h2 {
    margin-bottom: 0.66em;
}

.styled p,
.styled h3 {
    margin-bottom: 0.5em;
}

.styled p:last-child,
.styled h2:last-child,
.styled h3:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .styled.large p {
        font-size: 1.5rem;
        line-height: 1.5;
    }
}

.styled.big {
    font-size: 1.25rem;
}

.styled.small {
    font-size: 0.875rem;
}

.styled *+* {
    margin-top: 1.1em !important;
}

@media (min-width: 768px) {
    .styled *+* {
        margin-top: 0.875em !important;
    }
}

.styled h2,
.styled h3,
.styled h4,
.styled h5,
.styled h6 {
    line-height: 1.1;
    margin-bottom: unset;
}

.styled h2 :is(strong),
.styled h3 :is(strong),
.styled h4 :is(strong) {
    font-weight: 600;
}

.styled h3 {
    line-height: 1.3;
}

.styled h5 {
    font-weight: 600;
}

.styled ol,
.styled ul {
    /* margin: 2rem 0 !important; */
    padding: 0;
}

.styled li {
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 400;
    margin-left: 1.25rem;
    margin-top: .5em;
    color: var(--text-color);
    max-width: 62ch;
    list-style: disc;
}

.upper {
    text-transform: uppercase;
}

.bold {
    font-weight: 700;
}

.text-white,
.text-white p,
.text-white a {
    color: rgba(var(--color-white-rgb), 1) !important;
}

/* ------------ Main Elements ------------ */

main {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

hr {
    border: 0;
    margin: 2rem 0;
    padding: 0;
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.6);
}

@media all and (max-width: 1100px) and (orientation:portrait) {
    hr {
        margin: 8vw 0
    }
}

.wrapper {
    display: block;
    width: fit-content;
}

/* Section */
.section {
    display: block;
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    position: relative;
    z-index: 3;
    background-color: var(--color-soft-white);
}

.section.is-white {
    background-color: var(--color-white);
}

.section+.section {
    padding-top: 0;
}

.section.is-small {
    padding-top: var(--section-padding-small);
    padding-bottom: var(--section-padding-small);
}

.section-title {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-midnight-blue);
    padding-bottom: 1rem;
}

.section.is-dark .section-title {
    border-bottom: 1px solid var(--color-white);
}

.section.full-height {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.section.no-padding {
    padding-top: unset;
    padding-bottom: unset;
}

/* Container */
.container-fluid,
section {
    position: relative;
}

.container-fluid.is-large {
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    max-width: 100em;
    max-width: 100%;
}

.container-fluid.is-large.no-padding {
    padding-left: 0;
    padding-right: 0;
}

/* LC Row override */
.row {
    --bs-gutter-x: 2rem;
}

@media (min-width: 992px) {
    .row {
        --bs-gutter-x: 4rem;
    }

    .row-gap-5 {
        row-gap: 4rem !important;
    }
}

/* Image */
.image-fullwidth {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

@media screen and (max-width: 992px) {
    .image-fullwidth {
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

.featured-image {
    height: 80vh;
    min-height: 420px;
    max-height: 620px;
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

@media (max-width: 991.98px) {
    .featured-image {
        height: auto;
    }
}

.featured-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Image Thumb */
.image-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius);
    clip-path: border-box;
    overflow: hidden;
}

.image-thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.image-thumb.no-ratio {
    aspect-ratio:unset;
    height: 100%;
}

/* ------------ Helpers ------------ */
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-black-rgb), 0.1);
}

.overlay.darker {
    background-color: rgba(var(--color-black-rgb), 0.7);
}

.overlay.medium {
    background-color: rgba(var(--color-black-rgb), 0.2);
}

.overlay-gradient {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: #E74C2E;
    background: linear-gradient(180deg, rgba(231, 76, 46, 0.3) 0%, rgba(0, 45, 113, 0.5) 50%, rgba(0, 45, 113, 1) 100%);
}

.no-padding {
    padding: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.padding-top {
    padding-top: var(--section-padding);
}

.padding-top.big {
    padding-top: var(--section-padding-big);
}

.padding-top.medium {
    padding-top: var(--section-padding-medium);
}

.padding-top.small {
    padding-top: var(--section-padding-small);
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.padding-bottom {
    padding-bottom: var(--section-padding);
}

/* padding to mimic row-gap-5 */
.padding-bottom-5 {
    padding-bottom: 3rem;
}

@media (min-width: 992px) {
    .padding-bottom-5 {
        padding-bottom: 5rem !important;
    }
}

.padding-bottom.big {
    padding-bottom: var(--section-padding-big);
}

.padding-bottom.medium {
    padding-bottom: var(--section-padding-medium);
}

.padding-bottom.small {
    padding-bottom: var(--section-padding-small);
}

.padding-bottom.xsmall {
    padding-bottom: var(--section-padding-xsmall);
}

.padding-left {
    padding-left: var(--section-padding);
}

.padding-left.big {
    padding-left: var(--section-padding-big);
}

.padding-left.medium {
    padding-left: var(--section-padding-medium);
}

.padding-left.small {
    padding-left: var(--section-padding-small);
}

.padding-right {
    padding-right: var(--section-padding);
}

.padding-right.big {
    padding-right: var(--section-padding-big);
}

.padding-right.medium {
    padding-right: var(--section-padding-medium);
}

.padding-right.small {
    padding-right: var(--section-padding-small);
}

.margin-bottom {
    margin-bottom: var(--section-padding);
}

.margin-top {
    margin-bottom: var(--section-padding);
}

.no-margin {
    margin: 0 !important;
}

.no-border {
    border: 0 !important;
}

@media screen and (min-width: 993px) {
    .is-mobile {
        display: none;
    }

    .is-desktop {
        display: block;
    }
}

@media screen and (max-width: 992px) {
    .is-mobile {
        display: block;
    }

    .is-desktop {
        display: none;
    }
}

.label {
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.5px;
    font-weight: 500;
    width: fit-content;
    display: inline-block;
    text-transform: uppercase;
    color: var(--text-color);
}

.label.white {
    color: var(--color-white);
    border-color: var(--color-white);
}

.label-upper {
    font-size: 1rem;
    color: var(--color-slate-blue);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    display: block;
}

/* Tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.tags span {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    background: var(--color-light-gray);
    color: var(--color-primary);
    border-radius: var(--border-radius);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* arrows */
.arrows {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1.5rem;
    height: 100%;
}

@media (min-width: 992px) {
    .arrows {
        justify-content: end;
    }
}

.arrows .arrow {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    transition: var(--animation-primary);
    background-color: var(--color-black);
    border-radius: var(--border-radius-all);
}

.arrows .arrow .icon {
    background-color: var(--color-white);
    -webkit-mask-image: url(../images/arrow_right.svg);
    mask-image: url(../images/arrow_right.svg);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 40px;
    height: 40px;
}

.arrows .arrow .icon.prev {
    rotate: 180deg;
}

.arrows .arrow:hover {
    transform: scale(1.1);
}

.top-rounded-borders {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    margin-top: -1rem;
}

/* ------------ Inner Page ------------ */
.is-inner {
    padding-top: 87px;
}

.inner-title {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: var(--section-padding) var(--container-padding);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.inner-title.is-big {
    height: 520px;
    justify-content: end;
    padding-bottom: 5rem;
}

.inner-title.is-row {
    flex-direction: row;
    gap: 0;
}

.inner-title .title,
.inner-title .content {
    color: var(--color-white);
    position: relative;
    z-index: 2;
}

.inner-title .title strong {
    color: var(--color-red);
}

/* ------------ Links ------------ */
.primary-link {
    color: inherit !important;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.5rem;
    display: block;
    line-height: 1;
    padding-bottom: .25rem;
    position: relative;
    transition: var(--animation-primary);
}

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

/* is white */
.primary-link.is-white:hover {
    color: var(--color-white) !important;
}

/* ------------ Buttons ------------ */
button:focus-visible,
button:active,
button:focus {
    border: none;
    background: transparent;
    outline: none;
}

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

.btn-row {
    width: 100%;
    position: relative;
    display: flex;
    gap: 1.5rem;
}

.btn {
    position: relative;
    border: 0;
    outline: 0;
    padding: 1rem 1.25rem !important;
    line-height: 1;
    text-transform: capitalize;
    display: block;
    border-radius: var(--border-radius-all);
    font-size: 1rem;
    font-weight: 700;
    width: fit-content;
}

.btn.small {
    padding: 0.5rem 1.5rem !important;
    font-size: 0.875rem;
}

.btn input {
    cursor: pointer;
}

/* Button primary */
.btn-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

/* is outlined */
.btn-primary.is-outlined {
    background: transparent;
    border: 1px solid var(--color-black);
    color: var(--color-black);
}

.btn-primary.is-outlined:hover,
.btn-primary.is-outlined:focus,
.btn-primary.is-outlined:active {
    background: var(--color-black);
    border: 1px solid var(--color-black);
    color: var(--color-white);
}

/* Button Secondary */
.btn-secondary {
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

/* is outlined */
.btn-secondary.is-outlined {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    width: fit-content;
}

.btn-secondary.is-outlined:hover,
.btn-secondary.is-outlined:focus,
.btn-secondary.is-outlined:active {
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
}


/* hover effect */
.hover-effect {
    position: relative;
    width: fit-content;
}

.hover-effect::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1px;
    left: 0;
    height: 1px;
    width: 0;
    display: block;
    background-color: var(--color-primary);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.hover-effect:hover::before {
    width: 100%;
}

.hover-effect.blue::before {
    background-color: var(--color-primary);
}

.hover-effect.midnightblue::before {
    background-color: var(--color-midnight-blue);
}

.hover-effect .square {
    position: relative;
}

/* ------------ Main Title ------------ */
.main-title {
    margin-bottom: 3rem;
}

/* ------------ Header ------------ */
header {
    padding: .5rem 0;
    position: relative;
    border-bottom: 1px solid rgba(var(--color-black-rgb), 0.2);
    width: 100%;
    z-index: 9;
    background: var(--color-white);
}

header .logo {
    width: 260px;
}

header .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

header .logo a {
    display: block;
}

header .logo img {
    display: block;
    width: 220px;
    height: auto;
}

.menu ul {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.menu ul li a {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 600;
}

.cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}

@media (max-width: 991.98px) {
    .menu ul {
        justify-content: flex-start;
        
    }

    .menu ul li a,
    .cta a {
        font-size: 0.875rem;
    }

    .cta a {
        padding: .5rem !important;
    }
}

/* ------------ Hero banner ------------ */
.hero-banner {
    position: relative;
    max-height: 100vh;
    min-height: 1025px;
    height: 100%;
    background: url(https://spectrum174dev.wpenginepowered.com/wp-content/uploads/2026/02/bg-hero-scaled.jpg) center bottom no-repeat;
    background-size: 100%;
}

.hero-banner .hero-content {
    width: 100%;
    padding-top: calc(94px + 8rem);
    padding-bottom: 8rem;
}

.hero-banner .hero-content p {
    color: var(--color-black);
}

/* ------------ Project Sectors ------------ */
.project-sectors {
    background-color: var(--color-soft-white);
}

.project-sectors .project-item {
    position: relative;
    min-height: 480px;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    clip-path: border-box;
}

.project-sectors .project-item figure {
    width: 100%;
    height: 100%;
}

.project-sectors .project-item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-sectors .project-item .content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--color-white);
    padding: 2.5rem 1.5rem;
}

.project-sectors .project-item .content h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.project-sectors .project-item .content p {
    font-size: 1rem;
    color: var(--color-white);
    line-height: 1.2;
}

/* ------------ Featured Project ------------ */
.featured-project {
    padding-top: var(--section-padding) !important;
    background-color: var(--color-light-blue);
}

.featured-project .project-item {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: 1rem;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.featured-project .project-item .image {
    height: 280px;
    width: 100%;
    border-radius: var(--border-radius-small);
    overflow: hidden;
    clip-path: border-box;
    margin-bottom: 1rem;
}

.featured-project .project-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-project .project-item h3,
.featured-project:hover .project-item h3 {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-black);
}

.featured-project .project-item .link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-all);
    background-color: var(--text-color);
    transition: var(--animation-primary);
}

.featured-project .project-item:hover .link {
    background-color: var(--color-secondary);
}

/* ------------ About ------------ */
.about {
    padding-top: var(--section-padding) !important;
}

.about .box-content {
    position: relative;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    height: 100%;
    min-height: 340px;
    clip-path: border-box;
    overflow: hidden;
}

.about .box-content h3 {
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 600;
    z-index: 3;
}

.about .box-content.has-image {
    background: url(https://spectrum174dev.wpenginepowered.com/wp-content/uploads/2026/02/slide_img2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ------------ Memberships ------------ */
.memberships .logo {
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-light-gray);
    height: 100px;
}

.memberships .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.memberships .slick-track {
    display: flex;
    gap: 2rem;
}

.memberships .slick-list {
    overflow: visible;
}

/* ------------ Quote ------------ */
.quote {
    padding-top: var(--section-padding) !important;
    background-color: var(--color-primary);
    color: var(--color-white);
}
.quote .contact-info {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.quote p {
    color: rgba(var(--color-white-rgb), 0.6);
}

.quote .contact-info span {
    color: rgba(var(--color-white-rgb), 0.6);
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.quote .contact-info p a {
    color: var(--color-white);
    font-size: 1.75rem;
    font-weight: 600;
    transition: var(--animation-fast);
}

.quote .contact-info p a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    transition: width .3s;
}

.quote .contact-info p a:hover::after {
    width: 0;
}

.quote .socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.quote .social {
    background-color: rgba(var(--color-white-rgb), 0.2);
    color: var(--color-white-rgb);
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius-all);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--animation-primary);
}

.quote .social:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* Ninja forms override */
.field-wrap button, 
.field-wrap input[type=button], 
.field-wrap input[type=submit] {
    width: auto;
    position: relative;
    border: 0;
    outline: 0;
    padding: 1rem 1.25rem !important;
    line-height: 1;
    text-transform: capitalize;
    display: block;
    border-radius: var(--border-radius-all);
    font-size: 1rem;
    font-weight: 700;
    width: fit-content;
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
    transition: var(--animation-primary);
}

.field-wrap input[type=submit]:hover,
.field-wrap input[type=submit]:focus,
.field-wrap input[type=submit]:active {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

.nf-field-element input, 
.nf-field-element select, 
.nf-field-element textarea {
    margin: 0;
    vertical-align: inherit;
    width: auto;
    background-color: var(--color-light-blue);
    color: var(--color-black);
    border-radius: var(--border-radius-small);
    outline: 0;
    border: 0;
    padding: 0.5rem 1.5rem;
}

.nf-field-element input, 
.nf-field-element select {
    height: 64px !important;
}

.nf-field-container select.ninja-forms-field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
}

.nf-field-container .nf-field-element:has(select)::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-black);
}

.nf-field-container .nf-field-element:has(select) {
    position: relative;
}

/* ------------ Project Single ------------ */
.project-single .inner-title .title {
    z-index: 3;
}

.project-single .inner-title .title h2,
.project-single .inner-title .title p {
    color: var(--color-white);
}

.project-single .inner-title .title h2 {
    font-size: 1.5rem;
}

.project-single .taxonomy {
    border-top: 1px solid var(--color-light-gray);
}

.project-single .taxonomy span {
    display: block;
    padding: 1rem 0 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: .5rem;
    line-height: 1;
}

.project-single .taxonomy p {
    margin: 0;
    line-height: 1;
    color: var(--color-black);
}

.project-single .project-gallery {
    margin-top: 4rem;
}

.project-single .extra-content {
    padding-top: var(--section-padding) !important;
}