:root {
  --max-width: 1100px;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

  --up-c-black: #070000;

  --primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

  --tile-start-rgb: 239, 245, 249;
  --tile-end-rgb: 228, 232, 233;
  --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);

  --callout-rgb: 238, 240, 241;
  --callout-border-rgb: 172, 175, 176;
  --card-rgb: 180, 185, 188;
  --card-border-rgb: 131, 134, 135;
  --layout-container-offset: 7.6rem ; /*120px;*/
  --layout-spacing-header-content: 8rem;
  --layout-spacing-section-top: 10rem;
  --layout-spacing-section-bottom: 2rem;

  --color-gray-200: #c6c5c7;
  --color-gray-400: #8792b2;

}



@media (max-width: 1440px) {
  :root {
    --layout-container-offset: 4.6rem ; /*120px;*/
    --layout-spacing-header-content: 8rem;
    --layout-spacing-section-top: 5rem;
    --layout-spacing-section-bottom: 2rem;
  }
}


@media (max-width: 1024px) {
  :root {
    --layout-container-offset: 1.6rem ; /*120px;*/
    --layout-spacing-header-content: 6rem;
    --layout-spacing-section-top: 5rem;
    --layout-spacing-section-bottom: 2rem;
  }
}


@media (max-width: 768px) {
  :root {
    --layout-container-offset: 1.2rem ; /*120px;*/
    --layout-spacing-header-content: 3rem;
    --layout-spacing-section-top: 5rem;
    --layout-spacing-section-bottom: 2rem;
  }
}



@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;

    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));

    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);

    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  /* overflow-x: hidden; */
  font-family: "articulat-cf", sans-serif;
  scroll-behavior: smooth !important;
}

h1{
  font-weight: 700;
  }
a {
  color: inherit;
  text-decoration: none;
}

p {
  pointer-events: none;
}

/* @media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
} */

li.slick-active {
  opacity: 1 !important;
}


@keyframes move-side {
  0% {
    right: 22%;
    top: 11%;
  }
  20% {
    right: 25%;
    top: 13%;
  }
  50% {
    right: 22%;
    top: 15%;
  }
  80% {
    right: 19%;
    top: 13%;
  }
  100% {
    right: 22%;
    top: 11%;
  }
}

@keyframes move-up {
  0% {
    top: 21%;
  }
  20% {
    top: 23%;
  }
  50% {
    top: 23%;
  }
  80% {
    top: 25%;
  }
  100% {
    top: 21%;
  }
}

/* Custom slick slider dots style*/
.slick-dots li{
  background-color: rgb(199, 199, 199);
  width: 220px !important ;
  height: 4px !important;
  margin: 0 !important;
}
@media (max-width: 576px) {
  .slick-dots li{
    width: 80px !important ;

  }
}
.slick-dots .slick-active{
  background-color: rgb(0, 0, 0) !important;
}

.animated{
  transform: translate3d(0,0,0) ;
  -webkit-transform: translate3d(0,0,0) ;
}