/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/common/proggress/css.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.segment {
  transition: stroke 0.3s ease;
}

/* Assuming you've set classes for each state like .state-1, .state-2, etc. */
.state-1 .segment-1,
.state-2 .segment-2,
.state-2 .segment-3,
.state-2 .segment-4,
.state-2 .segment-5,
.state-2 .segment-6,
.state-2 .segment-7,
.state-8 .segment-8 {
  stroke: white;
}

.progress-triangle {
  stroke: #5f5f5fd6;
  /* color: #cdcdcd; */
  /* filter: invert(100%); */
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/components/landing_page/css.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.landing-page-continer {
  font-family: "SST Arabic Light";
  /* height: 600vh; */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.landing-page-show {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.display-none {
  display: none;
}
.landing-about {
  height: 200vh;
  /* background-color: #f5f5f520; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns children along the main axis at the start, which is the top in a column flex-direction */
  align-items: flex-end;
  pointer-events: all;
  margin-right: 15%;
}
.about-header {
  font-family: "SST Arabic Medium";
  margin-top: 30%;
  /* margin-right: 5%; */
  margin-left: 1%;
  text-align: right;
  max-width: 60%;
  font-size: 90px;
}
.about-text {
  margin-top: 1%;
  /* margin-right: 5%; */
  text-align: right;
  max-width: 60%;
  font-size: 30px;
}
.about-extra-text {
  margin-top: 1%;
  /* margin-right: 5%; */
  text-align: right;
  max-width: 60%;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .about-header {
    margin-top: 55%;
    margin-right: 5%;
    margin-left: 1%;
    max-width: 90%;
    font-size: 90px;
  }
  .about-text {
    margin-top: 10%;
    margin-right: 5%;
    max-width: 90%;
    font-size: 30px;
  }
  .about-extra-text {
    margin-top: 1%;
    margin-right: 5%;
    max-width: 90%;
    font-size: 20px;
  }
}

.landing-services {
  height: 1100vh;
  pointer-events: all;
}
.services-list {
  top: 20%;
  position: sticky;
  margin-bottom: 200px;
  margin-right: 15%;
}
.services-header {
  font-family: "SST Arabic Medium";

  /* margin-top: 4%; */
  /* margin-right: 10%; */
  /* margin-left: 1%; */
  text-align: right;
  /* max-width: 60%; */
  font-size: 90px;
  line-height: 172%;
}
.services-services {
  /* margin-right: 10%; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns children along the main axis at the start, which is the top in a column flex-direction */
  align-items: flex-end;
  /* text-align: right; */
  gap: 7px;
}
.landing-services-item {
  display: flex;
  justify-content: right;
  pointer-events: all;
  width: -moz-fit-content;
  width: fit-content;
  /* margin-left: auto; */

  font-size: 25px;
  color: rgba(255, 255, 255, 0.709);
  transition: ease-in-out 0.3s;
}
.landing-services-item:hover {
  /* font-size: 45px; */
  /* color: rgb(255, 255, 255); */
  cursor: pointer;
}
.landing-services-item-hoverd {
  font-size: 45px !important;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.All-Work {
  height: 100vh;
  margin-top: 50vh;
  display: flex;
  justify-content: center;
}
.All-Work-box {
  height: 100%;
  /* border-radius: 15%; */
  /* margin: 0 2% 0 2%; */
  background-color: #f4f4f4;
  /* background-color: transparent; */
  pointer-events: all;

  border-radius: 115px;
  width: 94%;
  transition: ease-out 0.2s;
}
.All-Work-box-expanded_97 {
  width: 97%;
}
.All-Work-box-expanded_98 {
  width: 98%;
}
.All-Work-box-expanded_99 {
  width: 99%;
}
.All-Work-box-expanded_100 {
  width: 100%;
}

.All-Work-header {
  font-family: "SST Arabic Medium";

  display: flex;
  /* font-size: 74px; */
  /* font-size: 130px; */
  /* font-size: clamp(40px, 7vw, 130px); */
  font-size: clamp(26px, 4vw, 77px);

  text-align: right;
  align-items: center;
  margin-top: 32px;
  /* margin-right: -30px; */
  min-width: -moz-max-content;
  min-width: max-content;
  right: clamp(0px, 7vw, -48px);
  position: relative;
}
.All-Work-header-0 {
  margin-top: -32px;
}
.All-Work-sub-header {
  font-family: "SST Arabic Medium";

  position: relative;
  display: flex;
  /* top: 54px; */
  align-items: end;
  margin-bottom: 20px;
  justify-content: flex-start;

  font-size: 32px;

  /* margin-top: 90%; */
  min-width: -moz-max-content;
  min-width: max-content;
}
.All-Work-sub-header-comma-icon {
  /* width: 90px; */
  /* height: 140px; */
  /* width: clamp(40px, 5vw, 90px); */
  width: clamp(34px, 4vw, 70px);
  /* height: clamp(60px, 14vh, 140px); */
  height: clamp(52px, 11vh, 104px);
}

.All-Work-nav {
  display: flex;
  justify-content: flex-end;
  justify-items: center;
  justify-content: space-between;
  color: black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.443);
  /* padding-left: 10%; */
  /* margin-right: 10%; */
  width: 72%;
}

.All-Work-nav-container {
  display: flex;
  justify-content: center;
}
.All-Work-carosal-container {
  width: 100%;
}
.All-Work-commapattren {
  display: flex;
  position: absolute;
  overflow: hidden;
  height: 100%;
  padding: 0 3% 0 3%;
  margin-left: 6%;
  /* z-index: 0; */
}
.All-Work-commapattren-svg {
  transform: rotate(45deg);
  opacity: 0.4;
  /* width: clamp(90px, 20vw, 153px); */
  /* height: clamp(90px, 20vw, 227px); */
}
.All-Work-commaPattrenGen-row {
  display: flex;
  gap: 59px;
  margin-top: -12px;
}
.blurry-bg {
  /* background-color: aqua; */
  backdrop-filter: blur(
    10px
  ); /* Adjust the px value to increase/decrease the blur intensity */

  /* For better cross-browser support, include these prefixed versions */
  -webkit-backdrop-filter: blur(10px);
  pointer-events: all;
}

.Partners {
  height: 230vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* justify-content: space-around; */
  /* flex-wrap: wrap; */
  /* height: auto; */
  /* height: clamp(40px, 7vh, 100vh); */
}
.Partners-header {
  font-family: "SST Arabic Medium";

  margin-top: 4%;
  /* margin-right: 10%; */
  /* margin-left: 1%; */
  text-align: right;
  align-items: center;
  /* max-width: 60%; */
  font-size: 90px;
  /* line-height: 90%; */
}
.Partners-container {
  height: 130vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.Partners-container-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding-right: 86px; */
  /* height: 80vh; */
}
.Partners-container-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* height: 80vh; */
}
.Partners-text {
  margin-top: 1%;
  /* margin-right: 5%; */
  text-align: right;
  /* max-width: 60%; */
  font-size: 28px;
}
.Partners-carosal-container {
  /* height: 600px; */
  max-width: 900px;
  min-width: 345px;
  /* background-color: antiquewhite; */
  pointer-events: all;
}

.mega-card {
  background-color: #f4f4f4;
  height: 100vh;
  border-radius: 115px;
}
.mega-card-2 {
  background-color: #433838;
  height: 100vh;
  border-radius: 115px;
}
.mega-card-container {
  flex-direction: column;
  width: 100%;
}
.mega-card-header {
  justify-content: center;
  display: flex;
  justify-content: flex-end;
  justify-items: center;
  justify-content: space-between;
  color: black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.443);
  /* padding-left: 10%; */
  /* margin-right: 10%; */
  width: 80%;
}
.mega-card-header-main {
  font-family: "SST Arabic Medium";
  display: flex;
  font-size: clamp(40px, 7vw, 130px);
  text-align: right;
  align-items: center;
  margin-top: 50px;
  min-width: -moz-max-content;
  min-width: max-content;
  right: clamp(0px, 7vw, -48px);
  position: relative;
}
.mega-card-header-main-text {
  margin-top: -50px;
}
.mega-card-header-sub {
  font-family: "SST Arabic Medium";
  position: relative;
  display: flex;
  align-items: end;
  margin-bottom: 20px;
  justify-content: flex-start;
  font-size: 30px;
  min-width: -moz-max-content;
  min-width: max-content;
}

.scroll-mega-card {
  width: auto;
  height: 100vh;
  overflow-y: hidden; /* Enables scrolling within the mega-card */
  position: sticky;
  top: 0;
  margin-top: 94px;

  /* If you need to position children absolutely within it */
  /* Other styles as needed */
}
.no-scroll {
  overflow: hidden;
}

.font-SST-Light {
  font-family: "SST Arabic Light";
}

/* Z News */
.twitter-timeline-container {
  margin-top: 20px;
}
.twitter-timeline {
  width: 500px;
  height: 60vh;
  overflow-y: scroll;
}
.twitter-timeline::-webkit-scrollbar {
  width: 1em;
}
.twitter-timeline::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.518); */
  background-color: rgba(0, 0, 0, 0.135);
  border-radius: 10px;
}
.twitter-timeline::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.262);
  /* outline: 1px solid rgb(60, 60, 60); */
  border-radius: 20px;
}

@media screen and (max-width: 768px) {
  .landing-about {
    height: 300vh;
  }
  .services-header {
    margin-top: 20%;
    margin-right: 5%;
    margin-left: 1%;
    max-width: 90%;
    font-size: 90px;
  }
  .landing-services {
    height: 1250vh;
  }
  .landing-services-item {
    font-size: 20px;
  }
  .landing-services-item-hoverd {
    font-size: 25px !important;
    font-weight: 700;
    color: rgb(255, 255, 255);
    cursor: pointer;
    margin-right: -15px;
    text-align: right;
  }
  .services-services {
    gap: 11px;
  }
  .All-Work-box {
    border-radius: 44px;
  }
  .All-Work-header {
    font-size: 40px;
    /* margin-right: 5%; */
    margin-top: 0px;
    justify-content: flex-end;
    margin-right: 0;
    right: 0;
  }
  .All-Work-header-0 {
    margin-top: -25px;
  }
  .All-Work-sub-header {
    font-size: 20px;
    /* width: -webkit-fill-available; */
    margin-left: 1%;
    top: 17px;
  }
  .All-Work-sub-header-comma-icon {
    width: 40px;
    height: 60px;
  }
  .All-Work-nav {
    flex-direction: column;
    width: 97%;
    position: relative;
    top: -18px;
  }
  .All-Work-commapattren-svg {
    display: none;
  }
  .Partners {
    height: 200vh;
    /* margin-top: 100px;
    margin-bottom: 100px; */
  }
  .Partners-container {
    height: 103vh;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .Partners-container-right {
    height: 77vh;
  }
  .Partners-carosal-container {
    height: 100%;
  }
  .Partners-header {
    font-size: 85px;
  }
  .Partners-text {
    font-size: 18px;
  }

  .mega-card {
    border-radius: 44px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/common/objects/css.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
.diamond-pattern {
  /* Sets the width to 50% of the viewport width */
  /* width: clamp(
    70px,
    10vw,
    190px
  );  */
  width: clamp(58px, 7vw, 120px);
  height: auto; /* Maintains the aspect ratio */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .diamond-pattern {
    width: 70px; /*Sets the width to 80% of the viewport width on smaller screens */
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/components/Carousel/css.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.carosal-item {
  /* height: 100%; */
  /* width: 100%; */
  height: 163px;
  width: 156px;
  background-color: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.805);
}
.carosal-dimond-button {
  opacity: 0.5;
  /* width: 15rem; */
  /* height: 15rem; */
}
.carosal-dimond-button:hover {
  opacity: 1;
}
.carosal-dimond-button-container {
  right: 15%;
  top: 89%;
}
.carosal-dimond-button-svg {
  width: 50px;
  height: 50px;
}
.carosal-container-0 {
  height: 750px;
}
.carosal-container-3 {
  gap: 21px;
  /* margin-right: 10px; */
  margin-left: -116px;
}
.carosal-group-col {
  position: relative;
  top: -80px;
}

.All-Work-carosal-container-0 {
  height: 540px;
  width: 100%;
  margin-top: 40px;
}
.All-Work-carosal-item {
  height: 432px;
  width: 439px;
  background-color: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(0, 0, 0, 0.805);
}
.All-Work-carosal-container-1 {
  gap: 21px;
  padding-left: 5%;
}
.All-Work-carosal-container-2 {
  width: 8%;
  margin-top: -6rem;
}
.AWCOffset {
  margin-top: 6rem;
}

.All-Work-carosal-container-3 {
  /* gap: 21px; */
  /* margin-right: 10px; */
  /* margin-left: -116px; */
  width: 100%;
}
.All-Work-carosal-dimond-button-container {
  right: 15%;
  top: 106%;
  position: absolute;
}
.All-Work-carosal-dimond-button-svg {
  width: 80px;
  height: 80px;
}
.All-Work-carosal-dimond-button-svg:hover {
  background-color: #d94b42;
  opacity: 1;
}

.All-Work-carosal-dimond-button-svg-path,
.All-Work-carosal-dimond-button-svg-rect {
  width: clamp(0px, 7vw, 80px);
  height: clamp(0px, 7vw, 80px);
}

.All-Work-carosal-dimond-button {
  opacity: 0.5;
}
.All-Work-carosal-dimond-button:hover {
  opacity: 1;
}
.All-Work-carosal-dimond-button-svg-left-arrwo {
  left: 22px;
  top: 26px;
}

.All-Work-carosal-dimond-button-svg-right-arrwo {
  left: 158px;
  top: 25px;
}

@media screen and (max-width: 768px) {
  .carosal-dimond-button-container {
    /* right: 20%;
    bottom: -17%; */
    right: 40%;
    top: 85%;
    /* bottom: 10%; */
  }
  .carosal-dimond-button {
  }
  .carosal-dimond-button-svg {
    width: 45px;
    height: 45px;
  }
  .carosal-item {
    width: 82%;
  }
  .carosal-container-0 {
    height: 522px;
  }
  /* .carosal-container-1 {
    height: 68%;
  } */
  .carosal-container-3 {
    gap: 0;
    /* margin-right: 0; */
    margin-left: 0;
  }
  /* .carosal-group-col{
    position:relative;
    top:-80px;
  } */
  .All-Work-carosal-container-0 {
    height: 500px;
    width: 100%;
    margin-top: -42px;
  }
  .All-Work-carosal-container-2 {
    width: 4%;
    margin-top: -15rem;
  }
  .AWCOffset {
    margin-top: 8rem;
    margin-left: -5rem;
  }
  .All-Work-carosal-item {
    /* height: 210px;
    width: 357px; */
    height: 160px;
    width: 290px;
  }
  .All-Work-carosal-dimond-button-container {
    top: 85%;
    right: 29%;
  }
  .All-Work-carosal-dimond-button-svg {
    width: 65px;
    height: 65px;
  }
  .All-Work-carosal-dimond-button-svg-left-arrwo {
    left: 14px;
    top: 20px;
  }
  .All-Work-carosal-dimond-button-svg-right-arrwo {
    left: 138px;
    top: 20px;
  }

  .All-Work-carosal-dimond-button-svg-rect {
    width: clamp(7px, 22vw, 75px);
    height: clamp(32px, 24vw, 76px);
  }
  .All-Work-carosal-dimond-button-svg-path {
    width: clamp(7px, 22vw, 75px);
    height: clamp(32px, 24vw, 76px);
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/components/footer/footer.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
.Footer {
  /* background-color: #182126; */
  /* width: auto; */
  height: 50vh;
  overflow: hidden; /* Enables scrolling within the mega-card */
  position: sticky;
  width: 100%;
  display: block;
  /* bottom: 0; */
  pointer-events: all;
}
.footer-mega-card {
  background-color: #182126;
  color: #f4f4f4;
  height: 50vh;
  border-radius: 115px 115px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-left: 5%;
}
.footer-left-side {
  position: relative;
  /* top: 55px; */
  /* padding-left: 15%; */
}
.footer-z-logo {
  position: relative;
  width: 83px;
  height: 95px;
  margin: 0;
}

.footer-right-side {
  position: relative;
  /* top: 55px; */
  /* padding-right: 7%; */
  padding-right: clamp(0px, 7vw, 10%);
}
.footer-contect-continer {
  font-size: 32px;
  line-height: 44px;
  padding-bottom: 67px;
}
.footer-copy-right {
  font-size: 26px;
}

.footer-line-bg-1 {
  position: absolute;
  overflow-x: hidden;
  z-index: 1;
}
.footer-line-bg-1 svg {
  width: 1070px;
  max-width: 100%;
  height: 600px;
  margin-left: 35%;
  margin-top: 17vh;
}
.footer-line-bg-2 {
  position: absolute;
  overflow-x: hidden;
  z-index: 1;
  margin-left: 55vw;
  height: 60vh;
  margin-top: -6vh;
  width: 50vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.footer-line-bg-2 svg {
  /* width: 1395px;
  max-width: 100%;
  height: 480px;
  margin-top: -5vh; */
  width: 100%;
  height: auto; /* Maintain aspect ratio */
}

.footer-white-path-circle {
  fill: #fff;
  box-shadow: 0 10px 10px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 255, 255, 0.2);
  /* box-shadow: inset 0 10px 100px rgba(255, 255, 255, 0.965); */
}

@media screen and (max-width: 768px) {
  .footer-mega-card {
    border-radius: 44px 44px 0 0;
    height: 80vh;
  }
  .Footer {
    height: 80vh;
  }
  .footer-z-logo {
    margin: auto;
  }
  .footer-left-side {
    width: 100%;
    justify-content: center;
  }
  .footer-right-side {
    width: 100%;
    justify-content: center;
  }
  .footer-contect-continer {
    font-size: 32px;
    /* line-height: 2.5rem; */
    margin-right: 0;
  }
  .footer-copy-right {
    font-size: 20px;
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .footer-line-bg-1 svg {
    margin-top: 60vh;
    margin-left: 6%;
  }
  .footer-line-bg-2 {
    margin-left: 21vw;
    height: 65vh;
    margin-top: 16vh;
    width: 85vw;
    max-width: 100%;
  }
}