/* MAIN RESET */
*{margin:0;padding:0;box-sizing:border-box;}
body, html{font-family:'Poppins',sans-serif;font-size:16px;}
h1,h2,h3,p{margin:0;padding:0;}
a{text-decoration:none;color:#fff;}

/* HEADER */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  background:#252525;
  z-index:10001;
}

.logo{
  font-weight:700;
  font-size:1.2em;
  text-transform:uppercase;
  color:#fff;
}

/* NAV TOGGLE */
.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:35px;
  height:25px;
  cursor:pointer;
  position:relative;
  z-index:10002;
}

.icon-bar{
  height:3px;
  width:100%;
  background:#fff;
  border-radius:2px;
  transition:all 0.4s ease;
}

.nav-toggle.active .icon-bar:nth-child(1){transform:rotate(45deg) translate(6px,6px);}
.nav-toggle.active .icon-bar:nth-child(2){opacity:0;}
.nav-toggle.active .icon-bar:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}

/* NAV OVERLAY */
.nav-overlay{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.9);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;visibility:hidden;
  transition:0.3s;
  z-index:10000;
}

.nav-overlay.active{
  opacity:1;visibility:visible;
}

.nav-overlay ul{
  list-style:none;
  text-align:center;
}

.nav-overlay ul li{
  margin:20px 0;
}

.nav-overlay ul li a{
  font-size:2em;
  color:#fff;
  transition:0.3s;
}

.nav-overlay ul li a:hover{
  color:#6decb9;
}

/* HERO SECTION */
.slide{
  height:100vh;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.slide .overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.4);
}

.slide-content-template{
  position:relative;
  color:#fff;
  max-width:800px;
}

/* FEATURES */
#features{
  padding:80px 20px;
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

.feature-card{
  background:#114B5F;
  color:#fff;
  border-radius:10px;
  padding:20px;
  margin:10px;
  flex:1 1 250px;
  text-align:center;
}

/* SECTIONS */
section{
  padding:80px 20px;
}

/* MEDIA */
@media(max-width:768px){
  #features{
    flex-direction:column;
    align-items:center;
  }
  .nav-toggle{
    margin-right:0;
  }
}