.trans, .newbrands, .each-brand, .can-box .can-center, .ib, .swiper-slide.swiper-slide-active .each-brands, .swiper-slide.swiper-slide-active .each-brands .ib, .swiper-slide.swiper-slide-active .can-center, .brand-nav, .mySwipernew .swiper-slide.swiper-slide-visible.swiper-slide-thumb-active .brand-nav {
  transition: 0.8s all; }

@font-face {
  font-family: "NASKurd Bold";
  src: url("../../fonts/NASKurdBold.ttf");
  font-weight: normal;
  font-style: normal; }

@font-face {
    font-family: "NasKurd-FontRegular";
    src: url("../../fonts/NasKurd-FontRegular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NASKurdMedium2";
    src: url("../../fonts/NASKurdMedium2.ttf");
    font-weight: normal;
    font-style: normal;
}

.newbrands {
  width: 100%;
  height: 100vh;
  font-family: "NASKurd Bold"; }

.each-brand {
  width: 100%;
  height: 100vh;
  position: relative; }

.section-bg-img {
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; }
  @media (max-width: 1024px) {
    .section-bg-img {
        height: 100vh;
    } }

.section-bg-radical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5084) 0%, rgba(0, 66, 149, 0.78) 71.88%); }

.background-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: normal;
    font-weight: 500;
    font-size: 200px;
    line-height: 0;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    /*color: rgba(255,255,255,0.8);*/
    color: white;
    width: 100%;
}
  @media (max-width: 1300px) {
    .background-text {
      top: 46%; } }
  @media (max-width: 1020px) {
    .background-text {
      top: 19%;
      font-size: 90px;
      opacity: 0.4;
      font-weight: bold; } }

.can-box {
  position: absolute;
  top: 25%;
  left: 40%;
  transform: translate(-50%, -50%); }
  @media (max-width: 1300px) {
    .can-box {
      top: 14%;
      left: 40%;
      scale: 0.8; } }
  @media (max-width: 1020px) {
    .can-box {
      top: 20%;
      left: 20%; } }
  @media (max-width: 500px) {
    .can-box {
      top: 20%;
      left: 2%; } }
  .can-box .can-center {
    width: 50px;
    rotate: -180deg; }
  .can-box .sec-item {
    position: absolute;
    top: 3%;
    left: 25%;
    transform: translate(-50%, -50%);
    z-index: -1; }
  .can-box .sec2-item {
    position: absolute;
    top: 60%;
    left: 75%;
    transform: translate(-50%, -50%);
    z-index: -2;
    width: unset; }

.ib {
  width: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1; }
  @media (max-width: 1300px) {
    .ib {
      scale: 0.7; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib1 {
  position: absolute;
  top: -10%;
  left: 135%;
  transform: translate(-50%, -50%); }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib1 {
      left: 100%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib2 {
  top: -30%;
  left: 50%; }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib2 {
      left: 40%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib3 {
  top: 10%;
  left: -30%; }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib3 {
      left: 0%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib4 {
  top: -10%;
  left: 0%; }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib4 {
      left: -20%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib5 {
  top: -30%;
  left: 100%; }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib5 {
      left: 80%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib6 {
  position: absolute;
  top: 60%;
  left: -50%;
  transform: translate(-50%, -50%); }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib6 {
      left: -70%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib7 {
  top: -10%;
  left: -50%; }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib7 {
      left: -70%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib8 {
  top: -10%;
  left: 30%; }

.swiper-slide.swiper-slide-active .each-brands .ib.ib9 {
  top: 10%;
  left: -50%; }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib9 {
      left: 0%; } }

.swiper-slide.swiper-slide-active .each-brands .ib.ib10 {
  top: 30%;
  left: 100%; }
  @media (max-width: 1024px) {
    .swiper-slide.swiper-slide-active .each-brands .ib.ib10 {
      left: 50%; } }

.swiper-slide.swiper-slide-active .can-center {
  width: 400px;
  rotate: 0deg; }

.hero-slider {
  position: relative; }

.mySwipernew {
  height: 20%;
  box-sizing: border-box;
  padding: 0 !important;
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  border-color: rgba(255, 255, 255, 0.5);
  color: white; }
  @media (max-width: 1024px) {
    .mySwipernew {
      width: 98%;
      top: 89%; } }

/*.ib {
    @extend .trans;

    &.ib1 {
        position: absolute;
        top: -10%;
        left: 135%;
        transform: translate(-50%, -50%);
    }



    &.ib2 {
        top: -30%;
        left: 50%;
    }


    &.ib3 {
        top: 10%;
        left: -30%;
    }


    &.ib4 {
        top: -10%;
        left: 0%;
    }


    &.ib5 {
        top: -30%;
        left: 100%;
    }

    &.ib6 {
        position: absolute;
        top: -40%;
        left: -50%;
        transform: translate(-50%, -50%);
    }



    &.ib7 {
        top: -10%;
        left: -50%;
    }


    &.ib8 {
        top: -10%;
        left: 30%;
    }


    &.ib9 {
        top:  10%;
        left: -50%;
    }


    &.ib10 {
        top: 30%;
        left: 100%;
    }
}*/
.brand-nav {
  width: 78px;
  padding-top: 10px;
  rotate: 0deg; }
  @media (max-width: 1024px) {
    .brand-nav {
      width: 60px; } }

.mySwipernew .swiper-slide.swiper-slide-visible.swiper-slide-thumb-active .brand-nav {
  animation: bounce 1s infinite; }

.mySwipernew .swiper-backface-hidden .swiper-slide {
  position: relative;
  text-align: center; }
  .mySwipernew .swiper-backface-hidden .swiper-slide:nth-child(1):after {
    display: none;
    content: "";
    position: absolute;
    top: 37px;
    left: 0px;
    transform: translate(-50%, -50%);
    background: white;
    height: 50px;
    width: 1px; }
  .mySwipernew .swiper-backface-hidden .swiper-slide:after {
    content: "";
    position: absolute;
    top: 37px;
    left: 0px;
    transform: translate(-50%, -50%);
    background: white;
    height: 50px;
    width: 1px; }

@keyframes bounce {
  0% {
    rotate: 15deg; }
  50% {
    rotate: -15deg; }
  100% {
    rotate: 15deg; } }