@charset "UTF-8";
@font-face {
  font-family: "Xolonium";
  src: url("/fonts/Xolonium/Xolonium-Bold.otf");
  font-weight: bold;
}
@font-face {
  font-family: "Xolonium";
  src: url("/fonts/Xolonium/Xolonium-Regular.otf");
  font-weight: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-Black.ttf");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-ExtraLightItalic.ttf");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-LightItalic.ttf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/Source_Sans_Pro/SourceSansPro-BlackItalic.ttf");
  font-weight: 900;
  font-style: italic;
}
body {
  background-color: #FFFFFF;
  max-width: 2560px;
}

* {
  scrollbar-color: #A7A7A7 none;
  scrollbar-width: thin;
}

.banner_conteiner:nth-child(1) {
  background-image: url("/img/lines1.png");
  background-repeat: no-repeat;
  background-size: 90% auto;
  background-position: 0% -3%;
}

.banner_conteiner:nth-child(2) {
  background-image: url("/img/lines2.png");
  background-repeat: no-repeat;
  background-size: 70% auto;
  background-position: -60% 110%;
}

.banner_conteiner:nth-child(4) {
  background-image: url("/img/lines3.png");
  background-repeat: no-repeat;
  background-size: 90% auto;
  background-position: 160% -6%;
}

.wrap {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
}

.banner_conteiner {
  min-width: 100vw;
  height: 100vh;
  padding: 0px 5vw;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 3vw;
  grid-auto-rows: max-content;
  word-break: break-word;
}
.banner_conteiner .slogan {
  font-family: "Xolonium";
  font-weight: bold;
  font-size: 4rem;
  grid-column: 2/12;
  width: 100%;
  color: #121212;
  line-height: 7vw;
  margin-top: 13rem;
  text-align: center;
  margin-left: -3vw;
}
.banner_conteiner .slogan .word1 {
  font-family: "Xolonium";
  font-weight: bold;
  font-size: clamp(1.5rem, 7vw, 8rem);
  color: #E94F7A;
}
.banner_conteiner .slogan .word2 {
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 6vw, 5rem);
  position: relative;
  padding: 3px;
}
.banner_conteiner .slogan .word3 {
  font-family: "Xolonium";
  font-weight: bold;
  font-size: clamp(1.5rem, 6vw, 7rem);
  color: #E6A500;
  margin-left: 12vw;
}
.banner_conteiner .slogan .word4 {
  font-family: "Source Sans Pro";
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.5rem, 5.5vw, 6rem);
  color: #E94F7A;
  margin-left: 6vw;
}
.banner_conteiner .slogan .word5 {
  font-family: "Xolonium";
  font-weight: normal;
  font-size: clamp(1.5rem, 5.5vw, 7rem);
  color: #FFA0AF;
  margin-left: 2vw;
}
.banner_conteiner .word2::after {
  content: "";
  background-image: url(/img/circle.png);
  background-size: cover;
  position: absolute;
  bottom: -35%;
  right: -40%;
  width: 15vw;
  height: 15vw;
  z-index: -10;
  animation: spin 20s linear infinite;
  transform-origin: center center;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.banner_conteiner .prof_text {
  grid-column: 2/12;
  width: 100%;
  color: #121212;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7vw;
}
.banner_conteiner .prof_text p {
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw, 2.8rem);
  padding: 3px;
}
.banner_conteiner .prof_text .prof {
  border: #121212 solid 0.1rem;
  border-radius: 2.7rem;
  padding: 1.5vw 2vw;
}
.banner_conteiner .prof_text .fio {
  font-family: "Source Sans Pro";
  font-weight: 600;
  font-style: italic;
}
.banner_conteiner .prof_text .slide_in {
  opacity: 0; /* Сначала прозрачный */
  animation: slideIn 1300ms ease forwards;
}
.banner_conteiner .prof_text .slide_in.left {
  transform: translateX(-10rem); /* Сдвинут влево */
}
.banner_conteiner .prof_text .slide_in.right {
  transform: translateX(10rem); /* Сдвинут влево */
}
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0); /* Возвращаем на место */
  }
}
.banner_conteiner .about_foto {
  grid-column: 2/7;
  margin-top: 15rem;
}
.banner_conteiner .skills {
  display: flex;
}
.banner_conteiner .skills :first-child {
  color: #E94F7A;
  border-color: #E94F7A;
}
.banner_conteiner .skills p {
  margin-right: 1.5vw;
  font-family: "Source Sans Pro";
  font-weight: 600;
  color: #E6A500;
  border: #E6A500 solid 0.1rem;
  border-radius: 2.7rem;
  padding: 1.3vw 1.7vw;
  font-size: clamp(0.5rem, 1.2vw, 1.2rem);
}
.banner_conteiner .rasporka {
  height: 3rem;
}
.banner_conteiner .about_foto img {
  width: 20vw;
  float: right;
}
.banner_conteiner .about_text_conteiner {
  grid-column: 8/12;
}
.banner_conteiner .about_text_conteiner .hi_text {
  margin-top: 7rem;
}
.banner_conteiner .about_text_conteiner p {
  font-family: "Source Sans Pro";
  font-weight: 400;
  color: #121212;
  font-size: clamp(0.5rem, 1.1vw, 1.3rem);
  line-height: clamp(1.1rem, 1.6vw, 2rem);
}
.banner_conteiner .about_text_conteiner p .yellow {
  color: #E6A500;
  font-family: "Xolonium";
  font-weight: bold;
}
.banner_conteiner .about_text_conteiner p .italic {
  font-style: italic;
}
.banner_conteiner .about_text_conteiner p .semibold {
  font-weight: 600;
}
.banner_conteiner .about_text_conteiner p .under_line_black {
  border-bottom: #121212 solid 0.1rem;
}
.banner_conteiner .about_text_conteiner p .under_line_yellow {
  border-bottom: #E6A500 solid 0.1rem;
}
.banner_conteiner .about_text_conteiner .name_text {
  font-family: "Xolonium";
  font-weight: bold;
  color: #E94F7A;
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  margin-top: 2rem;
  margin-left: 5vw;
  margin-bottom: 2rem;
}
.banner_conteiner .about_text_conteiner .name_text span {
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-size: clamp(0.4rem, 1.5vw, 1rem);
}
.banner_conteiner .potfolio {
  grid-column: 2/12;
  margin-top: 7rem;
}
.banner_conteiner .potfolio p {
  font-family: "Xolonium";
  font-weight: bold;
  color: #E6A500;
  font-size: clamp(1rem, 1.5vw, 1.7rem);
}
.banner_conteiner .potfolio .buttons {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}
.banner_conteiner .potfolio .buttons button {
  outline: none;
  background: none;
  font-family: "Source Sans Pro";
  font-weight: 600;
  color: #E94F7A;
  border: #E94F7A solid 0.1rem;
  border-radius: 2.7rem;
  padding: 1.3vw 1.7vw;
  font-size: clamp(0.5rem, 1.2vw, 1.2rem);
  margin-right: 1.5vw;
  cursor: pointer;
  transition: all 0.2s linear;
}
.banner_conteiner .potfolio .buttons button:hover {
  color: #E6A500;
  border-color: #E6A500;
}
.banner_conteiner .potfolio .buttons .action_but {
  color: #E6A500;
  border-color: #E6A500;
}
.banner_conteiner .potfolio .project_conteiner {
  justify-content: space-between;
  flex-wrap: wrap;
  max-height: 35vw;
  overflow-y: auto;
  display: none;
  grid-template-columns: repeat(2, 1fr); /* например, 2 колонки для проектов внутри */
  gap: 1rem;
}
.banner_conteiner .potfolio .project_conteiner .project {
  border-radius: 1rem;
  overflow: hidden;
}
.banner_conteiner .potfolio .project_conteiner .project a {
  height: 100%;
  display: block;
}
.banner_conteiner .potfolio .project_conteiner .project img {
  width: 100%;
  display: block;
}
.banner_conteiner .potfolio .action_block {
  display: grid;
}
.banner_conteiner .connect_foto {
  grid-column: 2/7;
  margin-bottom: 10vw;
}
.banner_conteiner .connect_foto p {
  font-family: "Xolonium";
  font-weight: bold;
  color: #A7A7A7;
  font-size: clamp(1rem, 3vw, 3.5rem);
  margin-bottom: 0.5rem;
}
.banner_conteiner .connect_foto .con_fot {
  width: 100%;
  position: relative;
}
.banner_conteiner .connect_foto .con_fot img {
  width: 100%;
}
.banner_conteiner .con_fot::after {
  content: "";
  background-image: url(/img/circle.png);
  background-size: cover;
  position: absolute;
  bottom: 60%;
  right: -20%;
  width: 15vw;
  height: 15vw;
  z-index: 10;
  animation: spin 20s linear infinite;
  transform-origin: center center;
}
.banner_conteiner .connect_text {
  grid-column: 8/12;
  margin-bottom: 10vw;
  display: grid;
  justify-items: end;
}
.banner_conteiner .connect_text p {
  font-family: "Source Sans Pro";
  font-weight: 400;
  color: #121212;
  font-size: clamp(0.5rem, 1.1vw, 1.3rem);
  line-height: clamp(1.1rem, 1.6vw, 2rem);
}
.banner_conteiner .connect_text .connect_zag {
  font-family: "Xolonium";
  font-weight: bold;
  color: #E6A500;
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  margin-bottom: 0.5rem;
}
.banner_conteiner .connect_text .number {
  margin-top: 7vw;
  margin-bottom: 3vw;
}
.banner_conteiner .connect_text .number p {
  font-family: "Source Sans Pro";
  font-weight: 600;
  color: #E94F7A;
  border: #E94F7A solid 0.1rem;
  border-radius: 2.7rem;
  padding: 1.3vw 1.7vw;
  font-size: clamp(0.5rem, 1.2vw, 1.2rem);
  margin-bottom: 1vw;
  max-width: fit-content;
  float: right;
}
.banner_conteiner .connect_text .number .mail_link {
  color: inherit; /* берёт цвет от родителя */
  text-decoration: none; /* убирает подчёркивание */
  cursor: pointer;
}
.banner_conteiner .connect_text img {
  width: 15vw;
}

.down {
  align-items: flex-end;
  height: 100vh;
  grid-template-rows: 1fr;
}

@media (min-width: 1921px) and (max-width: 2560px) {
  /* стили для экранов от 1921px до 2560px */
  .banner_conteiner .slogan .word1 {
    font-size: clamp(1.5rem, 9vw, 11rem);
  }
  .banner_conteiner .slogan .word2 {
    font-size: clamp(1.5rem, 7vw, 6.5rem);
  }
  .banner_conteiner .word2::after {
    bottom: -60%;
    right: -60%;
  }
  .banner_conteiner .slogan .word3 {
    font-size: clamp(1.5rem, 6.9vw, 9.5rem);
  }
  .banner_conteiner .slogan .word4 {
    font-size: clamp(1.5rem, 7vw, 8rem);
  }
  .banner_conteiner .slogan .word5 {
    font-size: clamp(1.5rem, 8vw, 9rem);
  }
  .banner_conteiner .slogan {
    margin-top: 16rem;
  }
  .banner_conteiner .prof_text p {
    font-size: clamp(1.5rem, 3vw, 3.5rem);
  }
  .banner_conteiner .prof_text .prof {
    border: #121212 solid 0.2rem;
    border-radius: 5.5rem;
    padding: 2vw 2.4vw;
  }
  .banner_conteiner .skills p {
    border: #FF6B8C solid 0.2rem;
    border-radius: 4rem;
    padding: 1.5vw 2vw;
    font-size: clamp(0.5rem, 1.7vw, 2rem);
  }
  .banner_conteiner .about_foto {
    margin-top: 25rem;
  }
  .banner_conteiner .about_text_conteiner p {
    font-size: clamp(0.5rem, 1.7vw, 1.8rem);
    line-height: clamp(1.1rem, 2vw, 2.8rem);
  }
  .banner_conteiner .about_text_conteiner .name_text {
    font-size: clamp(1rem, 2vw, 2.7rem);
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .banner_conteiner .about_text_conteiner .name_text span {
    font-size: clamp(0.4rem, 2vw, 1.9rem);
  }
  .banner_conteiner .about_text_conteiner .hi_text {
    margin-top: 12rem;
  }
  .banner_conteiner .potfolio p {
    font-size: clamp(1rem, 2vw, 2.7rem);
  }
  .banner_conteiner .potfolio .buttons button {
    border: #FF6B8C solid 0.2rem;
    border-radius: 4rem;
    padding: 1.5vw 2vw;
    font-size: clamp(0.5rem, 1.7vw, 2rem);
  }
  .banner_conteiner .potfolio {
    margin-top: 12rem;
  }
  .banner_conteiner .potfolio .buttons {
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
  .banner_conteiner .potfolio .project_conteiner {
    max-height: 37vw;
    gap: 2.5rem;
  }
  .banner_conteiner .connect_foto p {
    font-size: clamp(1rem, 5vw, 5.5rem);
    margin-bottom: 1rem;
  }
  .banner_conteiner .connect_text .connect_zag {
    font-size: clamp(1rem, 2vw, 2.7rem);
    margin-bottom: 1rem;
  }
  .banner_conteiner .connect_text p {
    font-size: clamp(0.5rem, 1.7vw, 1.8rem);
    line-height: clamp(1.1rem, 2vw, 2.8rem);
  }
  .banner_conteiner .connect_text .number p {
    border: #FF6B8C solid 0.2rem;
    border-radius: 4rem;
    padding: 1.5vw 2vw;
    font-size: clamp(0.5rem, 1.7vw, 2rem);
  }
  .banner_conteiner .connect_foto, .banner_conteiner .connect_text {
    margin-bottom: 7vw;
  }
}
@media (max-width: 1279px) {
  .wrap {
    display: block;
  }
  .banner_conteiner {
    height: fit-content;
    margin-bottom: 5vw;
  }
  .banner_conteiner:nth-child(1) {
    background-position: 0% -15%;
  }
  .banner_conteiner:nth-child(2) {
    background-image: url("/img/line_vertical1.png");
    background-repeat: no-repeat;
    background-size: auto 35vw;
    background-position: 87vw 40vw;
  }
  .banner_conteiner:nth-child(4) {
    background-image: url("/img/line_vertical2.png");
    background-position: 200% 105%;
  }
  .banner_conteiner .slogan {
    margin-top: 6rem;
  }
  .banner_conteiner .skills p {
    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .about_text_conteiner p {
    font-size: clamp(0.9rem, 1.1vw, 1.3rem);
    line-height: clamp(1.2rem, 1.6vw, 2rem);
  }
  .banner_conteiner .about_text_conteiner .name_text {
    font-size: clamp(1.2rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .about_foto img {
    width: 23vw;
  }
  .banner_conteiner .potfolio p {
    font-size: clamp(1.2rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .potfolio .buttons button {
    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .connect_text .connect_zag {
    font-size: clamp(1.2rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .connect_text p {
    font-size: clamp(0.9rem, 1.1vw, 1.3rem);
  }
  .banner_conteiner .connect_text .number p {
    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner:last-child {
    margin-bottom: 0;
    margin-top: 10vw;
  }
}
/* Классические планшеты (768px) */
@media (max-width: 768px) {
  /* стили для стандартных планшетов */
  .banner_conteiner .slogan {
    line-height: 10vw;
    margin-left: 0;
  }
  .banner_conteiner:nth-child(1) {
    background-position: 0% 0%;
  }
  .banner_conteiner:nth-child(2) {
    background-size: auto 50%;
    background-position: 160% 90%;
  }
  .banner_conteiner:nth-child(4) {
    background-position: 0% 103%;
    background-size: 130% auto;
  }
  .banner_conteiner .slogan .word1 {
    font-size: clamp(6rem, 7vw, 8rem);
  }
  .banner_conteiner .slogan .word2 {
    font-size: clamp(3.5rem, 6vw, 5rem);
  }
  .banner_conteiner .slogan .word3 {
    font-size: clamp(3.9rem, 6vw, 7rem);
    margin-left: 0;
  }
  .banner_conteiner .word2::after {
    width: 20vw;
    height: 20vw;
  }
  .banner_conteiner .slogan .word4 {
    font-size: clamp(3.3rem, 5.5vw, 6rem);
    margin-left: 0;
  }
  .banner_conteiner .slogan .word5 {
    font-size: clamp(3.3rem, 5.5vw, 6rem);
  }
  .banner_conteiner .slogan {
    margin-top: 15rem;
  }
  .banner_conteiner:first-child {
    height: 100vh;
  }
  .banner_conteiner .prof_text {
    margin-top: 15rem;
  }
  .banner_conteiner .about_foto {
    grid-column: 2/12;
    margin-top: 0;
  }
  .banner_conteiner .prof_text p {
    font-size: clamp(1.7rem, 2vw, 2.8rem);
  }
  .banner_conteiner .prof_text .prof {
    padding: 2.5vw 3vw;
  }
  .banner_conteiner .skills p {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .about_foto img {
    width: 35vw;
  }
  .banner_conteiner .about_text_conteiner {
    grid-column: 2/12;
  }
  .banner_conteiner .about_text_conteiner .hi_text {
    margin-top: 4rem;
  }
  .banner_conteiner .about_text_conteiner p {
    font-size: clamp(1rem, 1.1vw, 1.3rem);
    line-height: clamp(1.4rem, 1.6vw, 2rem);
  }
  .banner_conteiner .about_text_conteiner .name_text {
    font-size: clamp(1.4rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .about_text_conteiner .name_text span {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
  }
  .banner_conteiner .potfolio p {
    font-size: clamp(1.4rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .potfolio .buttons button {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .potfolio .project_conteiner {
    max-height: 80vw;
  }
  .banner_conteiner .con_fot::after {
    bottom: 80%;
    right: -10%;
    width: 20vw;
    height: 20vw;
  }
  .banner_conteiner .connect_foto {
    grid-column: 2/12;
    order: 2;
  }
  .banner_conteiner .connect_text {
    grid-column: 2/12;
    margin-bottom: 5vw;
  }
  .banner_conteiner .connect_text .connect_zag {
    font-size: clamp(1.4rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .connect_text p {
    font-size: clamp(1rem, 1.1vw, 1.3rem);
  }
  .banner_conteiner .connect_text .number p {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .connect_text img {
    width: 20vw;
  }
  .banner_conteiner .connect_foto p {
    color: rgba(167, 167, 167, 0.5);
    font-size: clamp(2.5rem, 3vw, 3.5rem);
  }
}
@media (max-width: 600px), (min-width: 600px) and (max-width: 768px) {
  /* стили для экранов до 600px И для экранов от 600 до 768px */
  .banner_conteiner .prof_text .slide_in {
    flex: 0 0 auto; /* не растягивается */
    width: auto;
  }
  .banner_conteiner .prof_text p {
    font-size: clamp(1.5rem, 2vw, 2.8rem);
  }
  .banner_conteiner .slogan .word1 {
    font-size: clamp(5.5rem, 7vw, 8rem);
  }
  .banner_conteiner .slogan {
    margin-top: 20vw;
  }
  .banner_conteiner .slogan {
    line-height: 12vw;
  }
  .banner_conteiner .slogan .word3 {
    font-size: clamp(3.1rem, 6vw, 7rem);
  }
  .banner_conteiner .prof_text {
    margin-top: 20vw;
  }
  .banner_conteiner .potfolio .project_conteiner {
    grid-template-columns: repeat(1, 1fr);
  }
  .banner_conteiner:nth-child(2) {
    background-size: auto 40%;
    background-position: 150% 70%;
  }
  .banner_conteiner:nth-child(4) {
    margin-top: 30vw;
  }
}
@media (min-width: 413px) and (max-width: 599px), (max-width: 599px) {
  /* стили для экранов с шириной от 414 до 600px */
  .banner_conteiner .slogan .word1 {
    font-size: 14vw;
  }
  .banner_conteiner .slogan .word2 {
    font-size: 9vw;
  }
  .banner_conteiner .slogan .word3 {
    font-size: 8vw;
  }
  .banner_conteiner .word2::after {
    width: 25vw;
    height: 25vw;
  }
  .banner_conteiner .slogan .word4 {
    font-size: 9vw;
  }
  .banner_conteiner .slogan .word5 {
    font-size: 10vw;
  }
  .banner_conteiner .prof_text p {
    font-size: 4vw;
  }
  .banner_conteiner .slogan {
    margin-top: 50vw;
  }
  .banner_conteiner .prof_text {
    margin-top: 40vw;
  }
  .banner_conteiner .skills p {
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
    padding: 2.5vw 3vw;
  }
  .banner_conteiner .about_foto img {
    width: 10rem;
  }
  .banner_conteiner .about_text_conteiner p {
    font-size: clamp(0.8rem, 1.1vw, 1.3rem);
    line-height: clamp(1.2rem, 1.6vw, 2rem);
  }
  .banner_conteiner .about_text_conteiner .name_text {
    font-size: clamp(1.1rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .about_text_conteiner .name_text span {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
  }
  .banner_conteiner .potfolio p {
    font-size: clamp(1.1rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .potfolio .buttons button {
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
    padding: 2.5vw 3vw;
    flex: 0 0 auto;
  }
  .banner_conteiner .potfolio .buttons {
    margin-top: 2.5rem;
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 20px 0;
  }
  .banner_conteiner .connect_text .connect_zag {
    font-size: clamp(1.1rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .connect_text p {
    font-size: clamp(0.8rem, 1.1vw, 1.3rem);
  }
  .banner_conteiner .connect_text .number p {
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
    padding: 2.5vw 3vw;
  }
  .banner_conteiner .connect_text img {
    width: 7rem;
  }
  .banner_conteiner .connect_foto p {
    color: rgba(167, 167, 167, 0.5);
    font-size: clamp(1.8rem, 3vw, 3.5rem);
  }
  .banner_conteiner .connect_foto p {
    margin-bottom: 0.3rem;
  }
  .banner_conteiner .con_fot::after {
    bottom: 70%;
    right: -10%;
    width: 25vw;
    height: 25vw;
  }
  .banner_conteiner:nth-child(1) {
    background-size: 130% auto;
  }
  .banner_conteiner:nth-child(2) {
    background-size: auto 35%;
    background-position: 75vw;
  }
  .banner_conteiner:nth-child(1) {
    background-size: 250% auto;
    background-position: 50% 0;
  }
  .banner_conteiner .potfolio .project_conteiner {
    max-height: 120vw;
  }
}
@media (max-width: 375px) {
  /* стили для экранов до 375px */
  .banner_conteiner .slogan {
    margin-top: 40vw;
  }
}
@media (max-width: 320px) {
  /* стили для маленьких телефонов */
  .banner_conteiner .slogan {
    margin-top: 20vw;
  }
  .banner_conteiner .prof_text {
    margin-top: 30vw;
  }
  .banner_conteiner .skills p {
    font-size: clamp(0.6rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .rasporka {
    height: 2rem;
  }
  .banner_conteiner .about_text_conteiner p {
    font-size: clamp(0.7rem, 1.1vw, 1.3rem);
    line-height: clamp(1rem, 1.6vw, 2rem);
  }
  .banner_conteiner .about_text_conteiner .name_text {
    font-size: clamp(0.9rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .about_text_conteiner .name_text span {
    font-size: clamp(0.7rem, 1.5vw, 1rem);
  }
  .banner_conteiner .potfolio {
    margin-top: 4rem;
  }
  .banner_conteiner .potfolio p {
    font-size: clamp(0.9rem, 1.5vw, 1.7rem);
  }
  .banner_conteiner .potfolio .buttons {
    margin-top: 0.7rem;
  }
  .banner_conteiner .potfolio .buttons button {
    font-size: clamp(0.6rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .connect_text .connect_zag {
    font-size: clamp(0.9rem, 1.5vw, 1.7rem);
    margin-bottom: 0.2rem;
  }
  .banner_conteiner .connect_text p {
    font-size: clamp(0.7rem, 1.1vw, 1.3rem);
  }
  .banner_conteiner .connect_text .number p {
    font-size: clamp(0.6rem, 1.2vw, 1.2rem);
  }
  .banner_conteiner .connect_foto p {
    font-size: clamp(1.3rem, 3vw, 3.5rem);
  }
}
@media (min-width: 430px) and (max-width: 450px) and (min-height: 950px) and (max-height: 960px) and (orientation: portrait) {
  /* стили для iPhone 15 Pro Max в портретной ориентации */
  .banner_conteiner .slogan {
    margin-top: 50vw;
  }
  .banner_conteiner .prof_text {
    margin-top: 60vw;
  }
  .banner_conteiner:nth-child(1) {
    background-size: 250% auto;
    background-position: 50% 0;
  }
  .banner_conteiner .potfolio .project_conteiner {
    max-height: 120vw;
  }
}

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