/*****   general selector  *****/
:root{
   --main-color: #272b30;
   --seconde-color: #32383e;
   --color-text: #fff;
   --btn-main-color: #272729;
}
@import url("https://fonts.googleapis.com/css2?family=Nerko+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&display=swap"); 

h1,h3,h5{
   font-family: "Nerko One", cursive;
   color: var(--color-text) !important;
} 
a,p,span {
   color:  var(--color-text)  !important;
} 
body{
   font-family: "Comfortaa", cursive;
   min-height: 100%;
   min-width: 100%;
   background-color: var(--main-color);
   color: var(--color-text);
}
/*****   scroll bar  *****/
::-webkit-scrollbar {
   width: 0.625rem;
}
::-webkit-scrollbar-track {
   background-color: var(--seconde-color);
}
   
::-webkit-scrollbar-thumb {
   background-color: var(--main-color);
   border-radius: 50px;
   box-shadow: 0 0 5px rgb(0 0 0 / 0.5) inset;
}

/*****   navbar  *****/
.nav-item .nav-link.active, .nav-item .nav-link:hover {
color: #09c !important;
transition: color 0.5s;
}
nav {
   background-color: rgb(58, 73, 123) !important;
   margin-inline: auto;
   margin-top: -30px;
   border-radius: 20px;
   box-shadow: 0 0 13px rgb(0 0 0 / 0.7);
}
.navbar-brand img{
   width: 40px;
}
/*****   Home   *****/
.home .card {
   filter: grayscale(0.7);
   transition: transform 0.5s, filter 0.5s 0.1s;
}
.badge-color {
   background-color: var(--seconde-color);
} 
header img {
   max-height: 30vh;
   object-fit: cover;
} 
.home .card:hover {
   transform: scale(1.07);
   filter: grayscale(0);
}

/*****   Loader   *****/
.loading {
   position: fixed;
   z-index: 9999;
   inset: 0;
   background-color: #272b30e3;
   display: flex;
   justify-content: center;
   align-items: center;
}
.loader {
   width: 48px;
   height: 48px;
   border: 3px solid #FFF;
   border-radius: 50%;
   display: inline-block;
   position: relative;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
}
.loader::after {
   content: '';  
   box-sizing: border-box;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: 3px solid;
   border-color: #52b788 transparent;
} 
@keyframes rotation {
   0% {
   transform: rotate(0deg);
   }
   100% {
   transform: rotate(360deg);
   }
}