* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

@font-face {
  font-family: 'ridley_groteskblack';
  src: url('fonts/ridley_grotesk_black-webfont.woff2') format('woff2'),
    url('fonts/ridley_grotesk_black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'ridley_groteskbold';
  src: url('fonts/ridley_grotesk_bold-webfont.woff2') format('woff2'),
    url('fonts/ridley_grotesk_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'ridley_groteskextrabold';
  src: url('fonts/ridley_grotesk_extrabold-webfont.woff2') format('woff2'),
    url('fonts/ridley_grotesk_extrabold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'ridley_grotesklight';
  src: url('fonts/ridley_grotesk_light-webfont.woff2') format('woff2'),
    url('fonts/ridley_grotesk_light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'ridley_groteskmedium';
  src: url('fonts/ridley_grotesk_medium-webfont.woff2') format('woff2'),
    url('fonts/ridley_grotesk_medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'ridley_groteskregular';
  src: url('fonts/ridley_grotesk_regular-webfont.woff2') format('woff2'),
    url('fonts/ridley_grotesk_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

#smallmenu {
  background-color: #2c2c2c;
  position: absolute;
  z-index: 10000;
  width: 100%;
  display: none;
  left: 100%;
}

#smallmenuheader {
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0vw 3vw;
  border-bottom: 3px solid white;
}

#smallmenuheader img:nth-child(1) {
  width: 10vh;
  height: 8vh;
}

#smallcontent {
  height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#smallcontent h4 {
  text-transform: uppercase;
  font-family: 'ridley_groteskbold';
  color: white;
  font-size: 5vw;
  line-height: 5vh;
  cursor: pointer;
}

#main {
  min-height: 100%;
  width: 100vw;
  padding-top: 0.01px;
  position: relative;
  overflow: hidden;
}

[dir="rtl"] #main {
  min-height: 100%;
  width: 100vw;
  padding-top: 0.01px;
  position: relative !important;
  overflow: hidden;
}

#menu {
  height: auto;
  width: 100%;
  position: fixed !important;
  z-index: 99999999 !important;
  display: flex;
  top: 3vh;
  justify-content: flex-end;
  align-items: center;
  padding-right: 1vw;
  padding-left: 0vw;
}

[dir="rtl"] #menu {
  height: auto;
  width: 100%;
  position: fixed !important;
  z-index: 99999999 !important;
  display: flex;
  top: 3vh;
  justify-content: flex-end;
  align-items: center;
  padding-left: 1vw;
  padding-right: 0vw;

}
#mode {
  /* height: 10vh; */
  height: 3vw;
  width: 100%;
  position: fixed;
  z-index: 99999998 !important;
  top: 40vh;
  display: flex;
  justify-content: flex-end;
  padding-left: 0vw;
  padding-right: 1vw;
}
[dir="rtl"] #mode {
  /* height: 10vh; */
  height: 3vw;
  width: 100%;
  position: fixed;
  z-index: 99999998 !important;
  top: 40vh;
  display: flex;
  justify-content: flex-end;
  padding-left: 1vw;
  padding-right: 0vw;
}
#modeouter {
  width: 6vw;
  /* width: 10%; */
  height: 100%;
  border: 3px solid white;
  background-color: white;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
}

#modeinner {
  width: 50%;
  height: 100%;
  border-radius: 60%;
  background-color: #2c2c2c;
  transition: all 0.2s linear;
}

.btnstyle {
  padding: 15px 15px;
  font-size: 0.8vw;
  line-height: 11px;
  color: #fff;
  background-color: #2c2c2c;
  border: 2px solid #fff;
  font-family: 'ridley_groteskbold';
  font-weight: bolder;
  text-transform: uppercase;
}

.btnstyle2 {
  padding: 15px 15px;
  font-size: 0.8vw;
  line-height: 11px;
  color: #2c2c2c !important;
  background-color: #fff;
  border: 2px solid #2c2c2c;
  font-family: 'ridley_groteskbold';
  font-weight: bolder;
  text-transform: uppercase;
}
 .btnstyle2rtl {
  padding: 15px 15px;
  font-size: 1vw !important;
  line-height: 11px;
  color: #2c2c2c;
  background-color: #fff;
  border: 2px solid #2c2c2c;
  font-family: "Cairo", sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1vw;
}
.btnstylertl {
  padding: 15px 15px;
  font-size: 1vw !important;
  line-height: 11px;
  color: #fff;
  background-color: #2c2c2c;
  border: 2px solid #fff;
  font-family: "Cairo", sans-serif !important;
  font-weight: 700;
  letter-spacing: .1vw;
}
.btn:focus,
.btn:active,
.dropdown-toggle:active,
.dropdown-toggle:focus {
  outline: none;
  /* Remove focus outline */
  box-shadow: none;
  /* Remove Bootstrap focus box shadow */
  /* Remove the border during focus/active */
}

.btn:hover,.dropdown-toggle:hover {
  background-color: #2ad8ff;
  color: #2c2c2c;
}
.dropdown-menu 
{
  background-color: #2c2c2c;
  border: 2px solid white;
  font-family: 'ridley_groteskbold';
  text-transform: uppercase;
  text-align: justify;
}
.dropdown-item 
{
  color: white;
}
.dropdown-item:hover 
{
  background-color: #2ad8ff;
  color: #2c2c2c;
}
.custom-dropdown::after {
  margin-left: 5px; 
  margin-right: 0px;/* Adjust this to control space between text and icon */
}
[dir="rtl"] .custom-dropdown::after {
  margin-left: 0px; 
  margin-right: 5px;/* Adjust this to control space between text and icon */
}
#hamburg {
  display: none;
}

#hamburg #menuimg {
  cursor: pointer;
}

#banner {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#banner video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

#banner #overlay {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(50%, 50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

#overlay img {
  height: 100%;
  width: 70%;
}

#work {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

#work .row {
  height: 100%;
  width: 100%;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  margin: 0px;
}

#work .col-left {
  height: 100%;
  background-color: #2c2c2c;
  border-right: 3px solid white;
  border-left: none;
  padding: 0%;

}
[dir="rtl"] #work .col-left {
  height: 100%;
  background-color: #2c2c2c;
  border-right: none;
  border-left: 3px solid white;
  padding: 0%;

}

#work .col-left #topcontent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

[dir="rtl"] #work .col-left #topcontent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#topcontent #topcontenth1 {
  width: 80%;
  height: auto;
}

[dir="rtl"] #topcontent #topcontenth1 {
  width: 80%;
  height: auto;
}

#topcontent h1 {
  color: white;
  font-family: 'ridley_groteskbold';
  font-size: 72px;
  color: #2ad8ff;
  letter-spacing: -3px;
  text-transform: uppercase;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7vw;
  font-weight: 800;
  line-height: 7vw;
  padding: 1vh 0vh;
}

[dir="rtl"] #topcontent h1 {
  color: white;
  font-family: "Cairo", sans-serif;
  font-size: 72px;
  color: #2ad8ff;
  letter-spacing: 0px;
  text-transform: uppercase;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7vw;
  font-weight: 800;
  line-height: 7vw;
  text-align: right;
  padding: 1.5vh 0vh;
}

#work .col-left #bottomcontent {
  width: 100%;
  height: 50%;
  display: none;
}

#work .col-right {
  height: 100%;
  background-color: #2c2c2c;
  padding: 0%;
  background-repeat: no-repeat;
  background-size: cover;
}

.trans {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4%;
}

#colrighttop {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0px 0px;
}

#colrighttop p {
  color: white;
  font-family: 'ridley_groteskregular';
  text-align: justify;
  text-transform: capitalize;
  font-size: 2vh;
  margin: 0;
  width: 65%;
  letter-spacing: 0.05em; /* Adjust letter spacing */
  word-spacing: 0.02em; /* Adjust word spacing */
  line-height: 1.5; /* Adjust line height for better readability */
}
[dir="rtl"] #colrighttop p {
  color: white;
  font-family: "Cairo", sans-serif;
  text-align: justify;
  text-transform: capitalize;
  font-size: 2.5vh;
  width: 65%;
  margin: 0;
  letter-spacing: 0.05em; /* Adjust letter spacing */
  word-spacing: 0.02em; /* Adjust word spacing */
  line-height: 1.5; /* Adjust line height for better readability */
}
#colrightbottom {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0px 0px;

}

#colrightbottom p {
  color: white;
  font-family: 'ridley_groteskregular';
  text-align: justify;
  font-size: 2vh;
  width: 65%;
  text-transform: capitalize;
  width: 65%;
  margin: 0;
  letter-spacing: 0.05em; /* Adjust letter spacing */
  word-spacing: 0.02em; /* Adjust word spacing */
  line-height: 1.5; /* Adjust line height for better readability */
}
[dir="rtl"] #colrightbottom p {
  color: white;
  font-family: "Cairo", sans-serif;
  text-align: justify;
  font-size: 2.5vh;
  width: 65%;
  text-transform: capitalize;
  width: 65%;
  margin: 0;
  letter-spacing: 0.05em; /* Adjust letter spacing */
  word-spacing: 0.02em; /* Adjust word spacing */
  line-height: 1.5; /* Adjust line height for better readability */
}

/* multipliereffect */
#multipliereffect {
  width: 100%;
  height: 40vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
[dir="rtl"] #multipliereffect {
  width: 100%;
  height: 40vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
#container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

[dir="rtl"] #container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.4vw;
  font-family: 'ridley_groteskextrabold';
  font-weight: bolder;
  color: white;
  text-transform: uppercase;
}
[dir="rtl"] #container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13vw;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
}

@keyframes move {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes move2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* cardconatiner */
#cardconatiner {
  height: auto;
  width: 100%;
  overflow: hidden;
  background-color: #2c2c2c;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

#cardconatiner .row {
  height: auto;
  width: 100%;
}

#cardconatiner .card {
  height: auto;
  width: 100%;
  border: 2px solid white;
  background-color: #2c2c2c;
  transition: all 0.5 ease-in-out;

}

#cardconatiner .card .card-img-top {
  height: 50vh;
  position: relative;
  overflow: hidden;
  display: flex;
  /* Align images horizontally */
}

#cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
  /* Align all images to the start position */
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

#cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

#cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(-100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

[dir="rtl"] #cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 1s ease-in-out;
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

.card-img-top img:nth-child(1) {
  z-index: 7;
}

.card-img-top img:nth-child(2) {
  z-index: 6;
}

._canvas_container {
  z-index: 999999 !important;
  pointer-events: none;

}

#cardconatiner .card .card-body {
  height: auto;
  width: 100%;
  padding: 0;
  border-top: 2px solid white;
}

#cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 2.5vw;
  text-transform: uppercase;
}
[dir="rtl"] #cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 2.5vw;
  text-transform: uppercase;
}
#cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: 'ridley_groteskregular';
  color: white;
}

[dir='rtl'] #cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: "Cairo", serif;
  color: white;
}
#cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 1rem; 
  padding-right: 0rem;
  list-style-position: inside; 
}
[dir="rtl"] #cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 0rem;
  padding-right: 1rem; 
  list-style-position: inside; 
}
#cardconatiner .card .card-text ul li 
{
  font-family: 'ridley_groteskregular';
  font-size: 0.8vw;
  text-transform: capitalize;
}

[dir="rtl"] #cardconatiner .card .card-text ul li 
{
  font-family: "Cairo", serif;
  font-size: 1vw;
  letter-spacing: 0.1vw;
  word-spacing: 0.1vw;
  font-weight: 500;
  text-transform: capitalize;
}
.cardprice 
{
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
}
[dir="rtl"] .cardprice 
{
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
}
.cardprice h5 
{
  color: white;
  font-size: 1.5vw;
  font-family: 'ridley_groteskextrabold';
  text-transform: uppercase;
}
[dir="rtl"] .cardprice h5 
{
  color: white;
  font-size: 2vw;
  word-spacing: 0.1vw;
  font-family: "Cairo", serif;
  text-transform: none;
  font-weight: 900;
}
.cardprice p
{
  color: white;
  font-size: 2vw;
  padding-bottom: 0.5vh;
  padding-top: 0vh;
}
[dir="rtl"] .cardprice p
{
  color: white;
  font-size: 2vw;
  padding-bottom: 0vh;
  padding-top: 1vh;
}
.cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 1vw;
  padding-bottom: 1vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
[dir="rtl"] .cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 1vw;
  padding-bottom: 0vh;
  padding-top: 1vh;
  text-transform: uppercase;
}
.cardprice span:nth-child(4)
{
  text-decoration: line-through;
  text-decoration-thickness: 0.2vh;
}
#cardconatiner .card #cardbtn {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  /* justify-content: center; */
}

#cardconatiner .card #cardbtn .btn {
  font-family: 'ridley_groteskregular';
  text-transform: uppercase;
  font-size: 1vw;
}
[dir="rtl"] #cardconatiner .card #cardbtn .btn {
  font-family: "Cairo", serif;
  text-transform: uppercase;
  font-size: 1vw;
  font-weight: 700;
}

#serviceeffect {
  height: 40vh;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #2c2c2c;
}

#servicecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  animation-name: servicemove;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

[dir="rtl"] #servicecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: servicemove2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes servicemove {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes servicemove2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}


#servicecontent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#servicecontent h1 {
  color: white;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  font-size: 8vw;
}
[dir="rtl"] #servicecontent h1 {
  color: white;
  text-transform: uppercase;
  font-size: 10vw;
  font-family: "Cairo", serif;
  font-weight: 900;
}

#tmld {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #2c2c2c;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

#tmldimage {
  width: 25%;
  height: 50vh;
  /* border-radius: 35vw; */
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Correct translate to center */
}

[dir="rtl"] #tmldimage {
  width: 25%;
  height: 50vh;
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Correct translate to center */
}

#tmldimage img:nth-child(1)
{
  position: absolute;
  top: 50%;
    left: 50%;
    height: 50%; /* Set the desired height */
    width: 50%; /* Set the desired width */
    transform: translate(-50%, -50%);
}
[dir="rtl"] #tmldimage img:nth-child(1)
{
  position: absolute;
  top: 50%;
    right: 50%;
    height: 50%; /* Set the desired height */
    width: 50%; /* Set the desired width */
    transform: translate(50%, -50%);
}
#tmldimage img:nth-child(2) {
  height: 100%;
  width: 100%;
  position: absolute;
  animation-name: rotatetmld;
  animation-duration: 20s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: normal;
}

[dir="rtl"] #tmldimage img:nth-child(2) {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  animation-name: rotatetmld2;
  animation-duration: 20s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: normal;
}

@keyframes rotatetmld {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotatetmld2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

#tmldrow1 {
  height: 50vh;
  width: 100%;
  overflow: hidden;
}

#tmldrow1 .tmldrow1colleft {
  display: flex;
  justify-content: center;
  align-items: center;
}

#tmldrow1colleftcontnet {
  width: 40%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#tmldrow1colleftcontnet h4 {
  font-size: 3vh;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  color: #3fff86;
  line-height: 4vh;
}
[dir="rtl"] #tmldrow1colleftcontnet h4 {
  font-size: 3.5vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  color: #3fff86;
  line-height: normal;
}
#tmldrow1colleftcontnet p {
  font-size: 2vh;
  line-height: 1.5vh;
  font-family: 'ridley_groteskmedium';
  text-transform: capitalize;
  color: white;
}
[dir="rtl"] #tmldrow1colleftcontnet p {
  font-size: 2.5vh;
  line-height: 2vh;
  font-family: "Cairo", serif;
  text-transform: capitalize;
  color: white;
}
#tmldrow1 .tmldrow1colright {
  display: flex;
  justify-content: center;
  align-items: center;
}

#tmldrow1colrightcontnet {
  width: 40%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#tmldrow1colrightcontnet h4 {
  font-size: 3vh;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  color: #3fff86;
  line-height: 4vh;
}
[dir="rtl"] #tmldrow1colrightcontnet h4 {
  font-size: 3.5vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  color: #3fff86;
  line-height: normal;
}
#tmldrow1colrightcontnet p {
  font-size: 2vh;
  line-height: 1.5vh;
  font-family: 'ridley_groteskmedium';
  text-transform: capitalize;
  color: white;
}
[dir="rtl"] #tmldrow1colrightcontnet p {
  font-size: 2.5vh;
  line-height: 2vh;
  font-family: "Cairo", serif;
  text-transform: capitalize;
  color: white;
}
#tmldrow2 {
  height: 50vh;
  width: 100%;
}

#tmldrow2 .tmldrow2colleft {
  display: flex;
  justify-content: center;
  align-items: center;
}

#tmldrow2colleftcontnet {
  width: 40%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#tmldrow2colleftcontnet h4 {
  font-size: 3vh;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  color: #3fff86;
  line-height: 4vh;
}
[dir="rtl"] #tmldrow2colleftcontnet h4 {
  font-size: 3.5vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  color: #3fff86;
  line-height: normal;
}

#tmldrow2colleftcontnet p {
  font-size: 2vh;
  line-height: 1.5vh;
  font-family: 'ridley_groteskmedium';
  text-transform: capitalize;
  color: white;
}

[dir="rtl"] #tmldrow2colleftcontnet p {
  font-size: 2.5vh;
  line-height: 2vh;
  font-family: "Cairo", serif;
  text-transform: capitalize;
  color: white;
}
#tmldrow2 .tmldrow2colright {

  display: flex;
  justify-content: center;
  align-items: center;
}

#tmldrow2colrightcontnet {
  width: 40%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#tmldrow2colrightcontnet h4 {
  font-size: 3vh;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  color: #3fff86;
  line-height: 4vh;
}
[dir="rtl"] #tmldrow2colrightcontnet h4 {
  font-size: 3.5vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  color: #3fff86;
  line-height: normal;
}

#tmldrow2colrightcontnet p {
  font-size: 2vh;
  line-height: 1.5vh;
  font-family: 'ridley_groteskmedium';
  text-transform: capitalize;
  color: white;
}

[dir="rtl"] #tmldrow2colrightcontnet p {
  font-size: 2.5vh;
  line-height: 2vh;
  font-family: "Cairo", serif;
  text-transform: capitalize;
  color: white;
}
#venture {
  width: 100%;
  height: auto;
  overflow: hidden;
  /* background-image: url("image/bgwhite.jpg"); */
  background-size: cover;
  background-repeat: no-repeat;
}
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -12; /* Keeps particles in the background */
  pointer-events: none; /* Ensures particles don't block content interaction */
}
#ventureanimation {
  height: 30vh;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
[dir="rtl"] #ventureanimation {
  height: 30vh;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.venturecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: venturemove;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
[dir="rtl"] .venturecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: venturemove2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ventureheading 
{
  width: 100%;
  height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ventureheading  h1 {
  color: #2c2c2c;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  font-size: 5vw;
} 
[dir="rtl"] .ventureheading  h1 {
  color: #2c2c2c;
  text-transform: uppercase;
  font-family: "Cairo", sans-serif;
  font-size: 6.9vw;
  font-weight: 900;
} 

#venturecontent {
  height: 30vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#venturecontent h4 {
  height: 100%;
  width: 40%;
  display: flex;
  color: #2c2c2c;
  justify-content: flex-start;
  align-items: center;
  text-align: justify;
  text-transform: capitalize;
  font-family: 'ridley_groteskextrabold';
  font-size: 2.7vh;
}

[dir="rtl"] #venturecontent h4 {
  height: 100%;
  width: 40%;
  display: flex;
  color: #2c2c2c;
  justify-content: flex-end;
  align-items: center;
  text-align: justify;
  font-family: "Cairo", serif;
  font-weight: 900;
  font-size: 2.7vh;
  text-transform: capitalize;
}
@keyframes venturemove {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes venturemove2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

#ssep {
  width: 100%;
  height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

#sseptop {
  height: 40%;
  width: 60%;
  display: flex;
  border: 1px solid black;
}

#sseptopleft {
  width: 50%;
  height: 100%;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="rtl"] #sseptopleft {
  width: 50%;
  height: 100%;
  border-right: none;
  border-left: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sseptopleft img {
  width: 70%;
}

#sseptopright {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sseptopright p {
  width: 70%;
  height: auto;
  font-family: 'ridley_grotesklight';
  font-size: 1.5vh;
  color: #2c2c2c;
  font-weight: 600;
  text-align: justify;
  text-transform: capitalize;
}
[dir="rtl"] #sseptopright p {
  width: 70%;
  height: auto;
  font-family: "Cairo", serif;
  font-weight: 600;
  font-size: 1.6vh;
  color: #2c2c2c;
  text-align: justify;
  text-transform: capitalize;
  letter-spacing: 0.1vw;
}
#ssepbottom {
  height: 40%;
  height: 25vh;
  width: 60%;
  display: flex;
  border: 1px solid black;
}

#ssepbottomleft {
  width: 50%;
  height: 100%;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="rtl"] #ssepbottomleft {
  width: 50%;
  height: 100%;
  border-right: none;
  border-left: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ssepbottomleft img {
  width: 70%;
}

#ssepbottomright {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ssepbottomright p {
  width: 70%;
  height: auto;
  font-family: 'ridley_grotesklight';
  font-size: 1.5vh;
  color: #2c2c2c;
  font-weight: 600;
  text-align: justify;
  text-transform: capitalize;
}
[dir="rtl"] #ssepbottomright p {
  width: 70%;
  height: auto;
  font-family: "Cairo", serif;
  font-weight: 600;
  font-size: 1.6vh;
  color: #2c2c2c;
  text-align: justify;
  text-transform: capitalize;
  letter-spacing: 0.1vw;
}
#branding {
  height: auto;
  width: 100%;
}

#brandingcol1 {
  height: auto;
  width: 100%;
}

#brandingcol2 {
  height: auto;
  width: 100%;
}

#brandingcol3 {
  height: auto;
  width: 100%;
}

#brandingcol4 {
  height: auto;
  width: 100%;
}

.brandcard {
  height: 25vh;
  background-color: transparent !important;
  border: 1px solid black;
}

.brandcard:hover {
  background-color: #dcdfe265 !important;
}

.brandcard .card-header {
  width: 100%;
  height: 40%;
  background-color: transparent !important;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brandcard .card-header h3 {
  width: 100%;
  height: 100%;
  font-family: 'ridley_groteskextrabold';
  font-size: 1.3vw;
  text-transform: uppercase;
  display: flex;
  color: #2c2c2c;
  justify-content: center;
  align-items: center;
  text-align: center;
}
[dir="rtl"] .brandcard .card-header h3 {
  width: 100%;
  height: 100%;
  font-family: "Cairo", serif;
  font-size: 1.5vw;
  font-weight: 900;
  text-transform: uppercase;
  display: flex;
  color: #2c2c2c;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.brandcard .card-body {
  width: 100%;
  height: 60%;
}

.brandcard .card-body p {
  font-family: 'ridley_grotesklight';
  font-size: .8vw;
  font-weight: 600;
  text-transform: capitalize;
  color: #2c2c2c;
  text-align: justify;
}
[dir="rtl"] .brandcard .card-body p {
  font-family: "Cairo", serif;
  font-size: 0.9vw;
  font-weight: 600;
  text-transform: capitalize;
  color: #2c2c2c;
  text-align: justify;
}
.communityrow {
  height: 40vh;
  width: 100%;
  background-color: #2c2c2c;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  overflow: hidden;
  white-space: nowrap;
}

.communitycontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: commove;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

[dir="rtl"] .communitycontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: commove2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.communitycontent {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.communitycontent h1 {
  color: white;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  font-size: 6.7vw;
}
[dir="rtl"] .communitycontent h1 {
  color: white;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  font-size: 7.8vw;
  font-weight: 900;
}
@keyframes commove {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes commove2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

.multiimage {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  border-bottom: 3px solid white;
  background-color: #2c2c2c;
  display: flex;
  flex-direction: row;
}

.multiimageleft {
  width: 50%;
  height: 100%;
  border-right: 3px solid white;
  background-color: #2c2c2c;
  position: relative;
}

[dir="rtl"] .multiimageleft {
  width: 50%;
  height: 100%;
  border-right: none;
  border-left: 3px solid white;
  position: relative;
}

.multiimageleft img:nth-child(1) {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 15;
}

[dir="rtl"] .multiimageleft img:nth-child(1) {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 15;
  top: 0%;
  right: 0%;
}

/* .multiimageleft img:nth-child(2)
  {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  } */
.multimageright {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.multiimagerightcontent {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5vw;
}
.multiimagerightcontent h4 {
  font-family: 'ridley_groteskbold';
  color: white;
  font-size: 2vw;
  text-transform: uppercase;
  text-align:left;
}

[dir="rtl"] .multiimagerightcontent h4 {
  font-family: "Cairo", serif;
  color: white;
  font-size: 2vw;
  font-weight: 900;
  text-transform: uppercase;
  text-align:justify;
}

.multiimagerightcontent p:nth-child(2) {
  font-family: 'ridley_grotesklight';
  color: white;
  text-transform: capitalize;
  font-size: 1vw;
  text-align: justify;
}
[dir="rtl"] .multiimagerightcontent p:nth-child(2) {
  font-family: "Cairo", serif;
  color: white;
  text-transform: capitalize;
  font-size: 1vw;
  font-weight: 400;
  text-align: justify;
}
.multiimagerightcontent p:nth-child(3) {
  font-family: 'ridley_grotesklight';
  color: white;
  text-transform: capitalize;
  font-size: 1vw;
  text-align: justify;
}
[dir="rtl"] .multiimagerightcontent p:nth-child(3) {
  font-family: "Cairo", serif;
  color: white;
  text-transform: capitalize;
  font-size: 1vw;
  font-weight: 400;
  text-align: justify;
}
.multiimagerightcontentimg {
  width: 100%;
  height: 12vh;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.multiimagerightcontentimg .mulimgs {
  width: 20%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20%;
  cursor: pointer;
}

/* .multiimagerightcontentimg .mulimgs:hover {
  transform: scale(0.8, 0.8);
  border: 2px solid white;
} */
#imgdisplay 
{
  width: 100%;
  height: 150vh;
  background-color: #2c2c2c;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid white
}
#watchfixed{
  width: 100%;
  height: 30vh;
  position: sticky;
  top: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#watchfixed h1 
{
  text-transform: uppercase;
  -webkit-text-stroke: 2px white;
  color: transparent;
  font-size: 35vh;
  font-family: 'ridley_groteskbold';
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

[dir="rtl"] #watchfixed h1 
{
  text-transform: uppercase;
  -webkit-text-stroke: 2px white;
  color: transparent;
  font-size: 55vh;
  font-family: "Cairo", serif;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#imgdisplaytoph1 
{
  width: 20vw;
  height: 30vh;
  color: white;
  position: absolute;
  top: 10vh;
  left: 20%;
  font-family: 'ridley_groteskbold';
  font-size: 2.5vw;
  text-transform: capitalize;
}
[dir="rtl"]  #imgdisplaytoph1 
{
  width: 20vw;
  height: 30vh;
  color: white;
  position: absolute;
  top: 10vh;
  left: 0%;
  right: 20%;
  font-family: "Cairo", serif;
  font-size: 2.5vw;
  font-weight: 900;
  text-align: right;
  text-transform: capitalize;
}
#imgdisplay #imgtext:nth-child(3)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 40vh;
  left: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(3)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 40vh;
  left: 0%;
  right: 20%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(3) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(4)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 40vh;
  right: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(4)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 40vh;
  right: 60%;
  left: 0%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(4) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(5)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 80vh;
  left: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(5)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 80vh;
  left: 0%;
  right: 20%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(5) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(6)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 80vh;
  right: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(6)
{
  width: 20vw;
  height: 35vh;
  position: absolute;
  top: 80vh;
  right: 60%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(6) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplaybottomh1 
{
  width: 60vw;
  height: 30vh;
  color: white;
  position: absolute;
  top: 130vh;
  left: 20%;
  font-family: 'ridley_groteskbold';
  font-size: 2vw;
  text-transform: capitalize;
  text-align: left;
}
[dir="rtl"]  #imgdisplaybottomh1 
{
  width: 60vw;
  height: 30vh;
  color: white;
  position: absolute;
  top: 130vh;
  left: 0%;
  right: 20%;
  font-family: "Cairo", serif;
  font-weight: 900;
  font-size: 2vw;
  text-transform: capitalize;
  text-align: right;
}
#footers 
{
  height: 100vh;
  width: 100vw;
  border-bottom: 3px solid white;
  background-color: #2c2c2c;
  display: flex;
  overflow: hidden;
}
[dir="rtl"] #footers 
{
  height: 100vh;
  width: 100vw;
  border-bottom: 3px solid white;
  background-color: #2c2c2c;
  display: flex;
  overflow: hidden;
}
#footerleft 
{
  height: 100%;
  flex-basis: 50vw;
  border-right: 3px solid white;
  border-left: none;
}
[dir="rtl"] #footerleft 
{
  height: 100%;
  flex-basis: 50vw;
  border-left: 3px solid white;
  border-right: none;
}
#footerleft iframe 
{
  width: 100%;
  height: 100%;
}
[dir="rtl"] #footerleft iframe 
{
  width: 100%;
  height: 100%;
}
#footerright 
{
  flex-basis: 50vw;
  height: 100%;
}
#footerrightlogo 
{
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#footerrightlogo img 
{
  width: 60%;
  height: 60%;
}
#footerrighthead 
{
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#footerrighthead h5 
{
  color: white;
  text-transform:uppercase;
  font-family: 'ridley_groteskbold';
  font-size: 5vw;
}
[dir="rtl"] #footerrighthead h5 
{
  color: white;
  text-transform:uppercase;
  font-family: "Cairo", serif;
  font-weight: 900;
  font-size: 6vw;
}
#footerbtn 
{
  height: 10%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#footerbtn .btn 
{
  padding: 1vw 3vw;
}
#socialmediabtn 
{
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1vw;
}
#socialmediabtn img 
{
  cursor: pointer;
  width: 2vw;
}
#copyrightcontent 
{
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#copyrightcontent p 
{
  color: #6e6c6c;
  text-transform: capitalize;
  font-family: 'ridley_grotesklight';
  font-weight: lighter;
  font-size: 80%;
}
/* laptop */
@media only screen and (min-width: 1101px) and (max-width: 1600px) {
  #main {
    min-height: 100%;
    width: 100vw;
    padding-top: 0.01px;
    position: relative;
    overflow: hidden;
  }
  
  [dir="rtl"] #main {
    min-height: 100%;
    width: 100vw;
    padding-top: 0.01px;
    position: relative !important;
    overflow: hidden;
  }
  #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0vw;
    padding-right: 1vw;
  }
  [dir="rtl"] #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-right: 0vw;
    padding-left: 1vw;
  }
  #mode {
    height: 8vh;
    width: 100%;
    position: fixed;
    z-index: 888;
    top: 40vh;
    display: flex;
    justify-content: flex-end;
    padding-right: 1vw;
    padding-left: 0vw;
  }
[dir="rtl"]   #mode {
  height: 8vh;
  width: 100%;
  position: fixed;
  z-index: 888;
  top: 40vh;
  display: flex;
  justify-content: flex-end;
  padding-right: 0vw;
  padding-left: 1vw;
}
  #modeouter {
    width: 7%;
    height: 100%;
    border: 3px solid white;
    background-color: white;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
  }

  #modeinner {
    width: 50%;
    height: 100%;
    border-radius: 60%;
    background-color: #2c2c2c;
  }
  .btnstyle {
    padding: 15px 15px;
    font-size: 1vw;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
  
  .btnstyle2 {
    padding: 15px 15px;
    font-size: 1vw;
    line-height: auto;
    color: #2c2c2c !important;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
   .btnstyle2rtl {
    padding: 15px 15px;
    font-size: 1.2vw !important;
    line-height: auto;
    color: #2c2c2c;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1vw;
  }
  .btnstylertl {
    padding: 15px 15px;
    font-size: 1.2vw !important;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    letter-spacing: .1vw;
  }
  .btn:focus,
  .btn:active,
  .dropdown-toggle:active,
  .dropdown-toggle:focus {
    outline: none;
    /* Remove focus outline */
    box-shadow: none;
    /* Remove Bootstrap focus box shadow */
    /* Remove the border during focus/active */
  }
  
  .btn:hover,.dropdown-toggle:hover {
    background-color: #2ad8ff;
    color: #2c2c2c;
  }
  .dropdown-menu 
  {
    background-color: #2c2c2c;
    border: 2px solid white;
    font-family: 'ridley_groteskbold';
    text-transform: uppercase;
    text-align: justify;
  }
  .dropdown-item 
  {
    color: white;
    font-size: 1vw;
  }
  .dropdown-item:hover 
  {
    background-color: #2ad8ff;
    color: #2c2c2c;
  }
  .custom-dropdown::after {
    margin-left: 5px; 
    margin-right: 0px;/* Adjust this to control space between text and icon */
  }
  [dir="rtl"] .custom-dropdown::after {
    margin-left: 0px; 
    margin-right: 5px;/* Adjust this to control space between text and icon */
  }
  #hamburg {
    display: none;
  }

  #hamburg #menuimg {
    cursor: pointer;
  }

  .btnhover1 {
    color: #2c2c2c;
    background-color: white;
    border: 2px solid white;
  }

  .btnhover2 {
    color: white;
    background-color: #2c2c2c;
    border: 2px solid #2c2c2c;
  }

  #banner {
    height: 100vh;
    width: 100%;
    position: relative;
  }

  #banner video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
  }

  #banner #overlay {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50%, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #overlay img {
    height: 100%;
    width: 70%;
  }

  #work {
    height: 100vh;
    width: 100%;
  }

  #work .row {
    height: 100%;
    width: 100%;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    margin: 0px;
  }

  #work .col-left {
    height: 100%;
    background-color: #2c2c2c;
    border-right: 3px solid white;
    padding: 0%;
    border-left: none;
  }
[dir="rtl"]  #work .col-left {
  height: 100%;
  background-color: #2c2c2c;
  border-right: none;
  padding: 0%;
  border-left: 3px solid white;
}
  #work .col-left #topcontent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  [dir="rtl"] #work .col-left #topcontent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #topcontent #topcontenth1 {
    width: 80%;
    height: auto;
  }

  [dir="rtl"] #topcontent #topcontenth1 {
    width: 80%;
    height: auto;
  }

  #topcontent h1 {
    color: white;
    font-family: 'ridley_groteskbold';
    color: #2ad8ff;
    letter-spacing: -3px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 7vw;
    font-weight: 800;
    line-height: 7vw;
  }

  [dir="rtl"] #topcontent h1 {
    color: white;
    font-family: "Cairo", sans-serif !important;
    color: #2ad8ff;
    letter-spacing: 0px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 8vw;
    font-weight: 800;
    line-height: 7vw;
    text-align: right;
  }

  #work .col-left #bottomcontent {
    width: 100%;
    height: 50%;
    display: none;
  }

  #work .col-right {
    height: 100%;
    background-color: #2c2c2c;
    padding: 0%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .trans {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3%;
  }

  #colrighttop {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0px 0px;
  }

  #colrighttop p {
    width: 70%;
    color: white;
    font-family: 'ridley_groteskregular';
    text-align: justify;
    font-size: 2.5vh;
    margin: 0%;
  }
[dir="rtl"] #colrighttop p {
  width: 70%;
  color: white;
  font-family: "Cairo", sans-serif !important;
  text-align: justify;
  font-size: 3vh;
  margin: 0%;
}
  #colrightbottom {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 0px;
  }

  #colrightbottom p {
    width: 70%;
    color: white;
    font-family: 'ridley_groteskregular';
    text-align: justify;
    font-size: 2.5vh;
  }
  [dir="rtl"] #colrightbottom p {
    width: 70%;
    color: white;
    font-family: "Cairo", sans-serif !important;
    text-align: justify;
    font-size: 3vh;
  }
  /* multipliereffect */
  #multipliereffect {
    width: 100%;
    height: 40vh;
    white-space: nowrap;
    overflow: hidden;
    background-color: #2c2c2c;

  }

  #container {
    width: 100%;
    height: 100%;
    display: inline-block;
    animation-name: move;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  [dir="rtl"] #container {
    width: 100%;
    height: 100%;
    display: inline-block;
    animation-name: move2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  #container h1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8vw;
    font-family: 'ridley_groteskextrabold';
    color: white;
  }
[dir="rtl"] #container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5vw;
  font-family: "Cairo", sans-serif !important;
  font-weight: 900;
  color: white;
}
  @keyframes move {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes move2 {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(100%);
    }
  }

  #cardconatiner {
    height: auto;
    width: 100%;
    overflow: hidden;
    background-color: #2c2c2c;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
  }
  
  #cardconatiner .row {
    height: auto;
    width: 100%;
  }
  
  #cardconatiner .card {
    height: auto;
    width: 100%;
    border: 2px solid white;
    background-color: #2c2c2c;
    transition: all 0.5 ease-in-out;
  
  }
  
  #cardconatiner .card .card-img-top {
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    /* Align images horizontally */
  }
  
  #cardconatiner .card .card-img-top img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s ease-in-out;
    /* Align all images to the start position */
    opacity: 0;
    /* Initially hide images */
    z-index: 0;
    /* Set z-index to manage stacking */
  }
  
  #cardconatiner .card .card-img-top img.active {
    opacity: 1;
    /* Show the active image */
    transform: translateX(0);
    /* Show the active image */
    z-index: 1;
    /* Ensure the active image is on top */
  }
  
  #cardconatiner .card .card-img-top img.hidden {
    opacity: 0;
    /* Hide the previous image */
    transform: translateX(-100%);
    /* Slide out the previous image */
    z-index: 0;
    /* Ensure the hidden image is behind */
  }
  
  [dir="rtl"] #cardconatiner .card .card-img-top img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 1s ease-in-out;
    opacity: 0;
    /* Initially hide images */
    z-index: 0;
    /* Set z-index to manage stacking */
  }
  
  [dir="rtl"] #cardconatiner .card .card-img-top img.active {
    opacity: 1;
    /* Show the active image */
    transform: translateX(0);
    /* Show the active image */
    z-index: 1;
    /* Ensure the active image is on top */
  }
  
  [dir="rtl"] #cardconatiner .card .card-img-top img.hidden {
    opacity: 0;
    /* Hide the previous image */
    transform: translateX(100%);
    /* Slide out the previous image */
    z-index: 0;
    /* Ensure the hidden image is behind */
  }
  
  .card-img-top img:nth-child(1) {
    z-index: 7;
  }
  
  .card-img-top img:nth-child(2) {
    z-index: 6;
  }
  
  ._canvas_container {
    z-index: 999999 !important;
    pointer-events: none;
  
  }
  
  #cardconatiner .card .card-body {
    height: auto;
    width: 100%;
    padding: 0;
    border-top: 2px solid white;
  }
  
  #cardconatiner .card .card-title {
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0%;
    font-family: 'ridley_groteskextrabold';
    color: white;
    font-size: 2.5vw;
    text-transform: uppercase;
  }
  [dir="rtl"] #cardconatiner .card .card-title {
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0%;
    font-family: 'ridley_groteskextrabold';
    color: white;
    font-size: 2.5vw;
    text-transform: uppercase;
  }
  #cardconatiner .card .card-text {
    height: 25vh;
    width: 100%;
    margin: 0%;
    padding: 0% 2%;
    font-family: 'ridley_groteskregular';
    color: white;
  }
  
  [dir='rtl'] #cardconatiner .card .card-text {
    height: 25vh;
    width: 100%;
    margin: 0%;
    padding: 0% 2%;
    font-family: "Cairo", serif;
    color: white;
  }
  #cardconatiner .card .card-text ul 
  {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: justify;
    margin: 0;
    gap: 2vh;
    padding-left: 1rem; 
    padding-right: 0rem;
    list-style-position: inside; 
  }
  [dir="rtl"] #cardconatiner .card .card-text ul 
  {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: justify;
    margin: 0;
    gap: 2vh;
    padding-left: 0rem;
    padding-right: 1rem; 
    list-style-position: inside; 
  }
  #cardconatiner .card .card-text ul li 
  {
    font-family: 'ridley_groteskregular';
    font-size: 1vw;
    text-transform: capitalize;
  }
  
  [dir="rtl"] #cardconatiner .card .card-text ul li 
  {
    font-family: "Cairo", serif;
    font-size: 1.2vw;
    letter-spacing: 0.1vw;
    word-spacing: 0.1vw;
    font-weight: 500;
    text-transform: capitalize;
  }
  .cardprice 
  {
    height: 10vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
  }
  [dir="rtl"] .cardprice 
  {
    height: 10vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
  }
  .cardprice h5 
  {
    color: white;
    font-size: 1.5vw;
    font-family: 'ridley_groteskextrabold';
    text-transform: uppercase;
  }
  [dir="rtl"] .cardprice h5 
  {
    color: white;
    font-size: 2vw;
    word-spacing: 0.1vw;
    font-family: "Cairo", serif;
    text-transform: none;
    font-weight: 900;
  }
  .cardprice p
  {
    color: white;
    font-size: 1.5vw;
    padding-bottom: 0.5vh;
    padding-top: 1vh;
  }
  [dir="rtl"] .cardprice p
  {
    color: white;
    font-size: 1.5vw;
    padding-bottom: 0vh;
    padding-top: 2vh;
  }
  .cardprice span 
  {
    font-family: 'ridley_groteskextrabold';
    color: white;
    font-size: 1.2vw;
    padding-bottom: 1.5vh;
    padding-top: 0vh;
    text-transform: uppercase;
  }
  [dir="rtl"] .cardprice span 
  {
    font-family: 'ridley_groteskextrabold';
    color: white;
    font-size: 1.2vw;
    padding-bottom: 0vh;
    padding-top: 0vh;
    text-transform: uppercase;
  }
  .cardprice span:nth-child(4)
  {
    text-decoration: line-through;
    text-decoration-thickness: 0.2vh;
  }
  #cardconatiner .card #cardbtn {
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0%;
    /* justify-content: center; */
  }
  
  #cardconatiner .card #cardbtn .btn {
    font-family: 'ridley_groteskregular';
    text-transform: uppercase;
    font-size: 1vw;
  }
  [dir="rtl"] #cardconatiner .card #cardbtn .btn {
    font-family: "Cairo", serif;
    text-transform: uppercase;
    font-size: 1.2vw;
    font-weight: 700;
  }
  #serviceeffect {
    height: 40vh;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: #2c2c2c;
  }
  
  #servicecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    animation-name: servicemove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] #servicecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: servicemove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  @keyframes servicemove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes servicemove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  
  #servicecontent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #servicecontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 7.6vw;
  }
  [dir="rtl"] #servicecontent h1 {
    color: white;
    text-transform: uppercase;
    font-size: 9.6vw;
    font-family: "Cairo", serif;
    font-weight: 900;
  }

  #tmld {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  #tmldimage {
    width: 21%;
    height: 45vh;
    /* border-radius: 35vw; */
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Correct translate to center */
  }

  [dir="rtl"] #tmldimage {
    width: 21%;
    height: 45vh;
    /* border-radius: 35vw; */
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Correct translate to center */
  }

  #tmldimage img:nth-child(1) {
    height: 50%;
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  [dir="rtl"] #tmldimage img:nth-child(1) {
    height: 50%;
    width: 50%;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
  }

  #tmldimage img:nth-child(2) {
    height: 100%;
    width: 100%;
    position: absolute;
    animation-name: rotatetmld;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  [dir="rtl"] #tmldimage img:nth-child(2) {
    height: 100%;
    width: 100%;
    position: absolute;
    animation-name: rotatetmld2;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  @keyframes rotatetmld {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes rotatetmld2 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  #tmldrow1 {
    height: 50vh;
    width: 100%;
  }

  #tmldrow1 .tmldrow1colleft {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #tmldrow1colleftcontnet {
    width: 40%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #tmldrow1colleftcontnet h4 {
    font-size: 4vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
[dir="rtl"] #tmldrow1colleftcontnet h4 {
  font-size: 4.5vh;
  text-transform: uppercase;
  font-family: "Cairo", sans-serif !important;
  color: #3fff86;
  line-height: 5.5vh;
}
  #tmldrow1colleftcontnet p {
    font-size: 2.5vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow1colleftcontnet p {
    font-size: 3vh;
    line-height: 2.5vh;
    font-family: "Cairo", sans-serif !important;
    text-transform: capitalize;
    color: white;
  }

  #tmldrow1 .tmldrow1colright {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #tmldrow1colrightcontnet {
    width: 40%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #tmldrow1colrightcontnet h4 {
    font-size: 4vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
[dir="rtl"] #tmldrow1colrightcontnet h4 {
  font-size: 4.5vh;
  text-transform: uppercase;
  font-family: "Cairo", sans-serif !important;
  color: #3fff86;
  line-height: 5.5vh;
}
  #tmldrow1colrightcontnet p {
    font-size: 2.5vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow1colrightcontnet p {
    font-size: 3vh;
    line-height: 2.5vh;
    font-family: "Cairo", sans-serif !important;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 {
    height: 50vh;
    width: 100%;

  }

  #tmldrow2 .tmldrow2colleft {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #tmldrow2colleftcontnet {
    width: 40%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #tmldrow2colleftcontnet h4 {
    font-size: 4vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
  [dir="rtl"]   #tmldrow2colleftcontnet h4 {
    font-size: 4.5vh;
  text-transform: uppercase;
  font-family: "Cairo", sans-serif !important;
  color: #3fff86;
  line-height: 5.5vh;
  }
  #tmldrow2colleftcontnet p {
    font-size: 2.5vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"]   #tmldrow2colleftcontnet p {
    font-size: 3vh;
    line-height: 2.5vh;
    font-family: "Cairo", sans-serif !important;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 .tmldrow2colright {

    display: flex;
    justify-content: center;
    align-items: center;
  }

  #tmldrow2colrightcontnet {
    width: 40%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #tmldrow2colrightcontnet h4 {
    font-size: 4vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
  [dir="rtl"]  #tmldrow2colrightcontnet h4 {
    font-size: 4.5vh;
    text-transform: uppercase;
    font-family: "Cairo", sans-serif !important;
    color: #3fff86;
    line-height: 5.5vh;
  }
  #tmldrow2colrightcontnet p {
    font-size: 2.5vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"]   #tmldrow2colrightcontnet p {
    font-size: 3vh;
    line-height: 2.5vh;
    font-family: "Cairo", sans-serif !important;
    text-transform: capitalize;
    color: white;
  }
  #venture {
    width: 100%;
    height: auto;
    overflow: hidden;
    /* background-image: url("image/bgwhite.jpg"); */
    background-size: cover;
    background-repeat: no-repeat;
  }
  #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -12; /* Keeps particles in the background */
    pointer-events: none; /* Ensures particles don't block content interaction */
  }
  #ventureanimation {
    height: 30vh;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  [dir="rtl"] #ventureanimation {
    height: 30vh;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .venturecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: venturemove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  [dir="rtl"] .venturecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: venturemove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .ventureheading 
  {
    width: 100%;
    height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .ventureheading  h1 {
    color: #2c2c2c;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 5vw;
  } 
  [dir="rtl"] .ventureheading  h1 {
    color: #2c2c2c;
    text-transform: uppercase;
    font-family: "Cairo", sans-serif;
    font-size: 6.9vw;
    font-weight: 900;
  } 
  
  #venturecontent {
    height: 30vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #venturecontent h4 {
    height: 100%;
    width: 40%;
    display: flex;
    color: #2c2c2c;
    justify-content: flex-start;
    align-items: center;
    text-align: justify;
    text-transform: capitalize;
    font-family: 'ridley_groteskextrabold';
    font-size: 3vh;
  }
  
  [dir="rtl"] #venturecontent h4 {
    height: 100%;
    width: 40%;
    display: flex;
    color: #2c2c2c;
    justify-content: flex-end;
    align-items: center;
    text-align: justify;
    font-family: "Cairo", serif;
    font-weight: 900;
    font-size: 3.5vh;
    text-transform: capitalize;
  }
  @keyframes venturemove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes venturemove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  #ssep {
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  
  #sseptop {
    height: 40%;
    width: 60%;
    display: flex;
    border: 1px solid black;
  }
  
  #sseptopleft {
    width: 50%;
    height: 100%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #sseptopleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #sseptopleft img {
    width: 70%;
  }
  
  #sseptopright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #sseptopright p {
    width: 70%;
    height: auto;
    font-family: 'ridley_groteskmedium';
    font-size: 1.5vh;
    color: #2c2c2c;
    font-weight: 900;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #sseptopright p {
    width: 70%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 1.6vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #ssepbottom {
    height: 40%;
    height: 25vh;
    width: 60%;
    display: flex;
    border: 1px solid black;
  }
  
  #ssepbottomleft {
    width: 50%;
    height: 100%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #ssepbottomleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #ssepbottomleft img {
    width: 70%;
  }
  
  #ssepbottomright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #ssepbottomright p {
    width: 70%;
    height: auto;
    font-family: 'ridley_groteskmedium';
    font-size: 1.5vh;
    color: #2c2c2c;
    font-weight: 900;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #ssepbottomright p {
    width: 70%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 1.6vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #branding {
    height: auto;
    width: 100%;
  }
  
  #brandingcol1 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol2 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol3 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol4 {
    height: auto;
    width: 100%;
  }
  
  .brandcard {
    height: 25vh;
    background-color: transparent !important;
    border: 1px solid black;
  }
  
  .brandcard:hover {
    background-color: #dcdfe265 !important;
  }
  
  .brandcard .card-header {
    width: 100%;
    height: 40%;
    background-color: transparent !important;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: 'ridley_groteskextrabold';
    font-size: 1.3vw;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  [dir="rtl"] .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: "Cairo", serif;
    font-size: 1.5vw;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .brandcard .card-body {
    width: 100%;
    height: 60%;
  }
  
  .brandcard .card-body p {
    font-family: 'ridley_groteskmedium';
    font-size: .7vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  [dir="rtl"] .brandcard .card-body p {
    font-family: "Cairo", serif;
    font-size: 0.8vw;
    font-weight: 700;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  .communityrow {
    height: 30vh;
    width: 100%;
    background-color: #2c2c2c;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .communitycontent {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 6.5vw;
  }
  [dir="rtl"] .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    font-size: 7.5vw;
    font-weight: 900;
  }
  @keyframes commove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes commove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  .multiimage {
    width: 100%;
    height: 100vh;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    overflow: hidden;
  }

  .multiimageleft {
    width: 50%;
    height: 100%;
    border-right: 3px solid white;
    position: relative;
    overflow: hidden;
  }

  .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
  }

  [dir="ltr"] .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
    top: 0;
    right: 0;
  }

  /* .multiimageleft img:nth-child(2)
  {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  } */
  .multimageright {
    width: 50%;
    height: 100%;
  }

  .multiimagerightcontent {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
  }

  .multiimagerightcontent h4 {
    font-family: 'ridley_groteskbold';
    color: white;
    font-size: 2.2vw
  }
[dir="rtl"] .multiimagerightcontent h4 {
  font-family: "Cairo", sans-serif !important;
  color: white;
  font-size: 2.4vw
}
  .multiimagerightcontent p:nth-child(2) {
    font-family: 'ridley_groteskmedium';
    color: white;
    text-transform: capitalize;
    font-size: 1vw;
  }
[dir="rtl"]  .multiimagerightcontent p:nth-child(2) {
  font-family: "Cairo", sans-serif !important;
  color: white;
  text-transform: capitalize;
  font-size: 1.2vw;
}
  .multiimagerightcontent p:nth-child(3) {
    font-family: 'ridley_groteskmedium';
    color: white;
    text-transform: capitalize;
    font-size: 1vw;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(3) {
    font-family: "Cairo", sans-serif !important;
    color: white;
    text-transform: capitalize;
    font-size: 1.2vw;
  }
  .multiimagerightcontentimg {
    width: 100%;
    height: 13vh;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }

  .multiimagerightcontentimg .mulimgs {
    width: 20%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20%;
  }
  #imgdisplay 
  {
    width: 100%;
    height: 150vh;
    background-color: #2c2c2c;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid white
  }
  #watchfixed{
    width: 100%;
    height: 30vh;
    position: sticky;
    top: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #watchfixed h1 
  {
    text-transform: uppercase;
    -webkit-text-stroke: 2px white;
    color: transparent;
    font-size: 35vh;
    font-family: 'ridley_groteskbold';
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #imgdisplaytoph1 
  {
    width: 25vw;
    height: 30vh;
    color: white;
    position: absolute;
    top: 10vh;
    left: 20%;
    font-family: 'ridley_groteskbold';
    font-size: 2vw;
    text-transform: capitalize;
  }
  [dir="rtl"]  #imgdisplaytoph1 
  {
    width: 25vw;
    height: 30vh;
    color: white;
    position: absolute;
    top: 10vh;
    left: 0%;
    right: 20%;
    font-family: "Cairo", sans-serif !important;
    font-size: 2.5vw;
    text-align: right;
    text-transform: capitalize;
  }
  #imgdisplay #imgtext:nth-child(3)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 40vh;
    left: 20%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(3)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 40vh;
    left: 0%;
    right: 20%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(3) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(4)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 40vh;
    right: 20%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(4)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 40vh;
    right: 60%;
    left: 0%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(4) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(5)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 80vh;
    left: 20%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(5)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 80vh;
    left: 0%;
    right: 20%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(5) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(6)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 80vh;
    right: 20%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(6)
  {
    width: 20vw;
    height: 35vh;
    position: absolute;
    top: 80vh;
    right: 60%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(6) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplaybottomh1 
  {
    width: 60vw;
    height: 30vh;
    color: white;
    position: absolute;
    top: 130vh;
    left: 20%;
    font-family: 'ridley_groteskbold';
    font-size: 2vw;
    text-transform: capitalize;
    text-align: left;
  }
  [dir="rtl"]  #imgdisplaybottomh1 
  {
    width: 60vw;
    height: 30vh;
    color: white;
    position: absolute;
    top: 130vh;
    left: 0%;
    right: 20%;
    font-family: "Cairo", sans-serif !important;
    font-size: 2.5vw;
    text-transform: capitalize;
    text-align: right;
  }
  #footers 
    {
      height: 100vh;
      width: 100vw;
      border-bottom: 3px solid white;
      background-color: #2c2c2c;
      display: flex;
      overflow: hidden;
    }
    #footerleft 
    {
      height: 100%;
      flex-basis: 50vw;
      border-right: 3px solid white;
      border-left: none;
    }
    [dir="rtl"] #footerleft 
    {
      height: 100%;
      flex-basis: 50vw;
      border-left: 3px solid white;
      border-right: none;
    }
    #footerleft iframe 
    {
      width: 100%;
      height: 100%;
    }
    #footerright 
    {
      flex-basis: 50vw;
      height: 100%;
    }
    #footerrightlogo 
    {
      width: 100%;
      height: 40%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
    #footerrightlogo img 
    {
      width: 60%;
      height: 60%;
    }
    #footerrighthead 
    {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #footerrighthead h5 
    {
      color: white;
      text-transform:uppercase;
      font-family: 'ridley_groteskbold';
      font-size: 5vw;
    }
    #footerbtn 
    {
      height: 10%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #socialmediabtn 
    {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 1vw;
    }
    #socialmediabtn img 
    {
      cursor: pointer;
      width: 2vw;
    }
    #copyrightcontent 
    {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #copyrightcontent p 
    {
      color: #6e6c6c;
      text-transform: capitalize;
      font-family: 'ridley_grotesklight';
      font-weight: lighter;
      font-size: 80%;
    }
}

/* ipad pro */
@media only screen and (min-width: 1024px) and (max-width: 1100px) {
  #hamburg {
    display: none;
  }
  #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0vw;
    padding-right: 2vw;
  }
  [dir="rtl"] #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-right: 0vw;
    padding-left: 2vw;
  }
  .btnstyle {
    padding: 20px 20px;
    font-size: 2vw;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
  
  .btnstyle2 {
    padding: 20px 20px;
    font-size: 2vw;
    line-height: auto;
    color: #2c2c2c !important;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
   .btnstyle2rtl {
    padding: 20px 20px;
    font-size: 2.5vw !important;
    line-height: auto;
    color: #2c2c2c;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1vw;
  }
  .btnstylertl {
    padding: 20px 20px;
    font-size: 2.5vw !important;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    letter-spacing: .1vw;
  }
  #mode {
    height: 5.5vh;
    width: 100%;
    position: fixed;
    z-index: 888;
    top: 40vh;
    display: flex;
    justify-content: flex-end;
    padding-right: 2vw;
    padding-left: 0vw;
  }
[dir="rtl"]   #mode {
  height: 5.5vh;
  width: 100%;
  position: fixed;
  z-index: 888;
  top: 40vh;
  display: flex;
  justify-content: flex-end;
  padding-right: 0vw;
  padding-left: 2vw;
}
  #modeouter {
    width: 15%;
    height: 100%;
    border: 3px solid white;
    background-color: white;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
  }

  #modeinner {
    width: 50%;
    height: 100%;
    border-radius: 60%;
    background-color: #2c2c2c;
  }
.btn:focus,
.btn:active,
.dropdown-toggle:active,
.dropdown-toggle:focus {
  outline: none;
  /* Remove focus outline */
  box-shadow: none;
  /* Remove Bootstrap focus box shadow */
  /* Remove the border during focus/active */
}

.btn:hover,.dropdown-toggle:hover {
  background-color: #2ad8ff;
  color: #2c2c2c;
}
.dropdown-menu 
{
  background-color: #2c2c2c;
  border: 2px solid white;
  font-family: 'ridley_groteskbold';
  text-transform: uppercase;
  text-align: justify;
}
.dropdown-item 
{
  color: white;
  font-size: 2vw;
}
.dropdown-item:hover 
{
  background-color: #2ad8ff;
  color: #2c2c2c;
}
.custom-dropdown::after {
  margin-left: 6px; 
  margin-right: 0px;/* Adjust this to control space between text and icon */
}
[dir="rtl"] .custom-dropdown::after {
  margin-left: 0px; 
  margin-right: 6px;/* Adjust this to control space between text and icon */
}
  #work {
    height: 50vh;
    width: 100%;
  }

  #work .row {
    height: 100%;
    width: 100%;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    margin: 0px;
  }

  #work .col-left {
    height: 100%;
    background-color: #2c2c2c;
    border-right: 3px solid white;
    padding: 0%;
    border-left: none;
  }
[dir="rtl"]  #work .col-left {
  height: 100%;
  background-color: #2c2c2c;
  border-right:none;
  padding: 0%;
  border-left: 3px solid white;

}
  #work .col-left #topcontent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #topcontent #topcontenth1 {
    width: 85%;
    height: auto;
  }

  #topcontent h1 {
    color: white;
    font-family: 'ridley_groteskbold';
    color: #2ad8ff;
    letter-spacing: -3px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 8vw;
    font-weight: 800;
    line-height: 7vw;
  }

  [dir="rtl"]  #topcontent h1 {
    color: white;
    font-family: "Cairo", sans-serif !important;
    color: #2ad8ff;
    letter-spacing: 0px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 9vw;
    font-weight: 800;
    line-height: 8vw;
  }
  #work .col-left #bottomcontent {
    width: 100%;
    height: 50%;
    display: none;
  }

  #work .col-right {
    height: 100%;
    background-color: #2c2c2c;
    padding: 0%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .trans {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3%;
  }

  #colrighttop {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0%;
  }
[dir="rtl"]  #colrighttop {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0%;
}
  #colrighttop p {
    width: 80%;
    color: white;
    font-family: 'ridley_groteskregular';
    text-align: start;
    font-size: 1.4vh;
    text-align: justify;
  }

  [dir="rtl"] #colrighttop p {
    width: 80%;
    color: white;
    font-family: "Cairo", sans-serif !important;
    text-align: start;
    font-size: 1.4vh;
    text-align: justify;
  }
  #colrightbottom {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0%;
  }
[dir="rtl"]  #colrightbottom {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0%;
}
  #colrightbottom p {
    width: 80%;
    color: white;
    font-family: 'ridley_groteskregular';
    text-align: start;
    font-size: 1.4vh;
    text-align: justify;
  }
[dir="rtl"]  #colrightbottom p {
  width: 80%;
  color: white;
  font-family: "Cairo", sans-serif !important;
  text-align: start;
  font-size: 1.5vh;
  text-align: justify;
}

/* multipliereffect */
#multipliereffect {
  width: 100%;
  height: 20vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
[dir="rtl"] #multipliereffect {
  width: 100%;
  height: 20vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
#container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

[dir="rtl"] #container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8vw;
  font-family: 'ridley_groteskextrabold';
  font-weight: bolder;
  color: white;
  text-transform: uppercase;
}
[dir="rtl"] #container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12vw;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
}

@keyframes move {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes move2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* cardconatiner */
#cardconatiner {
  height: auto;
  width: 100%;
  overflow: hidden;
  background-color: #2c2c2c;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

#cardconatiner .row {
  height: auto;
  width: 100%;
}

#cardconatiner .card {
  height: auto;
  width: 100%;
  border: 2px solid white;
  background-color: #2c2c2c;
  transition: all 0.5 ease-in-out;

}

#cardconatiner .card .card-img-top {
  height: 40vh;
  position: relative;
  overflow: hidden;
  display: flex;
  /* Align images horizontally */
}

#cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
  /* Align all images to the start position */
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

#cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

#cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(-100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

[dir="rtl"] #cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 1s ease-in-out;
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

.card-img-top img:nth-child(1) {
  z-index: 7;
}

.card-img-top img:nth-child(2) {
  z-index: 6;
}

._canvas_container {
  z-index: 999999 !important;
  pointer-events: none;

}

#cardconatiner .card .card-body {
  height: auto;
  width: 100%;
  padding: 0;
  border-top: 2px solid white;
}

#cardconatiner .card .card-title {
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 4.5vw;
  text-transform: uppercase;
}
[dir="rtl"] #cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 4.5vw;
  text-transform: uppercase;
}
#cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: 'ridley_groteskregular';
  color: white;
}

[dir='rtl'] #cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: "Cairo", serif;
  color: white;
}
#cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 1rem; 
  padding-right: 0rem;
  list-style-position: inside; 
}
[dir="rtl"] #cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 0rem;
  padding-right: 1rem; 
  list-style-position: inside; 
}
#cardconatiner .card .card-text ul li 
{
  font-family: 'ridley_groteskregular';
  font-size: 2.2vw;
  text-transform: capitalize;
}

[dir="rtl"] #cardconatiner .card .card-text ul li 
{
  font-family: "Cairo", serif;
  font-size: 2.5vw;
  letter-spacing: 0.1vw;
  word-spacing: 0.1vw;
  font-weight: 500;
  text-transform: capitalize;
}
.cardprice 
{
  height: 7vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
[dir="rtl"] .cardprice 
{
  height: 7vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
.cardprice h5 
{
  color: white;
  font-size: 3vw;
  font-family: 'ridley_groteskextrabold';
  text-transform: uppercase;
}
[dir="rtl"] .cardprice h5 
{
  color: white;
  font-size: 3vw;
  word-spacing: 0.1vw;
  font-family: "Cairo", serif;
  text-transform: none;
  font-weight: 900;
}
.cardprice p
{
  color: white;
  font-size: 2vw;
  padding-bottom: 0vh;
  padding-top: 0vh;
}
[dir="rtl"] .cardprice p
{
  color: white;
  font-size: 2vw;
  padding-bottom: 0vh;
  padding-top: 1vh;
}
.cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 2.5vw;
  padding-bottom: 0.7vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
[dir="rtl"] .cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 2.5vw;
  padding-bottom: 0vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
.cardprice span:nth-child(4)
{
  text-decoration: line-through;
  text-decoration-thickness: 0.2vh;
}
#cardconatiner .card #cardbtn {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  /* justify-content: center; */
}

#cardconatiner .card #cardbtn .btn {
  font-family: 'ridley_groteskregular';
  text-transform: uppercase;
  font-size: 1.5vw;
}
[dir="rtl"] #cardconatiner .card #cardbtn .btn {
  font-family: "Cairo", serif;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 700;
}

#serviceeffect {
  height: 20vh;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #2c2c2c;
}

#servicecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  animation-name: servicemove;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

[dir="rtl"] #servicecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: servicemove2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes servicemove {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes servicemove2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}


#servicecontent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#servicecontent h1 {
  color: white;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  font-size: 7.5vw;
}
[dir="rtl"] #servicecontent h1 {
  color: white;
  text-transform: uppercase;
  font-size: 9.5vw;
  font-family: "Cairo", serif;
  font-weight: 900;
}
  /* tmld style */
  #tmld {
    width: 100%;
    height: 80vh;
    position: relative;
  }

  #tmldimage {
    width: 30%;
    height: 30vh;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    border-radius: 0%;
    transform: translate(-50%, -50%);
    /* Correct translate to center */
  }

  [dir="rtl"] #tmldimage {
    width: 30%;
    height: 30vh;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    border-radius: 0%;
    transform: translate(-50%, -50%);
    /* Correct translate to center */
  }

  #tmldimage img:nth-child(1) {
    position: absolute;
    height: 50%;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  [dir="rtl"] #tmldimage img:nth-child(1) {
    position: absolute;
    height: 50%;
    width: 50%;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }

  #tmldimage img:nth-child(2) {
    height: 100%;
    width: 100%;
    position: absolute;
    animation-name: rotatetmld;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  [dir="rtl"] #tmldimage img:nth-child(2) {
    height: 100%;
    width: 100%;
    position: absolute;
    animation-name: rotatetmld2;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  @keyframes rotatetmld {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes rotatetmld2 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  #tmldrow1 {
    height: 50%;
    width: 100%;
  }

  #tmldrow1 .tmldrow1colleft {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  #tmldrow1colleftcontnet {
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  #tmldrow1colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
[dir="rtl"]   #tmldrow1colleftcontnet h4 {
  font-size: 3.5vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  color: #3fff86;
  line-height: 5vh;
}
  #tmldrow1colleftcontnet p {
    font-size: 1.5vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"]  #tmldrow1colleftcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow1 .tmldrow1colright {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
  }

  #tmldrow1colrightcontnet {
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #tmldrow1colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
  [dir="rtl"]  #tmldrow1colrightcontnet h4 {
    font-size: 3.5vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    color: #3fff86;
    line-height: 5vh;
  }
  #tmldrow1colrightcontnet p {
    font-size: 1.5vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"]  #tmldrow1colrightcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 {
    height: 50%;
    width: 100%;
  }

  #tmldrow2 .tmldrow2colleft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
  }

  #tmldrow2colleftcontnet {
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }

  #tmldrow2colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
  [dir="rtl"]  #tmldrow2colleftcontnet h4 {
    font-size: 3.5vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    color: #3fff86;
    line-height: 5vh;
  }
  #tmldrow2colleftcontnet p {
    font-size: 1.vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colleftcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 .tmldrow2colright {

    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #tmldrow2colrightcontnet {
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
  }

  #tmldrow2colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }

  [dir="rtl"] #tmldrow2colrightcontnet h4 {
    font-size: 3.5vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    color: #3fff86;
    line-height: 5vh;
  }

  #tmldrow2colrightcontnet p {
    font-size: 1.5vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colrightcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #venture {
    width: 100%;
    height: auto;
    overflow: hidden;
    /* background-image: url("image/bgwhite.jpg"); */
    background-size: cover;
    background-repeat: no-repeat;
  }
  #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -12; /* Keeps particles in the background */
    pointer-events: none; /* Ensures particles don't block content interaction */
  }
  #ventureanimation {
    height: 15vh;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  [dir="rtl"] #ventureanimation {
    height: 15vh;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .venturecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: venturemove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  [dir="rtl"] .venturecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: venturemove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .ventureheading 
  {
    width: 100%;
    height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .ventureheading  h1 {
    color: #2c2c2c;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 4.5vw;
  } 
  [dir="rtl"] .ventureheading  h1 {
    color: #2c2c2c;
    text-transform: uppercase;
    font-family: "Cairo", sans-serif;
    font-size: 6.2vw;
    font-weight: 900;
  } 
  
  #venturecontent {
    height: 30vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #venturecontent h4 {
    height: 100%;
    width: 90%;
    display: flex;
    color: #2c2c2c;
    justify-content: flex-start;
    align-items: center;
    text-align: justify;
    text-transform: capitalize;
    font-family: 'ridley_groteskextrabold';
    font-size: 2.7vh;
  }
  
  [dir="rtl"] #venturecontent h4 {
    height: 100%;
    width: 90%;
    display: flex;
    color: #2c2c2c;
    justify-content: flex-end;
    align-items: center;
    text-align: justify;
    font-family: "Cairo", serif;
    font-weight: 900;
    font-size: 2.7vh;
    text-transform: capitalize;
  }
  @keyframes venturemove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes venturemove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  #ssep {
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  
  #sseptop {
    height: 40%;
    width: 90%;
    display: flex;
    border: 1px solid black;
  }
  
  #sseptopleft {
    width: 50%;
    height: 100%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #sseptopleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #sseptopleft img {
    width: 70%;
  }
  
  #sseptopright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #sseptopright p {
    width: 70%;
    height: auto;
    font-family: 'ridley_groteskbold';
    font-size: 1.2vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #sseptopright p {
    width: 70%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 1.2vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #ssepbottom {
    height: 40%;
    width: 90%;
    display: flex;
    border: 1px solid black;
  }
  
  #ssepbottomleft {
    width: 50%;
    height: 100%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #ssepbottomleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #ssepbottomleft img {
    width: 70%;
  }
  
  #ssepbottomright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #ssepbottomright p {
    width: 70%;
    height: auto;
    font-family: 'ridley_groteskbold';
    font-size: 1.2vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #ssepbottomright p {
    width: 70%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 1.2vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #branding {
    height: auto;
    width: 100%;
  }
  
  #brandingcol1 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol2 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol3 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol4 {
    height: auto;
    width: 100%;
  }
  
  .brandcard {
    height: 25vh;
    background-color: transparent !important;
    border: 1px solid black;
  }
  
  .brandcard:hover {
    background-color: #dcdfe265 !important;
  }
  
  .brandcard .card-header {
    width: 100%;
    height: 30%;
    background-color: transparent !important;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: 'ridley_groteskextrabold';
    font-size: 2.5vw;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  [dir="rtl"] .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: "Cairo", serif;
    font-size: 3vw;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .brandcard .card-body {
    width: 100%;
    height: 70%;
  }
  
  .brandcard .card-body p {
    font-family: 'ridley_groteskbold';
    font-size: 2vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  [dir="rtl"] .brandcard .card-body p {
    font-family: "Cairo", serif;
    font-size: 2.5vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  .communityrow {
    height: 20vh;
    width: 100%;
    background-color: #2c2c2c;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .communitycontent {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 6vw;
  }
  [dir="rtl"] .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    font-size: 7vw;
    font-weight: 900;
  }
  @keyframes commove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes commove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  .multiimage {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    flex-direction: row;
  }
  
  .multiimageleft {
    width: 50%;
    height: 100%;
    border-right: 3px solid white;
    background-color: #2c2c2c;
    position: relative;
  }
  
  [dir="rtl"] .multiimageleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 3px solid white;
    position: relative;
  }
  
  .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
  }
  
  [dir="rtl"] .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
    top: 0%;
    right: 0%;
  }
  
  /* .multiimageleft img:nth-child(2)
    {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    } */
  .multimageright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
  
  .multiimagerightcontent {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5vw;
  }
  .multiimagerightcontent h4 {
    font-family: 'ridley_groteskbold';
    color: white;
    font-size: 3vw;
    text-transform: uppercase;
    text-align:left;
  }
  
  [dir="rtl"] .multiimagerightcontent h4 {
    font-family: "Cairo", serif;
    color: white;
    font-size: 3vw;
    font-weight: 900;
    text-transform: uppercase;
    text-align:justify;
  }
  
  .multiimagerightcontent p:nth-child(2) {
    font-family: 'ridley_grotesklight';
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    text-align: justify;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(2) {
    font-family: "Cairo", serif;
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    font-weight: 400;
    text-align: justify;
  }
  .multiimagerightcontent p:nth-child(3) {
    font-family: 'ridley_grotesklight';
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    text-align: justify;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(3) {
    font-family: "Cairo", serif;
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    font-weight: 400;
    text-align: justify;
  }
  .multiimagerightcontentimg {
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  
  .multiimagerightcontentimg .mulimgs {
    width: 20%;
    height: 70%;
    object-fit: cover;
    object-position: center;
    border-radius: 20%;
    cursor: pointer;
  }
  
  /* .multiimagerightcontentimg .mulimgs:hover {
    transform: scale(0.8, 0.8);
    border: 2px solid white;
  } */
  #imgdisplay 
{
  width: 100%;
  height: 100vh;
  background-color: #2c2c2c;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid white
}
#watchfixed{
  width: 100%;
  height: 30vh;
  position: sticky;
  top: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#watchfixed h1 
{
  text-transform: uppercase;
  -webkit-text-stroke: 2px white;
  color: transparent;
  font-size: 13vh;
  font-family: 'ridley_groteskbold';
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
[dir="rtl"] #watchfixed h1 
{
  text-transform: uppercase;
  -webkit-text-stroke: 2px white;
  color: transparent;
  font-size: 20vh;
  font-family: "Cairo", serif;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#imgdisplaytoph1 
{
  width: 25vw;
  height:auto;
  color: white;
  position: absolute;
  top: 10vh;
  left: 20%;
  font-family: 'ridley_groteskbold';
  font-size: 2.7vw;
  text-transform: capitalize;
}
[dir="rtl"]  #imgdisplaytoph1 
{
  width: 25vw;
  height: auto;
  color: white;
  position: absolute;
  top: 10vh;
  left: 0%;
  right: 20%;
  font-family: "Cairo", serif;
  font-size: 3vw;
  text-align: right;
  text-transform: capitalize;
}
#imgdisplay #imgtext:nth-child(3)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  top: 20vh;
  left: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(3)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  top: 20vh;
  left: 0%;
  right: 20%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(3) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(4)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 20vh;
  right: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(4)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  top: 20vh;
  right: 60%;
  left: 0%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(4) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(5)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  left: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(5)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  left: 0%;
  right: 20%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(5) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(6)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  right: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(6)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  right: 60%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(6) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplaybottomh1 
{
  width: 60vw;
  height: 10vh;
  color: white;
  position: absolute;
  top: 80vh;
  left: 20%;
  font-family: 'ridley_groteskbold';
  font-size: 2.6vw;
  text-transform: capitalize;
  text-align: left;
  text-align: justify;
}
[dir="rtl"]  #imgdisplaybottomh1 
{
  width: 60vw;
  height: 10vh;
  color: white;
  position: absolute;
  top: 80vh;
  left: 0%;
  right: 20%;
  font-family: "Cairo", serif;
  font-size: 3vw;
  text-transform: capitalize;
  text-align: justify;
}
  /* #footers 
  {
    height: 50vh;
    width: 100vw;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    overflow: hidden;
  }
  #footerleft 
  {
    height: 100%;
    flex-basis: 50vw;
    border-right: 3px solid white;
    border-left: none;
  }
  [dir="rtl"] #footerleft 
  {
    height: 100%;
    flex-basis: 50vw;
    border-left: 3px solid white;
    border-right: none;
  }
  #footerleft iframe 
  {
    width: 100%;
    height: 100%;
  }
  #footerright 
  {
    flex-basis: 50vw;
    height: 100%;
  }
  #footerrightlogo 
  {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #footerrightlogo img 
  {
    width: 70%;
    height: 63%;
  }
  #footerrighthead 
  {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerrighthead h5 
  {
    color: white;
    text-transform:uppercase;
    font-family: 'ridley_groteskbold';
    font-size: 5vw;
  }
  #footerbtn 
  {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerbtn .btn 
  {
    padding: 1vw 3vw;
    font-size: 1.2vw;
  }
  #socialmediabtn 
  {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
  }
  #socialmediabtn img 
  {
    cursor: pointer;
    width: 2.5vw;
  }
  #copyrightcontent 
  {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #copyrightcontent p 
  {
    color: #6e6c6c;
    text-transform: capitalize;
    font-family: 'ridley_grotesklight';
    font-weight: lighter;
    font-size: 90%;
  } */

  #footers {
    height: 100vh;
    width: 100vw;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }

  [dir="rtl"] #footers {
    height: 100vh;
    width: 100vw;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }

  #footerleft {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }

  [dir="rtl"] #footerleft {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }

  #footerleft iframe {
    width: 100%;
    height: 100%;
  }

  #footerright {
    height: 50%;
    width: 100vw;
  }

  [dir="rtl"] #footerright {
    height: 50%;
    width: 100vw;
  }

  #footerrightlogo {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  #footerrightlogo img {
    width: 70%;
    height: 80%;
  }

  #footerrighthead {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footerrighthead h5 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskbold';
    font-size: 6vw;
  }
  [dir="rtl"]  #footerrighthead h5 {
    color: white;
    text-transform: uppercase;
    font-family: "Cairo", sans-serif !important;
    font-size: 7vw;
  }
  #footerbtn {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footerbtn .btn {
    padding: 1vw 3vw;
    font-size: 2vw;
  }

  #socialmediabtn {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
  }

  #socialmediabtn img {
    cursor: pointer;
    width: 4vw;
  }

  #copyrightcontent {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #copyrightcontent p {
    color: #6e6c6c;
    text-transform: capitalize;
    font-family: 'ridley_grotesklight';
    font-weight: lighter;
    font-size: 70%;
  }
}

/* iPads (tablets, typically between 768px and 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #hamburg {
    display: block;
  }
  #hamburg #menuimg 
  {
    height: 7vh;
  }
  #homepage 
  {
   display: none;
  }
  #collection
  {
   display: none;
  }
  #About 
  {
   display: none;
  }
  #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0vw;
    padding-right: 2vw;
  }
  [dir="rtl"]  #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-left: 2vw;
    padding-right: 0vw;
  }
  .btnstyle {
    padding: 20px 20px;
    font-size: 3vw;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
  
  .btnstyle2 {
    padding: 20px 20px;
    font-size: 3vw;
    line-height: auto;
    color: #2c2c2c !important;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
   .btnstyle2rtl {
    padding: 20px 20px;
    font-size: 3.5vw !important;
    line-height: auto;
    color: #2c2c2c;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1vw;
  }
  .btnstylertl {
    padding: 20px 20px;
    font-size: 3.5vw !important;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    letter-spacing: .1vw;
  }
  /* #menu .btn-group {
    display: none;
  } */

  #mode {
    height: 5.5vh;
    width: 100%;
    position: fixed;
    z-index: 888;
    top: 40vh;
    display: flex;
    justify-content: flex-end;
    padding-right: 2.5vw;
    padding-left: 0vw;
  }
[dir="rtl"]  #mode {
  height: 5.5vh;
  width: 100%;
  position: fixed;
  z-index: 888;
  top: 40vh;
  display: flex;
  justify-content: flex-end;
  padding-right: 0vw;
  padding-left: 2.5vw;
}

  #modeouter {
    width: 15%;
    height: 100%;
    border: 3px solid white;
    background-color: white;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
  }

  #modeinner {
    width: 50%;
    height: 100%;
    border-radius: 60%;
    background-color: #2c2c2c;
  }

  #work {
    height: 90vh;
    width: 100%;
  }

  #work .row {
    height: 100%;
    width: 100%;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    margin: 0px;
  }

  #work .col-left {
    height: 100%;
    background-color: #2c2c2c;
    border-right: none;
    padding: 0%;
    border-left: none;
  }

  [dir="rtl"] #work .col-left {
    height: 100%;
    background-color: #2c2c2c;
    border-right: none;
    border-left: none;
    padding: 0%;

  }

  #work .col-left #topcontent {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-left: 10%;

  }

  [dir="rtl"] #work .col-left #topcontent {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0% 10% 0% 0%;

  }

  #topcontent #topcontenth1 {
    width: 100%;

  }

  [dir="rtl"] #topcontent #topcontenth1 {
    width: 100%;
  }

  #topcontent h1 {
    color: white;
    font-family: 'ridley_groteskbold';
    color: #2ad8ff;
    letter-spacing: -3px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size:10vw;
    font-weight: 800;
    line-height: 8vw;
  }

  [dir="rtl"] #topcontent h1 {
    color: white;
    font-family: "Cairo", serif;
    font-size: 72px;
    color: #2ad8ff;
    letter-spacing: -3px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 10vw;
    font-weight: 800;
    line-height: 8vw;
  }

  #work .col-left #bottomcontent {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 10%;
  }

  [dir="rtl"] #work .col-left #bottomcontent {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0% 10% 0% 0%;
  }

  #bottomcontent #bottomcontenttop {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  #bottomcontent #bottomcontenttop p {
    color: white;
    font-family: 'ridley_groteskregular';
    font-size: 3vw;
    text-align: justify;
    flex-basis: 90%;
  }
[dir="rtl"]  #bottomcontent #bottomcontenttop p {
  color: white;
  font-family: "Cairo", serif;
  font-size: 3.5vw;
  text-align: justify;
  flex-basis: 90%;
}
  #bottomcontent #bottomcontentbottom {
    width: 100%;
    height: 50%;
    display: flex;
  }

  #bottomcontent #bottomcontentbottom p {
    color: white;
    font-family: 'ridley_groteskregular';
    font-size: 3vw;
    text-align: justify;
    flex-basis: 90%;
  }
  [dir="rtl"] #bottomcontent #bottomcontentbottom p {
    color: white;
    font-family: "Cairo", serif;
    font-size: 3.5vw;
    text-align: justify;
    flex-basis: 90%;
  }
  #work .col-right {
    height: 100%;
    background-color: #2c2c2c;
    padding: 0%;
    background-image: url("image/workbgimg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
  }

  .trans {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: block;
    gap: 0%;
  }

  #colrighttop {
    display: none;
  }

  #colrighttop p {
    display: none;
  }

  #colrightbottom {
    display: none;
  }

  #colrightbottom p {
    display: none;
  }

 /* multipliereffect */
#multipliereffect {
  width: 100%;
  height: 20vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
[dir="rtl"] #multipliereffect {
  width: 100%;
  height: 20vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
#container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

[dir="rtl"] #container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8vw;
  font-family: 'ridley_groteskextrabold';
  font-weight: bolder;
  color: white;
  text-transform: uppercase;
}
[dir="rtl"] #container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12vw;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
}

@keyframes move {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes move2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* cardconatiner */
#cardconatiner {
  height: auto;
  width: 100%;
  overflow: hidden;
  background-color: #2c2c2c;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

#cardconatiner .row {
  height: auto;
  width: 100%;
}

#cardconatiner .card {
  height: auto;
  width: 100%;
  border: 2px solid white;
  background-color: #2c2c2c;
  transition: all 0.5 ease-in-out;

}

#cardconatiner .card .card-img-top {
  height: 40vh;
  position: relative;
  overflow: hidden;
  display: flex;
  /* Align images horizontally */
}

#cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
  /* Align all images to the start position */
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

#cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

#cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(-100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

[dir="rtl"] #cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 1s ease-in-out;
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

.card-img-top img:nth-child(1) {
  z-index: 7;
}

.card-img-top img:nth-child(2) {
  z-index: 6;
}

._canvas_container {
  z-index: 999999 !important;
  pointer-events: none;

}

#cardconatiner .card .card-body {
  height: auto;
  width: 100%;
  padding: 0;
  border-top: 2px solid white;
}

#cardconatiner .card .card-title {
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 4.5vw;
  text-transform: uppercase;
}
[dir="rtl"] #cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 4.5vw;
  text-transform: uppercase;
}
#cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: 'ridley_groteskregular';
  color: white;
}

[dir='rtl'] #cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: "Cairo", serif;
  color: white;
}
#cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 1rem; 
  padding-right: 0rem;
  list-style-position: inside; 
}
[dir="rtl"] #cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 0rem;
  padding-right: 1rem; 
  list-style-position: inside; 
}
#cardconatiner .card .card-text ul li 
{
  font-family: 'ridley_groteskregular';
  font-size: 2.2vw;
  text-transform: capitalize;
}

[dir="rtl"] #cardconatiner .card .card-text ul li 
{
  font-family: "Cairo", serif;
  font-size: 2.5vw;
  letter-spacing: 0.1vw;
  word-spacing: 0.1vw;
  font-weight: 500;
  text-transform: capitalize;
}
.cardprice 
{
  height: 7vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
[dir="rtl"] .cardprice 
{
  height: 7vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
.cardprice h5 
{
  color: white;
  font-size: 3vw;
  font-family: 'ridley_groteskextrabold';
  text-transform: uppercase;
}
[dir="rtl"] .cardprice h5 
{
  color: white;
  font-size: 3vw;
  word-spacing: 0.1vw;
  font-family: "Cairo", serif;
  text-transform: none;
  font-weight: 900;
}
.cardprice p
{
  color: white;
  font-size: 2vw;
  padding-bottom: 0vh;
  padding-top: 0vh;
}
[dir="rtl"] .cardprice p
{
  color: white;
  font-size: 2vw;
  padding-bottom: 0vh;
  padding-top: 1vh;
}
.cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 2.5vw;
  padding-bottom: 0.7vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
[dir="rtl"] .cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 2.5vw;
  padding-bottom: 0vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
.cardprice span:nth-child(4)
{
  text-decoration: line-through;
  text-decoration-thickness: 0.2vh;
}
#cardconatiner .card #cardbtn {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  /* justify-content: center; */
}

#cardconatiner .card #cardbtn .btn {
  font-family: 'ridley_groteskregular';
  text-transform: uppercase;
  font-size: 1.5vw;
}
[dir="rtl"] #cardconatiner .card #cardbtn .btn {
  font-family: "Cairo", serif;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 700;
}

#serviceeffect {
  height: 20vh;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #2c2c2c;
}

#servicecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  animation-name: servicemove;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

[dir="rtl"] #servicecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: servicemove2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes servicemove {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes servicemove2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}


#servicecontent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#servicecontent h1 {
  color: white;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  font-size: 7.5vw;
}
[dir="rtl"] #servicecontent h1 {
  color: white;
  text-transform: uppercase;
  font-size: 9.5vw;
  font-family: "Cairo", serif;
  font-weight: 900;
}
  /* tmld style */
  #tmld {
    width: 100%;
    height: 80vh;
    position: relative;
  }

  #tmldimage {
    width: 30%;
    height: 30vh;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    border-radius: 0%;
    transform: translate(-50%, -50%);
    /* Correct translate to center */
  }

  [dir="rtl"] #tmldimage {
    width: 30%;
    height: 30vh;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    border-radius: 0%;
    transform: translate(-50%, -50%);
    /* Correct translate to center */
  }

  #tmldimage img:nth-child(1) {
    position: absolute;
    height: 50%;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  [dir="rtl"] #tmldimage img:nth-child(1) {
    position: absolute;
    height: 50%;
    width: 50%;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }

  #tmldimage img:nth-child(2) {
    height: 100%;
    width: 100%;
    position: absolute;
    animation-name: rotatetmld;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  [dir="rtl"] #tmldimage img:nth-child(2) {
    height: 100%;
    width: 100%;
    position: absolute;
    animation-name: rotatetmld2;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  @keyframes rotatetmld {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes rotatetmld2 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  #tmldrow1 {
    height: 50%;
    width: 100%;
  }

  #tmldrow1 .tmldrow1colleft {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  #tmldrow1colleftcontnet {
    width: 80%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
[dir="rtl"]  #tmldrow1colleftcontnet {
  width: 70%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
  #tmldrow1colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
[dir="rtl"]   #tmldrow1colleftcontnet h4 {
  font-size: 3.5vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  color: #3fff86;
  line-height: 5vh;
}
  #tmldrow1colleftcontnet p {
    font-size: 1.6vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"]  #tmldrow1colleftcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow1 .tmldrow1colright {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
  }

  #tmldrow1colrightcontnet {
    width: 80%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
[dir="rtl"]   #tmldrow1colrightcontnet {
  width: 70%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
  #tmldrow1colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
  [dir="rtl"]  #tmldrow1colrightcontnet h4 {
    font-size: 3.5vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    color: #3fff86;
    line-height: 5vh;
  }
  #tmldrow1colrightcontnet p {
    font-size: 1.6vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"]  #tmldrow1colrightcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 {
    height: 50%;
    width: 100%;
  }

  #tmldrow2 .tmldrow2colleft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
  }

  #tmldrow2colleftcontnet {
    width: 80%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }
[dir="rtl"]  #tmldrow2colleftcontnet {
  width: 70%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
  #tmldrow2colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }
  [dir="rtl"]  #tmldrow2colleftcontnet h4 {
    font-size: 3.5vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    color: #3fff86;
    line-height: 5vh;
  }
  #tmldrow2colleftcontnet p {
    font-size: 1.6vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colleftcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 .tmldrow2colright {

    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #tmldrow2colrightcontnet {
    width: 80%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
  }
[dir="rtl"]  #tmldrow2colrightcontnet {
  width: 70%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
  #tmldrow2colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 5vh;
  }

  [dir="rtl"] #tmldrow2colrightcontnet h4 {
    font-size: 3.5vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    color: #3fff86;
    line-height: 5vh;
  }

  #tmldrow2colrightcontnet p {
    font-size: 1.6vh;
    line-height: 2vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colrightcontnet p {
    font-size: 1.7vh;
    line-height: 2.5vh;
    font-family: "Cairo", serif;
    text-transform: capitalize;
    color: white;
  }
  #venture {
    width: 100%;
    height: auto;
    overflow: hidden;
    /* background-image: url("image/bgwhite.jpg"); */
    background-size: cover;
    background-repeat: no-repeat;
  }
  #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -12; /* Keeps particles in the background */
    pointer-events: none; /* Ensures particles don't block content interaction */
  }
  #ventureanimation {
    height: 15vh;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  [dir="rtl"] #ventureanimation {
    height: 15vh;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .venturecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: venturemove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  [dir="rtl"] .venturecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: venturemove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .ventureheading 
  {
    width: 100%;
    height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .ventureheading  h1 {
    color: #2c2c2c;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 4.5vw;
  } 
  [dir="rtl"] .ventureheading  h1 {
    color: #2c2c2c;
    text-transform: uppercase;
    font-family: "Cairo", sans-serif;
    font-size: 6.2vw;
    font-weight: 900;
  } 
  
  #venturecontent {
    height: 30vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #venturecontent h4 {
    height: 100%;
    width: 90%;
    display: flex;
    color: #2c2c2c;
    justify-content: flex-start;
    align-items: center;
    text-align: justify;
    text-transform: capitalize;
    font-family: 'ridley_groteskextrabold';
    font-size: 2.7vh;
  }
  
  [dir="rtl"] #venturecontent h4 {
    height: 100%;
    width: 90%;
    display: flex;
    color: #2c2c2c;
    justify-content: flex-end;
    align-items: center;
    text-align: justify;
    font-family: "Cairo", serif;
    font-weight: 900;
    font-size: 2.7vh;
    text-transform: capitalize;
  }
  @keyframes venturemove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes venturemove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  #ssep {
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  
  #sseptop {
    height: 40%;
    width: 90%;
    display: flex;
    border: 1px solid black;
  }
  
  #sseptopleft {
    width: 50%;
    height: 100%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #sseptopleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #sseptopleft img {
    width: 70%;
  }
  
  #sseptopright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #sseptopright p {
    width: 70%;
    height: auto;
    font-family: 'ridley_groteskbold';
    font-size: 1.2vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #sseptopright p {
    width: 70%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 1.2vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #ssepbottom {
    height: 40%;
    width: 90%;
    display: flex;
    border: 1px solid black;
  }
  
  #ssepbottomleft {
    width: 50%;
    height: 100%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #ssepbottomleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #ssepbottomleft img {
    width: 70%;
  }
  
  #ssepbottomright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #ssepbottomright p {
    width: 70%;
    height: auto;
    font-family: 'ridley_groteskbold';
    font-size: 1.2vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #ssepbottomright p {
    width: 70%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 1.2vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #branding {
    height: auto;
    width: 100%;
  }
  
  #brandingcol1 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol2 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol3 {
    height: auto;
    width: 100%;
  }
  
  #brandingcol4 {
    height: auto;
    width: 100%;
  }
  
  .brandcard {
    height: 25vh;
    background-color: transparent !important;
    border: 1px solid black;
  }
  
  .brandcard:hover {
    background-color: #dcdfe265 !important;
  }
  
  .brandcard .card-header {
    width: 100%;
    height: 30%;
    background-color: transparent !important;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: 'ridley_groteskextrabold';
    font-size: 2.5vw;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  [dir="rtl"] .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: "Cairo", serif;
    font-size: 3vw;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .brandcard .card-body {
    width: 100%;
    height: 70%;
  }
  
  .brandcard .card-body p {
    font-family: 'ridley_groteskbold';
    font-size: 2vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  [dir="rtl"] .brandcard .card-body p {
    font-family: "Cairo", serif;
    font-size: 2.5vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  .communityrow {
    height: 20vh;
    width: 100%;
    background-color: #2c2c2c;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .communitycontent {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 6vw;
  }
  [dir="rtl"] .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    font-size: 7vw;
    font-weight: 900;
  }
  @keyframes commove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes commove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  .multiimage {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    flex-direction: row;
  }
  
  .multiimageleft {
    width: 50%;
    height: 100%;
    border-right: 3px solid white;
    background-color: #2c2c2c;
    position: relative;
  }
  
  [dir="rtl"] .multiimageleft {
    width: 50%;
    height: 100%;
    border-right: none;
    border-left: 3px solid white;
    position: relative;
  }
  
  .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
  }
  
  [dir="rtl"] .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
    top: 0%;
    right: 0%;
  }
  
  /* .multiimageleft img:nth-child(2)
    {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    } */
  .multimageright {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
  
  .multiimagerightcontent {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5vw;
  }
  .multiimagerightcontent h4 {
    font-family: 'ridley_groteskbold';
    color: white;
    font-size: 3vw;
    text-transform: uppercase;
    text-align:left;
  }
  
  [dir="rtl"] .multiimagerightcontent h4 {
    font-family: "Cairo", serif;
    color: white;
    font-size: 3vw;
    font-weight: 900;
    text-transform: uppercase;
    text-align:justify;
  }
  
  .multiimagerightcontent p:nth-child(2) {
    font-family: 'ridley_grotesklight';
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    text-align: justify;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(2) {
    font-family: "Cairo", serif;
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    font-weight: 400;
    text-align: justify;
  }
  .multiimagerightcontent p:nth-child(3) {
    font-family: 'ridley_grotesklight';
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    text-align: justify;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(3) {
    font-family: "Cairo", serif;
    color: white;
    text-transform: capitalize;
    font-size: 1.5vw;
    font-weight: 400;
    text-align: justify;
  }
  .multiimagerightcontentimg {
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  
  .multiimagerightcontentimg .mulimgs {
    width: 20%;
    height: 70%;
    object-fit: cover;
    object-position: center;
    border-radius: 20%;
    cursor: pointer;
  }
  
  /* .multiimagerightcontentimg .mulimgs:hover {
    transform: scale(0.8, 0.8);
    border: 2px solid white;
  } */
  #imgdisplay 
{
  width: 100%;
  height: 100vh;
  background-color: #2c2c2c;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid white
}
#watchfixed{
  width: 100%;
  height: 30vh;
  position: sticky;
  top: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#watchfixed h1 
{
  text-transform: uppercase;
  -webkit-text-stroke: 2px white;
  color: transparent;
  font-size: 13vh;
  font-family: 'ridley_groteskbold';
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
[dir="rtl"] #watchfixed h1 
{
  text-transform: uppercase;
  -webkit-text-stroke: 2px white;
  color: transparent;
  font-size: 20vh;
  font-family: "Cairo", serif;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#imgdisplaytoph1 
{
  width: 25vw;
  height:auto;
  color: white;
  position: absolute;
  top: 10vh;
  left: 20%;
  font-family: 'ridley_groteskbold';
  font-size: 2.7vw;
  text-transform: capitalize;
}
[dir="rtl"]  #imgdisplaytoph1 
{
  width: 25vw;
  height: auto;
  color: white;
  position: absolute;
  top: 10vh;
  left: 0%;
  right: 20%;
  font-family: "Cairo", serif;
  font-size: 3vw;
  text-align: right;
  text-transform: capitalize;
}
#imgdisplay #imgtext:nth-child(3)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  top: 20vh;
  left: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(3)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  top: 20vh;
  left: 0%;
  right: 20%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(3) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(4)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 20vh;
  right: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(4)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  top: 20vh;
  right: 60%;
  left: 0%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(4) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(5)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  left: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(5)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  left: 0%;
  right: 20%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(5) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplay #imgtext:nth-child(6)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  right: 20%;
  border: 2px solid white;
}
[dir="rtl"]  #imgdisplay #imgtext:nth-child(6)
{
  width: 25vw;
  height: 20vh;
  position: absolute;
  background-color: red;
  top: 50vh;
  right: 60%;
  border: 2px solid white;
}
#imgdisplay #imgtext:nth-child(6) img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#imgdisplaybottomh1 
{
  width: 60vw;
  height: 10vh;
  color: white;
  position: absolute;
  top: 80vh;
  left: 20%;
  font-family: 'ridley_groteskbold';
  font-size: 2.6vw;
  text-transform: capitalize;
  text-align: left;
  text-align: justify;
}
[dir="rtl"]  #imgdisplaybottomh1 
{
  width: 60vw;
  height: 10vh;
  color: white;
  position: absolute;
  top: 80vh;
  left: 0%;
  right: 20%;
  font-family: "Cairo", serif;
  font-size: 3vw;
  text-transform: capitalize;
  text-align: justify;
}
  /* #footers 
  {
    height: 50vh;
    width: 100vw;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    overflow: hidden;
  }
  [dir="rtl"]  #footers 
  {
    height: 50vh;
    width: 100vw;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    overflow: hidden;
  }
  #footerleft 
  {
    height: 100%;
    flex-basis: 50vw;
    border-right: 3px solid white;
    border-left: none;
  }
  [dir="rtl"] #footerleft 
  {
    height: 100%;
    flex-basis: 50vw;
    border-left: 3px solid white;
    border-right: none;
  }
  #footerleft iframe 
  {
    width: 100%;
    height: 100%;
  }
  #footerright 
  {
    flex-basis: 50vw;
    height: 100%;
  }
  #footerrightlogo 
  {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #footerrightlogo img 
  {
    width: 70%;
    height: 63%;
  }
  #footerrighthead 
  {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerrighthead h5 
  {
    color: white;
    text-transform:uppercase;
    font-family: 'ridley_groteskbold';
    font-size: 5vw;
  }
  #footerbtn 
  {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerbtn .btn 
  {
    padding: 1vw 3vw;
    font-size: 1.5vw;
  }
  #socialmediabtn 
  {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
  }
  #socialmediabtn img 
  {
    cursor: pointer;
    width: 2.5vw;
  }
  #copyrightcontent 
  {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #copyrightcontent p 
  {
    color: #6e6c6c;
    text-transform: capitalize;
    font-family: 'ridley_grotesklight';
    font-weight: lighter;
    font-size: 80%;
  } */
  #footers {
    height: 100vh;
    width: 100vw;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }

  [dir="rtl"] #footers {
    height: 100vh;
    width: 100vw;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }

  #footerleft {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }

  [dir="rtl"] #footerleft {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }

  #footerleft iframe {
    width: 100%;
    height: 100%;
  }

  #footerright {
    height: 50%;
    width: 100vw;
  }

  [dir="rtl"] #footerright {
    height: 50%;
    width: 100vw;
  }

  #footerrightlogo {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  #footerrightlogo img {
    width: 70%;
    height: 63%;
  }

  #footerrighthead {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footerrighthead h5 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskbold';
    font-size: 5vw;
  }

  #footerbtn {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #footerbtn .btn {
    padding: 1vw 3vw;
    font-size: 2vw;
  }

  #socialmediabtn {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
  }

  #socialmediabtn img {
    cursor: pointer;
    width: 4vw;
  }

  #copyrightcontent {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #copyrightcontent p {
    color: #6e6c6c;
    text-transform: capitalize;
    font-family: 'ridley_grotesklight';
    font-weight: lighter;
    font-size: 70%;
  }
}

/* Mobile devices (phones, typically less than 768px) */
@media only screen and (max-width: 767px) {
  
  #hamburg {
    display: block;
  }
  #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999999 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-right: 1vw;
  }

  /* #menu .btn-group {
    display: none;
  } */
   #homepage 
   {
    display: none;
   }
   #collection
   {
    display: none;
   }
   #About 
   {
    display: none;
   }
   .btnstyle {
    padding: 15px 15px;
    font-size: 2.5vw !important;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
  
  .btnstyle2 {
    padding: 15px 15px;
    font-size: 2.5vw !important;
    line-height: auto;
    color: #2c2c2c !important;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
   .btnstyle2rtl {
    padding: 15px 15px;
    font-size: 3.5vw !important;
    line-height: auto;
    color: #2c2c2c;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1vw;
  }
  .btnstylertl {
    padding: 15px 15px;
    font-size: 3.5vw !important;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    letter-spacing: .1vw;
  }
  .btn:focus,
  .btn:active {
    outline: none;
    /* Remove focus outline */
    box-shadow: none;
    /* Remove Bootstrap focus box shadow */
    /* Remove the border during focus/active */
  }
  
  .btn:hover {
    background-color: #2ad8ff;
    color: #2c2c2c;
  }
  #banner {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  #banner video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
  }
  
  #banner #overlay {
    width: 60%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(40%, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #overlay img {
    height: 100%;
    width: 100%;
  }
  #mode {
    height: 6vh;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    top: 40vh;
    display: flex;
    justify-content: flex-end;
  }
[dir="rtl"] #mode {
  height: 6vh;
  width: 100%;
  position: fixed;
  z-index: 99999998 !important;
  top: 40vh;
  display: flex;
  justify-content: flex-end;
}
  #modeouter {
    width: 20%;
    height: 100%;
    border: 3px solid white;
    background-color: white;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
  }

  #modeinner {
    width: 50%;
    height: 100%;
    border-radius: 60%;
    background-color: #2c2c2c;
  }

  #work {
    height: 100vh;
    width: 100%;
  }

  #work .row {
    height: 100%;
    width: 100%;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    margin: 0px;
  }

  #work .col-left {
    width: 100%;
    height: 100%;
    background-color: #2c2c2c;
    border-right: none;
    border-left: none;
    padding: 0%;

  }

  [dir="rtl"] #work .col-left {
    width: 100%;
    height: 100%;
    background-color: #2c2c2c;
    border-right: none;
    border-left: none;
    padding: 0%;
  }

  #work .col-left #topcontent {
    width: 100%;
    height: 40%;
    padding-left: 0%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }

  [dir="rtl"] #work .col-left #topcontent {
    width: 100%;
    height: 40%;
    padding-left: 0%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }

  #topcontent #topcontenth1 {
    width: 100%;
    padding-left: 5%;

  }

  [dir="rtl"] #topcontent #topcontenth1 {
    width: 100%;
    padding-right: 5%;
  }

  #topcontent h1 {
    color: white;
    font-family: 'ridley_groteskbold';
    color: #2ad8ff;
    letter-spacing: 0px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14vw;
    font-weight: 800;
    line-height: 14vw;
    padding: 1% 0%;
  }

  [dir="rtl"] #topcontent h1 {
    color: white;
    font-family: "Cairo", serif;
    color: #2ad8ff;
    letter-spacing: 0px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14vw;
    font-weight: 900;
    line-height: 15vw;
    padding: 1% 0%;
  }

  #work .col-left #bottomcontent {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0%;
  }

  [dir="rtl"] #work .col-left #bottomcontent {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0%;
  }

  #bottomcontent #bottomcontenttop {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5%;
  }

  [dir="rtl"] #bottomcontent #bottomcontenttop {
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0% 5% 0% 0%;
  }

  #bottomcontent #bottomcontenttop p {
    color: white;
    font-family: 'ridley_groteskregular';
    font-size: 4vw;
    text-align: justify;
    flex-basis: 90%;
  }
[dir="rtl"] #bottomcontent #bottomcontenttop p {
  color: white;
  font-family: "Cairo", serif;
  font-weight: 400;
  font-size: 4.5vw;
  text-align: justify;
  flex-basis: 90%;
}
  #bottomcontent #bottomcontentbottom {
    width: 100%;
    height: 50%;
    display: flex;
    padding-left: 5%;
  }

  [dir="rtl"] #bottomcontent #bottomcontentbottom {
    width: 100%;
    height: 40%;
    display: flex;
    padding: 0% 5% 0% 0%;
  }

  #bottomcontent #bottomcontentbottom p {
    color: white;
    font-family: 'ridley_groteskregular';
    font-size: 4vw;
    text-align: justify;
    flex-basis: 90%;
  }
[dir="rtl"] #bottomcontent #bottomcontentbottom p
{
  color: white;
  font-family: "Cairo", serif;
  font-weight: 400;
  font-size: 4.5vw;
  text-align: justify;
  flex-basis: 90%;
}
  #work .col-right {
    display: none;
  }

  .trans {

    display: none;
  }

  #colrighttop {
    display: none;
  }

  #colrighttop p {
    display: none;
  }

  #colrightbottom {
    display: none;
  }

  #colrightbottom p {
    display: none;
  }

  /* multipliereffect */
  #multipliereffect {
    width: 100%;
    height: 15vh;
    white-space: nowrap;
    overflow: hidden;
    background-color: #2c2c2c;
  }
[dir="rtl"]  #multipliereffect {
  width: 100%;
  height: 15vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
#container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

[dir="rtl"] #container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8vw;
  font-family: 'ridley_groteskextrabold';
  font-weight: bolder;
  color: white;
  text-transform: uppercase;
}
[dir="rtl"] #container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12vw;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
}

/* cardconatiner */
#cardconatiner {
  height: auto;
  width: 100%;
  overflow: hidden;
  background-color: #2c2c2c;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

#cardconatiner .row {
  height: auto;
  width: 100%;
}

#cardconatiner .card {
  height: auto;
  width: 100%;
  border: 2px solid white;
  background-color: #2c2c2c;
  transition: all 0.5 ease-in-out;

}

#cardconatiner .card .card-img-top {
  height: 50vh;
  position: relative;
  overflow: hidden;
  display: flex;
  /* Align images horizontally */
}

#cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
  /* Align all images to the start position */
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

#cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

#cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(-100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

[dir="rtl"] #cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 1s ease-in-out;
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

.card-img-top img:nth-child(1) {
  z-index: 7;
}

.card-img-top img:nth-child(2) {
  z-index: 6;
}

._canvas_container {
  z-index: 999999 !important;
  pointer-events: none;

}

#cardconatiner .card .card-body {
  height: auto;
  width: 100%;
  padding: 0;
  border-top: 2px solid white;
}

#cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 6vw;
  text-transform: uppercase;
}
[dir="rtl"] #cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 6vw;
  text-transform: uppercase;
}
#cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: 'ridley_groteskregular';
  color: white;
}

[dir='rtl'] #cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: "Cairo", serif;
  color: white;
}
#cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 1rem; 
  padding-right: 0rem;
  list-style-position: inside; 
}
[dir="rtl"] #cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 0rem;
  padding-right: 1rem; 
  list-style-position: inside; 
}
#cardconatiner .card .card-text ul li 
{
  font-family: 'ridley_groteskmedium';
  font-size: 4vw;
  text-transform: capitalize;
}

[dir="rtl"] #cardconatiner .card .card-text ul li 
{
  font-family: "Cairo", serif;
  font-size: 4vw;
  letter-spacing: 0.5vw;
  word-spacing: 0.5vw;
  font-weight: 500;
  text-transform: capitalize;
}
.cardprice 
{
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5vw;
}
[dir="rtl"] .cardprice 
{
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}
.cardprice h5 
{
  color: white;
  font-size: 4vw;
  font-family: 'ridley_groteskextrabold';
  text-transform: uppercase;
}
[dir="rtl"] .cardprice h5 
{
  color: white;
  font-size: 4vw;
  word-spacing: 0.1vw;
  font-family: "Cairo", serif;
  text-transform: none;
  font-weight: 900;
}
.cardprice p
{
  color: white;
  font-size: 3vw;
  padding-bottom: 0vh;
  padding-top: 0.5vh;
}
[dir="rtl"] .cardprice p
{
  color: white;
  font-size: 3vw;
  padding-bottom: 0vh;
  padding-top: 1vh;
}
.cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 3.5vw;
  padding-bottom: 1.5vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
[dir="rtl"] .cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 3.5vw;
  padding-bottom: 1vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
.cardprice span:nth-child(4)
{
  text-decoration: line-through;
  text-decoration-thickness: 0.2vh;
}
#cardconatiner .card #cardbtn {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  /* justify-content: center; */
}

#cardconatiner .card #cardbtn .btn {
  font-family: 'ridley_groteskregular';
  text-transform: uppercase;
  font-size: 2vw;
}
[dir="rtl"] #cardconatiner .card #cardbtn .btn {
  font-family: "Cairo", serif;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 700;
}

  /* serviceeffect */
  #serviceeffect {
    height: 15vh;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: #2c2c2c;
  }
  
  #servicecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    animation-name: servicemove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] #servicecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: servicemove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  @keyframes servicemove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes servicemove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  
  #servicecontent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #servicecontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 7.5vw;
  }
  [dir="rtl"] #servicecontent h1 {
    color: white;
    text-transform: uppercase;
    font-size: 9.5vw;
    font-family: "Cairo", serif;
    font-weight: 900;
  }
  #tmld {
    width: 100%;
    height: 100%;
    position: relative;
  }

  #tmldimage {
    width: 100%;
    height: 45vh;
    border-radius: 0vw;
    position: relative;
    z-index: 100;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    /* Correct translate to center */
  }

  [dir="rtl"] #tmldimage {
    width: 100%;
    height: 45vh;
    border-radius: 0vw;
    position: relative;
    z-index: 100;
    top: 0%;
    right: 0%;
    transform: translate(0%, 0%);
    /* Correct translate to center */
  }

  #tmldimage img:nth-child(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%; /* Set the desired height */
    width: 50%; /* Set the desired width */
    transform: translate(-50%, -50%);
  }

  [dir="rtl"] #tmldimage img:nth-child(1) {
    position: absolute;
    top: 50%;
    right: 50%;
    height: 50%; /* Set the desired height */
    width: 50%; /* Set the desired width */
    transform: translate(50%, -50%);
  }

  #tmldimage img:nth-child(2) {
    position: absolute;
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    right: 0%;
    animation-name: rotatetmld;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  [dir="rtl"] #tmldimage img:nth-child(2) {
    position: absolute;
    height: 90%;
    width: 90%;
    top: 5%;
    left: 0%;
    right:5%;
    animation-name: rotatetmld2;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  @keyframes rotatetmld {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes rotatetmld2 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  #tmldrow1 {
    height: 60vh;
    width: 100%;
  }

  #tmldrow1 .tmldrow1colleft {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #tmldrow1colleftcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow1colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
  [dir="rtl"] #tmldrow1colleftcontnet h4 {
  font-size: 4vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: #3fff86;
  line-height: 6vh;
   }
  #tmldrow1colleftcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }

  [dir="rtl"]  #tmldrow1colleftcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow1 .tmldrow1colright {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
  }

  #tmldrow1colrightcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow1colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
[dir="rtl"]  #tmldrow1colrightcontnet h4 {
  font-size: 4vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: #3fff86;
  line-height: 6vh;
}
  #tmldrow1colrightcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow1colrightcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 {
    height: 60vh;
    width: 100%;
  }

  #tmldrow2 .tmldrow2colleft {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
  }

  #tmldrow2colleftcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow2colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
  [dir="rtl"] #tmldrow2colleftcontnet h4 {
    font-size: 4vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: #3fff86;
  line-height: 6vh;
  }
  #tmldrow2colleftcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colleftcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 .tmldrow2colright {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #tmldrow2colrightcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow2colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
  [dir="rtl"] #tmldrow2colrightcontnet h4 {
    font-size: 4vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    font-weight: 900;
    color: #3fff86;
    line-height: 6vh;
  }
  #tmldrow2colrightcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colrightcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #ventureanimation {
    height: 15vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
[dir="rtl"] #ventureanimation {
  height: 15vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.venturecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: venturemove;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
[dir="rtl"] .venturecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: venturemove2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ventureheading 
{
  width: 100%;
  height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ventureheading  h1 {
  color: #2c2c2c;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  font-size: 5vw;
} 
[dir="rtl"] .ventureheading  h1 {
  color: #2c2c2c;
  text-transform: uppercase;
  font-family: "Cairo", sans-serif;
  font-size: 6.9vw;
  font-weight: 900;
} 

  #venturecontent {
    height: 25vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #venturecontent h4 {
    height: 100%;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'ridley_groteskextrabold';
    font-size: 2vh;
  }
[dir="rtl"]  #venturecontent h4 {
  height: 100%;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Cairo", serif;
  font-weight: 900;
  font-size: 2vh;
}
  #ssep {
    width: 100%;
    height: 150vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 0vw 3vw;
  }

  #sseptop {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  [dir="rtl"] #sseptop {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #sseptopleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  [dir="rtl"] #sseptopleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  #sseptopright {
    width: 100%;
    height: 60%;
  }

  [dir="rtl"] #sseptopright {
    width: 100%;
    height: 60%;
  }
  #sseptopright p {
    width: 90%;
    height: auto;
    font-family: 'ridley_grotesklight';
    font-size: 1.5vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #sseptopright p {
    width: 90%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 600;
    font-size: 1.7vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #ssepbottom {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #ssepbottomleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  [dir="rtl"] #ssepbottomleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  #ssepbottomright {
    width: 100%;
    height: 60%;
  }

  [dir="rtl"] #ssepbottomright {
    width: 100%;
    height: 60%;
  }
  #ssepbottomright p {
    width: 90%;
    height: auto;
    font-family: 'ridley_grotesklight';
    font-size: 1.5vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #sseptopright p {
    width: 90%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 600;
    font-size: 1.7vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  .brandcard {
    height: 30vh;
    background-color: transparent !important;
    border: 1px solid black;
  }

  .brandcard .card-header {
    width: 100%;
    height: 40%;
    background-color: transparent !important;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .brandcard .card-header img {
    width: 70%;
    object-fit: cover;
  }

  .brandcard .card-body {
    width: 100%;
    height: 60%;
  }

  .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: 'ridley_groteskextrabold';
    font-size: 4vw;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  [dir="rtl"] .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: "Cairo", serif;
    font-size: 5vw;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .brandcard .card-body p {
    font-family: 'ridley_grotesklight';
    font-size: 3vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  [dir="rtl"] .brandcard .card-body p {
    font-family: "Cairo", serif;
    font-size: 3.5vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  .communityrow {
    height: 15vh;
    width: 100%;
    background-color: #2c2c2c;
    overflow: hidden;
    white-space: nowrap;
  }
  .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .communitycontent {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 6.2vw;
  }
  [dir="rtl"] .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    font-size: 7.2vw;
    font-weight: 900;
  }
  .multiimage {
    width: 100%;
    height: 120vh;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
[dir="rtl"]   .multiimage {
  width: 100%;
  height: 120vh;
  border-bottom: 3px solid white;
  background-color: #2c2c2c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
  .multiimageleft {
    width: 100%;
    height: 50%;
    border-right: none;
    border-bottom: 3px solid white;
    position: relative;
    overflow: hidden;
  }

  [dir="rtl"] .multiimageleft {
    width: 100%;
    height: 50%;
    border-right: none;
    border-left: none;
    border-bottom: 3px solid white;
    position: relative;
    overflow: hidden;
  }

  .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
  }

  /* .multiimageleft img:nth-child(2)
  {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  } */
  .multimageright {
    width: 100%;
    height: 50%;
  }
[dir="rtl"] .multimageright {
  width: 100%;
  height: 50%;
}
  .multiimagerightcontent {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
  }
  [dir="rtl"] .multiimagerightcontent {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
  }

  .multiimagerightcontent h4 {
    font-family: 'ridley_groteskbold';
    color: white;
    font-size: 5vw;
  }
[dir="rtl"]   .multiimagerightcontent h4 {
  font-family: "Cairo", serif;
  color: white;
  font-size: 5vw;
}
  .multiimagerightcontent p:nth-child(2) {
    font-family: 'ridley_groteskmedium';
    color: white;
    font-size: 2.5vw;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(2) {
    font-family: "Cairo", serif;;
    color: white;
    font-size: 3vw;
  }
  .multiimagerightcontent p:nth-child(3) {
    font-family: 'ridley_groteskmedium';
    color: white;
    font-size: 2.5vw;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(3) {
    font-family: "Cairo", serif;
    color: white;
    font-size: 3vw;
  }
  .multiimagerightcontentimg {
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }

  .multiimagerightcontentimg .mulimgs {
    width: 20%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20%;
    cursor: pointer;
    transition: all 0.5s 0ms ease-in-out;
  }

  .multiimagerightcontentimg .mulimgs:hover {
    transform: scale(0.8, 0.8);
  }
  #imgdisplay 
  {
    width: 100%;
    height: 180vh;
    background-color: #2c2c2c;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid white
  }
  #watchfixed {
    width: 100%;
    height: 30vh;
    position: sticky;
    top: 70vh; /* Adjust this as necessary */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #watchfixed h1 
  {
    text-transform: uppercase;
    -webkit-text-stroke: 2px white;
    color: transparent;
    font-size: 18vw;
    font-family: 'ridley_groteskbold';
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #watchfixed h1 
  {
    text-transform: uppercase;
    -webkit-text-stroke: 2px white;
    color: transparent;
    font-size: 28vw;
    font-family: "Cairo", serif;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #imgdisplaytoph1 
  {
    width: 100vw;
    height:5vh;
    color: white;
    position: absolute;
    top: 5vh;
    left: 0%;
    font-family: 'ridley_groteskbold';
    font-size: 4vw;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  [dir="rtl"]  #imgdisplaytoph1 
  {
    width: 100vw;
    height: 5vh;
    color: white;
    position: absolute;
    top: 5vh;
    left: 0%;
    right: 0%;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 4vw;
    text-align: right;
    text-transform: capitalize;
  }
  #imgdisplay #imgtext:nth-child(3)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 20vh;
    left: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(3)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 20vh;
    left: 0%;
    right: 15%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(3) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(4)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 55vh;
    right: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(4)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 55vh;
    left: 0%;
    right: 25%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(4) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(5)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 90vh;
    left: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(5)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 90vh;
    left: 0%;
    right: 15%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(5) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(6)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 125vh;
    right: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(6)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 125vh;
    right: 25%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(6) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplaybottomh1 
  {
    width: 70vw;
    height: 10vh;
    color: white;
    position: absolute;
    top: 165vh;
    left: 15%;
    font-family: 'ridley_groteskbold';
    font-size: 3vw;
    text-transform: capitalize;
  }
  [dir="rtl"]  #imgdisplaybottomh1 
  {
    width: 70vw;
    height: 10vh;
    color: white;
    position: absolute;
    top: 165vh;
    left: 0%;
    right: 15%;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 3vw;
    text-transform: capitalize;
    text-align: right;
  }
  #footers 
  {
    height: 100vh;
    width: 100vw;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }
  [dir="rtl"] #footers 
  {
    height: 100vh;
    width: 100vw;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }
  #footerleft 
  {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }
  [dir="rtl"] #footerleft 
  {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }
  #footerleft iframe 
  {
    width: 100%;
    height: 100%;
  }
  #footerright 
  {
    height: 50%;
    width: 100vw;
  }
  [dir="rtl"]  #footerright 
  {
    height: 50%;
    width: 100vw;
  }
  #footerrightlogo 
  {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #footerrightlogo img 
  {
    width: 70%;
    height: 63%;
  }
  #footerrighthead 
  {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerrighthead h5 
  {
    color: white;
    text-transform:uppercase;
    font-family: 'ridley_groteskbold';
    font-size: 5vw;
  }
  #footerbtn 
  {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerbtn .btn 
  {
    padding: 1vw 3vw;
    font-size: 1.5vw;
  }
  #socialmediabtn 
  {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
  }
  #socialmediabtn img 
  {
    cursor: pointer;
    width: 4vw;
  }
  #copyrightcontent 
  {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #copyrightcontent p 
  {
    color: #6e6c6c;
    text-transform: capitalize;
    font-family: 'ridley_grotesklight';
    font-weight: lighter;
    font-size: 70%;
  }
}

@media only screen and (min-width:377px) and (max-width:767px){ 
  #hamburg {
    display: block;
  }
  #menu {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 99999999 !important;
    display: flex;
    top: 3vh;
    justify-content: flex-end;
    align-items: center;
    padding-right: 1vw;
  }

  /* #menu .btn-group {
    display: none;
  } */
   #homepage 
   {
    display: none;
   }
   #collection
   {
    display: none;
   }
   #About 
   {
    display: none;
   }
   .btnstyle {
    padding: 15px 15px;
    font-size: 2.5vw !important;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
  
  .btnstyle2 {
    padding: 15px 15px;
    font-size: 2.5vw !important;
    line-height: auto;
    color: #2c2c2c !important;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: 'ridley_groteskbold';
    font-weight: bolder;
    text-transform: uppercase;
  }
   .btnstyle2rtl {
    padding: 15px 15px;
    font-size: 3.5vw !important;
    line-height: auto;
    color: #2c2c2c;
    background-color: #fff;
    border: 2px solid #2c2c2c;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1vw;
  }
  .btnstylertl {
    padding: 15px 15px;
    font-size: 3.5vw !important;
    line-height: auto;
    color: #fff;
    background-color: #2c2c2c;
    border: 2px solid #fff;
    font-family: "Cairo", sans-serif !important;
    font-weight: 700;
    letter-spacing: .1vw;
  }
  .btn:focus,
  .btn:active {
    outline: none;
    /* Remove focus outline */
    box-shadow: none;
    /* Remove Bootstrap focus box shadow */
    /* Remove the border during focus/active */
  }
  
  .btn:hover {
    background-color: #2ad8ff;
    color: #2c2c2c;
  }
  #banner {
    height: 70vh !important;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  #banner video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
  }
  
  #banner #overlay {
    width: 60%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(40%, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #overlay img {
    height: 100%;
    width: 100%;
  }
  #mode {
    height: 5vh;
    width: 100%;
    position: fixed;
    z-index: 99999998 !important;
    top: 40vh;
    display: flex;
    justify-content: flex-end;
  }
[dir="rtl"]  #mode {
  height: 5vh;
  width: 100%;
  position: fixed;
  z-index: 99999998 !important;
  top: 40vh;
  display: flex;
  justify-content: flex-end;
}
  #modeouter {
    width: 20%;
    height: 100%;
    border: 3px solid white;
    background-color: white;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
  }

  #modeinner {
    width: 50%;
    height: 100%;
    border-radius: 60%;
    background-color: #2c2c2c;
  }

  #work {
    height: 100vh;
    width: 100%;
  }

  #work .row {
    height: 100%;
    width: 100%;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    margin: 0px;
  }

  #work .col-left {
    width: 100%;
    height: 100%;
    background-color: #2c2c2c;
    border-right: none;
    border-left: none;
    padding: 0%;

  }

  [dir="rtl"] #work .col-left {
    width: 100%;
    height: 100%;
    background-color: #2c2c2c;
    border-right: none;
    border-left: none;
    padding: 0%;
  }

  #work .col-left #topcontent {
    width: 100%;
    height: 40%;
    padding-left: 0%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }

  [dir="rtl"] #work .col-left #topcontent {
    width: 100%;
    height: 40%;
    padding-left: 0%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }

  #topcontent #topcontenth1 {
    width: 100%;
    padding-left: 5%;

  }

  [dir="rtl"] #topcontent #topcontenth1 {
    width: 100%;
    padding-right: 5%;
  }

  #topcontent h1 {
    color: white;
    font-family: 'ridley_groteskbold';
    color: #2ad8ff;
    letter-spacing: 0px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15vw;
    font-weight: 800;
    line-height: 15vw;
    padding: 1% 0%;
  }

  [dir="rtl"] #topcontent h1 {
    color: white;
    font-family: "Cairo", serif;
    color: #2ad8ff;
    letter-spacing: 0px;
    text-transform: uppercase;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16vw;
    font-weight: 900;
    line-height: 16vw;
    padding: 1% 0%;
  }

  #work .col-left #bottomcontent {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0%;
  }

  [dir="rtl"] #work .col-left #bottomcontent {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0%;
  }

  #bottomcontent #bottomcontenttop {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5%;
  }

  [dir="rtl"] #bottomcontent #bottomcontenttop {
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0% 5% 0% 0%;
  }

  #bottomcontent #bottomcontenttop p {
    color: white;
    font-family: 'ridley_groteskregular';
    font-size: 4vw;
    text-align: justify;
    flex-basis: 90%;
  }
[dir="rtl"] #bottomcontent #bottomcontenttop p {
  color: white;
  font-family: "Cairo", serif;
  font-weight: 400;
  font-size: 4.5vw;
  text-align: justify;
  flex-basis: 90%;
}
  #bottomcontent #bottomcontentbottom {
    width: 100%;
    height: 50%;
    display: flex;
    padding-left: 5%;
  }

  [dir="rtl"] #bottomcontent #bottomcontentbottom {
    width: 100%;
    height: 40%;
    display: flex;
    padding: 0% 5% 0% 0%;
  }

  #bottomcontent #bottomcontentbottom p {
    color: white;
    font-family: 'ridley_groteskregular';
    font-size: 4vw;
    text-align: justify;
    flex-basis: 90%;
  }
[dir="rtl"] #bottomcontent #bottomcontentbottom p
{
  color: white;
  font-family: "Cairo", serif;
  font-weight: 400;
  font-size: 4.5vw;
  text-align: justify;
  flex-basis: 90%;
}
  #work .col-right {
    display: none;
  }

  .trans {

    display: none;
  }

  #colrighttop {
    display: none;
  }

  #colrighttop p {
    display: none;
  }

  #colrightbottom {
    display: none;
  }

  #colrightbottom p {
    display: none;
  }

  /* multipliereffect */
  #multipliereffect {
    width: 100%;
    height: 15vh;
    white-space: nowrap;
    overflow: hidden;
    background-color: #2c2c2c;
  }
[dir="rtl"]  #multipliereffect {
  width: 100%;
  height: 15vh;
  white-space: nowrap;
  overflow: hidden;
  background-color: #2c2c2c;
}
#container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

[dir="rtl"] #container {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation-name: move2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8vw;
  font-family: 'ridley_groteskextrabold';
  font-weight: bolder;
  color: white;
  text-transform: uppercase;
}
[dir="rtl"] #container h1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12vw;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
}

/* cardconatiner */
#cardconatiner {
  height: auto;
  width: 100%;
  overflow: hidden;
  background-color: #2c2c2c;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

#cardconatiner .row {
  height: auto;
  width: 100%;
}

#cardconatiner .card {
  height: auto;
  width: 100%;
  border: 2px solid white;
  background-color: #2c2c2c;
  transition: all 0.5 ease-in-out;

}

#cardconatiner .card .card-img-top {
  height: 50vh;
  position: relative;
  overflow: hidden;
  display: flex;
  /* Align images horizontally */
}

#cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
  /* Align all images to the start position */
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

#cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

#cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(-100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

[dir="rtl"] #cardconatiner .card .card-img-top img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 1s ease-in-out;
  opacity: 0;
  /* Initially hide images */
  z-index: 0;
  /* Set z-index to manage stacking */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.active {
  opacity: 1;
  /* Show the active image */
  transform: translateX(0);
  /* Show the active image */
  z-index: 1;
  /* Ensure the active image is on top */
}

[dir="rtl"] #cardconatiner .card .card-img-top img.hidden {
  opacity: 0;
  /* Hide the previous image */
  transform: translateX(100%);
  /* Slide out the previous image */
  z-index: 0;
  /* Ensure the hidden image is behind */
}

.card-img-top img:nth-child(1) {
  z-index: 7;
}

.card-img-top img:nth-child(2) {
  z-index: 6;
}

._canvas_container {
  z-index: 999999 !important;
  pointer-events: none;

}

#cardconatiner .card .card-body {
  height: auto;
  width: 100%;
  padding: 0;
  border-top: 2px solid white;
}

#cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 6vw;
  text-transform: uppercase;
}
[dir="rtl"] #cardconatiner .card .card-title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 6vw;
  text-transform: uppercase;
}
#cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: 'ridley_groteskregular';
  color: white;
}

[dir='rtl'] #cardconatiner .card .card-text {
  height: 20vh;
  width: 100%;
  margin: 0%;
  padding: 0% 2%;
  font-family: "Cairo", serif;
  color: white;
}
#cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 1rem; 
  padding-right: 0rem;
  list-style-position: inside; 
}
[dir="rtl"] #cardconatiner .card .card-text ul 
{
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: justify;
  margin: 0;
  gap: 2vh;
  padding-left: 0rem;
  padding-right: 1rem; 
  list-style-position: inside; 
}
#cardconatiner .card .card-text ul li 
{
  font-family: 'ridley_groteskmedium';
  font-size: 4vw;
  text-transform: capitalize;
}

[dir="rtl"] #cardconatiner .card .card-text ul li 
{
  font-family: "Cairo", serif;
  font-size: 4vw;
  letter-spacing: 0.5vw;
  word-spacing: 0.5vw;
  font-weight: 500;
  text-transform: capitalize;
}
.cardprice 
{
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5vw;
}
[dir="rtl"] .cardprice 
{
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}
.cardprice h5 
{
  color: white;
  font-size: 4vw;
  font-family: 'ridley_groteskextrabold';
  text-transform: uppercase;
}
[dir="rtl"] .cardprice h5 
{
  color: white;
  font-size: 4vw;
  word-spacing: 0.1vw;
  font-family: "Cairo", serif;
  text-transform: none;
  font-weight: 900;
}
.cardprice p
{
  color: white;
  font-size: 3vw;
  padding-bottom: 0vh;
  padding-top: 0.5vh;
}
[dir="rtl"] .cardprice p
{
  color: white;
  font-size: 3vw;
  padding-bottom: 0vh;
  padding-top: 1vh;
}
.cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 3.5vw;
  padding-bottom: 1.5vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
[dir="rtl"] .cardprice span 
{
  font-family: 'ridley_groteskextrabold';
  color: white;
  font-size: 3.5vw;
  padding-bottom: 1vh;
  padding-top: 0vh;
  text-transform: uppercase;
}
.cardprice span:nth-child(4)
{
  text-decoration: line-through;
  text-decoration-thickness: 0.2vh;
}
#cardconatiner .card #cardbtn {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0%;
  /* justify-content: center; */
}

#cardconatiner .card #cardbtn .btn {
  font-family: 'ridley_groteskregular';
  text-transform: uppercase;
  font-size: 2vw;
}
[dir="rtl"] #cardconatiner .card #cardbtn .btn {
  font-family: "Cairo", serif;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 700;
}


  /* serviceeffect */
  #serviceeffect {
    height: 15vh;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: #2c2c2c;
  }
  
  #servicecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    animation-name: servicemove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] #servicecontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: servicemove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  @keyframes servicemove {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes servicemove2 {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(100%);
    }
  }
  
  
  #servicecontent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #servicecontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 7.5vw;
  }
  [dir="rtl"] #servicecontent h1 {
    color: white;
    text-transform: uppercase;
    font-size: 9.5vw;
    font-family: "Cairo", serif;
    font-weight: 900;
  }
  #tmld {
    width: 100%;
    height: 100%;
    position: relative;
  }

  #tmldimage {
    width: 100%;
    height: 45vh;
    border-radius: 0vw;
    position: relative;
    z-index: 100;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    /* Correct translate to center */
  }

  [dir="rtl"] #tmldimage {
    width: 100%;
    height: 45vh;
    border-radius: 0vw;
    position: relative;
    z-index: 100;
    top: 0%;
    right: 0%;
    transform: translate(0%, 0%);
    /* Correct translate to center */
  }

  #tmldimage img:nth-child(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%; /* Set the desired height */
    width: 50%; /* Set the desired width */
    transform: translate(-50%, -50%);
  }

  [dir="rtl"] #tmldimage img:nth-child(1) {
    position: absolute;
    top: 50%;
    right: 50%;
    height: 50%; /* Set the desired height */
    width: 50%; /* Set the desired width */
    transform: translate(50%, -50%);
  }

  #tmldimage img:nth-child(2) {
    position: absolute;
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    right: 0%;
    animation-name: rotatetmld;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  [dir="rtl"] #tmldimage img:nth-child(2) {
    position: absolute;
    height: 90%;
    width: 90%;
    top: 5%;
    left: 0%;
    right:5%;
    animation-name: rotatetmld2;
    animation-duration: 20s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  @keyframes rotatetmld {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes rotatetmld2 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  #tmldrow1 {
    height: 60vh;
    width: 100%;
  }

  #tmldrow1 .tmldrow1colleft {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #tmldrow1colleftcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow1colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
  [dir="rtl"] #tmldrow1colleftcontnet h4 {
  font-size: 4vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: #3fff86;
  line-height: 6vh;
   }
  #tmldrow1colleftcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }

  [dir="rtl"]  #tmldrow1colleftcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow1 .tmldrow1colright {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
  }

  #tmldrow1colrightcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow1colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
[dir="rtl"]  #tmldrow1colrightcontnet h4 {
  font-size: 4vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: #3fff86;
  line-height: 6vh;
}
  #tmldrow1colrightcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow1colrightcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 {
    height: 60vh;
    width: 100%;
  }

  #tmldrow2 .tmldrow2colleft {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
  }

  #tmldrow2colleftcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow2colleftcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
  [dir="rtl"] #tmldrow2colleftcontnet h4 {
    font-size: 4vh;
  text-transform: uppercase;
  font-family: "Cairo", serif;
  font-weight: 900;
  color: #3fff86;
  line-height: 6vh;
  }
  #tmldrow2colleftcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colleftcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #tmldrow2 .tmldrow2colright {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #tmldrow2colrightcontnet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #tmldrow2colrightcontnet h4 {
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    color: #3fff86;
    line-height: 4vh;
  }
  [dir="rtl"] #tmldrow2colrightcontnet h4 {
    font-size: 4vh;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    font-weight: 900;
    color: #3fff86;
    line-height: 6vh;
  }
  #tmldrow2colrightcontnet p {
    font-size: 2vh;
    line-height: 1.5vh;
    font-family: 'ridley_groteskmedium';
    text-transform: capitalize;
    color: white;
  }
  [dir="rtl"] #tmldrow2colrightcontnet p {
    font-size: 2.5vh;
    line-height: 1.5vh;
    font-family: "Cairo", serif;
    font-weight: 500;
    text-transform: capitalize;
    color: white;
  }
  #ventureanimation {
    height: 15vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
[dir="rtl"] #ventureanimation {
  height: 15vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.venturecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: venturemove;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
[dir="rtl"] .venturecontainer {
  height: 100%;
  width: 100%;
  display: inline-block;
  animation-name: venturemove2;
  animation-duration: 10s;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ventureheading 
{
  width: 100%;
  height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ventureheading  h1 {
  color: #2c2c2c;
  text-transform: uppercase;
  font-family: 'ridley_groteskextrabold';
  font-size: 5vw;
} 
[dir="rtl"] .ventureheading  h1 {
  color: #2c2c2c;
  text-transform: uppercase;
  font-family: "Cairo", sans-serif;
  font-size: 6.9vw;
  font-weight: 900;
} 

  #venturecontent {
    height: 25vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #venturecontent h4 {
    height: 100%;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'ridley_groteskextrabold';
    font-size: 2vh;
  }
[dir="rtl"]  #venturecontent h4 {
  height: 100%;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Cairo", serif;
  font-weight: 900;
  font-size: 2vh;
}
  #ssep {
    width: 100%;
    height: 150vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 0vw 3vw;
  }

  #sseptop {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  [dir="rtl"] #sseptop {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #sseptopleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  [dir="rtl"] #sseptopleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  #sseptopright {
    width: 100%;
    height: 60%;
  }

  [dir="rtl"] #sseptopright {
    width: 100%;
    height: 60%;
  }
  #sseptopright p {
    width: 90%;
    height: auto;
    font-family: 'ridley_grotesklight';
    font-size: 1.5vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #sseptopright p {
    width: 90%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 600;
    font-size: 1.7vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  #ssepbottom {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #ssepbottomleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  [dir="rtl"] #ssepbottomleft {
    width: 100%;
    height: 40%;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
  }

  #ssepbottomright {
    width: 100%;
    height: 60%;
  }

  [dir="rtl"] #ssepbottomright {
    width: 100%;
    height: 60%;
  }
  #ssepbottomright p {
    width: 90%;
    height: auto;
    font-family: 'ridley_grotesklight';
    font-size: 1.5vh;
    color: #2c2c2c;
    font-weight: 600;
    text-align: justify;
    text-transform: capitalize;
  }
  [dir="rtl"] #sseptopright p {
    width: 90%;
    height: auto;
    font-family: "Cairo", serif;
    font-weight: 600;
    font-size: 1.7vh;
    color: #2c2c2c;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 0.1vw;
  }
  .brandcard {
    height: 30vh;
    background-color: transparent !important;
    border: 1px solid black;
  }

  .brandcard .card-header {
    width: 100%;
    height: 40%;
    background-color: transparent !important;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .brandcard .card-header img {
    width: 70%;
    object-fit: cover;
  }

  .brandcard .card-body {
    width: 100%;
    height: 60%;
  }

  .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: 'ridley_groteskextrabold';
    font-size: 4vw;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  [dir="rtl"] .brandcard .card-header h3 {
    width: 100%;
    height: 100%;
    font-family: "Cairo", serif;
    font-size: 5vw;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    color: #2c2c2c;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .brandcard .card-body p {
    font-family: 'ridley_grotesklight';
    font-size: 3vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  [dir="rtl"] .brandcard .card-body p {
    font-family: "Cairo", serif;
    font-size: 3.5vw;
    font-weight: 600;
    text-transform: capitalize;
    color: #2c2c2c;
    text-align: justify;
  }
  .communityrow {
    height: 15vh;
    width: 100%;
    background-color: #2c2c2c;
    overflow: hidden;
    white-space: nowrap;
  }
  .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  [dir="rtl"] .communitycontainer {
    height: 100%;
    width: 100%;
    display: inline-block;
    animation-name: commove2;
    animation-duration: 10s;
    animation-delay: 0ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .communitycontent {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'ridley_groteskextrabold';
    font-size: 6.2vw;
  }
  [dir="rtl"] .communitycontent h1 {
    color: white;
    text-transform: uppercase;
    font-family: "Cairo", serif;
    font-size: 7.2vw;
    font-weight: 900;
  }
  .multiimage {
    width: 100%;
    height: 120vh;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
[dir="rtl"]   .multiimage {
  width: 100%;
  height: 120vh;
  border-bottom: 3px solid white;
  background-color: #2c2c2c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
  .multiimageleft {
    width: 100%;
    height: 50%;
    border-right: none;
    border-bottom: 3px solid white;
    position: relative;
    overflow: hidden;
  }

  [dir="rtl"] .multiimageleft {
    width: 100%;
    height: 50%;
    border-right: none;
    border-left: none;
    border-bottom: 3px solid white;
    position: relative;
    overflow: hidden;
  }

  .multiimageleft img:nth-child(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 15;
  }

  /* .multiimageleft img:nth-child(2)
  {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  } */
  .multimageright {
    width: 100%;
    height: 50%;
  }
[dir="rtl"] .multimageright {
  width: 100%;
  height: 50%;
}
  .multiimagerightcontent {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
  }
  [dir="rtl"] .multiimagerightcontent {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
  }

  .multiimagerightcontent h4 {
    font-family: 'ridley_groteskbold';
    color: white;
    font-size: 5vw;
  }
[dir="rtl"]   .multiimagerightcontent h4 {
  font-family: "Cairo", serif;
  color: white;
  font-size: 5vw;
}
  .multiimagerightcontent p:nth-child(2) {
    font-family: 'ridley_groteskmedium';
    color: white;
    font-size: 2.5vw;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(2) {
    font-family: "Cairo", serif;;
    color: white;
    font-size: 3vw;
  }
  .multiimagerightcontent p:nth-child(3) {
    font-family: 'ridley_groteskmedium';
    color: white;
    font-size: 2.5vw;
  }
  [dir="rtl"] .multiimagerightcontent p:nth-child(3) {
    font-family: "Cairo", serif;
    color: white;
    font-size: 3vw;
  }
  .multiimagerightcontentimg {
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }

  .multiimagerightcontentimg .mulimgs {
    width: 20%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20%;
    cursor: pointer;
    transition: all 0.5s 0ms ease-in-out;
  }

  .multiimagerightcontentimg .mulimgs:hover {
    transform: scale(0.8, 0.8);
  }
  #imgdisplay 
  {
    width: 100%;
    height: 180vh;
    background-color: #2c2c2c;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid white
  }
  #watchfixed {
    width: 100%;
    height: 30vh;
    position: sticky;
    top: 70vh; /* Adjust this as necessary */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #watchfixed h1 
  {
    text-transform: uppercase;
    -webkit-text-stroke: 2px white;
    color: transparent;
    font-size: 18vw;
    font-family: 'ridley_groteskbold';
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  [dir="rtl"] #watchfixed h1 
  {
    text-transform: uppercase;
    -webkit-text-stroke: 2px white;
    color: transparent;
    font-size: 28vw;
    font-family: "Cairo", serif;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #imgdisplaytoph1 
  {
    width: 100vw;
    height:5vh;
    color: white;
    position: absolute;
    top: 5vh;
    left: 0%;
    font-family: 'ridley_groteskbold';
    font-size: 4vw;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  [dir="rtl"]  #imgdisplaytoph1 
  {
    width: 100vw;
    height: 5vh;
    color: white;
    position: absolute;
    top: 5vh;
    left: 0%;
    right: 0%;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 4vw;
    text-align: right;
    text-transform: capitalize;
  }
  #imgdisplay #imgtext:nth-child(3)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 20vh;
    left: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(3)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 20vh;
    left: 0%;
    right: 15%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(3) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(4)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 55vh;
    right: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(4)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 55vh;
    left: 0%;
    right: 25%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(4) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(5)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 90vh;
    left: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(5)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 90vh;
    left: 0%;
    right: 15%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(5) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplay #imgtext:nth-child(6)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 125vh;
    right: 15%;
    border: 2px solid white;
  }
  [dir="rtl"]  #imgdisplay #imgtext:nth-child(6)
  {
    width: 60vw;
    height: 30vh;
    position: absolute;
    top: 125vh;
    right: 25%;
    border: 2px solid white;
  }
  #imgdisplay #imgtext:nth-child(6) img 
  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #imgdisplaybottomh1 
  {
    width: 70vw;
    height: 10vh;
    color: white;
    position: absolute;
    top: 165vh;
    left: 15%;
    font-family: 'ridley_groteskbold';
    font-size: 3vw;
    text-transform: capitalize;
  }
  [dir="rtl"]  #imgdisplaybottomh1 
  {
    width: 70vw;
    height: 10vh;
    color: white;
    position: absolute;
    top: 165vh;
    left: 0%;
    right: 15%;
    font-family: "Cairo", serif;
    font-weight: 700;
    font-size: 3vw;
    text-transform: capitalize;
    text-align: right;
  }
  #footers 
  {
    height: 100vh;
    width: 100vw;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }
  [dir="rtl"] #footers 
  {
    height: 100vh;
    width: 100vw;
    border-bottom: 3px solid white;
    background-color: #2c2c2c;
    display: block;
    flex-direction: column;
    overflow: hidden;
  }
  #footerleft 
  {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }
  [dir="rtl"] #footerleft 
  {
    height: 50%;
    width: 100vw;
    border-right: none;
    border-bottom: 3px solid white;
    border-left: none;
  }
  #footerleft iframe 
  {
    width: 100%;
    height: 100%;
  }
  #footerright 
  {
    height: 50%;
    width: 100vw;
  }
  [dir="rtl"]  #footerright 
  {
    height: 50%;
    width: 100vw;
  }
  #footerrightlogo 
  {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #footerrightlogo img 
  {
    width: 70%;
    height: 63%;
  }
  #footerrighthead 
  {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerrighthead h5 
  {
    color: white;
    text-transform:uppercase;
    font-family: 'ridley_groteskbold';
    font-size: 5vw;
  }
  #footerbtn 
  {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerbtn .btn 
  {
    padding: 1vw 3vw;
    font-size: 1.5vw;
  }
  #socialmediabtn 
  {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
  }
  #socialmediabtn img 
  {
    cursor: pointer;
    width: 4vw;
  }
  #copyrightcontent 
  {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #copyrightcontent p 
  {
    color: #6e6c6c;
    text-transform: capitalize;
    font-family: 'ridley_grotesklight';
    font-weight: lighter;
    font-size: 70%;
  }
}