/* Home page banner: clickable service slides.
   Slide rules are scoped with the .bn- prefix; the carousel-control and
   scroll rules only touch the home banner and the three service sections. */

html { scroll-behavior: smooth; }

/* the navbar turns fixed on scroll, so leave room when jumping to a service */
#cprotect-dns, #email-security, #secure-access { scroll-margin-top: 90px; }

/* ---------- banner box: one height per screen size, for every slide ---------- */
#carouselExampleIndicators {
    height: 550px;
    background: #06192f;
}
#carouselExampleIndicators .carousel-inner,
#carouselExampleIndicators .carousel-item { height: 100%; }

/* older photo slides: whole image always visible, blurred copy fills the sides */
.bn-photo { position: relative; overflow: hidden; }
.bn-photo-bg {
    position: absolute;
    top: -30px; right: -30px; bottom: -30px; left: -30px;
    background-position: center;
    background-size: cover;
    filter: blur(26px) brightness(.8);
}
#carouselExampleIndicators .bn-photo-img {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* ---------- service slides ---------- */
#carouselExampleIndicators .bn-slide {
    display: flex;
    align-items: center;
    height: 100%;
    padding-bottom: 36px;
    overflow: hidden;
    text-decoration: none !important;
    cursor: pointer;
}
#carouselExampleIndicators .bn-slide .container { width: 100%; }

.bn-dns {
    background:
        radial-gradient(700px 360px at 85% 10%, rgba(183, 33, 255, .28), transparent 60%),
        radial-gradient(600px 320px at 0% 100%, rgba(8, 174, 234, .25), transparent 60%),
        linear-gradient(135deg, #06142c 0%, #0b2150 100%);
}
.bn-mail {
    background:
        radial-gradient(700px 360px at 90% 0%, rgba(8, 174, 234, .22), transparent 62%),
        linear-gradient(135deg, #eef4fd 0%, #d3e4f8 100%);
}
.bn-cisco {
    background:
        radial-gradient(700px 360px at 0% 0%, rgba(0, 188, 235, .28), transparent 60%),
        linear-gradient(135deg, #04182d 0%, #07335c 100%);
}

.bn-text { color: #fff; }
.bn-text h2 {
    margin: 0 0 14px;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 700;
    color: #fff;
}
.bn-text p {
    max-width: 560px;
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.6;
    color: #c8d8f3;
}
.bn-dns h2 span  { color: #d98bff; }
.bn-cisco h2 span { color: #27d3ff; }
.bn-mail .bn-text h2 { color: #12295c; }
.bn-mail h2 span { color: #1f7fd1; }
.bn-mail .bn-text p { color: #3d4d6e; }

.bn-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(90deg, #08aeea, #b721ff);
}
.bn-mail .bn-badge { background: linear-gradient(90deg, #1f4b99, #08aeea); }
.bn-badge i {
    width: 9px;
    height: 9px;
    margin-right: 9px;
    border-radius: 50%;
    background: #d6312f;
    animation: bn-pulse 1.6s ease-out infinite;
}
@keyframes bn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(214, 49, 47, .7); }
    100% { box-shadow: 0 0 0 10px rgba(214, 49, 47, 0); }
}

.bn-cta {
    display: inline-block;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #fff;
    border-radius: 8px;
    background: linear-gradient(90deg, #2c6ed5, #b721ff);
    box-shadow: 0 8px 24px rgba(44, 110, 213, .4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.bn-mail .bn-cta  { background: linear-gradient(90deg, #1f4b99, #1f7fd1); }
.bn-cisco .bn-cta { background: linear-gradient(90deg, #0b5aa3, #00bceb); }
.bn-cisco .bn-badge { background: linear-gradient(90deg, #0b5aa3, #00bceb); }
.bn-slide:hover .bn-cta { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(44, 110, 213, .55); }

.bn-slide img {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* ---------- carousel arrows (narrower so the slide itself stays clickable) ---------- */
#carouselExampleIndicators .carousel-control-prev,
#carouselExampleIndicators .carousel-control-next {
    width: 56px;
    opacity: .8;
}
#carouselExampleIndicators .carousel-control-prev:hover,
#carouselExampleIndicators .carousel-control-next:hover { opacity: 1; }
#carouselExampleIndicators .carousel-control-prev-icon,
#carouselExampleIndicators .carousel-control-next-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .35);
    background-size: 55% 55%;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    #carouselExampleIndicators { height: 500px; }
    .bn-text { text-align: center; }
    .bn-text h2 { font-size: 36px; }
    .bn-text p { margin-left: auto; margin-right: auto; font-size: 17px; }
}
@media (max-width: 575px) {
    #carouselExampleIndicators { height: 460px; }
    #carouselExampleIndicators .bn-slide .container { padding-left: 50px; padding-right: 50px; }
    .bn-text h2 { font-size: 28px; }
    .bn-text p { font-size: 15px; }
    #carouselExampleIndicators .carousel-control-prev,
    #carouselExampleIndicators .carousel-control-next { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bn-badge i { animation: none; }
    .bn-cta { transition: none; }
}

/* ---------- mobile fix for the older "What We Can Do" block ----------
   It used a 3-column table layout that stayed ~800px wide on phones, which made the
   whole page (and the banner above it) scroll sideways or shrink. Stack it instead. */
@media (max-width: 991px) {
    .c-content-feature-9 > .c-list,
    .c-content-feature-9 > .c-list > li { display: block; width: 100%; }
    .c-content-feature-9 > .c-list > li { padding: 0 0 14px; }
    .c-content-feature-9 > .c-list > li > .c-card { margin-right: 0; padding: 24px 20px; }
}