/* ===========================
   General
   =========================== */
body {
  padding-top: 70px;
  font-family: 'Lato', sans-serif;
  color: #333;
}

/* ===========================
   Navbar
   =========================== */
.navbar-brand img {
  max-height: 30px;
}
.navbar-inverse {
  background-color: #1a1a1a;
  border-color: #111;
}
.navbar-inverse .navbar-nav > li > a {
  color: #ccc;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a {
  color: #fff;
  background-color: #333;
}

/* ===========================
   Hero showcase (home page)
   =========================== */
#wrap {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 60px 0;
  color: white;
  min-height: 380px;
  display: flex;
  align-items: center;
}
#wrap h1 { color: white; font-weight: 300; font-size: 2.5em; }
#wrap .list ul { list-style: none; padding: 0; }
#wrap .list li { margin: 10px 0; }
#wrap .li-bg {
  background: rgba(255,255,255,0.1);
  padding: 10px 20px;
  border-radius: 3px;
  display: block;
  font-size: 1.1em;
}
#wrap .li-bg i { margin-right: 10px; }

/* ===========================
   Services section
   =========================== */
.services { margin: 20px 0; }
.services ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.services li { text-align: center; padding: 20px; flex: 1; min-width: 100px; }
.services li i { color: #428bca; }
.services li p { margin-top: 10px; font-size: 0.9em; }

/* ===========================
   Block headers
   =========================== */
.block-header h2 { margin: 30px 0 20px; font-weight: 300; }
.block-header .title { border-bottom: 3px solid #428bca; padding-bottom: 5px; }

/* ===========================
   Product thumbnails / carousel
   =========================== */
.my_carousel { overflow: hidden; position: relative; }
#carousel_container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  transition: transform 0.5s ease;
}
#carousel_container li { min-width: 33.333%; padding: 10px; box-sizing: border-box; flex-shrink: 0; }
.carousel_nav { margin-bottom: 10px; }
.carousel_nav a {
  padding: 6px 12px;
  background: #428bca;
  color: white;
  border-radius: 3px;
  margin-left: 5px;
  display: inline-block;
}
.carousel_nav a:hover { background: #357ebd; color: white; text-decoration: none; }

.thumbnail { border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
.thumbnail:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.2); transform: translateY(-2px); transition: all 0.2s; }
.thumbnail .visit { background: rgba(66,139,202,0.9); padding: 8px; text-align: center; }
.thumbnail .visit a { color: white; }
.thumbnail .caption { padding: 15px; }
.thumbnail h4 { margin-top: 0; }
.rating i { color: #f0ad4e; }
.read-more-left { color: #428bca; }

/* ===========================
   Section header (blue header)
   =========================== */
.section-header {
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  color: white;
  padding: 40px 0;
  margin-bottom: 30px;
}
.section-header h1 { color: white; font-weight: 300; margin: 0; }
.section-header h1 span { border-left: 4px solid #5bc0de; padding-left: 15px; }

/* ===========================
   About page
   =========================== */
.about-icon { font-size: 3em; color: #428bca; margin-bottom: 15px; text-align: center; }
.about-p { color: #666; }
.about-btn { text-align: center; margin: 30px 0; }

/* ===========================
   hl (highlight headings)
   =========================== */
h3.hl { border-left: 4px solid #428bca; padding-left: 10px; margin: 20px 0 15px; }
h2.hl { border-left: 4px solid #428bca; padding-left: 10px; margin: 20px 0 15px; }
h1.hl { border-left: 4px solid #428bca; padding-left: 10px; margin: 20px 0 15px; }
.top-zero { margin-top: 0; }

/* ===========================
   Info boards
   =========================== */
.info-board { border-radius: 4px; padding: 20px; margin: 20px 0; }
.info-board-blue { background: #d9edf7; border-left: 4px solid #31b0d5; }
.info-board h4 { margin-top: 0; color: #31708f; }

/* ===========================
   Sidebar navigation
   =========================== */
.bs-sidebar { background: #f8f8f8; border-radius: 4px; padding: 10px 0; margin-bottom: 20px; }
.bs-sidebar li a {
  padding: 8px 15px;
  display: block;
  color: #555;
  border-left: 3px solid transparent;
}
.bs-sidebar li.active a,
.bs-sidebar li a:hover {
  background: #428bca;
  color: white;
  border-left: 3px solid #2a6496;
  text-decoration: none;
}

/* ===========================
   Buttons
   =========================== */
.hl-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}
.hl-btn-blue { background: #428bca; color: white; border: 1px solid #357ebd; }
.hl-btn-blue:hover { background: #357ebd; color: white; text-decoration: none; }
.hl-btn-green { background: #5cb85c; color: white; border: none; cursor: pointer; }
.hl-btn-green:hover { background: #4cae4c; color: white; text-decoration: none; }
.hl-btn-lg { padding: 14px 28px; font-size: 1.1em; }
.learnMore { display: inline-block; margin-top: 20px; }

/* ===========================
   iMac/iPad showcase divs
   =========================== */
.showcase { position: relative; height: 280px; }
.iMac {
  background: linear-gradient(135deg, #2c3e50, #3498db);
  height: 220px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3em;
}
.iMac::after { content: '\f109'; font-family: 'FontAwesome'; }
.iPad {
  background: linear-gradient(135deg, #2c3e50, #1abc9c);
  height: 140px;
  width: 120px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2em;
}
.iPad::after { content: '\f10a'; font-family: 'FontAwesome'; }

/* ===========================
   img-about
   =========================== */
.img-about { float: right; max-width: 300px; margin-left: 20px; margin-bottom: 15px; }

/* ===========================
   Footer
   =========================== */
footer {
  background: #222;
  color: #ccc;
  padding: 40px 0;
  margin-top: 40px;
}
footer h3 { color: white; }
footer a { color: #aaa; }
footer a:hover { color: white; text-decoration: none; }
footer .social ul { list-style: none; padding: 0; display: flex; gap: 10px; }
footer .social li a { font-size: 1.5em; }
footer .headline { border-bottom: 1px solid #444; margin-bottom: 15px; padding-bottom: 5px; }

/* ===========================
   Legal bar
   =========================== */
.legal { background: #111; color: #666; padding: 15px 0; font-size: 0.9em; }
.legal a { color: #888; }
.legal a:hover { color: #aaa; }

/* ===========================
   iHomeServer layout
   =========================== */
.ihs-page-header {
  background: #2c3e50;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.ihs-tabs { border-bottom: none; margin: 0; }
.ihs-tabs > li > a {
  color: #ccc;
  border-radius: 0;
  padding: 14px 16px;
  border: none;
}
.ihs-tabs > li.active > a,
.ihs-tabs > li.active > a:hover,
.ihs-tabs > li.active > a:focus {
  background: #428bca;
  color: white;
  border: none;
  border-radius: 0;
}
.ihs-tabs > li > a:hover { background: #3a506b; color: white; }
.ihs-tabs > li.dropdown.active > a { background: #428bca; color: white; }

/* ===========================
   iHomeServer page title
   =========================== */
#page-title {
  padding: 20px 30px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  background: #f9f9f9;
}
#page-title h2 { margin: 0; color: #555; }

/* ===========================
   iHomeServer hero carousel
   =========================== */
#ihs-hero { margin-bottom: 0; }
.ihs-slide {
  min-height: 260px;
  padding: 40px 0;
  color: white;
  display: flex;
  align-items: center;
}
.ihs-slide h2 { color: white; font-weight: 300; }
.ihs-slide p { color: #ddd; font-size: 1.1em; margin: 15px 0; }
.ihs-slide-icon { font-size: 5em; color: rgba(255,255,255,0.3); margin-top: 20px; }
.carousel-control { background: none !important; }

/* ===========================
   iHomeServer feature boxes
   =========================== */
.ihs-feature-box { padding: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; }
.ihs-feature-icon { color: #428bca; margin-bottom: 10px; }
.ihs-feature-box h3 { margin-top: 10px; }
.ihs-jumbotron { background: #f0f4f8; border-left: 4px solid #428bca; padding: 20px; border-radius: 4px; }
.ihs-jumbotron h2 { color: #2c3e50; margin-top: 0; }

/* ===========================
   Reviews
   =========================== */
.blockquote-blue {
  border-left: 4px solid #428bca;
  background: #f0f8ff;
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: 0 4px 4px 0;
}
.blockquote-blue footer { color: #555; margin-top: 10px; }
.blockquote-right { border-left: none; border-right: 4px solid #5cb85c; background: #f0fff0; text-align: right; }
.blockquote-right footer { text-align: right; }

/* ===========================
   m-btn (Windows Store button)
   =========================== */
.m-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  color: white;
}
.m-btn.big { padding: 14px 30px; font-size: 1.1em; }
.m-btn.blue { background: #0078d7; color: white; }
.m-btn.blue:hover { background: #005a9e; color: white; text-decoration: none; }
.m-btn.rnd { border-radius: 25px; }

/* ===========================
   Action buttons
   =========================== */
.action-button { margin: 20px 0; }

/* ===========================
   Scroll to top
   =========================== */
#toTop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #428bca;
  color: white;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#toTop:hover { background: #357ebd; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 767px) {
  #carousel_container li { min-width: 100% !important; }
  .services ul { flex-wrap: wrap; }
  .services li { min-width: 50%; }
  .ihs-tabs > li > a { padding: 10px 8px; font-size: 0.85em; }
  .img-about { float: none; max-width: 100%; margin: 0 0 15px 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #carousel_container li { min-width: 50% !important; }
}

/* ===========================
   img-center
   =========================== */
.img-center { display: block; margin: 0 auto; }