:root{
  /* Match Mangtopup primary blue */
  --kb-primary:#2563eb;
  --kb-primary-rgb:37,99,235;
}

/* Bootstrap primary override (CDN Bootstrap still works, we just tweak tokens) */
:root{
  --bs-primary: var(--kb-primary);
  --bs-primary-rgb: var(--kb-primary-rgb);
}

body{
  font-family:"Open Sans","Helvetica Neue",Calibri,Helvetica,Arial,sans-serif;
  font-size:1rem;
  color:#373a3c;
}
h1,h2,h3,h4,h5{
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
  font-weight:600;
}

/* Header / Jumbotron */
.jumbotron{
  margin-bottom:0;
  background: var(--kb-primary) center center no-repeat;
  background-size:cover;
  position:relative;
  padding:.5rem 1rem 3rem 1rem;
  color:#fff;
}
.jumbotron.header-small{height:auto;}
.jumbotron .cover{
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.10);
  position:absolute;
  top:0;left:0;
  z-index:1;
}
.jumbotron .container{
  max-width:50rem;
  z-index:3;
  position:relative;
}
.jumbotron .container h1{color:#fff;margin-bottom:1.5rem;display:inline-block;}
.jumbotron .container p.lead{color:#eee;font-size:18px;}
.jumbotron .jumbotron-heading{font-weight:300;}

/* Navbar */
.navbar{
  z-index:10;
  margin-bottom:0;
  padding-top:.3rem;
}
.navbar .navbar-brand{color:#fff;margin-left:30px;}
.navbar .navbar-brand small{color:#ddd;}
.navbar .navbar-brand img{max-height:50px;}
.navbar .navbar-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.navbar .navbar-nav .nav-item a.nav-link{color:#fff;line-height:1rem;}
.navbar.navbar-expand-lg{justify-content:space-between;}
.navbar .navbar-collapse{flex-grow:0;}
ul.nav .header-link{padding-top:10px;}

.breadcrumb{background-color:transparent;margin-bottom:30px;}

/* Search */
.search-form{position:relative;z-index:10;}
.search-form .input-group.search{box-shadow:0px 1px 3px 1px rgba(18, 11, 224, 0.326);}
.search-form .input-group .input-group-text i{font-size:1.2rem;color:#a7a7a7;}
.search-form .search .search-field{
  outline:none;
  box-shadow:none;
  width:auto;
  height:55px;
  padding-left:15px;
  border:0 none;
  flex-grow:1;
  border-radius:0;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}
.search-form .search .input-group-text{
  padding:7px 10px;
  height:55px;
  font-size:1.5rem;
  background-color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0 none;
  cursor:pointer;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}
.search-form .input-group.search > .btn{
  height:55px;
  padding:7px 10px;
  font-size:1.5rem;
  background-color:#fff;
  border:0 none;
  cursor:pointer;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Sections */
.section{
  padding-top:3rem;
  padding-bottom:3rem;
  background-color:#fff;
}
.section.paddingt-2{padding-top:2rem;}
.section h2{margin-bottom:1rem;}
.section ul{
  padding-left:20px;
  margin-top:35px;
  font-weight:300;
  list-style:none;
}
.section ul li{margin:10px 0;}
.section ul li>span{
  display:none;
  border-top:1px solid #eee;
  margin-top:10px;
  padding-top:10px;
}
.section ul li.faq-item.is-open>span{display:block;}
.section ul li:hover:before{color:#777;}
.section ul li a:hover{text-decoration:none;}

.section ul.homepage-listing li:before,
.articles-listing li:before{
  content:'\\f15c';
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  display:inline-block;
  margin-right:15px;
  color:#cccccc;
}
.section ul.homepage-listing li.faq-item:before,
.articles-listing li.faq-item:before{content:'\\f059';}
.articles-listing li.subcategory-item:before{content:'\\f07b';}
li.faq-item a.read-more{display:block;width:100%;text-align:center;background-color:#eee;font-size:1rem;}

/* Category cards */
.category-box i{margin:15px 0 15px 15px;font-size:4.7rem;}
a.card-link{color:#1619db;}
a.card-link:hover{text-decoration:none;}
a.card-link:hover .card{background-color:#131add9f;color:#f5f5f5;}
a.card-link .card{background-color:#f5f5f5;}
a.card-link .card.card-minimal{
  padding:.5rem 2.5rem;
  border:0 none;
  height:100%;
}
a.card-link .card.card-minimal .card-body{
  flex-direction:column;
  justify-content:space-between;
  display:flex;
}
a.card-link .card.card-minimal h4{margin-bottom:0;font-weight:300;}
a>.card{transition:all ease .2s;}
a>.card:hover{border:1px solid #0B2A46;}

.author-avatar{
  width:32px;height:32px;
  overflow:hidden;
  background-size:cover;
  display:inline-block;
  background-position:center center;
  vertical-align:middle;
  border-radius:50px;
  margin:0 7px;
}

/* Article */
h1.article-heading{margin-bottom:1rem;font-weight:900;font-size:36px;}
.article .blockquote,
.article blockquote{
  border-left:5px solid #4ca8de;
  color:rgb(155,145,145);
  font-size:1.2em;
  margin:0;
  padding:10px 0 10px 20px;
  background-color:#e2f2ff;
}
.content{
  font-size:1rem;
  line-height:30.4px;
  font-weight:400;
  color:#343434;
}
.content img{max-width:100%;}
.content figure{text-align:center;background-color:#fbfbfb;}
.content figure figcaption{font-size:.8rem;text-align:center;}
.content blockquote{
  background:#f9f9f9;
  border-left:5px solid #ccc;
  margin:1.5rem 10px;
  padding:1.5rem 1.3rem;
  quotes:"\\201C" "\\201D" "\\2018" "\\2019";
  font-weight:lighter;
  color:#3c3c3c;
  font-size:1.17rem;
}
.content blockquote::before{
  color:#ccc;
  font-family:"Font Awesome 5 Free";
  content:'\\F10D';
  font-weight:900;
  font-size:1.7rem;
  line-height:1em;
  margin-right:.35em;
  vertical-align:-.1em;
  margin-bottom:.35rem;
}
.content blockquote p{margin-bottom:0;display:inline;}
.content .callout{
  font-size:1rem;
  margin-top:25px;
  margin-bottom:25px;
  background-color:#ebf7ff;
  padding:15px;
  margin-left:10px;
  border-left:3px solid #22a5fc;
  color:#004085;
  position:relative;
}
.content .callout.success{background-color:#d4edda;border-color:#155724;color:#155724;}
.content .callout.warning{background-color:#fff3cd;border-color:#856404;color:#856404;}
.content .callout.danger{background-color:#f8d7da;border-color:#721c24;color:#721c24;}
.content pre{
  background-color:#eee;
  border-radius:5px;
  padding:10px 15px;
  color:rgb(230,8,47);
  word-break:break-all;
}

/* Notification bar (optional in template) */
.notification{
  position:fixed;
  bottom:0;left:0;
  width:100%;
  padding:10px;
  background-color:#30c9e8;
  z-index:300;
  display:none;
}
.notification.success{background-color:#31cd64;}
.notification.error{background-color:#e83a30;}
.notification .message{color:#fff;}
.notification .message a:not(.btn){color:#fff;text-decoration:underline;}
.notification .message a.btn{color:#1f1f1f;}

/* Mobile polish */
@media (max-width: 991.98px){
  .navbar .navbar-brand{margin-left:0;}
  .jumbotron{padding: .75rem 1rem 2.25rem 1rem;}
}