@font-face {
    font-family: 'ClashDisplay-Extralight';
    src: url('./fonts/ClashDisplay-Extralight.woff2') format('woff2'),
         url('./fonts/ClashDisplay-Extralight.woff') format('woff'),
         url('./fonts/ClashDisplay-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'ClashDisplay-Light';
    src: url('./fonts/ClashDisplay-Light.woff2') format('woff2'),
         url('./fonts/ClashDisplay-Light.woff') format('woff'),
         url('./fonts/ClashDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'ClashDisplay-Regular';
    src: url('./fonts/ClashDisplay-Regular.woff2') format('woff2'),
         url('./fonts/ClashDisplay-Regular.woff') format('woff'),
         url('./fonts/ClashDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'ClashDisplay-Medium';
    src: url('./fonts/ClashDisplay-Medium.woff2') format('woff2'),
         url('./fonts/ClashDisplay-Medium.woff') format('woff'),
         url('./fonts/ClashDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'ClashDisplay-Semibold';
    src: url('./fonts/ClashDisplay-Semibold.woff2') format('woff2'),
         url('./fonts/ClashDisplay-Semibold.woff') format('woff'),
         url('./fonts/ClashDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'ClashDisplay-Bold';
    src: url('./fonts/ClashDisplay-Bold.woff2') format('woff2'),
         url('./fonts/ClashDisplay-Bold.woff') format('woff'),
         url('./fonts/ClashDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
  
  /**
  * This is a variable font
  * You can control variable axes as shown below:
  * font-variation-settings: wght 700.0;
  *
  * available axes:
  'wght' (range from 200.0 to 700.0
  */
  @font-face {
    font-family: 'ClashDisplay-Variable';
    src: url('./fonts/ClashDisplay-Variable.woff2') format('woff2'),
         url('./fonts/ClashDisplay-Variable.woff') format('woff'),
         url('./fonts/ClashDisplay-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
  }


  
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
  font-family: 'ClashDisplay-Regular';
}


/* header  */
.bg-body-tertiary{
    background-color: transparent !important;
    margin-bottom: 100px !important; 
}
.nav-link{
    color: #fff !important;
    border-right: 1px solid #fff;
    padding: 0;
    font-weight: 400 !important;
    padding: 0 12px !important;
}
.nav-link:hover{
  color: #5AF5BC !important;
}
.borderNone{
  border: none;
}
nav a{
  text-decoration: none;
}
.getTicketNow{
  background-color: #5AF5BC;
  width: 190px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 20px;
  font-weight: 600;
  /* padding: 14px 24px; */
  transition: 500ms ease;
}
.getTicketNow:hover{
  background-color: #07E996;
}

#navbar.scrolled {
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.75) 100%);
  animation: fadeEffect 0.5s;
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* hero section here  */
.heroSec{
    height: auto;
    width: 100%;
    padding: 00px 0;
    background-color: #000;
}

.heroSec .containers .rows{
  padding: 0 !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.col-mds-7{
  width: 60%;
  padding-left: 120px;
}
.col-mds-5{
  width: 40%;
}

.heroSec p{
    font-size: 18px;
    color:#7EC7FF;
    font-family: 'ClashDisplay-Semibold';
}

.heroSec h1{
    font-size: 120px;
    font-family: 'ClashDisplay-Medium';
    color: #fff;
    line-height: 120px;
}
.organizer{
    display: flex;
    align-items: center;
}

.organizer p{
    font-size: 24px;
    font-family: 'ClashDisplay-Regular';
    margin: 0;
    color: #fff;
    margin-right: 10px;
}

.organizer img{
  width: 150px;
  height: 20px;
}

.tags {
  display: flex;
  margin-left: -15px;
  margin-top: 20px;
}

.innerTag{
  border: 1px solid #535353;
  color: #5AF5BC;
  border-radius: 20px;
  margin-left: 10px;
  font-size: 16px;
  font-weight: 400;
  padding: 4px 10px 4px 10px;
}

.firstBtn{
  height: auto;
  width: 250px;
  padding: 12px 10px;
  background-color: #5AF5BC;
  color: #000;
  margin-top: 30px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: 500ms ease;
}

.secondBtn{
  height: auto;
  width: 250px;
  padding: 12px 10px;
  background-color: #7EC7FF;
  color: #000;
  margin-top: 30px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: 500ms ease;
}

.secondBtn:hover{
  background-color: #7EC7FF;
}
.secondBtn span{
  transition: 500ms ease;
}

.secondBtn:hover span{
  margin-right: -10px;
}

.firstBtn:hover{
  background-color: #07E996;
}
.firstBtn span{
  transition: 500ms ease;
}

.firstBtn:hover span{
  margin-right: -10px;
}

.parent {
display: flex;
}

.child {
display: inline-block;
}




/* mouse moving parallax code  */
/* styles.css */
#container {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('./img/bg-1.png'); /* Background image */
  background-size: cover; /* Ensure the image covers the container */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* No repeat */
}

.slide {
  display: block;
  position: absolute;
  height: 200px !important;
  width: 200px !important;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* second section here  */
.secondSec{
    height: auto;
    width: 100%;
    padding: 100px 0;
}

.secondSec p{
    font-size: 20px;
    text-align: center;
    color: #8C8C8C;
}

.secondSec img{
    display: flex;
    margin: 0 auto;
}

.secondSec .brandImageOne{
  width: 100%;
  align-items: center;
}



.brandImageTwo{
  width: 85% !important;
}

.brandImgThree{
  width: 100% !important;
}

/* third section here  */
.thirdSection{
  height: auto;
  width: 100%;
  padding: 100px 0;
  background-color: #000;
  color: #fff;
}

.thirdSection h2{
  font-size: 72px;
  line-height: 72px;
  font-weight: 700;
  color: #fff;
}

.thirdSection h2 span{
  color: #5AF5BC;
}

.thirdSection p{
  font-size: 20px;
  line-height: 29px;
  font-family: 'ClashDisplay-Regular';
  color: #fff;
}

.thirdSection h3{
  font-family: 'ClashDisplay-Medium';
  font-size: 32px;
}

.evDate{
  font-size: 20px;
  font-family: 'ClashDisplay-Semibold' !important;
}

.evDate a{
  font-family: 'ClashDisplay-Regular';
  color: #5AF5BC;
  transition: 500ms ease;
}
.evDate a:hover{
  text-decoration: none;
}
.thirdInner {
  display: flex;
}

.thirdInner .right{
  padding-left: 20px;
}
.thirdInner p{
  color: #fff;
  font-weight: 600;
  font-size: 20px ;
  line-height: 29px;
}
.thirdInner p span{
  font-weight: 400;
  color: #8B8B8B;
}
.locationsBtn, .locationsBtn a{
  color: #5AF5BC;
  font-size: 20px;
  font-weight: 400;
  margin-top: 15px;

}
.locationsBtn {
  transition: 500ms ease;
}
.locationsBtn a:hover{
  text-decoration: none;
}
.timerCount{
  height: auto;
  width: 200px;
  padding: 12px 0;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: #7EC7FF;
  border: 1px solid #7EC7FF;
  margin: 20px 0;
}
.timerCount span{
  font-weight: 600;
}

/* fourth section here  */
.fourthSec{
  height: 300px;
  width: 100%;
  padding: 50px 0;
  background-image: url(./img/bg-2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.fourthSec .row{
  align-items: center;
}

.fourthBtn{
  height: auto;
  width: 100%;
  padding: 12px 10px;
  background-color: #5AF5BC;
  border: 1px solid #5AF5BC;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #000;
  transition: 500ms ease;
  cursor: pointer;
}
.fourthBtn:hover{
  background-color: #07E996;
}
.fourthBtn span{
  transition: 500ms ease;
}
.fourthBtn:hover span{
  margin-right: -10px;
}
.btnBlack{
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
}
.btnBlack:hover{
  background-color: #131614;
  border: 1px solid #5AF5BC;
}

.fourthSec .fourthImgOne{
  width: 100px;
  margin-top: -200px;
}
.fourthSec .fourthImgTwo{
  width: 80px;
  margin-bottom: -350px;
}
.threeButtons{
  padding-top: 80px;
}

/* fifth section here  */
.fifthSec{
  height: auto;
  width: 100%;
  background-color: #000;
  padding: 100px 0;
}
.fifthInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.fifthInner h2{
  color: #5AF5BC;
  font-size: 72px;
  font-weight: 500;
}

.fifthInner h2 span{
  color: #fff;
}

.fifthInnerBtn{
  height: auto;
  width: 270px;
  height: auto;
  padding: 12px 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  background-color: #5AF5BC;
  color: #000;
  transition: 500ms ease;
  cursor: pointer;
}
.fifthInnerBtn:hover{
  background-color: #07E996;
}
.fifthInnerBtn span{
  transition: 500ms ease;
}
.fifthInnerBtn:hover span{
  margin-right: -10px;
}
.speakerBox{
  border: 1px solid #535353;
  padding: 10px;
}
.speakerBox span{
  padding: 0 10px;
}
.speakerBox img{
  margin-bottom: 15px;
}
.speakerBox h3{
  font-size: 32px;
  font-weight: 500;
  color: #fff;
}

.speakerBox p{
  font-size: 16px;
  font-weight: 400;
  color: #5B9EFF;
}

.speakerBox a{
  color: #5AF5BC;
  transition: 500ms ease;
}

.speakerBox a:hover{
  text-decoration: none;
}

.speakerBox span{
  color: #535353;
}
.fifthBtn{
  height: auto;
  width: 250px;
  padding: 12px 10px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  margin-top: 20px !important;
  margin: 0 auto;
  border: 1px solid #5AF5BC;
  transition: 500ms ease;
  cursor: pointer;
  margin-top: 48px !important;
}

.fifthBtn:hover{
    background-color: #131614;
    border: 1px solid #5AF5BC;
  
}

.fifthBtn img, .fifthBtn span{
  transition: 500ms ease;
}

.fifthBtn:hover img{
  margin-bottom: -10px;
  margin-left: 10px;
  
}
.fifthBtn:hover span{
  margin-right: -10px;
}

/* sixthh section here  */
.sixthSec{
  height: auto;
  width: 100%;
  padding: 100px 0;
  background-color: #000;
  color: #fff;
}
.sixthSec h2{
  color: #fff;
  font-size: 65px;
  font-weight: 600;
  margin-bottom: 60px;
}
.sixthSec h2 span{
  color: #58F0BE;
}

.sixthSec td, .sixthSec th{
  border-right: 1px solid #424242;
  border-bottom: 1px solid #424242;
  background-color: #000 ;
  color: #fff;
  padding: 18px 20px !important;
}
.sixthSec .time{
  background-color: #1F1F1F;
}
.sixthSec .leftBox{
  text-align: center;
}

.sixthSec th{
  text-align: center;
  color: #000;
  background-color: #5AF5BC;
}

/* .sixthSec thead tr th{
  width: 50px !important;
  
} */
.leftBox{
  width: 15%;
}
.sixthSec .blankBox{
  background-color: #121212;
}
.coloredTxt{
  color: #5B9EFF;
  font-size: 16px !important;
  font-weight: 500;
}
.diffColor{
  font-size: 20px ;
  font-weight: 500;
  color: #5AF5BC;
}
.sixthSec p{
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}
.sixthSec p span{
  color: #8B8B8B;
}
.diffColor a{
  color: #5AF5BC;
  transition: 500ms ease;
}
.diffColor a:hover{
  text-decoration: none;
}
.leftBox p{
  margin-top: 30%;
}

/* mobile tab code here  */
.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  background-color: #000;
  color: #fff;
  border-bottom: 1px solid #fff;
}

.tab {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  color: #fff;
  background-color: #000;
  
  transition: background-color 0.3s;
}


.tab.active {
  color: #5AF5BC;
}

.tab-content {
  padding: 20px;
  background-color: #000;
  color: #fff;
}

.tab-pane {
  display: none;
  animation: fadeEffect 0.5s;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.time{
  background-color: #1F1F1F;
}
.singleTab{
  padding: 10px;
  margin: 10px 0;
}
.singleTab p{
  margin: 0;
}



/* seventh section here  */
.seventhSec{
  height: auto;
  width: 100%;
  padding: 100px 0;
  background: linear-gradient(180deg, #0064F9 0%, #5AF5BC 100%);

}

.seventhSec h2{
  font-size: 72px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}
.seventhInner{
  height: 550px;
  width: 100%;
  padding: 15px;
  background-color: #fff;
  text-align: center;
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 7%);
}

.seventhInner .discountTag{
  color: #22D860;
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  margin-left: 110px;
}

.seventhInner h3{
  font-size: 32px;
  font-weight: bolder !important;
  color: #000;
}

.seventhInner .price{
  font-size: 24px;
  font-weight: 600;
  color: #5B9EFF;
  text-align: center;
}
.seventhInner .price span{
  text-decoration: line-through;
  color: #B5B8CB;
  font-weight: 500;
}

.seventhInner ul{
  list-style: none;
  margin: 40px 0;
}

.seventhInner ul li{
  padding: 10px 0;
  border-top: 1px solid #D9D9D9;
  font-size: 20px;
  color: #535353;
  font-weight: 400;
}

.seventhInner .bB{
  border-bottom: 1px solid #D9D9D9;
}

.seventhInner .boldTxt{
  font-weight: 600;
  font-size: 20px;
  color: #535353;
}

.seventhTicket{
  height: auto;
  width: 250px;
  text-align: center;
  padding: 12px 0;
  margin: 0 auto;
  font-size: 22px;
  font-weight: 600;
  background-color: #5AF5BC;
  cursor: pointer;
  color: #000;
  cursor: pointer;
  transition: 50ms ease;
}
.seventhTicket:hover{
  background-color: #07E996;
}

.seventhTicket span{
  transition: 500ms ease;
}
.seventhTicket:hover span{
  margin-right: -10px;
}

.seventhTicketOpacity{
  opacity: 40%;
  cursor: not-allowed;
}

.smalltxt{
  font-size: 12px;
  font-weight: 400;
  color: #535353;
  margin-top: 15px;
}


/* eigth section here  */
.eighthSec{
  height: auto;
  width: 100%;
  padding: 100px 0;
  background-color: #000;
  color: #fff;
}

.eighthSec h2{
  font-weight: 500;
  font-size: 72px;
}

.accordion-button{
  background-color: #000 !important;
  color: #B5B8CB !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: #5AF5BC !important;
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-body{
  font-size: 16px !important;
  font-weight: 400 !important;
  background-color: #000 !important;
  color: #D6D8E5 !important;
  padding-top: 0;
}
.BorderTop{
  border-top: 1px solid #d9d9d9;
}
.BorderBottom{
  border-bottom: 1px solid #d9d9d9 !important;
}

.accordion-button::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='LightGray' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed)::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='SpringGreen' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
}


/* footer section here  */
.footerSec{
  background-color: #000;
  height: auto;
  width: 100%;
  padding: 100px 0;
  color: #fff;
}
.footerInner{
  display: flex;
  align-items: center;
}

.footerSec h3{
  font-size: 48px;
  line-height: 48px;
  margin-top: 25px;
  font-weight: 500;
}
.footerInner p{
  margin: 0;
}

.footerInner img{
  margin-left: 10px;
}
.footerList ul{
  list-style: none;
}
.footerList ul li{
  font-size: 16px;
  line-height: 30px;
  color: #fff;
}
.footerList ul li a:hover{
  color: #5AF5BC;
}
.footerList ul li a{
  text-decoration: none;
  color: #fff;
}

.footerRight p{
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
}
.footerRight a{
  color: #58F0BE !important;
  font-size: 24px;
  font-weight: 400;
  transition: 500ms ease;
}
.footerRight a:hover{
  text-decoration: none;
}


.rightSocial ul{
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  margin-left: -15px;
  margin-top: 30px;
}

.rightSocial ul li{
  font-size: 20px;
  color: #fff;
  margin-left: 15px;
  cursor: pointer;
}

/* extra codes here  */
.mobileTabs{
  display: none;
}

@media screen and (max-width: 767px) {
  /* extra code here  */
  .mobileTabs{
    display: block;
    font-size: 16px !important;
  }
  table{
    display: none;
  }
  .fourthSec .fourthImgOne, .fourthSec .fourthImgTwo{
    margin: 0;
    display: none;
  }
  .threeButtons{
    padding: 0;
  }
  /* extra code here  */
  .heroSec .containers .rows{
    display: block;
  }
  #container{
    height: 300px;
  }
  .navbar-toggler{
    background-color: #58F0BE;
    border-radius: 2px;
  }
  .bg-body-tertiary{
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.75) 100%) !important;
  }
  .nav-link {
    color: #58F0BE !important;
    border-right: none;
    border-radius: 5px;
    border-bottom: 1px solid #fff;
    padding: 5px 0 !important;
    text-align: center;
  }
  .firstBtn{
    width: 100%;
    display: inline-block;
  }
  .secondBtn{
    width: 100%;
    display: inline-block;
  }
  .slide.one img {
    width: 100px;
  }
  .tags{
    margin-left: 0;
  }
  nav .d-flex{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .col-mds-7{
    width: 100%;
    padding-left: 0px;
    padding: 100px 10px;
  }
  .col-mds-5{
    width: 100%;
  }
  .heroSec h1 {
    font-size: 70px;
    font-family: 'ClashDisplay-Semibold';
    color: #fff;
    line-height: 70px;
  }
  .thirdSection h2{
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 40px;
  }
  .secondSec .brandImageOne{
    width: 200px;
    max-width: 100% !important;
  }
  
  .secondSec .brandImageTwo{
    width: 150px !important;
    max-width: 100% !important;
  }
  
  .brandImgThree{
    width: 100px !important;
    max-width: 100% !important;
  }
  .fourthSec{
    height: auto;
  }
  .fourthBtn{
    margin: 10px 0;
    width: auto !important;
  }
  .fifthInner{
    display: block;
    text-align: center;
  }
  .fifthInner h2{
    font-size: 48px;
  }
  .fifthInnerBtn{
    margin: 0 auto;
  }
  .speakerBox{
    display: flex;
    padding: 0;
  }
  .speakerBox p{
    margin: 0;
    padding-bottom: 10px;
  }
  .speakerBox img{
    padding: 10px;
  }
  .spakerItemLeft{
    width: 40%;
  }
  .spakerItemRight{
    width: 60%;
    padding: 15px;
  }
  .speakerBox h3{
    font-size: 24px;
  }
  .sixthSec p{
    font-size: 15px;
  }
  .footerSec img:nth-child(1){
    width: 115px;
  }
  .footerSec img:nth-child(2){
    width: 150px;
  }
  .seventhSec h2{
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 40px;
  }
  .seventhInner{
    margin-top: 20px;
  }
  .speakerBox{
    margin-top: 20px;
  }
  .sixthSec h2{
    font-size: 46px;
  }
  .tab{
    padding: 10px 0;
  }
  .tabTime{
    font-size: 14px;
  }
  .eighthSec h2{
    font-size: 48px;
  }
  .eighthSec{
    padding: 70px 0;
  }
  .footerSec{
    padding: 70px 0;
  }
  .footerInner{
    margin-bottom: 30px;
  }
  .footerList ul{
    padding: 0;
    margin: 0;
  }
}