/*
  ================================================================
   Banner Service Strip — Color Theme Override
   Primary: #60060f  |  Mid: #8a0b16  |  Dark: #3d040a
  ================================================================
*/

/* ── Wrapper ───────────────────────────────────────────────── */
.keo_banner_service_wrap {
    transform: translateY(-10%);
    -webkit-transform: translateY(-10%);
    -moz-transform: translateY(-10%);
    z-index: 100;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(96, 6, 15, 0.35);
}

/* ── Parent row — equal-height flex columns ───────────────── */
.keo_banner_service_wrap > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.keo_banner_service_wrap > div > [class*="col-md-4"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/* ── Base tile ─────────────────────────────────────────────── */
.keo_banner_service {
    overflow: hidden;
    text-align: center;
    padding: 0;
    position: relative;
    z-index: 1;
    height: 40px;             /* single source-of-truth height */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
}

.keo_banner_service:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    opacity: 0.96;
    transition: opacity 0.35s ease-in-out;
    -webkit-transition: opacity 0.35s ease-in-out;
}

/* Hover lifts opacity to full */
.keo_banner_service.service_bg_1:hover:before,
.keo_banner_service.service_bg_2:hover:before,
.keo_banner_service.service_bg_3:hover:before {
    opacity: 1;
}

/* ── Tile 1 — News Ticker  (light maroon) ──────────────────── */
.keo_banner_service.service_bg_1:before {
    background-color: #8a0b16;
}
.keo_banner_service.service_bg_1 {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* ── Tile 2 — Virtual Classroom  (primary) ─────────────────── */
.keo_banner_service.service_bg_2:before {
    background-color: #60060f;
}

/* ── Tile 3 — Campus Life  (dark maroon) ───────────────────── */
.keo_banner_service.service_bg_3:before {
    background-color: #3d040a;
}
.keo_banner_service.service_bg_3 {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* ── Tile text & icons ─────────────────────────────────────── */
.keo_banner_service p {
    color: #fff;
    margin: 0;           /* no bottom margin — tile uses flex centering */
    line-height: 1;
}

.keo_banner_service p > a {
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
}

.keo_banner_service p > a:hover {
    color: #ffd6d9;
    text-decoration: none;
}

.keo_banner_service i {
    font-size: 20px;
    color: #ffffff;
    margin-right: 6px;
    vertical-align: middle;
    transition: transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
}

.keo_banner_service:hover i {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
}

.keo_banner_service > a {
    display: inline-block;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    padding: 0;
    text-transform: capitalize;
    border-radius: 10px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.keo_banner_service > a:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
}

/* ══════════════════════════════════════════════════════════════
   NEWS TICKER — Layout, Centering & Readability
══════════════════════════════════════════════════════════════ */

/* Outer ticker container — flex row so content sits in the
   middle vertically and the buttons hug each side */
.acme-news-ticker {
    background: transparent;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100% !important;   /* fill the tile fully */
    width: 100%;
    box-sizing: border-box;
}

/* The scrolling text area sits between the two buttons.
   80px total = 40px prev + 40px next */
.acme-news-ticker-box {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
    padding-left: 44px !important;   /* clear the prev (left) button */
    padding-right: 44px !important;  /* clear the next (right) button */
    padding-top: 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    box-sizing: border-box;
}

/* UL takes full width of the box */
.acme-news-ticker-box ul {
    width: 100%;
    list-style-type: none !important;
    padding: 0;
    margin: 0;
}

/* Each LI: flex row, vertically centred, no wrap */
.acme-news-ticker-box ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 40px;
    width: 100%;
    overflow: hidden;
}

/* Ticker link — full width, single line, readable size */
.acme-news-ticker-box ul li a {
    display: block;
    width: 100%;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px !important; /* override inline 10px */
    line-height: 40px;          /* match tile height */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
}

.acme-news-ticker-box ul li a:hover {
    color: #ffd6d9 !important;
    text-decoration: none;
}

/* ── Ticker: prev / next buttons ───────────────────────────── */
.acme-news-ticker-controls {
    position: absolute;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* RIGHT control (the "prev" arrow) is pinned to the left edge */
.acme-news-ticker-controls.right {
    left: 0 !important;
    right: auto;
}

/* LEFT-side button (next arrow) is on the right edge */
.acme-news-ticker-controls:not(.right) {
    right: 0;
    left: auto !important;
}

.acme-news-ticker-controls button {
    height: 100%;
    width: 40px;
    background: #60060f;
    border-color: #3d040a;
    border-style: solid;
    border-width: 0 1px 0 0; /* right border only for left btn */
    cursor: pointer;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    transition: background 0.3s ease;
    -webkit-transition: background 0.3s ease;
    box-sizing: border-box;
}

.acme-news-ticker-controls:not(.right) button {
    border-width: 0 0 0 1px; /* left border for right btn */
}

.acme-news-ticker-controls button:hover {
    background: #3d040a;
}

/* White chevron arrows */
.acme-news-ticker-controls button.acme-news-ticker-arrow:after {
    border-color: #ffffff;
    border-bottom-width: 2px;
    border-right-width: 2px;
    height: 8px;
    width: 8px;
    position: static;
    display: block;
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
    content: '';
    border-bottom-style: solid;
    border-right-style: solid;
}

.acme-news-ticker-controls.acme-news-ticker-horizontal-controls
  button.acme-news-ticker-prev:after {
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
}

.acme-news-ticker-controls.acme-news-ticker-horizontal-controls
  button.acme-news-ticker-next:after {
    -webkit-transform: rotate(315deg);
        -ms-transform: rotate(315deg);
            transform: rotate(315deg);
}

/* ── Ripple effect on tile click ───────────────────────────── */
.keo_banner_service .bs-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    -webkit-transform: scale(0);
    animation: bs-ripple-anim 0.55s linear;
    -webkit-animation: bs-ripple-anim 0.55s linear;
    background-color: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

@keyframes bs-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}
@-webkit-keyframes bs-ripple-anim {
    to { -webkit-transform: scale(4); opacity: 0; }
}

/* ── Scroll-in entrance animation ──────────────────────────── */
.keo_banner_service_wrap.bs-animate-in .col-md-4 > .keo_banner_service {
    animation: bs-slide-up 0.5s ease both;
    -webkit-animation: bs-slide-up 0.5s ease both;
}
.keo_banner_service_wrap.bs-animate-in .col-md-4:nth-child(1) > .keo_banner_service { animation-delay: 0s; }
.keo_banner_service_wrap.bs-animate-in .col-md-4:nth-child(2) > .keo_banner_service { animation-delay: 0.12s; }
.keo_banner_service_wrap.bs-animate-in .col-md-4:nth-child(3) > .keo_banner_service { animation-delay: 0.24s; }

@keyframes bs-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes bs-slide-up {
    from { opacity: 0; -webkit-transform: translateY(20px); }
    to   { opacity: 1; -webkit-transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

/* Tablet (768 – 991 px) */
@media only screen and (max-width: 991px) {
    .keo_banner_service_wrap {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        border-radius: 0;
        box-shadow: none;
        margin-top: 0 !important;
    }
    .keo_banner_service.service_bg_1,
    .keo_banner_service.service_bg_3 { border-radius: 0; }

    /* Stack the three tiles vertically on tablet */
    .keo_banner_service_wrap > div > [class*="col-md-4"] {
        width: 100%;
        display: block;
    }
    .acme-news-ticker {
        height: 100% !important;
    }
    .acme-news-ticker-box ul li {
        height: 44px;
    }
    .acme-news-ticker-box ul li a {
        height: 44px;
        line-height: 44px;
    }
    .keo_banner_service {
        height: 44px;
    }
}

/* Mobile (< 576 px) */
@media only screen and (max-width: 575px) {
    .keo_banner_service p > a {
        font-size: 13px;
        letter-spacing: 0.4px;
    }
    .acme-news-ticker-controls button {
        width: 34px;
    }
    .acme-news-ticker-box {
        padding-left: 38px !important;
        padding-right: 38px !important;
    }
    .acme-news-ticker {
        height: 100% !important;
    }
    .acme-news-ticker-box ul li a {
        font-size: 11px !important;
    }
    /* Stack tiles on mobile */
    .keo_banner_service_wrap > div {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .keo_banner_service_wrap > div > [class*="col-md-4"] {
        width: 100%;
    }
    .keo_banner_service {
        height: 44px;
    }
}