.text-banner {
    position: absolute;
    top: 60%;
    transform: translateY(20px); /* Start slightly below the position */
    opacity: 0; /* Start fully transparent */
    transition: opacity 0.4s ease, transform 0.4s ease; /* Animation properties */
    padding: 20px;
    background-color: rgba(6, 22, 33, 0.7);
    color: white;ue
    white-space: nowrap;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

.spotlight-text-question, .spotlight-text-answer{
    font-family: "Catemaran", sans-serif;
    font-size: 1.2em;
}

.text-banner.active {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Slide up to final position */
}


.spotlight-text-name{
    font-size: 1.3em !important;
   color: rgb(255, 224, 174);  
   text-align: center; 
}

.spotlight-mobile-block{                                
    display: flex;
    justify-content: center;
    align-items: center;
}

.spotlight-mobile-block{
    color: white;
    font-family: "Catemaran", sans-serif;
    font-size: 1.3em !important;
}

.spotlight-mobile-text{
    width: 55% !important;
    hyphens: auto;
    margin: 10px;
    hyphens: auto;
    line-height: 0.7em;
}

.spotlight-mobile-name{
    font-size: 1.0em !important;
    font-family: "Bebas Neue", sans-serif;
}

.spotlight-mobile-question{
    font-size: .8em;
}

.spotlight-mobile-answer{
    font-size: .8em;
}

.spotlight-mobile-photo{
    width: 55%;
}


/* Positioning banners for left and right sides */
#banner-1 {
    left: 2vw;
}

#banner-2 {
    left: 10vw;
}

#banner-3 {
    right: +20vw; /* Positioned off-screen on the right */
}

#banner-4 {
    right: +2vw; /* Positioned off-screen on the right */
}




#spotlight{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0 !important;
    transition: 1s;
    background-color: var(--main-color-darkest);
}

#spotlight-photo {
    position: relative;
    width: 80%;
}

#spotlight-photo img {
    width: 100%;
    object-fit: contain;
    cursor: pointer;
}

#spotlight-illumination-container{
    position: relative;
    overflow: hidden;
    height: 500px;
}

#spotlight-illumination-container img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#spotlight-person-illu-1,#spotlight-person-illu-2,#spotlight-person-illu-3,#spotlight-person-illu-4{
    opacity: 0;
    transition: .5s ease;
}


#spotlight-no-illu{
    filter: brightness(0.35);
}

.spotlight-illu{
    filter: contrast(1.2) brightness(1.0) drop-shadow(0px 00px 20px white);
}





/* New CSS) */


.spotlight-section{
    color: white;
}

.spotlight-mobile-item{
    margin: 200px 0;
    opacity: 0;
    transition: .5s ease;
}

.spotlight-mobile-item.active{
    opacity: 1;
}


#mobile-spotlight-title-holder{
    /* Fix this at the top even if scrolling, as long as in parent container */
    top: 0;
    z-index: 100;
    opacity: 0.0;
    transition: .5s ease;
}

#mobile-spotlight-container{
    text-align: center;
}

#mobile-spotlight-title-holder-holder{
    height: 100px;
}

.spotlight-mobile-info{
    color: white;
    font-family: "Catemaran", sans-serif;
    font-size: 1.2em;
    margin: 10px;
}

.spotlight-mobile-name{
    color: var(--main-color-lightest) !important;
}

.spotlight-mobile-qa-div{
    padding: 15px;
    margin: 10px;
}

.spotlight-mobile-question-div{
    text-align: left;
}

.spotlight-mobile-answer-div{
    text-align: right;
}