@media (max-width: 768px) {
  /* hedar */
  .header .container {
    max-width: 750px;
  }

  .header__main {
    justify-content: space-between;
  }

  .header__menu-icon-toggle {
    display: block;
    margin: 0 10px;
  }

  .header__phone {
    font-size: 18px;
    margin: 0 20px;
  }

  .header__logo {
    display: none;

  }

  .header__nav {
    display: none;
  }
 /*End hedar */

 /* baner */
  .baner__main {
    height: 600px;

  }


  .baner__title-img-desktop{
    display: none;
         }

  .baner__slider-items {
    width: 330px;
    height: 250px;
    right: auto;
    top: 100px;
    border-radius: 15px;
  }

  .baner__slider-items .baner__slider-item {
    border-radius: 15px;
  }


  .baner__slider-bg-thumbnail {
    width: 460px;
    height: 90px;
    top: 170px;
    right: -250px;
    border-radius: 15px;
  }

  .baner__slider-items-thumbnail {
    width: 500px;
    height: 125px;
    top: 61px;
    right: -246px;
  }

  .baner__slider-items-thumbnail .baner__slider-item-thumbnail {
    width: 75px;
    height: 110px;
    margin: 0px 5px;
    border-radius: 15px;
  }

  .baner__btns {
    top: -35px;
    right: 85px;
  }

  .baner__slider-item img {
    border-radius: 15px;
  }


  @keyframes show {
    from {
      width: 75px;
      height: 110px;
      top: 305.5px;
      right: 48px;
      border-radius: 15px;
      box-shadow: 20px 15px 20px 10px rgb(0, 0, 0, 0.3),
        20px 15px 20px 10px rgb(0, 0, 0, 0.2), 0px 0px 10px 5px rgb(0, 0, 0, 0.2);
    }

    to {
      width: 100%;
      height: 100%;
      top: 0px;
      right: 0px;
    }
  }

  @keyframes showPrev {
    from {
      width: 100%;
      height: 100%;
      top: 0px;
      right: 0px;
      box-shadow:
        20px 15px 20px 10px rgb(0, 0, 0, 0.3),
        20px 15px 20px 10px rgb(0, 0, 0, 0.2),
        0px 0px 10px 5px rgb(0, 0, 0, 0.2);
    }

    to {
      width: 75px;
      height: 110px;
      top: 305.5px;
      right: 48px;
      border-radius: 15px;
      box-shadow:
        7px 5px 7px 2px rgb(0, 0, 0, 0.3),
        7px 5px 7px 2px rgb(0, 0, 0, 0.3),
        0px 0px 3px 2px rgb(0, 0, 0, 0.3);
    }
  }

  @keyframes moveWidth {
    from {
      transform: translateX(85px);
    }

    to {
      transform: translateX(0px);
    }
  }

  @keyframes moveWidthBack {
    from {
      transform: translateX(-85px);
    }

    to {
      transform: translateX(0px);
    }
  }

/*End baner */


  /* products */

  .products__box {
    flex-direction: column;
    height: auto;
    width: 50%;
  }

  .products__box-body {
    margin: 20px 0;
    width: 270px;
    height: 370px;
  }

  .products__Text {
    width: 90%;
  }


/*End products */

  /* cullus */
  .callUs {

    height: 300px;
    width: 95%;
    margin: 0px auto 70px auto;
  }

  .callUs .container {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 100px;
    ;
    border-bottom-left-radius: 100px;
    ;
  }

  .callUs__title {
    margin-top: 30px;
    font-size: 18px;
  }

  .callUs__text {
    margin: 30px 20px 0 20px;
    text-align: center;
  }

/*End callUs */

/* footer */
  .footer__main {}

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

  .footer__right {
    width: 100%;
    margin: 0 auto;
  }

  .footer__center {
    margin: 0 auto;
    width: 100%;
    padding: 0 50px;
  }

  .footer h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .footer p {
    font-size: 14px;
  }
/*End footer */


}













@media (min-width: 768px) and (max-width: 1024px) {
 /* hedar */
  .header {
    padding: 0 40px;

  }

 /*End hedar */

  /* baner */

  .baner__title-img-desktop{
 display: none;
      }


  .baner__slider-items {
    width: 450px;
    height: 300px;
    right: 100px;
    top: 100px;
    border-radius: 15px;
  }

  .baner__slider-items .baner__slider-item {
    border-radius: 15px;
  }


  .baner__slider-bg-thumbnail {
    width: 690px;
    height: 135px;
    top: 150px;
    right: -300px;
    border-radius: 15px;
  }

  .baner__slider-items-thumbnail {
    width: 750px;
    height: 187.5px;
    top: -13px;
    right: -297.5px;
  }

  .baner__slider-items-thumbnail .baner__slider-item-thumbnail {
    width: 112.5px;
    height: 165px;
    border-radius: 15px;
  }

  .baner__btns {
    top: -135px;
    right: 200px;
  }

  .baner__slider-item img {
    border-radius: 15px;
  }


  @keyframes show {
    from {
      width: 112.5px;
      height: 165px;
      top: 330px;
      right: 33px;
      border-radius: 15px;
      box-shadow: 20px 15px 20px 10px rgb(0, 0, 0, 0.3),
        20px 15px 20px 10px rgb(0, 0, 0, 0.2), 0px 0px 10px 5px rgb(0, 0, 0, 0.2);
    }

    to {
      width: 100%;
      height: 100%;
      top: 0px;
      right: 0px;
    }
  }

  @keyframes showPrev {
    from {
      width: 100%;
      height: 100%;
      top: 0px;
      right: 0px;
      box-shadow:
        20px 15px 20px 10px rgb(0, 0, 0, 0.3),
        20px 15px 20px 10px rgb(0, 0, 0, 0.2),
        0px 0px 10px 5px rgb(0, 0, 0, 0.2);
    }

    to {
      width: 112.5px;
      height: 165px;
      top: 330px;
      right: 33px;
      border-radius: 15px;
      box-shadow:
        7px 5px 7px 2px rgb(0, 0, 0, 0.3),
        7px 5px 7px 2px rgb(0, 0, 0, 0.3),
        0px 0px 3px 2px rgb(0, 0, 0, 0.3);
    }
  }

  @keyframes moveWidth {
    from {
      transform: translateX(132.5px);
    }

    to {
      transform: translateX(0px);
    }
  }

  @keyframes moveWidthBack {
    from {
      transform: translateX(-132.5px);
    }

    to {
      transform: translateX(0px);
    }
  }
/*End baner */

   /* products */
  .products__box {
    flex-direction: column;
    height: auto;
    width: 50%;
  }

  .products__box-body {
    margin: 30px 0;
  }

/*End products */

  /* cullus */
  .callUs {
    margin: 0px auto 70px auto;
  }
/*End callUs */

/* footer */

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

  .footer__right {
    width: 80%;
    margin: 0px auto;
  }

  .footer__center {
    margin: 0 auto;
    width: 80%;
    padding: 0 50px;
  }

  .footer h3 {
    margin-bottom: 20px;
  }

/*End footer */

}



@media (max-width: 599px) {

  /* sample */
  .samples_boxs {
    border: solid 20px rgb(0, 201, 3);
    width: 350px;
    height: 800px;
    clip-path: path('M 0 0 H 350 Q 300 400 350 800 H 0 Q 50 400 0 0 Z');
  }

  .samples_box-body {
    width: 100px;
    height: 100px;
    border: solid 50px rgb(52, 252, 255);
  }
/*End sample */

}



@media (min-width: 600px) and (max-width: 1099px) {
 /* baner */
 .baner__title-img-desktop{
  margin: 0;
  width: 400px;
    }
/*End baner */

  /* sample */
  .samples_boxs {
    width: 580px;
    height: 1300px;
    clip-path: path('M 0 0 H 580 Q 515 650 580 1300 H 0 Q 65 650 0 0 Z');
  }

  .samples_box-body {
    width: 190px;
    height: 190px;
    border: solid 95px rgb(52, 252, 255);
  }
  /*End sample */
}

@media (min-width: 1100px) and (max-width: 1300px) {
 /* baner */
  .baner__title-img-desktop{
    margin: 0;
      }
/*End baner */

  /* sample */
  .samples_boxs {
    width: 900px;
    height: 500px;
    clip-path: path('M 0 0 H 900 Q 835 250 900 500 H 0 Q 65 250 0 0 Z');
  }

  .samples_box-body {
    width: 140px;
    height: 140px;
    border: solid 70px rgb(52, 252, 255);
  }
  /*End sample */
}
@media (max-width: 1300px) {

}