*{
    margin: 0px;
    padding: 0px;
}
html {
    scroll-behavior: smooth;
}
body{background-color: #000000;}
nav {
    background-color: #F7F7F7;
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-between; /* Space between logo and nav items */
    align-items: center;
    position: fixed;
    top: 0;
    border-bottom: 2px solid white;
    z-index: 3;
    padding: 0 1rem; /* Add padding for spacing */
}
#teampic-mobile {
    display: none; /* Hide mobile image by default */
}
nav .logo-container { /* Container for logo and hamburger */
    display: flex;
    align-items: center;
}

nav #logo {
    height: 4rem; /* Adjust size as needed */
}

/* Apply animations to all page content */
.page-content > * {
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInLeft 0.5s ease-out forwards;
}

/* Even children slide in from the right with a delay */
.page-content > *:nth-child(even) {
    animation-delay: 0.4s;
    transform: translateX(100%);
    animation-name: slideInRight;
}

/* Odd children slide in from the left with a delay */
.page-content > *:nth-child(odd) {
    animation-delay: 0.2s;
}









/*student animations*/

/* Default state for student child elements */
.team > * {
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInLeft 0.5s ease-out forwards;
}

/* Even children slide in from the right with a delay */
.team > *:nth-child(even) {
    animation-delay: 0.4s;
    transform: translateX(100%);
    animation-name: slideInRight;
}

/* Odd children slide in from the left with a delay */
.team > *:nth-child(odd) {
    animation-delay: 0.2s;
}



/* Keyframes for sliding in from the left */
@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes for sliding in from the right */
@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}






nav #mobile-menu-button { /* Hamburger button */
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    margin-left: 1rem; /* Add spacing */
    display: none; /* Hide on desktop */
}

nav .nav-links {
    display: flex;
    align-items: center;
}

nav .nav-links a {
    text-decoration: none;
    color: black; /* Adjust color as needed */
    margin-left: 1rem;
}
.toggle-btn {
    margin-left: 10px;
    border: none;
    cursor: pointer;
    color: #000000;
    border-radius: 5px;
    transition: 0.3s;
}

.content-box {
    
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.242);
    transition: background-color 0.3s, color 0.3s;
}

/* Night Mode Styles */




#logo{
    float: left;
    width: 60px;
    height: 60px;
}
#logo:hover{
    opacity: 0.8;
}
.nav a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    margin-left: 30px;
   font-size: larger;
    text-decoration: none;
    
}
.nav a:hover{
    color: #FFB22C;
}
.page-content{
    margin-top: 5rem;
}
#page1{
    background: linear-gradient(90deg, #c9d265, #af24dd);
    color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}
#teampic{
    width: 100%;
    height: 35rem;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    border-bottom: 3px solid black;
}
.button1{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    color: white;
    border-radius: 20px;
    
    width: 8rem; height: 2rem;
    border: 2px solid black;
}
.button1  a{
        text-decoration: none;
        color: rgb(255, 255, 255);
       font-size: larger;
        text-decoration: none;
}
.img{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 100%;
    background-color: #854836;
}
.img img{
    border: 2px solid black;
    border-radius: 50%;
    margin: 10px;
    width: 35rem;
    height: 35rem;
}
.vision_mission{
    color: white;
    margin: 10px;
}

#page4{
    background: linear-gradient(45deg, #FC466B, #3F5EFB);
  height: 90vh;
  font-family: 'Montserrat', sans-serif;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;



}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
   height: 500px;
    background-color: rgba(255, 255, 255, 0.429);
    width: 400px;
  }
.container form{
    display: flex;
    flex-direction: column;
}

.container form input{
    width: 300px;
    border-radius: 5px;
    background-color: rgba(240, 248, 255, 0.243);
}
.container form select{
    width: 300px;
    height: 35px;
    border-radius: 10px;
    background-color: rgba(240, 248, 255, 0.243);
}
.container form button{
    width: 100px;
    height: 35px;
    border-radius: 10px;
    background-color: rgba(240, 248, 255, 0.243);
}
.container form input:hover{
    border: 2px solid white;
}
.container form select:hover{
    border: 2px solid white;
}
.container form button:hover{
    border: 2px solid white;
}
#textarea:hover{
    border: 2px solid white;
}
.sports,.sports2{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.reel{
    margin: 20px;
    height: 399px;
    width: 225px;
    border-radius: 10px;
    border: 3px solid rgb(255, 255, 255);
}
#page5{
    background: rgb(19,180,170);
background: linear-gradient(225deg, rgba(19,180,170,1) 30%, rgba(38,38,87,1) 70%, rgba(20,73,156,1) 80%, rgba(243,0,255,1) 95%);
}
.feedback{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}  
.container-feedback{
    width: 400px;
    background-color: rgba(255, 255, 255, 0.346);
    border-radius: 10px;
}



.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    grid-gap: 10px; /* Spacing between grid items */
    padding: 10px;
}

.image-container {
    position: relative; /* For positioning the caption */
    overflow: hidden; /* Hide overflowing image content */
}

.image-container img {
    width: 100%;
    height: auto;
    display: block; /* Prevents a small space below the image */
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
    padding: 10px;
    text-align: center; /* Center the text */
    transform: translateY(100%); /* Initially hidden below the image */
    transition: transform 0.3s ease; /* Smooth transition for animation */
}

.image-container:hover .caption {
    transform: translateY(0%); /* Show caption on hover */
}

.caption p {
    margin: 5px 0; /* Adjust spacing between lines of text */
}

#page3{
    background-color: #000000;
    color: white;
}

.image{
    width: 18rem;
    height: 18rem;
    border-radius: 10px;
}
#President{
    border: 2px solid gold;
    color: gold;
}
#VPresident{
    border: 2px solid silver;
    color: silver;
}
#Secretory{
    border: 2px solid sienna;
    color: sienna;
}

.team{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#team{
    width: 100%;
    display: flex;
    flex-direction: column;
}
#row1,#row2,#row3,#row3,#row4,#row5,#row6,#row7,#row8,#row9,#row10,#row11,#row12,#row13{
    display: flex;
    flex-direction: row;
  
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 2rem;
}

.student{
    width: 20rem;
    height: 25rem;
    background-color: rgb(0, 0, 0);
    border: 3px solid white;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
}

#page2{
    background-color: #B3D8A8;
}
.news{
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    margin-left: 35px;
    margin-right: 35px;
    
}
#newsimg{
    width: 95%;
    object-fit: cover;
}

footer{
    color: white;
    text-align: center;
}
.credit{
   
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;

    
}
.credit,.college-fot,.college-fot h4{
    background-color: rgb(66, 63, 63);
}
.credit a{
    color: white;
    text-decoration: none;
}

/* Global Styles */






/* Responsive Styles */
@media screen and (max-width: 768px) {

        #heading-cosa{
            margin-top: 20px;
            margin-bottom: 20px;
        }   
        .button1{
            margin-bottom: 35px;
        }
        .content-box {
            flex-direction: column; /* Stack items vertically */
            height: auto; /* Allow height to adjust based on content */
            font-size: small; /* More readable font size */
            align-items: center; /* Center items horizontally */
            padding: 10px 0; /* Add padding for spacing */
        }
        #page1,#page2,#page3,#page4,#page5{
            margin-top: 5rem;
        }
        #teampic{
            display: none; /* Hide desktop image on mobile */
        }
    
        #teampic-mobile {
            width: 100%;
            display: block; /* Show mobile image on mobile */
        }
        .nav-mobile { /* Add mobile menu container */
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 0 10px;
        }
    
        #logo {
            display: block; /* Show logo on mobile */
            height: 40px; /* Adjust logo size */
        }
        nav .nav-links {
            display: none; /* Hide nav links on mobile */
            flex-direction: column;
            position: absolute;
            top: 5rem;
            left: 0;
            width: 100%;
            background-color: #F7F7F7;
            padding: 1rem;
        }
    
        nav .nav-links.show {
            display: flex; /* Show nav links when menu is toggled */
        }
    
        nav #mobile-menu-button {
            display: block; /* Show hamburger button on mobile */
        }
    
        #mobile-menu-button { /* Add mobile menu button */
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
        }
    
        .nav-links { /* Add container for nav links */
            display: none; /* Hide by default */
            flex-direction: column;
            width: 100%;
        }
    
        .nav-links.show { /* Show when menu is toggled */
            display: flex;
        }
    
        .nav a {
            font-size: small; /* More readable font size */
            display: block; /* Stack links vertically */
            padding: 10px;
            text-align: center;
        }
    
        #page1 {
            justify-content: center;
            align-items: center;
            align-content: center;
            text-align: center; /* Center text within page1 */
        }
    
        #page1 h2 {
            color: #000000;
            font-size: 1.5rem; /* Use rem for responsive font sizes */
        }
    
        #page1 h4 {
            font-size: 0.9rem; /* Use rem for responsive font sizes */
            color: #000000;
        }

    .button1{
        font-size: small;
        align-items: center;
        justify-content: center;
    }
    .button1 a{
        font-size: small;
        color: #ffffff;
    }
   
    #end{
        padding-right: 20px;
    }
    .team img{
        width: 350px;
        height: 350px;
        object-fit: cover;
    }
    .team{
        margin-bottom: 50px; 
        background-color: #000000;
       }
       .img img{
        width: 70px;
        height: 70px;
       }
    .img{
        padding-top: 20px;
        align-items: center;
        flex-direction:column;
        justify-content: center ;
    } 
    .img img{
        width: 15rem;
        height: 15rem;
    }  
    .vision_mision b,li{
        justify-content: center;
    }

    .navbar div {
        margin: 10px 0;
    }
    #sportslogo{
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
    }
    .wrapper h6{
        display: none;
    }
    .Sports{
        padding: 10px;
    }
    #vidios-Kaushlya{
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
    }
    #vidios-Kaushlya video{
        margin-bottom: 10px;
    }
    #team{
        justify-content: center;
        background-color: #000000;
        
    }
    #page3{
        background-color: #000000;
    }
    .reel{
        padding: 10px;
    }

    #Logo {
        width: 2.5rem;
        height: 2.5rem;
    }

    .team img {
        width: 90%;
    }

    #all_data {
        width: 90%;
        text-align: center;
    }

    .main {
        flex-direction: column;
        align-items: center;
    }

    #vision-d {
        flex-direction: column;
        padding: 20px;
    }

    #vision-d img {
        width: 80%;
        height: auto;
    }
    
    #row1, #row2, #row3, #row4, #row5, #row6, #row7, #row8, #row9, #row10, #row11, #row12 {
        padding-left: 40px;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }
    .image-grid{
        display: flex;

        flex-direction: column;
    }


    .student {
        width: 90%;
        margin-bottom: 20px;
    }

    #sportsreel {
        width: 100%;
        height: auto;
    }

    .dynamic-txts li {
        font-size: 40px;
    }

    .wrapper {
        padding: 10px;
    }

    .button1, .button2 {
        width: 100px;
        height: 25px;
    }

    footer {
        text-align: center;
        padding-bottom: 5px;
    }
    #page5{
        width: 100%;
        display: flex;
       
    }
    .sports ,.sports2{
        display: flex;
        flex-direction: column;
    }
    .credit {
        flex-direction: column;
    }
}



.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    display: none; /*Hidden by default*/
}

.popup-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: auto;
    max-width: 90%;
    position: relative;
    text-align: center; /* Center image and button */
}

.popup-content img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px; /* Space between image and button */
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#registerButton {
    text-decoration: none;
    background-color: #008CBA;
    border-radius: 5px;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}