.page-title-banner.py-extra-large {
    padding-top: 3.875rem !important;
    padding-bottom: 3.875rem !important;
}

.page-title-banner {
    /* Ensures good contrast over the background image */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../../images/AIT-Front.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}
.fill-image-width{
    width:100%;
}

.logo-height {
    max-height: 80px;
}
.navbar-color {
    background-color: #09afdf;
}
.nav-center{
    margin:0 auto!important;
}
.fading-line {
    width: 100%; /* Adjust width as needed */
    height: 1px; /* Thickness of the line */
    background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, /* Start transparent */
    rgba(255, 255, 255, 0.8) 25%, /* Fade in to 80% white */
    rgba(255, 255, 255, 1) 50%, /* Fully white in the middle */
    rgba(255, 255, 255, 0.8) 75%, /* Fade out to 80% white */
    rgba(255, 255, 255, 0) 100% /* End transparent */
    );
}

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* Minor adjustment for vertical alignment */
    fill: currentColor;
    display: inline-block;
}



/* Custom CSS for Social Media Icons */

/* 1. Base Container for the Icon */
.social-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Fixed size for the round button */
    height: 40px;
    border-radius: 50%; /* Makes it round */
    background-color: #ffffff; /* Bright white background to stand out */
    color: #212529; /* Dark color for the icon inside */
    transition: all 0.3s ease; /* Transition for all properties */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle lift shadow */
    font-size: 1.25rem; /* Icon size */
}

    /* 2. Hover Animation Effect */
    .social-icon-wrapper:hover {
        /* Pop/Scale effect */
        transform: scale(1.15) rotate(5deg);
        /* Change background to a bright color (like Bootstrap Primary) */
        background-color: #27F5EE;
        /*#0d6efd;*/
        /* Change icon color to white for contrast */
        color: #ffffff;
        box-shadow: 0 6px 12px rgba(13, 110, 253, 0.6); /* Colorized shadow on hover */
    }

    /* Target the icon specifically to ensure color changes */
    .social-icon-wrapper i {
        color: inherit; /* Inherit color from the parent wrapper */
    }

/* Custom CSS to make the image look clickable */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    /* Hover effect for animation */
    .gallery-item:hover {
        transform: scale(1.05);
    }

.gallery-img {
    width: 100%;
    height: 250px; /* Fixed height for visual uniformity */
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block;
}

/* Overlay icon to clearly indicate it's a video */
.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .play-icon-overlay {
    opacity: 1;
}

/* Aspect ratio fix for responsive video inside the modal */
.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    height: 0;
}

    .video-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
.navbar .nav-link {
    color: #fff !important;
}
.header-text-sm {
    font-size: 12px;
    margin-top:3px;

}



.ul-info-links li a {
    color: var(--bs-info) !important;
}

.card-scroll-400 {
    max-height: 400px;
    overflow-y: auto;
}