/* 
    Common styles for: 
        Nav, 
        Footer, 
        Breadcrum,
        Justified text,
        Geeks btn,
        line-link,

        Colors,
        Fonts
*/
/* celia added */
.column-links a {
  display: flex;
  align-items: center; /* centers icon + text vertically */
  gap: 10px;
}
.footer-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 1024px) {
    /* Force navbar background on mobile - override Kadence transparent header */
    #geeks-nav .nav-upper {
min-height:54px;
}
}
/* ========  General Font & Colors   ======== */
/*MARK: -General Font & Colors  */

/* Bryant Regular */
@font-face {
    font-family: "Geeks On The Beach Font Regular";
    src: url("../../assets/font/BryantWebRegular.eot");
    src: url("../../assets/font/BryantWebRegular.eot?#iefix") format("embedded-opentype"),
    url("../../assets/font/BryantWebRegular.woff2") format("woff2"),
    url("../../assets/font/BryantWebRegular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

/* Bryant Medium (Bold) */
@font-face {
    font-family: "Geeks On The Beach Font Medium";
    src: url("../../assets/font/BryantWebBold.eot");
    src: url("../../assets/font/BryantWebBold.eot?#iefix") format("embedded-opentype"),
    url("../../assets/font/BryantWebBold.woff2") format("woff2"),
    url("../../assets/font/BryantWebBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

:root {
    /* Black-Greys */
    --color-black: #2d2e2f;
    --color-darkGray: #3c3c3c;
    --color-lightGray: #919191;
    --color-lightGray2: rgb(82, 82, 80);
    /* Red-orange-yellow */
    --color-red: #c7250d;
    --color-orange: #d75e0d;
    --color-LightOrange: #efa90d;
    --color-yellow: #ffd40f;
    /* Keeping this one for now but needs to be replaced by the light or orange */
    --color-darkOrange: #bb3700;
    /* Greens */
    --color-DarkGreen: #3e7d58;
    --color-MediumGreen: #329e64;
    --color-LightGreen: #4cc779;
    --color-HighlightGreen: #5fe489;
    /* Blues */
    --color-DarkBlue: #1d58a1;
    --color-WaterBlue: #1b79b2;
    --color-MediumBlue: #18a5c8;
    --color-SkyBlue: #15c5d7;
    /* Purples */
    --color-DarkPurple: #4f1f80;
    --color-MediumPurple: #5e339e;
    --color-LightPurple: #724cc7;
    --color-HighlightPurple: #805fe4;

    --gradient-GOTBSunset: radial-gradient(
            circle at center 100%,
            var(--color-yellow) 0%,
            var(--color-LightOrange) 20%,
            var(--color-orange) 75%,
            var(--color-red) 100%
    );
    --gradient-GOTBStandard: linear-gradient(
            147deg,
            var(--color-LightOrange) 0%,
            var(--color-orange) 66%
    );
    --gradient-DarkPurple: radial-gradient(
            circle at center 100%,
            var(--color-HighlightPurple),
            var(--color-DarkPurple)
    );
    --gradient-BlueGreenPurple: linear-gradient(
            147deg,
            var(--color-LightPurple),
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
    --gradient-SkyBlue: radial-gradient(
            circle at center 100%,
            var(--color-SkyBlue),
            var(--color-WaterBlue)
    );
    --gradient-Green: linear-gradient(
            162deg,
            var(--color-HighlightGreen),
            var(--color-LightGreen),
            var(--color-MediumGreen),
            var(--color-DarkGreen)
    );
    --gradient-BlueGreen: linear-gradient(
            147deg,
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
    --gradient-GOTBSolid: linear-gradient(
            90deg,
            var(--color-orange) 0%,
            var(--color-orange) 100%
    );
    --gradient-Greydient: radial-gradient(
            circle at top left,
            #3c3c3c 0%,
            #2d2e2f 65%
    );
    /* not sure if this is needed */
    --gradient-MenuGreydient: linear-gradient(to top, #3c3c3c 0%, #2d2e2f 100%);
    --gradient-Rainbow: linear-gradient(
            90deg,
            var(--color-red),
            var(--color-orange),
            var(--color-LightOrange),
            var(--color-yellow),
            var(--color-LightGreen),
            var(--color-MediumBlue),
            var(--color-LightPurple)
    );
}

/* ========  General Icon Font   ======== */
/*MARK: -General Icon Font  */
@font-face {
    font-family: "icomoon";
    src: url("../../assets/font/icomoon.ttf?bwfa46") format("truetype"),
    url("../../assets/font/icomoon.woff?bwfa46") format("woff"),
    url("../../assets/font/icomoon.svg?bwfa46#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-quote-left:before {
    content: "\f000";
}
.icon-linkedin2:before {
    content: "\f001";
}
.icon-twitter:before {
    content: "\f002";
}
.icon-instagram:before {
    content: "\f003";
}
.icon-facebook:before {
    content: "\f004";
}
.icon-phone_iphone:before {
    content: "\f005";
}
.icon-mapmarker:before {
    content: "\f006";
}
.icon-clear:before {
    content: "\f007";
}
.icon-paper-plane:before {
    content: "\f008";
}
.icon-send:before {
    content: "\f008";
}
.icon-3d-glasses:before {
    content: "\f009";
}
.icon-glasses:before {
    content: "\f009";
}
.icon-check:before {
    content: "\f00a";
}
.icon-google:before {
    content: "\f2dd";
}

/* ========  General Styles   ======== */
/*MARK: -General Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* body {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    position: relative;
    z-index: 1;
} */
body, input, select, optgroup, textarea {
  font-style: normal;
  font-weight: 400;
  /* REMOVE this line */
  /* font-size: unset !important; */
  line-height: 1.5;
}

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

hr {
    border: none;
    background-color: var(--color-darkGray);
    height: 1px;
    display: block;
}

a {
    text-decoration: none;
}

a.line-link {
    color: var(--color-darkGray);
    line-height: 1.5;
    transition: background-size 0.4s, color 0.4s;
    -webkit-tap-highlight-color: transparent;
}

.line-link:hover {
    color: var(--color-black);
}

/* hover effect (only for dekstop) */
@media (hover: hover) and (pointer: fine) {
    .line-link {
        --link-hover-color: var(--color-darkGray);
        /* here you change the color of the hover line */
        background-image: linear-gradient(
                var(--link-hover-color),
                var(--link-hover-color)
        );
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;
    }

    .line-link:hover {
        background-size: 100% 1px;
    }
}

.geeks-btn {
    --x: 0;
    --opacity: 0;
    --color: rgba(255, 255, 255, 0.3);
    --shadow-spread: 3px;

    color: #ffffff;
    border-width: 0px;
    border-color: rgba(0, 0, 0, 0);
    border-radius: 6px;
    letter-spacing: 1px;
    padding: 14px 38px 12px;
    font-size: 16px;
    font-family: "Geeks On The Beach Font Medium", Helvetica, Arial, Lucida,
    sans-serif;
    background-image: radial-gradient(
            circle at top left,
            #3c3c3c 0%,
            #2d2e2f 65%
    );
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%);
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    -webkit-tap-highlight-color: none;
    transition: box-shadow 0.3s, background 0.4s;
}

/* btn hover effect (only for dekstop) */
@media (hover: hover) and (pointer: fine) {
    .geeks-btn:after {
        content: "";
        position: absolute;
        top: -25px;
        left: 0;
        width: 300px;
        height: 100px;
        transform: translateX(calc(var(--x) * 1px - 150px));
        opacity: var(--opacity);
        pointer-events: none;
        background: radial-gradient(
                circle,
                var(--color) 0%,
                rgba(255, 255, 255, 0) 60%
        );
        will-change: transform, opacity;
    }

    .geeks-btn:hover {
        box-shadow: 3px 3px 3px var(--shadow-spread) rgb(0 0 0 / 20%);
    }
}

.geeks-btn:active {
    color: #fff;
}

@media (pointer: coarse) {
    .geeks-btn:focus,
    .geeks-btn:active {
        -webkit-tap-highlight-color: transparent;
    }
}

/* for ripple btn animation */
.geeks-btn,
.kb-button,
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.geeks-btn span.ripple,
.kb-button span.ripple,
.wp-block-button__link span.ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    transform: scale(0);
    background-color: rgba(255, 255, 255, 0.2);
    background-blend-mode: overlay;
    animation: ripple 1s linear;
}

.kb-button .kt-btn-inner-text,
.wp-block-button__link .kt-btn-inner-text {
    position: relative;
    z-index: 1;
}

@keyframes ripple {
    to {
        transform: scale(3);
        opacity: 0;
    }
}

/* ========  Gradient   ======== */
/*MARK: -Gradient */
.gradientGOTBSunset {
    background-image: radial-gradient(
            circle at center 100%,
            var(--color-yellow) 0%,
            var(--color-LightOrange) 20%,
            var(--color-orange) 75%,
            var(--color-red) 100%
    );
}

.gradientGOTBStandard {
    background-image: linear-gradient(
            147deg,
            var(--color-LightOrange) 0%,
            var(--color-orange) 66%
    );
}

.gradientDarkPurple {
    background-image: radial-gradient(
            circle at center 100%,
            var(--color-HighlightPurple),
            var(--color-DarkPurple)
    );
}

.gradientBlueGreenPurple {
    background-image: linear-gradient(
            147deg,
            var(--color-LightPurple),
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
}

.gradientSkyBlue {
    background-image: radial-gradient(
            circle at center 100%,
            var(--color-SkyBlue),
            var(--color-WaterBlue)
    );
}

.gradientGreen {
    background-image: linear-gradient(
            162deg,
            var(--color-HighlightGreen),
            var(--color-LightGreen),
            var(--color-MediumGreen),
            var(--color-DarkGreen)
    );
}

.gradientBlueGreen {
    background-image: linear-gradient(
            147deg,
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
}

.GOTBSolid {
    background-color: var(--color-orange);
}

.gradientGreydient {
    background-image: radial-gradient(
            circle at top left,
            #3c3c3c 0%,
            #2d2e2f 65%
    );
}

/* not sure if this is needed */
.gradientMenuGreydient {
    background-image: linear-gradient(to top, #3c3c3c 0%, #2d2e2f 100%);
}

.gradientRainbow {
    background-image: linear-gradient(
            90deg,
            var(--color-red),
            var(--color-orange),
            var(--color-LightOrange),
            var(--color-yellow),
            var(--color-LightGreen),
            var(--color-MediumBlue),
            var(--color-LightPurple)
    );
}

/* ========  Nav General   ======== */
/*MARK: -Nav General */
#geeks-nav {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-weight: 700;
    width: 100%;
    margin: -1px;
}

#geeks-nav a {
    text-decoration: none;
    color: #fff;
}

#geeks-nav a:link,
#geeks-nav a:visited {
    color: #fff;
}

#geeks-nav a:active,
#geeks-nav a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* =========   Nav Upper   ========== */
/*MARK: ---nav Upper */
#geeks-nav .nav-upper {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-image: linear-gradient(to top, #3c3c3c 0%, #2d2e2f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.137);
}

#geeks-nav .nav-upper-items {
    display: flex;
    align-items: center;
    /* height: 50px; */
    margin: 0 3vw !important;
    list-style: none !important;
}

#geeks-nav .nav-upper .nav-logo {
    width: 50px;
    display: block;
    position: absolute;
    top: 12px;
    right: 32px;
    cursor: auto;
    transform: scale(1.2);
}

#geeks-nav .nav-upper .nav-logo img {
    display: block;
    border-radius: 40%;
    cursor: pointer;
}

#geeks-nav .nav-upper img.speech-balloon {
    width: 50px;
    position: absolute;
    left: 53px !important;
    top: 28px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
}

#geeks-nav .nav-upper-items li a {
    transition: color 0.3s;
}

#geeks-nav .nav-upper-items li:not(.main-menu):hover a {
    color: var(--color-orange);
}

#geeks-nav .nav-upper-items > li:nth-of-type(1) {
    margin-right: 35px;
    margin-top:30px;
}

#geeks-nav .nav-upper-items li:nth-of-type(2) {
    margin-right: auto;
}

/* SVGs */
#geeks-nav .nav-upper-items svg circle {
    fill: #fff;
}

#geeks-nav .nav-upper-items svg path {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 1px;
}

#geeks-nav .nav-upper-items li:nth-of-type(1) svg {
    position: relative;
    top: 3px;
}

#geeks-nav .nav-upper-items li:nth-of-type(2) svg {
    position: relative;
    top: 1px;
}

#geeks-nav .nav-upper-items li:hover svg path {
    stroke: var(--color-orange);
}

/* =========   Nav Lower   ========== */
/*MARK: ---nav Lower */
#geeks-nav .nav-lower ul {
    padding: 7px 0;
    display: flex;
    align-self: center;
    justify-content: flex-end;
    user-select: none;
    list-style: none;
    margin:5px!important;
    margin-top:10px!important;
}

#geeks-nav .nav-lower li {
    margin-left: 25px;
}

#geeks-nav .nav-lower a {
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    aposition: relative;
    font-size: 1.2rem;
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    transition: color 0.3s;
    white-space: nowrap;
}

/* =========   Hamburger btn   ========== */
/*MARK: ---hamburger btn */
#geeks-nav .nav-hamburger {
    width: 45px;

}

#geeks-nav .nav-hamburger:active,
#geeks-nav .nav-hamburger:focus {
    -webkit-tap-highlight-color: rgba(216, 239, 46, 0.2);
    outline: none;
}

#geeks-nav a.nav-hamburger-btn {
    display: block;
    width: 40px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    top: 3px;
}

#geeks-nav .nav-hamburger span {
    display: none;
}

#geeks-nav .nav-hamburger .hamburger-lines {
    aposition: absolute;
    atop: 15px;
    aleft: 10.5px;
}

#geeks-nav .nav-hamburger .hamburger-lines div {
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    transform-origin: left 50%;
}

#geeks-nav .nav-hamburger .hamburger-lines .line1 {
    transition: transform 0.3s linear, background-color 0.3s;
}

#geeks-nav .nav-hamburger .hamburger-lines .line2 {
    opacity: 1;
    transition: transform 0.3s linear, opacity 0.3s, background-color 0.3s;
}

#geeks-nav .nav-hamburger .hamburger-lines .line3 {
    margin-bottom: 0;
    transition: transform 0.3s linear, background-color 0.3s;
}

/* Active */
#geeks-nav .nav-hamburger.active .hamburger-lines .line1 {
    transform: translateX(4px) rotate(45deg);
    margin-bottom: 7px;
}

#geeks-nav .nav-hamburger.active .hamburger-lines .line2 {
    opacity: 0;
    margin-bottom: 7px;
    transform: translateX(4px);
    width: 0;
}

#geeks-nav .nav-hamburger.active .hamburger-lines .line3 {
    transform: translateX(4px) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    #geeks-nav .nav-hamburger:hover .hamburger-lines .line {
        background-color: var(--color-orange);
    }
}

/* =========   Submenu   ========== */
/*MARK: ---submenu */
#geeks-nav .submenu {
    display: none;
    width: 100%;
    min-height: calc(100vh - 36px);
    position: fixed;
    z-index: 998;
    left: -100vw;
    top: 36px;
    color: #fff;
    padding-top: 13vh;
    aborder-top: 1px solid var(--color-lightGray2);
    background-color: var(--color-black);
    background: url("../../assets/img/nav/geeks-menu-bg.png"),
    radial-gradient(circle at 10% 70%, #3c3c3c 0%, #2d2e2f 26%);
    background-repeat: no-repeat;
    background-position: 5% 150%;
    overflow: hidden;
}

#geeks-nav .submenu .submenu-container {
    margin: 0 auto;
    width: 92vw;
}

/* Text general */
#geeks-nav .submenu .headline {
    color: #fff;
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-size: 1.1rem;
    margin-bottom: 2vh;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#geeks-nav .submenu .headline a {
    color: #fff;
    font-size: 1.1rem;
    transition: color 0.3s;
}

#geeks-nav .submenu .headline a:hover {
    color: #fff;
}

#geeks-nav .submenu .headline.active {
    color: #fff;
}

#geeks-nav .submenu-column-container .headline .plus {
    display: none;
}

#geeks-nav .submenu-column {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    padding-right: 20px;
}

#geeks-nav .submenu-column li {
    opacity: 0;
    position: relative;
}

#geeks-nav .submenu .submenu-column-container a {
    font-size: 1.1rem;
    line-height: 2.5;
}

#geeks-nav .submenu a:active {
    color: var(--color-orange);
}

#geeks-nav .submenu-column li a.active {
    color: var(--color-orange);
    left: 20px;
}

/* hover effect (only for dekstop  */
@media (hover: hover) and (pointer: fine) {
    #geeks-nav .submenu-column li a {
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;
        transition: background-size 0s, color 0.3s;
    }

    #geeks-nav .submenu-column li a:hover {
        background-size: 100% 1px;
        /*color: var(--color-orange);*/
        opacity:0.6;
        transition: background-size 1s cubic-bezier(0.25, 1, 0.5, 1);
    }
}

/* when clicked 
#geeks-nav .submenu-column li a.active:before {
    content: ">";
    font-size: 1.5rem;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    position: absolute;
    top: -5px;
    left: -20px;
}*/

/*  Text on top */
#geeks-nav .submenu span.start-here {
    font-family: "Caveat", cursive;
    font-size: 2rem;
    color: var(--color-lightGray);
    display: block;
    margin-top: 30px;
    font-weight: 400;
}

#geeks-nav .submenu .start-here a {
    color: #fff;
    /* text-decoration: underline; */
    border-bottom: 2px solid;
    font-size: 2.2rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    font-weight: 400;
}

#geeks-nav .submenu .start-here a:hover {
    color: var(--color-orange);
}

/*  Colums */
#geeks-nav .submenu .submenu-column-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 50px;
}

#geeks-nav .submenu .submenu-column {
    position: relative;
    margin-top: 8vh;
}

#geeks-nav .submenu .submenu-upper {
    aheight: 25vh;
    min-height: 180px;
}

#geeks-nav .submenu .submenu-lower {
    margin-top: 8vh;
}

#geeks-nav .submenu .submenu-upper-links,
#geeks-nav .submenu .submenu-lower-links {
    border-left: 1px solid var(--color-lightGray2);
    padding-left: 15px;
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida, sans-serif;
    list-style: none;
margin: 0 0 0em 1.5em;
}

/* MARK: -BREADCRUM   */
ul.breadcrumb {
    list-style: none;
}

ul.breadcrumb li {
    display: inline;
    font-size: 0.8rem;
}

ul.breadcrumb li a {
    text-transform: uppercase;
    color: var(--color-darkGray);
    transition: color 0.3s;
}

ul.breadcrumb li a:hover {
    color: var(--color-darkGray);
    border-bottom: 1px solid;
}

ul.breadcrumb li:last-child a {
    color: rgb(158, 158, 158);
    user-select: none;
}

ul.breadcrumb .breadcrumb-separator {
    padding: 0 8px;
}

/* MARK: -JUSTIFIED TEXT   */
.intro-headline {
    width: 38%;
}

#justified-headline {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    line-height: 1.2;
    opacity: 0;
}

#justified-headline .row {
    display: flex;
    grid-column: 1;
    justify-content: space-between;
}

#justified-headline h1 {
    font-weight: 300;
    text-transform: uppercase;
    user-select: none;
}

#justified-headline h2 {
    font-weight: 300;
    text-transform: uppercase;
}

#justified-headline hr {
    background-color: #cacaca;
}

#justified-headline h1 .row span,
#justified-headline h2 .row span {
    line-height: min(6vw, 80px);
}

#justified-headline h2 .row span.char.special {
    line-height: 10px !important;
}

.intro-headline .paragraf-container p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5em;
    margin-top: 25px;
    color: rgb(59, 59, 59);
}

/* line and ampersand */
#justified-headline .center {
    align-self: center;
    margin: 0 auto;
}

#justified-headline .row .lines {
    display: flex;
    align-items: center;
    width: 100%;
}

#justified-headline .lines hr {
    width: 45%;
    display: inline-block;
}

/* MARK: -FOOTER  */
:root {
    --footer-height: 420px;
    --footer-cta-height: 340px;
}

/* Mobile content (headline + button) needs a lot less room than desktop -
   the fixed height was leaving a large block of empty space at the bottom
   of the CTA section on small screens. Spacer and section both read from
   the same var, so this single override keeps them in sync. */
@media (max-width: 768px) {
    :root {
        --footer-cta-height: 240px;
    }
}

.geeks-footer-offset {
    height: 0;
    pointer-events: none;
    background: transparent;
    box-shadow: none;
}

#geeks-footer {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    color: #000;
    background-color: #fff;
    width: 100%;
    min-height: var(--footer-height);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 1;
    background-image: none;
    background-repeat: no-repeat;
    background-size: 180px;
    background-position-x: 3%;
    background-position-y: 103%;

    a-webkit-transform: translate3d(0, 0, 0);
    atransform: translate3d(0, 0, 0);
    a-webkit-backface-visibility: hidden;
    a-webkit-perspective: 1000;
    a-webkit-overflow-scrolling: touch;

    awill-change: transform;

    atransform-style: preserve-3d;
    atransform: translateZ(2px);

    /* chrome content blink on scroll position fixed - solves the problem of the footer appearing but slows down scrolling on mobile*/
    aoverflow-x: hidden;
}

.footer-cta-offset {
    height: var(--footer-cta-height);
    background-color: #000;
    box-shadow: inset 0 8px 6px -3px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: -3;
}

#geeks-footer .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1440px;
    width: 85vw;
}

#geeks-footer .footer-container p {
    line-height: 1.4;
}

#geeks-footer .icon {
    font-size: 1.5rem;
}

#geeks-footer .column {
    max-width: 30%;
}

#geeks-footer .column .headline {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1.3em;
    padding-bottom: 30px;
    letter-spacing: 1px;
    /* was --color-lightGray (#919191) - too low-contrast against the new
       white footer background, darker gray keeps it legible. */
    color: var(--color-darkGray);
}

#geeks-footer .column h4 {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-size: 1.2rem;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    letter-spacing: 1px;
}

#geeks-footer a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
}

#geeks-footer a:hover {
    color: var(--color-darkGray);
}

/* column 1 */
#geeks-footer .column:nth-of-type(1) .rows {
    display: flex;
    flex-direction: row;
}

#geeks-footer .column:nth-of-type(1) .icon-quote-left {
    font-size: 1.7rem;
    margin-right: 15px;
}

#geeks-footer .column:nth-of-type(1) blockquote {
    font-size: 1.2rem;
}

#geeks-footer .column:nth-of-type(1) figcaption {
    font-size: 0.9rem;
    margin-top: 15px;
    color: var(--color-darkGray);
}

/* column 2 */
#geeks-footer .second-column-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

#geeks-footer .second-column-container .upper,
#geeks-footer .second-column-container .lower {
    display: flex;
}

#geeks-footer .second-column-container .right-side {
    margin-left: 15px;
}

#geeks-footer .second-column-container .lower {
    margin-top: 25px;
}

#geeks-footer .second-column-container span:not(.icon) {
    padding: 2px 0;
    font-size: 0.95rem;
    display: inline-block;
}

#geeks-footer .second-column-container span,
#geeks-footer .second-column-container sup {
    color: var(--color-darkGray) !important;
}

#geeks-footer .victoria-address-mobile {
    display: none;
}

/* column 3 */
#geeks-footer .column:nth-of-type(3) .column-links {
    display: flex;
    flex-direction: column;
}

#geeks-footer .column:nth-of-type(3) .column-links a {
    padding-bottom: 13px;
    font-size: 1.1rem;
}

#geeks-footer .column:nth-of-type(3) .column-links a span {
    padding-right: 19px;
    padding-right: 12px;
    top: 4px;
    position: relative;
}

#geeks-footer .column:nth-of-type(3) .column-links a .icon-glasses {
    padding-right: 10px;
}

#geeks-footer .column:nth-of-type(3) hr {
    margin: 18px 0px 25px 0px;
    border: none;
    background-color: #000;
    height: 1px;
    display: block;
}

#geeks-footer .column:nth-of-type(3) .social-links span {
    font-size: 1.1rem;
    padding-right: 0;
}

#geeks-footer .column:nth-of-type(3) .social-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

#geeks-footer .column:nth-of-type(3) .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

#geeks-footer .column:nth-of-type(3) .social-links a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* =========   MQ   ========== */
/*MARK: -MQ */
/* MARK: ---0-576 */
@media only screen and (max-width: 576px) {
    :root {
        --footer-height: 500px;
    }

    #geeks-nav .nav-upper-items li {
        margin: 0 5px;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(1) {
        margin-right: 15px !important;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(2) {
        margin-left: 15px !important;
    }

    #geeks-nav .submenu {
        background-size: 50%, 100%;
    }

    #geeks-nav .submenu a {
        font-size: 1rem;
    }

    #geeks-nav .submenu .submenu-column-container {
        justify-content: flex-start;
    }

    #geeks-nav .submenu span.start-here {
        font-size: 1.4rem;
    }

    #geeks-nav .submenu .start-here a {
        font-size: 1.4rem;
    }

    #geeks-nav .submenu-column-container .headline {
        font-size: 1.3rem;
    }

    /* disable default style on touch  */
    #geeks-nav .submenu-column-container .headline,
    #geeks-nav .submenu-column-container .headline span {
        -webkit-tap-highlight-color: transparent;
    }

    #justified-headline h1 .row span,
    #justified-headline h2 .row span {
        line-height: 14vw !important;
    }

    h1.is-h2 {
        font-size: 30px;
    }

    #geeks-footer .second-column-container {
        padding-left: 0;
    }

    /* let the footer size to its content on mobile */
    .geeks-footer-offset {
        height: 0;
    }
}

/*MARK: ---0-800 */
@media only screen and (max-width: 800px) {
    #geeks-footer .column:nth-of-type(3) .column-links {
        flex-direction: column !important;
        padding-left: 0;
    }
}


/* MARK: ----0-980 */
@media screen and (max-width: 979px) {
    #geeks-nav {
        --topNav-height: 36px;
    }

    #geeks-nav .main-menu {
        display: none;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(1) {
        margin-left: 0 !important;
        margin-right: 30px;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(2) {
        margin-right: 0 !important;
        margin-left: 30px;
    }

    /* Submenu */
    #geeks-nav .submenu {
        min-height: calc(100vh - var(--topNav-height));
        top: var(--topNav-height);
        padding-top: 4vh;
        background-position: 95% 150%;
        position: fixed;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4vh;
        max-height: calc(100vh - var(--topNav-height));
    }

    /* Text general */
    #geeks-nav .submenu-column-container .headline {
        margin-top: 0.1vh;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 1;
        transition: color 0.2s;
        line-height: 1.05;
    }

    #geeks-nav .submenu-column-container .headline:hover {
        color: #fff;
    }

    #geeks-nav .submenu .submenu-column:first-child .submenu-upper .headline {
        margin-top: 0;
    }

    #geeks-nav .submenu-column-container .headline .plus {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        position: relative;
        top: -1px;
        left: -4px;
        transform: rotate(-45deg);
        transform-origin: 50% 50%;
        font-size: 0;
        color: transparent;
        overflow: hidden;
    }

    #geeks-nav .submenu-column li {
        opacity: 1;
    }

    #geeks-nav .submenu a {
        transition: none;
        font-size: 1rem;
    }

    /*  Text on top */
    #geeks-nav .submenu span.start-here {
        font-size: 1.4rem;
        text-align: left;
        margin-top: 4vh;
        margin-bottom: 4vh;
    }

    #geeks-nav .submenu .start-here a {
        font-size: 1.4rem;
    }
    #geeks-nav .submenu-column-container .headline a {
        line-height: 1.05;
        display: inline-block;
    }
    #geeks-nav .submenu .submenu-column-container a {
    font-size: 1.1rem;
    line-height: 1.45;
    margin-left: 4px;
    }

    /*  Colums */
    #geeks-nav .submenu .submenu-container {
        height: auto;
        min-height: calc(100vh - var(--topNav-height));
    }

    #geeks-nav .submenu .submenu-column-container {
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 1vh;
        margin-left: 12px;
        height: auto;
    }

    #geeks-nav .submenu .submenu-column {
        margin-top: 0vh;
        clip-path: unset;
        padding-right: 0px;
    }

    #geeks-nav .submenu .submenu-upper {
        height: auto;
        min-height: auto;
    }

    #geeks-nav .submenu .submenu-lower {
        margin-top: 0;
    }

    #geeks-nav .submenu .submenu-upper-links,
    #geeks-nav .submenu .submenu-lower-links {
        height: 0;
        overflow: hidden;
        padding-left: 14px;
    }

    /* justified text */
    .intro-headline {
        width: 90%;
    }

    #justified-headline {
        line-height: 1.4 !important;
        width: 100%;
    }

    #justified-headline h1 {
        font-size: 10vw;
    }

    #justified-headline h2 {
        font-size: 4.3vw;
    }

    #justified-headline h1 .row span,
    #justified-headline h2 .row span {
        line-height: min(14vw, 120px);
    }

    /* footer */
    :root {
        /* Was 440px, then 320px - column 1 and two headlines are hidden at
           this width (less content), so the old values left extra empty
           space above/below the centered content. */
        --footer-height: 260px;
    }

    #geeks-footer {
        padding-top: 6px;
        padding-bottom: 6px;
        background-position-x: 95%;
        background-size: 160px;
    }

    #geeks-footer .column:nth-of-type(1) {
        display: none;
    }

    #geeks-footer .footer-container {
        align-items: center;
        flex-direction: column;
        padding-bottom: 0px;
    }

    #geeks-footer .column {
        max-width: 85vw;
        width: 85vw;
        margin-top: 12px;
    }

    #geeks-footer .column:nth-of-type(2) .headline,
    #geeks-footer .column:nth-of-type(3) .headline {
        display: none;
    }

    /*#geeks-footer .column .headline {
        font-size: 1.5rem;
        padding-bottom: 15px;
        color: var(--color-orange);
    }*/

    #geeks-footer .column h4 {
        font-size: 1.1rem;
    }

    #geeks-footer .column .headline {
        padding-bottom: 16px;
    }

    #geeks-footer .column:nth-of-type(1) .icon-quote-left {
        font-size: 1.5rem;
    }

    #geeks-footer .column:nth-of-type(1) blockquote {
        font-size: 0.8rem;
    }

    #geeks-footer .column:nth-of-type(1) figcaption {
        margin-top: 10px;
    }

    #geeks-footer .second-column-container {
        flex-direction: row;
    }

    #geeks-footer .second-column-container .lower {
        margin-top: 0;
        margin-left: auto;
    }

    #geeks-footer .second-column-container .upper,
    #geeks-footer .second-column-container .lower {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    #geeks-footer .second-column-container .right-side {
        margin-left: 0;
    }

    #geeks-footer .victoria-address > span:not(.victoria-address-mobile),
    #geeks-footer .victoria-address sup,
    #geeks-footer .victoria-address br {
        display: none;
    }

    #geeks-footer .victoria-address .victoria-address-mobile {
        display: inline;
        font-size: 0.95rem;
        color: var(--color-darkGray) !important;
        padding: 0;
    }

    #geeks-footer .column:nth-of-type(3) .column-links {
        flex-direction: column;
        justify-content: space-between;
    }

    #geeks-footer .column:nth-of-type(3) .social-links {
        display: flex;
        justify-content: flex-start;
        gap: 14px;
    }

    #geeks-footer .column:nth-of-type(3) .social-links a span {
        font-size: 1.1rem;
        padding: 10px;
    }

    #geeks-footer .column:nth-of-type(3) hr {
        margin: 12px 0 12px 0;
        border-color: var(--color-orange);
    }

    #geeks-footer .column:nth-of-type(3) .column-links a:not(span) {
        font-size: 1rem;
        padding-right: 0;
        padding-bottom: 8px;
    }

    #geeks-footer .column:nth-of-type(3) .column-links a {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    #geeks-footer .footer-icon {
        width: 22px;
        height: 22px;
    }
}

/* MARK: ---980-1024 Nav Narrow */
@media screen and (max-width: 1024px) and (min-width: 980px) {
    #geeks-nav {
        --topNav-height: 36px;
    }

    #geeks-nav .main-menu {
        display: none;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(1) {
        margin-left: 0 !important;
        margin-right: 30px;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(2) {
        margin-right: 0 !important;
        margin-left: 30px;
    }

    #geeks-nav .submenu {
        min-height: calc(100vh - var(--topNav-height));
        top: var(--topNav-height);
        padding-top: 4vh;
        background-position: 95% 150%;
        position: fixed;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4vh;
        max-height: calc(100vh - var(--topNav-height));
    }

    #geeks-nav .submenu-column-container .headline {
        margin-top: 0.1vh;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 1;
        transition: color 0.2s;
        line-height: 1.05;
    }

    #geeks-nav .submenu-column-container .headline:hover {
        color: #fff;
    }

    #geeks-nav .submenu .submenu-column:first-child .submenu-upper .headline {
        margin-top: 0;
    }

    #geeks-nav .submenu-column-container .headline .plus {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        position: relative;
        top: -1px;
        left: -4px;
        transform: rotate(-45deg);
        transform-origin: 50% 50%;
        font-size: 0;
        color: transparent;
        overflow: hidden;
    }

    #geeks-nav .submenu-column li {
        opacity: 1;
    }

    #geeks-nav .submenu a {
        transition: none;
        font-size: 1rem;
    }

    #geeks-nav .submenu span.start-here {
        font-size: 1.4rem;
        text-align: left;
        margin-top: 4vh;
        margin-bottom: 4vh;
    }

    #geeks-nav .submenu .start-here a {
        font-size: 1.4rem;
    }

    #geeks-nav .submenu-column-container .headline a {
        line-height: 1.05;
        display: inline-block;
    }

    #geeks-nav .submenu .submenu-column-container a {
        font-size: 1.1rem;
        line-height: 1.45;
        margin-left: 4px;
    }

    #geeks-nav .submenu .submenu-container {
        height: auto;
        min-height: calc(100vh - var(--topNav-height));
    }

    #geeks-nav .submenu .submenu-column-container {
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 1vh;
        margin-left: 12px;
        height: auto;
    }

    #geeks-nav .submenu .submenu-column {
        margin-top: 0;
        clip-path: unset;
        padding-right: 0;
    }

    #geeks-nav .submenu .submenu-upper {
        height: auto;
        min-height: auto;
    }

    #geeks-nav .submenu .submenu-lower {
        margin-top: 0;
    }

    #geeks-nav .submenu .submenu-upper-links,
    #geeks-nav .submenu .submenu-lower-links {
        height: 0;
        overflow: hidden;
        padding-left: 14px;
    }
}

/*MARK: ---0-576 Fix */
@media only screen and (max-width: 577px) and (min-width: 0px) {
    .intro-headline {
        width: 80vw;
    }

    .intro-headline .paragraf-container p {
        font-size: 0.9rem;
        margin-top: 0;
    }

    #geeks-footer .second-column-container h4 {
        font-size: 1rem;
    }

    #geeks-footer .second-column-container span {
        font-size: 0.9rem;
    }

    #geeks-footer .second-column-container {
        flex-direction: column;
    }

    #geeks-footer .second-column-container .lower {
        padding-top: 16px;
        margin-left: 0;
    }

    #geeks-footer .second-column-container .icon {
        font-size: 1.5rem;
    }

    #geeks-footer .column:nth-of-type(3) .social-links a span {
        font-size: 1.1rem;
        padding: 10px;
    }
}

/* MARK: ----1025-1250 */
@media screen and (max-width: 1250px) and (min-width: 1025px) {
    #geeks-nav .submenu {
        padding-top: 10vh;
    }

    #geeks-nav .submenu .submenu-column-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: 0px;
    }

    #geeks-nav .submenu .submenu-column {
        width: auto;
        flex: 1 1 0;
        margin-top: 5vh;
    }

    #geeks-nav .submenu span.start-here {
        margin-top: 0px;
    }
    #geeks-nav .submenu .submenu-column-container a {
    font-size: 1.2rem;
    line-height: 2.5;
}
}
/* MARK: ----0-1250 */
@media screen and (max-width: 1250px) {
   /* #geeks-nav {
        --topNav-height: 36px;
    } */

     /* #geeks-nav .nav-upper-items {
        aheight: var(--topNav-height);
        justify-content: center;
        apadding-right: 0px;
    }*/

     /* #geeks-nav .main-menu {
        margin-right: 20px;
    }*/

    #geeks-nav .nav-upper-items li a span {
        display: none;
    }
    #geeks-nav .nav-lower ul {
    margin: 0 0 1.5em 0em;
}

     /* #geeks-nav .nav-upper-items > li:nth-of-type(1) {
        margin-left: 50px;
    }*/

    /*  #geeks-nav .nav-upper-items > li:nth-of-type(2) {
        margin-right: auto;
    }*/
}


/*MARK: ---1650+ */
@media (min-width: 1650px) {
    #geeks-nav .submenu .headline {
        afont-size: 1.5rem;
    }

    #geeks-nav .submenu .submenu-container {
        width: 84vw;
    }

    .intro-headline {
        max-width: 35%;
    }

    #justified-headline {
        width: unset;
        line-height: 1.4;
    }

    #justified-headline h1 {
        font-size: 4vw;
    }

    #justified-headline h2 {
        font-size: 2.3vw;
    }
}

/* MARK: ----Fixing */
/* CUSTOM */
@media only screen and (max-width: 800px) {
    :root {
        --footer-height: 470px;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --footer-height: 470px;
    }
}

@media screen and (max-height: 710px) {
    #geeks-nav .submenu .submenu-column-container a {
        line-height: 1.7;
    }

    #geeks-nav .submenu .submenu-lower {
        amargin-top: 5vh;
    }
}

@media screen and (max-height: 770px) and (max-width: 979px) and (pointer: fine) {
    #geeks-nav .submenu {
        aposition: absolute;
        min-height: 100vh;
        top: var(--topNav-height);
    }

    #geeks-nav .submenu-column-container .headline {
        font-size: 1.2rem;
        margin-top: 1.5vh;
    }

    #geeks-nav .submenu a {
        font-size: 1.1rem;
    }

    #geeks-nav .submenu .submenu-column-container {
        justify-content: flex-start;
    }
}

/* 980 - 1300 */
@media screen and (max-width: 1300px) and (min-width: 980px) {
    #geeks-nav .submenu .headline {
        font-size: 1.1rem;
        margin-bottom: 2vh;
        letter-spacing: 1px;
    }

    #geeks-nav .submenu a {
        font-size: 0.9rem;
    }
}

/* 1301  -  1649 */
@media screen and (max-width: 1649px) and (min-width: 1301px) {
    #geeks-nav .submenu a {
        font-size: 1rem;
    }
}

/* MARK: -Global Footer CTA */
.section4.footer-cta-global {
    position: relative;
    z-index: 2;
    background-color: #000000;
    background-image: none;
    overflow: visible;
}

/* Same fixed-reveal trick as the homepage's own footer, applied to this
   CTA on every OTHER page: a spacer (.footer-cta-offset, added in
   footer.php) reserves scroll room, the CTA sits pinned to the bottom the
   whole time at a very low z-index, and only becomes visible once
   #geeks-footer (which now scrolls normally, in front of it, on every
   page including home - see footer.php) has fully passed. Must come
   after the base rule above to win the cascade. */
.section4.footer-cta-global {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--footer-cta-height);
    /* Negative z-index so this stays hidden below normal page content
       until scrolled to - relies on body having its OWN stacking context
       (position: relative + z-index: 0, set in style.css) so it properly
       contains this instead of ambiguously intercepting clicks itself. */
    z-index: -2;
    overflow: hidden;
    /* .kt-row-column-wrap is only as tall as its own content and was
       sitting at the top of this fixed-height box by default, leaving a
       block of empty space below it. Center it instead. */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* On the homepage (and home-celia) the footer info now renders as real
   content ahead of the CTA in the DOM (see footer-info.php), so the CTA
   just uses the universal fixed-reveal rule above like every other page -
   real content naturally covers its negative z-index until scrolled past,
   no extra z-index handling needed. Only the hover-glow clipping needs a
   home-specific override: the base rule's overflow:hidden clips the
   button's glow flat at the edge instead of letting it fade. */
.home .section4.footer-cta-global,
.page-template-celia-home .section4.footer-cta-global {
    overflow: visible;
}

.kb-row-layout-id952_f556bc-cb > .kt-row-column-wrap,
.section4.footer-cta-global > .kt-row-column-wrap {
    column-gap: var(--global-kb-gap-lg, 4rem);
    padding-top: var(--global-kb-spacing-2xl, 4.5rem);
    padding-bottom: var(--global-kb-spacing-xl, 4rem);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    justify-items: center;
}

/* No top/bottom padding on the fixed-reveal version (every page) - the
   section is already flex-centered and the footer info above it has its
   own trailing space, so extra padding here just adds redundant gap. */
.section4.footer-cta-global > .kt-row-column-wrap {
    padding-top: 0;
    padding-bottom: 0;
}

.section4.footer-cta-global .intro {
    color: #fff;
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

.section4.footer-cta-global .sparkle-button-inner {
    position: relative;
    z-index: 1;
}

.section4.footer-cta-global .sparkle-button-container {
    --transition: 0.25s;
    --spark: 1.8s;
    --active: 0;
    --button-bg: hsl(0 0% 14%);
    --glow: hsl(270 97% 60% / 0.75);
    --cut: 0.1em;
    --bg: radial-gradient(
        40% 50% at center 100%,
        hsl(270 calc(var(--active) * 97%) 72% / var(--active)),
        transparent
    ),
    radial-gradient(
        80% 100% at center 120%,
        hsl(260 calc(var(--active) * 97%) 70% / var(--active)),
        transparent
    ),
    hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--global-heading-font-family);
    overflow: visible;
    isolation: isolate;
    transition: background var(--transition);
    background: transparent;
    min-height: 180px;
    padding: clamp(24px, 4vw, 48px) 0 clamp(28px, 4.5vw, 56px);
}

.section4.footer-cta-global .arrowText {
    position: absolute;
    top: -80px;
    right: -140px;
    display: flex;
    opacity: 0.7;
}

.section4.footer-cta-global .arrowText img {
    width: 50px;
}

.section4.footer-cta-global .arrowText {
    margin-left: 12px;
    position: relative;
    top: -20px;
    font-size: 1.7rem;
    font-family: "Caveat", cursive;
    color: rgb(255, 255, 255);
    line-height: 1.2;
    pointer-events: none;
    transition: opacity 0.3s;
}

.section4.footer-cta-global .arrowText .text {
    position: relative;
    left: 10px;
    top: -20px;
    scale: 1;
    transition: scale 0.3s;
}

.section4.footer-cta-global .arrowText.activ {
    opacity: 1;
}

.section4.footer-cta-global .sparkle-button {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    background: var(--button-bg) !important;
    background-image: none !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    text-transform: none !important;
    line-height: 1 !important;
    border: 0 !important;
    cursor: pointer;
    padding: 0.9em 1.5em !important;
    display: flex;
    align-items: center;
    gap: 0.25em;
    white-space: nowrap;
    border-radius: 100px !important;
    position: relative;
    box-shadow: 0 0 calc(var(--active) * 3.5em) calc(var(--active) * 1.6em) var(--glow),
    0 0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset !important;
    transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
    scale: calc(1 + (var(--active) * 0.1));
    transform-origin: center;
    will-change: transform;
    letter-spacing: normal !important;
    overflow: visible !important;
}

.section4.footer-cta-global .sparkle-button:active {
    scale: 1;
}

.section4.footer-cta-global .sparkle-button-container svg {
    overflow: visible !important;
}

.section4.footer-cta-global .sparkle-button .sparkle path {
    color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
    transform-box: fill-box;
    transform-origin: center;
    fill: currentColor;
    stroke: currentColor;
    animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
    animation-duration: 0.6s;
    transition: color var(--transition);
}

.section4.footer-cta-global .sparkle-button:is(:hover, :focus-visible) path {
    animation-name: gotbCtaBounce;
}

@keyframes gotbCtaBounce {
    35%,
    65% {
        scale: var(--scale);
    }
}

.section4.footer-cta-global .sparkle-button .sparkle path:nth-of-type(1) {
    --scale: 0.5;
    --delay: 0.1;
    --base: 40%;
}

.section4.footer-cta-global .sparkle-button .sparkle path:nth-of-type(2) {
    --scale: 1.5;
    --delay: 0.2;
    --base: 20%;
}

.section4.footer-cta-global .sparkle-button .sparkle path:nth-of-type(3) {
    --scale: 2.5;
    --delay: 0.35;
    --base: 30%;
}

.section4.footer-cta-global .sparkle-button:before {
    content: "";
    position: absolute;
    inset: -0.25em;
    z-index: -1;
    border: 0.25em solid rgba(172, 172, 172, 0.1);
    border-radius: 100px;
    opacity: var(--active, 0);
    transition: opacity var(--transition);
}

.section4.footer-cta-global .sparkle-button .spark {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    rotate: 0deg;
    overflow: hidden;
    mask: linear-gradient(white, transparent 50%);
    animation: gotbCtaFlip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes gotbCtaFlip {
    to {
        rotate: 360deg;
    }
}

.section4.footer-cta-global .sparkle-button .spark:before {
    content: "";
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    top: 0%;
    left: 50%;
    z-index: -1;
    translate: -50% -15%;
    rotate: 0;
    transform: rotate(-90deg);
    opacity: calc((var(--active)) + 0.4);
    background: conic-gradient(
        from 0deg,
        transparent 0 340deg,
        rgb(255, 255, 255) 360deg
    );
    transition: opacity var(--transition);
    animation: gotbCtaRotate var(--spark) linear infinite both;
}

.section4.footer-cta-global .sparkle-button .spark:after {
    content: "";
    position: absolute;
    inset: var(--cut);
    border-radius: 100px;
}

.section4.footer-cta-global .sparkle-button .text {
    translate: 2% -6%;
    margin-left: -10px;
    letter-spacing: 0.01ch;
    text-transform: none !important;
    background: linear-gradient(
        90deg,
        hsl(0 0% calc((var(--active) * 100%) + 65%)),
        hsl(0 0% calc((var(--active) * 100%) + 26%))
    );
    -webkit-background-clip: text;
    color: transparent;
    transition: background var(--transition);
    font-family: inherit;
}

.section4.footer-cta-global .sparkle-button svg {
    inline-size: 1.25em;
    translate: -25% -5%;
}

.section4.footer-cta-global .sparkle-button-container .backdrop {
    position: absolute;
    inset: var(--cut);
    background: var(--button-bg);
    border-radius: 100px;
    transition: background var(--transition);
}

.section4.footer-cta-global .bodydrop {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(260px, 50vw, 560px);
    height: clamp(260px, 50vw, 560px);
    transform: translate(-50%, -45%);
    background: radial-gradient(
        circle,
        hsl(270 97% 60% / 0.55) 0%,
        hsl(270 97% 60% / 0.35) 35%,
        hsl(270 97% 60% / 0.08) 55%,
        transparent 72%
    );
    opacity: var(--active, 0);
    filter: blur(20px);
    transition: opacity var(--transition);
    z-index: 0;
    pointer-events: none;
}

@keyframes gotbCtaRotate {
    to {
        transform: rotate(90deg);
    }
}

@supports (selector(:has(*))) {
    .section4.footer-cta-global .sparkle-button-container:has(.sparkle-button:is(:hover, :focus-visible)) {
        --active: 1;
        --play-state: running;
    }
}

.section4.footer-cta-global .sparkle-button:is(:hover, :focus-visible) {
    --active: 1;
    --play-state: running;
    box-shadow: 0 0 calc(var(--active) * 3.5em) calc(var(--active) * 1.6em) hsl(260 97% 61% / 0.5),
    0 0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset !important;
}

.section4.footer-cta-global .sparkle-button-container.is-active {
    --active: 1;
    --play-state: running;
}

.section4.footer-cta-global .particle-pen.activ {
    --active: 1;
    --play-state: running;
}

.section4.footer-cta-global .particle-pen {
    width: 350px;
    height: 350px;
    position: absolute;
    top: calc(50% + 200px);
    left: 50%;
    translate: -50% -50%;
    pointer-events: none;
    z-index: -1;
    opacity: var(--active, 0);
    transition: opacity var(--transition);
}

.section4.footer-cta-global .particle {
    fill: white;
    width: calc(var(--size, 0.25) * 1rem);
    aspect-ratio: 1;
    position: absolute;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
    opacity: var(--alpha, 1);
    animation: gotbCtaFloatOut calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
    transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
    z-index: -1;
    animation-play-state: var(--play-state, paused);
}

.section4.footer-cta-global .particle:nth-of-type(even) {
    animation-direction: reverse;
}

@keyframes gotbCtaFloatOut {
    to {
        rotate: 360deg;
    }
}

@media only screen and (max-width: 979px) {
    .section4.footer-cta-global .sparkle-button-container {
        padding: 0;
        min-height: 0;
    }

    .section4.footer-cta-global .sparkle-button {
        padding: 0.7em 1.2em !important;
        font-size: 1.2rem !important;
    }

    .section4.footer-cta-global .arrowText {
        left: 8px;
        font-size: 1.2rem;
    }

    .section4.footer-cta-global .arrowText img {
        width: 36px;
    }

    .section4.footer-cta-global .arrowText .text {
        top: -10px;
    }
}

@media (max-width: 767px) {
    .kb-row-layout-id952_f556bc-cb > .kt-row-column-wrap,
    .section4.footer-cta-global > .kt-row-column-wrap {
        padding-top: var(--global-kb-spacing-xl, 3rem);
        padding-bottom: var(--global-kb-spacing-lg, 2.5rem);
    }
}

/* MARK: -Nav Mobile Behavior Through 1024 */
@media (max-width: 1024px) {
    #geeks-nav .nav-upper {
        min-height: 54px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
    }

    #geeks-nav .nav-upper .nav-logo {
        display: block !important;
        position: absolute !important;
        top: auto !important;
        bottom: -12px !important;
        left: 10px !important;
        transform: none !important;
        width: auto !important;
        z-index: 1000 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #geeks-nav .nav-upper .nav-logo > img,
    #geeks-nav .nav-upper .nav-logo img {
        width: 55px !important;
        -webkit-filter: grayscale(100%) !important;
        filter: grayscale(100%) !important;
    }

    #geeks-nav .nav-upper .nav-mobile-consultation {
        display: inline-block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: #fff !important;
        font-family: "Caveat", cursive !important;
        font-size: 16px !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        z-index: 1001 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .nav-hamburger-logo .cloud-cartoon,
    .nav-hamburger .stamp .cloud-cartoon,
    #geeks-nav .nav-hamburger .cloud-cartoon,
    .nav-hamburger-logo .cloud-cartoon img,
    .nav-hamburger .stamp .cloud-cartoon img {
        display: none !important;
        transform: none !important;
    }
}