@font-face {
   font-family: 'Merriweather';
   src: url("assets/fonts/Merriweather-Bold.ttf");
   font-weight: 700;
  }
  
  @font-face {
  font-family: 'Inter';
   src: url("assets/fonts/Inter-Bold.ttf");
   font-weight: 700;
  }
  
  @font-face {
  font-family: 'Inter';
   src: url("assets/fonts/Inter-Regular.ttf");
   font-weight: 400;
  }
  
  * {
    box-sizing: border-box;
    margin: 0 auto;
  }


:root {
  --color-gold: #bdae82;
  --color-black: #000;
  --color-white: #ffff;
  --font-h1-AlexaRise: 700 60px 'Merriweather';
  --font-h2-Otherheadlines: 700 40px 'Merriweather', serif;
  --font-h3-Priceheadlines: 700 28px 'Merriweather', serif;
  --font-h4-Prices: 700 24px 'Merriweather', serif;
  --font-buttons: 400 20px 'Inter', sans-serif;
  --font-Skillsheadlines: 700 20px 'Inter', sans-serif;
  --font-text-hero-nav-footer: 400 20px 'Inter', sans-serif;
  --font-text-skills-price: 400 18px 'Inter', sans-serif;
}

.section-title {
  font: var(--font-h2-Otherheadlines);
  color: var(--color-gold);
}

section.light-theme {
  background-color: var(--color-white);
  color: var(--color-black);
}

.section-skills.light-theme {
  background-color: var(--color-white);
  color: var(--color-black);
}

header {
  max-width: 1440px;
  height: 90px;
  font: var(--font-text-hero-nav-footer);
}


.container {
    width: 1440px;
    height: 5532px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
}

  .header-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 90px;
    background: url('./assets/img/header-bg@2x.jpg');
    background-repeat: no-repeat;
    background-position: center 0;
  }  


  body {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: var(--color-black);
  }

  body.light-theme {
    background-color: var(--color-white);
  }


  .header-container-nav-container {
    display: flex; 
    align-items: center; 
    width: 500px; /*при английском языке */
    width: 575px; /* при русском языке */
    height: 90px;
    flex-direction: row; 
    font: var(--font-text-hero-nav-footer);
    line-height: 50px;
    box-shadow: 0px 4px 4px 0px #00000040;
    overflow: hidden;
       
   }

  .nav-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    list-style: none;
    margin-left: auto;
  }

  .nav-link {
    display: flex;
    justify-content: center;
    padding: 0 15px;
    line-height: 50px;
    text-decoration: none;
    color: var(--color-white);
    transition: 0.3s;
  }
  
  .nav-link:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
    contrast(87%); 
    transition: 0.3s;
   }

   /* Burger menu begin */

   .burger-menu {
    width: 50px;
    height: 50px;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 2;
    margin-top: 30px;
    display: none;
    margin-right: 64px;
    margin-left: 20px;
    
  }

       
  .burger-menu:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
    contrast(87%); 
    transition: 0.3s;
    cursor: pointer;
  }

  .burger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    position: relative;
    z-index: 2;
    color: var(--color-white);
    transition: all 0.3s ease-in-out;
  }

      
  .burger-menu.open .line1:first-child {
    opacity: 1;
    transform: translate(9px, 9px) rotate(45deg);
    top: 25%;
  }

  .burger-menu.open .line2:nth-child(2) {
    opacity: 0;
  }

  .burger-menu.open .line3:nth-child(3) {
    opacity: 1;
    transform: translate(7px, -9px) rotate(-45deg);
    top: 50%;
    } 
    
      
  .line1:first-child {
    top: 11px;
   
    } 

  .line2:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
   
  } 

  .line3:nth-child(3) {
    bottom: 11px;
  }
  
  
   /* Burger menu end */
  
  html {
    scroll-behavior: smooth; 
  }

  .header-container-logo-container {
    display: flex;
    align-items: center;
    width: 50px;
    height: 50px;
    margin-top: 20px;
    margin-left: 20px;
    transition: 0.3s;
    cursor: pointer;
   /* margin-right: 744px; при английском языке */
    margin-right: 650px; /*при русском языке*/
  }
 
    .logo {
    width: 50px;
    height: 50px;
    fill: #ffff;
  }
  
  .logo:hover {
    fill: #BDAE82;
    transition: 0.3s;
  }

  .switch-language-container {
    display: flex;
    justify-content: space-between;
    text-align: center;
    height: 50px;
    margin-top: 20px;
    margin-right: 0px;
    width: 70px;
    transition: .3s;
    cursor: pointer;
  }

  .lang-english {
    width: 25px;
    color: var(--color-white); 
    font: var(--font-Skillsheadlines);
    line-height: 50px;
  }


  .lang-english:hover {
    color: var(--color-gold);
    transition: 0.3s;
  }

  .lang-english-active {
    color: var(--color-gold);
    transition: 0.3s;
  }

  .slash {
    width: 15px;
    color: var(--color-white);
    font: var(--font-Skillsheadlines);
    line-height: 50px;
    padding-left: 6px;
  }

  .lang-russian {
    width: 25px;
    color: var(--color-white);
    font: var(--font-Skillsheadlines);
    line-height: 50px;
    padding-left: 6px;
  }


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

  .lang-russian-active {
    transition: 0.3s;
    color: var(--color-gold);
   }

   /*Light theme */
/*Skills, portfolio, video, price */

  /* .light-theme {
    background-color: var(--color-white);
    color: var(--color-black);
  } */

  /* .light-theme:hover {
    color: var(--color-black);
  }  */

  .light-theme.portfolio-btn:hover {
    color: var(--color-black);
    transition: 0.3s;
}

h2.light-theme {
  color: var(--color-black);
}

.title-wrapper.light-theme {
  background-image: linear-gradient(to top, #ffff 39px, #000 39px, #000 41px, #ffff 41px);
}

.section-title.light-theme {
  background-color: #ffff;
}
   .switch-theme {
     background-color: transparent;
     width: 45px;
     height: 45px;
     margin-top: 22px;
     /* margin-right: 0px; */
     border: transparent;
     transition: .3s;
     cursor: pointer;
   }

   .switch-theme.sun {
    width: 45px;
    height: 45px;
  }
  
  .switch-theme:hover {
    fill: #BDAE82;
    transition: 0.3s;
    cursor: pointer;
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
    contrast(87%);
  }

  .switch-theme.light-theme {
   /* display: none; */
   width: 45px;
   height: 45px;
   /* background-image: url('./assets/svg/Moon@2x-1.svg'); */
  }

   /* Hero */

  .section-hero {
    width: 1440px;
    height: 820px;
    background-image: url('./assets/img/header-bg@2x.jpg');
    background-position: center -90px;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
  }

  .hero-container {
    width: 500px;
    height: 330px;
    margin-right: 860px;
    margin-left: 80px;
    margin-top: 160px;
  }

  .hero-title {
    width: 500px;
    height: 120px;
    font: var(--font-h1-AlexaRise);
    line-height: 120px;
    letter-spacing: 0em;
    font-style: normal;
    color: var(--color-white);
  }

  h1 {
    font: var(--font-h1-AlexaRise);
    line-height: 120px;
    letter-spacing: 0em;
    font-style: normal;
    color: var(--color-white);
  }

  .hero-text {
   width: 470px;
   height: 120px;
   font: var(--font-text-hero-nav-footer);
   color: var(--color-white);
   padding-top: 8px;
   line-height: 40px;
   text-align: left;
   letter-spacing: 0em;
   margin: 0;
 }

 .button-gold-hero {
  width: 220px;
  height: 55px;
  margin-top: 33px;
  border: 1px solid #000000;
  background-color: var(--color-gold);
  cursor: pointer;
  font: var(--font-buttons);
  transition: 0.3s;
  
 }

 .button-gold-hero:hover, .button-gold-hero:focus {
  color: var(--color-white);
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
	animation: pulse 1s;
}

@keyframes pulse{
	0%{box-shadow: 0 0 0 0 var(--color-gold)}
}

  .portfolio-btn {
  width: 220px;
  height: 55px;
  margin-top: 25px;
  border: 1px solid #000000;
  border-color: var(--color-gold);
  background-color: var(--color-black);
  color: var(--color-gold);
  cursor: pointer;
  font: var(--font-buttons);
  transition: 0.3s;
}

.portfolio-btn.light-theme {
 
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-white);
  color: var(--color-black);
 }

.portfolio-btn.summer.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-white);
  color: var(--color-black);
}

.portfolio-btn.winter.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-white);
  color: var(--color-black);
}

.portfolio-btn.spring.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-white);
  color: var(--color-black);
}

.portfolio-btn.autumn.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-white);
  color: var(--color-black);
}

.portfolio-btn-active {
  width: 220px;
  height: 55px;
  margin-top: 25px;
  border: 1px solid #000000;
  border-color: var(--color-gold);
  cursor: pointer;
  font: var(--font-buttons);
  transition: 0.3s;
  color: var(--color-black);
  background-color: var(--color-gold);
}

.portfolio-btn-active.light-theme {
 
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-white);
  cursor: pointer;
  font: var(--font-buttons);
  transition: 0.3s;
}

.portfolio-btn.winter-active {
  color: var(--color-black);
  background-color: var(--color-gold);
  border: var(--color-gold);
}

.portfolio-btn.spring-active {
  color: var(--color-black);
  background-color: var(--color-gold);
  border: var(--color-gold);
}

.portfolio-btn.autumn-active {
  color: var(--color-black);
  background-color: var(--color-gold);
  border: var(--color-gold);
}

.portfolio-btn.summer-active {
  color: var(--color-black);
  background-color: var(--color-gold);
  border: var(--color-gold);
}

.portfolio-btn.winter-active.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-white);
}

.portfolio-btn.spring-active.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-white);
}

.portfolio-btn.autumn-active.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-white);
}

.portfolio-btn.summer-active.light-theme {
  border: 1px solid var(--color-gold);
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-white);
}

.portfolio-btn:hover, portfolio-btn:focus {
  color: var(--color-white);
  transition: 0.3s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
	animation: pulse 1s;
}

.portfolio-btn-active:hover, .portfolio-btn-active:focus {
  color: var(--color-white);
  transition: 0.3s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
	animation: pulse 1s;
}

.portfolio-buttons-active {
  color: var(--color-black);
  background-color: var(--color-gold);
  transition: 0.3s;
  border: 1px solid #000000;
}


/* Skills */
 
 .skills-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1440px;
  height: 482px;
}

.title-wrapper {
  width: 49%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  line-height: 80px;
  line-height: 159%;
  vertical-align: top;
  align-self: center;
  background-image: linear-gradient(to top, #000 39px, #bdae82 39px, #bdae82 41px, #000 41px);
  margin-top: auto;
}

 .section-title {
   margin: 0;
   height: 80px;
   text-align: center;
   font: var(--font-h2-Otherheadlines);
   color: var(--color-gold);
   background-color: #000;
   padding-top: 20px;
 }

 h2 {
  font: var(--font-h2-Otherheadlines);
  color: var(--color-gold);
 }
 
 .skills-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 240px;
  color: var(--color-white);
  margin-top: 68px;
  margin-bottom: 1px;
}

.skills-items.light-theme {
  color: var(--color-black);
}

.skill-item {
  background-position: center top;
  background-repeat: no-repeat;
  align-items: center;
  width: 320px;
  height: 240px;
  padding-top: 60px;
}

.skill-item:nth-child(1) {
  background-image: url('./assets/svg/camera1@2x.svg');
  text-align: center;
  background-size: 62px 50px;
}

.skill-item:nth-child(2) {
  background-image: url('./assets/svg/video1@2x.svg');
  text-align: center;
  background-size: 62px 50px;
}

.skill-item:nth-child(3) {
  background-image: url('./assets/svg/image1@2x.svg');
  text-align: center;
  background-size: 62px 50px;
}

.skill-item:nth-child(4) {
  background-image: url('./assets/svg/mic1@2x.svg');
  text-align: center;
  background-size: 62px 50px;
}

.skills-subtitlep {
  font: var(--font-Skillsheadlines);
  width: 280px;
  height: 40px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 37px;
  text-align: center;
  line-height: 40px;
}

.skills-textp {
  text-align: center;
  width: 280px;
  height: 72px;
  font: var(--font-text-skills-price);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  line-height: 36px;
}

/* Portfolio */

.portfolio-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 1440px;
height: 1500px;
}

.portfolio-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 40px;
  transition: 0.3s;
}

.portfolio-images {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: 20px;
  gap: 25px;
  padding-top: 62px;
  width: 1400px;
}

/* Video */

.video-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 1440px;
  height: 945px;
  }

.video-player {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('./assets/img/video-player@2x.jpg');
  background-repeat: no-repeat;
  background-position: center;
  width: 1400px;
  height: 705px;
  margin-top: 66px;
  margin-left: 20px;
  margin-right: 20px;
}

.video-player-button {
  position: absolute;
  background-image: url('./assets/svg/Play_hover.svg');
  background-size: contain;
  background-repeat: no-repeat;  
  transition: 0.3s;
  width: 129.86px;
  height: 130px;
  color: var(--color-white);
  background-color: transparent;
  cursor: pointer;
  border: 0;
}

.video-player-button:hover {
  filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
  contrast(87%);
  transition: 0.3s;
}

/* Price */

.price-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1440px;
  height: 845px;
  
}

.price-items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 505px;
  color: var(--color-white);
  margin-top: 66px;
  margin-bottom: 100px;
}

.price-items.light-theme {
color: var(--color-black);
}

.price-item {
  background-position: center;
  background-repeat: no-repeat;
  align-items: center;
  width: 450px;
  height: 505px;
  padding-top: 60px;
  border: 1px solid var(--color-gold);
  gap: 25px;
}

.price-subtitle {
  text-align: center;
  font: var(--font-h3-Priceheadlines);
}

.prices {
  text-align: center;
  font: var(--font-h4-Prices);
  margin-top: 30px;
  color: var(--color-gold);
}

.price-descripton {
  text-align: center;
  align-items: center;
  font: var(--font-text-skills-price);
  margin-top: 30px;
  line-height: 36px;
}

.button-gold-price {
  width: 220px;
  height: 55px;
  margin-top: 40px;
  border: 0px solid #000000;
  background-color: var(--color-gold);
  cursor: pointer;
  font: var(--font-buttons);
  transition: 0.3s;
  padding-right: 10px; 
}

.button-gold-price:hover, .button-gold-price:focus {
  color: var(--color-white);
  transition: 0.3s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
	animation: pulse 1s;
}

.item-description {
  display: block;
}

/* Contacts */

.contacts-container {
  width: 1440px;
  height: 697px;
  background-image: url('./assets/img/contacts@2x.jpg');
  background-size: auto 700px;
  background-position: center center;
}

.contacts-form {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 450px;
  margin-left: auto;
  margin-right: 20px;
  padding-top: 57px;
  
}

.section-title-contacts {
  width: 450px;
  height: 80px;
  font: var(--font-h2-Otherheadlines);
  line-height: 80px;
  color: var(--color-gold);
  padding-top: 3px;
}

.contacts-email-tel1 {
width: 450px;
height: 50px;
background-color: transparent;
border: 2px solid var(--color-gold);
font: var(--font-text-hero-nav-footer);
padding-left: 20px;
padding-top: 5px;
margin-top: 41px;
background-color: rgba(0, 0, 0, 0.5);
}

.contacts-email-tel2 {
  width: 450px;
  height: 50px;
  background-color: transparent;
  border: 2px solid var(--color-gold);
  font: var(--font-text-hero-nav-footer);
  padding-left: 20px;
  padding-top: 5px;
  margin-top: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  }

.contacts-textarea {
  width: 450px;
  height: 100px;
  resize: none;
  background-color: transparent;
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  font: var(--font-text-hero-nav-footer);
  padding-left: 20px;
  margin-top: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}


::placeholder {
  font: var(--font-text-hero-nav-footer);
  color: var(--color-gold);
  font-size: 20px;
  line-height: 40px;
}

.button-gold-contacts {
  width: 220px;
  height: 55px;
  margin-top: 25px;
  border: 1px solid #000000;
  background-color: var(--color-gold);
  cursor: pointer;
  font: var(--font-buttons);
  transition: 0.3s;
  margin-right: 230px;
}

.button-gold-contacts:hover, .button-gold-contacts:focus {
  color: var(--color-white);
  transition: 0.3s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
	animation: pulse 1s;
}

/* Footer */

  .footer-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 1440px;
    height: 150px;
    background-color:black;
    padding-bottom: 22px;
  }

  .footer-data {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 50px;
    margin-left: 20px;
    color: var(--color-white);
    font: 400 20px 'Inter';
  }

  .copyright {
    width: 19px;
    height: 50px;
    margin-right: 20px;
  }

  .year {
    width: 49px;
    height: 50px;
    margin-right: 20px;
  }

  .github {
    width: 61px;
    height: 50px;
  }

  .RSS {
    width: 211px;
    height: 50px;
    margin-left: 240px;
    margin-top: 55px;
    line-height: 50px;
    font: var(--font-text-hero-nav-footer);
    color: var(--color-white);
  }

  .github-link {
    text-decoration: none;
    color: var(--color-white);
  }

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

  .RSS-link {
    text-decoration: none;
    color: var(--color-white);
  }
  
  .RSS-link:hover {
    filter: invert(26%) sepia(15%) saturate(638%) hue-rotate(7deg) brightness(92%)
    contrast(87%); 
    transition: 0.3s;
   }

  .social-list-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 180px;
    height: 63px;
    margin-right: 63px;
  }

  .social-list {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    list-style-type: none;
    margin-top: 50px;
    margin-right: 20px;
    align-content: center;
    gap: 20px;
    transition: 0.3s;
  }

  .icon {
    width: 30px;
    height: 30px;
    fill: var(--color-white);
    
  }
  
  .icon:hover {
    fill: var(--color-gold);
    transition: 0.3s;
  }

    /* Media Queries */

  @media screen and (max-width: 768px) {
   
    :root {
      --font-h1-AlexaRise: 400 32px 'Merriweather';
      --font-h2-Otherheadlines: 700 32px 'Merriweather', serif;
      --font-nav-burger-menu: 400 34.82px 'Inter', sans-serif;
    }

    header {
      max-width: 768px;
    }

    .container {
      width: 768px;
    }

    body {
      width: 768px;
    }

  .burger-menu {
    display: block;
  }

    section {
    max-width: 768px;
  }
  .header-container-nav-container.light-theme {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  .nav-link.light-theme {
    color: var(--color-black);
  }

      .header-container-nav-container {
      position: fixed;
      width: 620px;      
      height: 100%;
      background-color: var(--color-black);
      right: 0px;
      z-index: 1;
      font: var(--font-nav-burger-menu);
      line-height: 72.55px;
      top: 0;
      transition: 0.5s all linear;
      transform: translateX(100%);
      }

  
    
    .header-container-nav-container-open {
      transform: translateX(0);
      width: 620px;
   }
 
    .nav-list {
      flex-direction: column;
      height: 426.75px;
      margin: 134px auto auto 127px;
      
    }

    .nav-link {
      padding: 16px 0;
    }
       
    .header-container-logo-container {
      margin-left: 60px;
      margin-right: 0px;
      align-items: flex-start;
    }
         
    .header-container {
      overflow-x: hidden;
      height: 90px;
      background-repeat: no-repeat;
      background-position: center 0;
      background: url(./assets/img/header-bg-small@2x.jpg);
    }

    .lang-english {
      margin-left: -10px;
    }

    .section-hero {
      background-position: 0px -90px;
      background-image: url('./assets/img/header-bg-small@2x.jpg');
      height: 590px;
      margin-bottom: -10px; /* for other title */
    }
     
    .hero-container {
      margin-top: 0px;
      margin-left: 60px;
    }

    .hero-text {
      line-height: 24.2px;
      margin-top: 10px;
      width: 390px;
    }

    .hero-title {
      height: 64px;
      line-height: 0px;
    }

    h1 {
      line-height: 64px;
      margin-top: 78px;
    }

    .button-gold-hero {
      margin-top: 22px;
      width: 219px;
      height: 54px;
    }

    .skills-container {
      height: 729px;
      width: calc(100% - 112px);
      justify-content: flex-start;
    }
    
    .title-wrapper {
      margin-top: 0px;
      margin-left: 29%;
      width: calc(50% - 53px);
    }

     .skills-items {
      width: 102%;
      height: 224px;
      margin-top: 45px;
      gap: 20px;
    }

    .skills-items.light-theme {
      color: var(--color-black);
    }

    .skills-textp {
      line-height: 21.78px;
      height: 44px;
      margin-right: 0px;
    }
     
    .skill-item {
      padding-top: 42px;
    }

    
    /* Portfolio */ 

  .portfolio-container {
    height: 3870px;
    width: 768px;
    margin-top: 0px;
    justify-content: flex-start;
    }

    .portfolio-buttons {
      margin-left: 159px;
      width: 445px;
      margin-top: 48px;
    }

    .portfolio-images {
      width: calc(100% - 40px);
    }

    .portfolio-btn {
      margin-top: 0px;
    }

    .button-gold {
      margin-top: 0px;
    }

    .video-player {
     background-image: url('./assets/img/video-player-small@2x.jpg');
     width: 768px;
     margin-top: -40px;
    }

    .video-container {
      width: 100%;
      height: 628px;
      margin-bottom: 39px;
    }

    .video-player-button {
      width: 75px;
      height: 75px;
    }

    .price-container {
      height: 1905px;
      width: 100%;
    }

    .price-items {
      margin-bottom: 240px;
      width: 420px;
      gap: 50px;
      margin-top: 50px;
      height: 100%;
    }

    .price-items.light-theme {
      color: var(--color-black);
    }

    .price-item {
      padding-top: 55px;
    }

    .price-descripton {
      margin-top: 25px;
    }

    .prices {
      margin-top: 40px;
    }

    .price-subtitle {
      margin-top: 0px;
    }


    .contacts-container {
      width: 768px;
      height: 600px;
      background-image: url(./assets/img/contacts-small@2x.jpg);
      background-size: auto 600px;
      margin-top: -120px;
    }

    .contacts-form {
      margin-right: 0px;
      width: 100%;
      padding-top: 45px;
    }

    .section-title-contacts {
      text-align: center;
      padding-top: 6px;
    }

    .contacts-textarea {
      margin-top: 20px;
    } 

    .contacts-email-tel1 {
      margin-top: 40px;
    }

    .button-gold-contacts {
      margin-right: 274px;
      margin-top: 30px;
    }

    .footer-container {
      width: 768px;
      flex-direction: column;
      padding-bottom: 0px;
    }

    .footer-data {
      margin-top: 30px;
      margin-left: 298px;
    }

    .RSS {
      margin-top: -13px;
      margin-left: 0px;
      margin-right: 0px;
    }

    .social-list-footer {
      height: 0px;
      margin-right: 335px;
      margin-top: 30px;
    }
  }

/* End media 768px */

@media screen and (max-width: 620px) {

  .header-container-nav-container-open {
     width: 100%;
  }
  .header-container-nav-container-open.light-theme {
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-black);
 }

 .skills-items.light-theme {
  color: var(--color-black);
}

.price-items.light-theme {
  color: var(--color-black);
}
}