/*
  Theme Name: eBusiness
  Theme URL: https://bootstrapmade.com/ebusiness-bootstrap-corporate-template/
  Author: BootstrapMade.com
  License: https://bootstrapmade.com/license/
*/

/*-----------------------------------------------------------------------------------
   CSS INDEX
  ===================

  1. Theme Default CSS (body, link color, section etc)
  2. Header Area
   2.1 Stick menu Area
  3. About Area
  4.Services Area
  5.Skill Area
  6.Faq Area
  7.Wellcome Area
  8.Team Area
  9.Review Area
  10.Portfolio Area
  11. Pricing Table
  12. Testimonials area
  13. Review Area
  14. Quote area
  15.Footer Area
  16.Home Page-2 Area
  17.Home Page 3  CSS
  18.Blog CSS
  17.Blog Details CSS

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

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

/*  1.  Theme default CSS
/*----------------------------------------*/
.slider {
  position: relative;
  width: 100%;
  height: 100vh;
}
@media (min-width:767px) and (max-width:991.5px){
  .slider{
    height: 75vh;
  }
}
@media (min-width: 451px) and (max-width: 766.5px){
  .slider{
    height: 45vh;
  }
}
@media (max-width: 450.5px){
  .slider{
    height: 30vh;
  }
}
.slider h2{
  color: #fff;
}
.slider .overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.slider .over {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.swiper-button-next,
.swiper-button-prev{
    background-color: #0000;
    color: #fff;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
    transition:all .3s ease-in-out ;
    -webkit-transition:all .3s ease-in-out ;
    -moz-transition:all .3s ease-in-out ;
    -ms-transition:all .3s ease-in-out ;
    -o-transition:all .3s ease-in-out ;
}
.swiper-button-next:hover,
.swiper-button-prev:hover{
    border-color: #3EC1D5;
    color: #fff;
    background: #3EC1D5;
}
.swiper{
  height: 100% !important;
}
.slider-content h2{
  font-size: 35px;
}
@media (max-width: 766.5px){
  .swiper-button-next,
.swiper-button-prev{
  display: none;
}
.slider{
  margin-top: 60px;
}
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html,body {
  height: 100%;
}

a:focus {
  outline: 0px solid;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

p {
  margin: 0 0 15px;
  color: #444;
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
}

h1 {
  font-size: 48px;
  line-height: 50px;
}

h2 {
  font-size: 25px;
  line-height: 40px;
}

h3 {
  font-size: 30px;
  line-height: 32px;
}

h4 {
  font-size: 24px;
  line-height: 26px;
}

h5 {
  font-size: 20px;
  line-height: 22px;
}

h6 {
  font-size: 16px;
  line-height: 20px;
}

a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

a:hover {
  color: #5596ad;
  text-decoration: none;
}

a:active,a:hover {
  outline: 0 none;
}


.navbar-header .lang {
  display: inline-block;
  border: 1px solid #5596ad;
  padding: 5px !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 20px;
  text-align: center;
  color: #fff;
  margin: 15px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.navbar-header .lang:hover {
  background-color: #5596ad;
  color: #fff;
}

@media (max-width:350px) {
  .navbar-header h1 {
    font-size: 22px !important;
    margin: 11px 0 !important;
  }

  .navbar-header .lang {
    margin: 15px 5px !important;
  }
}

/*start scroll-to-top button*/

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #5596ad;
  color: #fff;
  font-size: 20px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  display: none;
  cursor: pointer;
  z-index: 99;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.back-to-top:hover {
  background-color: #3cd6ed;
}

.navbar-collapse.en {
  display: inline-block !important;
}

.navbar-collapse.en .navbar-right {
  margin-left: 370px;
}

.main-menu .p-list {
  background-color: #fff;
  width: 30%;
  padding: 10px 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  box-shadow: -1px 1px 3px 1px #d5d5d5;
}

@media (max-width: 766.5px) {
  .main-menu .p-list {
    position: static;
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: none;
  }

  .main-menu .p-list li a.prod {
    color: #fff !important;
    border-bottom: 1px solid rgb(126, 126, 126);
  }

  .main-menu .p-list {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

.main-menu .p-list li {
  display: inline-block;
  width: 100%;
  /* padding: 10px 0; */
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}

.main-menu .p-list li a.prod {
  display: inline-block;
  color: #000;
  padding: 5px 10px !important;
  width: 100% !important;
}

.main-menu .p-list li a:hover {
  background-color: #3e9bbc !important;
  color: #fff !important;
}

.main-menu .p {
  position: inherit;
}

.main-menu .p:hover .p-list {
  visibility: visible !important;
  opacity: 1 !important;
}

/*end scroll-to-top button*/

@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
}

.back-to-top:focus {
  background: #5596ad;
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #3cd6ed;
  color: #fff;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

input,textarea,input[type="text"],input[type="date"],input[type="url"],input[type="email"],input[type="password"],input[type="tel"],button,button[type="submit"] {
  -moz-appearance: none;
  box-shadow: none !important;
}

div#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #fff url("../img/preloader.gif") no-repeat center center;
}

::-moz-selection {
  background: #5596ad;
  text-shadow: none;
}

::selection {
  background: #5596ad;
  text-shadow: none;
}

.area-padding {
  padding: 70px 0px 80px;
}

.area-padding-2 {
  padding: 70px 0px 50px;
}

.padding-2 {
  padding-bottom: 90px;
}

.section-headline h2 {
  display: inline-block;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 40px;
  position: relative;
  text-transform: capitalize;
}

.section-headline22 h2 {
  display: inline-block;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 40px;
  position: relative;
  text-transform: capitalize;
}

.section-headline h2::after {
  border: 1px solid #f00;
  bottom: -10px;
  content: "";
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 40%;
  background-color: #f00;
  height: 3px;
}

.sec-head {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  color: #5f96ad;
  margin-bottom: 0;
  padding: 0 0 10px;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
}

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

/*  2. Header top Area
/*--------------------------------*/

.header-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9;
}

.navbar-header a.navbar-brand {
  display: inline-block;
  height: 70px;
  padding: 15px 0;
}

.main-menu ul.navbar-nav li {
  display: inline-block;
  padding: 0px 13px;
}

.main-menu ul.navbar-nav li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 24px 0px;
  text-transform: capitalize;
  letter-spacing: 1px;
}

@media (max-width:991.5px){
  .main-menu ul.navbar-nav li {
  padding: 0px 10px;
  }
  .main-menu ul.navbar-nav li a {
  font-size: 13px;
  }
}

.main-menu ul.navbar-nav li.active > a::after {
  border: 1px solid #fff;
  bottom: 0px;
  content: "";
  left: 0;
  position: absolute;
  width: 100%;
}

.main-menu ul.navbar-nav li.active a:hover {
  background: none;
  color: #fff;
}

.main-menu ul.navbar-nav li.active a:focus {
  color: #fff;
}

.main-menu ul.navbar-nav li.active a.page-scroll {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  position: relative;
}

.main-menu ul.navbar-nav li a:hover {
  color: #5596ad;
}

.navbar {
  border: medium none;
  margin-bottom: 0;
}

.navbar-default {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.main-menu ul.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav > .active > a:focus {
  background: none;
  color: #333;
}

.navbar-default .navbar-toggle {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  border-radius: 0;
  padding: 25px 0px;
}

.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:focus {
  background-color: transparent;
  color: #fff;
}

.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {
  background: none;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  width: 30px;
  height: 2px;
}

.top-right.text-right {
  float: right;
  position: relative;
  top: 24px;
  margin-left: 20px;
}

.top-right.text-right > li {
  float: right;
  margin: 0px 8px;
}

.top-right.text-right li a {
  color: #fff;
}

/*--------------------------------*/
/* 2.1. Stick menu
/*--------------------------------*/
.header-area.stick {
  background-color: rgba(0, 0, 0, 1);
  height: 70px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.stick .navbar-header a.navbar-brand {
  display: inline-block;
  height: 90px;
}
.stick .navbar-brand > img {
  display: none;
}
.stick .navbar-brand.sticky-logo > img {
  display: block;
}
.sticky-logo h1 {
  color: #fff;
  padding: 0;
  margin: 0;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}
.sticky-logo h1 span {
  color: #5596ad;
}
.stick .main-menu ul.nav > li > a:hover {
  color: #fff;
}
.stick .main-menu ul.navbar-nav li.active a.page-scroll {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  position: relative;
}
.stick .mainmenu ul#nav > li:hover > a,
.stick .mainmenu ul#nav li .mega-menu,
.stick .mainmenu ul#nav li ul.sub-menu {
  background-color: #f5f5f5;
  color: #fff;
  outline: medium none;
}
.stick .mainmenu ul#nav li:hover ul.sub-menu li a:hover,
.mainmenu ul#nav li .mega-menu span > a:hover,
.stick .mainmenu ul#nav li .mega-menu-shop a.mega-menu-title:hover {
  color: #fff;
}
.stick .logo {
  height: 20px;
}
.stick .logo a {
  margin-top: 0px;
}
.stick .main-menu ul.nav > li > a {
  color: #fff;
  line-height: 22px;
  text-transform: capitalize;
  letter-spacing: 1px;
}
.stick .navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  width: 30px;
  height: 2px;
}
.stick .navbar-default .navbar-toggle {
  padding: 10px 0px;
}

/*------------------------------
  3. About Area
--------------------------------*/
#about img{
  height: 423px;
}
#about .cText{
  align-items: center;
  justify-content: center;
  display: flex;
}
@media (max-width: 470px){
  #about img{
  height: 260px;
  }
}
.about-area {
  background-color: #f9f9f9;
}

.single-well > a {
  display: block;
}

.single-well ul li {
  color: #444;
  display: block;
  padding: 5px 0;
}

.single-well ul li i {
  color: #5596ad;
  padding-right: 10px;
  font-size: 12px;
}

.single-well p {
  color: #444;
}

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

/* 4.Services Area
/*--------------------------------*/

.services-icon {
  color: #444;
  display: inline-block;
  font-size: 36px;
  line-height: 36px;
  margin-bottom: 20px;
}

.section-headline.services-head > h2 {
  margin-bottom: 25px;
}

.services-details {
  padding-top: 40px;
  transition: all 0.5s ease 0s;
}

.services-details:hover h4,.services-details:hover .services-icon {
  color: #5596ad;
}

.section-head > h2 {
  color: #333;
}

.single-services > h4 {
  color: #444;
  font-size: 24px;
  font-weight: 500;
}

.single-services > p {
  color: #333;
  font-size: 14px;
}

/*----------------------------------------
  5.Skill Area
----------------------------------------*/

.progress-h4 {
  color: #fff;
  font-weight: 500;
}

/*----------------------------------------
  6.Faq Area
----------------------------------------*/

.panel-body {
  padding: 15px 15px 0px 50px;
}

/*----------------------------------------
 7.Wellcome Area Css
----------------------------------------*/

.well-bg {
  position: relative;
}

.well-text > h2 {
  color: #fff;
  font-size: 44px;
  font-weight: 500;
  line-height: 50px;
}

.well-text p {
  font-size: 18px;
  font-style: italic;
  color: #fff;
}

.suscribe-input input {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  float: left;
  font-size: 15px;
  line-height: 24px;
  padding: 11px 15px;
  width: 70%;
  height: 50px;
}

.suscribe-input button {
  background: #5596ad none repeat scroll 0 0;
  border: medium none;
  border-radius: 0 20px 20px 0;
  color: #fff;
  float: left;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 20px;
  width: 30%;
}

.suscribe-input button:hover {
  background: #fff none repeat scroll 0 0;
  color: #5596ad;
}

/*----------------------------------------
 8.Team Area Css
----------------------------------------*/

.team-member {
  background: rgba(0, 0, 0, 0.65) none repeat scroll 0 0;
  display: block;
  margin-right: -15px;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.team-member::before {
  background: rgba(0, 0, 0, 0) url("../img/team/team01.webp") repeat scroll 0 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  margin-right: -15px;
  padding: 10px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  transition: 5s;
  transform: scale(1);
}

.team-member:hover.team-member::before {
  transform: scale(1.2);
}

.single-team-member {
  border: 1px solid #ddd;
}

.team-left-text h4 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

.team-left-text p {
  color: #fff;
  font-size: 17px;
  line-height: 26px;
}

.team-left-icon ul li {
  display: inline-block;
}

.team-left-icon ul li a:hover {
  color: #5596ad;
  background: #fff;
  border: 2px solid #fff;
}

.team-left-icon ul li a {
  border: 2px solid #fff;
  color: #fff;
  display: block;
  font-size: 16px;
  height: 40px;
  line-height: 37px;
  margin: 0 3px;
  width: 40px;
}

.team-member-carousel .single-team-member {
  overflow: hidden;
  width: 100%;
}

.single-team-member:hover .team-img a:after {
  opacity: 1;
}

.team-img {
  position: relative;
}

.team-img > a {
  display: block;
}

.team-img > a::after {
  background: rgba(0, 0, 0, 0.7);
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  transition: all 0.5s ease 0s;
  width: 100%;
  opacity: 0;
}

.team-content {
  padding: 10px 0px;
}

.team-content > h4,.team-content > p {
  color: #444;
  margin-bottom: 5px;
}

.team-content.head-team p {
  margin-bottom: 0;
}

.team-left-icon.text-center {
  margin-bottom: 20px;
}

.head-team h4 {
  display: inline-block;
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  text-transform: uppercase;
}

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

/*  9.review Area
/*--------------------------------*/

.work-left-text {
  background: #5596ad none repeat scroll 0 0;
}

.work-left-text {
  width: 50%;
}

.work-right-text {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  float: right;
  height: 100%;
  overflow: hidden;
  padding: 71px 0;
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

.work-right-text h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
}

.work-right-text h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 34px;
  text-transform: uppercase;
}

.work-right-text .sus-btn {
  margin-left: 0;
  margin-top: 20px;
}

.single-awesome-4 {
  display: block;
  float: left;
  overflow: hidden;
  width: 33.33%;
}

/*----------------------------------------
 10.Portfolio Area Css
----------------------------------------*/

.awesome-img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.awesome-img > a {
  display: block;
  position: relative;
}

.awesome-img > a::after {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: 0.4s;
}

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

/* 11. Pricing Area
/*----------------------------------------*/

.active > h3 {
  background: #f5f5f5 none repeat scroll 0 0;
  color: #333;
  transition: all 0.4s ease 0s;
}

.active > button {
  background: #5596ad none repeat scroll 0 0;
  border: 1px solid #5596ad;
  color: #fff;
  transition: 0.4s;
}

.active > button:hover {
  background: #333 none repeat scroll 0 0;
  border: 1px solid #333;
  color: #fff;
  transition: 0.4s;
}

/*----------------------------------------
 12.Testimonial Area Css
----------------------------------------*/

.testimonials-area2 {
  background: rgba(0, 0, 0, 0) url("../img/background/slider.webp") no-repeat
  fixed center top / cover;
  height: auto;
  width: 100%;
}

.testimonials-area {
  background: rgba(0, 0, 0, 0) url("../img/background/slider1.webp") no-repeat
    fixed center top / cover;
  height: auto;
  width: 100%;
}
.testimonials-area img{
  width: 100px;
  height: 100px;
}

.testi-inner {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.testi-overly {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.testi-overly2 {
  background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.testi-img img {
  border: 1px dotted rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  height: 80px;
  margin: 0 auto;
  padding: 5px;
  transition: background 0.6s ease-out 0s;
  width: 80px !important;
}

.testi-text p {
  color: #fff;
  font-size: 16px;
  line-height: 1.5em;
  margin: 20px 0;
  letter-spacing: 1px;
}

.testi-text h6 {
  color: #fff;
  font-size: 20px;
}

.testi-text.text-center > h6 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

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

/*  13.Blog Area
/*--------------------------------*/

.date-type {
  color: #333;
  letter-spacing: 1px;
  margin-right: 5px;
}

/*------------------------------
  13. Quote area
--------------------------------*/

.suscribe-area {
  background: #5596ad none repeat scroll 0 0;
  padding: 30px 0;
}

.suscribe-text {
  display: block;
  padding: 10px 0;
}

.suscribe-text h3 {
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.sus-btn {
  background: #fff none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #5596ad;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  margin-left: 100px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 30px;
}

.sus-btn:hover {
  background: #5596ad none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #fff;
}

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

/*  14.Contact Area
/*--------------------------------*/

.contact-area {
  height: auto;
  width: 100%;
}

.contact-content {
  padding: 100px;
  background: #000 none repeat scroll 0 0;
}

.contact-content-right {
  padding: 100px;
}

.contact-form input[type="text"],.contact-form input[type="email"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #444;
  height: 40px;
  margin-bottom: 16px;
  padding-left: 20px;
  width: 100%;
}

.contact-form textarea {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #444;
  height: 140px;
  padding: 20px;
  width: 100%;
}

.contact-form button[type="submit"] {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #ccc;
  color: #444;
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  padding: 12px 30px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  border-radius: 30px;
}

.contact-form button[type="submit"]:hover {
  color: #fff;
  border: 1px solid #5596ad;
  background: #5596ad;
}

.contact-form #sendmessage {
  color: #5596ad;
  border: 1px solid #5596ad;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

.contact-form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

.contact-form #sendmessage.show,.contact-form #errormessage.show,.contact-form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

.single-icon i {
  font-size: 24px;
  width: 50px;
  height: 50px;
  border: 1px solid #444;
  line-height: 46px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.single-icon p {
  font-size: 16px;
  line-height: 30px;
}

.contact-icon {
  margin-bottom: 40px;
}

#google-map {
  height: 370px;
  margin-bottom: 20px;
}

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

/*  15. Footer Area
/*----------------------------------------*/

.footer-area {
  padding: 40px 0;
  background: #f9f9f9;
}

.footer-head p {
  color: #444;
}

.footer-head h4 {
  color: #444;
  font-size: 16px;
  letter-spacing: 2px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.footer-logo h2 {
  color: #222;
  padding: 0;
  margin: 0;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
}

.footer-logo h2 span {
  color: #5596ad;
}

.footer-contacts p span {
  color: #5596ad;
  font-weight: 700;
}

.footer-content {
  display: block;
  overflow: hidden;
}

.footer-area-bottom {
  background: #f1f1f1 none repeat scroll 0 0;
  padding: 15px 0;
}

.copyright-text a:hover {
  text-decoration: underline;
  color: #5596ad;
}

.copyright-text a {
  color: #444;
}

.copyright > p {
  margin-bottom: 0;
  color: #444;
}

.copyright a,.credits a {
  color: #5596ad;
}

.credits {
  padding-top: 5px;
  text-align: center;
}

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

/*  16.Home Page 2  CSS
/*----------------------------------------*/

.header-bg {
  background: url(../img/slider/slider1.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
}

.header-bg.home-2 {
  width: 100%;
  height: 100%;
  position: relative;
}

.home-overly {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  position: absolute;
  width: 100%;
}

.home-2 .layer-1-3,.home-3 .layer-1-3 {
  margin: 10px 0 0;
}

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

/*  17.Home Page 3  CSS
/*----------------------------------------*/

.home-video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.header-image.home-3 {
  width: 100%;
  height: 100%;
  position: relative;
}

/*----------------------------------------
  18. Blog page
----------------------------------------*/

.page-area {
  position: relative;
}

.ready-btn {
  border: 1px solid #fff;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  margin-top: 30px;
  padding: 7px 20px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  z-index: 222;
}

.ready-btn:hover {
  color: #fff;
  background: #5596ad;
  border: 1px solid #5596ad;
  text-decoration: none;
}
.right-btn{
  color: #fff;
  background: #5596ad;
  border: 1px solid #5596ad;
  text-decoration: none;
}
.right-btn:hover{
  border: 1px solid #fff;
  background: none;
  color: #fff;
  transition: all 0.4s ease 0s;
}
.post-img {
  display: inline-block;
  padding: 0 5px;
  width: 35%;
}

.header-bottom h1,.header-bottom h2 {
  color: #fff;
}

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

/*  19.	Blog Details css
/*----------------------------------------*/

.post-information h2 {
  color: #363636;
  font-size: 22px;
  text-transform: uppercase;
}

.post-information {
  padding: 20px 0;
}

.post-information .entry-meta span a {
  color: #444;
  display: inline-block;
  padding: 10px 0;
}

.entry-meta span a:hover {
  color: #5596ad;
}

.post-information .entry-meta {
  border-bottom: 1px solid #ccc;
  margin: 20px 0;
}

.post-information .entry-meta span i {
  padding: 0 10px;
}

.entry-content > p {
  color: #444;
}

.entry-meta > span {
  color: #444;
}

span.post-time {
  margin-right: 5px;
}

/*----------------------------------------
 .End CSS
----------------------------------------*/

/*------------------------------------------------------------------
    Template Name:  HoomPotact
    Author: Layerdrops
    Author Email: Layerdrops@gmail.com
    License: GPL V2 or Later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Version: 1.0
*/

/*========================================================================
    Index
    ------------------------------------------------------------------------
    #01 - PreLoader
    #02 - Header
    #03 - Header Slider
    #04 - Breadcrumb
    #05 - Services
    #06 - Solution
    #07 - Our Story & History
    #08 - Quick Contact
    #09 - Welcome And Protect & Manage Area
    #10 - Security
    #11 - Video Promotion
    #12 - Award
    #13 - Packages
    #14 - Compare
    #15 - Benefits
    #16 - Team Member
    #17 - Testimonial
    #18 - Client
    #19 - Features
    #20 - Network
    #21 - Easy Step by Step
    #22 - Installation
    #23 - Quote
    #24 - Automation Control
    #25 - HomeSecure Mobile App
    #26 - FeedBacks
    #27 - Blog
    #28 - Call to action
    #29 - Contact & Service Single Contact
    #30 - Error
    #31 - Footer
    All @keyframes
*/

/* Responsive Device Layout*/

/*basic content*/

/*Fonts*/

/* ------------
	Mixin
------------*/

* {
  margin: 0;
  padding: 0;
}

a {
  color: #3e9bbc;
  text-decoration: none;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

a:hover {
  color: #2f3437;
}

::-moz-selection {
  background-color: #3e9bbc;
  color: #ffffff;
}

::selection {
  background-color: #3e9bbc;
  color: #ffffff;
}

input:focus,button:focus,textarea:focus,a:focus {
  outline: none;
}

button {
  border: none;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
  opacity: 1;
}

input::-ms-input-placeholder,textarea::-ms-input-placeholder {
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  opacity: 1;
}

input {
  width: 100%;
  background-color: #ffffff;
  border: none;
}

.input-group {
  display: block;
}

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

p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  font-family: "Ubuntu", sans-serif;
}

video {
  width: 650px;
}

/*custom margin*/

.mb_65 {
  margin-bottom: 65px;
}

.mb_60 {
  margin-bottom: 60px;
}

.mb_55 {
  margin-bottom: 55px;
}

.mb_50 {
  margin-bottom: 50px;
}

.mb_45 {
  margin-bottom: 40px;
}

.mb_40 {
  margin-bottom: 40px;
}

.mb_30 {
  margin-bottom: 30px;
}

.mb_35 {
  margin-bottom: 35px;
}

.mb_25 {
  margin-bottom: 25px;
}

.mb_20 {
  margin-bottom: 20px;
}

.mb_10 {
  margin-bottom: 10px;
}

.mt_60 {
  margin-top: 60px;
}

.mt_50 {
  margin-top: 50px;
}

.mt_40 {
  margin-top: 40px;
}

.mt_30 {
  margin-top: 30px;
}

.mt_20 {
  margin-top: 20px;
}

.mt_10 {
  margin-top: 10px;
}

.pl_10 {
  padding-left: 10px;
}

.pl_0 {
  padding-left: 0;
}

.pl_5 {
  padding-left: 5px;
}

.p_0 {
  padding: 0;
}

/*section*/


.section_padding1 {
  padding: 50px 0;
}

.section_bb {
  border-bottom: 2px solid #f2f2f2;
}

.section_bg {
  background: #f2f2f2;
}

.section_black {
  background: #2f3437;
}

.light_bg {
  background: #3e9bbc;
}

.section_dark_bg {
  background: #2f3437;
}

.default_btn {
  background: #3e9bbc;
  color: #ffffff;
  padding: 24px;
  position: relative;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: none;
  font-weight: 500;
  font-size: 16px;
  overflow: hidden;
  z-index: 1;
}

.default_btn:after,.default_btn:before {
  content: "";
  background: #2f3437;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  transform-origin: left;
  z-index: -1;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}

.default_btn:after {
  transform-origin: right;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.default_btn:hover {
  color: #ffffff;
  background: #3e9bbc;
}

.default_btn:hover:after,.default_btn:hover:before {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  visibility: visible;
  opacity: 1;
}

/* Hero Section Title */

.hero_section_title {
  position: relative;
  z-index: 5;
}

.hero_section_title h4 {
  font-size: 14px;
  color: #3e9bbc;
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 10px;
  padding-top: 28px;
}

.hero_section_title h4:before {
  content: "";
  background: #3e9bbc;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  top: 0;
}

.hero_section_title h1 {
  font-weight: 500;
  font-size: 40px;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .hero_section_title h1 {
    font-size: 20px;
  }
}

/* Default shape position */

.map_shape_2,.map_shape {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .map_shape_2,  .map_shape {
    width: 350px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .map_shape_2,  .map_shape {
    width: 300px;
  }
}

.map_shape_2 {
  left: auto;
  right: 0;
}

/* Triangle shape */

/* Pagination */

/* =========================
  #01 - PreLoader
============================*/

.header_slider_area .header_slider_bg {
  padding: 169px 0 179px 0;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .header_slider_area .header_slider_bg {
    background: #f2f2f2 none;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .header_slider_area .header_slider_bg {
    padding: 99px 0 109px 0;
  }
}


@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .header_slider_area .header_slider_bg.bg_2 {
    background: #f2f2f2 none;
  }
}


@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .header_slider_area .header_slider_bg.bg_4 {
    background: #f2f2f2 none;
  }
}

.header_slider_style_2 .header_slider_bg {
  padding: 227px 0 243px 0;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .header_slider_style_2 .header_slider_bg {
    padding: 227px 0 148px 0;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .header_slider_style_2 .header_slider_bg {
    padding: 187px 0 148px 0 !important;
  }
}

.header_slider_style_2 .header_slider_bg > .container {
  position: relative;
}

.header_slider_style_2 .header_slider_bg .secure_box {
  position: absolute;
  right: -241px;
  -webkit-transition: 2s;
  -ms-transition: 2s;
  -o-transition: 2s;
  -moz-transition: 2s;
  transition: 2s;
  opacity: 0;
  width: 240px;
  height: 240px;
  line-height: 260px;
  padding: 62px 35px;
  text-align: center;
  top: -78px;
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .header_slider_style_2 .header_slider_bg .secure_box {
    right: 0;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .header_slider_style_2 .header_slider_bg .secure_box {
    height: 230px;
    position: relative;
    padding: 58px 35px;
    right: auto;
    left: -43px;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .header_slider_style_2 .header_slider_bg .secure_box {
    top: -50px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .header_slider_style_2 .header_slider_bg .secure_box {
    top: -180px;
  }
}

.header_slider_style_2 .header_slider_bg .secure_box svg {
  position: absolute;
  left: 0;
  top: 0;
}

.header_slider_style_2 .header_slider_bg .secure_box p {
  color: #ffffff;
  z-index: 4;
  position: relative;
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
}

.header_slider_style_2 .owl-nav {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  margin-top: -15px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .header_slider_style_2 .owl-nav {
    display: none;
  }
}

.header_slider_style_2 .owl-nav button {
  width: 65px;
  height: 65px;
  background: rgba(255, 255, 255, 0.1) !important;
  display: block;
  z-index: 9;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 50%;
  margin-top: -32.5px;
  font-size: 24px !important;
  color: #ffffff !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .header_slider_style_2 .owl-nav button {
    left: 50px;
  }
}

.header_slider_style_2 .owl-item.active .header_slider_bg .secure_box {
  right: -41px;
  opacity: 1;
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px) {
  .header_slider_style_2 .owl-item.active .header_slider_bg .secure_box {
    right: 41px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .header_slider_style_2 .owl-item.active .header_slider_bg .secure_box {
    right: 0;
    left: 0;
  }
}

.hero_header_banner {
  background: rgba(0, 150, 255, 0.05);
  overflow: hidden;
  padding-bottom: 0;
  padding-top: 185px;
  position: relative;
}

.hero_header_banner .header_svg_home {
  display: none;
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .hero_header_banner .header_svg_home {
    width: 100%;
    height: auto;
  }
}

.hero_header_banner .header_svg_home .cls-1,.hero_header_banner .header_svg_home .cls-4,.hero_header_banner .header_svg_home .cls-5,.hero_header_banner .header_svg_home .cls-6 {
  fill: #3e9bbc;
}

.hero_header_banner .header_svg_home .cls-1,.hero_header_banner .header_svg_home .cls-2,.hero_header_banner .header_svg_home .cls-3,.hero_header_banner .header_svg_home .cls-5 {
  stroke: #3e9bbc;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.hero_header_banner .header_svg_home .cls-1,.hero_header_banner .header_svg_home .cls-5 {
  fill-opacity: 0;
}

.hero_header_banner .header_svg_home .cls-1,.hero_header_banner .header_svg_home .cls-2,.hero_header_banner .header_svg_home .cls-4,.hero_header_banner .header_svg_home .cls-7,.hero_header_banner .header_svg_home .cls-8 {
  fill-rule: evenodd;
}

.hero_header_banner .header_svg_home .cls-2,.hero_header_banner .header_svg_home .cls-3,.hero_header_banner .header_svg_home .cls-7 {
  fill: #0096ff26;
}

.hero_header_banner .header_svg_home .cls-8,.hero_header_banner .header_svg_home .cls-9 {
  fill: #fff;
}

.hero_header_banner .header_svg_home path,.hero_header_banner .header_svg_home rect,.hero_header_banner .header_svg_home ellipse,.hero_header_banner .header_svg_home circle,.hero_header_banner .header_svg_home g {
  stroke: #3e9bbc;
  fill: none;
  stroke-dasharray: 2000;
  opacity: 1;
  -webkit-animation: animate 5s linear;
  -o-animation: animate 5s linear;
  animation: animate 5s linear;
}

.hero_header_banner .header_svg_home .cls-4 {
  stroke-width: 0.5px;
}

@keyframes animate {
  0% {
    opacity: 0;
    fill: none;
    stroke-dashoffset: 2000;
  }

  30% {
    opacity: 10;
    fill: none;
    stroke-dashoffset: 2000;
  }

  90% {
    fill: none;
  }

  100% {
    opacity: 10;
    fill: none;
    stroke-dashoffset: 0;
  }
}

.hero_header_banner .header_svg_home.active {
  display: block;
  margin: auto;
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero_header_banner {
    padding-top: 250px;
  }
}

.hero_header_banner:before {
  width: 100%;
  height: 12px;
  content: "";
  background: #3e9bbc;
  position: absolute;
  left: 0;
  bottom: 0;
}

.hero_header_banner .circle_shape {
  width: 575px;
  height: 558px;
  background: #7ab1ca;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: -225px;
  top: 63px;
  opacity: 0.2;
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero_header_banner .circle_shape {
    width: 400px;
    height: 400px;
  }
}

.hero_header_banner .circle_2 {
  width: 212px;
  height: 204px;
  left: 30%;
  top: 36%;
}

.hero_header_banner .circle_3 {
  width: 390px;
  height: 379px;
  top: -155px;
  left: 55%;
}

.hero_header_banner .circle_4 {
  width: 575px;
  height: 557px;
  left: auto;
  right: -125px;
  top: auto;
  bottom: 38px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero_header_banner .circle_4 {
    right: -225px;
    bottom: -100px;
  }
}

.hero_header_banner .color_house_bottom {
  width: 1392px;
  margin: -37px auto auto auto;
}

@media (min-width: 1350px),
  (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .hero_header_banner .color_house_bottom {
    width: 100%;
  }
}

@media (max-width: 1920px) and (min-width: 1801px),
  (max-width: 1800px) and (min-width: 1600px) {
  .hero_header_banner .color_house_bottom {
    width: 1392px;
    margin: -37px auto auto auto;
  }
}

.hero_header_banner .hero_header_banner_title h1 {
  font-size: 60px;
  line-height: 80px;
  font-weight: 500;
  letter-spacing: -3px;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .hero_header_banner .hero_header_banner_title h1 {
    font-size: 50px;
    line-height: 55px;
  }
}

.hero_header_banner .hero_header_banner_title p {
  font-size: 22px;
  font-weight: 300;
  line-height: 36px;
  color: #7b8083;
  margin: 24px 0 30px 0;
}

/* .slider_style_4 {
  position: relative;
}

.slider_style_4 .header_slider_bg {
  position: relative;
  z-index: 1;
  padding: 280px 0 175px 0;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px) {
  .slider_style_4 .header_slider_bg {
    padding: 220px 0 145px 0;
  }
}

@media only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .slider_style_4 .header_slider_bg {
    padding: 187px 0 115px 0 !important;
  }
}

.slider_style_4 .header_slider_bg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #2f3437;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0.5;
}

.slider_style_4 .header_slider_bg .secure_box {
  position: relative;
  width: 130px;
  height: 130px;
  left: 50%;
  line-height: 130px;
  margin: auto auto 30px -64px;
  padding: 3px 10px 3px 16px;
  top: 0;
  transform-origin: top;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .slider_style_4 .header_slider_bg .secure_box {
    top: 0 !important;
  }
}

.slider_style_4 .header_slider_bg .secure_box svg {
  width: 130px;
  height: 130px;
}

.slider_style_4 .header_slider_bg .secure_box i {
  position: relative;
  color: #ffffff;
  font-size: 48px;
  display: block;
  width: 100%;
  height: 100%;
}


.slider_style_4 .owl-nav button {
  margin-top: 41px;
  top: 55%;
}

.slider_style_4 .owl-item.active .header_slider_bg .secure_box {
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .slider_style_4 .owl-item.active .header_slider_bg .secure_box {
    left: 50%;
  }
} */

/* =========================================
  #04 - Breadcrumb
=========================================*/

/* =========================================
  #05 - Services
=========================================*/

.service_area {
  position: relative;
  padding-bottom: 100px;
}

.service_area .service_slider_section .service_box {
  position: relative;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.service_area#cctv-ar .service_slider_section .service_box p {
  direction: rtl;
}

.service_area .service_slider_section .service_box:before {
  content: "";
  width: 100%;
  height: 100%;
  border-left: 2px solid #3e9bbc;
  border-top: 2px solid #3e9bbc;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
}

.service_area .service_slider_section .service_box .service_img {
  width: 100%;
  height: 224px;
}

.service_area .service_slider_section .service_box .service_content {
  position: relative;
  border: 2px solid #f2f2f2;
  border-top: 0;
  padding: 35px 43px 50px 43px;
}

.service_area .service_slider_section .service_box .service_content h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.service_area .service_slider_section .service_box .service_content p {
  line-height: 36px;
  font-weight: 400;
  color: #7b8083;
}

.service_area
  .service_slider_section
  .service_box
  .service_content
  .service_btn {
  position: absolute;
  width: 65px;
  height: 65px;
  font-size: 24px;
  color: #ffffff;
  background: #3e9bbc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  line-height: 65px;
  left: 50%;
  margin-left: -32.5px;
  bottom: -32.5px;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 99;
}

.service_area .service_slider_section .service_box:hover {
  -webkit-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  -ms-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  -o-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  -moz-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
}

.service_area .service_slider_section .service_box:hover .service_content {
  border-color: #ffffff;
}

.service_area
  .service_slider_section
  .service_box:hover
  .service_content
  .service_btn {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

.service_area .service_slider_section .service_box:hover:before {
  opacity: 1;
}

.service_area .service_slider_section .owl-stage-outer {
  padding: 50px 0;
}

.service_area .service_slider_section .owl-nav {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: left;
  z-index: -1;
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px) {
  .service_area .service_slider_section .owl-nav {
    z-index: 9;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .service_area .service_slider_section .owl-nav {
    display: none;
  }
}

.service_area .service_slider_section .owl-nav button {
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  border-radius: 50%;
  font-size: 24px;
  z-index: 9;
  margin-top: -32.5px;
}
.service_area .service_slider_section .owl-nav button.owl-next{
  position: absolute;
  right: -50px;
}

.service_area .service_slider_section .owl-nav button.owl-prev{
  position: absolute;
  left: -50px;
}

.feature_service_area {
  position: relative;
  overflow: hidden;
}

.feature_service_area .feature_service_flex {
  display: flex;
  justify-content: space-between;
}

.extra_margin {
  padding-bottom: 60px;
}
.extra_margin .service_slider_section .clear_both {
  clear: inherit;
}
.extra_margin .service_slider_section .service_box {
  margin-bottom: 90px;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_service_area .feature_service_flex {
    flex-wrap: wrap;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .feature_service_area .feature_service_flex {
    width: 65%;
    margin: auto;
  }
}

@media only screen and (max-width: 384px),
  only screen and (max-width: 320px),
  only screen and (max-width: 480px) {
  .feature_service_area .feature_service_flex .feature_service_left {
    margin-top: 0 !important;
  }
}

.feature_service_area .feature_service_flex .feature_service_left,.feature_service_area .feature_service_flex .feature_service_middle {
  flex-basis: 35%;
  margin-top: 53px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .feature_service_area .feature_service_flex .feature_service_left,  .feature_service_area .feature_service_flex .feature_service_middle {
    flex-basis: 50%;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .feature_service_area .feature_service_flex .feature_service_left,  .feature_service_area .feature_service_flex .feature_service_middle {
    flex-basis: 100%;
  }
}

.feature_service_area .feature_service_flex .feature_service_right {
  flex-basis: 30%;
  margin-top: -13px;
  margin-right: -72px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .feature_service_area .feature_service_flex .feature_service_right {
    flex-basis: 50%;
    margin-top: 25px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .feature_service_area .feature_service_flex .feature_service_right {
    flex-basis: 100%;
    margin-top: 45px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .feature_service_area .feature_service_flex .feature_service_right {
    margin-right: 0;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .feature_service_area .feature_service_flex .feature_service_right img {
    width: 100%;
  }
}

.feature_service_area .feature_service_flex .feature_service_item {
  display: flex;
  margin-bottom: 75px;
  align-items: flex-start;
}

@media only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_service_area .feature_service_flex .feature_service_item {
    margin-bottom: 45px;
  }
}

.feature_service_area .feature_service_flex .feature_service_item i {
  margin-right: 20px;
  display: inline-block;
  background: linear-gradient(to bottom, #acd4e2, #ffffff);
  width: 90px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  font-size: 40px;
  z-index: 1;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  color: #3e9bbc;
}

.feature_service_area .feature_service_flex .feature_service_item i:after {
  content: "";
  width: 54px;
  height: 54px;
  position: absolute;
  background: #ffffff;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  left: 50%;
  margin-left: -27px;
  top: -43px;
}

.feature_service_area
  .feature_service_flex
  .feature_service_item
  .details_right {
  flex-basis: 72%;
}

.feature_service_area
  .feature_service_flex
  .feature_service_item
  .details_right
  h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 7px;
}

.feature_service_area
  .feature_service_flex
  .feature_service_item
  .details_right
  p {
  color: #7b8083;
  font-size: 18px;
  font-weight: 300;
}

.feature_service_area .feature_service_flex .feature_service_item:hover i {
  background: #3e9bbc;
  color: #ffffff;
  -webkit-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -ms-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -o-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -moz-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
}

.feature_service_area .feature_service_flex .feature_service_item:last-child {
  margin-bottom: 0;
}

/* =========================================
  #06 - Solution
=========================================*/

.solution_area {
  position: relative;
  overflow: hidden;
}

.solution_area .solution_shape_2 {
  right: 20px;
}

.solution_area .left_solution_info .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.solution_area .left_solution_info h3 {
  color: #3e9bbc;
  font-weight: 300;
  font-size: 24px;
  line-height: 36px;
}

.solution_area .left_solution_info p {
  font-size: 18px;
  line-height: 36px;
  font-weight: 300;
  color: #7b8083;
}

.solution_area .right_solution_info {
  padding-left: 30px;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .solution_area .right_solution_info {
    padding-left: 0;
  }
}

.solution_area .right_solution_info img {
  right: 0;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 991px) {
  .solution_area .right_solution_info img {
    width: 545px;
    margin-top: 50px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .solution_area .right_solution_info img {
    margin-top: 50px;
  }
}

/* =========================================
  #07 - Our Story & History
=========================================*/

/* =========================================
  #08 - Quick Contact
=========================================*/

.quick_contact_area {
  overflow: hidden;
  position: relative;
  z-index: 9;
}

.quick_contact_area .quick_contact_flex {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 65px 0;
}

@media (min-width: 768px) and (max-width: 991px) {
  .quick_contact_area .quick_contact_flex {
    flex-wrap: wrap;
    padding-right: 20px;
    justify-content: space-between;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .quick_contact_area .quick_contact_flex {
    flex-wrap: wrap;
    padding-right: 20px;
    justify-content: center;
  }
}

.quick_contact_area .quick_contact_flex:before {
  content: "";
  background: #3e9bbc;
  right: 0;
  width: 5000px;
  position: absolute;
  top: 0;
  height: 100%;
  z-index: -1;
}

.quick_contact_area .quick_contact_flex .quick_contact_box {
  display: flex;
  align-items: center;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .quick_contact_area .quick_contact_flex .quick_contact_box {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    flex-direction: column;
    text-align: center;
  }
}

.quick_contact_area .quick_contact_flex .quick_contact_box i {
  display: inline-block;
  background: #ffffff;
  color: #3e9bbc;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 18px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .quick_contact_area .quick_contact_flex .quick_contact_box i {
    margin-bottom: 10px;
    margin-right: 0;
  }
}

.quick_contact_area .quick_contact_flex .quick_contact_box .details span {
  color: #2f3437;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  line-height: 15px;
  margin-bottom: 5px;
}

.quick_contact_area .quick_contact_flex .quick_contact_box .details p {
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
}

.quick_contact_area .quick_contact_flex .extra_padding {
  padding-right: 100px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .quick_contact_area .quick_contact_flex .extra_padding {
    margin-top: 20px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .quick_contact_area .quick_contact_flex .extra_padding {
    padding-right: 0;
    margin-bottom: 0;
  }
}

.quick_contact_area .quick_contact_flex .extra_padding .right_icon {
  font-size: 120px;
  position: absolute;
  right: 10px;
  width: auto;
  height: auto;
  color: #ffffff;
  opacity: 0.1;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: none;
  bottom: 35px;
}

.quick_contact_area .quick_contact_flex .extra_padding p {
  font-size: 30px;
}

/* ========================================
  #09 - Welcome And Protect & Manage Area
=========================================*/

.welcome_area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 991px) {
  .welcome_area {
    padding-bottom: 50px;
  }
}

.welcome_area .flex_welcome {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .welcome_area .flex_welcome {
    flex-wrap: wrap;
  }
}

.welcome_area .welcome_items_flex .welcome_item_box i {
  display: inline-block;
  background: linear-gradient(to bottom, #acd4e2, #ffffff);
  width: 125px;
  height: 125px;
  text-align: center;
  line-height: 125px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  font-size: 50px;
  z-index: 1;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  color: #3e9bbc;
  margin-bottom: 28px;
}

.welcome_area .welcome_items_flex .welcome_item_box i:after {
  content: "";
  width: 75px;
  height: 75px;
  position: absolute;
  background: #ffffff;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  left: 50%;
  margin-left: -37.5px;
  top: -60px;
}

.welcome_area .welcome_items_flex .welcome_item_box i.icon-smart-lock {
  padding-left: 15px;
}

.welcome_area .welcome_items_flex .welcome_item_box h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  z-index: 9;
}

.welcome_area .welcome_items_flex .welcome_item_box:hover i {
  background: #3e9bbc;
  color: #ffffff;
  -webkit-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -ms-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -o-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -moz-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
}

.welcome_area .welcome_items_flex > * {
  flex: 1;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .welcome_area .welcome_items_flex > * {
    margin-bottom: 40px;
    flex-basis: 33.333333%;
  }
}

.welcome_area .welcome_items_flex > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 991px) {
  .protect_and_manage {
    padding-bottom: 90px;
  }
}

.protect_and_manage .welcome_items_flex .col-md-4:last-child .welcome_item_box {
  margin-bottom: 0;
}

.protect_and_manage .welcome_items_flex .welcome_item_box {
  padding: 0 20px;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .protect_and_manage .welcome_items_flex .welcome_item_box {
    margin-bottom: 55px;
  }
}

.protect_and_manage .welcome_items_flex .welcome_item_box h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 27px;
}

.protect_and_manage .welcome_items_flex .welcome_item_box p {
  font-size: 18px;
  line-height: 33px;
  color: #7c7f82;
  font-weight: 300;
}

/* =========================
  #10 - Security
============================*/

.security_area {
  position: relative;
  padding-bottom: 62px;
}

.security_area .security_shape_2 {
  top: -77px;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .security_area .security_left_info {
    margin-bottom: 60px;
  }
}

.our_history_area .right_details .hero_section_title {
  margin-bottom: 40px;
}
.our_history_area .right_details .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.security_area .security_left_info .hero_section_title {
  margin-bottom: 58px;
}

.security_area .security_left_info .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.security_area .security_left_info .default_btn {
  background: #2f3437;
  color: #ffffff;
}

.security_area .security_left_info .default_btn:before,.security_area .security_left_info .default_btn:after {
  background: #3e9bbc;
}

@media (min-width: 481px) and (max-width: 767px) {
  .security_area .security_right_info {
    width: 65%;
    margin: auto;
  }
}

.security_area .security_right_info .security_box {
  padding: 13px;
  margin-bottom: 38px;
}

.security_area .security_right_info .security_box i {
  display: inline-block;
  background: linear-gradient(to bottom, #acd4e2, #ffffff);
  width: 125px;
  height: 125px;
  text-align: center;
  line-height: 125px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  font-size: 50px;
  z-index: 1;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  color: #3e9bbc;
  margin-bottom: 28px;
}

.security_area .security_right_info .security_box i:after {
  content: "";
  width: 75px;
  height: 75px;
  position: absolute;
  background: #ffffff;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  left: 50%;
  margin-left: -37.5px;
  top: -60px;
}

.security_area .security_right_info .security_box h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 34px;
}

.security_area .security_right_info .security_box p {
  font-size: 18px;
  color: #7b8083;
  font-weight: 300;
  position: relative;
  z-index: 9;
  line-height: 35px;
}

.security_area .security_right_info .security_box:hover i {
  background: #3e9bbc;
  color: #ffffff;
  -webkit-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -ms-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -o-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  -moz-box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
  box-shadow: 0 0 30px rgba(0, 150, 255, 0.15);
}

/* =========================
  #11 - Video Promotion
============================*/

.video_promotion_area {
  position: relative;
  z-index: 9;
}

.video_promotion_area .line_shape {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  opacity: 0.2;
}

.video_promotion_area .line_shape:before,.video_promotion_area .line_shape:after {
  content: "";
  position: absolute;
  background: #ffffff;
  width: 2px;
  height: 100%;
  left: 35.5%;
}

.video_promotion_area .line_shape:after {
  left: auto;
  right: 35.5%;
}

.video_promotion_area .video_promotion_box {
  background: url(../img/video-promotion-bg.webp) center center no-repeat;
  height: 400px;
  width: 100%;
  position: relative;
  z-index: 1;
  -webkit-box-shadow: 0 0 30px rgba(52, 55, 58, 0.3);
  -ms-box-shadow: 0 0 30px rgba(52, 55, 58, 0.3);
  -o-box-shadow: 0 0 30px rgba(52, 55, 58, 0.3);
  -moz-box-shadow: 0 0 30px rgba(52, 55, 58, 0.3);
  box-shadow: 0 0 30px rgba(52, 55, 58, 0.3);
}

.video_promotion_area .box2 {
  background: url(../img/video-promotion.webp) center center no-repeat;
}

.video_promotion_area .video_promotion_box:before {
  content: "";
  background: #2f3437;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: .4;
}

.video_promotion_area .video_promotion_box .play_btn_box {
  width: 127px;
  height: 127px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -63.5px;
  margin-top: -63.5px;
  text-align: center;
  line-height: 127px;
  overflow: hidden;
}

.video_promotion_area .video_promotion_box .play_btn_box svg {
  position: absolute;
  left: 0;
  z-index: -1;
  top: 0;
}

.video_promotion_area .video_promotion_box .play_btn_box a {
  z-index: 4;
  display: block;
  border-radius: 50%;
  font-size: 30px;
  padding-left: 5px;
  cursor: pointer;
}

.video_promotion_area .video_promotion_box .play_btn_box a img {
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}

.video_promotion_area .video_promotion_box .play_btn_box a img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.video_promotion_area .video_promotion_box .experience_date {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 120px;
  width: 350px;
  background: #2f3437;
  color: #ffffff;
  padding: 34px 40px;
  font-size: 24px;
  font-weight: 500;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .video_promotion_area .video_promotion_box .experience_date {
    width: 100%;
    padding: 20px;
  }

  .sec-head {
    font-size: 12px;
  }

  p {
    font-size: 13px;
  }
}

.video_promotion_area .video_promotion_box .experience_date span {
  color: #3e9bbc;
}

.video_promotion_area1 .video_promotion_box1 {
  width: 127px;
  height: 127px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -63.5px;
  margin-top: -63.5px;
  text-align: center;
  line-height: 127px;
  overflow: hidden;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .video_promotion_area1 .video_promotion_box1 {
    width: 100%;
    padding: 20px;
  }
}

.video_promotion_area1 .video_promotion_box1span {
  color: #3e9bbc;
}

/* =========================
  #12 - Award
============================*/

.award_area {
  padding-top: 22px;
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .award_area {
    padding-top: 0;
  }
}

.award_area:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: -240px;
  background: #f2f2f2;
  z-index: -1;
}

.award_area .award_left .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.award_area .award_left p {
  font-size: 18px;
  font-weight: 400;
  color: #7b8083;
  line-height: 36px;
}

.award_area .award_right {
  position: relative;
  text-align: right;
  padding-left: 65px;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right {
    margin-top: 60px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right {
    padding-left: 0;
    text-align: left;
  }
}

@media (min-width: 1350px), (min-width: 992px) and (max-width: 1200px) {
  .award_area .award_right {
    margin-top: 15%;
  }
}

@media (max-width: 1920px) and (min-width: 1801px),
  (max-width: 1800px) and (min-width: 1600px) {
  .award_area .award_right {
    margin-top: 0;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .award_area .award_right {
    margin-top: 30%;
  }
}

.award_area .award_right:before,.award_area .award_right:after {
  content: "";
  width: 436px;
  height: 436px;
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #3e9bbc;
  right: -182px;
  top: -24px;
  z-index: -1;
}

@media (min-width: 1350px),
  (min-width: 992px) and (max-width: 1200px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right:before,  .award_area .award_right:after {
    right: 0;
    width: 350px;
    height: 350px;
    top: 10px;
  }
}

@media (max-width: 1800px) and (min-width: 1600px),
  (max-width: 1920px) and (min-width: 1801px) {
  .award_area .award_right:before,  .award_area .award_right:after {
    right: -182px;
    top: -24px;
    width: 436px;
    height: 436px;
  }
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .award_area .award_right:before,  .award_area .award_right:after {
    width: 150px !important;
    height: 150px !important;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right:before,  .award_area .award_right:after {
    width: 300px;
    height: 300px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right:before,  .award_area .award_right:after {
    right: 0;
    top: 10px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right:before,  .award_area .award_right:after {
    top: 50px;
  }
}

.award_area .award_right:before {
  width: 344px;
  height: 344px;
  right: 107px;
  background: #7b8083;
  top: 59px;
}

@media (min-width: 1350px),
  (min-width: 992px) and (max-width: 1200px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right:before {
    width: 300px;
    height: 300px;
    right: 155px;
  }
}

@media (max-width: 1920px) and (min-width: 1801px),
  (max-width: 1800px) and (min-width: 1600px) {
  .award_area .award_right:before {
    width: 344px;
    height: 344px;
    right: 107px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right:before {
    right: 230px;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .award_area .award_right:before {
    right: 100px !important;
  }
}

.award_area .award_right img {
  margin-top: 68px;
}

@media (min-width: 1350px),
  (min-width: 992px) and (max-width: 1200px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .award_area .award_right img {
    width: 100%;
  }
}

@media (max-width: 1800px) and (min-width: 1600px),
  (max-width: 1920px) and (min-width: 1801px) {
  .award_area .award_right img {
    width: auto;
  }
}

/* =========================
  #13 - Packages
============================*/

.packages_area {
  position: relative;
  overflow: hidden;
}

.packages_area:before {
  content: "";
  position: absolute;
  background: #000;
  left: 0;
  top: 0;
  width: 100%;
  height: 549px;
  z-index: -1;
}

.packages_area .packages_shape,.packages_area .packages_shape_2 {
  opacity: 0.05;
}

.packages_area .hero_section_title h1 {
  color: #ffffff;
  font-weight: 500;
}

.packages_area .col-md-4:last-child .packages_box {
  margin-bottom: 0;
}

.packages_area .packages_box h3 {
  color: #fff !important;
}

.packages_area .packages_box:hover h3 {
  background-color: #0000005e !important;
  width: 100%;
  padding: 10px;
}

.packages_area .packages_box h5 {
  color: #fff !important;
}

.packages_area .packages_box:hover h5 {
  background-color: #0000005e !important;
  width: 100%;
  padding: 10px;
  text-align: center;
}

.packages_area .packages_box {
  position: relative;
  width: 100%;
  z-index: 1;
  height: 400px;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  display: flex;
  align-items: flex-end;
  padding: 62px 60px;
}

.acs .packages_box.bg_1 {
  background: url("../img/products/acs/fully integrate.webp") center center no-repeat;
  background-size: cover;
}

.acs .packages_box.bg_2 {
  background: url("../img/products/acs/low cost.webp") center center no-repeat;
  background-size: cover;
}

.acs .packages_box.bg_3 {
  background: url("../img/products/acs/time limited.webp") center center no-repeat;
  background-size: cover;
}

.intercom .packages_box.bg_1 {
  background: url("../img/products/intercom/auto door.webp") center center no-repeat;
  background-size: cover;
}

.intercom .packages_box.bg_2 {
  background: url("../img/products/intercom/know people.webp") center center no-repeat;
  background-size: cover;
}

.intercom .packages_box.bg_3 {
  background: url("../img/products/intercom/easy use.webp") center center no-repeat;
  background-size: cover;
}

.cctv .packages_box.bg_1 {
  background: url("../img/products/cctv/alarm.webp") center center no-repeat;
  background-size: cover;
}

.cctv .packages_box.bg_2 {
  background: url("../img/products/cctv/online.webp") center center no-repeat;
  background-size: cover;
}

.cctv .packages_box.bg_3 {
  background: url("../img/products/cctv/monitoring.webp") center center no-repeat;
  background-size: cover;
}

.sound .packages_box.bg_1 {
  background: url("../img/products/sound/halls.webp") center center no-repeat;
  background-size: cover;
}

.sound .packages_box.bg_2 {
  background: url("../img/products/sound/bank.webp") center center no-repeat;
  background-size: cover;
}

.sound .packages_box.bg_3 {
  background: url("../img/products/sound/sound light.webp") center center no-repeat;
  background-size: cover;
}

.net .packages_box.bg_1 {
  background: url("../img/products/networks/hardware.webp") center center no-repeat;
  background-size: cover;
}

.net .packages_box.bg_2 {
  background: url("../img/products/networks/software.webp") center center no-repeat;
  background-size: cover;
}

.net .packages_box.bg_3 {
  background: url("../img/products/networks/services.webp") center center no-repeat;
  background-size: cover;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .packages_area .packages_box {
    padding: 40px 35px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .packages_area .packages_box {
    margin-bottom: 30px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .packages_area .packages_box {
    width: 65%;
    margin: auto auto 30px auto;
  }
}

@media only screen and (max-width: 320px),
  only screen and (max-width: 384px),
  only screen and (max-width: 480px) {
  .packages_area .packages_box {
    width: 100%;
    padding: 30px 30px;
  }
}

.packages_area .packages_box:before {
  content: "";
  background: #2f3437;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.packages_area .packages_box h5 {
  color: #ffffff;
}

.packages_area .packages_box a {
  position: absolute;
  right: 30px;
  top: 30px;
  padding: 0;
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #ffffff;
  color: #2f3437;
  font-size: 24px;
}

.packages_area .packages_box a:hover {
  color: #ffffff;
}

.packages_area .packages_box a:before,.packages_area .packages_box a:after {
  background: #3e9bbc;
}

.packages_area .packages_box:hover {
  -webkit-box-shadow: 0 0 30px rgba(47, 52, 55, 0.3);
  -ms-box-shadow: 0 0 30px rgba(47, 52, 55, 0.3);
  -o-box-shadow: 0 0 30px rgba(47, 52, 55, 0.3);
  -moz-box-shadow: 0 0 30px rgba(47, 52, 55, 0.3);
  box-shadow: 0 0 30px rgba(47, 52, 55, 0.3);
}

.packages_area .packages_box:hover a {
  color: #ffffff;
}

.packages_area .packages_box:hover h5 {
  color: #626262;
}

.packages_area .packages_box:hover a:before,.packages_area .packages_box:hover a:after {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
  visibility: visible;
}

.packages_area .packages_box:hover:before {
  background: none;
  border-left: 2px solid #3e9bbc;
  border-top: 2px solid #3e9bbc;
  opacity: 1;
}

.packages_area .build_packages_area {
  margin-top: 120px;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px),
  only screen and (max-width: 480px) {
  .packages_area .build_packages_area {
    flex-direction: column;
    padding-top: 50px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px),
  only screen and (max-width: 480px) {
  .packages_area .build_packages_area {
    padding: 50px 15px 0 15px;
  }
}

.packages_area .build_packages_area > * {
  flex: 1;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .packages_area .build_packages_area .package_left img {
    width: 480px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .packages_area .build_packages_area .package_left img {
    width: 100%;
  }
}

.packages_area .build_packages_area .package_left {
  padding: 0;
}

.packages_area .build_packages_area .package_right ul li {
  padding: 5px 0;
}

.packages_area .build_packages_area .package_right ul li:before {
  content: "\f058";
  font-family: "FontAwesome";
  padding: 10px;
  color: #639dd2;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .packages_area .build_packages_area .package_right {
    padding: 34px 50px 40px 55px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .packages_area .build_packages_area .package_right {
    padding: 50px 0 50px 0;
  }
}

.packages_area .build_packages_area .package_right h1 {
  font-size: 50px;
  font-weight: 500;
  line-height: 58px;
  margin-bottom: 17px;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .packages_area .build_packages_area .package_right h1 {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 25px;
  }
}

.packages_area .build_packages_area .package_right p {
  font-size: 20px;
  font-weight: 300;
  color: #7b8083;
  margin-bottom: 62px;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .packages_area .build_packages_area .package_right p {
    font-size: 16px;
    margin-bottom: 30px;
  }
}

.packages_area .build_packages_area .package_right p span {
  font-size: 50px;
  font-weight: 400;
  color: #3e9bbc;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .packages_area .build_packages_area .package_right p span {
    font-size: 40px;
  }
}

.packages_area .build_packages_area .package_right .default_btn:hover {
  color: #2f3437;
}

.packages_area .build_packages_area .package_right .default_btn:before,.packages_area .build_packages_area .package_right .default_btn:after {
  background: #ffffff;
}

.feature_package_area {
  position: relative;
  padding-bottom: 0;
  overflow: hidden;
}

.feature_package_area .feature_package_box {
  padding-right: 15px;
}

@media only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_package_area .feature_package_box {
    flex-direction: column;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px) {
  .feature_package_area .feature_package_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.feature_package_area .feature_package_box .package_box {
  margin-bottom: 33px;
  width: 155px;
  text-align: center;
  margin-left: auto;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_package_area .feature_package_box .package_box {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_package_area .feature_package_box .package_box {
    margin-bottom: 30px;
  }
}

.feature_package_area .feature_package_box .package_box:last-child {
  margin-bottom: 0;
}

.feature_package_area
  .feature_package_box
  .package_box:hover
  .package_icon
  svg {
  -webkit-box-shadow: 22px 22px 30px rgba(0, 150, 200, 1);
  -ms-box-shadow: 22px 22px 30px rgba(0, 150, 200, 1);
  -o-box-shadow: 22px 22px 30px rgba(0, 150, 200, 1);
  -moz-box-shadow: 22px 22px 30px rgba(0, 150, 200, 1);
  box-shadow: 22px 22px 30px rgba(0, 150, 200, 1);
}

.feature_package_area .feature_package_box .package_box:hover .package_icon i {
  color: #ffffff;
}

.feature_package_area .feature_package_box .package_box .package_icon {
  position: relative;
  width: 125px;
  height: 125px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  line-height: 125px;
  margin-left: auto;
  margin-right: auto;
}

.feature_package_area .feature_package_box .package_box .package_icon svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  height: 100%;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}

.feature_package_area .feature_package_box .package_box .package_icon i {
  display: inline-block;
  position: relative;
  font-size: 50px;
  color: #3e9bbc;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.feature_package_area .feature_package_box .package_box p {
  font-weight: 400;
  margin-top: 10px;
}

.feature_package_area .feature_package_box .package_box.package_1 {
  margin-top: 18px;
}

.feature_package_area .feature_package_box .package_box.package_2 {
  margin-right: 61px;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_package_area .feature_package_box .package_box.package_2 {
    margin-left: 0;
    margin-right: 0;
  }
}

.feature_package_area .feature_package_img img {
  width: 366px;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .feature_package_area .feature_package_img img {
    width: 100%;
    margin-top: 50px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_package_area .feature_package_img img {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .feature_package_area .feature_package_img img {
    width: 100%;
  }
}

.feature_package_area .right_package {
  padding-left: 20px;
  padding-right: 0;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px) {
  .feature_package_area .right_package {
    margin-bottom: 100px;
  }
}

.feature_package_area .right_package .package_box {
  margin-left: 0;
  margin-right: auto;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_package_area .right_package .package_box {
    margin-right: 0;
  }
}

.feature_package_area .right_package .package_box .package_icon {
  margin-left: auto;
  margin-right: auto;
}

.feature_package_area .right_package .package_box:last-child {
  margin-bottom: 90px;
}

@media (min-width: 481px) and (max-width: 767px) {
  .feature_package_area .right_package .package_box:last-child {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px) {
  .feature_package_area .right_package .package_box.package_1 {
    margin-top: 0;
  }
}

.feature_package_area .right_package .package_box.package_1 i {
  padding-left: 15px;
}

.feature_package_area .right_package .package_box.package_2 {
  margin-right: 0;
  margin-left: 61px;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_package_area .right_package .package_box.package_2 {
    margin-left: 0;
  }
}

/* =========================
  #14 - Compare
============================*/

/* =========================
  #15 - Benefits
============================*/

.benefits_area {
  background: #2f3437;
}

.benefits_area .hero_section_title h1 {
  color: #ffffff;
}

.benefits_area .benefits_left {
  position: relative;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .benefits_area .benefits_left {
    margin-bottom: 50px;
  }
}

.benefits_area .benefits_left img {
  width: 500px;
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .benefits_area .benefits_left img {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .benefits_area .col-md-6.pl_0 {
    padding-left: 15px;
  }
}

.benefits_area .benefits_right {
  position: relative;
}

.benefits_area .benefits_right h2 {
  font-size: 24px;
  line-height: 40px;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 40px;
  margin-top: -10px;
}

.benefits_area .benefits_right p {
  color: #b9bcbd;
  font-weight: 400;
  font-size: 18px;
  line-height: 40px;
  margin-bottom: 52px;
}

.benefits_area .benefits_right a:hover {
  color: #2f3437;
}

.benefits_area .benefits_right a:after,.benefits_area .benefits_right a:before {
  background: #ffffff;
}

.benefits_style_2_area {
  background-size: cover;
  position: relative;
  z-index: 1;
}

.benefits_style_2_area:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0.9;
}

.benefits_style_2_area .hero_section_title h1 {
  color: #ffffff;
}

.benefits_style_2_area .benefits_box p {
  background: rgba(46, 49, 51, 0.4);
  font-size: 22px;
  line-height: 36px;
  color: #ffffff;
  display: flex;
  align-items: center;
  font-weight: 300;
  padding: 22px 40px;
  margin-bottom: 20px;
  position: relative;
}

@media(max-width: 600px){
  .benefits_style_2_area .benefits_box p {
    font-size: 18px;
    line-height: 35px;
    padding: 18px 10px;
}
.benefits_style_2_area .head2{
  font-size: 20px !important;
}
}

.benefits_style_2_area .benefits_box p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-left: 2px solid #3e9bbc;
  border-top: 2px solid #3e9bbc;
  opacity: 0;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.benefits_style_2_area .benefits_box p i {
  color: #3e9bbc;
  font-size: 24px;
  margin-right: 20px;
}

.benefits_style_2_area .benefits_box p:hover {
  background: #2e3133;
}

.benefits_style_2_area .benefits_box p:hover:before {
  opacity: 1;
}

/* =========================
  #16 - Team Member
============================*/

@media (min-width: 768px) and (max-width: 991px) {
  .team_member_area {
    padding-bottom: 90px;
  }
}

.team_member_area .col-md-3:last-child .team_member_box {
  margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 991px) {
  .team_member_area .team_member_box {
    margin-bottom: 30px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .team_member_area .team_member_box {
    width: 65%;
    margin: auto auto 30px auto;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .team_member_area .team_member_box {
    width: 100%;
  }
}

.team_member_area .team_member_box:hover img {
  border-color: #3e9bbc;
}

.team_member_area .team_member_box img {
  width: 100%;
  border-left: 3px solid #f2f2f2;
  border-top: 3px solid #f2f2f2;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.team_member_area .team_member_box .team_details {
  padding-top: 28px;
}

.team_member_area .team_member_box .team_details h3 {
  font-size: 22px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 5px;
}

.team_member_area .team_member_box .team_details span {
  display: block;
  font-size: 12px;
  line-height: 26px;
  text-transform: uppercase;
  color: #7b8083;
  letter-spacing: 2px;
  font-weight: 300;
}

/* =========================
  #17 - Testimonial
============================*/

/* =========================
  #18 - Client
============================*/

.client_logo_area .client_slider_section .client_img_box img {
  width: 123px;
  margin: auto;
  opacity: 0.3;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.client_logo_area .client_slider_section .client_img_box img:hover {
  opacity: 1;
}

/* ===========================
  #19 - Features
==============================*/


.feature_action_area {
  position: relative;
}

.feature_action_area:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 916px;
  height: 100%;
  opacity: 0.15;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .feature_action_area:before {
    height: 500px;
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .feature_action_area .pl_0 {
    padding-left: 15px;
  }
}

.feature_action_area .feature_action_left {
  position: relative;
  margin-right: 35px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_action_area .feature_action_left {
    margin-right: 0;
  }
}

.feature_action_area .feature_action_left .img_box {
  width: 470px;
  height: 506px;
  border-left: 2px solid #3e9bbc;
  border-top: 2px solid #3e9bbc;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .feature_action_area .feature_action_left .img_box {
    width: 100%;
  }
}

.feature_action_area .feature_action_left .activity_title {
  width: 328px;
  height: 120px;
  background: #2f3437;
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  right: 0;
  bottom: -30px;
  padding: 30px 40px;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .feature_action_area .feature_action_left .activity_title {
    width: 100%;
    padding: 15px 30px;
  }
}

.feature_action_area .feature_action_left .activity_title span {
  color: #3e9bbc;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .feature_action_area .feature_action_right {
    margin-top: 80px;
  }
}

.feature_action_area .feature_action_right .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.feature_action_area .feature_action_right .hero_section_title h1 {
  font-weight: 500;
}

.feature_action_area .feature_action_right ul li {
  font-size: 18px;
  line-height: 30px;
  color: #7c7f82;
  font-weight: 300;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.feature_action_area .feature_action_right ul li i {
  font-size: 28px;
  color: #35bbea;
  margin-right: 15px;
}

.feature_action_area .feature_action_right ul li:last-child {
  margin-bottom: 0;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .system_feature_area .system_feature_left {
    margin-bottom: 30px;
  }
}

.system_feature_area .system_feature_left .system_feature_box {
  background: #ffffff;
  border: 2px solid #f2f2f2;
  padding: 34px 35px 30px 35px;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.system_feature_area .system_feature_left .system_feature_box h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  margin-bottom: 15px;
}

.system_feature_area .system_feature_left .system_feature_box h3 a {
  color: #2f3437;
  text-decoration: none;
}

.system_feature_area .system_feature_left .system_feature_box p {
  line-height: 30px;
  color: #7b8083;
  font-weight: 400;
}

.system_feature_area .system_feature_left .system_feature_box:hover {
  border-left-color: #3e9bbc;
  border-top-color: #3e9bbc;
  -webkit-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  -ms-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  -o-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  -moz-box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  box-shadow: 0 0 30px rgba(47, 52, 55, 0.1);
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.system_feature_area .system_feature_left .system_feature_box:hover h3 a {
  color: #3e9bbc;
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .system_feature_area .system_feature_middle img {
    width: 100%;
  }
}

.system_feature_area .system_feature_right {
  background: #3e9bbc;
  height: 464px;
  padding: 40px 20px;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .system_feature_area .system_feature_right {
    padding: 42px 20px 50px 20px;
  }
}

@media (min-width: 768px) and (max-width: 991.5px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .system_feature_area .system_feature_right {
    margin-top: 20px;
    height: 295px;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 320px) {
  .system_feature_area .system_feature_right {
    height: 330px;
  }
}

.system_feature_area .system_feature_right h1 {
  color: #ffffff;
  font-size: 30px;
  line-height: 40px;
  font-weight: 500;
}

.system_feature_area .system_feature_right a {
  text-transform: uppercase;
  color: #ffffff;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 13px;
  margin: 25px 0;
}

/* =========================
  #20 - Network
============================*/

.network_area {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.network_area > .container > .row {
  display: flex;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .network_area > .container > .row {
    flex-direction: column;
  }
}

.network_area:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 862px;
}

@media (max-width: 1800px) and (min-width: 1600px) {
  .network_area:before {
    width: 44.3%;
  }
}

@media (min-width: 1350px), (min-width: 1201px) and (max-width: 1349px) {
  .network_area:before {
    width: 43%;
  }
}

@media (max-width: 1800px) and (min-width: 1600px),
  (max-width: 1920px) and (min-width: 1801px) {
  .network_area:before {
    width: 45%;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .network_area:before {
    width: 500px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .network_area:before {
    display: none;
  }
}

.network_area .network_left {
  padding: 120px 95px 112px 0;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .network_area .network_left {
    padding: 90px 0 0 0;
  }
}

.network_area .network_left .icon_box {
  display: flex;
  text-align: center;
  align-items: center;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .network_area .network_left .icon_box {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.network_area .network_left .icon_box li {
  width: 90px;
  text-align: center;
  margin-right: 50px;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .network_area .network_left .icon_box li {
    margin: 0 0 50px 0;
    flex-basis: 100%;
    flex-wrap: wrap;
  }
}

.network_area .network_left .icon_box li i {
  background: #474b4e;
  display: inline-block;
  color: #babdbf;
  font-size: 35px;
  width: 90px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  margin-bottom: 18px;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: relative;
}

.network_area .network_left .icon_box li i:after {
  content: "";
  position: absolute;
  background: #2f3437;
  width: 54px;
  height: 54px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  left: 50%;
  top: -40px;
  margin-left: -27px;
}

.network_area .network_left .icon_box li span {
  display: block;
  font-size: 16px;
  color: #babdbf;
  font-weight: 400;
  line-height: 20px;
}

.network_area .network_left .icon_box li:last-child {
  margin-right: 0;
  margin-bottom: 0;
}

.network_area .network_left .icon_box li:hover i {
  background: #3e9bbc;
  color: #ffffff;
}

.network_area .network_left .icon_box li:hover span {
  color: #ffffff;
}

.network_area .network_left .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.network_area .network_left .hero_section_title h1 {
  color: #ffffff;
}

.network_area .network_left p {
  font-size: 18px;
  line-height: 36px;
  color: #babdbf;
  font-weight: 300;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .network_area .col-md-5.pl_0 {
    padding-left: 15px;
  }
}

.network_area .network_right {
  padding: 120px 70px;
  height: 100%;
  width: 388px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .network_area .network_right {
    width: 100%;
    height: 500px;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .network_area .network_right {
    padding: 90px 15px;
    margin-top: 50px;
  }
}

.network_area .network_right:before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0;
  width: 100%;
  height: 100%;
  background: #3e9bbc;
  z-index: -1;
  opacity: 0.9;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .network_area .network_right:before {
    left: 0;
  }
}

.network_area .network_right h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: #ffffff;
}

.network_area .network_right a {
  color: #ffffff;
  font-size: 16px;
  line-height: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none !important;
  display: inline-block;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .service_single_2 {
    padding-bottom: 450px;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .service_single_2 {
    padding-bottom: 500px;
  }
}

.service_single_2:before {
  width: 50%;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .service_single_2:before {
    display: block;
    width: 100%;
    left: 0;
    top: auto;
    bottom: 0;
    height: 450px;
  }
}

.service_single_2 .network_left {
  padding-right: 60px;
}

/* =========================
  #21 - Easy Step by Step
============================*/

/* =========================
  #22 - Installation
============================*/

.installation_area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .installation_area {
    padding-bottom: 500px;
  }
}

.installation_area:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 862px;
  height: 100%;
}

@media (min-width: 1350px), (min-width: 992px) and (max-width: 1200px) {
  .installation_area:before {
    width: 50%;
  }
}

@media (max-width: 1920px) and (min-width: 1801px) {
  .installation_area:before {
    width: 862px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .installation_area:before {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 450px;
    left: 0;
  }
}

.installation_area .installation_shape {
  opacity: 0.03;
}

.installation_area .installation_left {
  position: relative;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .installation_area .installation_left {
    margin-bottom: 50px;
  }
}

.installation_area .installation_left .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.installation_area .installation_left .hero_section_title h1 {
  color: #ffffff;
  font-weight: 500;
}

.installation_area .installation_left p {
  font-size: 18px;
  line-height: 36px;
  color: #babdbf;
  font-weight: 300;
  margin-bottom: 52px;
}

.installation_area .installation_left a:hover {
  color: #2f3437;
}

.installation_area .installation_left a:after,.installation_area .installation_left a:before {
  background: #ffffff;
}

.video_doorbell {
  padding-bottom: 146px;
}

.video_doorbell:before {
  display: none;
}

.video_doorbell .installation_left .default_btn:hover {
  color: #ffffff;
}

.video_doorbell .installation_left .default_btn:before,.video_doorbell .installation_left .default_btn:after {
  background: #2f3437;
}

.video_doorbell .video_doorbell_right {
  position: relative;
  padding-top: 72px;
}

.vdr_smart {
  background: url("../img/products/smart/best.webp") center no-repeat;
  background-size: cover;
}

.vdr_cctv {
  background: url("../img/products/cctv/best.webp") center no-repeat;
  background-size: cover;
}

.vdr_intercom {
  background: url("../img/products/intercom/best.webp") center no-repeat;
  background-size: cover;
}

.vdr_cloud {
  background: url("../img/products/cloud/best.webp") center no-repeat;
  background-size: cover;
}

.vdr_acs {
  background: url("../img/products/acs/best.webp") center no-repeat;
  background-size: cover;
}

.vdr_net {
  background: url("../img/products/networks/best.webp") center no-repeat;
  background-size: cover;
}

.vdr_sound {
  background: url("../img/products/sound/best.webp") center no-repeat;
  background-size: cover;
}

.video_doorbell .video_doorbell_right .img_box .img_bg {
  width: 270px;
  height: 181px;
  right: 0;
  margin-left: auto;
}

.video_doorbell .video_doorbell_right .img_box .img_bg.img_2 {
  margin-right: auto;
  margin-left: 0;
}

.video_doorbell .video_doorbell_right .img_box.bottom_img {
  margin-left: 90px;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .video_doorbell .video_doorbell_right .img_box.bottom_img {
    margin-left: 0 !important;
  }
}

.video_doorbell .video_doorbell_right .top_img {
  margin-right: 50px;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .video_doorbell .video_doorbell_right .top_img {
    margin-bottom: 100px;
  }
}

.video_doorbell .video_doorbell_right .cart_box {
  position: absolute;
  background: #ffffff;
  width: 237px;
  text-align: center;
  top: 0;
  left: 133px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .video_doorbell .video_doorbell_right .cart_box {
    left: 0;
  }
}

.video_doorbell .video_doorbell_right .cart_box p {
  font-size: 18px;
  font-weight: 400;
  color: #2f3437;
  line-height: 25px;
  padding: 25px 30px;
}

.video_doorbell .video_doorbell_right .cart_box a {
  border-top: 1px solid #f2f2f2;
  display: block;
  padding: 5px;
  text-decoration: none;
}

.video_doorbell .video_doorbell_right .cart_box.cart_2 {
  top: 182px;
  z-index: 2;
  width: 320px;
  left: 223px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  padding: 28px 30px 26px 30px;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .video_doorbell .video_doorbell_right .cart_box.cart_2 {
    top: 230px;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .video_doorbell .video_doorbell_right .cart_box.cart_2 {
    left: 50%;
    margin-left: -160px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .video_doorbell .video_doorbell_right .cart_box.cart_2 {
    left: 180px;
    align-items: center;
  }
}

.video_doorbell .video_doorbell_right .cart_box.cart_2 img {
  width: 21px;
  margin-right: 10px;
}

.video_doorbell .video_doorbell_right .cart_box.cart_2 .cart_right_details h5 {
  font-size: 16px;
  align-items: center;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.video_doorbell
  .video_doorbell_right
  .cart_box.cart_2
  .cart_right_details
  h5
  span {
  font-weight: 300;
  color: #7b8083;
}

.video_doorbell .video_doorbell_right .cart_box.cart_2 .cart_right_details p {
  align-items: center;
  padding: 0;
  font-weight: 300;
  color: #7b8083;
  margin-bottom: 8px;
  font-size: 16px;
}

.video_doorbell .video_doorbell_right .cart_box.cart_2 .cart_right_details a {
  align-items: center;
  line-height: 20px;
  padding: 0;
  border: none;
  font-weight: 300;
}

.video_doorbell .video_doorbell_right .cart_box.cart_3 {
  top: auto;
  left: auto;
  right: 0;
  width: 281px;
  bottom: -46px;
}

.video_doorbell .video_doorbell_right .cart_box.cart_3 h5 {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  margin-top: 20px;
}

.video_doorbell .video_doorbell_right .cart_box.cart_3 p {
  font-size: 16px;
  padding: 0 38px 30px 35px;
  line-height: 22px;
  font-weight: 300;
  color: #7b8083;
}

.video_doorbell .video_doorbell_right .cart_box.cart_3 .cart_btn_flex {
  display: flex;
  align-items: center;
}

.video_doorbell .video_doorbell_right .cart_box.cart_3 .cart_btn_flex > * {
  flex: 1;
  font-weight: 300;
}

.video_doorbell
  .video_doorbell_right
  .cart_box.cart_3
  .cart_btn_flex
  > *:first-child {
  border-right: 1px solid #f2f2f2;
}

.service_single_1 {
  overflow: hidden;
}

.service_single_1 .installation_left {
  padding-left: 59px;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .service_single_1 .installation_left {
    padding-left: 0;
  }
}

.service_single_1 .installation_left .hero_section_title h1 {
  color: #2f3437;
}

.service_single_1 .installation_left p {
  color: #7b8083;
  font-size: 18px;
}

.service_single_1:before {
  right: auto;
  left: 0;
  width: 50%;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .service_single_1:before {
    width: 100%;
  }
}

.service_single_3 {
  overflow: hidden;
}

.service_single_3 .installation_left {
  padding-left: 59px;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .service_single_3 .installation_left {
    padding-left: 0;
  }
}

.service_single_3 .installation_left .hero_section_title h1 {
  color: #2f3437;
}

.service_single_3 .installation_left p {
  color: #7b8083;
  margin-bottom: 37px;
}

.service_single_3 .installation_left p:last-child {
  margin-bottom: 0;
}

.service_single_3:before {
  right: auto;
  left: 0;
  width: 50%;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .service_single_3:before {
    width: 100%;
  }
}

/* =========================
  #23 - Quote
============================*/

.quote_area .quote_left .hero_section_title {
  margin-bottom: 43px;
}

.quote_area .quote_left .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.quote_area .quote_left .hero_section_title h1 {
  font-weight: 500;
}

.quote_area .quote_left p {
  color: #7c7f82;
  font-size: 18px;
  line-height: 36px;
  font-weight: 300;
  margin-bottom: 35px;
}

.quote_area .quote_left .risk_area {
  background: #2f3437;
  padding: 60px 60px 52px 48px;
  display: flex;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .quote_area .quote_left .risk_area {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 45px 40px 37px 33px;
  }
}

.quote_area .quote_left .risk_area i {
  font-size: 64px;
  color: #3e9bbc;
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .quote_area .quote_left .risk_area i {
    margin-bottom: 10px;
  }
}

.quote_area .quote_left .risk_area .risk_details {
  margin-left: -3px;
}

.quote_area .quote_left .risk_area .risk_details h2 {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 22px;
}

.quote_area .quote_left .risk_area .risk_details p {
  margin-bottom: 0;
  color: #babdbf;
  font-size: 18px;
  line-height: 36px;
  font-weight: 300;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .quote_area .quote_right {
    margin-top: 50px;
  }
}

.quote_area .quote_right .quote_body_info {
  background: #f2f2f2;
  padding: 60px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .quote_area .quote_right .quote_body_info {
    padding: 40px;
  }
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .quote_area .quote_right .quote_body_info {
    padding: 30px 20px !important;
  }
}

/*radio button*/

/* =========================
  #24 - Automation Control
============================*/

.automation_control_area {
  position: relative;
  z-index: 1;
  height: 856px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

@media (min-width: 1350px),
  (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 384px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px) {
  .automation_control_area {
    overflow-y: hidden !important;
    overflow-x: scroll !important;
  }
}

@media (max-width: 1920px) and (min-width: 1801px),
  (max-width: 1800px) and (min-width: 1600px) {
  .automation_control_area {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
}

.automation_control_area .house {
  position: absolute;
  bottom: 0;
  width: 1392px;
  left: 50%;
  margin-left: -696px;
  z-index: -1;
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .automation_control_area .house {
    left: 0;
    margin-left: 0;
  }
}

.automation_control_area .hero_section_title h1 {
  font-weight: 500;
}

.automation_control_area .automation_control_section {
  position: absolute;
  width: 1392px;
  left: 50%;
  margin-left: -615px;
  bottom: 120px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .automation_control_area .automation_control_section {
    left: 0;
    margin-left: 0;
  }
}

@media (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px) {
  .automation_control_area .automation_control_section {
    left: 80px;
    margin-left: 0;
  }
}

.automation_control_area .automation_control_section .automation_control_box {
  position: relative;
}

.automation_control_area
  .automation_control_section
  .automation_control_box
  .automation_details_box {
  position: absolute;
  left: 0;
  z-index: 1;
  border: 2px solid #3e9bbc;
  display: flex;
  width: 410px;
  height: 230px;
  background: #ffffff;
  padding: 40px 40px 40px 26px;
  -webkit-box-shadow: 0 0 30px rgba(0, 150, 200, 2);
  -ms-box-shadow: 0 0 30px rgba(0, 150, 200, 2);
  -o-box-shadow: 0 0 30px rgba(0, 150, 200, 2);
  -moz-box-shadow: 0 0 30px rgba(0, 150, 200, 2);
  box-shadow: 0 0 30px rgba(0, 150, 200, 2);
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  top: -300px;
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box
    .automation_details_box {
    height: 210px;
    padding: 30px 30px 30px 17px;
  }
}

.automation_control_area
  .automation_control_section
  .automation_control_box
  .automation_details_box
  i {
  font-size: 64px;
  color: #3e9bbc;
  margin-right: 8px;
}

.automation_control_area
  .automation_control_section
  .automation_control_box
  .automation_details_box
  .automation_details
  h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 35px;
}

.automation_control_area
  .automation_control_section
  .automation_control_box
  .automation_details_box
  .automation_details
  p {
  font-size: 17px;
  color: #7c7f82;
  font-weight: 300;
}

.automation_control_area
  .automation_control_section
  .automation_control_box.light_control {
  margin-top: -197px;
  width: 100%;
  height: 100px;
  right: -4px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.light_control {
    margin-top: -198px;
    right: -78px;
  }
}

.automation_control_area
  .automation_control_section
  .automation_control_box.light_control
  .automation_details_box {
  top: -213px;
  left: -214px !important;
}

@media (min-width: 1350px),
  (min-width: 992px) and (max-width: 1200px),
  (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 384px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.light_control
    .automation_details_box {
    left: 155px !important;
  }
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 384px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.light_control
    .automation_details_box {
    top: -195px;
  }
}

@media (max-width: 1920px) and (min-width: 1801px),
  (max-width: 1800px) and (min-width: 1600px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.light_control
    .automation_details_box {
    left: -214px !important;
  }
}

.automation_control_area
  .automation_control_section
  .automation_control_box.window_control {
  position: relative;
  height: 30px;
}

.automation_control_area
  .automation_control_section
  .automation_control_box.window_control
  .automation_details_box {
  top: -187px;
  left: 85px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.window_control
    .automation_details_box {
    top: -168px;
    left: 188px;
  }
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.window_control
    .automation_details_box {
    top: -121px;
    left: 164px;
  }
}

.automation_control_area
  .automation_control_section
  .automation_control_box.cctv_control {
  position: absolute;
  top: -290px;
  margin-left: -90px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.cctv_control {
    top: -243px;
    margin-left: -10px;
  }
}

.automation_control_area
  .automation_control_section
  .automation_control_box.cctv_control
  .automation_details_box {
  top: 16px !important;
  margin-left: 13px;
}

.automation_control_area
  .automation_control_section
  .automation_control_box.wall_control {
  position: absolute;
  top: -70px;
  left: -74px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.wall_control {
    top: -28px;
    left: 10px;
  }
}

.automation_control_area
  .automation_control_section
  .automation_control_box.wall_control
  .automation_details_box {
  right: 10px !important;
  left: auto !important;
  top: -210px !important;
}

.automation_control_area
  .automation_control_section
  .automation_control_box.garage_control {
  position: absolute;
  left: -53px;
  top: -20px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.garage_control {
    left: 0;
    top: 25px;
  }
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.garage_control {
    left: 25px;
    top: -15px;
  }
}

.automation_control_area
  .automation_control_section
  .automation_control_box.garage_control
  .automation_details_box {
  top: -213px;
  left: auto;
  right: 12px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .automation_control_area
    .automation_control_section
    .automation_control_box.garage_control
    .automation_details_box {
    top: -194px;
    right: 10px;
  }
}

/* ===================================
  #25 - HomeSecure Mobile App
====================================*/

/* =========================
  #26 - FeedBacks
============================*/

/* =========================
  #27 - Blog
============================*/

/* =========================
  #28 - Call to action
============================*/

/* =========================================
  #29 - Contact & Service Single Contact
===========================================*/

.contact_area {
  position: relative;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 384px),
  only screen and (max-width: 320px) {
  .contact_area .map_box {
    margin-bottom: 50px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .contact_area .col-md-6.pl_10 {
    padding-left: 15px;
  }
}

.homesecure_mobile_area .homesecure_mobile_left .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}
.homesecure_mobile_area .homesecure_mobile_left .hero_section_title h1 {
  color: #ffffff;
  font-weight: 500;
}

.blog_area .hero_section_title h1 {
  font-weight: 500;
}

.contact_area .contact_box .hero_section_title h4:before {
  left: 0;
  margin-left: 0;
}

.contact_box form .col-md-6.pl_10 {
  padding-left: 15px;
}

.contact_box form .input-group input,.contact_box form .input-group textarea {
  width: 100%;
  background: #f2f2f2;
  border: none;
  font-weight: 400;
  color: #7b8083;
  height: 70px;
  padding: 20px 30px;
  margin-bottom: 20px;
}

.contact_box form .input-group textarea {
  padding: 30px;
  height: 140px;
  margin-bottom: 10px;
}

#map {
  width: 100%;
  height: 559px;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px) {
  #map {
    height: 400px;
  }
}

.service_contact_area .hero_section_title h1 {
  line-height: 47px;
}

@media only screen and (max-width: 384px), only screen and (max-width: 320px) {
  .service_contact_area .hero_section_title h1 {
    line-height: 35px;
    font-size: 30px;
  }
}

.service_contact_area .hero_section_title h1 span {
  color: #3e9bbc;
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px) {
  #map_style_two #map {
    height: 400px;
  }
}

@media only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  #map_style_two #map {
    height: 300px;
  }
}

.contact_style_4 .contact_right_info {
  border: 2px solid #f2f2f2;
  padding: 45px 40px 45px 47px;
  margin-top: 147px;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .contact_style_4 .contact_right_info {
    padding: 44px 15px 44px 15px;
  }
}

@media (min-width: 768px) and (max-width: 991px),
  (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px),
  only screen and (max-width: 384px) {
  .contact_style_4 .contact_right_info {
    margin-top: 40px;
  }
}

@media only screen and (max-width: 320px), only screen and (max-width: 384px) {
  .contact_style_4 .contact_right_info {
    padding: 20px 15px;
  }
}

.contact_style_4 .contact_right_info h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 22px;
}

.contact_style_4 .contact_right_info ul li {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #7b8083;
  display: flex;
  position: relative;
  align-items: center;
}

.contact_style_4 .contact_right_info ul li i {
  font-size: 22px;
  color: #3e9bbc;
  margin-right: 20px;
  display: inline-block;
  width: 30px;
  text-align: center;
}

.contact_style_4 .contact_right_info ul li:last-child {
  margin-bottom: 0;
}

.contact_style_4 .contact_box form .input-group textarea {
  height: 177px;
}

/* =========================
  #30 - Error
============================*/

/* =========================
  #31 - Footer
============================*/

.footer_area {
  position: relative;
  overflow: hidden;
}

.footer_area .footer_shape,.footer_area .footer_shape_2 {
  opacity: 0.03;
}

.footer_style_2 {
  padding-bottom: 0;
}

.copyright_area {
  background: #2a2d30;
  padding: 45px 0;
}

.copyright_area p {
  color: #babdbf;
  font-weight: 400;
}

.copyright_area p a {
  color: #3e9bbc;
  display: inline-block;
  position: relative;
  border-bottom: 1px solid #42533e;
  line-height: 17px;
  text-decoration: none !important;
}

.copyright_style_2 {
  padding-top: 115px;
  background: none;
}

@media (min-width: 481px) and (max-width: 767px),
  only screen and (max-width: 384px),
  only screen and (max-width: 480px),
  only screen and (max-width: 320px) {
  .copyright_style_2 {
    text-align: center;
    padding-top: 80px;
  }
}

.copyright_style_2 .container {
  padding-top: 40px;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

/* All @keyframes*/

/* @-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
  }

  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
} */

/*start responsive*/

@media (min-width: 1920px) {
  .work-right-text {
    padding: 150px 150px;
  }
}

/* Normal desktop :992px. */

  .work-right-text {
    padding: 40px 0;
  }

  .work-right-text h2 {
    font-size: 18px;
    line-height: 28px;
  }

/* Tablet desktop :768px. */

@media (min-width: 768px) and (max-width: 991px) {
  .main-menu ul.navbar-nav li {
    display: inline-block;
    padding: 0 8px;
  }

  .layer-1-1 h2 {
    font-size: 24px;
  }

  .layer-1-2 h1 {
    font-size: 31px;
    line-height: 38px;
    padding: 0px 30px;
  }

  .suscribe-input input {
    width: 60%;
  }

  .suscribe-input button {
    width: 40%;
  }

  .team-content.text-center>h4 {
    font-size: 20px;
  }

  .sus-btn {
    margin-left: 0;
  }

  .suscribe-text h3 {
    font-size: 16px;
    padding-right: 20px;
  }

  .work-right-text h5 {
    font-size: 14px;
    line-height: 22px;
  }

  .work-right-text {
    padding: 36px 0;
  }

  .work-right-text h2 {
    font-size: 14px;
    line-height: 22px;
  }

  .work-right-text .ready-btn {
    font-size: 13px;
    padding: 7px 20px;
    margin-top: 5px;
  }

  .map-column {
    margin-left: 0;
    padding-right: 40px;
  }

  .post-information .entry-meta {
    font-size: 13px;
    padding: 5px 0;
  }

  .post-information .entry-meta span a {
    padding: 4px 0;
  }

  .contact-form {
    margin-top: 0px;
  }
}

/* small mobile :320px. */

@media (max-width: 767px) {
  .html-a {
    width: 100%;
  }

  .header-area {
    height: 60px !important;
    background: #000;
  }

  .navbar-header a.navbar-brand {
    display: inline-block;
    height: 60px  !important;
    padding: 9px 0;
  }

  .navbar-default .navbar-toggle {
    padding: 15px 0;
  }

  .nav.navbar-nav.navbar-right {
    background-color: #252525;
    padding: 0;
    margin-top: 0;
  }

  .main-menu ul.navbar-nav li {
    display: block;
  }

  .main-menu ul.navbar-nav li a {
    padding: 10px 2px;
  }

  .main-menu ul.navbar-nav li.active a::after {
    border: 0px solid #fff;
  }

  .logo {
    height: inherit;
    left: 0;
    padding: 0;
    position: absolute;
    top: -6px;
    z-index: 999999;
  }

  .logo a {
    padding: 0;
  }

  .slider-area {
    margin-top: 60px;
  }

  .slider-content h2 {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .slider-content h1 {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  .layer-1-3 a.ready-btn {
    padding: 8px 15px;
  }
  

  .section-headline h2 {
    font-size: 26px;
  }

  .well-middle .single-well {
    margin-top: 30px;
  }

  .suscribe-input input {
    width: 60%;
  }

  .suscribe-input button {
    font-size: 15px;
    padding: 14px 10px;
    width: 40%;
  }

  .section-headline h3 {
    font-size: 18px;
  }

  .well-text>h2 {
    font-size: 18px;
  }

  .well-text p {
    display: none;
  }

  .single-team-member {
    margin-bottom: 30px;
  }

  .service-right {
    width: 100%;
  }

  .service-images:hover .overly-text {
    display: none;
  }

  .sus-btn {
    margin-left: 0;
    margin-top: 30px;
  }

  .contact-form {
    margin-top: 30px;
  }

  .head-team h5 {
    font-size: 22px;
  }

  .footer-content {
    margin-bottom: 30px;
  }

  .header-bottom h1 {
    font-size: 30px;
    margin-bottom: 0;
  }

  .page-area .slider-content {
    padding: 100px 0;
  }

  .header-bottom h2 {
    font-size: 20px;
    margin-bottom: 0;
  }
}

/* Large Mobile :480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .html-a {
    width: 100%;
  }
}

/*end responsive*/

/* ========================
  Responsive Layout
==========================*/

/*# sourceMappingURL=style.css.map */