/* ----------------------------------

Template Name: Buskey - Corporate Business Template
Author: validtheme
Version: 1.0

-------------------------------------

Table of contents

    01. Google font
    02. Reset
    03. Typography
    04. Background color
    05. Custom
    06. Button
    07. Border
    08. Aside style
    09. Video
    10. Background image
    11. Icon
    12. Magnific popup
    13. Header
    14. Page title
    15. Swiper carousel
    16. Slider and parallax typography
    17. Portfolio
    18. Elements
    19. Footer
    20. Home Page
    21. Others

*/


/*
** General Styles for HTML tags
*/

* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  overflow-x: hidden;
  background-color: #ffffff;
}

html, body, .wrapper {
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: #232323;
  font-weight: normal;
  line-height: 1.2;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0;
  margin: 0;
}

h1,h2,h3,h4 {
  margin-bottom: 15px;
}

h5,h5 {
  margin-bottom: 10px;
}

img {
  border: none;
  outline: none;
  max-width: 100%;
}

label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 5px;
  max-width: 100%;
}

a, .btn, button {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  outline: medium none;
}

a img, iframe {
  border: none;
}

p {
  color: #666666;
  line-height: 26px;
  margin: 0 0 15px;
  text-transform: none;
  font-weight: 400;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid #eee;
}

pre {
  display: block;
  margin: 0 0 30px;
  padding: 9.5px;
  word-wrap: break-word;
  word-break: break-all;
  color: #333;
  border: 1px solid #ededed;
  border-radius: inherit;
  background-color: #f9f9f9;
  font-size: 13px;
  line-height: 1.42857143;
}

input:focus, textarea:focus,
 select:focus {
  outline: none;
  box-shadow: inherit;
}

ul {
  margin: 0;
  list-style-type: none;
}

a, a:active, a:focus, a:hover {
  outline: none;
  text-decoration: none;
  color: #232323;
}

a:hover {
  color: #232323;
}

a {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
}

b, strong {
  font-weight: 900;
}

.btn.active, .btn:active {
  background-image: inherit !important;
}

.btn.focus,
 .btn:active:focus,
 .btn:active:hover,
 .btn:focus,
 .btn:hover {
  outline: 0;
}

.btn.active, .btn:active {
  outline: 0;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

input {
  border: 1px solid #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
  min-height: 50px;
}
/* Default CSS */
.container-half {
  margin: 0 auto;
  width: 60%;
  padding: 0 15px;
}

.bg-cover {
  background-position: center center;
  background-size: cover;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
}

.bg-gray {
  background-color: #f3f6f8;
}

.bg-light {
  background-color: #f7f7f7;
}

.bg-theme {
  background-color: #0f2765;
}

.text-light h1,
 .text-light h2,
 .text-light h3,
 .text-light h4,
 .text-light h5,
 .text-light h6,
 .text-light p,
 .text-light a {
  color: #ffffff;
}

.shadow {
  position: relative;
  z-index: 1;
}

.shadow.dark::after {
  background: #000000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.dark-hard::after {
  background: #232323 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.75;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.light::after {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme::after {
  background: #0f2765 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.shadow.theme-hard::after {
  background: #2154cf none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.default-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

.default-padding-top {
  padding-top: 80px;
}

.default-padding-bottom {
  padding-bottom: 80px;
}

.default-padding.bottom-less {
  padding-top: 80px;
  padding-bottom: 50px;
}

.default-padding.bottom-30 {
  padding-top: 80px;
  padding-bottom: 30px;
}

.default-padding.bottom-20 {
  padding-top: 80px;
  padding-bottom: 20px;
}

.padding-xl {
  padding-top: 120px;
  padding-bottom: 120px;
}

.btn {
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 25px;
  text-transform: uppercase;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 5px;
  overflow: hidden;
}

.btn-md {
  padding: 12px 45px 12px;
}

.btn-sm {
  padding: 12px 40px;
  font-size: 12px;
}

.btn.btn-sm-pro {
  font-size: 10px;
  font-weight: 600;
  margin-top: 5px;
  padding: 4px 35px;
  display: inline-block;
}

.btn-border-light {
  border: 2px solid #ffffff;
}

.btn.btn-sm-pro.btn-border-light:hover,
 .btn.btn-sm-pro.btn-border-light:focus {
  background-color: #ffffff;
  color: #232323;
  border: 2px solid #ffffff;
}

.btn-dark {
  background-color: #232323;
  color: #ffffff;
  border: 2px solid #232323;
}

.btn-dark.border {
  background-color: transparent;
  color: #232323;
  border: 2px solid #232323;
}

.btn-dark.border:hover {
  background-color: #232323;
  color: #ffffff !important;
  border: 2px solid #232323;
}

.btn.btn-light {
  background: #ffffff none repeat scroll 0 0;
  border: 2px solid #ffffff;
  color: #232323;
}

.btn.btn-light:hover,
 .btn.btn-light:focus {
  background: transparent none repeat scroll 0 0;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.btn.btn-light.effect:hover,
 .btn.btn-light.effect:focus {
  background-color: #2154cf;
  color: #ffffff !important;
  border: 2px solid #2154cf;
}

.btn.btn-light.border {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.btn.btn-light.border:hover {
  background: #ffffff none repeat scroll 0 0 !important;
  border: 2px solid #ffffff !important;
  color: #232323 !important;
}

.btn-dark:hover,
 .btn-dark:focus {
  color: #232323 !important;
  background: transparent;
}

.bg-dark {
  background: #1c1c1c  none repeat scroll 0 0;
}

.btn-theme {
  background-color: #2154cf;
  color: #ffffff !important;
  border: 2px solid #2154cf;
}

.btn-theme.border {
  background-color: transparent;
  color: #2154cf !important;
  border: 2px solid #2154cf;
}

.btn-theme.border:hover {
  background-color: #2154cf;
  color: #ffffff !important;
  border: 2px solid #2154cf;
}

.btn-theme.effect:hover,
 .btn-theme.effect:focus {
  background: #0f2765 none repeat scroll 0 0;
  border: 2px solid #0f2765;
  color: #ffffff;
}

.btn.btn-sm-lm {
  font-size: 12px;
  padding: 4px 35px;
}

.btn.border.btn-light.standard {
  padding-left: 20px;
  padding-right: 50px;
  position: relative;
  z-index: 1;
}

.btn.border.btn-light.standard::after {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 53px;
  position: absolute;
  right: -18px;
  top: -10px;
  transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  width: 50px;
  z-index: -1;
}

.btn.border.btn-light.standard::before {
  color: #2154cf;
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  height: 100%;
  position: absolute;
  right: 0;
  width: 25px;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

.bg-cover {
  background-position: center center;
  background-size: cover;
}

.oh {
  overflow: hidden;
}

.less-margin {
  margin: 0;
}

header {
  position: relative;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a {
  position: relative;
  z-index: 1;
  margin-left: 3px;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a::after {
  background: #ffffff none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a:hover::after {
  width: 100%;
}

.attr-nav .social.right li {
  margin-left: 20px;
}

.attr-nav .social li a {
  font-size: 16px;
}

/* Default CSS */
.container-medium {
  padding: 0 15px;
  margin: auto;
  max-width: 1400px;
}

.container-full {
  padding: 0 15px;
  margin: auto;
  max-width: 1400px;
}

.container-fill {
  padding: 0 15px;
  margin: auto;
  max-width: 100%;
}

@media (min-width:576px) {
  .container-medium {
    max-width: 540px;
  }
}

@media (min-width:768px) {
  .container-medium {
    max-width: 720px;
  }
}

@media (min-width:992px) {
  .container-medium {
    max-width: 960px;
  }
}

@media (min-width:1200px) {
  .container-medium {
    max-width: 1400px;
    width: 80%;
  }
}

@media (min-width:576px) {
  .container-full {
    max-width: 540px;
  }
}

@media (min-width:768px) {
  .container-full {
    max-width: 720px;
  }
}

@media (min-width:992px) {
  .container-full {
    max-width: 960px;
  }
}

@media (min-width:1200px) {
  .container-full {
    max-width: 1400px;
    width: 90%;
  }
}

.container-fluid {
  width: 100%;
}

@media (min-width:576px) {
  .container-fluid {
    max-width: 540px;
  }
}

@media (min-width:768px) {
  .container-fluid {
    max-width: 720px;
  }
}

@media (min-width:992px) {
  .container-fluid {
    max-width: 100%;
  }
}

@media (min-width:1200px) {
  .container-fluid {
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width:576px) {
  .container-fill {
    max-width: 540px;
  }
}

@media (min-width:768px) {
  .container-fill {
    max-width: 720px;
  }
}

@media (min-width:992px) {
  .container-fill {
    max-width: 960px;
  }
}

@media (min-width:1200px) {
  .container-fill {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}

@media screen and (min-width: 1200px) {
  .item-flex {
    display: flex;
  }

  .item-flex.center {
    align-items: center;
  }

}


/* ==============================================================
     # Banner
=================================================================== */
body, .banner-area,
 .banner-area div {
  height: 100%;
}

.banner-area .box-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.banner-area .box-table {
  display: table;
  width: 100%;
}

.banner-area .box-cell,
 .banner-area .box-cell div {
  height: auto;
}

.banner-area {
  position: relative;
  overflow: hidden;
}

.banner-area .content {
  overflow: hidden;
}

.banner-area.shadow-inner .content {
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.banner-area.shadow-inner .content::after {
  background: #1c1c1c none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.banner-area .item h1 {
  font-size: 70px;
  font-weight: 700;
  margin-bottom: 20px;
}

.banner-area .item h1 span {
  color: #2154cf;
}

.banner-area .carousel.main-lower .item h1 {
  text-transform: inherit;
  font-weight: 700;
}

.banner-area .item .content h2 {
  display: inline-block;
  font-weight: 700;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.banner-area .carousel-inner.text-dark .item a,
.banner-area .carousel-inner.text-dark button {
  color: #232323;
}

.banner-area .item .content h2::before {
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px;
}

.banner-area .carousel.slide .item .content h1 {
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 20px;
}

.banner-area .carousel.slide .item .content h4 {
  text-transform: uppercase;
  font-weight: 500;
}

.banner-area .carousel.slide .carousel-inner.text-uppercase .item .content h1 {
  font-size: 50px;
  letter-spacing: 1px;
}

.banner-area .carousel.slide .item .content h3 {
  display: inline-block;
  font-weight: 700;
  position: relative;
  text-transform: capitalize;
  z-index: 1;
  margin-bottom: 10px;
}

.banner-area .item h3 {
  display: inline-block;
  font-weight: 500;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.banner-area .item p {
  font-size: 16px;
}

.banner-area .carousel-control {
  font-size: 30px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  margin-top: -25px;
  background: transparent;
  opacity: 1;
  z-index: 1;
  display: inline-block;
  text-align: center;
}

.banner-area .item a {
  margin-right: 10px;
  margin-top: 15px;
}

.banner-area .carousel-control.left {
  left: -50px;
}

.banner-area:hover .carousel-control.left {
  left: 20px;
}

.banner-area .carousel-control.right {
  right: -50px;
}

.banner-area:hover .carousel-control.right {
  right: 20px;
}

/* Animation delays */
.banner-area .item h1:first-child,
 .banner-area .item h2:first-child,
 .banner-area .item h3:first-child,
 .banner-area .item h4:first-child,
 .banner-area .item h5:first-child,
 .banner-area .item h6:first-child {
  animation-delay: .5s;
}

.banner-area .item h1:nth-child(2),
 .banner-area .item h2:nth-child(2),
 .banner-area .item h3:nth-child(2),
 .banner-area .item h4:nth-child(2),
 .banner-area .item h5:nth-child(2),
 .banner-area .item h6:nth-child(2) {
  animation-delay: .7s;
}

.carousel-caption h1:nth-child(3),
 .carousel-caption h2:nth-child(3),
 .carousel-caption h3:nth-child(3),
 .carousel-caption h4:nth-child(3),
 .carousel-caption h5:nth-child(3),
 .carousel-caption h6:nth-child(3) {
  animation-delay: .9s;
}

.banner-area .item p {
  animation-delay: .5s;
}

.banner-area .item a,
 .banner-area .item button {
  animation-delay: .7s;
}
/* Carousel Fade Effect */
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
 .carousel-fade .carousel-inner .active.left,
 .carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

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

.carousel-fade .carousel-inner .next,
 .carousel-fade .carousel-inner .prev,
 .carousel-fade .carousel-inner .active.left,
 .carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
  z-index: 2;
}
/* Slider Zoom Effect */
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }

  to {
    -webkit-transform: scale(1.2, 1.2);
  }
}

@-moz-keyframes zoom {
  from {
    -moz-transform: scale(1, 1);
  }

  to {
    -moz-transform: scale(1.2, 1.2);
  }
}

@-o-keyframes zoom {
  from {
    -o-transform: scale(1, 1);
  }

  to {
    -o-transform: scale(1.2, 1.2);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(1.2, 1.2);
  }
}

.carousel-inner .item > .slider-thumb {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

.banner-area .carousel-zoom .slider-thumb {
  height: 100%;
  position: absolute;
  width: 100%;
}


/* ==============================================================
     # Topbar
=================================================================== */
.top-bar-area {
  padding: 20px 0;
  position: relative;
}

.top-bar-area.shadow::after {
  background: #2154cf none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  margin-left: -10%;
  position: absolute;
  top: 0;
  -webkit-transform: skewX(-35deg);
  -moz-transform: skewX(-35deg);
  -ms-transform: skewX(-35deg);
  -o-transform: skewX(-35deg);
  width: 40%;
  z-index: -1;
}

.top-bar-area .top-address li {
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  margin-right: 20px;
  text-transform: capitalize;
}

.top-bar-area li,
 .top-bar-area a {
  font-weight: 500;
}

.top-bar-area a {
  font-size: 16px;
}

.top-address li i {
  margin-right: 10px;
}

.topbar-social li {
  display: inline-block;
}

.topbar-social li {
  margin-left: 20px;
}

.top-bar-area .info li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  margin-left: 10px;
  padding-left: 15px;
  margin-top: 5px;
}

.top-bar-area .info li:first-child {
  border: medium none;
  margin: 0;
  padding: 0;
}

.top-bar-area .info li i {
  color: #ffffff;
  font-size: 24px;
  text-align: center;
}

.top-bar-area .info li p {
  font-weight: 600;
  margin: 0;
  text-align: left;
  text-transform: uppercase;
}

.top-bar-area .info li .icon {
  float: left;
}

.top-bar-area .info li .info {
  float: left;
  padding-left: 15px;
}

.top-bar-area .logo, .top-bar-area .info {
  display: inline-block;
}

.top-bar-area .info.box {
  margin-top: 8px;
}

.top-bar-area .topbar-social {
  line-height: 50px;
}


/* Navbar */
.attr-nav > a.btn-theme.effect:hover,
.attr-nav > a.btn-theme.effect,
.attr-nav > a.btn-theme.effect:focus {
  background: #2154cf none repeat scroll 0 0;
  border: 2px solid #2154cf;
  color: #ffffff !important;
}

.site-heading h2 {
  color: #232323;
  display: inline-block;
  font-weight: 700;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
}

.site-heading p {
  margin: 0;
}

.site-heading h2::after {
  background: #2154cf none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  width: 50px;
}

.site-heading h2::before {
  background: #2154cf none repeat scroll 0 0;
  bottom: 5px;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -50px;
  position: absolute;
  width: 100px;
}

.site-heading {
  margin-bottom: 60px;
  overflow: hidden;
  margin-top: -5px;
}


/* ==============================================================
     # About (only video-info variant used)
=================================================================== */

.about-area.video-info .default.info {
  padding-left: 30px;
}

.default.info .bottom-info li {
  color: #2154cf;
  float: left;
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
  line-height: 53px;
  text-transform: capitalize;
}

.default.info .bottom-info li:last-child {
  margin-left: 30px;
}

.default.info .bottom-info li i {
  margin-right: 5px;
}

.default.info .bottom-info {
  margin-top: 30px;
  overflow: hidden;
}

.default.info h4 {
  display: inline-block;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
  margin-bottom: 20px;
}

.default.info h4::before {
  background: #2154cf none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 50px;
  z-index: -1;
}

.default.info h4::after {
  background: #2154cf none repeat scroll 0 0;
  bottom: 5px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 100px;
  z-index: -1;
}

.default.info h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 30px;
  margin-top: -8px;
}

.default.info > a {
  margin-top: 10px;
}


/* ==============================================================
     # Solid Services (Products section)
=================================================================== */

.solid-services-area .services-items .equal-height {
  margin-bottom: 50px;
}

.solid-services-area .services-items .item {
  background: transparent none repeat scroll 0 0;
  position: relative;
  z-index: 1;
  padding: 0;
}

.solid-services-area .services-items .item i {
  background: #2154cf none repeat scroll 0 0;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 26px;
  height: 70px;
  line-height: 70px;
  position: relative;
  text-align: center;
  width: 70px;
  z-index: 1;
}

.solid-services-area .services-items .item .icon {
  display: table-cell;
  vertical-align: top;
}

.solid-services-area .services-items .item .info {
  display: table-cell;
  padding-left: 20px;
  vertical-align: top;
}

.solid-services-area .services-items .item .info h4 {
  font-weight: 600;
}

.solid-services-area .services-items .item .info p {
  margin: 0;
}


/* ==============================================================
     # Fun Factor
=================================================================== */

.fun-fact i {
  background: #ffffff none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #2154cf;
  font-size: 40px;
  height: 100px;
  line-height: 100px;
  margin-bottom: 20px;
  position: relative;
  width: 100px;
  z-index: 1;
  display: inline-block;
}

.bg-dark .fun-fact i,
 .bg-dark-hard .fun-fact i {
  background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
}

.fun-fact .timer {
  color: #ffffff;
  font-family: "Montserrat",sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin-top: 10px;
}

.fun-fact span.medium {
  color: #ffffff;
  display: block;
  font-family: "Montserrat",sans-serif;
  font-size: 18px;
  line-height: 1;
  margin-top: 20px;
  font-weight: 600;
}


/* ==============================================================
     # Contact Form
=================================================================== */

.contact-form input, .contact-form textarea {
  border: 1px solid #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
}

.contact-form textarea {
  min-height: 150px;
  padding: 10px;
}

.contact-form button {
    background: #2154cf none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    font-weight: 600;
    margin-top: 10px;
    padding: 12px 40px;
    text-transform: uppercase;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    cursor: pointer;
    border-radius: 30px;
}

.contact-form button:hover {
  background: #0a2134 none repeat scroll 0 0;
}

.contact-form button i {
  margin-left: 5px;
}

.contact-form img.loader {
  float: left;
  margin-top: -5px;
}

/* contact form alert */
.contact-form .loader {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  position: absolute;
  top: 50%;
}

.alert {
  border: 1px solid transparent;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: red;
  font-weight: 400;
  margin-bottom: 0 !important;
  padding: 0;
  text-align: center;
}

.alert-msg {
  background: #ffffff none repeat scroll 0 0;
  color: #685654;
  display: none;
  font-size: 12px;
  font-weight: 600;
  padding: 10px;
  text-align: left;
  margin-top: 20px;
}

#message b {
  color: red;
}

.alert.alert-success {
  background: transparent none repeat scroll 0 0;
}

.alert.alert-success > h3 {
  color: green;
  margin-bottom: 5px;
}

.alert.alert-success > p {
  color: #232323;
}

.alert-notification {
  padding: 0;
}


/* ==============================================================
     # Portfolio
=================================================================== */

.portfolio-area.default-padding {
  padding-bottom: 65px;
}

.hover-effect .pf-item {
  margin-bottom: 0;
}

.portfolio-area .mix-item-menu button {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: transparent none repeat scroll 0 0;
  border-color: #e7e7e7;
  border-image: none;
  border-style: none solid none none;
  border-width: medium 1px medium medium;
  box-shadow: inherit;
  color: #232323;
  display: inline-block;
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
  position: relative;
  text-transform: capitalize;
  background-color: #ffffff;
  float: left;
}

.portfolio-area .mix-item-menu button:last-child {
  border: medium none;
}

.portfolio-area .mix-item-menu button.active::after {
  background: #2154cf none repeat scroll 0 0;
  bottom: -10px;
  content: "";
  height: 10px;
  left: 50%;
  margin-top: -1px;
  position: absolute;
  width: 2px;
}

.portfolio-items-area.inner-title .item-inner .view-list {
  margin-top: -40px;
}

.portfolio-items-area.inner-title .item-inner .view-list h4 {
    font-weight: 600;
    text-transform: capitalize;
}

.portfolio-area .mix-item-menu {
  border: 1px solid #e7e7e7;
  display: inline-block;
  float: none;
  margin-bottom: 30px;
}

.portfolio-area .mix-item-menu.item-space {
  margin-bottom: 35px;
}

.portfolio-area .mix-item-menu.active-theme button.active,
.portfolio-area .mix-item-menu.active-theme button:hover {
  background: #2154cf none repeat scroll 0 0;
  border-right: 1px solid #2154cf;
  color: #ffffff;
}

.portfolio-area .mix-item-menu.active-theme button,
.portfolio-area .mix-item-menu.active-dark button {
  padding: 10px 30px;
}

.portfolio-area .mix-item-menu.active-theme button.active,
.portfolio-area .mix-item-menu.active-theme button:hover {
  background: #2154cf none repeat scroll 0 0;
  border-right: 1px solid #2154cf;
  color: #ffffff;
}

.portfolio-area .mix-item-menu.active-dark  button.active,
 .portfolio-area .mix-item-menu.active-dark  button:hover {
  background: #232323;
  color: #2154cf;
  border-color: #232323;
}

.portfolio-area .portfolio-items .pf-item {
  float: left;
  margin-bottom: 0;
  padding: 0;
  width: 25%;
}

.portfolio-area .pf-item .info {
  background: #ffffff none repeat scroll 0 0;
  border: medium none;
  -moz-box-shadow: 0 0 10px #cccccc;
  -webkit-box-shadow: 0 0 10px #cccccc;
  -o-box-shadow: 0 0 10px #cccccc;
  box-shadow: 0 0 10px #cccccc;
  display: inline-block;
  float: left;
  padding: 30px;
  width: 100%;
  text-align: left;
}

.portfolio-area .pf-item .info h4 {
  font-weight: 600;
  margin-bottom: 10px;
}

.portfolio-area .pf-item .info a {
  border-radius: 20px;
  color: #2154cf;
  display: inline-block;
  font-weight: 500;
  margin-right: 0;
  padding-right: 10px;
  position: relative;
  text-transform: capitalize;
  z-index: 1;
}

.portfolio-area .pf-item .info a::after {
  content: "/";
  position: absolute;
  right: 0;
  top: 1px;
}

.portfolio-area .pf-item .info li:last-child a::after {
  display: none;
}

.portfolio-area .pf-item li {
  display: inline-block;
}

.portfolio-area .pf-item .info ul {
  margin-bottom: 15px;
}

.portfolio-area .portfolio-items.col-3 .pf-item {
  padding: 15px;
  width: 33.33%;
}

.portfolio-area .portfolio-items.pf-carousel .pf-item {
  float: none;
  width: auto;
}

.portfolio-effet {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.portfolio-effet .thumb {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio-effet .overlay {
  left: 0;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 1;
}

.portfolio-effet img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.portfolio-effet:hover img {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.portfolio-effet a {
  background: #2154cf none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #232323 !important;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 2px;
  width: 40px;
}

.portfolio-effet a, .portfolio-effet h4 {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  opacity: 0;
  color: #fff;
  text-transform: uppercase;
}

.portfolio-effet h4 {
  margin-bottom: 10px;
}

.portfolio-effet:hover a:hover {
  color: #2154cf;
}

.portfolio-effet:hover a, .portfolio-effet:hover h4 {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.portfolio-area .pf-item .thumb::after {
  background: #232323 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  outline: 1px solid #7d7d79;
  outline-offset: -15px;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  width: 100%;
}

.portfolio-effet:hover .thumb::after {
  opacity: .7;
}

.portfolio-area .owl-theme .owl-nav {
  margin-top: 0;
}

.portfolio-area .owl-nav .owl-next,
.portfolio-area .owl-nav .owl-prev {
  background: #ffffff none repeat scroll 0 0;
  color: #2154cf;
  height: 40px;
  left: 10px;
  line-height: 40px;
  margin: -20px 0 0;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 40px;
  opacity: 0;
  transition: all 0.35s ease-in-out 0s;
  -webkit-transition: all 0.35s ease-in-out 0s;
  -moz-transition: all 0.35s ease-in-out 0s;
  -ms-transition: all 0.35s ease-in-out 0s;
  -o-transition: all 0.35s ease-in-out 0s;
}

.portfolio-area .pf-carousel:hover .owl-nav .owl-next,
.portfolio-area .pf-carousel:hover .owl-nav .owl-prev {
  opacity: 1;
}

.portfolio-area .pf-carousel:hover .owl-nav .owl-next.disabled,
.portfolio-area .pf-carousel:hover .owl-nav .owl-prev.disabled {
  opacity: .5;
}

.portfolio-area .owl-nav .owl-next:hover,
.portfolio-area .owl-nav .owl-prev:hover {
  background: #2154cf none repeat scroll 0 0;
}

.portfolio-area .owl-nav .owl-next {
  left: auto;
  right: 10px;
}

.item-inner {
  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.item-inner img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  border-radius: 5px;
}

.item-inner .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3em 3em;
  width: 100%;
  height: 100%;
}

.item-inner .overlay::before {
  position: absolute;
  top: 50%;
  right: 15px;
  bottom: 50%;
  left: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: #000000;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
  border-radius: 5px;
}

.item-inner .view-list,
 .item-inner p,
 .item-inner a {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s,
     -webkit-transform 0.35s;
  transition: opacity 0.35s,
      -webkit-transform 0.35s,
      -moz-transform 0.35s,
      -o-transform 0.35s,transform 0.35s;
}

.item-inner .view-list,.item-inner a {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.item-inner:hover .overlay .view-list,
 .item-inner:hover .overlay a {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.item-inner:hover .overlay::before {
  background: #2154cf;
  border: none;
  top: 15px;
  bottom: 15px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  opacity: .7;
}

.item-inner .view-list {
  font-weight: 300;
  margin-top: -20px;
  position: relative;
  text-transform: uppercase;
  top: 50%;
  transform: translate3d(0%, 50%, 0px);
  -webkit-transform: translate3d(0%, 50%, 0px);
  -moz-transform: translate3d(0%, 50%, 0px);
  -ms-transform: translate3d(0%, 50%, 0px);
  -o-transform: translate3d(0%, 50%, 0px);
  transition-delay: 0.3s;
  width: 100%;
  word-spacing: -0.15em;
  z-index: 1;
}

.portfolio-area .info p {
  margin: 0;
}

.no-title .item-inner .view-list {
  margin-top: -25px;
}

.portfolio-area .item-inner .view-list h4 {
  color: #ffffff;
}

.item-inner .view-list a {
  background: #ffffff none repeat scroll 0 0;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #2154cf;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin: 0 3px;
  width: 50px;
}

.portfolio-area .item-inner .view-list h5 {
  color: #ffffff;
  font-weight: 600;
}

.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
  color: #ffffff;
  font-size: 30px;
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #2154cf;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}


/* ==============================================================
     # Video Button Play
=================================================================== */
.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #2154cf;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  transition: all 200ms;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;
}

.video-play-button:hover,
.video-play-button:focus {
  color: #ffffff;
}

.video-play-button:hover:after {
  background-color: #2154cf;
}

@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

.video-play-button i {
    display: block;
    position: relative;
    z-index: 3;
    top: 8px;
    left: 3px;
}


/* ==============================================================
    # Fun Factor Area (used in stats section)
=================================================================== */

.fun-fact i {
  background: #ffffff none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #2154cf;
  font-size: 40px;
  height: 100px;
  line-height: 100px;
  margin-bottom: 20px;
  position: relative;
  width: 100px;
  z-index: 1;
  display: inline-block;
}

.bg-dark .fun-fact i,
 .bg-dark-hard .fun-fact i {
  background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
}

.fun-fact .timer {
  color: #ffffff;
  font-family: "Montserrat",sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin-top: 10px;
}

.fun-fact span.medium {
  color: #ffffff;
  display: block;
  font-family: "Montserrat",sans-serif;
  font-size: 18px;
  line-height: 1;
  margin-top: 20px;
  font-weight: 600;
}


/* ==============================================================
     # Clients
=================================================================== */

.clients-items-area {
  overflow: hidden;
}

.clients-area .clients-items .owl-nav {
  margin: 0;
}

.clients-area .clients-items img {
  margin: auto;
  width: auto;
}

.clients-area .clients-items .owl-nav .owl-prev,
.clients-area .clients-items .owl-nav .owl-next {
  background: transparent none repeat scroll 0 0;
  color: #ffffff;
  font-size: 40px;
  height: 40px;
  left: -50px;
  line-height: 40px;
  margin-top: -20px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 40px;
}

.clients-area .clients-items .owl-nav .owl-next {
  left: auto;
  right: -50px;
}


/* ==============================================================
     # Footer
=================================================================== */
footer {
  background: #00081d none repeat scroll 0 0;
}

footer .f-item h4 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  padding-left: 12px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

footer .f-item h4::after {
  background: #2154cf none repeat scroll 0 0;
  bottom: 13px;
  content: "";
  height: 15px;
  left: 0;
  position: absolute;
  width: 5px;
}

footer .f-item p {
  color: #cccccc;
  font-size: 14px;
}

footer .f-item .address li {
  display: block;
  margin-bottom: 10px;
}

footer .f-item .address li i {
  background: #41414a none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #2154cf;
  display: table-cell;
  font-size: 16px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  width: 40px;
}

footer .f-item .address li span {
  color: #cccccc;
  display: table-cell;
  padding-left: 15px;
  vertical-align: middle;
}

footer .f-item .address li:last-child {
  margin: 0;
}

footer .f-item .address {
  margin-top: 30px;
}

.footer-bottom {
  background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
  margin-top: 80px;
  padding: 30px 0;
}

.footer-bottom .col-md-6 {
  padding: 0;
}

.footer-bottom .logo img {
  height: 40px;
}

.footer-bottom .col-md-12 {
  line-height: 40px;
}

.footer-bottom p {
  color: #cccccc;
  font-size: 14px;
  margin: 0;
  line-height: 40px;
}

.footer-bottom-menu li {
  display: inline-block;
}

.footer-bottom-menu li a {
  color: #cccccc;
  display: inline-block;
  font-weight: 500;
  margin-left: 15px;
}

.footer-bottom-menu li a:hover {
  color: #2154cf;
}

.footer-bottom p a {
  color: #2154cf;
  font-weight: 600;
}

footer .f-item.link li {
  display: block;
  float: left;
  width: 50%;
}

footer .f-item.link li a {
  color: #cccccc;
  display: inline-block;
  font-weight: 500;
  margin-bottom: 15px;
  padding-left: 20px;
  position: relative;
  text-transform: capitalize;
}

footer .f-item.link li a:hover {
  color: #2154cf;
}

footer .f-item.link li a::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  left: 0;
  position: absolute;
  font-weight: 900;
}

footer .f-item .social li {
  display: inline-block;
}

footer .f-item .social li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 50px;
  position: relative;
  text-transform: capitalize;
}

footer .f-item .social {
  display: block;
  margin-top: 20px;
}


/* ==============================================================
     # Preloader
=================================================================== */
.no-js #loader {
  display: none;
}

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: url(../image/preloader.gif) center no-repeat #fff;
  text-align: center;
}