:root {
    --blue: #005F83;
    --gray: #F2F7F9;
    --faq: #F7FAFB;
    --yellow: #FFE100;
    --white: #fff;
    --black: #000;
    --green: #59aa47;
    --koopa-green: #54da49;
    --violet: #ad46ff;
    --clear-blue: #2b7fff;
    --clear-gray: #d1d5dc;
    --standard: 16px;
    --small: 14px;
    --large: 22px;
    --heading: 60px;
    --large-heading: 80px;
    --medium-heading: 50px;
    --blue-heading: 50px;
    --sub-heading: 25px;
    --numbers-heading: 70px;
    --numbers-sub: 25px;
    --team-meta: 20px;
    --team-heading: 40px;
    --location-heading: 50px;
    --success-heading: 18px;
    --card-heading: 22px;
    --ceo: 24px;
    --detail-heading: 30px;
}

@font-face {
    font-family: 'Gotham';
    src: url('./fonts/gotham-black.woff2') format('woff2'),
    url('./fonts/gotham-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('./fonts/gotham-bold.woff2') format('woff2'),
    url('./fonts/gotham-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('./fonts/gotham-medium.woff2') format('woff2'),
    url('./fonts/gotham-medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('./fonts/gotham-book.woff2') format('woff2'),
    url('./fonts/gotham-book.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('./fonts/gotham-light.woff2') format('woff2'),
    url('./fonts/gotham-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Gotham";
    /* font-family: 'Gotham Book'; */
    /* font-weight: 400; */
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background: #fff;
    color: var(--blue) !important;
}
.card{
    padding: 0 !important;
}

.btn-brand-yellow {
    --bs-btn-color: #000;
    /* Text color (black for contrast) */
    --bs-btn-bg: var(--yellow);
    --bs-btn-border-color: var(--yellow);

    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #e6cb00;
    --bs-btn-hover-border-color: #e6cb00;

    --bs-btn-focus-shadow-rgb: 255, 225, 0;

    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ccb700;
    --bs-btn-active-border-color: #ccb700;
}

.btn-brand-gradient {
    background: linear-gradient(90.4deg, #00BFFF 0.77%, #56DB46 100.09%);
    color: #fff !important;
    border: 0;
    transition: .3s ease-in-out;
    font-weight: 700;
}

.btn-brand-white {
    --bs-btn-color: #005F83;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #004b68;
    /* slightly darker for hover */
    --bs-btn-hover-border-color: #00445e;
    --bs-btn-focus-shadow-rgb: 0, 95, 131;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00445e;
    /* even darker for active */
    --bs-btn-active-border-color: #003c53;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #005F83;
    --bs-btn-disabled-border-color: #005F83;
}

.btn-brand-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: #005F83;
    --bs-btn-border-color: #005F83;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #004b68;
    /* slightly darker for hover */
    --bs-btn-hover-border-color: #00445e;
    --bs-btn-focus-shadow-rgb: 0, 95, 131;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00445e;
    /* even darker for active */
    --bs-btn-active-border-color: #003c53;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #005F83;
    --bs-btn-disabled-border-color: #005F83;
}

.btn-outline-brand-blue {
    --bs-btn-color: #005F83;
    --bs-btn-border-color: #005F83;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #005F83;
    --bs-btn-hover-border-color: #005F83;
    --bs-btn-focus-shadow-rgb: 0, 95, 131;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004a66;
    --bs-btn-active-border-color: #00445d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #005F83;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #005F83;
    --bs-gradient: none;
}

.btn-outline-brand-white {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: #005F83;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-focus-shadow-rgb: 0, 95, 131;
    --bs-btn-active-color: #005F83;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #00445d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #005F83;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffffff;
    --bs-gradient: none;
}

.bg-white-light {
    background-color: color-mix(in oklab, #fff 10%, transparent);
}

.bg-brand-blue-light {
    background-color: #e5f9f6 !important;
}

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

.bg-brand-gray {
    background-color: var(--gray);
}

.bg-brand-gradient {
    background: linear-gradient(-30deg, #45DB33, #00BFFF);
}

.badge {
    background: #e4f2f7 !important;
}

.text-brand {
    color: #005F83;
}

/* .text-gradient{
    background: linear-gradient(30deg, #45DB33, #00BFFF);
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    -webkit-background-clip: text;
    background-clip: text;
} */

.text-gradient {
    background: linear-gradient(90.4deg, #00BFFF 0.77%, #56DB46 100.09%);
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

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

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

.text-ancient {
    color: #4bd1ff !important;
}

.boder-light.border {
    border: var(--bs-border-width) var(--bs-border-style) #dee2e64f !important;
}

.info-fw-black {
    font-weight: 900;
}

.info-fw-bold {
    font-weight: bold;
}

.info-fw-book {
    font-weight: 500;
}
.list-pipe li{
    position: relative;
}
.list-pipe li:not(:last-child)::after {
    content: '|';
    font-weight: 900;
    margin-left: 15px;
}

@media (max-width:767px) {
    .navbar-brand{
        max-width: 150px;
    }
    .navbar-brand img{
        width: 100%;
    }
}

.info-snippet{
    position: relative;
    overflow: hidden;
}
.info-snippet::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 20px;
    background-color: var(--clear-gray);
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    left: 0px;
    top: 0;
    z-index: 0;
}
.info-snippet-body{
    width: calc(100% - 5px);
    margin-left: auto;
    background-color: color-mix(in srgb, var(--clear-gray) 20%, white);
    padding: 1.5rem;
     z-index: 0;
     position: relative;
     border-radius: 10px;
}


/* Base styles for all nav-link colors */
.nav-pills .nav-link {
    --color-main: transparent;
}

/* Card icon default */
.nav-pills .nav-link .card-icon {
    transition: transform 0.3s ease;
    background-color: color-mix(in srgb, var(--color-main) 10%, white);
}

/* SVG stroke default */
.nav-pills .nav-link .card-icon svg {
    stroke: var(--color-main);
}

/* Active state text color */
.nav-pills .nav-link.active .card-body,
.nav-pills .show > .nav-link .card-body {
    color: var(--white) !important;
}

/* Active state background */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-main);
}

/* Active icon background */
.nav-pills .nav-link.active .card-icon,
.nav-pills .show > .nav-link .card-icon {
    background-color: color-mix(in srgb, var(--color-main) 80%, white);
}

/* Active icon stroke */
.nav-pills .nav-link.active .card-icon svg,
.nav-pills .show > .nav-link .card-icon svg {
    stroke: var(--white);
}

/* Hover effect for any card */
.nav-pills .nav-link.card-hover-scale:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--color-main); /* dynamic border */
}

/* Color assignments */
.color-blue.nav-link  { --color-main: var(--clear-blue); }
.color-green.nav-link { --color-main: var(--koopa-green); }
.color-violet.nav-link { --color-main: var(--violet); }


.info-list-dots li::marker{
    color: var(--color-main);
    font-size: 1.5em;
}

.alert-body {
    /* --bs-alert-color: var(--clear-blue); */
    --bs-alert-bg: color-mix(in srgb, var(--color-main) 10%, white);;
    --bs-alert-border-color: color-mix(in srgb, var(--color-main) 20%, white);
}


.color-blue .info-list-dots li::marker, .color-blue .alert-body { --color-main: var(--clear-blue); }
.color-green .info-list-dots li::marker, .color-green .alert-body { --color-main: var(--koopa-green); }
.color-violet .info-list-dots li::marker, .color-violet .alert-body { --color-main: var(--violet); }










/* Navbar */
.navbar-brand {
    width: 125px;
}

/* Hero */
.hero {
    padding: 70px 0;
    position: relative;
}
.trade-mark{
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: .75rem;
    color: #fff;
    z-index: 99;
}

.hero-fullscreen {
    min-height: 100vh;
}
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/hero-banner-img.webp);
}

.hero-bg-overlay {
    position: relative;
    overflow: hidden;
}

.hero-bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

@media screen and (max-width: 576px) {
    .hero {
        padding: 30px 15px;
    }
}

/* Info */
.info {
    padding: 70px 0;
}

.info-list li:not(:last-child) {
    margin-bottom: 10px;
}

.info-list-icon li {
    padding-left: 30px;
    position: relative;
}

.info-list-icon li::before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 2px;
    /* background-color: #45DB33; */
    background-image: url(../img/list-icon.png);
    background-size: 20px;
}

.card-icon {
    width: 75px;
    height: 75px;
    border-radius: 50rem;
    -webkit-border-radius: 50rem;
    -moz-border-radius: 50rem;
    -ms-border-radius: 50rem;
    -o-border-radius: 50rem;
    display: flex;
    justify-content: center;
    background-color: #005F83;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    margin-bottom: 10px;
}

.card-icon.card-icon-light {
    background-color: #e5f7f6;
}

.img-icon {
    width: 40px;
    height: 40px;
}

.card-scale-shadow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.card-scale-shadow:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.card-hover-scale:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    border-color: #45DB33;
}

.card-hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover-scale:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    border-color: #45DB33;
}

.card-hover-border-blue.card-hover-scale:hover {
    border-color: #005F83;
}



/* Video Frame */
.video-frame {
    position: relative;
    padding-bottom: 52.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-frame embed,
.video-frame iframe,
.video-frame object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 576px) {
    .info {
        padding: 30px 15px;
    }
}

/* Footer */

/* Slick */

/* hubspot form */
/* Form Color */
.hs-form .hs-richtext h3 {
    font-size: 32px !important;
    font-weight: bold !important;
    color: var(--blue) !important;
}

.hs-form input::placeholder,
.hs-form textarea::placeholder {
    color: #2898C0;
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #2898C0 !important;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #2898C0;
    width: 100% !important;
    height: 40px !important;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

textarea {
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #2898C0;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #2898C0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.hs-form fieldset,
.hs-form .hs-input {
    margin: 0 !important;
    width: 100% !important;
}

.hs-form .hs-button {
    padding: 0.5rem 1.5rem;
    border-radius: 2.5rem;
    background: linear-gradient(to right, #02C0FA, #43DA38) !important;
    border: 0 !important;
    min-width: 175px;
    color: #fff;
    font-family: 'Gotham Book';
    font-size: 1rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.hs_submit {
    margin-top: 25px !important;
    display: flex;
    justify-content: center;
}

.hs-form .inputs-list label p,
.hs-form .inputs-list label a {
    color: #2898C0;
    font-size: 0.8rem;
}

.hs-form .inputs-list label {
    color: #ff4444;
    font-size: 0.8rem;
}

.inputs-list {
    padding: 0;
    list-style: none;
}

.hs-form-booleancheckbox-display {
    position: relative;
    padding: 0.375rem 0.75rem;
    margin-top: 10px;
}

.hs-form-booleancheckbox-display .hs-input {
    position: absolute;
    content: '';
    left: 0 !important;
    width: auto !important;
}

.hs-form fieldset {
    max-width: 100% !important;
}

.hs-richtext h1{
    font-weight: 800 ;
}