:root {
  --color-gold: #bdae82;
  --color-black: #000;
  --color-white: #fff;
  --font1: 60px;
  --font2: 40px;
}
html {
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family: 'Inter', sans-serif;
  font-size:20px;
  color:var(--color-white);
  font-weight: 400;
  line-height: 1.5;
  background-color: var(--color-black);
}
.conteiner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  background-color: var(--color-black);
  box-sizing: border-box;
}
/*header*/
.header-conteiner .conteiner{
  background: url('./assets/img/bg.jpg');
  background-repeat: no-repeat;
  background-position: center 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  color:var(--color-white);
}
.header-logo{
  width: 50px;
  height: 50px;
  background: url('./assets/img/logo.png') no-repeat;
  transition: 0.3s;
}
.header-logo:hover,.header-switch-color:hover{
  filter: invert(24%) sepia(9%) saturate(1068%) hue-rotate(7deg) brightness(92%) contrast(88%);
}
.nav{
  width:500px;
  margin-left: auto;
}
.nav-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  padding: 0;
  transition: 0.5s;
}
.nav-link {
  padding: 0 18px;
  line-height: 50px;
  text-decoration: none;
  color:var(--color-white);
}
.nav-link:hover{
  color: var(--color-gold);
  transition: color 0.5s;
}
.header-switch-lng{
  width: 70px;
}
.header-switch-lng a{
  text-decoration: none;
  color: var(--color-white);
}
.header-switch-lng a.cold-color{
  color:var(--color-gold);
}
.header-switch-lng a:hover{
  color: var(--color-gold);
  transition: color 0.5s;
  cursor:pointer;
}
.header-switch-color{
  width: 45px;
  height: 45px;
  background: url('./assets/svg/carbon_suns.svg') 0 0 no-repeat;
  margin-left:25px;
  margin-right:25px;
  cursor:pointer;
  transition: 0.5s;
}
.header-switch-color.switch-dark-color{
  background:  url('./assets/svg/Vectort.svg') 0 0 no-repeat;
}
.light-theme {
  background-color: #fff;
  color: #000;
}
.section-title.light-theme,.conteiner.light-theme ,.portfolio-button.light-theme{
  background-color: #fff;
  color: #000;
}
.portfolio-button.button-active.light-theme{
  color:white;
}
.title-conteiner.light-theme{
  background-image: linear-gradient(to top, #fff 39px, #000 39px, #000 41px, #fff 41px);
}
.light-theme:hover {
  color: #000;
}
.open .nav-list.light{
   background-color: white;
 }
 .open .nav-link.light{
   color:black;
 }
.burger-menu{
  display: none;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 50px;
  height: 3px;
  background-color: var(--color-white);
  margin: 10px 0;
  transition: 0.5s;
}
/* Поворот первой полосы */
.change.bar1 {
  transform: rotate(-45deg) translate(-9px, 9px) ;
}
/* Исчезание второй полосы */
.change.bar2 {
  opacity: 0;
}
/* Поворот последней полосы */
.change.bar3 {
  transform: rotate(45deg) translate(-9px, -9px) ;
}
.change.bar1.light-theme,.change.bar2.light-theme,.change.bar3.light-theme{
  background-color: black;
}
.cold-color{
  color: var(--color-gold);
}
/*main*/
.hero-conteiner {
  background-image: url('./assets/img/bg.jpg');
  background-position: center -90px;
  background-repeat: no-repeat;
  height: 820px;
  padding: 160px 0 0 80px;
  box-sizing: border-box;
}
.hero-info{
  width: 500px;
  height: 330px;
}
.button{
  display: inline-block;
  color:var(--color-black);
  background-color: var(--color-gold);
  border:0;
  width: 220px;
  height: 55px;
  font-family: inherit;
  font-size: 20px;
  cursor: pointer
}

.portfolio-button{
  display: inline-block;
  width: 220px;
  height: 55px;
  font-family: inherit;
  font-size: 20px;
  cursor: pointer;
  color:var(--color-gold);
  background-color: var(--color-black);
  border:2px solid var(--color-gold);
}
.portfolio-button.button-active{
  color:var(--color-black);
  background-color: var(--color-gold);
  border: 0;
}
.portfolio-button:hover{
  color:var(--color-white);
}
.portfolio-button.light-theme:hover{
  color:var(--color-gold);
}
.portfolio-button.button-active.light-theme:hover{
  color:var(--color-black);
}
.button:hover{
  color:var(--color-white);
}
.hero-info button{
  margin-top: 20px;
}
h1{
  font-family: 'Merriweather', serif;
  font-size: 60px;
  height: 120px;
  line-height: 120px;
  margin: 0;
}
.hero-text{
  width: 470px;
  height: 120px;
  line-height: 2;
  padding-top: 10px;
}
.skills-conteiner{
  height: 482px;
  padding-top: 100px;
  padding-bottom: 50px;
  box-sizing: border-box;
}
.title-conteiner{
  width: 700px;
  height: 80px;
  margin: 0 auto ;
  text-align: center;
  background-image: linear-gradient(to top, #000 39px, #bdae82 39px, #bdae82 41px, #000 41px);
}
.section-title{
  display: inline;
  font-family: 'Merriweather', serif;
  font-weight: bold;
  color: var(--color-gold);
  font-size: var(--font2);
  padding: 0 20px;
  background-color: var(--color-black);
  line-height: 80px;
}
.skills-items {
  list-style: none;
  padding: 45px 20px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.skills-item{
  display: block;
  width: 320px;
  height: 240px;
  text-align: center;
  background-position: center top;
  background-repeat: no-repeat;
}
.skills-item:nth-child(1) {
  background-image: url('./assets/svg/camera.svg');
  background-size: 62px 50px;
}
.skills-item:nth-child(2) {
  background-image: url('./assets/svg/video.svg');
  background-size: 60px 50px;
}
.skills-item:nth-child(3) {
  background-image: url('./assets/svg/image.svg');
  background-size: 66px 50px;
}
.skills-item:nth-child(4) {
  background-image: url('./assets/svg/mic.svg');
  background-size: 32px 50px;
}
.skills-item-title{
  font-weight: bold;
  margin:100px 0 30px;
}
.skills-item-text{
  line-height: 2;
  padding: 0 20px;
  font-size: 18px;
}
.portfolio-conteiner{
  text-align: center;
  padding-top: 100px;
}
.portfolio-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap:5px;
  margin-top: 60px;
}
.portfolio-conteiner img{
  width:450px;
  height: 560px;
}
.portfolio-img{
  padding: 60px 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap:25px;
}
.video-conteiner{
  height: auto;
}
.video-player {
  position: relative;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-top: 60px;
}
.video-player img{
  max-width: 100%;
}
.video-player button{
  width: 130px;
  height: 130px;
  background: url('assets/img/Play_hover.png') 0 0 no-repeat;
  position: absolute;
  top: calc(50% - 65px);
  left: calc(50% - 65px);
  transition: 0.3s;
}
.video-player button:hover{
  filter: invert(24%) sepia(9%) saturate(1068%) hue-rotate(7deg) brightness(92%) contrast(88%);
}
.price-conteiner{
  padding: 100px 0;
}
.price-items{
  display: flex;
  justify-content: space-between;
  align-items:center;
  font-family: 'Merriweather', serif;
  padding: 0 20px 90px 20px;
  margin-top:60px;
}
.price-item{
  display: block;
  width: 450px;
  height: 505px;
  border: var(--color-gold) 2px solid;
}
.price-title{
  font-weight:bold;
  font-size: 28px;
  text-align: center;
  padding: 20px 0;
  margin: 25px 0 0;
}
.price-price{
  color: var(--color-gold);
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  margin: 15px 0;
}
.price-text{
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}
.price-text span{
  display: block;
  padding: 4px 0;
  text-align: center;
}
.price-item button{
  display: block;
  margin: 40px auto;
}
.contact-conteiner{
  background-image: url('./assets/img/contacts.jpg');
  background-size: auto 700px;
  background-position: center center;
  height: 700px;
  color: var(--color-gold);
  padding: 0 20px;
  position: relative;
}
.contact-title{
  font-size: var(--font2);
  margin-top: 10px;
}
.contact-text{
  width: 450px;
  height: 445px;
  position: absolute;
  top:45px;
  right: 40px;
}
.contact-text input, .contact-text textarea{
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
  margin: 20px 0 0;
  box-sizing: border-box;
  font-family: inherit;
  background: transparent;
}
.contact-text input{
  height: 50px;
}
.contact-text input, .contact-text textarea{
  border: var(--color-gold) solid 2px;
}
::placeholder {
  font-family: inherit;
  color: #bdae82;
  font-size: 20px;
}
.contact-conteiner textarea{
  resize: none;
  margin-bottom: 25px;
}
/*footer*/
.footer-lists{
  height: 150px;
}
.footer-lists,.footer-list{
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.footer-lists a,.footer-list a{
  text-decoration: none;
  color:inherit;
  transition: color 0.5s;
}
.footer-lists a:hover,.footer-list a:hover{
  color: var(--color-gold);
}
.footer-year{
  width: 300px;
}
.footer-school-link{
  width:320px;
}
.footer-social-link{
  width: 190px;
}
.footer-item-link{
  display: block;
  width: 32px;
  height: 32px;
  background-position: 0 0;
  background-repeat:no-repeat;
  transition: 0.3s;
}
.footer-item-link:nth-child(1) {
  background-image: url('./assets/svg/inst 1.svg');
  margin-right: 15px;
}
.footer-item-link:nth-child(2) {
  background-image: url('./assets/svg/fb 1.svg');
  margin-right: 15px;
}
.footer-item-link:nth-child(3) {
  background-image: url('./assets/svg/tw 1.svg');
  margin-right: 15px;
}
.footer-item-link:nth-child(4) {
  background-image: url('./assets/svg/pinterest 1.svg');
}
.footer-item-link:hover{
  filter: invert(24%) sepia(9%) saturate(1068%) hue-rotate(7deg) brightness(92%) contrast(88%);
}
@media (max-width: 1440px){
  .skills-item{
    width: 25%;
  }
}
@media (max-width: 1150px) {
  .title-conteiner{
    max-width: 100%;
  }
  .price-item{
    width: 300px;
    height: 505px;
  }
  .price-items{
    flex: 1 1 300px;
  }
  .portfolio-img{
    justify-content: center;
  }
  .skills-conteiner{
    height: 700px;
  }
  .skills-item{
    width: 50%;
  }
}
@media (max-width:945px) {
  .price-items{
    flex-direction: column;
    padding-bottom: 30px;
  }
  .price-item{
    margin-bottom:50px;
    width: 400px;
    height: 500px;
  }
  .price-item button {
    margin: 35px auto;
  }
}
@media (max-width:840px) {
  .nav{
    font-size: 17px;
  }
}
@media (max-width: 768px) {
  .header-conteiner .conteiner{
    background-size: auto 620px;
    background-position: -5px -30px;
  }
  .nav{
    font-size: 20px;
  }
  .hero-conteiner {
    height: auto;
    background-size: auto 620px;
    background-position: -5px -120px;
    padding: 50px 60px;
  }
  .hero-text{
    width: 400px;
    line-height: 1.3;
  }
  .hero-info button {
    margin-top: 15px;
  }
  h1{
    font-size: 30px;
    margin-bottom: 35px;
    height: 65px;
  }
  .conteiner{
    max-width: 768px;
		padding-left:60px;
    padding-right:60px;
    padding-bottom: 10px;
  }
  .nav{
    width: auto;
  }
  .open .nav-list{
    right: 0;
  }
  .nav-list{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 125px;
    padding-top: 130px;
    box-sizing: border-box;
    font-size: 30px;
    height: 100%;
    width: 620px;
    right: -620px;
    background-color: #000;
    position: fixed;
    z-index: 3;
    margin-top: -45px;
    transition: 0.5s;
  }
  .nav-list.light{
    background-color: #fff;
  }
  .nav-item{
    margin-bottom: 20px;
  }
  .burger-menu{
    display: block;
    z-index: 101;
    transition: 0.5s;
  }
  .header-switch-lng{
    padding-right: 25px;
    margin-left: auto;
  }
  .section-title{
    font-size: 32px;
  }
  .title-conteiner{
    width: 370px;
    margin: 0 auto;
    height: 70px;
  }
  .section-title{
    line-height: 70px;
  }
  .skills-item-title{
    margin-top:85px;
    margin-bottom: 20px;
  }
  .skills-item{
    margin-bottom:20px;
  }
  .skills-item-text{
    width: auto;
    line-height: 1.5;
  }
  .skills-item:nth-child(1),.skills-item:nth-child(3) {
    background-position-x: center;
  }
  .skills-item:nth-child(2) {
    background-position-x: center;
  }
  .video-conteiner{
    padding-bottom: 0;
  }
  .video-player img{
    height: 418px;
    width: 768px;
  }
  .video-player button {
    width: 70px;
    height: 70px;
    background-size: contain;
    top: calc(50% - 35px);
    left: calc(50% - 35px);
  }


  .contact-conteiner{
    height: 600px;
    background-size: cover;
  }
  .contact-text{
    top: 9%;
    left: calc(50% - 450px/2);
    text-align: center;
  }
  .contact-title{
    font-size: 35px;
  }
  .footer-conteiner{
    font-size: 20px;
  }
  .footer-lists{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 320px;
    margin: 0 auto;
    padding: 10px 0;
  }
  .footer-lists > .footer-item{
    height: 40px;
    text-align: center;
  }
  @media (max-width:650px) {
    .skills-conteiner{
      height: 1120px;
    }
    .skills-items {
       flex-direction: column;
       align-items: center;
       justify-content: center;
    }
    .skills-item:nth-child(1),.skills-item:nth-child(3) ,.skills-item:nth-child(2){
      background-position-x: center;
    }
  }
  @media (max-width: 595px){
    body{
      font-size: 14px;
    }
    .conteiner{
     max-width: 590px;
     padding-left:20px;
     padding-right:20px;
    }
    .header-conteiner .conteiner{
      justify-content: flex-start;
    }
    .header-switch-lng {
       padding-right: 0;
    }
    .hero-conteiner{
      height: 400px;
    }
    .hero-info{
      width: 300px;
      box-sizing: border-box;
      margin: 0 auto;
      text-align: center;
    }
    .nav-list {
      width: 320px;
    }
    h1{
      font-size: var(--font2);
    }
    .hero-text{
      width: 280px;
      text-align: center;
    }
    .portfolio-img img{
      width: 280px;
      height: 384px;
    }
    .skills-items{
      height: 700px;
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap;
    }
    .skills-item{
      width: 90%;
      height: 220px;
    }
    .video-player img{
      height: 350px;
    }
    .skills-item-text {
      line-height: 1.5;
      padding: 0 10px;
      font-size: 14px;
    }
    .skills-conteiner{
      height: auto;
      padding-bottom: 3px;
    }
    .price-item {
      height: 400px;
      width: 270px;
    }
    .price-title{
      margin: 0;
    }
    .contact-text {
      width: 280px;
      top: calc(50% - 280px/2);
      left: calc(50% - 280px/2);
    }
    .footer-conteiner{
      height: 130px;
      font-size: 16px;
    }
    .footer-year{
      width: 220px;
    }
    .footer-school-link {
      width: 220px;
    }
    .footer-lists{
      width: 250px;
    }
    .footer-school-link {
      width: 280px;
    }
  }
}