/* this coding created by web developer/ Ahmed fawzy mohamed */
/* personal email: ahmedfawzyalhegazy2020@gmail.com */
/* whatsapp: +201094848584 */
/* website: https://orion-comp.com/ */
/* formal email: info@orion-comp.com */
/* linkedin account: https://www.linkedin.com/in/ahmed-fawzy-mohamed-48a771202 */

/* Start Global Rules */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --white: #ffffff;
  --black: #000000;
  --green: #0d5066;
  --greendark: #02384a;
  --lightgreen: #00c950;
  --lightblue: #c9f2ff;
  --txtgreen: #5b738b;
  --txtindark: #cfd2d4;
  --pink: #6c32a9;
  --pinkdark: #5d2b92;
  /* --pink: #3f1d63; */
  --main-transition: all 0.25s ease-in-out;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background-color: var(--white);
  background-color: #ddd;
}
::-webkit-scrollbar-thumb {
  background-color: var(--txtgreen);
  border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--green);
}
html {
  scroll-behavior: smooth;
}
body {
  /* font-family: "Cairo", sans-serif; */
  direction: rtl;
  font-family: "Almarai", sans-serif;
  font-style: normal;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.txtcenter {
  text-align: center;
}
/* start all buttons */
.arrowbtn {
  display: inline-block;
  width: 50px;
  padding: 7px 5px;
  border-radius: 5px;
  background-color: var(--green);
  color: var(--white);
  text-align: center;
}

.greentransbtn {
  background-color: transparent;
  color: var(--green);
  padding: 6px 20px;
  display: inline-block;
  border-radius: 30px;
  border: 1px solid var(--green);
  font-size: 14px;
  transition: all 0.25s ease-in-out;
}
.greentransbtn:hover {
  background-color: var(--green);
  color: var(--white);
}

.greenbtn {
  background-color: var(--green);
  color: var(--white);
  padding: 8px 20px;
  display: inline-block;
  border-radius: 30px;
  border: 1px solid var(--green);
  font-size: 14px;
  transition: all 0.25s ease-in-out;
}
.greenbtn:hover {
  background-color: var(--lightgreen);
  border-color: var(--lightgreen);
}

.whitetransbtn {
  background-color: transparent;
  color: var(--white);
  padding: 8px 20px;
  display: inline-block;
  border-radius: 30px;
  border: 1px solid var(--white);
  font-size: 14px;
  transition: all 0.25s ease-in-out;
}
.whitetransbtn:hover {
  background-color: var(--white);
  color: var(--green);
}
/* End all buttons */

.greenclr {
  color: var(--green);
}
.txtgreenclr {
  color: var(--txtgreen);
}

.maintitle {
  text-align: center;
  margin-bottom: 30px;
}
.maintitle h3 {
  color: var(--green);
}
.maintitle p {
  margin-bottom: 0px;
  color: var(--txtgreen);
}

.showmob {
  display: none;
}
.mixprob {
  display: none !important;
}
/* start custom-input file in registration page */
.custom-inpfile {
  background-color: transparent;
  position: relative;
  border: 1px dashed var(--txtgreen);
  z-index: 1;
  width: 100%;
  height: 100px;
  margin: auto;
  cursor: pointer;
  margin-bottom: 10px;
}
.custom-inpfile .repl-inpfile {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 10px;
  color: var(--txtgreen);
  cursor: pointer;
}
.custom-inpfile .repl-inpfile h5 {
  color: var(--txtgreen);
  margin: 3px 0;
  font-size: 14px;
}
.custom-inpfile .repl-inpfile span {
  font-size: 25px;
  color: var(--txtgreen);
}
.custom-inpfile input[type="file"] {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  cursor: pointer;
}
/* End custom-input file in registration page */
@media (max-width: 576px) {
  section {
    overflow: hidden;
  }
  .showdesk {
    display: none !important;
  }
  .showmob {
    display: block;
  }
  .mixprob {
    display: block !important;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .showdesk {
    display: none;
  }
  .showmob {
    display: block;
  }
  .mixprob {
    display: block !important;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* media query  */
@media (max-width: 320px) {
  .container {
    max-width: 300px !important;
  }
}
@media (min-width: 360px) {
  .container {
    max-width: 340px !important;
  }
}
@media (min-width: 410px) {
  .container {
    max-width: 390px !important;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px !important;
  }
}
@media (min-width: 769px) {
  .container {
    max-width: 720px !important;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px !important;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px !important;
  }
}
/* for very lage screens */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px !important;
  }
}

/* @media (min-width: 1600px) {
  .container {
    max-width: 1440px !important;
  }
}

@media (min-width: 1800px) {
  .container {
    max-width: 1560px !important;
  }
}

@media (min-width: 2000px) {
  .container {
    max-width: 1680px !important;
  }
}

@media (min-width: 2400px) {
  .container {
    max-width: 1920px !important;
  }
}

@media (min-width: 2800px) {
  .container {
    max-width: 2100px !important;
  }
}

@media (min-width: 3200px) {
  .container {
    max-width: 2300px !important;
  }
} */
/* End @media */

/* End Global Rules */

/* Start header */

.header-rtl {
  direction: rtl;
  text-align: right;
}
.header-rtl .header-logo {
  flex-shrink: 0;
  margin-left: 10px;
}
header {
  background-color: var(--white);
  box-shadow: 0px 1px 1px #ddd;
}
header .container {
  padding: 10px 0px;
}
header .mainheadcoont {
  display: flex !important;
  justify-content: center;
  gap: 100px;
}
header .upheadbtns {
  gap: 20px;
}
header .deskmenu {
  gap: 100px;
}
header .headerlogo {
  color: var(--green);
  font-size: 20px;
  font-weight: bold;
}
header .headerlogo img {
  height: 45px;
}
.header-link {
  position: relative;
  transition: color 0.3s;
  color: var(--green);
}
.header-link:hover {
  color: var(--green);
}
.header-link::after {
  content: "";
  display: block;
  height: 2px;
  background-color: var(--green);
  width: 0;
  transition: 0.3s;
  margin-top: 4px;
}
.header-link:hover::after {
  width: 100%;
}
.toggle-switch {
  position: relative;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
  direction: rtl;
}
.toggle-switch .toggle-circle {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s;
}
.toggle-switch.dark {
  background-color: #333;
}
.toggle-switch.dark .toggle-circle {
  right: 28px;
}
.toggle-switch i {
  position: absolute;
  top: 3px;
  font-size: 14px;
  color: white;
}
.toggle-switch .sun-icon {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
.toggle-switch .moon-icon {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
.mobile-sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1050;
  transition: right 0.3s ease;
  overflow-y: auto;
  z-index: 999999999999999;
}
.mobile-sidebar.active {
  right: 0;
}
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1040;
  display: none;
}
.overlay.active {
  display: block;
}
.close-sidebar {
  background: none;
  border: none;
  font-size: 1.5rem;
}

@media (max-width: 576px) {
  .header-rtl .header-logo img {
    height: 30px !important;
  }
  header .headerlogo {
    font-size: 16px;
  }
  header {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 999999999;
  }
  header .mainheadcoont {
    gap: 10px;
  }
  header .deskmenu {
    gap: 50px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  header {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 999999999;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  header .mainheadcoont {
    gap: 30px;
  }
  header .deskmenu {
    gap: 30px;
  }
  header .mainheadcoont {
    display: flex !important;
    justify-content: space-between;
    gap: 100px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  header .mainheadcoont {
    gap: 10px;
  }
  header .deskmenu {
    gap: 30px;
  }
  header .upheadbtns {
    gap: 5px;
  }
  .header-link {
    font-size: 14px;
  }
  header .headerlogo {
    font-size: 16px;
  }
  header .headerlogo img {
    height: 35px;
  }
  header .greenbtn,
  header .greentransbtn {
    font-size: 12px;
    padding: 7px 15px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  header .mainheadcoont {
    gap: 50px;
  }
  header .deskmenu {
    gap: 50px;
  }
}
@media (min-width: 1500px) {
}
/* @media (min-width: 2000px) {
  header .mainheadcoont {
    gap: 200px;
  }
  header .deskmenu {
    gap: 200px;
  }
}
@media (min-width: 2500px) {
  header .mainheadcoont {
    gap: 250px;
  }
  header .deskmenu {
    gap: 250px;
  }
} */
/* End header */

/* Start herosec */
.herosec .container {
  padding: 100px 0px 50px 0px;
}
.herosec .upcontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.herosec .herotitle {
  text-align: center;
}
.herosec .herotitle h1 {
  color: var(--green);
  margin-bottom: 30px;
  font-size: 28px;
}
.herosec .herotitle p {
  margin-bottom: 25px;
  color: var(--txtgreen);
}
.herosec .cirimg {
  width: 100%;
}
.herosec .titimg {
  display: block;
  width: 200px;
  margin: auto;
  margin-bottom: 30px;
}
.herosec .fordesk {
}
.herosec .formob {
  display: none;
}

/* start group of right images at hero section */
.herosec .groupheroimg {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto;
}
.herosec .groupheroimg .imgbox {
  background-color: var(--white);
  padding: 5px;
  border-radius: 7px;
  width: 150px;
  box-shadow: 1px 1px 2px #ddd, -1px -1px 2px #ddd;
  position: absolute;
}

.herosec .rightcollecimgs .box01 {
  top: 0px;
  left: 0px;
  transform: scale(1) rotate(-7.5deg);
  z-index: 5;
}
.herosec .rightcollecimgs .box02 {
  bottom: 0px;
  left: 25%;
  transform: scale(0.8) rotate(13deg);
  z-index: 4;
}
.herosec .rightcollecimgs .box03 {
  top: -5%;
  left: 40%;
  transform: scale(0.5) rotate(-7.5deg);
  z-index: 3;
}
.herosec .rightcollecimgs .box04 {
  top: -5%;
  left: 53%;
  transform: scale(0.2) rotate(22deg);
  z-index: 2;
}
.herosec .rightcollecimgs .box05 {
  top: 40%;
  right: 0px;
  transform: scale(1.1) rotate(15deg);
  z-index: 7;
}
.herosec .groupheroimg .imgbox img {
  width: 100%;
  margin-bottom: 5px;
  border-radius: 7px;
}
.herosec .groupheroimg .imgbox .txtbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.herosec .groupheroimg .imgbox .txtbox > div {
  color: var(--green);
  font-size: 10px;
}
.herosec .groupheroimg .imgbox span {
  color: #e76500;
}
.herosec .groupheroimg .imgbox h5 {
  margin-bottom: 0px;
  font-size: 10px;
  color: var(--green);
  font-weight: bold;
}
/*  */
.herosec .groupheroimg .meesagebox {
  background-color: var(--white);
  padding: 5px;
  border-radius: 7px;
  width: 180px;
  box-shadow: 1px 1px 2px #ddd, -1px -1px 2px #ddd;
  position: absolute;
}

.herosec .rightcollecimgs .meesagebox .comarrow {
  position: absolute;
  bottom: -21%;
  transform: rotate(-15deg);
  left: 10%;
  z-index: 6;
}

.herosec .groupheroimg .meesagebox h4 {
  font-size: 13px;
  color: var(--green);
  margin-bottom: 10px;
  font-weight: bold;
}
.herosec .groupheroimg .meesagebox .txtbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.herosec .groupheroimg .meesagebox .txtbox > div {
  color: var(--green);
  font-size: 10px;
}
.herosec .groupheroimg .meesagebox span {
  color: #e76500;
}
.herosec .groupheroimg .meesagebox h5 {
  margin-bottom: 0px;
  font-size: 10px;
  color: var(--green);
  font-weight: bold;
}
.herosec .rightcollecimgs .shape {
  position: absolute;
  width: 10px;
  height: 30px;
  background: transparent;
  overflow: hidden;
  bottom: -17px;
  left: 7%;
  transform: rotate(15deg);
  z-index: -1;
}

.herosec .rightcollecimgs .shape::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-bottom-right-radius: 100% 100%;
}
/* End group of right images at hero section */

/* start group of left images at hero section */
.herosec .leftcollecimgs .box01 {
  top: 0px;
  right: 0px;
  transform: scale(1) rotate(7.5deg);
  z-index: 5;
}
.herosec .leftcollecimgs .box02 {
  bottom: 0px;
  right: 25%;
  transform: scale(0.8) rotate(-13deg);
  z-index: 4;
}
.herosec .leftcollecimgs .box03 {
  top: -5%;
  right: 40%;
  transform: scale(0.5) rotate(7.5deg);
  z-index: 3;
}
.herosec .leftcollecimgs .box04 {
  top: -5%;
  right: 53%;
  transform: scale(0.2) rotate(-22deg);
  z-index: 2;
}
.herosec .leftcollecimgs .box05 {
  top: 40%;
  left: 0px;
  transform: scale(1.1) rotate(-15deg);
  z-index: 7;
}
/* .herosec .leftcollecimgs .meesagebox .comarrow {
  position: absolute;
  bottom: -21%;
  transform: rotate(-15deg);
  right: 10%;
  z-index: 6;
} */
.herosec .leftcollecimgs .shape {
  position: absolute;
  width: 10px;
  height: 30px;
  background: transparent;
  overflow: hidden;
  bottom: -17px;
  right: 7%;
  transform: rotate(-15deg);
  z-index: -1;
}

.herosec .leftcollecimgs .shape::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-bottom-left-radius: 100% 100%;
}
/* End group of left images at hero section */

/* start group of mobile images at hero section */
.herosec .centercollecimgs .centerbox01 {
  top: 70px;
  left: -5%;
  transform: scale(1) rotate(-7.5deg);
  z-index: 2;
}
.herosec .centercollecimgs .centerbox02 {
  top: 70px;
  left: 50%;
  transform: scale(1) rotate(7.5deg) translateX(-50%);
  z-index: 1;
}
.herosec .centercollecimgs .centerbox03 {
  top: 70px;
  right: -5%;
  transform: scale(1) rotate(-7.5deg);
  z-index: 3;
}
.herosec .centercollecimgs .centerbox04 {
  top: 50px;
  right: 15%;
  transform: scale(1.1) rotate(-5deg);
  z-index: 7;
}
.herosec .centercollecimgs .meesagebox .comarrow {
  position: absolute;
  bottom: -21%;
  transform: rotate(-15deg);
  right: 10%;
  z-index: 6;
}
.herosec .centercollecimgs .shape {
  position: absolute;
  width: 10px;
  height: 30px;
  background: transparent;
  overflow: hidden;
  bottom: -17px;
  left: 7%;
  transform: rotate(15deg);
  z-index: -1;
}

.herosec .centercollecimgs .shape::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-bottom-right-radius: 100% 100%;
}
/* End group of mobile images at hero section */

@media (max-width: 576px) {
  .herosec .container {
    padding: 127px 0px 50px 0px;
  }
  .herosec .formob {
    display: flex;
    padding: 0px;
  }
  .herosec .fordesk {
    display: none;
  }
  .herosec .groupheroimg {
    position: relative;
    width: 100% !important;
    height: 400px;
    max-width: 100%;
    overflow: hidden;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .herosec .container {
    padding: 127px 0px 50px 0px;
  }
  .herosec .formob {
    display: flex;
    padding: 0px;
  }
  .herosec .fordesk {
    display: none;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .herosec .groupheroimg {
    width: 100%;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .herosec .groupheroimg {
    width: 100%;
  }
}

/* End herosec */

/* Start whycoins */
/* .whycoins {
}
.whycoins .container {
  padding: 50px 0px;
}
.whycoins .whytitling {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 70px;
  left: 0px;
}
.whycoins .whytitling h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--white);
}
.whycoins .maincont {
  position: relative;
}
.whycoins .maincont .whycoinsbtns {
  text-align: center;
  margin-bottom: 30px;
}
.whycoins .maincont .whycoinsbtns li {
  padding: 6px 15px;
  border: 1px solid var(--white);
  color: var(--white);
  background-color: transparent;
  border-radius: 0px;
  display: inline-block;
  margin: 0px 5px;
  width: 100px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.whycoins .maincont .whycoinsbtns li.selected {
  background-color: #00c950;
  border-color: #00c950;
}
.whycoins .whycoinschange > div:first-of-type {
  display: none;
}
.whycoins .whycoinschange img {
  width: 100%;
}

.circle-wrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  top: -50px;
}

.circle-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid white;
  display: block;
  position: relative;
  z-index: 2;
}

.circle-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 3;
}

.circle-border circle {
  fill: none;
  stroke: #008236;
  stroke-width: 4;
  stroke-dasharray: 301.6;
  stroke-dashoffset: 301.6;
  animation: fillCircle 3s linear infinite;
  transform-origin: center;
}

.redcircle circle {
  stroke: #aa0808;
}

@keyframes fillCircle000 {
  0% {
    stroke-dashoffset: 301.6;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -301.6;
  }
} */
/* End whycoins */

/* start whycoins */
.whycoinsconts {
  width: 100%;
  margin: auto;
}
.whycoins .whytitling {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 90px;
  left: 0px;
}
.whycoins .whytitling h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--white);
}
.whycoins .maincont .whycoinsbtns {
  text-align: center;
  margin-bottom: 30px;
}
.whycoins .maincont .whycoinsbtns li {
  padding: 6px 15px;
  border: 1px solid var(--white);
  color: var(--white);
  background-color: transparent;
  border-radius: 0px;
  display: inline-block;
  margin: 0px 5px;
  width: 100px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.whycoins .aftercont .whycoinsbtns li.selected {
  background-color: #00c950;
  border-color: #fff;
}
.whycoins .beforecont .whycoinsbtns li.selected {
  background-color: #ee3939;
  border-color: #fff;
}

.whycoins .meesagebox {
  background-color: var(--white);
  padding: 5px;
  border-radius: 7px;
  width: auto;
  box-shadow: 1px 1px 2px #ddd, -1px -1px 2px #ddd;
  position: absolute;
}

.whycoins .meesagebox .comarrow {
  position: absolute;
  bottom: -21%;
  transform: rotate(-15deg);
  left: 10%;
  z-index: 6;
}

.whycoins .meesagebox h4 {
  font-size: 13px;
  color: var(--green);
  margin-bottom: 0px;
  font-weight: bold;
}
.whycoins .meesagebox .txtbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.whycoins .meesagebox .txtbox > div {
  color: var(--green);
  font-size: 10px;
}
.whycoins .meesagebox span {
  color: #e76500;
  font-size: 20px;
  width: 20px;
  display: inline-block;
}
.whycoins .meesagebox span svg {
  width: 13px !important;
  position: unset;
  height: 13px;
  transform: rotate(0deg);
}
.whycoins .meesagebox h5 {
  margin-bottom: 0px;
  font-size: 10px;
  color: var(--green);
  font-weight: bold;
}
.whycoins .meesagebox .shapeleft {
  position: absolute;
  width: 10px;
  height: 30px;
  background: transparent;
  overflow: hidden;
  bottom: -17px;
  left: 7%;
  transform: rotate(15deg);
  z-index: -1;
}

.whycoins .meesagebox .shapeleft::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-bottom-right-radius: 100% 100%;
}

.whycoins .meesagebox .shaperight {
  position: absolute;
  width: 10px;
  height: 30px;
  background: transparent;
  overflow: hidden;
  bottom: -17px;
  right: 7%;
  transform: rotate(-15deg);
  z-index: -1;
}

.whycoins .meesagebox .shaperight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-bottom-left-radius: 100% 100%;
}

.whycoins .box01 {
  top: 10%;
  right: 5%;
  transform: scale(1.1) rotate(-7deg);
  z-index: 7;
}

.whycoins .box02 {
  top: 45%;
  right: 37%;
  transform: scale(0.9) rotate(15deg);
  z-index: 7;
}

.whycoins .box03 {
  top: 8%;
  left: 3%;
  transform: scale(1.1) rotate(-5deg);
  z-index: 7;
}

.whycoins .circle-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: auto;
  background-color: var(--white);
  border-radius: 50%;
  margin-bottom: -100px;
  z-index: 99999;
  /* outline: 6px solid #fff; */
}

.whycoins svg {
  transform: rotate(-90deg); /* يبدأ من فوق */
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
}

.whycoins .progress-ring__circle {
  fill: transparent;
  stroke: var(--green);
  stroke-width: 6;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transition: stroke-dashoffset 3s linear;
}

.whycoins .icon-img {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  z-index: 2;
}

.whycoins .icon-img img {
  width: 100%;
}

.whycoins .content-box {
  display: none;
  margin-top: 30px;
}
.whycoins .content-box.active {
  display: block;
}
.whycoins .aftercont {
  background-color: #008236;
  position: relative;
  border-radius: 30px;
  height: 500px;
  overflow: hidden;
}
.whycoins .beforecont {
  background-color: #aa0808;
  position: relative;
  border-radius: 30px;
  height: 500px;
  overflow: hidden;
}
.whycoins .aftercont {
}
.whycoins .aftercont > img {
  position: absolute;
}
.whycoins .aftercont .aftcontimg01 {
  right: 0px;
  bottom: 0px;
  width: 400px;
}
.whycoins .aftercont .aftcontimg02 {
  right: 25%;
  bottom: 0px;
}
.whycoins .aftercont .aftcontimg03 {
  right: 45%;
  bottom: 0px;
}
.whycoins .aftercont .aftcontimg04 {
  left: 0px;
  bottom: 0px;
  width: 400px;
}

.whycoins .beforecont {
}
.whycoins .beforecont > img {
  position: absolute;
}
.whycoins .beforecont .befcontimg01 {
  right: 0px;
  bottom: 0px;
  width: 400px;
}
.whycoins .beforecont .befcontimg02 {
  right: 25%;
  bottom: 0px;
}
.whycoins .beforecont .befcontimg03 {
  right: 45%;
  bottom: 0px;
}
.whycoins .beforecont .befcontimg04 {
  left: 0px;
  bottom: 0px;
  width: 400px;
}
@media (max-width: 576px) {
  .whycoins .container {
    padding: 0px;
    max-width: 100% !important;
  }
  .whycoins .aftercont {
    overflow: hidden;
    border-radius: 0px;
  }
  .whycoins .beforecont {
    overflow: hidden;
    border-radius: 0px;
  }
  .whycoinsconts {
    width: 100%;
    margin: auto;
  }
  .whycoins .aftercont .aftcontimg01,
  .whycoins .aftercont .aftcontimg04,
  .whycoins .beforecont .befcontimg01,
  .whycoins .beforecont .befcontimg04 {
    width: 220px;
  }
  .whycoins .aftercont .aftcontimg02,
  .whycoins .aftercont .aftcontimg03,
  .whycoins .beforecont .befcontimg02,
  .whycoins .beforecont .befcontimg03 {
    width: 190px;
  }
  .whycoins .box01 {
    top: 45%;
    right: 5%;
  }

  .whycoins .box02 {
    display: none;
  }

  .whycoins .box03 {
    top: 65%;
    left: 55;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .whycoins .aftercont {
    overflow: auto;
    border-radius: 0px;
  }
  .whycoins .beforecont {
    overflow: auto;
    border-radius: 0px;
  }
  .whycoinsconts {
    width: 100%;
    margin: auto;
  }
  .whycoins .aftercont .aftcontimg01,
  .whycoins .aftercont .aftcontimg04,
  .whycoins .beforecont .befcontimg01,
  .whycoins .beforecont .befcontimg04 {
    width: 220px;
  }
  .whycoins .aftercont .aftcontimg02,
  .whycoins .aftercont .aftcontimg03,
  .whycoins .beforecont .befcontimg02,
  .whycoins .beforecont .befcontimg03 {
    width: 190px;
  }
  .whycoins .box01 {
    top: 45%;
    right: 5%;
  }

  .whycoins .box02 {
    display: none;
  }

  .whycoins .box03 {
    top: 65%;
    left: 55;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .whycoins .aftercont .aftcontimg01,
  .whycoins .aftercont .aftcontimg04,
  .whycoins .beforecont .befcontimg01,
  .whycoins .beforecont .befcontimg04 {
    width: 250px;
  }
  .whycoins .aftercont .aftcontimg02,
  .whycoins .aftercont .aftcontimg03,
  .whycoins .beforecont .befcontimg02,
  .whycoins .beforecont .befcontimg03 {
    width: 200px;
  }
  .whycoins .box01 {
    top: 40%;
    right: 0;
  }

  .whycoins .box02 {
    top: 60%;
  }

  .whycoins .box03 {
    top: 55%;
    left: 0;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .whycoins .aftercont .aftcontimg01,
  .whycoins .aftercont .aftcontimg04,
  .whycoins .beforecont .befcontimg01,
  .whycoins .beforecont .befcontimg04 {
    width: 320px;
  }
  .whycoins .aftercont .aftcontimg02,
  .whycoins .aftercont .aftcontimg03,
  .whycoins .beforecont .befcontimg02,
  .whycoins .beforecont .befcontimg03 {
    width: 250px;
  }
}

/* End whycoins */

/* Start allclient */
.allclient {
}
.allclient .container {
  padding: 100px 0px;
}
.allclient .row > div {
  position: relative;
}
.allclient .uptwobox {
  position: relative;
  width: 200px;
  margin: auto;
  margin-bottom: 50px;
  height: 100px;
}
.allclient .fivestar {
  position: absolute;
  top: 0px;
  right: 0px;
  transform: rotate(15deg);
  color: #ffb914;
  background-color: #fff9d6;
  width: 110px;
  height: 55px;
  border-radius: 10px;
  box-shadow: 0px 0px 6px #777;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 55px;
}
.allclient .fivestar::after {
  content: " ";
  display: block;
  border-top: 20px solid #fff9d6;
  border-right: 15px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid transparent;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.allclient .fivgame {
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(-15deg);
  color: #cc00dc;
  background-color: #ffc4eb;
  width: 110px;
  height: 55px;
  border-radius: 10px;
  box-shadow: 0px 0px 6px #777;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
}
.allclient .fivgame::after {
  content: " ";
  display: block;
  border-top: 20px solid #ffc4eb;
  border-right: 15px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid transparent;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.allclient .cirimg {
  width: 100%;
}
.allclient .titimg {
  display: block;
  width: 200px;
  margin: auto;
  margin-bottom: 30px;
}
.allclient .fordesk {
}
.allclient .formob {
  display: none;
}

.circles-container {
  width: 400px;
  height: 400px;
  margin: auto;
  position: relative;
}
.samcir {
  border: 1px solid;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border-color: transparent;
}

.rightsamcir {
  border-right-color: #99b5be;
}
.samcir img {
  position: absolute;

  width: 50px;
}
.samcir img.ztop {
  top: 5px;
}
.samcir img.zbottom {
  bottom: 5px;
}
.samcir img.zcenter {
  top: 50%;
  transform: translateY(-50%);
}
.samcir img.mtop {
  top: 20%;
}
.samcir img.mbottom {
  bottom: 20%;
}

/* css coding of right side circles images */
.rightsidecirimgs .onecircle {
  width: 150px;
  height: 150px;
  left: -75px;
}
.rightsidecirimgs .twocircle {
  width: 200px;
  height: 250px;
  left: -25px;
}
.rightsidecirimgs .threecircle {
  width: 250px;
  height: 300px;
  left: 25px;
}
.rightsidecirimgs .fourcircle {
  width: 300px;
  height: 450px;
  left: 75px;
}

.samcir img.ssize {
  width: 30px;
}
.rightsidecirimgs .samcir img.ssize:nth-of-type(1) {
  right: -10px;
}
.rightsidecirimgs .samcir img.ssize:nth-of-type(2) {
  right: -10px;
}
.samcir img.msize {
  width: 40px;
}
.rightsidecirimgs .samcir img.msize:nth-of-type(1),
.rightsidecirimgs .samcir img.msize:nth-of-type(3) {
  right: 12px;
}
.rightsidecirimgs .samcir img.msize:nth-of-type(2) {
  right: -20px;
}
.samcir img.lsize {
  width: 60px;
}
.rightsidecirimgs .samcir img.lsize:nth-of-type(1),
.rightsidecirimgs .samcir img.lsize:nth-of-type(2) {
  right: -20px;
}
.samcir img.xlsize {
  width: 70px;
}
.rightsidecirimgs .samcir img.xlsize:nth-of-type(1),
.rightsidecirimgs .samcir img.xlsize:nth-of-type(3) {
  right: 20px;
}
.rightsidecirimgs .samcir img.xlsize:nth-of-type(2) {
  right: -35px;
}
/* css coding of left side circles images */
.leftsamcir {
  border-left-color: #99b5be;
}
.leftsidecirimgs .onecircle {
  width: 150px;
  height: 150px;
  right: -75px;
}
.leftsidecirimgs .twocircle {
  width: 200px;
  height: 250px;
  right: -25px;
}
.leftsidecirimgs .threecircle {
  width: 250px;
  height: 300px;
  right: 25px;
}
.leftsidecirimgs .fourcircle {
  width: 300px;
  height: 450px;
  right: 75px;
}
.leftsidecirimgs .samcir img.ssize:nth-of-type(1) {
  left: -10px;
}
.leftsidecirimgs .samcir img.ssize:nth-of-type(2) {
  left: -10px;
}
.leftsidecirimgs .samcir img.msize:nth-of-type(1),
.leftsidecirimgs .samcir img.msize:nth-of-type(3) {
  left: 12px;
}
.leftsidecirimgs .samcir img.msize:nth-of-type(2) {
  left: -20px;
}
.leftsidecirimgs .samcir img.lsize:nth-of-type(1),
.leftsidecirimgs .samcir img.lsize:nth-of-type(2) {
  left: -20px;
}
.leftsidecirimgs .samcir img.xlsize:nth-of-type(1),
.leftsidecirimgs .samcir img.xlsize:nth-of-type(3) {
  left: 20px;
}
.leftsidecirimgs .samcir img.xlsize:nth-of-type(2) {
  left: -35px;
}

/* css coding of mobile center side circles images */
.centersidecirimgs {
  /* transform: rotate(90deg); */
}
.centersidecirimgs .samcir img {
  /* transform: rotate(-90deg); */
}

.centersamcir {
  border-bottom-color: #99b5be;
  /* border-right-color: #99b5be; */
  /* border-left-color: #99b5be; */
}
.centersidecirimgs .onecircle {
  width: 400px;
  height: 200px;
  top: -75px;
}
.centersidecirimgs .twocircle {
  width: 400px;
  height: 200px;
  top: 0px;
}
.centersidecirimgs .threecircle {
  width: 400px;
  height: 200px;
  top: 90px;
}
.centersidecirimgs .fourcircle {
  width: 400px;
  height: 200px;
  top: 180px;
}
.centersidecirimgs .samcir img.ssize:nth-of-type(1) {
  left: 15px;
  bottom: 28px;
}
.centersidecirimgs .samcir img.ssize:nth-of-type(2) {
  left: 20%;
  bottom: 0px;
}
.centersidecirimgs .samcir img.ssize:nth-of-type(3) {
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
}
.centersidecirimgs .samcir img.ssize:nth-of-type(4) {
  right: 20%;
  bottom: 0px;
}
.centersidecirimgs .samcir img.ssize:nth-of-type(5) {
  right: 15px;
  bottom: 28px;
}
/*  */
.centersidecirimgs .samcir img.msize:nth-of-type(1) {
  left: 15px;
  bottom: 28px;
}
.centersidecirimgs .samcir img.msize:nth-of-type(2) {
  left: 20%;
  bottom: 0px;
}
.centersidecirimgs .samcir img.msize:nth-of-type(3) {
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
}
.centersidecirimgs .samcir img.msize:nth-of-type(4) {
  right: 20%;
  bottom: 0px;
}
.centersidecirimgs .samcir img.msize:nth-of-type(5) {
  right: 15px;
  bottom: 28px;
}
/*  */

.centersidecirimgs .samcir img.lsize:nth-of-type(1) {
  left: -5px;
  bottom: 20px;
}
.centersidecirimgs .samcir img.lsize:nth-of-type(2) {
  left: 20%;
  bottom: 0px;
}
.centersidecirimgs .samcir img.lsize:nth-of-type(3) {
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
}
.centersidecirimgs .samcir img.lsize:nth-of-type(4) {
  right: 20%;
  bottom: 0px;
}
.centersidecirimgs .samcir img.lsize:nth-of-type(5) {
  right: -5px;
  bottom: 20px;
}

/*  */
.centersidecirimgs .samcir img.xlsize:nth-of-type(1) {
  left: -5px;
  bottom: 10px;
}
.centersidecirimgs .samcir img.xlsize:nth-of-type(2) {
  left: 20%;
  bottom: -10px;
}
.centersidecirimgs .samcir img.xlsize:nth-of-type(3) {
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px;
}
.centersidecirimgs .samcir img.xlsize:nth-of-type(4) {
  right: 20%;
  bottom: -10px;
}
.centersidecirimgs .samcir img.xlsize:nth-of-type(5) {
  right: -5px;
  bottom: 10px;
}

@media (max-width: 576px) {
  .allclient .formob {
    display: flex;
  }
  .allclient .fordesk {
    display: none;
  }
  .circles-container {
    margin: auto;
  }
  .centersamcir {
    width: 330px !important;
  }
  .samcir img.lsize {
    width: 50px;
  }
  .samcir img.xlsize {
    width: 60px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .allclient .formob {
    display: flex;
  }
  .allclient .fordesk {
    display: none;
  }
  .circles-container {
    margin: auto;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .allclient .formob {
    display: flex;
  }
  .allclient .fordesk {
    display: none;
  }
}
/* End allclient */

/* Start featues */
.featues .container {
  padding: 50px 0px;
}
.featues .row > div {
  margin-bottom: 20px;
}
.featues .featbox {
  position: relative;
  padding: 20px;
  text-align: center;
  border-radius: 50% 50% 20px 20px;
  height: 100%;
}
.featues .featbox::after {
  content: " ";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  border-radius: 50%;
  border: 6px solid var(--white);
  box-sizing: content-box;
  transition: all 0.5s ease-in-out;
}
.featues .featbox:hover::after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  transform: translateX(0);
  border-radius: 50% 50% 20px 20px;
}
.featues .featbox span {
  display: flex;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 30px;
  box-sizing: border-box;
  animation: ripple-white 1s linear infinite;
  position: relative;
  z-index: 9999;
}
@keyframes ripple-white {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(36, 75, 104, 0.1),
      0 0 0 10px rgba(36, 75, 104, 0.1), 0 0 0 20px rgba(36, 75, 104, 0.1);
    box-shadow: 0 0 0 0 rgba(36, 75, 104, 0.1),
      0 0 0 10px rgba(36, 75, 104, 0.1), 0 0 0 20px rgba(36, 75, 104, 0.1);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(36, 75, 104, 0.1),
      0 0 0 20px rgba(36, 75, 104, 0.1), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(36, 75, 104, 0.1),
      0 0 0 20px rgba(36, 75, 104, 0.1), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}
.featues .featbox img {
  width: 35px;
}
.featues .featbox h6 {
  font-size: 16px;
  position: relative;
  z-index: 9999;
}
.featues .featbox p {
  font-size: 14px;
  position: relative;
  z-index: 9999;
}
.featues .featbox {
}
.featues .greenbox {
  background-color: #f0fdf4;
}
.featues .greenbox span {
  background-color: #00c950;
  border: 4px solid #b9f8cf;
  outline: 4px solid rgba(36, 75, 104, 0.1);
}
.featues .greenbox::after {
  background-color: #00c950;
}

.featues .yellowbox {
  background-color: #fffcec;
}
.featues .yellowbox span {
  background-color: #ffb300;
  border: 4px solid #fff3b8;
  outline: 4px solid rgba(36, 75, 104, 0.1);
}
.featues .yellowbox::after {
  background-color: #ffb300;
}

.featues .redbox {
  background-color: #fff3f9;
}
.featues .redbox span {
  background-color: #ee3939;
  border: 4px solid #ffd5ea;
  outline: 4px solid rgba(36, 75, 104, 0.1);
}
.featues .redbox::after {
  background-color: #ee3939;
}

.featues .bluebox {
  background-color: #ebf8ff;
}
.featues .bluebox span {
  background-color: #1b90ff;
  border: 4px solid #a6e0ff;
  outline: 4px solid rgba(36, 75, 104, 0.1);
}
.featues .bluebox::after {
  background-color: #1b90ff;
}

.featues .darkbox {
  background-color: #fbfbfc;
}
.featues .darkbox span {
  background-color: var(--green);
  border: 4px solid #eaecee;
  outline: 4px solid rgba(36, 75, 104, 0.1);
}
.featues .darkbox::after {
  background-color: var(--green);
}
@media (max-width: 576px) {
  .featues .row > div {
    margin: auto;
    margin-bottom: 20px;
    padding: 0px 5px;
  }
  .featues .featbox {
    height: 255px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .featues .row > div {
    margin: auto;
    margin-bottom: 20px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .featues .row > div {
    margin: auto;
    margin-bottom: 20px;
    padding: 0px 5px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End featues */

/* Start salla */
.salla .container {
  padding: 50px 0px;
}
.salla .maincont {
  color: var(--white);
  border-radius: 15px;
  /* background: url(../img/salla-bg.png) center/cover no-repeat; */
  background-color: var(--greendark);
  position: relative;
  overflow: hidden;
}
.salla .maincont::after {
  content: " ";
  position: absolute;
  left: -50px;
  top: -50%;
  height: 200%;
  width: 55%;
  background-color: var(--green);
  display: block;
  border-radius: 50%;
  z-index: 1;
}
.salla .maincont .row {
  width: 100%;
  margin: auto;
}
.salla .maincont .row > div:first-of-type {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.salla .maincont .row > div:last-of-type {
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.salla .maincont h4 {
  margin-bottom: 20px;
}
.salla .maincont p {
  margin-bottom: 30px;
}
.salla .maincont img {
  display: block;
  width: 250px;
  margin-left: auto;
}
.salla .circles {
  height: 100%;
  width: 300px;
  position: absolute;
  z-index: 99999;
  left: -150px;
  top: 0px;
  transform: scale(4);
}
.salla .circles span {
  border-radius: 50%;
  display: block;
  position: absolute;
  box-sizing: content-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.salla .circles .cir01 {
  width: 1px;
  height: 1px;
  border: 20px solid #0b667f;
}
.salla .circles .cir02 {
  width: 20px;
  height: 20px;
  border: 20px solid #00809e;
}
.salla .circles .cir03 {
  width: 40px;
  height: 40px;
  border: 20px solid#00a1c4;
}
.salla .circles .cir04 {
  width: 60px;
  height: 60px;
  border: 20px solid #00809e;
}
.salla .circles .cir05 {
  width: 80px;
  height: 80px;
  border: 10px solid #0b667f;
  box-shadow: 0px 0px 5px #434343;
}
@media (max-width: 576px) {
  .salla .maincont {
  }
  .salla .maincont .row > div:first-of-type {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
  }
  .salla .greenbtn {
    width: 100%;
  }
  .salla .maincont img {
    width: 200px;
    margin: auto;
  }
  .salla .maincont .row > div:last-of-type {
    padding: 50px;
  }
  .salla .circles {
    display: none;
  }
  .salla .maincont::after {
    content: " ";
    position: absolute;
    left: -25%;
    top: auto;
    bottom: -65px;
    height: 50%;
    width: 150%;
    background-color: var(--green);
    display: block;
    border-radius: 50%;
    z-index: 1;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .salla .maincont {
  }
  .salla .maincont .row > div:first-of-type {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
  }
  .salla .greenbtn {
    width: 100%;
  }
  .salla .maincont img {
    width: 200px;
    margin: auto;
  }
  .salla .maincont .row > div:last-of-type {
    padding: 50px;
  }
  .salla .circles {
    display: none;
  }
  .salla .maincont::after {
    content: " ";
    position: absolute;
    left: -25%;
    top: auto;
    bottom: -65px;
    height: 50%;
    width: 150%;
    background-color: var(--green);
    display: block;
    border-radius: 50%;
    z-index: 1;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .salla .maincont img {
    width: 170px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .salla .maincont img {
    width: 170px;
  }
}

/* End salla */

/* Start Integratedsys */

.Integratedsys .container {
  padding: 50px 0px;
}
.Integratedsys .maincont {
}
.Integratedsys .maincont .row {
  width: 100%;
  margin: auto;
}
.Integratedsys .maincont .row > div:first-of-type {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.Integratedsys .maincont .row > div:last-of-type {
  padding: 0px;
}
.Integratedsys .maincont h4 {
  margin-bottom: 20px;
  color: var(--green);
}
.Integratedsys .maincont p {
  margin-bottom: 30px;
}
.Integratedsys .upintegimg {
  background-color: #ebf8ff;
  position: relative;
  height: 450px;
  overflow: hidden;
  border-radius: 15px;
}
.Integratedsys .maincont img {
  display: block;
  width: 100%;
  border-radius: 30px;
  /* height: 400px; */
  position: absolute;
  left: 0px;
  bottom: -40px;
}
@media (max-width: 576px) {
  .Integratedsys .maincont .row > div:first-of-type {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .Integratedsys .maincont .row > div:first-of-type {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
/* End Integratedsys */

/* Start joinus */
.joinus .container {
  padding: 50px 0px;
}
.joinus .maincont {
  color: var(--white);
  border-radius: 15px;
  /* background: url(../img/joinus-bg.png) center/cover no-repeat; */
  position: relative;
  background-color: var(--pink);
  overflow: hidden;
}
.joinus .maincont::after {
  content: " ";
  position: absolute;
  right: -50px;
  top: -50%;
  height: 200%;
  width: 45%;
  background-color: var(--pinkdark);
  display: block;
  border-radius: 50%;
  z-index: 1;
}
.joinus .maincont .row {
  width: 100%;
  margin: auto;
}
.joinus .maincont .row > div:first-of-type {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 2;
}
.joinus .maincont .row > div:last-of-type {
  padding: 0px;
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}
.joinus .maincont h4 {
  margin-bottom: 20px;
}
.joinus .maincont p {
  margin-bottom: 30px;
}
.joinus .maincont img {
  display: block;
  margin-right: auto;
  width: 100%;
}
.joinus .pinkbtn {
  background-color: #cc00dc;
  color: var(--white);
  padding: 8px 20px;
  display: inline-block;
  border-radius: 30px;
  border: 1px solid #cc00dc;
  font-size: 14px;
}
@media (max-width: 576px) {
  .joinus .maincont {
  }
  .joinus .maincont .row > div:first-of-type {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
  }
  .joinus .pinkbtn {
    width: 100%;
  }
  .joinus .maincont::after {
    content: " ";
    position: absolute;
    left: -25%;
    top: auto;
    bottom: -65px;
    height: 50%;
    width: 150%;
    background-color: var(--pinkdark);
    display: block;
    border-radius: 50%;
    z-index: 1;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .joinus .maincont {
  }
  .joinus .maincont .row > div:first-of-type {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
  }
  .joinus .pinkbtn {
    width: 100%;
  }
  .joinus .maincont::after {
    content: " ";
    position: absolute;
    left: -25%;
    top: auto;
    bottom: -65px;
    height: 50%;
    width: 150%;
    background-color: var(--pinkdark);
    display: block;
    border-radius: 50%;
    z-index: 1;
  }
}
/* End joinus */

/* Start footer */
footer {
  color: var(--white);
  background: url(../img/footer-bg.png) center/cover no-repeat;
  position: relative;
  border-top: 8px solid var(--green);
}
footer .container {
  padding: 50px 0px 30px 0px;
}
footer .row {
  width: 100%;
  margin: auto;
}
footer .footbreiv {
  border-left: 1px solid var(--white);
}
footer .footbreiv img {
  width: 60px;
}
footer .footbreiv h2 {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}
footer .footbreiv p {
  font-size: 14px;
  margin-bottom: 30px;
}
footer h5 {
  margin-bottom: 20px;
  font-size: 20px;
}
footer .uplinks {
}
footer .uplinks a {
  display: block;
  padding: 5px 0px;
  color: var(--white);
  font-size: 14px;
}
footer .uplinks .row > div {
  padding: 0px;
}
footer .upsocial {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
footer .upsocial a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background-color: transparent;
  color: var(--white);
  margin: 0px 5px;
  transition: all 0.25s ease-in-out;
}
footer .upsocial a:hover {
  background-color: var(--green);
  border-color: var(--green);
}
footer .copyright {
  margin-top: 20px;
  margin-bottom: 0px;
  font-size: 14px;
}
@media (max-width: 576px) {
  footer {
    text-align: center;
  }
  footer .uplinks {
    text-align: right;
  }
  footer .upsocial {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  footer .footbreiv {
    border-left: none;
  }
  footer .row > div {
    /* padding: 20px 10px; */
  }
  footer .container > .row > div:first-of-type {
    border-bottom: 1px solid #444;
    padding: 20px 10px;
  }
  footer
    .container
    > .row
    > div:nth-of-type(2)
    > .row
    > div:not(:last-of-type) {
    border-bottom: 1px solid #444;
    padding: 20px 10px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  footer {
    text-align: center;
  }
  footer .uplinks {
    text-align: right;
  }
  footer .upsocial {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  footer .footbreiv {
    border-left: none;
  }
  footer .row > div {
    /* padding: 20px 10px; */
  }
  footer .container > .row > div:first-of-type {
    border-bottom: 1px solid #444;
    padding: 20px 10px;
  }
  footer
    .container
    > .row
    > div:nth-of-type(2)
    > .row
    > div:not(:last-of-type) {
    border-bottom: 1px solid #444;
    padding: 20px 10px;
  }
}
/* End footer */

/* Start faq-section */
.faq-section .container {
  padding: 50px 150px;
}
.faqintro {
  color: var(--white);
  /* background-color: var(--pink); */
  background: url(../img/faqintro-bg.png) center/cover no-repeat;
  border-radius: 15px;
}
.faqintro .row {
  width: 100%;
  margin: auto;
}
.faqintro .row > div:first-of-type {
  padding: 30px;
}
.faqintro .upsocial {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.faqintro .upsocial a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background-color: transparent;
  color: var(--white);
  margin: 0px 5px;
  transition: all 0.25s ease-in-out;
}
.faqintro .upsocial a:hover {
  border: 1px solid var(--green);
  background-color: var(--green);
}
.faqintro img {
  display: block;
  margin-right: auto;
}
.faq-item {
  background-color: #f6f6f6;
  /* border-bottom: 1px solid #353535; */
  padding: 30px 20px;
  margin: 20px 0px;
  border-radius: 15px;
}

.faq-question {
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--green);
  font-size: 18px;
  transition: all 0.3s ease;
}

.faq-question:hover {
  color: var(--red);
}

.faq-answer {
  display: none;
  padding-top: 10px;
  color: var(--txtgreen);
  line-height: 1.6;
  font-size: 18px;
  padding-right: 50px;
}

.icon {
  transition: all 0.3s ease;
  font-size: 20px;
  width: 35px;
  text-align: center;
  color: var(--white);
  background-color: var(--green);
  height: 35px;
  border-radius: 50%;
  line-height: 30px;
  margin-left: 20px;
}
@media (max-width: 576px) {
  .faqintro {
    background: url(../img/faqintro-bg-mob.png) center/cover no-repeat;
  }
  .faq-section .container {
    padding: 127px 0px 50px 0px;
  }
  .faq-item {
    padding: 20px 10px;
  }
  .faq-question {
    font-size: 14px;
  }
  .faq-answer {
    font-size: 13px;
  }
  .faqintro img {
    margin: auto;
  }
  .faqintro .row > div:first-of-type {
    padding: 50px 30px;
    text-align: center;
  }
  .faqintro .upsocial {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .faqintro {
    background: url(../img/faqintro-bg-mob.png) center/cover no-repeat;
  }
  .faq-section .container {
    padding: 127px 0px 50px 0px;
  }
  .faq-item {
    padding: 20px 10px;
  }
  .faq-question {
    font-size: 14px;
  }
  .faq-answer {
    font-size: 13px;
  }
  .faqintro img {
    margin: auto;
  }
  .faqintro .row > div:first-of-type {
    padding: 50px 30px;
    text-align: center;
  }
  .faqintro .upsocial {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .faq-section .container {
    padding: 50px 0px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .faq-section .container {
    padding: 50px 50px;
  }
}
/* End faq-section */

/* Start privacy */
.privacy {
}
.privacy .container {
  padding: 50px 150px;
}
.privacyintro {
  color: var(--white);
  border-radius: 15px;
  background: url(../img/privacyintro-bg.png) center/cover no-repeat;
  position: relative;
}
.privacyintro .row {
  width: 100%;
  margin: auto;
}
.privacyintro .row > div:first-of-type {
  padding: 30px;
}
.privacyintro .row > div:last-of-type {
  padding: 20px;
}
.privacyintro img {
  display: block;
  margin-right: auto;
  height: 100%;
}
.privacy .privacycontent {
  padding: 30px 0px;
}
.privacy .lastupdate {
  color: #9b9b9b;
  display: block;
  margin-bottom: 30px;
}
.privacy .contgroup {
  margin-bottom: 30px;
}
.privacy .contgroup h3 {
  color: var(--green);
  font-size: 22px;
}
.privacy .contgroup p {
  color: var(--txtgreen);
  margin-bottom: 0px;
}
.privacy .contgroup ul {
}
.privacy .contgroup ul li {
  color: var(--txtgreen);
}
.privacy .contgroup ul li::before {
  content: " * ";
  font-size: 16px;
}
@media (max-width: 576px) {
  .privacyintro {
    text-align: center;
    background: url(../img/privacyintro-bg-mob.png) center/cover no-repeat;
    margin-top: 70px;
  }
  .privacy .container {
    padding: 50px 0px;
  }
  .privacyintro .row > div:first-of-type {
    padding: 50px 30px;
  }
  .privacyintro img {
    margin: auto;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .privacyintro {
    text-align: center;
    background: url(../img/privacyintro-bg-mob.png) center/cover no-repeat;
    margin-top: 70px;
  }
  .privacy .container {
    padding: 50px 0px;
  }
  .privacyintro .row > div:first-of-type {
    padding: 50px 30px;
  }
  .privacyintro img {
    margin: auto;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .privacy .container {
    padding: 50px 0px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .privacy .container {
    padding: 50px 50px;
  }
}
/* End privacy */

/* Start regsforma */
.regsforma {
  height: 100vb;
}
.regsforma .row {
  width: 100%;
  margin: auto;
}
.regsforma > .row {
}
.regsforma > .row > div {
  padding: 0px;
  position: relative;
}
.regsforma .upimagecont {
  position: relative;
  height: 100vb;
}
.login .upimagecont {
  background: url(../img/login-img.png) center/cover no-repeat;
}
.forgetpass .upimagecont {
  background: url(../img/forgetpass-bg.png) center/cover no-repeat;
}
.entercode .upimagecont {
  background: url(../img/entercode-bg.png) center/cover no-repeat;
}
.newpass .upimagecont {
  background: url(../img/newpassword-bg.png) center/cover no-repeat;
}
.regsforma .upimagecont > img {
  width: 100%;
}
.regsforma .regshead {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 100%;
}
.regsforma .regshead > div:last-of-type {
  text-align: left;
}
/* .regsforma .regshead img {
  height: 35px;
} */
.regsforma .headerlogo {
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
}
.regsforma .headerlogo img {
  height: 40px;
  margin-left: 5px;
}
.regsforma .regsfoot {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin-bottom: 0px;
  text-align: center;
  color: var(--white);
  font-size: 13px;
  background-color: var(--green);
  padding: 5px;
  width: max-content;
  margin: auto;
}
.regsforma .upformcont {
  width: 370px;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.regsforma .formtitle {
  margin-bottom: 30px;
  text-align: center;
}
.regsforma .formtitle h2 {
  color: var(--green);
  font-size: 26px;
}
.regsforma .formtitle h6 {
  font-weight: 100;
  color: var(--txtgreen);
  font-size: 14px;
}
.regsforma .formitem {
  margin-bottom: 20px;
  position: relative;
}
.regsforma .formitem label {
  color: var(--txtgreen);
  font-size: 14px;
  margin-bottom: 5px;
}
.regsforma .formitem input[type="email"],
.regsforma .formitem input[type="password"],
.regsforma .formitem input[type="text"],
.formitem input[type="url"] {
  padding: 7px;
  border: 1px solid var(--txtgreen);
  border-radius: 5px;
  width: 100%;
}
.regsforma .formitem input[type="email"]::placeholder,
.regsforma .formitem input[type="password"]::placeholder,
.regsforma .formitem input[type="text"]::placeholder,
.regsforma .formitem input[type="url"]::placeholder {
  font-size: 14px;
}
.regsforma .forgetpass {
  position: absolute;
  left: 0px;
  font-size: 14px;
  color: var(--txtgreen);
  top: 0px;
}
.regsforma .upsubmit {
  margin-bottom: 20px;
}
.regsforma .subwithprev {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.regsforma .subwithprev a.prevbtn {
}
.regsforma .submitbtn {
  background-color: var(--green);
  color: var(--white);
  padding: 8px;
  display: block;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--green);
}

.regsforma .crtacc {
  text-align: center;
}
.regsforma .crtacc a {
}
.regsforma .entcodeinpts {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  direction: ltr;
}
.regsforma .agree span {
  font-size: 12px;
  margin-right: 4px;
  font-weight: bold;
}
.regsforma .entcodeinpts > input {
  text-align: center;
  width: 60px;
  border-radius: 10px;
  padding: 7px;
  border: 1px solid var(--txtgreen);
}
.regsforma .entcodeinpts > input::placeholder {
  text-align: center;
}
.regsforma .radiobtns .row {
  width: 100%;
  margin: auto;
}
.regsforma .radiobtns .row > div {
  padding: 0px;
  font-size: 14px;
}
.regsforma .prevbtn {
  background-color: #f4f4f5;
  color: var(--green);
  padding: 8px;
  display: block;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--green);
}
.regsforma #textofother {
  display: none;
}
@media (max-width: 576px) {
  .regsforma {
    height: calc(100vb - 90px);
    overflow: hidden;
  }
  .regsforma > .row {
    height: 100%;
  }
  .regsforma .upformcont {
    width: 300px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .regsforma {
    height: calc(100vb - 90px);
    overflow: hidden;
  }
  .regsforma > .row {
    height: 100%;
  }
}
/* End regsforma */

/* Start registraion */
.registraion {
  overflow: hidden;
}
.registraion .registraionbtns {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 30px;
}
.registraion .registraionbtns li {
  text-align: -webkit-center;
  cursor: pointer;
}
.registraion .registraionbtns li.selected span {
  opacity: 1;
}
.registraion .registraionbtns li span {
  display: flex;
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--green);
  box-sizing: content-box;
  border: 7px solid #c9f2ff;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
  opacity: 0.3;
  transition: all 0.35s ease-in-out;
}
.registraion .registraionbtns li span::after {
  content: "";
  position: absolute;
  top: -15px;
  right: -15px;
  bottom: -15px;
  left: -15px;
  z-index: -1;
  border-radius: 50%;
  border: 2px dashed var(--black);
}
.registraion .registraionbtns li h6 {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  opacity: 0.3;
  transition: all 0.35s ease-in-out;
}
.registraion .registraionbtns li.selected h6 {
  opacity: 1;
}
.registraion .registraionchange > div:not(:first-of-type) {
  display: none;
}

.registraion .registraionchange {
  max-height: 400px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding-right: 5px;
  direction: ltr;
}
.registraion .registraionchange > div {
  direction: rtl;
}

.registraion .uploads {
}
.registraion .uploads .row {
  width: 100%;
  margin: auto;
}
.registraion .uploads .row > div {
  padding: 0px 5px;
}
.registraion .uploads {
}

.registraion .upcontriesflag {
  /* padding: 7px; */
  border: 1px solid var(--txtgreen);
  border-radius: 5px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.registraion .upcontriesflag select option {
  font-size: 14px;
}
.select2-container {
  width: 40% !important;
  margin-left: 10px;
  text-align: right;
}
.select2-results__option img,
.select2-selection__rendered img {
  margin: 0px 10px !important;
}
.registraion .upcontriesflag select {
}
.registraion .upcontriesflag #country-name {
}
.select2-results__option img,
.select2-selection__rendered img {
  width: 20px;
  height: 15px;
  margin-left: 8px;
  vertical-align: middle;
}
.select2-container--default .select2-selection--single {
  border: none;
  border-left: 1px solid #ccc !important;
  border-radius: 0px;
  padding: 7px;
  height: auto;
  line-height: normal;
  background-color: transparent;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1px;
  width: 25px;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  font-size: 12px;
}
.select2-results__option--selectable {
  font-size: 12px;
}
/* style of input tel of library */
/* .iti {
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
} */
.registraion .upinptel {
  /* padding: 7px; */
  border: 1px solid var(--txtgreen);
  border-radius: 5px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.iti {
  z-index: 1000;
  width: 100%;
  position: relative;
  direction: ltr;
}
.iti__flag-box,
.iti__country-name {
  margin-left: 6px;
  margin-right: 0px;
  font-size: 11px;
}
.iti__country-list {
  z-index: 2000;
}
.iti__country-list--dropup {
  bottom: 100%;
  margin-bottom: -1px;
  left: 0px;
  /* width: 400%; */
}
.iti input[type="tel"] {
  outline: none !important;
  box-shadow: none !important;
}
.iti input[type="tel"]:focus {
  outline: none;
  box-shadow: none !important;
}
.iti input[type="tel"]::placeholder {
  font-size: 14px;
}

input[type="tel"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  box-sizing: border-box;
}
@media (max-width: 576px) {
  .registraion {
    overflow: auto;
  }
  .registraion .registraionchange {
    max-height: 100%;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-left: 0px;
    padding-bottom: 50px;
  }
  .registraion .upformcont {
    padding: 30px 0px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .registraion {
    overflow: auto;
  }
  .registraion .registraionchange {
    max-height: 100%;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-left: 0px;
    padding-bottom: 50px;
  }
  .registraion .upformcont {
    padding: 30px 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End registraion */

/* Start loginheader */
.loginheader {
  display: none;
  background-color: var(--green);
  margin-bottom: 0px;
}
.loginheader .container {
  text-align: center;
  padding: 25px 0px;
}
.loginheader img {
}
@media (max-width: 576px) {
  .loginheader {
    display: block;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .loginheader {
    display: block;
  }
}
/* End loginheader */

/* Start backbtnmobile */
.backbtnmobile {
  color: var(--green);
  display: none;
  text-align: right;
  padding: 20px 40px;
  position: absolute;
  right: 0px;
  width: 100%;
  bottom: 20px;
}
.backbtnmobile span {
  font-size: 25px;
}
@media (max-width: 576px) {
  .backbtnmobile {
    display: block;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .backbtnmobile {
    display: block;
  }
}

/* End backbtnmobile */

/* Start Dark Mode Toggle in login pages */
.drmodeinlogin {
  position: absolute;
  right: 0px;
  top: 50px;
  transform: translateY(50%);
  z-index: 999999;
  /* background-color: #01373e; */
  padding: 10px 10px;
  border-radius: 30px 0px 0px 30px;
  /* border: 1px solid #01373e; */
}
@media (max-width: 576px) {
  .drmodeinlogin {
    bottom: 50px;
    transform: translateY(0px);
    background-color: transparent;
    display: none;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .drmodeinlogin {
    bottom: 50px;
    transform: translateY(0px);
    background-color: transparent;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End Dark Mode Toggle in login pages */

/* Start  */
/* End  */

/* Start dark mood */

body.mydarkmode,
body.mydarkmode header,
body.mydarkmode .mobile-sidebar,
body.mydarkmode .herosec .groupheroimg .meesagebox,
body.mydarkmode .herosec .groupheroimg .imgbox,
body.mydarkmode .herosec .rightcollecimgs .shape::after,
body.mydarkmode .herosec .leftcollecimgs .shape::after,
body.mydarkmode .herosec .centercollecimgs .shape::after {
  background-color: #1e1e1e !important;
}

body.mydarkmode {
  color: var(--white);
}

body.mydarkmode .maintitle h3,
body.mydarkmode .header-link,
body.mydarkmode .herosec .herotitle h1,
body.mydarkmode .langswitch,
body.mydarkmode .Integratedsys .maincont h4,
body.mydarkmode .faq-question,
body.mydarkmode .privacy .contgroup h3,
body.mydarkmode .close-sidebar,
body.mydarkmode .regsforma .formtitle h2,
body.mydarkmode .registraion .registraionbtns li h6,
body.mydarkmode .regsforma .formitem label,
body.mydarkmode .greenclr,
body.mydarkmode header .headerlogo,
body.mydarkmode .herosec .groupheroimg .meesagebox h4,
body.mydarkmode .herosec .groupheroimg .meesagebox h5,
body.mydarkmode .herosec .groupheroimg .meesagebox .txtbox > div,
body.mydarkmode .herosec .groupheroimg .imgbox h5,
body.mydarkmode .herosec .groupheroimg .imgbox .txtbox > div {
  color: var(--lightblue) !important;
}
body.mydarkmode .maintitle p,
body.mydarkmode .herosec .herotitle p,
body.mydarkmode .Integratedsys .maincont p,
body.mydarkmode .privacy .contgroup p,
body.mydarkmode .privacy .contgroup ul li,
body.mydarkmode .flag-select .form-select,
body.mydarkmode .country-name span,
body.mydarkmode .code-selector button,
body.mydarkmode .txtgreenclr {
  color: var(--txtindark);
}

body.mydarkmode .featues .featbox,
body.mydarkmode .faq-item,
body.mydarkmode .Integratedsys .upintegimg {
  background-color: #1a2733 !important;
}

body.mydarkmode .icon {
  background-color: var(--green);
}

body.mydarkmode .featues .featbox::after {
  border: 6px solid #1e1e1e !important;
}

body.mydarkmode header {
  box-shadow: 0px 1px 1px #272727;
}

.toggle-switch.dark {
  background-color: var(--lightgreen);
}

.logoblue {
  display: none;
}

body.mydarkmode .logoblue {
  display: inline-block;
}
body.mydarkmode .logogreen {
  display: none;
}

.appeardarkmode {
  display: none !important;
}
body.mydarkmode .appeardarkmode {
  display: block !important;
}
body.mydarkmode .appearlightmode {
  display: none !important;
}

body.mydarkmode .regsforma .formitem input[type="email"],
body.mydarkmode .regsforma .formitem input[type="password"],
body.mydarkmode .regsforma .formitem input[type="text"],
body.mydarkmode .regsforma .formitem input[type="url"],
body.mydarkmode .country-selector,
body.mydarkmode .phone-wrapper,
body.mydarkmode .flag-select .form-select {
  background-color: transparent;
}

body.mydarkmode .registraion .registraionbtns li span::after {
  content: "";
  border: 2px dashed var(--white);
}

body.mydarkmode .herosec .groupheroimg .imgbox,
body.mydarkmode .herosec .groupheroimg .meesagebox {
  box-shadow: 0px 0px 20px #3a6879, 0px 0px 20px #3a6879;
}
body.mydarkmode .allclient .fivestar {
  background-color: #1a2733;
  box-shadow: none;
}
body.mydarkmode .allclient .fivestar::after {
  border-top-color: #1a2733;
}
body.mydarkmode .allclient .fivgame {
  background-color: #28004a;
  box-shadow: none;
}
body.mydarkmode .allclient .fivgame::after {
  border-top-color: #28004a;
}
body.mydarkmode header .greentransbtn,
body.mydarkmode .greentransbtn {
  border-color: var(--lightblue);
  color: var(--lightblue);
}
body.mydarkmode header .barsicon {
  background-color: transparent;
  color: var(--lightblue);
  border-color: var(--lightblue) !important;
}
body.mydarkmode .joinus .maincont {
  background-color: #aa7dd9;
}
/* End dark mood */

/* starting button-top */
#button-top {
  background-color: var(--green);
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: none;
  cursor: pointer;
  border: 1px solid #fff;
  color: var(--white);
}

/*  End button-top */

/* @media (max-width: 576px) {
}
@media (min-width: 577px) and (max-width: 769px) {
}
@media (min-width: 770px) and (max-width: 992px) {
}
@media (min-width: 993px) and (max-width: 1199px) {
} */

/* very lage screens */
/* @media (min-width: 1200px) and (max-width: 1399px) {
}

@media (min-width: 1400px) and (max-width: 1599px) {
}

@media (min-width: 1600px) and (max-width: 1799px) {
}

@media (min-width: 1800px) and (max-width: 1999px) {
}

@media (min-width: 2000px) and (max-width: 2399px) {
}

@media (min-width: 2400px) and (max-width: 2799px) {
}

@media (min-width: 2800px) and (max-width: 3199px) {
}

@media (min-width: 3200px) {
} */
/* very lage screens */