/* Styling for Carousel images */
.carousel-item img {
    width: 100%;
    /*height: 550px;*/ /* Fixed height for consistency, adjust as needed */
    object-fit: cover; /* Ensures images cover the area without distortion */
}
/* 1. Custom Row Background Color (Vibrant Light Teal) */
.bg-light-teal {
    background-color: #E0F7FA; /* Lightest shade of Cyan/Teal */
    background-image: linear-gradient(to right, #E0F7FA, #F5FFFF);
    color: #212529; /* Dark text for readability on light background */
}

/* 2. Attractive Button Styling (Dark Cyan Base) */
.attractive-btn {
    /* Base Style */
    box-shadow: none !important;
    background-color: #008B8B; /* Dark Cyan/Teal */
    border-color: #008B8B;
    color: white; /* White text for contrast */
    /* Retain smooth transition and spring effect */
    transition: all 0.4s cubic-bezier(0.2, 0.5, 0.4, 1.2);
    /* Modern Styling */
    border-radius: 12px;
    font-weight: 600;
    /* Initial subtle shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

    /* 3. The Stunning Hover Animation (Teal Glow) */
    .attractive-btn:hover {
        /* Lift and slightly enlarge the button for a "pop" */
        transform: scale(1.05) translateY(-5px);
        /* Apply a strong GLOW using the button's color and the vibrant Bootstrap teal */
        box-shadow: 0 15px 30px rgba(0, 139, 139, 0.6), /* Strong Dark Cyan primary shadow */
        0 0 0 6px rgba(13, 202, 240, 0.5); /* Vibrant Bootstrap Teal (#0dcaf0) outer ring glow */
        /* Slight color shift on hover for feedback */
        background-color: #00A3A3; /* Slightly lighter on hover */
        border-color: #00A3A3;
    }

    /* 4. Active/Click Feedback */
    .attractive-btn:active {
        /* Push the button down into the surface */
        transform: scale(1.0) translateY(0);
        /* Reduce glow when pressed */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }




/* =================================
           2. PHOTO GALLERY STYLING
           (Responsive & Animated)
           ================================= */

.gallery-section {
    padding: 2rem 0;
    background-color: #ffffff; /* White background for gallery contrast */
}

.gallery-item {
    overflow: hidden; /* Crucial for clipping the image during the zoom effect */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-bottom: 1.5rem; /* Spacing between thumbnails */
    position: relative;
}

.gallery-img {
    width: 100%;
    height: 250px; /* Fixed height for visual uniformity */
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block;
    /* CSP-Compliant Animation Setup */
    transition: transform 0.6s cubic-bezier(0.2, 0.5, 0.4, 1.2), box-shadow 0.6s ease-in-out;
    transform: scale(1.0); /* Initial scale */
}

/* The ANIMATION: Zoom and Colorful Border/Shadow on Hover */
.gallery-item:hover .gallery-img {
    transform: scale(1.08); /* Zoom effect */
    /* Use a cyan/teal glow matching the overall site aesthetic */
    box-shadow: 0 0 0 8px rgba(13, 202, 240, 0.5);
}

/* Optional overlay effect for better visual feedback */
.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 139, 139, 0); /* Dark Cyan overlay */
    transition: background 0.3s ease;
    border-radius: 8px;
}

.gallery-item:hover::after {
    background: rgba(0, 139, 139, 0.1); /* Slight overlay darkening on hover */
}



/* =================================
           3. CTA AND LIST SECTION STYLING
           ================================= */
.cta-list-section {
    padding: 2rem 0;
    background-color: #F5FFFF; /* Very light color for contrast */
}

/* Styles for the two large IMAGE buttons */
.large-image-btn {
    /* Inherit base properties from attractive-btn for consistency */
    background-color: #008B8B; /* Dark Cyan/Teal fill */
    border-color: #008B8B;
    color: transparent; /* Hide text content */
    border-radius: 12px;
    font-weight: 700;
    font-size: 0; /* Ensures no leftover text spacing */
    padding: 0; /* Remove padding */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.2, 0.5, 0.4, 1.2);
    display: block;
    text-decoration: none;
    /* SQUARE DIMENSION AND IMAGE SETUP (Responsive Square Box) */
    width: 200px; /* Take full column width */
    height: 200px;
    position: relative;
    /* Background Image Properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    /* Assign specific placeholder images (VAPT/CSP compliant placeholder URLs) */
    .large-image-btn.btn-image-1 {
        background-image: url('../../images/cybersecurity.jpg');
    }

    .large-image-btn.btn-image-2 {
        background-image: url('../../images/testimonials.jpg');
    }


    .large-image-btn:hover {
        transform: scale(1.03) translateY(-8px); /* More pronounced pop/lift */
        /* Vibrant glow */
        box-shadow: 0 20px 40px rgba(0, 139, 139, 0.7), 0 0 0 8px rgba(13, 202, 240, 0.6);
        background-color: #00A3A3;
        border-color: #00A3A3;
    }

    /* Active/Click Feedback */
    .large-image-btn:active {
        transform: scale(1.0) translateY(0);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

/* Styling for the list of links (right column) */
.styled-link-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
}

    .styled-link-list li a {
        display: block;
        padding: 1rem 1.5rem;
        margin-bottom: 0.5rem;
        background-color: #f1f1f1;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        color: #008B8B; /* Dark Cyan text color */
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .styled-link-list li a:hover {
            background-color: #E0F7FA; /* Light Teal hover background */
            border-color: #0dcaf0; /* Vibrant Cyan border on hover */
            color: #005f5f; /* Slightly darker text */
            transform: translateX(5px); /* Subtle slide animation */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }



/* =================================
           4. IMPORTANT LINKS SECTION STYLING
           ================================= */
.important-links-section {
    padding: 2rem 0;
    background-color: #E0F7FA; /* Light Teal background to match branding */
}

.rounded-image-btn {
    display: block;
    width: 120px; /* Fixed size for the round button */
    height: 120px; /* Fixed size for the round button */
    border-radius: 50%; /* Makes it perfectly round */
    overflow: hidden; /* Ensures image stays within the circle */
    margin: 0 auto 0.5rem auto; /* Center button and add spacing */

    background-size: cover; /* Image covers the button */
    background-position: center; /* Center the image */
    background-repeat: no-repeat;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.2, 0.5, 0.4, 1.2); /* Smooth animation */
    /* No text, so make sure accessibility is handled by aria-label */
    text-decoration: none;
    color: transparent; /* Hide any potential text */
    font-size: 0; /* Remove font sizing */
}

    /* Individual background images for each button (VAPT/CSP compliant) */
    .rounded-image-btn.btn-icon-1 {
        background-image: url('../../images/homebuttonmandatory.png');
    }

    .rounded-image-btn.btn-icon-2 {
        background-image: url('../../images/homebuttonnirf.png');
    }

    .rounded-image-btn.btn-icon-3 {
        background-image: url('../../images/homebuttonnba.jpg');
    }

    .rounded-image-btn.btn-icon-4 {
        background-image: url('../../images/homebuttonnaac.png');
    }

    .rounded-image-btn.btn-icon-5 {
        background-image: url('../../images/homebuttonariia.jpg');
    }

    .rounded-image-btn.btn-icon-6 {
        background-image: url('../../images/homebuttonnep.jpg');
    }

    /* Hover animation for rounded buttons (Pulse & Glow) */
    .rounded-image-btn:hover {
        transform: scale(1.1) translateY(-5px); /* Lift and slightly enlarge */
        box-shadow: 0 10px 20px rgba(0, 139, 139, 0.5), /* Primary shadow */
        0 0 0 6px rgba(13, 202, 240, 0.4); /* Outer glow */
    }

    .rounded-image-btn:active {
        transform: scale(1.0) translateY(0);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

.icon-label {
    display: block;
    margin-top: 0.5rem;
    color: #212529; /* Dark text for readability */
    font-weight: 600;
}

/*This is for IEEE Conference Section*/
/*------------------------------------------------------*/
/* Conference title */
.conference-title {
    color: #0b2f6b; /* darker professional blue */
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.25;
    /* Responsive sizing */
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    /* Animation */
    animation: conferenceGlow 3s ease-in-out infinite alternate;
}

/* Subtle emphasis animation */
@keyframes conferenceGlow {
    from {
        text-shadow: 0 0 0 rgba(11, 47, 107, 0);
    }

    to {
        text-shadow: 0 0 14px rgba(11, 47, 107, 0.35);
    }
}

/* Sponsor buttons */
.sponsor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .sponsor-btn img {
        max-height: 50px;
        max-width: 120px;
    }

    /* Hover effect */
    .sponsor-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

/* CTA button */
.conference-cta {
    padding: 14px 28px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.35);
}