/*

TemplateMo 565 Onix Digital

https://templatemo.com/tm-565-onix-digital


------------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

#myVideo {
  position: fixed;
  /* right: 0;
  bottom: 0; */
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
/* .content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
} */
/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
  margin-bottom: -5px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #ff695f;
  font-weight: 700;
  opacity: 1;
  text-transform: capitalize;
}

.section-heading span {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  color: #ff695f;
  opacity: 0.15;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-blue-button-hover a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-blue-button-hover a:hover {
  background-color:  #ff0d00;
}

.main-red-button a {
  display: inline-block;
  background-color:  #ff0d00;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button-hover a {
  display: inline-block;
  background-color:  #ff0d00;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-red-button-hover a:hover {
  background-color: #03a4ed;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color:  #ff0d00;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: rgba(0, 0, 0, 0.4)!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #ffffff!important;
}

.background-header .main-nav .nav li .blink{
  animation: blinker 2s linear infinite;
}

  @keyframes blinker {
    50% {
      color: red;
    }
  }

.background-header .main-nav .nav li:hover a {
  color: #ff0d00!important;
}

.background-header .nav li a.active {
  color:  #ff0d00!important;
}

.header-area {
  background-color: rgba(0, 0, 0, 0.5);
  /* background: transparent; */
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  color: #000000 !important;
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: #000000 !important;
}

.header-area .main-nav .nav li:last-child .main-red-button-hover a:hover,
.background-header .main-nav .nav li:last-child .main-red-button-hover a:hover {
  background-color: #03a4ed !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #ffffff;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color:  #ff0d00!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color:  #ff0d00!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #ffffff;
  color: #ff685f!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #f8f8f8;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #f8f8f8;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #f8f8f8;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #f8f8f8;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #f8f8f8;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #f8f8f8;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #f8f8f8;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #f8f8f8;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #ff685f;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ff685f!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background: rgba(0, 0, 0, 0.5);
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #000000;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ff685f!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #ff695f;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #ff695f;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 236px 0px 130px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  /* background-image: url(../images/baner-dec-left.png); */
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 267px;
  height: 532px;
}

.main-banner:before {
  content: '';
  /* background-image: url(../images/banner-right-image.png); */
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 100px;
  width: 819px;
  height: 674px;
}

.main-banner .item {
  margin-right: 45px;
}

.main-banner .item h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #ff695f;
  margin-bottom: 15px;
}

.main-banner .item h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
}

.main-banner .item h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .item h2 span {
  color: #ff695f;
}

.main-banner .item p {
  margin: 20px 0px;
}

.main-banner .item .down-buttons {
  display: inline-flex;
}

.main-banner .item .down-buttons .call-button i {
  margin-right: 5px;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  color: #fff;
  font-size: 20px;
}

.main-banner .item .down-buttons .call-button a {
  color: #ff695f;
  font-size: 15px;
  font-weight: 500;
  margin-left: 30px;
}

.main-banner .owl-dots {
  margin-top: 60px;
  counter-reset: dots;
}

.main-banner .owl-dot:before {
  counter-increment:dots;
  content: counter(dots);
  font-size: 20px;
  font-weight: 500;
  margin-left: 10px;
  color: #2a2a2a;
  width: 15px;
  display: inline-block;
  text-align: center;
  border-bottom: 3px solid transparent;
  transition: all .5s;
}

.main-banner .active:before {
  color: #ff685f;
  border-bottom: 3px solid #ff685f;
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services .services-left-dec img {
  width: 387px;
  height: 638px;
  left: -80px;
  top: -140px;
  position: absolute;
  z-index: 1;
}

.our-services .services-right-dec img {
  width: 305px;
  height: 305px;
  right: 25px;
  bottom: -120px;
  position: absolute;
  z-index: 1;
}

.our-services .container {
  position: relative;
}

.our-services {
  position: relative;
  margin-top: 0px;
  padding-top: 120px;
}

.our-services .section-heading {
  text-align: center;
  margin-bottom: 45px;
}

.our-services .section-heading h2 {
  margin: 0px 60px;
  margin-bottom: -10px;
}

.our-services .item {
  text-align: center;
  margin: 15px;
  border-radius: 20px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
}

.our-services .item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 30px;
  line-height: 30px;
}

.our-services .item .icon {
  width: 45px;
  height: 45px;
  margin: 0 auto;
}

.our-services .item p {
  margin-top: 35px;
  padding-top: 30px;
  border-top: 1px solid #ff0000;
}

.our-services .owl-dots {
  text-align: center;
  margin-top: 40px;
}
.our-services .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background-color: #ff695f;
  border-radius: 50%;
  opacity: 0.3;
  margin: 0px 5px;
}

.our-services .owl-dots .active {
  opacity: 1;
  width: 10px;
  height: 10px;
}


/* 
---------------------------------------------
About
--------------------------------------------- 
*/

.about-us {
  margin-top: 0px;
  padding-top: 120px;
}

.about-us .left-image {
  margin-right: 30px;
}

.about-us .section-heading h2 {
  margin-right: 60px;
}

.about-us .section-heading p {
  margin-top: 50px;
}

.about-us .fact-item .icon {
  width: 45px;
  height: 45px;
}

.about-us .fact-item {
  margin-top: 45px;
}

.about-us .fact-item .count-digit {
  font-size: 48px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 5px;
}

.about-us .fact-item .count-title {
  font-size: 15px;
  color: #ff695f;
}

.about-us .fact-item p {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio .portfolio-left-dec img {
  width: 342px;
  height: 311px;
  left: 45px;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.our-portfolio {
  padding-top: 120px;
  margin-top: 0px;
  position: relative;
}

.our-portfolio .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.our-portfolio .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}

.our-portfolio {
  margin: 0px 15px;
}

.our-portfolio .item .thumb {
  position: relative;
}

.our-portfolio .item .thumb:hover .hover-effect {
  bottom: 30px;
}

.our-portfolio .item .thumb:hover img {
  opacity: 0.7;
}

.our-portfolio .item .hover-effect {
  position: absolute;
  /* background-image: url(../images/hover-bg.png); */
  background: rgba(255, 0, 0, 0.8);
  background-repeat: no-repeat;
  background-size: cover;
  transition: all .5s;
  border-radius: 15px;
  bottom: -240px;
  right: 30px;
  width: 239px;
  height: 210px;
}

.our-portfolio .item .hover-effect .inner-content {
  position: absolute;
  right: 30px;
  bottom: 30px;
  text-align: right;
}

.our-portfolio .item .hover-effect .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.our-portfolio .item .hover-effect .inner-content span {
  font-size: 15px;
  color: #fff;
}

.our-portfolio .item .thumb img {
  border-radius: 20px;
  transition: all .3s;
}

.owl-portfolio .owl-nav {
  position: absolute;
  top: 42%;
  width: 100%;
}

.owl-portfolio .owl-nav .owl-prev {
  position: absolute;
  left: 25px;
}

.owl-portfolio .owl-nav .owl-next {
  position: absolute;
  right: 30px;
}

.owl-portfolio .owl-nav .owl-prev span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-prev span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-prev span:after {
  width: 46px;
  height: 46px;
  background-color: #ff695f;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f104';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-nav .owl-next span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-next span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-next span:after {
  width: 46px;
  height: 46px;
  background-color: #ff695f;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f105';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-dots {
  text-align: center;
  margin-top: 40px;
}
.owl-portfolio .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background-color: #ff695f;
  border-radius: 50%;
  opacity: 0.3;
  margin: 0px 5px;
}

.owl-portfolio .owl-dots .active {
  opacity: 1;
  width: 10px;
  height: 10px;
}

/* 
---------------------------------------------
Pricing
--------------------------------------------- 
*/

.pricing-tables .tables-left-dec img {
  width: 418px;
  height: 851px;
  left: 0;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.pricing-tables .tables-right-dec img {
  width: 359px;
  height: 848px;
  right: 0;
  top: 45px;
  position: absolute;
  z-index: 1
}

.pricing-tables {
  z-index: 2;
  position: relative;
  padding-top: 120px;
  margin-top: 0px;
}

.pricing-tables .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.pricing-tables .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}

.pricing-tables .item {
  position: relative;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 45px;
}

.pricing-tables .item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
}

.pricing-tables .item em {
  color: #ff695f;
  font-size: 15px;
  display: block;
  margin-top: 25px;
  text-decoration: line-through;
  font-style: normal;
}

.pricing-tables .item span {
  font-size: 44px;
  color: #ff695f;
  font-weight: 700;
  display: block;
  margin-top: -5px;
}

.pricing-tables .item ul {
  margin-top: 30px;
}

.pricing-tables .item ul li {
  display: block;
  font-size: 15px;
  color: #7a7a7a;
  margin-bottom: 20px;
}

.pricing-tables .item .main-blue-button {
  margin-top: 40px;
}

.pricing-tables .first-item {
  background-image: url(../images/first-plan-bg.png);
}

.pricing-tables .second-item {
  background-image: url(../images/second-plan-bg.png);
}

.pricing-tables .third-item {
  background-image: url(../images/third-plan-bg.png);
}


/* 
---------------------------------------------
Subscribe
--------------------------------------------- 
*/

.subscribe {
  margin-top: 120px;
}

.subscribe .inner-content {
  background-image: url(../images/subscribe-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
  padding: 60px 0px;
  width: 100%;
  position: relative;
}

.subscribe .inner-content:after {
  content: '';
  background-image: url(../images/subscribe-dec.png);
  position: absolute;
  width: 195px;
  height: 138px;
  background-repeat: no-repeat;
  background-position: center center;
  right: -20px;
  top: -20px;
}

.subscribe .inner-content h2 {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  margin-bottom: 25px;
}

.subscribe .inner-content form {
  width: 100%;
  height: 80px;
  border-radius: 40px;
  background-color: #fff;
}

.subscribe .inner-content form input {
  width: 38.5%;
  margin-top: 20px;
  line-height: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0px 20px;
  font-size: 15px;
  color: #2a2a2a;
}

.subscribe .inner-content form input#website {
  border-right: 1px solid #eee;
}

.subscribe .inner-content form input::placeholder {
  color: #afafaf;
}

.subscribe .inner-content form button {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  width: 20%;
  margin-right: 10px;
  text-transform: capitalize;
  padding: 12px 20px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  text-align: center;
  transition: all .3s;
}

.subscribe .inner-content form button:hover {
  background-color: #ff695f;
}


/* 
---------------------------------------------
Video
--------------------------------------------- 
*/

.our-videos .videos-left-dec img {
  width: 220px;
  height: 471px;
  left: 0;
  top: 120px;
  position: absolute;
}

.our-videos .videos-right-dec img {
  width: 730px;
  height: 523px;
  right: 0;
  top: 45px;
  position: absolute;
}

.our-videos {
  position: relative;
  margin-bottom: -30px;
  padding-top: 120px;
  margin-top: 0px;
}

.our-videos .naccs {
  position: relative;
}

.our-videos .naccs .menu div {
  margin-bottom: 30px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.our-videos .naccs .menu div {
  transition: all 0.3s;
}

.our-videos .naccs .menu div.active .thumb .inner-content {
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 23px;
}

.our-videos .naccs .menu div.active .thumb .inner-content h4 {
  top: 40%;
  transform: translateY(-55%);
  position: relative;
}

.our-videos .naccs .menu div.active .thumb .inner-content span {
  display: block;
  position: relative;
  top: 55%;
  transform: translateY(-55%);
}

.our-videos ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.our-videos ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.our-videos ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

.our-videos ul.nacc li {
  width: 100%;
}

.our-videos .nacc .thumb {
  position: relative;
  border-radius: 23px;
}

.our-videos .nacc .thumb iframe {
  border-radius: 23px;
  height: 675px;
}

.our-videos .nacc .thumb .overlay-effect {
  background: rgba(255, 13, 0);
  /* background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%); */
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  border-top-left-radius: 23px;
  border-bottom-right-radius: 23px;
  padding: 35px 30px;
  text-align: center;
}

.our-videos .nacc .thumb .overlay-effect h4 {
  font-size: 20px;
  margin-top: 5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.our-videos .nacc .thumb .overlay-effect span {
  font-size: 15px;
  color: #fff;
}

.our-videos .menu .thumb {
  position: relative;
}

.our-videos .menu .thumb .inner-content {
  background: rgba(255, 0, 0, 0.5);
  /* background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%); */
  border-top-left-radius: 23px;
  border-bottom-right-radius: 23px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px 30px;
  transition: all 0.3s;
}

.our-videos .menu .thumb .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  transition: all 0.3s;
}

.our-videos .menu .thumb .inner-content span {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  display: none;
  transition: all 0.3s;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-dec img {
  position: absolute;
  z-index: 1;
  width: 459px;
  height: 702px;
  right: 0;
  bottom: -400px;
}

.contact-left-dec img {
  position: absolute;
  z-index: 1;
  width: 174px;
  height: 319px;
  left: 0;
  top: 120px;
}

.contact-us {
  z-index: 2;
  position: relative;
  padding-top: 120px;
  margin-top: 0px;
}

.contact-us .section-heading h2 {
  margin-right: 100px;
  margin-bottom: 40px;
}

.contact-us #map iframe {
  border-radius: 23px;
  position: relative;
  z-index: 2;
}

.contact-us .info {
  margin-top: 30px;
  position: relative;
  z-index: 5;
  display: inline-flex;
}

.contact-us .info span {
  opacity: 1;
  display: inline-flex;
  margin-right: 30px;
}

.contact-us .info span i {
  float: left;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background: rgb(255, 13, 0);
  /* background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%); */
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.contact-us .info span a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  text-transform: none;
}

form#contact {
  margin-left: -100px;
  position: relative;
  z-index: 2;
  background-color: rgb(0, 0, 0);
  /* background-image: url(../images/contact-form-bg.png); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 60px 120px;
  border-radius: 20px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid #9bdbf8;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #ffffff;
  padding: 0px 0px;
  margin-bottom: 35px;
}

form#contact input::placeholder {
  color: #ffffff;
}

form#contact button {
  display: inline-block;
  background-color: #ff0000;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: #03a4ed;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

.footer-dec {
  width: 100%;
  margin-top: 160px;
}

footer {
  background: rgba(0, 0, 0, 0.5);
  margin-top: -50px;
  z-index: 2;
  position: relative;
  padding-top: 10px;
}

footer .footer-item h4 {
  font-size: 18px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 30px;
}

footer .about .logo img {
  width: 89px;
  margin-bottom: 30px;
}

footer .about a {
  color: #ffffff;
  font-weight: 300;
}

footer .about ul {
  margin-top: 20px;
}

footer .about ul li {
  display: inline-block !important;
  margin-right: 5px;
}

footer .about ul li a {
  width: 32px;
  height: 32px;
  background-color: #03a4ed;
  color: #fff !important;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  line-height: 32px;
  font-size: 15px;
}

footer .about ul li a:hover {
  background-color: #ff695f;
}

footer .footer-item ul li {
  display: block;
  margin-bottom: 12px;
}

footer .footer-item ul li:last-child {
  margin-bottom: 0px;
}

footer .footer-item ul li a {
  font-size: 15px;
  color: #afafaf;
  transition: all .3s;
}

footer .footer-item ul li a:hover {
  color: #ff695f;
}

footer .footer-item p {
  font-size: 15px;
  color: #afafaf;
  margin-top: -5px;
}

footer .footer-item form {
  background-color: #03a4ed;
  height: 46px;
  border-radius: 23px;
  position: relative;
  margin-top: 15px;
}

footer .footer-item form input {
  line-height: 46px;
  background-color: transparent;
  border: none;
  font-size: 14px;
  padding: 0px 20px;
  outline: none;
}

footer .footer-item form input::placeholder {
  color: #fff;
}

footer .footer-item form button {
  position: absolute;
  right: 20px;
  top: 10px;
  color: #fff;
  background-color: transparent;
  border: none;
  outline: none;
}

footer .copyright p {
  text-align: center;
  border-top: 1px solid #eee;
  color: #afafaf;
  margin-top: 50px;
  padding: 20px 0px;
  font-weight: 300;
}

footer .copyright p a {
  color: #ff695f;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


@media (max-width: 1240px) {
  .main-banner::before {
    width: 640px;
    height: 526px;
  }

}

@media (max-width: 992px) {
  .main-banner::before {
    display: none;
  }
  .main-banner .item {
    margin-right: 0px;
  }
  .main-banner  {
    padding-bottom: 0px;
  }
  .about-us .section-heading h2 {
    margin-right: 0px;
  }
  .fact-item {
    text-align: center;
  }
  .fact-item .icon {
    margin: 0 auto;
  }
  .our-portfolio .section-heading h2,
  .pricing-tables .section-heading h2 {
    margin: 0px;
  }
  .pricing-tables .item {
    margin-bottom: 30px;
  }
  .subscribe .inner-content {
    padding: 60px 30px;
  }
  .our-videos ul.nacc {
    margin-bottom: 30px;
  }
  .our-videos .naccs .menu div img {
    border-radius: 50px;
  }
  .our-videos .menu .thumb .inner-content {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .contact-us .section-heading h2 {
    margin-right: 0px;
    text-align: center;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .our-videos .nacc .thumb iframe {
    height: 500px;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 60px;
  }
  form#contact {
    padding: 45px 30px;
  }
  .footer-item {
    margin-bottom: 45px;
  }
  .subscribe-newsletters {
    margin-bottom: 0px;
  }
}

@media (max-width: 767px) {
  .main-banner .item .down-buttons {
    display: inline-block;
  }
  .main-banner .item .down-buttons .main-blue-button {
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .main-banner .item .down-buttons .call-button a {
    margin-left: 0px;
  }
  .subscribe .inner-content:after {
    z-index: -1;
  }
  .subscribe .inner-content {
    padding: 60px 30px 100px 30px;
  }
  .subscribe .inner-content form input {
    width: 49%;
  }
  .subscribe .inner-content form button {
    width: 100%;
    background-color: #ff1100;
    margin-top: 30px;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .contact-left-dec {
    display: none;
  }
  .contact-us .info {
    display: inline-block;
  }
  .contact-us .info span {
    margin-bottom: 20px;
  }
}

.blink {
  color: #ffffff;
  animation: blinker 2s linear infinite;

  font-family: sans-serif;
}
@keyframes blinker {
  50% {
    color: red;
  }
}

/* .head-con{
  background-color: rgba(247, 247, 247, 0.3);
  border-radius: 15px;
} */

.banner-logo{
  display: block;
  /* height: 100px; */
  width: 20%;
  margin-left: auto;
  margin-right: auto;

}

.border-right{
  border-right: 1px solid #ff0000 ;
}

.border-left{
  border-left: 1px solid #ff0000 ;
}

.float{
	position:fixed;
	width:90%;
	bottom:0;

  right: 5%;
 

	background-color: rgba(0, 0, 0, 0.9);
	color:#FFF;
	border-radius:10px;
	text-align:center;
  font-size:30px;
	/* box-shadow: 2px 2px 3px #ffffff; */
  z-index:100;
}
.float1{
	position:fixed;
  padding: 10px;
  top: 20%;
  right: 0;
	background-color: rgba(0, 0, 0, 0.6);
	color:#ffffff;
	border-radius:10px;
	text-align:center;
  font-size:30px;
	/* box-shadow: 2px 2px 3px #ffffff; */
  z-index:100;
}
.float2{
	position:fixed;
	width:50px;
	height:50px;
	bottom:80px;
	right:15px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  display: none;
  z-index:100;
}

.float3{
	position:fixed;
  display: none;
	width:50px;
	height:50px;
	bottom:150px;
	right:15px;
	background-color:#ff0000;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}

.my-float1{
	margin-top:13px;
}

.my-float2{
	margin-top:14px;
}
.about-img{
  position: relative;
  z-index:99;
  
}

.border-left1{
  border-left: 4px solid #ff0000 ;
}

.item{
  background-color: transparent;
}

.item{
  padding: 0;
}
.container-box {
  position: relative;
  width: 100%;
  /* max-width: 300px; */
  max-height: 300px;
  height: 100%;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.item:hover .overlay {
  opacity: 1;
}

/* timer mobile */

.sidepanel {
  text-align: center;
  height: 250px; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 99; /* Stay on top */
  top: 20%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  display: none;
  z-index: 100;
  position: fixed;
  right: 0;
  margin-top: 20%;
  font-size: 20px;
  cursor: pointer;
  background-color: #ff0000;
  color: white;
  padding: 10px 15px;
  border: none;
}

.video1{
  display: none;

}
@media (max-width: 900px) {
  .openbtn {
    display: block;
  }
  .float1{
    display: none;
  }
  .float{
    display: none;
  }
  .float2{
    display: block;
  }
  .float3{
    display: block;
  }
  .blink{
    display: none;
  }
  .video{
    display: none;

  }
  .video1{
    display: block;
  }
   #myVideo{
    transform: translate(-30%);
  }

}


.openbtn:hover {
  background-color: #dc4646;
}

.btn-vid{
  width: 100%;
  height: 150px;
  border-radius: 25px;
  border: none;
  position: relative;
  
}

.btn1{
  background-image: url(/assets/images/balcony.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  
}
.btn2{
  background-image: url(/assets/images/apartment-gym.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  
}
.btn3{
  background-image: url(/assets/images/gardan.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  
}
.btn4{
  background-image: url(/assets/images/Enterance-Cam-866x481.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  
}


.btn-con{
  position: absolute;
  color: rgb(255, 255, 255);
  top: 0;
  left: 0;
  padding-top: 20px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  width: 50%;
  height: 50%;
  font-weight: 700;
  background: rgba(255, 13, 0, 0.7);

}


.sidepanel1 {
  /* text-align: center; */
  height: 250px; /* Specify a height */
  width: 100%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 99; /* Stay on top */
  top: 20%;
  /* left: 20px; */
  display: none;
  background-color: rgba(0, 0, 0, 0.7); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel1 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel1 a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel1 .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidepanel2 {
  /* text-align: center; */
  height: 250px; /* Specify a height */
  width: 100%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 99; /* Stay on top */
  top: 20%;
  /* left: 20px; */
  display: none;
  background-color: rgba(0, 0, 0, 0.7); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel2 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel2 a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel2 .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.sidepanel3 {
  /* text-align: center; */
  height: 250px; /* Specify a height */
  width: 100%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 99; /* Stay on top */
  top: 20%;
  /* left: 20px; */
  display: none;
  background-color: rgba(0, 0, 0, 0.7); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel3 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel3 a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel3 .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidepanel4 {
  display: none;
  /* text-align: center; */
  height: 250px; /* Specify a height */
  width: 100%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 99; /* Stay on top */
  top: 20%;
  /* left: 20px; */
 
  background-color: rgba(0, 0, 0, 0.7); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel4 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel4 a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel4 .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}