@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:17px;
    --cP:rgb(159, 59, 241);
    --cP2:rgb(159, 59, 241,0.1);
    --cB:rgb(255, 255, 255);
    --cF:rgb(24, 24, 24);
    --cD:rgba(192, 192, 192, 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(22, 160, 102);
    --c12:rgba(41, 206, 137, 0.1);
    --c2:rgb(189, 186, 17);
    --c22:rgb(189, 186, 17,0.1);
    --cBlack:rgb(0, 0, 0);
    --cWhite:rgb(255, 255, 255);
    --cBlue:rgb(64, 107, 221);
    --cGreen:rgb(2, 159, 114);
    --cPink:rgb(220, 65, 147);
    --animate-delay:0.1s;
}

.navbarActive *{color:var(--cP) !important;}

body{background-color:var(--cB);}
.c{margin-left:10px !important; margin-right:10px !important;}

popup{display:block; position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background-color:var(--cP); backdrop-filter:blur(10px); color:var(--cB); border:1px solid var(--cF2); padding:10px 20px; border-radius:var(--rds); display:none; width:70%; z-index:1000;}

/* 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%;}}

.shdw{box-shadow:0 5px 21px -10px rgb(0 0 0 / 70%) !important;}

.grd{mask-image:linear-gradient(to top, rgba(0,0,0,0) 1%,rgba(0,0,0,1) 50%);}

button {
    box-shadow: 0 0px 17px -10px rgb(0 0 0 / 70%);
    transition: transform 300ms ease, box-shadow 300ms ease;
    border: 1px solid var(--cB);
    cursor: pointer;
}
button:hover{border:1px solid var(--cD); transform:translateY(-5px);}

.customDiv{
    background: var(--cD);
    box-shadow: 0 0px 15px -10px rgb(0 0 0 / 70%);
    transition: transform 300ms ease, box-shadow 300ms ease;
    border: 1px solid var(--cB);
}

.news-bar{width:100% !important; direction:ltr !important; overflow:hidden; white-space:nowrap; box-sizing:border-box !important; background-color:var(--cD); color:var(--cF); position:relative !important;}
.news-bar d{display:inline-block !important; font-size:smaller !important; direction:rtl !important; padding-left:100%; animation:bar 45s linear infinite;}
@keyframes bar{0%{transform:translateX(-100%);} 100%{transform:translateX(0%);}}
.news-bar:hover d{animation-play-state:paused !important;}


.pulse{animation:pulse-animation 1.5s infinite;}
@keyframes pulse-animation{0%{box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.3);} 100%{box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);}}