:root {
  --blue: #063453;
  --white: #ffffff;
  --green: #00b8a7;
  --orange: #d63912;
  --yellow: #ecb340;
  --grey: #eee6d6;
  --dark: #212529;
}
@font-face {
  font-family: 'icomoon';
  src:  url('/assets/fonts/icomoon.eot?u0k4p3');
  src:  url('/assets/fonts/icomoon.eot?u0k4p3#iefix') format('embedded-opentype'),
    url('/assets/fonts/icomoon.ttf?u0k4p3') format('truetype'),
    url('/assets/fonts/icomoon.woff?u0k4p3') format('woff'),
    url('/assets/fonts/icomoon.svg?u0k4p3#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

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

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

.icon-tiktok:before {
  content: "\e913";
}
.icon-social-facebook-circular:before {
  content: "\e90f";
}
.icon-social-linkedin-circular:before {
  content: "\e910";
}
.icon-social-linkedin:before {
  content: "\e911";
}
.icon-social-facebook:before {
  content: "\e912";
}
.icon-server:before {
  content: "\e916";
}
.icon-layout:before {
  content: "\e90c";
}
.icon-code:before {
  content: "\e905";
}
.icon-edit-2:before {
  content: "\e906";
}
.icon-pen-tool:before {
  content: "\e907";
}
.icon-grid:before {
  content: "\e908";
}
.icon-clipboard:before {
  content: "\e909";
}
.icon-layout1:before {
  content: "\e90d";
}
.icon-truck:before {
  content: "\e90a";
}
.icon-lab:before {
  content: "\e900";
}
.icon-beta:before {
  content: "\e900";
}
.icon-experiment:before {
  content: "\e900";
}
.icon-test:before {
  content: "\e900";
}
.icon-pen:before {
  content: "\e901";
}
.icon-pencil:before {
  content: "\e901";
}
.icon-write:before {
  content: "\e901";
}
.icon-blog:before {
  content: "\e901";
}
.icon-document-code:before {
  content: "\e902";
}
.icon-clipboard-list:before {
  content: "\e903";
}
.icon-clipboard-text:before {
  content: "\e904";
}
.icon-rocket:before {
  content: "\e90b";
}
h1,
h2,
h3 {
  font-size: clamp(2rem, 1.4545rem + 2.9091vw, 4rem);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: transparent;
}
h4,
h5,
h6 {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(1.3rem, 1.2455rem + 0.2909vw, 1.5rem);
}
p {
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--dark);
}
::selection {
  background-color: #494949;
  color: #fff;
}
::-moz-selection {
  color: var(--white);
  background: var(--green);
}

::selection {
  color: var(--white);
  background: var(--green);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #063453 #dfe9eb;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  background-color: #dfe9eb;
}

*::-webkit-scrollbar-track:hover {
  background-color: #b8c0c2;
}

*::-webkit-scrollbar-track:active {
  background-color: #b8c0c2;
}

*::-webkit-scrollbar-thumb {
  background-color: #063453;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #00b8a7;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #00b8a7;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.navbar {
  background: #063453;
  background: linear-gradient(
    90deg,
    rgba(6, 52, 83, 1) 0%,
    rgba(0, 184, 167, 1) 100%
  );
  .navbar-brand {
    img {
      width: 150px;
      height: auto;
    }
  }
  .navbar-nav {
    .nav-link {
      font-family: "Urbanist", sans-serif;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--white);
      &:hover {
        color: var(--orange);
      }
      &.active {
        color: var(--orange);
      }
    }
  }
  &.fixed-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 999;
  }
}
.pixelflow-btn {
  display: inline-block;
  vertical-align: middle;
  -webkit-appearance: none;
  border: none;
  outline: none !important;
  background-color: var(--yellow);
  color: var(--dark);
  font-size: 16px;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  padding: 16px 50px 17px;
  transition: 500ms;
  overflow: hidden;
  z-index: 2;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    height: 0%;
    left: 50%;
    top: 50%;
    width: 150%;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: -1;
    background: var(--white);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  }
  &:hover {
    color: var(--white);
    &:after {
      height: 450%;
      background-color: var(--green);
      transition: all 1s ease 0s;
    }
  }
  &.orange {
    background-color: var(--orange);
    color: var(--white);
  }
}

.hero {
  h1 {
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    background: linear-gradient(
      90deg,
      rgba(6, 52, 83, 1) 0%,
      rgba(0, 184, 167, 1) 100%
    );
    -webkit-background-clip: text;
  }
  p {
    text-align: justify;
  }
  img {
    height: 300px;
    object-fit: cover;

    @media (min-width: 992px) {
      height: 100vh;
      width: 100%;
      object-fit: cover;
      object-position: center;
      clip-path: polygon(25% 0%, 100% 0%, 100% 99%, 0% 100%);
    }
  }
}
.about-us {
  background-color: #fff;

  img {
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.14);
    outline-offset: 2rem;
    z-index: 10;
    transition: all 0.2s;
  }
  h2 {
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    background: linear-gradient(
      90deg,
      rgba(6, 52, 83, 1) 0%,
      rgba(0, 184, 167, 1) 100%
    );
    -webkit-background-clip: text;
  }
  p {
    text-align: justify;
  }
  @media (min-width: 992px) {
    & {
      padding: 20rem 0;
      margin-top: -20vh;
    }
  }
}
.services {
  padding: 3rem 0;
  background-image: linear-gradient(
      to right bottom,
      rgba(73, 73, 73, 0.678),
      rgba(5, 5, 5, 0.719)
    ),
    url(/assets/img/adosting-uzay.jpg);
  background-size: cover;

  h3 {
    font-family: "Urbanist", sans-serif;
    font-optical-sizing: auto;
    color: var(--white);
  }
  p {
    color: var(--white);
  }
  .lc-block {
    text-align: center;
    background-color: var(--white);
    border-radius: 0.3rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
    &:hover {
      transform: translateY(-1.5rem) scale(1.03);
    }
    svg {
      path,
      circle {
        stroke: var(--orange);
      }
      width: 120px;
      height: auto;
    }
    p {
      color: var(--dark);
    }
  }
  @media (min-width: 992px) {
    & {
      padding: 15rem 0 15rem;
      transform: skewY(-7deg);
      margin-top: -10rem;
      & > * {
        transform: skewY(7deg);
      }
    }
    .lc-block {
      text-align: start;

      svg {
        width: 200px;
        height: auto;
      }
    }
  }
}
.process-section {
  padding: 3rem 0;
  background: rgb(6, 52, 83);
  background: linear-gradient(
    90deg,
    rgba(6, 52, 83, 1) 0%,
    rgba(0, 184, 167, 1) 100%
  );
  .main-title {
    p.tcolor {
      color: var(--orange);
    }
    h3 {
      color: var(--white);
    }
    p {
      color: var(--white);
      text-align: justify;
    }
  }
  .box {
    margin-bottom: 2rem;
    .process-box {
      padding: 20px;
      font-size: 15px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      border-radius: 10px;

      &:hover {
        box-shadow: 0px 14px 18px rgb(0 0 0 / 21%);
      }
      .services-icon {
        font-size: 35px;
        color: var(--orange);
      }
    }
  }
  @media (min-width: 992px) {
    & {
      padding: 25rem 0 15rem 0;
      margin-top: -10rem;
    }
  }
}

.cta {
  h3 {
    color: var(--white);
  }
  p {
    color: var(--white);
  }
}
.theme-pack {
  background-color: #fff;
  /* padding: 25rem 0 15rem 0;
  margin-top: -10rem; */
  h3 {
    background: linear-gradient(
      90deg,
      rgba(6, 52, 83, 1) 0%,
      rgba(0, 184, 167, 1) 100%
    );
    -webkit-background-clip: text;
    color: transparent;
  }
  /* .card-container {
    perspective: 700px;
    &:hover {
      .card-flip {
        transform: rotateY(180deg);
      }
    }
  }
  .card-flip {
    img {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    height: auto;
    transition: all 0.5s ease-out;
    background: white;
    border: none;
    div {
      backface-visibility: hidden;
      transform-style: preserve-3d;
      height: 100%;
      width: 100%;
      border: none;
    }
    .front {
      position: relative;
      z-index: 1;
    }
    .back {
      position: relative;
      z-index: 0;
      transform: rotateY(-180deg);
    }
  } */
  .card-container {
    perspective: 700px;
  }
  .card-flip {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    height: auto;
    transition: all 0.5s ease-out;
    background: white;
    border: none;
    img {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      backface-visibility: hidden;
    }
  }

  .card-flip div {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
    border: none;
  }

  .card-flip .front {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .card-flip .back {
    position: absolute;
    z-index: 0;
    transform: rotateY(-180deg);
    background-image: linear-gradient(to right bottom, #545454, #212529);
    .content {
      font-family: "Urbanist", sans-serif;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      .title {
        color: var(--white);
        font-weight:600;
        font-size: clamp(1.5rem, 1.3636rem + 0.7273vw, 2rem);
      }
      .start {
        font-size: clamp(1.5rem, 1.3636rem + 0.7273vw, 2rem);
        color: var(--white);
      }
      .price {
        color: #00b8a7;
        font-size: clamp(2rem, 0.9091rem + 5.8182vw, 6rem);
        font-weight: 100;
      }
    }
  }

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

  .stacks {
    .stack {
      filter: alpha(opacity=40);
      opacity: 0.4;
      transition: all 0.2s ease-out;
      &:hover {
        opacity: 1;
        transform: translateY(-0.3rem);
      }
    }
  }
}
.numbers {
  p.tcolor {
    color: var(--orange);
  }
  h3 {
    background: linear-gradient(
      90deg,
      rgba(6, 52, 83, 1) 0%,
      rgba(0, 184, 167, 1) 100%
    );
    -webkit-background-clip: text;
    color: transparent;
  }
  .counting {
    p {
      text-align: justify;
    }
    .num {
      font-size: clamp(1.125rem, 0.75rem + 2vw, 2.5rem);
    }
  }
}
/*--------------------------------------------------------------
# Sliding Text
--------------------------------------------------------------*/
.slider-text-one {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  padding: 52px 0;
  .slider-text-one__animate-text {
    animation: text-scrolling 28s linear infinite;
    animation-direction: reverse;
    will-change: transform;
    display: block;
    position: relative;
    white-space: nowrap;
    &:hover {
      animation-play-state: paused;
    }
    span {
      font-size: 180px;
      letter-spacing: -7.2px;
      line-height: 1;
      margin: 0;
      color: var(--ogency-white);
      font-weight: 800;
      display: inline-block;
      min-width: auto;
      span {
        color: var(--orange);
      }
    }
  }
}
@media (max-width: 991px) {
  .slider-text-one {
    .slider-text-one__animate-text {
      span {
        font-size: 120px;
        letter-spacing: -5px;
      }
    }
  }
}
@media (max-width: 767px) {
  .slider-text-one {
    .slider-text-one__animate-text {
      span {
        font-size: 80px;
        letter-spacing: -4px;
      }
    }
  }
}

@keyframes text-scrolling {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0%, 0, 0);
  }
}
.sliding-text {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--orange);

  .sliding-text__wrap {
    position: relative;
    display: block;
    padding: 21px 0 9px;
    white-space: nowrap;

    .sliding-text__list {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      -moz-animation: text-scrolling2 19s linear infinite;
      -webkit-animation: text-scrolling2 19s linear infinite;
      animation: text-scrolling2 19s linear infinite;
      will-change: transform;
      flex-wrap: nowrap;
      &:hover {
        animation-play-state: paused;
      }
      li {
        position: relative;
        display: flex;
        align-items: center;
        font-size: 20px;
        color: var(--white);
        letter-spacing: 2px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1;
        margin: 0 20px;
      }
    }
  }
}

@keyframes text-scrolling2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

footer {
  .brand {
    img {
      width: 130px;
      height: auto;
    }
  }
  a {
    text-decoration: none;
    .icon {
      color: var(--dark);
      font-size: 2rem;
      &:hover {
        color: var(--orange);
      }
    }
  }
}