@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Encode+Sans+Semi+Expanded:wght@600&family=Encode+Sans:wght@300;700&family=M+PLUS+Code+Latin&family=Poppins:wght@300&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Raleway&family=Source+Code+Pro:ital,wght@0,300;1,400&family=Young+Serif&family=Yuji+Hentaigana+Akari&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:"Quantico";
    background-color:  #0a0000; /* Dark Navy Background */
    color: #FFFFFF; /* White Text */
    
}

/* Navbar Styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.4); /* Adjusted transparency */
    backdrop-filter: blur(3px); /* Adds glass effect */
    color: #FFFFFF;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    transition: background-color 0.3s ease; /* Smooth background transitions */
}


.logo-section a{
    display: flex;
    align-items: center;
    text-decoration: none; 
}
.navbar .log-section {
    display: flex;
    align-items: center;
    width: auto;


}

.logo {
    width: 40px; /* Adjust as needed */
    height: 40px;
    border-radius: 3%;
    object-fit: cover;
    margin-right: 10px;
}

.site-title {
    font-size: 3em;
    color: #FFFFFF; /* Light Blue Title */
    font-weight: bold;
    height:30px;
    padding-bottom: 10px;
    padding-right: 10px;
}
#aivah-text {
    height: 40px;
    padding-left:75px;
}
.Aivah {
    color: rgb(9, 161, 221);
     /* Color for "Aivah" */
}
/*AIVAH*/
#home .hero-text h1 {
    font-size: 7rem; /* Adjust the size as desired */
    font-weight: bold; /* Optional: Makes the text bold */
    text-transform: uppercase; /* Ensures text is in big letters */
}
#home-1 p{
    text-align:left;
    margin-bottom: 10px;
    color: #FFFFFF;
}




.nav-links {
    display: flex;
    list-style:none;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    text-decoration: none;
    color: #B0B3B8;
    font-weight: bold;
    font-size: 1em;
    transition: color 0.3s;
    padding-right: 30px;
}

/* Dropdown Menu */
ul {
    list-style-type: none; /* Removes bullet points */
    padding: 0;
    margin: 0;
}
.menu-item {
    position: relative;
}

.menu-item .dropdown {
    display: none;  /* Hide the dropdown initially */
    position: absolute;
    background-color: #ffffff; /* Adjust background color */
    top: 100%;
    left: 0;
    list-style: none;
    background-color: #444;
    min-width: 130px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.menu-item:hover .dropdown {
    display: block;  /* Show the dropdown when hovered */
}

.dropdown li {
    padding: 0px;
    text-align:left;
}

.dropdown a {
    color: white;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #555;
}

.nav-links a:hover {
    color:#0073E6; /* Medium Blue on Hover */
}

/* Section Styles */
.section {
    padding: 100px 20px;
    text-align: center;
}


#home {
    position: relative;
    background: url('./img/h1.jpg') no-repeat center center/cover; /* Replace with your image path */
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full width of the screen */
    display:block;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top:1px;
    margin-top: 1px;
/* Prevents overflow */
}


/* Style for the section */

   

/* Style for the image */



.hero-text {
    position: absolute;
    bottom: 20px; /* Adjust spacing as needed */
    left: 20px; /* Adjust spacing as needed */
    color: white;
    font-size: 2em; /* Adjust font size as needed */
}


/* Styles for the clickable text */
/* Default styling for the clickable text */
.hover-blue {
    color: white; /* Default text color */
    cursor: pointer; /* Change the cursor to pointer */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect - color change to blue and remove cursor */
.hover-blue:hover {
    color: rgb(5, 85, 203); /* Change text color to blue when hovered */
    cursor: none; /* Remove the cursor on hover */
}

/* Active state when the text is clicked */
.hover-blue.clicked {
    color: rgba(192, 7, 244, 0.918); /* Change color to pink when clicked */
}

/* Ensure text color is white when not hovered or clicked */
.hover-blue:not(:hover):not(.clicked) {
    color: white;
}






#events {
    background-color: #060606;
    text-align: left; /* Deep Blue for Events */
}

#devigo {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
    background-color: #060606; 
    font-size:20px;
}


.devigo-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heading-container {
    flex: 10; /* Takes up space for the heading */
    text-align: left; /* Aligns the heading to the left */
}

.zenith-heading {
    font-size: 7.5em;
    font-weight: bold;
    color:#FFFFFF; /* Change this color as needed */
    margin-right: 20px;
   /* Space between heading and image */
}
/* Hackathon Section */


.hackathon-item {
    width: 100%;
    position: relative;
    text-align: center;
    margin-bottom: 20px; /* Space between the images */
}
.hackathon-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.hackathon-item .hackathon-image {
    width: 100%; /* Make all images the same size */
    height: auto;
}

/* Add hover effect */
.hackathon-item:hover .hackathon-image {
    transform: scale(1.05); /* Slight zoom effect */
}
.description {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    border-radius: 0 0 10px 10px;
}
.description h3 {
    font-size: 18px;
    margin: 0;
}

.description p {
    font-size: 14px;
    margin-top: 5px;
}


.hackathon-gallery img {
    width: 30%; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Optional: rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: shadow effect */
}
/* Styling for the main DEVIGO EVENT title */
/* Styling for the main DEVIGO EVENT title */
.devigo-title {
    font-family:"Quantico", sans-serif; /* Modern and clean font */
    font-weight: 700; /* Bold font weight for emphasis */
    font-size: 2.5em; /* Large font size for visibility */
    color: #2a3a9f; /* Attractive dark blue */
    text-align: left; /* Aligns text to the left */
    margin-left: 10px; /* Adds some left margin */
    margin-bottom: 0.3em; /* Adds spacing below */
}

/* Styling for Hackathon Domains title */
.hackathon-domain-title {
    font-family:"Quantico", sans-serif;/* Professional and readable font */
    font-weight: 500; /* Slightly less bold than main title */
    font-size: 1.8em; /* Smaller font size */
    color: #e65c00; /* Warm, vibrant orange */
    text-align: left; /* Aligns text to the left */
    margin-left: 15px; /* Adds a bit more left margin */
    padding-left: 5px; /* Adds inner padding for a balanced look */
    border-left: 4px solid #e65c00; /* Adds a left border for emphasis */
}




#events h2 {
    font-size: 40px;
}
/* Slider Styles */
.slider-container {
    position: relative;
    width: 80%;
    margin: auto;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 1.0s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.slide img {
    width: 100%;
    height: 300px; /* Adjust height as per your requirement */
    object-fit: cover; /* Ensures that the image maintains aspect ratio and covers the area */
    border-radius: 8px; /* Optional, if you want rounded corners */
    margin-bottom: 10px; /* Space below the image */
}


button {
    position: absolute;
    top: 50%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 18px;
    transform: translateY(-50%);
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

a {
    text-decoration: none;
    color: inherit;
}


#partners {
    background-color:black; /* Dark Navy Background */
   /* padding: 50px 50px;*/
    text-align:left;
    font-size: 30px;
}

#partners h2 {
    color:#FFFFFF;
    font-size: 30px;
     /* Light Blue Text */
}

/* Partners Box with Light Border */
.partners-box {
    background-color:black; /* Dark Navy Background */
    padding: 20px;
    border: 2px solid #ffffff; /* Light-colored border */
    border-radius: 10px; /* Rounded corners for a softer look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Slight shadow for depth */
}

/* Container for logos */
/*.partners-container {
    width: 100%;
    overflow: hidden; /* Hides logos that are out of the container's view */
   /* margin-top: 20px;
}

/* Scrollable area for logos 
.partners-logos {
    display: flex;
    animation: scroll-left 30s linear infinite;
    overflow: hidden; /* Hide any overflow */
   /* position: relative; /* Adjust animation speed for smooth scroll */


/*updated */

.partners-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* Space between partners */
    padding: 20px;
}

.partner {
    text-align: center;
    width: 150px; /* Width for each partner image container */
}

.partners-container img {
    height: 80px; /* Image height */
    object-fit: contain;
    margin-bottom: 10px; /* Space between image and text */
}

.partner-info {
    font-size:20px;
    color:#FFFFFF;
    text-align: center;
    margin-top: 5px; 
    /* Add top margin for better spacing */
}

.partner-info .partner-name {
    font-weight: bold;
}

.partner-info .partner-location {
    font-style: italic;
}


/* Overall styling for the team section */
.team-section {
    margin-bottom: 40px;
    text-align: left;
    color:#777;
}
.team-section ,h2{
    padding-top:200px;

}
#ourteam h1{
    font-size:25px;
    font:lighter;
    font-family:"Quantico", sans-serif;
    text-align: left;
}
.team-row {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap:150px; /* Space between images */
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
.centered-team-row {
    display: flex;
    justify-content: center; /* Center these items */
    gap: 200px; /* Larger gap between President and Vice President */
    margin-bottom: 40px; /* Add extra space below */
}

.team-member {
    text-align: center;
    justify-content: center;
}

.team-member img {
    width: 150px; /* Adjust size as needed */
    height: 200px; /* Maintain rectangular box shape */
    object-fit: cover; /* Ensures images fill the rectangle */
    margin-bottom: 10px;
    justify-content: center;
    gap: 150px; /* Space between image and name */
}

.team-member h3 {
    font-family:"Quantico", sans-serif;
    font-size: 1.2em;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    margin: 5px 0;
}

.team-member p {
    font-size: 1em;
    color: #777;
    justify-content: center;
    margin: 5px 0;
}

 /* Dark Navy Background */

/*gallery part*/
#gallery {
  text-align: left; 
  color:  #00a8e8;
  padding-top: 30px;
  font-size: 30px;

}
/* Gallery Section Styles */

#gallery h2 {
    font-size: 30px;
    color:#FFFFFF;
    text-align:left;
    margin-bottom: 50px;
}

/* Gallery Grid Styles */
.gallery {
    display:flex;
    /*gap: 10px;*/
   /* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
   /* grid-auto-rows: 180px;*/
}

/* Image Styles */
.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px; /* Optional: Rounded corners */
    transition: transform 0.3s ease; /* Optional: Hover effect */
}

.gallery img:hover {
    transform: scale(1.05); /* Optional: Slight zoom on hover */
}

h3 {
    color: #85d1ef; 
    text-align: left;/* Light Blue for Section Titles */
}


/*influencers part */
/* INFLUENZA Section */
#influenza {
    margin-top: 40px;
    text-align: center;
}

#influenza h2 {
    font-size:30px;
    color:#FFFFFF;
    text-align: left;
}

#influenza p {
    font-size: 16px;
    color:#FFFFFF;
    margin: 10px 0 30px;
    text-align: left;
}

/* Influencers Grid */
.influencers-grid {
    display:flex;
    grid-template-columns: repeat(2, 2fr);
    gap: 280px;
    justify-content: center;
    align-items:center;
}

/* Influencer Card */
.influencer-card {
    text-align: center;
    justify-content: center;
    max-width: 200px;
    width: 180px;
}

.influencer-image {
    width: 100%;
    height: auto; /*200*/
    object-fit: cover;
    margin-right: 10px;
    border-radius: 8px;
    padding-right: 5px;
    justify-content: center;

}

.influencer-card h3 {
   
    font-size: 20px; /* Adjust font size if necessary */
    color:#FFFFFF;
    white-space: nowrap; /* Prevents text from wrapping to the next line *//* Hides overflow if text is too long */
    text-overflow: ellipsis; /* Adds "..." if the text overflows */
    max-width: 100%; /* Ensures the text does not exceed container width */
    justify-content: center;
    text-align: center;
}




/*hackathons in event */
#hackathons {
    padding: 40px 20px;
    color:#FFFFFF;
    text-align: left;
}

#hackathons h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color:#FFFFFF;
}

.hackathon-list {
    display: flex;
    flex-direction:row;
    gap: 20px;
}

.hackathon-item {
    display: flex;
    align-items: center;
    object-fit: cover;
    justify-content: center;
    gap: 15px; /* Space between image and name */
}

.hackathon-item img {
    width: 100px; /* Adjust size as needed */
    height: 100px;
    object-fit: cover;
    border-radius: 90%;
 /* Optional: rounded corners */
    cursor: pointer;
}

.hackathon-item p {
    font-size: 18px;
    color:#FFFFFF;
    margin: 0;
}

/*hackathon.html part */

/* Hackathon Section Styling */
.hackathon-section {
    padding: 20px;
}

.hackathon-heading h2 {
    text-align: left;
    font-size: 2em;
    color:#7b76767c;
    margin-top: 10px;
    padding-top: 10px;
}
.hackathon-heading {
    font-size: 36px;           /* Set font size */
    color:#FFFFFF;            /* Dark blue color */
    text-align:left;       /* Center align the text */
    margin-top: 1px;          /* Add space above the heading */
    font-family:"raleway"; 
    padding-top: 10px; /* Choose a font */
}



.hackathon-description {
    font-size: 1.1em;
    margin-bottom: 20px;
    color:#B2BEB5 ;
    padding-top: 20px;
    font-family:"Quantico", sans-serif;
    text-align: left;
}

/* Image and Exam Link Styling */
.hackathon-images {
    display: flex;
    gap: 50px;
    margin-bottom: 20px;
}

.image-item {
    text-align: center;
}

.image-item img {
    width: 100%;
    max-width: 200px;
    border-radius: 5px;
    
}
.hackathon-images .image-item img {
    width: 100%; /* Adjust percentage as needed */
    max-width: 400px; /* Limits the maximum width */
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
}


.exam-link {
    display: block;
    margin-top: 10px;
    color: #24a4f4;
    text-decoration: none;
}

.exam-link:hover {
    text-decoration: underline;
}

/* Resource Links Styling */
.resources h2 {
    font-size: 1.5em;
    margin-top: 30px;
    color:#797777;
    text-align: left;
}

.resources ul {
    list-style-type: none;
    padding: 0;
}

.resources li a {
    color: #6051b8;
    text-decoration: none;
}

.resources li a:hover {
    text-decoration: underline;
}

/*hackathons-part in that button */
/* Button styling */
.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff; /* Button color */
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    transition: 0.3s;
    animation: blink 1s infinite; /* Blinking effect */
}

/* Hover effect */
.button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Blinking animation */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/*contact part*/
/* Contact Section Styles */
.contact-section {
    background-color:#FFFFFF; /* Light grey background */
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    font-family:"Quantico";
}

.email-section {
    text-align: left;
    margin-bottom: 20px;
}

.mail-us {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
    color: #000;
    text-align: left;
}

.email-address {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    text-align:left;
    color: #000;

}

.underline {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #000;
    margin: 5px 0;
}
.underline-1{
    width: 100%;
    border: 0;
    border-bottom: 1px solid #FFFFFF;
    margin: 5px 0;
}

.contact-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    color: #000;

}

.contact-card {
    flex: 1;
    min-width: 200px;
    padding: 10px;
    color: #000;
}
.contact-card,p{
    color:black;
}

.name {
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    color: #000;
    text-transform: uppercase;
}

.position {
    font-style: italic;
    font-size: 12px;
    color: #000;
    margin: 5px 0 0;
}

.phone {
    font-size: 12px;
    margin: 5px 0 0;
    color: #000;
}


.team-member img {
    border-radius: 10%;
    transition: transform 0.3s ease, filter 0.4s ease, box-shadow 0.4s ease;
}

.team-member img:hover {
    transform: scale(1.15);
    filter: brightness(1.0);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.6);
}
   

  
/* Universal Image Hover Effect */
/* Basic styling for all images */
img {
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; /* Smooth transition for effects */
}

/* Scale-up effect */
img:hover {
    transform: scale(1.1); /* Scale up the image slightly */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
    filter: brightness(1); /* Increase brightness on hover */
}

/* Navbar Logo Hover */
.logo {
    transition: transform 0.5s ease, box-shadow 0.4s ease;
}

.logo:hover {
    transform: scale(1.2);
    box-shadow: 0px 10px 30px rgba(255, 105, 180, 0.5);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.25);
    }
}
/* Hackathon Image Hover */
.hackathon-image {
    transition: transform 0.4s ease, box-shadow 0.5s ease-in-out;
}

.hackathon-image:hover {
    transform: scale(1.1) translateY(-10px);
    box-shadow: 0px 0px 20px 5px rgba(0, 255, 127, 0.6);
}


.influencer-image {
    position: relative;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    border-radius: 5%;
    border: 2px solid transparent;
   
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.influencer-image:hover {
    transform: rotateX(0deg) rotateY(0deg);

}

/*home-what'shapening"*/

/* What's New Section Styling */
.section {
    padding: 40px;
    text-align:left; /* Center text by default */
    background-color: black /* Optional background color */
}

.section-title {
    font-size: 2em;
    margin-bottom: 20px;
    text-align:left;
    padding-left: 20px;
    font-family: "raleway";
}

.section-description {
    text-align: left; /* Left-align the paragraph */
    font-size: 1.1em;
    font-family:"Quantico" ;
    line-height: 1.6;
    max-width: auto;
    color:#FFFFFF;
    padding-left: 20px;
    padding-right: 20px; /* Width limit for easier readability */
}
.section-title,
.section-description {
    text-align: left;
    margin-left: 0; /* Ensures it starts from the left */
}

.devigo-section {
    text-align: center;
}

.devigo-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.devigo-info{
    color: #FFFFFF;
}

/*influencers meet in home page */
/*.section {
    padding: 40px;
    text-align: center;
}

.section-title {
    font-size: 2em;
    margin-bottom: 20px;
}

.infl {
    display: flex;
    justify-content: space-around; /* Spacing between items */
    /*flex-wrap: wrap; /* Ensures images fit on smaller screens */
    /*gap: 20px; /* Space between images 
    padding: 20px 0;
}

.influ-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 21%; /* Makes four items fit in a row 
}

.influ-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.influ-name {
    margin-top: 10px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}*/


/*infulcer meet:-*/
.section {
    text-align: center;
    padding: 20px;
}

.section-title {
    font-size: 28px;
    margin-bottom: 20px;
}

.infl {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.influ-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    min-height: 350px;
    padding: 10px;
    /*box-sizing: border-box;
     /* Optional: to visually separate cards */
    border-radius: 8px;
}

.influ-image {
    width: 100%;
    height: 250px; /* Ensures consistent height for all images */
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.influ-name {
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    margin-top: 10px;
}

/* Optional: Style for the horizontal line */
.underline-1 {
    border: none;
    height: 2px;
    background-color: #ccc;
    margin-top: 20px;
}

 

/* devigo partners section*/
#devigo-partners {
    padding: 20px;
}
#devigo-partners,h2 {
    text-align: left;
}
#devigo-partners ,p{
    color: #FFFFFF;
}


.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px;
    margin-top: 20px;
}

.partner-card {
    text-align: center;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background-color: #000;
}

.partner-image {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.partner-card h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 10px;
}

.partner-position {
    font-size: 1rem;
    color: #555;
}

/* poster img in event page */
/* Poster Section */
#poster {
    position: relative;
    width: 100%;
    height: 400px; /* Adjust height as needed */
    background-image: url('./img/poster.jpg'); /* Replace with your actual image path */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.poster-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-family: Arial, sans-serif;
}

.poster-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.poster-description {
    font-size: 18px;
    font-style: italic;
}

/*about us-college*/

.team-member img {
    width: 150px; /* Adjust size as needed */
    height: 200px; /* Maintain rectangular box shape */
    object-fit: cover; /* Ensures images fill the rectangle */
    margin-bottom: 10px;
    justify-content: center;
    gap: 150px; /* Space between image and name */
}
.team-section,h2{
    padding-top: 20px;
}
.College , h3,p{
    text-align: center;
    justify-content: center;
}
.College ,p{
    color:#777;
}
.College,h3{
    color:#FFFFFF;
    padding-top: 20px;
}
.College img{
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10%;
    transition: transform 0.3s ease, filter 0.4s ease, box-shadow 0.4s ease;
}


.College img:hover {
    transform: scale(1.15);
    filter: brightness(1.0);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.6);
}

/*about -us*/
/* Hero Section */
.hero {
    background: url('./img/hero-bg.jpg') no-repeat center center/cover;
    color: #fff;
    padding: 4em 2em;
    text-align: center;
}

.hero-content h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

.hero-content p {
    margin-bottom: 1.5em;
    color: #B2BEB5;
}

.btn {
    background-color: #f0a500;
    color: #fff;
    padding: 0.5em 1.5em;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    
}

.btn:hover {
    background-color: #e08900;
}

/* About Us Section */
.about {
    padding: 20px;
    width: 100%; /* Adjusts the width of the section to cover only the left side of the page */
    margin: 0; /* Removes auto-centering to align to the left */
    text-align:center; 
    justify-content: center;/* Ensures text is aligned left */
}

.about h2 {
    font-size: 2em;
    color:#FFFFFF;
    margin-bottom: 10px;
}

.about p {
    font-size: 1.1em;
    line-height: 1.6;
    color:#B2BEB5 ;
    margin-bottom: 20px;
    text-align: left;
   
}
.about p b {
    font-weight: 900; /* Makes the text very bold */
    font-size: 1.2em; /* Slightly increases the font size */
    color:#B2BEB5; /* Optionally, you can change the color to make it stand out */
}


.about .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f0a500;
    color:#FFFFFF;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  
    margin: 10px 0;
}

.about .btn:hover {
    background-color:#e08900;
}
/*.center-btn-container {
   /* text-align: center; /* Center the container for "Our Community" 
}


/* Events Section */
.events {
    padding: 2em;
    text-align: center;
}

.events h2 {
    font-size: 2em;
    margin-bottom: 1em;
}

.event-list {
    display: flex;
    justify-content: center;
    gap: 2.5em;
    flex-wrap: wrap;
}

.event-item {
    width: 350px;
    text-align: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding-bottom:40px;
}
.event-item,h3{
    padding-top: 10px;
}
.event-item,p{
    color: #B2BEB5;
}

.event-item img {
    width: 40%;
    padding-top: 20px;
    height: 60%;
    border-radius: 10px;
    justify-content: center;
    justify-items: center;
}

/* Footer Section */
.footer {
    background-color:#000;
    color: #fff;
    padding: 2em;
    text-align: center;
}

.footer-logo {
    width: 50px;
    margin-bottom: 1em;
}

.social-links {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-links img {
    width: 35px;
    transition: transform 0.3s;
}

.social-links img:hover {
    transform: scale(1.1);
}


/*Achivements code*/
.achievements {
    text-align: center;
    padding: 20px;
    padding-top: 10px;
}

.achievements h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #FFFFFF;

}
.achievements p{
    color: #FFFFFF;
    font-family: "Quantico";
}

.department-section {
    margin: 20px 0;
    text-align: left;
}

.department-section h3 {
    font-size: 24px;
    color:#FFFFFF;
    margin-bottom: 10px;
}

.achievement-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 10px 0;
    padding: 15px;
    border-radius: 8px;
    background-color:#000;
}

.achievement-description {
    flex: 1;
}

.achievement-description h4 {
    font-size: 20px;
    color:#c4dbc5b0;
    margin-bottom: 5px;
}

.achievement-description p {
    margin: 5px 0;
    font-size: 16px;
    color:#FFFFFF;
    justify-content: center;
    text-align: left;
    font-family:"Quantico";
}

.achievement-image img {
    max-width: 250px;
    border-radius: 8px;
}


/*Poster image */
/* Style for the fixed section */
/* Style for the section */
#event-display {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color:#000; /* Optional background color for section */
    border: 1px solid #000;
    width: fit-content;        /* Section width based on content */
    margin: 0 auto;            /* Center align section horizontally */
}

/* Style for the event image */
.event-image {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 90%;
    height:auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}
.event-image-1{
    padding-left: 50px;
    padding-right: 50px;
    max-width: 100%;
    height:auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
/*about us logo */
.footer-logo-1{
    height:2%;
    width: 10%;
}

/* Hover effect for the image */
.event-image:hover {
    transform: scale(1.05);        /* Slightly enlarge the image on hover */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow on hover */
}
.event-poster {
    max-width: fit-content;
    max-height: fit-content;
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    justify-content: center;
    width: 700px;
    border: 1px solid #ddd;
    border-radius: 8px;
   
}

/*poster in event */
.our-poster-section {
    text-align: center;
    margin-top: 20px;
  }
  
  .our-poster-section h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color:#FFFFFF; 
    padding-bottom: 40px;
    padding-left: 30px;/* Customize the color as needed */
  }
  
  .our-poster-section img {
    width: 100%;
    max-width: 1050px; /* Limit the max-width */
    height: auto;
    border-radius: 8px; /* Optional: for rounded corners */
  }
  
/* hackathon -resource link */
.hackathon-images h4 a {
    text-decoration:underline;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff; /* Adjust this to your preferred color */
}

.hackathon-images h4 a::after {
    content: "↗";
    font-size: 16px;
    position: absolute;
    top: 0;
    right: -15px;
    color: #ffffff; /* Adjust this to your preferred color */
}

.hackathon-images h4 a:hover {
    text-decoration: underline;
}
/*join-us*/
.join-us{
    color:#FFFFFF;
}

/*register-now*/
/* Center the button container */


.button-container {
    text-align: center;
}

.register-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #4CAF50; /* Green color */
    color: white;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.register-button:hover {
    background-color: #45a049; /* Slightly darker green */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.05); /* Slight zoom effect */
}

.register-button:active {
    transform: scale(0.98); /* Slightly compress on click */
}

/*connect -us */
body {
    font-family:"raleway";
    margin: 0;
    padding: 0;
    background-color:#000;
    padding-top: 100px;
}
.social-media-section {
    text-align: center;
    margin: 20px;
}
.social-media {
    display: inline-block;
    text-align: center;
    margin: 20px;
}
.social-media img {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
    border-radius: 15px;
}
.social-media a {
    text-decoration: none;
    color: #0077b5; /* Default link color (LinkedIn color) */
    font-size: 16px;
}
.social-media a:hover {
    color: #005582; /* Darker hover color */
}
.social-media p {
    margin: 5px 0;
    font-size: 18px;
    color:#FFFFFF;
}

/* know-more button /*

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;    
}                     /* Matches the background from the image */


.button-container-1 {
    position: relative;
    padding-right: 1250px;
    padding-top:17px;
    margin-top: 80px;
}

.know-more-button {
    background-color:rgb(11, 82, 175);
    color:#ffffff;
    font-size: 25px;
    font-family: Arial, sans-serif;
    padding: 10px 20px;
    margin-top: 400px;
    text-align: left;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.know-more-button:hover {
    background-color: #ad41d8;
    transform: scale(1.05);
}

.know-more-button:active {
    transform: scale(0.95);
}