@charset "UTF-8";
html,
body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

body.preloader-active {
  overflow: hidden !important;
  height: 100vh !important;
  width: 100% !important;
  position: fixed !important;
}

.preloader {
  position: fixed;
  inset: 0;
  background: #0b0b0b;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.5s ease !important;
}

.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

.preloader canvas {
  display: block;
  width: 100%;
  height: 100%;
}

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

main {
  background-color: #000000;
  width: 100%;
}

.navbar {
  position: fixed;
  /* changed from sticky */
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  display: flex;
  justify-content: center;
  padding: 0.6rem 1rem;
  z-index: 9000;
  background: transparent;
  pointer-events: auto;
  /* Панель меню */
  /* Входная анимация при открытии */
  /* Кнопка закрытия */
  /* Навигация внутри меню */
  /* Социальные иконки внизу панели */
  /* Указатель курсора для бургеров */
}
.navbar.scrolled {
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}
.navbar-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 40%;
  height: 46px;
  border-radius: 45px;
  padding: 1rem 2rem;
  background: rgba(18, 20, 34, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-links-li {
  list-style: none;
  display: inline-block;
}
.navbar-links-li a {
  position: relative;
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navbar-links-li a::before {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 30px;
  background: #fff;
  transition: 0.5s transform ease;
  transform: scale3d(0, 0, 1);
  transform-origin: 0 50%;
}
.navbar-links-li a:hover::before {
  transform: scale3d(1, 1, 1);
}
.navbar-links-li a::before {
  background: #8a2be2;
  transform-origin: 100% 50%;
}
.navbar-links-li a:hover::before {
  transform-origin: 0 50%;
}
.navbar-links-li a:hover::before, .navbar-links-li a:focus::before {
  transform: scale3d(1, 1, 1);
  transform-origin: 0 50%;
}
.navbar .menu-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 15, 0.6);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 9999;
}
.navbar .menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.navbar .menu-panel {
  width: min(480px, 92%);
  background: linear-gradient(180deg, rgba(20, 18, 30, 0.98), rgba(12, 10, 24, 0.98));
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 30px 70px rgba(3, 3, 8, 0.7);
  transform: translateY(10px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 260ms ease;
  position: relative;
  color: #ffffff;
}
.navbar .menu-overlay.active .menu-panel {
  transform: translateY(0) scale(1);
}
.navbar .menu-close {
  position: absolute;
  right: 12px;
  top: 10px;
  background: transparent;
  color: #b7bac1;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
.navbar .menu-close:hover {
  color: #ffffff;
  transform: translateY(-2px);
}
.navbar .menu-nav ul {
  list-style: none;
  margin: 6px 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.navbar .menu-nav a {
  display: block;
  font-size: 22px;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 160ms ease, transform 120ms ease;
}
.navbar .menu-nav a:hover {
  background: rgba(100, 84, 218, 0.12);
  transform: translateX(6px);
}
.navbar .menu-socials {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
}
.navbar .menu-socials a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}
.navbar .menu-socials a img {
  width: 48px;
  height: auto;
}
.navbar .menu-socials img {
  width: 24px;
  height: 24px;
}
.navbar .burger,
.navbar .burger-menu {
  cursor: pointer;
}
@media (max-width: 480px) {
  .navbar .menu-panel {
    width: 95%;
    padding: 22px;
    border-radius: 12px;
  }
  .navbar .menu-nav a {
    font-size: 20px;
    padding: 12px;
    text-align: center;
  }
  .navbar .menu-socials a {
    width: 40px;
    height: 40px;
  }
}

/* Кнопка-бургер */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 32px;
  cursor: pointer;
  position: absolute;
  right: 25px;
  top: 20px;
  z-index: 1100;
  transition: all 0.3s ease;
}
.burger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  margin: 4px 0;
  transition: all 0.4s ease;
}
.burger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 880px) {
  .burger {
    display: flex;
  }
  .navbar-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: rgba(18, 20, 34, 0.95);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    transition: right 0.4s ease-in-out;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  .navbar-links.active {
    right: 0;
  }
  .navbar-links-li a {
    font-size: 22px;
    transition: color 0.3s ease;
  }
  .navbar-links-li a:hover {
    color: #8a2be2;
  }
}
.shadow {
  content: "";
  width: 5vh;
  height: 5vh;
  background-color: #000000;
  position: absolute;
  left: 0;
  top: 0;
}

.section__one {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 180px;
}
.section__one .section__one-animated-tl,
.section__one .section__one-animated-rm,
.section__one .section__one-animated-bl,
.section__one .section__one-animated-br,
.section__one .section__one-animated-tr {
  position: absolute;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0.7;
}
.section__one .section__one-animated-tl {
  top: 10%;
  left: 30%;
  animation-name: floatGentleTL;
  animation-delay: 0s;
}
.section__one .section__one-animated-rm {
  left: 0;
  top: 17%;
  z-index: 0;
  animation-delay: 1s;
  animation-name: floatGentleRM;
}
.section__one .section__one-animated-bl {
  bottom: 0;
  left: 0;
  animation-name: floatGentleBL;
  animation-delay: 2s;
}
.section__one .section__one-animated-br {
  bottom: 0;
  right: 0;
  animation-delay: 3s;
  animation-name: floatGentleBR;
}
.section__one .section__one-animated-tr {
  width: 200px;
  top: 140px;
  right: 180px;
  animation-name: floatGentleTR;
  animation-delay: 4s;
}
@keyframes floatGentleTL {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(8px, 6px);
  }
  50% {
    transform: translate(4px, 10px);
  }
  75% {
    transform: translate(-6px, 4px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes floatGentleRM {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-6px, 8px);
  }
  50% {
    transform: translate(-10px, 4px);
  }
  75% {
    transform: translate(-4px, -6px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes floatGentleBL {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(6px, -8px);
  }
  50% {
    transform: translate(10px, -4px);
  }
  75% {
    transform: translate(4px, 6px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes floatGentleBR {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-8px, -6px);
  }
  50% {
    transform: translate(-4px, -10px);
  }
  75% {
    transform: translate(-6px, 4px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes floatGentleTR {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(6px, 8px);
  }
  50% {
    transform: translate(-4px, 6px);
  }
  75% {
    transform: translate(8px, -4px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.section__one-hgh {
  width: 1000px;
  height: 90px;
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.section__one-hgh br {
  display: none;
}
.section__one-hgh h1 {
  font-size: 74px;
  font-weight: 700;
  color: #f5f0f8;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  justify-content: center;
  letter-spacing: 3px;
  position: relative;
  z-index: 1;
}
.section__one-hgh h1 .first {
  display: inline-block;
  transition: all 0.5s ease;
}
.section__one-hgh h1 .first:hover {
  transform: rotate(10deg);
  font-size: 88px;
  transform-origin: left;
}
.section__one-hgh h1 .X {
  background: linear-gradient(135deg, #ff00ff 0%, #8a2be2 50%, #00bfff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
  transform-origin: center;
}
.section__one-hgh h1 .X:hover {
  font-size: 88px;
  transition: transform 0.5s ease, font-size 0.5s ease;
  transform: rotate(10deg);
}
.section__one-mdl {
  width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 40px;
  z-index: 1;
}
.section__one-mdl h4 {
  font-size: 22px;
  color: rgb(166, 173, 179);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.section__one-mdl h4:nth-of-type(2) {
  font-size: 16px;
}
.section__one-low {
  width: 400px;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section__one-low a {
  text-decoration: none;
  color: rgb(166, 173, 179);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  text-align: center;
}
.section__one-low .connect {
  display: flex;
  width: 215px;
  height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(166, 173, 179);
  border-radius: 25px;
  transition: 0.3s ease all;
}
.section__one-low .connect:hover {
  background: linear-gradient(135deg, #ff00ff 0%, #8a2be2 50%, #00bfff 100%);
  border-color: transparent;
  color: #f5f0f8;
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(138, 43, 226, 0.3);
}

@media (max-width: 768px) {
  .section__one {
    height: auto;
    margin-top: 80px;
    padding: 40px 16px;
    align-items: center;
  }
  .section__one .section__one-animated-tl,
  .section__one .section__one-animated-rm,
  .section__one .section__one-animated-bl,
  .section__one .section__one-animated-br,
  .section__one .section__one-animated-tr {
    display: none;
  }
  .section__one-hgh {
    width: 100%;
    margin-top: 20px;
  }
  .section__one-hgh br {
    display: block;
  }
  .section__one-hgh h1 {
    font-size: 34px;
    letter-spacing: 1px;
    text-align: center;
    display: block;
    margin-top: -48px;
  }
  .section__one-hgh .first,
  .section__one-hgh .X {
    font-size: inherit;
  }
  .section__one-mdl {
    width: 100%;
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }
  .section__one-mdl h4 {
    font-size: 14px;
    text-align: center;
  }
  .section__one-low {
    width: 100%;
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .section__one-low a {
    font-size: 14px;
  }
  .section__one-low .connect {
    width: 120px;
    height: 44px;
    border-radius: 22px;
    padding: 8px 12px;
  }
}
/* Дополнительная подстройка для очень маленьких экранов */
@media (max-width: 420px) {
  .section__one {
    padding: 28px 12px;
    margin-top: 60px;
  }
  .section__one-hgh h1 {
    font-size: 34px;
  }
  .section__one-mdl h4 {
    font-size: 14px;
  }
  .section__one-mdl h4:nth-of-type(2) {
    font-size: 14px;
  }
  .section__one-low {
    gap: 4px;
  }
  .section__one-low .connect {
    width: 200px;
    height: 40px;
    font-size: 14px;
  }
}
.section__two {
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  margin-top: 200px;
}
.section__two-title {
  width: 55%;
  height: auto;
  align-self: center;
  text-align: center;
  min-height: 200px;
  position: relative;
}
.section__two-title h5 {
  font-size: 120px;
  position: absolute;
  color: rgb(105, 105, 105);
  z-index: 0;
  opacity: 0.3;
  font-weight: 900;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.section__two-title h3 {
  position: absolute;
  z-index: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  transform: translate(-50%, -50%);
  color: #f5f0f8;
  font-size: 67px;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.section__two-imgtext {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  margin-top: 80px;
  padding: 0 5%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.section__two-img {
  flex: 0 0 350px;
}
.section__two-img img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: 3px solid transparent;
  background: linear-gradient(45deg, #ff00ff, #8a2be2, #00bfff) border-box;
}
.section__two-img img:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 60px rgba(138, 43, 226, 0.4);
}
.section__two-text {
  flex: 1;
  max-width: 600px;
  margin-top: 0;
  margin-left: 0;
  width: auto;
}
.section__two-text h2 {
  color: #f5f0f8;
  font-size: 36px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-bottom: 25px;
}
.section__two-text h2 span {
  color: #8a2be2;
  position: relative;
  padding-bottom: 2px;
  background: linear-gradient(135deg, #ff00ff 0%, #8a2be2 50%, #00bfff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}
.section__two-text h2 span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(135deg, #ff00ff 0%, #8a2be2 50%, #00bfff 100%);
  animation: underlineFlow 3s infinite;
  background-size: 200% auto;
}
.section__two-text p {
  color: #f5f0f8;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  margin-top: 8px;
}
@keyframes underlineFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.section__two-socmedia {
  width: 250px;
  margin-left: 42%;
  margin-top: 28px;
  text-align: center;
}
.section__two-socmedia h3 {
  color: #f5f0f8;
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-bottom: 15px;
  white-space: nowrap;
}
.section__two-socmedia a {
  text-decoration: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin-right: 15px;
  display: inline-block;
  transition: all 0.3s ease;
}
.section__two-socmedia a img {
  width: 50px;
  height: 50px;
  display: block;
  transition: all 0.3s ease;
}
.section__two-socmedia a:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}
.section__two-socmedia a:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

@media (max-width: 768px) {
  .section__two {
    height: auto;
    margin-top: 0px;
    padding: 24px 16px;
    align-items: center;
  }
  .section__two-title {
    width: 100%;
    padding: 0;
    min-height: 180px;
    position: relative;
    margin-bottom: 0px;
  }
  .section__two-title h5 {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(70px, 8vw, 44px);
    /* масштаб для мобильных */
    line-height: 0.9;
    color: #b7bac1;
    z-index: 0;
    opacity: 0.08;
    font-weight: 900;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    white-space: nowrap;
    pointer-events: none;
  }
  .section__two-title h3 {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #ffffff;
    font-size: 32px;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    white-space: normal;
  }
  .section__two-imgtext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
  }
  .section__two-img {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
  .section__two-img img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    display: block;
  }
  .section__two-text {
    order: 2;
    width: 100%;
    max-width: 720px;
    margin-top: 0;
    text-align: center;
    padding: 0 8px;
  }
  .section__two-text h2 {
    font-size: 22px;
  }
  .section__two-text p {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 8px;
    text-align: justify;
  }
  .section__two-socmedia {
    order: 3;
    width: 100%;
    max-width: 420px;
    margin: 18px auto 40px;
    text-align: center;
  }
  .section__two-socmedia h3 {
    font-size: 16px;
    margin-bottom: 10px;
    white-space: normal;
  }
  .section__two-socmedia a {
    margin-right: 10px;
    display: inline-block;
    width: 44px;
    height: 44px;
  }
  .section__two-socmedia a img {
    width: 44px;
    height: 44px;
  }
}
.Projects {
  width: 1240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  position: relative;
}
.Projects h2 {
  margin-top: 62px;
  font-size: 124px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-weight: 600;
  position: absolute;
  z-index: 0;
  color: #1b1b1b;
}
.Projects h3 {
  margin-top: 105px;
  position: absolute;
  z-index: 1;
  color: #ffffff;
  font-size: 54px;
}
.Projects .ProjectsLineContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 18px;
  margin-top: 220px;
  position: absolute;
  z-index: 2;
  width: 200px;
}
.Projects .ProjectsLineContainer-left {
  flex: 1;
  height: 2px;
  max-width: 100px;
  background: linear-gradient(90deg, transparent 0%, #6454da 90%, #6454da 100%);
}
.Projects .ProjectsLineContainer-right {
  flex: 1;
  height: 2px;
  max-width: 100px;
  background: linear-gradient(90deg, #6454da 0%, #6454da 10%, transparent 100%);
}
.Projects .ProjectsLineContainer-dot {
  width: 8px;
  height: 8px;
  background: #6454da;
  border-radius: 50%;
}
.Projects h4 {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  color: #b7bac1;
  font-size: 18px;
  position: absolute;
  text-align: center;
  margin-top: 275px;
}
.Projects a {
  text-decoration: none;
  color: #709bc8;
  font-size: 22px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.Projects .project-container {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
}
.ProjectsOne {
  width: 760px;
  height: 550px;
  border: 3px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  margin-top: 400px;
  align-items: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  background: linear-gradient(180deg, #1a1300 0%, #3d2f00 25%, #ffd700 75%, #ffea70 100%), radial-gradient(circle at 20% 30%, rgba(255, 223, 70, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 200, 0, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255, 255, 0, 0.08) 0%, transparent 40%);
}
.ProjectsOneHead {
  height: 130px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 122px;
}
.ProjectsOneHead .LeftText {
  margin-top: 32px;
  margin-left: 48px;
  color: #ffb700;
}
.ProjectsOneHead .Arrow {
  margin-top: 52px;
  margin-right: 48px;
  width: 40px;
  height: 40px;
  display: block;
  transition: transform 220ms ease, filter 220ms ease;
  filter: drop-shadow(0 8px 22px rgba(255, 200, 0, 0.25));
}
.ProjectsOneBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 211, 77, 0.06);
}
.ProjectsOneBlock img {
  margin-top: 30px;
  width: 540px;
  height: 320px;
  border-radius: 8px;
  clip-path: inset(0 0 57px 0);
  border: 2px solid rgba(255, 215, 0, 0.8);
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 30px rgba(124, 138, 5, 0.678));
}
.ProjectsOne:hover {
  transform: perspective(1200px) translateY(-20px) rotateX(12deg) rotateY(8deg) scale(1.02);
  box-shadow: 0 45px 90px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 215, 0, 0.6), 0 0 200px rgba(255, 215, 0, 0.8), 0 0 300px rgba(255, 230, 128, 0.4);
  background: linear-gradient(180deg, rgb(0.5, 0.3653846154, 0) 0%, #3d2f00 20%, #ffdf33 70%, #fff480 100%), radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.5) 0%, transparent 60%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.ProjectsOne:hover .ProjectsOneBlock img {
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 40px rgba(255, 200, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 255, 128, 0.3));
  transform: scale(1.02);
  transition: all 0.4s ease;
}
.Projects .project-details-one {
  padding: 30px;
  margin-top: 400px;
  margin-bottom: 400px;
}
.Projects .project-details-one h3 {
  position: static;
  font-size: 2rem;
  color: #ffd34d;
  margin-bottom: 10px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-details-one > p {
  color: #b7bac1;
  font-size: 1.2rem;
  margin-bottom: 30px;
}
.Projects .project-description-one {
  margin-bottom: 30px;
}
.Projects .project-description-one h4 {
  position: static;
  color: #ffffff;
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-description-one ul {
  list-style: none;
  padding: 0;
}
.Projects .project-description-one ul li {
  color: #b7bac1;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.Projects .project-description-one ul li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: #ffd34d;
}
.Projects .tech-stack-one {
  margin-bottom: 30px;
}
.Projects .tech-stack-one .tech-tag {
  display: inline-block;
  background: rgba(74, 222, 128, 0.1);
  color: #ffd34d;
  padding: 5px 15px;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  border: 1px solid #ffd34d;
}
.ProjectsTwo {
  width: 760px;
  height: 550px;
  border: 3px solid rgba(74, 222, 128, 0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  margin-top: -150px;
  margin-bottom: 100px;
  align-items: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  background: linear-gradient(180deg, #0d2a1c 0%, #1a4d33 25%, #2a7d4f 75%, #3aad6b 100%), radial-gradient(circle at 20% 30%, rgba(42, 125, 79, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(58, 173, 107, 0.2) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(74, 222, 128, 0.15) 0%, transparent 40%);
}
.ProjectsTwoHead {
  height: 130px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 122px;
}
.ProjectsTwoHead .LeftText {
  margin-top: 32px;
  margin-left: 48px;
  color: #4ade80;
}
.ProjectsTwoHead .Arrow {
  margin-top: 52px;
  margin-right: 48px;
  color: #3aad6b;
}
.ProjectsTwoBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ProjectsTwoBlock img {
  margin-top: 30px;
  width: 540px;
  height: 320px;
  border-radius: 8px;
  clip-path: inset(0 0 57px 0);
  border: 2px solid rgba(74, 222, 128, 0.3);
  filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.4)) drop-shadow(0 0 30px rgba(42, 125, 79, 0.3));
}
.ProjectsTwo:hover {
  transform: perspective(1200px) translateY(-20px) rotateX(12deg) rotateY(8deg) scale(1.02);
  box-shadow: 0 45px 90px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(74, 222, 128, 0.6), 0 0 200px rgba(42, 125, 79, 0.8), 0 0 300px rgba(26, 77, 51, 0.4);
  background: linear-gradient(180deg, rgb(6.9727272727, 22.5272727273, 15.0181818182) 0%, #1a4d33 20%, rgb(54.8263473054, 163.1736526946, 103.125748503) 70%, #4ade80 100%), radial-gradient(circle at 20% 30%, rgba(74, 222, 128, 0.5) 0%, transparent 60%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.ProjectsTwo:hover .ProjectsTwoBlock img {
  filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.7)) drop-shadow(0 0 40px rgba(42, 125, 79, 0.5)) drop-shadow(0 0 60px rgba(26, 77, 51, 0.3));
}
.Projects .project-details-two {
  padding: 30px;
}
.Projects .project-details-two h3 {
  position: static;
  font-size: 2rem;
  color: #4ade80;
  margin-bottom: 10px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-details-two > p {
  color: #b7bac1;
  font-size: 1.2rem;
  margin-bottom: 30px;
}
.Projects .project-description {
  margin-bottom: 30px;
}
.Projects .project-description h4 {
  position: static;
  color: #ffffff;
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-description ul {
  list-style: none;
  padding: 0;
}
.Projects .project-description ul li {
  color: #b7bac1;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.Projects .project-description ul li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: #4ade80;
}
.Projects .tech-stack {
  margin-bottom: 30px;
}
.Projects .tech-stack .tech-tag {
  display: inline-block;
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  padding: 5px 15px;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.ProjectsThree {
  width: 760px;
  height: 550px;
  border: 3px solid rgba(255, 0, 140, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
  align-items: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  background: linear-gradient(180deg, #b3006a 0%, #ff008c 25%, #ff66b2 75%, #ff33aa 100%), radial-gradient(circle at 20% 30%, rgba(255, 0, 140, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 51, 170, 0.2) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255, 102, 178, 0.15) 0%, transparent 40%);
}
.ProjectsThreeHead {
  height: 130px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 122px;
}
.ProjectsThreeHead .LeftText {
  margin-top: 32px;
  margin-left: 48px;
  color: #68023d;
}
.ProjectsThreeHead .Arrow {
  margin-top: 52px;
  margin-right: 48px;
  width: 40px;
  height: 40px;
  display: block;
  transition: transform 220ms ease, filter 220ms ease;
  filter: drop-shadow(0 8px 22px rgba(255, 0, 140, 0.25));
}
.ProjectsThreeBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ProjectsThreeBlock img {
  margin-top: 30px;
  width: 540px;
  height: 320px;
  border-radius: 8px;
  clip-path: inset(0 0 57px 0);
}
.ProjectsThree:hover {
  transform: perspective(1200px) translateY(-20px) rotateX(12deg) rotateY(8deg) scale(1.02);
  box-shadow: 0 45px 90px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 0, 140, 0.6), 0 0 200px rgba(179, 0, 106, 0.8), 0 0 300px rgba(255, 102, 178, 0.4);
  background: linear-gradient(180deg, rgb(153.5, 0, 90.8994413408) 0%, #ff008c 20%, rgb(255, 153, 203.6666666667) 70%, #ff33aa 100%), radial-gradient(circle at 20% 30%, rgba(255, 0, 140, 0.5) 0%, transparent 60%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.ProjectsThree:hover .ProjectsThreeBlock img {
  filter: drop-shadow(0 0 20px rgba(255, 0, 140, 0.7)) drop-shadow(0 0 40px rgba(179, 0, 106, 0.5)) drop-shadow(0 0 60px rgba(255, 102, 178, 0.3));
}
.Projects .project-details-three {
  padding: 30px;
}
.Projects .project-details-three h3 {
  position: static;
  font-size: 2rem;
  color: #ff33aa;
  margin-bottom: 10px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-details-three > p {
  color: #b7bac1;
  font-size: 1.2rem;
  margin-bottom: 30px;
}
.Projects .project-description-three {
  margin-bottom: 30px;
}
.Projects .project-description-three h4 {
  position: static;
  color: #ffffff;
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-description-three ul {
  list-style: none;
  padding: 0;
}
.Projects .project-description-three ul li {
  color: #b7bac1;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.Projects .project-description-three ul li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: #ff33aa;
}
.Projects .tech-stack-three {
  margin-bottom: 30px;
}
.Projects .tech-stack-three .tech-tag {
  display: inline-block;
  background: rgba(255, 0, 140, 0.1);
  color: #ff33aa;
  padding: 5px 15px;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 0, 140, 0.3);
}
.Projects .ProjectsThree--second {
  background: linear-gradient(180deg, #2C5530 0%, #4A7C59 25%, #8FB996 75%, #D4E6B5 100%), radial-gradient(circle at 20% 30%, rgba(79, 111, 82, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(143, 185, 150, 0.2) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(44, 85, 48, 0.15) 0%, transparent 40%);
  border: 3px solid rgba(79, 111, 82, 0.3);
}
.Projects .ProjectsThree--second .LeftText {
  color: #1A331C;
}
.Projects .ProjectsThree--second .Arrow {
  filter: drop-shadow(0 8px 22px rgba(79, 111, 82, 0.25));
}
.Projects .ProjectsThree--second:hover {
  box-shadow: 0 45px 90px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(79, 111, 82, 0.6), 0 0 200px rgba(44, 85, 48, 0.8), 0 0 300px rgba(143, 185, 150, 0.4);
  background: linear-gradient(180deg, rgb(35.3023255814, 68.1976744186, 38.511627907) 0%, #4A7C59 20%, rgb(174.3846153846, 204.6153846154, 179.4230769231) 70%, #D4E6B5 100%), radial-gradient(circle at 20% 30%, rgba(79, 111, 82, 0.5) 0%, transparent 60%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.Projects .ProjectsThree--second:hover .ProjectsThreeBlock img {
  filter: drop-shadow(0 0 20px rgba(79, 111, 82, 0.7)) drop-shadow(0 0 40px rgba(44, 85, 48, 0.5)) drop-shadow(0 0 60px rgba(143, 185, 150, 0.3));
}
.Projects .project-details-three--second h3 {
  color: #98FB98;
}
.Projects .project-details-three--second .project-details-three {
  padding: 30px;
}
.Projects .project-details-three--second .project-details-three h3 {
  position: static;
  font-size: 2rem;
  color: #98FB98;
  /* Светло-зеленый вместо $bright-pink */
  margin-bottom: 10px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-details-three--second .project-details-three > p {
  color: #E8F5E8;
  /* Светло-серый с зеленым оттенком */
  font-size: 1.2rem;
  margin-bottom: 30px;
}
.Projects .project-details-three--second .project-description-three {
  margin-bottom: 30px;
}
.Projects .project-details-three--second .project-description-three h4 {
  position: static;
  color: #FFFFFF;
  /* Белый */
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-top: 0;
}
.Projects .project-details-three--second .project-description-three ul {
  list-style: none;
  padding: 0;
}
.Projects .project-details-three--second .project-description-three ul li {
  color: #E8F5E8;
  /* Светло-серый с зеленым оттенком */
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.Projects .project-details-three--second .project-description-three ul li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: #98FB98;
  /* Светло-зеленый вместо $bright-pink */
}
.Projects .project-details-three--second .tech-tag {
  display: inline-block;
  background: rgba(85, 107, 47, 0.1);
  /* Оливково-зеленый вместо $medium-pink */
  color: #98FB98;
  /* Светло-зеленый вместо $bright-pink */
  padding: 5px 15px;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  border: 1px solid rgba(85, 107, 47, 0.3);
  /* Оливково-зеленый вместо $medium-pink */
}

@media (max-width: 900px) {
  .Projects {
    width: 100%;
    padding: 120px 16px 40px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* контейнер проектов в колонку */
    /* карточки проектов — занимают всю доступную ширину */
    /* детали проектов — делаем читабельными */
  }
  .Projects h2 {
    position: static;
    margin: 0;
    font-size: 72px;
    text-align: center;
    z-index: 0;
    color: #1b1b1b;
  }
  .Projects h3 {
    position: static;
    margin-top: -45px;
    margin-bottom: 54px;
    font-size: 32px;
    text-align: center;
    z-index: 1;
    color: #ffffff;
  }
  .Projects h4 {
    position: static;
    margin-top: 12px;
    font-size: 16px;
  }
  .ProjectsLineContainer {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 200px;
    top: -90px;
    position: static;
  }
  .ProjectsLineContainer-left, .ProjectsLineContainer-right {
    flex: 1;
    height: 2px;
  }
  .ProjectsLineContainer-left {
    background: linear-gradient(90deg, transparent 0%, #6454da 60%, #6454da 100%);
  }
  .ProjectsLineContainer-right {
    background: linear-gradient(90deg, #6454da 0%, #6454da 50%, transparent 100%);
  }
  .ProjectsLineContainer-dot {
    width: 8px;
    height: 8px;
    background: #6454da;
    border-radius: 50%;
    margin: 0 20px;
    flex-shrink: 0;
  }
  .Projects .project-container {
    width: 100%;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    margin-top: 20px;
  }
  .ProjectsOne, .ProjectsTwo, .ProjectsThree {
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 0;
    padding: 18px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    /* сбрасываем широкие бордеры/отступы для мобильных */
  }
  .ProjectsOneHead, .ProjectsTwoHead, .ProjectsThreeHead {
    margin-bottom: 12px;
    height: auto;
    gap: 12px;
  }
  .ProjectsOneBlock, .ProjectsTwoBlock, .ProjectsThreeBlock {
    width: 100%;
  }
  .ProjectsOneBlock img, .ProjectsTwoBlock img, .ProjectsThreeBlock img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    clip-path: none;
  }
  .Projects .project-details-one,
  .Projects .project-details-two,
  .Projects .project-details-three {
    width: 100%;
    max-width: 980px;
    padding: 14px;
    margin: 0;
    box-sizing: border-box;
  }
  .Projects .project-details-one h3,
  .Projects .project-details-two h3,
  .Projects .project-details-three h3 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .Projects .project-details-one > p,
  .Projects .project-details-two > p,
  .Projects .project-details-three > p {
    font-size: 15px;
    color: #b7bac1;
    margin-bottom: 12px;
  }
  .Projects .project-description,
  .Projects .project-description-one {
    width: 100%;
    padding: 0 14px 18px;
  }
  .Projects .tech-stack,
  .Projects .tech-stack-one {
    width: 100%;
    padding: 0 14px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
/* донастройки для узких экранов */
@media (max-width: 420px) {
  .Projects {
    position: relative;
    padding: 60px 12px;
    /* основной заголовок (h3) — поверх h2, по центру */
  }
  .ProjectsLineContainer {
    top: -165px;
  }
  .Projects h2 {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(60px, 8vw, 44px);
    margin: 0;
    z-index: 0;
    color: #1b1b1b;
    white-space: nowrap;
  }
  .Projects h3 {
    position: absolute;
    left: 50%;
    top: calc(12px + clamp(32px, 8vw, 44px) * 0.55);
    transform: translate(-50%, -60%);
    /* поднимет чуть выше центра */
    font-size: 24px;
    margin: 0;
    z-index: 2;
    text-align: center;
    color: #ffffff;
  }
  .Projects h4 {
    margin-top: 25px;
  }
  .Projects .project-container {
    gap: 18px;
    margin-top: 50px;
  }
  .ProjectsOne, .ProjectsTwo {
    padding: 12px;
    border-width: 2px;
  }
  .Projects .project-details-one h3,
  .Projects .project-details-two h3,
  .Projects .project-details-three h3 {
    font-size: 20px;
    margin-left: 50%;
  }
  .Projects .project-details-one p,
  .Projects .project-details-two p,
  .Projects .project-details-three p {
    font-size: 14px;
    transform: translateX(-50%);
    margin-left: 50%;
    margin-top: -6%;
    white-space: nowrap;
    text-align: center;
  }
  .Projects .project-details-three p {
    margin-left: 130px;
    transform: translateX(-40%);
  }
  .Projects .tech-tag {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}
.skills {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  margin-top: 100px;
  padding: 160px 16px 80px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  /* Большая фоновая надпись */
  /* Фоновая декоративная картинка */
  /* Сетка */
  /* Карточка навыка */
  /* ---------- Адаптив ---------- */
}
.skills-bg {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 120px;
  font-weight: 800;
  letter-spacing: 6px;
  color: #1b1b1b;
  pointer-events: none;
  z-index: 1;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.skills-decor {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  top: -180px;
  width: 500px;
  z-index: 0;
  opacity: 0.9;
}
.skills h3 {
  z-index: 2;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #ffffff;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.skills h4 {
  z-index: 2;
  margin: 20px 0 60px;
  font-size: 16px;
  letter-spacing: 1px;
  color: #b7bac1;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.skillsLineContainer {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 200px;
  top: 230px;
  margin-bottom: 40px;
  position: absolute;
}
.skillsLineContainer-left, .skillsLineContainer-right {
  flex: 1;
  height: 2px;
}
.skillsLineContainer-left {
  background: linear-gradient(90deg, transparent 0%, #6454da 60%, #6454da 100%);
}
.skillsLineContainer-right {
  background: linear-gradient(90deg, #6454da 0%, #6454da 50%, transparent 100%);
}
.skillsLineContainer-dot {
  width: 8px;
  height: 8px;
  background: #6454da;
  border-radius: 50%;
  margin: 0 20px;
  flex-shrink: 0;
}
.skills-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
}
.skills .skill-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1.6px solid rgba(120, 100, 255, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 8px 20px rgba(100, 84, 218, 0.06);
  transition: all 0.25s ease;
}
.skills .skill-item img {
  width: 36px;
  height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
}
.skills .skill-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 26px rgba(100, 84, 218, 0.12);
  border-color: rgba(120, 100, 255, 0.6);
}
@media (max-width: 900px) {
  .skills-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .skills-bg {
    font-size: clamp(50px, 8vw, 44px);
    top: 60px;
  }
  .skills-decor {
    width: 400px;
  }
}
@media (max-width: 520px) {
  .skills {
    padding: 100px 8px 60px;
    margin-top: 100px;
  }
  .skills-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .skills-bg {
    font-size: 70px;
    top: 40px;
  }
  .skills-decor {
    width: 320px;
    bottom: -20px;
  }
  .skills h4 {
    font-size: 12px;
  }
  .skills .skillsLineContainer {
    margin-top: -100px;
    margin-bottom: 20px;
  }
  .skills h3 {
    font-size: 28px;
    margin-top: -30px;
  }
  .skills h4 {
    font-size: 14px;
    margin-bottom: 40px;
  }
  .skills .skill-item {
    padding: 10px 12px;
    font-size: 13px;
  }
  .skills .skill-item img {
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 380px) {
  .skills-container {
    grid-template-columns: 1fr;
  }
  .skills-decor {
    display: none;
  }
  .skills-bg {
    font-size: 56px;
  }
}

.education {
  width: 100%;
  max-width: 1100px;
  margin: 60px auto;
  padding: 40px 16px;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.education h2 {
  font-size: clamp(2rem, 10vw, 7rem);
  max-width: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: #1b1b1b;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 0;
  pointer-events: none;
}
.education h3 {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: 36px;
  margin: 10px 0 8px;
  margin-bottom: 50px;
}
.education h4 {
  color: #b7bac1;
  font-size: 16px;
  margin-bottom: 18px;
  z-index: 2;
}
.education .educationLineContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 18px;
  margin-top: 50px;
  margin-bottom: 40px;
  z-index: 2;
}
.education .educationLineContainer-left {
  flex: 1;
  height: 2px;
  max-width: 100px;
  background: linear-gradient(90deg, transparent 0%, #6454da 90%, #6454da 100%);
}
.education .educationLineContainer-right {
  flex: 1;
  height: 2px;
  max-width: 100px;
  background: linear-gradient(90deg, #6454da 0%, #6454da 10%, transparent 100%);
}
.education .educationLineContainer-dot {
  width: 8px;
  height: 8px;
  background: #6454da;
  border-radius: 50%;
}
.education .education_content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}
.education .education_content-hr {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: rgba(100, 84, 218, 0.12);
  border-radius: 2px;
}
.education .education_content-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 800px;
}
.education .education_content-item {
  text-align: left;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(100, 84, 218, 0.06);
}
.education .education_content-item .edu-year {
  display: block;
  color: #b7bac1;
  font-size: 13px;
  margin-bottom: 6px;
}
.education .education_content-item .edu-school {
  color: #ffffff;
  font-size: 18px;
  margin: 0 0 4px;
}
.education .education_content-item .edu-degree {
  color: #6454da;
  font-size: 14px;
  margin: 0 0 8px;
}
.education .education_content-item .edu-desc {
  color: #b7bac1;
  font-size: 14px;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .education {
    padding: 28px 12px;
    margin: 40px auto;
  }
  .education h2 {
    font-size: 55px;
    top: 6px;
    margin-bottom: 10px;
  }
  .education h3 {
    font-size: 28px;
    margin-top: 0;
  }
  .education .educationLineContainer {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .education .education_content {
    flex-direction: column;
    align-items: center;
  }
  .education_content .education-list {
    width: 100%;
  }
  .education_content .education-hr {
    display: none;
  }
}
@media (max-width: 420px) {
  .education {
    padding: 20px 12px;
    margin: 28px auto;
    /* убрать большой фон на очень узких экранах */
  }
  .education h2 {
    font-size: clamp(50px, 8vw, 44px);
    top: 1px;
    margin-bottom: 10px;
  }
  .education h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .education h4 {
    font-size: 12px;
  }
  .education .education_content-item {
    padding: 10px;
  }
}
.reviews {
  width: 100%;
  max-width: 1100px;
  margin: 60px auto;
  padding: 40px 16px;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.reviews h2 {
  font-size: clamp(2rem, 10vw, 7rem);
  max-width: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: rgba(255, 255, 255, 0.08);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 0;
  pointer-events: none;
}
.reviews h3 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 36px;
  margin: 10px 0 50px;
}
.reviews .educationLineContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 40px;
  z-index: 2;
}
.reviews .educationLineContainer-left, .reviews .educationLineContainer-right {
  flex: 1;
  height: 2px;
  max-width: 100px;
  background: linear-gradient(90deg, transparent 0%, #6454da 90%, #6454da 100%);
}
.reviews .educationLineContainer-right {
  background: linear-gradient(90deg, #6454da 0%, #6454da 10%, transparent 100%);
}
.reviews .educationLineContainer-dot {
  width: 8px;
  height: 8px;
  background: #6454da;
  border-radius: 50%;
}
.reviews .reviews_content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}
.reviews .reviews_content-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 800px;
}
.reviews .reviews_content-item {
  text-align: left;
  padding: 14px 18px;
  border-radius: 10px;
  background: radial-gradient(circle at top left, rgba(115, 0, 255, 0.2), transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.5s ease-in-out;
}
.reviews .reviews_content-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 60px rgba(138, 43, 226, 0.4);
}
.reviews .reviews_content-item .review-stars {
  display: block;
  color: #FFD700;
  font-size: 14px;
  margin-bottom: 6px;
}
.reviews .reviews_content-item .review-name {
  color: #fff;
  font-size: 18px;
  margin: 0 0 4px;
}
.reviews .reviews_content-item .review-text {
  color: #ccc;
  font-size: 14px;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .reviews {
    padding: 28px 12px;
    margin: 40px auto;
  }
  .reviews h2 {
    font-size: 55px;
    top: 6px;
  }
  .reviews h3 {
    font-size: 28px;
    margin-bottom: 30px;
  }
  .reviews .educationLineContainer {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .reviews .reviews_content {
    flex-direction: column;
    align-items: center;
  }
  .reviews .reviews_content-list {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .reviews {
    padding: 20px 12px;
    margin: 28px auto;
  }
  .reviews h2 {
    font-size: clamp(50px, 8vw, 44px);
    top: 1px;
  }
  .reviews h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .reviews .reviews_content-item {
    padding: 10px;
  }
}
@media (max-width: 768px) {
  .reviews-section .reviews-container {
    flex-direction: column;
    align-items: center;
  }
  .reviews-section .review-card {
    width: 90%;
  }
}
.contacts {
  width: 100%;
  min-height: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: -300px;
}
.contacts h2 {
  margin-top: 262px;
  font-size: clamp(3rem, 10vw, 7rem);
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-weight: 600;
  position: absolute;
  text-align: center;
  z-index: 1;
  color: #1b1b1b;
}
.contacts h3 {
  margin-top: 305px;
  position: absolute;
  z-index: 2;
  color: #ffffff;
  font-size: clamp(1.8rem, 6vw, 3.4rem);
}
.contacts .contactsLineContainer {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 200px;
  margin-top: 420px;
  padding: 0 20px;
  position: absolute;
}
.contacts .contactsLineContainer-left, .contacts .contactsLineContainer-right {
  flex: 1;
  height: 2px;
}
.contacts .contactsLineContainer-left {
  background: linear-gradient(90deg, transparent 0%, #6454da 60%, #6454da 100%);
}
.contacts .contactsLineContainer-right {
  background: linear-gradient(90deg, #6454da 0%, #6454da 50%, transparent 100%);
}
.contacts .contactsLineContainer-dot {
  width: 8px;
  height: 8px;
  background: #6454da;
  border-radius: 50%;
  margin: 0 20px;
  flex-shrink: 0;
}
.contacts h4 {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  color: #b7bac1;
  font-size: 18px;
  position: absolute;
  margin-top: 475px;
}
.contacts__container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 570px;
}
.contacts__container .contacts-left {
  width: 45%;
  height: auto;
  text-align: left;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contacts__container .contacts-left h5 {
  font-size: 1.8rem;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-weight: 700;
  color: #ffffff;
}
.contacts__container .contacts-left p {
  font-size: 1.1rem;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-weight: 500;
  color: #b7bac1;
}
.contacts__container .contacts-left a {
  width: 260px;
  font-size: 1.1rem;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-weight: 300;
  border: 1px solid #6454da;
  border-radius: 15px;
  padding: 20px 20px;
  text-decoration: none;
  background: linear-gradient(180deg, #8b5cf6, #9333ea);
  color: #ffffff;
}
.contacts__container .contacts-left a:hover {
  background: #362b91;
  box-shadow: 0 10px 25px rgba(138, 43, 226, 0.3);
  transform: scale(1.05);
  transition: all 0.3s ease;
}
.contacts__container .contacts-right {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at top left, rgba(115, 0, 255, 0.2), transparent 70%);
  padding: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  width: 500px;
  margin: 0 auto;
}
.contacts__container .contacts-right-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.contacts__container .contacts-right-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contacts__container .contact-form__label {
  color: #aaa;
  font-size: 14px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  letter-spacing: 0.5px;
}
.contacts__container .contact-form__input,
.contacts__container .contact-form__textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  padding: 14px 16px;
  font-size: 15px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  transition: all 0.3s ease;
}
.contacts__container .contact-form__input::-moz-placeholder, .contacts__container .contact-form__textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.contacts__container .contact-form__input::placeholder,
.contacts__container .contact-form__textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.contacts__container .contact-form__input:focus,
.contacts__container .contact-form__textarea:focus {
  outline: none;
  border-color: #6454da;
  box-shadow: 0 0 10px #6454da;
}
.contacts__container .contact-form__textarea {
  resize: none;
  min-height: 120px;
}
.contacts__container .contacts-right-form-button {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.contacts__container .contact-form__button {
  width: 100%;
  padding: 14px 0;
  background: linear-gradient(180deg, #8b5cf6, #9333ea);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.contacts__container .contact-form__button:hover {
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.8);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .contacts {
    padding: 28px 12px;
    min-height: auto;
    box-sizing: border-box;
    min-height: auto;
    align-items: center;
    display: flex;
    margin-top: 50px;
    flex-direction: column;
    justify-content: flex-start;
  }
  .contacts h2 {
    font-size: 70px;
    text-align: center;
    font-weight: 500;
    margin: 0;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }
  .contacts h3 {
    font-size: 38px;
    text-align: center;
    font-weight: 500;
    margin: 20px 0 6px;
  }
  .contacts h4 {
    font-size: 14px;
    text-align: center;
    color: #b7bac1;
    margin: 130px 0 14px;
    margin-bottom: 20px;
  }
  .contacts .contacts__container {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    margin-top: 30px;
  }
  .contacts .contactsLineContainer {
    margin-top: 100px;
    padding: 0 12px;
    gap: 8px;
  }
  .contacts .contacts-left {
    display: none;
  }
  .contacts .contacts-right {
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    margin-top: 150px;
  }
  .contacts .contacts-right .contacts-right-form {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
  }
  .contacts .contacts-right .contact-form__label {
    font-size: 13px;
    color: #b7bac1;
  }
  .contacts .contacts-right .contact-form__input,
  .contacts .contacts-right .contact-form__textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
  }
  .contacts .contacts-right .contact-form__textarea {
    min-height: 100px;
  }
  .contacts .contacts-right .contacts-right-form-button {
    display: flex;
    justify-content: center;
  }
  .contacts .contacts-right .contact-form__button {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
  }
}
/* 📱 Узкие экраны */
@media (max-width: 420px) {
  .contacts {
    padding: 28px 12px;
  }
  .contacts h2 {
    font-size: clamp(50px, 8vw, 44px);
    font-weight: 700;
  }
  .contacts h3 {
    font-size: 18px;
  }
  .contacts h4 {
    font-size: 13px;
    margin-top: 90px;
  }
  .contacts .contacts__container {
    gap: 14px;
    margin-top: -20px;
  }
  .contacts .contactsLineContainer {
    max-width: 70%;
    padding: 0 12px;
    gap: 10px;
    margin-top: 68px;
  }
  .contacts .contactsLineContainer-left, .contacts .contactsLineContainer-right {
    height: 1.5px;
  }
  .contacts .contactsLineContainer-dot {
    width: 7px;
    height: 7px;
  }
  .contacts .contact-form__input,
  .contacts .contact-form__textarea {
    font-size: 13px;
    padding: 9px;
  }
  .contacts .contact-form__textarea {
    min-height: 90px;
  }
  .contacts .contact-form__button {
    padding: 10px;
    font-size: 14px;
  }
}
.footer {
  width: 100%;
  padding: 60px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: transparent;
  /* разделительная линия вверху футера */
}
.footer hr {
  width: 100%;
  height: 1px;
  border: 1px solid #1a1a1a;
  margin-bottom: 20px;
}
.footer-socmedia {
  display: flex;
  gap: 16px;
  margin-bottom: 50px;
}
.footer-socmedia a {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.footer-socmedia a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(100, 84, 218, 0.12);
}
.footer-socmedia a img {
  width: 48px;
  height: 48px;
  display: block;
}
.footer .footer-rights {
  width: 100%;
  max-width: 1100px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.footer .footer-rights p {
  margin: 0;
  color: #b7bac1;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: 14px;
  text-align: center;
}
.footerLineContainer {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 200px;
  margin-top: 140px;
  position: absolute;
}
.footerLineContainer-left, .footerLineContainer-right {
  flex: 1;
  height: 2px;
}
.footerLineContainer-left {
  background: linear-gradient(90deg, transparent 0%, #6454da 60%, #6454da 100%);
}
.footerLineContainer-right {
  background: linear-gradient(90deg, #6454da 0%, #6454da 50%, transparent 100%);
}
.footerLineContainer-dot {
  width: 8px;
  height: 8px;
  background: #6454da;
  border-radius: 50%;
  margin: 0 20px;
  flex-shrink: 0;
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 768px) {
  .footer {
    padding: 40px 16px;
    height: auto;
  }
  .footer > hr {
    max-width: 720px;
  }
  .footer-socmedia {
    gap: 12px;
  }
  .footer-socmedia a {
    width: 40px;
    height: 40px;
  }
  .footer-socmedia img {
    width: 24px;
    height: 24px;
  }
  .footerLineContainer {
    width: 200px;
  }
  .footer-rights p {
    font-size: 13px;
  }
}
@media (max-width: 420px) {
  .footer {
    padding: 28px 12px;
    gap: 12px;
  }
  .footer > hr {
    margin-bottom: 6px;
  }
  .footer .footer-socmedia a {
    width: 36px;
    height: 36px;
  }
  .footer .footer-socmedia img {
    width: 20px;
    height: 20px;
  }
  .footer .footerLineContainer {
    width: 160px;
    margin-top: 90px;
  }
  .footer .footer-rights p {
    font-size: 12px;
  }
}
HEAD html,
body,
main {
  overflow-x: hidden;
  width: 100%;
}

/* Все картинки не должны выходить за контейнер */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Сделать основные секции адаптивными (убираем фиксированные ширины) */
.Projects,
.skills,
.section__one,
.section__two,
.project-container,
.skills-container,
.education,
.contacts {
  width: 100% !important;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* Mobile fixes — сброс крупных абсолютных заголовков и padding по бокам */
}
@media (max-width: 768px) {
  .Projects,
  .skills,
  .section__one,
  .section__two,
  .project-container,
  .skills-container,
  .education,
  .contacts {
    /* Проекционные карточки и колонки — занимают доступную ширину */
    /* Сетка навыков — две колонки на телефоне, одна на очень узких экранах */
    /* Очень узкие экраны — одна колонка */
    /* Удаляем/ограничиваем "вылезающие" абсолютные элементы */
    /* Сбрасываем абсолютное позиционирование больших заголовков, чтобы они не выходили за экран */
    /* Предотвратить переполнение трансформами / тенями */
    /* Если какие-то блоки всё ещё создают горизонтальный скролл — временно скрываем */
  }
  .Projects main,
  .Projects .Projects,
  .Projects .skills,
  .Projects .education,
  .Projects .contacts,
  .Projects .footer,
  .skills main,
  .skills .Projects,
  .skills .skills,
  .skills .education,
  .skills .contacts,
  .skills .footer,
  .section__one main,
  .section__one .Projects,
  .section__one .skills,
  .section__one .education,
  .section__one .contacts,
  .section__one .footer,
  .section__two main,
  .section__two .Projects,
  .section__two .skills,
  .section__two .education,
  .section__two .contacts,
  .section__two .footer,
  .project-container main,
  .project-container .Projects,
  .project-container .skills,
  .project-container .education,
  .project-container .contacts,
  .project-container .footer,
  .skills-container main,
  .skills-container .Projects,
  .skills-container .skills,
  .skills-container .education,
  .skills-container .contacts,
  .skills-container .footer,
  .education main,
  .education .Projects,
  .education .skills,
  .education .education,
  .education .contacts,
  .education .footer,
  .contacts main,
  .contacts .Projects,
  .contacts .skills,
  .contacts .education,
  .contacts .contacts,
  .contacts .footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .Projects .ProjectsOne,
  .Projects .ProjectsTwo,
  .Projects .ProjectsOneBlock img,
  .Projects .ProjectsTwoBlock img,
  .skills .ProjectsOne,
  .skills .ProjectsTwo,
  .skills .ProjectsOneBlock img,
  .skills .ProjectsTwoBlock img,
  .section__one .ProjectsOne,
  .section__one .ProjectsTwo,
  .section__one .ProjectsOneBlock img,
  .section__one .ProjectsTwoBlock img,
  .section__two .ProjectsOne,
  .section__two .ProjectsTwo,
  .section__two .ProjectsOneBlock img,
  .section__two .ProjectsTwoBlock img,
  .project-container .ProjectsOne,
  .project-container .ProjectsTwo,
  .project-container .ProjectsOneBlock img,
  .project-container .ProjectsTwoBlock img,
  .skills-container .ProjectsOne,
  .skills-container .ProjectsTwo,
  .skills-container .ProjectsOneBlock img,
  .skills-container .ProjectsTwoBlock img,
  .education .ProjectsOne,
  .education .ProjectsTwo,
  .education .ProjectsOneBlock img,
  .education .ProjectsTwoBlock img,
  .contacts .ProjectsOne,
  .contacts .ProjectsTwo,
  .contacts .ProjectsOneBlock img,
  .contacts .ProjectsTwoBlock img {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .Projects .skills-container,
  .Projects .skills-container,
  .skills .skills-container,
  .skills .skills-container,
  .section__one .skills-container,
  .section__one .skills-container,
  .section__two .skills-container,
  .section__two .skills-container,
  .project-container .skills-container,
  .project-container .skills-container,
  .skills-container .skills-container,
  .skills-container .skills-container,
  .education .skills-container,
  .education .skills-container,
  .contacts .skills-container,
  .contacts .skills-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 780px;
  }
}
@media (max-width: 768px) and (max-width: 380px) {
  .Projects .skills-container,
  .skills .skills-container,
  .section__one .skills-container,
  .section__two .skills-container,
  .project-container .skills-container,
  .skills-container .skills-container,
  .education .skills-container,
  .contacts .skills-container {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  .Projects .section__one-animated-tr,
  .Projects .section__one-animated-tl,
  .Projects .section__one-animated-rm,
  .Projects .section__one-animated-bl,
  .Projects .section__one-animated-br,
  .skills .section__one-animated-tr,
  .skills .section__one-animated-tl,
  .skills .section__one-animated-rm,
  .skills .section__one-animated-bl,
  .skills .section__one-animated-br,
  .section__one .section__one-animated-tr,
  .section__one .section__one-animated-tl,
  .section__one .section__one-animated-rm,
  .section__one .section__one-animated-bl,
  .section__one .section__one-animated-br,
  .section__two .section__one-animated-tr,
  .section__two .section__one-animated-tl,
  .section__two .section__one-animated-rm,
  .section__two .section__one-animated-bl,
  .section__two .section__one-animated-br,
  .project-container .section__one-animated-tr,
  .project-container .section__one-animated-tl,
  .project-container .section__one-animated-rm,
  .project-container .section__one-animated-bl,
  .project-container .section__one-animated-br,
  .skills-container .section__one-animated-tr,
  .skills-container .section__one-animated-tl,
  .skills-container .section__one-animated-rm,
  .skills-container .section__one-animated-bl,
  .skills-container .section__one-animated-br,
  .education .section__one-animated-tr,
  .education .section__one-animated-tl,
  .education .section__one-animated-rm,
  .education .section__one-animated-bl,
  .education .section__one-animated-br,
  .contacts .section__one-animated-tr,
  .contacts .section__one-animated-tl,
  .contacts .section__one-animated-rm,
  .contacts .section__one-animated-bl,
  .contacts .section__one-animated-br {
    max-width: 100%;
    max-width: 100%;
  }
  .Projects .Projects h2,
  .Projects .Projects h3,
  .Projects .skills h2,
  .Projects .skills h3,
  .Projects .education h2,
  .Projects .education h3,
  .Projects .contacts h2,
  .Projects .contacts h3,
  .skills .Projects h2,
  .skills .Projects h3,
  .skills .skills h2,
  .skills .skills h3,
  .skills .education h2,
  .skills .education h3,
  .skills .contacts h2,
  .skills .contacts h3,
  .section__one .Projects h2,
  .section__one .Projects h3,
  .section__one .skills h2,
  .section__one .skills h3,
  .section__one .education h2,
  .section__one .education h3,
  .section__one .contacts h2,
  .section__one .contacts h3,
  .section__two .Projects h2,
  .section__two .Projects h3,
  .section__two .skills h2,
  .section__two .skills h3,
  .section__two .education h2,
  .section__two .education h3,
  .section__two .contacts h2,
  .section__two .contacts h3,
  .project-container .Projects h2,
  .project-container .Projects h3,
  .project-container .skills h2,
  .project-container .skills h3,
  .project-container .education h2,
  .project-container .education h3,
  .project-container .contacts h2,
  .project-container .contacts h3,
  .skills-container .Projects h2,
  .skills-container .Projects h3,
  .skills-container .skills h2,
  .skills-container .skills h3,
  .skills-container .education h2,
  .skills-container .education h3,
  .skills-container .contacts h2,
  .skills-container .contacts h3,
  .education .Projects h2,
  .education .Projects h3,
  .education .skills h2,
  .education .skills h3,
  .education .education h2,
  .education .education h3,
  .education .contacts h2,
  .education .contacts h3,
  .contacts .Projects h2,
  .contacts .Projects h3,
  .contacts .skills h2,
  .contacts .skills h3,
  .contacts .education h2,
  .contacts .education h3,
  .contacts .contacts h2,
  .contacts .contacts h3 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 6px auto !important;
    text-align: center !important;
    white-space: normal !important;
    max-width: 100%;
    overflow: visible;
  }
  .Projects .ProjectsOne,
  .Projects .ProjectsTwo,
  .Projects .ProjectsOne *,
  .Projects .ProjectsTwo *,
  .skills .ProjectsOne,
  .skills .ProjectsTwo,
  .skills .ProjectsOne *,
  .skills .ProjectsTwo *,
  .section__one .ProjectsOne,
  .section__one .ProjectsTwo,
  .section__one .ProjectsOne *,
  .section__one .ProjectsTwo *,
  .section__two .ProjectsOne,
  .section__two .ProjectsTwo,
  .section__two .ProjectsOne *,
  .section__two .ProjectsTwo *,
  .project-container .ProjectsOne,
  .project-container .ProjectsTwo,
  .project-container .ProjectsOne *,
  .project-container .ProjectsTwo *,
  .skills-container .ProjectsOne,
  .skills-container .ProjectsTwo,
  .skills-container .ProjectsOne *,
  .skills-container .ProjectsTwo *,
  .education .ProjectsOne,
  .education .ProjectsTwo,
  .education .ProjectsOne *,
  .education .ProjectsTwo *,
  .contacts .ProjectsOne,
  .contacts .ProjectsTwo,
  .contacts .ProjectsOne *,
  .contacts .ProjectsTwo * {
    max-width: 100%;
    box-sizing: border-box;
  }
  .Projects body.hide-overflow-x,
  .Projects html.hide-overflow-x,
  .skills body.hide-overflow-x,
  .skills html.hide-overflow-x,
  .section__one body.hide-overflow-x,
  .section__one html.hide-overflow-x,
  .section__two body.hide-overflow-x,
  .section__two html.hide-overflow-x,
  .project-container body.hide-overflow-x,
  .project-container html.hide-overflow-x,
  .skills-container body.hide-overflow-x,
  .skills-container html.hide-overflow-x,
  .education body.hide-overflow-x,
  .education html.hide-overflow-x,
  .contacts body.hide-overflow-x,
  .contacts html.hide-overflow-x {
    overflow-x: hidden !important;
  }
}/*# sourceMappingURL=style1.css.map */