/* =========================================================
   PUBLIC ANNOUNCEMENTS
   ========================================================= */

.public-announcements {
    position: relative;

    display: flex;

    align-items: center;

    gap: 0;

    min-height: 54px;

    padding: 0 7%;

    background: #000b2f;

    border-top: 1px solid rgba(255,255,255,.06);

    border-bottom: 1px solid rgba(255,255,255,.06);

    overflow: hidden;
}


/* LABEL */

.announcement-label {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 145px;

    padding: 15px 18px;

    background: #eef916;

    color: #270089;

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.announcement-label i {
    font-size: 16px;
}


/* WINDOW */

.announcement-window {
    position: relative;

    flex: 1;

    min-width: 0;

    overflow: hidden;

    padding: 0 18px;
}


/* TICKER */

.announcement-ticker {
    display: inline-flex;
    align-items: center;
    gap: 45px;

    width: max-content;
    min-width: 100%;

    min-height: 54px;

    padding-left: 25px;
    padding-right: 25px;

    color: #ffffff;

    white-space: nowrap;

   
}


.public-announcements:hover
.announcement-ticker {
    animation-play-state: paused;
}


.announcement-item {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #e5e7eb;

    font-size: 16px;

    font-weight: 600;
}


.announcement-item strong {
    color: #FDBA21;

    font-weight: 800;
}


.announcement-item .announcement-dot {
    color: #F97316;

    font-size: 10px;
}


/* CONTROLS */

.announcement-controls {
    display: flex;

    align-items: center;

    gap: 5px;

    padding-left: 8px;
}


.announcement-controls button {
    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #334765;

    border-radius: 50%;

    background: #1d2a40;

    color: #fff;

    cursor: pointer;

    transition: .2s;
}


.announcement-controls button:hover {
    background: #F97316;

    border-color: #F97316;
}


/* LOADING */

.announcement-loading {
    color: #94a3b8;

    font-size: 12px;
}


/* EMPTY */

.announcement-empty {
    color: #8191a8;

    font-size: 12px;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes announcementScroll {

    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .public-announcements {
        padding: 0;
    }


    .announcement-label {
        min-width: 112px;

        padding:
            13px 11px;

        font-size: 10px;
    }


    .announcement-window {
        padding: 0 10px;
    }


    .announcement-item {
        font-size: 11px;
    }


    .announcement-controls {
        display: none;
    }


    .announcement-ticker {
        min-height: 48px;

        gap: 25px;

        animation-duration: 18s;
    }

}

html,
body {
    min-height: 100%;
}

body {
    overflow-y: auto;
}

.container {
    min-height: 100vh;
    align-items: stretch;
}

.content {
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
}

/* =========================================================
   PUBLIC ANNOUNCEMENT TICKER
   ========================================================= */

.announcement-window {
    overflow: hidden;
    position: relative;
    width: 100%;
}


.announcement-ticker {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}


/* =========================================================
   SEAMLESS TICKER TRACK
   ========================================================= */

.ticker-track {
    display: flex;
    width: max-content;
    align-items: center;

    animation:
        announcementScroll 25s linear infinite;

    will-change: transform;
}


.ticker-sequence {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}


/* =========================================================
   EACH ANNOUNCEMENT / SOCIAL ITEM
   ========================================================= */

.announcement-item {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    white-space: nowrap;

    margin-right: 70px;

    text-decoration: none;
}


/* =========================================================
   SOCIAL LINK
   ========================================================= */

.social-ticker-item {
    color: inherit;
    cursor: pointer;
}

.social-ticker-item:hover {
    text-decoration: none;
}


/* =========================================================
   PAUSE ON HOVER
   ========================================================= */

.announcement-ticker:hover .ticker-track {
    animation-play-state: paused;
}


/* =========================================================
   SEAMLESS ANIMATION
   ========================================================= */

@keyframes announcementScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}/* =========================================================
   CLICKABLE SOCIAL TICKER LINKS
   ========================================================= */

.social-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: inherit;
    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


/* Platform section */

.social-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-weight: 700;
}


/* Platform icons */

.social-platform-icon {
    font-size: 21px;
    vertical-align: middle;
}


/* YouTube */

.youtube-icon {
    color: #ff0000;
}


/* Instagram */

.instagram-icon {
    color: #e1306c;
}


/* Facebook */

.facebook-icon {
    color: #1877f2;
}


/* WhatsApp */

.whatsapp-icon {
    color: #25d366;
}


/* Social title */

.social-ticker-title {
    font-weight: 500;
}


/* Description */

.social-ticker-description {
    opacity: 0.95;
}


/* External link icon */

.social-external-icon {
    font-size: 13px;

    margin-left: 2px;

    opacity: 0.75;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* =========================================================
   HOVER = CLEARLY CLICKABLE
   ========================================================= */

.social-ticker-item:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    opacity: 1;
}


.social-ticker-item:hover .social-external-icon {
    opacity: 1;

    transform:
        translate(2px, -2px);
}


/* Pointer cursor */

.social-ticker-item {
    cursor: pointer;
}

/* =========================================================
   PLACE ANNOUNCEMENT TICKER AT THE BOTTOM OF HERO
   ========================================================= */

.public-announcements {
    position: relative;
    z-index: 20;

    margin-top: -54px;
}

/* Keep the ticker visible above the hero background */
.public-announcements .announcement-label,
.public-announcements .announcement-window,
.public-announcements .announcement-controls {
    position: relative;
    z-index: 21;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .public-announcements {
        margin-top: -48px;
    }
}