.snowy-text {
    color: #f0f8ff; /* لون ثلجي */
    text-shadow: 
        0 0 5px #cceeff, 
        0 0 10px #cceeff, 
        0 0 15px #99ddff; /* توهج خفيف */
    animation: sparkle 1.5s infinite alternate;
}

/* تأثير توهج متلألئ */
@keyframes sparkle {
    0% {
        text-shadow: 0 0 3px #cceeff, 0 0 6px #cceeff, 0 0 10px #99ddff;
    }
    50% {
        text-shadow: 0 0 5px #cceeff, 0 0 10px #cceeff, 0 0 15px #99ddff;
    }
    100% {
        text-shadow: 0 0 3px #cceeff, 0 0 6px #cceeff, 0 0 10px #99ddff;
    }
}
/* default */
@import url('https://fonts.cdnfonts.com/css/la-oriental');
@import url('https://fonts.cdnfonts.com/css/armorhide');
@import url('https://fonts.cdnfonts.com/css/school-new');
@import url('https://fonts.cdnfonts.com/css/geogrotesquestencila-bditalic');
@import url('https://fonts.cdnfonts.com/css/stallions');
@import url('https://fonts.cdnfonts.com/css/vorpal');
@import url('https://fonts.cdnfonts.com/css/sf-funk-master');
@import url('https://fonts.cdnfonts.com/css/renegade');
@import url('https://fonts.cdnfonts.com/css/twikling');
@import url('https://fonts.cdnfonts.com/css/kevlar-underwear');
@import url('https://fonts.cdnfonts.com/css/mac-type');
@import url('https://fonts.cdnfonts.com/css/fax-sans');
@import url('https://fonts.cdnfonts.com/css/lt-flode-neue');
@import url('https://fonts.cdnfonts.com/css/sportesia');
@import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
body {
	/* https://png.pngtree.com/background/20210709/original/pngtree-chinese-style-landscape-ink-antiquity-picture-image_937480.jpg */
	/* https://png.pngtree.com/background/20210709/original/pngtree-chinese-style-landscape-ink-antiquity-picture-image_938684.jpg */
	/* https://png.pngtree.com/background/20210709/original/pngtree-chinese-style-antiquity-watercolor-painting-ink-picture-image_930134.jpg */
	/* https://images.pexels.com/photos/734102/pexels-photo-734102.jpeg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_a_plague_tale_requiem_04_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_wyrdsong_01_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_solasta_crown_of_the_magister_03_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_solasta_crown_of_the_magister_02_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_ghost_of_tsushima_12_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_ghost_of_tsushima_11_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_ghost_of_tsushima_10_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_ghost_of_tsushima_09_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_ghost_of_tsushima_08_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_king_of_avalon_01_1920x1080.jpg */
	/* https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_outriders_worldslayer_01_1920x1080.jpg */
	/* https://www.wallpaperup.com/uploads/wallpapers/2015/03/18/640424/33adc8ba5388d91a7a990f7a3831fefd-1000.jpg */
	background-image: url('/images/BG.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
    background-attachment: fixed;
	font-family: 'Fax Sans', sans-serif !important;
	/* font-family: "Cinzel Decorative", "Palatino Light", Times, Times New Roman, Georgia, serif !important; */
	
}

section{
	margin-top: 100px;
}
section.homepage {
    margin-top: 0px;
}


/* HOME */

.home-image{
	background-image: url('/images/bHome.jpeg');
	height: 500px;
	margin-top: 80px;
	background-size: cover;
	background-position: top;
}


.main-nav .nav-link {
	padding: 8px 16px;
}

.main-nav .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease;
}

.main-nav .nav-link.active {
	font-weight: bold;
}

.navbar-dark .navbar-nav .nav-link.dropdown-toggle {
	color: rgba(255, 255, 255, 0.8);
}

.navbar-dark .navbar-nav .nav-link.dropdown-toggle:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease;
}

.second-nav .dropdown-item:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease;
}


.homepage .list-group-item {
    background-color: transparent !important;
    padding: 0 !important;
}

.homepage .fa-minus-circle{
	color: #ff3b00 !important;
}
.homepage .fa-check-circle{
	color: #039e03 !important;
}

.server_online span {
    color: #2ff12f;
}

.community{
	display: flex;
    justify-content: flex-end;
    align-items: center;
}
.community p{
	margin: 0;
}

.bg-light-custom {
    --mdb-bg-opacity: 1;
    background-color: #ffffffdb;
}
.bg-dark-custom {
    --mdb-bg-opacity: 1;
    background-color: #332d2df0;
}
.tooltip {
    --mdb-tooltip-bg: #000000e0 !important;
}

.p-6 {
    padding: 4rem!important;
}

.carousel-item.active {
    position: static;
}

.btn-bd-custom-mov {
	--bs-btn-font-weight: 600;
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-violet);
	--bs-btn-border-color: var(--bd-violet);
	--bs-btn-border-radius: .5rem;
	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
	--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
	--bs-btn-active-color: var(--bs-btn-hover-color);
	--bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
	--bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

.dropdown-menu {
    --bs-dropdown-border-radius: 0 !important;
}

.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler .fa-bars {
  color: #fff;
}

/* Color of the links AFTER scroll */
.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler .fa-bars {
  color: #4f4f4f;
}

/* Color of the navbar AFTER scroll */
.navbar-scrolled {
  background-color: #fff !important;
}

/* An optional height of the navbar AFTER scroll */
.navbar.navbar-scroll.navbar-scrolled {
  padding-top: 5px;
  padding-bottom: 5px;
}

.main-nav {
	margin: auto;
	z-index: 1;
}
.main-nav .nav-link:hover {
	border-bottom: 1px solid #00acc1;
}
.main-nav .nav-link {
	border-bottom: 1px solid transparent;
}
.main-nav > li > a{
	/* font-family: 'ICA Rubrik', sans-serif !important; */
    color: #32bdef !important;
    /* font-size: 20px; */
}
.container-custom {
	background-color: #ffffffb3;
}

/*
.second-nav{
	margin-left: 20%;
}

.main-nav>li {
	float: left;
	padding: 5px;
	font-size: 17px;
	width: 20%;
	text-align: center; 
	border-right: 1px solid #2cbef1;
	border-right: 1px solid #2cbef1;
    transform: skewX(-20deg);
    transition: all 200ms linear;
}
.main-nav>li>a {
    transform: skewX(+20deg);
}
.main-nav>li:hover {
	background-color: #2cbef1;
}
.main-nav>li:last-child{
	border-right: none;
}
.second-nav{
	transform: skewX(+20deg);
} */

.card {
	box-shadow: 0px 3px 4px rgb(0 0 0 / 40%);
	border: none !important;
}




/* footer */
.footer-used {
    display: flex !important;
    margin-bottom: 30px;
    margin-top: 30px;
}
.footer-used img {
    max-width: 100%;
    height: 40px;
    /* opacity: 0.5; */
    margin: 0 auto;
}


/* register */
.register {
	overflow:hidden
}
.register form {
	z-index: 2;
    position: relative;
    margin: auto;
    background-color: white;
    padding: 15px;
}
.girl {
	position: fixed;
    z-index: 6;
    top: -1vw;
    left: 51vw;
    pointer-events: none;
    width: 50% !important;
}


.table>:not(caption)>*>* {
    padding: 5px !important;
}

.table td, .table th {
    vertical-align: middle !important;
	text-align: center !important;
}

.badge-super {
    background-color: rgb(255, 217, 0) !important;
    color: black !important;
	padding: 5px 0px !important;
    display: block !important;
}
.badge-normal {
    background-color: rgb(180, 178, 164) !important;
    color: black !important;
    padding: 5px 0px !important;
    display: block !important;
}
.badge-unique {
    background-color: rgb(24, 106, 230) !important;
    color: black !important;
    padding: 5px 0px !important;
    display: block !important;
}
.badge-refined {
    background-color: rgb(97, 152, 235) !important;
    color: black !important;
    padding: 5px 0px !important;
    display: block !important;
}
.badge-elite {
    background-color: rgb(152, 19, 230) !important;
    color: black !important;
    padding: 5px 0px !important;
    display: block !important;
}

.overall{
    background-color: bisque;
}

.statsCard {
	max-height: 500px;
}

table img{
    max-width: 32px;
}
.ring-container {
	position: relative
}

.circle {
	width: 10px;
	height: 10px;
	background-color: rgb(176 23 231);
	border-radius: 50%;
	position: absolute;
	top: 7px;
	left: 7px;

    box-shadow: 0 0 0 0 rgb(30, 4, 36);
	transform: scale(1);
	animation: pulse 2s infinite;
}

.ringring {
	border: 3px solid rgb(176 23 231);
	-webkit-border-radius: 30px;
	border-radius: 30px;
	height: 25px;
	width: 25px;
	position: absolute;
	-webkit-animation: pulsate 1s ease-out;
	animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	opacity: 0
}



.new_item_added {
    background-color: rgb(255 148 0 / 63%) !important;
}
.item_deleted {
    background-color: rgba(223, 20, 20, 0.63) !important;
}

/* spinner */
#loading_spinner {
    display:none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#loading_spinner img{
    max-width: 64px;
}

/* modal custom */
.modal-footer-custom {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
    background-color: var(--bs-modal-footer-bg);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.form-floating{
    margin-top: 15px;
}

/* tooltip */
.item-elite{
	color: #97019c;
}

.list-group-item-elite {
    color: #850889 !important;
    background-color: #d408dbb0 !important;
}
.list-group-item-super {
    color: #64400a !important;
    background-color: #f19812b0 !important;
}
.list-group-item-unique {
    color: #072d64 !important;
    background-color: #408cff !important;
}
.bg-badge-purple {
    background-color: #8a0df0!important;
}

.bg-purple {
    background-color: #aea8b33b;
    border-radius: 0 5px 5px 0;
    width: 50%;
}
.bg-main-blue {
	background-color: #24baee;
}

/* index */
#carouselMain img {
	/* object-fit: scale-down;
	height: 200px; */
	border-radius: 5px;
}

.custom-button {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  padding: 15px 20px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
}
.custom-button:hover {
	box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
	transform: translateY(-1px);
}

.box-super {
    box-shadow: 0 0 2px rgba(255, 212, 20, 0.7), 0 0 4px rgba(255, 212, 20, 0.5), 0 0 6px rgba(255, 212, 20, 0.3);
    transition: transform 0.3s ease;
}
.box-elite {
    box-shadow: 0 0 2px rgb(255 20 217 / 70%), 0 0 4px rgba(255 20 217 / 50%), 0 0 6px rgba(255 20 217 / 30%);
    transition: transform 0.3s ease;
}
.box-unique {
    box-shadow: 0 0 2px rgba(20, 102, 255, 0.7), 0 0 4px rgba(20, 102, 255 / 50%), 0 0 6px rgba(20, 102, 255 / 30%);
    transition: transform 0.3s ease;
}
.box-refined {
    box-shadow: 0 0 2px rgba(20, 188, 255, 0.7), 0 0 4px rgba(20, 188, 255 / 50%), 0 0 6px rgba(220, 188, 255 / 30%);
    transition: transform 0.3s ease;
}

/* armory */
.main-armory td{
	vertical-align: middle;
}
#charFace {
	max-width: 64px;
}
.parent-box{
	width: 242px;
	height: 415px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background-image: url('../char/img/bg.png');
	background-repeat: no-repeat;
	background-size: contain;
}
.parent-box img {
	width: 100%;
}
.parent-box > div{
	position: absolute;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 75%;
	background-position: center center;
}
.parent-box > div:nth-child(-n+3){
	right: 29px;
}
.parent-box .box1{
	top: 49px;
}
.parent-box .box2{
	top: 100px;
}
.parent-box .box3{
	top: 152px;
}
.parent-box .box4,
.parent-box .box5,
.parent-box .box6{
	width: 62px;
	height: 62px;		
}
.parent-box .box5,
.parent-box .box6,
.parent-box .box7{
	bottom: 72px;
}
.parent-box .box4{
	right: 30px;
	top: 205px;
}
.parent-box .box5{
	right: 30px;
}
.parent-box .box6{
	right: 107px;
}
.parent-box .box7,
.parent-box .box8,
.parent-box .box9{
	left: 19px;
}
.parent-box .box8{
	bottom: 124px;
}
.parent-box .box9{
	bottom: 176px;
}

/* downloads */
.downloads img {
	object-fit: scale-down;
    width: 200px;
    height: 200px;
}

#cards_landscape_wrap-2{
	text-align: center;
  }
  #cards_landscape_wrap-2 .container{
	padding-bottom: 100px;
  }
  #cards_landscape_wrap-2 a{
	text-decoration: none;
	outline: none;
  }
  #cards_landscape_wrap-2 .card-flyer {
	border-radius: 5px;
  }
  #cards_landscape_wrap-2 .card-flyer .image-box{
	border-radius: 5px 5px 0 0;
	border-bottom: 1px solid #e7e7e7;
	/* box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50); */
  }
  #cards_landscape_wrap-2 .card-flyer .image-box img{
	-webkit-transition:all .9s ease;
	transition:all .9s ease;
	-moz-transition:all .9s ease; 
	-o-transition:all .9s ease;
	-ms-transition:all .9s ease; 
	width: 100%;
	height: 200px;
  }
  #cards_landscape_wrap-2 .card-flyer:hover .image-box img{
	opacity: 0.7;
	-webkit-transform:scale(1.15);
	-moz-transform:scale(1.15);
	-ms-transform:scale(1.15);
	-o-transform:scale(1.15);
	transform:scale(1.15);
  }
  #cards_landscape_wrap-2 .card-flyer .text-box{
	text-align: center;
  }
  #cards_landscape_wrap-2 .card-flyer .text-box .text-container{
	padding: 30px 18px;
  }
  #cards_landscape_wrap-2 .card-flyer{
	background: #FFFFFF;
	margin-top: 50px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
  }
  #cards_landscape_wrap-2 .card-flyer:hover{
	background: #fff;
	box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	margin-top: 50px;
  }
  #cards_landscape_wrap-2 .card-flyer .text-box p{
	margin-top: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px; 
	font-size: 14px;
	letter-spacing: 1px;
	color: #000000;
  }
  #cards_landscape_wrap-2 .card-flyer .text-box h6{
	margin-top: 0px;
	margin-bottom: 4px; 
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Roboto Black', sans-serif;
	letter-spacing: 1px;
	color: #00acc1;
  }


  /* stats */
  .echarts{
	height:1200px;
	width:100%;
  }
  .echartsMines{
	height:800px;
  }
  div#generalsDrop{
	height: 800px !important;
	width:100%;
  }
  div#generalsMine{
	height: 800px !important;
	width:100%;
  }
  div#normalEquipmentsDrop{
	height: 800px !important;
	width:100%;
  }

  

  

.stats-page a.btn.btn-outline-info {
	width: 50%;
}
.stats-page .enabled-button {
    background-color: aliceblue;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
	color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.stats-page .btn-outline-info.focus, .btn-outline-info:focus {
    box-shadow: none !important;
}

  /* quests */
.quests .accordion-button:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}
.quests li {
	background-color: transparent !important;
}

/* account */
.card-img-char {
	height: 80px;
    width: 80px;
    align-self: center;
    display: flex;
    border-radius: 50%;
    margin-top: 10px;
}
.snow-text {
    color: #f0f8ff; /* أبيض/ثلجي */
    text-shadow: 0 0 5px #cceeff, 0 0 10px #cceeff; /* توهج خفيف */
}
@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(54, 0, 68, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}




/* FIRE HOME */
.fire {
	font-size: 24px;
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    margin: 3em auto 0 auto;
    position: absolute;
    width: 3em;
	top: 43%;
    right: 62%;
  }

  .particle {
    animation: rise 1s ease-in infinite;
    background-image: radial-gradient(rgb(255 255 255) 20%, rgb(80 53 126) 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 1em;
    height: 1em;
}
  
  /*.particle {
	animation: rise 1s ease-in infinite;
	background-image: radial-gradient(rgb(62 58 74) 20%, rgb(166 168 245 / 0%) 70%);
	border-radius: 50%;
	mix-blend-mode: screen;
	opacity: 0;
	position: absolute;
	bottom: 0;
	width: 1em;
    height: 1em;
  }*/
  .particle:nth-of-type(1) {
	animation-delay: 0.37383619s;
	left: calc((100% - 4em) * 0);
  }
  .particle:nth-of-type(2) {
	animation-delay: 0.3183028247s;
	left: calc((100% - 4em) * 0.02);
  }
  .particle:nth-of-type(3) {
	animation-delay: 0.6042477651s;
	left: calc((100% - 4em) * 0.04);
  }
  .particle:nth-of-type(4) {
	animation-delay: 0.9393741048s;
	left: calc((100% - 4em) * 0.06);
  }
  .particle:nth-of-type(5) {
	animation-delay: 0.8606897676s;
	left: calc((100% - 4em) * 0.08);
  }
  .particle:nth-of-type(6) {
	animation-delay: 0.6832081508s;
	left: calc((100% - 4em) * 0.1);
  }
  .particle:nth-of-type(7) {
	animation-delay: 0.0060434267s;
	left: calc((100% - 4em) * 0.12);
  }
  .particle:nth-of-type(8) {
	animation-delay: 0.5303439618s;
	left: calc((100% - 4em) * 0.14);
  }
  .particle:nth-of-type(9) {
	animation-delay: 0.4036328172s;
	left: calc((100% - 4em) * 0.16);
  }
  .particle:nth-of-type(10) {
	animation-delay: 0.885386933s;
	left: calc((100% - 4em) * 0.18);
  }
  .particle:nth-of-type(11) {
	animation-delay: 0.883777961s;
	left: calc((100% - 4em) * 0.2);
  }
  .particle:nth-of-type(12) {
	animation-delay: 0.8446985934s;
	left: calc((100% - 4em) * 0.22);
  }
  .particle:nth-of-type(13) {
	animation-delay: 0.8044997759s;
	left: calc((100% - 4em) * 0.24);
  }
  .particle:nth-of-type(14) {
	animation-delay: 0.3796818711s;
	left: calc((100% - 4em) * 0.26);
  }
  .particle:nth-of-type(15) {
	animation-delay: 0.733410168s;
	left: calc((100% - 4em) * 0.28);
  }
  .particle:nth-of-type(16) {
	animation-delay: 0.9381668464s;
	left: calc((100% - 4em) * 0.3);
  }
  .particle:nth-of-type(17) {
	animation-delay: 0.0285029017s;
	left: calc((100% - 4em) * 0.32);
  }
  .particle:nth-of-type(18) {
	animation-delay: 0.8895542975s;
	left: calc((100% - 4em) * 0.34);
  }
  .particle:nth-of-type(19) {
	animation-delay: 0.8698938908s;
	left: calc((100% - 4em) * 0.36);
  }
  .particle:nth-of-type(20) {
	animation-delay: 0.1717069235s;
	left: calc((100% - 4em) * 0.38);
  }
  .particle:nth-of-type(21) {
	animation-delay: 0.9159291026s;
	left: calc((100% - 4em) * 0.4);
  }
  .particle:nth-of-type(22) {
	animation-delay: 0.7918788807s;
	left: calc((100% - 4em) * 0.42);
  }
  .particle:nth-of-type(23) {
	animation-delay: 0.3810706107s;
	left: calc((100% - 4em) * 0.44);
  }
  .particle:nth-of-type(24) {
	animation-delay: 0.5112905666s;
	left: calc((100% - 4em) * 0.46);
  }
  .particle:nth-of-type(25) {
	animation-delay: 0.2858000314s;
	left: calc((100% - 4em) * 0.48);
  }
  .particle:nth-of-type(26) {
	animation-delay: 0.0242931833s;
	left: calc((100% - 4em) * 0.5);
  }
  .particle:nth-of-type(27) {
	animation-delay: 0.9002685124s;
	left: calc((100% - 4em) * 0.52);
  }
  .particle:nth-of-type(28) {
	animation-delay: 0.1414988466s;
	left: calc((100% - 4em) * 0.54);
  }
  .particle:nth-of-type(29) {
	animation-delay: 0.8597850217s;
	left: calc((100% - 4em) * 0.56);
  }
  .particle:nth-of-type(30) {
	animation-delay: 0.2805537175s;
	left: calc((100% - 4em) * 0.58);
  }
  .particle:nth-of-type(31) {
	animation-delay: 0.4609191988s;
	left: calc((100% - 4em) * 0.6);
  }
  .particle:nth-of-type(32) {
	animation-delay: 0.9213324764s;
	left: calc((100% - 4em) * 0.62);
  }
  .particle:nth-of-type(33) {
	animation-delay: 0.2278545614s;
	left: calc((100% - 4em) * 0.64);
  }
  .particle:nth-of-type(34) {
	animation-delay: 0.5125158471s;
	left: calc((100% - 4em) * 0.66);
  }
  .particle:nth-of-type(35) {
	animation-delay: 0.2462829119s;
	left: calc((100% - 4em) * 0.68);
  }
  .particle:nth-of-type(36) {
	animation-delay: 0.3347332132s;
	left: calc((100% - 4em) * 0.7);
  }
  .particle:nth-of-type(37) {
	animation-delay: 0.5729832442s;
	left: calc((100% - 4em) * 0.72);
  }
  .particle:nth-of-type(38) {
	animation-delay: 0.5527158133s;
	left: calc((100% - 4em) * 0.74);
  }
  .particle:nth-of-type(39) {
	animation-delay: 0.9310626745s;
	left: calc((100% - 4em) * 0.76);
  }
  .particle:nth-of-type(40) {
	animation-delay: 0.8385574483s;
	left: calc((100% - 4em) * 0.78);
  }
  .particle:nth-of-type(41) {
	animation-delay: 0.9313467764s;
	left: calc((100% - 4em) * 0.8);
  }
  .particle:nth-of-type(42) {
	animation-delay: 0.6970083425s;
	left: calc((100% - 4em) * 0.82);
  }
  .particle:nth-of-type(43) {
	animation-delay: 0.5614013722s;
	left: calc((100% - 4em) * 0.84);
  }
  .particle:nth-of-type(44) {
	animation-delay: 0.9726578098s;
	left: calc((100% - 4em) * 0.86);
  }
  .particle:nth-of-type(45) {
	animation-delay: 0.3898125162s;
	left: calc((100% - 4em) * 0.88);
  }
  .particle:nth-of-type(46) {
	animation-delay: 0.8680534892s;
	left: calc((100% - 4em) * 0.9);
  }
  .particle:nth-of-type(47) {
	animation-delay: 0.8972293604s;
	left: calc((100% - 4em) * 0.92);
  }
  .particle:nth-of-type(48) {
	animation-delay: 0.3113082323s;
	left: calc((100% - 4em) * 0.94);
  }
  .particle:nth-of-type(49) {
	animation-delay: 0.7330212005s;
	left: calc((100% - 4em) * 0.96);
  }
  .particle:nth-of-type(50) {
	animation-delay: 0.8351476231s;
	left: calc((100% - 4em) * 0.98);
  }


  .mask{
	overflow: hidden;
  }


  .ribbon {
	margin: 0;
	padding: 0;
	background: rebeccapurple;
	color:white;
	padding:1em 0;
	position: absolute;
	top:0;
	right:0;
	transform: translateX(30%) translateY(0%) rotate(45deg);
	transform-origin: top left;
  }
  .ribbon:before,
  .ribbon:after {
	content: '';
	position: absolute;
	top:0;
	margin: 0 -1px; /* tweak */
	width: 100%;
	height: 100%;
	background: rebeccapurple;
  }
  .ribbon:before {
	right:100%;
  }


.highlight-card {
    animation: quake-shake 1s ease;
}

@keyframes quake-shake {
    0% {
        transform: translate(0, 0);
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    }
    10% {
        transform: translate(-4px, 0);
        box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
    }
    20% {
        transform: translate(4px, 0);
        box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
    }
    30% {
        transform: translate(-3px, 0);
        box-shadow: 0 8px 16px rgba(0, 123, 255, 0.6);
    }
    40% {
        transform: translate(3px, 0);
        box-shadow: 0 8px 16px rgba(0, 123, 255, 0.6);
    }
    50% {
        transform: translate(-2px, 0);
        box-shadow: 0 10px 20px rgba(0, 123, 255, 0.7);
    }
    60% {
        transform: translate(2px, 0);
        box-shadow: 0 10px 20px rgba(0, 123, 255, 0.7);
    }
    70% {
        transform: translate(-1px, 0);
        box-shadow: 0 10px 22px rgba(0, 123, 255, 0.8);
    }
    80% {
        transform: translate(1px, 0);
        box-shadow: 0 10px 22px rgba(0, 123, 255, 0.8);
    }
    90% {
        transform: translate(0, 0);
        box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
    }
    100% {
        transform: translate(0, 0);
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    }
}
  
  @keyframes rise {
	from {
	  opacity: 0;
	  transform: translateY(0) scale(1);
	}
	25% {
	  opacity: 1;
	}
	to {
	  opacity: 0;
	  transform: translateY(-8em) scale(0);
	}
  }

  /* @media screen and (min-width: 1400px) {
	.fire {
		font-size: 24px;
		filter: blur(0.02em);
		-webkit-filter: blur(0.02em);
		margin: 3em auto 0 auto;
		position: absolute;
		width: 3em;
		top: 28%;
		right: 55%;
	}
  } */
  @media screen and (max-width: 1390px) {
	.fire {
		font-size: 24px;
		filter: blur(0.02em);
		-webkit-filter: blur(0.02em);
		margin: 3em auto 0 auto;
		position: absolute;
		width: 3em;
		top: 43%;
        right: 64%;
	}
  }
  @media screen and (max-width: 1200px) {
	.fire {
		font-size: 24px;
		filter: blur(0.02em);
		-webkit-filter: blur(0.02em);
		margin: 3em auto 0 auto;
		position: absolute;
		width: 3em;
		top: 43%;
        right: 64%;
	}
  }
  @media screen and (max-width: 1024px) {
	.fire {
		font-size: 24px;
		filter: blur(0.02em);
		-webkit-filter: blur(0.02em);
		margin: 3em auto 0 auto;
		position: absolute;
		width: 3em;
		top: 43%;
        right: 67%;
	}
  }
  @media screen and (max-width: 992px) {
	.fire {
		font-size: 24px;
		filter: blur(0.02em);
		-webkit-filter: blur(0.02em);
		margin: 3em auto 0 auto;
		position: absolute;
		width: 3em;
		top: 15%;
		right: 57%;
		display: none;
	}
	.home-image {
    	height: 160px;
	    margin-top: 80px;
	    background: #ffffff;
	}
	.mask > .d-flex > .text-white {
	    display: none;
	}
	.bg-purple {
	    background-color: #332d2d;
	    border-radius: 0 5px 5px 0;
	    height: 130px;
	}
	.register-logo {
		display: none;
	}
	.form-register {
		padding: 15px !important;
	}
  }
  @media screen and (max-width: 1190px) {
	.register-logo {
		display: none;
	}
	.form-register {
		padding: 15px !important;
	}
  }
/* Layout الأساسي */
.slider-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
}

/* كل عنصر */
.slider-layout > div {
    flex: 1;
}

/* Facebook شمال */
.slider-layout > div:first-child {
    display: flex;
    justify-content: flex-start;
}

/* Discord يمين */
.slider-layout > div:last-child {
    display: flex;
    justify-content: flex-end;
}

/* Responsive (للموبايل) */
@media (max-width: 768px) {
    .slider-layout {
        flex-direction: column;
        align-items: center;
    }

    .slider-layout > div {
        justify-content: center !important;
    }
}