@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --base-color: #0f1314;
    --primary-color: #ffffff;
    --primary-bg: #0f1314;
    --secondary-color: #0f1314;
    --secondary-bg: #272929;
    --grey-color: #383a3a;
    --grey-bg: #f3f3f7;
    --tertiary-color: #222222;
    /* --tertiary-bg: #1F2253; */
    --tertiary-bg: #f2db96;
    --substitute-color: #fff;
    --substitute-bg: #ff9900;
    --accent-color: #e9eff1;
    --accent-bg: #45545c;
    --alternate-color: #340c42;
    --alternate-bg: #fff;
    --accent-off-color: #746f63;
    --accent-off-bg: #fefadf;
    --off-color: #ffffff;
    /* --off-bg: #F7F8FF; */
    --off-bg: linear-gradient(193deg, rgba(49, 49, 47, 0.5294117647058824), rgba(97, 96, 96, 0.37) 53.78%, rgba(239, 224, 166, 0.69)),
        linear-gradient(rgb(55, 55, 55) 5.88%, #3c3c3c 89.08%);
    --dark-color: #ffffff;
    --dark-bg: radial-gradient(#3f4548, #0f1314 70%);
    --text-shadow-tone: 1px 1px 0px #ffffffa8;
    --text-shadow-tint: 1px 1px 0px #000;
    --elem-count: 3;
    --elem-height: 320px;
    --elem-width: 460px;
    --elem-gap: 18px;
    --ico-height: 44px;
    --primary-gradient: linear-gradient(92deg, rgba(0, 0, 0, 0.85), rgba(42, 44, 44, 0.88) 47.9%, rgba(29, 29, 30, 0.89) 85.71%),
        linear-gradient(244deg, #2c2c2c, rgb(0, 0, 0) 47.48%, #0c0909 85.29%);
    --primary-gradient-border: linear-gradient(92deg, rgba(0, 0, 0, 1), rgba(42, 44, 44, 1) 47.9%, rgba(29, 29, 30, 1) 85.71%) padding-box,
        linear-gradient(244deg, #2c2c2c, rgb(0, 0, 0) 47.48%, #0c0909 85.29%) padding-box,
        linear-gradient(rgb(113 121 131 / 95%) 25.21%, rgb(233 235 236 / 97%) 39.5%, rgba(153, 127, 1, 1), rgba(69, 48, 4, 0.93) 65.13%, rgb(1, 1, 0)) border-box;
    --accent-gradient-alt: radial-gradient(circle at top left, #c6ff0038, rgba(241, 254, 190, 0.3) 14.29%, rgba(255, 255, 255, 0.79) 29.41%, rgb(254, 255, 255) 57.56%);
    --secondary-gradient: linear-gradient(122deg, rgb(246 245 241 / 84%), rgb(225 226 230 / 87%), rgb(185 184 178 / 81%) 95.8% 95.8%),
        linear-gradient(88deg, rgb(61 65 66 / 94%), rgb(240 240 240) 26.47%, #31312f 56.3%, rgb(72 72 71) 94.54%);
    --fade-right: linear-gradient(90deg, #ff9900, #ecd8b7 0%, transparent 100%);
    --tertiary-gradient: linear-gradient(54deg, rgb(226 8 117 / 65%), rgb(62 175 227 / 53%) 57.98%, rgb(130 0 243 / 53%)),
        linear-gradient(202deg, rgb(174 227 236 / 95%), #272d39 47.06%, rgb(5 88 217));
    --tertiary-gradient-alt: radial-gradient(#e3faff, #333 57.14%);

    --substitute-gradient: linear-gradient(299deg,
            rgba(118, 11, 195, 0.68),
            rgba(177, 66, 243, 0.85) 50.42%,
            rgba(159, 11, 246, 0.59)),
        linear-gradient(303deg,
            #8a00f5,
            #c99ffa 27.31%,
            rgb(188, 112, 247) 59.24%,
            rgba(136, 4, 247, 0.91) 98.32%);

    --substitute-gradient-alt: radial-gradient(#7909be,
            #230aaf 52.1%,
            rgb(11, 194, 247) 98.74%);

    --accent-gradient: linear-gradient(92deg, rgba(122, 1, 1, 0.42), rgba(237, 237, 237, 0.74) 45.8%, rgba(167, 111, 251, 0.56) 97.06%),
        linear-gradient(198deg, rgba(192, 0, 129, 0.91), rgba(148, 63, 180, 0.84) 46.22%, rgba(92, 189, 250, 0.8));

    --gold-gradient: linear-gradient(92deg, rgba(239, 173, 37, 0.42), rgba(246, 220, 149, 0.47) 45.8%, rgba(225, 174, 7, 0.56) 97.06%),
        linear-gradient(198deg, rgba(194, 144, 7, 0.91), rgba(251, 191, 31, 0.84) 46.22%, rgba(233, 188, 13, 0.8));
    --trans-bg: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
    --trans-item-bg: radial-gradient(rgba(0, 0, 0, 0) 5.04%, rgba(0, 0, 0, 0.19) 42.44%, rgba(0, 0, 0, 0.34) 68.91%, rgba(0, 0, 0, 0.61));
    --glass-bg: linear-gradient(42deg, rgba(197, 197, 197, 0.14), rgba(230, 228, 228, 0.29)),
        linear-gradient(168deg, rgba(25, 25, 25, 0.09), rgba(101, 101, 101, 0.15) 37.82%, rgba(31, 31, 31, 0.22) 97.06%);
    --left-to-right-trans-bg: linear-gradient(to right, #171758ff, rgba(18, 34, 92, 0.3));
    --bottom-to-top-trans-bg: linear-gradient(to top, rgba(0, 0, 0, 0.87) 9.66%, rgba(0, 0, 0, 0.6039215686274509) 23.95%, rgba(0, 0, 0, 0.32) 37.39%, rgba(0, 0, 0, 0.06) 50.42%, rgba(0, 0, 0, 0) 69.33%);
    --font-weight-light: 200;
    --font-weight-normal: 300;
    --font-weight-bold: 500;
    --font-weight-bolder: 600;
    --btn-font-size: 10px;
    --x-sm-font: 0.7rem;
    --sm-font: 0.875rem;
    --default-font: 16px;
    --reg-font: 0.98rem;
    --md-font: 1.12rem;
    --lg-font: 2.325rem;
    --x-lg-font: 3.2rem;
    --radius: 7.25px;
    --full-radius: 25px;
    --font-family: "Google Sans Flex", sans-serif;
    --font-family-alt: "Google Sans Flex", sans-serif;
    --nav-link-height: 88px;
    --box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.05);
    --bring-forward: 999;
    --send-backward: 0;
    --bring-to-top: 9999;
    --full-height: 100vh;
    --full-weight: 100vw;
    --half-height: 50%;
    --half-width: 50vw;
    --quarter-height: 25%;
    --quarter-width: 25vw;
    --tenth-height: 90%;
    --tenth-width: 90vw;
    --seventh-height: 70%;
    --seventh-width: 70vw;
    --seventh-half-height: 75%;
    --seventh-half-width: 75vw;
    --eight-width: 80vw;
    --eight-height: 80%;
    --sixth-width: 60vw;
    --sixth-height: 60%;
    --third-height: 30%;
    --third-width: 30vw;
    --third-half-height: 35%;
    --third-half-width: 35vw;
    --fourth-height: 40%;
    --fourth-width: 40vw;
    --fourth-half-height: 45%;
    --fourth-half-width: 45vw;
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-primary-100: hsl(205, 15%, 58%);
    --clr-primary-400: hsl(215, 25%, 27%);
    --clr-primary-800: hsl(217, 33%, 17%);
    --clr-primary-900: hsl(218, 33%, 9%);
    --solid-white: brightness(100);
    --sm-size: 4rem;
    --micro-card: 180px;
    --mini-card: 262px;
    --card: 320px;
    --card-1: 455px;
    --card-2: 660px;
    --card-3: 720px;
    --card-4: 820px;
    --showCase-width: 26rem;
    --showCse-height: 32rem;
    --showCaseMax-width: 50rem;
    --showCaseMax-height: 25rem;
}

* {
    margin: 0;
    padding: 0;
    position: relative;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    font-family: var(--font-family);
    color: var(--primary-color);
    font-weight: var(--font-weight-normal);
    font-size: var(--default-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    background: var(--primary-bg);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
}

hr {
    opacity: 0.125;
}

.sm-size {
    width: var(--sm-size);
}

.h-100,
div.h-100,
section.h-100,
article.h-100 {
    height: var(--full-height);
}

.h-90,
div.h-90,
section.h-90,
article.h-90 {
    height: var(--tenth-height);
}

.h-80,
div.h-80,
section.h-80,
article.h-80 {
    height: var(--eight-height);
}

.h-75,
div.h-75,
section.h-75,
article.h-75 {
    height: var(--seventh-half-height);
}

.h-70,
div.h-70,
section.h-70,
article.h-70 {
    height: var(--seventh-height);
}

.h-60,
div.h-60,
section.h-60,
article.h-60 {
    height: var(--sixth-height);
}

.h-50,
div.h-50,
section.h-50,
article.h-50 {
    height: var(--half-height);
}

.h-45,
div.h-45,
section.h-45,
article.h-45 {
    height: var(--fourth-half-height);
}

.h-40,
div.h-40,
section.h-40,
article.h-40 {
    height: var(--fourth-height);
}

.h-35,
div.h-35,
section.h-35,
article.h-35 {
    height: var(--third-half-height);
}

.h-30,
div.h-30,
section.h-30,
article.h-30 {
    height: var(--third-height);
}

.h-25,
div.h-25,
section.h-25,
article.h-25 {
    height: var(--quarter-height);
}

.w-100,
div.w-100,
section.w-100,
article.w-100 {
    width: var(--full-width);
}

.w-90,
div.w-90,
section.w-90,
article.w-90 {
    width: var(--tenth-width);
}

.w-80,
div.w-80,
section.w-80,
article.w-80 {
    width: var(--eight-width);
}

.w-70,
div.w-70,
section.w-70,
article.w-70 {
    width: var(--seventw-width);
}

.w-60,
div.w-60,
section.w-60,
article.w-60 {
    width: var(--sixth-width);
}

.w-50,
div.w-50,
section.w-50,
article.w-50 {
    width: var(--half-width);
}

.w-25,
div.w-25,
section.w-25,
article.w-25 {
    width: var(--quarter-width);
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
    font-style: normal;
    font-size: var(--md-font);
    transition: all 0.5ms ease-in;
    -webkit-transition: all 0.5ms ease-in;
    -moz-transition: all 0.5ms ease-in;
    -o-transition: all 0.5ms ease-in;
    -ms-transition: all 0.5ms ease-in;
}

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

.solid-white,
img.solid-white {
    filter: var(--solid-white);
    -webkit-filter: var(--solid-white);
}

.cookie-box {
    position: fixed;
    bottom: 2.5%;
    left: 5%;
    background: var(--primary-color);
    width: 490px;
    border-radius: var(--full-radius);
    padding: 2.3rem;
    flex-direction: column;
    gap: 1rem;
    color: var(--primary-bg);
    display: none;
    overflow: hidden;
    transition: all 0.5ms ease-in;
    -webkit-transition: all 0.5ms ease-in;
    -moz-transition: all 0.5ms ease-in;
    -o-transition: all 0.5ms ease-in;
    -ms-transition: all 0.5ms ease-in;
    z-index: 9999;
}

.cookie-box.active {
    display: flex;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-alt);
    font-weight: var(--font-weight-bold);
    letter-spacing: -1px;
}

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

.transition,
.transition>* {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

.text-shadow,
*.text-shadow {
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}

.text-shadow-tint,
*.text-shadow-tint {
    text-shadow: var(--text-shadow-tint);
}

.text-shadow-tone,
*.text-shadow-tone {
    text-shadow: var(--text-shadow-tone);
}

.fs-italic {
    font-style: italic;
}


nav {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

nav a {
    /* line-height: var(--nav-link-height); */
    padding: 0px 12px;
    font-size: var(--sm-font);
    font-weight: 400;
}

nav a:hover,
.nav a:hover {
    box-shadow: none;
    color: inherit;
    font-weight: var(--font-weight-bold);
}

header .btn,
header a.btn {
    line-height: 3;
    font-size: .825rem;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.GrayPatchAdvisory-mega-menu,
div.GrayPatchAdvisory-mega-menu {
    display: none;
    position: absolute;
    background: transparent;
    width: 100vw;
    height: auto;
    z-index: 0 !important;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

.GrayPatchAdvisory-mega-menu.active,
div.GrayPatchAdvisory-mega-menu.active,
.GrayPatchAdvisory-mega-menu .active,
div.GrayPatchAdvisory-mega-menu .active {
    display: flex;
}

.GrayPatchAdvisory-mega-menu div ul li a {
    font-size: var(--sm-font);
}

.fade-right {
    color: var(--primary-bg);
    background: var(--fade-right);
}

.subParent {
    z-index: var(--bring-forward);
}

header nav li:hover .GrayPatchAdvisory-mega-menu {
    display: flex;
}

.menuTabs,
div.menuTabs {
    display: grid;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1rem;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    width: 100%;
}

.menuTabs .tabControls {
    display: flex;
    flex-direction: column;
}

.tabControls ul li a {
    font-weight: var(--font-weight-bolder);
    line-height: 3;
    font-size: var(--lg-font);
}

.tabControls ul.tabCtrl li a.active {
    color: var(--primary-bg);
}

.tabControls ul.tabCtrl li a::after {
    background: var(--secondary-gradient);
    content: "";
    display: none;
    width: 100%;
    height: 45px;
    position: absolute;
    left: -100%;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    z-index: -1;
    border-radius: var(--radius);
}

.tabControls ul.tabCtrl li a.active::after {
    display: flex;
    left: -15%;
}

.tabControls ul.tabCtrl li a.active:hover::after {
    background: var(--primary-gradient);
}

.tabContent,
div.tabContent {
    display: none;
    flex-direction: column;
}

.subMenuContainer,
div.subMenuContainer {
    display: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--send-backward);
    transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    /* background: var(--secondary-bg); */
    height: 300%;
}

.active,
.webQ_menu.active,
div.webQ_menu.active,
.subMenuContainer.active,
div.subMenuContainer.active {
    display: flex;
    opacity: 1;
}

.no-hover:hover,
.primary a.no-hover:hover,
a.primary.no-hover:hover,
header .nav a.primary.no-hover:hover {
    background: transparent;
}

.black_white,
img.black_white {
    filter: brightness(100);
    -webkit-filter: brightness(100);
}

.scroll-container {
    width: 100%;
    overflow: hidden;
}

.scroll-content {
    display: flex;
    white-space: nowrap;
    animation: scroll 20s linear;
    /* Adjust duration as needed */
}

.scroll-content-right {
    display: flex;
    white-space: nowrap;
    animation: scrollRight 20s linear;
    /* Adjust duration as needed */
}

.ui-icons-page-elem-container {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0 auto;
    justify-content: space-around;
    display: flex;
    align-items: center;
    z-index: 0;
    color: var(--off-bg);
    font-size: var(--reg-font);
    opacity: 0.05;
    flex-wrap: wrap;
    padding: 5.5rem 0;
}

.ui-icons-page-elem-container span {
    font-size: var(--x-lg-font);
    display: flex;
    flex: 0 0 auto;
    margin: 1rem 3rem;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.arc-top {
    position: relative;
}

.arc-top::before,
.arc-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 5rem;
    background: inherit;
    border-radius: 45px;
    overflow: hidden;
}

.arc-top::before {
    top: -4.5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.arc-bottom::after {
    bottom: -4.5rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*template effect*/

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.25rem));
    }
}

/* general styles */

.tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.tag-list li {
    padding: 1rem;
    background: var(--clr-primary-400);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
    background: red !important;
}

.marginOff-top-100,
div.marginOff-top-100,
section.marginOff-top-100,
span.marginOff-top-100,
ul.marginOff-top-100,
li.marginOff-top-100,
img.marginOff-top-100 {
    margin-top: -100px !important;
}

.marginOff-top-120,
div.marginOff-top-120,
section.marginOff-top-120,
span.marginOff-top-120,
ul.marginOff-top-120,
li.marginOff-top-120,
img.marginOff-top-120 {
    margin-top: -120px !important;
}

.marginOff-top-150,
div.marginOff-top-150,
section.marginOff-top-150,
span.marginOff-top-150,
ul.marginOff-top-150,
li.marginOff-top-150,
img.marginOff-top-150 {
    margin-top: -150px !important;
}

.marginOff-top-180,
div.marginOff-top-180,
section.marginOff-top-180,
span.marginOff-top-180,
ul.marginOff-top-180,
li.marginOff-top-180,
img.marginOff-top-180 {
    margin-top: -180px !important;
}

.marginOff-top-200,
div.marginOff-top-200,
section.marginOff-top-200,
span.marginOff-top-200,
ul.marginOff-top-200,
li.marginOff-top-200,
img.marginOff-top-200 {
    margin-top: -200px !important;
}

.marginOff-top-1,
div.marginOff-top-1,
section.marginOff-top-1,
span.marginOff-top-1,
ul.marginOff-top-1,
li.marginOff-top-1,
img.marginOff-top-1 {
    margin-top: -2rem !important;
}

.marginOff-top-2,
div.marginOff-top-2,
section.marginOff-top-2,
span.marginOff-top-2,
ul.marginOff-top-2,
li.marginOff-top-2,
img.marginOff-top-2 {
    margin-top: -4rem !important;
}

.marginOff-top-3,
div.marginOff-top-3,
section.marginOff-top-3,
span.marginOff-top-3,
ul.marginOff-top-3,
li.marginOff-top-3,
img.marginOff-top-3 {
    margin-top: -6rem !important;
}

.marginOff-top-4,
div.marginOff-top-4,
section.marginOff-top-4,
span.marginOff-top-4,
ul.marginOff-top-4,
li.marginOff-top-4,
img.marginOff-top-4 {
    margin-top: -8rem !important;
}

.marginOff-top-5,
div.marginOff-top-5,
section.marginOff-top-5,
span.marginOff-top-5,
ul.marginOff-top-5,
li.marginOff-top-5,
img.marginOff-top-5 {
    margin-top: -10rem !important;
}

/*end template effect*/

/* Theme Color */

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

.primary-color {
    color: var(--primary-bg);
}

.primary-inverse,
.primary-gradient a.primary-inverse,
.primary-gradient-blur-bg a.primary-inverse {
    background: var(--primary-color);
    color: var(--primary-bg);
}

.primary-color-inverse {
    color: var(--primary-color);
}

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

.secondary-color {
    color: var(--secondary-bg);
}

.secondary-gradient-color {
    background: var(--secondary-gradient);
    background-color: var(--secondary-bg);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    display: inline-block;
}

.tertiary,
a.tertiary {
    background: var(--tertiary-bg);
    color: var(--tertiary-color);
}

.tertiary-color {
    color: var(--tertiary-bg);
}

.tertiary-gradient-color {
    background: var(--tertiary-gradient);
    background-color: var(--tertiary-bg);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    display: inline-block;
}

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

.substitute-color {
    color: var(--substitute-bg);
}

.substitute-gradient-color {
    background: var(--substitute-gradient);
    background-color: var(--substitute-bg);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    display: inline-block;
}

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

.accent-color {
    color: var(--accent-bg);
}

.accent-gradient-color {
    background: var(--accent-gradient);
    background-color: var(--accent-bg);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    display: inline-block;
}

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

.alternate-color {
    color: var(--alternate-bg);
}

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

.off-color {
    color: var(--secondary-bg);
}

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

.grey-color {
    color: var(--secondary-bg);
}

.accent-off {
    background: var(--accent-off-bg);
    color: var(--accent-off-color);
}

.accent-off-color {
    color: var(--accent-off-bg);
}

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

.dark-glow,
.dark-metallic,
.dark-fire {
    overflow: hidden;
}

.dark-glow::after,
.dark .dark-glow::after {
    display: flex;
    z-index: 0;
    position: absolute;
    top: 100%;
    left: 25%;
    height: 100%;
    width: 50%;
    content: "";
    border-radius: 1500%;
    box-shadow: 0 4.5rem 30rem 15rem #a1b4b9c9;
}

.dark-metalic::after,
.dark .dark-metalic::after {
    display: flex;
    z-index: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    height: 100%;
    width: 40%;
    content: "";
    border-radius: 1500%;
    box-shadow: 0 4.5rem 30rem 15rem #3c3c3c2e;
}

.dark-metalic::before,
.dark .dark-metalic::before {
    display: flex;
    z-index: 0;
    position: absolute;
    top: -120%;
    left: 25%;
    height: 100%;
    width: 50%;
    content: "";
    border-radius: 1500%;
    box-shadow: 0 4.5rem 30rem 15rem #62626282;
}

.dark-fire::after,
.dark .dark-fire::after {
    display: flex;
    z-index: 0;
    position: absolute;
    top: 100%;
    left: 25%;
    height: 100%;
    width: 50%;
    content: "";
    border-radius: 1500%;
    box-shadow: 0 4.5rem 76rem 19rem #181818c4;
}

.dark-fire::before,
.dark .dark-fire::before {
    display: flex;
    z-index: 0;
    position: absolute;
    top: -100%;
    left: 25%;
    height: 100%;
    width: 50%;
    content: "";
    border-radius: 1500%;
    box-shadow: 0 4.5rem 30rem 15rem #713202c2;
}

.dark-color {
    color: var(--dark-bg);
}


.line-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 100%;
    top: 0%;
    width: 1px;
    background: var(--secondary-color);
    display: flex;
    opacity: 0.25;
}

.secondary-gradient {
    background: var(--secondary-gradient);
    color: var(--secondary-color);
}

.primary-text-gradient {
    background: var(--primary-gradient);
}

.substitute-text-gradient {
    background: var(--substitute-gradient);
}

.tertiary-text-gradient {
    background: var(--tertiary-gradient);
}

.secondary-text-gradient {
    background: var(--secondary-gradient);
}

.accent-text-gradient {
    background: var(--accent-gradient);
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: break-word;
}

.transparent,
div.transparent,
section.transparent {
    background: transparent;
    background-color: transparent;
}

.iconic {
    font-size: 1000%;
    line-height: 7rem;
}

.iconic-lg {
    font-size: 1250%;
    line-height: 9rem;
}

.iconic-x-lg {
    font-size: 1500%;
    line-height: 11rem;
}

.iconic-xx-lg {
    font-size: 2000%;
    line-height: 14rem;
}

.shadow-text {
    padding: 0;
}

.shadow-text::after {
    display: block;
    width: 100%;
    height: 125%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
}

.shadow-text-primary::after,
.shadow-text.shadow-text-primary::after {
    background: linear-gradient(rgba(29, 4, 29, 0) 18.07%,
            rgba(50, 14, 58, 0.18) 38.66%,
            rgba(56, 15, 67, 0.89) 63.87%,
            rgba(51, 15, 65, 1) 75.63%);
}

.shadow-text-secondary::after,
.shadow-text.shadow-text-secondary::after {
    background: linear-gradient(rgba(29, 4, 29, 0) 18.07%,
            rgba(50, 14, 58, 0.18) 38.66%,
            rgba(56, 15, 67, 0.89) 63.87%,
            rgba(51, 15, 65, 1) 75.63%);
}

.shadow-text-primary-inverse::after,
.shadow-text.shadow-text-primary-inverse::after {
    background: linear-gradient(rgba(29, 4, 29, 0) 18.07%,
            rgba(255, 255, 255, 0.18) 38.66%,
            rgba(255, 255, 255, 0.89) 63.87%,
            rgba(255, 255, 255, 1) 75.63%);
}

.display-3,
.display-4,
.display-6 {
    line-height: 1.2;
}

.display-7 {
    font-size: calc(1rem + 0.85vw);
    font-weight: normal;
}

.btn,
a.btn,
button.btn {
    line-height: 3.2rem;
    padding: 0 2rem;
    border-radius: var(--full-radius);
    border: 0px;
    display: flex;
    flex: 0 0 auto;
    font-size: var(--reg-font);
    overflow: hidden;
}

.x-sm-font {
    font-size: var(--x-sm-font);
}

.sm-font {
    font-size: var(--sm-font);
}

.reg-font {
    font-size: var(--reg-font);
    line-height: 1.45;
}

.md-font {
    font-size: var(--md-font);
    line-height: 1.35;
}

.lg-font {
    font-size: var(--lg-font);
    line-height: 1.35;
}

.x-lg-font {
    font-size: var(--x-lg-font);
    line-height: 1.325;
}

.bring-forward {
    z-index: var(--bring-forward);
}

.bring-to-top {
    z-index: var(--bring-to-top);
}

.send-backward {
    z-index: var(--send-backward);
}

.hover-effect {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.hover-effect:hover .bounce-effect,
.hover-effect:hover .track-effect .bounce-effect {
    animation: bounce 1.5s ease-in-out 0.2s;
}

.hover-after-effect:hover::after {
    bottom: 0;
    animation: fade-in-bottom 0.5s ease-in-out;
    -webkit-animation: fade-in-bottom 0.5s ease-in-out;
}

.hover-after-effect::after {
    border-top-left-radius: 70px;
    border-top-right-radius: 0px;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    bottom: -100%;
    z-index: var(--send-backward);
}

.hover-after-primary::after {
    background: var(--primary-bg);
    color: var(--primary-color) !important;
}

.hover-after-effect.hover-after-primary:hover {
    color: var(--primary-color);
}

.hover-after-secondary::after {
    background: var(--secondary-bg);
    color: var(--secondary-color) !important;
}

.hover-after-effect.hover-after-secondary:hover {
    color: var(--secondary-color);
}

.hover-after-accent::after {
    background: var(--accent-bg);
    color: var(--accent-color) !important;
}

.hover-after-effect.hover-after-accent:hover {
    color: var(--accent-color);
}

.hover-after-primary-gradient::after {
    background: var(--primary-gradient);
    color: var(--primary-color) !important;
}

.hover-after-effect.hover-after-primary-gradient:hover {
    color: var(--primary-color);
}

.hover-after-secondary-gradient::after {
    background: var(--secondary-gradient);
    color: var(--secondary-color) !important;
}

.hover-after-effect.hover-after-secondary-gradient:hover {
    color: var(--secondary-color);
}

.hover-after-accent-gradient::after {
    background: var(--accent-gradient);
    color: var(--accent-color) !important;
}

.hover-after-effect.hover-after-accent-gradient:hover {
    color: var(--accent-color);
}

.hover-display,
.hover-display * {
    opacity: 0;
    display: none;
}

.hover-display:hover,
.hover-display:hover * {
    opacity: 1;
    display: flex;
    animation: slide-in-left 1s ease-in-out both;
    -webkit-animation: slide-in-left 1s ease-in-out both;
}

.pulse-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.pulse-container .pulse-circle {
    position: absolute;
    border: 1px solid #fff;
}

.pulse-container .pulse-center {
    width: 4vw;
    height: 4vw;
    top: calc(50% - 4vw / 2);
    left: calc(50% - 4vw / 2);
    border-radius: calc(4vw / 2);
    position: absolute;
    background-color: #fff;
}

.pulse-container.pulsing .pulse-center {
    animation: pulsing1 1s infinite ease-in-out;
    animation-delay: 0;
}

.pulse-container .pulse-circle[data-circle="1"] {
    width: 19vw;
    height: 19vw;
    top: calc(50% - 19vw / 2);
    left: calc(50% - 19vw / 2);
    border-radius: calc(19vw / 2);
    opacity: 0.4;
}

.pulse-container.pulsing .pulse-circle[data-circle="1"] {
    animation: pulsing2 1.5s infinite ease-in-out;
    animation-delay: 0.15s;
}

.pulse-container .pulse-circle[data-circle="2"] {
    width: 52vw;
    height: 52vw;
    top: calc(50% - 52vw / 2);
    left: calc(50% - 52vw / 2);
    border-radius: calc(52vw / 2);
    opacity: 0.3;
}

.pulse-container.pulsing .pulse-circle[data-circle="2"] {
    animation: pulsing2 1.5s infinite ease-in-out;
    animation-delay: 0.3s;
}

.pulse-container .pulse-circle[data-circle="3"] {
    width: 87vw;
    height: 87vw;
    top: calc(50% - 87vw / 2);
    left: calc(50% - 87vw / 2);
    border-radius: calc(87vw / 2);
    opacity: 0.2;
}

.pulse-container.pulsing .pulse-circle[data-circle="3"] {
    animation: pulsing2 1.5s infinite ease-in-out;
    animation-delay: 0.45s;
}

.pulse-container .pulse-circle[data-circle="4"] {
    width: 122vw;
    height: 122vw;
    top: calc(50% - 122vw / 2);
    left: calc(50% - 122vw / 2);
    border-radius: calc(122vw / 2);
    opacity: 0.1;
}

.pulse-container.pulsing .pulse-circle[data-circle="4"] {
    animation: pulsing2 1.5s infinite ease-in-out;
    animation-delay: 0.6s;
}

.pulse-container .pulse-message {
    position: absolute;
    top: calc(50% - 1.5vw * 1.2 / 2);
    left: calc(50% + 4vw);
    width: 35vw;
}

.vertical-lines {
    overflow: hidden;
}

.vertical-lines * {
    z-index: 100;
}

.vertical-lines::before {
    background-image: repeating-linear-gradient(to right, #fff 0px, #fff 1px, transparent 1px, transparent 5px);
    opacity: 0.25;
    content: '';
    width: 55%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
}

.tertiary.vertical-lines::after {
    content: '';
    border-radius: 200%;
    background: var(--tertiary-bg);
    position: absolute;
    z-index: 0;
    width: 120%;
    bottom: -50%;
    height: 200%;
    left: -50%;
}

.thumbnail-cont,
div.thumbnail-cont {
    width: 220px;
    height: 220px;
    position: relative;
    overflow: hidden;
    justify-content: center;
    display: flex;
    border-radius: 300px;
}

.top-right {
    bottom: 50%;
    left: 50%;
}

.top-left {
    bottom: 50%;
    right: 50%;
}

.bottom-left {
    top: 50%;
    right: 50%;
}

.bottom-right {
    top: 50%;
    left: 50%;
}

.top-1,
.position-sticky.top-1 {
    top: 100px
}

.primary-hover:hover,
*.primary-hover:hover,
*.primary-hover:hover a {
    background: var(--primary-bg) !important;
    color: var(--primary-color) !important;
}

.secondary-hover:hover,
*.secondary-hover:hover {
    background: var(--secondary-bg) !important;
    color: var(--secondary-color) !important;
}

.tertiary-hover:hover,
*.tertiary-hover:hover {
    background: var(--tertiary-bg) !important;
    color: var(--tertiary-color) !important;
}

.accent-hover:hover,
*.accent-hover:hover {
    background: var(--accent-bg) !important;
    color: var(--accent-color) !important;
}

.dark-hover:hover,
*.dark-hover:hover {
    background: var(--dark-bg) !important;
    color: var(--dark-color) !important;
}

.popUp-notification {
    position: fixed;
    top: auto;
    bottom: 20px;
    background: var(--primary-gradient);
    width: 33.3333%;
    border-radius: 20px;
    padding: 1.25rem;
    left: 33.333%;
    right: auto;
    color: var(--primary-color);
    z-index: var(--bring-forward);
    justify-content: start;
    align-items: start;
    font-size: var(--x-sm-font);
    text-align: left;
    flex-direction: column;
    font-weight: 400;
    box-shadow: 0px 0px 15px -5px var(--trans-bg);
    transition: all ease-in 0.5s;
    -webkit-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
    -moz-transition: all ease-in 0.5s;
    -ms-transition: all ease-in 0.5s;
    margin-bottom: -15rem;
}

.popUp-notification.active {
    margin-bottom: 0;
}

.popUp-notification i.clsPopUp {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent-bg);
    color: var(--accent-color);
    border-radius: 50px;
    margin-top: -10px;
    margin-right: -15px;
    padding: 0.5rem;
    font-size: var(--reg-font);
    cursor: pointer;
}

/* header */

header {
    z-index: 9999;
    display: flex;
    width: 100%;
    position: fixed;
}

header.scrolled.fade-in-bottom {
    background: var(--glass-bg);
}

.site-emblem,
header a.site-emblem {
    height: 70px;
    justify-content: center;
    align-items: center;
    padding: 0.35rem;
    padding-left: 0;
    margin-right: 10px;
}

header .site-emblem:hover,
header a.site-emblem:hover {
    text-decoration: none;
    border-bottom: none;
}

header img.brandLogo,
footer img.brandLogo {
    /* filter: grayscale(1) brightness(100);
  -webkit-filter: grayscale(1) brightness(100); */
    margin: 0 auto;
    display: flex;
    width: 180px;
    padding: 7px;
    padding-bottom: 3px;
    background: var(--primary-bg);
}

header.blurHead img.brandLogo {
    filter: none;
    -webkit-filter: none;
}

header nav li {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
}

header nav li:hover {
    color: var(--primary-color);
    border-radius: var(--full-radius);
    line-height: 1;
    height: 40px;
    max-height: none;
    position: relative;
    margin: 0 auto;
}

header.primary,
header.primary *,
header.primary img.brandLogo {
    /* color: var(--primary-color); */
    filter: none;
    -webkit-filter: none;
}

header .accent,
header a.accent {
    color: var(--accent-color);
}

section.hero-section h1.fw-bold {
    font-weight: var(--font-weight-bolder) !important;
}

footer img.brandLogo {
    margin-top: 0;
    width: 100%;
    filter: none;
    -webkit-filter: none;
}

footer li {
    margin-bottom: 0rem;
}

footer li a {
    font-size: var(--sm-font);
}

.tertiary a:hover,
section.tertiary a:hover,
footer.tertiary a:hover,
.tertiary li a:hover,
section.tertiary li a:hover,
footer.tertiary li a:hover,
.tertiary li:hover,
section.tertiary li:hover,
footer.tertiary li:hover {
    background: none;
    color: var(--accent-bg);
}

.moveOutView,
header.moveOutView {
    content: '';
}

/* hero section */

.hero,
section.hero {
    color: var(--secondary-color);
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-2,
section.hero-2 {
    height: 50vh !important;
}

section.heroBg {
    background: var(--hero-bg);
    background-blend-mode: overlay;
}

.primary-gradient {
    color: var(--primary-color);
    background: var(--primary-gradient);
    background-blend-mode: darken;
}

.primary-gradient-alt {
    color: var(--base-color);
    background: var(--primary-gradient-alt);
}

.accent-gradient-alt {
    color: var(--base-color);
    background: var(--accent-gradient-alt);
}

.container,
.hero .container,
section.hero .container,
.blurredBg .container {
    z-index: 5;
    width: 90%;
    max-width: none;
}

/*ui-elements*/
.glow-ui {
    animation: glow 2s infinite alternate;
}

.dots {
    background-image: radial-gradient(circle, transparent 45%, transparent 48%),
        radial-gradient(ellipse, rgba(132, 237, 6, 0.4) 20%, rgba(131, 6, 143, 0) 40.34%);
    background-size: 6px 6px;
    background-position: -59px -59px;
}

.dots::after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background-image: radial-gradient(ellipse farthest-corner, rgba(207, 21, 207, 0), #2F337D 45%);
    z-index: 0;
}

.dots div {
    z-index: 1;
}

.position-bottom,
*.position-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
}

.postion-top,
*.postion-top {
    position: absolute;
    top: 0;
    bottom: auto;
}

.buildBtn {
    flex: 0 0 auto;
    margin: 0 auto;
    display: flex;
    width: auto;
    justify-self: flex-end;
    align-self: flex-end;
    height: 3rem;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 2rem;
    border-radius: var(--full-radius);
    font-size: var(--sm-font);
    font-weight: var(--font-weight-bold);
}

.ctaBtn {
    border-radius: var(--radius);
    height: 3.5rem;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    font-weight: var(--font-weight-bold);
}

.fw-light {
    font-weight: 200 !important;
}

.fw-bold {
    font-weight: 500 !important;
}

.pageListings li:first-child {
    border-top: 1px solid rgba(177, 177, 177, 0.44);
}

.pageListings li {
    font-size: var(--md-font);
    opacity: 0.75;
    width: 100%;
    min-height: 60px;
    border-bottom: 1px solid rgba(177, 177, 177, 0.44);
    justify-content: start;
    align-items: center;
    display: flex;
    transition: all .5s;
    -webkit-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.pageListings li:hover {
    opacity: 1;
}

.ui_blog_menu li {
    display: flex;
    padding: 0 1rem;
    width: auto;
}

.ui_blog_menu li a {
    font-size: small;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
}

.trans-border,
div.trans-border {
    border: 1px solid;
    border-color: rgba(148, 148, 148, 0.286);
}

.border-left,
div.border-left {
    border-left: 1px solid;
    border-color: rgba(71, 71, 71, 0.286);
}

.border-right,
div.border-right {
    border-right: 1px solid;
    border-color: rgba(71, 71, 71, 0.286);
}

.border-sided,
div.border-sided {
    border-right: 1px solid;
    border-left: 1px solid;
    border-color: rgba(131, 131, 131, 0.19);
}

.border-radius-top,
.border-radius-bottom,
.border-radius-left,
.border-radius-right {
    overflow: hidden;
}

.border-radius-top {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.border-radius-bottom {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.border-radius-left {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.border-radius-right {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.hero-product-showcase,
div.hero-product-showcase {
    position: absolute;
    right: 0;
    bottom: 1.2rem;
    padding: 1.2rem;
    width: 500px;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.125);
    border-radius: var(--radius);
}

.schlau_product_box {
    width: 50%;
    padding: 0.8rem;
}

.schlau_product_box .product_box {
    border-radius: var(--radius);
    height: 5rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    flex: 0 0 auto;
    padding: 0 1.2rem;
}

.schlau_product_box .product_box i.bi {
    font-size: var(--md-font);
    color: var(--secondary-bg);
}

.dropdown-img-container,
div.dropdown-img-container {
    height: 9rem;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.img-dropdown-menu,
img.img-dropdown-menu {
    display: flex;
    flex: 0 0 auto;
    margin: 0 auto;
    width: 100%;
}

.schlau_card {
    min-height: 32vh;
}

.schlau_card-md {
    height: 50vh;
}

.underline,
.underline a,
a.underline {
    text-decoration: underline;
}

.underline:hover,
.underline a:hover,
a.underline:hover {
    border-bottom: none;
}

/* CSS Patterns */
.basePattern_circle {
    background-color: var(--secondary-bg);
    opacity: 1;
    background-image: repeating-radial-gradient(circle at 0 0,
            transparent 0,
            var(--secondary-bg) 10px),
        var(--secondary-gradient);
}

.basePatter_dot {
    background-color: var(--primary-color);
    opacity: 1;
    background-image: radial-gradient(var(--primary-color) 0.5px,
            transparent 0.5px),
        radial-gradient(var(--primary-color) 0.5px, var(--primary-bg) 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.container.showcase-container,
div.container.showcase-container {
    display: inline-flex;
    transition: all ease-in-out 0.25s;
    -webkit-transition: all ease-in-out 0.25s;
    -ms-transition: all ease-in-out 0.25s;
    -o-transition: all ease-in-out 0.25s;
    -moz-transition: all ease-in-out 0.25s;
}

.showcase {
    width: 26rem;
    height: 32rem;
    margin: 0 0.5rem;
    flex: none;
    transition: all ease-in-out 0.25s;
    -webkit-transition: all ease-in-out 0.25s;
    -ms-transition: all ease-in-out 0.25s;
    -o-transition: all ease-in-out 0.25s;
    -moz-transition: all ease-in-out 0.25s;
}

.showcase-max {
    width: var(--showCaseMax-width);
    height: var(--showCaseMax-height);
    margin: 0 0.5rem;
    flex: none;
    transition: all ease-in-out 0.25s;
    -webkit-transition: all ease-in-out 0.25s;
    -ms-transition: all ease-in-out 0.25s;
    -o-transition: all ease-in-out 0.25s;
    -moz-transition: all ease-in-out 0.25s;
}

.slideLeft,
.slideRight {
    cursor: pointer;
    font-size: 1.2rem;
}

.trackerCont {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trackerCont * {
    display: flex;
}

.trackerCont .track-ico {
    cursor: pointer;
    width: 7px;
    height: 7px;
    border-radius: 20px;
    background: var(--primary-bg);
    margin: 0 5px;
}

.transparent,
div.transparent,
section.transparent {
    background: transparent;
    background-color: transparent;
}

/* scroller */
.scroller {
    max-width: 90%;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg,
            transparent,
            white 20%,
            white 80%,
            transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

.tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.tag-list li {
    padding: 1rem;
    background: var(--clr-primary-400);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* CSS Patterns end */

.grid-lines-md,
.grid-lines {
    overflow: hidden;
}

.grid-lines::before,
.grid-lines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
    background-size: 2.5px 2.5px;
    z-index: -1;
    /* Place behind content */
}

.grid-container::after {
    transform: rotate(90deg);
    /* For horizontal lines if using a single gradient */
}

.grid-lines-md::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.085) 99.58%, rgba(0, 0, 0, 0.06)),
        linear-gradient(rgba(255, 255, 255, 0), transparent);
    background-size: 250px 250px;
    z-index: -1;
    /* Place behind content */
}

.grid-lines-md::after {
    content: '';
    position: absolute;
    top: 0;
    left: -85%;
    width: 300%;
    height: 300%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 39.08%, rgba(169, 169, 169, 0) 43.7%),
        linear-gradient(rgba(255, 255, 255, 0), transparent);
    background-size: 24px 5px;
    z-index: -1;
    transform: rotate(90deg);
    /* For horizontal lines if using a single gradient */
}

.grid-lines-md-vertical::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.085) 99.58%, rgba(0, 0, 0, 0.06)),
        linear-gradient(rgba(255, 255, 255, 0), transparent);
    background-size: 250px 250px;
    z-index: -1;
    /* Place behind content */
}

/* Margin offs */

.offMagTop-1 {
    margin-top: -2rem;
}

.offMagTop-2 {
    margin-top: -4rem;
}

.offMagTop-3 {
    margin-top: -6rem;
}

.offMagTop-4 {
    margin-top: -8rem;
}

.offMagTop-5 {
    margin-top: -10rem;
}

/* Margin offs */

.hero-features,
div.hero-features {
    position: relative;
    right: 0;
    bottom: 0;
    padding: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: linear-gradient(290deg, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.5));
    margin-top: -9.8rem;
}

.sm-icon,
img.sm-icon {
    width: 2rem;
    height: auto;
    border-radius: 2rem;
    display: flex;
    margin: 0 auto;
}

.radius,
div.radius {
    border-radius: var(--radius);
}

.full-radius,
div.full-radius {
    border-radius: var(--full-radius);
}

.trans-bg,
div.trans-bg,
section.trans-bg {
    background: var(--trans-bg);
    color: var(--primary-color);
}

.left-to-right-trans-bg,
div.left-to-right-trans-bg,
section.left-to-right-trans-bg {
    background: var(--left-to-right-trans-bg);
    color: var(--primary-color);
}

.bottom-to-top-trans-bg,
div.bottom-to-top-trans-bg,
section.bottom-to-top-trans-bg {
    background: var(--bottom-to-top-trans-bg);
    color: var(--primary-color);
}

.trans-blur-bg,
div.trans-blur-bg,
section.trans-blur-bg {
    background: var(--trans-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(145, 145, 145, 0.24);
}

.glass-blur-bg,
a.glass-blur-bg,
div.glass-blur-bg,
section.glass-blur-bg {
    background: var(--glass-bg);
    color: inherit;
    border: 1px solid rgba(145, 145, 145, 0.24);
    backdrop-filter: blur(10px);
    background-blend-mode: darken;
}

.primary-gradient-blur-bg,
a.primary-gradient-blur-bg,
.carousel-item a.primary-gradient-blur-bg,
.primary-gradient-blur-bg a.ctaBtn.primary-gradient-blur-bg {
    background: var(--primary-gradient);
    /* background-blend-mode: darken; */
}

.primary-gradient-blur-bg-border,
a.primary-gradient-blur-bg-border,
.carousel-item a.primary-gradient-blur-bg-border,
.primary-gradient-blur-bg-border a.ctaBtn.primary-gradient-blur-bg-border {
    background: var(--primary-gradient-border);
    background-blend-mode: normal;
    border: 2px solid transparent;
}

.secondary-gradient-blur-bg,
a.secondary-gradient-blur-bg,
.carousel-item a.secondary-gradient-blur-bg,
.secondary-gradient-blur-bg a.ctaBtn.secondary-gradient-blur-bg {
    color: var(--secondary-color);
    background: var(--secondary-gradient);
    overflow: hidden;
}

.tertiary-gradient-blur-bg,
a.tertiary-gradient-blur-bg,
.carousel-item a.tertiary-gradient-blur-bg,
.tertiary-gradient-blur-bg a.ctaBtn.tertiary-gradient-blur-bg {
    color: var(--tertiary-color);
    background: var(--tertiary-gradient);
    overflow: hidden;
}

.substitute-gradient-blur-bg,
a.substitute-gradient-blur-bg,
.carousel-item a.substitute-gradient-blur-bg,
.substitute-gradient-blur-bg a.ctaBtn.substitute-gradient-blur-bg {
    color: var(--substitute-color);
    background: var(--substitute-gradient);
}

.accent-gradient-blur-bg,
a.accent-gradient-blur-bg,
.carousel-item a.accent-gradient-blur-bg,
.accent-gradient-blur-bg a.ctaBtn.accent-gradient-blur-bg,
.secondary-gradient-blur-bg a.accent-gradient-blur-bg {
    color: var(--accent-color);
    background: var(--accent-gradient);
}

.primary-gradient-blur-bg>*,
.secondary-gradient-blur-bg>*,
.substitute-gradient-blur-bg>*,
.accent-gradient-blur-bg>*,
.primary-gradient-blur-bg>*>*,
.secondary-gradient-blur-bg>*>*,
.substitute-gradient-blur-bg>*>*,
.tertiary-gradient-blur-bg>*>*,
.accent-gradient-blur-bg>*>* {
    z-index: 3;
}

.primary-gradient-blur-bg>.send-backward,
.secondary-gradient-blur-bg>.send-backward,
.substitute-gradient-blur-bg>.send-backward,
.accent-gradient-blur-bg>.send-backward,
.primary-gradient-blur-bg>*>.send-backward,
.secondary-gradient-blur-bg>*>.send-backward,
.substitute-gradient-blur-bg>*>.send-backward,
.tertiary-gradient-blur-bg>*>.send-backward,
.accent-gradient-blur-bg>*>.send-backward {
    z-index: var(--send-backward);
}

.primary-gradient a.no-bg,
.primary-gradient-blur-bg a.no-bg,
.secondary-gradient a.no-bg,
.secondary-gradient-blur-bg a.no-bg,
.tertiary-gradient a.no-bg,
.tertiary-gradient-blur-bg a.no-bg,
.substitute-gradient a.no-bg,
.substitute-gradient-blur-bg a.no-bg,
.accent-gradient a.no-bg,
.accent-gradient-blur-bg a.no-bg {
    background: none;
}

* a.primary {
    background: var(--primary-bg);
    color: var(--primary-color);
}

* a.primary-gradient-blur-bg {
    background: var(--primary-gradient);
    color: var(--primary-color);
}

* a.secondary {
    background: var(--secondary-bg);
    color: var(--secondary-color);
}

* a.secondary-gradient {
    background: var(--secondary-gradient);
    color: var(--secondary-color);
}

* a.secondary-gradient-blur-bg {
    background: var(--secondary-gradient);
}

* a.tertiary-gradient {
    background: var(--tertiary-gradient);
    color: var(--tertiary-color);
}

* a.tertiary-gradient-blur-bg {
    background: var(--tertiary-gradient);
    color: var(--tertiary-color);
}

* a.substitute-gradient {
    background: var(--substitute-gradient);
    color: var(--substitute-color);
}

* a.substitute-gradient-blur-bg {
    background: var(--substitute-gradient);
    color: var(--substitute-color);
}

* a.accent-gradient {
    background: var(--accent-gradient);
    color: var(--accent-color);
}

* a.accent-gradient-blur-bg {
    background: var(--accent-gradient);
    color: var(--accent-color);
}

* a.accent-off {
    background: var(--accent-off-bg);
    color: var(--accent-off-color);
}

a.primary-gradient:hover,
a.primary-gradient-blur-bg:hover,
a.secondary-gradient:hover,
a.secondary-gradient-blur-bg:hover,
a.tertiary-gradient:hover,
a.tertiary-gradient-blur-bg:hover,
a.substitute-gradient:hover,
a.substitute-gradient-blur-bg:hover,
a.accent-gradient:hover,
a.accent-gradient-blur-bg:hover,
a.primary-gradient:hover i,
a.primary-gradient-blur-bg:hover i,
a.secondary-gradient:hover i,
a.secondary-gradient-blur-bg:hover i,
a.tertiary-gradient:hover i,
a.tertiary-gradient-blur-bg:hover i,
a.substitute-gradient:hover i,
a.substitute-gradient-blur-bg:hover i,
a.accent-gradient:hover i,
a.accent-gradient-blur-bg:hover i {
    background: var(--secondary-gradient);
    color: inherit;
    font-weight: 500;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: break-word;
    border: 1px solid rgba(255, 255, 255, 0.125);
    overflow: hidden;
}

a:hover::after {
    display: flex;
    position: absolute;
    background: var(--base-color);
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.viewH,
div.viewH,
span.viewH {
    height: 100vh;
    padding: 0;
}

.viewH_1_2,
div.viewH_1_2,
span.viewH_1_2 {
    height: calc(100vh / 1.25);
    padding: 0;
}

.viewH_2,
div.viewH_2,
span.viewH_2 {
    height: calc(100vh / 2);
    padding: 0;
}

.viewH_2_3,
div.viewH_2_3,
span.viewH_2_3 {
    height: calc(100vh / 2.25);
    padding: 0;
}

.viewH_3,
div.viewH_3,
span.viewH_3 {
    height: calc(100vh / 3);
    padding: 0;
}

.viewH img,
div.viewH img {
    height: 100%;
    display: flex;
    width: auto;
    margin: 0 auto;
}

.dynamic-build-1,
div.dynamic-build-1 {
    position: absolute;
    bottom: 0;
    top: auto;
    z-index: 5;
}

.dynamic-build-2,
div.dynamic-build-2 {
    position: absolute;
    bottom: auto;
    top: 0;
    z-index: 5;
}

.posTop,
div.posTop,
span.posTop {
    top: 0;
}

.posBottom,
div.posBottom,
span.posBottom {
    bottom: 0;
}

.posLeft,
div.posLeft,
span.posLeft {
    left: 0;
}

.posRight,
div.posRight,
span.posRight {
    right: 0;
}

.base-ui-elem,
div.base-ui-elem,
span.base-ui-elem {
    z-index: 0;
}

.primary-gradient-blur-bg>.base-ui-elem,
.secondary-gradient-blur-bg>.base-ui-elem,
.accent-gradient-blur-bg>.base-ui-elem,
.substitute-gradient-blur-bg>.base-ui-elem {
    z-index: 2;
}

.top-left-to-bottom-right {
    -webkit-transform: translate3d(190px, 45px, 0px);
    transform: translate3d(190px, 45px, 0px);
}

.bottom-right-to-top-left {
    -webkit-transform: translate3d(-190px, -45px, 1px);
    transform: translate3d(-190px, -45px, 1px);
}

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

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

.left-0 {
    left: 0 !important;
}

.right-0 {
    right: 0 !important;
}

.accordion,
.accordion * {
    transition: all ease-in 0.5s;
    -webkit-transition: all ease-in 0.5s;
    -moz-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
    -ms-transition: all ease-in 0.5s;
}

.accordionHeader * {
    margin-bottom: 0;
}

.schlau_note {
    border-top-left-radius: 0% !important;
}

/* btn hover effects */
a:hover {
    background: var(--secondary-gradient);
    color: inherit;
    font-weight: 500;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: break-word;
}

a.bBtn:hover {
    padding: var(--btn-font-size);
    border-radius: var(--radius);
}

.buildBtn:hover,
a.buildBtn:hover {
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.125);
}

a.p-0:hover {
    padding: 0px 17px !important;
}

a.no-bg:hover {
    background: none !important;
    background-clip: none;
}

.primary a:hover,
a.primary:hover,
header .nav a.primary:hover,
.primary a:hover i,
a.primary:hover i,
header .nav a.primary:hover i {
    background: var(--secondary-gradient);
    color: inherit;
    font-weight: 500;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: break-word;
}

.secondary a:hover,
a.secondary:hover,
.tertiary a:hover,
a.tertiary:hover,
.alternate a:hover,
a.alternate:hover,
.substitute a:hover,
a.substitute:hover,
header .nav a.accent:hover {
    background: var(--primary-bg);
    color: var(--primary-color);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.primary-gradient a:hover,
a.primary-gradient:hover {
    background: var(--primary-gradient);
    color: inherit;
    background-clip: text;
    -webkit-background-clip: text;
}

.primary-gradient a:hover i,
a.primary-gradient:hover i {
    background-clip: text;
    -webkit-background-clip: text;
}


.primary-gradient a:hover::after,
a.primary-gradient:hover::after {
    background: var(--secondary-gradient);
}

.secondary-gradient a:hover,
a.secondary-gradient:hover {
    background: var(--primary-bg);
    color: var(--primary-color);
}

i.bi.cls-menu {
    position: absolute;
    right: 0;
    padding: 25px 32px;
    top: 0;
    font-weight: 800;
    z-index: 99999;
    cursor: pointer;
    margin-top: -65px;
    font-size: var(--x-lg-font);
}

div.menu-box {
    display: none;
}

div.menu-box .menu-dropdown {
    display: none;
    opacity: 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition-delay: 0.5s;
    padding: 40px;
}

.testimonialCard,
div.testimonialCard {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-top-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    overflow: hidden;
}

.carousel,
.carousel.slide {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
}

.carousel-caption {
    margin: 0 auto;
    left: 0;
    bottom: 0 !important;
    text-align: left;
    color: inherit;
    width: 100%;
}

.carousel-caption .ctaBtn:hover {
    background: var(--secondary-bg);
    color: var(--secondary-color);
}

.carousel-indicators [data-bs-target].active {
    background-color: transparent;
}

.carousel-indicators {
    z-index: var(--bring-forward);
    width: 88%;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0 auto;
    margin-bottom: 2.5rem;
}

.carousel-indicators span,
.carousel-indicators [data-bs-target] {
    width: 18px;
    height: 18px;
    border-radius: 50px;
    background-clip: none;
    /* border: none; */
    /* border-top: none; */
    /* border-bottom: none; */
    position: relative;
    opacity: 1;
    margin: 0px 10px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    padding: 0px;
    background: transparent;
}

.carousel-indicators span.active::after {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background: transparent;
    position: absolute;
    z-index: var(--bring-forward);
    content: "";
    margin: 0rem;
    left: auto;
    right: auto;
}

.carousel-indicators span::before {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background: var(--secondary-bg);
    position: relative;
    z-index: var(--bring-to-top);
    content: "";
    margin: auto;
}

.carousel-control-next,
.carousel-control-prev {
    width: 7.5%;
    opacity: 1;
}

.carousel-item {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
}

.carousel-inner {
    z-index: var(--send-backward);
    width: 100%;
    height: 100%;
    display: flex;
    flex: 0 0 auto;
}

.carousel.carousel-section .carousel-indicators {
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    bottom: 0px;
}

.accordion-header.collapse {
    display: block;
}

.accordion-item .accordion-button.collapsed {
    display: flex;
}

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

.form-control,
input {
    height: 60px;
    padding: 0px 15px;
}

textarea.form-control {
    padding: 15px;
}

.tawk-branding,
a.tawk-branding {
    display: none !important;
}

.img-rotate {
    transform: rotate(90deg);
    height: 70%;
}

/* cards */
.micro-card,
div.micro-card,
section.micro-card,
article.micro-card,
span.micro-card {
    min-height: var(--micro-card);
    height: var(--micro-card);
}


.mini-card,
div.mini-card,
section.mini-card,
article.mini-card,
span.mini-card {
    min-height: var(--mini-card);
    height: var(--mini-card);
}

.card,
div.card,
section.card,
article.card,
span.card {
    height: var(--card);
}

.card-1,
div.card-1,
section.card-1,
article.card-1,
span.card-1 {
    height: var(--card-1);
}

.card-2,
div.card-2,
section.card-2,
article.card-2,
span.card-2 {
    height: var(--card-2);
}

.card-3,
div.card-3,
section.card-3,
article.card-3,
span.card-3 {
    height: var(--card-3);
}

.card-4,
div.card-4,
section.card-4,
article.card-4,
span.card-4 {
    height: var(--card-4);
}

.ico {
    height: var(--ico-height);
}

.span-ico {
    width: 36px;
    height: 36px;
    border-radius: 90px;
    padding: 7.5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-ico {
    width: 80px;
    height: 80px;
    border-radius: 90px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ellipse {
    width: 75%;
    border-radius: 100vh;
    margin: auto;
    padding: 6.5rem 4.5rem !important;
    min-height: 70vh;
}

.auto-radius {
    border-radius: 100vh;
    border: 0.5rem solid var(--off-bg);
    height: 50vh;
}

.col_2-80_to_20 {
    display: grid;
    grid-template-columns: 3.5fr .5fr;
    gap: 20px 20px;
}

.col_2-20_to_80 {
    display: grid;
    grid-template-columns: .5fr 3.5fr;
    gap: 20px 20px;
}

.col_2-75_to_25 {
    display: grid;
    grid-template-columns: 3.25fr .75fr;
    gap: 20px 20px;
}

.col_2-25_to_75 {
    display: grid;
    grid-template-columns: .75fr 3.25fr;
    gap: 20px 20px;
}

.col_2-30_to_70 {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px 20px;
}

.col_2-40_to_60 {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px 20px;
}

.col_2-60_to_40 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px 20px;
}

.col_2-45_to_55 {
    display: grid;
    grid-template-columns: 1.5fr 2.5fr;
    gap: 20px 20px;
}

.col_2-55_to_45 {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr;
    gap: 20px 20px;
}

.col_2-50_to_50 {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 20px 20px;
}

.col_5by5 {
    display: grid;
    grid-template-columns: .75fr .75fr .75fr .75fr .75fr;
    gap: 20px 20px;
}

.col_4by4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px 20px;
}

.col_3by3 {
    display: grid;
    grid-template-columns: 1.333fr 1.333fr 1.333fr;
    gap: 20px 20px;
}

.col_2by2 {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 20px 20px;
}

.col_2-70by30 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px 20px;
}

.col_2-60by40 {
    display: grid;
    grid-template-columns: 2.75fr 1.25fr;
    gap: 20px 20px;
}

.row-even {
    display: grid;
    gap: 20px 20px;
}

.grid-item {
    min-width: 0;
}

.border-accent-gradient,
.border-accent-gradient-effect:hover {
    border: 2px solid transparent;
    background-image: linear-gradient(#2b1036, #2b1036), linear-gradient(328deg, rgba(255, 106, 0, 0.32), rgba(245, 205, 15, 0.79) 41.6%, rgba(112, 0, 148, 0.33) 79.83%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 1.2rem !important;
    color: var(--primary-color);
}

.partners img,
div.partners img,
span.partners img {
    height: 60px;
    width: auto;
}

.main-caption,
*.main-caption {
    font-size: 10.25rem;
    line-height: 1;
}

span.nav-lines {
    display: block;
    float: none;
    margin-bottom: 5px;
    background: var(--accent-bg);
    width: 20px;
    height: 2px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
}

header .primary span.nav-lines,
header.sec-bg span.nav-lines {
    background: var(--tertiary-bg);
}

span.nav-lines:first-child {
    width: 25px;
}

span.nav-lines:last-child {
    width: 30px;
    margin-bottom: 0;
}

a.nav-lines-btn:hover span.nav-lines {
    width: 25px;
}

a.nav-lines-btn:hover span.nav-lines:first-child {
    width: 30px;
}

a.nav-lines-btn:hover span.nav-lines:last-child {
    width: 20px;
}

.nav-lines-txt {
    float: left;
}

.nav-lines-ico {
    float: right;
}

.nav-lines-btn {
    float: right;
}

.style-number,
span.style-number {
    font-weight: 800;
    font-size: calc(50vw/6);
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    margin: 0 -1.2rem;
    opacity: 0.25;
    background: var(--trans-bg);
    line-height: 1;
    padding: calc(50vw/6/10);
    border-bottom-left-radius: var(--full-radius);
}

/*menu*/
.webQ_menu,
div.webQ_menu {
    display: none;
    position: fixed;
    z-index: var(--bring-to-top);
    height: 100%;
    overflow: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    flex-direction: column;
    background: var(--primary-bg);
    font-size: xx-large;
    color: var(--primary-color);
}

.menu_banner,
div.menu_banner,
.webQ_menu div.menu_banner {
    display: none;
    position: fixed;
    width: 33%;
    overflow: hidden;
    top: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--alternate-bg);
}

.webQ_menu .childList,
.webQ_menu span.childList {
    display: none;
    position: absolute;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    bottom: -35px;
    left: 0;
}



.webQ_menu span.childList li,
.webQ_menu ul.childList li {
    margin-right: 10px;
}

.webQ_menu .menu-item a:hover .menu_banner,
.webQ_menu .menu-item a:hover .childList,
.webQ_menu .menu-item:hover .menu_banner,
.webQ_menu .menu-item:hover .childList {
    display: flex;
    animation: slide-in-right 0.5s ease-in-out;
    -webkit-animation: slide-in-right 0.5s ease-in-out;
}


/* OBJECTS */

.bubble {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2),
        inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2),
        inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2),
        inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

    height: 200px;
    position: absolute;
    width: 200px;
}

.bubble:after {
    background: -moz-radial-gradient(center,
            ellipse cover,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 70%);
    /* FF3.6+ */
    background: -webkit-gradient(radial,
            center center,
            0px,
            center center,
            100%,
            color-stop(0%, rgba(255, 255, 255, 0.5)),
            color-stop(70%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center,
            ellipse cover,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 70%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center,
            ellipse cover,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 70%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center,
            ellipse cover,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 70%);
    /* IE10+ */
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 70%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

    content: "";
    height: 180px;
    left: 10px;
    position: absolute;
    width: 180px;
}

.logo,
img.logo {
    height: 60px;
}

.scrollTopCont {
    display: none;
    position: fixed;
    bottom: 5%;
    right: 5%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    padding: 0;
    font-size: 30px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    border-radius: 50px;
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.scrollTopCont.active {
    display: flex;
}

.scrollTopCont:hover {
    bottom: 6.5%;
}

.imgThmb {
    display: flex;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border-radius: 60px;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 auto;
    margin-left: 0;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: var(--lg-font);
    text-align: center;
}

.imgThmb img {
    margin: 0 auto;
}

.scrollItem {
    height: var(--elem-height);
    width: var(--elem-width);
    overflow: hidden;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 10px;
    position: relative;
}

.scrollItem-track {
    display: flex;
    gap: var(--elem-gap);
    animation: moveLeft calc(var(--time) * var(--elem-count)) linear infinite;
    flex-direction: row;
}

.itemData {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--elem-gap);
    background: var(--trans-item-bg);
    color: var(--accent-color);
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}

.arrowLink,
a.arrowLink,
button .arrowLink {
    background: var(--accent-gradient);
    color: var(--accent-color);
    font-size: var(--md-font);
    border-radius: 4rem;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}

.arrowLink:hover,
a.arrowLink:hover,
button:hover .arrowLink {
    background: var(--accent-color);
    color: var(--accent-off-color);
    margin-bottom: 10px;
}

.webQ_ui_card {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    background-image: radial-gradient(circle at 50% 0, #6160833d, #2a294100);
    border: 1px solid var(--accent-off-color);
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 512px;
    min-height: 380px;
    padding: 48px 54px;
    display: flex;
}

/*@media-quries*/

@media (min-width: 1440px) {

    /* Styles for large screens */
    .display-6 {
        font-size: 2.125rem;
    }

    .container {
        max-width: 1280px;
        margin: 0 auto;
    }
}

@media (max-width: 920px) {

    /* Styles for desktop */
    .col_4by4 {
        grid-template-columns: 2fr 2fr;
    }

    .col_2-40_to_60,
    .col_2-45_to_55 {
        grid-template-columns: 2fr 2fr;
    }

    .display-3 {
        font-size: calc(1.25rem + 2.5vw)
    }

    .display-4 {
        font-size: calc(1.15rem + 2.25vw)
    }

    .display-5 {
        font-size: calc(1rem + 2vw)
    }

    .display-6 {
        font-size: calc(1rem + 1.5vw)
    }

    .webQ_menu span.childList li,
    .webQ_menu ul.childList li {
        line-height: 1;
    }

    .webQ_menu .menu-item a:hover .menu_banner,
    .webQ_menu .menu-item:hover .menu_banner {
        display: none;
    }

    .webQ_menu .menu-item {
        flex-direction: column;
    }

    .webQ_menu span.childList,
    .webQ_menu ul.childList {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
    }

    .iconic {
        font-size: 480%;
        line-height: 4rem;
    }

    .iconic-lg {
        font-size: 510%;
        line-height: 6rem;
    }

    .iconic-x-lg {
        font-size: 620%;
        line-height: 8rem;
    }

    .iconic-xx-lg {
        font-size: 700%;
        line-height: 9rem;
    }

    .position-absolute.position-xs-relative {
        position: relative !important;
    }
}

@media (max-width: 767px) {

    /* Styles for mobile and tablet */
    :root {
        --btn-font-size: 10px;
        --sm-font: 14px;
        --reg-font: 14px;
        --md-font: 15px;
        --lg-font: 16px;
        --x-lg-font: 22px;
        --elem-count: 3;
        --elem-height: 180px;
        --elem-width: 300px;
        --elem-gap: 10px;
        --sm-size: 3rem;
        --micro-card: 180px;
        --mini-card: 200px;
        --card: 320px;
        --card-1: 520px;
        --card-2: 660px;
        --card-3: 720px;
        --card-4: 820px;
    }

    .col_2-20_to_80,
    .col_2-80_to_20,
    .col_2-25_to_75,
    .col_2-75_to_25,
    .col_2-30_to_70,
    .col_2-70_to_30,
    .col_2-40_to_60,
    .col_2-60_to_40,
    .col_2-45_to_55,
    .col_2-55_to_45,
    .col_2-50_to_50,
    .col_2-60by40,
    .col_4by4,
    .col_3by3,
    .col_2by2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px 20px;
    }

    header {
        min-height: 60px;
        align-items: center;
        justify-content: center;
        transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition-delay: 0.5s;
    }

    .title-curve {
        line-height: 2.5rem !important;
    }

    section.hero {
        height: 100vh;
    }

    .hero-section a,
    section.hero-section a {
        width: 100%;
        margin: 0 auto !important;
        margin-bottom: 1rem !important;
        text-align: center;
    }

    .hero-section div.caption-copy {
        min-height: 500px;
    }

    .hero-section.card-4 img.d-flex {
        margin: 0 auto;
        height: 100% !important;
        width: auto !important;
    }

    .hero-section.card-3,
    .hero-section.card-3 {
        height: auto !important;
        min-height: auto !important;
    }

    .logo,
    img.logo {
        height: 45px;
    }

    .mini-card,
    div.mini-card,
    section.mini-card,
    article.mini-card,
    span.mini-card {
        height: auto;
    }

    .card,
    div.card,
    section.card,
    article.card,
    span.card {
        height: auto;
    }

    .card-1,
    div.card-1,
    section.card-1,
    article.card-1,
    span.card-1 {
        height: auto;
    }

    .card-2,
    div.card-2,
    section.card-2,
    article.card-2,
    span.card-2 {
        height: auto;
    }

    .card-3,
    div.card-3,
    section.card-3,
    article.card-3,
    span.card-3 {
        height: auto;
    }

    .card-4,
    div.card-4,
    section.card-4,
    article.card-4,
    span.card-4 {
        height: auto;
    }

    .mini-card img.h-100 {
        max-height: var(--mini-card);
    }

    .micro-card img.h-100 {
        max-height: var(--micro-card);
    }

    .card img.h-100 {
        max-height: var(--card);
    }

    .card-1 img.h-100 {
        max-height: var(--card-1);
    }

    .card-2 img.h-100 {
        max-height: var(--card-2);
    }

    .card-3 img.h-100 {
        max-height: var(--card-3);
    }

    .card-4 img.h-100 {
        max-height: var(--card-4);
    }

    .ellipse {
        width: 100%;
        border-radius: 5vh;
        margin: auto;
        padding: 0.5rem 2.5rem !important;
        min-height: 70vh;
    }

    .grid-lines-md::after,
    .grid-lines-md-vertical::before {
        display: none;
    }


    .display-4 {
        font-size: calc(1.55rem + 2.35vw);
    }

    .display-5 {
        font-size: calc(1.25rem + 2.23vw);
    }

    .display-7 {
        font-size: calc(1rem + 1vw);
    }

    .hero-section img.full-radius,
    .hero-section div.full-radius,
    section.hero-section img.full-radius,
    section.hero-section div.full-radius {
        border-radius: 0rem !important;
    }

    div.position-absolute img.d-flex.h-100 {
        height: 100% !important;
        max-height: none;
    }
}

@media (max-width: 680px) {
    :root {
        --elem-count: 3;
        --elem-height: 160px;
        --elem-width: 240px;
        --elem-gap: 10px;
        --micro-card: 180px;
        --mini-card: 200px;
        --card: 200px;
        --card-1: 220px;
        --card-2: 320px;
        --card-3: 420px;
        --card-4: 520px;
        --showCase-width: 26rem;
        --showCse-height: 32rem;
        --showCaseMax-width: 95%;
        --showCaseMax-height: 16rem;
    }

    .p-5 {
        padding: 2rem !important;
    }

    .ctaBtn,
    a.ctaBtn,
    button.ctaBtn {
        width: 100% !important;
    }

    .scrollTopCont {
        font-size: 15px;
    }

    .mini-card,
    div.mini-card,
    section.mini-card,
    article.mini-card,
    span.mini-card {
        height: auto;
    }

    .mini-card img {
        max-height: 220px;
        width: auto;
    }

    .card,
    div.card,
    section.card,
    article.card,
    span.card {
        height: auto;
    }

    .card-1,
    div.card-1,
    section.card-1,
    article.card-1,
    span.card-1 {
        height: auto;
    }

    .card-2,
    div.card-2,
    section.card-2,
    article.card-2,
    span.card-2 {
        height: auto;
    }

    .card-3,
    div.card-3,
    section.card-3,
    article.card-3,
    span.card-3 {
        height: auto;
    }

    .card-4,
    div.card-4,
    section.card-4,
    article.card-4,
    span.card-4 {
        height: auto;
    }

    .micro-card img.h-100,
    .mini-card img.h-100,
    .card img.h-100,
    .card-1 img.h-100,
    .card-2 img.h-100,
    .card-3 img.h-100,
    .card-4 img.h-100 {
        height: inherit !important;
    }

    .logo,
    img.logo {
        height: 42px;
    }


    .menu-item hr {
        margin: 10px auto !important;
    }

    header .contact-button {
        display: none;
    }

    .iconic {
        font-size: 380%;
        line-height: 3.5rem;
    }

    .iconic-lg {
        font-size: 410%;
        line-height: 4.5rem;
    }

    .iconic-x-lg {
        font-size: 420%;
        line-height: 5.5rem;
    }

    .iconic-xx-lg {
        font-size: 500%;
        line-height: 7rem;
    }

    .card-ico {
        width: 50px;
        height: 50px;
    }

    header {
        background: var(--primary-color);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    header div.container>div.primary-inverse.shadow {
        margin: 0 !important;
        background: none;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .cookie-box {
        width: 300px;
        padding: 1.3rem;
    }

    .showcase,
    .showcase-max {
        margin: 0 0.33333rem;
    }

    .showcase p,
    .showcase-max p {
        display: none;
    }

    .arc-top::before,
    .arc-bottom::after {
        height: 3rem;
    }

    .arc-top::before {
        top: -2.95rem;
    }

    .arc-bottom::before {
        bottom: -2.95rem;
    }

    .style-number,
    span.style-number {
        margin: -0.75rem;
    }
}

@media (max-width: 400px) {
    header {
        min-height: 55px;
    }

    .p-3,
    .p-4,
    .p-5 {
        padding: 0.9997rem !important;
    }

    .container,
    .hero .container,
    section.hero .container,
    .blurredBg .container {
        width: 96%;
    }

    .pb-3,
    .pb-4,
    .pb-5 {
        padding-bottom: 0.9997rem !important;
    }

    .pt-3,
    .pt-4,
    .pt-5 {
        padding-top: 0.9997rem !important;
    }

    .hero-section a,
    section.hero-section a {
        margin-bottom: 0 !important;
    }

    div.carousel-item div.trans-bg {
        padding: 0.89rem !important;
    }
}