 /* General Styling */
 

 @font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Medium.ttf);
 }
 
 @font-face {
  font-family: Nunito;
  src: url(../fonts/Nunito/Nunito-VariableFont_wght.ttf);
 }

@font-face {
  font-family: Roboto;
  src: url(../fonts/Roboto/Roboto-Medium.ttf);
}

@font-face {
  font-family: NotoSans;
  src: url(../fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
}
@font-face {
  font-family: Ubuntu;
  src: url(../fonts/Ubuntu/Ubuntu-Medium.ttf);
}

 body{
  background-color:black ;
 }

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Hide the images by default */
.mySlides {
display: none;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}


 
 .Events {
  text-align: center;
  font-size: 3.5rem;
  margin-bottom: 2rem;
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
  border-bottom: 2px solid white;
  margin-bottom: 5vh;
}

/* Flexbox for Event Cards */
.events-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  height: auto;
  
  margin-bottom: 15vh;
}

.event-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  background-color: #464676;
  border-radius: 8px;
  box-shadow: 0 4px 8px #000000;
  padding: 2rem;
  
}

#para{
  
  font-size: 2rem ;
  letter-spacing: 0.2px;
  font-weight: 500;
width: 700px;
margin-top: 90px;
margin-left: 40px;

}

.scrollBox{
  opacity: 1 !important;
  transform: translateX(0px) !important;

}

.box1, .box3, .box5{
  transform: translateX(-500px);
  transition: opacity 0.6s ease, transform 0.6s ease; 
}

.box2, .box4{
  transform: translateX(500px);
  transition: opacity 0.6s ease, transform 0.6s ease; 
}

/* Event Image */
.event-image {
  width: 40%;
  height: auto;
  border-radius: 8px;
  border: 3px solid #000055
  ;
}

/* Event Info */
.event-info {
  width: 60%;
}

.event-name {
  font-size: 4.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: whitesmoke ;
  font-family: Montserrat;
letter-spacing: 2px
  ;
}

.event-info p {
  font-size: 1.4vh;
  color: #06063a  ;
  line-height: 1.8vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.event-card:hover{
  scale: 1.03;
}




/* Responsive Styles */
@media (max-width: 768px) {
  .event-card {
    flex-direction: column;
    text-align: center;
  }

  .event-image {
    width: 100%;
  }

  .event-info {
    width: 100%;
  }
  .events-container {
    
    gap: 5rem;
    margin-bottom: 15vh;
  }
}

.eventhead{
  margin-top: 15vh;
  padding-bottom: 5px;
  color: #000055;
  
}

.event-div{
  width: 100vw;
  height: 57vh;
  z-index: -5 ;
  background-color: white;
  margin-top: 40px ;
display: flex;
justify-content: space-between;
margin-bottom: 10vw;
}  

.event-divis{
display: flex;

gap: 5rem;
}

.montserrat-myFont {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.noto-sans {
  font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  
}
