html {
  box-sizing: border-box;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

body{
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 24px;
  line-height: 1.3;
}

button {
  background-color: transparent;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.container{
  max-width: 1840;
  padding: 0 10px;
  margin: 0 auto;
}
.header{
  background-image: url(../images/header-bg.jpg);
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.header__top{
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu__btn{
  width: 70px;
  height: 23px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu__btn span{
  background-color: #ff5017;
  height: 3px;
  width: 100%;
}
.header__content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  height: calc(100vh - 135px);
}
.title{
  font-size: 345px;
  background: linear-gradient(180deg, #000000 0%, #830B02 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-left: 150px;
  line-height: 0.8;
}
.subtitle{
  font-size: 160px;
  background: linear-gradient(90deg, #FF5017 0%, #000000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  align-self: flex-end;
  padding-right: 75px;
  padding-bottom: 50px;
}
.header__images{
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  margin: auto;
  max-width: 100%;
}
.info{
  background-color: #f8f8f8;
  padding: 170px 0;
}
.info__title{
  text-align: center;
  font-size: 160px;
  line-height: 0.8;
  text-transform: uppercase;
}
.info__img{
  margin: 0 auto;
  max-width: 100%;
}
.info__content{
  padding-left: 155px;
  padding-right: 100px;
  display: flex;
  margin-bottom: 170px;
  gap: 94px;
}
.info__list{
  column-count: 2;
  gap: 140px;
}
.info__list dt,
.info__list dd{
  display: inline-block;
}
.info__list-line{
  margin-bottom: 22px;
}
.price{
  font-size: 46px;
  margin-bottom: 40px;
}
.order{
  padding: 30px 60px;
  background: linear-gradient(181.77deg, #FF5017 2.24%, #FF6837 99.25%);
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.info__gallery{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  flex-wrap: wrap;
}
.info__gallery img{
  max-width: 100%;
}
.color{
  background-color: #f8f8f8;
}
.color__text{
  text-align: center;
  font-size: 160px;
  margin-bottom: 70px;
  text-transform: uppercase;
}
.color__gallery{
  background-color: #13171c;
}
.color__gallery-start,
.color__gallery-end{
  max-width: 100%;
  margin: 0 auto;
}
.gallery-box{
  padding: 170px 50px;
  gap: 20px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.gallery-box img{
  max-width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
}
.gallery-box__text{
  font-size: 36px;
  color: white;
  text-transform: uppercase;
}
.contacts{
  padding: 170px 0 100px;
  background-color: #13171c;
}
.contacts__title{
  text-align: center;
  margin-bottom: 70px;
  text-transform: uppercase;
  font-size: 36px;
  color: #ff5017;
}
.contacts__box{
  display: flex;
  gap: 40px 200px;
  justify-content: space-between;
  padding-left: 300px;
  padding-right: 150px;
}
.contacts__headtext{
  color: #bcbcbc;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.contacts__info{
  max-width: 550px;
}
.contacts__text,
.contacts__text-rules,
.phone{
  color: #ffffff;
}
.contacts__text{
  padding-top: 10px;
  margin-bottom: 20px;
  max-width: 477px;
}
.contacts__text-rules{
  padding-top: 77px;
  font-size: 14px;
  max-width: 330px;
}
.form{
  flex-basis: 594px;
}
.form__input{
  display: block;
  width: 100%;
  margin-bottom: 20px;
  max-width: 594px;
  padding: 10px;
  font-size: 24px;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  line-height: 1.3;
  text-transform: uppercase;
  color: #ffffff;
  background-color: transparent;
  border: none;
  border-bottom: 1ps solid #fff;
}
.form__input::placeholder{
  font-family: "Inter", sans-serif;
  font-weight: 900;
  line-height: 1.3;
  text-transform: uppercase;
  color: #ffffff;
}



.footer{
  text-align: center;
  padding: 15px 0 90px;
  font-size: 14px;
  color: #ffffff;
  background-color: #13171c;
}
.form__order{
  width: 100%;
}
@media (max-width: 1820px) {
  .info__gallery{
    gap: 24px 20px;
  }
  .info__gallery img{
    max-width: auto;
    width: 49%;
  }
}
@media (max-width: 530px) {
  .contacts__box{
    padding-left: 150px;
  }
}
@media (max-width: 1200px) {
  .title{
    padding-left: 0;
    font-size: 278px;
  }
  .subtitle{
    font-size: 140px;
    padding-right: 0;
  }
  .header__images{
    top: 0;
  }
  .info{
    padding: 100px 0;
  }
  .info__title{
    font-size: 86px;
  }
  .info__content{
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 100px;
    gap: 20px;
  }
  .color__text{
    font-size: 80px;
    margin-bottom: 20px;
  }
  .gallery-box{
    padding: 50px 20px;
    flex-wrap: wrap;
  }
  .gallery-box__item{
    width: 48%;
  }
  .gallery-box img{
    width: 100%;
    border-radius: 30px;
  }
  .contacts__box{
    padding-left: 0;
    padding-right: 0;
    gap: 60px;
  }
  .contacts{
    padding: 100px 0;
  }
  .footer{
    padding-bottom: 50px;
  }
}
@media (max-width: 1040px) {
  .color__gallery img{
    width: 100%;
  }
  .info__list{
      gap: 20px;
    }
    .info__content{
      margin-bottom: 50px;
    }
    .price{
      font-size: 32px;
      margin-bottom: 10px;
    }
}
@media (max-width: 800px) {
  .title{
    font-size: 180px;
  }
  .subtitle{
    font-size: 90px;

  }
  .header__top{
    padding-top: 25px;
  }
  .menu__btn span{
    box-sizing: content-box;
    border: 1px solid white;
  }
  .info__title{
    font-size: 54px;
  }
  .info__list{
    column-count: 1;
  }
  .info__list-line{
    margin-bottom: 5px;
    font-size: 18px;
  }
  .contacts__box{
    display: block;
  }
  .contacts__text-rules{
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .form__order{
    width: auto;
  }
}
@media (max-width: 670px) {
  .info__content{
    display: block;
    text-align: center;
  }
}
@media (max-width: 530px) {
  .title{
    font-size: 128px;
  }
  .subtitle{
    font-size: 70px;
  }
  .info{
    padding: 50px;
  }
}
@media (max-width: 530px) {
  .title{
    font-size: 120px;
  }
  .info__title{
    font-size: 44px;
    line-height: 1;
  }
  .color__text{
    font-size: 38px;
  }
  .gallery-box img{
    width: 100%;
  }
  .contacts__title{
    font-size: 34px;
    margin-bottom: 20px;
  }
  .contacts{
    padding: 50px 0;
  }
  .contacts__headtext{
    font-size: 18px;
  }
  .contacts__text{
    font-size: 18px;
  }
  .form__input{
    font-size: 18px; 
  }
  .form__input::placeholder{
    font-size: 18px;
  }
  .order{
    font-size: 18px;
  }
  .form__order{
    width: 100%;
  }
}