/* 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: #6aff41;
  --gray: #8f8f8f;
  --main-transition: 0.25s;
  --bordrad10: 10px;
  --bordrad20: 20px;
  --bordrad30: 30px;
  --bordradcircle: 50%;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: var(--black);
}
::-webkit-scrollbar-thumb {
  background-color: var(--green);
}
::-webkit-scrollbar-thumb:hover {
  /* background-color: var(--main-color-alt); */
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans Arabic", serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: var(--black);
  color: var(--white);
}
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;
}
section {
  overflow: hidden;
}
.greensmlink {
  color: var(--green);
  display: block;
}
.greensmlink span {
  color: var(--green);
}
.h1 {
  color: var(--white);
  font-size: 80px;
  text-align: center;
  margin-bottom: 50px;
}
.h4 {
  font-size: 50px;
  margin-bottom: 20px;
}
.p24 {
  font-size: 24px;
}
.lg-pspan {
  font-size: 29px;
  font-weight: bold;
}
.lg-pspan span {
  color: var(--gray);
}
.storebtn {
  background-color: #131313;
  color: var(--white);
  padding: 7px 20px;
  border-radius: 5px;
  display: block;
  margin-bottom: 5px;
  text-align: center;
}
.storebtn span {
  font-size: 20px;
  margin-left: 7px;
}
.titlewhgr {
  font-size: 50px;
  text-align: center;
  margin-bottom: 50px;
}
.titlewhgr span {
  color: var(--green);
}

.fltrbox {
  background-color: #151515;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 20px 20px 20px;
  height: 100%;
}
.fltrbox h4 {
  color: var(--gray);
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
}
.fltrbox span {
  color: var(--white);
}
.fltrbox .row > div {
  padding: 0px 3px;
}
.fltrbox img {
  width: 100%;
}

.forexbox {
  background-color: #101010;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  height: 100%;
}
.forexbox h4 {
  color: var(--gray);
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
}
.forexbox span {
  color: var(--white);
}
.forexbox img {
  width: 100%;
  border-radius: var(--bordrad30);
}

.gradgreenbtn {
  background-image: linear-gradient(
    to right,
    #00ffc1,
    #00ffa5,
    #00ff84,
    #04ff59,
    #42ff02
  );
  color: var(--black);
  display: inline-block;
  padding: 10px 35px;
  border-radius: var(--bordrad10);
  margin-bottom: 10px;
  font-weight: bold;
}

.gray {
  color: var(--gray);
}
.green {
  color: var(--green);
}
.red {
  color: #f95563;
}

.loginbtn {
  color: var(--white);
  background-color: #1f1f1f;
  display: inline-block;
  padding: 7px 15px;
  border-radius: 5px;
  margin-left: 10px;
  font-size: 14px;
}

@media (max-width: 576px) {
  .h4 {
    font-size: 30px;
  }
  .p24 {
    font-size: 16px;
  }
  .h1 {
    font-size: 60px;
  }
  .titlewhgr {
    font-size: 40px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .p24 {
    font-size: 15px;
  }
  .storebtn {
    font-size: 12px;
    padding: 3px 6px;
  }
  .fltrbox h4 {
    font-size: 20px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .storebtn {
    font-size: 12px;
    padding: 3px 6px;
  }
}

/* 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;
  }
}
/* End @media */

/* End Global Rules */

/* Start header */
header {
  background-color: var(--black);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 999999;
  border-bottom: 1px solid #1f1f1f;
}
header:hover {
  box-shadow: 0px 5px 5px rgb(8 135 202 / 20%);
}
header .container {
  padding: 12px 0px;
}
header .container > .row {
  position: relative;
}
header .container > .row > div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
}
header .container > .row > div:last-of-type {
  justify-content: left;
}
header .linklogo img {
  height: 35px;
}
header .gradgreenbtn {
  padding: 7px 15px;
  font-size: 14px;
  margin-bottom: 0px;
  font-weight: 500;
}
header .menubtn {
  border-radius: 5px;
  color: var(--white);
  width: 40px;
  height: 40px;
  font-size: 25px;
  text-align: center;
  line-height: 45px;
  position: absolute;
  left: 0;
  cursor: pointer;
  display: none;
}
header ul {
  background-color: #1f1f1f;
  padding: 10px;
  border-radius: 10px;
}
header ul li {
  display: inline-block;
}
header ul li > a {
  margin-left: 3px;
  padding: 5px 8px;
  color: var(--gray);
  font-weight: bold;
  font-size: 14px;
  position: relative;
  text-decoration: none !important;
  transition: all 0.35s ease-in-out;
}
header .contactbtn {
  background-image: var(--gridbg);
  color: var(--white);
  padding: 5px 30px;
  display: inline-block;
  border-radius: 40px;
  font-size: 14px;
  margin-left: 7px;
  transition: var(--main-transition);
}
header .contactbtn:hover {
  background-image: var(--opgridbg);
}
header .langlink {
  color: var(--main-color);
  padding: 6px 7px;
  border-right: 2px groove #7777;
  display: inline-block;
  font-size: 14px;
}
.tadawel-link {
}
.tadawel-menu {
  width: 150%;
  display: none;
}

.downloadapp-link {
}
.downloadapp-menu {
  display: none;
}

.about-link {
}
.about-menu {
  display: none;
}

.help-link {
}
.help-menu {
  display: none;
}

.downloadapp-menu,
.about-menu {
  width: 120%;
}

.help-menu {
  width: 100%;
}

.mainmenu {
  position: absolute !important;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  background-color: #101010;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 30px 30px 30px;
  z-index: 999999;
}
.mainmenu .row > div {
}
.mainmenu .uplinkimg {
  position: relative;
}
.mainmenu .linkimg {
  color: var(--white);
  display: block;
  position: relative;
  text-align: center;
}
.mainmenu .linkimg img {
  width: 90%;
  border-radius: var(--bordrad20);
}
.mainmenu .forimgtxt {
  position: absolute;
  bottom: 30px;
  left: 0px;
  text-align: center;
  width: 100%;
  padding: 0px 10px;
}
.mainmenu a h5 {
  color: var(--white);
  font-size: 20px;
  transition: var(--main-transition);
}
.mainmenu a p {
  color: gray;
}
.mainmenu .upmainlink {
  margin-bottom: 30px;
}
.mainmenu .mainlink {
  transition: var(--main-transition);
}
.mainmenu .mainlink:hover h5 {
  color: var(--green);
}
.mainmenu {
}
@media (max-width: 769px) {
  header {
    display: none;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .tadawel-menu {
    width: 200%;
  }
  .downloadapp-menu,
  .about-menu {
    width: 170%;
  }
  .help-menu {
    width: 130%;
  }
  header .linklogo img {
    height: 20px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
}

/* End header */

/* start mobilemenu */
.mobilemenu {
}
.mobilemenu .container {
  padding: 20px 0px;
}
.mobilemenu .head {
}
.mobilemenu .head > .row {
}
.mobilemenu .head > .row > div {
  text-align: center;
}
.mobilemenu .head span {
  display: inline-block;
  color: var(--white);
  font-size: 25px;
  background-color: #1d1d1d;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.mobilemenu .head .menumobilebtn {
}
.mobilemenu .head img {
  height: 30px;
}

.mobilemenu .mobiledropdown {
  padding: 20px 0px;
  display: none;
}
.mobilemenu .mobiledropdown ul {
}
.mobilemenu .mobiledropdown ul li {
  font-size: 28px;
  padding: 10px 15px;
  position: relative;
}
.mobilemenu .mobiledropdown .arrtodown {
  position: absolute;
  left: 10px;
  font-size: 14px;
}
.mobilemenu .updroplinks {
  display: none;
}
.mobilemenu .mobiledropdown .dropdownlink {
  display: block;
  font-size: 16px;
  color: var(--white);
  padding: 10px 20px;
}
.mobilelogin {
}
.mobilelogin a {
  color: var(--green);
  font-size: 24px;
  position: relative;
  display: block;
}
.mobilelogin span {
  font-size: 20px;
  position: absolute;
  left: 0px;
  top: 0px;
}
/* End mobilemenu */

/* start loginmenu */
.loginmenu {
  background-color: var(--black);
  position: absolute;
  top: 0px;
  width: 400px;
  right: -100%;
  z-index: 9999999999;
  transition: all 1s ease-in-out;
}
.loginmenu .mainbar {
  padding: 70px 20px 20px 20px;
}
.closebtn {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 25px;
  color: var(--gray);
  cursor: pointer;
}
.loginclickbtn {
  cursor: pointer;
}
.loginmenu ul {
  background-color: #101010;
  border: 2px solid #1f1f1f;
  display: flex;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 30px;
}
.loginmenu ul li {
  display: inline-block;
  padding: 7px 14px;
  width: 50%;
  text-align: center;
  border-radius: 7px;
}
.loginmenu ul li.selected {
  background-color: #272727;
}
.loginmenu .maincon {
}
.loginmenu .maincon > div:not(:first-of-type) {
  display: none;
}
.loginmenu form {
}
.loginmenu form > div {
  margin-bottom: 20px;
}
.loginmenu form > div:last-of-type {
  text-align: center;
}
.loginmenu input[type="email"],
.loginmenu input[type="password"] {
  background-color: #101010;
  border: 1px solid #1f1f1f;
  padding: 10px 15px;
  border-radius: 5px;
  color: var(--white);
}
.loginmenu input[type="email"]::placeholder,
.loginmenu input[type="text"]::placeholder {
}
.loginmenu .loginsocial {
  text-align: center;
  margin-top: 50px;
}
.loginmenu .loginsocial a {
  background-color: var(--white);
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  margin: 0px 5px;
}
.loginmenu .loginsocial svg {
  width: 40px;
}
.loginmenu .loginsocial p {
  margin-bottom: 20px;
  color: var(--gray);
}
/* End loginmenu */

/* Start discoverflex */
.discoverflex .container {
  padding: 100px 0px;
}
.discoverflex .container > .row > div {
  padding: 0px 3px;
}
.discoverflex .handimg {
  width: 100%;
  object-fit: cover;
  margin-right: -23%;
}
.discoverflex .container > .row > div .row > div {
  padding: 0px 3px;
}
.discoverflex .qrimg {
  width: 100px;
  border-radius: var(--bordrad10);
  margin-left: 10px;
}
@media (max-width: 576px) {
  .discoverflex .qrimg {
    width: 70px;
  }
}
/* End discoverflex */

/* Start flexibletrading */
.flexibletrading .container {
  padding: 0px 0px 50px 0px;
}
@media (max-width: 576px) {
  .flexibletrading .row > div {
    margin-bottom: 10px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .flexibletrading .row > div {
    margin-bottom: 10px;
  }
}
/* End flexibletrading */

/* Start beincontrol */
.beincontrol .container {
  padding: 50px 0px;
}
.beincontrol .container .row > div {
}
@media (max-width: 576px) {
  .beincontrol .container .row > div {
    margin-bottom: 10px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .beincontrol .container .row > div {
    margin-bottom: 10px;
  }
  .mobilemenu {
    display: none;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .mobilemenu {
    display: none;
  }
}
/* End beincontrol */

/* Start flexsupport */
.flexsupport .container {
  padding: 50px 0px;
}
.flexsupport .maincont {
  position: relative;
}
.flexsupport .maincont > img {
  width: 100%;
  border-radius: var(--bordrad30);
}
.flexsupport .maincont .dataflsup {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60px;
  text-align: center;
}
.flexsupport .maincont p {
  color: var(--white);
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}
.flexsupport .maincont p span {
  color: var(--gray);
}
@media (max-width: 576px) {
  .flexsupport .maincont p {
    font-size: 15px;
  }
}
/* End flexsupport */

/* Start flexquestion */
.flexquestion .container {
  padding: 100px 0px;
}
.flexquestion .txtpart h4 {
  font-size: 50px;
  margin-bottom: 30px;
}
.flexquestion .txtpart p {
  font-size: 22px;
  width: 80%;
  color: var(--gray);
}
.flexquestion .txtpart a {
  font-size: 24px;
}

.accordion-item {
  border-bottom: 1px solid var(--gray);
  outline: none;
  color: var(--gray);
  background-color: var(--black);
}
.accordion-button:not(.collapsed) {
  background-color: var(--black);
  color: var(--white);
  outline: none;
}
.accordion-button::after {
  content: " ";
  margin-right: auto;
  margin-left: 0px;
  font-size: 24px;
  background-color: var(--gray);
  border-radius: 5px;
}
.accordion-button {
  background-color: var(--black);
  font-size: 22px;
  color: var(--gray);
  text-align: right;
}
@media (max-width: 576px) {
  .flexquestion .txtpart p {
    font-size: 18px;
    width: 100%;
  }
  .accordion-button {
    text-align: right;
    font-size: 18px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .flexquestion .txtpart p {
    font-size: 18px;
    width: 100%;
  }
  .accordion-button {
    text-align: right;
    font-size: 18px;
  }
}
/* End flexquestion */

/* Start support */
.support .container {
  padding: 150px 0px 100px 0px;
}
.support .row > div {
  position: relative;
}
.support .suppcards {
  position: absolute;
  width: 200%;
  z-index: 99999;
}
.support .suppcards > li {
  background-color: #151515;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 20px 20px 20px;
  height: 100%;
  display: inline-block;
  margin-left: 20px;
  width: 340px;
  height: 250px;
}
.support .suppcards span {
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 45px;
  font-size: 20px;
  border-radius: 50%;
  background-color: var(--green);
  color: var(--black);
  margin-bottom: 20px;
}
.support img {
  width: 100%;
  border-radius: var(--bordrad30);
}
@media (max-width: 576px) {
  .support .suppcards {
    width: 100%;
    position: unset;
    margin-top: 0px;
  }
  .support .suppcards > li {
    margin-bottom: 10px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .support .suppcards {
    width: 100%;
    position: unset;
    margin-top: 0px;
  }
  .support .suppcards > li {
    margin-bottom: 10px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .support .suppcards > li {
    margin-left: 5px;
    width: 220px;
  }
  .contact ul {
    margin-top: 100px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .support .suppcards > li {
    margin-left: 5px;
    width: 250px;
  }
  .contact ul {
    margin-top: 100px;
  }
}
/* End support */

/* Start contact */
.contact ul {
  margin-top: 200px;
}
@media (min-width: 770px) and (max-width: 992px) {
  .contact ul {
    margin-top: 80px;
  }
}
/* End contact */

/* Start youcountry */
.youcountry .row > div {
  margin-bottom: 20px;
}
.youcountry p {
  width: 50%;
  margin-bottom: 70px;
}
.youcountry img {
  width: 30px;
  margin-left: 10px;
}
@media (max-width: 576px) {
  .youcountry p {
    width: 100%;
    font-size: 16px;
  }
  .youcountry img {
    width: 20px;
  }
  .youcountry span {
    font-size: 12px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .youcountry p {
    width: 100%;
    font-size: 16px;
  }
  .youcountry img {
    width: 20px;
  }
  .youcountry span {
    font-size: 12px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .youcountry p {
    width: 100%;
    font-size: 16px;
  }
}
/* End youcountry */

/* Start joincommunity */
.joincommunity .container {
  padding: 100px 0px;
}
.joincommunity h4 {
  margin-bottom: 150px;
}
.joincommunity .joinbox {
  background-color: #151515;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 20px 30px 20px;
  height: 100%;
  position: relative;
}
.joincommunity .joinbox h5 {
  font-size: 28px;
  margin-bottom: 20px;
}
.joincommunity .joinbox h5 span {
  font-size: 30px;
  margin-left: 10px;
}
.joincommunity .joinbox > span {
  margin-bottom: 30px;
  display: inline-block;
}
.joincommunity .joinbox img {
  position: absolute;
  bottom: 0px;
  left: 10%;
  height: 400px;
}
@media (max-width: 576px) {
  .joincommunity .container {
    padding: 50px 0px;
  }
  .joincommunity .row > div {
    margin-bottom: 50px;
  }
  .joincommunity .joinbox img {
    height: 250px;
  }
  .joincommunity h4 {
    margin-bottom: 50px;
  }
  .joincommunity .joinbox h5 {
    font-size: 22px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .joincommunity .container {
    padding: 50px 0px;
  }
  .joincommunity .row > div {
    margin-bottom: 70px;
  }
  .joincommunity .joinbox img {
    height: 300px;
  }
  .joincommunity h4 {
    margin-bottom: 50px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .joincommunity .joinbox img {
    height: 225px;
  }
}
/* End joincommunity */

/* Start localcommunity */
.localcommunity .container {
  padding: 100px 0px;
}
.localcommunity .maincont {
  background-color: #151515;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 20px 0px 0px;
  height: 100%;
  position: relative;
  height: 500px;
  margin-top: 50px;
}
.localcommunity .maincont .row {
  height: 100%;
  width: 100%;
  margin: auto;
}
.localcommunity .maincont .row > div {
  position: relative;
  height: 100%;
}
.localcommunity .maincont .row > div img {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 100%;
  border-radius: var(--bordrad30);
}
.localcommunity .uplinks a {
  background-color: #242424;
  color: var(--white);
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--bordrad10);
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 20px;
  transition: var(--main-transition);
}
.localcommunity .uplinks a:hover {
  background-color: var(--green);
  color: var(--black);
}
.localcommunity .uplinks a span {
  margin-left: 10px;
  font-size: 25px;
}

.btn {
  background-color: var(--black);
  border: 2px solid var(--gray);
  padding: 10px;
  font-size: 20px;
}
.btn img {
  width: 20px;
  margin-left: 10px;
}
.dropdown-menu li {
  background-color: var(--black);
  color: var(--white);
}
.dropdown-menu img {
  width: 20px;
  margin-left: 10px;
}
@media (max-width: 576px) {
  .localcommunity .container {
    padding: 50px 0px;
  }
  .localcommunity .uplinks a {
    padding: 5px 14px;
    font-size: 15px;
  }
  .localcommunity .maincont .row > div img {
    height: auto;
    width: 100%;
    position: unset;
  }
  .localcommunity .maincont {
    height: auto;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .localcommunity .container {
    padding: 50px 0px;
  }
  .localcommunity .uplinks a {
    padding: 5px 14px;
    font-size: 15px;
  }
  .localcommunity .maincont .row > div img {
    height: auto;
    width: 100%;
    position: unset;
  }
  .localcommunity .maincont {
    height: auto;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .localcommunity .uplinks a {
    padding: 5px 14px;
    font-size: 15px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
}
/* End localcommunity */

/* Start whychooseflex */
.whychooseflex {
}
@media (max-width: 576px) {
  .whychooseflex .row > div {
    margin-bottom: 10px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .whychooseflex .row > div {
    margin-bottom: 10px;
  }
}
/* End whychooseflex */

/* Start intro-awards */
.intro-awards .container {
  padding: 150px 0px 100px 0px;
}
.intro-awards .row > div {
  position: relative;
}
.intro-awards img {
  width: 90%;
  border-radius: var(--bordrad30);
  margin-top: -50px;
  margin-right: auto;
  display: block;
}
@media (max-width: 576px) {
  .intro-awards img {
    width: 100%;
    margin-top: 0px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .intro-awards img {
    width: 80%;
    margin-top: 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .intro-awards img {
    width: 100%;
    margin-top: 0px;
  }
}
/* End intro-awards */

/* Start awards */
.awards .container {
  padding: 50px 0px;
}
.awards .awardyears {
  text-align: center;
  margin-bottom: 50px;
}
.awards .awardyears li {
  background-color: #131313;
  color: var(--white);
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}
.awards .awardyears li.selected {
  background-color: var(--white);
  color: var(--black);
}
.awards .maincon > div:not(:first-of-type) {
  display: none;
}
.awards .complex > .row > div {
  margin-bottom: 20px;
}
.awards .awardbox {
  background-color: #1d1e20;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 20px 20px 20px;
  height: 100%;
}
.awards .awardbox h5 {
  color: var(--white);
  margin-bottom: 40px;
}
.awards .awardbox p {
  color: var(--gray);
  margin-bottom: 0px;
}
.awards .awardbox img {
  width: 100%;
  border-radius: 25px;
}
@media (max-width: 576px) {
  .awards .awardyears li {
    margin-bottom: 10px;
    padding: 5px 14px;
    font-size: 16px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .awards .awardyears li {
    margin-bottom: 10px;
    padding: 5px 14px;
    font-size: 14px;
  }
  .awards .awardbox .row > div {
    padding: 0px;
  }
  .awards .awardbox h5 {
    margin-bottom: 10px;
    font-size: 16px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .awards .awardbox h5 {
    margin-bottom: 20px;
    font-size: 16px;
  }
}
/* End awards */

/* Startislamic-intro */
.islamic-intro .container {
  padding: 150px 0px 100px 0px;
}
.islamic-intro .row > div {
  position: relative;
}
.islamic-intro img {
  width: 90%;
  border-radius: var(--bordrad30);
  margin-top: -50px;
  margin-right: auto;
  display: block;
}
@media (max-width: 576px) {
  .islamic-intro img {
    width: 100%;
    margin-top: 0px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .islamic-intro img {
    width: 80%;
    margin-top: 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .islamic-intro img {
    width: 100%;
    margin-top: 0px;
  }
  .islamic-intro h4 {
    font-size: 40px;
  }
}
/* End .islamic-intro */

/* Start featisamic */
.featisamic .container {
  padding: 50px 0px;
}
.featisamic h4 {
  margin-bottom: 50px;
}
.featisamic .row > div {
  margin-bottom: 10px;
}
.featisamic .feetisbox {
  background-color: #151515;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 20px 0px 0px;
  height: 300px;
  position: relative;
}
.featisamic .feetisbox h5 {
  color: var(--white);
  font-size: 24px;
  padding-left: 100px;
}
.featisamic .feetisbox p {
  color: gray;
  font-size: 18px;
  padding-left: 100px;
}
.featisamic .feetisbox img {
  position: absolute;
  bottom: 30px;
  left: 30px;
}
@media (min-width: 770px) and (max-width: 992px) {
  .featisamic .feetisbox h5 {
    font-size: 20px;
    padding-left: 0;
  }
  .featisamic .feetisbox p {
    font-size: 16px;
    padding-left: 0;
  }
}
/* End featisamic */

/* Start tradaccount */
.tradaccount {
  background-color: #28bd66;
  border-radius: var(--bordrad30);
  padding: 0px 30px;
  color: var(--black);
  margin: 100px 0px;
}
.tradaccount .row > div:nth-of-type(2) {
  display: flex;
  align-items: center;
}
.tradaccount .row > div > img {
  width: 100%;
}
.tradaccount .updata {
  padding: 0px 50px;
}
.tradaccount .updata h2 {
  font-size: 35px;
  font-weight: bold;
  width: 65%;
  margin-bottom: 40px;
}
.tradaccount .updata > div {
  margin-bottom: 15px;
}
.tradaccount .updata img {
  margin-left: 10px;
}
.tradaccount .updata span {
  font-weight: bold;
}
.tradaccount .updata a {
  display: inline-block;
  padding: 12px 60px;
  font-size: 20px;
  border-radius: var(--bordrad10);
  background-color: var(--black);
  color: var(--white);
  margin-top: 50px;
}
@media (max-width: 576px) {
  .tradaccount {
    padding: 0px;
  }
  .tradaccount .updata h2 {
    font-size: 30px;
    width: 100%;
  }
  .tradaccount .row > div:nth-of-type(1) {
    margin-bottom: 50px;
  }
  .tradaccount .updata span {
    font-size: 13px;
  }
  .tradaccount .updata a {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .tradaccount {
    padding: 0px;
  }
  .tradaccount .row > div:nth-of-type(1) {
    margin-bottom: 50px;
  }
  .tradaccount .updata a {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .tradaccount .updata h2 {
    font-size: 21px;
    width: 100%;
    margin-bottom: 10px;
  }
  .tradaccount .updata span {
    font-size: 13px;
  }
  .tradaccount .updata > div {
    margin-bottom: 5px;
  }
  .tradaccount .updata a {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 7px 40px;
    font-size: 14px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .tradaccount .updata h2 {
    width: 100%;
    margin-bottom: 20px;
  }
  .tradaccount .updata a {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 40px;
    font-size: 14px;
  }
}
/* End tradaccount */

/* Start articles */
.articles {
  color: var(--gray);
}
.articles .container {
  padding: 50px 0px;
}
.articles .row > div {
}
.articles img {
  height: 40px;
}
.articles h5 {
  font-size: 20px;
}
.articles p {
  margin-bottom: 0px;
  font-size: 14px;
}
.articles ul li {
  font-size: 14px;
  list-style: disc;
  list-style-position: inside;
}
@media (max-width: 576px) {
  .articles .row > div {
    margin-bottom: 30px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .articles .row > div {
    margin-bottom: 30px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .articles .row > div {
    margin-bottom: 30px;
  }
}
/* End articles */

/* account-intro */
.account-intro .container {
  padding: 150px 0px 100px 0px;
}
.account-intro .row > div {
  position: relative;
}
.account-intro img {
  width: 90%;
  border-radius: var(--bordrad30);
  margin-top: -50px;
  margin-right: auto;
  display: block;
}
.account-intro a {
  display: inline-block;
}
.account-intro a:nth-of-type(1) {
  margin-left: 15px;
}
@media (max-width: 576px) {
  .account-intro img {
    width: 100%;
    margin-top: 0px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .account-intro img {
    width: 80%;
    margin-top: 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .account-intro img {
    width: 100%;
    margin-top: 0px;
  }
  .account-intro h4 {
    font-size: 40px;
  }
}
/* End .account-intro */

/* Start acctradeonline */
.acctradeonline .container {
  padding: 50px 0px;
}
.acctradeonline .row > div > img {
  width: 320px;
  display: block;
  margin: auto;
}
.acctradeonline .mainp {
  color: var(--gray);
  font-size: 20px;
  margin-bottom: 50px;
}
.acctradeonline .quest {
  background-color: #151515;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad10);
  padding: 20px 15px;
  position: relative;
  margin-bottom: 30px;
}
.acctradeonline .quest span {
  position: absolute;
  left: 30px;
  top: 13px;
  background-color: var(--green);
  color: var(--black);
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all ease-in-out 0.4s;
  -o-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}
.acctradeonline .quest span.cssp {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.acctradeonline .quest h5 {
  color: var(--white);
  margin-bottom: 0px;
}
.acctradeonline .quest .hidecont {
  display: none;
  padding: 20px 30px 15px 10px;
  color: #3b1f70;
  font-size: 14px;
  border-radius: 10px;
}
.acctradeonline .quest p {
  color: var(--gray);
}
.acctradeonline .quest ul {
  margin-bottom: 15px;
}
.acctradeonline .quest ul li {
  color: var(--gray);
  list-style: auto;
  list-style-position: inside;
}
@media (max-width: 576px) {
  .acctradeonline .mainp {
    font-size: 14px;
  }
}

/* End acctradeonline */

/* Start cases */
.cases .container {
  padding: 100px 0px;
}
.cases .maincease {
  margin-bottom: 50px;
}
.cases .maincease h4 {
  margin-bottom: 40px;
}
.cases .maincease p {
  color: var(--gray);
  font-size: 22px;
  padding-left: 150px;
}
.cases .maincease a {
}
.cases .maincease video {
  width: 100%;
}
.cases .multicaes > div {
  margin-bottom: 10px;
}
.cases .multicaes .mulibox {
  background-color: #151515;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 20px 20px 20px;
  height: 100%;
}
.cases .multicaes .mulibox h5 {
  position: relative;
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 50px;
}
.cases .multicaes .mulibox h5 img {
  position: absolute;
  left: 0px;
  top: -10px;
}
.cases .multicaes .mulibox p {
  color: var(--gray);
  font-size: 18px;
  height: 90px;
}
.cases .multicaes .mulibox a {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
}

.cases .multicaes .starter a {
  color: var(--green);
}
.cases .multicaes .advanced {
  border: 1px solid #28bd66;
}
.cases .multicaes .advanced a {
  background-color: #28bd66;
  color: var(--black);
}
.cases .multicaes .expert {
  border: 1px solid #f9b42e;
}
.cases .multicaes .expert a {
  background-color: #f9b42e;
  color: var(--black);
}
@media (max-width: 576px) {
  .cases .maincease p {
    font-size: 18px;
    padding-left: 0px;
  }
  .cases .maincease > div {
    margin-bottom: 30px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
}
@media (min-width: 770px) and (max-width: 992px) {
  .cases .maincease p {
    font-size: 16px;
    padding-left: 0px;
  }
  .cases .multicaes .mulibox p {
    font-size: 14px;
  }
}
/* End cases */

/* Start freeacc */
.freeacc .container {
  padding: 50px 0px;
}
.freeacc h4 {
  margin: 40px 0px;
}
.freeacc .maincont {
  background-color: #131313;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px 50px;
}
.freeacc .maincont .row > div > img {
  width: 100%;
}
.freeacc .maincont .row > div > div {
  margin-bottom: 20px;
}
.freeacc .maincont .row > div > div:last-of-type {
  margin-top: 30px;
}
.freeacc .freeicon {
  background-color: #28bd66;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  margin-left: 10px;
}
@media (max-width: 576px) {
  .freeacc .maincont {
    padding: 10px;
  }
  .freeacc h4 {
    margin: 20px 0px;
  }
  .freeacc .maincont .row > div > div span {
    font-size: 13px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .freeacc .maincont {
    padding: 10px;
  }
  .freeacc h4 {
    margin: 20px 0px;
    font-size: 30px;
  }
  .freeacc .maincont .row > div > div span {
    font-size: 13px;
  }
}
/* End freeacc */

/* Start forexintro */
.forexintro .container {
  padding: 150px 0px 100px 0px;
}
.forexintro .titling {
  text-align: center;
}
.forexintro .intdown img {
  width: 100%;
}
.forexintro .intdown p {
  width: 350px;
  margin-right: auto;
  font-size: 30px;
}
@media (max-width: 576px) {
  .forexintro .titling {
    margin-bottom: 30px;
  }
}
/* End forexintro */

/* Start ucondistion */
.ucondistion .container {
  padding: 50px 0px;
}
.ucondistion h4 {
  text-align: center;
  margin-bottom: 50px;
}
.ucondistion .row > div {
  margin-bottom: 15px;
}
.ucondistion img {
  width: 100%;
}
@media (max-width: 576px) {
  .ucondistion h4 {
    padding: 0px 20px;
    font-size: 24px;
  }
}
/* End ucondistion */

/* Start starttrade */
.starttrade .container {
  padding: 50px 0px;
}
.starttrade .maincont {
  position: relative;
}
.starttrade .maincont > img {
  width: 100%;
  border-radius: var(--bordrad30);
}
.starttrade .maincont .dataflsup {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 140px;
  text-align: center;
}
.starttrade .maincont p {
  color: var(--white);
  font-size: 34px;
  font-weight: bold;
  text-align: center;
}
.starttrade .maincont p span {
  color: var(--gray);
}
@media (max-width: 576px) {
  .starttrade .maincont p {
    font-size: 15px;
  }
  .starttrade .gradgreenbtn {
    font-size: 12px;
    padding: 7px 15px;
  }
  .starttrade .maincont .dataflsup {
    left: 10px;
  }
}
/* End starttrade */

/* Start tradeasy */
.tradeasy .container {
  padding: 50px 0px;
}
.tradeasy .row > div:first-of-type p {
  font-size: 22px;
  color: var(--gray);
  margin-bottom: 50px;
}
.tradeasy img {
  display: block;
  margin-right: auto;
  width: 300px;
}
@media (max-width: 576px) {
  .tradeasy img {
    width: 200px;
    margin: auto;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .tradeasy img {
    width: 250px;
    margin: auto;
  }
}
/* End tradeasy */

/* Start chtools */
.chtools .container {
  padding: 50px 0px;
}
.chtools .row > div {
  margin-bottom: 20px;
}
.chtools .row > div:last-of-type {
  margin-top: 50px;
  text-align: center;
}
.chtools .container > h4 {
  text-align: center;
  margin-bottom: 50px;
}
.chtools .forexbox h4 {
  text-align: right;
  padding: 20px 20px 50px 100px;
  min-height: 240px;
}
@media (max-width: 576px) {
  .chtools .forexbox h4 {
    padding: 10px;
    min-height: 170px;
    font-size: 20px;
  }
}
/* End chtools */

/* Start whytradeforex */
.whytradeforex .container {
  padding: 50px 0px;
}
.whytradeforex .row > div {
  margin-bottom: 20px;
}
.whytradeforex .greensmlink {
  text-align: center;
  font-size: 20px;
  margin-bottom: 30px;
}
.whytradeforex .greensmlink span {
  color: var(--green);
}
.whytradeforex .container > h4 {
  text-align: center;
  margin-bottom: 50px;
}
@media (max-width: 576px) {
  .whytradeforex h4 {
    padding: 0px 20px;
    font-size: 24px;
  }
}
/* End whytradeforex */

/* Start currencytrying */
.currencytrying .container {
  padding: 50px 0px;
}
.currencytrying .maincont {
  position: relative;
}
.currencytrying .maincont > img {
  width: 100%;
  border-radius: var(--bordrad30);
}
.currencytrying .maincont .dataflsup {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 140px;
  text-align: center;
}
.currencytrying .maincont p {
  color: var(--white);
  font-size: 34px;
  font-weight: bold;
  text-align: center;
}
.currencytrying .maincont p span {
  color: var(--gray);
}
@media (max-width: 576px) {
  .currencytrying .maincont p {
    font-size: 15px;
  }
  .currencytrying .gradgreenbtn {
    font-size: 12px;
    padding: 8px 20px;
  }
  .currencytrying .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .currencytrying .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .currencytrying .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .currencytrying .maincont .dataflsup {
    right: 0px;
  }
}
/* End currencytrying */

/* Start utimeblue */
.utimeblue .container {
  padding: 50px 0px;
}
.utimeblue .maincont {
  position: relative;
}
.utimeblue .maincont > img {
  width: 100%;
  border-radius: var(--bordrad30);
}
.utimeblue .maincont .dataflsup {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
  text-align: center;
}
.utimeblue .maincont p {
  color: var(--white);
  font-size: 40px;
  text-align: center;
}
.utimeblue .maincont p span {
  color: var(--gray);
}
@media (max-width: 576px) {
  .utimeblue .maincont p {
    font-size: 15px;
  }
  .utimeblue .gradgreenbtn {
    font-size: 12px;
    padding: 7px 15px;
  }
  .utimeblue .maincont .dataflsup {
    left: 10px;
    transform: translateX(10px);
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .utimeblue .maincont p {
    font-size: 22px;
  }
}
/* End starttrade */

/* Start trstock */
.trstock .container {
  padding: 50px 0px;
}
.trstock h4 {
  text-align: center;
  margin-bottom: 50px;
}
.trstock .groupstock {
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: bold;
  color: var(--gray);
  text-align: center;
}
.trstock .groupstock span {
  display: block;
}
.trstock img {
  width: 350px;
  display: block;
  margin: auto;
}
@media (max-width: 576px) {
  .trstock .groupstock {
    font-size: 24px;
  }
}
/* End trstock */

/* Start aslikestock */
.aslikestock .container {
  padding: 50px 0px;
}
.aslikestock h1 {
  margin-bottom: 50px;
}
.aslikestock .maincont {
  position: relative;
}
.aslikestock .maincont > img {
  width: 100%;
  border-radius: var(--bordrad30);
}
.aslikestock .maincont .dataflsup {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  text-align: center;
}
.aslikestock .maincont p {
  color: var(--gray);
  font-size: 18px;
  /* font-weight: bold; */
  text-align: center;
}
.aslikestock .maincont p span {
  color: var(--gray);
}
@media (max-width: 576px) {
  .aslikestock .maincont p {
    font-size: 15px;
  }
  .aslikestock .gradgreenbtn {
    font-size: 12px;
    padding: 7px 15px;
  }
  .aslikestock .maincont .dataflsup {
    left: 10px;
    transform: translateX(0px);
    bottom: -45px;
  }
}
/* End starttrade */

/* Start startlearn */
.startlearn .main-heading {
  padding: 50px 0;
}
.startlearn .heading {
  text-align: center;
  margin-bottom: 100px;
}
.startlearn .container {
  padding: 100px 0px 200px 0px;
}
.startlearn .cascade-slider_container {
  position: relative;
  width: 100%;
  height: 250px;
  margin: 25px auto;
  padding-top: 150px;
}
.startlearn .cascade-slider_item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0.3);
  transition: all 1s ease;
  opacity: 0;
  z-index: -1;
  text-align: center;
}
.startlearn .cascade-slider_item img {
  width: 100%;
  opacity: 0.4;
}
.startlearn .cascade-slider_item {
  color: #231c59;
  object-position: 0.4;
}
.startlearn .cascade-slider_item.next {
  left: 50%;
  transform: translateY(-50%) translateX(-150%) scale(0.6);
  opacity: 1;
  z-index: 1;
}
.startlearn .cascade-slider_item.prev {
  left: 50%;
  transform: translateY(-50%) translateX(50%) scale(0.6);
  opacity: 1;
  z-index: 1;
}
.startlearn .cascade-slider_item.now {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  opacity: 1;
  z-index: 5;
}
.startlearn .cascade-slider_item.now img,
.startlearn .cascade-slider_item.now h6 {
  opacity: 1;
}
.startlearn .cascade-slider_arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 5;
}
.startlearn .cascade-slider_arrow-left {
  left: 0;
}
.startlearn .cascade-slider_arrow-right {
  right: 0;
}
.startlearn .cascade-slider_nav {
  display: none;
  position: absolute;
  bottom: -175px;
  width: 100%;
  text-align: center;
  z-index: 5;
}
.startlearn .cascade-slider_dot {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin: 0.15em;
  border-radius: 50%;
  background: #ddd;
  list-style: none;
  cursor: pointer;
}
.startlearn .cascade-slider_container span i {
  background-color: #522495;
  color: #fff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  transition: all 0.35s ease-in-out;
}
.startlearn .cascade-slider_container span i:hover {
  opacity: 0.8;
}
.startlearn .cascade-slider_dot:hover {
  background-color: #522495;
}
.startlearn .cascade-slider_dot.cur {
  background-color: #522495;
}
@media (max-width: 576px) {
  .startlearn .cascade-slider_item img {
    width: 300px;
  }
  .startlearn .heading {
    margin-bottom: 0px;
  }
  .startlearn .container {
    padding: 50px 0px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .startlearn .cascade-slider_item img {
    width: 400px;
  }
  .startlearn .heading {
    margin-bottom: 50px;
  }
  .startlearn .container {
    padding: 50px 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .startlearn .cascade-slider_item img {
    width: 500px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .startlearn .cascade-slider_item img {
    width: 500px;
  }
}
/* End startlearn */

/* Start bigten */
.bigten .container {
  padding: 50px 0px;
}
.bigten h2 {
  font-size: 80px;
}
.bigten h2 span {
  color: var(--gray);
}
.bigten .bigtenitem {
  background-color: #101010;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad10);
  margin-bottom: 10px;
  padding: 5px 10px;
}
.bigten .bigtenitem .row {
}
.bigten .bigtenitem .row > div {
  padding: 0px 3px;
  display: flex;
  align-items: center;
}
.bigten .bigtenitem img {
  width: 60px;
}
.bigten .bigtenitem h6 {
  font-size: 24px;
  margin-bottom: 0px;
}
.bigten .bigtenitem span {
  font-size: 24px;
}
@media (max-width: 576px) {
  .bigten h2 {
    font-size: 50px;
    margin-bottom: 50px;
  }
  .bigten .bigtenitem h6 {
    font-size: 18px;
  }
  .bigten .bigtenitem span {
    font-size: 16px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .bigten h2 {
    font-size: 50px;
    margin-bottom: 50px;
  }
  .bigten .bigtenitem h6 {
    font-size: 20px;
  }
  .bigten .bigtenitem span {
    font-size: 18px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .bigten h2 {
    margin-bottom: 50px;
  }
}
/* End bigten */

/* Start homeintro */
.homeintro .container {
  padding: 150px 0px 100px 0px;
}
.homeintro .maincont {
  position: relative;
}
.homeintro .maincont > img {
  width: 100%;
}
.homeintro .overlay {
  position: absolute;
  text-align: center;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.homeintro h1 {
  margin-top: 100px;
}
.homeintro .upmainbtns {
  margin-bottom: 50px;
}
.homeintro .homeintbtns {
}
.homeintro .homeintbtns a {
  background-color: #171715;
  color: var(--white);
  display: inline-block;
  padding: 8px 18px;
  margin-left: 10px;
  font-size: 14px;
  border-radius: 5px;
}
.homeintro .homeintbtns img {
  width: 22px;
  margin-left: 7px;
}
@media (max-width: 576px) {
  .homeintro .container {
    padding: 50px 0px;
  }
  .homeintro h1 {
    margin-top: 0px;
    font-size: 30px;
  }
  .homeintro .maincont {
    height: 400px;
  }
  .homeintro .homeintbtns a {
    font-size: 12px;
    margin-bottom: 10px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .homeintro h1 {
    margin-top: 0;
    font-size: 45px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .homeintro h1 {
    margin-top: 0;
  }
}
/* End homeintro */

/* Start hometen */
.hometen .container {
  padding: 50px 0px;
}
.hometen img {
  width: 100%;
}
.hometen .tentxt {
  text-align: center;
  margin-top: -100px;
}
.hometen .tentxt p {
  font-size: 55px;
  font-weight: bold;
}
.hometen .tentxt a {
  display: inline-block;
  margin-left: 10px;
}
@media (max-width: 576px) {
  .hometen .tentxt {
    margin-top: 0px;
  }
  .hometen .tentxt p {
    font-size: 14px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .hometen .tentxt {
    margin-top: 0px;
  }
  .hometen .tentxt p {
    font-size: 20px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .hometen .tentxt p {
    font-size: 30px;
    font-weight: bold;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .hometen .tentxt p {
    font-size: 35px;
    font-weight: bold;
  }
}
/* End hometen */

/* Start homeplatmodern */
.homeplatmodern .container {
  padding: 100px 0px;
}
.homeplatmodern .maincont {
  position: relative;
}
.homeplatmodern .maincont img {
  width: 500px;
  display: block;
  margin: auto;
}
.homeplatmodern .qrcodefooter {
  display: flex;
  position: absolute;
  top: 25%;
  right: 0;
}
.homeplatmodern .qrcodefooter a {
  color: var(--green) !important;
}
.homeplatmodern .qrcodefooter p {
  font-size: 24px;
  font-weight: bold;
}
.homeplatmodern .qrcodefooter img {
  width: 120px;
  border-radius: var(--bordrad10);
  margin-left: 10px;
}
@media (max-width: 576px) {
  .homeplatmodern .maincont > img {
    width: 100%;
  }
  .homeplatmodern .qrcodefooter {
    top: 80%;
  }
}
/* End homeplatmodern */

/* Start discovtxt */
.discovtxt .container {
  padding: 50px 0px;
}
.discovtxt .txt {
  text-align: center;
}
.discovtxt h2 {
  font-size: 95px;
}
.discovtxt h2 span {
  color: var(--green);
}
@media (max-width: 576px) {
  .discovtxt h2 {
    font-size: 37px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .discovtxt h2 {
    font-size: 60px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .discovtxt h2 {
    font-size: 70px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .discovtxt h2 {
    font-size: 70px;
  }
}
/* End discovtxt */

/* Start accdesign */
.accdesign .container {
  padding: 50px 0px;
}
.accdesign h4 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 60px;
}
.accdesign .maincont {
  position: relative;
  background-color: #101010;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px;
}
.accdesign .maincont > img {
  display: block;
  width: 60%;
  border-radius: var(--bordrad30);
  margin-right: auto;
}
.accdesign .maincont .dataflsup {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 140px;
  text-align: center;
}
.accdesign .maincont p {
  color: var(--white);
  font-size: 34px;
  font-weight: bold;
  text-align: center;
}
.accdesign .maincont p span {
  color: var(--gray);
}
@media (max-width: 576px) {
  .accdesign h4 {
    font-size: 40px;
  }
  .accdesign .maincont p {
    font-size: 15px;
  }
  .accdesign .gradgreenbtn {
    font-size: 12px;
    padding: 8px 20px;
  }
  .accdesign .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .accdesign .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .accdesign .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .accdesign .maincont .dataflsup {
    right: 0px;
  }
}
/* End accdesign */

/* Start homefourparts */
.homefourparts .container {
  padding: 20px 0px;
}
.homefourparts h4 {
  text-align: center;
  margin-bottom: 20px;
}
.homefourparts .forexbox {
  height: auto;
}
.homefourparts .row > div:last-of-type {
  margin-top: -220px;
}
.homefourparts a {
  text-align: center;
  font-size: 22px;
  margin-bottom: 30px;
  color: var(--green);
}
.homefourparts a span {
  color: var(--green);
}
.homefourparts .row > div {
  margin-bottom: 15px;
}
.homefourparts img {
  width: 100%;
}
@media (max-width: 576px) {
  .homefourparts .row > div:last-of-type {
    margin-top: 0;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .homefourparts .row > div:last-of-type {
    margin-top: 0;
  }
  .homefourparts .forexbox {
    height: 100%;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .homefourparts .row > div:last-of-type {
    margin-top: 0;
  }
  .homefourparts .forexbox {
    height: 100%;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .homefourparts .row > div:last-of-type {
    margin-top: 0;
  }
  .homefourparts .forexbox {
    height: 100%;
  }
}
/* End homefourparts */

/* Start choosize */
.choosize .container {
  padding: 50px 0px;
}
.choosize h4 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 60px;
}
.choosize .maincont {
  position: relative;
  background-color: #141414;
  border: 2px solid #1f1f1f;
  border-radius: var(--bordrad30);
  padding: 30px;
}
.choosize .maincont > img {
  display: block;
  width: 60%;
  border-radius: var(--bordrad30);
  margin-right: auto;
}
.choosize .maincont .dataflsup {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 140px;
  text-align: center;
}
.choosize .maincont p {
  color: var(--white);
  font-size: 34px;
  font-weight: bold;
  text-align: center;
}
@media (max-width: 576px) {
  .choosize .maincont p {
    font-size: 15px;
  }
  .choosize .gradgreenbtn {
    font-size: 12px;
    padding: 8px 20px;
  }
  .choosize .maincont .dataflsup {
    right: 0px;
  }
  .choosize .maincont h6 {
    font-size: 12px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .choosize .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .choosize .maincont .dataflsup {
    right: 0px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .choosize .maincont .dataflsup {
    right: 0px;
  }
}
/* End choosize */

/* Start mediator */
.mediator .container {
  padding: 50px 0px;
}
.mediator .mediatorhead {
  text-align: center;
  margin-bottom: 50px;
}
.mediator .maincont img {
  width: 100%;
}
@media (max-width: 576px) {
  .mediator .mediatorhead h4 {
    font-size: 21px;
  }
  .mediator .mediatorhead img {
    width: 100%;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .mediator .mediatorhead h4 {
    font-size: 33px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .mediator .mediatorhead h4 {
    font-size: 40px;
  }
}
/* End mediator */

/* Start toroad */
.toroad .container {
  padding: 50px 0px;
}
.toroad h4 {
  text-align: center;
  margin-bottom: 20px;
}
.toroad a {
  text-align: center;
  font-size: 20px;
  margin-bottom: 30px;
}
.toroad a span {
  color: var(--green);
}
.toroad .row > div {
  margin-bottom: 15px;
}
.toroad img {
  width: 100%;
}
/* End toroad */

/* Start fast-withdrawal */
.fast-withdrawal {
}
.fast-withdrawal .container {
  padding: 50px 0px;
}
.fast-withdrawal h4 {
  text-align: center;
  margin-bottom: 50px;
}
.fast-withdrawal .morewithdrawal {
  text-align: center;
}
.fast-withdrawal .morewithdrawal a {
  display: inline-block;
  margin-bottom: 10px;
}
.fast-withdrawal .morewithdrawal a svg {
  width: 175px;
}
@media (max-width: 576px) {
  .fast-withdrawal .morewithdrawal a svg {
    width: 100px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .fast-withdrawal .morewithdrawal a svg {
    width: 100px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .fast-withdrawal .morewithdrawal a svg {
    width: 130px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .fast-withdrawal .morewithdrawal a svg {
    width: 130px;
  }
}
/* End fast-withdrawal */

/* Start homejoin */
.homejoin .container {
  padding: 50px 0px;
}
.homejoin .maincont {
  position: relative;
}
.homejoin img {
  width: 100%;
}
.homejoin h4 {
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.homejoin .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  text-align: center;
}
.homejoin a {
  position: absolute;
  bottom: 230px;
  font-size: 24px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 576px) {
  .homejoin h4 {
    top: 0px;
    font-size: 18px;
  }
  .homejoin a {
    bottom: 0;
    font-size: 16px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  .homejoin h4 {
    top: 0px;
    font-size: 25px;
  }
  .homejoin a {
    bottom: 50px;
    font-size: 18px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  .homejoin h4 {
    top: 0;
    font-size: 30px;
  }
  .homejoin a {
    bottom: 50px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .homejoin a {
    bottom: 75px;
  }
}
/* End homejoin */

/* Start startban */
.startban {
  margin-bottom: 50px;
}
.startban .container {
  padding: 75px 0px;
  background-image: linear-gradient(
    to right,
    #00ffc1,
    #00ffa5,
    #00ff84,
    #04ff59,
    #42ff02
  );
  border-radius: var(--bordrad30);
}
.startban p {
  margin-bottom: 0px;
  text-align: center;
  font-size: 34px;
  color: var(--black);
}
@media (max-width: 576px) {
  .startban .container {
    padding: 40px 0px;
  }
}
/* End startban */

/* Start  */
/* End  */

/* Start footer */
footer .container {
  padding: 50px 0px;
}
footer .pfoot {
  font-size: 25px;
  color: var(--white);
  font-weight: bold;
  margin-bottom: 0px;
}
footer .footersocial {
  margin-top: 30px;
}
footer .footersocial a {
  color: var(--white);
}
footer .footersocial span {
  color: var(--white);
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  border-radius: var(--bordrad10);
  border: 2px solid;
  font-size: 20px;
  margin-left: 5px;
}
footer .rowlinks > div {
  margin-bottom: 30px;
  padding: 0px 5px;
}
footer h5 {
  color: var(--white);
  font-size: 24px;
}
footer .footerlink {
  font-size: 20px;
  color: var(--gray);
  display: block;
  padding: 7px 0px;
}
footer .coptright {
  font-size: 20px;
  color: var(--gray);
}
footer .qrcodefooter {
  display: flex;
}
footer .qrcodefooter > div {
}
footer .qrcodefooter img {
  width: 80px;
  border-radius: var(--bordrad10);
  margin-left: 10px;
}
@media (max-width: 576px) {
  footer .container > .row > div {
    margin-bottom: 50px;
  }
  footer .footerlink {
    font-size: 14px;
  }
  footer .pfoot {
    font-size: 20px;
    margin-bottom: 6px;
  }
}
@media (min-width: 577px) and (max-width: 769px) {
  footer .container > .row > div {
    margin-bottom: 50px;
  }
  footer .footerlink {
    font-size: 14px;
  }
  footer .pfoot {
    font-size: 20px;
    margin-bottom: 6px;
  }
}
@media (min-width: 770px) and (max-width: 992px) {
  footer .container > .row > div {
    margin-bottom: 30px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  footer h5 {
    font-size: 17px;
  }
  footer .footerlink {
    font-size: 14px;
  }
  footer .pfoot {
    font-size: 18px;
  }
}
/* End footer */

/* starting button-top */
#button-top {
  background-color: #244b68;
  background-color: var(--main-color-third);
  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: #fff;
  color: var(--main-color);
  opacity: 0.8;
}

#button-top:hover i {
  opacity: 0.5;
}

/*  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)*/
