body.dark-mode {
  background-color: #2a313b;
  color: #ffffff;
  a{
    color: white;
    transition: all .3s;
  }
  /* header */
  header{
      border-bottom: 1px solid #ffffff05;
  }

  /* logos */
  #logo-dark {
    display: inline-block; 
  }
  
  #logo-light {
    display: none; 
  }

  /* dark-mode btn */
  .fa-solid.fa-sun{
    display: none;
  }

  .fa-solid.fa-moon,
  .fa-solid.fa-phone,
  .fa-brands.fa-whatsapp,
  .fa-brands.fa-instagram,
  .fa-solid.fa-envelope{
    display: block;
    color: #f1f1f1;
    font-size: 20px;
    box-shadow: none;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    transition: all .3s;
  }
  
  .social .fa-solid.fa-moon:hover,
  .social  .fa-solid.fa-phone:hover,
  .social  .fa-brands.fa-whatsapp:hover,
  .social  .fa-brands.fa-instagram:hover {
      box-shadow:
        1px 1px #f24941,
        2px 2px #f24941,
        3px 3px #f24941,
        4px 4px #f24941,
        5px 5px #f24941,
        0px 0px 5px 2px #ffffff1a;
  -webkit-transform: translateX(-7px);
  transform: translateX(-7px);
  transition: all .3s;
}

.hidden-hover {
  background-color: #282f39;
  color: white;
  transition: all 0.3s ease;
}


/* main */
/* logos slider */
.logos {
  background: #282f39;
  box-shadow: 0 0 10px 1px #ffffff0f;
  color: white;
  transition: all .3s;
}

.logos:after{
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #282f39);
  transition: all .3s;
}

.logos::before{
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #282f39);
  transition: all .3s;
}

.logos-slide img {
  border-radius: 5px;
  background: #394351;
}

/* our service */
.serv__cat{
  box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.15);
  background-color: #282f39;
}

.serv__btn{
  box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.15);
}

.serv__btn:hover{
  background-color: #f2415c;
  transition: background-color .3s;
}

  /* slider */
  .desc a {
  color: #FF5722;
}

.slider-bg {
  background-color: #282f39;
  transition: all .3s;
}

/*service - general part*/
.animated-text
  span::after{
  background-color: #2a313b;
}

/* partfolio */
.partfolio__top p{
  color: #676767;
  transition: all .3s;
}
  
.card{
  background-color: #282f39;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  transition: all .3s;
}
.card:hover{
  box-shadow: 0px 20px 30px rgb(255 0 0 / 10%);
  transition: all .3s;
}
  
  /*services*/
  .block__title:before, .block__title:after {
      content: '';
      width: 10px;
      height: 1px;
      background-color: #ffffff;
      position: absolute;
      top: 8px;
      transition: all 0.3s ease 0s;
  }
  
  .animated-text span::after {
      background-color: #2a313b !important;
  }
  
  
  /* footer */
  footer{
    background-color: #282f39 !important;
    box-shadow: 0px -1px 5px rgb(255 255 255 / 10%) inset;
    margin-top: 50px;
    transition: all .3s;
  }
  
  .copyright .logo_black{
      display: none !important;
  }
  
  .copyright .logo_white{
      display: block !important;
  }
}

@media screen and (max-width: 992px){
  body.dark-mode {
      /* mob-menu */
      .mob__btn .fa-solid.fa-moon:hover{
          box-shadow: none;
          transform: none;
      }

      .mob__menu{
          background-color: #ffffff30;
          transition: all .3s;
      }

      button.mob__btn {
          color: white;
          transition: all .3s;
      }
      
      /* toggle menu */
      .mobile-menu {
          background-color: #ffffff30;
          transition: all .3s;
      }

      /* mob-menu-contacts */
      .contact-btn{
          background-color: #ffffff30;
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          transition: all .3s;
      }

      .contact-btn .fa-solid:hover,
      .contact-btn .fa-brands:hover{
          box-shadow: none;
          transform: none;
          -webkit-transform: none;
      }

  }
}

@media screen and (max-width: 768px){
  body.dark-mode{
      /*welcome block*/
          .welcome-block:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgb(42 49 59 / 70%);
          z-index: 0;
          transition: all .3s;
      }
  }
}

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