.title-line-left, .title-line {
    padding-bottom: 50px;
}

.title-line {
    text-align: center;
}
.s-our-team {
    padding: 10px 0;
    position: relative;
    text-align: center;
}
.s-our-team.about-team .team-item {
    margin-top: 20px;
    margin-bottom: 40px;
}
.committee-body {
    margin: 0;
    padding: 0;
    display: flow-root;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

/* Fixed horizontal menu */
.menu {
    width: 100%;
    background-color: #2d3e50;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center !important;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-x: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* Ensure the links are inline */
}

    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* Center the li elements */
        width: 100%;
    }

    .menu li {
        margin-right: 15px;
    }
    /* Menu items */
    .menu a {
        color: #fff !important;
        text-decoration: none;
        padding: 12px 20px;
        display: inline-block;
        font-size: 14px;
        transition: background-color 0.3s ease, opacity 0.3s ease;
        opacity: 1;
        margin-right: 15px;
    }

        /* Hover state of menu items */
        .menu a:hover {
            background-color: #4b596b;
            border-radius: 5px;
        }

        /* Active menu item styling (underline and centered) */
        .menu a.active {
            background-color: #4b596b;
            border-radius: 5px;
            text-decoration: underline;
        }

/* Content area */
.content {
    margin-top: 0; /* Space for fixed menu */
    padding: 20px;
    background-color: #fff;
}

/* Horizontal scroll for menu on mobile */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .menu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        z-index: 1;
        padding: 10px 0;
        background-color: #2d3e50;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        justify-content: flex-start;
    }

        .menu ul {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            justify-content: flex-start;
            margin-left: 20px;
        }

        .menu li {
            flex: 0 0 auto;
        }

        .menu a {
            padding: 12px 20px;
        }

            .menu a:first-child {
                margin-left: 0; /* Keep the first link at the left */
            }

            .menu a.active {
                background-color: #4b596b;
                border-radius: 5px;
                text-decoration: underline;
            }
}
.modal-speaker-imgparent {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensure parent takes full width */
    height: 100%; /* Ensure parent takes full height */
}

.modal-speaker-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.modal-speaker-imgparent::after {
    content: '';
    position: absolute;
    top: 48.5%;
    left: 50%;
    width: 48%;
    height: 100%;
    background: url('../../assets/images/shared/committees/circle2.gif') no-repeat center center;
    background-size: contain;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .modal-speaker-img {
        width: 150px;
        height: 150px;
    }

}

@media (max-width: 480px) {
    .modal-speaker-img {
        width: 120px;
        height: 120px;
    }
}

#active-committees .modal .modal-body > h4 {
    color: var(--color-5);
    margin-top: 2rem;
    text-align: center;
}
#active-committees .modal .modal-body > h6 {
    color: var(--bs-pink);
    font-size: 16px;
    text-align: center;
}
#active-committees .modal .modal-body > ul {
    margin-top: 20px;
    padding: 25px;
    list-style: circle;
    color: var(--bs-pink);
}
    #active-committees .modal .modal-body > ul li::marker {
        color: var(--color-3);
    }
.team-item {
    position: relative;
    display: inline-block; /* Makes sure the image and gif stay aligned */
}
    .team-item img:first-of-type {
        position: relative;
        border-radius: 50%;
        max-height: 150px;
        /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);*/
        z-index: 1;
    }
    /*Pseudo Animation without gif class*/

/*.team-item img {
        position: relative;
        border-radius: 50%;
        object-position: top center;
        z-index: 2;
        display: block;
    }
    .team-item img {
        width: 200px;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top center;
        object-position: top center;
        height: 200px;
        display: block;
        margin: 0 auto;
        border-radius: 50%;
        vertical-align: middle;
        -webkit-transition: .4s ease;
        transition: .4s ease;
    }*/

    .team-item img.gif, .gif {
        position: absolute;
        margin: 0 auto;
        width: 120%; /* Makes the gif size responsive */
        height: 120%; /* Ensures the gif wraps around the image */
        background: url('../../assets/images/shared/committees/circle2.gif') no-repeat center center;
        background-size: contain;
        overflow-clip-margin: unset;
        overflow: hidden;
        /*display: none;*/
        border-radius: 50%;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensure the gif doesn't interfere with other interactions */
        z-index: 0;
    }

        .team-item img.gif.loaded, .gif.loaded {
            opacity: 1; /* Show gif once the image has loaded */
        }

        .team-item img:hover {
            filter: none;
        }

            .team-item img:hover + .gif-wrapper .gif {
                opacity: 1; /* Show gif on hover */
            }
    .team-item .title {
        text-align: center;
    }
    .team-item .prof {
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
        text-align: center;
        color: #747474;
        margin-bottom: 12px;
    }
    .title a {
        color: #151515;
        -webkit-transition: .3s ease;
        transition: .3s ease;
        text-decoration: none;
        padding-top: 15px;
        position: absolute;
        text-align: center;
    }
.team-item .soc-link {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.soc-link {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: none; /*flex*/
    -ms-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    list-style: none;
}
@media (max-width: 767px) {
    .team-item .title {
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 5px;
    }
}

@media (max-width: 991px) {
    .team-item .title {
        font-size: 20px;
    }
}
@media (max-width: 767px) {
    .team-item .prof {
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .team-item .prof {
        font-size: 16px;
    }
}


/* Media Query for larger screens */
@media (min-width: 200px) {

    .team-item img.gif {
        top: -14.5%;
        left: 0%;
        width: 110%;
        height: 90%;
    }
}

@media (min-width: 768px) {

    .team-item img.gif {
        top: -14.5%;
        left: 0%;
        width: 100%;
        height: 92%;
    }
}

@media (min-width: 991px) {

    .team-item img.gif {
        top: -34.5%; /* Keeps gif position relative to larger image */
        left: 0%;
        width: 120%; /* Ensures gif expands with the image */
        height: 120%;
    }
}


/* Media Query for extra-large screens */
@media (min-width: 1200px) {

    .team-item img.gif {
        top: -32%; /* Keeps gif position relative to image */
        left: 0%;
        width: 120%; /* Ensures gif wraps around image properly */
        height: 120%;
    }
}
/*div as gif class*/
@media (max-width: 199px) {
    .gif {
        top: -8.5%;
        left: 6%;
        width: 88%;
        height: 70%;
    }

    .modal-speaker-imgparent::after {
        width: 84.5%;
        height: 140%;
    }
}
@media (min-width: 200px) and (max-width: 480px) {
    .gif {
        top: -9.5%;
        left: 3%;
        width: 93%;
        height: 70%;
    }
    .modal-speaker-imgparent::after {
        width: 123px;
        height: 140%;
        top: 47.5%;
    }
}
    @media (min-width: 481px) and (max-width: 539px) {
        .gif {
            top: -9.5%;
            left: 3%;
            width: 93%;
            height: 70%;
        }

        .modal-speaker-imgparent::after {
            width: 161px;
            height: 140%;
            top: 47.5%;
        }
    }

    @media (min-width: 540px) and (max-width: 574px) {
        .gif {
            top: -9.5%;
            left: 3.5%;
            width: 93%;
            height: 70%;
        }

        .modal-speaker-imgparent::after {
            width: 169px;
            top: 45.5%;
            height: 130%;
        }
    }

    @media (min-width: 575px) and (max-width: 768px) {
        .gif {
            top: -9.5%;
            left: 3.5%;
            width: 93%;
            height: 70%;
        }

        .modal-speaker-imgparent::after {
            width: 161px;
            top: 47.5%;
            height: 130%;
        }
    }

    @media (min-width: 769px) and (max-width: 991px) {
        .gif {
            top: -8.5%;
            left: 27%;
            width: 46%;
            height: 75%;
        }

        .modal-speaker-imgparent::after {
            width: 47.5%;
            top: 47.5%;
            height: 130%;
        }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
        .gif {
            top: -20%;
            left: 35px;
            width: 71%;
            height: 90%;
        }

        .modal-speaker-imgparent::after {
            width: 47.5%;
            top: 47.5%;
            height: 130%;
        }
    }

    @media (min-width: 1200px) and (max-width: 1399px) {
        .gif {
            top: -17.5%;
            left: 21%;
            width: 58%;
            height: 85%;
            z-index: 1;
        }

        .modal-speaker-imgparent::after {
            width: 46.5%;
            top: 47.5%;
            height: 130%;
        }
        .menu ul {
            justify-content: center;
            margin-left: 20px;
        }
    }

    @media (min-width: 1400px) {
        .gif {
            top: -14%;
            left: 24.5%;
            width: 51%;
            height: 85%;
        }

        .modal-speaker-imgparent::after {
            width: 47.5%;
            top: 47.5%;
            height: 130%;
        }
        .menu ul {
            justify-content: center;
            margin-left: 20px;
        }
    }