:root {
        --primary: #0085C9;
        --secondary: #36BEE5;
        --bg: #ffffff;
        --text: #222222;
}

.navbar {
        margin-bottom: 0;
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--bg);
        box-shadow: 0 6px 18px rgba(13,38,59,0.06);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        padding: 6px 18px;
}

body {
        background: var(--bg);
        color: var(--text);
        font-family: Inter, Arial, Helvetica, sans-serif;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
}

h1,
h2 {
        font-weight: bold;
}

p {
        font-size: 16px;
        color: var(--text);
}

.jumbotron {
        background: var(--bg);
        color: var(--primary);
        text-align: center;
        border-bottom: 6px solid var(--secondary);
}
.hero {
        background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
        color: #ffffff;
        padding: 80px 0;
        text-align: center;
}
.hero h1 { font-size: 40px; margin-bottom: 10px; }
.hero .lead { font-size: 20px; color: rgba(255,255,255,0.9); }
.hero-small { background: rgba(0,0,0,0.03); padding: 40px 0; margin-bottom: 30px; }
.hero-small h1 { color: var(--primary); margin:0; font-size:32px; }
.hero-small .lead { color: var(--text); margin-top:6px; }

.btn-primary {
        color: #fff;
        background-color: var(--primary);
        border-color: var(--primary);
        margin-bottom: 5px;
}
.btn-primary:hover {
        background-color: var(--secondary);
        border-color: var(--secondary);
}

/* Navbar overrides to keep light/white header with brand color */
.navbar-inverse {
        background-color: var(--bg);
        border-color: transparent;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}
.navbar-inverse .navbar-brand {
        color: var(--primary);
        font-weight: 600;
        letter-spacing: 0.6px;
        font-size: 18px;
        display: flex;
        align-items: center;
}
.navbar-inverse .navbar-brand img {
        height: 56px;
        width: auto;
        margin-right: 12px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.navbar-inverse .navbar-nav>li>a {
        color: var(--primary);
        padding: 12px 18px;
        border-radius: 8px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 13px;
        transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.navbar-inverse .navbar-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
}
.navbar-inverse .navbar-toggle {
        border-color: rgba(0,0,0,0.06);
}
.navbar-inverse .navbar-toggle .icon-bar {
        background-color: var(--primary);
}

/* Brand logo sizing and alignment */
.navbar { min-height: 64px; }
.navbar-brand {
        display: flex;
        align-items: center;
        height: 64px;
        padding: 8px 12px;
}
.navbar-brand img {
        height: 48px;
        width: auto;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
}

/* Navbar link hover and active styles: white text on primary blue background */
.navbar-inverse .navbar-nav > li > a {
        transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
        color: #ffffff !important;
        background-color: var(--primary) !important;
        transform: translateY(-1px);
}
.navbar-inverse .navbar-nav > li.active > a,
.navbar-inverse .navbar-nav > li.active > a:hover {
        color: #ffffff !important;
        background-color: var(--primary) !important;
}

/* Ensure nav links have spacing and rounded background when active/hover */
.navbar-inverse .navbar-nav > li > a {
        padding: 12px 16px;
        border-radius: 6px;
}

/* Responsive adjustments: stack nav items on small screens */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav { display: block; margin-left: 0; }
  .navbar-inverse .navbar-nav > li { display: block; }
  .navbar-inverse .navbar-nav > li > a { display: block; margin: 6px 0; }
  .navbar-inverse .navbar-brand img { height: 44px; }
}

img, video, audio {
        margin-top: 20px;
        max-width: 100%;
}

.caption {
        margin-top: 10px;
        color: var(--text);
}

/* Feature cards */
.features .card {
        background:#fff;
        border-radius:8px;
        padding:20px;
        box-shadow:0 6px 20px rgba(0,0,0,0.06);
        margin-bottom:20px;
}
.features .col-sm-4 .card h3 { color:var(--primary); }

.features .col-sm-4 { margin-bottom:20px; }

.site-footer{
        padding:20px 0;
        margin-top:40px;
        border-top:1px solid #eee;
        color:#666;
        background:transparent;
}

@media (min-width:768px){
  .features .card{height:150px}
}