/**********************TWIRLING BACKROUND**********************/
/* Ensures the div is positioned correctly */
.twirl-bg {
    position: relative;
    overflow: hidden; /* Ensures animation stays inside the div */
    height: 35vh;
}
@media (min-width: 768px) { 
    .twirl-bg {
        height: 100vh;
    }
}

/* Container for the twirling image */
.twirl-image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%; /* Makes the image container 80% of the div */
    height: 80%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Twirling image inside the div */
.twirl-image {
    width: 80%; /* Ensures the image is 80% of the div width */
    max-width: 80%; /* Prevents exceeding the container */
    height: auto; /* Keeps aspect ratio */
    animation: twirl 10s infinite linear;
}

/* Keyframes for smooth background rotation */
@keyframes twirl {
    0% { transform: rotate(0deg); }  
    100% { transform: rotate(360deg); }  
}



/**********************ANNOUNCEMENT BAR**********************/
/* Announcement bar container */
.announcement-bar {
    width: 100%;
    height: 50px; /* Adjust height as needed */
    background: rgba(255, 255, 255, 0.8); /* Faded white background */
    backdrop-filter: blur(5px); /* Optional: Soft blur effect */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Optional: subtle separator */
}

/* Moving text */
.moving-text {
    position: absolute;
    right: -100%;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    animation: moveRightToLeft 20s linear infinite;
}

/* Animation: Moves text from right to left */
@keyframes moveRightToLeft {
    0% {
        right: -100%;
    }
    100% {
        right: 100%;
    }
}

/**********************LABEL**********************/

#tara-basa {
   font-size: 350%;
}

@media (min-width: 768px) { 
    #tara-basa {
        font-size: 600%;
     }
}
