body{
    color: var(--first-color);
    background: white;
    transition: .5s ease;
    overflow-x: hidden;
    
    
  }
  .nav-items a{
    color: white;
  }
  
  /*=======Light/Dark theme button=======*/
  .theme-btn{
    z-index: 999999;
    position: fixed;
    right: 0;
    top: 100px;
    background: var(--transparent-color-01);
    backdrop-filter: blur(20px);
    width: 50px;
    height: 50px;
    font-size: 1.2em;
    border-radius: 5px 0 0 5px;
    box-shadow: var(--box-shadow);
    cursor: pointer;
  }
  
  .theme-btn .fa-sun, .theme-btn.sun .fa-moon{
    display: none;
  }
  
  .theme-btn.sun .fa-sun{
    display: block;
  }
  
  /*=======Scroll bar=======*/
  ::-webkit-scrollbar {
      display: none;
      }
  
  ::-webkit-scrollbar{
    width: 10px;
    background: var(--scroll-bar-color);
  }
  
  ::-webkit-scrollbar-thumb{
    background: var(--scroll-thumb-color);
    border-radius: 2em;
  }
  
  ::-webkit-scrollbar-thumb:hover{
    background: var(--scroll-thumb-hover-color);
  }
  
  
  /*=======Scroll bar=======*/
  
  .logo{
      color: white;
      font-size: 35px;
      letter-spacing: 1px;
      cursor: pointer;
      
  }
  span{
      color: darkslategray;
  }
  
  
  /*=======Home section=======*/
  .hometizan{
    position: relative;
    max-width: 100%;
    min-height: 40vh;
    flex-direction: column;
  
  }
  
  .home .home-container{
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    position: relative;
    top: 5rem;
    bottom: 0px;
   
  }
  
  .icondescription{
    width: 105%;
    background-color: rgb(0, 0, 0);
    height: 10vh;
  
  
  }
  
  
  .experience-card1{
   
    border-bottom: 3px solid var(--second-color);
    padding: 35px;
    transition: .3s ease;
    width: 35rem;
  }
  
  
  .experience-card2{
  
    border-bottom: 3px solid var(--second-color);
    padding: 35px;
    transition: .3s ease;
    position: relative;
    left: 5rem;
    width: 40rem;
  }
  
  
  .letterspacing{
    margin: 8px 7rem;
    position: relative;
    top: 1rem;
    color: azure;
    
  }
  
  /*=======level 1=======*/
  .upper{
    padding-left: 30%;
   
  }
  
  .skills-info{
  
  padding-left: 2rem;
  padding-top: 5rem;
  }
  
  
  
  
  /*=======level 2=======*/
  .upper2{
    padding-left: 30%;
   
  }
  
  .skills-info2{
  
  padding-left: 5rem;
  padding-top: 5rem;
  }
  
  /*=======level 3=======*/
  .upper3{
    padding-left: 30%;
   
  }
  
  .skills-info3{
  
  padding-left: 35rem;
  padding-top: 5rem;
  }
  
  /*=======level 4=======*/
  
  
  .skills-info4{
  
  padding-top: 5rem; 
  position: relative;
  right: 6rem;
  }
  
  /*=======level 5=======*/
  
  .upper5{
    padding-left: 5%;
    width: 120%;
    display: flex;
    gap: 2rem;
  }
  
  .skills-info5{
  
    padding-top: 5rem; 
    padding-left: 5%;
    width: 115%;
  
  }
  
  .upper5 p{
   
    width: 15rem;
    padding-top: 3rem;
  
  }
  
  /*=======level 6=======*/
  
  .upper6{
    padding-left: 5%;
    display: flex;
    gap: 4rem;
  }
  
  .skills-info6{
   position: relative;
   right: 1.5rem;
  
   
  
  }
  
  .upper6 p{
  
    width: 15rem;
    padding-top: 3rem;
  
  }
  
  .upper6 img{
    
    width: 60%;
    height: 60%;
   
  
  }
  
  
  /*=======level 7=======*/
  
  .upper7 img{
    
    width: 90%;
  
  }
  
  /*=======level 8=======*/
  
  
  .upper8{
     padding-left: 4.5rem;
    width: 100%;
    display: flex;
    gap: 2rem;
  }
  
  .skills-info8{
  
    padding-top: 5rem; 
    padding-left: 5%;
    width: 115%;
  
  }
  
  .upper8 p{
   
    width: 15rem;
    padding-top: 3rem;
  
  }
  
  .upper8 img{
    
    width: 25%;
    height: 50%;
  
  }
  
  .upper8_1 img{
    
    width: 40%;
    height: 50%;
  
  }
  
  /*=======level 9=======*/
  
  
  .skills-info9{
  
  position: relative;
  
  width: 100%;
  background-color: rgb(228, 228, 228);
  }
  
  .upper9{
     padding-left: 4.5rem;
     padding-top: 2rem;
      width: 100%;
    
  }
  
  
  /*=======level 10=======*/
  
  
  .skills-info10{
  
   
  position: relative;
  left: 3rem;
  width: 100%;
  background-color: rgb(228, 228, 228);
  }
  
  
  /*=======level 11=======*/
  
  .upper11{
    padding-left: 8%;
    display: flex;
    gap: 4rem;
  }
  
  .skills-info11{
   position: relative;
   right: 1.5rem;
   background-color: white;
  
   
  
  }
  
  .upper11 p{
  
    width: 15rem;
    padding-top: 3rem;
  
  }
  
  .upper11 img{
    
    width: 60%;
    height: 60%;
   
  
  }
  
  
  /*=======level 12=======*/
  
  .upper12{
    padding-left: 12%;
    display: flex;
    gap: 4rem;
  }
  
  .skills-info12{
   position: relative;
   right: 1.5rem;
   background-color: white;
  
  }
  
  
  
    /*=======level 13=======*/
  
  
  
  .upper13{
    padding-left: 10%;
    display: flex;
    gap: 4rem;
    
  }
  
  .skills-info13{
  
   background-color: rgb(228, 228, 228);
   width: 105%;
   
  
  }
  
  .upper13 p{
  
    width: 18rem;
    padding-top: 3rem;
  
  }
  
  .upper13 img{
    
    width: 60%;
    height: 60%;
    position: relative;
    left: 2rem;
    
   
  
  }
  
  video{
    padding-left: 13%;
    width: 60%;
   
  }
  
  p{
    text-align: justify;
  }


  /*=======Media query max-width 1180px=======*/
  @media screen and (max-width: 1200px){
    /*=======Header navigation menu=======*/

    body{
 
      zoom: 35%;
 
    }
  
    .navigation.active{
      visibility: visible;
      opacity: 1;
    }
    
    .nav-items{
      position: relative;
      background: #191919;
      width: 600px;
      max-width: 600px;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin: 20px;
      padding: 40px;
      border-radius: 10px;
      box-shadow: var(--box-shadow);
      transform: translateY(-50px);
      transition: .3s ease;
    }
  
    .navigation.active .nav-items{
      transform: translateY(0);
    }
  
    .nav-items a{
      margin: 15px 50px;
    }
  
    .nav-close-btn{
      position: absolute;
      background: url(../images/close-btn.png)no-repeat;
      filter: var(--color-filter);
      background-size: 12px;
      background-position: center;
      width: 40px;
      height: 40px;
      top: 0;
      right: 0;
      margin: 10px;
      cursor: pointer;
    }
  
    .nav-menu-btn{
      background: url(../images/menu-btn.png)no-repeat;
      filter: var(--color-filter);
      background-size: 30px;
      background-position: center;
      width: 40px;
      height: 40px;
      cursor: pointer;
      display: block;
    }
  
    .nav-items a:hover{
   
      display: none;
    }
    

  
  
  /*=======Media query max-width 1070px=======*/
  @media screen and (max-width: 429px){
    /*=======Header navigation menu=======*/
 body{
    zoom: 20%;
 }
}}