@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap');
html {
  scroll-behavior: smooth;
}
body {
	font-family: 'Roboto', sans-serif;
	
}
a:hover {
    color:#fff;
}
h4 {
	font-weight:400;
}
/*----- menu css ------*/
#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}
#menuToggle input:checked ~ ul
{
  transform: none;
}
/*----- menu css ends -----*/
/*-------- Page css starts ------*/
.heading h1{
	text-align:center;
}
.cont-form:hover{
	color:#007bff!important;
	text-decoration:none!important;
}

/*scroll spy css */
.scrollspy-example {
  position: relative;
  
}
.nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width: 3.6rem;
  z-index: 2; }
.nav-toggle:hover {
    opacity: 0.8; }
/*.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#4a4a4a;
	border-radius: 4px;
    content: '';
    height: 0.4rem;
    width: 100%; } */
.nav-toggle .nav-toggle-bar {
    margin-top: 0; 
	}
.nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem; 
	}
.nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem; 
	}
/*.nav-toggle.expanded .nav-toggle-bar {
    background: transparent; 
	}
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: white;
    margin-top: 0; 
	}
.nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); 
	}
.nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); 
	} */

/* nav */
.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #63a895;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #87b962, #63a895);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #87b962, #63a895);
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: -20rem;
  padding: 6rem 2rem 2rem 2rem;
  position: fixed;
  top: 0;
  width: 15rem;
  z-index: 1; 
  }
 .nav.expanded {
    left: 0; 
	}
.nav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0; 
	}
nav {
  white-space: nowrap;
  background: #37474F;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Only stick if you can fit */
@media (min-height: 300px) {
  nav ul {
    position: sticky;
    top: 0;
  }
}
nav ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
}
nav ul li a.current {
  background:#007bff;
}
main {
  padding-bottom:10rem;
}
section {

}
/* scroll spy css ends */

/*--------------*/
/*media queries */
/*--------------*/

@media (max-width:320px){
	.logo{
	padding: 11rem 0rem!important;
}
.nav-toggle{
	width:2.5rem!important;
}
#menu-toggle{
	top: 0.5rem!important;
    left: 0.5rem!important;
}
.sec-cntnt-services{
	
}
}

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) { 
.logo{
	padding: 11rem 0rem;
}
section {
    margin: 0 0 2rem 0;
}
.sec-cntnt{
	padding:3rem 0rem;
}
.section-space{
	padding:3rem 0rem;
}
.nav-toggle{
	width:2.5rem!important;
}
#menu-toggle{
	top: 0.5rem!important;
    left: 0.5rem!important;
}
.sec-cntnt-services{
	padding:3rem 0rem;
}
 }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
.logo {
    padding:12rem 0rem;
}
section {
    padding: 1rem;
    margin: 0 0 2rem 0;
}
.sec-cntnt {
    padding:5rem 0rem;
}
.section-space {
    padding:15rem 0rem;
}
#menu-toggle{
	top: 0.5rem!important;
    left: 0.5rem!important;
}
.nav-toggle{
	width:2.5rem!important;
}
.sec-cntnt-services{
	padding:5rem 0rem;
}
 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
.logo{
	padding: 28rem 0rem;
}
.sec-cntnt{
	padding:10rem 0rem;
}
.sec-cntnt-services{
	padding:10rem 0rem;
}
.section-space{
	    padding: 15rem 0rem;
}
#menu-toggle{
	top: 0.5rem;
    left: 0.5rem;
}
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
.logo{
	padding:15rem 0rem;
}
.sec-cntnt{
	padding:15rem 0rem;
}
.sec-cntnt-services{
	padding:15rem 0rem;
}
.section-space{
	padding:15rem 0rem;
}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.logo {
    padding: 11rem;
}
.sec-cntnt{
	padding:6rem 10rem;
}
.section-space{
	padding-top:5rem;
}
.sec-cntnt-services{
	padding: 7.5rem 10rem 8rem;
}
 }
 @media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2){
.sec-cntnt{
	padding:15rem 2rem;
} 
.sec-cntnt-services{
    padding:15rem 2rem;	
}
.logo{
	padding:15rem 0rem;
}
.section-space{
	padding-top: 10rem;
}
main {
    padding-bottom: 22rem;
}
  }
  /* CSS to hide sidebar on menu click */
 /* Side Menu  */

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left:0;
    width: 250px;
    height: 100%;
    transform: translateX(-250px);
    overflow-y: auto;
    background: #63a895;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #87b962, #63a895);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #87b962, #63a895);
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 12rem 2rem 3rem 2rem;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #fff;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
}

.sidebar-nav > .sidebar-brand {

    font-size: 18px;

}

.sidebar-nav > .sidebar-brand a {
    color: #fff;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    
}

#menu-toggle {
    z-index: 1;
    position: fixed;
    top:1rem;
    left:1rem;
}

#sidebar-wrapper.active {
    left:250px;
    width: 250px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.toggle {
    margin: 5px 5px 0 0;
}
.square { 
  padding: 8px; display: block; margin:12px; 
}
.wl a {
 color: #91a9cf; 
}
#sidebar-wrapper  .active{
	
}
.sidebar-nav a{
	font-size:2rem;
	color:#fff;
}
.nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width: 3.6rem;
  z-index: 2; }
.nav-toggle:hover {
    opacity: 0.8; }
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#4a4a4a;
	border-radius: 4px;
    content: '';
    height: 0.4rem;
    width: 100%; }
.nav-toggle .nav-toggle-bar {
    margin-top: 0; 
	}
.nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem; 
	}
.nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem; 
	}
	
/* nav toggle 1 */	
	
.nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 2rem;
  left: 2rem;
  position: fixed;
  top: 2rem;
  width: 3.6rem;
  z-index: 2; }
.nav-toggle:hover {
    opacity: 0.8; }
.nav-toggle .nav-toggle-bar1,
.nav-toggle .nav-toggle-bar1::after,
.nav-toggle .nav-toggle-bar1::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#4a4a4a;
	border-radius: 4px;
    content: '';
    height: 0.4rem;
    width: 100%; }
.nav-toggle .nav-toggle-bar {
    margin-top: 0; 
	}
.nav-toggle .nav-toggle-bar1::after {
    margin-top: 0.8rem; 
	}
.nav-toggle .nav-toggle-bar1::before {
    margin-top: -0.8rem; 
	}
.nav-toggle .nav-toggle-bar1 {
    background: transparent; 
	}
.nav-toggle .nav-toggle-bar1::after, .nav-toggle .nav-toggle-bar1::before {
    background: white;
    margin-top: 0; 
	}
.nav-toggle .nav-toggle-bar1::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); 
	}
.nav-toggle .nav-toggle-bar1::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); 
	}