*{
  text-decoration: none;
  list-style: none;
}
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
 
}
.navbar-brand img {
  margin-right: 10px;
}
#loader {
  background: #000 url('background/loader.gif') no-repeat center center;
 background-size: 30%;

  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 1000000;

}
/*header*/
header {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 9%;
  transition: background-color 0.5s ease;
  background-color: transparent;
  /* Initial background color */



}

header.scrolled {

  background-color: #222831;
  /* Background color after scrolling */
}

.dis {

  font-size: 25px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;

}

.lo {
  display: flex;
  align-items: center;

}
#mea{
  padding-top: 10px;
}

.navlist {
  display: flex;


}


.navlist a {
  color: white;
  margin-left: 40px;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all .55s ease;
  text-decoration: none;
  list-style: none;

}

.navlist a:hover {
  border-bottom: 2px solid white;
}

#menu-icon {
  color: white;
  font-size: 35px;
  z-index: 10000;
  cursor: pointer;
  display: none;


}
/*drop down */
.dropdown {
  position: relative;
}
.dropdown a{
color:white;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  
  background-color: #000;

  padding-left: 10px;
  list-style: none;
  flex-direction: column;
  width: auto;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li {
  padding: 10px 30px;
}

.dropdown-menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
}

.dropdown-menu a:hover {
  background-color: #393e46;
  color: #fff;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: flex;
}
/* Dropdown Menu Adjustments */


/*back image*/
.back_image {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.back_image img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(40%);
}

.back_image h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .back_image h1 {
      font-size: 2rem;
  }
}

/*main*/
main {
 
   /* 3 columns by default */
  gap: 1.5rem;
  padding: 2rem 0;
  width: 450px auto;
  max-width: 600px;
  margin: 4rem auto;
  

  
}
.center-line{
  border-left: 6px solid #ff0000;
  height: 100%;
  min-height: 750px;
  max-height: 800px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  display: none;
  margin-top: 2rem;
  

  
  
}
.header-content {
  
  text-align: center;
  padding: 2rem 0;
  background: linear-gradient(135deg, #ff0000, #ff7373);
  color: white;
  border-radius: 10px;
  margin-bottom: 50px;
  
}


.header-content2
{
  font-size: 24px;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #0066ff, #73abff);
  color: white;
  border-radius: 10px;
  margin-top: 50px;
  margin-bottom: 50px;
  cursor: pointer;
  
}
.header-content2 a{
  text-decoration: none;
  color: #ffffff;
}


.event {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
  text-align: center;

  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  height: 150px;
 
}

.event h2 {
  color: red;
}

.leaderboard-event {
  background: linear-gradient(135deg, #0066ff, #73abff);
  border: 2px solid #0066ff;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}

.leaderboard-event h2 {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.leaderboard-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.45);
}

/* Floating bottom-center leaderboard button */
/* removed floating button styles */

/* Centered blue gradient CTA */
.leaderboard-cta {
  display: flex;
  justify-content: center;
  margin: 3rem 0 2rem 0;
}

.leaderboard-cta a {
  display: inline-block;
  background: linear-gradient(90deg, #0d6efd 0%, #73abff 100%);
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  font-weight: 600;
  padding: 24px 40px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(13, 110, 253, 0.25);
}

.leaderboard-cta a:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .leaderboard-cta a {
    font-size: 22px;
    padding: 16px 24px;
  }
}
.event:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  max-width: 600px;
  margin: 10% auto;
  text-align: center;
  position: relative;
}

.modal-content h2 {
  color: #4c4c4c;
}

.close {
  position: absolute;
  top: 2px;
  right: 20px;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
}

/*footer*/
footer{
  background-color: #9AA6B2;
  padding-bottom: 30px;
}
.social-media_box{
  max-width: 240px;
}
.social-media {
   
    display: flex;
    max-width: 240px;
    
    
}
.social-icon{
  font-size: 20px;
}
.social-media a{
    justify-content: space-around;
    
 
    transition: all 0.3s ease;
    text-decoration: none;
    padding-right: 9px ;
    padding-left: 9px;
   
    margin: 10px;
    border-radius: 50%; 
}
.social-media a:hover {
    background-color: #ffa400;
    color: white;
  }
  .menu-link {
     /* Makes the <a> behave like a block element */
    

    color: white;
    text-decoration: none;
   
   
   
    transition: all 0.3s ease;
}

.menu-link:hover {
 /* Background color on hover */
    color:  #ffa400; /* Text color on hover */
     /* Border on hover */
}

          /* Running Footer */
          .ticker {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: black;
            color: white;
            padding:0px;
            z-index: 1000;
        }

        .scrolling-text {
            
            color:white;
            padding: 10px 20px;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
            animation: ticker 10s linear infinite;
            text-align: center;
            border-radius: 10px 10px 10px 10px;
            font-weight: bold;
        }

        @keyframes ticker {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }
@media(max-width:930px) {
  #menu-icon {
    display: block;
  }
  header{background-color: #222831;}

  .navlist {
    position:absolute;
    top: 100%;
    left: 100%;
    width: 50%;
    height: auto;
    background-color: black;
    backdrop-filter:blur(10px);
    display: flex;
    align-items: start;
    flex-direction: column;
    border-radius: 10px;
    
    transition: all .55s ease;

  } .navlist a {
      margin-left: 0;
      margin-top:15px ;
      display: block;
      color:white;
      font-size: 1.5rem;
    
    }
  
    .navlist.open {
      left: 0;
    }
  
    .navlist a:hover {
      background-color: transparent;
     
      border-bottom: #000 solid 2px;
    }
    .back_image{
      padding-top: 90px;
    }
  
  .dropdown-menu{
    position: relative;
    
  }
  .dropdown a{
    color:white;
  }
  .dropdown li{
    font-size: 1rem;
    padding: 0px;
  }
      main{
        max-width: 400px;
        padding: 0;
        height: auto;
        
      
      
       } 
       .event{
        margin-top: 3em;
        margin-left:1em ;
        margin-right: 1em;
       }
       .event::before {
       content: '';
       
       background: #888;
       width: 3px;
       height: 3em;
       position: absolute;
      right: 50%;;
       
       transform: translatex(50%);
       }
       .event::before {
        
        top: -3em;
       
         }
    .ticker{
        width: auto;
    }

      
    }
  
  @media(max-width:450px) {
      .navlist {
          width: 100%;}
          .back_image h1{
            font-size: 30px;
          }}

  


   @media screen and (min-width:930px) {
            .center-line{
            display: block;
            height: 90%;
            
            }
            main{
              width: 450px;
            }
            
            .event:nth-child(odd) {
              border-left: 3px solid #888;
              padding-left: 3em;
              transform: translateX(16.5em);
              }
              .event:nth-child(even) {
                border-right: 3px solid #888;
                padding-right: 3em;
                transform: translateX(-16.5em);
                }
                .event:nth-child(odd)::before,
            .event:nth-child(even)::before {
            content: '';
            
            background: #888;
            width: 3em;
            height: 3px;
            position: absolute;
            top: 50%;
            
            transform: translateY(-50%);
            }
            .event:nth-child(odd)::before {
              right:100%;
              
            
              }
              .event:nth-child(even)::before {
               left: 100%;
                }
                
            
            .event:nth-child(odd) div::before,
            .event:nth-child(even) div::before {
            content: '';
            background: #000;
            box-shadow: 00.5em #0d71fc;
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            }
            .event:nth-child(odd) div::before{
              right: 107%;
              
            }
            .event:nth-child(even) div::before{
              left: 107%;
            }
            
                   }