@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Monofett&display=swap");
:root {
  /* Define color variables */
  /* --segment-color-1: #f18324;
  --segment-color-2: #cb7128;
  --segment-color-3: #f7b21b;
  --segment-color-4: #fad778; */

  --segment-color-1: #c2e015;
  --segment-color-2: #e7eb09;
  --segment-color-3: #89a726;
  --segment-color-4: #3f4c0f;

  --sub-segment-1-color-1: #391335;
  --sub-segment-1-color-2: #5a2059;
  --sub-segment-1-color-3: #22161f;

  --sub-segment-2-color-1: #2d778f;
  --sub-segment-2-color-2: #55969e;
  --sub-segment-2-color-3: #1f4c5e;
  --sub-segment-2-color-4: #122e38;
}
/* * {
  outline: 1px solid red;
} */

html {
  overflow-y: scroll;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}
body {
  overflow-y: hidden;
  position: relative;
  height: unset;
  color: #fff;
}
::selection {
  color: #000;
  background: var(--segment-color-1);
}
html,
body {
  overflow-x: hidden;
  margin: 0;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}
h1,
h2,
h3 {
  color: #fff;
}
.rich-gold {
  background: rgb(247, 180, 30);
  background: linear-gradient(
    90deg,
    rgba(247, 180, 30, 1) 0%,
    rgba(253, 203, 63, 1) 100%
  );
}
.power-petrol {
  background: rgb(20, 84, 100);
  background: linear-gradient(
    90deg,
    rgba(20, 84, 100, 1) 0%,
    rgba(8, 120, 141, 1) 100%
  );
}
.deep-green {
  background: rgb(6, 48, 50);
  background: linear-gradient(
    90deg,
    rgba(6, 48, 50, 1) 0%,
    rgba(2, 28, 30, 1) 100%
  );
}
.dark-aubergine {
  background: rgb(37, 15, 36);
  background: linear-gradient(
    90deg,
    rgba(37, 15, 36, 1) 0%,
    rgba(62, 8, 58, 1) 100%
  );
}
.dark-charcoal {
  background: rgb(57, 52, 50);
  background: linear-gradient(
    90deg,
    rgba(57, 52, 50, 1) 0%,
    rgba(74, 66, 65, 1) 100%
  );
}
.fresh-citrus {
  background: rgb(188, 213, 52);
  background: linear-gradient(
    90deg,
    rgba(188, 213, 52, 1) 0%,
    rgba(237, 232, 18, 1) 100%
  );
}
.pink-team {
  background: rgb(244, 148, 139);
  background: linear-gradient(
    90deg,
    rgba(244, 148, 139, 1) 0%,
    rgba(243, 123, 115, 1) 100%
  );
}
.red-team {
  background: rgb(237, 32, 46);
  background: linear-gradient(
    90deg,
    rgba(237, 32, 46, 1) 0%,
    rgba(152, 26, 31, 1) 100%
  );
}
.fresh-citrus-color {
  background: linear-gradient(
    90deg,
    rgba(188, 213, 52, 1) 0%,
    rgba(237, 232, 18, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rich-gold-color {
  background: linear-gradient(
    90deg,
    rgba(247, 180, 30, 1) 0%,
    rgba(253, 203, 63, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dark-aubergine-color {
  background: linear-gradient(
    90deg,
    rgba(37, 15, 36, 1) 0%,
    rgba(62, 8, 58, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fresh-citrus.txt::before {
  display: block;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  color: hsla(0, 0%, 100%, 0.28);
  font-weight: 900;
  font-style: italic;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: "OUR";
  font-size: 27vw;
}
.rich-gold.txt::before {
  display: block;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  color: hsla(0, 0%, 100%, 0.144);
  font-weight: 900;
  font-style: italic;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: "STORY";
  font-size: 27vw;
}
.dark-aubergine.txt::before {
  display: block;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  color: hsla(0, 0%, 100%, 0.144);
  font-weight: 900;
  font-style: italic;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: "BEGINS";
  font-size: 27vw;
}
html,
body {
  margin: 0;
  background-color: #000;
}

.fs-large {
  font-size: 6vw;
}
.intro-text > .fs-large {
  font-weight: 700;
  line-height: 90%;
}
.fw-900 {
  font-weight: 900;
}
.intro-text {
  color: #000000;
  text-transform: uppercase;
  font-weight: 900;
}

.full-screen {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(images/stick.png);
  background-size: 40%; /* Adjust the size of the background image */
  background-position: bottom right; /* Keep the image in the bottom right */
  background-repeat: no-repeat !important; /* Force no-repeat */
}

.z-100 {
  z-index: 100;
}
#masthead {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 9999;
}
#masthead a {
  padding: 1rem 2rem;
}
.btn:hover {
  border-color: #889d00;
  color: #546103;
}
.logo {
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#panels #panels-container {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
  overflow: hidden;
  background-color: #ddd;
}
#panels #panels-container .panel {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #333;
  text-align: left;
}

#panels #panels-container .panel .panels-navigation {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#panels #panels-container .panel .anchor-panel,
#panels #panels-container .panel .nav-panel {
  color: #000;
  text-transform: uppercase;
  margin-right: 2rem;
}
#panels #panels-container .panels-navigation {
  position: absolute;
  width: 100%;
  bottom: 2rem;
  right: 2rem;
}
.ime {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #000;
  margin-bottom: 0px;
}
.mw-75 {
  width: 75px;
  object-fit: cover;
  height: 75px;
}
.quick-info {
  background-color: #fff;
  padding: 20px;
  width: 85%;
  border-radius: 40px;
  display: flex;
  justify-content: space-between;
}
.accordion-button:not(.collapsed) {
  box-shadow: none !important;
}
.accordion-button::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/> </svg>') !important;
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: right;
  color: transparent !important;
  font-size: 1.3em;
}
/* Transparent table, no background, minimal borders, and white text */
.table {
  background-color: transparent !important; /* Remove background */
  border: none; /* Remove borders */
  color: white; /* Set text to white */
}

.table th,
.table td {
  border: none; /* Remove cell borders */
  padding: 8px; /* Optional: reduce padding for minimal look */
}
.accordion-button:focus {
  box-shadow: none !important;
}
.modul-title {
  color: #000;
  font-weight: 900;
}
.list-group-item {
  border-color: rgb(
    0,
    0,
    0
  ); /* Set the border color, e.g., a light white with some transparency */
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0) !important;
}
.table thead th {
  font-weight: bold; /* Bold headers */
  color: white; /* Ensure header text is white */
  text-transform: uppercase;
}
.table > :not(caption) > * > * {
  background-color: transparent !important;
  color: #fff;
}
.table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Optional: add minimal bottom border for rows */
}

.table tbody tr:last-child {
  border-bottom: none; /* Remove bottom border for the last row */
}

.accordion-item {
  background-color: transparent !important;
}
.accordion-button {
  background-color: transparent !important;
}
.prezime {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 900;
  color: #000;
  padding-bottom: 20px;
}
.logo-container {
  width: 300%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.logo-segment {
  opacity: 1;
  overflow: hidden;
  position: relative;
}
/*segment 1*/
#segment1 {
  background-color: var(--sub-segment-2-color-1);
  height: 5.6%;
}
.sub-segment-1 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-2 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 2*/
#segment2 {
  height: 1.6%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-3 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-4 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 3*/
#segment3 {
  height: 1.5%;
  background-color: var(--sub-segment-2-color-3);
}
.sub-segment-5 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-6 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 4*/
#segment4 {
  background-color: var(--sub-segment-2-color-1);
  height: 1%;
}
.sub-segment-7 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-8 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 5*/
#segment5 {
  height: 16.1%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-9 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-10 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 6*/
#segment6 {
  background-color: var(--sub-segment-2-color-3);
  height: 1.5%;
}
.sub-segment-11 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-12 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 7*/
#segment7 {
  height: 5%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-13 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-14 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 8*/
#segment8 {
  background-color: var(--sub-segment-2-color-3);
  height: 1.5%;
}
.sub-segment-15 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-16 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 9*/
#segment9 {
  height: 5.1%;
  background-color: var(--sub-segment-2-color-1);
}
.sub-segment-17 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-18 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 10*/
#segment10 {
  background-color: var(--sub-segment-2-color-2);
  height: 1.5%;
}
.sub-segment-19 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-20 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 11*/
#segment11 {
  height: 4.1%;
  background-color: var(--sub-segment-2-color-1);
}
.sub-segment-21 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-22 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 12*/
#segment12 {
  height: 1.5%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-23 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-24 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 13*/
#segment13 {
  height: 4.1%;
  background-color: var(--sub-segment-2-color-1);
}
.sub-segment-25 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-26 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 14*/
#segment14 {
  height: 1.5%;
  background-color: var(--sub-segment-2-color-3);
}
.sub-segment-27 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-28 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 15*/
#segment15 {
  background-color: var(--sub-segment-2-color-1);
  height: 3%;
}
.sub-segment-29 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-30 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 16*/
#segment16 {
  height: 1.5%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-31 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-32 {
  background-color: var(--segment-color-4);
  z-index: 2;
}

/*segment 17*/
#segment17 {
  height: 3%;
  background-color: var(--sub-segment-2-color-4);
}
.sub-segment-33 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-34 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 18*/
#segment18 {
  background-color: var(--sub-segment-2-color-1);
  height: 1.5%;
}
.sub-segment-35 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-36 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 19*/
#segment19 {
  height: 2.1%;
  background-color: var(--sub-segment-2-color-3);
}
.sub-segment-37 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-38 {
  background-color: var(--segment-color-4);
  z-index: 2;
}

/*segment 20*/
#segment20 {
  height: 1.5%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-39 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-40 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 21*/
#segment21 {
  height: 2.1%;
  background-color: var(--sub-segment-2-color-1);
}
.sub-segment-41 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-42 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 22*/
#segment22 {
  background-color: var(--sub-segment-2-color-3);
  height: 1.5%;
}
.sub-segment-43 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-44 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 23*/
#segment23 {
  height: 1%;
  background-color: var(--sub-segment-2-color-4);
}
.sub-segment-45 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-46 {
  background-color: var(--segment-color-4);
  z-index: 2;
}

/*segment 24*/
#segment24 {
  height: 1.5%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-47 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-48 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 25*/
#segment25 {
  height: 1%;
  background-color: var(--sub-segment-2-color-3);
}
.sub-segment-49 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-50 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 26*/
#segment26 {
  background-color: var(--sub-segment-2-color-1);
  height: 1.3%;
}
.sub-segment-51 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-52 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 27*/
#segment27 {
  height: 3.9%;
  background-color: var(--sub-segment-2-color-2);
}
.sub-segment-53 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-54 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 28*/
#segment28 {
  background-color: var(--sub-segment-2-color-3);
  height: 4%;
}
.sub-segment-55 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-56 {
  background-color: var(--segment-color-4);
  z-index: 2;
}

/*segment 29*/
#segment29 {
  background-color: var(--sub-segment-2-color-1);
  height: 4%;
}
.sub-segment-57 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-58 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 30*/
#segment30 {
  height: 3.9%;
  background-color: var(--sub-segment-2-color-3);
}
.sub-segment-59 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-60 {
  background-color: var(--segment-color-1);
  z-index: 2;
}

/*segment 31*/
#segment31 {
  height: 3.8%;
  background-color: var(--sub-segment-2-color-3);
}
.sub-segment-61 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-62 {
  background-color: var(--segment-color-2);
  z-index: 2;
}

/*segment 32*/
#segment32 {
  background-color: var(--sub-segment-2-color-4);
  height: 1.5%;
}
.sub-segment-63 {
  background-color: var(--sub-segment-1-color-2);
  z-index: 3;
}
.sub-segment-64 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 33*/
#segment33 {
  height: 3.3%;
  background-color: var(--sub-segment-2-color-3);
}
.sub-segment-65 {
  background-color: var(--sub-segment-1-color-1);
  z-index: 3;
}
.sub-segment-66 {
  background-color: var(--segment-color-3);
  z-index: 2;
}

/*segment 34*/
#segment34 {
  height: 14.2%;
  background-color: var(--sub-segment-2-color-1);
}
.sub-segment-67 {
  background-color: var(--sub-segment-1-color-3);
  z-index: 3;
}
.sub-segment-68 {
  background-color: var(--segment-color-4);
  z-index: 2;
}
.tsegment1 {
  position: relative;
  background-color: #fff;
  width: 268px;
  height: 100%;
  z-index: 4;
}
.tsegment2 {
  position: relative;
  background-color: #fff;
  max-width: 104px;
  height: 100%;
  z-index: 4;
}
@media (min-height: 1000px) {
  .tsegment1 {
    position: relative;
    background-color: #fff;
    width: 368px;
    height: 100%;
    z-index: 4;
  }
  .tsegment2 {
    position: relative;
    background-color: #fff;
    max-width: 156px; /* Adjust proportionally as needed */
    height: 100%;
    z-index: 4;
  }
}
.ttintl {
  position: relative;
  width: 20%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 4;
}

.demo-text .text {
  font-size: clamp(5rem, 8vw, 5rem);
  line-height: 1;
  font-weight: normal;
}
/* CSS for loading animation */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.menu-wrapper {
  z-index: 999;
}
.logo {
  line-height: 13px;
  color: #000;
}
.video-container {
  position: relative;
  width: 100%;
  max-width: 950px; /* Set your maximum width here */
  margin: 0 auto;
}
video {
  width: 100%;
  height: auto;
  display: block;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.play-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
}
.play-icon {
  max-width: 50%;
}
.mw-40 {
  max-width: 40px;
}
.mw-120 {
  max-width: 120px;
}
.anchor,
.social,
.footer-title {
  text-decoration: none;
  font-weight: 900;
  font-size: 1.2rem;
  margin-right: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-style: italic;
  color: #000;
}
.footer-title {
  margin-bottom: 1rem;
}
.panels {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 300px;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card-back {
  background-color: #f9f9f9;
  transform: rotateY(180deg);
}

.flip-card-back button {
  margin-top: 20px;
}
.team-logo {
  max-height: 200px;
}
.wrap {
  padding: 10px 15px;
  position: relative;
  text-align: center;
  top: 30%;
  transform: translateY(-50%);
}
#header2 {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100px;
  z-index: 5;
  transition: top 0.2s ease-in-out;
  .wrap {
    display: flex;
  }
  &.nav-up {
    top: -100px;
  }
}

#menu-wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 3;
}
.stripe {
  background: #dcff02;
  height: 100vh;
  width: 10px;
  position: absolute;
  left: 0;
  top: 0;
}
#menu-wrap .navigation {
  margin-left: 30px;
  padding-top: 1.875rem;
  overflow: hidden;
}

#menu-wrap .navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.625rem;
  transition: opacity 0.3s ease-in;
}

#menu-wrap .navigation li {
  padding: 0;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  margin-right: 1rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#menu-wrap .navigation li:before {
  display: none;
}

#menu-wrap .navigation li a {
  color: #dcff02;
  text-decoration: none;
  transition: color 0.3s;
  font-weight: 900;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

#menu-wrap .navigation li a:hover {
  color: #000;
}

#menu-wrap .navigation li a span {
  position: absolute;
  left: -1px;
  overflow: hidden;
  background: rgb(188, 213, 52);
  background: linear-gradient(
    90deg,
    rgba(188, 213, 52, 1) 0%,
    rgba(237, 232, 18, 1) 100%
  );
  width: 100%;
  display: block;
  transform: translate3d(-100%, 0, 0);
  animation: layer-out 0.3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
nav.nv ul {
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  display: flex; /* Make list items go inline using flexbox */
  gap: 20px; /* Add spacing between items */
  justify-content: flex-end; /* Align the menu to the right */
}
.menu-link-lg {
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.4rem;
}

nav.nv ul li {
  display: inline; /* This is optional, flexbox handles the inline layout */
}

#menu-wrap .navigation li a span:before {
  background-color: rgb(20, 84, 100);
  background: rgb(188, 213, 52);
  background: linear-gradient(
    90deg,
    rgba(188, 213, 52, 1) 0%,
    rgba(237, 232, 18, 1) 100%
  );
  content: attr(data-text);
  width: 100%;
  display: block;
  transform: translate3d(100%, 0, 0);
  color: #000;
  animation: text-out 0.3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#menu-wrap .navigation li a:hover span {
  animation: layer-in 0.3s ease forwards;
}

#menu-wrap .navigation li a:hover span:before {
  animation: text-in 0.3s ease forwards;
}

@keyframes layer-in {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translateZ(0);
  }
}

@keyframes layer-out {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes text-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translateZ(0);
  }
}

@keyframes text-out {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.hamburger {
  display: flex;
  flex-wrap: wrap;
  height: 30px;
  width: 30px;
  margin-left: auto;
  &:hover {
    cursor: pointer;
  }
  .line {
    background: #fff;
    width: 100%;
    height: 6px;
    &.top {
      align-self: flex-start;
    }
    &.middle {
      align-self: center;
    }
    &.bottom {
      align-self: flex-end;
    }
  }
}

img {
  max-width: 100%;
  mix-blend-mode: luminosity;
}

.image {
  mix-blend-mode: normal;
  opacity: 1;
  z-index: 2;
}

.fixed {
  position: fixed;
  opacity: 1;
  transition: opacity 0.3s ease;
  width: 50%;
}
.z-0 {
  z-index: 0;
}
.z-1 {
  z-index: 1;
}
.tournament-number {
  font-size: 13rem;
  font-weight: 900;
  color: #000;
  font-style: italic;
  top: -10%;
}
.mw-80p {
  max-width: 80%;
}
.outline-text {
  font-style: italic;
  color: transparent; /* Make the text transparent */
  -webkit-text-stroke: 5px black; /* Webkit browsers like Chrome and Safari */
  -moz-text-stroke: 5px black; /* Firefox */
}

.tournament-title {
  font-size: 8rem;
  font-weight: bold;
  top: -50px;
  line-height: 100px;
}
.tournament-description {
  top: -50px;
}
.photo {
  width: 100%;
  height: 100%;
  background-size: cover;
  transform: scale(1.2);
}
.coming-soon .tournament-number {
  top: -100%;
}
.indicator {
  position: absolute;
  top: 95vh;
  transform: translateY(-100%);
  font-size: clamp(38px, 3.5vw, 112px);
  opacity: 0;
  visibility: hidden;
}

.pointer {
  animation: pointDown 2.5s infinite;
}
.pointer > svg {
  fill: rgb(188, 213, 52);
}

@keyframes pointDown {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(20px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(20px);
  }
  40% {
    transform: translateY(0);
  }
}
.btn-main {
  background: rgb(188, 213, 52);
  background: linear-gradient(
    90deg,
    rgb(188, 213, 52) 0%,
    rgba(237, 232, 18, 1) 100%
  );
  border: 2px solid rgba(237, 232, 18, 1);
  border-radius: 0px;
  padding: 1rem 2rem;
  font-weight: 900;
  font-size: 1.2rem;
}
.btn-sec {
  border: 2px solid rgba(237, 232, 18, 1);
  color: rgba(237, 232, 18, 1);
  border-radius: 0px;
  padding: 1rem 2rem;
  font-weight: 900;
  font-size: 1.2rem;
}
.btn-sec {
  border-radius: 0px;
  padding: 1rem 2rem;
  font-weight: 900;
  font-size: 1.2rem;
}
.text-black {
  color: #000 !important;
  -webkit-text-fill-color: var(--bs-black);
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

.swiper-pagination-bullet-active {
  background: #1e707b;
}

.segment-color {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
/**VCARDS**/
.to-home > a {
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
  font-style: italic;
  font-size: 14px;
}
.v-title {
  color: #fff;
  font-weight: bold;
}
.v-position {
  color: #ffffff9a;
  font-style: italic;
}
button {
  font-weight: 900;
}
.v-info {
  color: #fff;
  margin-right: 10px;
}
.v-btn {
  color: #ffffff9a;
}
.notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #323232;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 1000;
}
.notification.show {
  opacity: 1;
}
.upper-mgmt {
  background: rgb(20, 84, 100);
  background: linear-gradient(
    90deg,
    rgba(20, 84, 100, 1) 0%,
    rgba(8, 120, 141, 1) 100%
  );
}
.creative-mgmt {
  background: rgb(37, 15, 36);
  background: linear-gradient(
    90deg,
    rgba(37, 15, 36, 1) 0%,
    rgba(62, 8, 58, 1) 100%
  );
}
.vcard {
  border: 2px solid #ffffff08;
  border-radius: 20px;
}
.article-title {
  padding-top: 1rem;
  color: #fff;
  padding-bottom: 0.3rem;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 2rem;
}
.article-image {
  width: 100%;
  height: 300px; /* Set a fixed height for the image container */
  overflow: hidden; /* Hide the overflow to crop the image */
}
.article-link a {
  color: #e4e51b;
}
.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This ensures the image is cropped to fill the container */
  display: block;
  mix-blend-mode: normal;
}
.mw-300 {
  max-width: 300px;
}
.articles-section-title {
  text-align: start;
  -webkit-text-stroke: 5px #08758a;
  -moz-text-stroke: 5px #08758a;
}
.rotate {
  transform: rotate(-90deg); /* Rotate the text */
  padding-top: 1vw;
  font-size: 7em;
  font-weight: 900;
  transform-origin: 120px 75px; /* Rotate from the top-left corner */
  font-family: "Monofett", monospace !important;
}
.green {
  color: #dcff02;
}
.bg-green {
  background-color: #dcff02;
}
.bg-black-95 {
  background-color: #000000e3;
}
.prijavi-se {
  background: #dcff04;
  color: #000;
  padding: 7px 27px;
  border-radius: 40px;
}
.text-dark {
  color: #000 !important;
}
.not {
  position: absolute;
}
.is {
  font-weight: 900;
  font-size: 5rem;
}
.bg-stroke {
  background: url(images/bgstroke.svg);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 339 66' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23DCFF02'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M338.541 20.107L336.79 5.521c-.049-.4-.368-1.193-.822-1.964v-.444h-.282c-.54-.805-1.203-1.49-1.816-1.518L316.401.762c-4.065-.193-8.097-.545-12.16-.306l-21.368 1.262c-1.333.08-2.701.24-4.037.207-2.491-.062-5-.325-7.485-.487-6.522-.425-13.045-.938-19.575-1.276-4.947-.255-9.985-.036-14.942-.04-4.599-.003-9.32-.276-13.908.038l-20.304 1.385c-3.871.264-7.54.445-11.415.386l-21.252-.325c-4.259-.066-8.523.09-12.781.165-5.537.095-11.175.461-16.711.287-5.973-.19-11.988-.906-17.94-1.357-4.018-.303-8.029-.77-12.064-.692-11.055.214-22.104.327-33.142.877-6.523.324-13.046.7-19.573.973-4.909.204-9.856.125-14.77.18-11.516.128-23.008.073-34.525-.016-1.827-.013-3.653-.027-5.479-.042l-.085.14L1.276 14.49c-.375 2.888-.88 5.667-.689 8.561.516 7.854 1.188 15.665 1.07 23.528-.07 4.755-.142 9.51-.214 14.264-.014.867.692 1.836 1.197 2.55.328.464.985 1.643 1.744 1.652 5.842.065 11.686.13 17.529.198 4.184.046 8.38.199 12.563.046 11.042-.406 22.066-.965 33.12-.898 6.638.04 13.28.023 19.917.123 4.924.075 9.863.474 14.778.719l10.688.533c1.136.057 2.258.172 3.39.066l20.448-1.906c2.147-.2 4.349-.547 6.509-.608 1.673-.044 3.417.18 5.084.271 7.042.386 14.084.77 21.125 1.154 9.75.532 19.594-.178 29.361.045 10.227.235 20.434 1.196 30.669 1.201l21.643.011c4.079.002 8.094-.378 12.159-.685l11.605-.873c2.286-.172 4.611-.466 6.907-.52 1.589-.037 3.212.114 4.798.176l11.48.444c11.479.443 22.93.55 34.421.657l5.4.05c.07.002.089-.065.087-.156.083-7.157-.009-14.332.282-21.486l.619-15.2c.118-2.851-.083-5.454-.425-8.3z'/%3E%3C/svg%3E")
    0 0/100% 100% no-repeat;
}
.bg-stroke-dark {
  background: url(images/bgstrokedark.svg) 0 0/100% 100% no-repeat;
}
.swiper-pagination-bullet-active {
  background-color: #000 !important;
}
.mh-300px {
  height: 300px;
}
.modal-content {
  background-color: transparent;
  border: none;
}
.modal-body {
  color: #000 !important;
  font-family: "Inter";
  font-weight: bold;
  text-transform: uppercase;
}
.modal-title {
  font-size: 2rem;
  text-transform: uppercase;
  color: #000;
  font-weight: 900;
}
.pozicija {
  font-weight: 500;
  font-style: italic;
  line-height: 20px;
  font-size: 16px;
}
.btn-bio {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
  border: 3px solid #000;
  width: 73px;
  text-transform: uppercase;
  padding: 2px 20px;
  font-weight: bold;
  outline: none;
  border-radius: 40px;
}
.h-400 {
  min-height: 400px;
}
.accordion-button:not(.collapsed) {
  color: #000;
}

.btn-opt {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
  border: 5px solid #000;
  width: 200px;
  text-transform: uppercase;
  padding: 2px 20px;
  font-weight: bold;
  outline: none;
  border-radius: 40px;
}
.pozicija {
  text-transform: lowercase !important;
}
@media screen and (max-width: 1600px) {
  .rotate {
    font-size: 5em;
    transform-origin: 90px 118px;
  }
  .mh-300px {
    height: 200px;
  }
}

@media screen and (max-width: 800px) {
  .h-400 {
    min-height: 450px;
  }
  .intro-text {
    margin-left: 20px;
  }

  .mw-75 {
    width: 45px;
    height: 45px;
  }
  .quick-info {
    font-size: 12px;
    padding: 10px;
  }
  .rotate {
    font-size: 3em;
    transform-origin: 36px 40px;
    line-height: 2.2rem;
  }
  .accordion-button {
    padding: 10px;
  }
  .datumi {
    font-size: 12px;
  }
  .logo {
    max-width: 50%;
  }
  .is {
    font-size: 2rem;
  }
  .mt-sm-1 {
    margin-top: 2rem;
  }
  .slide-ctrl {
    font-size: 1rem;
  }
  .footer-logo {
    max-width: 60px;
    margin-bottom: 2rem;
  }
  .tournament-title {
    font-size: 3.5rem;
    line-height: 50px;
    top: 0;
    right: 10px;
  }
  .coming-soon .tournament-number {
    top: -15% !important;
  }
  .indicator {
    top: 85vh;
  }
  .outline-text {
    font-style: italic;
    color: transparent; /* Make the text transparent */
    -webkit-text-stroke: 2px black; /* Webkit browsers like Chrome and Safari */
    -moz-text-stroke: 2px black; /* Firefox */
  }
  .articles-section-title\ {
    -webkit-text-stroke: 2px #08758a !important; /* Webkit browsers like Chrome and Safari */
    -moz-text-stroke: 2px #08758a !important; /* Firefox */
  }
  .tournament-number {
    font-size: 5rem;
    left: -20px;
    top: -20px;
  }
  .tournament-description {
    top: -30px;
  }
  .cards {
    flex-direction: column-reverse;
    height: 230vh;
  }

  .cards-text {
    width: 100vw;
    height: 50vh;
  }

  .cards-image {
    width: 100vw;
    height: 50vh;
    display: none;
  }

  img {
    max-height: 100%;
  }

  .cards-image-container {
    width: 100%;
  }

  .cards-cta {
    width: 100%;
  }

  .comment {
    font-size: 4vw;
  }

  .fixed {
    position: fixed;
    opacity: 1;
  }

  .cards-cta {
    transition: none;
  }

  .item {
    font-size: 5vw;
  }
  .story-img {
    max-height: 50vh;
  }
  #panels #panels-container .panels-navigation {
    position: absolute;
    width: 100%;
    bottom: 2%;
    right: -10%;
  }
  .story-text {
    font-size: 1rem !important;
    padding: 2rem;
  }

  .tsegment1 {
    background-color: #fff;
    width: 268px;
    height: 100%;
  }
  .tsegment2 {
    background-color: #fff;
    max-width: 104px;
    height: 100%;
  }
  .ttintl {
    width: 70%;
  }
}
@media (min-width: 800px) and (max-width: 1200px) {
  .coming-soon .tournament-number {
    top: -60% !important;
  }
}