/***** theme customize *****/
[data-theme="dark"] {
   --main-color: #272b30;
   --seconde-color: #32383e;
   --color-text: #fff;
   --btn-main-color: #272729;
}

.badge-color {
   background-color: var(--seconde-color);
}

/***** End theme customize *****/



body {
   font-family: "Poppins", sans-serif;
   min-height: 100%;
   min-width: 100%;
   background-color: var(--main-color);
   color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Montserrat", sans-serif;
   color: var(--color-text) !important;
   font-weight: 700;
}

a,
p,
span {
   color: inherit !important;
   
}

ul {
   list-style-position: inside;
}

.nav-item .nav-link.active,
.nav-item .nav-link:hover {
   color: #09c !important;
   transition: color 0.5s;
}

::-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;
}
/***** End Global *****/

/***** Home *****/
.home .card {
   filter: grayscale(0.7);
   transition: transform 0.5s, filter 0.5s 0.1s;
   filter: grayscale(0);
}

header img {
   max-height: 30vh;
   object-fit: cover;
}

.home .card:hover {
   transform: scale(1.1);

}

nav {
   background-color: rgb(58, 73, 123) !important;

   margin-inline: auto;
   margin-top: -30px;
   border-radius: 20px;
   box-shadow: 0 0 10px rgb(0 0 0 / 0.7);
}

/***** End Home *****/

/***** Details *****/
.details {
   background-color: #272729be;

   backdrop-filter: blur(4px);
   min-height: 100vh;
}

/***** End Details *****/

/***** Loader *****/
.loading {
   position: fixed;
   z-index: 9999;
   inset: 0;
   background-color: #272b30e3;
   display: flex;
   justify-content: center;
   align-items: center;
}
.loader {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   display: inline-block;
   border-top: 4px solid #fff;
   border-right: 4px solid transparent;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
   position: relative;
}
.loader::after {
   content: "";
   box-sizing: border-box;
   position: absolute;
   left: 0;
   top: 0;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border-left: 4px solid #ff3d00;
   border-bottom: 4px solid transparent;
   animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
/***** End Loader *****/