/*  */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Exo:ital,wght@0,100..900;1,100..900&family=Maven+Pro:wght@400..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/*  */
:root {
  /* --color1: #131415; */
  --color: #2b2a2ab6;
  --color1:#9c9c9c36;

  --font-family-Sansation: "Sansation", sans-serif;

}

body {
  letter-spacing: 0px !important;
  padding: 0%;
  margin: 0%;
  font-family: var(--font-family-Sansation) !important;
  text-transform: capitalize;
 display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
 
}
.country {
  opacity: 1 !important;
  transition: opacity 0.5s ease !important;
}
.country.fade-out {
  opacity: 0 !important;
}

@media (min-width:992px) {
  .icon_div{
  position: absolute;
  bottom: 5% !important;
}
.div_3{
  border-radius: 40px !important;
}
#div_3{
  margin: 6% 0% !important;
  height: 60vh !important;

}
}
/* ====================== MEDIA QUERY START ============================= */
@media (max-width:992px) {
  .div_1, .div_2 ,.div_3 {
    border-radius: 9px !important;
  }

  .main_div .div_1{
    height: max-content !important;
  }
.div_2{
  height: 75vh !important;
}

#div_3{
  height: max-content !important;
}

  .h_100vh {
    background-size: cover;
    /* height: 100vh !important; */
  }

}
.navfix{
  border-radius: 0% !important;
  top: 20% !important;
  width: 15% !important;
  right: 1% !important;
  border-radius: 40px !important;
  position: fixed !important;
  transition: 1.2s ease-in-out !important;
}

/* ====================== MEDIA QUERY END ============================= */

.h_100vh {
  position: fixed !important;
  object-fit: cover !important;
  width: 100%;
  height: 100vh !important;
}
.form-control::placeholder {
  color: white !important;
}
#date::placeholder{
  color: white !important;
}

.form-control
{
  box-shadow:  none !important;
  padding-left: 0% !important;
  width: 95% !important;
  background-color: transparent !important;
   color: white !important;
 border: 1px solid transparent !important;
  border-radius: 0% !important;
  border-bottom:1px solid white !important;
}
.form-control::placeholder{
  font-weight: 100 !important;
}
input[type="radio"] {
 background-color: #414141 !important;
color: red !important;
}
.form-control
{
  padding-left: 0% !important;
  width: 95% !important;
  background-color: transparent !important;
   color: white !important;
 border: 1px solid transparent !important;
  border-radius: 0% !important;
  border-bottom:1px solid white !important;
}
.main_tab_pane {
  height: 100% !important;
  position: absolute;
  top: 0% !important; 
transition: 0.3s ease-in-out !important; 
}
.tab-pane ,.tab-content{
transition: 0.2s ease-in-out !important; 

}

.main_div {
 min-height: 90vh !important;
  position: absolute;
   
max-width: 1200px;
   
  width: 100%;
  height: 90%;
  display: flex;
  gap: 2rem;
}

/* ====================== MEDIA QUERY============================= */

.bg {
  background-color:#686767 !important;
  border: 1px solid rgba(255, 255, 255, 0.466);
}
.bg1{
  /* padding: 10px 0px !important; */
  border-radius: 12px !important;
  background-color: #adabab3f;
  backdrop-filter: blur(1px);
  border: 1px solid #4141412c;
 box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px !important;
}
@media (max-width:992px) {
  .games_div h5{
font-size: 14px !important;
  }
  .main_head{
font-size: 14px !important;

  }
 .games_div  video{
  border-radius: 12px !important;
  overflow:  hidden !important;

}
  
}
 .car_video{
  overflow:  hidden !important;
  border-radius: 12px !important;

}


.main_div .div_1,
.main_div .div_2{

  height: 90vh ;
}
.main_div .div_1,
.main_div .div_2 ,.div_3 {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: white !important;
 background-color: rgba(104, 104, 104, 0.459) !important;

 /* background-color: rgba(128, 127, 127, 0.349) !important; */
backdrop-filter: blur(25px) !important;
  border-radius: 21px ;
  border: 1.6px solid rgba(255, 255, 255, 0.527) !important;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset !important;
}
.progress-bar{
  background-color: #9c9c9c !important;
  border-radius: 50px !important;
  height: 10px !important;
}
.progress{
  border-radius: 50px !important;
background-color: transparent !important;
border: 1px solid #9c9c9c !important;
  height: 10px !important;
}
.timeline-item::before {
  background-color: #616161 !important; /* Replace with any color you want */
  border: 1px solid #ffffff;  
}


.timeline-item.active::before {
  background-color: #0d6efd !important; /* ACTIVE color - blue (Bootstrap primary) */
}
.btn_div{
  color: white;
  background-color: var(--color) !important;
  border: 0;
  padding: 10px 15px;
}
.div_box{
  color: white !important;
  background-color: var(--color1) !important;
  backdrop-filter: blur(20px);
  border-radius: 15px;
  padding: 10px;
 box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.main_div .div_1 {
  height: 100%;
  position: relative !important;
}

.fa_caret_up{
  color: white;
}
.btn_inquire{
 background-color: rgba(61, 61, 61, 0.623) !important;
backdrop-filter: blur(25px) !important;
outline: none !important;
  box-shadow: none !important;
  animation:inquire 0.9s ease-in-out infinite ;
}

@keyframes inquire {
  0%,100%{
    margin-top: 5% !important;
  }
  50%{
    margin-top: 5% !important;

  }
  
}
#v-pills-tab .nav-link{
  padding: 10px 12px;

}
#v-pills-tab .nav-link.active {
    transition: 0.6s ease-in-out !important;
   border-radius: 40px !important;
  background-color: #8b8b8b !important;
}


.tooltip .tooltip-inner  {
  font-family: var(--font-family-Sansation) !important; /* Your desired font */
  font-size: 14px !important;
  background-color: #414141 !important; /* Optional: custom bg */
  color: #fff;            /* Optional: custom text color */
  padding: 5px 15px !important;
  border-radius: 4px 0px 0px 4px ;
  position: absolute !important;
}
@media (min-width:992px) {

.title_tool{
  position: absolute;
  right: 120%;
  top: 12%;
  font-size: 12px;
  padding: 5px 10px !important;
  color: white !important;
  background-color:#414141;
  transition: 0.5s ease-in-out !important;
clip-path: polygon(0% 0%, 84% 0, 100% 50%, 85% 100%, 0% 100%);
}
}
@media (max-width:992px) {
  .title_tool{
display: none;
}
}
.btn_nav-link:hover .title_tool{
  opacity: 1 !important;
}
.btn_color{
  background-color: var(--color1) !important;
}
.navbar {
  position: sticky !important;
  top: -5% !important;
  height: max-content !important;
  background-color: red !important;
}

.main_div .div_2 {
  position: relative !important;
  top: 0% !important;
  height: 90vh ;


  overflow-y: scroll !important;
}

.main_div .div_2::-webkit-scrollbar {
  background-color: transparent !important;
}

.main_div i {

  color: white;
}

.main_div i:hover {
  cursor: grab !important;
}

.news {
  margin: 0% 35% !important;
  padding: 5px;
  border-radius: 20px !important;
  /* background-color: white !important; */
  top: 1% !important;
  position: fixed !important;
  z-index: 111111111 !important;
}

/* loader */
.lo {
  transition: 0.9s ease-in-out !important;
  position: absolute;
  z-index: 2;
  background-color: #8080804d;
  backdrop-filter: blur(7px);
  height: 100vh;
}
@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
 
.slide-up-fade-in {
  animation: slideUpFadeIn 1.2s ease-in-out forwards;
}

.namespa {
  font-size: 15px;
}

/* HTML: <div class="loader"></div> */
/* From Uiverse.io by Satwinder04 */
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background:
    linear-gradient(0deg ,rgba(255, 255, 255, 0.5) 30%,#b6b6b600 0 70%,rgb(53, 53, 53) 0) 50%/8% 100%,
    linear-gradient(90deg,rgba(155, 154, 154, 0.849) 30%,#c9c9c900 0 70%,rgba(117, 115, 115, 0.75) 0) 50%/100% 8%;
  background-repeat: no-repeat;
  animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
   content: "";
   grid-area: 1/1;
   border-radius: 50%;
   background: inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.loader::after {
   opacity: 0.83;
   transform: rotate(60deg);
}
@keyframes l23 {
  100% {transform: rotate(1turn)}
}
.loader-text {
  font-size: 24px;
  color: #8b8b8b;
  margin-bottom: 20px;
  align-self: center;
}

.loader-bar {
  width: 50%;
  height: 10px;
  border-radius: 5px;
  background-color: #292929;
  animation: loader-bar-animation 2s ease-in-out infinite;
}