* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*border:1px solid blue;*/
  }
  
  html {
    scroll-behavior: smooth;
  }
  /*.light-theme {
    background-color: #fff;
    color: #000;
  }
  
  .light-theme:hover {
    color: #000;
  }*/
  body {
    background-color: white;
    font-family: "Inter", sans-serif;
  }
  footer{
    background-color: black;  
  }
  header {
    height: 90px;
  }
  .container {
    width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    }
    .container-video {
      width: 1440px;
      margin: 0 auto;
      padding: 0 20px;
    }  
  .header-container {
    /*margin:0 auto;*/
    display: flex;
    align-items: center;
    background: url("assets/img/bg.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
    background-color: #000;
  }
  .activation{
    color: #bdae82;
  }
  .nav-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
   margin-right: 15px;
  }
  .nav-link {
    padding: 0 15px;
    line-break: 50px;
    text-decoration: none;
    color: white;
  }
  .navigator {
    margin-left: auto;
    transition: all 0.5s ease-in-out; 
    /*margin: -40px 121px 20px 880px;*/
  }
  .logo {
    width: 50px;
    height: 50px;
    margin: 20px 0;
    background-size: contain;
    background-image: url("./assets/img/logo.svg");
    background-repeat: no-repeat;
    transition: 0.3s;
  }
  .logo:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
      contrast(87%);
  }
  .link {
    transition: 0.3s;
  }
  
  .link:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
      contrast(87%);
  }
  .burgerFirst{
    display: none;
  }
  .burger{
    display: none;
  }
  .language {
    font-weight: bold;
    color: white;
    cursor: pointer;
  }
  .themepicture{
      background-image: url("./assets/svg/carbon_sun.svg");
      width: 45px;
      height: 45px;
      margin-right: 30px;
      margin-left: 30px;
      
  }
  .themepicture:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
      contrast(87%);
  }
  .language span{
    padding: 0 10px 0 10px;
  }
  .hero-container {
    display: flex;
    padding-top: 0px;
    height: 820px;
    background-image: url("assets/img/bg.jpg");
    background-position: center -90px;
    background-repeat: no-repeat;
    color: white;
    margin: 0 auto;
    background-color: #000;
  }
  .hero-title{
    font-size: 60px;
   Line height: 120px; 
   width: 500px; 
   height: 120px;
  }
  .card {
    font-size: 20px;
    line-height: 40px;
    width: 500px;
    height: 330px;
    padding-top: 160px;
    margin-left: 80px;
    margin-right: 860px;
  }
  .cardinfo {
    width: 470px;
    height: 120px;
    margin: 10px 0 25px;
    line-height: 2;
  }
  .buttonactive {
    border: 0;
    background-color: #bdae82;
    color: #000000;
    font-family: inherit;
    cursor: pointer;
    height: 55px;
    width: 220px;
    font-size: 20px;
    line-height: 40px;
    transition: 0.3s;
    
  }
  .button:hover, .buttonblack:hover {
    color: white;
  }
  h1,
  h2 {
    font-family: "Merriweather", serif;
    font-size: 60px;
    line-height: 120px;
  }
  h3 {
    font-family: "Merriweather";
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 56px;
    /* identical to box height, or 200% */
  
    text-align: center;
  
    color: black;
  }
  .hero .container {
    margin: 0 auto;
    padding: 0;
  }
  .section-skills{
    background-color: white;
  }
  .section-title {
    width: 50%;
    margin: 100px auto 60px;
    background-image: linear-gradient(
      to top,
      white 39px,
      black 39px,
      black 41px,
      white 41px
    );
    font-family: "Merriweather";
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 80px;
    /* identical to box height, or 200% */
  
    text-align: center;
  
    color: black;
  }
  .line {
    background-color: white;
    padding-left: 20px;
    padding-right: 20px;
  }
  .skill-items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: white;
  }
  .skill-item {
    background-position: center top;
    padding-top: 100px;
    width: 320px;
    height: 240px;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
  }
  .skill-item h3 {
    font-family: "Inter";
    font-size: 20px;
    line-height: 40px;
    /*margin-bottom: 20px;*/
    font-weight: bold;
    padding-bottom: 20px;
  }
  .skill-item p {
    width: 280px;
    margin: 0 auto;
    color: black;
  }
  .skill-item:nth-child(1) {
    background-image: url("assets/svg/camera 1.svg");
    background-size: 62px 50px;
    background-repeat: no-repeat;
  }
  .skill-item:nth-child(2) {
    background-image: url("assets/svg/video 1.svg");
    background-size: 62px 50px;
    background-repeat: no-repeat;
  }
  .skill-item:nth-child(3) {
    background-image: url("assets/svg/image 1.svg");
    background-size: 62px 50px;
    background-repeat: no-repeat;
  }
  .skill-item:nth-child(4) {
    background-image: url("./assets/svg/mic1.svg");
    background-size: 62px 50px;
    background-repeat: no-repeat;
  }
  .portfolio-btn{
    border: 2px solid #bdae82;
    background-color: white;
    color: black;
    font-family: inherit;
    cursor: pointer;
    height: 55px;
    width: 220px;
    font-size: 20px;
    line-height: 40px;
    transition: 0.3s;
  }
  .portfolio-btn.active{
    border: 0;
    background-color: #bdae82;
    color: white;
    font-family: inherit;
    cursor: pointer;
    height: 55px;
    width: 220px;
    font-size: 20px;
    line-height: 40px;
    transition: 0.3s;
  
  }
  .button {
    border: 0;
    background-color: #bdae82;
    color: #000000;
    font-family: inherit;
    cursor: pointer;
    height: 55px;
    width: 220px;
    font-size: 20px;
    line-height: 40px;
    transition: 0.3s;
  }
  .pictures {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
  }
  .buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 60px;
  }
  .videoplayer {
    background-image: url("./assets/img/video.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 705px;
  }
  .videobutton {
    border: none;
    width: 130px;
    height: 130px;
    background: none;
    background-size: contain;
    background-image: url("./assets/img/videobutton.svg");
    background-repeat: no-repeat;
    transition: 0.3s;
  }
  .price {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    text-align: center;
  }
  .standard {
    flex: 1;
    border: 2px solid #bdae82;
    height: 505px;
    justify-content: center;
    align-items: center;
    font-family: "Inter";
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 36px;
    padding-top: 43px;
    /* identical to box height, or 200% */
  
    text-align: center;
  
    color: black;
  }
  .standard span {
    display: block;
  }
  .standard button {
    margin-top: 40px;
    margin-bottom: 43px;
  }
  
  .pricespan {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: Merriweather;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 48px;
    /* identical to box height, or 200% */
  
    text-align: center;
  
    color: #bdae82;
  }
  .contacts{
      width: 1440px;
      padding-top:100px;
      margin: 0 auto;
    }
    .contacts .container-contacts{
      display: flex;
      flex-direction: column;
      background-image: url('./assets/img/contacts.jpg');
      background-size: 100% 700px;
      background-position:center center;
      height: 700px;
      background-repeat: no-repeat;
      margin:0 ;
      padding-left: 970px;
      padding-right: 20px;
      
    
    }
    .section-contact{
      width: 50%; 
      margin: 60px auto 40px;
     background-image: linear-gradient(to top, #000 39px, #bdae82 39px, #bdae82 41px, #000 41px);
     font-family: "Merriweather";
     font-style: normal;
     font-weight: bold;
     font-size: 40px;
     line-height: 80px;
     /* identical to box height, or 200% */
     
     text-align: center;
     
     color: #BDAE82; 
    }
    .contacts .container-contacts .section-contact{
      background: none;
      text-align: left;
      width: 450px;
    }
    .inputdesigne {
      font-family: 'Inter';
      font-size: 20px;
      line-height: 40px;
      border:#BDAE82 2px solid;
      background-color:rgba(0, 0, 0, 0.5) ;
      color: white;
    }
    .inputdesigne::placeholder{
      font-family: 'Inter';
      color: #bdae82;
      font-size: 20px;
      line-height: 40px;
    }
    .input1{
      padding-left: 20px;
      height: 50px;
      margin-bottom:20px;
    }
    .text1{
      padding-left: 20px;
      height: 100px;
      margin-bottom: 30px;
      resize: none
    }
    .footerorigin{
      height: 150px;
      width: 1440px;
      margin:0 auto;
      text-decoration:0;
      font-family: 'Inter';
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 50px;
    color:white;
    }
    footer .container{
      display: flex;
      justify-content: space-between;
      padding-top: 50px;
    }
    .footer-list{
      display: inline-flex;
      list-style: none;    
    }
    footer .container a{
      text-decoration:0;
      font-family: 'Inter';
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 50px;
    color:white;
    }
    .inst{
      height: 32px;
      width: 32px;
      background-image: url(./assets/svg/inst.svg);
    }
    .fb{
      height: 32px;
      width: 32px;
      background-image: url(./assets/svg/fb.svg);
    }
    .tw{
      height: 32px;
      width: 32px;
      background-image: url(./assets/svg/tw.svg);
    }
    .pic{
      height: 32px;
      width: 32px;
      background-image: url(./assets/svg/pinterest.svg);
    }
    .footer3 .footer-list{
      gap: 20px;
      margin-top: -10px;
      
    }
    .footer1 span{
      padding: 0 20px;
    }
    .footer2{
      margin-left:20px;
    }
  
    @media (max-width: 768px) {
      .navigator {
        display: none;
        transition: all 0.5s ease-in-out; 
      }
      .navigator.open{
      display: flex;
       position: absolute;
       top: 0;
       right: 0px; 
       width: 620px;
       height: 100%;
      line-break: 50px;
      text-decoration: none;
      color: black;
      background-color: white;
      margin-left: 0;
      transition: all 0.5s ease-in-out;
      }
      .nav-link {
        padding: 0 15px;
        line-break: 50px;
        text-decoration: none;
        color: black;
      }
      .nav-list {
        position: relative;
        display: flex;
        flex-direction: column; 
        align-items: flex-start;    
        list-style: none;
        justify-content: flex-start;
        padding-top: 134px;
        margin-right: 0;
        padding-left: 127px;
        margin-left: 0;
        font-size: 35px;
        line-height: 72.55px;
        width: 400;
  
      }
      .burgerFirst{
        display: flex;
        flex-direction: column;
        margin-right: 44px;
        margin-left: 20px;
        
      }
      .burgerFirst.burgeropen{
        position: relative;
        display: flex;
        flex-direction: column;
        margin-right: 44px;
        margin-left: 20px;
      }
      .burgerFirst.burgeropen .burger1{
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
        transition: 0.5s;
        background-color: black;
      }
      .burgerFirst.burgeropen .burger2{
        opacity: 0;
        transition: 0.5s;
      }
      .burgerFirst.burgeropen .burger3{
        -webkit-transform: rotate(45deg) translate(-11px, -8px) ;
        transform: rotate(45deg) translate(-11px, -8px) ;
        transition: 0.5s;
        background-color: black;
      }
      .burger1, .burger2, .burger3{
        display: flex;
        width: 50px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
        transition: 0.5s;
      }
      .language {
        font-weight: bold;
        color: white;
        margin-left: auto;
  
      }
      .container {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    .contacts{
      width: 100%;
      padding-top:100px;
      margin: 0 auto;
    }
    .logo {
      width: 50px;
      height: 50px;
      margin-top: 20px;
      margin-left: 40px;
      background-size: contain;
      background-image: url("./assets/img/logo.svg");
      background-repeat: no-repeat;
      transition: 0.3s;
    }
    .header-container {
      /*margin:0 auto;*/
      display: flex;
      align-items: center;
      background: url("assets/img/bg.jpg");
      background-size: auto 590px;
      background-repeat: no-repeat;
      background-position: 20px 0;
      overflow-x: hidden;
      background-color: #000;
    }
    .hero-container {
      flex-wrap: wrap;
      width: 100%;
      display: flex;
      padding-top: 0px;
      height: 500px;
      background-image: url("assets/img/bg.jpg");
      background-position: 20px -90px;
      background-size: auto 590px;
      background-repeat: no-repeat;
      color: white;
      margin: 0 auto;
    }
    .hero-title{
      font-size: 32px;
     Line height: 64px; 
     width: 165px; 
     height: 64px;
     margin-top: 78px;
    }
    .card {
      font-size: 20px;
      line-height: 40px;
      width: 500px;
      height: 330px;
      padding-top: 0px;
      margin-left: 60px;
    }
    .cardinfo {
      width: 390px;
      height: 72px;
      font-size: 20px;
      line-height: 24px;
      padding-top: 20px;
      
      }
      .buttonhero{
        margin-top: 60px;
  
      }
      .contacts{
        width: 100%;
        padding-top:100px;
        margin: 0 auto;
      }
        .contacts .container-contacts{
        display: flex;
        flex-direction: column;
        background-image: url('./assets/img/contacts.jpg');
        background-size: auto 600px;
        background-position:center center;
        height: 600px;
        background-repeat: no-repeat;
        margin:0 ;
        padding: 60px 159px 0px 159px;
        align-items: center;
  
      }
      .contacts .container-contacts .section-contact{
        background: none;
        text-align: center;
        width: 100%;
      }
      .button-contacts{
        text-align: center;
      }
      .section-contact{
        width: 50%; 
        margin: 0 auto 40px;
      background-image: linear-gradient(to top, #000 39px, #bdae82 39px, #bdae82 41px, #000 41px);
       font-family: "Merriweather";
       font-style: normal;
       font-weight: bold;
       font-size: 40px;
       line-height: 80px;
       text-align: center;
       color: #BDAE82; 
      }
      .price {
        display: flex;
        flex-direction: column;
        gap: 25px;
        text-align: center;
      }
      .standard {
        margin: 0 auto;
        flex: 1;
        border: 2px solid #bdae82;
        height: 505px;
        width: 420px;
        justify-content: center;
        align-items: center;
        font-family: "Inter";
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 36px;
        padding-top: 43px;
        /* identical to box height, or 200% */
      }
        .buttons {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 5px;
          margin: 60px auto;
          width: 445px;
          height: 115px;
        }
        .portfolio{
          padding: 0 20px;
        }
        .container-video {
          width: 100%;
          margin: 0 auto;
          padding: 0 ;
        }  
        .videoplayer {
          background-image: url("./assets/img/video-player768.jpg");
          background-size: auto 418px;
          background-repeat: no-repeat;
          background-position: center 0;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 418px;
          padding: 0;
        }
        .videobutton {
          border: none;
          width: 75px;
          height: 75px;
          background: none;
          background-size: contain;
          background-image: url("./assets/img/videobutton.svg");
          background-position: center;
          background-repeat: no-repeat;
          transition: 0.3s;
        }
        .footerorigin{
          height: 190px;
          width: 100%;
          margin:0 auto;
          text-decoration:0;
          font-family: 'Inter';
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 50px;
        color:white;
        }
        footer .container{
          padding: 0;
          display: flex;
          flex-direction: column;
          margin: 0 auto;
        }
           footer .container a{
          text-decoration:0;
          font-family: 'Inter';
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 50px;
        color:white;
        }
        .inst{
          height: 32px;
          width: 32px;
          background-image: url(./assets/svg/inst.svg);
        }
        .fb{
          height: 32px;
          width: 32px;
          background-image: url(./assets/svg/fb.svg);
        }
        .tw{
          height: 32px;
          width: 32px;
          background-image: url(./assets/svg/tw.svg);
        }
        .pic{
          height: 32px;
          width: 32px;
          background-image: url(./assets/svg/pinterest.svg);
        }
    
        .footer1 span{
          padding: 0 20px;
        }
        .footer1{
          width: 100%;
          text-align: center;
          padding-top: 28px;
        }
        .footer2{
          width: 100%;
          text-align: center;
          margin: 0;
          padding: 0;
        }
        .footer3{
          width: 100%;
          text-align: center;
          padding-top: 20px;
        }
        .footer-list{
          display: inline-flex;
          list-style: none;   
          gap: 20px; 
        }
        footer .logo{
          margin: 0;
        }
      .inputdesigne{
        width: 450px;
      }
      .section-skills{
        padding: 0;
        margin: 0;
        width: 100%;
      }
      .skill-items {
      width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: white;
        row-gap: 76px;
      }
    }
    @media (max-width: 680px) {
      .skill-items {
        width: 100%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          color: white;
          row-gap: 76px;
        }
        .header-container {
          /*margin:0 auto;*/
          display: flex;
          align-items: center;
          background: url("assets/img/bg.jpg");
          background-size: auto 590px;
          background-repeat: no-repeat;
          overflow-x: hidden;
          height: 90px;
          background-color: #000;
        }
        .hero-container {
          flex-wrap: wrap;
          width: 100%;
          display: flex;
          padding-top: 0px;
          height: 500px;
          background-image: url("assets/img/bg.jpg");
          background-position:-90px;
          background-size: auto 590px;
          background-repeat: no-repeat;
          color: white;
          margin: 0 auto;
        }
        .hero-title{
          font-size: 32px;
         Line height: 64px; 
         width: 165px; 
         height: 64px;
         margin-top: 78px;
        }
        .card {
          font-size: 20px;
          line-height: 40px;
          width: 80%;
          height: auto;
          padding-top: 0px;
          margin-left: 60px;
        }
        .cardinfo {
          width: 100%;
          height: auto;
          font-size: 20px;
          line-height: 24px;
          padding-top: 20px;
          
          }
          .buttonhero{
            margin-top: 0px;
      
          }
          .inputdesigne{
            width: auto;
          }
  
    }
    @media (max-width: 570px){
      .navigator.open{
        display: flex;
         position: absolute;
         top: 0;
         right: 0px; 
         width: 100%;
         height: 100%;
        line-break: 50px;
        text-decoration: none;
        color: white;
        background-color: black;
        margin-left: 0;
        transition: all 0.5s ease-in-out;
        }
  
    .buttons {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: center;
      align-items:center;
      gap: 5px;
      margin: 60px auto;
      width: 100%;
      height: auto;
    }
    .header-container {
      /*margin:0 auto;*/
      display: flex;
      align-items: center;
      background: url("assets/img/bg.jpg");
      background-position:-250px 0;
      background-size: auto 590px;
      background-repeat: no-repeat;
      overflow-x: hidden;
      height: 90px;
      background-color: #000;
    }
    .hero-container {
      flex-wrap: wrap;
      width: 100%;
      display: flex;
      padding-top: 0px;
      height: 500px;
      background-image: url("assets/img/bg.jpg");
      background-position:-250px -90px;
      background-size: auto 590px;
      background-repeat: no-repeat;
      color: white;
      margin: 0 auto;
    }
    .contacts .container-contacts{
      display: flex;
      flex-direction: column;
      background-image: url('./assets/img/contacts.jpg') fixed;
      background-size: auto auto;
      background-position:left center;
      height: auto;
      background-repeat: no-repeat;
      margin:0 ;
      padding: 60px 159px 0px 159px;
      align-items: center;
  
    }
    .contacts .container-contacts .section-contact{
      background: none;
      text-align: center;
      width: auto;
      
    }
    .standard {
      margin: 0 auto;
      flex: 1;
      border: 2px solid #bdae82;
      height: auto;
      width: 100%;
      justify-content: center;
      align-items: center;
      font-family: "Inter";
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 36px;
      padding-top: 43px;
      /* identical to box height, or 200% */
    }
    .photo{
      width: 100%;
    }
    .videoplayer {
      background-image: url("./assets/img/video-player768.jpg");
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center 0;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 416px;
      padding: 0;
    }
    }
    @media (max-width: 420px){
      .videoplayer {
        background-image: url("./assets/img/video-player768.jpg");
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center 0;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        padding: 0;
      }
      .contacts .container-contacts{
        display: flex;
        flex-direction: column;
        background-image: url('./assets/img/contacts.jpg') fixed;
        background-size: auto auto;
        background-position:-100px center;
        height: auto;
        background-repeat: no-repeat;
        margin:0 ;
        padding: 60px 0px 0px 0px;
        align-items: center;
    
      }
      .navigator.open{
        display: flex;
         position: absolute;
         top: 0;
         right: 0px; 
         width: 100%;
         height: 100%;
        line-break: 50px;
        text-decoration: none;
        color: white;
        background-color: black;
        margin-left: 0;
        transition: all 0.5s ease-in-out;
        }
        .section-title {
          width: 100%;
        }
          .section-contact{
            width: 50%; 
            margin: 60px 0 40px;
           background-image: linear-gradient(to top, #000 39px, #bdae82 39px, #bdae82 41px, #000 41px);
           font-family: "Merriweather";
           font-style: normal;
           font-weight: bold;
           font-size: 40px;
           line-height: 80px;
           /* identical to box height, or 200% */
           
           text-align: center;
           
           color: #BDAE82; 
          }
          .contacts .container-contacts .section-contact{
            background: none;
            text-align: center;
            width: auto;
            
          }
    )