@charset "UTF-8";
:root {
  --shark-color: #20252b;
  --dark-shark-color: #1c2127;
  --grey-color: #9e9e9e4d;
  --pink-color: #fff;
  --white-color: #fff; }

@font-face {
  font-family: 'Gilroy';
  src: url("fonts/Gilroy-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal; }
@font-face {
  font-family: 'Gilroy';
  src: url("fonts/Gilroy-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: 'Gilroy';
  src: url("fonts/Gilroy-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal; }
html, body {
  overflow-x: hidden;
  width: 100%; 
}

body {
  background-color: #111414;
  margin: 0;
  font-family: 'Gilroy';
  color: #fff; }

.active {
  background-color: #000; }

header {
  padding: 1% 5% 1% 5%;
  background: rgba(34, 34, 34, 0);
  -webkit-transition: all ease-out .5s;
  -moz-transition: all ease-out .5s;
  -o-transition: all ease-out .5s;
  transition: all ease-out .5s;
  width: 100%;
  display: flex;
  flex-direction: row;
  position: fixed;
  justify-content: space-between;
  z-index: 20; }
  @media (max-width: 768px) {
    header {
      padding-top: 10px; } }
  header .header__left {
    width: 70%;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    @media (max-width: 768px) {
      header .header__left {
        width: 50%; } }
    @media (min-width: 768px) and (max-width: 1199px) {
      header .header__left {
        width: 40%; } }
    @media (min-width: 1199px) and (max-width: 1405px) {
      header .header__left {
        width: 60%; } }
    @media (max-width: 768px) {
      header .header__left img {
        width: 80%; } }
  header .header__right {
    display: flex; }
    header .header__right .menu_pc {
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 768px) {
        header .header__right .menu_pc {
          display: none; } }
    @media (max-width: 768px) {
      header .header__right {
        display: flex;
        justify-content: flex-end;
        width: 50%; } }
    header .header__right .menu_mobile {
      /* show overlay js */ }
      @media (min-width: 768px) {
        header .header__right .menu_mobile {
          display: none; } }
      header .header__right .menu_mobile a {
        color: var(--white-color);
        text-decoration: none; }
      header .header__right .menu_mobile ul {
        list-style-type: none; }
      header .header__right .menu_mobile button {
        background-color: transparent;
        color: #fff;
        border: none;
        font-size: 30px;
        cursor: pointer;
        transition: all 300ms ease-in-out; }
      header .header__right .menu_mobile button:hover {
        opacity: 0.9; }
      header .header__right .menu_mobile .nav-brand {
        color: var(--white-color);
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 2px; }
      header .header__right .menu_mobile .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
      header .header__right .menu_mobile .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        padding: 60px;
        opacity: 0;
        visibility: hidden;
        transition: all 300ms ease-in-out;
        z-index: 999; }
      header .header__right .menu_mobile .show-overlay {
        opacity: 1;
        visibility: visible; }
      header .header__right .menu_mobile .nav-overlay-container {
        background-color: #111414;
        max-width: 1200px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
        position: relative; }
      header .header__right .menu_mobile #menu-hide-btn {
        position: absolute;
        right: -20px;
        top: -20px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        background-color: var(--white-color);
        color: var(--dark-shark-color); }
      header .header__right .menu_mobile .nav-links li {
        margin: 16px 0;
        position: relative; }
      header .header__right .menu_mobile .nav-links li::before, header .header__right .menu_mobile .nav-links li::after {
        content: "";
        position: absolute;
        width: 0;
        height: 1px;
        background-color: var(--pink-color);
        opacity: 0;
        transition: all 300ms ease-in-out; }
      header .header__right .menu_mobile .nav-links li::before {
        top: 0;
        left: 0; }
      header .header__right .menu_mobile .nav-links li::after {
        bottom: 0;
        right: 0; }
      header .header__right .menu_mobile .nav-links li:hover::before, header .header__right .menu_mobile .nav-links li:hover::after {
        width: 75%;
        opacity: 1; }
      header .header__right .menu_mobile .nav-links li a {
        font-size: 40px;
        font-weight: 400;
        transition: all 300ms ease-in-out; }
      header .header__right .menu_mobile .nav-links li:hover a {
        color: var(--pink-color); }
      header .header__right .menu_mobile .nav-icons {
        display: flex;
        align-items: center;
        margin-top: 20px; }
      header .header__right .menu_mobile .nav-icons li {
        border: 1px solid var(--grey-color);
        width: 35px;
        height: 35px;
        margin: 0 5px;
        line-height: 35px;
        border-radius: 50%;
        transition: all 300ms ease-in-out; }
      header .header__right .menu_mobile .nav-icons li:hover {
        background-color: #000;
        border-color: var(--pink-color); }
      @media (max-width: 600px) {
        header .header__right .menu_mobile .nav-links li a {
          font-size: 22px; }
        header .header__right .menu_mobile .nav-overlay {
          padding: 30px; } }

.hero {
  padding: 1% 5% 1% 5%;
  padding-top: 160px;
  padding-bottom: 60px;
  width: 100%;
  display: flex;
  flex-direction: row; }
  @media (max-width: 768px) {
    .hero {
      flex-direction: column;
      padding-bottom: 0px;
      padding-top: 110px; } }
  .hero__left {
    width: 70%;
    display: flex;
    align-items: flex-end;
z-index: 1;}
    @media (max-width: 768px) {
      .hero__left {
        width: 100%; } }


    .hero__left h2 {
      font-size: 8.5rem;
      font-weight: 400;
		
      color: #fff;

      margin: 0;
      line-height: 0.9; }
      @media (max-width: 768px) {
        .hero__left h2 {
          font-size: 4rem;
          padding-bottom: 20px;
           } }
      @media (min-width: 768px) and (max-width: 1199px) {
        .hero__left h2 {
          font-size: 8rem; } }
      .hero__left h2:hover {
        cursor: pointer; }
      .hero__left h2 a {
        position: relative;
		  z-index: 9999;
        text-decoration: none; }
      .hero__left h2 a::before {
        
        content: "";
        inset: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s ease-in-out;
        z-index: -1; }
      .hero__left h2 a:hover::before {
        transform: scaleX(1);
        transform-origin: left; }
  .hero__right {
    width: 30%;
    display: flex;
    align-items: flex-end; }
    .hero__right .eye_content {
      /*position: absolute;
      top: 50%;
      right: 20%; */


position: relative;
  top: 50%;
  right: -90%;}
    .hero__right .eye_content *, .hero__right .eye_content *:before, .hero__right .eye_content *:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%; }
    .hero__right .eye {
      width: 332px;
      height: 332px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #EBEDF3;
      filter: blur(5px);
      animation: eyeAnimation 4s cubic-bezier(1, 0, 1, 1) infinite; }
      @media (max-width: 768px) {
        .hero__right .eye {
          animation: none;
          filter: blur(20px);
          background: #4f4f4f; } }
@keyframes eyeAnimation {
  0%, 33%, 100% {
    box-shadow: inset -8px -13px 20px -10px rgba(230, 230, 236, 0.04), 64px 55px 40px -40px #38406A, 20px 18px 30px -10px #38406A, inset -70px -50px 60px -30px #4b6398, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 50px -10px #F6F6FB, 14px -1px 50px -10px #7e7ea9, 1px 9px 50px -10px #7e7ea9, inset -90px 40px 60px -20px rgba(116, 66, 255, 0.1), inset -90px -120px 60px -20px rgba(116, 66, 255, 0.1);
    transform: translate(-50%, -50%) scale(1.25); }
  65% {
    box-shadow: inset -8px -13px 60px -10px rgba(230, 230, 236, 0.2), 44px 35px 20px -20px #687294, 11px 9px 9px -4px #6e799d, inset -100px -70px 40px -110px #6A789C, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 30px -10px #F6F6FB;
    transform: translate(-50%, -50%) scale(1); } }
    .hero__right .eye::after {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px #e7e2f5;
      animation: pupilAnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite, pupilAnimationView 4s ease infinite; }
@keyframes pupilAnimationSize {
  0%, 30%, 100% {
    transform: translate(-50%, -50%) scale(0.85); }
  40%, 90% {
    transform: translate(-50%, -50%) scale(0.5); } }
@keyframes pupilAnimationView {
  0%, 30%, 100% {
    box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px #e7e2f5; }
  60%, 66% {
    box-shadow: inset -50px -20px 30px 0px rgba(231, 226, 245, 0), inset 10px 10px 70px -27px rgba(47, 44, 76, 0), 0px 0px 10px 7px rgba(230, 225, 245, 0); }
  90% {
    box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px #e7e2f5; } }
    .hero__right .circle-1 {
      width: 475px;
      height: 475px;
      border-radius: 50%;
      border: 1px solid transparent;
      border-right-color: rgba(223, 228, 255, 0.6);
      animation: circle1AnimationOpacity 4s ease infinite, circle1AnimationMove 4s ease infinite; }
@keyframes circle1AnimationMove {
  00%, 100% {
    transform: translate(-50%, -50%) rotate(49deg); }
  07% {
    transform: translate(-50%, -50%) rotate(38deg); }
  12%, 19%, 68% {
    transform: translate(-50%, -50%) rotate(42deg); }
  26%, 30% {
    transform: translate(-50%, -50%) rotate(82deg); }
  73% {
    transform: translate(-50%, -50%) rotate(34deg); }
  87%, 92% {
    transform: translate(-50%, -50%) rotate(69deg); }
  94% {
    transform: translate(-50%, -50%) rotate(65deg); } }
@keyframes circle1AnimationOpacity {
  00%, 27%, 73%, 100% {
    opacity: 1; }
  30%, 70% {
    opacity: 0; } }
    .hero__right .circle-2 {
      width: 475px;
      height: 475px;
      border-radius: 50%;
      border: 1px solid transparent;
      border-right-color: rgba(223, 228, 255, 0.6);
      animation: circle2AnimationOpacity 4s ease infinite, circle2AnimationMove 4s ease infinite; }
@keyframes circle2AnimationMove {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(229deg); }
  9% {
    transform: translate(-50%, -50%) rotate(220deg); }
  14%, 21% {
    transform: translate(-50%, -50%) rotate(225deg); }
  29%, 67% {
    transform: translate(-50%, -50%) rotate(262deg); }
  82% {
    transform: translate(-50%, -50%) rotate(241deg); }
  90%, 94% {
    transform: translate(-50%, -50%) rotate(249deg); }
  99% {
    transform: translate(-50%, -50%) rotate(245deg); } }
@keyframes circle2AnimationOpacity {
  0%, 27%, 79%, 100% {
    opacity: 1; }
  30%, 76% {
    opacity: 0; } }
    .hero__right .circle-3 {
      left: calc(50% + 93px);
      top: calc(50% - 189px);
      width: 106px;
      height: 280px;
      overflow: hidden; }
    .hero__right .circle-3::before {
      left: -275%;
      top: -4%;
      width: 393px;
      height: 393px;
      border-radius: 50%;
      border: 1px solid transparent;
      border-right-color: rgba(223, 228, 255, 0.6);
      animation: circle3Animation 4s ease infinite; }
@keyframes circle3Animation {
  0% {
    transform: rotate(-3deg); }
  20% {
    transform: rotate(-107deg); }
  79% {
    transform: rotate(-286deg); }
  100% {
    transform: rotate(-364deg); } }
    .hero__right .circle-4 {
      width: 295px;
      height: 295px;
      border-radius: 50%;
      border: 1px solid transparent;
      border-right-color: #fbfbfb;
      border-left-color: rgba(251, 251, 251, 0.2);
      animation: circle4AnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite, circle4AnimationOpacity 4s ease infinite; }
@keyframes circle4AnimationMove {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(219deg) scale(1); }
  6% {
    transform: translate(-50%, -50%) rotate(221deg) scale(0.9); }
  16% {
    transform: translate(-50%, -50%) rotate(302deg) scale(0.9); }
  22% {
    transform: translate(-50%, -50%) rotate(307deg) scale(0.9); }
  29% {
    transform: translate(-50%, -50%) rotate(312deg) scale(0.93); }
  33% {
    transform: translate(-50%, -50%) rotate(310deg) scale(0.93); }
  36% {
    transform: translate(-50%, -50%) rotate(300deg) scale(0.7); }
  39% {
    transform: translate(-50%, -50%) rotate(220deg) scale(0.92); }
  50%, 57% {
    transform: translate(-50%, -50%) rotate(248deg) scale(0.92); }
  66% {
    transform: translate(-50%, -50%) rotate(225deg) scale(0.92); }
  73%, 81% {
    transform: translate(-50%, -50%) rotate(243deg) scale(0.92); }
  93% {
    transform: translate(-50%, -50%) rotate(215deg) scale(1); } }
@keyframes circle4AnimationOpacity {
  00%, 33%, 50%, 100% {
    opacity: 1; }
  36%, 39% {
    opacity: 0; } }
    .hero__right .circle-5 {
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%);
      animation: circle5AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite, circle5AnimationView 4s ease infinite; }
    .hero__right .circle-5::before {
      width: 173px;
      height: 173px;
      border-radius: 50%;
      border: 1px solid #fbfbfb;
      transform: translate(-50%, -50%); }
    .hero__right .circle-5::after {
      width: 177px;
      height: 177px;
      border-radius: 50%;
      border: 1px solid #fbfbfb;
      transform: translate(-50%, -50%); }
@keyframes circle5AnimationSize {
  0%, 38%, 82.82%, 100% {
    transform: translate(-50%, -50%) scale(1); }
  45%, 75.44% {
    transform: translate(-50%, -50%) scale(0.7); } }
@keyframes circle5AnimationView {
  0%, 5.7%, 7.4%, 9.8%, 11.5%, 14%, 15.6%, 18.9%, 21.3%, 23.8%, 25.4%, 28.7%, 35.3%, 42%, 77.9%, 82.7%, 83.6%, 85.2%, 86.1%, 91.8%, 93.5%, 97.6%, 100% {
    opacity: 1; }
  2.5%, 6.6%, 8.2%, 10.7%, 14.8%, 18%, 20.5%, 22.1%, 24.6%, 27.9%, 36%, 88.6% {
    opacity: 0.5; }
  47%, 77.8%, 82.8%, 83.5%, 85.3%, 86%, 90.2%, 92.7%, 96.8%, 99.2% {
    opacity: 0; } }
    .hero__right .circle-6 {
      top: 50%;
      left: 50%;
      width: 190px;
      height: 190px;
      background: repeating-conic-gradient(from 0deg, rgba(179, 221, 255, 0.4) 0deg 1deg, transparent 1deg 2deg);
      clip-path: url(#bagel1);
      border-radius: 50%;
      animation: circle6Animation 4s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes circle6Animation {
  0% {
    transform: translate(-50%, -50%) scale(1); }
  8%, 35% {
    transform: translate(-50%, -50%) scale(0.93);
    opacity: 1; }
  40%, 90% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0; }
  95%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; } }
    .hero__right .circle-7 {
      top: 50%;
      left: 50%;
      width: 142px;
      height: 142px;
      filter: blur(1px);
      animation: circle6Animation 4s -0.1s cubic-bezier(1, 0, 1, 1) infinite; }
    .hero__right .circle-7::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-conic-gradient(from 0deg, rgba(114, 87, 187, 0.6) 0deg 2deg, transparent 2deg 8deg);
      clip-path: url(#bagel2);
      border-radius: 50%; }
    .hero__right .circle-8 {
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
      clip-path: url(#bagel3);
      border-radius: 50%;
      animation: circle6Animation 4s -0.13s cubic-bezier(1, 0, 1, 1) infinite; }
    .hero__right .circle-9 {
      top: 50%;
      left: 50%;
      width: 76px;
      height: 76px;
      background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
      clip-path: url(#bagel4);
      border-radius: 50%;
      animation: circle6Animation 4s -0.16s cubic-bezier(1, 0, 1, 1) infinite; }
    .hero__right .circle-10 {
      top: 50%;
      left: 50%;
      width: 190px;
      height: 190px;
      background: radial-gradient(rgba(230, 245, 255, 0.6), rgba(201, 243, 255, 0.5), rgba(74, 105, 160, 0.3), transparent 70%);
      clip-path: url(#bagel1);
      border-radius: 50%;
      animation: circle10Animation 4s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes circle10Animation {
  0% {
    transform: translate(-50%, -50%) scale(1); }
  4%, 30% {
    transform: translate(-50%, -50%) scale(0.93);
    opacity: 1; }
  35%, 93% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; }
  98%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; } }
    .hero__right .circle-11 {
      top: 50%;
      left: 50%;
      width: 190px;
      height: 190px;
      background: repeating-conic-gradient(from 0deg, rgba(229, 243, 255, 0.1) 0deg 1deg, transparent 1deg 8deg, rgba(229, 243, 255, 0.3) 8deg 9deg, transparent 9deg 10deg, rgba(229, 243, 255, 0.1) 10deg 11deg, transparent 11deg 72deg);
      clip-path: url(#bagel1);
      border-radius: 50%;
      animation: circle11Animation 4s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes circle11Animation {
  0%, 98%, 100% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  15% {
    transform: translate(-50%, -50%) rotate(45deg); }
  25% {
    transform: translate(-50%, -50%) rotate(-10deg); }
  30% {
    opacity: 1; }
  35% {
    transform: translate(-50%, -50%) rotate(-20deg);
    opacity: 0; }
  93% {
    transform: translate(-50%, -50%) rotate(80deg);
    opacity: 0; } }
    .hero__right .circle-12 {
      top: 50%;
      left: 50%;
      width: 190px;
      height: 190px;
      background: repeating-conic-gradient(from 0deg, rgba(208, 233, 255, 0.2) 20deg 21deg, transparent 21deg 40deg, rgba(192, 223, 249, 0.25) 40deg 41deg, transparent 41deg 43deg, rgba(179, 220, 255, 0.15) 43deg 44deg, transparent 44deg 76deg);
      clip-path: url(#bagel1);
      border-radius: 50%;
      animation: circle12Animation 4s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes circle12Animation {
  0%, 96%, 100% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  10% {
    transform: translate(-50%, -50%) rotate(45deg); }
  25% {
    transform: translate(-50%, -50%) rotate(-45deg); }
  30% {
    opacity: 1; }
  35% {
    transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0; }
  93% {
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 0; } }
    .hero__right .circle-13 {
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%);
      animation: circle13AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite, circle13AnimationView 4s ease infinite; }
    .hero__right .circle-13::before {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 1px solid #fbfbfb;
      transform: translate(-50%, -50%); }
    .hero__right .circle-13::after {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 1px solid rgba(251, 251, 251, 0.5);
      transform: translate(-50%, -50%); }
@keyframes circle13AnimationSize {
  0%, 32%, 86%, 100% {
    transform: translate(-50%, -50%) scale(1); }
  38%, 82% {
    transform: translate(-50%, -50%) scale(0.2); } }
@keyframes circle13AnimationView {
  /* đ┐đżđ┤đ▓đŞđ│đ░ĐéĐî */
  0% {
    opacity: 1; }
  2.5% {
    opacity: 0.5; }
  5.7% {
    opacity: 1; }
  6.6% {
    opacity: 0.5; }
  7.4% {
    opacity: 1; }
  8.2% {
    opacity: 0.5; }
  9.8% {
    opacity: 1; }
  10.7% {
    opacity: 0.5; }
  11.5%, 14% {
    opacity: 1; }
  14.8% {
    opacity: 0.5; }
  15.6% {
    opacity: 1; }
  18% {
    opacity: 0.5; }
  18.9% {
    opacity: 1; }
  20.5% {
    opacity: 0.5; }
  21.3% {
    opacity: 1; }
  22.1% {
    opacity: 0.5; }
  23.8% {
    opacity: 1; }
  24.6% {
    opacity: 0.5; }
  25.4% {
    opacity: 1; }
  27.9% {
    opacity: 0.5; }
  28.7%, 32% {
    opacity: 1; }
  38% {
    opacity: 0; }
  82% {
    opacity: 0; }
  86% {
    opacity: 1; }
  88.6% {
    opacity: 0.5; }
  90.2% {
    opacity: 0; }
  91.8% {
    opacity: 1; }
  92.7% {
    opacity: 0; }
  93.5% {
    opacity: 1; }
  96.8% {
    opacity: 0; }
  97.6% {
    opacity: 1; }
  99.2% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    .hero__right .circle-14 {
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%);
      animation: circle13AnimationSize 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite, circle14AnimationView 4s ease infinite; }
    .hero__right .circle-14::before {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 1px solid rgba(251, 251, 251, 0.5);
      transform: translate(-50%, -50%); }
    .hero__right .circle-14::after {
      width: 95px;
      height: 95px;
      border-radius: 50%;
      border: 1px solid rgba(251, 251, 251, 0.3);
      transform: translate(-50%, -50%); }
@keyframes circle14AnimationView {
  /* đ┐đżđ┤đ▓đŞđ│đ░ĐéĐî */
  0% {
    opacity: 1; }
  2.5% {
    opacity: 0.5; }
  5.7% {
    opacity: 1; }
  6.6% {
    opacity: 0.5; }
  7.4% {
    opacity: 1; }
  8.2% {
    opacity: 0.5; }
  9.8% {
    opacity: 1; }
  10.7% {
    opacity: 0.5; }
  11.5%, 14% {
    opacity: 1; }
  14.8% {
    opacity: 0.5; }
  15.6% {
    opacity: 1; }
  18% {
    opacity: 0.5; }
  18.9% {
    opacity: 1; }
  20.5% {
    opacity: 0.5; }
  21.3% {
    opacity: 1; }
  22.1% {
    opacity: 0.5; }
  23.8% {
    opacity: 1; }
  24.6% {
    opacity: 0.5; }
  25.4% {
    opacity: 1; }
  27.9% {
    opacity: 0.5; }
  28.7%, 32% {
    opacity: 1; }
  38% {
    opacity: 0; }
  82% {
    opacity: 0; }
  86% {
    opacity: 1; }
  88.6% {
    opacity: 0.5; }
  90.2% {
    opacity: 0; }
  91.8% {
    opacity: 1; }
  92.7% {
    opacity: 0; }
  93.5% {
    opacity: 1; }
  96.8% {
    opacity: 0; }
  97.6% {
    opacity: 1; }
  99.2% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    .hero__right .glitch {
      width: 2px;
      height: 2px;
      box-shadow: -21px -75px #8AC7ED, -16px -78px #8AC7ED, -8px -78px #8AC7ED, -5px -77px #8AC7ED, -2px -79px #8AC7ED, 10px -79px #8AC7ED, 25px -73px #8AC7ED, 41px -71px #8AC7ED, 44px -68px #8AC7ED, -26px -72px #8AC7ED, -45px -62px #8AC7ED, -65px -57px #8AC7ED, 59px -49px #8AC7ED, 67px -52px #8AC7ED, 37px -69px #8AC7ED, 43px -62px #8AC7ED, 39px -62px #8AC7ED, 17px -71px #8AC7ED, 28px -67px #8AC7ED, 65px -32px #8AC7ED, 73px -24px #8AC7ED, 67px -25px #8AC7ED, 76px -14px #8AC7ED, 70px -18px #8AC7ED, 82px 21px #8AC7ED, 79px 20px #8AC7ED, 72px 15px #8AC7ED, 55px 45px #8AC7ED, 48px 51px #8AC7ED, 43px 58px #8AC7ED, 37px 57px #8AC7ED, 36px 63px #8AC7ED, 32px 76px #8AC7ED, 35px 70px #8AC7ED, 25px 71px #8AC7ED, 20px 75px #8AC7ED, 5px 70px #8AC7ED, 7px 75px #8AC7ED, -5px 79px #8AC7ED, 3px 78px #8AC7ED, -1px 77px #8AC7ED, -13px 78px #8AC7ED, -15px 82px #8AC7ED, -20px 76px #8AC7ED, -18px 78px #8AC7ED, -17px 75px #8AC7ED, -22px 72px #8AC7ED, -34px 72px #8AC7ED, -36px 69px #8AC7ED, -43px 74px #8AC7ED, -41px 72px #8AC7ED, -42px 69px #8AC7ED, -38px 66px #8AC7ED, -43px 63px #8AC7ED, -37px 61px #8AC7ED, -56px 66px #8AC7ED, -54px 61px #8AC7ED, -58px 54px #8AC7ED, -60px 41px #8AC7ED, -50px 56px #8AC7ED, -54px 57px #8AC7ED, -60px 52px #8AC7ED, -74px 35px #8AC7ED, -76px 18px #8AC7ED, -74px 25px #8AC7ED, -69px 23px #8AC7ED, -84px 13px #8AC7ED, -73px 3px #8AC7ED, -80px -1px #8AC7ED, -79px -4px #8AC7ED, -79px -7px #8AC7ED, -70px -11px #8AC7ED, -67px -23px #8AC7ED, -84px -13px #8AC7ED, -71px -42px #8AC7ED, -61px -49px #8AC7ED, -58px -43px #8AC7ED, -55px -50px #8AC7ED, -32px -72px #8AC7ED, -80px -30px #8AC7ED, -59px -20px #8AC7ED, -79px 12px #8AC7ED, -76px 1px #8AC7ED, 8px 57px #8AC7ED, 59px 36px #8AC7ED, 60px 46px #8AC7ED, 54px 59px #8AC7ED, 44px 52px #8AC7ED, -31px 20px #8AC7ED, -56px 2px #8AC7ED, 47px 35px #8AC7ED, 70px 6px #8AC7ED, 60px -2px #8AC7ED, -21px -75px 0 1px rgba(255, 255, 255, 0.1), -16px -78px 0 1px rgba(255, 255, 255, 0.1), -8px -78px 0 1px rgba(255, 255, 255, 0.1), -5px -77px 0 1px rgba(255, 255, 255, 0.1), -2px -79px 0 1px rgba(255, 255, 255, 0.1), 10px -79px 0 1px rgba(255, 255, 255, 0.1), 25px -73px 0 1px rgba(255, 255, 255, 0.1), 41px -71px 0 1px rgba(255, 255, 255, 0.1), 44px -68px 0 1px rgba(255, 255, 255, 0.1), -26px -72px 0 1px rgba(255, 255, 255, 0.1), -45px -62px 0 1px rgba(255, 255, 255, 0.1), -65px -57px 0 1px rgba(255, 255, 255, 0.1), 59px -49px 0 1px rgba(255, 255, 255, 0.1), 67px -52px 0 1px rgba(255, 255, 255, 0.1), 37px -69px 0 1px rgba(255, 255, 255, 0.1), 43px -62px 0 1px rgba(255, 255, 255, 0.1), 39px -62px 0 1px rgba(255, 255, 255, 0.1), 17px -71px 0 1px rgba(255, 255, 255, 0.1), 28px -67px 0 1px rgba(255, 255, 255, 0.1), 65px -32px 0 1px rgba(255, 255, 255, 0.1), 73px -24px 0 1px rgba(255, 255, 255, 0.1), 67px -25px 0 1px rgba(255, 255, 255, 0.1), 76px -14px 0 1px rgba(255, 255, 255, 0.1), 70px -18px 0 1px rgba(255, 255, 255, 0.1), 82px 21px 0 1px rgba(255, 255, 255, 0.1), 79px 20px 0 1px rgba(255, 255, 255, 0.1), 72px 15px 0 1px rgba(255, 255, 255, 0.1), 55px 45px 0 1px rgba(255, 255, 255, 0.1), 48px 51px 0 1px rgba(255, 255, 255, 0.1), 43px 58px 0 1px rgba(255, 255, 255, 0.1), 37px 57px 0 1px rgba(255, 255, 255, 0.1), 36px 63px 0 1px rgba(255, 255, 255, 0.1), 32px 76px 0 1px rgba(255, 255, 255, 0.1), 35px 70px 0 1px rgba(255, 255, 255, 0.1), 25px 71px 0 1px rgba(255, 255, 255, 0.1), 20px 75px 0 1px rgba(255, 255, 255, 0.1), 5px 70px 0 1px rgba(255, 255, 255, 0.1), 7px 75px 0 1px rgba(255, 255, 255, 0.1), -5px 79px 0 1px rgba(255, 255, 255, 0.1), 3px 78px 0 1px rgba(255, 255, 255, 0.1), -1px 77px 0 1px rgba(255, 255, 255, 0.1), -13px 78px 0 1px rgba(255, 255, 255, 0.1), -15px 82px 0 1px rgba(255, 255, 255, 0.1), -20px 76px 0 1px rgba(255, 255, 255, 0.1), -18px 78px 0 1px rgba(255, 255, 255, 0.1), -17px 75px 0 1px rgba(255, 255, 255, 0.1), -22px 72px 0 1px rgba(255, 255, 255, 0.1), -34px 72px 0 1px rgba(255, 255, 255, 0.1), -36px 69px 0 1px rgba(255, 255, 255, 0.1), -43px 74px 0 1px rgba(255, 255, 255, 0.1), -41px 72px 0 1px rgba(255, 255, 255, 0.1), -42px 69px 0 1px rgba(255, 255, 255, 0.1), -38px 66px 0 1px rgba(255, 255, 255, 0.1), -43px 63px 0 1px rgba(255, 255, 255, 0.1), -37px 61px 0 1px rgba(255, 255, 255, 0.1), -56px 66px 0 1px rgba(255, 255, 255, 0.1), -54px 61px 0 1px rgba(255, 255, 255, 0.1), -58px 54px 0 1px rgba(255, 255, 255, 0.1), -60px 41px 0 1px rgba(255, 255, 255, 0.1), -50px 56px 0 1px rgba(255, 255, 255, 0.1), -54px 57px 0 1px rgba(255, 255, 255, 0.1), -60px 52px 0 1px rgba(255, 255, 255, 0.1), -74px 35px 0 1px rgba(255, 255, 255, 0.1), -76px 18px 0 1px rgba(255, 255, 255, 0.1), -74px 25px 0 1px rgba(255, 255, 255, 0.1), -69px 23px 0 1px rgba(255, 255, 255, 0.1), -84px 13px 0 1px rgba(255, 255, 255, 0.1), -73px 3px 0 1px rgba(255, 255, 255, 0.1), -80px -1px 0 1px rgba(255, 255, 255, 0.1), -79px -4px 0 1px rgba(255, 255, 255, 0.1), -79px -7px 0 1px rgba(255, 255, 255, 0.1), -70px -11px 0 1px rgba(255, 255, 255, 0.1), -67px -23px 0 1px rgba(255, 255, 255, 0.1), -84px -13px 0 1px rgba(255, 255, 255, 0.1), -71px -42px 0 1px rgba(255, 255, 255, 0.1), -61px -49px 0 1px rgba(255, 255, 255, 0.1), -58px -43px 0 1px rgba(255, 255, 255, 0.1), -55px -50px 0 1px rgba(255, 255, 255, 0.1), -32px -72px 0 1px rgba(255, 255, 255, 0.1), -80px -30px 0 1px rgba(255, 255, 255, 0.1), -59px -20px 0 1px rgba(255, 255, 255, 0.1), -79px 12px 0 1px rgba(255, 255, 255, 0.1), -76px 1px 0 1px rgba(255, 255, 255, 0.1), 8px 57px 0 1px rgba(255, 255, 255, 0.1), 59px 36px 0 1px rgba(255, 255, 255, 0.1), 60px 46px 0 1px rgba(255, 255, 255, 0.1), 54px 59px 0 1px rgba(255, 255, 255, 0.1), 44px 52px 0 1px rgba(255, 255, 255, 0.1), -31px 20px 0 1px rgba(255, 255, 255, 0.1), -56px 2px 0 1px rgba(255, 255, 255, 0.1), 47px 35px 0 1px rgba(255, 255, 255, 0.1), 70px 6px 0 1px rgba(255, 255, 255, 0.1), 60px -2px 0 1px rgba(255, 255, 255, 0.1);
      filter: blur(1px);
      animation: glitchAnimationOpacity 4s cubic-bezier(1, 0, 1, 1) infinite, glitchAnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite, glitchAnimationBright 4s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes glitchAnimationOpacity {
  0%, 30%, 96%, 100% {
    opacity: 1; }
  35%, 93% {
    opacity: 0; } }
@keyframes glitchAnimationMove {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg); }
  35%, 65% {
    transform: translate(-50%, -50%) rotate(4320deg); } }
@keyframes glitchAnimationBright {
  0%, 100% {
    filter: blur(1px); }
  35%, 65% {
    filter: blur(1px) brightness(1.8); } }
    .hero__right .fragment-1::before {
      width: 6px;
      height: 6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      animation: fragment1BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes fragment1BeforeAnimationMove {
  0%, 100% {
    transform: rotate(0deg) translate(71px, -181px);
    opacity: 1; }
  37% {
    transform: rotate(15deg) translate(71px, -181px);
    opacity: 1; }
  37.1%, 76.9% {
    opacity: 0; }
  77% {
    transform: rotate(-2deg) translate(71px, -181px);
    opacity: 1; }
  90% {
    transform: rotate(-9deg) translate(71px, -181px); } }
    .hero__right .fragment-1::after {
      width: 6px;
      height: 6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      animation: fragment1AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes fragment1AfterAnimationMove {
  0%, 100% {
    transform: rotate(0deg) translate(285px, 48px);
    opacity: 1; }
  7% {
    transform: rotate(5deg) translate(285px, 48px); }
  22% {
    transform: rotate(-1deg) translate(285px, 48px); }
  40% {
    transform: rotate(-3deg) translate(285px, 48px);
    opacity: 1; }
  40.1%, 81.9% {
    opacity: 0; }
  82% {
    transform: rotate(-15deg) translate(285px, 48px);
    opacity: 1; } }
    .hero__right .fragment-2::after {
      width: 6px;
      height: 6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      animation: fragment2AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes fragment2AfterAnimationMove {
  0%, 100% {
    transform: rotate(0deg) translate(-220px, 162px);
    opacity: 1; }
  46% {
    transform: rotate(-8deg) translate(-220px, 162px);
    opacity: 1; }
  46.1%, 97.9% {
    opacity: 0; }
  98% {
    transform: rotate(2deg) translate(-220px, 162px);
    opacity: 1; } }
    .hero__right .fragment-2::before {
      width: 6px;
      height: 6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      animation: fragment2BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes fragment2BeforeAnimationMove {
  0%, 100% {
    transform: rotate(0deg) translate(284px, 111px);
    opacity: 1; }
  2% {
    transform: rotate(2deg) translate(284px, 111px); }
  9% {
    transform: rotate(-5deg) translate(284px, 111px); }
  15%, 22% {
    transform: rotate(-3deg) translate(284px, 111px); }
  27% {
    transform: rotate(-2deg) translate(284px, 111px);
    opacity: 1; }
  38.9% {
    transform: rotate(-9deg) translate(284px, 111px); }
  39%, 76.9% {
    opacity: 0; }
  77% {
    transform: rotate(-9deg) translate(284px, 111px);
    opacity: 1; } }
    .hero__right .fragment-3::after {
      width: 6px;
      height: 6px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      animation: fragment3AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes fragment3AfterAnimationMove {
  0%, 4.9%, 65.1%, 100% {
    opacity: 0; }
  5% {
    transform: rotate(0deg) translate(183px, 198px);
    opacity: 1; }
  16% {
    transform: rotate(-9deg) translate(284px, 111px);
    opacity: 1; }
  16.1%, 60.9% {
    opacity: 0; }
  61% {
    transform: rotate(5deg) translate(284px, 111px);
    opacity: 1; }
  65% {
    transform: rotate(10deg) translate(284px, 111px);
    opacity: 1; } }
    .hero__right .fragment-3::before {
      width: 6px;
      height: 6px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      animation: fragment3BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite; }
@keyframes fragment3BeforeAnimationMove {
  0%, 100% {
    transform: rotate(0deg) translate(-253px, -126px);
    opacity: 1; }
  22% {
    transform: rotate(25deg) translate(-253px, -126px);
    opacity: 1; }
  22.1%, 95.9% {
    opacity: 0; }
  96% {
    transform: rotate(-5deg) translate(-253px, -126px);
    opacity: 1; } }
    @media (max-width: 768px) {
      .hero__right {
        width: 100%; } }
    .hero__right p {
      font-weight: 400;
      font-size: 1.7rem; }

.about {
  padding: 1% 5% 1% 5%;
  width: 70%;
  padding-bottom: 50px; }
  @media (max-width: 768px) {
    .about {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 5px; } }
  .about p {
    font-size: 2em;
    line-height: 1.4;
    margin-bottom: 1em; }
    @media (max-width: 768px) {
      .about p {
        padding-top: 0;
        font-size: 1.3em; } }
  .about .btn , .services .btn{
    display: inline-block;
    color: #ffffff;
    padding: 32px;
    position: relative;
    letter-spacing: 1px; }
    .about .btn__circle, .about .btn__text, .about .btn__white-circle,.services .btn__circle, .services .btn__text, .services .btn__white-circle{
      position: absolute; }
    .about .btn__circle, .services .btn__circle {
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 100%;
      width: 100%;
      box-shadow: 0 0 1px 1px #fff;
      transition: 0.3s linear; }
    .about .btn__white-circle, .services .btn__white-circle {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 56px;
      height: 56px;
      border-radius: 100%;
      background: #ffffff;
      display: flex;
      transition: 0.3s ease-in-out; }
      .about .btn__white-circle svg, .services .btn__white-circle svg {
        width: 24px;
        height: 24px;
        margin: auto; }
    .about .btn__text, .services .btn__text {
      top: 50%;
      transform: translateY(-50%);
      white-space: nowrap;
      z-index: 2;
      padding: 24px 8px;
      transition: 0.3s linear; }
    .about .btn:hover .btn__circle, .services .btn:hover .btn__circle {
      transform: scale(0); }
    .about .btn:hover .btn__white-circle,.services .btn:hover .btn__white-circle {
      transform: translate(-50%, -50%) scale(1); }
    .about .btn:hover .btn__text,.services .btn:hover .btn__text  {
      transform: translate(40px, -50%); }

.services {
  padding: 1% 5% 1% 5%;
  padding-top: 150px;
  padding-bottom: 5px; }
  .services__header {
    padding-bottom: 50px; }
    .services__header h2 {
      font-size: 4rem;
      font-weight: 400; }
      @media (max-width: 768px) {
        .services__header h2 {
          font-size: 2.5rem; } }
  .services__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1.25em; }
    @media (max-width: 768px) {
      .services__list {
        display: flex;
        flex-direction: column; } }
    .services__list .item {
      border-left: 1px solid rgba(239, 239, 239, 0.1);
      padding-left: 20px; }
      @media (max-width: 768px) {
        .services__list .item {
          border-left: none;
          border-top: 1px solid rgba(239, 239, 239, 0.1);
          padding-left: 20px;
          padding-top: 10px; } }
      .services__list .item h2 {
        font-size: 1.59em;
        line-height: 1;
        letter-spacing: 0; }
      .services__list .item p {
        max-width: 17em;
        font-size: 1.0626em;
        line-height: 1.5;
        letter-spacing: 0; }
      .services__list .item span {
        color: #efefef;
        display: block;
        margin-bottom: 80px;
        font-size: 3.58em;
        line-height: 1.1;
        letter-spacing: -.02em;
        opacity: .2; }

@media (max-width: 768px) {
  .menu_pc {
    display: none; } }
.menu_pc .snip1143 {
  font-family: 'Gilroy';
  text-align: center;
  font-weight: 400;
  margin: 0; }
.menu_pc .snip1143 * {
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease; }
.menu_pc .snip1143 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 0.7em;
  overflow: hidden; }
.menu_pc .snip1143 a {
  padding: 0.3em 0;
  color: #fff;
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  text-decoration: none; }
.menu_pc .snip1143 a:before,
.menu_pc .snip1143 a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease; }
.menu_pc .snip1143 a:before {
  top: 100%;
  display: block;
  height: 1px;
  width: 100%;
  content: "";
  background-color: #fff; }
.menu_pc .snip1143 a:after {
  padding: 0.3em 0;
  position: absolute;
  top: 100%;
  left: 0;
  content: attr(data-hover);
  color: white;
  white-space: nowrap; }
.menu_pc .snip1143 li:hover a,
.menu_pc .snip1143 .current a {
  transform: translateY(-100%); }

.gallery {
  padding: 1% 5% 1% 5%;
  padding-top: 150px;
  padding-bottom: 5px; }
  .gallery h2 {
    text-align: center;
    font-weight: 400;
    font-size: 4rem;
    padding-bottom: 50px; }
  .gallery__img {
    display: flex;
    justify-content: center;
    align-items: center; }
    .gallery__img img {
      width: 100%;
      display: block;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      transition: transform 1000ms; }
    .gallery__img h4 {
      display: none; }
      @media (max-width: 768px) {
        .gallery__img h4 {
          text-align: center;
          padding-top: 20px;
          display: block; } }
    .gallery__img ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
      max-width: 100%;
      width: 80rem; }
    .gallery__img figure {
      margin: 0;
      position: relative;
      overflow: hidden; }
    .gallery__img figure::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200%;
      height: 200%;
      background: rgba(0, 0, 0, 0.5);
      transform-origin: center;
      opacity: 0;
      transform: scale(2);
      transition: opacity 300ms; }
    .gallery__img figcaption {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      place-items: center;
      text-align: center;
      padding: 1rem;
      color: white;
      font-size: 1.2rem;
      z-index: 1;
      opacity: 0;
      transition: opacity 600ms, transform 600ms; }
    .gallery__img a:is(:hover, :focus) figure::after {
      opacity: 1; }
    .gallery__img a:is(:hover, :focus) figcaption {
      opacity: 1;
      transition: opacity 600ms; }
    @media (prefers-reduced-motion: no-preference) {
      .gallery__img figcaption {
        transform: translate3d(0, 2rem, 0); }
      .gallery__img figure::after {
        border-radius: 50%;
        opacity: 1;
        transform: scale(0);
        transition: transform 900ms; }
      .gallery__img a:is(:hover, :focus) figure::after {
        transform: scale(2.5); }
      .gallery__img a:is(:hover, :focus) figcaption {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: opacity 600ms 400ms, transform 600ms 400ms; }
      .gallery__img a:is(:hover, :focus) img {
        transform: scale(1.2); } }

.cta {
  padding: 1% 5% 1% 5%;
  padding-top: 15em;
  padding-bottom: 8em; }
  .cta .wrapper {
    display: flex; }
    @media (max-width: 1399px) {
      .cta .wrapper {
        display: flex;
        flex-direction: column; } }
    .cta .wrapper .cta__contact {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 50px; }
      @media (min-width: 768px) and (max-width: 1399px) {
        .cta .wrapper .cta__contact {
          padding-left: 0px;
          padding-top: 40px; } }
      @media (max-width: 768px) {
        .cta .wrapper .cta__contact {
          padding-top: 20px;
          display: flex;
          flex-direction: column;
          padding-left: 0px;
          align-items: flex-start; } }
      .cta .wrapper .cta__contact h4 {
        font-size: 3rem;
        margin: 0;
        padding-top: 10px;
        font-weight: 400; }
        .cta .wrapper .cta__contact h4 a {
          text-decoration: none;
          color: white; }
        @media (max-width: 768px) {
          .cta .wrapper .cta__contact h4 {
            font-size: 1.8rem; } }
    .cta .wrapper .cta__content {
      position: relative;
      max-width: 56.25em;
      width: 100%; }
      .cta .wrapper .cta__content .cta__image {
        width: 7em;
        height: 7em;
        top: -1em;
        position: absolute;
        border-radius: 50%; }
        @media (max-width: 768px) {
          .cta .wrapper .cta__content .cta__image {
            position: relative; } }
        .cta .wrapper .cta__content .cta__image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          border-radius: 50%; }
        .cta .wrapper .cta__content .cta__image::after {
          display: block;
          top: .25em;
          right: .25em;
          content: "";
          width: 1.25em;
          height: 1.25em;
          background-color: #a0c000;
          z-index: 2;
          border: .125em solid #efefef;
          position: absolute;
          border-radius: 50%; }
  .cta h3 {
    font-size: 5.37em;
    line-height: 1;
    letter-spacing: -.03em;
    position: relative;
    text-indent: 1.55em;
    font-weight: 600; }
    @media (max-width: 768px) {
      .cta h3 {
        font-size: 3em;
        text-indent: 0; } }

.footer .wrapper {
  padding: 0 2.5em;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .footer .wrapper {
      padding: 0 0em; } }
  .footer .wrapper .footer__grid {
    display: grid;
    grid-template-columns: 5fr 6fr 1fr;
    padding: 2em 0;
    border-top: 1px solid rgba(239, 239, 239, 0.1); }
    @media (max-width: 768px) {
      .footer .wrapper .footer__grid {
        flex-direction: column;
        display: flex; } }
    .footer .wrapper .footer__grid .footer__copy {
      text-align: left; }
      @media (max-width: 768px) {
        .footer .wrapper .footer__grid .footer__copy {
          text-align: center; } }
  .footer .wrapper .footer__links {
    display: flex;
    column-gap: 1.25em;
    list-style: none;
    margin: 0; }
    @media (max-width: 768px) {
      .footer .wrapper .footer__links {
        padding: 0;
        margin-top: 10px;
        margin-bottom: 10px;
        justify-content: space-between;
        display: none; } }
    .footer .wrapper .footer__links a {
      color: #fff;
      text-decoration: none; }
  @media (max-width: 768px) {
    .footer .wrapper .footer__form {
      text-align: center;
      display: none; } }
  .footer .wrapper .footer__form a {
    color: #fff;
    text-decoration: none; }

/*# sourceMappingURL=style.css.map */



  /* Animowane tło */

@media(max-width:768px){
	
	.animated-bg {
display:none;
		
	}
}
        .animated-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(45deg, #111414, #1a1d1d, #0f1212, #151818);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }

        .animated-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(0, 150, 255, 0.03) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 0, 150, 0.03) 0%, transparent 50%),
                        radial-gradient(circle at 40% 80%, rgba(0, 255, 150, 0.03) 0%, transparent 50%);
            animation: pulseGlow 8s ease-in-out infinite alternate;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

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

      /* Header */
        .header_services {
            text-align: center;
            padding: 20px 20px 60px;
        }

        .header_services h1 {
            font-size: 3.5rem;
            font-weight: 700;
             background: linear-gradient(135deg, #fff, #fff, #00D4FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 20px;
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        .header_services p {
            font-size: 1.3rem;
            color: #b0b8b8;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        @keyframes titleGlow {
            0% { filter: brightness(1); }
            100% { filter: brightness(1.2); }
        }

        /* Services Grid */
        .services-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 10px 80px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 60px;
        }

        .service-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(255, 0, 128, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .service-card:hover::before {
            opacity: 1;
        }

        .service-card:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 212, 255, 0.3);
            box-shadow: 0 5px 15px rgba(0, 212, 255, 0.1);
        }

        .service-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            display: flex;
            align-items: center;
            justify-content: center;
 
            border-radius: 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        .service-card:hover .service-icon {
            
        }

        .service-icon img, .service-icon svg {
            width: 70px;
            height: 70px;
            fill: white;
        }

        .service-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #fff;
            line-height: 1.3;
        }

        .service-description {
            color: #b0b8b8;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 35px;
            }
            
            .header_services h1 {
                font-size: 2.8rem;
            }
        }

        @media (max-width: 768px) {
            .services-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .header_services h1 {
                font-size: 2.2rem;
            }
            
            .header_services p {
                font-size: 1.1rem;
            }
            
            .service-card {
                padding: 30px 25px;
            }
            
            .service-icon {
                width: 70px;
                height: 70px;
            }
            
            .service-icon svg {
                width: 35px;
                height: 35px;
            }
        }

         @keyframes waveEffect {
        0% {
            transform: scale(0);
            opacity: 1;
        }
        100% {
            transform: scale(4);
            opacity: 0;
        }
    }
    .service-btn-container{

      display: flex;
      justify-content: center;
    }