* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; 
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    background-color: var(--bg-dark);
    color: var(--white);
}

:root {
    --bg-dark: #000000;
    --gold: #bdae82;
    --white: #ffffff;
    --hover-gold: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%) contrast(87%);
}

a {
    text-decoration: none;
    color: var(--white);
    transition: 0.5s ease-in-out;
}

a:hover {
    color: #BDAE82;
    transition: 0.5s ease-in-out;
}

h1 {
    font-family: Merriweather;
    font-size: 60px;
}

h2 {
    color: var(--gold);
    font-family: Merriweather;
}

section {
    padding-bottom: 100px;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
}

.header-container {
    display: flex;
    align-items: center;
    background: url('../assets/img/header-bg.jpg');
    background-repeat: no-repeat;
    background-position: center 0;
    height: 90px;
}

.header__logo {
    margin: 0px auto 0px 20px;
    background-image: url('../assets/svg/logo.svg');
    background-size: contain;
    background-repeat: no-repeat;  
    transition: 0.5s ease-in-out;
    width: 50px;
    height: 40px;
}

.header__logo:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
    contrast(87%);
}

.nav-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
}
.nav-link {
    padding: 0 20px;
    line-height: 50px;
    font-size: 20px;
    transition: 0.5s ease-in-out;
}

a.nav-link:hover {
    color: #BDAE82;
    transition: 0.5s ease-in-out;
}

.switch-lng {
    margin-right: 18px;
}

span.switch-lng-slash {
    color: #FFFFFF;
}

.ru.active, .en.active {
    color: var(--gold);
}

.switch-lng__item:hover {
    color: var(--gold);
    transition: 0.5s ease-in-out;
}

/* hero */
.hero-container {
    background-image: url('../assets/img/header-bg.jpg');
    background-position: center -90px;
    background-repeat: no-repeat;
    max-width: 1440px;
    height: 820px;
    padding-bottom: 90px;
}

.hero {
    padding-top: 160px;
    width: 500px;
    height: 330px;
    padding-left: 80px;
}

.hero__title {
    margin-bottom: 10px;
    font-style: normal;
    font-weight: bold;
    line-height: 120px;
    color: #FFFFFF;
}

.hero__text {
    font-size: 20px;
    line-height: 40px;
    padding-right: 30px;
    margin-bottom: 25px;
    color: #FFFFFF;
}

/* battons */
.btn{
    border: 0;
    background-color: var(--gold);
    color: #000000;
    cursor: pointer;
    font-family: inherit;
    font-size: 20px;
    width: 220px;
    height: 55px;
    line-height: 40px;
    cursor: pointer;
    transition: .7s ease-in-out;
}

.btn-gold {
    background-color: var(--gold);
    color: var(--bg-dark);
    outline: none;
    border: 0;
}

.btn-gold:hover {
    color: var(--white);
}

.btn-transparent {
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    transition: .5s all ease;
}

.btn-transparent:hover {
    color: var(--white);
}
/* end buttons */

.section-title {
    display: flex;
    justify-content: center;
    margin: 0px auto 60px auto;
    width: 700px;
    background-image: linear-gradient(to top, #000 39px, #bdae82 39px, #bdae82 41px, #000 41px);
  }

.section-title h2 {
    padding: 0 20px 0 20px;
    text-align: center;
    font-family: "Merriweather";
    font-size: 40px;
    line-height: 80px;
    font-style: normal;
    font-weight: bold;
    background-color: #000000;
    color: var(--gold);
}

.skills-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 58px;
    gap: 80px;
}

.skill-item {
    background-position: center top;
    list-style-type: none;
    width: 20%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
}

.skill-item:nth-child(1) {
    background-image: url('../assets/svg/camera.svg');
    background-size: 62px 50px;
}

.skill-item:nth-child(2) {
    background-image: url('../assets/svg/video.svg');
    background-size: 62px 50px;
}

.skill-item:nth-child(3) {
    background-image: url('../assets/svg/image.svg');
    background-size: 66.17px 50px;
}

.skill-item:nth-child(4) {
    background-image: url('../assets/svg/mic.svg');
    background-size: 62px 50px;
}

.skill-item__title {
    margin: 50px 0px!important;
}

.skill-item p {
    padding: 0px 20px 10px 20px;
    text-align: center;
}

/* portfolio */
.portfolio-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 60px;
    gap: 5px;
}

.picture-prtf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: 25px;
}

.picture-prtf__items {
    max-width: 450px;
    height: 560px;
}

.portfolio-btn.active {
    background-color: var(--gold);
    color: var(--white);
}
/* end portfolio */

/* video */
.video-player {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/img/video-player.jpg');
    background-repeat: no-repeat;
    background-position: center;
    height: 705px;
}

.btn-play {
    background-image: url('../assets/svg/btn-play.svg');
    background-repeat: no-repeat;
    width: 129.86px;
    height: 130px;
    background-position: center;
    background-color: transparent;
    border: 0;
    transition: .7s ease-in-out;
}

.btn-play:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
    contrast(87%);
}
/* end video */

/* price */
.price {
    padding: 0px 20px 100px 20px;
}

.price__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* height: 505px; */
    gap: 25px;
}

.price__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 3px solid #BDAE82;
    width: 444px;
    text-align: center;
    padding: 43px 0px;
}

h3.price-title__item {
    font-family: Merriweather;
    font-weight: bold;
    font-size: 28px;
    line-height: 56px;
}

.price-number__item{
    font-family: Merriweather;
    font-weight: bold;
    font-size: 24px;
    line-height: 48px;
    color: var(--gold);
    padding: 20px 0px;
}

.price-text__item {
    line-height: 36px;
    text-align: center;
}

.price-btn {
    margin: 40px auto 0px auto;
}
/* end price */

/* contact-me */
.contacts-container {
    background-image: url('../assets/img/contacts.jpg');
    background-size: auto 700px;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 60px;
    padding-bottom: 210px;
}

.contacts-right {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.contacts-block {
    width: 450px;
}

.contacts-title h2{
    font-family: Merriweather;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 80px;
    color: var(--gold);
    margin-bottom: 40px
}

#contacts-form {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

#mail, #phone, textarea {
    display: block;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 40px;
    color: var(--gold);
}

.contacts-form-input {
    padding: 2px 20px;
}

.contacts-form__item {
    border: 2px solid var(--gold);
    background: rgba(0, 0, 0, 0.5);
}

.contacts-form__item::placeholder {
    font-family: inherit;
    color: #bdae82;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 40px;
}

.contacts-form-textarea {
    padding: 0px 20px;
    width: 90%;
}

.contact-btn {
    align-self: flex-start;
    padding: 8px 40px;
    margin-top: 8px;
}

#message {
    resize: none;
}

.contacts-form__item:focus {
outline: none;
box-shadow: 0px 0px 5px 3px rgb(189 174 130 / 0.75);
-webkit-box-shadow: 0px 0px 5px 3px rgb(189 174 130 / 0.75);
-moz-box-shadow: 0px 0px 5px 3px rgb(189 174 130 / 0.75);
}
/* end contact me */

/* footer */
.footer-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 50px 20px;
}

.copyright {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 50px;
    color: var(--white);
    display: flex;
    gap: 21px;
}

.copyright-link {
    text-decoration: none;
    color: var(--white);
    cursor: pointer;
    transition: .7s ease-in-out;
}

.copyright-link:hover {
    color: var(--gold);
}

.school-link {
    font-size: 20px;
    line-height: 50px;
    color: var(--white);
    text-decoration: none;
    transition: .7s ease-in-out;
}

.school {
    margin-top: -10px;
}

.school:hover {
    color: var(--gold);
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style:none;
}

.social-icon__item {
    transition: .7s;
    cursor: pointer;
}

.social-icon__item img {
    width: 27px;
    height: 27px;
}

.social-icon__item:hover {
    filter: var(--hover-gold);
}
/* end footer */

/* adaptive mobile menu */
.adaptive-menu {
    display: none;
}

/* theme ======================================== */
.toggle-theme-btn {
    margin-right: 20px;
    border: none;
    background-color: transparent;
    transition: 0.3s;
    cursor: pointer;
}

#toggle-theme-image {
    color: #fff;
}

#toggle-theme-image:hover {
    transition: 0.3s;
    filter: invert(21%) sepia(10%) saturate(1031%) hue-rotate(7deg) brightness(89%) contrast(85%);
  }
  
  .theme {
    background: var(--white);
  }

  section.theme {
    color: var(--bg-dark);
    transition: 0.5s;
  }

  .button-item.theme {
    color: var(--bg-dark);
  }

  .button-item.theme:hover {
    color: var(--gold);
  }

  .button-item.theme.active:hover {
    color: var(--white);
  }

  .section-title.black {
    background-image: linear-gradient(to top, #fff 39px, #000000 39px, #000000 41px, #fff 41px);
  }

  .section-title h2.black {
     background-color: var(--white);
     color: var(--bg-dark);
  }

  .footer-container.black {
    background-color: var(--bg-dark);
  }

  .sidebar.black {
    background: var(--white);
  }
  
  .menu-link.black {
    color: var(--bg-dark);
  }
  
/* end theme =====================================*/



/* media quares */
@media (max-width: 768px) {
    section {
        padding-bottom: 80px;
    }

    .section-title h2 {
        font-size: 32px;;
    }

    .header-container {
        background-position: -5px 0px;
        background-size: auto 620px;
    }

    .hero-container {
        height: 530px;
        background-position: -5px -90px;
        background-size: auto 620px;
        max-width: 100%;
        padding-bottom: 90px;
    }

    .header__nav {
        display: none;
    }

    .hero {
        padding-left: 56px;
        padding-top: 115px;
    }

    .hero__title h1{
        font-style: normal;
        font-weight: normal;
        font-size: 32px;
        line-height: 64px;
    }

    .hero__text {
        margin-bottom: 60px;
        font-size: 20px;
        line-height: 24px;
        max-width: 85%;
    }

    .header__logo {
        margin: 0px auto 0px 60px;
    }
    .switch-lng {
        margin-right: 20px;
    }

    /* adaptive skills */
    .skills-items {
        margin-top: 64px;
        gap: 75px 63px;
        width: 99%;
    }

    .skill-item {
        width: 300px;
        height: 224px;
    }

    .skills.section-title {
        padding-bottom: 80px;
    }

    .section-title{
        width: 50%;
        margin: 0px auto 50px auto;
    }

    .skill-item__title {
        margin: 0!important;
        padding: 30px 0px 20px 0px;
    }

    .skill-item p {
        padding: 0;
        font-size: 18px;
        line-height: 22px;
        width: 280px;
        height: 44px;
    }
    /* end adaptive skills */
    
    /* adaptive portfolio */
    .portfolio-btns {
        margin: 0 auto;
        width: 445px;
        height: 115px;
    }
    /* end adaptive content */

    /* adaptive video */
    .video-player {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(../assets/img/video-player-tablet.jpg);
        background-repeat: no-repeat;
        background-position: center;
        height: 420px;
        background-size:contain;
    }
    .btn-play {
        background-size: 65px;
    }
    /* end adaptive video */

    /* adaptive price */
    section.price {
        /* height: 1905px; */
        padding: 0px 20px;
        margin-bottom: 80px;
    }
    .price__items {
        justify-content: center;
        row-gap: 50px;
    }
    .price__item {
        width: 420px;
        height: 505px;
        padding: 0px 0px;
    }
   
    /* end adaptive price */

    /* adaptive contacts */
    .contacts-title h2 {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
    }

    .contacts-right {
        display: flex;
        justify-content: center;
        padding-right: 0px;
    }

    .contact-btn {
        align-self: center;
        padding: 8px 40px;
        margin-top: 8px;
    }

    .contacts-container {
        /* background-size: auto 590px; */
        padding-bottom: 110px;
        background-size: cover;
        padding-top: 62px;
    }
    /* end adaptive contacts */

    /* adaptive footer */

    .footer-data {
        flex-direction: column;
    }

    .social-icons {
        padding-top: 20px;
    }
    /* end adaptive footer */

    /* mobile menu */
    * {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
    .adaptive-menu {
        display: block;
    }

    #nav-icon3 {
       width: 50px;
       margin: 0px 64px 0px 0px;
       height: 30px;
       position: relative;
       margin-left: auto;
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       -webkit-transition: .5s ease-in-out;
       -moz-transition: .5s ease-in-out;
       -o-transition: .5s ease-in-out;
       transition: .5s ease-in-out;
       cursor: pointer;
       z-index: 999;
     }

     #nav-icon3 span {
       display: block;
       position: absolute;
       height: 3px;
       width: 100%;
       background: #fff;
       opacity: 1;
       left: 0;
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       -webkit-transition: .25s ease-in-out;
       -moz-transition: .25s ease-in-out;
       -o-transition: .25s ease-in-out;
       transition: .25s ease-in-out;
     }

     #nav-icon3 span:nth-child(1) {
       top: 0px;
     }

     #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
       top: 12px;
     }

     #nav-icon3 span:nth-child(4) {
       top: 24px;
     }

     #nav-icon3.open span:nth-child(1) {
       top: 12px;
       width: 0%;
       left: 50%;
     }

     #nav-icon3.open span:nth-child(2) {
       -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
       -o-transform: rotate(45deg);
       transform: rotate(45deg);
       width: 50px;
     }

     #nav-icon3.open span:nth-child(3) {
       -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
       transform: rotate(-45deg);
       width: 50px;
     }

     #nav-icon3.open span:nth-child(4) {
       top: 12px;
       width: 0%;
       left: 50%;
     }

    #nav-icon3.open span{
        background-color: var(--gold);
    }

     .sidebar #nav-icon3 span {
         background: #fff;
    }

     body.sidebar-opened {
         overflow:hidden;
        }

     .hidden-overley {
         position: fixed;
         top: 0;
         left: 0;
         z-index: 99;
         background: #000000;
         opacity:0;
         width:0;
         height:0;
         transition: opacity 1s;
     }

     .hidden-overley.show {
         height: 100%;
         width: 100%;
         opacity:0.5;
         transition: opacity 1s;
     }

     .sidebar{
       position: fixed;
       z-index:100;
       width: 620px;
       height: 100%;
       right: -620px;
       top:0;
       background: var(--bg-dark);
       transition: right 0.4s ease;
       overflow: auto;
     }
 
     .sidebar.show{
       right: 0px;
     }

     .sidebar ul{
       background: none;
       height: auto;
       list-style: none;
           margin: 0;
           padding:0;
           padding-bottom: 461px;
           padding-left: 127px;
           padding-top: 110px;
     }

     .sidebar ul li{
       margin: 0;
     }

     .sidebar ul li a{
       box-sizing:border-box;    
       position: relative;
       color: #fff;
       text-decoration: none;
       font-family: Inter;
       font-size: 35px;
       line-height: 73px;
       
       display: block;
       width: 100%;
       transition: 0.5s ease-in-out;
     }

     .sidebar ul li a:hover{
         cursor:pointer;
         color: #bdae82;
         transition: 0.5s ease-in-out;
     }

     .sidebar ul ul{
       position: static;
       display: none;
     }

     .sidebar ul{
       display: block;
     }
     
     .sidebar ul ul li{
       line-height: 42px;
       border-top: none;
     }

     .sidebar ul ul li a{
       font-size: 17px;
       color: #333;
       padding-left: 40px;
     }
     /* end mobile menu */
 }

 @media (max-width: 619px) {
    .sidebar {
        width: 100%;
    }

    .hero {
        width: 295px;
        padding-left: 20px;
        padding-top: 53px;
    }

    .hero__title h1 {
        font-size: 20px;
        line-height: 24px;
    }

    .hero-container {
        height: 324px;
        background-position: -5px -116px;
        background-size: auto 450px;
        max-width: 100%;
        padding-bottom: 90px;
    }

    .header-container {
        background-position: -5px -26px;
        background-size: auto 450px;
    }

    .hero__text {
        margin-bottom: 30px;
        max-width: 242px;
        padding: 0;
        margin: 0;
        max-width: 100%;
        font-size: 15px;
        line-height: 24px;
        padding-bottom: 20px;
    }

    .portfolio-btns {
        width: 320px;
        padding-bottom: 155px;
    }

    .picture-prtf__items {
        max-width: 300px;
        height: auto;
    }

    .contacts-block {
        max-width: 200px;
    }

    .contacts-form-textarea {
        padding: 0px 20px;
        width: 78%;
    }

    .header__logo {
        margin: 0px auto 0px 20px;
        width: 34px;
        height: 36px;
    }

    .contact-btn {
        width: 100%;
        height: auto;
        font-size: 15px;
    }

    #nav-icon3 {
        width: 45px;
        margin: 0px 24px 0px 0px;
        height: 30px;
    }
    
    .hero button {
        font-size: 15px;
        width: 134px;
        height: auto;
    }
    
 }

@media (max-width: 490px) {
    .hero {
        width: 228px;
        padding-left: 20px;
        padding-top: 5px;
    }

    .hero__title h1 {
        font-size: 20px;
        line-height: 24px;
    }

    .hero-container {
        height: 260px;
        background-position: -5px -90px;
        background-size: auto 320px;
        max-width: 100%;
        padding-bottom: 10px;
    }

    .header-container {
        background-position: -5px 0px;
        background-size: auto 320px;
    }

    .hero__text {
        margin-bottom: 30px;
        max-width: 242px;
        padding: 0;
        margin: 0;
        font-size: 13px;
        line-height: 24px;
        padding-bottom: 20px;
    }

    .portfolio-btns {
        width: 320px;
        padding-bottom: 155px;
    }

    .picture-prtf__items {
        max-width: 300px;
        height: auto;
    }

    .video-player {
        height: 265px;
        background-size: 100%;
    }

    .contacts-block {
        max-width: 200px;
    }

    .contacts-form-textarea {
        padding: 0px 20px;
        width: 78%;
    }

    .header__logo {
        margin: 0px auto 0px 20px;
        width: 34px;
        height: 36px;
    }

    .contact-btn {
        width: 100%;
        height: auto;
        font-size: 15px;
    }

    #nav-icon3 {
        width: 45px;
        margin: 0px 24px 0px 0px;
        height: 30px;
    }
    
    .hero button {
        font-size: 15px;
        width: 134px;
        height: auto;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .sidebar ul {
        padding-left: 90px;
    }
}