@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
/* ==========================================================================
    HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222;
}
body {
  font-size: 1em;
  line-height: 1.4;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
img {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
.text-muted {
  color: #848b8f;
}
/* ==========================================================================
    Forms
   ========================================================================== */
form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="password"] {
  background: #39c8e2;
  color: #777;
  border: 1px solid #dddddd;
  padding: 12px 15px;
  width: 100%;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="number"]:focus,
form input[type="password"]:focus {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: #f57e37;
}
label {
  font-weight: normal;
}
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
  outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
  font-family: 'flexslider-icon';
  src: url('../fonts/flexslider-icon.eot');
  src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .slides {
  display: block;
}
* html .slides {
  height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
  display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
  margin: 0;
  background: transparent;
  position: relative;
  zoom: 1;
  overflow: hidden;
}
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}
.flexslider .slides {
  zoom: 1;
}
.carousel li {
  margin-right: 5px;
}
/* Direction Nav */
.flex-direction-nav {
  height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;margin-left: -10px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}
.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}
.flexslider:hover .flex-prev {
  opacity: 1;
  left: 30px;
}
.flexslider:hover .flex-next {
  opacity: 1;
  right: 30px;
}
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
}
.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  content: '\f001';
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}
/* Pause/Play */
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a.flex-play:before {
  content: '\f003';
}
/* Control Nav */
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 100%;
  display: block;
  opacity: .7;
  cursor: pointer;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}
#lightbox {
  cursor: pointer;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000000;
  /* IE Fallback (Solid Colour) */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);
  background: rgba(0, 0, 0, 0.7);
  -webkit-filter: none !important;
  z-index: 99999;
}
#lightbox img {
  display: block;
  position: absolute;
  border: 5px solid #fff;
  box-shadow: 0 0 20px #000;
  border-radius: 1px;
}
body.blurred > * {
  -webkit-filter: blur(2px);
}
.lightbox-loading {
  background: url(../images/loading.gif) center center no-repeat;
  width: 31px;
  height: 31px;
  margin: -16px 0 0 -16px;
  position: absolute;
  top: 48%;
  left: 50%;
}
.lightbox-caption {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 1000;
  background: #000;
  background: rgba(0, 0, 0, 0.7);
}
.lightbox-caption p {
  margin: 0 auto;
  max-width: 70%;
  display: inline-block;
  display: inline;
  zoom: 1;
  padding: 10px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}
.lightbox-button {
  position: absolute;
  z-index: 9999;
  background: no-repeat center center;
  width: 32px;
  height: 32px;
  opacity: 0.4;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.lightbox-button:hover,
.lightbox-button:focus {
  opacity: 1;
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
}
.lightbox-close {
  right: 10px;
  top: 10px;
  background-image: url('../images/close.png');
}
.lightbox-next {
  right: 10px;
  top: 48%;
  background-image: url('../images/next.png');
}
.lightbox-previous {
  left: 10px;
  top: 48%;
  background-image: url('../images/previous.png');
}
/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links for images, or javascript/internal links
     */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* ==========================================================================
    Structure & Defaults
   ========================================================================== */
html,
body {
  font-size: 100%;
  width: 100%;
  height: 100%;
}
body {
  background: #ffffff;
  color: #777777;
  font-size: 13px;
  line-height: 24px;
  font-family: 'Open Sans', sans-serif;
}
a {
  color: #39c8e2;
  text-decoration: none !important;
  -webkit-transition: color 200ms ease-in-out;
  -moz-transition: color 200ms ease-in-out;
  -o-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out;
}
a:hover {
  color: #232323;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
}
/* ==========================================================================
    Header
   ========================================================================== */
.navbar {
  margin-bottom: 0;
}
.navbar-default .navbar-toggle {
  background-color: #fff;
  border-color: #fff;
  font-size: 14px;
  color: #39c8e2;
  margin-top: 18px;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #fff;
  border: 1px solid #fff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #1eb0ca;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.navbar-header {
  padding-bottom: 15px;
}
.navbar-default .navbar-nav > li > a {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #fff;
}
.navbar-default .navbar-nav > li {
  border-right: 1px solid #1eb0ca;
  padding: 10px;
}
.navbar-default .navbar-nav > li:first-child {
  border-left: 1px solid #1eb0ca;
}
.navbar-default .navbar-brand {
  text-transform: uppercase;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  padding-top: 25px;
  padding-bottom: 25px;
}
.navbar-default .navbar-brand:hover {
  color: #fff;
}
.site-header {
  background-color: #39c8e2;
  color: #ffffff;
  position: relative;
  z-index: 9999;
}
.site-slider {
  position: relative;
  z-index: 16;
}
.site-slider .slide {
  position: relative;
}
.site-slider .overlay {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
}
.site-slider .slider-caption {
  position: absolute;
  z-index: 12;
  width: 100%;
  top: 20%;
  text-align: center;
}
.site-slider .slider-caption .title {
  width: 450px;
  margin: 0 auto;
  border: 4px solid #fff;
  padding: 40px 40px 20px 40px;
  text-align: center;
}
.site-slider .slider-caption .title h2 {
  margin: 0 0 20px 0;
  font-size: 28px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
}
.site-slider .slider-caption .slider-button {
  color: #fff;
  margin-top: 30px;
  display: inline-block;
  border: 2px solid #fff;
  padding: 7px 45px;
  text-transform: uppercase;
  font-weight: 700;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}
.first-section {
  color: #fff;
  position: relative;
  z-index: 17;
  padding: 80px 0;
  margin-top: -280px;
  background: url(../images/bg1.png) no-repeat top center;
  background-size: cover;
}
.first-section h3 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
}
.first-section .image-holder {
  margin-top: 50px;
  overflow: hidden;
}
.second-section {
  color: #333333;
  position: relative;
  z-index: 18;
  padding: 80px 0;
  margin-top: -50px;
  background: url(../images/bg2.png) no-repeat top center;
  background-size: cover;
}
.second-section .col-md-3 {
  margin-top: 60px;
}
.second-section h4 {
  font-size: 16px;
  font-weight: 600;
}
.third-section {
  color: #fff;
  position: relative;
    z-index: 19;
    padding: 60px 0 20px 0;
    margin-top: -42px;
  background: url(../images/bg3.png) no-repeat top center;
  background-size: cover;
}
.third-section h2 {
  color: #1c6876;
  font-weight: 700;
  margin: 0;
}
.third-section span {
  display: block;
  margin-bottom: 30px;
}
.third-section .col-md-6 {
  margin-bottom: 60px;
}
.third-section ol {
  margin-bottom: 30px;
}
.third-section ol li {
  color: #39c8e2;
}
.third-section ol li h4 {
  font-size: 15px;
  margin: 0;
}
.third-section ol li p {
  margin: 0 0 20px 20px;
  color: #fff;
}
.third-section ol li ol {
  margin: 0 0 30px 20px;
}
.third-section ol.no-color li {
  color: #fff;
}
.fourth-section {
  color: #fff;
  position: relative;
  z-index: 19;
  padding: 150px 0;
  margin-top: -50px;
  background: url(../images/bg4.png) no-repeat top center;
  background-size: cover;
}
.fourth-section h2 {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 20px 0;
}
.fourth-section a {
  font-size: 18px;
}
.fourth-section a:hover {
  color: #39c8e2;
}
.page-h {
  background: url(../images/headerbg.png) no-repeat bottom center;
  background-size: cover;
  padding: 60px 0;
}
.page-h h3 {
  font-size: 28px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}
.filter {
  background: url(../images/filterbg.png) no-repeat top center;
  background-size: cover;
  padding: 50px 0;
  margin-top: -60px;
}
.filter ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.filter ul li {
  display: inline-block;
  margin: 0 20px;
  color: #fff;
  cursor: pointer;
}
.filter ul li.active {
  color: #39c8e2;
}
.products {
  background: url(../images/productsbg.png) no-repeat top center;
  background-size: cover;
  padding: 120px 0 80px 0;
  margin-top: -40px;
}
.products .thumb-p {
  overflow: hidden;
  position: relative;
  -webkit-border-radius: 6px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 6px;
  -moz-background-clip: padding;
  border-radius: 6px;
  background-clip: padding-box;
}
.products .thumb-p img {
  width: 100%;
}
.products .thumb-p .overlay-p {
  background-color: #39c8e2;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-border-radius: 6px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 6px;
  -moz-background-clip: padding;
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.products .thumb-p .overlay-p a {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -8px;
  font-size: 18px;
  color: #fff;
}
.products .thumb-p:hover .overlay-p {
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}
.products .content-p {
  margin-bottom: 40px;
}
.products .content-p h4 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  margin: 15px 0 5px 0;
}
.products .content-p span {
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  color: #000;
}
#Grid .mix {
  display: none;
}
button.main-button,
.main-button {
  background-color: #39c8e2;
  color: #fff;
  padding: 10px 15px;
  text-transform: uppercase;
  font-weight: 700;
  outline: 0;
  border: 0;
  -webkit-border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 4px;
  -moz-background-clip: padding;
  border-radius: 4px;
  background-clip: padding-box;
}
.contact {
  background: url(../images/contactbg.png) no-repeat top center;
  background-size: cover;
  padding: 120px 0;
  margin-top: -55px;
}
.contact fieldset {
  margin-bottom: 30px;
}
.contact fieldset input,
.contact fieldset textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  background: rgba(250, 250, 250, 0.7);
  border: 1px solid #999;
  color: #777;
}
.contact fieldset input:focus,
.contact fieldset textarea:focus {
  border: 1px solid #39c8e2;
  outline: 0;
}
.contact fieldset textarea {
  padding: 15px;
}
.page-h.About US {
  padding-bottom: 100px;
}
.video-featured {
  background: url(../images/bg1.png) no-repeat top center;
  background-size: cover;
  padding: 160px 0;
  margin-top: -130px;
}
.video-featured .video-holder {
  overflow: hidden;
}
.video-featured .video-holder iframe {
  width: 100%;
}
.About US-s {
  background: url(../images/about_us-removebg-preview.png) no-repeat top center;
  background-size: cover;
  padding: 180px 0 120px 0;
  margin-top: -120px;
}
.product-left {
  color: #444444;
  padding-right: 30px;
}
.product-left h3 {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
}
.product-left .product-image {
  margin-right: 15px;
  float: left;
  overflow: hidden;
}
.product-content {
  overflow: hidden;
}
.product-content h3 {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
}
.product-right {
  padding-left: 30px;
  color: #fff;
}
.product-right .product-image {
  float: right;
  overflow: hidden;
  margin-left: 15px;
}
.site-footer {
  position: relative;
  z-index: 19;
  padding: 100px 0 40px 0;
  margin-top: -70px;
  background: url(../images/footerbg.png) no-repeat top center;
  background-size: cover;
}
.site-footer ul.social {
  width: 120px;
  height: 120px;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: relative;
  background: url(../images/socialbg.png) no-repeat center;
}
.site-footer ul.social li {
  display: inline-block;
  position: absolute;
}
.site-footer ul.social li a {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  color: #fff;
}
.site-footer ul.social li.facebook {
  top: 0;
  left: 46px;
}
.site-footer ul.social li.facebook a {
  background-color: #4c66a4;
}
.site-footer ul.social li.twitter {
  top: 46px;
  left: 0;
}
.site-footer ul.social li.twitter a {
  background-color: #55acee;
}
.site-footer ul.social li.linkedin {
  top: 46px;
  left: 88px;
}
.site-footer ul.social li.linkedin a {
  background-color: #006699;
}
.site-footer ul.social li.rss {
  top: 88px;
  left: 46px;
}
.site-footer ul.social li.rss a {
  background-color: #fb6405;
}
.site-footer p {
  display: block;
}
/*  Medium devices (desktops, 992px and up)  */
@media (max-width: 992px) {
  .slider-button {
    display: none;
  }
}
/*  Small devices (tablets, 768px and up)  */
@media (max-width: 768px) {
  .slider-caption {
    display: none;
  }
  .first-section {
    background-position: left;
    margin-top: -20px;
  }
  .contact form {
    margin-top: 60px;
  }
  .product-left {
    color: #fff;
  }
}
/* Responsive Design */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Responsive adjustments (mobile & tablet). Scopes only to max-width: 992px
   so desktop layout and design remain exactly unchanged. These rules
   override inline heights/margins and ensure no horizontal scroll. */
@media (max-width: 992px) {
  /* Prevent horizontal scroll caused by full-viewport tricks */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Make header flexible on small screens (overrides inline height) */
  .site-header {
    height: auto !important;
    padding: 8px 0 !important;
  }

  /* Scale logo down on phones/tablets without changing desktop image */
  .site-header .navbar-brand img {
    height: auto !important;
    max-height: 86px !important;
    width: auto !important;
    max-width: 90% !important;
    margin-top: 0 !important;
    display: block !important;
  }

  /* Navbar items should size to content and wrap instead of forcing height */
  .navbar-nav > li { height: auto !important; }

  /* Make dropdown overlays full-width and scrollable when long */
  .navbar-default .dropdown-menu.site-header,
  .navbar-nav .open > .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    background-clip: padding-box !important;
  }

  /* Make dropdown links full-width and tap-friendly */
  .navbar-default .dropdown-menu > li > a {
    display: block !important;
    padding: 12px 16px !important;
    white-space: normal !important;
  }

  /* Ensure slider images and containers scale down on mobile */
  .site-slider, .site-slider .flexslider, .site-slider .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  .site-slider .slides img { width: 100% !important; height: auto !important; }

  /* Override large inline margins used for desktop layout */
  .first-section .image-holder,
  .third-section .image-holder { margin-left: 0 !important; margin-right: 0 !important; }

  /* Sections that had fixed/heavy heights should be fluid on small screens */
  .third-section { height: auto !important; }

  /* Columns: ensure Bootstrap stacking behavior isn't blocked by inline styles */
  .second-section .col-md-3, .first-section .col-md-6, .third-section .col-md-6 {
    float: none !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Give some breathing room for text blocks on small viewports */
  .first-section, .second-section, .third-section, .fourth-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Improve tap targets for the footer social links and back-to-top */
  .site-footer .social li a { font-size: 22px !important; padding: 8px !important; }
  #back-to-top { right: 14px !important; bottom: 14px !important; }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
  .container {
    padding: 5px;
  }
  nav ul {
    flex-direction: column;
  }
}

/* Ensure dropdowns that reuse .site-header keep header colors and are clickable on all viewports */
.navbar-default .dropdown-menu.site-header {
  background-color: #39c8e2 !important;
  color: #ffffff !important;
  border: none !important;
}
.navbar-default .dropdown-menu.site-header > li > a {
  color: #ffffff !important;
}
.navbar-default .dropdown-menu.site-header > li > a:hover,
.navbar-default .dropdown-menu.site-header > li > a:focus {
  background-color: rgba(0,0,0,0.05) !important;
  color: #ffffff !important;
}

/* Make sure submenu dropdowns are visible and above other content */
.dropdown-submenu > .dropdown-menu {
  position: absolute;
  z-index: 10000;
}

/* Ensure dropdown links are clickable and not blocked by overlays */
.navbar-default .dropdown-menu a {
  pointer-events: auto;
}

/* Mobile-specific fixes: ensure dropdowns stack vertically and do not overlap */
@media (max-width: 768px) {
  /* Make dropdown menus overlay the page on mobile to prevent pushing
     or resizing the hero slider. Dropdown container is positioned
     absolutely below the header and is scrollable if content is tall. */
  .navbar-default .dropdown-menu.site-header,
  .navbar-nav .open > .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    width: 100% !important;
    display: none !important; /* shown only when parent has .open */
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    background-clip: padding-box !important;
    z-index: 10001 !important;
    max-height: calc(100vh - 90px) !important; /* keep within viewport */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* When opened via JS (.open), show the absolute overlay */
  .navbar-nav .open > .dropdown-menu,
  .dropdown.open > .dropdown-menu,
  .dropdown-submenu.open > .dropdown-menu {
    display: block !important;
  }

  /* Ensure hero slider stays full-viewport width even when navbar dropdown opens */
  .site-slider {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  /* Make the slider viewport span the full viewport width and center it
     so dropdown overlays don't change its width */
  .site-slider .flexslider,
  .site-slider .flex-viewport {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }

  .site-slider .slides img {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block !important;
  }

  /* Disable hover-to-open behavior on mobile to avoid menus sticking open */
  .dropdown-submenu:hover > .dropdown-menu {
    display: none !important;
  }

  /* Allow list items to size to content (override inline heights) */
  .navbar-default .dropdown-menu > li {
    height: auto !important;
    margin-left: 0 !important;
  }

  /* Make anchors block-level, wrap text, and increase tap target size */
  .navbar-default .dropdown-menu > li > a {
    display: block !important;
    padding: 12px 18px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* Nested submenus should appear as indented blocks inside the overlay
     (position: static within the absolute overlay so they don't fly out). */
  .navbar-nav .open > .dropdown-menu .dropdown-submenu > .dropdown-menu,
  .dropdown-menu .dropdown-submenu > .dropdown-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding-left: 12px !important;
    display: none !important; /* shown when submenu has .open */
    width: 100% !important;
  }

  /* Show nested submenu when its parent has .open */
  .dropdown-submenu.open > .dropdown-menu {
    display: block !important;
  }

  /* Slight visual indent for second-level items to indicate hierarchy */
  .dropdown-menu .dropdown-submenu > li > a {
    padding-left: 28px !important;
  }

  /* Ensure caret indicators remain visible and don't overlap text */
  .dropdown-toggle .caret, .submenu-toggle .caret {
    float: right;
    margin-top: 6px;
  }
}



/* Desktop: use visibility/opacity (not display) to show dropdowns so
   they overlay content and don't push the slider (prevents reflow).
   This is scoped to desktop only; mobile rules in the file keep using
   display so touch behaviour and stacking remain intact. */
@media (min-width: 769px) {
  /* Make all site header dropdowns overlay and be controllable via opacity */
  .site-header .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 10050 !important;
    width: auto !important;
    display: block !important; /* ensure layout for absolute element */
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(6px) scale(0.99) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
    pointer-events: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    background-clip: padding-box !important;
  }

  /* Show overlay when parent is hovered or opened by JS */
  .site-header .dropdown:hover > .dropdown-menu,
  .site-header .dropdown.open > .dropdown-menu,
  .site-header .dropdown-submenu:hover > .dropdown-menu,
  .site-header .dropdown-submenu.open > .dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  /* Slight separation for nested submenus that fly out to the right */
  .site-header .dropdown-submenu > .dropdown-menu {
    left: 100% !important;
    top: 0 !important;
  }

  /* Keep slider stacking above page content but below the dropdown overlay */
  .site-slider { z-index: 1; }
}