.team-details-popup-fade {
    width: 100%;
    height: 103vh;
    background-color: rgba(0, 0, 0, 0.632);
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .team-details-popup-fade .team-details-popup-box {
        width: 55vw;
        height: 100%;
        max-height: 25.9rem;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 17%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 2rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 7px;
        }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar-thumb {
            background-color: var(--pri-color);
        }

.image-details-div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0%;
}

    .image-details-div .left-img-icons {
        width: 32%;
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0%;
        margin-right: 12px;
    }

    .image-details-div .img-and-socialmedia-icons {
        display: flex;
        flex-direction: column;
    }

.social-media-icon-team {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    margin-bottom: 0;
}

    .social-media-icon-team a {
        width: 41px;
        height: 41px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        border: 1px solid var(--pri-color);
        background-color: var(--pri-color);
        color: white;
        border-radius: 8px;
        font-size: 1.1rem;
    }

.twitter-x-team-icon svg {
    width: 19px;
    height: 19px;
    margin-bottom: 0.05rem;
}

    .twitter-x-team-icon svg path {
        fill: white;
    }


.image-details-div .img-cont {
    width: 96%;
    max-width: 20rem;
    height: 18.5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.image-details-div img {
    width: 100%;
    max-width: 20rem;
    height: 100%;
    float: left;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 3rem !important;
    margin-right: 1.5em;
    backdrop-filter: blur(0px) brightness(100%);
}

.image-details-div .right-team-detail-complete {
    width: 65%;
}

    .image-details-div .right-team-detail-complete .team-det {
        font-size: 15px;
        font-weight: 400;
        margin: 0.4rem 0;
    }

        .image-details-div .right-team-detail-complete .team-det:nth-child(1) {
            font-size: 15px;
            font-weight: 400;
            margin: 0rem;
            margin-bottom: 0.4rem;
        }

        .image-details-div .right-team-detail-complete .team-det strong {
            font-size: 17px;
            font-weight: 700;
        }

.team-details-popup-fade .team-details-popup-box {
    margin-top: 0.8rem;
}

    .team-details-popup-fade .team-details-popup-box .right-team-detail-complete p {
        font-size: 15px;
        margin-bottom: 0;
        line-height: 1.5;
    }

.team-detail-close-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    position: absolute;
    top: 17%;
    right: 21.4%;
    z-index: 99999;
    background-color: var(--pri-color);
    border-radius: 100px;
}



@media screen and (max-width:410px) {

    .team-details-popup-fade .team-details-popup-box {
        width: 90%;
        height: 100%;
        max-height: 73vh;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 13%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 1rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 0px;
        }

    .image-details-div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

        .image-details-div .left-img-icons {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .image-details-div .img-and-socialmedia-icons {
            display: flex;
            flex-direction: column;
        }

    .social-media-icon-team {
        display: flex;
        align-items: start;
        position: relative;
        bottom: auto;
        width: 100%;
        justify-content: center;
        margin: 0.8rem 0;
        margin-bottom: 1rem;
    }

        .social-media-icon-team a {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 6px;
            border: 1px solid var(--pri-color);
            background-color: var(--pri-color);
            color: white;
            border-radius: 8px;
            font-size: 1rem;
        }

    .twitter-x-team-icon svg {
        width: 19px;
        height: 19px;
        margin-bottom: 0.05rem;
    }

        .twitter-x-team-icon svg path {
            fill: white;
        }


    .image-details-div .img-cont {
        width: 100%;
        max-width: none;
        height: 100%;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    .image-details-div img {
        width: 100%;
        height: 100%;
        float: left;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 0rem !important;
        margin-right: 0em;
        backdrop-filter: blur(0px) brightness(100%);
    }

    .image-details-div .right-team-detail-complete {
        width: 100%;
    }

    .image-details-div .team-det {
        font-size: 14.6px;
        font-weight: 400;
        margin: 0.2rem 0;
    }

        .image-details-div .team-det strong {
            font-size: 15.8px;
            font-weight: 700;
        }

    .team-details-popup-fade .team-details-popup-box {
        margin-top: 0.8rem;
    }

        .team-details-popup-fade .team-details-popup-box p {
            font-size: 14px;
            margin-bottom: 0;
            line-height: 1.55;
            text-align: justify;
        }



    .team-detail-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        position: absolute;
        top: 12.5%;
        right: 2.4%;
        z-index: 99999;
        background-color: var(--pri-color);
        border-radius: 100px;
    }
}



@media screen and (min-width:410.1px) and (max-width: 510px) {

    .team-details-popup-fade .team-details-popup-box {
        width: 70%;
        height: 100%;
        max-height: 74vh;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 12.5%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 1rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 0px;
        }

    .image-details-div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

        .image-details-div .left-img-icons {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .image-details-div .img-and-socialmedia-icons {
            display: flex;
            flex-direction: column;
        }

    .social-media-icon-team {
        display: flex;
        align-items: start;
        position: relative;
        bottom: auto;
        width: 100%;
        justify-content: center;
        margin: 0.7rem 0;
        margin-bottom: 0.9rem;
    }

        .social-media-icon-team a {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 6px;
            border: 1px solid var(--pri-color);
            background-color: var(--pri-color);
            color: white;
            border-radius: 8px;
            font-size: 1rem;
        }

    .twitter-x-team-icon svg {
        width: 19px;
        height: 19px;
        margin-bottom: 0.05rem;
    }

        .twitter-x-team-icon svg path {
            fill: white;
        }


    .image-details-div .img-cont {
        width: 100%;
        max-width: none;
        height: 100%;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    .image-details-div img {
        width: 100%;
        max-width: none;
        height: 100%;
        float: left;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 0rem !important;
        margin-right: 0em;
        backdrop-filter: blur(0px) brightness(100%);
    }

    .image-details-div .right-team-detail-complete {
        width: 100%;
    }

    .image-details-div .team-det {
        font-size: 14.5px;
        font-weight: 400;
        margin: 0.2rem 0;
    }

        .image-details-div .team-det strong {
            font-size: 15.5px;
            font-weight: 600;
        }

    .team-details-popup-fade .team-details-popup-box {
        margin-top: 0.8rem;
    }

        .team-details-popup-fade .team-details-popup-box p {
            font-size: 14px;
            margin-bottom: 0;
            line-height: 1.55;
            text-align: justify;
        }



    .team-detail-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        position: absolute;
        top: 12.5%;
        right: 12%;
        z-index: 99999;
        background-color: var(--pri-color);
        border-radius: 100px;
    }
}



@media screen and (min-width:510.1px) and (max-width: 590px) {

    .team-details-popup-fade .team-details-popup-box {
        width: 62%;
        height: 100%;
        max-height: 77vh;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 12%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 1rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 0px;
        }

    .image-details-div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

        .image-details-div .left-img-icons {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .image-details-div .img-and-socialmedia-icons {
            display: flex;
            flex-direction: column;
        }

    .social-media-icon-team {
        display: flex;
        align-items: start;
        position: relative;
        bottom: auto;
        width: 100%;
        justify-content: center;
        margin: 0.7rem 0;
        margin-bottom: 0.9rem;
    }

        .social-media-icon-team a {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 6px;
            border: 1px solid var(--pri-color);
            background-color: var(--pri-color);
            color: white;
            border-radius: 8px;
            font-size: 1rem;
        }

    .twitter-x-team-icon svg {
        width: 19px;
        height: 19px;
        margin-bottom: 0.05rem;
    }

        .twitter-x-team-icon svg path {
            fill: white;
        }


    .image-details-div .img-cont {
        width: 100%;
        max-width: none;
        height: 100%;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    .image-details-div img {
        width: 100%;
        height: 100%;
        float: left;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 0rem !important;
        margin-right: 0em;
        backdrop-filter: blur(0px) brightness(100%);
    }

    .image-details-div .right-team-detail-complete {
        width: 100%;
    }

    .image-details-div .team-det {
        font-size: 14.5px;
        font-weight: 400;
        margin: 0.2rem 0;
    }

        .image-details-div .team-det strong {
            font-size: 15.5px;
            font-weight: 600;
        }

    .team-details-popup-fade .team-details-popup-box {
        margin-top: 0.8rem;
    }

        .team-details-popup-fade .team-details-popup-box p {
            font-size: 14px;
            margin-bottom: 0;
            line-height: 1.55;
            text-align: justify;
        }



    .team-detail-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        position: absolute;
        top: 11.5%;
        right: 16%;
        z-index: 99999;
        background-color: var(--pri-color);
        border-radius: 100px;
    }
}




@media screen and (min-width:590.1px) and (max-width: 700px) {

    .team-details-popup-fade .team-details-popup-box {
        width: 94%;
        height: 100%;
        max-height: 22rem;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 21%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 1.2rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 6px;
        }

    .image-details-div {
        width: 100%;
    }

        .image-details-div .left-img-icons {
            width: 35%;
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 0%;
        }

        .image-details-div .img-and-socialmedia-icons {
            display: flex;
            flex-direction: column;
        }

    .social-media-icon-team {
        display: flex;
        align-items: center;
        margin: 1rem 0;
        margin-bottom: 0rem;
    }

        .social-media-icon-team a {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 6.4px;
            border: 1px solid var(--pri-color);
            background-color: var(--pri-color);
            color: white;
            border-radius: 8px;
            font-size: 1rem;
        }

    .twitter-x-team-icon svg {
        width: 17px;
        height: 17px;
        margin-bottom: 0.05rem;
    }

        .twitter-x-team-icon svg path {
            fill: white;
        }


    .image-details-div .img-cont {
        width: 97.5%;
        height: 15.5rem;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    .image-details-div img {
        width: 100%;
        height: 100%;
        float: left;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 3.4rem !important;
        margin-right: 1.2em;
        backdrop-filter: blur(0px) brightness(100%);
    }

    .image-details-div .right-team-detail-complete {
        width: 62%;
    }

    .image-details-div .team-det {
        font-size: 14.5px;
        font-weight: 400;
        margin: 0.2rem 0;
    }

        .image-details-div .team-det strong {
            font-size: 15.5px;
            font-weight: 600;
        }

    .team-details-popup-fade .team-details-popup-box {
        margin-top: 0.8rem;
    }

        .team-details-popup-fade .team-details-popup-box p {
            font-size: 14px;
            margin-bottom: 0;
            line-height: 1.55;
            text-align: justify;
        }



    .team-detail-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        position: absolute;
        top: 21%;
        right: 1.5%;
        z-index: 99999;
        background-color: var(--pri-color);
        border-radius: 100px;
    }
}



@media screen and (min-width:700.1px) and (max-width: 900px) {

    .team-details-popup-fade .team-details-popup-box {
        width: 89%;
        height: 100%;
        max-height: 23rem;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 1.2rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 6px;
        }

    .image-details-div {
        width: 100%;
    }

        .image-details-div .img-and-socialmedia-icons {
            display: flex;
            flex-direction: column;
        }

    .social-media-icon-team {
        display: flex;
        align-items: center;
        margin: 1rem 0;
        margin-bottom: 0rem;
    }

        .social-media-icon-team a {
            width: 37px;
            height: 37px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 7px;
            border: 1px solid var(--pri-color);
            background-color: var(--pri-color);
            color: white;
            border-radius: 8px;
            font-size: 1rem;
        }

    .twitter-x-team-icon svg {
        width: 17px;
        height: 17px;
        margin-bottom: 0.05rem;
    }

        .twitter-x-team-icon svg path {
            fill: white;
        }


    .image-details-div .img-cont {
        width: 97%;
        height: 16rem;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    .image-details-div img {
        width: 100%;
        height: 100%;
        float: left;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 3.4rem !important;
        margin-right: 1.2em;
        backdrop-filter: blur(0px) brightness(100%);
    }

    .image-details-div .team-det {
        font-size: 14.5px;
        font-weight: 400;
        margin: 0.2rem 0;
    }

        .image-details-div .team-det strong {
            font-size: 15.5px;
            font-weight: 600;
        }

    .team-details-popup-fade .team-details-popup-box {
        margin-top: 0.8rem;
    }

        .team-details-popup-fade .team-details-popup-box p {
            font-size: 14px;
            margin-bottom: 0;
            line-height: 1.55;
            text-align: justify;
        }



    .team-detail-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        position: absolute;
        top: 20%;
        right: 4.5%;
        z-index: 99999;
        background-color: var(--pri-color);
        border-radius: 100px;
    }
}




@media screen and (min-width:900.1px) and (max-width: 1200px) {

    .team-details-popup-fade .team-details-popup-box {
        width: 82%;
        height: 100%;
        max-height: 25rem;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 1.2rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 6px;
        }

    .image-details-div {
        width: 100%;
    }

        .image-details-div .img-and-socialmedia-icons {
            display: flex;
            flex-direction: column;
        }

    .social-media-icon-team {
        display: flex;
        align-items: center;
        margin: 1rem 0;
        margin-bottom: 0rem;
    }

        .social-media-icon-team a {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 9.5px;
            border: 1px solid var(--pri-color);
            background-color: var(--pri-color);
            color: white;
            border-radius: 8px;
            font-size: 1.08rem;
        }

    .twitter-x-team-icon svg {
        width: 18px;
        height: 18px;
        margin-bottom: 0.05rem;
    }

        .twitter-x-team-icon svg path {
            fill: white;
        }


    .image-details-div .img-cont {
        width: 96.5%;
        height: 18.5rem;
        max-height: 19rem;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    .image-details-div img {
        width: 100%;
        height: 100%;
        float: left;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 3.4rem !important;
        margin-right: 1.2em;
        backdrop-filter: blur(0px) brightness(100%);
    }

    .image-details-div .team-det {
        font-size: 15px;
        font-weight: 400;
        margin: 0.2rem 0;
    }

        .image-details-div .team-det strong {
            font-size: 16px;
            font-weight: 600;
        }

    .team-details-popup-fade .team-details-popup-box {
        margin-top: 0.8rem;
    }

        .team-details-popup-fade .team-details-popup-box p {
            font-size: 14.5px;
            margin-bottom: 0;
            line-height: 1.55;
            text-align: justify;
        }



    .team-detail-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        position: absolute;
        top: 20%;
        right: 7.5%;
        z-index: 99999;
        background-color: var(--pri-color);
        border-radius: 100px;
    }
}



@media screen and (min-width:1200.1px) and (max-width: 1450px) {

    .team-details-popup-fade .team-details-popup-box {
        width: 72%;
        height: 100%;
        max-height: 26rem;
        overflow-x: hidden;
        background-color: white;
        position: absolute;
        top: 18%;
        left: 50%;
        transform: translate(-50%);
        z-index: 999 !important;
        padding: 1.7rem;
        border-radius: 8px;
    }

        .team-details-popup-fade .team-details-popup-box::-webkit-scrollbar {
            width: 6px;
        }

    .image-details-div {
        width: 100%;
    }

        .image-details-div .img-and-socialmedia-icons {
            display: flex;
            flex-direction: column;
        }

    .social-media-icon-team {
        display: flex;
        align-items: center;
        margin: 1rem 0;
        margin-bottom: 0rem;
    }

        .social-media-icon-team a {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12.8px;
            border: 1px solid var(--pri-color);
            background-color: var(--pri-color);
            color: white;
            border-radius: 8px;
            font-size: 1.08rem;
        }

    .twitter-x-team-icon svg {
        width: 18px;
        height: 18px;
        margin-bottom: 0.05rem;
    }

        .twitter-x-team-icon svg path {
            fill: white;
        }


    .image-details-div .img-cont {
        width: 100%;
        max-width: 16.5rem;
        height: 19rem;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    .image-details-div img {
        width: 100%;
        height: 100%;
        float: left;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 3.4rem !important;
        margin-right: 1.5em;
        backdrop-filter: blur(0px) brightness(100%);
    }

    .image-details-div .team-det {
        font-size: 15px;
        font-weight: 400;
        margin: 0.2rem 0;
    }

        .image-details-div .team-det strong {
            font-size: 16px;
            font-weight: 600;
        }

    .team-details-popup-fade .team-details-popup-box {
        margin-top: 0.8rem;
    }

        .team-details-popup-fade .team-details-popup-box p {
            font-size: 14.5px;
            margin-bottom: 0;
            line-height: 1.55;
            text-align: justify;
        }



    .team-detail-close-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        position: absolute;
        top: 18%;
        right: 13%;
        z-index: 99999;
        background-color: var(--pri-color);
        border-radius: 100px;
    }
}