:root{
  --blue: #008cff;
  --green: #3ec7be;
  --white: #fff;
  --black: #000;
}

html, body{font-family: "Nunito Sans", sans-serif; font-weight: 400; scroll-behavior: smooth;}
a, a:hover, a:focus, a:active{text-decoration: none;}
/*a:hover{color: #f64747 !important;}*/
input:focus, select:focus, button:focus{box-shadow: none !important; outline: none !important;}
ul{padding: 0; margin: 0;}
p, li{font-size: 18px;}
img{max-width: 100%; width: auto;}
h1, h2, h3, h4, h5, h6{font-family: "Merriweather", serif;}

/*--offcanvas-css--*/
#sidebar{opacity: 0;}
#sidebar.sidebar-wrapperd-box{opacity: 1;}
.sidebar-offcanvas-menu .outer {height: 100%; background: #ffffff; overflow: auto; padding: 0 0 20px;}
.sidebar-offcanvas-menu .inner {padding: 0px;}
.sidebar-offcanvas-menu #sidebar {position: fixed; top: 0px; bottom: 0px; width: 300px; left: -300px;}
.sidebar-offcanvas-menu .sidebar-top-header {padding: 15px; border-bottom: rgba(177, 177, 177, 0.29) 1px solid;}
.sidebar-offcanvas-menu .sidebar-top-header:after{content: ''; display: table; width: 100%;}
.sidebar-offcanvas-menu .sidebar-close-btn {text-align: right; float: right; padding:0;}
.sidebar-offcanvas-menu .sidebar-logo {float: left;}
.sidebar-offcanvas-menu .sidebar-logo img {max-width: 152px; margin: 0 auto;}
.sidebar-offcanvas-menu .sidebar-close-btn a {color: #343434; font-size: 30px; text-align: right; padding: 10px 0 0; cursor: pointer; text-transform: uppercase}
.sidebar-offcanvas-menu ul.sidebar-menu, 
.sidebar-offcanvas-menu ul.sidebar-menu ul#menu-sidebar-menu-desktop {padding: 0; margin: 0;}
.sidebar-offcanvas-menu ul.sidebar-menu li {display: block; transition: all .3s ease-in; -webkit-transition: all .3s ease-in;}
.sidebar-offcanvas-menu ul.sidebar-menu li a {color: var(--black);display: block;text-transform: capitalize; padding: 10px 15px; font-size: 14px;}
ul.sidebar-menu > li {border-bottom: #0000004f 1px dashed;}
ul.sidebar-menu > li a {position: relative;}
ul.sidebar-menu > li > ul {padding: 0; margin: 0; display: none;}
ul.sidebar-menu > li > ul > li a {text-transform: capitalize !important; padding-left: 35px !important; font-size: 14px !important;}
ul.sidebar-menu li.active > a, 
ul.sidebar-menu li:hover > a {background-color: var(--blue);color: var(--white);}
.sidebar-offcanvas-menu .sidebar-wrapper {position: relative; height: 100%; overflow: auto;}
.sidebar-offcanvas-menu ul.sidebar-menu li.menu-item-has-children {position: relative; }
.sidebar-offcanvas-menu ul.sidebar-menu li.menu-item-has-children img {position: absolute; right: 0; top: 0; }
/*--offcanvas-css-end--*/

/*--header-css--*/
.main-navbarbox{background: rgba(255,255,255,.8);  width: 100%;}
.main-navbarbox.affix{width: 100%; background: #fff; z-index: 99; box-shadow: 0 2px 10px #ccc;}

.mobile-menubtn {display: none; }
.btnmmenu span {width: 30px; height: 2px; background-color: var(--blue); display: block; margin: 6px 0; }
.btnmmenu {max-width: 30px; margin: 0 0 0 auto; }

.logo-boxin {width: 100%;}
.logo-boxin a {display:block; max-width: 250px;}

.desktop-menuboxin{text-align: center; padding: 15px}
.desktop-menuboxin ul li.menu-item ul {display: none; }
.desktop-menuboxin ul li {position: relative; display: inline-block; }
.desktop-menuboxin ul li a {display: block; color: var(--black); padding: 5px 15px; font-size: 14px; font-weight: 600; text-transform: uppercase; transition: all .3s ease; -webkit-transition: all .3s ease; }
.desktop-menuboxin ul li.active > a,
.desktop-menuboxin ul li:hover > a {color: var(--blue)}
.desktop-menuboxin ul li.menu-item ul{position: absolute; width: 300px; text-align: left;background-color: #f3f3f3;z-index: 9999;}
.desktop-menuboxin ul li:nth-child(3) ul, .desktop-menuboxin ul li:last-child ul{right: 0;}
.desktop-menuboxin ul li.menu-item ul li{display: block; padding: 0;}
.desktop-menuboxin ul li.menu-item ul li a{font-size: 14px;}
.desktop-menuboxin ul li:hover > ul{display: block;}
/*--end--*/

/*--home-banner-slider-css--*/
.banner-sliderbox {position: relative; padding:0;}
.banner-sliderbox img {width: 100%; height: 100%; object-fit: cover; }
.banner-sliderbox .banner-content{width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--white);}
.banner-sliderbox .banner-content h2{font-size: 40px; font-weight: 700; line-height: 50px;}
.banner-sliderbox .banner-content a{display: block; padding: 10px 15px; color: var(--white); border: solid 2px var(--white); text-align: center; max-width: 250px; font-size: 18px; font-weight: 800;}

/*--end--*/

.howork-sec{padding: 50px 0; background-size: 100% 50%; background-repeat: no-repeat;}
.howork-sec h2{margin: 0 0 60px; text-align: center;}
.howork-sec .box{padding: 20px; border-radius: 10px; background: var(--white); box-shadow: 0 0 10px #000; text-align: center; margin-top: 100px;}
.howork-sec .box .ico{margin: -100px 0 0;}
.howork-sec .box h3{ min-height:40px; }
.howork-sec .box p{min-height: 190px; }
/*--end--*/

.notice-sec{background: #E6E6E7; padding: 60px 0;}
.notice-sec h3{font-size: 36px; margin: 0 0 50px;}
/*--end--*/


.aqi-sec{background: #3E4A56; padding: 60px 0; color: #E6E6E7}
.aqi-sec h3{font-size: 40px; font-weight: 700; line-height: 50px; margin: 0 0 50px;}
.aqi-sec h4{font-size: 30px; font-weight: 700; line-height: 50px; margin: 30px 0 10px;}
.aqi-sec a{display: block; padding: 10px 15px; color: #BDD6EB; border: solid 2px #BDD6EB; text-align: center; max-width: 200px; font-size: 16px; font-weight: 800; margin-top: 20px;}
.aqi-sec a:hover{background: #BDD6EB; color: var(--black);}
.aqi-sec a i{margin-left: 15px;}
/*--end--*/

.our-vision {padding: 60px 0;}
.our-vision .image-overlay {position: relative; margin-bottom: 20px;}
.our-vision .image-overlay img{width: 100%;}
.our-vision .image-overlay:before{content: ''; background-image: linear-gradient(90deg, #FF5E54 0%, #0156E4 100%); z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}
.our-vision p strong{color: #FF5E54; text-transform: uppercase;}
.our-vision h3{font-size: 40px; font-weight: 700;}
.our-vision a{display: block; padding: 10px 15px; color: var(--blue); border: solid 2px var(--blue); text-align: center; max-width: 250px; font-size: 16px; font-weight: 800; margin-top: 20px;}
.our-vision a i{display: inline-block; margin-left: 20px;}
.our-vision a:hover{background: var(--blue); color: var(--white);}
/*--end--*/



.copyright{text-align: center; background: #CAF0F8; padding: 30px 0 10px;}
.copyright ul li{text-align: center; display: inline-block; list-style: none; margin-bottom: 10px;}
.copyright ul li a{display: inline-block; width: 36px; height: 36px; background-color: var(--black); color: var(--white); border-radius: 50%; line-height: 36px;}
.copyright ul li a:hover{background: var(--blue); color: var(--white);}
.copyright p{font-size: 15px; padding: 15px 0 0; }
/*--end--*/


@media (max-width: 1199px){
  .desktop-menuboxin ul li a{font-size: 13px; padding: 10px 8px 5px}
} 

@media (max-width: 991px){
  /*--header-css--*/
  .main-navbarbox{position: relative;}
  .desktop-menubox {display: none;}
  .header-btn-in{display: inline-block; padding: 8px 0px;}
  .mobile-menubtn {display: block; padding: 8px 15px; vertical-align: middle;}
  .mobile-menubox div.btnbox {width: 40px; text-align: center; height: 33px; margin: 29px 0 0 auto; cursor: pointer;}
  .mobile-menubox div.btnbox span {display: block; width: 34px; height: 2px; background-color: #393939; margin: 6px auto; }
  .logo-boxin a{max-width: 110px;}
  /*--end--*/
}  

@media (max-width: 767px){
  .header-btn-in a{font-size: 12px; padding: 5px 10px;}
  .banner-sliderbox .banner-content{position: static; transform: inherit; background: var(--blue); padding: 20px 0;}
  .banner-sliderbox .banner-content h2{font-size: 24px; line-height: 1.2}
  .banner-sliderbox .banner-content a{font-size: 15px}

  .aqi-sec h3{font-size: 24px; line-height: 1.2; margin: 0 0 20px;}
  .aqi-sec h4{font-size: 20px; line-height: 1.2}
  .our-vision h3{font-size: 24px;}
}



.stories-content{position: relative; width: auto; height: 100%; padding:5%; background-color: black; }
.stories-content h3{color: var(--blue); margin: 20px 0 20px;}
.stories-header{position: relative; }
.stories-header .line1{position: relative; font-size: 14vw; font-weight: 100; font-family: coco-condensed; margin-left: 25%; color: #068aff; line-height: 7.5vw; }
.stories-header .line2{position: relative; left: 50%; font-weight: 300; transform: translateX(-50%); font-size: 11vw; color: white; text-align:center; letter-spacing: 29px; line-height: 10vw; }
.stories-header .line2 img{height: 9vw; margin-right: 1%; margin-bottom:1.5%; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
.about-content {color: var(--white); }




#bg-canvas {z-index:-9999; background-color: #ffffff; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100vw;}


.wrapper {display: block; position: relative; margin: 0 auto; overflow: auto; }


.banner {padding: 50px 0; background: #f9f9f9;}
.banner .banner-right {display: inline-block;width: 100%;height: auto;position: relative;text-align: center;z-index: 99;top: 50%;}
.banner .banner-right .line1 {position: relative; font-weight: 100; font-size: 6.3vw; margin-left: 0%;}
.banner .banner-right .line2 {position: relative; font-weight: 600; font-size: 2.3vw; margin-left: 35%; line-height: 1rem; }
.banner .banner-right .line3 {position: relative; font-weight: 600; font-size: 16vw; font-family: coco-condensed; margin-left: 35%; color: #0a0a0a; line-height: 16vw; }
.banner .banner-right .line4 {font-weight: 600;font-size: 15vw;font-family: coco-condensed;/* text-align: left; *//* float: left; */line-height: 10vw;position: relative;}
.banner .banner-right .line5 {position: relative;font-weight: 500;font-size: 2.5vw;/* margin-top: 12%; *//* float: left; */}
.banner .banner-right .line6 {font-weight: 100;font-size: 4.7vw;padding-left: 4%;/* clear: both; *//* text-align: left; */position: relative;line-height: 3vw;}


.frame2{position: relative; width: auto; z-index:1; padding: 60px 0; }
.frame2 li{list-style-position: inside;}
.frame2 .banner-left h2 {position: relative; font-size: 2vw; width: auto; font-style: italic; }
.frame2 .banner-bottom-left {text-align: left; padding: 0 30px; }
.frame2 .banner-bottom-right{text-align:right; padding: 0 30px;}
.frame2 .banner-left h4, .aqi h4 {margin-bottom: 2%; }
.frame2 .banner-left p, .aqi span {}

.call {padding: 50px 0; position: relative; clear: both; background-color: rgba(0, 0, 0, 0.4); color: #ffffff; z-index: 2;}
#call-canvas{display: none; }
.call h3 {font-weight: 600; color: var(--white); font-size: 3em; letter-spacing: 8px; text-align: center; margin: 0 0 30px;}
.call p {width: 70%; padding-top: 1%; margin: 0 auto; font-size: 1.1vw;}
.call button {background: transparent; border: 3px solid #008cff; color: #ffffff; margin-top: 10vh; padding: 1% 2%; font-size: 1.05vw; cursor: pointer; }

.formDiv{position: relative; left: 50%; width: 45vw; transform: translateX(-50%); float: center; text-align: left; }
.formDiv label{font-size: 1.2vw; }
.formDiv div{margin-top: 5vh; }


.aqi {display: block; position: relative; padding: 50px 0;}
.impact {width: 50%;display: block; position: relative; clear: both; z-index: 2; }
.impact .impact-left {width: auto; height: auto; background-color: #262626; margin: 0 auto; line-height: 140px; color: #ffffff; font-size: 2.2vw; font-weight: 600; letter-spacing: 8px; text-align: center; display: inline-block; padding: 10px; }
.impact .impact-right {font-weight: 100; font-size: 6vw; display: inline-block; margin-left: 1%; }


.homepage-slider {padding: 0 0 60px;}
.homepage-slider .grid{border: solid 1px #000; padding: 20px; border-radius: 10px; min-height: 270px; margin: 10px; }
.homepage-slider .grid h3{margin: 0 0 20px;}



.contact-sec{padding: 50px 0;}
.contact-sec h3{color: var(--black); font-size: 36px; font-weight: 700; margin-top: 0; margin-bottom: 30px; text-transform: capitalize;}
.contact-sec ul li{list-style: none; padding-bottom: 15px; font-size: 17px;}
.contact-sec ul li a{color: var(--black)}
.contact-sec ul li a:hover{color: var(--blue);}

.form-area input {border-radius:  0;height: 42px;}
.form-area textarea {height: 90px;border-radius: 0;resize: none;}
.form-area .my-btn{background-color: var(--blue); color: var(--white);width: 120px; transition: all 1s ease;}
.form-area .my-btn:hover{background-color: #57c8e8;}


@media (max-width: 991px){
  .frame2 .banner-bottom-right{text-align: left;}
}

@media (max-width: 767px){
  .call h3{font-size: 24px;}
  .impact,
  .formDiv{width: 100%}
  .frame2 .banner-bottom-right{text-align: left;}

 .contact-sec h3{font-size: 24px;}
}


.work-box .e-con-inner {box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);}

.single-post .site-content {padding: 10px 0 40px; border-top: solid 1px #eee;}
.single-post .site-content nav.navigation {max-width: 1140px; margin: auto; padding: 15px;}
.single-post .site-content nav.navigation .post-title{display: none}
.single-post .site-content nav.navigation .meta-nav{margin-bottom: 0; font-size: 15px;}
.single-post .site-content nav.navigation .nav-links{display: flex; justify-content: space-between}
.single-post .site-content nav.navigation a{display: block; text-transform: capitalize;
    padding: 10px 15px;
    color: var(--blue);
    border: solid 2px var(--blue);
    text-align: center;
    max-width: 250px;
    margin-top: 20px;}