*{
  padding: 0;
  margin: 0;
  font-family: 'Roboto';
  font-size: 18px;
}

a{
  text-decoration: none;
  color:black;
}

nav {
  padding: 5px 0;
}

h3{
  font-size: 26px;
  text-align: center;
}

.wrapper{
  width: 90%;
  margin: auto;
}

button{
  border: none;
  outline: none;
  border-radius: 5px;
  background: #4d80e4;
}

button:hover{
  background: #2e279d;
  cursor: pointer;
  color: #dff6f0;
}

li {
  list-style-type: none;
}

.wrapper{
  width: 90%;
  margin: auto;
}

.main{
  background: #f6f6f6;
}

.flex_con{
  display: flex;
}

.nav_con{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo_con{
  width: 50%;
}

.logo_con button, .logo_con a{
  display: inline-block;
  font-size: 25px;
}

#menu_bar{
  background: transparent;
  color: #4d80e4;
}

.logo_con button:hover {
  color:blue;
}

.logo_con a{
  margin-left: 8px;
  font-family: 'Charm';

}

.reg_con{
  width: 120px;
}

.login_con{
  width:100%;
}

.reg_con button{
  width: 100%;
  height:30px;
}

.toggle {
  display: none;
}

.toggle {
  z-index: 1;
  position: absolute;
  left:0;
  top:0;
  width: 250px;
  background-image: linear-gradient(to bottom, #dde3f0 , #b5bccc);
  padding: 10px;
  flex-direction: column;
  height: 100vh;
  overflow-y: scroll;
}

.toggle > div{
  padding: 5px 0;
}

.toggle > div a {
  cursor: pointer;
}

#left_arrow {
  padding: 5px 8px;
  background: transparent;
}

#register{
  height: 40px;
}

#login {
  width:100%;
  height: 40px;
  margin-top: 20px;
}

.dropdown{
  display: none;
}

.dropdown a {
  display: block;
  padding: 10px;
}

.hero{
  justify-content: left;
  align-items: center;
  height: 50vh;
  flex-direction: row;
}

.text h1{
  font-size: 36px;
  font-weight: normal;
}

.text p{
  padding: 15px 0;
  color: #393e46;
}

form {
  padding-top: 10px;
  justify-content: center;
  position: relative;
}

.search {
  margin-top: 8px;
}

.search input{
  width: 76%;
  border: 1px solid grey;
  border-radius: 8px;
  height: 38px;
  text-indent: 5px;
  outline: none;
}

.search button{
  position: absolute;
  right:13%;
  height:40px;
  width: 30px;
  background-color: transparent;
}

.search button:hover {
  color: #2e279d;
}

/* HOW
.how {
  margin: 60px 0;
}

.how_con i{
  display: block;
  font-size: 60px;
  color: #4d80e4;
  text-align: center;
}

.how_con {
  flex-direction: column;
  width:100%;
}

.how_con section{
  background: #f4f6ff;
  margin: 20px 0;
  padding: 15px 10px;
}

.how_con section h4{
  font-size: 25px;
  font-weight: normal;
}

.how_con section h4, .how_con section i, .how_con section p{
  padding: 8px 0;
}

 END HOW */

.icon_con {
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 30px;
}

 .icon_con > a {
   width:26%;
   align-content: center;
   text-align: center;
   border-radius: 10px;
   height: auto;
   padding: 10px 0;
   margin-bottom: 10px;
   display: block;
 }

  .icon_con > a:hover span{
    font-size: 17px;
    color: #2b580c;
  }

 .icon, .icon_con > div span{
   display: block;
 }

.icon{
  font-size: 40px;
  padding-bottom: 10px;
}

span {
  font-size: 16px;
}

.intern_cat{
  margin: 70px 0;
}

.intern_cat p,.sub{
  text-align: center;
  font-size: 16px;
  padding-top: 5px;
  color: #393e46;
}

.intern_cat p a{
  font-size: 15px;
  color:#4d80e4;
  margin-top: 8px;
}

.how{
  background-image: linear-gradient(to bottom left, #dde3f0, #b5bccc);
  padding: 40px 0;
  border-radius: 30px;
}

.how_con{
  flex-direction: column;
}

.how_con > section i{
  display: block;
  font-size: 45px;
  padding-bottom: 20px;
  color: #2e279d;
}

.how_con > section{
  text-align: center;
  margin-top: 50px;
}

.how_con > section h4{
  font-size: 20px;
  font-weight:600;
  padding-bottom: 15px;

  color: #2b580c;
}

.how_con > section p{
  line-height: 30px;
  font-size: 16px;
  color: #216353;
}

.featured {
  margin: 70px 0;
  background: #f4f4f4;
  padding: 30px 0;
  border-radius: 30px;
}

.sub{
  padding-bottom: 40px;
}
.featured_con {
  flex-direction: row;
  border: none;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
  background-color: white;
  margin-bottom: 20px;
}

.featured_con:hover {
  background: #c7e2b2;
  border-left: 4px solid green;
  border-radius: 0px 8px 8px 0;
}

.featured p{
  text-align: center;
}

.featured_con p{
  text-align: left;
}

.featured button{
  display: inline-block;
  padding: 8px 30px;
  border-radius: 8px;
  margin: 10px 0;
}

.comp_logo{
  width:28%;
  padding: 0 1%;
}


.comp_logo img{
  width: 100%;
  display: inline-block;
}

.detailed_con{
  width: 70%;
  border-left: 1px solid #89c9b8;
  padding: 10px 0 10px 15px;
}

.detailed_con i{
  color:green;
}

.detailed_con > *{
  padding: 2px 0;
}

.status {
  display: inline-block;
  background-color: #8cba51;
  border-radius: 8px;
  padding: 2px 5px;
}

.company,.location {
  color: #393e46;
  margin: 6px 0;
  font-size: 15px;
}

.status{
  color: white;
  margin-top: 5px;
}

.location_icon{
  color: #393e46 !important;
}

.employer {
  margin: 70px 0;
}

.empcon{
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.empcon >img{
  display: inline-block;
  width:26%;
  margin-top: 15px;
}

footer{
  background: #000011;
  padding-top: 30px;
}

.footer {
  flex-direction: column;
}

.footer_1 li a, .footer_follow li a, footer p{
  color:white;
  font-size: 14px;
}

.footer_1 li {
  padding: 3px 0;
}

.footer_follow li {
  display: inline-block;
  text-align: center;
  margin: 5px 14px 2px 0;
}

.footer_follow li a:hover, .footer_1 li a:hover{
  color: green;
}

.footer_follow li a{
  font-size: 18px;
}

.copy {
  margin-top: 20px;
  border-top: 1px solid gray;
  padding: 14px 0;
}
@media only screen and (min-width: 1100px) {
  .wrapper {
    width: 1100px;
  }



  .toggle {
    display:inline-flex;
    height:auto;
    flex-direction: row;
    background: transparent;
    width:45%;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    overflow: hidden;
    position: static;
    z-index: 4 !important;
  }

  .logo_con{
    width: 40%;
  }

  .logo_con a{
    margin: 0;
  }
  .mobile {
    display: none !important;
  }

  .toggle > div {
    width: 33%;
    position: relative;
    text-align: center;
  }

  .reg_con{
    width: 15%;
  }

  #register, #login{
    width: 90%;
    height: 40px;
  }

  #login {
    margin: 0;
    background: transparent;
    border: 1px solid #4d80e4;
  }

  #login:hover{
    background: #2e279d;
    transition: 0.3s;
  }

  #register {
    float: right;
  }

  .drop_con{
    position: relative;
  }

  .dropdown {
    position: absolute;

  }

}


/* .hero{
  justify-content: left;
  align-items: center;
  height: 60vh;
  flex-direction: row;
  background-image: url('../images/heroni.png');
  background-size:68%;
  background-repeat: no-repeat;
  background-position: right;
}

.text h1{
  font-size: 46px;
}

.flex_con{
  display: flex;
  flex-direction: row;
}

.logo_con{
  display: inline-block;
  width: 70%;

}

#menu {
  font-size: 28px;
  background: transparent;
  font-weight: lighter;
  color: #32e0c4;

}

.logo_con p{
  display: inline-block;
  font-family: 'Charm';
}

#nav_con{
  position: absolute;
  transition: 2s;
  overflow: auto;
  background: #f4f4f8;
  left: 0%;
  width: 250px;
  height: 100vh;
  overflow:auto;
  display: none;
  padding: 0 20px;
  box-shadow: 2px 2px 3px grey;
}

#nav_con li{

}

.cat_drop a{
  display: inline-block;
  width: 100%;
  padding: 10px;
}


.buttoncon{
  display: inline-block;
  width: 30%;
  position: relative;
}

#left_arrow{
  font-size: 20px;
  padding: 5px 8px;
  background-color: transparent;
}

#left_arrow:hover {
  color: blue;
}

.cat_drop {

}

.cat_drop li{
  color: green;
}

.reg_opt{
  position: absolute;
  top:40px;
  right:0px;
  background: #f4f4f8;
  width: 120%;
  display: none;
  box-shadow: 2px 2px 3px grey;
}

.reg_opt li{
  text-align: left;
}

.reg_opt li a{
  display: inline-block;
  padding: 8px 0;
  width: 100%;
}

.reg_opt li a:hover{
  background-color: #46b3e6;
}

#r_button{
  width: 100%;
  height: 40px;
  font-size: 18px;
}






/* .flex_con{
  display: flex;
  justify-content: left;
  align-items: center;
  height: 80vh;
  flex-direction: row;
  background-image: url('../images/heroni.png');
  background-size:68%;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-position: right;
} */

/* nav ul li:first-child{
  width:40%;
  text-align: left;
  font-size: 30px;
  font-weight: bolder;
}

nav ul li:first-child a{
  width:auto;
  font-family: 'Charm';
}

nav ul li:first-child a:hover{
  background-color: transparent;
  color:#32e0c4;
}
*/