@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Almarai", sans-serif;
}
body {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

/*.collapse:not(.show) {*/
/*  display: none !important;*/
/*}*/
.fs-40p {
  font-size: 40px !important;
}
.fs-22p {
  font-size: 22px !important;
}
.fs-20p {
  font-size: 20px !important;
}
.fs-18p {
  font-size: 18px !important;
}
.objectCover {
  object-fit: cover;
}
.navLocation {
  max-width: 97.8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000000000;
}
.padTopCont {
  padding-top: 125px;
  background-image: url("../../images/halfRedCircle.png");
  background-position: bottom left;
  background-repeat: no-repeat;
  overflow: hidden;
}

.colorRedBG {
  background-color: #c8495a;
}
.imageContainer {
  width: 120px;
  height: 47px;
}
.HPIMG {
  left: 30px;
}

.position-relative.d-flex > img:nth-child(1) {
  left: 0;
  z-index: 1;
  border: 1px solid white;
}

.position-relative.d-flex > img:nth-child(2) {
  left: 35px;
  z-index: 2;
  border: 1px solid white;
}

.position-relative.d-flex > img:nth-child(3) {
  left: 70px;
  z-index: 3;
  border: 1px solid white;
}

.position-relative.d-flex > img:nth-child(4) {
  left: 105px;
  z-index: 4;
  border: 1px solid white;
}

.smallWhiteText {
  font-weight: 400;
  color: #fefefe;
  line-height: 1.4;
}
.bigWhiteText {
  font-weight: 700;
  color: #fefefe;
  line-height: 1.4;
}
.logButton {
  background-color: #fefefe;
  color: #c8495a;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 10px;
}
.asideBar {
  font-weight: 700;
  color: #fefefe;
  line-height: 1.4;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.whiteCircle {
  background-color: #fefefe;
  width: 62px;
  height: 62px;
}
.withFit {
  width: fit-content;
}
.bright-70 {
  filter: brightness(70%);
}
.bright-60 {
  filter: brightness(60%);
}
.bright-80 {
  filter: brightness(80%);
}
.bright-55 {
  filter: brightness(55%);
}
.cardBGGra {
  background-color: #f2efeb;
}
.RedButton {
  background-color: #c8495a;
  color: #fefefe;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 10px;
}
.smallBlackText {
  font-weight: 400;
  color: #414141;
  line-height: 1.4;
}
.bigBlackText {
  font-weight: 700;
  color: #414141;
  line-height: 1.4;
}
.pointer {
  cursor: pointer;
}
.hBigImage {
  height: 480px;
}
.smallLightGray {
  color: #f2efeb;
  font-weight: 400;
  line-height: 1.4;
}
.redMoreR {
  color: #ee766a;
  font-weight: 700;
  line-height: 1.4;
}
.slideArrows {
  background-color: #c8495a;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  opacity: 1;
}
.slideArrows:hover {
  opacity: 0.4;
}
.smallImage {
  width: 150px;
  height: 175px;
  border-radius: 10px;
}
.lineupTRa::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 85%;
  left: 135%;
  top: 0;
  background-color: #00000080;
}
.linkSS {
  position: relative;
  display: inline-block;
}

.linkSS::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 5%;
  height: 1px;
  width: 90%;
  background-color: #414141;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.linkSS:hover::after {
  transform: scaleX(1);
}

.mansaContainer {
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
}
.redArrow {
  width: 90px;
  height: 90px;
  background-color: #f2efeb;
  border-radius: 50%;
}
.imagHalf {
  height: 500px;
}
.textAbslPos {
  right: 77.5%;
  top: 16%;
}
.bigRedText {
  font-weight: 700;
  color: #c8495a;
  line-height: 1.4;
}
.aktshfBG {
  background-image: url("../../images/lll.png");
  background-position: bottom left;
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: 25% 75%;
}
.cardPlatFormBG {
  background: linear-gradient(
      rgba(242, 239, 235, 0.9),
      rgba(242, 239, 235, 0.9)
    ),
    url("../../images/backG.jpg");
  background-repeat: no-repeat;
  background-size: fill;
}
.cardsContainer {
  border-radius: 16px;
  height: 400px;
}
.darkCircle {
  width: 45px;
  height: 45px;
  background-color: #fefefeb2;
}
.cardsContainer {
  transition: all 0.4s ease-in-out;
  flex: 1;
  min-width: 0;
  position: relative;
}

.cardsWrapper:hover .cardsContainer {
  flex: 0.8;
}

.cardsWrapper:hover .cardsContainer:hover {
  flex: 2;
}

.cardContent {
  display: none;
  transition: all 0.3s ease;
}

.cardTitle {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-align: center;
  color: white;
  font-size: 1.2rem;
  position: absolute;
  bottom: 10%;
  right: 8%;
}
.rotateHalf {
  transition: 0.8s;
}
.cardsWrapper:hover .cardsContainer .cardTitle {
  display: block;
  position: absolute;
  bottom: 10%;
  right: 8%;
  transform: rotate(180deg);
  z-index: 4;
}

.cardsWrapper:hover .cardsContainer:hover .cardContent {
  display: flex !important;
  flex-direction: column;
}
.cardsWrapper:hover .cardsContainer:hover .rotateHalf {
  transform: rotate(315deg);
}

.cardsWrapper:hover .cardsContainer:hover .cardTitle {
  display: none;
}

@media screen and (max-width: 1800px) {
  .smallImage {
    width: 130px;
  }
}
@media screen and (max-width: 1600px) {
  .smallImage {
    width: 110px;
    height: 150px;
  }
}
@media screen and (max-width: 1399px) {
  .fs-40p {
    font-size: 35px !important;
  }
  .fs-22p {
    font-size: 20px !important;
  }
  .fs-20p {
    font-size: 18px !important;
  }
  .fs-18p {
    font-size: 16px !important;
  }
  .smallImage {
    width: 90px;
    height: 130px;
  }
  .hBigImage {
    height: 440px;
  }
  .redArrow {
    width: 70px;
    height: 70px;
  }
  .imagHalf {
    height: 450px;
  }
  .textAbslPos {
    right: 75.5%;
    top: 16%;
  }
  .mansaContainer {
    height: 350px;
  }
  .aktshfBG {
    background-size: 30% 75%;
  }
}
@media screen and (max-width: 1199px) {
  .fs-40p {
    font-size: 28px !important;
  }
  .fs-22p {
    font-size: 18px !important;
  }
  .fs-20p {
    font-size: 16px !important;
  }
  .fs-18p {
    font-size: 14px !important;
  }
  .slideArrows {
    width: 35px;
    height: 35px;
  }
  .slideArrows img {
    width: 20px;
  }
  .smallImage {
    width: 80px;
    height: 120px;
  }
  .hBigImage {
    height: 400px;
  }
  .redArrow {
    width: 60px;
    height: 60px;
  }
  .imagHalf {
    height: 375px;
  }
  .textAbslPos {
    right: 76.5%;
    top: 17%;
  }
  .mansaContainer {
    height: 300px;
  }
  .aktshfBG {
    background-size: 30% 75%;
  }
}
@media screen and (max-width: 991px) {
  .fs-40p {
    font-size: 30px !important;
  }
  .fs-22p {
    font-size: 16px !important;
  }
  .fs-20p {
    font-size: 14px !important;
  }
  .fs-18p {
    font-size: 13px !important;
  }
  .slideArrows {
    width: 50px;
    height: 50px;
  }
  .slideArrows img {
    width: 22px;
  }
  .smallImage {
    width: 110px;
    height: 150px;
  }
  .aktshfBG {
    background-size: 50% 50%;
  }
  .cardsContainer {
    max-height: 350px;
  }
}

@media screen and (max-width: 767px) {
  .fs-40p {
    font-size: 25px !important;
  }
  .fs-22p {
    font-size: 14px !important;
  }
  .fs-20p {
    font-size: 13px !important;
  }
  .fs-18p {
    font-size: 12px !important;
  }
  .hBigImage {
    height: 350px;
  }
  .imagHalf {
    height: 350px;
  }
  .textAbslPos {
    right: 75.5%;
    top: 18%;
  }
  .mansaContainer {
    height: 275px;
  }
  .cardsContainer {
    max-height: 300px;
  }
}
@media screen and (max-width: 575px) {
  .fs-40p {
    font-size: 25px !important;
  }
  .fs-22p {
    font-size: 14px !important;
  }
  .fs-20p {
    font-size: 13px !important;
  }
  .fs-18p {
    font-size: 12px !important;
  }
  .slideArrows {
    width: 35px;
    height: 35px;
  }
  .slideArrows img {
    width: 18px;
  }
  .smallImage {
    width: 90px;
    height: 130px;
  }
  .hBigImage {
    height: 300px;
  }
  .cardsContainer {
    max-height: 250px;
  }
}
@media screen and (max-width: 450px) {
  .slideArrows {
    width: 30px;
    height: 30px;
  }
  .slideArrows img {
    width: 16px;
  }
  .smallImage {
    width: 70px;
    height: 110px;
  }
}