/* Reset and base styles  */
* {
    padding: 0vw;
    margin: 0vw;
    border: none;
  }

html {
  overflow: hidden;
}

  @font-face {
    font-family: 'Soyuz Grotesk';
    src: url('../fonts/Soyuz Grotesk Bold.woff') format('woff'),
         url('../fonts/Soyuz Grotesk Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Inter 24pt Regular */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_24pt-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Inter 24pt Medium */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_24pt-Medium.ttf') format('truetype');
  font-weight: 500; /* Medium обычно соответствует 500 */
  font-style: normal;
  font-display: swap;
}

/* Inter 24pt SemiBold */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_24pt-SemiBold.ttf') format('truetype');
  font-weight: 600; /* SemiBold обычно соответствует 600 */
  font-style: normal;
  font-display: swap;
}
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Links */
  
  a {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: none;
  }
  
  /* Common */
  
  aside,
  nav,
  footer,
  header,
  section,
  main {
    display: block;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    font-size: inherit;
    font-weight: inherit;
  }
  
  ul,
  ul li {
    list-style: none;
  }
  
  img {
    vertical-align: top;
  }
  
  img,
  svg {
    /*max-width: 100%;*/
    height: auto;
  }
  
  address {
    font-style: normal;
  }
  
  /* Form */
  
  input,
  textarea,
  button,
  select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
  }
  
  input::-ms-clear {
    display: none;
  }
  
  button,
  input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
  }
  
  input:focus,
  input:active,
  button:focus,
  button:active {
    outline: none;
  }
  
  button::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
  
  label {
    cursor: pointer;
  }
  
  legend {
    display: block;
  }
  
  body {
    margin: 0;
    overflow: hidden;
    background-image: url(/image/1.webp);
    background-size: cover;
    height: 100dvh; /* высота равна окну браузера */
    width: 100%;
  }

  #hello{
    height: 100%;
  }
  
  .menu {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100vw;
    padding: 2.0833vw 0;
    text-align: center;
    z-index: 11;
  }
  
  .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 2.0833vw;
  }
  
  .menu li {
    cursor: pointer;
    font-size: 1.4583vw;
    text-transform: uppercase;
    font-family: "Soyuz Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.4583vw;
    line-height: 130%;
    text-transform: uppercase;
    text-align: center;
    color: rgba(20, 29, 82, 1);
  }
  
  .line {
    position: relative;
    height: 0.1042vw;
    background: linear-gradient(180deg, #2c41b8 0%, #737373 100%);
    margin-top: 0.5208vw;
    max-width: 23.9063vw;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .line::after {
    content: '';
    background-image: url(/image/Arrow\ 1.svg);
    height: 8px;
    display: block;
    position: absolute;
    right: -5px;
    background-size: 100%;
    background-repeat: no-repeat;
    top: -3px;
    width: 7px;
    object-fit: cover;
  }
  
  .ball {
    position: absolute;
    width: 0.5208vw;
    height: 0.5208vw;
    background: #000;
    border-radius: 50%;
    top: -0.2083vw;
    left: 0;
    transition: left 0.3sease;
    border-radius: 100%;
    background: linear-gradient(90deg, #2c41b8 0%, #141d52 100%);
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 9px 0 rgba(22, 33, 93, 0.5);
  }

  
  .screen {
   height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875vw;
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 0;
    pointer-events: none;
  }
  
  .screen.active {
    opacity: 1;
    position: relative;
    pointer-events: all;
  }
  
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    opacity: 0; /* Изначально скрыт */
    -webkit-mask-image:
            linear-gradient(to right, transparent 0px, black 30px, black calc(100% - 30px), transparent 100%),
            linear-gradient(to bottom, transparent 0px, black 30px, black calc(100% - 30px), transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
  }

  #logo-contact{
    opacity: 1;
  }

  #rec-contact {
    z-index: 10;
    position: absolute;
    width: 33%;
  }
  
  #ball-1 {
    bottom: 0;
    left: 0; /* Слева снизу */
  }
  
  #ball-2 {
    bottom: 0;
    right: 0; /* Справа снизу */
  }
  
  #ball-3 {
    top: 0;
    right: 0; /* Сверху справа */
  }
  
  .ball-image {
    position: absolute;
    display: block;
  }
  
  .star-image {
    position: absolute;
    opacity: 0; /* Изначально скрыты */
  }
  
  #star-1 {
    bottom: 3.125vw;
    right: 3.125vw; /* Справа снизу */
  }

#star-1-pr {
  top: -4.875vw;
  right: 7.125vw; /* Справа снизу */
  z-index: 10;
}

#star-1-con {
  top: -4.875vw;
  right: 7.125vw; /* Справа снизу */
  z-index: 10;
}
  
  #star-2 {
    top: 3.125vw;
    left: 3.125vw; /* Сверху слева */
  }
  
  .ramka {
    position: absolute;
    width: 95%;
  }
  
  .corner-image {
    position: absolute;
    opacity: 0; /* Изначально скрыты */
    z-index: 2;
  }
  
  #tl {
    top: 1.0417vw;
    left: 1.0417vw;
  } /* Сверху слева */
  #tr {
    top: 1.0417vw;
    right: 1.0417vw;
  } /* Сверху справа */
  #bl {
    bottom: 1.0417vw;
    left: 1.0417vw;
  } /* Снизу слева */
  #br {
    bottom: 1.0417vw;
    right: 1.0417vw;
  } /* Снизу справа */
  
  /* Стили для новых изображений в Projects */
  #project img[src*="/image/back_lb.webp"],
  #project img[src*="/image/back_lt.webp"],
  #project img[src*="/image/back_rb.webp"],
  #project img[src*="/image/back_rt.webp"] {
    position: absolute;
    opacity: 0;
  }
  
  #project img[src*="/image/back_lb.webp"] {
    bottom: 0;
    left: 0;
  }
  #project img[src*="/image/back_lt.webp"] {
    top: 0;
    left: 0;
  }
  #project img[src*="/image/back_rb.webp"] {
    bottom: 0;
    right: 0;
  }
  #project img[src*="/image/back_rt.webp"] {
    top: 0;
    right: 0;
  }
  
  .footer-text {
    position: absolute;
    bottom: 13vh; /* Текст над стрелкой */
    left: 50%;
    transform: translateX(-50%);
    max-width: 22.7083vw;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 0.8333vw;
    text-align: center;
    color: #141d52;
  
    opacity: 0; /* Изначально скрыт */
  }
  
  .arrow {
    position: absolute;
    bottom: 7vh; /* Стрелка внизу */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0; /* Изначально скрыта */
  }
  
  .circle-portal {
    position: absolute;
    width: 32.6354vw;
    height: 35.3542vw;
  
    top: 50%;
    left: 16.8333vw;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    overflow: hidden; /* Скрываем всё, что выходит за круг */
    opacity: 1; /* Круг всегда виден */
    background-image: url(/image/persone-mask_compressed.webp);
  }
  
  .hello-title {
    font-family: "Soyuz Grotesk", sans-serif;
    font-weight: 700;
    font-size: 5.5729vw;
    line-height: 100%;
    text-transform: uppercase;
    color: #141d52;
    position: absolute;
    top: 6.25vw;
    z-index: 999;
  }
  
  .hello-title span {
    opacity: 0.1;
  }
  
  #circle-portal-2 {
    position: absolute;
    width: 30.6667vw;
    height: 34.8854vw;
    left: auto;
    top: 50%;
    right: -17vw;
    /*border-radius: 100%;*/
    transform: translate(-50%, -50%);
    overflow: hidden; /* Скрываем всё, что выходит за круг */
    opacity: 1; /* Круг всегда виден */
    background-image: url(/image/state=start.webp);
  }
  
  #person-2 {
    width: 35.6667vw;
    height: 35.8854vw;
    left: 58%;
  }
  
  .person {
    position: absolute;
    bottom: -10%; /* Изначально персонаж полностью ниже круга */
    left: 50%;
    transform: translateX(-50%);
    width: 32.6354vw;
    opacity: 1; /* Персонаж виден, но скрыт за пределами круга */
  }
  
  /* Стили для секции Projects */
  .project-title {
    position: absolute;
    top: 5.2083vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5vw;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    opacity: 0;
  }
  
  .project-cards {
    display: flex;
    justify-content: center;
    gap: 2.0833vw;
    flex-wrap: wrap;
  }
  
  .card img {
    width: 100%;
    height: 27.0833vw;
    object-fit: cover;
    border-radius: 0.5208vw;
  }
  
  .card h2 {
    font-family: "Inter", sans-serif;
    font-size: 1.25vw;
    margin: 0.5208vw 0;
    font-weight: 600;
  }
  
  .card-description {
    font-family: "Inter", sans-serif;
    font-size: 0.8333vw;
    color: #666;
    opacity: 0; /* Изначально скрыто */
  }
  
  /* Стили для About */
  .about-content {
    text-align: center;
    max-width: 31.25vw;
    z-index: 1;
    margin-bottom: 15.4375vw;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  /* Стили для новых изображений в Contact */
  #contact img[src*="/image/back_lb.webp"],
  #contact img[src*="/image/back_lt.webp"],
  #contact img[src*="/image/back_rb.webp"],
  #contact img[src*="/image/back_rt.webp"] {
    position: absolute;
    z-index: 1;
    opacity: 0;
  }
  
  #contact img[src*="/image/back_lb.webp"] {
    bottom: 0;
    left: 0;
  }
  #contact img[src*="/image/back_lt.webp"] {
    top: 0;
    left: 0;
  }
  #contact img[src*="/image/back_rb.webp"] {
    bottom: 0;
    right: 0;
  }
  #contact img[src*="/image/back_rt.webp"] {
    top: 0;
    right: 0;
  }
  
  .contact-content {
    text-align: center;
    max-width: 31.25vw;
    z-index: 11;
    height: 21.1979vw;
    margin-bottom: 15.4375vw;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  #tl-hello,
  #tl-project,
  #tl-about,
  #tl-contact {
    top: 1.0417vw;
    left: 1.0417vw;
  }
  #tr-hello,
  #tr-project,
  #tr-about,
  #tr-contact {
    top: 1.0417vw;
    right: 1.0417vw;
  }
  #bl-hello,
  #bl-project,
  #bl-about,
  #bl-contact {
    bottom: 1.0417vw;
    left: 1.0417vw;
  }
  #br-hello,
  #br-project,
  #br-about,
  #br-contact {
    bottom: 1.0417vw;
    right: 1.0417vw;
  }
  
  .about-title {
    font-weight: 700;
    font-size: 5.5729vw;
    line-height: 100%;
    text-transform: uppercase;
    display: flex;
    gap: 0.7813vw;
    color: #141d52;
    font-family: "Soyuz Grotesk", sans-serif;
    
  }
  
  .about-link {
    font-weight: 400;
    font-size: 0.8333vw;
    font-family: "Inter", sans-serif;
  
    margin-top: 1.5625vw;
    text-align: center;
    display: flex;
    gap: 0.5208vw;
    align-items: center;
  
    color: #1233ed;
  }
  
  .about-link::after {
    content: "";
    width: 0.4167vw;
    height: 0.4167vw;
    display: block;
    background-image: url(/image/arrow.svg);
  }
  
  #about {
    background-image: url(/image/back_about_compressed.webp);
    background-size: cover;
  }
  
  .about-title span {
    font-weight: 700;
    font-size: 5.5729vw;
    line-height: 100%;
    text-transform: uppercase;
    color: #141d52;
  
    opacity: 0.1;
  }
  
  .about-text {
    font-weight: 500;
    font-size: 0.8333vw;
    margin-top: 2.6042vw;
    font-family: "Inter", serif;
  
    text-align: center;
    max-width: 18.4896vw;
    color: #141d52;
    text-shadow: 0 0 3.9063vw 0 #fff;
  }
  
  .about-image {
    position: absolute;
    opacity: 0;
  }
  
  #about-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  
  #about-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  
  #about-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .contact-title {
    font-weight: 700;
    font-size: 5.5729vw;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8.3333vw;
    color: #141d52;
    font-family: "Soyuz Grotesk", sans-serif;
  }
  
  .contact-logo {
    max-width: 7.8125vw; /* Укажи нужный размер логотипа */
    margin: 1.0417vw 0;
    opacity: 0;
  }
  
  .contact-subtitle {
    font-weight: 500;
    font-size: 0.8333vw;
    text-align: center;
    color: #141d52;
    font-family: "Inter", sans-serif;
    text-shadow: 0 0 3.9063vw 0 #fff;
    margin-top: 0.5208vw;
  }
  
  .social-icons {
    display: flex;
    justify-content: center;
    gap: 1.3542vw;
    margin-top: 1.0417vw;
  }
  
  .social-icon img {
    width: 1.6667vw;
    height: 1.6667vw;
    opacity: 0;
  }
  
  .contact-email {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 0.8333vw;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-align: center;
    color: #9baaff;
    margin-bottom: 0.7813vw;
  }
  
  #contact {
    background-image: url(/image/1.webp);
    background-size: 100%;
  }
  
  .contact-address {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 0.8333vw;
    text-align: center;
    color: rgba(50, 50, 50, 0.5);
  }
  
  .menu-item {
    opacity: 0.5;
    transition: 0.2s;
  }
  
  .menu-item.active {
    opacity: 1;
  }
  
  .side-text {
    position: absolute;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 0.8333vw;
    color: rgba(13, 62, 90, 0.5);
    opacity: 0;
    bottom: 16%;
    width: 20%;
    transform: translateY(-50%);
  }
  
  .side-text.left {
    left: 7.8125vw;
  }
  
  .side-text.right {
    right: 1.0417vw;
    color: #2609e7;
  }
  
  .block_logos {
    display: flex;
    align-items: center;
    gap: 0.7813vw;
  }
  
  .block_logos p {
    font-family: "Soyuz Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.7188vw;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    color: #141d52;
  }
  
  .project-title {
    position: absolute;
    top: 5.2083vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5vw;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    opacity: 0;
  }
  
  .project-cards {
    display: flex;
    justify-content: center;
    gap: 6.0417vw;
    flex-wrap: wrap;
  }
  
  .card {
    width: 18.0729vw;
    text-align: center;
    position: relative;
    opacity: 0;
  }
  
  .card:nth-child(1) {
    top: -6vh;
  }
  
  .card:nth-child(2) {
    top: 10vh;
  }
  
  .project-title {
    font-family: "Soyuz Grotesk", sans-serif;
    font-weight: 700;
    font-size: 5.5729vw;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    color: #141d52;
  }
  
  /*.card:nth-child(3) {*/
  /*  top: -4.6875vw;*/
  /*}*/
  
  .card-inner {
    position: relative;
    width: 18.0729vw;
    height: 27.0833vw; /* Высота карточки */
    transform-style: preserve-3d;
    transition: transform 0.6s; /* Для плавности, если нужно вручную */
  }

  .card-inner img{
    border-radius: 10px;
  }
  
  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Скрываем обратную сторону при повороте */
    border-radius: 0.5208vw;
    object-fit: cover;
    left: 0;
  }
  
  .card-front {
    transform: rotateY(0deg); /* Лицевая сторона */
  }
  
  .card-back {
    transform: rotateY(180deg); /* Обратная сторона */
  }
  
  #project {
    background-image: url(/image/back_con.webp);
    background-size: cover;
  }
  
  .card h2 {
    font-family: "Soyuz Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.0417vw;
    text-align: center;
    color: #141d52;
  }
  
  .card-description {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 0.8333vw;
    text-align: center;
    color: #141d52;
  }

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: #ffffff; /* фон */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* поверх всего */
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/*Лоадер*/

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
  dash 1.4s ease-in-out infinite,
  colors 5.6s ease-in-out infinite;
}

@keyframes colors {
  0% { stroke: #a6feff; }
  25% { stroke: #e8aeb1; }
  50% { stroke: #edaa3d; }
  75% { stroke: #c0ffbe; }
  100% { stroke: #a6feff; }
}

@keyframes dash {
  0% { stroke-dashoffset: 187; }
  50% {
    stroke-dashoffset: 46.75;
    transform:rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform:rotate(450deg);
  }
}


@media (max-width: 768px) {
    .ball-image {
      position: absolute;
      width: 20%;
    }
  
    .star-image {
      position: absolute;
      opacity: 0;
      width: 20%;
    }
  
    .corner-image {
      position: absolute;
      opacity: 0;
      z-index: 2;
      width: 20%;
    }
    .hello-title {
      font-family: "Soyuz Grotesk", sans-serif;
      font-weight: 700;
      font-size: 18.1395vw;
      line-height: 100%;
      text-transform: uppercase;
      color: #141d52;
      position: absolute;
      top: 12.1395vw;
      z-index: 999;
      width: 93%;
      line-height: 85%;
      text-align: center;
    }
  
    .menu li {
      cursor: pointer;
      font-size: 1.4583vw;
      text-transform: uppercase;
      font-family: "Soyuz Grotesk", sans-serif;
      font-weight: 700;
      font-size: 6.0465vw;
      line-height: 130%;
      text-transform: uppercase;
      text-align: center;
      color: rgba(20, 29, 82, 1);
    }
  
    .line {
      position: relative;
      height: 1px;
      background: linear-gradient(180deg, #2c41b8 0%, #737373 100%);
      margin-top: 0.5208vw;
      max-width: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .ball {
      position: absolute;
      width: 1.1628vw;
      height: 1.1628vw;
      background: #000;
      border-radius: 50%;
      top: -2px;
      left: 0;
      transition: left 0.3sease;
      border-radius: 100%;
      background: linear-gradient(90deg, #2c41b8 0%, #141d52 100%);
      backdrop-filter: blur(2px);
      box-shadow: 0 2px 9px 0 rgba(22, 33, 93, 0.5);
    }

    .project-title{
      font-family: "Soyuz Grotesk", sans-serif !important;
    }
  
    .logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      opacity: 1 !important;
      height: 85%;
      object-fit: cover;
    }

    #logo_b{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      opacity: 1 !important;
      height: 10%;
      object-fit: cover;
      left: 50px;
      top: 220px;

    }
  
    .circle-portal {
      display: none;
    }

    .screen{
      height: 100dvh;
    }
  
    .person {
      display: none;
    }
  
    #circle-portal-2 {
      position: absolute;
      width: 58.1395vw;
      height: 58.1395vw;
      left: auto;
      top: 56%;
      right: 0;
      border-radius: 100%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      opacity: 1;
      background: none;
    }
  
    .footer-text {
      position: absolute;
      left: 50%;
      transform: translateX(-50%) !important;
      max-width: 90%;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 500;
      font-size: 3.2558vw;
      width: 100%;
      text-align: center;
      color: #141d52;
      opacity: 0;
    }
    /* Стили для новых изображений в Projects */
    #project img[src*="/image/back_lb.webp"],
    #project img[src*="/image/back_lt.webp"],
    #project img[src*="/image/back_rb.webp"],
    #project img[src*="/image/back_rt.webp"] {
      width: 20%;
    }
  
    .project-title {
      position: absolute;
      top: 15.1163vw;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11.1628vw;
      font-family: "Inter", sans-serif;
      font-weight: 700;
      opacity: 0;
    }
  
    .project-cards {
      display: flex;
      justify-content: center;
      gap: 0;
      flex-wrap: wrap;
      flex-direction: column;
      width: 89%;
    }
  
    .card {
      text-align: center;
      position: relative;
      opacity: 0;
    }
  
    .card:nth-child(1) {
        top: 40.8837vw;
    }
  
    .card:nth-child(2) {
        top: -11.6279vw;
        left: 48.8372vw;
    }
  
    .card:nth-child(3) {
      top: -21.5814vw;
    }
  
    #contact img[src*="/image/back_lb.webp"],
    #contact img[src*="/image/back_lt.webp"],
    #contact img[src*="/image/back_rb.webp"],
    #contact img[src*="/image/back_rt.webp"] {
      width: 20%;
    }
  
    #contact {
      background-image: url(/image/back_con.webp);
      background-size: cover;
      background-position: 50% 50%;
  }
  .contact-title {
      font-weight: 700;
      font-size: 15.5729vw;
      line-height: 100%;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 4.6512vw;
      color: #141d52;
      font-family: "Soyuz Grotesk", sans-serif;
  }
  
  .contact-subtitle {
      font-weight: 500;
      font-size: 4.186vw;
      text-align: center;
      color: #141d52;
      font-family: "Inter", sans-serif;
      text-shadow: 0 0 3.9063vw 0 #fff;
      margin-top: 3.4884vw;
      opacity: 0.8;
  }
  
  
  
  .social-icon img {
      width: 8.8372vw;
      height: 8.8372vw;
      opacity: 0;
  }
  
  
  .contact-email {
      font-family: "Inter", sans-serif;
      font-weight: 400;
      font-size: 4.6512vw;
      text-decoration: underline;
      text-decoration-skip-ink: none;
      text-align: center;
      color: #7082ff;
      margin-bottom: 3.4884vw;
      margin-top: 3.4884vw;
  }
  
  .contact-address {
      font-family: "Inter", sans-serif;
      font-weight: 400;
      font-size: 3.0233vw;
      text-align: center;
      color: rgba(50, 50, 50, 0.5);
  }
  
  .side-text {
      position: absolute;
      font-family: "Inter", sans-serif;
      font-weight: 400;
      font-size: 3.2558vw;
      color: rgba(13, 62, 90, 0.5);
      opacity: 0;
      bottom: 16%;
      width: auto;
      transform: translateY(-50%);
  }

  .side-text.right{
    right: 20px;
  }
  

  .side-text.left{
    left: 20px;
  }
  
  .about-image{
      width: 30%;
  }
  
  #about-left {
      left: 0;
      top: 20%;
      transform: translateY(-50%);
      width: 50%;
  }
  
  
  #about-right {
      right: 0;
      top: 70%;
      transform: translateY(-50%);
    width: 40%;
  }
  
  .about-title {
      font-weight: 700;
      font-size: 19.7674vw;
      line-height: 100%;
      text-transform: uppercase;
      display: flex
  ;
      gap: 0.7813vw;
      color: #141d52;
      font-family: "Soyuz Grotesk", sans-serif;
  }
  
  .about-title span {
      font-weight: 700;
      font-size: 19.7674vw;
      line-height: 100%;
      text-transform: uppercase;
      color: #141d52;
      opacity: 0.1;
  }
  
  .about-text {
      font-weight: 500;
      font-size: 3.7209vw;
      margin-top: 2.6042vw;
      font-family: "Inter", serif;
      text-align: center;
      max-width: 100%;
      color: #141d52;
      text-shadow: 0 0 3.9063vw 0 #fff;
  }

  .card h2 {
    font-family: "Soyuz Grotesk", sans-serif;
    font-weight: 700;
    font-size: 5.1163vw;
    text-align: center;
    color: #141d52;
}

.card-description {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 2.5581vw;
    text-align: center;
    color: #141d52;
}
  
  .about-content {
      text-align: center;
      max-width: 90%;
      z-index: 1;
      margin-bottom: 23.4375vw;
      display: flex
  ;
      align-items: center;
      flex-direction: column;
  }
  
  .about-link {
      font-weight: 400;
      font-size: 6.0465vw;
      font-family: "Inter", sans-serif;
      margin-top: 3.4884vw;
      text-align: center;
      display: flex
  ;
      gap: 2.3256vw;
      align-items: center;
      color: #1233ed;
  }
  
  section{
      overflow: hidden;
  }
  
  
  #project {
      background-image: url(/image/back_con.webp);
      background-size: cover;
      background-position: 50%;
  }
  .about-link::after {
      content: "";
      width: 2.7907vw;
      height: 2.7907vw;
      display: block;
      background-image: url(/image/arrow.svg);
      background-size: cover;
  }
  
  .social-icons {
      display: flex
  ;
      justify-content: center;
      gap: 2.3256vw;
      margin-top: 4.6512vw;
  }
  .contact-logo {
      max-width: 23.2558vw;
      margin: 1.0417vw 0;
  }
  
  .contact-content {
      text-align: center;
      max-width: 90%;
      z-index: 11;
      height: auto;
      margin-bottom: 11.6279vw;
      display: flex
  ;
      align-items: center;
      flex-direction: column;
  }
  
  .block_logos {
      display: flex
  ;
      align-items: center;
      gap: 2.3256vw;
  }
  
  .block_logos p {
      font-family: "Soyuz Grotesk", sans-serif;
      font-weight: 700;
      font-size: 4.186vw;
      line-height: 100%;
      text-transform: uppercase;
      text-align: center;
      color: #141d52;
  }
  
    .card-inner {
      position: relative;
      width: 100%;
      height: 48.4186vw;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }
  
    .card {
      text-align: center;
      position: relative;
      opacity: 0;
      width: 38.1395vw;
  }
  
    .card img {
      width: 100%;
      object-fit: cover;
      height: 100%;
      border-radius: 3.4884vw;
    }

    #rec-contact{
      width: 90%;
    }

  #about-bottom {
    width: 110%;
  }

  }

@media (min-width: 627px) and (max-width: 768px) {
  .project-title {
    top: 12vw;
  }

  .project-cards{
    gap: 1vw;
  }

  .card{
    width: 30vw;
  }

  .card-inner{
    height: 37vw;
  }

  .card:nth-child(1) {
    left: 8vw;
  }

  .card:nth-child(3) {
    left: 8vw;
  }


}