@import url('<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300&display=swap" rel="stylesheets">');
@import url(./blocks/body/body.css);
@import url(./blocks/body/header/header__logo.css);
@import url(./blocks/header/header__navigation.css);
@import url(./blocks/main/main.css);
@import url(./blocks/main/button__main.css);
@import url(./blocks/footer/footer.css);
@import url(./blocks/applicationForm/applicationForm.css);
@import url(./blocks/aboutMe/aboutMe.css);
@import url(./blocks/projects/projects.css);
@import url(./blocks/applicationForm2/application\ form2.css)

@media screen and (min-width: 1048px) and (max-width: 1338px) {
  .container{
    width:100%
  }

  .pic {
  width: 500px;
  height: 200px;

  }


  .appeal{
    font-size: 60px;
    margin-left:20px;
  }

  .forwhom{
    font-size:30px;
  }

  .footer{
    margin-left: 50%;
    margin-top: 10%;
  }

  .row{
    margin-right:50%;
    margin-top:-30%;
   /* margin:auto; */
  }


  .button {
    width: 300px;
    height:60px;
  }
  .button a{
    font-size: 30px;
  }
}



@media screen and (min-width: 320px) and (max-width: 1048px) {
  /* .container{
    width:50%
  } */

  .pic{
  /* width: 70%;
  height: 70%; */

  }
  .appeal{
    font-size: 58px;
    padding-left:50px;
  }

  .forwhom{
    font-size:28px;
  }

  .footer{
    margin-left: 7%;
    margin-top:10%;
  }
}

html {
  box-sizing: border-box;
  height: 100%;
}

.button {
  width: 300px;
  height:60px;
}
.button a{
  font-size: 22px;
}


@media screen and (min-width: 0px) and (max-width: 320px) {
  /* .container{
    width:30%
  } */

  .pic{
 display: none;
  }
  .appeal{
    font-size: 42px;
    padding-left:50px;
  }

  .forwhom{
    font-size:20px;
  }

  .footer{
    margin-left: 7%;
    margin-top:10%;
  }
}

html {
  box-sizing: border-box;
  height: 100%;
}




*,
*::after,
*::before {
  box-sizing: inherit;
}

/* body {
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  height: 100%;
} */
/* 
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
  padding: 0 15px;
} */

.header {
  flex: 0 0 auto;
  /* background-color: #212429; */
  margin-top: 75px;
}

.header h1 {
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}

.main {
  /* background-color: #fafafa; */
  flex: 1 0 auto;
}

.footer {
  /* background-color: #010101; */
  flex: 0 0 auto;
  text-align: center;
}

.content {
  padding: 50px 0;
}

p {
  margin-bottom: 40px;
}

/* img {
  max-width: 100%;
  height: auto;
  margin-bottom: 40px;
} */

/* .footer .content {
  color: #fff;
} */

.navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 75px;
  z-index:100;
  
}

.navbar__wrap {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.hamb {
  display: none;
}

.popup {
  display: none;
}

/* .logo {
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
} */

.menu > li > a {
  text-decoration: none;
}

.navbar__wrap .menu {
  display: flex;
}

.navbar__wrap .menu > li {
  display: flex;
  align-items: stretch;
}

.navbar__wrap .menu > li > a {
  display: flex;
  align-items: center;
  /* padding: 0 20px; */
  color: rgba(255, 255, 255, 0.7);
}

.navbar__wrap .menu > li > a:hover {
  color: rgba(255, 255, 255, 1);
}

@media (max-width: 1000px) {
  .navbar__wrap .menu {
    display: none;
  }
  .hamb {
    display: flex;
    align-items: center;
  }
  .hamb__field {
    padding: 10px 20px;
    cursor: pointer;
  }
  .bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px auto;
    background-color: #fff;
    transition: 0.2s;
  }
  .popup {
    position: fixed;
    top: 75px;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color:#201C1C ;
    z-index: 100;
    display: flex;
    transition: 0.3s;
  }
  .popup.open {
    left: 0;
  }
  .popup .menu {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 50px 0;
    overflow: auto;
  }
  .popup .menu > li {
    width: 100%;
  }
  .popup .menu > li > a {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }
  .popup .menu > li > a:hover {
    background-color: rgba(122, 82, 179, 0.1);
  }
  .hamb__field.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamb__field.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamb__field.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  body.noscroll {
    overflow: hidden;
  }
}



/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */

/* Устроства с маленьким экраном (планшеты, 768px и выше) */
/* @media (min-width: 768px) { */
    /* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
    /* } */
    
    /* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
    /* @media (min-width: 992px) { */
      /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
    /* }
     */
    /* Устройства с большим экраном (компьютеры, 1200px и выше) */
    /* @media (min-width: 1200px) { */
      /* Стили для устройств с шириной viewport >1200px */
    /* } */

 
/* .block{
  position:fixed;
  
} */
.container{
  display: flex;
  justify-content: center;
}