:root {
  /* General */
  --boxed: 85rem;

  /* Dynamic height */
  --dynamic-height: calc(var(--vh, 1vh) * 100);
  --dynamic-header-height: --dynamic-header-height;
  --header-height: 6.70606rem;

  /* Colors */
  --bs-primary: #ce1d3f;
  --accent-color: #ce1d3f;
  --black: #000;
  --black-rgb: rgb(0, 0, 0, 100%);
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --gray: #6e6e6e;
  --bs-secondary-rgb: 175, 175, 175;
  /* --bs-secondary-rgb: 137, 137, 137; */
  --bg-gray: #0f0f0f;

  /* Bootstrap */
  --bs-body-font-family: 'Red-Hat';
  --bs-body-font-size: 1rem;
  --bs-border-color: rgb(255 255 255 / 18%);
  --bs-border-color2: rgb(255 255 255 / 10%);
  --bs-body-color: #fff;
  --bs-body-bg: #000;

  /* Applied Colors */
  --footer-bg: linear-gradient(180deg, #0A0824 0%, #06041B 100%);

  /* Font Family */
  --h-font: 'Unbounded';
  --btn-font: 'Unbounded';

  /* Font size */
  --text-xs: 0.875rem;
  --text-sm: 1.25rem;
  --text-md: 1.5rem;
  --text-lg: 1.75rem;
  --text-xl: 2rem;
  --text-xxl: 2.5rem;
  --text-xxxl: 3rem;
  --text-extra: 10rem;

  --heading-xl: 4rem;
  --heading-xxl: 5.5rem;

  /* Transition */
  --transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}


/* ------------------------ FONTS ----------------------- */
@font-face {
  font-family: 'Unbounded';
  src: url(../fonts/Unbounded-VariableFont_wght.woff2);
  font-display: swap;
}
@font-face {
  font-family: 'Red-Hat';
  src: url(../fonts/RedHatDisplay-VariableFont_wght.woff2);
  font-display: swap;
}


/* ---------------------- TYPOGRAPHY -------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--h-font);
}

h1 {
    font-size: var(--heading-xxl);
}
h2 {
    font-size: var(--heading-xl);
}
a {
    text-decoration: none;
    color: var(--white);
    transition: var(--transition);
}

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

p:last-of-type {
    margin-bottom: 0;
}
span {
    display: inline-block;
    line-height: 1.3;
}

html {
    font-size: 0.95238vw;
    scroll-behavior: auto;
}

body {
    overflow-x: clip;
}

main {
    padding-top: var(--header-height);
    overflow-x: clip;
}

.container {
    max-width: 65%;
}
.container-fluid {
    max-width: calc(100% - 4rem);
}
.container .builder-section .container, 
.container .builder-section .container-fluid,
form .container, 
form .container-fluid {
    padding: 0;
    max-width: 100%;
}

img {
    max-width: 100%;
}
.module-image.w-100 img {
    width: 100%;
}
.contain {
    object-fit: contain;
}

/* Customs */
.tooltip {
    --bs-tooltip-color: #000;
    --bs-tooltip-bg: #fff;
    --bs-tooltip-font-size: 0.775rem;
    pointer-events: none;
    z-index: 9999;
}

.glass-border {
    position: relative;
    --bc-1: var(--white);
    --bc-2: var(--bs-primary);
    --bw: 1.5px;
}
.glass-border:before,
.glass-border:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: var(--bw) solid var(--bc-1);
    mask-image: linear-gradient(135deg, #ffffff73, hsla(0, 0%, 100%, 0) 50%);
}
.glass-border:after {
    border: var(--bw) solid var(--bc-2);
    mask-image: linear-gradient(135deg, hsla(0, 0%, 100%, 0) 50%, #ffffff4a);
}

.backdrop-blur {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.gradient-text {
    display: flex;
    justify-content: center;
}
.gradient-text > * {
    --x: 50%;
    --y: 50%;
    --width: 50%;
    background: radial-gradient(50% 100% at 50% 50%, #fff 30%, hsla(0, 0%, 100%, .5) 100%);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h-font,
.h-font > * {
    font-family: var(--h-font);
}

.text-xs,
.text-xs > * {
    font-size: var(--text-xs);
}
.text-sm,
.text-sm > * {
    font-size: var(--text-sm);
}
.text-md,
.text-md > * {
    font-size: var(--text-md);
}
.text-lg,
.text-lg > * {
    font-size: var(--text-lg);
    line-height: 1.3em;
}
.text-xl,
.text-xl > * {
    font-size: var(--text-xl);
    line-height: 1.3em;
}
.text-xxl,
.text-xxl > * {
    font-size: var(--text-xxl);
    line-height: 1.3em;
}
.text-xxxl,
.text-xxxl > * {
    font-size: var(--text-xxxl);
    line-height: 1.1em;
}
.text-extra,
.text-extra > * {
    font-size: var(--text-extra);
}

.transition {
    transition: var(--transition);
}

.accent strong {
    color: var(--bs-primary);
}

.mt-6 {
    margin-top: 6rem;
}
.mb-6 {
    margin-bottom: 6rem;
}
.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.pt-6 {
    padding-top: 6rem;
}
.pb-6 {
    padding-bottom: 6rem;
}
.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

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


/* Buttons */
.btn {
    --bs-btn-font-size: var(--text-xs);
    --bs-btn-font-family: var(--h-font);
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    border: none;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-hover-bg: #ff1472;
    --color-outline: #ff145a40;
    box-shadow: 0 0 0.2em 0 var(--bs-btn-bg);
}
.btn-secondary {
    --bs-btn-bg: var(--bg-gray);
    --bs-btn-hover-bg: #ff1472;
    --color-outline: #ff145a40;
    box-shadow: 0 0 0.2em 0 var(--bs-btn-bg);
}
.btn-primary:hover,
.btn-secondary:hover {
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 1em 0 var(--bs-btn-bg);
  animation: ripple 1s linear infinite, colorize 1s infinite;
  transition: 0.5s;
}

@keyframes colorize {
  0% {
    background: var(--bs-btn-bg);
  }
  50% {
    background: var(--bs-btn-hover-bg);
  }
  100% {
    background: var(--bs-btn-bg);
  }
}

@keyframes ripple {
  0% {
    outline: 0em solid transparent;
    outline-offset: -0.1em;
  }
  50% {
    outline: 0.2em solid var(--color-outline);
    outline-offset: 0.2em;
  }
  100% {
    outline: 0.4em solid transparent;
    outline-offset: 0.4em;
  }
}









/* Loader */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    z-index: 9999;
    /* display: none; */
}
.loader-inner {
    width: 100%;
}
.loader-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #000);
}
.loader-logo {
    width: 10rem;
    border-radius: 13.5%;
    border-bottom-right-radius: 0;
    box-shadow: 0 0 5px rgb(206 30 64), 0 0 25px rgb(206 30 64), 0 0 50px rgb(206 30 64), 0 0 150px rgb(206 30 64);
    transform-origin: bottom right;
    opacity: 0;
}

.loader-wrapper-simple {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    z-index: 9999;
    /* display: none; */
}



/* ----------- Header ------------ */
.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 0;
    z-index: 9;
}
.header-inner .left {
    display: flex;
    align-items: center;
    --b: 0.2rem;
    --l: #ffffff00 0%, #ff3b3b20, #2b8dca40, #ff373760, #ce1d3f85;
    gap: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
}

.header-inner .left:hover {
    animation-play-state: unset;
}
.header-inner .left .inner {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
}
.navbar-brand {
    position: relative;
    font-size: 0;
    width: 3rem;
    flex-shrink: 0;
    border-radius: 13.5%;
    border-bottom-right-radius: 0;
    overflow: hidden;
}
.navbar-brand img {
    width: 100%;
    transition: var(--transition);
}
.navbar-brand:hover > img {
    opacity: 0.4;
}
.navbar-brand .team {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    filter: brightness(1.2);
    transform: translateY(100%);
    transition: var(--transition);
}
.navbar-brand:hover .team {
    opacity: 1;
    transform: translateY(0);
}
.navbar-brand .team img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    opacity: 0;
}
.navbar-brand .team img.show {
    opacity: 1;
}
.navbar {
    --bs-navbar-color: var(--white);
    --bs-navbar-nav-link-padding-x: 0;
    --bs-navbar-padding-y: 0;
    --bs-navbar-hover-color: var(--bs-primary);
}
.navbar-menu {
    height: 100%;
}
.navbar-nav {
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-padding-y: 0;
    display: flex;
    gap: 1.5rem;
    height: 100%;
}
.nav-link {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    font-family: var(--h-font);
}
.nav-link:after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translate(-50%);
    width: 0;
    height: 1px;
    margin: 0;
    box-shadow: 0 3px 16px 1px var(--bs-primary);
    opacity: 0;
    border: none;
    transition: opacity var(--transition), width var(--transition), bottom var(--transition);
    border-radius: 0.5rem 0.5rem 0 0;
}
.nav-link:hover:after {
  opacity: 1;
  width: 100%;
}
.nav-item.active .nav-link {
  color: var(--bs-primary);
}

.header-inner .right,
.header-inner .right ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.utility-item a {
    display: flex;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    padding: .8rem;
    transition: var(--transition);
}
.utility-item .icon {
    display: flex;
}
.utility-item svg {
    height: 1.2rem;
    width: auto;
}
.utility-item svg path {
    stroke: var(--white);
}


.border-animated {
  --border-width: 1px;
  --radius: 24px;

  isolation: isolate;
  position: relative;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
}

.border-animated::before {
  content: '';
  position: absolute;
  inset: calc(var(--border-width) * -1);
  z-index: -1;
  border: inherit;
  border-radius: inherit;
  background-image: conic-gradient(from var(--angle), #381d6a00 80%, #ff9595 88%, #ff7a7a 92%, #ff0000 100%);
  background-origin: border-box;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);  
  mask: linear-gradient(black, black), linear-gradient(black, black);
  -webkit-mask-clip: content-box, border-box;  
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;  
  mask-composite: exclude;
  animation: spin 4s linear infinite;
}


@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes spin {
  to {
    --angle: 1turn;
  }
}

.special-btn {
    --l: #ffffff00 0%, #ff3b3b20, #2b8dca40, #ff373760, #ce1d3f85;
    --b: 0.2rem;
    position: relative;
    display: grid;
    place-content: center;
    border: solid var(--b) #0000;
    background: repeating-conic-gradient(from var(--a, 0deg), var(--l)) border-box;
    filter: url(#glow-0);
    color: #fff;
    padding: 1.178rem;
    border-radius: 100%;
    overflow: hidden;
    animation: a 4s linear infinite;
    transition: background 300ms, transform 200ms;
}
.button__text {
    position: absolute;
    inset: -0.1rem;
    background: var(--bs-body-bg);
    animation: text-rotation 8s linear infinite;

    > span {
        position: absolute;
        transform: rotate(calc(24deg * var(--index)));
        inset: 0;
    }
}
.button__circle {
    position: relative;
    overflow: hidden;
    background: var(--bs-body-bg);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}
.button__icon--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}

.special-btn:hover .button__icon:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}
.special-btn:hover .button__icon--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}

@keyframes text-rotation {
    to {
        rotate: -360deg;
    }
}
header .header-time-wrapper {
    padding: 0.73rem 1rem;
    border-radius: var(--bs-border-radius);
    transition: var(--transition);
}
header.fixed .header-time-wrapper {
    background: var(--black);
}


/* Homepage */
.hp-hero-section .row {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.375rem;
    min-height: calc(100vh - var(--header-height));
    padding-bottom: 2.75rem;
    padding-top: 1.75rem;
    transition: var(--transition);
}
.hp-hero-section .background {
    position: absolute;
    top: calc(var(--header-height) * -1);
    left: 0;
    width: 100%;
    height: 60%;
    z-index: -1;
    transform: rotate(180deg);
    pointer-events: none;
}
.hp-hero-section .background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hp-hero-section .big-text {
    position: relative;
    transform-origin: bottom left;
    z-index: 1;
    pointer-events: none;
}
.intro-section-inner-frame {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: var(--bs-border-radius-xl) 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl);
    height: 100%;
    min-height: 20rem;
    padding: 2.75rem;
}
.intro-section-inner-frame .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.intro-section-inner-frame .bg .video-wrapper:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgb(0 0 0 / 41%) 0%, rgba(255, 255, 255, 0) 100%);
}
.intro-section-inner-frame .bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.intro-section-inner-frame .bg .ambilight {
    width: 75%;
}
.intro-section-inner-frame .desc {
    max-width: 30rem;
}
.intro-section-social-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 0 1rem 1rem;
    box-shadow: inset 0.5rem -0.5rem 0px 1rem #000;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: var(--bs-border-radius-xl);
}
.intro-section-social-wrapper:before,
.intro-section-social-wrapper:after {
    content: '';
    position: absolute;
    top: -0.5px;
    right: 100%;
    width: 1rem;
    aspect-ratio: 1/1;
    transform: scaleX(-1) scaleY(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-1.39876e-06 0L0 32L32 32C14.3269 32 -6.26248e-07 17.6731 -1.39876e-06 0Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
}
.intro-section-social-wrapper:after {
    top: 100%;
    right: -0.5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-1.39876e-06 0L0 32L32 32C14.3269 32 -6.26248e-07 17.6731 -1.39876e-06 0Z'%3E%3C/path%3E%3C/svg%3E");
}
.intro-section-social {
    position: relative;
    display: flex;
    min-width: 14rem;
    border-radius: var(--bs-border-radius-xl);
    background: radial-gradient(circle at 0% 0%, #ffffff40 0%, #ffffff00 100%);
    backdrop-filter: blur(42px);
    -webkit-backdrop-filter: blur(42px);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: var(--transition);
    overflow: hidden;
}

.intro-section-social .social-logo {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    color: #fff;
    transition: all 0.6s ease-in-out;
}

.intro-section-social {
    width: 100%;
    aspect-ratio: 1;
}
.intro-section-social ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.intro-section-social ul li {
    position: absolute;
    padding: 0.5rem;
    text-align: right;
    background: rgba(255, 255, 255, 0.389);
    border-top: 1.5px solid rgb(255 255 255 / 30%);
    border-right: 1px solid #ffffff59;
    border-radius: 10% 13% 42% 0% / 10% 12% 75% 0%;
    box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
    transform-origin: bottom left;
    transition: all 1s ease-in-out;
}
.intro-section-social ul li::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: var(--transition);
}
.intro-section-social ul li:hover .svg {
    fill: #fff;
}

.intro-section-social ul li:first-child {
    width: 70%;
    height: 70%;
    bottom: -70%;
    left: -70%;
}
.intro-section-social ul li:first-child:before {
    background: radial-gradient(circle at 30% 107%, #ffffff 0%, #dfe3ee 5%, #8b9dc3 60%, #3b5998 90%);
}
.intro-section-social ul li:first-child:hover::before {
    opacity: 1;
}
.intro-section-social ul li:first-child:hover svg {
    filter: drop-shadow(0 0 5px #fff);
}
.intro-section-social ul li:nth-child(2) {
    width: 50%;
    height: 50%;
    bottom: -50%;
    left: -50%;
    transition-delay: 0.2s;
}
.intro-section-social ul li:nth-child(2)::before {
    background: radial-gradient(circle at 30% 107%, #E1306C 0%, #833AB4 90%);
}
.intro-section-social ul li:nth-child(2):hover::before {
    opacity: 1;
}
.intro-section-social ul li:nth-child(2):hover svg {
    filter: drop-shadow(0 0 5px #fff);
}
.intro-section-social ul li:nth-child(3) {
    width: 30%;
    height: 30%;
    bottom: -30%;
    left: -30%;
    transition-delay: 0.4s;
}
.intro-section-social ul li:nth-child(3)::before {
    background: radial-gradient(circle at 30% 107%, #2af0ea 0%, #fe2858 90%);
}
.intro-section-social ul li:nth-child(3):hover::before {
    opacity: 1;
}
.intro-section-social ul li:nth-child(3):hover svg {
    filter: drop-shadow(0 0 5px #fff);
}
.intro-section-social:hover ul li {
    bottom: -1px;
    left: -1px;
}
.intro-section-social:hover .social-logo {
    transform: translate(0, 0);
    top: 1rem;
    right: 1rem;
    font-size: 1rem;
}
.intro-section-social a {
    display: inline-flex;
    width: 1.5rem;
    aspect-ratio: 1;
}
.intro-section-social a svg {
    fill: #fff;
    width: 100%;
    height: auto;
    z-index: 1;
    transition: var(--transition);
}
.intro-section-social a svg path {
    fill: inherit;
}
.intro-section-social ul li:hover svg {
    fill: #fff;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}
.ambilight {
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(180px) opacity(0.7) saturate(300%);
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: var(--bs-border-radius-xl);
    will-change: transform;
}
.ambilight-video .video-wrapper {
    border-radius: var(--bs-border-radius-xl);
}


.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
}
.project-item {
    cursor: pointer;
}
.project-grid-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    aspect-ratio: 1/1.5;
    --padding: 1rem;
}
.project-grid-item .inner,
.project-grid-item .inner .left {
    padding: var(--padding);
}
.project-grid-item .inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    z-index: 1;
}
.project-grid-item .left {
    background-color: rgb(128 128 128 / 10%);
    transition: var(--transition);
}
.project-grid-item .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--padding) 0;
}
.project-grid-item .right .tag-item {
    writing-mode: sideways-rl;
}
.project-grid-item .project-cta {
    display: flex;
    border-radius: 100%;
}
.project-grid-item .project-cta svg {
    width: 1rem;
    height: auto;
}

.project-grid-item .mask {
    background-color: var(--bg-gray);
}
.project-grid-item .mask-inner {
    background-color: var(--bs-body-bg);
    border-bottom-right-radius: 32% !important;
}
.project-grid-image {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-grid-image img {
    width: 80%;
    object-fit: contain;
}
.project-grid-item .project-grid-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: none;
}
.project-grid-item .project-grid-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-grid-item:hover .project-grid-video {
  opacity: 1;
}
.project-grid-item:hover .left {
    transform: translateX(calc(-100% - var(--padding)));
}
.project-grid-item:hover .project-cta {
    color: var(--white) !important;
    filter: drop-shadow(0 0 5px #fff);
}


.projects-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.project-list-item {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-gray);
  padding: 1rem 1rem 1rem 2rem;
  border: 1px solid transparent;
}

.project-list-item .left {
  position: relative;
  display: grid;
  align-items: center;
  gap: 2rem;
  grid-template-columns: minmax(4rem, auto) 1fr;
  z-index: 2;
}
.project-list-item .right {
    flex-shrink: 0;
}
.project-list-item .right-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 2;
}
.project-list-item .right .project-media {
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}
.project-list-item:hover {
    z-index: 9;
}
.project-list-item:hover .project-media {
    transform: scale(2.5);
}
.project-list-item .right .project-media-inner {
  display: flex;
  position: relative;
  aspect-ratio: 4/2.5;
  max-width: 8rem;
  flex-shrink: 0;
}
.project-list-item .right .video {
  display: flex;
  position: absolute;
  justify-content: flex-end;
  left: 0;
  width: 100%;
  height: 100%;
}
.project-list-item:not(:hover) .video {
    opacity: 0;
}
.project-list-item:hover .right .video {
  transform: translateX(calc(-100% - 0.5rem));
}
.project-list-item .right .image {
  z-index: -1;
}
.project-list-item .project-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  background: var(--bs-body-bg);
  padding: 1rem;
  border-radius: 100%;
}
.project-list-item .project-cta svg {
    width: 1rem;
    height: auto;
}
.project-list-item:hover .project-cta svg {
    color: var(--white);
    filter: drop-shadow(0 0 5px var(--white));
}


.load-more-projects span {
  z-index: 2;
}
.project-list-item:hover,
.load-more-projects:hover {
  color: #fff;
}
.load-more-hidden .load-more-projects {
    display: none;
}
.all-projects-btn a {
    padding: 1rem;
    border-radius: var(--bs-border-radius-xl);
}


.hidden-project-list-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: var(--transition);
}
.hidden-project-list-items.visible {
  grid-template-rows: 1fr;
}
.hidden-project-list-items-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}
.hidden-project-list-items.visible .hidden-project-list-items-inner {
    overflow: inherit;
}
.load-more-projects {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: none;
  box-shadow: none;
}


/* Project Modal */
.project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
}
.project-modal-wrapper {
  width: 80%;
  margin: auto;
  padding-top: var(--dynamic-header-height);
}
.project-modal-scroll {
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project-modal-scroll::-webkit-scrollbar {
  display: none;
}
.project-modal-inner {
  padding: 1rem;
  background: var(--white);
  border-radius: var(--rad-md);
  overflow: hidden;
  margin-bottom: 100vh;
}
.project-modal-builder .container-fluid {
    max-width: 100%;
    padding: 0;
}

.project-modal-header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
}
.project-modal-header .project-logo {
    display: flex;
    height: 2.5rem;
    max-width: 8rem;
}
.project-modal-header .project-logo > * {
    height: 100%;
    width: auto;
}
.project-modal-header .close-btn {
    display: flex;
    align-self: flex-end;
    padding: 1rem;
    background: #f2f2f2;
    color: var(--black);
    cursor: pointer;
}
.project-modal-header .close-btn svg {
    width: 1rem;
    height: auto;
}

.project-modal .project-title-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.project-modal .project-title {
  line-height: 1.2em;
}
.project-modal .project-title-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.project-modal .project-title-inner .data {
  flex-shrink: 0;
}
.project-modal .project-status {
  flex-shrink: 0;
  padding: 1rem 2rem;
  background: #f2f2f2;
}
.project-modal .project-title {
  overflow: hidden;
}
.project-modal .row {
  padding: 0;
}


.project-modal .module-image,
.project-modal .module-video {
  display: flex;
  overflow: hidden;
}
.project-modal .module-video video {
  width: 100%;
}

.project-modal-builder {
    clip-path: inset(0% round var(--bs-border-radius-lg));
}
.project-modal-builder img,
.project-modal-builder video {
    border-radius: var(--bs-border-radius-xl);
    border: 1px solid #0000000f;
}

.project-modal-builder .project-info-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.project-modal-builder .project-info-list .module-fickle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #efefef;
    padding: 1.2rem;
    border-radius: var(--bs-border-radius-lg);
}
.project-modal-builder .project-info-list .fickle-item.fickle-title > * {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.1rem;
}
.project-modal-builder .project-info-list .fickle-text-content * {
    font-weight: 500;
}

.project-modal-builder .split-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.project-modal-builder .split-images img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.project-modal-builder .project-gallery .col-lg-6 > div {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    border-radius: var(--bs-border-radius-xl);
    background: #efefef;
}
.project-modal-builder .project-gallery .row {
    --bs-gutter-x: 1rem;
}
.project-modal-builder .project-testimonial {
    border-radius: var(--bs-border-radius-xl);
    padding: 7rem;
}
.project-modal-builder .project-testimonial .module-text {
    font-size: var(--text-xxxl);
    line-height: 100%;
}
.project-modal-builder .project-testimonial .module-fickle {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 2rem 1.5rem;
    background-color: #2e2e2e;
    padding: 3rem;
    border-radius: var(--bs-border-radius-xl);
    color: var(--white);
}
.project-modal-builder .project-testimonial .module-fickle .fickle-image {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
.project-modal-builder .project-testimonial .module-fickle .fickle-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top;
}
.project-modal-builder .project-testimonial .module-fickle .fickle-item.fickle-title > * {
    font-size: var(--text-sm);
}
.project-modal-builder .project-testimonial .module-fickle .fickle-item.fickle-subtitle > * {
    color: #b3b3b3;
}
.project-modal-builder .project-testimonial .module-fickle .fickle-content {
    grid-column: 1 / 3;
    font-size: var(--text-sm);
}

.hp-about-numbers-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    align-items: flex-start;
    position: relative;
    padding-bottom: 5rem;
}
.hp-about-numbers-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
.hp-about-numbers-back p {
    margin-bottom: 0;
    color: #202020;
}
.hp-about-numbers-front {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    overflow: hidden;
}
.hp-about-numbers-front .module-fickle {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    transition: var(--transition);
}
.hp-about-numbers-front .fickle-item.fickle-title {
    grid-column: span 3 / span 3;
    overflow: clip;
}
.hp-about-numbers-front .fickle-item.fickle-title > * {
    font-size: var(--text-xxxl);
    text-align: center;
}
.hp-about-numbers-front .fickle-image {
    grid-column: span 4 / span 4;
    grid-column-start: 5;
    grid-row: 1/2;
    aspect-ratio: 1.5129310344827587;
    pointer-events: none;
    overflow: clip;
    perspective: 70rem;
}
.hp-about-numbers-front .fickle-image:before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    height: 100%;
    transform: translate3d(0px, 0px, -87.5px) rotateY(-11.2954deg) rotateX(15deg);
    background: linear-gradient(0deg, rgb(0 0 0 / 46%) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}
.hp-about-numbers-front .fickle-image img {
    height: 100%;
    object-fit: cover;
    transform: translate3d(0px, 0px, -87.5px) rotateY(-11.2954deg) rotateX(15deg);
    border-radius: var(--bs-border-radius-2xl);
}
.hp-about-numbers-front .fickle-subtitle {
    grid-column: span 4 / span 4;
    grid-column-start: 5;
    grid-row: 1/2;
    z-index: 1;
    color: var(--bs-primary);
    font-family: unbounded;
    font-size: var(--text-extra);
    text-align: center;
    text-shadow: 0 0 5px #fff, 0 0 10px #ffffff, 0 0 15px #ff0000, 0 0 20px var(--bs-primary);
}

.hp-about-numbers-front .fickle-text-content {
    grid-column: span 3 / span 3;
    grid-column-start: 10;
    justify-self: center;
    overflow: clip;
    font-size: var(--text-sm);
    text-align: center;
    --x: 50%;
    --y: 50%;
    --width: 50%;
    background: radial-gradient(50% 100% at 50% 50%, #fff 30%, hsla(0, 0%, 100%, .5) 100%);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Homepage Testimonials */
.testimonials-section {
    padding: 8rem 0;
}
.testimonials-section .fickle-header,
.testimonials-section .fickle-item, 
.testimonials-section .fickle-item p {
    display: inline;
}
.testimonials-section .fickle-item.fickle-title {
    margin-right: 0.5rem;
}
.testimonials-section .fickle-item.fickle-title > * {
    font-size: var(--heading-xl);
    font-family: var(--h-font);
    font-weight: 400;
    line-height: 1.1em;
}
.testimonials-section .fickle-item.fickle-subtitle > * {
    font-weight: 600;
}

.testimonial-item__add .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: hue-rotate(145deg);
}
.testimonial-item__add .inner {
    height: 100%;
    padding: 2rem;
    z-index: 1;
}
.testimonial-item__add .top {
    gap: 2rem;
}
.google-rating-card__stars svg {
    width: 1.5rem;
    height: auto;
}
.testimonial-item__add .top .btn {
    background: var(--white);
    color: var(--black);
    border-radius: var(--bs-border-radius-pill);
    transition: var(--transition);
}
.testimonial-item__add .top .btn:hover {
    color: var(--white);
}



.testimonials {
    padding-top: var(--header-height);
    height: 100vh;
    /* clip-path: polygon(0% 50%, 110% 50%, 0% 50%, 0% 100%, 0% 0%); */
    display: flex;
    align-items: center;
}

.testimonials .title-wrapper {
    display: grid;
    grid-template-columns: 28rem 38rem;
    justify-content: space-between;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
}
.testimonial-grid-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* aspect-ratio: 1/1.3; */
    --padding: 2rem;
    background-color: #e3e8ea;
}
.testimonial-grid-item .inner {
    display: grid;
    grid-template-rows: auto 1fr;
    padding: var(--padding);
}
.testimonial-grid-item .rating > svg {
    width: 2rem;
    height: auto;
}
.testimonial-grid-item .rating .google-rating-card__stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.testimonial-grid-item .rating .google-rating-card__stars svg {
    width: 1.2rem;
    height: auto;
}
.testimonial-grid-item .rating .google-rating-card__stars svg path {
    fill: var(--bs-primary);
}
.testimonial-slider .slick-list {
    display: grid;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}
.testimonial-slider .testimonial-grid-item {
    margin: 0 0.75rem;
}


.slick-arrow {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 100%;
}
.slick-arrow:not(.slick-disabled) {
    cursor: pointer;
}
.slick-arrow:not(.slick-disabled):hover {
    background-color: var(--black);
}
.slick-arrow:not(.slick-disabled):hover svg {
    filter: invert();
}
.slick-arrow.slick-disabled svg {
    opacity: 0.3;
}

.testimonial-slide-progress-full {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 20rem;
    height: 2px;
    background-color: rgba(0,0,0,.3);
}
.testimonial-slide-progress-line {
    height: 2px;
    background-color: var(--black);
    border-radius: 10px;
    transition: var(--transition);
}


/* Homepage Partners */
.partners > * {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem 3rem;
    overflow: hidden;
}
.partners .gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}
.partners img {
    max-height: 3rem;
    max-width: 6rem;
    object-fit: contain;
    filter: brightness(20);
}



/* Homepage Contact */
.hp-contact-section {
    position: relative;
    min-height: 100vh;
    display: grid;
    transform: none;
    padding-top: calc(var(--header-height) + 3rem);
    overflow: hidden;
}
.hp-contact-section .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: brightness(1);
}
.hp-contact-section .bg img,
.hp-contact-section .bg video {
    object-fit: cover;
    object-position: center;
    transform-origin: center top;
    width: 100%;
    filter: brightness(1);
}
.hp-contact-section .mask-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hp-contact-section .mask-wrapper > *,
.hp-contact-section .mask-wrapper > * > * {
    width: 100%;
    height: 100%;
}
.hp-contact-section .mask-wrapper .module-code {
    position: relative;
    z-index: 1;
}
.css-rovies {
    font-size: 8rem;
    font-weight: 700;
    letter-spacing: -4.2px;
    text-anchor: middle;
    dominant-baseline: middle;
}
.hp-contact-inner {
    display: grid;
    justify-content: space-between;
    grid-template-columns: auto 35rem;
}
.hp-contact-inner .left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.hp-contact-inner .left h2 {
    line-height: 1em;
}
.hp-contact-inner .left .module-pages {
    width: 100%;
}
.hp-contact-inner .team-avatar-item:not(:hover) {
    mix-blend-mode: luminosity;
}
.hp-contact-inner .left .title {
    max-width: 46rem;
}
.hp-contact-inner .left .desc {
    max-width: 27rem;
}
.hp-contact-inner .right {
    background: #000000b0;
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-xl);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}


/* Cookie */
#cookie-banner {
    display: flex;
    position: fixed;
    opacity: 0;
    max-width: 50rem;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    gap: 5rem;
    padding: 1rem;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    background-color: rgba(15, 15, 15, 0.85);
    border-inline: 1px solid rgba(159, 161, 163, 0.225);
    border-top: 1px solid rgba(159, 161, 163, 0.225);
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
    pointer-events: none;
    transition: var(--transition);
    z-index: 9999;
}
#cookie-banner.show {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, 0);
}
#cookie-banner .left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#cookie-banner .left .cookie-logo {
    flex-shrink: 0;
    max-width: 2rem;
}


#cookie-banner .tab-content > * {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba( 245, 247, 250 , 0.7);
}
#cookie-banner .tab-content.active {
  display: block;
}

#cookie-banner.hidden {
  opacity: 0;
  transform: translate(-50%, -60%);
  pointer-events: none;
}

#cookie-banner .cookie-buttons {
    gap: 0.5rem;
}
#cookie-banner .cookie-buttons .btn {
    flex-grow: 1;
    padding: 0.4rem 0.875rem;
    justify-content: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    box-shadow: none;
    transition: var(--transition);
}

#cookie-banner .cookie-buttons .btn-secondary {
    background: #181818;
}

#cookie-reset {
    position: fixed;
    bottom: 1rem;
    left: 2rem;
    border: none;
    padding: 0.625rem;
    border-radius: 50%;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    mix-blend-mode: difference;
    opacity: 0;
    background: transparent;
    pointer-events: none;
    z-index: 1;
    transition: var(--transition);
}
#cookie-reset.active {
    opacity: 1;
    pointer-events: auto;
}
#cookie-reset svg {
    width: 100%;
    height: auto;
}

/* ********* END cookie css *********** */




/* Web Design Page */
#web-design-hero-section .title strong {
    font-weight: 500;
    color: #343434;
}
#web-design-hero-section .title > * > div,
#web-design-hero-section .title strong > div,
#web-design-hero-section .desc p > div {
    overflow: hidden;
    line-height: 100%;
}

.web-design-hero-services {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    text-align: center;
    margin-top: 5rem;
}
.web-design-hero-services .round-divider {
    position: absolute;
    height: 100%;
    clip-path: circle(0 at 50% 0);
}
.web-design-hero-services .module-text {
    position: relative;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    margin-top: 1px;
}
.web-design-hero-services .module-text:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 0;
    background: #333333;
    transition: var(--transition);
}
.web-design-hero-services .module-text:last-child:after {
    display: none;
}
.web-design-hero-services.visible .module-text:after {
    height: 100%;
}
.web-design-hero-services .module-text > * {
    overflow: hidden;
}

.web-design-video-section {
    position: relative;
    min-height: 100vh;
}
.web-design-video-section .module-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.web-design-video-section .module-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.web-design-services-inner .module-text {
    padding: 7rem 6rem 7rem 0;
    border-right: 1px solid var(--bs-border-color);
}
.web-design-services-inner {
    display: grid;
    grid-template-columns: auto 1fr;
}
.web-design-services-section .services-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    padding: 8rem 0 8rem 6rem;
}
.web-design-services-section .services-wrapper .fickle-item.fickle-title > * {
    font-size: var(--text-xl);
    font-weight: 500;
    margin-bottom: 1rem;
}
.web-design-services-section .services-wrapper .fickle-text-content {
    font-weight: 500;
}




/* Team Page */
.team-hero-list p {
    margin-bottom: 0.3rem;
    overflow: hidden;
}
.team-hero-list p:last-child {
    margin-bottom: 0;
}
#team-hero-section .desc p > div {
    overflow: hidden;
    line-height: 1.3em;
}
.team-hero-avatars {
    /* display: flex; */
    display: none;
}
.team-hero-avatars .module-gallery-inner {
    display: flex;
}
.team-hero-avatars .module-gallery-inner > * {
    max-width: 5rem;
    border-radius: 100%;
    border: 0.25rem solid var(--black);
    overflow: hidden;
    transition: var(--transition);
}
.team-hero-avatars .module-gallery-inner > *:hover {
    margin-right: 1rem;
}
.team-hero-avatars .module-gallery-inner .gallery-item:not(:first-child) {
    margin-left: -1rem;
}
.team-avatars {
    display: flex;
    align-items: flex-end;
}
.team-avatar-item {
    max-width: 5rem;
    border: 0.25rem solid var(--black);
    transition: var(--transition);
}
.team-avatar-item:not(:first-child) {
    margin-left: -1rem;
}
.team-avatar-item:hover {
    margin-right: calc(1rem - 0.25rem);
}
.team-avatar-image {
    position: relative;
    padding-top: 100%;
    border-radius: 50rem;
    overflow: hidden;
    transition: var(--transition);
}
.team-avatar-image:hover {
    padding-top: 150%;
}
.team-avatar-image img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.team-avatar-info {
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: var(--transition);
}
.team-avatar-item:hover .team-avatar-info {
    opacity: 1;
    bottom: -2rem;
}

.team-group-section {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.team-group-section .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.team-group-section .bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-s2 {
    position: relative;
}
.team-s2 .bg img {
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    transform: rotate(-180deg);
    width: 100%;
    z-index: -1;
}
.team-s2 .module-text {
    max-width: 75rem;
    margin: auto;
}
.team-s2 .logo {
    display: flex;
    justify-content: center;
    margin-top: 45vh;
}
.team-s2 .logo img {
    width: 100%;
    max-width: 13rem;
    border-radius: 13.5%;
    border-bottom-right-radius: 0;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 0.5rem;
}
.team-item {
    cursor: pointer;
}
.team-item__info {
    position: absolute;
    padding: 2rem;
    bottom: 0;
    left: 0;
    display: flex;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7));
    align-items: flex-end;
    opacity: 0;
    z-index: 3;
    transition: var(--transition);
}
.team-item:hover .team-item__info,
.team-item.active .team-item__info {
    opacity: 1;
}
.team-item .toggle-btn {
    z-index: 2;
}
.team-item.active .toggle-btn {
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 5px #fff);
}
.team-item__description {
    position: absolute;
    top: 0;
    inset: 1rem;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: var(--transition);
    padding: 1rem;
    border-radius: var(--bs-border-radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: scaleY(0);
    transition: var(--transition);
}
.team-item.active .team-item__description {
    opacity: 1;
    transform: scaleY(1);
}
.team-item__join {
    background-image: url('/uploads/team/section-bg.webp');
    background-position: bottom;
}
.team-numbers-section .fickle-item.fickle-title > * {
    font-size: var(--text-xxl);
    font-family: var(--h-font);
    font-weight: 400;
}
.team-numbers-section .fickle-text-content {
    font-weight: 500;
}

.round-divider {
    position: relative;
    border: 1px solid var(--bs-border-color2);
    border-bottom-left-radius: 8vw;
    border-bottom-right-radius: 8vw;
    border-top: none;
    height: 3vw;
    width: 100%;
    --radius: 0;
}
.round-divider.reversed {
    border-radius: 8vw 8vw 0 0;
    border-top: 1px solid var(--bs-border-color2);
    border-bottom: none;
}
.round-divider.black {
    border-color: rgb(0 0 0 / 10%);
}

.sliding-text > * {
    font-size: 9rem;
    text-wrap: nowrap;
    line-height: 1.2;
    white-space: nowrap;
}
.sliding-text a {
    text-decoration: none;
}
.sliding-text a:hover {
    color: var(--bs-primary);
}

.team-quote {
    flex-direction: column;
    padding: 3rem;
    border-radius: 1rem;
    background: #361acf;
}
.team-quote .module-fickle {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
    align-items: center;
}
.team-quote .fickle-text-content {
    flex-grow: 1;
}
.team-quote .fickle-content-align {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.team-quote .fickle-image-content {
    max-width: 4.5rem;
    border-radius: 100%;
    overflow: hidden;
}
.team-quote .fickle-image-content img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top;
}
.team-quote .fickle-title {
    font-weight: 600;
}
.team-quote .fickle-subtitle {
    font-size: var(--text-xs);
    color: rgba(var(--white-rgb), 0.6);
}
.team-quote .fickle-description-content a {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: var(--text-xs);
}
.team-quote .fickle-description-content a svg {
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 100%;
    transition: var(--transition);
}
.team-quote .fickle-description-content a:hover svg {
    background-color: #fff;
}
.team-quote .fickle-description-content a:hover svg path,
.team-quote .fickle-description-content a:hover svg line {
    stroke: var(--black);
}


/* Blog Page */
.blog-hero-inner {
    display: grid;
    grid-template-columns: auto minmax(10rem, 40rem);
    gap: 2rem;
}
.post-card-media,
.post-media {
    box-shadow: 0 0 1px #ffffff69;
}
.post-card-image {
    aspect-ratio: 4 / 3;
}
.post-card-image > * {
    display: flex;
    height: 100%;
}
.post-card:hover .post-card-image > * {
    transform: scale(1.1);
}
.post-card-media .category-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #0000008c;
    padding: 0.35rem 1rem;
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.post-card-details,
.post-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}
.post-card-details > *,
.post-details > * {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.blog-content-wrapper h2 {
    font-size: 1rem;
}
.blog-content-wrapper h3 {
    font-size: 1rem;
}
.post-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.post-author img {
    max-width: 2rem;
    aspect-ratio: 1;
    border-radius: var(--bs-border-radius-pill);
    object-fit: cover;
    object-position: top;
}
.post-content-wrapper .post-author {
    gap: 1rem;
}
.post-content-wrapper .post-author img {
    max-width: 3rem;
}


/* Article Page */
.post-media {
    box-shadow: 0 0 1px #ffffff69;
}
.post-image {
    aspect-ratio: 4 / 2;
}
.similar-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.similar-post-card {
    display: flex;
    gap: 1rem;
}
.similar-post-card .card-image {
    aspect-ratio: 1 / 1;
    max-width: 9rem;
    flex-shrink: 0;
}
.similar-post-card:hover .card-image > * {
    transform: scale(1.1);
}
.similar-post-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .5rem .5rem 1.5rem;
    background-color: var(--bg-gray);
    border: 1px solid #ffffff0f;
}
.blog-share .share-icons {
    display: flex;
    gap: .25rem;
}
.blog-share .share-icons > * {
    display: flex;
    border: 1px solid #ffffff1a;
    border-radius: var(--bs-border-radius);
}
.blog-share .share-icons svg {
    width: 2rem;
    height: auto;
    color: var(--bs-body-bg);
}
.blog-share .share-icons a .shadow {
    transition: var(--transition);
}
.blog-share .share-icons a:hover .shadow {
    filter: drop-shadow(0 0 5px #fff);
}
.blog-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.blog-navigation .btn {
    min-width: 9.1rem;
}


/* Partners Page */
#partners-hero-section {
    position: relative;
}
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
}
.partners-grid-item .inner {
    display: grid;
    grid-template-rows: auto 1fr;
}
.partners-grid-item-logo {
    aspect-ratio: 1;
    background: #f3f3f3;
    padding: 0.75rem;
    max-width: 4rem;
}
.partners-grid-item-logo > * {
    object-fit: contain;
}

.partners-grid-item .info-list svg {
    width: 1.3rem;
    height: auto;
}




/* Contact Modal */
#contactModal {
    --bs-modal-bg: #fff;
}
#contactModal.show {
    display: grid !important;
    align-items: flex-end;
}
#contactModal .modal-dialog {
    width: calc(100% - 4rem - 1.5rem);
    padding-top: var(--header-height);
    height: auto;
}
.contact-modal-form-inner .inner-row {
    display: flex;
    align-items: flex-end;
}
.contact-modal-form-inner .module-text {
    flex-shrink: 0;
}
.contact-modal-form-inner .form-group {
    margin: 0 1rem;
    width: 100%;
}
.contact-modal-form-inner .form-control {
    border-bottom: 1px solid rgba(0,0,0,.5);
    color: var(--black);
    border-radius: 0;
    text-align: center;
    padding-inline: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}
.contact-modal-form-inner .form-control:hover,
.contact-modal-form-inner .form-control:focus {
    border-color: var(--black);
}
.contact-modal-form-inner .form-control::placeholder {
    color: rgba(0,0,0,.5);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: var(--transition);
}
.contact-modal-form-inner .form-control:focus::placeholder {
    opacity: 0;
}
.contact-modal-form-inner .form-control:hover::placeholder,
.contact-modal-form-inner .form-control:focus::placeholder {
    color: var(--black);
}
.contact-modal-form-inner .textarea {
    margin: auto;
}
.contact-modal-form-inner textarea {
    min-height: auto;
    resize: none;
}
textarea::-webkit-scrollbar {
    display: none;
}
.contact-modal-form-inner .contact-form-options {
    display: flex;
}
.contact-modal-form-inner .contact-form-options label {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    background: var(--white);
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    box-shadow: 0 0 1px 1px rgba(0,0,0,.5) !important;
}
.contact-modal-form-inner .form-group > label {
    display: none;
}
.contact-modal-form-inner .contact-form-options .dot-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.1rem;
    aspect-ratio: 1;
    border-radius: 100%;
    background: var(--white);
    border: 1px solid rgba(0,0,0,.5);
}

.contact-modal-form-inner .contact-form-options .dot-label:before {
    content: '';
    position: absolute;
    width: 55%;
    aspect-ratio: 1 / 1;
    background: var(--bs-primary);
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, 0.117647) 0 0 0.8vw 0, rgba(0, 0, 0, 0.239216) 0 0.8vw 0.8vw 0;
    transition: all 0.2s;
    transform: scale(0);
}
.contact-modal-form-inner .contact-form-options .dot-label:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--bs-primary);
    border-radius: 100%;
    transform: scale(0);
    transition: var(--transition);
}
.contact-modal-form-inner .contact-form-options input:checked + label .dot-label {
    border-color: var(--bs-primary);
}
.contact-modal-form-inner .contact-form-options input:checked + label .dot-label:before {
    transform: scale(1);
}
.contact-modal-form-inner .contact-form-options input:checked + label .dot-label:after {
    background: transparent;
    transform: scale(1);
}
.contact-modal-form-inner .contact-form-options input:checked + label {
    background-color: var(--bs-primary);
    color: var(--white);
    box-shadow: 0 0 1px 1px var(--bs-primary) !important;
}

#contactModal input[type=checkbox]+.checkbox-text:before {
    border-color: var(--black);
    border-radius: 0;
}
#contactModal .form-footer {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: flex-end;
}
#contactModal .form-footer .form-group {
    margin: 0;
}
#contactModal .btn-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    box-shadow: none;
}
.field-message {
    position: absolute;
    font-size: 0.675rem;
    color: var(--bs-primary);
    bottom: 0;
    transform: translateY(120%);
    line-height: 100%;
}
.jconfirm.jconfirm-modern .jconfirm-box {
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-xl);
    border: none;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane {
    margin-bottom: 1rem;
}
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button {
    margin: 0;
    border-radius: var(--bs-border-radius-pill);
    width: 100%;
    font-size: 0.775rem;
    padding: 1.2em 2.4em;
    background: var(--bs-primary);
    color: var(--white);
}
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button:hover {
    background: var(--bs-primary);
    color: var(--white);
    filter: drop-shadow(0 0 5px #fff);
}
.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
    margin-bottom: 0;
}
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons {
    padding: 0;
}

.modal-backdrop {
    --bs-backdrop-opacity: 0.8;
}

.generic-hero .bg {
    position: absolute;
    top: calc(var(--header-height) * -1);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}
.generic-hero .bg img {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}
.generic-hero .title,
.generic-hero .fickles-wrapper,
.generic-hero .desc-wrapper {
    overflow: hidden;
}
.generic-hero .fickle-header,
.generic-hero .fickle-item,
.generic-hero .fickle-item p {
    display: inline;
}
.generic-hero .fickle-item.fickle-title > * {
    font-size: var(--heading-xl);
    font-family: var(--h-font);
    font-weight: 300;
    line-height: 1.1em;
}
.generic-hero .fickle-item.fickle-title {
    margin-right: 0.5rem;
}
.generic-hero .fickle-item.fickle-subtitle > * {
    font-weight: 500;
}

.generic-hero .round-divider {
    clip-path: circle(0 at 50% 0);
}

/* Footer */
footer {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 1.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: clip;
}
footer .menus-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 5rem;
}
.footer-menus-wrapper {
    width: 79%;
    display: flex;
    justify-content: space-between;
}
.footer-icons {
    display: grid;
    grid-template-columns: 8rem;
    gap: 1rem;
}
.footer-icons .iso {
    display: flex;
    align-items: center;
}
.footer-icons .legal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.nav-footer-link {
    font-size: var(--text-lg);
}
.nav-footer-link:hover {
    color: var(--bs-primary);
}
footer .nav-title {
    font-size: 0.675rem;
    color: #9e9e9e;
    margin-bottom: 1rem;
}
footer .footer-contacts a {
    display: flex;
    gap: 1rem;
}
footer .footer-contacts a svg {
    height: 1.5rem;
    width: 1.3rem;
    transform: translateY(0.65rem);
}
footer .copyright-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.675rem;
    text-transform: uppercase;
    color: #9e9e9e;
}
footer .copyright-wrapper ul {
    display: flex;
    gap: 2rem;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
footer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
footer .copyright-wrapper ul a {
    color: #9e9e9e;
    font-family: var(--h-font);
}
footer .copyright-wrapper ul a:hover {
    color: var(--white);
}

.footer-logo-wrapper {
    position: relative;
    overflow: hidden;
}
.footer-logo-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 500%;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 50%, transparent 3%, rgba(0, 0, 0, 1) 10%);
}


/* Forms */
.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
.form-control {
    background: 0 0;
    color: #fff;
    border: none;
    box-shadow: none;
    padding: .7rem 1rem;
    font-size: var(--text-xs);
    background: #ffffff12;
    border-radius: var(--bs-border-radius);
    transition: var(--transition);
}
.form-control:focus {
    background: #ffffff12;
    box-shadow: 0 0 1px var(--white);
}
.form-group > label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    margin: 0;
    font-size: var(--text-xs);
    transition: var(--transition);
}

.form-group.focus label {
  top: 0;
  left: 0.5rem;
  padding: 0 0.5em;
}
.contact-form-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1rem, auto));
    gap: 1rem;
    font-size: var(--text-xs);
    text-align: center;
}
.contact-form-options label {
    width: 100%;
    padding: 0.7rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: #ffffff12;
    transition: var(--transition);
    cursor: pointer;
}
.contact-form-options.label-hidden > label {
    display: none;
}
.contact-form-options input {
    display: none;
}
.contact-form-options input:checked + label {
    background-color: var(--white);
    color: var(--bs-primary)
}
.form-check {
    padding: 0;
}
input[type="checkbox"] {
    display: none;
}
input[type=checkbox]+.checkbox-text {
    position: relative;
    cursor: pointer;
    padding-left: 2rem;
}
input[type=checkbox]+.checkbox-text:before {
    position: absolute;
    content: "";
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid var(--white);
    left: 0;
    top: -0.1rem;
    border-radius: var(--bs-border-radius-sm);
    transition: var(--transition);
}
input[type=checkbox]:checked+.checkbox-text:before {
    width: 0.6rem;
    top: -0.4rem;
    left: 0.4rem;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    transform: rotate(45deg);
}

.registered-brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 25rem;
    margin: auto;
    text-align: center;
    background: var(--white);
    padding: 0.5rem;
    border-radius: var(--bs-border-radius-xl);
    color: var(--black);
    transition: var(--transition);
}
.registered-brand:hover {
    max-width: 35rem;
}


@property --a {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
}
@keyframes a {
    to {
        --a: 1turn;
    }
}



/* 404 Page */
#custom-404-section {
    display: flex;
    align-items: center;
    min-height: calc(var(--dynamic-height) - var(--header-height));
}
.astro-404-wrapper {
    position: relative;
}
.title-404 > *,
.title-404 span {
    font-size: 20vw;
    line-height: 100%;
}

.astro-404 svg {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    mix-blend-mode: exclusion;
}


/* Thank You Page */
#thank-you-section {
    display: flex;
    align-items: center;
    min-height: calc(var(--dynamic-height) - var(--header-height));
}
#fireworksCanvas {
    position: absolute;
    top: calc(var(--header-height) * -1);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

:root {
  --hue: 223;
  --sat: 10%;
  --bg: hsl(var(--hue),var(--sat),90%);
  --fg: hsl(var(--hue),var(--sat),10%);
  --primary: #fff;
  --green: hsl(150,90%,40%);
  --red: hsl(0,90%,50%);
  --purple: hsl(270,90%,60%);
  --white: hsl(0,0%,100%);
  --light-gray1: hsl(var(--hue),var(--sat),85%);
  --light-gray2: hsl(var(--hue),var(--sat),65%);
  --dark-gray1: hsl(var(--hue),var(--sat),35%);
  --dark-gray2: hsl(var(--hue),var(--sat),15%);
  --check-bubble: var(--light-gray1);
  --check-outline: var(--light-gray2);
}

.thank-you-check {
  overflow: visible;
  pointer-events: none;
  width: 5em;
  height: auto;
}

.thank-you-check circle,
.thank-you-check polygon {
  transition: fill var(--transition), stroke var(--transition);
}

.thank-you-check__move-fade,
.thank-you-check__scale-in,
.thank-you-check__scale-out,
.thank-you-check__stroke-offset {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  animation-fill-mode: forwards;
}

.thank-you-check__fade {
  transition: opacity var(--transition);
}

.thank-you-check__move-fade {
  animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
}

/* Autoplay */
.thank-you-check .thank-you-check__fade {
  opacity: 1;
}

.thank-you-check .thank-you-check__move-fade--1 { animation-name: move-fade1; }
.thank-you-check .thank-you-check__move-fade--2 { animation-name: move-fade2; }
.thank-you-check .thank-you-check__move-fade--3 { animation-name: move-fade3; }
.thank-you-check .thank-you-check__move-fade--4 { animation-name: move-fade4; }
.thank-you-check .thank-you-check__move-fade--5 { animation-name: move-fade5; }

.thank-you-check .thank-you-check__scale-in--2 { animation-name: scale-in2; }
.thank-you-check .thank-you-check__scale-in--3 { animation-name: scale-in3; fill: var(--bs-primary); }

.thank-you-check .thank-you-check__scale-out { animation-name: scale-out; }

.thank-you-check .thank-you-check__stroke-offset--1 { animation-name: stroke-offset1; }
.thank-you-check .thank-you-check__stroke-offset--2 { animation-name: stroke-offset2; }
.thank-you-check .thank-you-check__stroke-offset--3 { animation-name: stroke-offset3; }
.thank-you-check .thank-you-check__stroke-offset--4 { animation-name: stroke-offset4; }

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),var(--sat),10%);
    --fg: hsl(var(--hue),var(--sat),90%);
    --check-bubble: var(--dark-gray2);
    --check-outline: var(--dark-gray1);
  }
}

/* Animations */
@keyframes move-fade1 {
  from {
    animation-timing-function: steps(1, end);
    opacity: 0;
    transform: translate(0, 16px);
  }
  31% {
    opacity: 1;
    transform: translate(0, 16px);
  }
  75% {
    opacity: 1;
    transform: translate(0, 0);
  }
  92.75%, to {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes move-fade2 {
  from {
    animation-timing-function: steps(1, end);
    opacity: 0;
    transform: translate(22px, 0);
  }
  35.25% {
    opacity: 1;
    transform: translate(22px, 0);
  }
  75% {
    opacity: 1;
    transform: translate(0, 0);
  }
  92.75%, to {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes move-fade3 {
  from {
    animation-timing-function: steps(1, end);
    opacity: 0;
    transform: translate(-27px, 0);
  }
  44% {
    opacity: 1;
    transform: translate(-27px, 0);
  }
  82.25% {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes move-fade4 {
  from {
    animation-timing-function: steps(1, end);
    opacity: 0;
    transform: translate(0, -11px);
  }
  44% {
    opacity: 1;
    transform: translate(0, -11px);
  }
  82.25% {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes move-fade5 {
  from {
    animation-timing-function: steps(1, end);
    opacity: 0;
    transform: translate(0, -23px);
  }
  22% {
    opacity: 1;
    transform: translate(0, -23px);
  }
  61.75% {
    opacity: 1;
    transform: translate(0, 0);
  }
  79.5%, to {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes scale-in2 {
  from, 13.25% {
    transform: scale(0);
  }
  44% {
    transform: scale(1.05);
  }
  48.5%, to {
    transform: scale(1);
  }
}
@keyframes scale-in3 {
  from, 35.25% {
    transform: scale(0);
  }
  66.25% {
    transform: scale(1.05);
  }
  70.5%, to {
    transform: scale(1);
  }
}
@keyframes scale-out {
  from {
    transform: scale(1);
  }
  31%, to {
    transform: scale(0);
  }
}
@keyframes stroke-offset1 {
  from, 20.5% {
    stroke-dashoffset: 17;
  }
  41% {
    stroke-dashoffset: 0;
  }
  61.75%, to {
    stroke-dashoffset: -17;
  }
}
@keyframes stroke-offset2 {
  from, 29.5% {
    stroke-dashoffset: 22.63;
  }
  50% {
    stroke-dashoffset: 0;
  }
  70.5%, to {
    stroke-dashoffset: -22.63;
  }
}
@keyframes stroke-offset3 {
  from, 38% {
    stroke-dashoffset: 17;
  }
  58.75% {
    stroke-dashoffset: 0;
  }
  79.5%, to {
    stroke-dashoffset: -17;
  }
}
@keyframes stroke-offset4 {
  from, 22% {
    stroke-dashoffset: 17;
  }
  42.75% {
    stroke-dashoffset: 0;
  }
  63.25%, to {
    stroke-dashoffset: -17;
  }
}




@media(min-width: 991px) {
    .mobile-only {
        display: none !important;
    }
    .h-lg-100 {
        height: 100%;
    }
    .sticky {
        position: sticky;
        top: calc(var(--header-height));
    }
    .generic-hero .fickles-wrapper {
        margin-top: 10rem;
    }

    /* Header */
    .header-inner .left {
        border: solid var(--b) #0000;
        background: repeating-conic-gradient(from var(--a, 0deg), var(--l, #0000 0% 70%, var(--bs-primary))) border-box;
        filter: url(#glow-0);
        transform: translateX(calc(var(--b) * -1));
        animation: a 4s linear infinite;
    }
    .header-inner .left .inner {
        padding: 0.5rem 1.5rem 0.5rem 0.5rem;
        background: var(--bs-body-bg);
    }
    header.fixed .utility-item a {
        background: var(--black);
    }
    .utility-item a:hover {
        background: #ffffff12;
    }

    /* Homepage */
    .testimonials-section .fickles-wrapper {
        margin-top: 10rem;
    }

}

/* @media(max-width: 1200px) {
    html {
        font-size: 1.3020833333vw;
    }
} */

@media(max-width: 991px) {

    :root {
        --heading-xxl: 3rem;
        --heading-xl: 2.5rem;
        --text-xl: 1.6rem;
    }

    .desktop-only {
        display: none !important;
    }

    .container,
    .container-fluid {
        max-width: 100%;
        --bs-gutter-x: 2.5rem;
    }
    .row {
        --bs-gutter-x: 2.5rem;
    }

    .round-divider {
        height: 3rem;
    }

    /* Cookie */
    #cookie-reset {
        left: 0.6rem;
    }

    /* Header */
    .navbar-brand {
        width: 3.7rem;
    }
    .mobile-menu-wrapper {
        --size: 0px;
        --y: 0px;
        --x: 100vw;
        position: fixed;
        inset: 0;
        width: 100dvw;
        height: 100dvh;
        background: var(--white);
        clip-path: polygon(73% 0, 100% 0, 100% 8%, 65% 100%, 0 100%, 0 50%);
        display: flex;
        align-items: flex-end;
        padding: 1.25rem;
        pointer-events: none;
        z-index: 5;
        transition: var(--transition);

        -webkit-mask-image: url("../img/menu-mask.svg");
        mask-image: url("../img/menu-mask.svg");
        -webkit-mask-origin: content-box;
        mask-origin: content-box;
        -webkit-mask-position: calc(var(--x) - var(--size) / 2) calc(var(--y) - var(--size) / 2), center;
        mask-position: calc(var(--x) - var(--size) / 2) calc(var(--y) - var(--size) / 2), center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: var(--size), contain;
        mask-size: var(--size), contain;
    }

    .menu-opened .mobile-menu-wrapper {
        pointer-events: all;
    }
    .mobile-menu .btn {
        font-size: 1rem;
        padding: 1rem;
        box-shadow: none;
    }
    .menu-overlay {
        position: fixed;
        z-index: 2;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .7);
        opacity: 0;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        will-change: opacity;
        pointer-events: none;
    }
    .navbar-toggler {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 2rem;
        aspect-ratio: 1 / 1;
    }
    .navbar-toggler span {
        position: relative;
        display: block;
        width: 100%;
        min-width: 2rem;
        left: 0px;
        height: 1px;
        margin-bottom: 0.45rem;
        background: var(--white);
        border-radius: 2px;
        transition: var(--transition);
    }
    .navbar-toggler span:last-child {
        margin-bottom: 0;
    }
    .menu-opened .navbar-toggler span:nth-child(1) {
        transform: rotate(45deg);
        transform-origin: center;
        margin: 0px;
        top: 1px;
    }
    .menu-opened .navbar-toggler span:nth-child(2) {
        display: none;
    }
    .menu-opened .navbar-toggler span:nth-child(3) {
        transform: rotate(-45deg);
        transform-origin: center;
        bottom: 1px;
    }

    .nav-link {
        color: var(--black);
    }
    .nav-link:after {
        display: none;
    }

    .mobile-menu {
        width: 63%;
    }
    .navbar-nav {
        --bs-nav-link-font-size: var(--text-lg);
        margin-bottom: 0 !important;
        gap: 1rem;
    }
    .utility-item svg {
        height: 1.5rem;
    }

    .header-inner .right {
        background: var(--bs-body-bg);
        border-radius: var(--bs-border-radius-lg);
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        margin: 0.2rem 0 0.2rem;
        gap: 1rem;
    }
    .header-inner .right ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    .utility-item {
        height: 100%;
    }
    .utility-item a {
        display: flex;
        align-items: center;
        height: 100%;
        border-radius: var(--bs-border-radius-lg);
        padding: 0.5rem;
        justify-content: center;
        overflow: hidden;
        background: var(--bs-primary);
        min-width: 3rem;
    }


    /* Homepage */
    .hp-hero-section .background {
        height: 50%;
    }
    .hp-hero-section .row {
        padding-bottom: 1.5rem;
        min-height: calc(100svh - var(--header-height));
    }
    .intro-section-inner-frame {
        padding: 1.5rem;
        z-index: 9;
    }
    .project-grid-item .right .tag-item {
        padding-right: 1.5rem;
    }


    /* Team Page */
    .team-item__info {
        opacity: 1;
    }

    /* Projects Modal */
    .project-modal-wrapper {
        width: calc(100% - 2.5rem);
    }
    .project-modal .project-title-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: flex-start;
    }
    .project-modal .project-title-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .project-modal .project-url-btn {
        grid-column: 2/3;
        grid-row: 1/2;
    }
    .project-modal-builder .project-gallery .col-lg-6 > div {
        height: auto;
    }
    .project-modal-builder .project-testimonial {
        padding: 1.5rem;
    }
    .project-modal-builder .project-testimonial .module-fickle {
        padding: 2rem;
        grid-template-columns: 6rem 1fr;
    }
    .project-modal-builder .project-testimonial .module-fickle .fickle-image img {
        aspect-ratio: 1;
    }
    .project-modal-builder .project-testimonial .module-fickle .fickle-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Testimonials */
    .testimonial-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .testimonial-grid-item {
        position: relative;
    }
    .testimonial-grid-item .description > * {
        font-size: 1.1rem;
    }

    .hp-contact-section {
        padding-top: calc(var(--header-height) + 2rem);
        padding-bottom: 2rem;
    }
    .hp-contact-inner {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }


    /* Contact Modal */
    #contactModal .modal-dialog {
        width: 100vw;
    }
    #contactModal h2 {
        font-size: 2rem;
    }
    .contact-modal-form-inner .inner-row {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .contact-modal-form-inner .form-group {
        margin-inline: 0;
        margin-bottom: 2rem;
    }
    .contact-modal-form-inner .form-control, 
    .contact-modal-form-inner .form-control::placeholder {
        text-align: left;
    }
    .contact-modal-form-inner .contact-form-options {
        flex-direction: column;
        margin-top: 1rem;
    }
    .contact-modal-form-inner .contact-form-options label {
        font-size: 1.1rem;
        padding: 0.75rem 1.5rem;
    }
    .contact-modal-form-inner .module-text p {
        font-size: 1.7rem;
    }

    #contactModal .form-footer {
        flex-direction: column;
    }
    #contactModal .form-footer .form-group {
        width: 100%;
    }

    input,
    textarea {
        font-size: 16px !important;
    }
    
}

@media(max-width: 768px) {

    :root {
        --bs-body-font-size: 1.1rem;
        --text-xs: 1rem;
        --text-xxl: 2rem;
        --text-xxxl: 2.5rem
    }

    html {
        font-size: 3vw;
    }

    /* Generic */
    .generic-hero .bg img {
        object-fit: cover;
    }

    .loader-logo {
        width: 6rem;
    }

    /* Cookie */
    #cookie-banner {
        width: 100%;
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem;
    }
    #cookie-banner .tab-content > * {
        font-size: 0.875rem;
    }
    #cookie-banner .cookie-buttons .btn {
        font-size: 0.75rem;
        padding: 0.6rem;
    }


    /* Homepage */
    .intro-section-social {
        min-width: 12rem;
    }

    .module-gallery-inner {
        grid-template-columns: repeat(3, 1fr);
    }
    .project-grid-item {
        aspect-ratio: 1/1.1;
    }

    .project-modal-builder .project-info-list .module-fickle {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-list-item {
        padding-left: 1.5rem;
    }
    .project-list-item .left {
        gap: 1rem;
    }
    .project-list-item .left p {
        max-width: 13rem;
    }
    .testimonials .title-wrapper {
        display: flex;
        flex-direction: column;
    }

    .testimonials-section .fickle-header,
    .testimonials-section .fickle-item, .testimonials-section .fickle-item p {
        display: flex;
        align-items: center;
        line-height: 1em;
    }
    .testimonials-section .fickle-item.fickle-title {
        margin-right: 1rem;
    }
    .testimonials-section {
        padding: 3rem 0;
    }

    .hp-about-numbers-front .module-fickle {
        align-content: flex-start;
    }
    .hp-about-numbers-front .fickle-image {
        grid-column: span 1 / span 12;
        grid-column-start: 1;
    }
    .hp-about-numbers-front .fickle-item.fickle-title {
        grid-column: 1 / 13;
    }
    .hp-about-numbers-front .fickle-subtitle {
        grid-column: span 2 / span 10;
        grid-column-start: 2;
    }
    .hp-about-numbers-front .fickle-text-content {
        grid-column: span 1 / span 13;
        grid-column-start: 1;
    }

    .css-rovies {
        font-size: 3.5rem;
        letter-spacing: 0;
    }
    .contact-form-options {
        grid-template-columns: 1fr 1fr;
    }


    /* Web Design */
    .web-design-hero-services .module-text:nth-child(3):after {
        display: none;
    }
    .web-design-services-inner,
    .web-design-services-section .services-wrapper {
        grid-template-columns: 1fr;
    }
    .web-design-services-inner .module-text {
        padding: 0;
        border: none;
    }
    .web-design-services-section .services-wrapper {
        padding: 0;
        gap: 3rem;
    }
    .web-design-services-section .services-wrapper .module-fickle {
        padding-bottom: 3rem;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .web-design-services-section .services-wrapper .module-fickle:last-child {
        border: none;
        padding: 0;
    }
    .sliding-text > * {
        font-size: 2.8rem;
    }
    .team-quote {
        padding: 2rem;
    }
    .team-quote .module-fickle {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .team-quote .fickle-text-content {
        width: 100%;
    }


    /* Team */
    .team-s2 .logo img {
        max-width: 8rem;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Blog */
    .blog-hero-inner {
        grid-template-columns: 1fr;
    }



    .title-404 > *, 
    .title-404 span {
        font-size: 30vw;
    }

    
    /* Footer */
    footer .menus-wrapper {
        flex-direction: row-reverse;
        align-items: flex-end;
        gap: 2rem;
    }
    .footer-icons {
        position: sticky;
        bottom: 1.5rem;
    }
    .footer-menus-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }
    footer .nav-title {
        font-size: 0.875rem;
    }
    footer .copyright-wrapper {
        font-size: 0.875rem;
    }
    footer .copyright-wrapper > * {
        width: 100%;
    }

    footer .copyright-wrapper ul {
        display: grid;
        grid-template-columns: auto auto;
        gap: 0;
        justify-content: space-between;
    }
    footer .copyright-wrapper ul a {
        display: flex;
        padding: 0.5rem 0;
    }
    .mobile-copyright {
        font-size: 0.875rem;
        text-transform: uppercase;
        color: #9e9e9e;
        letter-spacing: 1px;
        text-align: center;
    }
    .footer-logo-wrapper .overlay {
        background: radial-gradient(circle at 50% 50%, transparent 3%, rgba(0, 0, 0, 1) 25%);
    }
}




.grecaptcha-badge {
    visibility: hidden !important;
}