/* root styles */

:root {
    --primary-light: #57b9fb;
    --secondary-light: #eeeeee;
}

/* global styles */

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

html {
    font-size: 16px;
}

body {
    font-family: 'Titillium Web', sans-serif;
    line-height: var(--bs-body-line-height);
    color: #21242f;
    background-color: var(--bs-light);
}

/* Addtional styles */

.nav-tabs {
  background: #adafb1;
  border-radius: 10px;
}

.nav-tabs .nav-link {
  color: #000;
  border: none;
  border-radius: 10px;
}

.nav-tabs .nav-link.active {
  background: var(--bs-primary);
  color: #fff;
  border: none;
}

.bg-player {
    background: url('../images/achivement-bg.jpg') no-repeat right center/contain;
}

.hero-bg {
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

.hero-bg > .overlay {
    background-color: rgba(0, 0, 0, 0.2);
}


.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}


/* custom classes */

.smaller {
    font-size: 0.75rem !important;
}

.mini {
    font-size: 0.65rem !important;
}

.micro {
    font-size: 0.5rem !important;
}

.reset-input {
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0;
}

.reset-input::placeholder {
    color: inherit;
    opacity: 0.5;
}

.bg-white-mask {
    background: linear-gradient(white 50%, rgba(255, 255, 255, 0));
}

.hmlogo1 {
  height: 9rem;
}
.hmlogo2 {
  height: 6rem;
}

.dropdown-menu > li > a:hover {
    background-image: none;
    background-color: #ccc;
}

option:hover {
    background-image: none;
    background-color: #ccc!important;
}

.dropdown-option {
    font-weight: bold;
}

.dropdown-selection {
    background-color: #178dc9;
    color: #fff;
}

/* animation classes */
.img-zoom {
    cursor: pointer;
    transition: transform 0.4s ease;
}
.img-zoom:hover {
    transform: scale(1.2);
}

/* media classes */

@media (max-width: 1200px) {
    /* large screens */
}

@media (max-width: 992px) {
    /* medium screens */
    .hmlogo1 {
      height: 5rem;
    }
    .hmlogo2 {
      height: 4rem;
    }
}

@media (max-width: 768px) {
    /* small screens */
}

@media (max-width: 576px) {
    /* extra small screens */
}

/* scrollbar classes */