:root{
    --brand:#0d6efd;
    --bg-soft:#f7f9fc;
}
body{
    scroll-behavior:smooth;
}
.navbar{
    backdrop-filter: saturate(180%) blur(10px);
    background: rgba(255,255,255,0.8)!important;
}
.hero{
    padding-top: 7rem;
    padding-bottom: 3rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
}
.author a{
    text-decoration:none;
}
.badge-link{
    text-decoration:none;
}
.teaser a {
    cursor: zoom-in;
}
.teaser{
    border-radius: .75rem;
    border: 1px solid #e9ecef;
    overflow:hidden;
    background:#fff;
    box-shadow: 0 10px 30px rgba(13,110,253,.05);
}
/* Custom Carousel Styles */
#imageSlider .carousel-inner {
    width: 70%;
    margin: 0 auto;
    border-radius: .5rem; /* Optional: for aesthetics */
    overflow: hidden;
}
#imageSlider .carousel-control-prev,
#imageSlider .carousel-control-next {
    width: 15%;
}
#imageSlider .carousel-control-prev-icon,
#imageSlider .carousel-control-next-icon {
    filter: invert(1); /* Invert the default white icon to black for contrast */
}
#imageSlider .carousel-indicators {
    position: static; /* Position indicators below the image */
    margin-top: 1rem;
}
#imageSlider .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #888; /* Gray for inactive dots */
    border: 0; /* Remove default border */
}
#imageSlider .carousel-indicators .active {
    background-color: #000; /* Black for the active dot */
}
body > section:nth-of-type(even){
    background:var(--bg-soft);
}
.section-spacer{
    padding-top:4rem;
    padding-bottom:3rem;
}
.code, pre{
    background:#0b1020;
    color:#e6edf3;
    border-radius:.5rem;
    padding:1rem;
    overflow:auto;
}
.placeholder-img{
    width:100%;
    aspect-ratio:16/9;
    border:1px dashed #ced4da;
    border-radius:.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color:#6c757d;
    background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675"><rect width="100%" height="100%" fill="%23f8f9fa"/><g fill="%236c757d" font-family="Arial,Helvetica,sans-serif"><text x="50%" y="48%" dominant-baseline="middle" text-anchor="middle" font-size="36">Image / Figure Placeholder</text><text x="50%" y="60%" dominant-baseline="middle" text-anchor="middle" font-size="20">replace src with your figure</text></g></svg>') center/cover no-repeat;
}
.mini-card{
    border:1px solid #e9ecef;
    border-radius:.75rem;
    padding:1rem;
    height:100%;
    background:#fff;
}
.foot{
    background:#0b0f1a;
    color:#aab3c5;
    padding:3rem 0 2rem;
}
.foot a{ color:#dbe4ff; }
.sticky-cta{
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
}