@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans:ital@0;1&display=swap');

:root{
    --rtl__font:"Noto Kufi Arabic";
    --ltr__font:"Ropa Sans";
    --rtl__fs:14px;
    --ltr__fs:18px;
    --rds:25px;
    --cP:rgb(190, 20, 52);
    --cP2:rgb(190, 20, 52,0.1);
    --cB:rgb(255, 255, 255);
    --cF:rgb(24, 24, 24);
    --cD:rgb(132, 132, 134,0.1);
    --cS:rgb(218, 218, 218);
    --cM:rgb(153, 153, 153);
    --c0:rgb(223, 49, 43);
    --c02:rgb(223, 49, 43,0.1);
    --c1:rgb(52, 232, 52);
    --c12:rgb(52, 232, 52,0.1);
    --c2:rgb(189, 186, 17);
    --c22:rgb(189, 186, 17,0.1);
    --cBlack:rgb(0, 0, 0);
    --cWhite:rgb(255, 255, 255);
    --animate-delay:0.1s;
}

/* ##################################################################################################################### */
/* ##################################################################################################################### */

.fsM{font-size:22px !important;}
.fsL{font-size:42px !important;}
.fsXL{font-size:72px !important;}

@media(max-width:767px){
  .fsS{font-size:12px !important;}
  .fsM{font-size:19px !important;}
  .fsL{font-size:29px !important;}
  .fsXL{font-size:50px !important;}
}

@media(min-width:768px){
  .fsS{font-size:13px !important;}
  .fsM{font-size:20px !important;}
  .fsL{font-size:40px !important;}
  .fsXL{font-size:72px !important;}
}

/* ##################################################################################################################### */
/* ##################################################################################################################### */

body{background-color:var(--cB);}

@media(max-width:600px){#page,.navbar{margin:0px 25px;} .fullWidth{margin-right:-25px !important; margin-left:-25px !important; padding-left:25px !important; padding-right:25px !important;}}
@media(min-width:601px) and (max-width:1024px){#page,.navbar{margin:0px 100px;} .fullWidth{margin-right:-100px !important; margin-left:-100px !important; padding-left:100px !important; padding-right:100px !important;}}
@media(min-width:1025px){#page,.navbar{margin:0px 250px;} .fullWidth{margin-right:-250px !important; margin-left:-250px !important; padding-left:250px !important; padding-right:250px !important;}}

@keyframes moveUpDown{0%{transform:translateY(10px);}50%{transform:translateY(-10px);}100%{transform:translateY(10px);}}
.upDownAnimate{animation:moveUpDown 2s infinite alternate;}

/* ##################################################################################################################### */

.btnPrimary{cursor:hand; background:var(--cP); color:var(--cWhite); font-size:20px !important; padding:5px 0 !important;}
.btnPrimary:hover{background:var(--cWhite); color:var(--cP) !important;}
.btnSecondary{cursor:hand; background:var(--cS); font-size:20px !important; padding:5px 0 !important;}
.btnSecondary:hover{background:var(--cP); color:var(--cWhite);}
.btnBorder{cursor:hand; border:1px solid var(--cP); color:var(--cWhite); font-size:20px !important; padding:5px 0 !important;}
.btnBorder:hover{background:var(--cP); color:var(--cWhite) !important;}

/* ##################################################################################################################### */

.grdTxt{background:linear-gradient(90deg, var(--cP) 20%, var(--cWhite) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--cWhite);}

.grdBoxGray{width:10px; height:10px; border-radius:100%; position:absolute; top:-10; left:-10; box-shadow:0px 0px 120px 30px rgba(133,133,133,1);}
.grdBoxP{width:10px; height:10px; border-radius:100%; position:absolute; top:-10; left:-10; box-shadow:0px 0px 120px 30px rgba(255,0,0,1);}

.grdGrayCenterTop{width:0px; height:0px; border-radius:100%; position:absolute; top:-100px; left:50%; box-shadow: 0px 0px 1000px 100px rgba(133,133,133,1);}
.grdGrayCenterBottom{width:0px; height:0px; border-radius:100%; position:absolute; top:calc(100% + 100px); left:50%; box-shadow: 0px 0px 1000px 100px var(--cP);}

.grdRedWide{width:900px; height:0; border-radius:100%; position:absolute; box-shadow:0px 0px 150px 20px var(--cP);}

.grdBrd{position:relative;}
.grdBrd::before{content:''; position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; padding:1px; border-radius:var(--rds); background:linear-gradient(214deg, rgb(255, 8, 0) -10%, rgb(45, 45, 55) 25%) rgba(0, 0, 0, 0); z-index:0;}

.grdLineTop{position:absolute; top:0; width:100%; height:1px; background:linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, var(--cWhite) 44.2424%, rgba(255, 255, 255, 0) 80%);}
.grdLineBottom{position:absolute; top:calc(100% - 1px); width:100%; height:1px; background:linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, var(--cP) 44.2424%, rgba(255, 255, 255, 0) 80%);}

.fadeBottom{
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* loading-bar */
.loading{width:100%; position:absolute; top:0; left:0; height:3px; border:0; border-radius:0px; overflow:hidden;}
.loading:after{content:" "; display:block; width:150px; top:-50%; height:250%; position:absolute; animation:loadingbar 2s linear infinite; z-index:2; background:var(--cP);}
@keyframes loadingbar{from{left:-120px;} to{left:100%;}}


/* ##################################################################################################################### */
/* ##################################################################################################################### */

.btn:hover{opacity:0.5;}


/* ##################################################################################################################### */
/* ##################################################################################################################### */