/* body */
body {
    margin: 0;
    padding: 0;
    display: block;
    background-image:linear-gradient(to bottom, #c5d2df, white);

}

/* This is for nav bar */
nav {
    background-color: white;
    display: flex;
    height: 2.5rem;
    padding: 1em;
    justify-content: space-between;
    margin-top: 1.5em;
    padding: 1em;
    align-items: center;
    
  }
  
  /* This is for nav-bar buttons only */
  nav {
    background-color: white;
    display: flex;
    height: 2.5rem;
    padding: 1em;
    justify-content: space-between;
    margin-top: 1.5em;
    padding: 1em;
    align-items: center;
    
  }
  
  /* This is for nav-bar buttons only */
  .nav-btn {
    text-decoration: none;
    color: black;
    padding: 0.5em;
    
  }
  
  
  /* Navbar Logo */
  
  #vip {
    width: 3em;
    height: 3em;
    margin-left: 3.5em;
  }
  
  
  /* This is for left side buttons */
  
  .left {
    margin-left: 2em;
  
  }
  .left a {
    font-weight: bold;
    padding-right:1.3em ;
    padding-left: 1.3em;
  }
  .left a:hover{
    border: 1px solid black;
    border-radius: 1em;
    background-color: #333;
    color: white;
  }
  
  /* This is for right side buttons */
  .right {
    margin-left: 33em;
    margin-right: 8rem;
  }
  .right a {
    border: 1px solid black;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: #333;
    color: white;
    margin-right: 1.5em;
  }
  .right a:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    font-weight: bold;
  }
  

/* video prop */

video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100;
    height: 100;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
 }

#isec {
   position: relative;
   height: 90.8vh;
   width: 100%;
   overflow: hidden;
   z-index: -1;
 
   opacity: 1;
}

/* text over video */

.main {
   color: black;
   opacity: 1;
}
.overlay h1{
   font-weight:900;
   font-size: 5em;
   text-align: center;
   left: 25%;
   mix-blend-mode: overlay;
   position:absolute;
   top: 12%;
   text-shadow: 4px 4px 4px black;
}

.overlay h2{
   font-weight: bolder;
   font-size: 2.7em;
   mix-blend-mode: overlay;
   left: 29%;
   text-align: center;
   position:absolute;
   top: 27%;
}

.overlay p{
   font-weight: bolder;
   font-size: 1.5em;
   mix-blend-mode: overlay;
   left: 6em;
   right: 6em;
   text-align: center;
   position:absolute;
   top: 40%;
}

.overlay h3{
   font-weight: bolder;
   font-size: 2.7em;
   mix-blend-mode: overlay;
   left: 26.5%;
   text-align: center;
   position:absolute;
   top: 50%;
}

.overlay .para{
   font-weight: bolder;
   font-size: 1.5em;
   mix-blend-mode: overlay;
   left: 6em;
   right: 6em;
   text-align: center;
   position:absolute;
   top: 65%;
}
.overlay h4{
   font-weight: bolder;
   font-size: 2.7em;
   mix-blend-mode: overlay;
   left: 18%;
   text-align: center;
   position:absolute;
   top: 75%;
}

/* button over video */

.overlay button{
   font-weight: bolder;
   font-size: 1.7em;
   mix-blend-mode: overlay;
   left: 27.5%;
   text-align: center;
   position:absolute;
   top: 91%;
   background-color:white;
}

.overlay button:hover{
   color: white;
   background-color:#333;

}


 /* meet our champ section */
 
 
 img{
    display: inline;
    width: 100%;
 }
 

   

.high {
   width: 30em;
   height: 44em;
   border-radius:4em;
   margin-right: 7em;
   margin-top: 5em;
   margin-bottom: 5em;
   
}
.parent {
   display: flex;
}
.bruh{
   padding-left: 5em;
   padding-right: 5em;
   font-size: 1.7em;
   font-family: "Gill Sans", sans-serif;
   margin-top: -1em;
}
.top{
   font-size: 2.4em;
   font-style:oblique;
   margin-left: 3.4em;
   text-decoration:underline;
   color: rgb(10, 48, 66);
}
.head{
   font-weight:bold;
   font-size: 60px;
   margin-left: 2em;
   margin: 2em;
   margin-bottom: 1em;
   
}

/* join our club section */

.as{
   width: 100%;
   height: auto;
   background-color: #5d7892;
   display: flex;
   border-top: 4px dashed black;
   border-bottom: 4px dashed black;
}
.as button:hover {
   color: white;
   background-color: black;
}
.bruh1{
   padding-left: 5em;
   padding-right: 5em;
   font-size: 30px;
   font-family: "Gill Sans", sans-serif;
   color: white;

}
.head1{
    font-size: 4em;
    text-shadow:3px 2px 1px rgb(187, 232, 255);

   color: black;
   margin-left: 2.3em;

}
.high1 {
   width: 90em;
   height: 35em;
   margin-right: 8em;
   
   
}
button{
   margin-left: 8em;
   width: 9em;
   height: 3em;
   border-radius: 3em;
   font-size: 1.2em;
}


/* for our sponsors */

.sponsor {
    height: 27em;
    overflow: hidden;
}
.sponsor h1{
   font-size: 3em;
   text-align: center;
   text-shadow: 4px 5px 4px grey;
   margin-bottom: 2.5em;
}

.sponsor:hover h1{
   text-shadow: 15px 6px 5px grey;
}

.marquee {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.marq {
    display: flex;
    width: 200%;
    animation: marquee 20s linear infinite;
}

.marq-item {
    flex: 0 0 16.666%;
    padding: 0 2em;
}

.marq-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 120px;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.marq:hover {
    animation-play-state:running;
}




/* alumni section  */

.alumni {
    display: flex;
    justify-content: center;
   
 }
 
 .alumni img {
    height: 15em;
    width: 15em;
    padding: 3em;
    
    border-radius: 50%;
 }
 .alumni img:hover {
    box-shadow: 1px 1px 1px 1px black;
 } 
 .alumni-h1 {
    font-size: 2em;
    margin-left: 3.5em;
    text-shadow: 4px 5px 4px grey;
 }
 .alumni-h1:hover {
    text-shadow: 15px 6px 5px grey;
 }
 .alumni h2 {
    font-size: 2em;
    margin-top: 1em;
    margin-bottom: 4em;
    margin-left: 3em;
 }
 
 /* news section */
 
 .news {
    display: flex;
    justify-content: center;
    margin-bottom: 5em;
 
 }
 .news-h1 {
    text-align: center;
    font-size: 3.5em;
    text-shadow: 4px 5px 4px grey;
    margin-bottom: 2em;
 }
 .news-h1:hover {
    text-shadow: 15px 6px 5px grey;
 }
 .news img{
    height: 20em;
    width: 25em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    
 }
 .news-box {
    display: inline;
    border: 3px solid black;
    margin-left: 2.5em;
    width: 25em;
    border-radius: 1em;
 }
 .news-box h2{
    text-align: center;
 }
 .news-box p {
    font-size: 1.2em;
    padding: 1em;
    text-align: center;
 }
 .news-box:hover {
    box-shadow:6px 6px 6px black ;
 }

 


/* ========================
   MEDIA QUERIES
======================== */

/* For screens smaller than 768px (tablets and small desktops) */

@media screen and (max-width: 768px) {

   /* Navbar Section */
   nav {
       flex-direction: column;
       padding: 1em;
   }
   .left, .right {
       display: flex;
       justify-content: center;
       margin-left: 0;
       margin-top: 1em;
   }
   .nav-btn {
       font-size: 1.2em;
       padding: 0.8em 1.5em;
   }
   .nav-btn:hover {
       background-color: rgb(13, 64, 81);
       color: white;
   }

   /* Showcase Section */
   #isec {
       height: 60vh; /* Reduced height on smaller screens */
   }
   video {
       object-fit: cover;
       object-position: center;
   }
   .overlay h1 {
       font-size: 3.5em;
       top: 1.2em;
   }
   .overlay h2 {
       font-size: 2em;
       top: 4em;
   }
   .overlay p {
       font-size: 1.3em;
       top: 9em;
   }
   .overlay h3 {
       font-size: 2em;
       top: 6em;
   }
   .overlay button {
       font-size: 1.2em;
       top: 16em;
   }

   /* Highlight Section */
   .parent {
       flex-direction: column;
       text-align: center;
   }
   .high {
       width: 100%;
       height: auto;
       margin: 2em 0;
   }
   .bruh {
       font-size: 1.5em;
   }

   /* Join Our Club Section */
   .as {
       flex-direction: column;
       text-align: center;
   }
   .high1 {
       width: 100%;
       height: auto;
   }
   .head1 {
       font-size: 2.5em;
   }
   .bruh1 {
       font-size: 1.4em;
       padding: 1em;
   }

   /* Sponsors Section */
   .marq-item {
       flex: 0 0 33.333%; /* Show 3 items per row */
   }
   .marquee {
       overflow: hidden;
   }

   /* Alumni Section */
   .alumni {
       flex-direction: column;
       align-items: center;
   }
   .alumni img {
       height: 8em;
       width: 8em;
       padding: 0.1em;
   }
   .alumni h2 {
       font-size: 1.3em;
       margin-left: 1.7;
       text-align: center;
   }

   /* News Section */
   .news {
       flex-direction: column;
       align-items: center;
   }
   .news-box {
       width: 80%;
       margin-bottom: 1em;
   }
   .news-box h2 {
       font-size: 1.5em;
   }
   .news-box p {
       font-size: 1em;
   }

   /* Footer Section */
   .footer {
       flex-direction: column;
       padding: 2em;
   }
   .logo-nav {
       flex-direction: column;
       align-items: center;
   }
   .fot-sec {
       display: block;
       text-align: center;
   }
   .fot-btn {
       display: block;
       text-align: center;
       margin: 1em 0;
   }
   .column1 {
       margin-top: 1em;
   }
}

/* For very small screens (phones in portrait mode or small devices) */
@media screen and (max-width: 480px) {
   body {
       font-size: 14px;
   }

   /* Navbar Section */
   .nav-btn {
       font-size: 1em;
       padding: 0.5em 1em;
   }

   /* Showcase Section */
   .overlay h1 {
       font-size: 2.5em;
   }
   .overlay h2 {
       font-size: 1.5em;
   }
   .bruh {
       font-size: 1.2em;
   }

   /* Highlight Section */
   .head {
       font-size: 2em;
   }

   /* Join Our Club Section */
   .head1 {
       font-size: 2em;
   }
   .bruh1 {
       font-size: 1.2em;
       padding: 1em;
   }

   /* News Section */
   .news-box h2 {
       font-size: 1.3em;
   }

   /* Alumni Section */
   .alumni h2 {
       font-size: 1.3em;
   }
   
   .alumni img {
       height: 12em;
       width: 12em;
   }
}


 /* Footer section */

 .footer {
   background-color: #333;
   color: #fff;
   padding: 20px;
   display: flex;
   justify-content: space-around;
 }
 
 /* Logo footer */
 .logo-nav{
   display: flex;
   height: 20em;
   width: 20em;
 }
 
 .fot-sec{
   margin-top: 5em;
 }
 
 .foot-h2{
   margin-top: 4em;
   margin-left: -2em;
 }
 
 /* This is for links */
 
 .astyle{
   color: aliceblue;
   text-decoration: none;
   padding-top: 1.15em;
 }
 
 /* This is for icons */
 
 .fa-solid{
   color: aliceblue;
   padding-top: 1.15em;
   padding-right: 0.5em
 }
 
 .fa-brands{
   color: aliceblue;
   padding-top: 1.15em;
   padding-right: 0.5em;
 }
 
 .fot-btn {
   text-decoration: none;
   color: black;
   padding: 0.5em;
   margin:1em;
   color: aliceblue;
 }
 .fot-btn:hover{
   text-decoration: underline;
   color: lightblue;
 }
 
 .column1{
   margin-top: 2em;
 }
 .copyright {
   background-color: #333;
   color: #fff;
   padding: 20px;
   text-align: center;
   margin-top: -7em;
 }


/* footer ends here */