@import url(fontawesome.css);
@import url(animate.css);

body {
  color: #666;
  font-family: Open Sans, Arial, sans-serif;
  font-size: 14px;
  background-color: #fff;
  line-height: 1.7em;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --headings-color: #002396;
  --text-white: #fff;
  --text-dark: #333;
  --text-brand: #002396;
  --brand-bg: #002396;
  --sideheading-color: #000;
  --fw-bold: 600;
  --font-weight-bolder: 800;
  --h3-font-weight: 700;
  --h4-font-weight: 600;
  --h5-font-weight: 500;

  --open-sans: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
}

.text-brand {
  color: var(--text-brand);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  color: #333;
}

body,
input,
textarea,
select {
  font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif
}

.h3-fw {
  font-weight: var(--h3-font-weight);
}

.h4-fw {
  font-weight: var(--h4-font-weight);
}

.h5-fw {
  font-weight: var(--h5-font-weight);
}

.fw-bolder {
  font-weight: var(--font-weight-bolder);
}

.text-dark {
  color: var(--text-dark);
}

p {
  line-height: 1.8;
}

/* .stickey-Header.sticky{top:;} */
.pre-header {
  background: var(--brand-bg);
  padding: 5px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 101;
}

.top-social {
  flex-direction: row;
}

.top-social a {
  color: #fff;
}

.stickey-Header {
  width: 100%;
  position: fixed;
  top: 35px;
  background: rgba(255, 255, 255, 0.43);
  z-index: 101;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.stickey-Header,
.stickey-Header a.navbar-brand {
  padding-top: 1px;
  padding-bottom: 1px;
}

.stickey-Header.sticky a.navbar-brand {
  max-width: 110px;
}

.stickey-Header.sticky-onscroll a.navbar-brand {
  max-width: 70px;
  padding-top: 0;
  padding-bottom: 0;
}

.stickey-Header.sticky-onscroll {
  /*
  position: fixed;
  top: 0; 
  width: 100%;
  */
  background: rgb(169 169 169);
  padding-top: 0.08rem;
  padding-bottom: 0.1rem;
}

.stickey-Header .navbar-collapse {
  flex-grow: unset;
}

.stickey-Header.navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

@media (max-width:992px) {
  .stickey-Header.sticky a.navbar-brand {
    max-width: 70px;
  }

  .stickey-Header {
    background: rgb(0 0 0 / 60%);
  }
}

@media (max-width:767px) {
  .pre-header {
    font-size: 0.7rem;
  }

  .top-social {
    display: none;
  }
}

/**/
.square-box .bg {
  background-size: initial;
  background-position: left top;
  background: url(../images/Rectangle.png) no-repeat;
  padding: 24px;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 800;
  color: #333;
}

.square-box .learn-more-button {
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: 500;
}

.bannerbg {
  background: url("../images/banner.jpg") no-repeat;
  background-size: cover;
  padding: 0 0 10% 0;
}

.banner-description-main {
  float: right;
  margin: 140px 0 0 0;
}

.banner-description {
  background: #002396;
  padding: 26px 30px 30px 30px;
}

.bannerbg h3 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.7em;
  color: #fff;
  font-size: 1.5rem;
}

.bannerbg a {
  color: #fff;
  border-radius: 0;
  letter-spacing: 2px;
  font-size: 1rem;
  text-decoration: none;
  padding: 15px 0 5px 0;
  display: inline-block;
}

.bannerbg a.banner-call {
  padding: 1rem;
  background: #fff;
  color: var(--text-brand);
  display: inline-block;
  float: right;
}

.banner-middle {
  bottom: 60px;
  text-align: left;
}

.banner-middle h1 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3.5rem;
  line-height: 1.4em;
  color: #fff;
  text-shadow: 3px 4px 5px #000;
}

.banner-middle p {
  font-size: 1.3rem;
  text-shadow: 3px 4px 5px #000;
}


.garage-door-repair {
  background-image: radial-gradient(circle at top right, #210b00 10%, rgba(33, 25, 21, 0) 100%), url(../images/1-4.jpg);
}

/**/
/*
inspired from https://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  now override the 3.3 new styles for modern browsers & apply opacity
  */
@media all and (transform-3d),
(-webkit-transform-3d) {

  .carousel-fade .carousel-inner>.item.next,
  .carousel-fade .carousel-inner>.item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .carousel-fade .carousel-inner>.item.prev,
  .carousel-fade .carousel-inner>.item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .carousel-fade .carousel-inner>.item.next.left,
  .carousel-fade .carousel-inner>.item.prev.right,
  .carousel-fade .carousel-inner>.item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* just for demo purpose */
/* 
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}

.item:nth-child(1) {
  background: url('http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg');
}

.item:nth-child(2) {
  background: url('https://cdn.pixabay.com/photo/2014/11/30/20/28/merle-552070_960_720.jpg');
  background-size: cover;
}

.item:nth-child(3) {
  background: url('http://www.planwallpaper.com/static/images/wallpaper-hd-3151.jpg');
}

.carousel-caption h3 {
  font-size: 80px;
} 
*/

/**/
.blue-color {
  color: var(--headings-color);
}

h3.heading {
  color: var(--headings-color);
  font-weight: 800;
  font-size: 1.6rem;
}

h3.small {
  color: var(--headings-color);
  font-weight: var(--h3-font-weight);
  font-size: 1.5rem;
}

.sideheading {
  color: var(--sideheading-color);
  font-weight: var(--h4-font-weight);
  font-size: 1.2rem;
}

.ul-list {
  font-family: var(--open-sans);
  font-size: 16px;
  line-height: 2.4em;
  color: var(--headings-color);
  font-weight: var(--h3-font-weight);
}

.services {
  background: var(--brand-bg);
}

.services {
  color: var(--text-white);
}

.services .box-width {
  width: 95%;
  margin: auto;
  padding: 0.6rem;
  color: var(--text-dark);
}

.services .learn-more-button {
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: var(--h5-font-weight);
  font-size: 1.1rem;
}

@media(max-width:767px) {
  .services .mbl-border {
    border-bottom: 2rem solid #002396;
  }
}




/* SLIDER main */
.slider-bg {
  background: rgb(88 133 138);
  color: var(--text-white);
}

.slider1 .view-all-work {
  background: var(--brand-bg);
  color: var(--text-white);
  padding: 1.4rem 1.6rem;
  border-radius: 0;
}

/* 
.overlay {
  background: rgb(0 0 0 / 35%);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
} 
*/

.slider-caption {
  position: absolute;
  width: 40%;
  left: 10%;
  top: 10%;
  text-align: center;
  z-index: 100;
  font-family: "Arimo", sans-serif;
}

.sliders .owl-carousel {
  z-index: 100;
}

.sliders i.fa-5x {
  font-size: 2.5rem;
}

.slider-caption .top-caption {
  text-align: center;
  font-size: 3rem;
  font-weight: var(--h3-font-weight);
}

.slider-caption .bottom-caption {
  text-align: center;
}

.slider-caption2 .middle-caption {
  width: 90%;
}

.slider-caption .middle-caption {
  display: inline-block;
  padding: 30px 50px;
  text-align: center;
  position: relative;
  z-index: 99;
  width: 80%;
  font-size: 1.3rem;
  line-height: 1.6em;
  font-weight: var(--h3-font-weight);
}

/* 
.slider-caption .middle-caption:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60px;
  width: 1px;
  height: 20px;
  background-color: red;
}

.slider-caption .middle-caption:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 1px;
  height: 20px;
  background-color: red;
} 
*/

.slider-caption2 {
  width: 100%;
  left: 0;
  top: 25%;
}


.owl-carousel .owl-nav [class*=owl-] {
  transition: all 0.3s ease;
}

.owl-carousel .owl-nav [class*=owl-].disabled:hover {
  background-color: #D6D6D6;
}

.owl-carousel {
  position: relative;
}

.owl-carousel .owl-item {
  min-height: 400px;
}

.owl-carousel .owl-next,
.owl-carousel .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 45%;
  color: #fff;
}

.owl-carousel .owl-prev {
  left: 10px;
}

.owl-carousel .owl-next {
  right: 10px;
}

#clients-logo-carousel.owl-carousel .owl-next,
#clients-logo-carousel.owl-carousel .owl-prev {
  position: static;
  padding: 10px 21px 14px 15px;
  border-radius: 50%;
}

#clients-logo-carousel.owl-carousel .owl-item {
  min-height: 180px;
}

@media(max-width:992px) {}

@media(max-width:767px) {
  .slider-caption2 .middle-caption {
    width: 94%;
  }

  .slider-caption .top-caption {
    font-size: 2rem;
  }

  .slider-caption .middle-caption {
    padding: 2rem 1rem;
  }

  .banner-section-ten {
    padding: 0;
  }

  .sliders i {
    font-size: 3em;
  }

  .sliders #clients-logo-carousel.owl-carousel i {
    font-size: 1rem;
  }

}

/* slider 2 */
.testimonials .top-caption {
  font-weight: var(--font-weight-bolder);
  color: var(--text-dark);
  font-size: 3rem;
}

.testimonials .middle-caption {
  font-size: 1rem;
  font-weight: normal;
  font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
}

.testimonials i.fa-5x {
  color: var(--text-dark);
}

.testimonials .quotes-symbol {
  font-size: 12rem;
  margin-top: 7rem;
  color: var(--text-dark);
  font-family: var(--open-sans);
  line-height: unset;
  color: var(--text-brand);
  text-align: center;
}

@media(max-width:767px) {
  .testimonials .middle-caption {
    font-size: 0.8rem;
  }
}

/**/
.grey-bg-buttons {
  background: rgba(170, 170, 170, 0.93);
}

.grey-bg-buttons .common-gradient-btn button {
  background: linear-gradient(0deg, rgba(0, 35, 150, 0.7) 0%, rgba(18, 31, 233, 0.5) 75%);
  color: var(--text-white);
  border-radius: 3px;
  cursor: pointer;
  padding: 10px 35px;
  line-height: 1.5;
  font-size: 1rem;
}

.grey-bg-buttons .common-gradient-btn button:hover {
  background: rgb(221, 219, 219);
  background: linear-gradient(0deg, rgba(0, 35, 150, 0.7) 0%, rgba(18, 31, 233, 0.5) 55%);
  box-shadow: -6px 5px 10px 1px rgba(0, 0, 0, 0.3);
}

.grey-bg-buttons .common-gradient-btn.left {
  text-align: right;
}

.grey-bg-buttons span.buttontext {
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5;
}

@media(max-width:767px) {

  .grey-bg-buttons .common-gradient-btn,
  .grey-bg-buttons .common-gradient-btn.left {
    text-align: center;
    margin: 10px 0;
  }
}

/**/
.message-callus {
  background: var(--brand-bg);
}

.message-callus h4,
.message-callus h2 {
  font-weight: var(--fw-bold);
  color: var(--text-white);
}

.message-callus h2.big {
  font-weight: var(--font-weight-bolder);
  text-transform: uppercase;
  font-size: 3rem;
  letter-spacing: 1px;
  line-height: 1.8em;
}

@media(max-width:767px) {
  .message-callus h2.big {
    font-size: 1.5rem;
  }
}

/* color-ftr-social */
.footer-bg {}

.footer-bg .logo {
  max-width: 135px;
}

.color-ftr-social .btn {
  border-radius: 22px 22px 22px 22px;
}

.footer-bg .hdng {
  font-weight: var(--fw-bold);
  font-size: 1.5rem;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: var(--text-white);
  font-size: 1.1rem;
  text-decoration: none;
  padding: 5px;
}

/* .footer-links li span{font:20px;} */
/* .contact-info {font-size:1rem;} */
.contact-info i {
  font-size: 2rem;
  margin-right: 1rem;
}

.contact-info span {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bolder);
  display: block;
  padding: 0 0 15px 0;
}

.contact-info a {
  font-size: 0.8rem;
  color: var(--text-white);
  text-decoration: none;
  padding: 0 0 20px 0;
  display: block;
}

@media(max-width:767px) {

  .contact-info a,
  .contact-info span {
    text-align: left;
  }

  .color-ftr-social {
    margin-bottom: 20px;
  }
}

/**/
/* Tooltip container */
.tooltips {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltips .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  position: absolute;
  top: -40px;
  z-index: 1;
  left: 0;
  right: 0;
  margin: auto;
}

.tooltips .tooltiptext:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  margin: auto;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0 0 12px 12px;
  border-color: transparent;
  border-bottom-color: rgb(0, 0, 0);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltips:hover .tooltiptext {
  visibility: visible;
}



/* lightbox Gallery */

.lightbox-gallery .intro {
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto 40px
}

.lightbox-gallery .intro p {
  margin-bottom: 0
}

.lightbox-gallery .photos {
  padding-bottom: 20px
}

.lightbox-gallery .item {
  padding-bottom: 30px
}

.lightbox-gallery:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  /*background:url(../images/lightbox/floral.jpg) repeat;*/
  background-position: 50% 0;
  /*background-image:linear-gradient(#139594,#48fefd);*/
  z-index: -1
}

.photos a {
  border: 10px solid #FFF;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  overflow: hidden;
  object-fit: cover;
  box-shadow: 0 0.125rem 0.2rem rgb(0 0 0 / 25%);
  display: block;
}

.photos a:hover {
  /*box-shadow: 0 0.125rem 0.85rem rgb(0 0 0 / 100%);*/
}

.photos a img {
  transition: 0.8s ease;
  transform: scale(1.2);
}

.photos a:hover img {
  transform: scale(1);
}