:root {
    --primary: #b40505;
    --secondary: #757575;
    --light: #F3F6F8;
    --dark: #0C2B4B;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand,
.navbar a.btn {
    height: 80px
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, .75);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary);
    border: 10px solid var(--primary);
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #999999;
}


/*** Facts ***/
@media (min-width: 991.98px) {
    .facts {
        position: relative;
        margin-top: -75px;
        z-index: 1;
    }
}


/*** Courses ***/
.courses {
    min-height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../img/carousel-1.jpg) center center no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.courses-item .courses-overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.courses-item:hover .courses-overlay {
    height: 100%;
    opacity: 1;
}


/*** Team ***/
.team-items {
    margin: -.75rem;
}

.team-item {
    padding: .75rem;
}

.team-item::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transition: .5s;
    z-index: -1;
}

.team-item:hover::after {
    height: 100%;
    background: var(--primary);
}

.team-item .team-social {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .75);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-social {
    height: 100%;
    opacity: 1;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    height: 40px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid var(--primary);
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 40px;
    height: 40px;
    background: var(--primary);
}

.testimonial-carousel .owl-item img {
    width: 150px;
    height: 150px;
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--light);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright {
    background: #092139;
}

.copyright a {
    color: var(--primary);
}

.copyright a:hover {
    color: var(--light);
}

/* ===== Sybershield Professional Rebrand 2026 ===== */
:root {
    --primary: #00AEEF;
    --primary-strong: #007FB3;
    --accent: #19D7A0;
    --secondary: #5F7285;
    --light: #F4F8FB;
    --dark: #071A2B;
    --ink: #102A3D;
    --muted: #6A7C8D;
    --surface: #FFFFFF;
    --line: #DDE8EF;
    --shadow: 0 20px 60px rgba(7, 26, 43, .10);
}
html { scroll-behavior: smooth; }
body { color: var(--ink); background: #fff; font-family: 'Work Sans', sans-serif; line-height: 1.7; }
h1,h2,h3,h4,h5,h6 { color: var(--dark); font-weight: 700; letter-spacing: -.025em; }
a { transition: .25s ease; }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-dark { background-color: var(--dark) !important; }
.btn { border-radius: 10px; font-weight: 700; letter-spacing: .01em; }
.btn-primary { background: linear-gradient(135deg, #00AEEF, #008AC3); border-color: #00AEEF; box-shadow: 0 10px 24px rgba(0,174,239,.22); }
.btn-primary:hover { background: linear-gradient(135deg, #008FC5, #006F9D); border-color: #008FC5; transform: translateY(-2px); }
.btn-light { color: var(--dark); border-color: #fff; }
.btn-outline-light { border-radius: 9px; }

/* top utility bar */
body > .container-fluid.bg-dark.text-light.p-0 { background: #04121f !important; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .88rem; }
body > .container-fluid.bg-dark.text-light.p-0 a { color: #bfeeff; }

/* navigation */
.navbar { min-height: 86px; border-bottom: 1px solid rgba(7,26,43,.07); box-shadow: 0 5px 25px rgba(7,26,43,.045); }
.navbar .navbar-brand { height: 86px; border-right: 0 !important; padding-left: 2rem !important; padding-right: 1rem !important; }
.brand-logo { width: 224px; max-height: 48px; display: block; }
.navbar .navbar-nav .nav-link { margin-right: 25px; padding: 30px 0; color: #29445A; font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: .015em; position: relative; }
.navbar .navbar-nav .nav-link:after { content:""; position:absolute; left:0; bottom:22px; width:0; height:2px; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:.25s ease; }
.navbar .navbar-nav .nav-link:hover:after,.navbar .navbar-nav .nav-link.active:after { width:100%; }
.navbar .dropdown-toggle::after { position:static; width:auto !important; height:auto !important; background:none !important; }
.navbar .dropdown-menu { border: 1px solid var(--line) !important; border-radius: 14px; padding: .65rem; box-shadow: var(--shadow); background:#fff !important; }
.navbar .dropdown-item { border-radius: 8px; padding: .6rem .8rem; font-weight:600; color:#29445A; }
.navbar .dropdown-item:hover,.navbar .dropdown-item.active { color:var(--primary-strong); background:#eef9fd; }
.navbar .btn-primary { height: 86px; border-radius:0; display:flex !important; align-items:center; }
.navbar-toggler { border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem; }

/* homepage hero */
#header-carousel .carousel-item { min-height: 650px; }
#header-carousel .carousel-item img { height: 650px; object-fit: cover; }
.carousel-caption { text-align:left; justify-content:flex-start; background: linear-gradient(90deg, rgba(3,16,29,.94) 0%, rgba(4,25,43,.82) 48%, rgba(4,25,43,.35) 100%); }
.carousel-caption .container .row { justify-content:flex-start !important; }
.carousel-caption .col-lg-7 { max-width: 790px; }
.hero-kicker { display:inline-flex; align-items:center; gap:.55rem; color:#a9f3dd; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; }
.hero-kicker:before { content:""; width:28px; height:2px; background:var(--accent); }
.carousel-caption h1 { font-size: clamp(2.6rem,5vw,4.9rem); line-height:1.03; letter-spacing:-.045em; max-width:900px; text-wrap:balance; }
.hero-copy { color:#d8e6ef; font-size:1.08rem; max-width:650px; margin-bottom:2rem; }
.carousel-caption .btn { min-width:150px; }
.carousel-control-prev,.carousel-control-next { width:7%; }
.carousel-control-prev-icon,.carousel-control-next-icon { width:44px; height:44px; border:0; background-color:rgba(0,174,239,.9); background-size:45%; border-radius:50%; }

/* cards / facts */
.facts .shadow { border:1px solid var(--line); box-shadow:0 18px 45px rgba(7,26,43,.10) !important; transition:.25s ease; }
.facts .shadow:hover { transform:translateY(-5px); box-shadow:var(--shadow) !important; }
.facts .row > div:first-child .shadow { border-radius:16px 0 0 16px; }
.facts .row > div:last-child .shadow { border-radius:0 16px 16px 0; }
.btn-lg-square.bg-primary { border-radius:12px; box-shadow:0 8px 20px rgba(0,174,239,.2); }

/* section styling */
.py-6 { padding-top: 6.5rem; padding-bottom: 6.5rem; }
h6.text-primary.text-uppercase { font-size:.8rem; font-weight:800; letter-spacing:.15em; }
.container-xxl img { border-radius:14px; }
.container-xxl .position-relative.overflow-hidden { border-radius:18px; box-shadow:var(--shadow); }
.fa-check.text-primary { background:#e9fbf6; color:#0baa7d !important; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.75rem; }

/* page headers */
.page-header { position:relative; min-height:340px; display:flex; align-items:center; background:linear-gradient(90deg,rgba(3,16,29,.94),rgba(3,24,41,.72)),url(../img/carousel-1.jpg) center 45%/cover no-repeat; margin-bottom:0 !important; }
.page-header:after { content:""; position:absolute; inset:auto 0 0; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); }
.page-header .container { position:relative; z-index:1; }
.page-header h1 { font-size:clamp(2.7rem,5vw,4.5rem); letter-spacing:-.04em; }
.breadcrumb { font-weight:600; }

/* courses */
.courses { min-height:auto; background:linear-gradient(rgba(244,248,251,.95),rgba(244,248,251,.95)),url(../img/carousel-1.jpg) center/cover fixed; }
.courses-item { border-radius:18px; overflow:hidden; box-shadow:0 14px 42px rgba(7,26,43,.10); background:white; }
.courses-item img { transition:.45s ease; border-radius:0; }
.courses-item:hover img { transform:scale(1.035); }
.courses-item .courses-overlay { background:linear-gradient(135deg,rgba(7,26,43,.82),rgba(0,127,179,.78)); }
.courses-item .bg-secondary { background:#fff !important; color:var(--dark) !important; border-top:1px solid var(--line); }
.courses-item .text-white { color:var(--dark) !important; }

/* appointment / feature blocks */
.bg-light { background-color:var(--light) !important; }
.form-control,.form-select { border:1px solid #d6e3eb; border-radius:10px; min-height:52px; box-shadow:none !important; }
.form-control:focus,.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(0,174,239,.12) !important; }

/* team */
.team-item { border-radius:18px; overflow:hidden; background:white; box-shadow:0 14px 40px rgba(7,26,43,.08); }
.team-item::after { border-radius:18px; }
.team-item img { border-radius:14px; }
.team-item:hover h5,.team-item:hover span { color:#fff !important; }
.team-item .team-social { border-radius:14px; background:linear-gradient(135deg,rgba(7,26,43,.88),rgba(0,127,179,.72)); }

/* testimonial */
.testimonial-carousel .testimonial-item { background:#fff; border:1px solid var(--line); border-radius:20px; padding:2.5rem; box-shadow:0 12px 40px rgba(7,26,43,.07); }
.testimonial-carousel .owl-dot { border-radius:50%; }
.testimonial-carousel .owl-item img { object-fit:cover; border:5px solid #fff; box-shadow:0 8px 24px rgba(7,26,43,.15); }

/* footer */
.footer { margin-top:0 !important; background:linear-gradient(135deg,#04121f,#071a2b 60%,#0b2b40) !important; border-top:1px solid rgba(255,255,255,.05); }
.footer h2,.footer h4,.footer h6 { letter-spacing:-.02em; }
.footer .btn.btn-link { color:#b9cad6; text-decoration:none; }
.footer .btn.btn-link:hover { color:#fff; letter-spacing:.01em; }
.footer .form-control { background:#fff; }
.copyright { background:#020c14; border-top:1px solid rgba(255,255,255,.06); }
.copyright a { color:#77dfff; }
.back-to-top { border-radius:12px !important; right:22px; bottom:22px; }

/* small screens */
@media (max-width: 991.98px) {
    .navbar { min-height:74px; }
    .navbar .navbar-brand { height:74px; padding-left:1rem !important; }
    .brand-logo { width:190px; }
    .navbar .navbar-nav .nav-link { padding:11px 0; margin-right:0; }
    .navbar .navbar-nav .nav-link:after { bottom:5px; }
    .navbar .btn-primary { display:none !important; }
    #header-carousel .carousel-item,#header-carousel .carousel-item img { min-height:580px; height:580px; }
    .carousel-caption { background:linear-gradient(90deg,rgba(3,16,29,.92),rgba(3,16,29,.68)); }
    .facts .row > div .shadow { border-radius:14px !important; margin-bottom:12px; }
}
@media (max-width: 575.98px) {
    .py-6 { padding-top:4.5rem; padding-bottom:4.5rem; }
    .carousel-caption { padding:2rem 1.2rem; }
    .carousel-caption h1 { font-size:2.45rem; margin-bottom:1.25rem !important; }
    .hero-copy { font-size:.98rem; }
    .carousel-caption .btn { min-width:auto; padding:.8rem 1.1rem !important; }
    .carousel-caption .btn + .btn { margin-left:.45rem !important; }
    .carousel-control-prev,.carousel-control-next { display:none; }
    .page-header { min-height:280px; }
    .testimonial-carousel .testimonial-item { padding:1.5rem; }
}


/*** Professional Services ***/
.bg-light-subtle {
    background: #f7f9fb;
}

.service-card {
    border: 1px solid #e8edf2;
    border-top: 4px solid var(--primary);
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2.5rem rgba(12, 43, 75, .12) !important;
}

.service-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(180, 5, 5, .1);
    color: var(--primary);
    font-size: 1.45rem;
    margin-bottom: 1.25rem;
}

/*** Gallery ***/
.gallery-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid #e8edf2;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2rem rgba(12, 43, 75, .12);
}

.gallery-card .gallery-image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #edf1f4;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.gallery-card:hover img {
    transform: scale(1.04);
}

.gallery-card .gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 43, 75, .48);
    color: #fff;
    opacity: 0;
    transition: opacity .3s ease;
}

.gallery-card:hover .gallery-zoom {
    opacity: 1;
}

.gallery-card .gallery-content {
    padding: 1.25rem;
}

.gallery-card h5 {
    margin-bottom: .5rem;
    color: var(--dark);
}

.gallery-card p {
    margin-bottom: 0;
    color: #666;
    font-size: .95rem;
    line-height: 1.65;
}

.gallery-category {
    display: inline-block;
    padding: .3rem .7rem;
    background: rgba(180, 5, 5, .08);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .65rem;
}

.gallery-preview-item {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #ddd;
}

.gallery-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.gallery-preview-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent 55%);
}

.gallery-preview-item:hover img {
    transform: scale(1.06);
}

.gallery-preview-item span {
    position: absolute;
    left: 1rem;
    bottom: .8rem;
    z-index: 2;
    color: #fff;
    font-weight: 600;
}

.gallery-modal-image {
    max-height: 72vh;
    object-fit: contain;
    background: #111;
}