:root {
  --green-100: #edf9f1;
  --green-200: #c2f6da;
  --green-300: #98e5bb;
  --green-400: #6cd79c;
  --green-500: #00c67f;
  --green-600: #029761;
  --green-700: #036743;
  --green-800: #234d41;
  --green-900: #000c08;

  --blue-100: #e8eff7;
  --blue-200: #cbd9ed;
  --blue-300: #98b6e2;
  --blue-400: #679dd5;
  --blue-500: #007ec4;
  --blue-600: #185f9e;
  --blue-700: #0d3a62;
  --blue-800: #1f3144;
  --blue-900: #00050a;

  --red-100: #efe4e8;
  --red-200: #f2c9d6;
  --red-300: #fb9bb2;
  --red-400: #fe4873;
  --red-500: #e50a3e;
  --red-600: #ae1136;
  --red-700: #750721;
  --red-800: #4c1a28;
  --red-900: #110208;

  --yellow-100: #efebdc;
  --yellow-200: #ebe3c1;
  --yellow-300: #e8daa0;
  --yellow-400: #e3ca65;
  --yellow-500: #d9ae00;
  --yellow-600: #a68607;
  --yellow-700: #655207;
  --yellow-800: #353114;
  --yellow-900: #191500;

  --neutral-100: #f9fafb;
  --neutral-200: #f3f4f6;
  --neutral-300: #dddfe4;
  --neutral-400: #a4a9b2;
  --neutral-500: #868c98;
  --neutral-600: #676e79;
  --neutral-700: #4e555f;
  --neutral-800: #363c45;
  --neutral-900: #14161a;

  --green-dark-100: #c4f6db;
  --green-dark-200: #a4f9ca;
  --green-dark-300: #00e090;
  --green-dark-400: #048f5d;
  --green-dark-500: #074f35;

  --blue-dark-100: #aad7ff;
  --blue-dark-200: #71bdff;
  --blue-dark-300: #0091e1;
  --blue-dark-400: #00659d;
  --blue-dark-500: #003f62;

  --red-dark-100: #f7becb;
  --red-dark-200: #f65c80;
  --red-dark-300: #ff0d47;
  --red-dark-400: #b80f37;
  --red-dark-500: #7f0a26;

  --yellow-dark-100: #f5e39d;
  --yellow-dark-200: #e8ca51;
  --yellow-dark-300: #e8ba01;
  --yellow-dark-400: #a98700;
  --yellow-dark-500: #765f00;

  --header-height: 12rem;
}

* {
  box-sizing: border-box;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  overflow-x: clip;
}

body {
  font-family: "Mona Sans";
}

p,
span,
strong,
em,
a,
ul,
li,
ol,
b,
figcaption,
div {
  font-size: 1.4rem;
  line-height: 1.55;

  &.t-big {
    font-size: 1.6rem;
    line-height: 1.65;
    letter-spacing: 0.5px;
  }

  &.t-small {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 4rem;
  align-self: baseline;
  font-weight: 500;

  strong,
  span {
    font: inherit;
  }
}

h1 {
  font-size: 9.6rem;
  letter-spacing: -2px;
  line-height: 1.2;
}

h2 {
  font-size: 7.2rem;

  @media (max-width: 768px) {
    font-size: 4.6rem;
  }
}

h3 {
  font-size: 4.8rem;

  @media (max-width: 991px) {
    font-size: 3.4rem;
  }
}

h4 {
  font-size: 2.8rem;
}

h2,
h3 {
  font-family: "Mona Sans SemiCondensed";
}

img {
  width: 100%;
  height: auto;
}

section {
  padding-block: 8rem;

  @media (max-width: 991px) {
    padding-block: 6rem;
  }
}

a {
  text-decoration: none;
  color: var(--blue-900);
}

.header-container,
.section-container {
  max-width: 157.2rem;
  padding-inline: 3.2rem!important;
  width: 100%;

  &.section-container-compact {
    max-width: 148rem;
  }

  &.section-container-right {
    @media (min-width: 992px) {
      max-width: 169.4rem;
      margin-inline: unset;
      padding-left: 0!important;
    }
  }
}

.section-container,
.header-container {
  margin-inline: auto;

  &.container-relative {
    position: relative;
  }
}

.home-landing {
  background-color: var(--blue-900);
  /* overflow: hidden; */
  color: white;
  padding-top: 14.2rem;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow-x: clip;

  h1 {
    text-transform: uppercase;
    pointer-events: none;
    font-size: 9.7vh;

    @media(max-width: 800px) {
      font-size: 9.3vw;
    }
  }

  .heading-secondary {
    text-align: right;
    margin-left: auto;
    margin-bottom: -4rem;

    @media(max-width: 800px) {
      margin-bottom: 6.4rem;
    }
  }

  img {
    width: initial;
  }

  p {
    max-width: 53.5rem;
  }

  h1,
  p {
    color: white;
  }

  &::before {
    content: "";
    position: absolute;
    position: absolute;
    width: 190vw;
    height: 100vh;
    background: radial-gradient(
      35.61% 41.17% at 50% 50%,
      rgba(221, 239, 226, 0) 50.1%,
      rgba(166, 211, 221, 0.089748) 59.69%,
      rgba(117, 186, 217, 0.170635) 69.12%,
      rgba(87, 170, 214, 0.220774) 75.84%,
      rgba(76, 165, 214, 0.24) 79.22%,
      rgba(69, 168, 205, 0.24) 83.04%,
      rgba(49, 176, 184, 0.24) 88.96%,
      rgba(18, 189, 148, 0.24) 96.22%,
      rgba(0, 198, 127, 0.24) 100%
    );
    filter: blur(72.1px);
    transform: rotate(-1.31deg);
    z-index: -1;
    left: -47%;
    top: -36%;
    opacity: 0.6;
    background-repeat: no-repeat;
  }

  .row {
    position: relative;
  }

  .btn {
    margin-top: 4rem;
    margin-bottom: 6.6rem;
  }

  .img-shield {
    position: absolute;
    top: -21%;
    right: 16%;
    z-index: -2;
  }

  .img-cloud {
    position: absolute;
    left: 0;
    bottom: 26vh;
    z-index: -2;
  }

  .img-ai {
    position: absolute;
    bottom: 6.4rem;
    right: 20%;
    max-height: 20vh;
    z-index: -2;
  }
}

.header {
  display: flex;
  align-items: center;
  height: var(--header-height);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  transition: all 0.2s ease-out;

  .header-left,
  .header-right {
    flex-basis: 100%;
    display: flex;
    align-items: center;
  }

  .header-right {
    justify-content: flex-end;
  }

  .nav {
    a {
      text-transform: uppercase;
    }

    > a {
      @media (max-width: 991px) {
        display: none!important;
      }

      &.active {
        display: flex;
        align-items: center;
        gap: .8rem;

        &::before {
          content: "";
          width: 1.4rem;
          height: 1.2rem;
          aspect-ratio: 1/cos(30deg);
            clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
          background-color: var(--green-dark-300);
          display: inline-flex;
        }
      }
    }

    @media (max-width: 991px) {
      gap: 3rem;
    }
  }
}

.announcement-ticker {
  overflow: hidden;
  width: 100%;
  background: linear-gradient(90deg, #cbd9ed 0%, #c2f6da 49.52%, #cbd9ed 100%);
  height: 6.4rem;
  display: flex;
  align-items: center;
  position: absolute;
}

.home-landing {
  .announcement-ticker {
    bottom: 0;
    z-index: -2;
  }
}

.footer {
  position: relative;
}

.ticker-track {
  display: flex;
  width: max-content;
}

.ticker-set {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  white-space: nowrap;
  color: var(--neutral-900);
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.tech-line {
  width: 7.2rem;
  height: 0.1rem;
  background-color: var(--neutral-900);
  display: flex;
  align-items: center;
}

.tech-word {
  font-size: 1.8rem;
  text-transform: uppercase;

  strong {
    font-weight: 700;
    font-size: inherit;
  }
}

.header-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.language-select {
  display: flex;
  gap: 0.8rem;

  a {
    &:not(.active) {
      color: var(--neutral-500) !important;
      pointer-events: none;
    }
  }
}

.logo {
  transition: all 0.2s ease-out;
}

.header-light {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);

  .language-select,
  .nav {
    a,
    span {
      color: var(--blue-900);
    }
  }

  .logo {
    filter: invert(1) sepia(1) saturate(0.2) hue-rotate(200deg) brightness(0.1);
  }

  .menu-switch {
    &::before,
    &::after {
      background-color: var(--neutral-900);
    }
  }
}

.header-dark {
  background-color: var(--blue-900);
  .language-select,
  .nav {
    a,
    span {
      color: white;
    }
  }

  .logo {
    filter: brightness(1);
  }

  &:has(~ .main-dark) {
    background-color: var(--blue-900);
  }
}

.main-dark {
  background-color: #00050a;
  color: white;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8rem;
}

.menu-switch {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  flex-direction: column;
  color: white;
  justify-content: space-between;
  padding: 1rem 0.2rem;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    background-color: white;
    height: 0.2rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease-out;
  }

  &::before {
    width: 100%;
  }

  &::after {
    width: 55%;
    transition: width 0.2s ease-out;
  }

  &:hover {
    &::after {
      width: 100%;
    }
  }
}

/* button - start */

.btn {
  box-shadow: none;
  outline: none;
  padding: 1.13rem 2.4rem;
  font-weight: 500;
  font-size: 1.8rem;
  border-radius: 0.4rem;
  transition: all 0.2s ease-out;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: none;
  gap: 1.2rem;
  white-space: nowrap;
  position: relative;
  width: fit-content;

  span {
    font-size: inherit;
  }

  &.btn-primary-light {
    background: linear-gradient(273.11deg, #00e090 0%, #a4f9ca 100%);
    color: var(--neutral-900);

    &:hover {
      background: linear-gradient(93.11deg, #ffffff 0%, #c4f6db 100%);
    }

    &:active {
      background: linear-gradient(93.11deg, #c4f6db 0%, #c4f6db 100%);
    }

    &[disabled],
    &.disabled,
    &[disabled]:hover,
    &.disabled:hover {
      &.disabled {
        background: var(--neutral-400) !important;
        color: #14161abf!important;
      }
    }
  }

  &.btn-outline-dark {
    color: white;
    background: linear-gradient(
      90deg,
      rgba(0, 224, 144, 0.04) 0%,
      rgba(196, 246, 219, 0.04) 100%
    );

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(90deg, #00e090, #c4f6db);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    &:hover {
      background: linear-gradient(
        270deg,
        rgba(0, 224, 144, 0.16) 0%,
        rgba(0, 224, 144, 0) 100%
      );
    }

    &:active {
      background:
        linear-gradient(var(--blue-900), var(--blue-900)) padding-box,
        linear-gradient(270deg, #00e090 0%, #c4f6db 100%) border-box;
    }

    &[disabled],
    &.disabled,
    &[disabled]:hover,
    &.disabled:hover {
      background: #ffffff29 !important;
      border: 1px solid #a4a9b2 !important;

      &::before {
        background: linear-gradient(90deg, #A4A9B2, #A4A9B2);
      }
    }
    
  }

  &.btn-primary-dark {
    background: linear-gradient(93.11deg, #1f3144 0%, #00050a 100%);
    color: white;

    &:hover {
      background: linear-gradient(93.11deg, #6cd79c 0%, #00c67f 100%);
    }

    &:active {
      background: var(--green-500);
    }
  }

  &.btn-link-green {
    color: var(--green-dark-300);
    padding: 0;
    font-size: 1.8rem;

    span {
      all: inherit;
    }

    .lnc {
      font-size: 2rem;
    }

    &:hover {
      span {
        text-decoration: underline;
        text-underline-offset: .4rem;
      }
    }

    &[disabled],
    &.disabled,
    &[disabled]:hover,
    &.disabled:hover {
      background-color: transparent!important;
    }
  }

  &.btn-wide {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  &[disabled],
  &.disabled,
  &[disabled]:hover,
  &.disabled:hover {
    pointer-events: none;
    user-select: none;
    
    &.disabled {
      color: var(--neutral-400)!important;
    }
  }

  .lnc {
    font-size: inherit;
  }

  &:hover {
    .arrow-animation {
      .animation-container {
        left: 0%;
      }
    }
  }

  &[disabled],
  &.disabled,
  &[disabled]:hover,
  &.disabled:hover {
    background: var(--neutral-400) !important;
    color: white !important;
  }
}

.arrow-animation {
  width: 2.3rem;
  height: 2.3rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;

  .animation-container {
    display: flex;
    gap: 0.6rem;
    position: absolute;
    width: fit-content;
    left: -100%;
    transition: all 0.5s ease-out;

    .lnc {
      font-size: 2rem;
    }
  }
}

.animation-stage {
  height: 140vh;
  position: absolute;
  right: 0;
  top: 71vh;
  left: 0;
  z-index: -1;
  max-width: 148rem;
  margin-inline: auto;
  pointer-events: none;
}

.video-sticky {
  position: sticky;
  top: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin-top: -25%;

  video {
    max-width: 25%;
    max-height: 80vh;
    pointer-events: all;
  }
}

.video-spaceholder {
  height: 115vh;
}

.main-features-section {
  background: #e8eff7;
  z-index: 0;
}

/* button - send */

/* ── Vertical Slider Click ─────────────────────────────── */

.vsc-inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* ── Left: accordion ─────────────────────────────────── */
.vsc-left {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;

  .vsc-item {
    &:first-of-type {
      padding-top: 0;
    }
  }
}

.vsc-divider {
  height: 0.1rem;
  background: #c8d8d5;
  position: relative;
  overflow: hidden;
}

.vsc-item {
  cursor: pointer;
  padding: 24px 0;
  position: relative;

  .vsc-title {
    line-height: 1;
    display: flex;

    &::before {
      content: "";
      display: inline-flex;
      width: 0;
      transition: all 0.2s ease-out;
    }

    @media(max-width: 800px) {
      font-size: 3.1rem;
    }
  }

  .vsc-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
      max-height 0.4s ease,
      opacity 0.3s ease;

    p {
      padding-right: 3rem;
      margin-top: 2.2rem;

      strong {
        font: inherit;
        font-weight: 500;
      }
    }
  }

  &.active {
    .vsc-title {
      color: #0d2b26;

      &::before {
        width: 0.6rem;
        min-height: 0;
        background-color: var(--green-600);
        border-radius: 0.1rem;
        margin-right: 1.4rem;
      }
    }

    .vsc-body {
      max-height: 20rem;
      opacity: 1;
    }
  }

  &:not(.active) {
    .vsc-title {
      color: var(--neutral-500);
    }
  }
}

/* ── Right: swiper ───────────────────────────────────── */
.vsc-right {
  flex: 1;
  border-radius: 16px;
  position: relative;

  .vsc-badge {
    position: absolute;
    background: linear-gradient(
      270deg,
      rgba(0, 126, 196, 0.6) 0%,
      rgba(0, 198, 127, 0.6) 100%
    );
    color: #fff;
    font-size: 2rem;
    padding: 0.4rem 1.4rem;
    border-radius: 0.8rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0px 4px 6.8px 0px rgba(0, 0, 0, 0.161);
    backdrop-filter: blur(8px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.8rem;

    strong {
      font-size: 4rem;
      font-weight: 500;
    }

    &.vsc-badge--top-right {
      top: 1.6rem;
      right: 1.6rem;
    }

    &.vsc-badge--mid-left {
      top: 40%;
      left: 0;
      transform: translateX(-50%);
    }

    @media(max-width: 1100px) {
      font-size: 3vw;

      strong {
        font-size: 4vw;
      }
    }
  }
}

.vsc-swiper {
  width: 100%;
  /* height: 52rem; */
  border-radius: 0.4rem;
  aspect-ratio: 70.4/52;

  .swiper-slide {
    height: auto !important; /* swiper ne forsiraj punu visinu */

    .vsc-slide-img-wrap {
      position: relative;
      border-radius: 0.4rem;
      overflow: hidden;
      aspect-ratio: 16/10;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }
  }
}

@media (max-width: 768px) {
  .vsc-inner {
    flex-direction: column;
    gap: 4rem;
  }

  .vsc-left {
    flex: none;
    width: 100%;
  }
}

.features-accordion {
  min-height: 59rem;
}

html[lang=sr] {
  .features-accordion {
    min-height: 69rem;
  }

  .main-features-section {
    padding-bottom: 2rem;
  }
}

.color-cards {
  display: flex;
  gap: 6.4rem;

  .color-card {
    display: flex;
    min-height: 36rem;
    gap: 2.4rem;
    position: relative;
    border-radius: 0.4rem;
    overflow: hidden;
    flex-basis: 100%;

    .color-card-body {
      flex-grow: 1;
      padding: 4.8rem 4.8rem 0 4.8rem;
      position: relative;
      border-radius: 0.4rem;
      isolation: isolate;
      display: flex;
      flex-direction: column;

      h3 {
        line-height: 1;
        font-size: 3.6rem;
        margin-bottom: 1.5rem;
      }

      p {
        font-size: 1.8rem;
        margin-bottom: 3rem;
        color: var(--neutral-900);
      }

      img {
        width: 100%;
        display: flex;
        margin-top: auto;
        max-height: 27rem;
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0.6rem;
      }
    }
  }

  @media (max-width: 1300px) {
    flex-direction: column;
  }
}

.cybersecurity-color-card {
  .color-card-body {
    background: #e8eff7;

    &::before {
      background: linear-gradient(90deg, #0091e1 0%, #d9ae00 99.93%);
    }
  }
}

.cloud-color-card {
  .color-card-body {
    background: var(--green-100);

    &::before {
      background: linear-gradient(90deg, #0080c2 -0.07%, #00c67f 100.07%);
    }
  }
}

.ai-color-card {
  .color-card-body {
    background: var(--red-100);

    &::before {
      background: linear-gradient(90deg, #0091e1 0.07%, #ff0d47 100%);
    }
  }
}

.dark-section {
  background-color: var(--blue-900);
  color: white;
  position: relative;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2552.63 2428.32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: url(%23radial-gradient); fill-opacity: .24; stroke-width: 0px; %7D %3C/style%3E%3CradialGradient id='radial-gradient' cx='3071.05' cy='1426.2' fx='3071.05' fy='1426.2' r='1' gradientTransform='translate(-3531994.9 2217437.2) rotate(-54.78) scale(1253.27 1127.8) skewX(-.02)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.5' stop-color='%23ddefe2' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%23a6d3dd' stop-opacity='.37'/%3E%3Cstop offset='.69' stop-color='%2375bad9' stop-opacity='.71'/%3E%3Cstop offset='.76' stop-color='%2357aad6' stop-opacity='.92'/%3E%3Cstop offset='.79' stop-color='%234ca5d6'/%3E%3Cstop offset='.83' stop-color='%2345a8cd'/%3E%3Cstop offset='.89' stop-color='%2331b0b8'/%3E%3Cstop offset='.96' stop-color='%2312bd94'/%3E%3Cstop offset='1' stop-color='%2300c67f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath class='cls-1' d='m2520.69,1474.55l-723.29,899.72c-32.27,40.15-83.44,60.11-134.36,52.43l-1130.83-170.56c-51.55-7.77-94.94-42.69-113.59-91.39L9.58,1096.32c-18.42-48.11-9.9-102.39,22.38-142.54L755.24,54.05C787.51,13.91,838.68-6.06,889.6,1.62l1130.83,170.56c51.55,7.77,94.94,42.69,113.59,91.39l409.03,1068.43c18.42,48.11,9.9,102.39-22.37,142.54Z'/%3E%3C/svg%3E");
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
}

.white-section {
  background:
    linear-gradient(0deg, #ffffff, #ffffff),
    linear-gradient(
      94.81deg,
      rgba(194, 246, 218, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      85.25deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(152, 182, 226, 0.5) 101.19%
    );
}

.row {
  display: flex;
  gap: 4.5rem;

  .column {
    flex-basis: 100%;
  }

  .column-float-right {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;

    @media (max-width: 991px) {
      justify-content: flex-start;;
    }
  }

  @media (max-width: 991px) {
    flex-direction: column;
  }

  @media (min-width: 992px) {
    &.row-align-center {
      align-items: center;
    }

    &.row-small {
      max-width: 108rem;
      display: flex;
      justify-content: center;
      margin-inline: auto;
    }

    &.row-between {
      justify-content: space-between;

      .column:last-child {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
      }
    }
  }
}

.lh-1 {
  line-height: 1;
}

.previous-speaker-section {
  .previous-speaker-desc {
    margin-bottom: 3.8rem;
  }
}

.swiper-speakers {
  margin-bottom: 13.8rem;
  margin-top: 11rem;

  .swiper-wrapper {
    gap: 3.2rem;
    transition: all 0.3s ease-out;
    transition-timing-function: linear !important;

    &:hover {
      .swiper-slide {
        &:not(:hover) {
          @media(min-width: 992px) {
            filter: brightness(0.7);
            opacity: 0.6;
          }
        }
      }
    }
  }

  .swiper-slide {
    transition:
      flex 0.4s ease,
      filter 0.4s ease,
      opacity 0.4s ease;
    position: relative;
    height: 50rem;
    transition: all 0.3s ease-out;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0 0 33.3rem;
    aspect-ratio: 333/500;

    &.featured-slide {
      flex: 0 0 40%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::before {
      content: "";
      background: linear-gradient(
        180deg,
        rgba(0, 5, 10, 0) 0%,
        rgba(0, 5, 10, 0.75) 100%
      );
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      height: 12rem;
    }

    .social-bar {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 4rem 2.4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.4rem;

      &::after {
        content: "";
        width: 0.1rem;
        height: 100%;
        background-color: white;
        border-radius: 0.4rem;
      }

      img {
        width: 2.8rem;
        height: 2.8rem;
      }
    }

    .speaker-details {
      padding: 2.4rem 4rem 2.4rem 2.4rem;
      position: absolute;
      color: white;

      h5 {
        margin-bottom: 0.4rem;
        font-size: 2.4rem;
        font-weight: 500;
        font-family: "Mona Sans SemiCondensed";
        letter-spacing: 2px;
      }

      p {
        font-size: 1.6rem;
      }
    }
  }
}

.swiper-logo {
  .swiper-wrapper {
    transition-timing-function: linear !important;
  }
}

.hands-on {
  border-radius: .4rem;
  background:
    linear-gradient(0deg, #ffffff, #ffffff),
    linear-gradient(
      94.81deg,
      rgba(194, 246, 218, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      85.25deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(152, 182, 226, 0.5) 101.19%
    );
  margin-bottom: 5.8rem;
  color: var(--neutral-900);
  padding: 9.4rem;

  @media (max-width: 700px) {
    padding: 3.2rem;
  }
}

.text-btn {
  display: flex;
  align-items: center;
  gap: 3.2rem;

  span {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
  }
}

.hr-short {
  width: 7.3rem;
  height: 0.1rem;
  background-color: var(--neutral-900);
}

.swiper-logo {
  width: 62rem;
  --fade-size: 0px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent var(--fade-size),
    black calc(var(--fade-size) + 37rem),
    black calc(100% - var(--fade-size) - 37rem),
    transparent calc(100% - var(--fade-size))
  );
  mask-image: linear-gradient(
    to right,
    transparent var(--fade-size),
    black calc(var(--fade-size) + 37rem),
    black calc(100% - var(--fade-size) - 37rem),
    transparent calc(100% - var(--fade-size))
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  @media (max-width: 991px) {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent var(--fade-size),
      black calc(var(--fade-size) + 9rem),
      black calc(100% - var(--fade-size) - 9rem),
      transparent calc(100% - var(--fade-size))
    );
    mask-image: linear-gradient(
      to right,
      transparent var(--fade-size),
      black calc(var(--fade-size) + 9rem),
      black calc(100% - var(--fade-size) - 9rem),
      transparent calc(100% - var(--fade-size))
    );
  }

  img {
    height: 7.7rem;
    aspect-ratio: 1;
    object-fit: contain;
    filter: grayscale(1);
  }

  @media(max-width: 856px) {
    width: 69vw; 
  }
}

/* MODAL - start */

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  z-index: 9998;
  background: rgba(134, 140, 152, 0.5);
  overflow-y: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  scrollbar-width: none;

  h3,
  label {
    color: white;
  }

  &::-webkit-scrollbar {
    width: 0;
  }

  .modal {
    z-index: 9999;
  }

  &.show {
    display: flex;
  }

  &[data-modal="intro"] {
    .modal-content {
      max-height: calc(100vh - 3rem);
    }
  }

  &.modal-viewport {
    video {
      max-height: calc(100vh - 18rem);
    }

    .floor-plan {
      max-height: calc(100vh - 16rem);
    }
  }
}

.modal-content {
  width: 100%;
  height: fit-content;
  max-width: 62rem;
  z-index: 9999;
  margin: auto 15px auto 15px;
  overflow: hidden;
  position: relative;
  background-color: var(--neutral-900);
  padding: 2.4rem;
  border-radius: 0.8rem;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    min-height: 4.4rem;
    margin-bottom: 2rem;
    color: white;

    .modal-title {
      font-size: 3.2rem;
      margin-bottom: 0;

      span {
        font-weight: 500;
        font-size: 1.8rem;
        color: var(--neutral-900);
      }
    }
  }

  .modal-header-floating {
    @media (min-width: 769px) {
      position: absolute;
      top: 4rem;
      right: 4rem;
    }

    @media (max-width: 768px) {
      justify-content: flex-end;
    }
  }

  .modal-body {
    min-height: 1rem;

    h2 {
      font-size: 2.8rem;
      margin-bottom: 2.8rem;
    }

    video {
      width: 100%;
    }
  }

  .modal-close {
    cursor: pointer;
    transition: all 0.1s linear;
    font-size: 2.4rem;
    border-radius: 0.8rem;
    padding: 2px;
    color: white;
    height: fit-content;
    margin-left: auto;
  }

  @media (max-width: 768px) {
    padding: 2rem;
  }
}

.modal .modal-xs {
  max-width: 240px;
}
.modal .modal-sm {
  max-width: 400px;
}

.modal .modal-md {
  max-width: 90rem;
}

.modal .modal-lg {
  max-width: 110rem;
}

.modal .modal-xl {
  max-width: 1920px;

  .floor-view {
    max-height: 100vh;
  }
}

.modal .modal-responsive {
  width: 100%;
  max-height: calc(100vh - 2rem);
  max-width: unset;
}

/* MODAL - end */

.swiper-testimonials {
  img {
    width: 100%;
    max-height: 60rem;
    object-fit: cover;
    height: 100%;
    aspect-ratio: 1;

    @media (max-width: 768px) {
      aspect-ratio: 1;
      height: unset;
    }
  }
}

.testimonial-section {
  .row {
    @media(min-width: 992px) {
      align-items: center;
    }
  }

  .column:last-child {
    position: relative;
    overflow: hidden; /* tekstualna kolona ostaje "čista" */
  }
  /* .column (prva, sa slikom) više NEMA overflow:hidden */
}

.swiper-testimonials {
  overflow: visible; /* dozvoljava da se susjedni slajd vidi van granica */

  .swiper-slide {
    opacity: 0.35; /* zatamnjenje neaktivnih, po uzoru na figmu */
    transition: all 0.5s linear;
    transform: translateZ(0) scale(1);
    transform-origin: right;

    &.swiper-slide-prev {
      transform: translateZ(0) scale(.8);
      filter: blur(5px);
    }
  }

  .swiper-slide-active {
    opacity: 1;
  }

  img {
    width: 100%;
    max-height: 60rem;
    object-fit: cover;
    height: 100%;
    aspect-ratio: 1;

    @media (max-width: 768px) {
      aspect-ratio: 1;
      height: unset;
    }
  }
}

.testimonial-section {
  background-color: var(--neutral-100);

  .row {
    @media(min-width: 992px) {
      align-items: center;
    }
  }

  .column {
    position: relative;
    overflow: hidden;
  }

  .testimonial {
    display: none;

    h2 {
      line-height: 1;
      margin-bottom: 7rem;
    }

    p {
      font-size: 2rem;
      color: var(--neutral-900);
      margin-bottom: 2.2rem;

      &::before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg width='90' height='69' viewBox='0 0 90 69' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.4811 21.0562C34.4811 27.3848 34.4811 30.549 32.5151 32.5151C30.5491 34.4811 27.3848 34.4812 21.0562 34.4812C14.7276 34.4812 11.5633 34.4811 9.59723 32.5151C7.63117 30.549 7.63117 27.3848 7.63117 21.0562C7.63117 14.7276 7.63117 11.5633 9.59723 9.59723C11.5633 7.63118 14.7276 7.63118 21.0562 7.63118C27.3848 7.63118 30.5491 7.63118 32.5151 9.59723C34.4811 11.5633 34.4811 14.7276 34.4811 21.0562Z' fill='%2300C67F'/%3E%3Cpath d='M34.4806 17.6999V32.743C34.4806 46.076 26.0373 57.3832 14.3431 61.3311' fill='%2300C67F'/%3E%3Cpath d='M21.0559 0.00012931C24.0045 0.00012931 26.9842 -0.0160624 29.4388 0.313949C32.1128 0.673507 35.274 1.56439 37.9111 4.20151L38.1529 4.44992C40.6032 7.0355 41.4503 10.0832 41.7986 12.6738C41.981 14.0298 42.0555 15.546 42.0876 17.1286C42.1016 17.3173 42.1116 17.5077 42.1116 17.6999L42.1125 21.0559C42.1125 21.2398 42.1116 21.4241 42.1116 21.6082V32.7426C42.1116 49.3374 31.5914 63.5621 16.7841 68.5611C12.791 69.9092 8.46091 67.765 7.11283 63.7719C5.76492 59.7789 7.90922 55.4495 11.9021 54.1014C17.6304 52.1675 22.371 47.785 24.8905 42.0893C23.6373 42.1133 22.3436 42.1125 21.0559 42.1125C18.1074 42.1125 15.1283 42.1287 12.6738 41.7987C9.99979 41.4391 6.83864 40.5482 4.20151 37.9111C1.56451 35.274 0.673518 32.1128 0.313949 29.4388C-0.016064 26.9842 0.000129328 24.0045 0.000129328 21.0559C0.000128318 18.1074 -0.0160521 15.1283 0.313949 12.6738C0.67348 9.99975 1.56433 6.83867 4.20151 4.20151C6.83867 1.56433 9.99975 0.67348 12.6738 0.313949C15.1283 -0.0160529 18.1074 0.0001283 21.0559 0.00012931ZM15.2622 21.0559C15.2622 23.8633 15.2744 25.5583 15.3707 26.7403C16.5527 26.8367 18.2475 26.8504 21.0559 26.8504C23.8633 26.8504 25.5583 26.8366 26.7403 26.7403C26.8322 25.6117 26.8484 24.0158 26.8496 21.4302V20.6808C26.8484 18.0949 26.8323 16.4991 26.7403 15.3707C25.5583 15.2744 23.8632 15.2622 21.0559 15.2622C18.2482 15.2622 16.5535 15.2752 15.3715 15.3715C15.2752 16.5535 15.2622 18.2482 15.2622 21.0559Z' fill='%2300C67F'/%3E%3Cpath d='M82.3159 21.0562C82.3159 27.3848 82.3159 30.549 80.3498 32.5151C78.3838 34.4811 75.2195 34.4812 68.891 34.4812C62.5624 34.4812 59.3982 34.4811 57.4321 32.5151C55.466 30.549 55.466 27.3848 55.466 21.0562C55.466 14.7276 55.466 11.5633 57.4321 9.59723C59.3982 7.63118 62.5624 7.63118 68.891 7.63118C75.2195 7.63118 78.3838 7.63118 80.3498 9.59723C82.3159 11.5633 82.3159 14.7276 82.3159 21.0562Z' fill='%2300C67F'/%3E%3Cpath d='M82.3154 17.6999V32.743C82.3154 46.076 73.8721 57.3832 62.1779 61.3311' fill='%2300C67F'/%3E%3Cpath d='M68.8907 0.00012931C71.8391 0.00012931 74.8182 -0.0160072 77.2727 0.313949C79.8632 0.662232 82.9112 1.50897 85.4967 3.9589L85.7459 4.20151L85.9877 4.44992C88.438 7.03549 89.2851 10.0832 89.6334 12.6738C89.8158 14.0298 89.8903 15.546 89.9224 17.1286C89.9364 17.3173 89.9464 17.5077 89.9464 17.6999L89.9473 21.0559C89.9473 21.2398 89.9464 21.4241 89.9464 21.6082V32.7426C89.9464 49.3374 79.4263 63.5621 64.6189 68.5611C60.6258 69.9092 56.2957 67.765 54.9476 63.7719C53.5997 59.7789 55.744 55.4495 59.7369 54.1014C65.4652 52.1675 70.2058 47.785 72.7253 42.0893C71.4721 42.1133 70.1784 42.1125 68.8907 42.1125C65.9422 42.1125 62.9631 42.1287 60.5086 41.7987C57.8345 41.4391 54.6734 40.5481 52.0363 37.9111C49.3993 35.274 48.5083 32.1129 48.1487 29.4388C47.8187 26.9842 47.8349 24.0045 47.8349 21.0559C47.8349 18.1074 47.8187 15.1283 48.1487 12.6738C48.5083 9.99975 49.3991 6.83866 52.0363 4.20151C54.6734 1.56441 57.8345 0.673492 60.5086 0.313949C62.9631 -0.0160529 65.9422 0.0001283 68.8907 0.00012931ZM63.097 21.0559C63.097 23.8633 63.1092 25.5583 63.2055 26.7403C64.3875 26.8367 66.0823 26.8504 68.8907 26.8504C71.6981 26.8504 73.3931 26.8366 74.5751 26.7403C74.667 25.6117 74.6832 24.0158 74.6843 21.4302V20.6808C74.6832 18.0955 74.667 16.4999 74.5751 15.3715C73.3931 15.2752 71.6981 15.2622 68.8907 15.2622C66.083 15.2622 64.3883 15.2752 63.2063 15.3715C63.1099 16.5535 63.097 18.2482 63.097 21.0559Z' fill='%2300C67F'/%3E%3C/svg%3E%0A");
        background-size: 9rem 6.9rem;
        width: 9rem;
        height: 6.9rem;
        display: block;
        margin-bottom: 3.2rem;
      }
    }

    h4 {
      font-family: "Mona Sans SemiCondensed";
      font-size: 2.4rem;
      margin-bottom: 0;
    }

    span {
      font-size: 1.6rem;
    }

    &.active {
      display: block;
    }
  }
}

.swiper-controls {
  display: flex;
  gap: 2.4rem;
  margin-top: 8rem;
  justify-content: flex-end;

  .prev-btn,
  .next-btn {
    padding: 0;
    width: 4.8rem;
    height: 4.8rem;
    cursor: pointer;
    border: 1px solid;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    background:
      linear-gradient(white, white) padding-box,
      linear-gradient(90deg, #00c67f 0%, #029761 100%) border-box;
    background-size:
      100% 100%,
      200% 100%;

    background-position:
      0 0,
      0% 0%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &.btn-swiper-light {
      color: var(--neutral-900);
    }

    .lnc {
      font-size: 2rem;
    }

    &[disabled],
    &.disabled,
    &[disabled]:hover,
    &.disabled:hover {
      border: 1px solid var(--neutral-400) !important;
      background: rgba(0, 0, 0, 0.04) !important;
    }
  }
}

.our-partners-section {
  background-color: var(--neutral-100);
}

.our-partners {
  background:
    linear-gradient(96.4deg, #1f3144 0%, #00050a 100%),
    linear-gradient(
      97.82deg,
      rgba(0, 198, 127, 0.35) 0%,
      rgba(0, 198, 127, 0.197276) 5.64%,
      rgba(0, 198, 127, 0.0947684) 13.06%,
      rgba(0, 198, 127, 0.0143254) 20.74%,
      rgba(0, 198, 127, 0.00180109) 27.45%,
      rgba(0, 198, 127, 0) 37.54%
    ),
    linear-gradient(
      98.03deg,
      rgba(255, 255, 255, 0) 50.93%,
      rgba(184, 219, 239, 0.138929) 66.99%,
      rgba(90, 172, 217, 0.323273) 84.01%,
      rgba(0, 126, 196, 0.5) 100%
    );
  padding: 5.7rem;

  h2 {
    margin-bottom: 3rem;
  }

  p {
    margin-bottom: 3.8rem;
    font-size: 2rem;
  }

  .row {
    .column {
      &:first-child {
        padding: 3.7rem;

        @media(max-width: 991px) {
          padding-inline: 0;
        }
      }
    }
  }
}

.vertical-logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;

  .vertical-logo-block {
    background-color: rgba(255, 255, 255, 0.05);
    border: 0.1rem solid rgba(255, 255, 255, 0.02);
    width: fit-content;
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 6rem;
    border-radius: 0.8rem;
    min-width: 32rem;

    img {
      filter: brightness(0) invert(1);
    }

    &.hpe {
      img {
        width: 9.6rem;
      }
    }

    &.fortinet {
      img {
        width: 25.6rem;
      }
    }

    &.beyond-trust {
      img {
        width: 17.8rem;
      }
    }
  }
}

.footer {
  background:
    linear-gradient(0deg, #00050a, #00050a),
    linear-gradient(
      96.41deg,
      rgba(0, 5, 10, 0.3) 0%,
      rgba(13, 58, 98, 0.3) 100%
    );
  color: white;

  .footer-container {
    padding-block: 9.4rem;
  }

  .footer-row {
    display: flex;
    gap: 2rem;
    justify-content: space-between;

    .footer-left {
      @media (min-width: 1301px) {
        flex-basis: 50rem;
      }

      p {
        font-size: 1.6rem;
        margin-bottom: 3.2rem;
      }
    }

    .footer-navigation {
      display: flex;
      gap: 5vw;

      a {
        font-size: 1.6rem;
        font-weight: 500;
        color: white;
        transition: color 0.2s ease-out;

        &:hover {
          color: var(--green-dark-100);
        }

        &:active {
          color: var(--green-dark-200);
        }
      }

      h5 {
        font-size: 1.4rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        color: var(--neutral-300);
      }

      .footer-navigation-column {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        flex-basis: calc(50% - 2rem);
      }

      @media (max-width: 768px) {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 9rem;
      }
    }

    @media (max-width: 1300px) {
      flex-direction: column;
    }
  }

  .announcement-ticker {
    position: static;
  }

  .logo {
    margin-bottom: 3rem;
    display: block;
    max-width: 12rem;
  }

  .lnc {
    color: white;
    font-size: 2.4rem;
  }

  .subscription-container {
    margin-bottom: 4.58rem;
  }

  .subscribe {
    display: flex;
    gap: 1.2rem;

    input[type="email"] {
      border: 1px solid #ffffff66;
      background: #031220;
      border-radius: 0.4rem;
      width: 100%;
      font-size: 1.8rem;
      padding: 0 1.5rem;
      color: white;

      &::placeholder {
        color: var(--neutral-500);
        font-size: 1.8rem;
      }
    }
  }
}

.contact-data {
  a {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    .lnc {
      color: var(--neutral-400);
    }
  }
}

.social {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  .lnc {
    padding: 1.2rem;
    transition: 0.2s ease-out;
  }

  a {
    display: flex;

    &:hover {
      .lnc {
        color: var(--neutral-400);
      }
    }
  }
}

.copyright {
  color: var(--neutral-400);
  font-size: 1.4rem;

  a {
    font: inherit;
    color: var(--neutral-300);

    &:hover {
      text-decoration: underline;
      text-underline-offset: .3rem;
    }
  }
}

.privacy-section {
  margin-top: 18rem;
    h1 {
        font-size: 4.8rem;
        margin-bottom: 4.8rem;
    }

    h2 {
        color: var(--green-dark-400);
        font-size: 3.2rem;
        margin-bottom: 1.2rem;
        margin-top: 4.2rem;
    }

    .text-block {
        p {
            margin-bottom: 2.5rem;
            font-size: 1.8rem;
            line-height: 1.4;
        }

        ul {
          list-style: none;
            li {
                font-size: 1.8rem;
                line-height: 1.4;

                &::before {
                    content: "•";
                    margin-right: 1rem;
                }
            }

            margin-bottom: 2.5rem;
        }

        a {
            text-decoration: underline;
            font-size: inherit;

            &:hover {
                color: var(--green-dark-400);
            }
        }
    }
}


.big-logo {
  margin-top: 4.8rem;
  aspect-ratio: 154/62.1;
  width: 100%;

  img {
    width: 100%;
    opacity: 0.15;
  }
}

.secondary-menu {
  position: fixed;
  inset: 0;
  height: 100vh;
  display: flex;
  transform: translate(100%);
  transition: all 0.3s ease-out;

  .secondary-menu-left-block {
    background-image: url("../images/menu-img.jpg");
    width: 35%;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: 0px 4px 4px 0px #00000040;
      background: #036743;
      background-blend-mode: color;
      opacity: 0.75;
    }

    .menu-center-block {
      position: relative;
      z-index: 1;

      p {
        font-family: "Mona Sans SemiCondensed";
        font-size: 2.8rem;
        line-height: 1.2;
        color: white;
      }

      img {
        width: 30rem;
        margin-bottom: 4rem;
      }
    }

    @media (max-width: 1350px) {
      display: none;
    }
  }

  .secondary-menu-right-block {
    width: 65%;
    padding: 3rem 14rem;
    position: relative;
    background:
      linear-gradient(0deg, #00050a, #00050a),
      linear-gradient(
        138.64deg,
        rgba(0, 12, 8, 0.6) 21.96%,
        rgba(35, 77, 65, 0.6) 100%
      );
    color: rgba(255, 255, 255, 0.6);

    @media (max-width: 1350px) {
      width: 100%;
      padding: 3rem;
    }
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    align-items: center;

    &::-webkit-scrollbar { 
      display: none;  /* Older Safari and Chromium */
    }
  }

  a {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s linear;

    &:hover {
      color: white;
    }
  }

  .secondary-menu-close {
    color: white;
    cursor: pointer;
    font-size: 2.4rem;
    padding: 1.2rem;
    position: absolute;
    right: 6.4rem;
    top: 6.4rem;
    z-index: 20;

    @media(max-width: 991px) {
      right: 2.4rem;
      top: 2.4rem;
    }
  }

  &.show {
    transform: translate(0%);
  }
}

.secondary-menu-wrapper {
  position: relative;
  z-index: 1;

  hr {
    margin-block: 6vh;
    border: 0;
    border: 0.1rem solid rgba(255, 255, 255, 0.3);
  }
}

.secondary-menu-contacts {
  .contact-data {
    display: flex;
    gap: 1.6rem;
    flex-direction: column;
    margin-bottom: 4rem;

    a {
      font-size: 1.6rem;

      .lnc {
        font-size: 2.4rem;
      }
    }
  }

  .social {
    a {
      transition: color 0.2s linear;

      .lnc {
        font-size: 2.4rem;
        color: rgba(255, 255, 255, 0.6);
      }

      &:hover {
        .lnc {
          color: white;
        }
      }
    }
  }
}

.secondary-nav {
  display: flex;
  flex-direction: column;

  li {
    list-style: none;
  }

  a {
    font-size: 5vh;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    position: relative;
    transition: all 0.2s ease-out;

    &::before {
      content: "";
      background-image: url("../icons/hexa-small.svg");
      background-size: contain;
      background-repeat: no-repeat;
      width: 2rem;
      height: 2rem;
      display: inline-flex;
      position: absolute;
      opacity: 0;
      left: 0;
      transition: all 0.2s ease-out;
    }

    &:hover, &.active {
      padding-left: 3.6rem;

      &::before {
        transition: all 0.2s ease-out;
        opacity: 1;
        transform: rotate(120deg);
      }
    }

    @media (max-width: 991px) {
      font-size: 3vh;
    }
  }
}

.form-group {
  input:not([type="submit"]), textarea {
    background: #24282e;
    border-radius: 0.4rem;
    width: 100%;
    font-size: 1.8rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--neutral-800);
    outline: 0;
    color: white;
    font-family: "Mona Sans";

    &::placeholder {
      color: var(--neutral-600);
      font-size: 1.4rem;
      position: relative;
      bottom: .2rem;
    }

    &:hover {
      outline: 0;
      background: var(--neutral-800);

      &::placeholder {
        color: var(--neutral-300);
      }
    }

    &:focus {
      border-color: var(--neutral-200);

      &::placeholder {
        color: white;
      }
    }
  }

  label {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    color: white;
    display: block;
    font-weight: 500;

      &[data-optional] {
        display: flex;

        &::after {
          content: attr(data-optional);
          margin-left: auto;
          color: var(--neutral-600);
          font-weight: 400;
          font-size: 1.2rem;
        }
      }
    }
}



#company_field {
  display: none !important;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.4rem;

  a {
    color: white;
  }

  &:has(.form-note) {
    padding: 2.4rem 2.4rem 0 2.4rem;
  }

  h4 {
    margin-bottom: 1.4rem;
    line-height: 1.3;
  }
}

.contact-form-light {
  .form-group {
     input:not([type="submit"]), textarea {
        background: white;
        border: .1rem solid var(--neutral-300);
        color: var(--neutral-900);

        &:hover {
          background: var(--neutral-200);

          &::placeholder {
            color: var(--neutral-700);
          }
        }

        &:focus {
          background: var(--neutral-200);
          border-color: var(--neutral-700);
          caret-color: var(--neutral-900);

          &::placeholder {
            color: var(--neutral-900);
          }
        }
    }
  }
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: relative;
  cursor: pointer;

  > * {
    order: 1;
  }

  .checkmark {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    order: 0;
    border-radius: 0.4rem;
    position: relative;
  }

  input {
    position: absolute;
    inset: 0;
    visibility: hidden;

    &:not(:checked) {
      ~ .checkmark {
        box-shadow: inset 0px 2px 2px 0px #1b1c1d1f;
        background-color: white;

        &::before {
          content: "";
          display: block;
          border-radius: 0.26rem;
          background-color: white;
          width: 1.3rem;
          height: 1.3rem;
          z-index: 1;
        }
      }
    }

    &:checked {
      ~ .checkmark {
        background-color: #335cff;
      }
    }
  }

  p {
    letter-spacing: 1px;
    color: var(--neutral-200);
  }

  &:hover {
    &:not(:checked) {
      ~ .checkmark {
        background: linear-gradient(
          180deg,
          rgba(27, 28, 29, 0) 0%,
          rgba(27, 28, 29, 0.12) 100%
        );

        &::before {
        }
      }
    }

    &:checked {
      ~ .checkmark {
        background-color: #335cff;
      }
    }
  }

  a {
    color: var(--blue-300);
  }
}

.form-note {
  text-align: center;
  color: var(--neutral-600);
  margin-top: 3rem;
}

.form-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  img {
    margin-block: 4rem;
    width: initial;
  }

  .form-message-heading {
    background: linear-gradient(90deg, #00e090 0%, #a4f9ca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    max-width: 40rem;
  }

  .form-message-subheading {
    color: white;
    font-size: 1.6rem;
    max-width: 34rem;
    margin-bottom: 5rem;

    a {
      color: white;
      text-decoration: underline;
      font: inherit;
    }
  }
}

.page-landing {
  min-height: calc(100vh - 12rem);
  margin-top: 12rem;
}

.speakers-landing,
.program-landing,
.partners-landing {
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/speakers-landing.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.page-landing-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  color: white;

  h1 {
    text-transform: uppercase;

    @media (max-width: 991px) {
      font-size: 3.2rem;
    }
  }
}

.program-landing,
.partners-landing {
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../images/program-landing.jpg");
  background-size: cover;
}

.page-pill {
  background: rgba(54, 60, 69, 0.302);
  padding: 0.55rem 1.8rem;
  border-radius: 8rem;
  border: 1px solid #a4a9b299;
  backdrop-filter: blur(40px);
  text-transform: uppercase;
  font-size: 2.2rem;
  margin-bottom: 2.4rem;
  letter-spacing: 2%;
  display: block;
  width: fit-content;
  font-family: "Mona Sans SemiCondensed";

  @media (max-width: 991px) {
    font-size: 2rem;
  }
}

.become-speaker-section {
  p {
    font-size: 2rem;
    &:first-child {
      margin-bottom: 3rem;
    }
  }

  .column-float-right {

    @media (min-width: 992px) {
      flex-basis: fit-content;
    }
  }

  @media (min-width: 992px) {
    .row {
      gap: 13.5rem;
    }
  }
}

.speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;

  .speaker-block {
    border-radius: 0.4rem;
    cursor: pointer;

    .speaker-img {
      background: linear-gradient(
        134.36deg,
        #676e79 1.13%,
        #363c45 40.69%,
        #14161a 100.04%
      );
      transition: all 0.2s ease-out;
      position: relative;

      img {
        width: 100%;
        aspect-ratio: 1;
        display: flex;
        object-fit: cover;
        position: relative;
        z-index: 2;
      }

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        transition: all 0.2s ease-out;
        opacity: 0;
      }
    }

    .speaker-data {
      h3 {
        margin-bottom: 0;
        margin-top: 1rem;
        line-height: 1;
        font-size: 2.4rem;
      }

      span {
        font-size: 1.6rem;
        margin-bottom: 2rem;
        display: block;
      }
    }

    &.speaker-keynote {
      .speaker-img {
        &::before {
          background: linear-gradient(
            134.36deg,
            #029761 1.13%,
            #363c45 40.69%,
            #14161a 100.04%
          );
        }
      }
    }

    &.speaker-vendor {
      .speaker-img {
        &::before {
          background: linear-gradient(
            134.36deg,
            #185f9e 1.13%,
            #363c45 40.69%,
            #14161a 100.04%
          );
        }
      }
    }

    .speaker-description {
      display: none;
    }

    &:hover {
      .speaker-img {
        &::before {
          opacity: 1;
        }
      }
    }
  }

  @media (max-width: 1300px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 800px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.speakers-section,
.become-speaker-section {
  &::before {
    display: none;
  }
}

h2 {
  margin-bottom: 0;
  line-height: 1;

  + strong {
    font-family: "Mona Sans SemiCondensed";
    font-size: 7.2rem;
    color: var(--neutral-500);
    line-height: 1;
    margin-bottom: 5.4rem;
    display: block;
    font-weight: 500;
  }
}

.speaker-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  .category {
    display: none;
  }
}

.category {
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  font-family: "Mona Sans SemiCondensed";
  letter-spacing: 1px;
  text-transform: uppercase;
  width: fit-content;
  white-space: nowrap;
  order: 2;
  display: flex;

  &.vendor {
    background-color: var(--blue-dark-300);
    color: var(--green-900);
    order: 1;
    display: flex;
  }

  &.keynote {
    color: var(--green-900);
    background-color: var(--green-dark-300);
    order: 0;
    display: flex;
  }
}

[class="category"] {
  background-color: var(--neutral-800);
  color: white;
}

[class^="category cyber-security"] {
    position: relative;
    color: white;
    background: linear-gradient(
      90deg,
      rgba(0, 145, 225, 0.2) 0%,
      rgba(217, 174, 0, 0.2) 99.93%
    );

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px; /* ovo je debljina border-a */
      background: linear-gradient(90deg, #0091e1, #d9ae00);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  [class^="category cloud-technology"] {
    position: relative;
    color: white;
    background: linear-gradient(
      90deg,
      rgba(0, 198, 127, 0.2) 0%,
      rgba(0, 128, 194, 0.2) 99.93%
    );

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px; /* ovo je debljina border-a */
      background: linear-gradient(90deg, #00c67f, #0080c2);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  [class^="category artificial-intelligence"] {
    position: relative;
    color: white;
    background: linear-gradient(
      90deg,
      rgba(0, 145, 225, 0.2) 0%,
      rgba(255, 13, 71, 0.2) 99.93%
    );

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px; /* ovo je debljina border-a */
      background: linear-gradient(90deg, #0091e1, #ff0d47);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  [class^="category cyber-security"], [class^="category cloud-technology"], [class^="category cloud-technology"], [class^="category artificial-intelligence"] {
    &.category-light {
      color: var(--neutral-900);
    }
  }

.modal-speaker {
  .modal-content {
    padding: 0;
  }

  .modal-header {
    min-height: 0;
    height: 0;
    margin-bottom: 0;

    .modal-close {
      position: absolute;
      right: 2rem;
      top: 2rem;
    }
  }

  .speaker-modal {
    .speaker-img {
      display: flex;

      img {
        width: 11.2rem;
      }
    }

    .speaker-header {
      .speaker-block {
        display: flex;
        gap: 2.4rem;
        padding: 2.4rem;

        @media(max-width: 768px) {
          flex-direction: column;
          padding-top: 7rem;
        }

        .speaker-img {
          aspect-ratio: 1;

          img {
            object-fit: cover;

            @media(max-width: 768px) {
              width: 100%;
            }
          }
        }

        h3 {
          margin-bottom: 0;
          line-height: 1;
          font-size: 2.8rem;
          font-family: "Mona Sans SemiCondensed";
          font-weight: 700;
        }

        .speaker-data {
          display: flex;
          flex-direction: column;

          > span {
            color: white;
            font-size: 1.8rem;
            font-family: "Mona Sans SemiCondensed";
          }

          .speaker-categories {
            margin-top: auto;
            flex-wrap: wrap;
            align-items: baseline;

            .category {
              display: flex;
            }
          }
        }

        &.speaker-keynote {
          .speaker-img {
            background: linear-gradient(
              134.36deg,
              #029761 1.13%,
              #363c45 40.69%,
              #14161a 100.04%
            );
          }
        }

        &.speaker-vendor {
          .speaker-img {
            background: linear-gradient(
              134.36deg,
              #185f9e 1.13%,
              #363c45 40.69%,
              #14161a 100.04%
            );
          }
        }
      }
    }

    .speaker-description {
      color: #f3f4f6;
      padding: 4.8rem;
      line-height: 1.7;
      background-color: #24282e;
      letter-spacing: 0.5px;
      font-weight: 400;

      @media(max-width: 768px) {
        padding: 2.4rem;
      }
    }
  }
}

.expertise-section {
  h4 {
    color: var(--neutral-400);
    font-size: 2.4rem;
    font-family: "Mona Sans SemiCondensed";
  }

  h3,
  h4 {
    margin-bottom: 0;
  }

  p {
    font-size: 1.8rem;
    line-height: 1.6;
    color: rgba(243, 244, 246, 1);
  }

  &::before {
    display: none;
  }
}

.agenda-section, .workshop-intro-section {
  &::before {
    display: none;
  }

  .section-container {
    .row-between {
      .column {
        > h2 {
          margin-bottom: 1rem;
        }

        > strong {
          font-family: "Mona Sans SemiCondensed";
          font-size: 2.4rem;
          margin-bottom: 0;
          line-height: 1.3;
        }
      }
    }
  }
}

.agenda-section, .workshop-intro-section {
  hr {
    border: 0;
    border-bottom: 0.1rem solid var(--neutral-500);
    margin-block: 4rem;
  }
}

.agenda-wrapper {
  display: flex;
  gap: 8rem;

  .agenda-navigation {
    min-width: 29.3rem;
    width: fit-content;
    flex-shrink: 0;
    display: flex;
    height: fit-content;
    gap: 0.6rem;

    .agenda-selector {
      padding: 1.2rem 1.8rem;
      border-radius: 0.4rem;
      cursor: pointer;
      flex-basis: 50%;
      display: flex;
      flex-direction: column;

      span,
      strong {
        white-space: nowrap;
        font-weight: 500;
      }

      span {
        font-size: 1.2rem;
        color: var(--neutral-400);
      }

      strong {
        color: var(--neutral-300);
        font-size: 1.4rem;
      }

      &.active {
        background-color: white;

        span {
          color: var(--neutral-600);
        }

        strong {
          color: var(--neutral-900);
        }
      }

      &:not(.active) {
        &:hover {
          background-color: var(--neutral-700);

          span {
            color: var(--neutral-200);
          }

          strong {
            color: vwhite;
          }
        }
      }
    }

    @media (max-width: 768px) {
      width: unset;
    }

    @media (min-width: 1171px) {
      position: sticky;
      top: 14rem;
    }
  }

  .agenda-days {
    flex-grow: 1;

    .agenda-day {
      margin-bottom: 5rem;

      .agenda-day-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 2.4rem;
        font-family: "Mona Sans SemiCondensed";

        h3 {
          margin-bottom: 0;
        }
      }

      .agenda-items {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;

        h4 {
          margin-bottom: 0;
          font-weight: 600;
          font-size: 1.8rem;
          letter-spacing: 0.5px;
        }

        .agenda-item {
          display: flex;
          flex-basis: 100%;
          padding: 1.6rem 2.4rem;
          gap: 4rem;
          border-radius: 0.4rem;
          background: var(--neutral-900);
          border: 0.1rem solid var(--neutral-900);
          font-family: "Mona Sans SemiCondensed";

          .agenda-item-location {
            width: 12.5rem;
            flex-shrink: 0;

            strong {
              font-size: 1.8rem;
              font-weight: 500;
              font-variant-numeric: lining-nums tabular-nums;
            }

            p {
              font-size: 1.2rem;
              text-transform: uppercase;
              color: var(--neutral-400);
            }
          }

          .agenda-item-description {
            flex-grow: 1;

            .agenda-item-title {
              display: flex;
              align-items: center;
              gap: 1.2rem;
              color: white;

              .agenda-item-category {
                text-transform: uppercase;
                font-weight: 400;
                padding: 0.8rem 1.2rem;
                border-radius: 0.4rem;
                line-height: 1;
                width: fit-content;

                &.expert {
                  background-color: var(--blue-dark-500);
                  color: var(--blue-dark-100);
                }

                &.keynote {
                  background-color: var(--green-dark-500);
                  color: var(--green-dark-100);
                }
              }
            }

            .agenda-item-speakers {
              display: flex;
              flex-wrap: wrap;
              gap: 1.2rem;

              .agenda-item-speaker {
                display: flex;
                gap: 0.8rem;
                flex-wrap: wrap;
                align-items: center;

                p {
                  letter-spacing: 0.5px;

                  strong {
                    font-weight: 600;
                  }
                }

                .lnc {
                  padding: 0.5rem;
                  border: 1px solid var(--neutral-700);
                  font-size: 1.4rem;
                  border-radius: 0.4rem;
                  background-color: var(--neutral-800);
                }
              }
            }
          }

          .agenda-item-type {
            border: 1px solid var(--neutral-700);
            border-radius: 0.4rem;
            text-transform: uppercase;
            padding: 0.1rem 0.5rem;
            font-size: 1.2rem;
            height: fit-content;

            &:empty {
              display: none;
            }
          }

          &.session,
          &.panel-session,
          &.workshop {
            background: #262a31;
          }

          &.keynote {
            background: linear-gradient(
              0deg,
              rgba(4, 143, 93, 0.15),
              rgba(4, 143, 93, 0.15)
            );
            border-color: var(--green-400);

            .agenda-item-location {
              strong {
                color: var(--green-dark-300);
              }
            }

            .agenda-item-description {
              .agenda-item-speakers {
                .agenda-item-speaker {
                  .lnc {
                    background-color: var(--green-dark-500);
                    border-color: var(--green-dark-400);
                    color: var(--green-dark-300);
                  }
                }
              }
            }
          }

          &.party {
            background: linear-gradient(
              90deg,
              rgba(0, 145, 225, 0.2) 0.07%,
              rgba(255, 13, 71, 0.2) 100%
            );
            position: relative;
            border: 0;

            &::before {
              content: "";
              position: absolute;
              inset: 0;
              border-radius: inherit;
              padding: 1px;
              background: linear-gradient(90deg, #0091e1 0.07%, #ff0d47 100%);
              -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
              -webkit-mask-composite: xor;
              mask-composite: exclude;
              pointer-events: none;
            }
          }

          @media (max-width: 830px) {
            flex-wrap: wrap;
            align-items: unset;

            .agenda-item-description {
              order: 1;
              width: 100%;

              .agenda-item-title {
                flex-direction: column;
                align-items: unset;

                h4 {
                  order: 1;
                  margin-bottom: 2rem;
                  font-size: 2rem;
                }
              }
            }

            .agenda-item-type {
              margin-left: auto;
              height: fit-content;
            }

            .agenda-item-location {
              width: unset;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1170px) {
    flex-direction: column;
  }
}

.agenda-is-live {
  color: #ff0d47;
  font-weight: 600;
  animation: pulse 2s linear infinite;

  &::before {
    content: "";
    background-color: #ff0d47;
    width: 0.8rem;
    aspect-ratio: 1;
    display: inline-flex;
    border-radius: 50%;
    margin-right: 0.4rem;
  }

  &.disabled {
    display: none;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.agenda-blocks {
  display: flex;
  gap: 2rem;

  &:not(:last-child) {
    margin-bottom: 8rem;
  }

  .a-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "Mona Sans SemiCondensed";
    padding: 2.4rem;
    border-radius: 0.4rem;
    flex-basis: 50%;
    min-height: 24rem;

    .a-block-header {
      display: flex;

      .lnc {
        font-size: 2.4rem;
        margin-right: 0.8rem;
        position: relative;
        top: 0.4rem;
      }

      h4 {
        font-size: 2.6rem;
        margin-bottom: 5rem;
        line-height: 1.2;
        color: var(--blue-900);
      }
    }

    p {
      font-size: 1.8rem;
      color: var(--neutral-700);
    }
  }

  &.green-block {
    .a-block {
      background-color: #def3e5;

      .lnc {
        color: var(--green-600);
      }
    }
  }

  &.blue-block {
    .a-block {
      background-color: var(--blue-100);

      .lnc {
        color: var(--blue-600);
      }
    }
  }

  @media (max-width: 1270px) {
    flex-wrap: wrap;

    .a-block {
      flex-basis: calc(50% - 1rem);
    }
  }

  @media (max-width: 625px) {
    .a-block {
      flex-basis: 100%;
      min-height: unset;
    }
  }
}

.heading-cap {
  color: var(--neutral-400);
  font-size: 2.4rem;
  font-weight: 500;
}

.partners-section {
  h2 {
    color: white;
    margin-bottom: 8rem;
  }

  &::before {
    display: none;
  }
}

.partner-grid {
  margin-bottom: 8rem;

  .partner-grid-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.2rem;

    h3 {
      font-size: 4.8rem;
      margin-bottom: 0;
      line-height: 1;

      @media (max-width: 768px) {
        font-size: 3.4rem;
      }
    }

    a {
      font-size: 1.8rem;
      color: white;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      font-weight: 500;

      @media (max-width: 768px) {
        font-size: 1.4rem;
      }
    }
  }

  .partner-grid-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    gap: 0.8rem;

    .partner-grid-item {
      background-color: #1f2228;
      border: 1px solid #414853;
      height: 17rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.8rem;

      img {
        filter: brightness(0) invert(1);
        max-width: 40%;
        width: 100%;
        max-height: 30%;
      }

      @media (max-width: 768px) {
        height: unset;
        aspect-ratio: 16/10;

        img {
          max-width: 64%;
        }
      }
    }
  }

  &.partner-grid-compact {
    .partner-grid-body {
      grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
    }
  }

  &:not(.partner-diamond) {
    .partner-grid-body {
      @media (max-width: 768px) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }

  &.partner-diamond {
    h3 {
      background: linear-gradient(
        90deg,
        #c2f6da 0.07%,
        #679dd5 50.51%,
        #e5c3f9 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .partner-grid-body {
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }
  }

  &.partner-gold {
    h3 {
      background: linear-gradient(90deg, #c0b175 0.07%, #5c4c0d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &.partner-silver {
    h3 {
      background: linear-gradient(90deg, #f3f4f6 0.07%, #868c98 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &.partner-bronze {
    h3 {
      background: linear-gradient(92.11deg, #babeb2 1.79%, #474a38 93.71%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .partner-grid-body {
      grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));

      @media (max-width: 768px) {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
  }
}

.diamond-landing {
  position: relative;
  padding-top: 20rem;
  overflow: hidden;

  &::before {
    display: none;
  }

  h1 {
    font-size: 8rem;
    text-transform: uppercase;

    @media (max-width: 991px) {
      font-size: 3.4rem;
    }
  }

  .row {
    align-items: center;

    &.row-reverse {
      @media(max-width: 991px) {
        flex-direction: column-reverse;
      }
    }
  }

  .column:first-child {
    flex-basis: 55%;
  }

  .column:last-child {
    flex-basis: 45%;
  }

  .diamond-landing-img {
    img {
      width: 100%;
      max-width: 60rem;
      border-radius: 0.8rem;
    }
  }
}

.diamond-landing-intro {
  img {
    width: initial;
  }
}

.diamond-landing-bck {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 58%;

  @media (max-width: 991px) {
    width: 144%;
    top: 6vw;
  }
}

.diamond-about-section {
  &:before {
    display: none;
  }

  .diamond-about {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    flex-direction: column;
    max-width: 90rem;
    margin-inline: auto;

    img {
      margin-bottom: 0.4rem;
      width: 3.3rem;
    }

    h3 {
      margin-bottom: 2.4rem;
      margin-inline: auto;
    }

    p {
      font-size: 1.8rem;
    }
  }
}

.fotri-tech-section {
  .row {
    .column:first-child {
      flex-basis: 60%;
    }

    .column:last-child {
      flex-basis: 40%;
    }
  }

  h2 {
    margin-bottom: 2.4rem;

    ~ p {
      font-size: 1.8rem;
      margin-bottom: 2rem;
    }

    ~ strong {
      font-size: 1.8rem;
      margin-bottom: 5.4rem;
      display: block;
      font-weight: 600;
    }
  }

  img {
    border-radius: 0.8rem;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
}

.diamond-features {
  display: flex;
  gap: 2.4rem;

  .diamond-feature-item {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;

    .lnc {
      font-size: 3.2rem;
      background: linear-gradient(
        90deg,
        #c2f6da 0.07%,
        #679dd5 50.51%,
        #e5c3f9 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    p {
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.3;
      font-family: "Mona Sans SemiCondensed";
    }
  }
}

.diamond-features {
  @media (max-width: 991px) {
    flex-wrap: wrap;

    .diamond-feature-item {
      flex-basis: calc(50% - 2rem);

      p {
        font-size: 1.8rem;
      }
    }
  }
}

.meet-solutions-section {
  h2 {
    margin-bottom: 5rem;
    margin-inline: auto;
    text-align: center;
  }

  .section-container {
    max-width: 108rem;
  }
}

.exclusive-resources-section {
  color: var(--neutral-900);

  .section-container {
    padding-block: 9.4rem;
    border-radius: .4rem;

    @media (min-width: 992px) {
      padding-inline: 9.4rem;
    }

    .t-big {
      margin-bottom: 3rem;
    }
  }
}

.connect-fortinet-section {
  h2 {
    margin-bottom: 2.4rem;
  }

  p {
    margin-bottom: 6.4rem;
  }

  img {
    border-radius: .8rem;
  }
}

.meet-solutions-grid {
  display: flex;
  gap: 6rem;

  .meet-solutions-item {
    flex-basis: 100%;
    h4 {
      margin-bottom: 2rem;
      background: linear-gradient(
        90deg,
        #c2f6da 0.07%,
        #679dd5 50.51%,
        #e5c3f9 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  @media(max-width: 768px) {
    flex-direction: column;

    .meet-solutions-item {
      h4 {
        margin-bottom: 1rem;
      }
    }
  }
}

.exclusive-resources-section {
  .section-container {
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
      linear-gradient(94.81deg, rgba(194, 246, 218, 0.5) 0%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(85.25deg, rgba(255, 255, 255, 0) 0%, rgba(152, 182, 226, 0.5) 101.19%);
  }
}

.blog {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem;

  @media (max-width: 1120px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.post {
  .post-body {
    .post-title {
      font-size: 2.4rem;
      margin-bottom: 1.6rem;
    }
  }
}

#post {
  .contact-form {
    padding: 0;
  }
}

.post-wrapper {
  max-width: 82.8rem;

  p,
  li {
    margin-bottom: 2.5rem;
    line-height: 1.4;
    font-size: 1.8rem;

    > span {
      font-size: inherit;
    }
  }

  a {
    font-size: inherit;
    color: var(--neutral-900);

    &:hover {
      text-decoration: underline;
    }

    * {
      font-size: inherit;
      color: inherit;
    }
  }

  h2 {
    font-size: 2.8rem;
    color: var(--neutral-900);
  }

  h3 {
    font-size: 2rem;
  }

  strong {
    font: inherit;
    font-weight: 700;
  }

  iframe,
  video {
    width: 100%;
    border: 0;
  }

  ul {
    padding-left: 1.7rem;
  }

  li {
    padding-left: 0.5rem;
    list-style: disc;
  }

  > .section-heading {
    margin-bottom: 1.6rem;
    margin-top: 4.8rem;
    font-size: 4.8rem;
    font-weight: 500;
    font-family: "Mona Sans SemiCondensed";

    @media (max-width: 991px) {
      font-size: 2.4rem;
      text-align: left;
      line-height: 1.4;
    }
  }

  > div {
    font-size: 1.6rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 15px;
    text-align: inherit;
    font-family: "Mona Sans";

    span,
    strong {
      font-size: inherit;
    }
  }

  h1 {
    font-weight: 500;
  }

  .featured-image, .featured-video {
    display: flex;
    margin-bottom: 4rem;
    border-radius: .4rem;
    overflow: hidden;
  }

  b {
    font-size: inherit;
  }
}

.post-section {
  padding-top: 16rem;
  background-color: var(--neutral-100);
}

.blog-section{
  padding-top: 12rem;
}

.gallery-section {
  padding-block: 12rem 0;

  @media (max-width: 991px) {
    padding-block: 16rem 0;
  }
}

.blog-landing, .gallery-landing {
  background:
    url(../images/hexa-blur.svg),
    linear-gradient(var(--blue-900), var(--blue-900));
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  min-height: 38.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;

  h1 {
    text-transform: uppercase;
    font-size: 7.2rem;

    @media (max-width: 991px) {
      font-size: 3.4rem;
    }
  }

  .page-pill {
    margin-bottom: 2.4rem;
  }
}

.gallery-landing {
  background: unset;
  height: 48rem;
  overflow: hidden;

  .section-container {
    height: inherit;
  }

  .swiper {
    margin: 0;
  }

  .row {
    height: inherit;

    .column:first-child {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .picture-container {
        aspect-ratio: 1;
    height: 25.6rem!important;
    margin-bottom: 1.2rem;

    img {
      aspect-ratio: 1;
      object-fit: cover;
    }
  }
}

.vertical-sliders {
  display: flex;
  gap: 1.2rem;
  height: 48rem;

  .swiper-wrapper {
    height: 78rem;
  }

  @media (max-width: 991px) {
    padding-inline: 0rem;
  }

  @media(min-width: 992px) {
    justify-content: flex-end;
  }
  
}

.post {
  padding: 1.6rem;
  background-color: white;
  border-radius: 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;

  .post-image {
    border-radius: 0.4rem;
    aspect-ratio: 16/9;
    margin-bottom: 1.3rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0.4rem;
      aspect-ratio: 16 / 9;
    }
  }

  .post-body {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .category {
    order: unset;
  }
}

.categories {
  display: flex;
  gap: 0.7rem 0.4rem;
  flex-wrap: wrap;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;

  .post-date {
    color: var(--neutral-600);
  }
}

.blog-container-section,
.blog-section {
  background-color: #f9fafb;
}

.blog-container-section {
  padding-top: 0;
}

.featured {
  display: flex;
  padding: 2.4rem;
  border-radius: 1.2rem;
  background-color: white;
  margin-bottom: 4rem;

  .featured-left {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;

    h3 {
      font-size: 3.2rem;
      line-height: 1.4;
    }

    .category {
      order: unset;
    }

    @media(max-width: 991px) {
      padding: 0 0 2.4rem 0;
    }
  }

  .featured-left,
  .featured-right {
    flex-basis: 50%;
  }

  .featured-right {
    img {
      border-radius: 0.4rem;
    }
  }

  @media (max-width: 991px) {
    flex-direction: column;
  }
}

.featured-highlight {
  font-family: "Mona Sans SemiCondensed";
  text-transform: uppercase;
  color: var(--green-600);
  letter-spacing: 0.1rem;
  font-weight: 500;
  margin-bottom: 1.3rem;
}

.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  h2 {
    line-height: 1.4;
  }

  .blog-filter {
    display: flex;
    gap: .6rem;

    a {
      font-size: 1.4rem;
      padding: 1rem 1rem;
      display: flex;
      align-items: center;
      border: .1rem solid transparent;
      border-radius: .4rem;
      font-weight: 500;
      color: var(--neutral-700);

      strong {
        font: inherit;
        margin-right: .4rem;
      }

      &:hover {
        &:not(.active) {
          background-color: var(--neutral-300);
        }
      }

      .lnc {
        display: none;
        font-size: 1.8rem;
        color: var(--green-500);
        margin-right: .8rem;
      }

      &.active {
        border-color: var(--neutral-400);
        background-color: var(--neutral-900);
        color: white;

        .lnc {
          display: flex;
        }
      }
    }
    
  }

  @media(max-width: 768px) {
    flex-direction: column;
  }
}

#loader {
  justify-content: center;
  padding: 3rem 0;

  #clock {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  svg {
    max-height: 10rem;
  }
}

.post-container {
  display: flex;
  gap: 12rem;

  #latest-posts {
    width: 34rem;

    h4 {
      margin-bottom: 1.6rem;
    }

    .post {
      padding: 1.6rem;
      margin-bottom: 1.6rem;

      a {
        font-size: 1.8rem;
        font-weight: 500;
        margin-bottom: 1.6rem;
      }
    }
  }
}

.tech-announcement {
  padding: 2.4rem;
  background-color: var(--green-100);
  border: .1rem solid var(--green-300);
  border-radius: .8rem;
  margin-bottom: 2.4rem;

  h3 {
    line-height: 1;
    font-size: 2.4rem;
    color: var(--neutral-900);
    margin-bottom: .8rem;
  }

  p {
    color: var(--green-700);
    font-size: 1.8rem;
  }
}

.back-to-blog {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  color: var(--neutral-700);
  font-weight: 500;

  .lnc {
    margin-right: .8rem;
    font-size: 1.8rem;;
  }
}

.post-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.4rem;
  align-items: center;

  .post-meta {
    justify-content: flex-start;
    gap: 1.6rem;
  }
}

.copy-link {
  color: var(--neutral-600);
  cursor: pointer;

  .lnc {
    font-size: 1.6rem;
    margin-left: .5rem;
  }
}

.interview-speaker {
  display: flex;
  align-items: center;
  color: var(--neutral-700);
  font-weight: 500;
  font-size: 1.8rem;

  .lnc {
    background-color: var(--neutral-800);
    border: .1rem solid var(--neutral-700);
    color: var(--neutral-300);
    border-radius: .4rem;
    display: inline-flex;
    width: 2.6rem;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-right: 1rem;
  }
}

.mobile-only {
  @media(min-width: 992px) {
    display: none;
  }
}

.swiper {
  .swiper-wrapper {
    transition-timing-function: linear !important;
  }
}

.vertical-sliders {
  --fade-size: 0px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent var(--fade-size),
    black calc(var(--fade-size) + 7rem),
    black calc(100% - var(--fade-size) - 25rem),
    transparent calc(100% - var(--fade-size))
  );
  mask-image: linear-gradient(
    to bottom,
    transparent var(--fade-size),
    black calc(var(--fade-size) + 7rem),
    black calc(100% - var(--fade-size) - 25rem),
    transparent calc(100% - var(--fade-size))
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  @media (max-width: 991px) {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent var(--fade-size),
      black calc(var(--fade-size) + 9rem),
      black calc(100% - var(--fade-size) - 9rem),
      transparent calc(100% - var(--fade-size))
    );
    mask-image: linear-gradient(
      to bottom,
      transparent var(--fade-size),
      black calc(var(--fade-size) + 9rem),
      black calc(100% - var(--fade-size) - 9rem),
      transparent calc(100% - var(--fade-size))
    );
  }
}

.ticker-v-wrap {
  overflow: hidden;
  position: relative;
  width: 25.6rem;
}

.ticker-v-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.ticker-v-track .picture-container {
    flex: none;
}

@keyframes ticker-v-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes ticker-v-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

.gallery-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  gap: 1.6rem;

  .gallery-item {
    aspect-ratio: 1;
    position: relative;
    border-radius: .4rem;
    overflow: hidden;

    img {
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    .gallery-item-title {
      position: absolute;
      z-index: 2;
      left: 2.4rem;
      bottom: 2.4rem;
      font-size: 3.2rem;
      line-height: 1;
      margin-bottom: 0;

      span {
        font-size: 2.4rem;
        font-weight: 400;
      }
    }

    &.gallery-item-data {
      &:before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
      }
    }

    &.gallery-2025 {
      &::before {
        background: linear-gradient(180deg, rgba(3, 43, 29, 0) 0%, rgba(3, 43, 29, 0.8) 57.78%, #032B1D 100%);
      }

      .gallery-item-title {
        color: var(--green-500);
      }
    }

    &.gallery-2024 {
      &::before {
        background: linear-gradient(180deg, rgba(31, 49, 68, 0) 0%, rgba(31, 49, 68, 0.8) 57.78%, #1F3144 100%);
      }

      .gallery-item-title {
        color: var(--blue-dark-300);
      }
    }

    &.gallery-2023 {
      &::before {
        background: linear-gradient(180deg, rgba(53, 49, 20, 0) 0%, rgba(53, 49, 20, 0.8) 57.78%, #353114 100%);
      }

      .gallery-item-title {
        color: var(--yellow-dark-200);
      }
    }

    &.gallery-2022 {
      &::before {
        background: linear-gradient(180deg, rgba(3, 43, 29, 0) 0%, rgba(3, 43, 29, 0.8) 57.78%, #032B1D 100%);
      }

      .gallery-item-title {
        color: var(--green-500);
      }
    }

    &.gallery-2021 {
      &::before {
        background: linear-gradient(180deg, rgba(76, 26, 40, 0) 0%, rgba(76, 26, 40, 0.8) 57.78%, #4C1A28 100%);
      }

      .gallery-item-title {
        color: var(--red-dark-300);
      }
    }
  }
}

.image-modal {
  position: fixed;
  inset: 50px;
  z-index: 9999;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;

  @media(max-width: 991px) {
    inset: 0;
  }

  &::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 12, 22, 0.5);
    backdrop-filter: blur(20px);
  }

  .current-image {
    width: 100%;
    height: 100%;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    max-height: 85vh;
    position: relative;
  }

  > img {
      border-radius: .4rem;
      object-fit: contain;
      display: block;
      max-width: calc(100% - 3rem);
      height: fit-content;
      max-height: 85vh;
      width: fit-content;

      @media(max-width: 991px) {
        max-width: calc(100% - 7.3rem);
      }
    }

    .next-image,
    .prev-image {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 6rem;
      user-select: none;
      position: fixed;
      top: 0;
      bottom: 0;

      .lnc {
        display: block;
        max-height: 3rem;
        min-width: 3rem;
        color: white;
        font-size: 2.4rem;

        @media(max-width: 991px) {
          height: 100%;
        }
      }

      @media(max-width: 991px) {
        padding: 1rem;
      }
    }

    .next-image {
      right: 0;
    }

    .prev-image {
      left: 0;
    }

  .image-close {
    color: white;
    position: fixed;
    bottom: 2rem;
    z-index: 2;
    cursor: pointer;
    max-height: 2.4rem;
    font-size: 2.4rem;
  }

  &.modal-out {
    .current-image {
      img {
        animation: imageOut .4s ease-in forwards;
      }
    }

    &::after {
      animation: blurOut .4s linear .4s forwards;
    }
  }
}

@keyframes imageOut {
  from {
    max-height: 85vh;
    transform: translate(0, 0);
  }

  to {
    max-height: 0vh;
    transform: translate(50vw, -68vh);
  }
}

@keyframes blurOut {
  from {
    backdrop-filter: blur(20px);
    background-color: rgba(0, 12, 22, 0.5);
  }

  to {
    
    backdrop-filter: blur(0);
    background-color: rgba(0, 12, 22, 0);
  }
}

.form-element-inline {
  display: flex;
}

.unsubscribe-section {
  padding-top: 16rem;

  h1 {
    text-align: center;
    font-size: 6.4rem;
  }

  form {
    display: flex;
    justify-content: center;
  }

  input {
    max-width: 40rem;
  }

  .form-element-inline {
    gap: 1.2rem;
  }
}

.workshops-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  gap: 2.4rem;

  @media(max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

.workshop {
  display: flex;
  flex-direction: column;
  background-color: #262A31;

  .btn-workshop {
    background-color: #262A31;
    height: 4.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 2.4rem;
    font-size: 1.6rem;
    border-top: .1rem solid var(--neutral-600);
    cursor: pointer;

    span {
      color: var(--green-dark-300);
      font-weight: 500;
      font-family: "Mona Sans SemiCondensed";
    }

    .lnc {
      font-size: inherit;
      color: var(--green-dark-300);
    }

    span, .lnc {
      font-size: inherit;
    }
  }

  .workshop-container {
    padding: 2.4rem;
  }

  .workshop-body {

    h3 {
      font-size: 2.2rem;
      font-weight: 600;
      margin-bottom: .8rem;
    }

    .workshop-description {
      font-family: "Mona Sans SemiCondensed";
      margin-bottom: 1.2rem;
      font-size: 1.6rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    .note {
      margin-top: 1.6rem;
      border: .1rem solid var(--neutral-700);
      width: fit-content;
      border-radius: .4rem;
      padding: .6rem;
      text-transform: uppercase;
      font-size: 1rem;
      letter-spacing: .2rem;
      font-weight: 500;
      line-height: 1;
      font-family: "Mona Sans SemiCondensed";
    }
  }
}

.workshop-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.6rem;

  .workshop-speaker-image {
    width: 4.8rem;
    height: 4.8rem;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: .4rem;
    border: .1rem solid var(--neutral-700);
    background-color: var(--neutral-800);

    img {
      height: 100%;
      object-fit: cover;
      flex-shrink: 0;
    }
  }

  .workshop-speaker-text {
    h4 {
      margin-bottom: 0;
      font-size: 1.6rem;
      font-weight: 600;
    }

    p {
      font-size: 1.2rem;
    }
  }
}

.workshop-datetime {
  font-variant-numeric: lining-nums tabular-nums;
  text-transform: uppercase;
  letter-spacing: .15rem;
  font-family: "Mona Sans SemiCondensed";
  margin-bottom: 1.6rem;
}

.modal-workshop {
  .modal-content {
    padding: 0;

    .modal-header, .workshop-header {
      margin-bottom: 0;
    }

    .modal-close {
      position: absolute;
      top: 2.4rem;
      right: 2.4rem;
    }
  }

  .modal-body {
    padding: 4rem;
    background-color: #24282E;
    border-top: .1rem solid var(--neutral-700);

    @media(max-width: 800px) {
      padding: 2rem;
    }
  }

  .workshop-header {
    padding: 2.4rem;

    .workshop-speaker-image {
      width: 8rem;
      height: 8rem;
    }

    .workshop-speaker-text {
      height: 8rem;
      h4 {
        font-size: 2.6rem;
        font-weight: 700;
        line-height: 1;
      }

      p {
        font-size: 1.6rem;
      }

      .workshop-datetime {
        font-size: 1.2rem;
        margin-top: 1.3rem;
      }
    }
  }
}

.form-split {
  display: flex;
  color: white;
  gap: 4rem;

  .form-column {
    flex-basis: 45%;

    &.workshop-data-column {
      flex-basis: 55%;

      h3 {
        line-height: 1.2;
        margin-bottom: 2rem;
      }
    }
  }

  @media(max-width: 800px) {
    flex-direction: column;

    .categories {
      margin-bottom: 2rem;
    }
  }
}

.hidden-field {
  display: none;
}

#contact-form-workshop {
  background-color: var(--neutral-900);
  border-radius: .8rem;

  #send-button {
    width: 100%;
  }
}

.help-block {
  &.with-errors {
    .list-unstyled {
      list-style: none;

      li {
        color: var(--red-500);
        font-size: 1.4rem;
        margin-top: 0.5rem;
      }
    }
  }
}

.message-on-submit {
  display: none;
  margin-top: 1rem;

  &.not-send {
    display: flex;
    color: var(--red-300);
  }
}

.modal-note {
  text-align: center;
  color: var(--neutral-600);
  font-weight: 500;
}

.program-desc-section {
  background-color: #F9FAFB;

  h3 {
    color: var(--neutral-900);
  }
}

.exhibit-landing {
  position: relative;
  padding-top: 20rem;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg width='1527' height='926' viewBox='0 0 1527 926' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_fn_3131_3881)'%3E%3Cpath d='M1052.94 1003.33L476.113 1720.86C450.374 1752.88 409.568 1768.8 368.957 1762.68L-532.891 1626.65C-574.005 1620.45 -608.609 1592.61 -623.481 1553.76L-949.691 701.685C-964.381 663.315 -957.585 620.026 -931.846 588.008L-355.019 -129.527C-329.28 -161.545 -288.474 -177.469 -247.863 -171.343L653.985 -35.3194C695.099 -29.1183 729.703 -1.27578 744.575 37.5692L1070.78 889.649C1085.47 928.019 1078.68 971.308 1052.94 1003.33Z' fill='url(%23paint0_radial_3131_3881)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_fn_3131_3881' x='-1405.33' y='-620.636' width='2931.75' height='2832.61' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='224' result='effect1_foregroundBlur_3131_3881'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.66666668653488159 0.66666668653488159' stitchTiles='stitch' numOctaves='3' result='noise' seed='5931' /%3E%3CfeColorMatrix in='noise' type='luminanceToAlpha' result='alphaNoise' /%3E%3CfeComponentTransfer in='alphaNoise' result='coloredNoise1'%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 '/%3E%3C/feComponentTransfer%3E%3CfeComposite operator='in' in2='effect1_foregroundBlur_3131_3881' in='coloredNoise1' result='noise1Clipped' /%3E%3CfeFlood flood-color='rgba(255, 255, 255, 0.05)' result='color1Flood' /%3E%3CfeComposite operator='in' in2='noise1Clipped' in='color1Flood' result='color1' /%3E%3CfeMerge result='effect2_noise_3131_3881'%3E%3CfeMergeNode in='effect1_foregroundBlur_3131_3881' /%3E%3CfeMergeNode in='color1' /%3E%3C/feMerge%3E%3C/filter%3E%3CradialGradient id='paint0_radial_3131_3881' cx='0' cy='0' r='1' gradientTransform='matrix(576.402 -816.542 -734.579 -519.001 60.547 795.667)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.442308' stop-color='%2300050A' stop-opacity='0'/%3E%3Cstop offset='0.879808' stop-color='%230091E1'/%3E%3Cstop offset='1' stop-color='%2300E090'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: cover;
  background-repeat: no-repeat;

  h1 {
    text-transform: uppercase;
    font-size: 8rem;

    @media(max-width: 991px) {
      font-size: 4.4rem;
    }
  }

  p {
    font-size: 2rem;
  }

  img {
    aspect-ratio: 1/1;
    object-fit: cover;
    max-width: 60rem;
  }

  &.dark-section {
    &::before {
      display: none
    }
  }
}

.demo-booths {
  position: relative;
}

.live-tech-section {
  position: relative;

  @media(min-width: 992px) {
    margin-bottom: 16rem;
  }

  .column {
    &:first-child {
      img {
        aspect-ratio: 48.3 / 58.8;
        object-fit: cover;
        max-width: 48.3rem;
      }
    }

    &:last-child {
      p {
        font-size: 1.8rem;
      }
    }
  }

  img {
    border-radius: .8rem;
  }

  h2 {
    margin-bottom: 2.4rem;
  }
}

.floating-live-tech {
  max-width: 72.5rem;
  margin-inline: auto;
  display: block;

  @media(min-width: 992px) {
    position: absolute;
    left: 50%;
    bottom: -50%;
    transform: translate(-50%, -50%);
  }
}

.exhibit-plans-section {
  h2 {
    text-align: center;
    line-height: 1.1;
    margin-bottom: 8rem;

    strong {
      display: block;
      background: linear-gradient(95.84deg, #0091E1 31.48%, #FF0D47 75.31%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.exhibit-plan, .party-sponsor {
  max-width: 108rem;
  margin-inline: auto;
  gap: 4rem;
  display: flex;
  flex-direction: column;
}

.exhibit-block {
  display: flex;
  background-color: #1F2228;
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid #414853;
  min-height: 42rem;

  .exhibit-block-left {
    flex-basis: 60%;
    padding: 4.8rem;
    display: flex;
    flex-direction: column;

    h3 {
      margin-bottom: 2.4rem;
    }

    p {
      font-size: 1.8rem;
    }

    .btn {
      margin-top: auto;
    }
  }

  .exhibit-block-right {
    flex-basis: 40%;

    &.floor-img {
      background-color: #00050a;
      box-shadow: -32px 32px 50px 0px #000000B2 inset;
      background-image: url("..//images/floor-plan-part.png");
      background-size: 101%;
      aspect-ratio: 46/42;
      background-repeat: no-repeat;
      background-position: center;
    }

    &:not(.floor-img) {
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }

  @media(max-width: 870px) {
    flex-direction: column;
  }
}

.party-sponsor {
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
    linear-gradient(94.81deg, rgba(194, 246, 218, 0.5) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(85.25deg, rgba(255, 255, 255, 0) 0%, rgba(152, 182, 226, 0.5) 101.19%);
  border-radius: .4rem;
  line-height: 1.2;

  h3 {
    color: var(--neutral-900);
    margin-bottom: 1rem;
  }

  @media(max-width: 991px) {
    padding: 3rem;
  }

  @media(min-width: 992px) {
    padding: 8rem;
  }

}

.friends-partners-section {
  overflow-x: auto;

  h2 {
    margin-bottom: 2.4rem;

    strong {

      &:first-of-type {
        color: var(--green-dark-300);
      }

      &:last-of-type {
        color: var(--blue-dark-300);
      }
    }
  }

  p {
    margin-bottom: 1.4rem;
    font-size: 1.8rem;

    &:last-of-type {
      margin-bottom: 4.4rem;
    }
  }

  .btn {
    margin-bottom: 4rem;
  }

  .swiper {

    @media(min-width: 1330px) {
      width: 70rem;
    }

    img {
      filter: brightness(0) invert(1);
    }
  }

  .row {
    @media(max-width: 1329px) {
      flex-direction: column;
    }
  }
}

.image-combo {
  position: relative;
  display: flex;
  justify-content: flex-end;
  aspect-ratio: 1 / .9;
  width: 100%;
  height: 100%;

  .image-combo-large {
    width: 70%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: top;
  }

  .image-combo-small {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 45%;
  }

  img {
    border-radius: .8rem;
  }
}

.tech-sponsor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  h2 {
    margin-inline: auto;
    margin-bottom: 4rem;
    line-height: 1.2;
  }
}

.exhibit-main {
  background-image: url("../images/exhibit-bck.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.testimonial-carousel {
  @media(min-width: 1200px) {
    min-height: 94rem;
  }
}

/* cookie - start */

.cookie {
  position: fixed;
  bottom: -40%;
  z-index: 9999;
  left: 0px;
  right: 0px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  transition: all 0.3s linear;
}

.button_container {
  margin: 0 auto;
  text-align: center;
}

.cookie > div {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;

  @media (max-width: 991px) {
    flex-direction: column;
  }
}

.cookie_text {
  line-height: 1.2;
  color: var(--h2-color);
  font-size: 1.6rem;
}

.cookie_link {
  text-decoration: underline;
}

.button_container {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

/* cookie - end */

/* loader - start */

  .hex-loader {
    position: relative;
    width: 60px;
    height: 52px;
  }

  .hex-loader::before,
  .hex-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(
      25% 0%, 75% 0%, 100% 50%,
      75% 100%, 25% 100%, 0% 50%
    );
  }

  .hex-loader::before {
    background: #00e090;
    animation: hexSpin 1.1s linear infinite,
               hexPulse 1.1s ease-in-out infinite;
  }

  .hex-loader::after {
    background: #f9fafb;
    inset: .8rem;
    clip-path: polygon(
      25% 0%, 75% 0%, 100% 50%,
      75% 100%, 25% 100%, 0% 50%
    );
  }

  @keyframes hexSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(0.85); }
    100% { transform: rotate(360deg) scale(1); }
  }

  @keyframes hexPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }

  /* loader - end */