/***** Global *****/
@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");
:root {
  --main-color: #272b30;
  --seconde-color: #32383e;
  --active-color: #FFB320;
  --color-text: #fff;
  --btn-main-color: #272729;
}

body {
  font-family: cursive , "Comfortaa";
  min-height: 100%;
  min-width: 100%;
  background-color: var(--main-color);
  color: var(--color-text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: cursive , "Nerko One";
  color: var(--color-text) !important;
}

a,
p,
span {
  color: var(--color-text) !important;
}

ul {
  list-style-position: inside;
}

.nav-item .nav-link.active,
.nav-item .nav-link:hover {
  color: var(--active-color) !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;
}

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

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

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

.home .card:hover {
  transform: scale(1.05);
  filter: grayscale(0);
}

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

/* Details */

.details {
  background-color: #272729be;
  background-image: url(../images/pattern.png);
  backdrop-filter: blur(4px);
  min-height: calc(100vh - 68px);
}

.details .title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--active-color) !important;
}


.carousel-inner img {
  border-radius: 10px;
  max-height: 400px;
  object-fit: cover;
}

.details .btn {
  background-color: var(--active-color);
  color: var(--btn-main-color) !important;
  border: 2px solid var(--active-color);
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 500;
  transition: all 0.5s;
}

.details .btn:hover {
  background-color: transparent !important;
  color: var(--color-text) !important;
}

    /* Page Loader */
    .page-loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.3s ease;
      -webkit-transition: opacity 0.3s ease;
      -moz-transition: opacity 0.3s ease;
      -ms-transition: opacity 0.3s ease;
      -o-transition: opacity 0.3s ease;
    }
    
    .page-loader.hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .spinner {
      width: 80px;
      height: 80px;
      border: 10px solid #ccc;
      border-top-color: var(--active-color);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }