/* Global CSS Variables for Dynamic Colors */
:root {
    --primary-color: #f39c12;
    /* Color for menu toggle */
    --secondary-color: #2980b9;
    /* Dynamic color used elsewhere */
    --background-color: black;
    /* Navbar background color */
    --text-color: #ecf0f1;
    /* Text color for nav links */
    --hover-color: #e74c3c;
    /* Hover background color for nav links */
    --border-color-gradient: linear-gradient(-45deg, #BA2463 -150%, rgb(58, 16, 68) 50%, #7322FF 250%);
    /* Dynamic border gradient */
    --border-color-hover: #e74c3c;
    /* Border color on hover */
}

/* Universal styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --text-color: #c1c1c1;
    /* Global text color */
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: black;
    /* Solid black background */
    color: var(--text-color);
    /* Global text color */
    margin: 0;
    /* Remove default margin */
    height: 100vh;
    /* Full viewport height */
}

.light {
    position: absolute;
    width: 20vw;
    /* Width of the light based on viewport width */
    height: 20vw;
    /* Height of the light based on viewport width */
    max-width: 300px;
    /* Maximum width */
    max-height: 300px;
    /* Maximum height */
    filter: blur(80px);
    /* Heavy blur effect */
    opacity: 0;
    /* Start invisible */
    animation: flash 7s infinite;
    /* Animation for flashing effect */
}

/* Gradient color definitions for each light */
.light:nth-child(1) {
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.5), rgba(255, 105, 180, 0.5), rgba(0, 0, 128, 0.5));
    /* Mixture of colors */
    top: 10%;
    left: 20%;
    animation-delay: 0s;
    /* No delay for the first */
}

.light:nth-child(2) {
    background: linear-gradient(135deg, rgba(139, 0, 139, 0.5), rgba(255, 165, 0, 0.5), rgba(0, 255, 255, 0.5));
    /* Mixture of colors */
    top: 15%;
    left: 50%;
    animation-delay: 0.5s;
    /* Delay for the second */
}

.light:nth-child(3) {
    background: linear-gradient(135deg, rgba(0, 128, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(255, 20, 147, 0.5));
    /* Mixture of colors */
    top: 10%;
    left: 80%;
    animation-delay: 1s;
    /* Delay for the third */
}

@keyframes flash {

    0%,
    100% {
        opacity: 0;
        /* Start and end invisible */
        transform: translateX(0);
        /* No movement */
    }

    25% {
        opacity: 1;
        /* Fully visible at quarter-point */
        transform: translateX(-5vw);
        /* Move slightly left */
    }

    50% {
        opacity: 1;
        /* Fully visible at mid-point */
        transform: translateX(5vw);
        /* Move slightly right */
    }

    75% {
        opacity: 1;
        /* Fully visible at three-quarter point */
        transform: translateX(-5vw);
        /* Move slightly left */
    }
}


/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .light {
        width: 30vw;
        /* Adjust size for tablets and large phones */
        height: 30vw;
        filter: blur(60px);
    }

    h1 {
        font-size: 6vw;
    }
}

@media (max-width: 480px) {
    .light {
        width: 40vw;
        height: 40vw;
        filter: blur(50px);
    }

    h1 {
        font-size: 8vw;
    }
}

@media (max-width: 360px) {
    .light {
        width: 50vw;
        height: 50vw;
        filter: blur(40px);
    }

    h1 {
        font-size: 10vw;
    }
}


h1 {
    font-size: 5vw;
    /* Responsive font size */
    font-weight: bold;
    z-index: 1;
    /* Make sure text is above lights */
    text-align: center;
    /* Center the text */
}


/* Navbar Styling with Unique Class */
.nav-unique {
    background-color: var(--background-color);
    /* Navbar with solid color */
    border-bottom: 3px solid;
    /* Dynamic gradient border */
    border-image: var(--border-color-gradient) 1;
    /* Gradient border */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;
    height: 60px;
    transition: border 0.3s ease;
}

.nav-unique:hover {
    border-bottom: 3px solid var(--border-color-hover);
    /* Change border color on hover */
}

.nav-unique .logo {
    max-width: 180px;
    max-height: 80px;
}

.nav-unique .logo:hover {
    /* Ensure hover state is the same as the default state */
    max-width: 180px;
    max-height: 80px;
}

/* Nav Links */
.nav-unique .nav-links {
    list-style-type: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-unique .nav-links li a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 8px 12px;
    position: relative;
    transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
}

.nav-unique .nav-links li a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--border-color-gradient);
    /* Dynamic border underline */
    transition: width 0.3s ease;
}

.nav-unique .nav-links li a:hover:before {
    width: 100%;
    /* Expand underline on hover */
}

.nav-unique .nav-links li a:hover {
    color: var(--secondary-color);
    /* Change text color on hover */
    background-color: var(--hover-color);
    /* Background change on hover */
    border-radius: 5px;
}

.nav-unique .dropdown {
    position: relative;
}

/* Dropdown Styling */
.nav-unique .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--background-color);
    display: none;
    flex-direction: column;
    list-style-type: none;
    border: 2px solid var(--border-color-hover);
    /* Dynamic border */
    z-index: 10;
    width: 200px;
}

.nav-unique .dropdown:hover .dropdown-menu,
.nav-unique .dropdown.open .dropdown-menu {
    display: block;
}

.nav-unique .dropdown-menu li a {
    padding: 10px 15px;
    display: block;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-unique .dropdown-menu li a:hover {
    background-color: var(--hover-color);
    color: white;
}

/* Menu Toggle Icon */
.nav-unique .menu-toggle {
    display: none;
    font-size: 2rem;
    color: var(--primary-color);
    cursor: pointer;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .nav-unique .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: var(--background-color);
        width: 100%;
        text-align: right;
        padding: 1rem 0;
        z-index: 1;
    }

    .nav-unique .nav-links.open {
        display: flex;
    }

    .nav-unique .menu-toggle {
        display: block;
    }

    .nav-unique .nav-links li {
        margin-right: 20px;
        padding: 10px;
    }


    .nav-unique .logo {
        max-width: 180px;
        max-height: 80px;
        display: block;
        /* Ensure the image behaves as a block element */
        margin-left: -30px;
    }

    /* Remove hover effects */
    .nav-unique .logo:hover {
        max-width: 180px;
        /* Maintain original size */
        max-height: 80px;
        /* Maintain original size */
    }

    /* Remove shadow and outline on focus or active state */
    .nav-unique:focus,
    .nav-unique:active {
        box-shadow: none;
        /* Remove any box shadow */
        outline: none;
        /* Remove any outline */
    }

    .nav-unique .logo:focus,
    .nav-unique .logo:active {
        box-shadow: none;
        /* Remove any box shadow from the logo */
        outline: none;
        /* Remove any outline from the logo */
    }


}



/* hero section */
/* Main Content */
main {
    flex: 1;
}

/* Hero Section Styles */
.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background: inherit;
    /* Inherit background from body */
    padding: 20px;
    /* Adds some padding for better spacing on mobile */
}

.hero-section .content {
    max-width: 800px;
    width: 100%;
}

/* Animation for Dynamic Text Colors */
@keyframes colorChange {
    0% {
        color: #ff5733;
    }

    /* Vibrant Orange */
    25% {
        color: #33d9b2;
    }

    /* Bright Teal */
    50% {
        color: #9b59b6;
    }

    /* Rich Purple */
    75% {
        color: #310ff1;
    }

    /* Golden Yellow */
    100% {
        color: #e74c3c;
    }

    /* Bright Red */
}


.hero-section h1 {
    animation: colorChange 5s infinite;
    /* 5 seconds per cycle */
    margin: 10px 0;
    font-size: 3.9rem;
    color: #333;
    /* Fallback color */
    font-weight: bold;
}

/* Font styling for each heading */
.hero-section h5 {
    font-size: 1.5rem;
    color: #c1c1c1;
    font-weight: bold;
}

.hero-section h3 {
    margin: 10px 0;
    font-size: 1rem;
    color: #c1c1c1;
    font-weight: bold;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
    gap: 20px;
}

.social-icons li {
    display: inline-block;
}

.social-icons li a {
    color: #c1c1c1;
    /* Icon color */
    font-size: 2rem;
    /* Icon size */
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icons li a:hover {
    color: red;
    /* Hover color */
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .social-icons li a {
        font-size: 1.5rem;
        /* Adjust icon size on smaller screens */
    }
}

/* Responsive styling for smaller screens */
@media (max-width: 778px) {
    .hero-section h5 {
        font-size: 1rem;
        /* Adjusted font size for smaller screens */
        white-space: normal;
        /* Allow wrapping */
        /* font-weight: bold; */
    }

    .hero-section h1 {
        font-size: 1.8rem;
        /* Reduced size for mobile */
        white-space: normal;
        /* Allow wrapping */
        font-weight: bold;
    }

    .hero-section h3 {
        font-size: 0.8rem;
        /* Adjusted font size for smaller screens */
        white-space: normal;
        /* Allow wrapping */
        /* font-weight: bold; */
    }

    .hero-section {
        padding: 10px;
    }

    .hero-section .content {
        padding: 10px;
    }

    .cta-button,
    .contact-button {
        padding: 12px 20px;
        /* Adjust button padding for smaller screens */
        font-size: 0.9rem;
        /* Adjust button font size */
    }

    .contact-button i {
        font-size: 1rem;
        /* Smaller icon for mobile */
    }
}

/* Button Styles */
.cta-button,
.contact-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1rem;
    color: #fff;
    background-color: #f33c79;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    /* Adjusted for better spacing */
    transition: background-color 0.3s;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
    /* Transition for smooth effect */
}

.cta-button:hover {
    background-color: #d81b60;
    /* Hover effect for the button */
}

/* Contact Us Button */
.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: transparent;
    /* Transparent background */
    border: 2px solid transparent;
    /* Initial border state */
    border-radius: 5px;
    padding: 15px 30px;
    font-size: .9rem;
    text-decoration: none;
    margin-top: 20px;
    /* Adjust as needed */
    transition: background-color 0.3s, border-color 0.3s;
    /* Smooth hover effect */
    position: relative;
    overflow: hidden;
}

/* Multi-color border for Contact Us button */
.contact-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 2px;
    padding: 2px;
    /* Border thickness */
    background: linear-gradient(45deg, #ff5733, #0c64e9, #9b59b6, #f10fbc, #e74c3c);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    /* Ensures gradient border doesn't affect button content */
    z-index: -1;
}

/* Hover Effect for Contact Us button */
.contact-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* Light transparent hover effect */
    border-color: transparent;
}

/* Icon Styles */
.contact-button i {
    margin-right: 10px;
    /* Space between icon and text */
    font-size: 1.2rem;
}

/* Ensure icon is visible inside gradient border */
.contact-button i::before {
    content: '\f095';
    /* Example icon: FontAwesome phone icon */
    font-family: "Font Awesome 5 Free";
    /* Use Font Awesome for icons */
    font-weight: 900;
}


/* About us */

/* Section Styles */
.who-are-we {
    background-color: #f8f9fa00;
    /* Light background color */
    padding: 60px 20px;
    /* Add padding for spacing */
    text-align: center;
    /* Center-align text */
}

/* Container for better width control */
.container {
    max-width: 1100px;
    /* Limit the width for better readability */
    margin: 0 auto;
    /* Center the container */
    padding: 20px;
    /* Add internal padding */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

/* Heading Styles */
.who-are-we h1 {
    font-size: 2.5rem;
    /* Large font size */
    color: #c1c1c1;
    /* Dark color for heading */
    margin-bottom: 20px;
    /* Space below heading */
    font-weight: bold;
    /* Bold text */
}

/* Paragraph Styles */
.who-are-we p {
    font-size: 1.2rem;
    /* Slightly larger font size for paragraph */
    color: #c1c1c1;
    /* Gray color for text */
    line-height: 1.6;
    /* Increase line height for better readability */
    margin: 0;
    /* Remove default margin */
}

/* Strong text styles */
.who-are-we strong {
    color: #f33c79;
    /* Highlighted text color */
    font-weight: bold;
    /* Bold text */
}

/* Responsive Styles */
@media (max-width: 768px<section class="what-do-we-do" > <h2 class="section-title" >What Do We Do?</h2> <p class="section-description" > Entrepreneurship Cell IIT Madras makes the entrepreneurial world accessible to all groups of people part of the IIT Madras ecosystem, catering to an audience from startup enthusiasts to hardcore entrepreneurs. We offer a plethora of yearlong events such as Conclaves, Keynotes, Industry-defined Problems,
    B-Planning Competitions, and Workshops, through both personal and collaboration-based approaches. </p> </section>) {
    .who-are-we {
        padding: 40px 15px;
        /* Reduce padding on mobile */
    }

    .who-are-we h1 {
        font-size: 2rem;
        /* Adjust heading size on mobile */
    }

    .who-are-we p {
        font-size: 1rem;
        /* Adjust paragraph size on mobile */
    }
}


/* Vision Section Styles */
.vision-section {
    padding: 40px 20px;
    max-width: 1100px;
    margin: 0 auto;
    background: inherit;
    text-align: center;
    /* Center the title */
}

.vision-content {
    display: flex;
    align-items: stretch;
    /* Stretch columns to be equal height */
    justify-content: space-between;
    gap: 20px;
    /* Adds spacing between image and text */
    position: relative;
}

.vision-image {
    flex: 1;
    display: flex;
    justify-content: center;
    /* Center the image */
    overflow: hidden;
    /* Hide overflow for sliding effect */
    position: relative;
    /* Required for positioning the images */
    margin-top: 5px;
}

.image-slider {
    display: flex;
    /* Allows slides to be in a row */
    transition: transform 0.5s ease-in-out;
    /* Smooth transition */
}

.slide {
    min-width: 100%;
    /* Each slide takes full width */
}

.vision-text {
    flex: 1;
    text-align: justify;
    color: #333333;
    font-size: 1rem;
    /* Decreased text size */
    line-height: 1.4;
    padding-left: 20px;
    /* Spacing between the vertical line and text */
    position: relative;
    /* Positioning for the vertical border */
}

/* Title Style */
.vision-section h2 {
    color: #c1c1c1;
    /* Font color */
    font-size: 2.5rem;
    /* Title size */
    margin-bottom: 20px;
    /* Spacing below the title */
}

.vision-section p {
    color: #c1c1c1;
    margin-top: 1px;
    font-size: 18px;
}

/* Vertical Line Between Image and Text */
.vision-content::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    /* Width of the border line */
    background-color: #ff3df5;
    /* Line color */
    transform: translateX(-50%);
}

.vision-image img {
    width: 100%;
    /* Makes the image responsive */
    height: auto;
    /* Maintains the aspect ratio */
    max-width: 1920px;
    /* Set a max-width for larger screens */
}

/* Responsive Styling */
@media (max-width: 768px) {
    .vision-content {
        flex-direction: column;
        /* Stack image and text on top of each other */
        text-align: center;
        /* Center text on mobile */
    }

    .vision-image {
        margin-bottom: 20px;
        /* Adds spacing below the image on mobile */
    }

    .vision-text {
        font-size: 0.9rem;
        /* Further reduce text size for mobile */
        padding-left: 0;
        /* Remove padding on mobile */
        text-align: justify;

    }

    .vision-content::before {
        display: none;
        /* Remove vertical line on mobile */
    }
}

/* 
why be with us */

/* Why Partner Section Styles */
.why-partner-section {
    padding: 40px 20px;
    max-width: 1100px;
    margin: 0 auto;
    background: inherit;
    text-align: left;
    /* Align text to the left */
}

.why-partner-section h2 {
    font-size: 4rem;
    /* Set size for h2 */
    font-weight: bold;
    /* Make h2 bold */
    color: #4e58c8;
    /* Font color */
    margin-bottom: 20px;
    /* Spacing below the title */
    text-align: left;
}

.why-partner-section h3 {
    font-size: 2.5rem;
    font-weight: bold;
}

.why-partner-section p {
    color: #c1c1c1;
    /* Set paragraph text color */
    line-height: 1.6;
    /* Improve readability */
    margin-bottom: 15px;
    /* Spacing between paragraphs */
}

/* Responsive Styling */
@media (max-width: 768px) {
    .why-partner-section h2 {
        font-size: 3rem;
        /* Adjust h2 size for mobile */
        text-align: left;
    }
}


/* events */
.events {
    padding: 40px 20px;
    background: inherit;
    /* Inherit background from body */
}

h2 {
    font-size: 2.5rem;
    /* Adjust size as needed */
    margin-bottom: 20px;
    text-align: center;
    color: #c1c1c1;
}

.events-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.combined-box {
    display: flex;
    border: 2px solid;
    border-image: linear-gradient(135deg, #ff69b4, #add8e6, #69b4ff);
    /* Dynamic color gradient border */
    border-image-slice: 1;
    border-radius: 8px;
    width: 100%;
    max-width: 1200px;
    /* Adjust based on design */
    background: rgba(255, 255, 255, 0);
    /* Slightly transparent background */
    overflow: hidden;
    /* Hide overflow */
}

.nav-box {
    width: 30%;
    /* Adjust as needed */
    padding: 20px;
    border-right: 2px solid #33333300;
    /* Border to separate navigation and content */
    box-sizing: border-box;
}

.nav-box ul {
    list-style: none;
    padding: 0;
}

.nav-box li {
    margin-bottom: 10px;
}

.nav-box a {
    text-decoration: none;
    color: #c1c1c1;
    font-size: 1.2rem;
}

.nav-box a:hover {
    color: #007BFF;
    /* Hover color */
}

.content-box {
    width: 70%;
    /* Adjust as needed */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.event-content {
    display: none;
    /* Hide all content by default */
}

.event-content h4 {
    font-size: 1.75rem;
    margin-bottom: 10px;
    color: #c1c1c1;
}

.event-content p {
    font-size: 1.1rem;
    color: #c1c1c1;
    line-height: 1.6;
}

/* Show the first content by default */
#powerTalks {
    display: block;
}

/* Responsive styles */
@media (max-width: 768px) {
    .combined-box {
        flex-direction: column;
    }

    .nav-box,
    .content-box {
        width: 100%;
        border-right: none;
        /* Remove border on smaller screens */
        border-bottom: 2px solid #333;
        /* Add border between stacked sections */
    }

    .content-box {
        box-shadow: none;
        /* Remove shadow on smaller screens if needed */
    }
}

/* Event-Gallery */
.Event-Gallery {
    padding: 20px;
    background-color: #ffebf000;
    text-align: center;
}

.Event-Gallery h2 {
    color: #c1c1c1;
    margin-bottom: 20px;
}

.gallery-description {
    margin-bottom: 30px;
    color: #333;
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
    border: 3px solid;
    border-image: linear-gradient(45deg, #BA2463, #7322FF, #000000) 1;
    border-radius: 10px;
}

/* Updated grid layout for 3x3 */
.Event-Gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns */
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.Event-Gallery-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    border: 3px solid transparent;
    /* Default transparent border */
    transition: transform 0.3s, border 0.3s ease;
    /* Smooth transition for transform and border */
}

/* Adjusted image size for smaller 3x3 grid */
.Event-Gallery-item img {
    width: 400px;
    /* Image width */
    height: 400px;
    /* Image height */
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
}

/* Dynamic color border closely fitted to the image */
.Event-Gallery-item:hover {
    border-image: linear-gradient(45deg, #BA2463, #7322FF, #000000) 1;
}

.Event-Gallery-item:hover img {
    transform: scale(1.05);
    /* Slight zoom on hover */
    filter: brightness(0.7);
    /* Darken image slightly */
}

/* Overlay text on hover */
.overlay-text {
    position: absolute;
    top: 90%;
    left: 5%;
    color: white;
    font-size: 0.9rem;
    text-align: left;
    max-width: 90%;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
}

.Event-Gallery-item:hover .overlay-text {
    top: 79%;
    /* Move up slightly */
    opacity: 1;
    /* Fade in */
}

.overlay-text p {
    margin-bottom: 5px;
    line-height: 1.1;
}

/* Register button - always visible */
.register-button {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(45deg, #BA2463, #7322FF);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    opacity: 1;
    /* Button is always visible */
}

/* Stylish button hover effect */
.register-button:hover {
    background: linear-gradient(45deg, #7322FF, #BA2463);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .Event-Gallery-grid {
        grid-template-columns: 1fr;
        /* Single column layout on mobile */
    }

    .Event-Gallery-item {
        width: 100%;
    }

    .overlay-text {
        font-size: 0.8rem;
    }

    .register-button {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

.collaboration-section {
    padding: 20px;
    /* Add padding to the section */
    text-align: center;
    /* Center-align content */
    overflow: hidden;
    /* Prevent overflow */
}

.collaboration-slider {
    width: 100%;
    margin: auto;
    /* Center the slider */
}

.collaboration-slider div {
    display: flex;
    /* Use flex for alignment */
    justify-content: center;
    /* Center logos in each slide */
    align-items: center;
    /* Center logos vertically */
}

.collaboration-slider img {
    width: 100%;
    /* Make images responsive */
    max-width: 100px;
    /* Set a maximum width for logos */
    height: auto;
    /* Maintain aspect ratio */
    margin: 0 10px;
    /* Add spacing between logos */
}


/* Tablet View */
@media (max-width: 768px) {
    .collaboration-slider {
        flex-wrap: wrap;
        /* Ensure logos wrap to new rows on smaller screens */
    }

    .collaboration-slider img {
        max-width: 80px;
        /* Smaller logos on tablet */
    }

    .collaboration-section h2 {
        font-size: 2rem;
    }
}

/* Mobile View */
@media (max-width: 480px) {
    .collaboration-slider {
        flex-wrap: wrap;
        /* Ensure logos wrap to new rows on mobile screens */
    }

    .collaboration-slider img {
        max-width: 60px;
        /* Even smaller logos on mobile */
    }

    .collaboration-section h2 {
        font-size: 2rem;
    }
}

/* initiatives-section  */

.initiatives-section {
    padding: 20px;
    background-color: #ffebf000;
    /* Light pink background */
    text-align: center;
    /* Center-align text */
    margin-top: 40px;
}

.initiatives-section h2 {
    color: #c1c1c1;
    /* Title color */
    margin-bottom: 20px;
    /* Space below the title */
    font-size: 2.5rem;

}

.event-description {
    margin-bottom: 30px;
    /* Space below the description */
    color: #c1c1c1;
    /* Text color for description */
    max-width: 600px;
    /* Max width for better readability */
    margin: 0 auto;
    /* Center the description */
    padding: 15px;
    /* Padding for description */
    border: 3px solid;
    /* Border for description */
    border-image: linear-gradient(45deg, #BA2463, #7322FF, #000000) 1;
    /* Dynamic gradient border */
    border-radius: 10px;
    /* Rounded corners */
}

.initiatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns by default */
    gap: 20px;
    /* Space between squares */
    margin: 0 auto;
    /* Center the grid */
    max-width: 900px;
    /* Max width for the grid */
    margin-top: 20px;
}

.initiative-item {
    width: 200px;
    /* Set fixed width */
    height: 200px;
    /* Set fixed height */
    display: flex;
    /* Use flex for centering content */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Center content vertically */
    cursor: pointer;
    /* Change cursor on hover */
    background: linear-gradient(-45deg, #BA2463 -150%, rgba(0, 0, 0, 0) 50%, #7322FF 250%);
    /* Gradient background */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Box shadow */
    backdrop-filter: blur(11px);
    /* Blur effect */
    text-align: center;
    /* Center-align text */
    border: 3px solid transparent;
    /* Border for initiative items (transparent by default) */
    border-radius: 10px;
    /* Rounded corners */
    transition: transform 0.2s, border 0.2s;
    /* Smooth hover effect */
}

.initiative-item:hover {
    transform: scale(1.05);
    /* Slightly enlarge on hover */
    border-image: linear-gradient(45deg, #BA2463, #7322FF, #000000) 1;
    /* Gradient border on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .initiatives-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on medium devices */
    }
}

@media (max-width: 480px) {
    .initiatives-grid {
        grid-template-columns: 1fr;
        /* 1 column on small devices */
    }

    .initiative-item {
        width: 100%;
        /* Full width for mobile */
        height: 150px;
        /* Adjust height for mobile */
    }
}

/* Gallery */

.gallery-section {
    padding: 20px;
    background-color: #ffebf000;
    /* Light pink background */
    text-align: center;
}

.gallery-section h2 {
    color: #c1c1c1;
    /* Title color */
    margin-bottom: 20px;
}

.gallery-description {
    margin-bottom: 30px;
    color: #333;
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
    border: 3px solid;
    border-image: linear-gradient(45deg, #BA2463, #7322FF, #000000) 1;
    border-radius: 10px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns */
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.gallery-item {
    position: relative;
    /* Make the item the reference point for the text overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(-45deg, #BA2463 -150%, rgba(0, 0, 0, 0) 50%, #7322FF 250%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(11px);
    border: 3px solid transparent;
    border-radius: 10px;
    transition: transform 0.2s, border 0.2s;
    overflow: hidden;
}

.overlay-text2 {
    position: absolute;
    /* Position text relative to the image container */
    top: 85%;
    bottom: 10%;
    /* Position near the bottom of the image */
    left: 3%;
    /* Align text to the left side with some padding */
    color: rgb(255, 255, 255);
    /* White text for contrast */
    font-size: .8rem;
    /* Adjust the font size */
    text-align: left;
    /* Align text to the left */
    max-width: 90%;
    /* Limit text width for better readability */
}

/* Individual paragraphs */
.overlay-text p {
    margin-bottom: 5px;
    /* Add spacing between paragraphs */
    line-height: 1.1;
    /* Decrease line spacing */
}

.gallery-item img {
    width: 100%;
    /* Ensure image scales to fit its container */
    height: auto;
    /* Maintain aspect ratio */
    object-fit: cover;
    /* Cover the space while preserving aspect ratio */
    transition: transform 0.2s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item:hover {
    border-image: linear-gradient(45deg, #BA2463, #7322FF, #000000) 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        /* Single column layout on mobile */
    }

    .gallery-item {
        width: 100%;
        /* Full width on mobile */
    }

    .overlay-text {
        position: absolute;
        /* Position text relative to the image container */
        top: 75%;
        bottom: 10%;
        /* Position near the bottom of the image */
        left: 3%;
        /* Align text to the left side with some padding */
        color: rgb(255, 255, 255);
        /* White text for contrast */
        font-size: .8rem;
        /* Adjust the font size */
        text-align: left;
        /* Align text to the left */
        max-width: 90%;
        /* Limit text width for better readability */

    }
}

/* contactform */

.contact-form {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f9f9f900;
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(11px);
}

.contact-form h2 {
    text-align: center;
    color: #c1c1c1;
}

.form-group {
    margin-bottom: 15px;
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #c1c1c1;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: purple;
    /* Dynamic border color */
}

.form-group input.error,
.form-group textarea.error {
    border-color: red;
}

.form-group label {
    font-size: 14px;
    color: #c1c1c1;
}

.form-group .error-message {
    color: red;
    font-size: 12px;
    position: absolute;
    bottom: -20px;
    left: 0;
}

button[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #c1c1c1;
    color: #000;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: purple;
    /* Dynamic hover color */
}

/* Responsive design */
@media (max-width: 768px) {
    .contact-form {
        max-width: 90%;
        /* Reduce width on smaller screens */
        padding: 15px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 14px;
        /* Reduce font size for smaller screens */
        padding: 8px;
    }

    button[type="submit"] {
        font-size: 16px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .contact-form {
        max-width: 95%;
        /* Even more compact on very small screens */
        padding: 10px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 12px;
        /* Further reduce font size */
        padding: 6px;
    }

    button[type="submit"] {
        font-size: 14px;
        padding: 6px;
    }
}

/* footer */

/* Ensure the footer is fixed at the bottom */
html,
body {
    height: 100%;
    /* Ensure body takes full height */
}

body {
    display: flex;
    flex-direction: column;
    /* Stack header, main, footer vertically */
}

main {
    flex: 1;
    /* Allow main content to grow and push footer down */
}

footer {
    background-color: #1a1a1a;
    /* Dark background for the footer */
    color: white;
    /* Text color for the footer */
    padding: 20px;
    /* Padding around the footer */
    text-align: center;
    /* Centering text and content */
    font-size: 1.1rem;
    /* Increased text size */
    position: relative;
    /* Position footer relative */
    bottom: 0;
    /* Align to the bottom */
    width: 100%;
    /* Full width */
}

.footer-content {
    display: flex;
    justify-content: space-around;
    /* Space out sections */
    flex-wrap: wrap;
    /* Wrap sections on small screens */
}

.footer-section {
    margin: 10px;
    /* Margin around each section */
}

footer a {
    color: #a29bfe;
    /* Soft purple */
    text-decoration: none;
}

footer a:hover {
    color: #6c5ce7;
    /* Darker purple on hover */
}

.footer-section h3 {
    margin-bottom: 10px;
    /* Space below section headings */
    font-size: 1.3rem;
    /* Increased size for section headers */
}

.footer-section ul {
    list-style: none;
    /* Remove bullets */
    padding: 0;
    /* Remove padding */
}

.footer-section ul li {
    margin: 5px 0;
    /* Space between items */
}

.footer-section ul li a {
    color: white;
    /* Color for links */
    text-decoration: none;
    /* Remove underline from links */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    /* Transition for hover effect */
    font-size: 1.1rem;
    /* Increased font size for links */
}


.footer-section ul li a:hover {
    color: #f39c12;
    /* Change color on hover */
    text-shadow: 0 0 5px #f39c12;
    /* Add glow effect on hover */
}

.footer-section.social-media ul {
    display: flex;
    /* Display icons in a row */
    justify-content: center;
    /* Center the icons */
    padding: 0;
    /* Remove padding */
}

.footer-section.social-media ul li {
    margin: 0 10px;
    /* Space between icons */
}

.footer-section.social-media ul li a {
    font-size: 24px;
    /* Size of the icons */
    color: white;
    /* Color for icons */
    transition: color 0.3s ease;
    /* Transition for hover effect */
}

.footer-section.social-media ul li a:hover {
    color: #f39c12;
    /* Change icon color on hover */
}