@charset "UTF-8";

/* --------------------------------

Imports

-------------------------------- */

@import 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,i300,300i,400,400i,500,500i,700,700i,900,900i';

/* @import "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"; */
@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css";

/* @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@300"; */

/* @import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"); */
/* @import "https://unpkg.com/aos@2.3.1/dist/aos.css"; */
@import "aos.css";

/* -------------------------------- 

Variables

-------------------------------- */

:root {
    --bs-danger: rgba(220, 40, 60, 1.00);
    --bs-danger-rgb: 220, 40, 60;
    --bs-red: rgba(220, 40, 60, 1.00);

    --bs-red-900: rgba(220, 40, 60, 0.90);
    --bs-red-800: rgba(220, 40, 60, 0.80);
    --bs-red-700: rgba(220, 40, 60, 0.70);
    --bs-red-600: rgba(220, 40, 60, 0.60);
    --bs-red-500: rgba(220, 40, 60, 0.50);
    --bs-red-400: rgba(220, 40, 60, 0.40);
    --bs-red-300: rgba(220, 40, 60, 0.30);
    --bs-red-200: rgba(220, 40, 60, 0.20);
    --bs-red-100: rgba(220, 40, 60, 0.10);
    --bs-red-0: rgba(220, 40, 60, 0.00);

    --bs-warning: rgba(250, 100, 50, 1.00);
    --bs-warning-rgb: 250, 100, 50;
    --bs-orange: rgba(250, 100, 50, 1.00);

    --bs-orange-900: rgba(250, 100, 50, 0.90);
    --bs-orange-800: rgba(250, 100, 50, 0.80);
    --bs-orange-700: rgba(250, 100, 50, 0.70);
    --bs-orange-600: rgba(250, 100, 50, 0.60);
    --bs-orange-500: rgba(250, 100, 50, 0.50);
    --bs-orange-400: rgba(250, 100, 50, 0.40);
    --bs-orange-300: rgba(250, 100, 50, 0.30);
    --bs-orange-200: rgba(250, 100, 50, 0.20);
    --bs-orange-100: rgba(250, 100, 50, 0.10);
    --bs-orange-0: rgba(250, 100, 50, 0.00);

    --bs-yellow: rgba(250, 200, 50, 1.00);

    --bs-yellow-900: rgba(250, 200, 50, 0.90);
    --bs-yellow-800: rgba(250, 200, 50, 0.80);
    --bs-yellow-700: rgba(250, 200, 50, 0.70);
    --bs-yellow-600: rgba(250, 200, 50, 0.60);
    --bs-yellow-500: rgba(250, 200, 50, 0.50);
    --bs-yellow-400: rgba(250, 200, 50, 0.40);
    --bs-yellow-300: rgba(250, 200, 50, 0.30);
    --bs-yellow-200: rgba(250, 200, 50, 0.20);
    --bs-yellow-100: rgba(250, 200, 50, 0.10);
    --bs-yellow-0: rgba(250, 200, 50, 0.00);

    --bs-spring: rgba(140, 210, 80, 1.00);

    --bs-spring-900: rgba(140, 210, 80, 0.90);
    --bs-spring-800: rgba(140, 210, 80, 0.80);
    --bs-spring-700: rgba(140, 210, 80, 0.70);
    --bs-spring-600: rgba(140, 210, 80, 0.60);
    --bs-spring-500: rgba(140, 210, 80, 0.50);
    --bs-spring-400: rgba(140, 210, 80, 0.40);
    --bs-spring-300: rgba(140, 210, 80, 0.30);
    --bs-spring-200: rgba(140, 210, 80, 0.20);
    --bs-spring-100: rgba(140, 210, 80, 0.10);
    --bs-spring-0: rgba(140, 210, 80, 0.00);

    --bs-success: rgba(40, 220, 120, 1.00);
    --bs-success-rgb: 40, 220, 120;
    --bs-green: rgba(40, 220, 120, 1.00);

    --bs-green-900: rgba(40, 220, 120, 0.90);
    --bs-green-800: rgba(40, 220, 120, 0.80);
    --bs-green-700: rgba(40, 220, 120, 0.70);
    --bs-green-600: rgba(40, 220, 120, 0.60);
    --bs-green-500: rgba(40, 220, 120, 0.50);
    --bs-green-400: rgba(40, 220, 120, 0.40);
    --bs-green-300: rgba(40, 220, 120, 0.30);
    --bs-green-200: rgba(40, 220, 120, 0.20);
    --bs-green-100: rgba(40, 220, 120, 0.10);
    --bs-green-0: rgba(40, 220, 120, 0.00);

    --bs-teal: rgba(40, 220, 200, 1.00);

    --bs-teal-900: rgba(40, 220, 200, 0.90);
    --bs-teal-800: rgba(40, 220, 200, 0.80);
    --bs-teal-700: rgba(40, 220, 200, 0.70);
    --bs-teal-600: rgba(40, 220, 200, 0.60);
    --bs-teal-500: rgba(40, 220, 200, 0.50);
    --bs-teal-400: rgba(40, 220, 200, 0.40);
    --bs-teal-300: rgba(40, 220, 200, 0.30);
    --bs-teal-200: rgba(40, 220, 200, 0.20);
    --bs-teal-100: rgba(40, 220, 200, 0.10);
    --bs-teal-0: rgba(40, 220, 200, 0.00);

    --bs-info: rgba(50, 200, 250, 1.00);
    --bs-info-rgb: 50, 200, 250;
    --bs-cyan: rgba(50, 200, 250, 1.00);

    --bs-cyan-900: rgba(50, 200, 250, 0.90);
    --bs-cyan-800: rgba(50, 200, 250, 0.80);
    --bs-cyan-700: rgba(50, 200, 250, 0.70);
    --bs-cyan-600: rgba(50, 200, 250, 0.60);
    --bs-cyan-500: rgba(50, 200, 250, 0.50);
    --bs-cyan-400: rgba(50, 200, 250, 0.40);
    --bs-cyan-300: rgba(50, 200, 250, 0.30);
    --bs-cyan-200: rgba(50, 200, 250, 0.20);
    --bs-cyan-100: rgba(50, 200, 250, 0.10);
    --bs-cyan-0: rgba(50, 200, 250, 0.00);

    --bs-ocean: rgba(50, 150, 250, 1.00);

    --bs-ocean-900: rgba(50, 150, 250, 0.90);
    --bs-ocean-800: rgba(50, 150, 250, 0.80);
    --bs-ocean-700: rgba(50, 150, 250, 0.70);
    --bs-ocean-600: rgba(50, 150, 250, 0.60);
    --bs-ocean-500: rgba(50, 150, 250, 0.50);
    --bs-ocean-400: rgba(50, 150, 250, 0.40);
    --bs-ocean-300: rgba(50, 150, 250, 0.30);
    --bs-ocean-200: rgba(50, 150, 250, 0.20);
    --bs-ocean-100: rgba(50, 150, 250, 0.10);
    --bs-ocean-0: rgba(50, 150, 250, 0.00);

    --bs-primary: rgba(50, 100, 250, 1.00);
    --bs-primary-rgb: 50, 100, 250;
    --bs-blue: rgba(50, 100, 250, 1.00);

    --bs-blue-900: rgba(50, 100, 250, 0.90);
    --bs-blue-800: rgba(50, 100, 250, 0.80);
    --bs-blue-700: rgba(50, 100, 250, 0.70);
    --bs-blue-600: rgba(50, 100, 250, 0.60);
    --bs-blue-500: rgba(50, 100, 250, 0.50);
    --bs-blue-400: rgba(50, 100, 250, 0.40);
    --bs-blue-300: rgba(50, 100, 250, 0.30);
    --bs-blue-200: rgba(50, 100, 250, 0.20);
    --bs-blue-100: rgba(50, 100, 250, 0.10);
    --bs-blue-0: rgba(50, 100, 250, 0.00);

    --bs-indigo: rgba(100, 50, 250, 1.00);

    --bs-indigo-900: rgba(100, 50, 250, 0.90);
    --bs-indigo-800: rgba(100, 50, 250, 0.80);
    --bs-indigo-700: rgba(100, 50, 250, 0.70);
    --bs-indigo-600: rgba(100, 50, 250, 0.60);
    --bs-indigo-500: rgba(100, 50, 250, 0.50);
    --bs-indigo-400: rgba(100, 50, 250, 0.40);
    --bs-indigo-300: rgba(100, 50, 250, 0.30);
    --bs-indigo-200: rgba(100, 50, 250, 0.20);
    --bs-indigo-100: rgba(100, 50, 250, 0.10);
    --bs-indigo-0: rgba(100, 50, 250, 0.00);

    --bs-purple: rgba(150, 50, 250, 1.00);

    --bs-purple-900: rgba(150, 50, 250, 0.90);
    --bs-purple-800: rgba(150, 50, 250, 0.80);
    --bs-purple-700: rgba(150, 50, 250, 0.70);
    --bs-purple-600: rgba(150, 50, 250, 0.60);
    --bs-purple-500: rgba(150, 50, 250, 0.50);
    --bs-purple-400: rgba(150, 50, 250, 0.40);
    --bs-purple-300: rgba(150, 50, 250, 0.30);
    --bs-purple-200: rgba(150, 50, 250, 0.20);
    --bs-purple-100: rgba(150, 50, 250, 0.10);
    --bs-purple-0: rgba(150, 50, 250, 0.00);

    --bs-pink: rgba(250, 50, 150, 1.00);

    --bs-pink-900: rgba(250, 50, 150, 0.90);
    --bs-pink-800: rgba(250, 50, 150, 0.80);
    --bs-pink-700: rgba(250, 50, 150, 0.70);
    --bs-pink-600: rgba(250, 50, 150, 0.60);
    --bs-pink-500: rgba(250, 50, 150, 0.50);
    --bs-pink-400: rgba(250, 50, 150, 0.40);
    --bs-pink-300: rgba(250, 50, 150, 0.30);
    --bs-pink-200: rgba(250, 50, 150, 0.20);
    --bs-pink-100: rgba(250, 50, 150, 0.10);
    --bs-pink-0: rgba(250, 50, 150, 0.00);

    --bs-raspberry: rgba(240, 40, 100, 1.00);

    --bs-raspberry-900: rgba(240, 40, 100, 0.90);
    --bs-raspberry-800: rgba(240, 40, 100, 0.80);
    --bs-raspberry-700: rgba(240, 40, 100, 0.70);
    --bs-raspberry-600: rgba(240, 40, 100, 0.60);
    --bs-raspberry-500: rgba(240, 40, 100, 0.50);
    --bs-raspberry-400: rgba(240, 40, 100, 0.40);
    --bs-raspberry-300: rgba(240, 40, 100, 0.30);
    --bs-raspberry-200: rgba(240, 40, 100, 0.20);
    --bs-raspberry-100: rgba(240, 40, 100, 0.10);
    --bs-raspberry-0: rgba(240, 40, 100, 0.00);

    --bs-white: rgba(255, 255, 255, 1.00);

    --bs-white-900: rgba(255, 255, 255, 0.90);
    --bs-white-800: rgba(255, 255, 255, 0.80);
    --bs-white-700: rgba(255, 255, 255, 0.70);
    --bs-white-600: rgba(255, 255, 255, 0.60);
    --bs-white-500: rgba(255, 255, 255, 0.50);
    --bs-white-400: rgba(255, 255, 255, 0.40);
    --bs-white-300: rgba(255, 255, 255, 0.30);
    --bs-white-200: rgba(255, 255, 255, 0.20);
    --bs-white-100: rgba(255, 255, 255, 0.10);
    --bs-white-0: rgba(255, 255, 255, 0.00);

    --bs-secondary: rgba(255, 255, 255, 0.05);
    --bs-white-rgb: 255, 255, 255;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-bg: 255, 255, 255;

    --bs-gray: rgba(130, 130, 140, 1.00);

    --bs-gray-900: rgba(130, 130, 140, 0.90);
    --bs-gray-800: rgba(130, 130, 140, 0.80);
    --bs-gray-700: rgba(130, 130, 140, 0.70);
    --bs-gray-600: rgba(130, 130, 140, 0.60);
    --bs-gray-500: rgba(130, 130, 140, 0.50);
    --bs-gray-400: rgba(130, 130, 140, 0.40);
    --bs-gray-300: rgba(130, 130, 140, 0.30);
    --bs-gray-200: rgba(130, 130, 140, 0.20);
    --bs-gray-100: rgba(130, 130, 140, 0.10);
    --bs-gray-0: rgba(130, 130, 140, 0.00);

    --bs-body-color: rgba(130, 130, 140, 1.00);
    --bs-body-color-rgb: rgb(130, 130, 140);

    --bs-gray-dark: rgba(70, 70, 80, 1.00);

    --bs-gray-dark-900: rgba(70, 70, 80, 0.90);
    --bs-gray-dark-800: rgba(70, 70, 80, 0.80);
    --bs-gray-dark-700: rgba(70, 70, 80, 0.70);
    --bs-gray-dark-600: rgba(70, 70, 80, 0.60);
    --bs-gray-dark-500: rgba(70, 70, 80, 0.50);
    --bs-gray-dark-400: rgba(70, 70, 80, 0.40);
    --bs-gray-dark-300: rgba(70, 70, 80, 0.30);
    --bs-gray-dark-200: rgba(70, 70, 80, 0.20);
    --bs-gray-dark-100: rgba(70, 70, 80, 0.10);
    --bs-gray-dark-0: rgba(70, 70, 80, 0.00);

    --bs-secondary-rgb: 70, 70, 80;
    --bs-light-rgb: 70, 70, 80;

    --bs-dark: rgba(30, 30, 40, 1.00);

    --bs-dark-900: rgba(30, 30, 40, 0.90);
    --bs-dark-800: rgba(30, 30, 40, 0.80);
    --bs-dark-700: rgba(30, 30, 40, 0.70);
    --bs-dark-600: rgba(30, 30, 40, 0.60);
    --bs-dark-500: rgba(30, 30, 40, 0.50);
    --bs-dark-400: rgba(30, 30, 40, 0.40);
    --bs-dark-300: rgba(30, 30, 40, 0.30);
    --bs-dark-200: rgba(30, 30, 40, 0.20);
    --bs-dark-100: rgba(30, 30, 40, 0.10);
    --bs-dark-0: rgba(30, 30, 40, 0.00);

    --bs-light: rgba(30, 30, 40, 0.05);
    --bs-dark-rgb: 30, 30, 40;

    --bs-black-rgb: rgb(0, 0, 5);
    --bs-black: rgba(0, 0, 5, 1.00);

    --bs-black-900: rgba(0, 0, 5, 0.90);
    --bs-black-800: rgba(0, 0, 5, 0.80);
    --bs-black-700: rgba(0, 0, 5, 0.70);
    --bs-black-600: rgba(0, 0, 5, 0.60);
    --bs-black-500: rgba(0, 0, 5, 0.50);
    --bs-black-400: rgba(0, 0, 5, 0.40);
    --bs-black-300: rgba(0, 0, 5, 0.30);
    --bs-black-200: rgba(0, 0, 5, 0.20);
    --bs-black-100: rgba(0, 0, 5, 0.10);
    --bs-black-0: rgba(0, 0, 5, 0.00);

    --bs-navy: rgba(0, 38, 100, 1.00);

    --bs-navy-900: rgba(0, 38, 100, 0.90);
    --bs-navy-800: rgba(0, 38, 100, 0.80);
    --bs-navy-700: rgba(0, 38, 100, 0.70);
    --bs-navy-600: rgba(0, 38, 100, 0.60);
    --bs-navy-500: rgba(0, 38, 100, 0.50);
    --bs-navy-400: rgba(0, 38, 100, 0.40);
    --bs-navy-300: rgba(0, 38, 100, 0.30);
    --bs-navy-200: rgba(0, 38, 100, 0.20);
    --bs-navy-100: rgba(0, 38, 100, 0.10);
    --bs-navy-0: rgba(0, 38, 100, 0.00);

    --bs-gradient: linear-gradient(-45deg, var(--bs-gray-200) 0%, var(--bs-gray-0) 100%);

    --bs-border-width: 2px;
    --bs-border-color: var(--bs-gray);

    --bs-link-color: var(--bs-blue);
    --bs-link-hover-color: var(--bs-blue-300);

    --bs-code-color: var(--bs-raspberry);

    --bs-highlight-bg: var(--bs-gray-300);

    /* --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 600px;
    --bs-breakpoint-md: 800px;
    --bs-breakpoint-lg: 1000px;
    --bs-breakpoint-xl: 1500px;
    --bs-breakpoint-xxl: 1700px; */

    accent-color: var(--bs-blue);
}

/* -------------------------------- 

Basics

-------------------------------- */

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    padding: 0 !important;
    margin: 0 !important;

    outline: 0 !important;

    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
}

::selection {
    color: var(--bs-white);
    background: var(--bs-blue);
}

::-moz-selection {
    color: var(--bs-white);
    background: var(--bs-blue);
}

::target-text {
    color: var(--bs-white);
    background: var(--bs-primary);
}

::-webkit-scrollbar {
    background: var(--bs-gray-100);
    width: 10px;
    height: 10px;
}

/* ::-webkit-scrollbar-button {} */
/* ::-webkit-scrollbar-corner {} */
/* ::-webkit-resizer {} */

::-webkit-scrollbar-track {
    background: var(--bs-gray-100);
}

::-webkit-scrollbar-track-piece {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: var(--bs-primary);
    border-radius: 10px;
}

html {
    scroll-behavior: smooth;
    /* scroll-snap-type: y proximity; */
    scroll-padding: 80px 0 0 0;
    /* overflow-x: hidden !important; */
}

body {
    /* font: 400 1rem/1.5 'Roboto', sans-serif; */
    font-family: 'Roboto', sans-serif;
    padding-top: 80px !important;
    overflow-x: hidden !important;
    overflow-y: overlay;
}

/* body::before {
    z-index: -1;
    position: fixed;
    content: '';

    width: 1000px;
    height: 1000px;

    border-radius: 50% !important;

    top: -200px;
    left: -200px;

    background-image: conic-gradient(from 315deg at 500px 500px, var(--bs-gray-200), var(--bs-gray-0)) !important;
}

body::after {
    z-index: -1;
    position: fixed;
    content: '';

    width: 1000px;
    height: 1000px;

    border-radius: 50% !important;
    
    top: -553px;
    left: -553px;
    
    background-image: conic-gradient(from 135deg at -500px -497px, var(--bs-gray-200), var(--bs-gray-0)) !important;
} */

header,
section,
footer {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    /* scroll-margin: 80px 0 0 0; */
}

/* header picture.bg-blur{
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
}

header picture.bg-blur img{
    -webkit-transform: scale(1.175);
    transform: scale(1.175);
} */

.transition,
.btn,
.nav-link,
button {
    -webkit-transition: all 0.30s ease-in-out !important;
    -moz-transition: all 0.30s ease-in-out !important;
    -ms-transition: all 0.30s ease-in-out !important;
    -o-transition: all 0.30s ease-in-out !important;
    transition: all 0.30s ease-in-out !important;
}

.fade {
    -webkit-transition: opacity 0.30s ease-in-out !important;
    -moz-transition: opacity 0.30s ease-in-out !important;
    -ms-transition: opacity 0.30s ease-in-out !important;
    -o-transition: opacity 0.30s ease-in-out !important;
    transition: opacity 0.30s ease-in-out !important;
}

.rounded {
    border-radius: 30px !important;
}

.rounded .rounded {
    border-radius: 25px !important;
}

.rounded .rounded .rounded {
    border-radius: 20px !important;
}

.rounded .rounded .rounded .rounded {
    border-radius: 15px !important;
}

.rounded-top {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}

.rounded-end {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.rounded-bottom {
    border-bottom-right-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
}

.rounded-start {
    border-bottom-left-radius: 30px !important;
    border-top-left-radius: 30px !important;
}

.shadow,
.popover {
    box-shadow: 0 20px 40px -20px var(--bs-black-300) !important;
}

.shadow-xl {
    box-shadow: 0 30px 90px -30px var(--bs-black-300) !important;
}

.text-shadow-xl {
    text-shadow: 0 -15px 15px var(--bs-black-300);
}

hr {
    border-width: 2px;
    border-color: var(--bs-gray-500);
}

.vr {
    width: 2px;
    opacity: 1.00;
    background: var(--bs-gray-100);
}

.aspect-ratio-1x1 {
    aspect-ratio: 1/1;
}

.aspect-ratio-16x9 {
    aspect-ratio: 16/9;
}

.aspect-ratio-16x10 {
    aspect-ratio: 16/10;
}

.aspect-ratio-4x3 {
    aspect-ratio: 4/3;
}

.aspect-ratio-9x16 {
    aspect-ratio: 9/16;
}

.aspect-ratio-3x4 {
    aspect-ratio: 3/4;
}

iframe html body {
    padding: 0px !important;
}

.text-truncate-1,
.text-truncate-2,
.text-truncate-3,
.text-truncate-4,
.text-truncate-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* max-height: 100px; */
}

.text-truncate-1 {
    -webkit-line-clamp: 1;
}

.text-truncate-2 {
    -webkit-line-clamp: 2;
}

.text-truncate-3 {
    -webkit-line-clamp: 3;
}

.text-truncate-4 {
    -webkit-line-clamp: 4;
}

.text-truncate-5 {
    -webkit-line-clamp: 5;
}

/* .text-truncate-more::after{
    content: '...Read more.';
    color: var(--bs-blue);
} */

.text-truncate-more:hover,
.card:hover .text-truncate-more {
    -webkit-line-clamp: unset;
    /* max-height: 200px; */
}

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

.lift-up {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.lift-up:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.scale {
    -webkit-transform: scale(1.00);
    transform: scale(1.00);
}

.scale:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.gray {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.gray:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/* -------------------------------- 

Boot the trap

-------------------------------- */

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1700px;
}

.sticky-top,
.sticky-sm-top,
.sticky-md-top,
.sticky-lg-top,
.sticky-xl-top {
    /* margin-top: calc(-3rem - 85px) !important;
    margin-right: calc(3rem + 10px) !important;
    top: calc(80px + 3rem); */
    top: 80px;
}

b,
strong,
.fw-bolder {
    font-weight: 900 !important;
}

/* -------------------------------- 

Text Colours

-------------------------------- */

.text-red,
.text-danger {
    color: var(--bs-red);
}

.text-orange,
.text-warning {
    color: var(--bs-orange);
}

.text-yellow {
    color: var(--bs-yellow);
}

.text-spring {
    color: var(--bs-spring);
}

.text-green,
.text-success {
    color: var(--bs-green);
}

.text-teal {
    color: var(--bs-teal);
}

.text-cyan,
.text-info {
    color: var(--bs-cyan);
}

.text-ocean {
    color: var(--bs-ocean);
}

.text-blue,
.text-primary,
a {
    color: var(--bs-primary);
}

.text-indigo {
    color: var(--bs-indigo);
}

.text-purple {
    color: var(--bs-purple);
}

.text-pink {
    color: var(--bs-pink);
}

.text-raspberry {
    color: var(--bs-raspberry);
}

.text-light {
    color: var(--bs-gray) !important;
    /* color: inherit !important; */
    /* opacity: 0.60; */
}

.text-secondary {
    color: var(--bs-gray-200);
}

.text-gray {
    color: var(--bs-gray);
}

.text-gray-dark {
    color: var(--bs-gray-dark);
}

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

.text-black {
    color: var(--bs-black) !important;
}

.text-navy {
    color: var(--bs-navy) !important;
}

/* -------------------------------- 

Parent Syling

-------------------------------- */

/* .parent-red .accordion-item:has(.accordion-button:not(.collapsed)), */
.parent-red .card:has(a):hover,
.parent-red .accordion-button:hover,
.parent-red .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-red) !important;
}

.parent-orange .card:has(a):hover,
.parent-orange .accordion-button:hover,
.parent-orange .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-orange) !important;
}

.parent-yellow .card:has(a):hover,
.parent-yellow .accordion-button:hover,
.parent-yellow .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-yellow) !important;
}

.parent-spring .card:has(a):hover,
.parent-spring .accordion-button:hover,
.parent-spring .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-spring) !important;
}

.parent-green .card:has(a):hover,
.parent-green .accordion-button:hover,
.parent-green .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-green) !important;
}

.parent-teal .card:has(a):hover,
.parent-teal .accordion-button:hover,
.parent-teal .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-teal) !important;
}

.parent-cyan .card:has(a):hover,
.parent-cyan .accordion-button:hover,
.parent-cyan .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-cyan) !important;
}

.parent-ocean .card:has(a):hover,
.parent-ocean .accordion-button:hover,
.parent-ocean .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-ocean) !important;
}

.parent-blue .card:has(a):hover,
.parent-blue .accordion-button:hover,
.parent-blue .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-blue) !important;
}

.parent-primary .card:has(a):hover,
.parent-primary .accordion-button:hover,
.parent-primary .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-primary) !important;
}

.parent-indigo .card:has(a):hover,
.parent-indigo .accordion-button:hover,
.parent-indigo .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-indigo) !important;
}

.parent-purple .card:has(a):hover,
.parent-purple .accordion-button:hover,
.parent-purple .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-purple) !important;
}

.parent-pink .card:has(a):hover,
.parent-pink .accordion-button:hover,
.parent-pink .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-pink) !important;
}

.parent-raspberry .card:has(a):hover,
.parent-raspberry .accordion-button:hover,
.parent-raspberry .accordion-button:not(.collapsed) {
    border-top-color: var(--bs-raspberry) !important;
}

/* .parent-red .card:has(picture.bg-light):hover picture, */
.parent-red .card:hover picture.bg-light {
    background: var(--bs-red) !important;
}

.parent-orange .card:hover picture.bg-light {
    background: var(--bs-orange) !important;
}

.parent-yellow .card:hover picture.bg-light {
    background: var(--bs-yellow) !important;
}

.parent-spring .card:hover picture.bg-light {
    background: var(--bs-spring) !important;
}

.parent-green .card:hover picture.bg-light {
    background: var(--bs-green) !important;
}

.parent-teal .card:hover picture.bg-light {
    background: var(--bs-teal) !important;
}

.parent-cyan .card:hover picture.bg-light {
    background: var(--bs-cyan) !important;
}

.parent-ocean .card:hover picture.bg-light {
    background: var(--bs-ocean) !important;
}

.parent-blue .card:hover picture.bg-light {
    background: var(--bs-blue) !important;
}

.parent-indigo .card:hover picture.bg-light {
    background: var(--bs-indigo) !important;
}

.parent-purple .card:hover picture.bg-light {
    background: var(--bs-purple) !important;
}

.parent-pink .card:hover picture.bg-light {
    background: var(--bs-pink) !important;
}

.parent-raspberry .card:hover picture.bg-light {
    background: var(--bs-raspberry) !important;
}

/* -------------------------------- 

Buttons

-------------------------------- */

a,
button {
    text-decoration: none;
    cursor: pointer;
    outline: none !important;
}

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

a:focus {
    box-shadow: none !important;
}

.btn {
    color: inherit;
    border: none !important;
}

.btn:hover,
.btn-secondary:hover {
    color: inherit;
}

/* a[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: -10px;
    left: 0;
  } */

/* -------------------------------- 

Filled Buttons

-------------------------------- */

.btn-danger,
.btn-red {
    background: var(--bs-red) !important;
}

.btn-danger:hover,
.btn-red:hover {
    box-shadow: 0 15px 30px -15px var(--bs-danger);
}

.btn-warning,
.btn-orange {
    background: var(--bs-warning) !important;
}

.btn-warning:hover,
.btn-orange:hover {
    box-shadow: 0 15px 30px -15px var(--bs-warning);
}

.btn-yellow {
    background: var(--bs-yellow) !important;
}

.btn-yellow:hover {
    box-shadow: 0 15px 30px -15px var(--bs-yellow);
}

.btn-spring {
    background: var(--bs-spring) !important;
}

.btn-spring:hover {
    box-shadow: 0 15px 30px -15px var(--bs-spring);
}

.btn-success,
.btn-green {
    background: var(--bs-success) !important;
}

.btn-success:hover,
.btn-green:hover {
    box-shadow: 0 15px 30px -15px var(--bs-success);
}

.btn-teal {
    background: var(--bs-teal) !important;
}

.btn-teal:hover {
    box-shadow: 0 15px 30px -15px var(--bs-teal);
}

.btn-info,
.btn-cyan {
    background: var(--bs-cyan) !important;
}

.btn-info:hover,
.btn-cyan:hover {
    box-shadow: 0 15px 30px -15px var(--bs-info);
}

.btn-ocean {
    background: var(--bs-ocean) !important;
}

.btn-ocean:hover {
    box-shadow: 0 15px 30px -15px var(--bs-ocean);
}

.btn-primary,
.btn-blue,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--bs-white) !important;
    background: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-blue:hover,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--bs-white) !important;
    box-shadow: 0 15px 30px -15px var(--bs-primary) !important;
}

.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link {
    border: none !important;
    color: var(--bs-blue) !important;
    background: var(--bs-blue-100);
    /* border: 2px solid transparent !important; */
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    /* color: var(--bs-blue) !important;
    border: 2px solid var(--bs-blue) !important; */
    color: var(--bs-white) !important;
    border: none !important;
    background: var(--bs-blue) !important;
}

.btn-indigo {
    background: var(--bs-indigo) !important;
}

.btn-indigo:hover {
    box-shadow: 0 15px 30px -15px var(--bs-indigo);
}

.btn-purple {
    background: var(--bs-purple) !important;
}

.btn-purple:hover {
    box-shadow: 0 15px 30px -15px var(--bs-purple);
}

.btn-pink {
    background: var(--bs-pink) !important;
}

.btn-pink:hover {
    box-shadow: 0 15px 30px -15px var(--bs-pink);
}

.btn-raspberry {
    background: var(--bs-raspberry) !important;
}

.btn-raspberry:hover {
    box-shadow: 0 15px 30px -15px var(--bs-raspberry);
}

.btn-dark {
    background: var(--bs-dark) !important;
}

.btn-white:hover {
    background: var(--bs-white-100) !important;
}

.btn-light {
    background: var(--bs-gray-100) !important;
}

.btn-light:hover {
    background: var(--bs-gray-200) !important;
}

.btn-secondary {
    background: var(--bs-gray-200) !important;
}

.btn-secondary:hover {
    background: var(--bs-gray-300) !important;
}

/* -------------------------------- 

Secondary Buttons

-------------------------------- */

.btn-secondary-danger,
.btn-secondary-red {
    color: var(--bs-danger);
    background: var(--bs-red-100);
}

.btn-secondary-danger:hover,
.btn-secondary-red:hover {
    color: var(--bs-danger);
    background: var(--bs-red-200);
}

.btn-secondary-warning,
.btn-secondary-orange {
    color: var(--bs-warning);
    background: var(--bs-orange-100);
}

.btn-secondary-warning:hover,
.btn-secondary-orange:hover {
    color: var(--bs-warning);
    background: var(--bs-orange-200);
}

.btn-secondary-yellow {
    color: var(--bs-yellow);
    background: var(--bs-yellow-100);
}

.btn-secondary-yellow:hover {
    color: var(--bs-yellow);
    background: var(--bs-yellow-200);
}

.btn-secondary-spring {
    color: var(--bs-spring);
    background: var(--bs-spring-100);
}

.btn-secondary-spring:hover {
    color: var(--bs-spring);
    background: var(--bs-spring-200);
}

.btn-secondary-success,
.btn-secondary-green {
    color: var(--bs-success);
    background: var(--bs-green-100);
}

.btn-secondary-success:hover,
.btn-secondary-green:hover {
    color: var(--bs-success);
    background: var(--bs-green-200);
}

.btn-secondary-teal {
    color: var(--bs-teal);
    background: var(--bs-teal-100);
}

.btn-secondary-teal:hover {
    color: var(--bs-teal);
    background: var(--bs-teal-200);
}

.btn-secondary-info,
.btn-secondary-cyan {
    color: var(--bs-info);
    background: var(--bs-cyan-100);
}

.btn-secondary-info:hover,
.btn-secondary-cyan:hover {
    color: var(--bs-info);
    background: var(--bs-cyan-200);
}

.btn-secondary-ocean {
    color: var(--bs-ocean);
    background: var(--bs-ocean-100);
}

.btn-secondary-ocean:hover {
    color: var(--bs-ocean);
    background: var(--bs-ocean-200);
}

.btn-secondary-primary,
.btn-secondary-blue {
    color: var(--bs-primary);
    background: var(--bs-blue-100);
}

.btn-secondary-primary:hover,
.btn-secondary-blue:hover {
    color: var(--bs-primary);
    background: var(--bs-blue-200) !important;
}

.btn-secondary-indigo {
    color: var(--bs-indigo);
    background: var(--bs-indigo-100);
}

.btn-secondary-indigo:hover {
    color: var(--bs-indigo);
    background: var(--bs-indigo-200);
}

.btn-secondary-purple {
    color: var(--bs-purple);
    background: var(--bs-purple-100);
}

.btn-secondary-purple:hover {
    color: var(--bs-purple);
    background: var(--bs-purple-200);
}

.btn-secondary-pink {
    color: var(--bs-pink);
    background: var(--bs-pink-100);
}

.btn-secondary-pink:hover {
    color: var(--bs-pink);
    background: var(--bs-pink-200);
}

.btn-secondary-raspberry {
    color: var(--bs-raspberry);
    background: var(--bs-raspberry-100);
}

.btn-secondary-raspberry:hover {
    color: var(--bs-raspberry);
    background: var(--bs-raspberry-200);
}

/* -------------------------------- 

Outlined Buttons

-------------------------------- */

.btn-outline-danger,
.btn-outline-red {
    color: var(--bs-red);
    border: 2px solid var(--bs-red) !important;
}

.btn-outline-danger:hover,
.btn-outline-red:hover {
    color: var(--bs-red) !important;
    background: var(--bs-red-200);
}

.btn-outline-warning,
.btn-outline-orange {
    color: var(--bs-orange);
    border: 2px solid var(--bs-orange) !important;
}

.btn-outline-warning:hover,
.btn-outline-orange:hover {
    color: var(--bs-orange) !important;
    background: var(--bs-orange-200);
}

.btn-outline-yellow {
    color: var(--bs-yellow);
    border: 2px solid var(--bs-yellow) !important;
}

.btn-outline-yellow:hover {
    color: var(--bs-yellow);
    background: var(--bs-yellow-200);
}

.btn-outline-spring {
    color: var(--bs-spring);
    border: 2px solid var(--bs-spring) !important;
}

.btn-outline-spring:hover {
    color: var(--bs-spring);
    background: var(--bs-spring-200);
}

.btn-outline-success,
.btn-outline-green {
    color: var(--bs-green);
    border: 2px solid var(--bs-green) !important;
}

.btn-outline-success:hover,
.btn-outline-green:hover {
    color: var(--bs-green) !important;
    background: var(--bs-green-200) !important;
}

.btn-outline-teal {
    color: var(--bs-teal);
    border: 2px solid var(--bs-teal) !important;
}

.btn-outline-teal:hover {
    color: var(--bs-teal) !important;
    background: var(--bs-teal-200);
}

.btn-outline-info,
.btn-outline-cyan {
    color: var(--bs-info);
    border: 2px solid var(--bs-info) !important;
}

.btn-outline-info:hover,
.btn-outline-cyan:hover {
    color: var(--bs-info) !important;
    background: var(--bs-cyan-200);
}

.btn-outline-ocean {
    color: var(--bs-ocean);
    border: 2px solid var(--bs-ocean) !important;
}

.btn-outline-ocean:hover {
    color: var(--bs-ocean) !important;
    background: var(--bs-ocean-200);
}

.btn-outline-primary,
.btn-outline-blue {
    color: var(--bs-primary);
    border: 2px solid var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-blue:hover {
    color: var(--bs-primary) !important;
    background: var(--bs-blue-200) !important;
}

.btn-outline-indigo {
    color: var(--bs-indigo);
    border: 2px solid var(--bs-indigo) !important;
}

.btn-outline-indigo:hover {
    color: var(--bs-indigo);
    background: var(--bs-indigo-200);
}

.btn-outline-purple {
    color: var(--bs-purple);
    border: 2px solid var(--bs-purple) !important;
}

.btn-outline-purple:hover {
    color: var(--bs-purple);
    background: var(--bs-purple-200);
}

.btn-outline-pink {
    color: var(--bs-pink);
    border: 2px solid var(--bs-pink) !important;
}

.btn-outline-pink:hover {
    color: var(--bs-pink);
    background: var(--bs-pink-200);
}

.btn-outline-raspberry {
    color: var(--bs-raspberry);
    border: 2px solid var(--bs-raspberry) !important;
}

.btn-outline-raspberry:hover {
    color: var(--bs-raspberry);
    background: var(--bs-raspberry-200);
}

.btn-outline-white {
    color: var(--bs-white);
    border: 2px solid var(--bs-white) !important;
}

.btn-outline-white:hover {
    color: var(--bs-white) !important;
    background: var(--bs-white-200) !important;
}

.btn-outline-dark {
    color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.btn-outline-dark:hover {
    color: var(--bs-white) !important;
    background-color: var(--bs-dark) !important;
}

.btn-outline-light {
    border: 2px solid var(--bs-gray-200) !important;
    background: none !important;
}

.btn-outline-light:hover {
    background: var(--bs-gray-200) !important;
}

.btn-outline-secondary {
    color: var(--bs-gray) !important;
    border: 2px solid var(--bs-gray-300) !important;
    background: none !important;
}

.btn-outline-secondary:hover {
    background: var(--bs-gray-300) !important;
}

/* -------------------------------- 

Other Buttons

-------------------------------- */

.sybrin-logo {
    height: 32px;
    width: auto !important;
    /* fill: rgba(0, 38, 100, 1.00); */
}

.nav-link svg {
    height: 30px !important;
}

nav::before {
    content: "";
    /* position: inherit; */
    position: absolute;
    bottom: 0px;
    z-index: -1;
    width: 100%;
    border-bottom: 2px solid var(--bs-gray-100);
}

.dropdown-menu {
    /* min-width: 350px; */
    color: inherit;
    min-width: max-content;
    /* background: var(--bs-gray); */
}

.dropdown-toggle::after {
    margin-left: 15px !important;
}

.dropdown-toggle::after,
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%239696A0' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
    border: none !important;

    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: 16px;
    transition: transform 0.30s ease-in-out;
}

.btn-close {
    background: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%231E1E28' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z' clip-rule='evenodd'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    transition: transform 0.30s ease-in-out;
}

.dropdown-menu {
    /* display: block !important; */
    visibility: visible;
    animation: mooove-in 0.30s ease-in-out 1 normal both;
    /* transform-origin: bottom top; */
}

.dropdown-menu:not(.show) {
    visibility: hidden;
    transition: visibility 0s, opacity 0.30s linear;
    animation: mooove-out 0.30s ease-in-out 1 normal both;
    /* transform-origin: top bottom; */
}

/* .dropdown-toggle::before {
    transition: all 0.30s ease-in-out !important;
}

.dropdown-toggle.show::before {
    z-index: -1;
    opacity: 1.00;
    content: "";
    position: fixed;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bs-gray-100);
} */

.dropdown-menu.mega {
    position: fixed !important;
    top: inherit !important;
    left: 0 !important;
    right: 0 !important;
    /* max-width: 1700px;
    margin-left: auto !important;
    margin-right: auto !important; */
}

.dropdown-menu.mega section.d-grid {
    grid-template-columns: auto auto auto;
}

.columns-2 {
    grid-template-columns: auto auto;
}

a.show.dropdown-toggle::after,
.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.dropdown-header {
    color: var(--bs-gray);
}

.dropdown small.text-light{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.nav-link {
    color: inherit;
    border: none;
    /* border-bottom: 2px solid transparent; */
}

nav .nav-link:hover,
nav .nav-link.active,
nav .nav-link:focus,
nav #current {
    color: var(--bs-primary);
    /* border-bottom: 2px solid var(--bs-primary) !important; */
    /* background: var(--bs-blue-100); */
    /* box-shadow: inset 0 -30px 30px -40px var(--bs-primary); */
    /* box-shadow: 0 15px 15px -15px var(--bs-primary); */
}

nav .nav-link {
    position: relative;
    overflow: hidden;
}

nav .nav-link::before {
    transform: scaleX(0);
    transform-origin: bottom right;

    z-index: -1;
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0 0 0 0;
    /* background: var(--bs-gray-100); */
    border-bottom: 2px solid var(--bs-primary) !important;
    /* box-shadow: inset 0 -30px 30px -40px var(--bs-primary); */

    transition: transform 0.30s ease-in-out;
}

nav .nav-link:hover::before,
nav .nav-link:focus::before,
nav #current::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

nav .dropdown-menu #current::after {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%239696A0' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z' clip-rule='evenodd'/></svg>");
    border: none !important;

    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: 20px;

    /* position: absolute;
    right: 2rem; */
}

/* nav .dropdown-menu .nav-link.rounded::before {
    border-radius: 30px;
    transform: scaleY(0);
}

nav .dropdown-menu .nav-link.rounded:hover::before {
    transform: scaleY(1);
    transform-origin: bottom;
} */

nav .btn-primary,
nav .btn-blue,
nav .btn-primary:hover,
nav .btn-blue:hover,
nav .btn-primary::before,
nav .btn-blue::before,
nav .btn-primary:hover::before,
nav .btn-blue:hover::before {
    border-bottom: none !important;
}

.nav-link:focus,
.nav-link:hover {
    color: var(--bs-primary);
}

.navbar-toggler:focus {
    box-shadow: none;
    /* transform: rotate(180deg); */
}

nav fieldset:hover {
    border-color: var(--bs-blue) !important;
}

nav fieldset:hover legend {
    color: var(--bs-blue) !important;
}

nav fieldset:hover legend small {
    border-color: var(--bs-blue-300) !important;
}

.card a {
    opacity: 0.00;

    margin: -10px 0 10px 0 !important;

    /* -webkit-transform: translateY(-10px);
    transform: translateY(-10px); */
}

.card:hover a {
    opacity: 1.00;

    margin: 0 0 0 0 !important;

    /* -webkit-transform: translateY(0px);
    transform: translateY(0px); */
}

.shift-cards-left .card:nth-child(even),
.shift-cards-right .card:nth-child(odd) {
    margin: 3rem 0 -3rem 0 !important;
}

/* #our-insights .card:first-child{
    width: 100% !important;
    flex-direction: row;
}

#our-insights .card:first-child img{
    width: min(70%, 550px) !important;
} */

aside .nav-link {
    border-left: 2px solid transparent;
    margin-left: -2px !important;

    border-bottom: none;
}

aside .nav-link:hover,
aside .nav-link.active {
    color: inherit !important;
    border-left: 2px solid var(--bs-gray) !important;
    /* background: var(--bs-gray-100); */
    /* opacity: 1.00 !important; */
}

#our-insights aside .nav-link.active {
    font-size: 1.75rem;
    font-weight: 900;
    /* background: var(--bs-gray-100); */
}

#our-insights aside .nav-link p {
    font-size: initial;
    font-weight: initial;
    opacity: 0.00;
    visibility: hidden;
    max-height: 0px;
    padding-top: 0 !important;
}

#our-insights aside .nav-link.active p {
    opacity: 1.00;
    visibility: visible;
    max-height: 200px;
    padding-top: 1rem !important;
}

/* -------------------------------- 

Backgrounds

-------------------------------- */

.bg-red,
.bg-danger {
    background: var(--bs-red);
}

.bg-orange,
.bg-warning {
    background: var(--bs-orange);
}

.bg-yellow {
    background: var(--bs-yellow);
}

.bg-spring {
    background: var(--bs-spring);
}

.bg-green,
.bg-success {
    background: var(--bs-green);
}

.bg-teal {
    background: var(--bs-teal);
}

.bg-cyan,
.bg-info {
    background: var(--bs-cyan);
}

.bg-ocean {
    background: var(--bs-ocean);
}

.bg-blue,
.bg-primary {
    background: var(--bs-primary) !important;
}

.bg-secondary-blue,
.bg-secondary-primary {
    background: var(--bs-blue-300) !important;
}

.bg-indigo {
    background: var(--bs-indigo);
}

.bg-purple {
    background: var(--bs-purple);
}

.bg-pink {
    background: var(--bs-pink);
}

.bg-raspberry {
    background: var(--bs-raspberry);
}

.bg-light {
    background-color: var(--bs-gray-100) !important;
}

.bg-secondary {
    background-color: var(--bs-gray-200) !important;
}

.bg-white {
    background-color: var(--bs-white) !important;
}

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

.bg-glyph-1 {
    background-image: url(../images/bg-glyph-1.svg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    background-attachment: scroll !important;
    background-size: cover !important;
}

.bg-glyph-1-dark {
    background-image: url(../images/bg-glyph-1-dark.svg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    background-attachment: scroll !important;
    background-size: cover !important;
}

.bg-glyph-2 {
    background-image: url(../images/bg-glyph-2.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-attachment: scroll !important;
    background-size: cover !important;
}

.bg-glyph-3 {
    background-image: url(../images/bg-glyph-3.svg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    background-attachment: scroll !important;
    background-size: cover !important;
}

.bg-circles-blue {
    position: relative;
}

.bg-circles-blue::before,
.bg-circles-blue::after {
    z-index: -1;
    display: inline-block;
    position: absolute;
    content: '';
    border: 2px solid var(--bs-blue);
    left: -25px;
    top: -25px;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
}

.bg-circles-blue::after {
    border: none;
    background: var(--bs-blue);
    top: auto;
    left: auto;
    right: -100px;
    bottom: -100px;
    width: 200px;
    height: 200px;
}

.bg-circles-purple {
    position: relative;
}

.bg-circles-purple::before,
.bg-circles-purple::after {
    z-index: -1;
    display: inline-block;
    position: absolute;
    content: '';
    border: 2px solid var(--bs-purple);
    left: -25px;
    top: -25px;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
}

.bg-circles-purple::after {
    border: none;
    background: var(--bs-purple);
    top: auto;
    left: auto;
    right: -100px;
    bottom: -100px;
    width: 200px;
    height: 200px;
}

.bg-circles-orange {
    position: relative;
}

.bg-circles-orange::before,
.bg-circles-orange::after {
    z-index: -1;
    display: inline-block;
    position: absolute;
    content: '';
    border: 2px solid var(--bs-orange);
    left: -25px;
    top: -25px;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
}

.bg-circles-orange::after {
    border: none;
    background: var(--bs-orange);
    top: auto;
    left: auto;
    right: -100px;
    bottom: -100px;
    width: 200px;
    height: 200px;
}

/* -------------------------------- 

Background Gradients

-------------------------------- */

.bg-gradient-red {
    background: linear-gradient(135deg, var(--bs-red-300) 0%, var(--bs-red) 100%);
}

.bg-conic-gradient-red {
    background-image: conic-gradient(from 0deg, var(--bs-red) 0deg, var(--bs-red-0) 360deg);
}

.bg-gradient-orange {
    background: linear-gradient(135deg, var(--bs-orange-300) 0%, var(--bs-orange) 100%);
}

.bg-conic-gradient-orange {
    background-image: conic-gradient(from 0deg, var(--bs-orange) 0deg, var(--bs-orange-0) 360deg);
}

.bg-gradient-yellow {
    background: linear-gradient(135deg, var(--bs-yellow-300) 0%, var(--bs-yellow) 100%);
}

.bg-conic-gradient-yellow {
    background-image: conic-gradient(from 0deg, var(--bs-yellow) 0deg, var(--bs-yellow-0) 360deg);
}

.bg-gradient-spring {
    background: linear-gradient(135deg, var(--bs-spring-300) 0%, var(--bs-spring) 100%);
}

.bg-conic-gradient-spring {
    background-image: conic-gradient(from 0deg, var(--bs-spring) 0deg, var(--bs-spring-0) 360deg);
}

.bg-gradient-green,
.bg-gradient-success {
    background: linear-gradient(135deg, var(--bs-green-300) 0%, var(--bs-green) 100%);
}

.bg-conic-gradient-green {
    background-image: conic-gradient(from 0deg, var(--bs-green) 0deg, var(--bs-green-0) 360deg);
}

.bg-gradient-teal {
    background: linear-gradient(135deg, var(--bs-teal-300) 0%, var(--bs-teal) 100%);
}

.bg-conic-gradient-teal {
    background-image: conic-gradient(from 0deg, var(--bs-teal) 0deg, var(--bs-teal-0) 360deg);
}

.bg-gradient-cyan,
.bg-gradient-info {
    background: linear-gradient(135deg, var(--bs-cyan-300) 0%, var(--bs-cyan) 100%);
}

.bg-conic-gradient-cyan {
    background-image: conic-gradient(from 0deg, var(--bs-cyan) 0deg, var(--bs-cyan-0) 360deg);
}

.bg-gradient-ocean {
    background: linear-gradient(135deg, var(--bs-ocean-300) 0%, var(--bs-ocean) 100%);
}

.bg-conic-gradient-ocean {
    background-image: conic-gradient(from 0deg, var(--bs-ocean) 0deg, var(--bs-ocean-0) 360deg);
}

.bg-gradient-blue,
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--bs-blue-300) 0%, var(--bs-blue) 100%);
}

.bg-conic-gradient-blue {
    background-image: conic-gradient(from 0deg, var(--bs-blue) 0deg, var(--bs-blue-0) 360deg);
}

.bg-gradient-indigo {
    background: linear-gradient(135deg, var(--bs-indigo-300) 0%, var(--bs-indigo) 100%);
}

.bg-conic-gradient-indigo {
    background-image: conic-gradient(from 0deg, var(--bs-indigo) 0deg, var(--bs-indigo-0) 360deg);
}

.bg-gradient-purple {
    background: linear-gradient(135deg, var(--bs-purple-300) 0%, var(--bs-purple) 100%);
}

.bg-conic-gradient-purple {
    background-image: conic-gradient(from 0deg, var(--bs-purple) 0deg, var(--bs-purple-0) 360deg);
}

.bg-gradient-pink {
    background: linear-gradient(135deg, var(--bs-pink-300) 0%, var(--bs-pink) 100%);
}

.bg-conic-gradient-pink {
    background-image: conic-gradient(from 0deg, var(--bs-pink) 0deg, var(--bs-pink-0) 360deg);
}

.bg-gradient-raspberry {
    background: linear-gradient(135deg, var(--bs-raspberry-300) 0%, var(--bs-raspberry) 100%);
}

.bg-conic-gradient-raspberry {
    background-image: conic-gradient(from 0deg, var(--bs-raspberry) 0deg, var(--bs-raspberry-0) 360deg);
}

.bg-gradient-white {
    background: linear-gradient(135deg, var(--bs-white-300) 0%, var(--bs-white) 100%);
}

.bg-conic-gradient-white {
    background-image: conic-gradient(from 0deg, var(--bs-white) 0deg, var(--bs-white-0) 360deg);
}

.bg-gradient-gray {
    background: linear-gradient(135deg, var(--bs-gray-300) 0%, var(--bs-gray) 100%);
}

.bg-conic-gradient-gray {
    background-image: conic-gradient(from 0deg, var(--bs-gray) 0deg, var(--bs-gray-0) 360deg);
}

.bg-gradient-gray-dark {
    background: linear-gradient(135deg, var(--bs-gray-dark-300) 0%, var(--bs-gray-dark) 100%);
}

.bg-conic-gradient-gray-dark {
    background-image: conic-gradient(from 0deg, var(--bs-gray-dark) 0deg, var(--bs-gray-dark-0) 360deg);
}

.bg-gradient-dark {
    background: linear-gradient(135deg, var(--bs-dark-300) 0%, var(--bs-dark) 100%);
}

.bg-conic-gradient-dark {
    background-image: conic-gradient(from 0deg, var(--bs-dark) 0deg, var(--bs-dark-0) 360deg);
}

.bg-gradient-black {
    background: linear-gradient(135deg, var(--bs-black-300) 0%, var(--bs-black) 100%);
}

.bg-conic-gradient-black {
    background-image: conic-gradient(from 0deg, var(--bs-black) 0deg, var(--bs-black-0) 360deg);
}

.bg-gradient-navy {
    background: linear-gradient(135deg, var(--bs-navy-300) 0%, var(--bs-navy) 100%);
}

.bg-conic-gradient-navy {
    background-image: conic-gradient(from 0deg, var(--bs-navy) 0deg, var(--bs-navy-0) 360deg);
}

/* picture.infinity img{
    z-index: 10;

    aspect-ratio: 1;
    object-view-box: inset(-3rem 0px 0px 0px);
    object-fit: cover;
} */

.infinity {
    position: relative;
    /* border-top: 2px solid var(--bs-gray); */
    background-image: conic-gradient(from 45deg, var(--bs-gray-0) 70deg, var(--bs-gray-200) 330deg);
    /* aspect-ratio: 1/1 !important; */
}

.infinity::after {
    z-index: -10;
    content: '';
    position: absolute;
    display: block;

    /* border-bottom: 2px solid var(--bs-gray); */
    background-image: conic-gradient(from 225deg, var(--bs-gray-0) 70deg, var(--bs-gray-200) 330deg);

    width: 100%;
    height: 100%;

    right: calc(-35% + -2px);
    top: calc(-35% + 2px);

    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
}

.bg-infinity-left {
    z-index: -10;
    left: -600px !important;
    top: -300px !important;
    /* transform: rotate(0deg); */
    transform: rotate(90deg) !important;
}

.bg-infinity-right {
    z-index: -10;
    right: -150px !important;
    bottom: -150px !important;
    transform: rotate(270deg);
}

/* -------------------------------- 

Borders

-------------------------------- */

.border {
    border-color: var(--bs-gray) !important;
}

.border-white {
    border-color: var(--bs-white) !important;
}

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

.border-light {
    border-color: var(--bs-gray-100) !important;
}

.border-secondary {
    border-color: var(--bs-gray-200) !important;
}

.border-top {
    border-top-color: var(--bs-gray-100) !important;
}

.border-bottom {
    border-bottom-color: var(--bs-gray-100) !important;
}

.border-start {
    border-left-color: var(--bs-gray-100) !important;
}

.border-end {
    border-right-color: var(--bs-gray-100) !important;
}

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

.border-secondary {
    border-color: var(--bs-gray-200) !important;
}

.border-success,
.border-green {
    border-color: var(--bs-success) !important;
}

.border-danger,
.border-red {
    border-color: var(--bs-danger) !important;
}

.border-warning,
.border-orange {
    border-color: var(--bs-warning) !important;
}

.border-info,
.border-cyan {
    border-color: var(--bs-info) !important;
}

.border-indigo {
    border-color: var(--bs-indigo) !important;
}

.border-purple {
    border-color: var(--bs-purple) !important;
}

.border-pink {
    border-color: var(--bs-pink) !important;
}

.border-yellow {
    border-color: var(--bs-yellow) !important;
}

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

.border-gray {
    border-color: var(--bs-gray) !important;
}

/* -------------------------------- 

Popovers / Tooltips

-------------------------------- */

.popover {
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-size: inherit;
    color: inherit;
    border: none;

    max-width: 250px;
    padding: 1.5rem !important;
    border-radius: 20px !important;

    background: transparent !important;
    background-color: var(--bs-gray-100) !important;
    border-top: 2px solid var(--bs-gray-100);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* .popover.show {
} */

.popover-header {
    color: inherit !important;
    /* background: inherit; */
    background: none;
    border-bottom: none;

    font-weight: 700;
    padding-bottom: 0.75rem !important;
    margin-bottom: 0 !important;
}

.popover-body {
    color: inherit !important;
    opacity: 0.70;
}

.popover-arrow {
    display: none !important;
}

/* -------------------------------- 

Modals

-------------------------------- */

.modal {
    background: var(--bs-dark-300);
}

.modal-md {
    max-width: 800px;
}

.modal-lg {
    max-width: 1100px;
}

.modal-xl {
    max-width: 1700px;
}

/* .modal-dialog-scrollable {
    height: inherit;
} */

/* -------------------------------- 

Forms

-------------------------------- */

::placeholder {
    color: var(--bs-gray-500);
}

::-webkit-input-placeholder {
    /* Edge */
    color: var(--bs-gray-500);
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--bs-gray-500);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;

    height: 20px;
    width: 20px;
    border-radius: 50%;

    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%239696A0' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z' clip-rule='evenodd'/></svg>");
}

/* .parent-purple div:has(input){
    border-color: var(--bs-purple-200) !important;
}

.parent-purple div:has(input:hover),
.parent-purple div:has(input:focus){
    border-color: var(--bs-purple) !important;
} */

/* -------------------------------- 

Experiments

-------------------------------- */

ol.numberingzzz {
    counter-reset: chapter;
    counter-increment: mega-step;
}

ol.numberingzzz li:first-of-type:before {
    counter-set: chapter 1;
}

ol.numberingzzz li::before {
    font-size: 30px;
    font-weight: 300;
    color: var(--bs-gray-300);
    line-height: normal;

    position: absolute;
    right: 3rem;

    /* content: counter(chapter); */
    /* content: "<" counter(chapter) "/>"; */
    content: "<" counter(chapter, decimal-leading-zero) "/>";
    counter-increment: chapter;
}

ol.nav-tabs.numberingzzz li::before {
    font-size: initial;
    right: 0.35rem;
    top: 0.35rem;
    color: var(--bs-blue-500);
}

ol.nav-tabs.numberingzzz li:has(.nav-link.active)::before {
    color: var(--bs-white-500) !important;
}

ol.nav-tabs.numberingzzz .nav-link:hover,
ol.nav-tabs.numberingzzz .nav-link:focus {
    isolation: inherit !important;
}

#webinars {
    counter-reset: webinarzzz;
}

#webinars .card {
    counter-increment: webinarzzz;
}

.webinarzzz-count:before {
    content: counter(webinarzzz);
    /* content: counter(webinarzzz, decimal-leading-zero); */
}

.blend-mode-color {
    mix-blend-mode: color;
}

/* -------------------------------- 

Filter

-------------------------------- */

.parent-red .is-checked,
.parent-red .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-red) !important;
}

.parent-orange .is-checked,
.parent-orange .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-orange) !important;
}

.parent-yellow .is-checked,
.parent-yellow .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-yellow) !important;
}

.parent-spring .is-checked,
.parent-spring .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-spring) !important;
}

.parent-green .is-checked,
.parent-green .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-green) !important;
}

.parent-teal .is-checked,
.parent-teal .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-teal) !important;
}

.parent-cyan .is-checked,
.parent-cyan .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-cyan) !important;
}

.parent-ocean .is-checked,
.parent-ocean .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-ocean) !important;
}

.parent-blue .is-checked,
.parent-blue .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-blue) !important;
}

.parent-indigo .is-checked,
.parent-indigo .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-indigo) !important;
}

.parent-purple .is-checked,
.parent-purple .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-purple) !important;
}

.parent-pink .is-checked,
.parent-pink .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-pink) !important;
}

.parent-raspberry .is-checked,
.parent-raspberry .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-raspberry) !important;
}

.parent-gray .is-checked,
.parent-gray .is-checked:hover {
    color: var(--bs-white);
    background-color: var(--bs-gray) !important;
}

/* -------------------------------- 

User Modes

-------------------------------- */

@media (prefers-color-scheme: dark) {

    body {
        color: var(--bs-white);
        background: var(--bs-dark);
    }

    /* .sybrin-logo {
        fill: var(--bs-white) !important;
    } */

    .text-inherit,
    .accordion-button:not(.collapsed) {
        color: var(--bs-white);
    }

    .bg-invert {
        color: var(--bs-gray-dark);
        background: var(--bs-white);
    }

    .border-invert{
        border-color: var(--bs-white) !important;
    }

    .bg-inherit {
        background: var(--bs-dark);
    }

    .parent-invert .card:hover picture.bg-light {
        background: var(--bs-white) !important;
    }

    .parent-invert .card:hover,
    .parent-invert .accordion-button:hover,
    .parent-invert .accordion-button:not(.collapsed) {
        border-top-color: var(--bs-white) !important;
    }

    .dropdown-menu {
        background: var(--bs-dark);
    }
}

@media (prefers-color-scheme: light) {

    body {
        color: var(--bs-gray-dark);
        background: var(--bs-white);
    }

    /* .sybrin-logo {
        fill: var(--bs-gray-dark) !important;
    } */

    .text-inherit,
    .accordion-button:not(.collapsed) {
        color: var(--bs-gray-dark);
    }

    .bg-invert {
        color: var(--bs-white);
        background: var(--bs-dark);
    }

    .border-invert{
        border-color: var(--bs-dark) !important;
    }

    .bg-inherit {
        background: var(--bs-white);
    }

    .parent-invert .card:hover picture.bg-light {
        background: var(--bs-gray-dark) !important;
    }

    .parent-invert .card:hover,
    .parent-invert .accordion-button:hover,
    .parent-invert .accordion-button:not(.collapsed) {
        border-top-color: var(--bs-gray-dark) !important;
    }

    .dropdown-menu {
        background: var(--bs-white);
    }

}

/* -------------------------------- 

Responsive

-------------------------------- */

@media all and (max-width: 1400px) {

    .dropdown-menu.mega section.d-grid {
        grid-template-columns: auto auto;
    }

}

@media all and (max-width: 1200px) {
    .dropdown-toggle.show::before {
        display: none;
    }

    .dropdown-menu.mega {
        position: inherit !important;
    }

    .card a,
    .card a.stretched-link {
        opacity: 1.00;
        margin: 0 0 0 0 !important;
    }

    ol.numberingzzz li::before {
        right: 1.5rem;
    }

    .shift-cards-left .card:nth-child(even),
    .shift-cards-right .card:nth-child(odd) {
        margin: 0 0 0 0 !important;
    }

    .text-truncate-more {
        -webkit-line-clamp: unset;
    }

    /* #our-insights .card:first-child{
        flex-direction: column;
    }
    
    #our-insights .card:first-child img{
        width: 100% !important;
    } */
}

@media all and (max-width: 800px) {

    .dropdown-menu.mega section.d-grid,
    .columns-2 {
        grid-template-columns: auto;
    }

    /* .dropdown small.text-light{
        max-width: 100%;
    } */
}

@media all and (max-height: 900px) {
    .dropdown-menu.show a {
        padding: 7.5px 15px !important;
        align-items: baseline !important;
    }

    .dropdown-menu.show span {
        display: none !important;
    }

    .sticky-top,
    .sticky-sm-top,
    .sticky-md-top,
    .sticky-lg-top,
    .sticky-xl-top {
        position: relative !important;
    }
}

/* -------------------------------- 

Hover Devices

-------------------------------- */

@media (hover:hover) {}

@media (hover:none) {}

@media (pointer:coarse) {}

@media (pointer:fine) {}

/* -------------------------------- 

Keyframes

-------------------------------- */

@keyframes mooove-in {
    0% {
        opacity: 0.00;

        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1.00;

        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes mooove-out {
    0% {
        opacity: 1.00;

        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        opacity: 0.00;

        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

/* -------------------------------- 

Page Transitions

-------------------------------- */

/* .header, nav {
    page-transition-tag: header;
}

.content, section {
    page-transition-tag: content;
}

::page-transition {
    position: fixed;
    inset: 0;
}

::page-transition-container(*) {
    position: absolute;
    top: 0;
    left: 0;
}

::page-transition-image-wrapper(*) {
    position: absolute;
    inset: 0;
    isolation: isolate;
}

::page-transition-incoming-image(*),
::page-transition-outgoing-image(*) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    mix-blend-mode: lighter;
} */