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

:root{
    --rtl__font:"Noto Kufi Arabic";
    --ltr__font:"Roboto Condensed";
    --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){.c{margin-right:25px !important; margin-left:25px !important;}}
@media(min-width:601px) and (max-width:1024px){.c{margin-right:100px !important; margin-left:100px !important;}}
@media(min-width:1025px){.c{margin-right: 250px !important; margin-left: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;}

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

/* 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{transition:transform 300ms ease, box-shadow 300ms ease;}
.btn:hover{transform:translateY(-5px); box-shadow:0 0px 30px -8px var(--cP);}

.cardHover{
  border-radius: 14px;
  backdrop-filter: blur(8px) saturate(1.1);
  transition: transform 300ms ease, box-shadow 300ms ease;
  border: 1px solid rgb(0, 0, 0,0);
  cursor: pointer;
}
.cardHover:hover{
  transform: translateY(-8px);
  box-shadow:0 24px 80px -18px var(--cS);
  border: 1px solid white;
}

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