/*=== CSS for Banner === */

.bannertxt {   /*used in marquee banner in main.htm*/
 display:block; height:90;vertical-align:middle;text-decoration: none;
 color:white;
 font: bold 5.5vw Arial;
 }

.bannerbox {
    text-align: center;
    border-bottom: 8px solid orange;
    background-image: url('images/bannerbkgnd.jpg');
    background-repeat: repeat-y;
    margin: 5px 0px 5px 0px;
	background-size: cover; /*fills full width/height, added 15.3.26 as marque banner not full width*/
}
#fade_base {
    background-image: url('images/bannerbkgnd.jpg');
    background-size: 100% 100%;
    background-attachment: scroll;
    white-space: nowrap;
    width: 100%; /* Already correct, respects parent container */
    height: 15vw; /* Kept for responsiveness */
    min-height: 70px;
    max-height: 120px;
    line-height: 15vw; /* Centers text vertically */
    overflow: hidden; /* Kept to hide text during animation */
    border-bottom: 1vw solid orange;
    padding: 1px;
    background-position: center;
    margin: 5px 0px 5px 0px;

    position: relative; /*** Added by grok to ensure .movdiv positioning is relative to #fade_base */
}

.banner {
    display: block;
    width: 100%; /* Changed from 96% to allow full width for text */
    font: bold 4.5vw Arial; /* Reduced from 5vw for better scaling */
    color: white;
    text-decoration: none;
    line-height: 15vw; /* Matches #fade_base for vertical centering */
}

@media screen and (max-width: 670px) {
    .banner {
        font-size: 6.5vw; /* Changed to vw for consistent scaling, was 25px */
        line-height: 15vw; /* Matches #fade_base height */
    }
/* Commented PK 5.9.25 as changes not reqd, can be same as wide screen */
/*    #fade_base {
        height: 17vw; /* Slightly increased for smaller screens */
/*        line-height: 17vw; /* Matches height for centering */
/*        min-height: 60px; /* Adjusted for better mobile display */
/*    }
*/
}

/*== Animation ==*/
.movdiv {
    position: absolute;
    left: 30%; /* changed by pk 100 to 30. 100 will Start at the right edge of the container */
    animation: movetxt 21s infinite;
    animation-timing-function: linear; /* Changed for consistency */
}

.line2 {
    animation-delay: 7s;
    opacity: 0;
}

.line3 {
    animation-delay: 14s;
    opacity: 0;
}

@keyframes movetxt {
    0% {
        left: 30%; /* changed by pk: 100 to 30. 100 will Start at right edge */
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    36% {
        left: -100%; /* Move to left edge, ensuring full text visibility */
        opacity: 0;
    }
    100% {
        left: -100%;
        opacity: 0;
    }
}