:root {
  --primary-color: #0A1A38;
  --green-color: #198754;
  --bluecolor: #000a80;
  /* --primary-color: #177c82; */

  /* --secondary-color: #0d4d52; */
}

.btnactive {
  /* background-image: linear-gradient(135deg, var(--primary-color) 10%, var(--secondary-color)); */
  background-color: var(--primary-color) !important;
}

.bg-green {
  background-color: var(--green-color);
}

.bg-blue {
  background-color: var(--bluecolor)
}

.text-blue {
  color: var(--bluecolor)
}







.drpdownstyle label {
  font-weight: normal !important;
}




/* register and venueregister   */
.bgimage1 {
  position: relative;
  /* Ensures the pseudo-element is positioned correctly */
  background-image: url("/assets/img/allimages/venue2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;

  overflow: hidden;
}

.bgimage1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* Dark overlay */
}

.bgimage1 * {
  position: relative;
  z-index: 1;
  /* Ensures content appears above overlay */
}

@media all and (min-width:1000px) {
  .d-margin {
    margin-top: 100px;
  }
}

@media all and (max-width:1000px) {
  .bannerimg {
    margin-top: 2.5em !important;
  }

  .d-margin {
    margin-top: 20px;
  }

  h3 {
    font-size: 13px !important;
  }

  .header .main-menu-wrapper .menu-header {
    height: 80px;
  }

  .header {
    height: 88px;
  }

  .imageicon {
    width: 15px;
    height: 15px;
  }

  .fs-12 {
    font-size: 12px !important;
  }

  .fs-10 {
    font-size: 13px !important;
  }

  .fs-8 {
    font-size: 8px !important;
  }

  .h-26 {
    height: 30px !important;
  }

}

.h-40 {
  height: 40px !important;
}

.h-50 {
  height: 50px !important;
}

.f-14 {
  font-size: 14px !important;
}

.fw-normal {
  font-weight: normal !important;
}

.bg-transparent {
  background-color: transparent;
}

.checkboxstyle {
  padding: 1px !important;

}

.checkboxlable {
  margin-top: 5px !important;
}

.header.header-trans {
  background-color: #0A1A38 !important;
  /* background-color: #0A1A38 !important; */
  transition: background-color 0.3s ease-in-out;
}

/* scoll to top button */
/*  background when scrolled */
.header.header-scrolled {
  background: #000 !important;
}



/*  animation fade in ,fade-left fade-right, fade-bottom */
/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

/* Fade Up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 2.3s ease-in-out;
}

/* Fade Down */
/* @keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

.zoomin2 {
  animation: zoomin2 1s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes zoomin2 {
  0% {
    transform: translateZ(0)
  }

  100% {
    transform: translateZ(160px)
  }
}

/* animation */
.zoomin {
  /* animation: fadeDown 1s ease-in-out; */
  animation: fadeDown 5s cubic-bezier(.39, .575, .565, 1.000) both
}

/* .fadeDown {
  
} */

@keyframes fadeDown {
  0% {
    transform: scale(.2)
  }

  100% {
    transform: scale(1)
  }
}

/* Fade Left */


@keyframes fadeUpLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-left {
  animation: fadeUpLeft 1s ease-in-out;
}


/* Fade Right */
@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-right {
  animation: fadeRight 1s ease-in-out;
}




/* loader	 */
.loader-overlay,
.loader2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}






.rotateanimation {
  animation: rotateanimation 2s ease-in-out 3 both
}

@keyframes rotateanimation {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}








.cardhidden {
  overflow: hidden;
  position: relative;
}

.image-container {
  width: 100%;
  aspect-ratio: 16 / 16;
  /* Adjust the aspect ratio as needed */
  overflow: hidden;
  position: relative;
}

.imagehover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
  position: absolute;
}

.imagehover:hover {
  animation: kenburns-top 5s ease-out both;

}

@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }

  100% {
    transform: scale(1.25) translateY(-15px);
    transform-origin: top;
  }
}



.boxes {
  transition: all 1s;
  cursor: pointer;
}

.boxes:hover {
  background-color: #686fd1 !important;
  color: white !important;
}

.boxes:hover .gamename {
  color: white !important;
}

.logo-container img{
margin-top:5px;
width:22% !important
}