@font-face {
  font-family: "uniform rnd";
  src: url("../../fonts/uniform-rnd-bold.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Avenir Arabic Medium";
  src: url("../../fonts/alfont_com_AlFont_com_AvenirArabic-Medium.otf")
    format("opentype");
  font-weight: 100;
  font-style: normal;
}
#partners-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
  box-sizing: border-box;
  position: relative;
}
@media (min-width: 1440px) {
  #partners-box {
    padding: 0 100px;
  }
}
@media (max-width: 1439px) {
  #partners-box {
    padding: 0 75px;
  }
}
@media (max-width: 768px) {
  #partners-box {
    padding: 0 20px;
  }
}

#partners {
  height: 100%;
  min-height: 600px; /*700px*/
  width: 100%;
  max-width: 1440px;
  position: relative;
  overflow: hidden;
}
#partners .container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
}

#partners section {
  display: flex;
  flex-direction: column;
  width: 525px;
  height: 278px;
  gap: 2px;
  margin-right: 107px;
  margin-top: 112px;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media (max-width: 768px) {
  #partners section {
    width: 350px;
    margin-top: 26px;
    margin-bottom: 180px;
    margin-right: 0;
  }
}

#partners-logo1 {
  display: flex;
  width: 100%;
  height: 119px;
  gap: 32px;
}
@media (max-width: 768px) {
  #partners-logo1 {
    gap: 16px;
  }
}
#partners-logo1 div {
  width: 114px;
  height: 113px;
}
@media (max-width) {
  #partners-logo1 div {
    width: 104px;
    height: 104px;
  }
}

#partners-logo1 div:nth-of-type(1) img {
  width: 101px;
  height: 117px;
}
#partners-logo1 div:nth-of-type(2) img {
  width: 91px;
  height: 118px;
}
#partners-logo1 div:nth-of-type(3) img {
  width: 111px;
  height: 119px;
}
#partners-logo1 div:nth-of-type(4) img {
  width: 114px;
  height: 113px;
}
@media (max-width: 768px) {
  #partners-logo1 div:nth-of-type(1) img {
    width: 90px;
    height: 107px;
  }
  #partners-logo1 div:nth-of-type(1) {
    display: none;
  }

  #partners-logo1 div:nth-of-type(2) img {
    width: 81px;
    height: 108px;
  }
  #partners-logo1 div:nth-of-type(3) img {
    width: 101px;
    height: 109px;
  }
  #partners-logo1 div:nth-of-type(4) img {
    width: 104px;
    height: 103px;
  }
}

#partners-logo2 {
  display: flex;
  width: 100%;
  height: 111px;
  gap: 32px;
}
@media (max-width: 768px) {
  #partners-logo2 {
    gap: 16px;
  }
}

#partners-logo2 div {
  width: 118px;
  height: 111px;
}
#partners-logo2 div:nth-of-type(1) img {
  width: 111px;
  height: 105px;
}
#partners-logo2 div:nth-of-type(2) img {
  width: 118px;
  height: 93px;
}
#partners-logo2 div:nth-of-type(3) img {
  width: 102px;
  height: 114px;
}
#partners-logo2 div:nth-of-type(4) img {
  width: 111px;
  height: 113px;
}
@media (max-width: 768px) {
  #partners-logo2 div:nth-of-type(1) img {
    width: 101px;
    height: 95px;
    display: none;
  }
  #partners-logo2 div:nth-of-type(1) {
    display: none;
  }

  #partners-logo2 div:nth-of-type(2) img {
    width: 108px;
    height: 83px;
  }
  #partners-logo2 div:nth-of-type(3) img {
    width: 92px;
    height: 104px;
  }
  #partners-logo2 div:nth-of-type(4) img {
    width: 101px;
    height: 103px;
  }
}

#partners-change-arrows {
  width: 56px;
  height: 128px;
  position: absolute;
  right: -100px;
  top: 105px;
}
@media (max-width: 768px) {
  #partners-change-arrows {
    width: 40px;
    height: 96px;
    position: static;
    transform: rotate(270deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: -20px;
  }
}
#partners-change-arrows div:nth-child(1) {
  width: 100%;
  height: 50%;
}
#partners-change-arrows div:nth-child(1) img {
  width: 21px;
  height: 12px;
  cursor: pointer;
}
#partners-change-arrows div:nth-child(2) {
  width: 100%;
  height: 50%;
}
#partners-change-arrows div:nth-child(2) img {
  width: 21px;
  height: 12px;
  cursor: pointer;
}

#partners .container main {
  width: 410px;
  margin-left: 107px;
  margin-top: 137px;
  position: relative;
}
@media (max-width: 768px) {
  #partners .container main {
    width: 350px;

    margin: 82px 0 0 8px;
  }
}

#partners .container main h1 {
  width: 100%;
  font-family: "uniform rnd", sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 110%;
  letter-spacing: 0%;

  color: rgba(52, 52, 52, 1);
}
@media (max-width: 768px) {
  #partners .container main h1 {
    font-size: 46px;
    margin: 0;
  }
}
#partners .container main h1 span {
  color: rgba(254, 216, 95, 1);
}

#partners .container main p {
  width: 362px;
  font-family: "Avenir Arabic Medium", sans-serif;
  font-weight: 100;
  font-size: 16px;
  letter-spacing: 0%;
  margin-top: 20px;
  color: rgba(52, 52, 52, 1);
}
@media (max-width: 768px) {
  #partners .container main p {
    font-size: 14px;
    margin-top: 8px;
  }
}

#partners .container main img {
  width: 239px;
  height: 82px;
  transform: skewY(3deg);
  position: absolute;
  top: -13px;
  left: -43px;
}
@media (max-width: 768px) {
  #partners .container main img {
    display: none;
  }
}

#partners-decors {
  width: 600px;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0;
  overflow: hidden;
  z-index: -2;
}
@media (max-width: 768px) {
  #partners-decors {
    width: 100%;
    opacity: 40%;
  }
}

#partners-decors img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  object-fit: contain;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}