/* Header transition container */
/* Match osbf_fairs.html navbar behavior */
html { scroll-padding-top: var(--header-h, 120px); } /* for #anchor jumps */
body { padding-top: var(--header-h, 120px); }
:root { --osbf-blue: #004085;
    --header-h: 120px;
    --osbf-primary: var(--osbf-blue, #0d6efd);   /* uses your existing var if present */
}
.header-top { background: #212529; }


/* Background: gradient + soft glow */
.osbf-contact-banner{
    background:
            radial-gradient(800px 800px at 12% 8%, rgba(255,255,255,.18), transparent 55%),
            linear-gradient(135deg, #1f6fff, #0d47a1);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Logo pop */
.osbf-logo-wrap{
    display:inline-block;
    padding:.5rem;
    border-radius:50%;
    background: rgba(255,255,255,.08);
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.osbf-logo{
    width:140px; height:auto; border-radius:50%;
    outline:3px solid rgba(255,255,255,.95);
    outline-offset:-6px;
}

/* Contact lines */
.osbf-contact{ font-style: normal; } /* keep address from italic */
.osbf-line{
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:.35rem; line-height:1.45;
}
.osbf-line svg{ opacity:.9; }

/* Phone pill CTA */
.osbf-pill{
    display:inline-flex; align-items:center; gap:.35rem;
    background:#fff; color:#0d47a1; padding:.3rem .6rem;
    border-radius:999px; font-weight:600; text-decoration:none;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.osbf-pill:hover{ background:#f2f5ff; color:#0a3a88; }

/* Mobile */
@media (max-width:576px){
    .osbf-logo{ width:110px; }
}

#header {
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
    background: transparent;
}
#header.nav-hidden {
    transform: translateY(calc(-1 * var(--header-h, 120px)));
}

/* Slider sizing that behaves on mobile browser chrome */
.slider .swiper-slide{
    /* beat any inline height the slides might have */
    height: auto !important;
    /* use small-viewport units so iOS browser chrome doesn’t squash it */
    min-height: 90svh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
@supports not (height: 1svh) {
    .slider .swiper-slide{ min-height: 90vh; }
}
@media (max-width: 576px){
    .slider .swiper-slide{ min-height: 70svh; }
}

/* Keep the left-justified hero safe on crop */
.hero-left { background-position: left center !important; }

@media (prefers-reduced-motion: reduce) {
    #header { transition: none; }
}
.second-header {
    background: #fff !important;     /* <- key fix */
    position: relative;               /* ensure it paints its own background */
    z-index: 2;                       /* above the top strip */
}

.osbf-compare-table .tier-standard-row td,
.osbf-compare-table .tier-standard-row th {
    background-color: var(--osbf-blue) !important;
    color: #fff !important;
    font-size: 1.06em; /* subtle size increase */
}
.osbf-compare-table .tier-standard-row td:first-child {
    font-weight: 600; /* semibold, not bold */
    letter-spacing: .15px;
    position: relative;
    padding-left: 1.75rem; /* room for star */
}
.osbf-compare-table .tier-standard-row td:first-child::before {
    content: "★";
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
    opacity: .95;
    line-height: 1;
}
.osbf-compare-table .tier-standard-row a { color: #fff !important; text-decoration: underline; }
.osbf-compare-table .tier-standard-row td { border-color: rgba(255,255,255,0.4) !important; }



/* Optional: text shadow utility for white text readability */
.text-outline {
    text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px  1px 0 #000,
            1px  1px 0 #000;
}
#about {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem;
    background-color: #f8f9fa; /* light background to separate from nav */
}

/* Optional: fade-in animation */
#about .bg-primary {
    width: 100%;
    max-width: 1140px; /* wider than the default 960px */
    padding: 2.5rem 2rem;
    border-radius: 12px;
    background: linear-gradient(to bottom right, #1e90ff, #0066cc);
    color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* Typography */
#about .bg-primary h4 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

#about .bg-primary p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Avatar styling */
#about img.rounded-circle {
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    #about .bg-primary {
        padding: 2rem 1rem;
    }

    #about .bg-primary h4 {
        font-size: 1.5rem;
    }

    #about .bg-primary p {
        font-size: 0.95rem;
    }
}
/* About cards */
.about-card{
    background:#ffffff;
    border:1px solid #eef0f2;
    border-radius:14px;
    padding:24px 22px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/* Fancy bullets (no icons needed) */
.fancy-bullets li{
    position:relative;
    margin-bottom:10px;
    padding-left:26px;
    line-height:1.55;
}
.fancy-bullets li::before{
    content:"";
    position:absolute;
    left:0; top:.6em;
    width:8px; height:8px; border-radius:50%;
    background:#f4b400;                 /* warm gold */
    box-shadow:0 0 0 3px rgba(244,180,0,.18);
}
.fancy-bullets {
    list-style: none; /* Removes browser bullets */
    padding-left: 0;  /* Optional: removes extra indentation */
}
/* Slightly tighter on small screens */
@media (max-width:576px){
    .about-card{ padding:18px 16px; }
}


/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {

    /* Logo size in navbar */
    .navbar-brand img {
        max-width: 70px;
        height: auto;
    }

    /* Adjust toggler icon size */
    .navbar-toggler svg {
        width: 40px;
        height: 40px;
    }

    /* Reduce slider heading sizes */
    .swiper-slide h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .swiper-slide p {
        font-size: 1rem !important;
        padding: 0 1rem;
    }

    /* Stack feature images vertically */
    #features .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }

    /* Welcome box padding */
    .bg-primary.p-5 {
        padding: 2rem 1rem !important;
    }

    /* Team section: force wrap */
    #teacher .row.g-0 > .col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* Facilities: reposition overlay */
    .product-description {
        position: static !important;
        transform: none !important;
        background: rgba(0, 0, 0, 0.65);
        margin-top: -3rem;
        padding: 1rem;
        text-align: center;
    }

    /* Subscribe form: stack inputs */
    #subscribe .row > div {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* Blog cards: reduce padding */
    .card-body h5 a {
        font-size: 1rem;
    }

    /* Footer: stack columns */
    #footer .col-lg-2,
    #footer .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 2rem;
    }

    #footer .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Reduce nav item spacing on mobile */
    .navbar-nav .nav-item.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

}