* {
  margin: 0;
  font-family: "Roboto Slab", serif;
}
header {
  position: fixed;
  border-top: 2px solid #f48024;
  background-color: #fff;
  width: 100%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  z-index: 100;
  box-shadow: 0 7px 7px -10px #363636;
}
.top {
  display: flex;
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-around;
  padding-top: 10px;
}
.menu {
  font-size: 21px;
  padding: 5px 7px;
  margin-top: -10px;
  margin-left: 22px;
}
.menu:hover {
  background-color: rgb(228, 228, 228);
}
.logo {
  margin-top: -8px;
}
.logo:hover {
  background-color: rgb(228, 228, 228);
}
.mobilelogo {
  display: none;
}
.navigation {
  margin-left: 7px;
}
.navigation a {
  border-radius: 14px;
  padding: 5px 10px;
  margin-right: 7px;
  font-size: 14px;
  color: black;
  text-decoration: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.navigation a:hover {
  background-color: rgb(228, 228, 228);
}
.search-icon {
  display: none;
}
.Search {
  width: 51%;
  margin-right: 20px;
}
.search_here {
  height: 28px;
  margin-top: -4px;
  width: 100%;
}
.join_us {
  display: flex;
}
.log_in {
  border: 1px solid;
  background-color: #e1ecf4;
  border-color: #7aa7c7;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  margin-right: 9px;
  height: 50%;
  padding: 7px;
  font-size: 13px;
  margin-top: -5px;
}
.join_us a {
  text-decoration: none;
  color: #39739d;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.Sign_up {
  border: 1px solid #0095ff;
  background-color: #0095ff;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
  margin-right: 5px;
  height: 50%;
  padding: 7px;
  font-size: 13px;
  margin-top: -5px;
}
.Sign_up a {
  color: #fff;
}
/* Main (yellow background) */
.main {
  background-color: #ffcf10;
  background-image: url("https://cdn.sstatic.net/Img/home/illo-hero-full.svg?v=e2018a5f9272");
  height: 500px;
}
.block h1 {
  font-size: 50px;
  color: #242729;
  padding-top: 165px;
  text-align: center;
}
.block p {
  color: #242729;
  width: 410px;
  font-size: 18px;
  /* margin-left: 90px; */
  /* margin-top: 15px; */
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  margin: 25px auto;
}
.options {
  margin-top: 50px;
}
.for-developer {
  text-decoration: none;
  color: #f6835a;
  background-color: #fff;
  border: 1px solid #f6835a;
  padding: 10px;
  font-family: "Source Sans Pro", sans-serif;
  margin-left: 41%;
}
.for-business {
  background-color: #f6835a;
  color: #fff;
  text-decoration: none;
  border: 1px solid #f6835a;
  padding: 10px;
  font-family: "Source Sans Pro", sans-serif;
}
/* For developers */

.developer {
  background-color: #ffff;
}
.developer h2 {
  color: #242729;
  font-size: 30px;
  text-align: center;
  padding-top: 60px;
}
.developer p {
  width: 600px;
  font-size: 15px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  font-family: "Source Sans Pro", sans-serif;
}
.developer p a {
  color: orange;
}
.linebox {
  width: 75px;
  color: orange;
  height: 10px;
  background-color: orange;
  border-radius: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.grid {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}
.infobox {
  text-align: center;
  padding-top: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06),
    0 3px 8px rgba(0, 0, 0, 0.09);
  margin-bottom: 50px;
  padding-bottom: 15px;
  border-radius: 10px;
  width: 30%;
}
.infobox:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.09),
    0 3px 8px rgba(0, 0, 0, 0.19);
}
.infobox p {
  padding: 20px;
  width: 80%;
  font-size: 14px;
  color: #242729;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  line-height: 1.5;
  font-family: "Source Sans Pro", sans-serif;
}

.infobox h4 {
  color: #242729;
  font-size: 20px;
  padding-top: 20px;
}
.button {
  background-color: #2b2d6e;
  padding: 10px 14px;
  font-size: 15px;
  width: calc(50%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -1px;
}
.button a {
  color: #fff;
  text-decoration: none;
  font-family: "Source Sans Pro", sans-serif;
}
.public {
  margin-top: 70px;
}
.jobs {
  margin-top: 70px;
}
.private-button {
  background-color: #f48024;
}
.Business {
  background-color: #f7f6f9;
  padding-bottom: 150px;
}
.Business h2 {
  color: #242729;
  font-size: 30px;
  text-align: center;
  padding-top: 60px;
}
.Business p {
  width: 600px;
  font-size: 15px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  font-family: "Source Sans Pro", sans-serif;
}
.Business p a {
  color: orange;
}
.businessgrid {
  display: flex;
  justify-content: space-around;
  width: 87%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}
.box1 {
  background-color: #fff;
  margin-right: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.09),
    0 3px 8px rgba(0, 0, 0, 0.19);
  padding: 30px;
  width: 30%;
  border-radius: 10px;
  display: flex;
}
.text {
  width: 100%;
  font-size: 15px;
  margin-left: 20px;
  margin-top: 7px;
  line-height: 1.3;
  font-family: "Source Sans Pro", sans-serif;
}
.text span {
  color: #f99b2a;
}

.buy {
  background-color: #2b2d6e;
  padding-top: 150px;
  padding-bottom: 50px;
}
.buy h1 {
  color: #fff;
  text-align: center;
  font-size: 38px;
}
.buy p {
  color: #fff;
  text-align: center;
  margin-left: 33%;
  width: 32%;
  margin-top: 30px;
  margin-bottom: 40px;
  font-family: "Source Sans Pro", sans-serif;
}

.buy a {
  background-color: #f48024;
  color: #fff;
  font-size: 13px;
  padding: 15px 22px;
  border-radius: 5px;
  margin-left: 46%;
  margin-top: 10px;
  font-family: "Source Sans Pro", sans-serif;
}
.buy-grid {
  background-image: url("https://cdn.sstatic.net/Img/product/teams/illo-teams-pricing.svg?v=8afb8ac7c580");
  display: flex;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  background-size: contain;
  justify-content: space-around;
  padding-left: 80px;
  padding-right: 80px;
}
.buy-grid-box {
  background-color: #fff;
  width: 25%;
  margin-top: 100px;
  border-radius: 8px;
}

.buy-grid-box h5 {
  width: 50px;
  padding: 6px;
  padding-left: 2px;
  background-color: #d6d9dc;
  margin-top: 20px;
  margin-left: 27px;
  border-radius: 5px;
  padding-left: 9px;
  font-size: 14px;
}
.buy-grid-box p {
  margin-bottom: 0px;
  font-size: 13px;
  color: black;
  text-align: start;
  margin-left: 7%;
  width: 80%;
  margin-top: 18px;
}
.buy-grid-box h1 {
  color: black;
  margin-left: -28%;
  width: 100%;
  margin-top: 20px;
}
.buy-grid-box span {
  margin-top: -1px;
  display: block;
  margin-left: 25px;
  font-size: 13px;
  color: #242729;
  border-bottom: 1px solid black;
  margin-bottom: 40px;
  padding-bottom: 30px;
  margin-right: 25px;
}
.tags {
  display: flex;
}
.tags p {
  margin-top: 1px;
  margin-bottom: 10px;
}
.tags i {
  margin-left: 35px;
}
.start-button {
  background-color: #d6d9dc;
  padding: 13px 20px;
  font-size: 15px;
  margin-bottom: 50px;
  width: 50%;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 75px;
  font-family: "Source Sans Pro", sans-serif;
}
.buy-grid-box-middle h5 {
  width: 25%;
}
.buy-grid-box-middle h1 {
  margin-left: -28%;
  width: 100%;
}
.buy-grid-box-start {
  margin-left: 50px;
}
.buy-grid-box-end {
  margin-right: 50px;
}
.buy-grid-box-end h5 {
  background-color: #2b2d6e;
}
.buy-grid-box-middle h5 {
  background-color: #3c4146;
}
.buy-grid-box-end .start-button {
  background-color: #2b2d6e;
}
.buy-grid-box-middle .start-button {
  background-color: #3c4146;
}
.motives {
  margin-top: 80px;
  text-align: center;
}
.motives a {
  background-color: #2b2d6e;
  color: #fff;
  font-size: 16px;
  padding: 0px;
  margin-left: 0px;
  margin-right: 30px;
}
.explore-container {
  background-color: #f7f6f9;
}

.explore {
  display: flex;
  background-color: #f7f6f9;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}
.hire {
  width: 50%;
  margin-left: 60px;
  padding-top: 43px;
  padding-bottom: 43px;
  margin-right: 100px;
}
.explore-box h4 {
  font-size: 22px;
  color: #242729;
  padding: 15px 0px;
}

.explore-box p {
  font-size: 13.58px;
  font-family: "Source Sans Pro", sans-serif;
}
.explore-button {
  width: 40%;
  text-align: center;
  background-color: #f48024;
  padding: 10px;
  font-size: 15px;
  color: #fff;
  margin-top: 25px;
  margin-left: 14px;
  border-radius: 5px;
  font-family: "Source Sans Pro", sans-serif;
}
.advertising {
  width: 43%;
}
.devleopers-worldwide {
  width: 50%;
  margin-right: 60px;
  padding-top: 43px;
}

.features {
  padding-top: 70px;
  text-align: center;
  background-color: #fff;
}

.features h1 {
  font-size: 29px;
  color: #242729;
  padding-bottom: 50px;
}
.features-grid {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 68%;
}
.features-grid .start {
  margin-right: 40px;
}
.features-grid .end {
  margin-left: 40px;
}
.features-grid-box {
  margin-bottom: 25px;
  display: flex;
  padding: 15px 7px;
}
.features-grid-box p {
  margin-top: 10px;
  margin-left: 15px;
  font-family: "Source Sans Pro", sans-serif;
}
.features-grid-box:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.09),
    0 3px 8px rgba(0, 0, 0, 0.19);
}
.mobile-feature-grid {
  display: none;
}
.features-text {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  font-size: 15px;
  font-family: "Source Sans Pro", sans-serif;
}
.cerate-account {
  width: 40%;
  padding: 10px;
  background-color: #f48024;
  color: #fff;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  font-family: "Source Sans Pro", sans-serif;
}
.grow {
  padding-top: 200px;
  text-align: center;
  padding-bottom: 100px;
}
.grow h1 {
  font-size: 29px;
  color: #242729;
}
.grow-container {
  display: flex;
  justify-content: space-around;
  margin-left: 70px;
}
.grow-box {
  width: 20%;
  text-align: start;
}
.grow-box p {
  font-size: 13.88px;
  font-family: "Source Sans Pro", sans-serif;
}
.grow-box h4 {
  padding: 16px 0px;
}
.job {
  padding-top: 150px;
  padding-left: 150px;
  background-color: #e1ecf4;
  padding-bottom: 100px;
}
.job h1 {
  color: #242729;
}
.job-container {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.job-box {
  display: flex;
  width: 16%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.09),
    0 3px 8px rgba(0, 0, 0, 0.19);
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
}
.job-text {
  text-align: center;
  padding-top: 10px;
  font-family: "Source Sans Pro", sans-serif;
}
.job-button {
  border-radius: 5px;
  background-color: #f48024;
  text-align: center;
  padding: 10px;
  height: 23px;
  margin-right: 50px;
  margin-top: 15px;
  color: #fff;
  font-size: 13px;
  font-family: "Source Sans Pro", sans-serif;
}

footer {
  background-color: #242729;
  color: #a0a0a0fa;
  display: flex;
  padding-bottom: 50px;
}
.footer-logo {
  padding-top: 60px;
  margin-right: 40px;
  margin-left: 100px;
}
.footer-nav {
  display: flex;
  padding-top: 60px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.nav-box {
  margin-right: 60px;
}
.nav-box h5 {
  font-size: 16px;
}
.nav-box ul {
  padding-left: 0px;
}
.nav-box li {
  font-size: 13px;
  padding: 5px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.copyright {
  font-size: 11px;
  padding-top: 60px;
}
.copyright-top {
  display: flex;
}
.copyright-top div {
  margin-right: 10px;
}
.copyright-bottom {
  margin-top: 130px;
}
@media (max-width: 970px) {
  /* header{
    width: 100%;
  } */
  .top {
    width: 98%;
  }
  .Search {
    width: 30%;
}
  .search-icon {
    display: none;
    float: right;
  }
  .search_here {
    display: block;
  }
  .main {
    background-color: #ffcf10;
    background-image: url("https://cdn.sstatic.net/Img/home/illo-hero-full.svg?v=e2018a5f9272");
    background-position: top center;
  }
  .block {
    margin-left: 8%;
}
.for-developer {
  margin-left: 31%;
}
.grid {
  width: 90%;
}
.box1 {
  margin-right: 26px;
  width: 30%;
  text-align: center;
}
.buy p {
  margin-left: 27%;
  width: 44%;
}
.buy-grid {
  flex-wrap: wrap;
}
.buy-grid-box {
  width: 35%;
}
.buy-grid-box h1 {
  margin-left: -17%;
}
.buy-grid-box-middle h1 {
  margin-left: -14%;
}
.motives {
  width: 50%;
  margin: auto;
  margin-top: 80px;
}
.explore {
  width: 100%;
}
.features-grid {
  width: 88%;
}
.features-grid .start {
  margin-right: 10px;
}
.features-grid .end {
  margin-left: 10px;
}
.features {
  padding-bottom: 50px;
}
.grow-container {
  margin-left: 5px;
}
.job {
  padding-left: 60px;
}
.job h1 {
  text-align: center;
}
.job-container {
  justify-content: center;
  flex-wrap: wrap;
}
.job-box {
  width: 37%;
  margin-bottom: 30px;
  margin-right: 55px;
}
.footer-logo {
  margin-right: 15px;
  margin-left: 15px;
}
.nav-box {
  margin-right: 30px;} 
.nav-box h5 {
  font-size: 14px;
}
.nav-box li {
  list-style: none;
}
.footer-nav {
  width: 93%;
}
.buy-grid {
  width: 82%;
}






}
@media (max-width: 600px) {
  header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.09),
      0 3px 8px rgba(0, 0, 0, 0.19);
  }
  .logo img {
    width: 100px;
  }
  .navigation .about {
    display: none;
  }
  .navigation .team {
    display: none;
  }
  .logo:hover {
    background-color: #fff;
  }
  .top {
    margin-left: 15px;
  }
  .for-developer {
    margin-left: -5%;
  }
  .log_in {
    width: 42px;
    margin-right: 3px;
    height: 68%;
    padding: 3px;
  }
  .Sign_up {
    height: 68%;
    padding: 3px;
    width: 51px;
    margin-right: 2px;
  }
  .join_us {
    margin-right: 0px;
  }
  .Search {
    display: block;
    margin-right: 23px;
    margin-left: -10px;
  }
  .main {
    background-image: url("https://cdn.sstatic.net/Img/home/illo-hero-small.svg?v=884735d21ea5");
  }
  .block {
    left: 0px;
    text-align: center;
  }
  .block h1 {
    font-size: 30px;
  }
  .block p {
    width: 300px;
    font-size: 19px;
    margin-left: 15px;
  }
  .options {
    margin-left: 25px;
    margin-top: 50px;
  }
  .developer p {
    width: 290px;
  }
  .grid {
    width: 100%;
    flex-direction: column;
  }
  .infobox {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .infobox p {
    width: 220px;
  }
  .Business p {
    width: 290px;
  }
  .businessgrid {
    width: 100%;
    flex-direction: column;
  }
  .box1 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
  .buy p {
    margin-left: 0px;
    width: 100%;
  }
  .buy a {
    margin-left: 30%;
  }
  .buy-grid {
    flex-direction: column;
    background-image: none;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
  .buy-grid-box {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
  .buy p {
    margin-left: 26px;
    width: 90%;
  }
  .buy-grid-box h1 {
    margin-left: -55px;
  }
  .motives {
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    width: 80%;
}
  .motives a {
    margin-bottom: 10px;
  }
  .explore {
    flex-direction: column;
    width: 100%;
  }
  .hire {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }
  .explore-box h4 {
    font-size: 19px;
    width: 98%;
  }
  .devleopers-worldwide {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
  }
  .explore-button {
    font-size: 11px;
  }
  .features-grid {
    width: 100%;
    flex-direction: column;
  }
  .middle img {
    width: 300px;
  }
  .features-text {
    width: 80%;
  }
  .grow-container {
    flex-direction: column;
    margin-left: 10px;
  }
  .grow-box {
    width: 90%;
    text-align: center;
    margin-bottom: 50px;
  }
  .job {
    padding-left: 15px;
  }
  .job h1 {
    font-size: 23px;
  }
  .job-container {
    flex-direction: column;
  }
  .job-box {
    width: 90%;
    margin-bottom: 10px;
  }
  footer {
    display: block;
  }
  .footer-logo {
    display: none;
  }
  .footer-nav {
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 30px;
  }
  .nav-box {
    margin-right: 15px;
  }
  .nav-box h5 {
    font-size: 14px;
  }
  .nav-box li {
    font-size: 11px;
    padding: 5px;
  }
  .copyright {
    padding-left: 10px;
  }
  .mobilelogo {
    display: block;
  }
  .mobilelogo img {
    height: 36px;
    margin-top: -8px;
  }
  .logo {
    display: none;
  }
  .mobile-feature-grid {
    display: block;
  }
  .start {
    display: none;
  }
  .end {
    display: none;
  }
}