.open-sans-normal {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
  margin: 0;
}

/*Header styles */
.header {
  background-image: url(../images/developer.png), url(../images/header_bg.png);
  background-repeat: no-repeat;
  background-position: top left, bottom right;
}

/* Nav styles */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 200px;
}

.snd-bg {
  background-color: #FFF8F3;
}

.text-primery {
  color: #ff9100;
}

.btn-primary {
  background-color: #FD6E0A;
  color: #fff;
  padding: 20px 35px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 600;
}

.btn-primary {
  display: inline-block;
  padding: 20px 35px;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
  background: #FD6E0A;
  cursor: pointer;
  transition: ease-out 0.5s;
  border: 2px solid #FD6E0A;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 #FD6E0A;
}

.btn-primary:hover {
  color: #FD6E0A;
  box-shadow: inset 0 -100px 0 0 #ffffff;
}

.btn-snd {
  display: inline-block;
  margin-left: 15px;
  padding: 20px 35px;
  text-align: center;
  font-size: 20px;
  color: #FD6E0A;
  background: transparent;
  cursor: pointer;
  transition: ease-out 0.5s;
  border: 2px solid #FD6E0A;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 #FD6E0A;
}

.btn-snd:hover {
  color: white;
  box-shadow: inset 0 -100px 0 0 #FD6E0A;
}

.nav-title {
  font-size: 45px;
  font-weight: 800;
}

nav ul {
  display: flex;
  align-items: center;
}

nav ul li {
  list-style: none;
  margin-right: 50px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 20px;
  font-weight: regular;
}

/* Banner styles */

.banner{
  display: flex;
  justify-content: space-between;
  margin: 0px 35px 0px 200px;
}

.banner-content {
  max-width: 550px;
}

.banner-greetings {
  font-size: 45px;
  font-weight: semibold;
  margin-top: 200px;
  margin-bottom: -75px;
}
.banner-titel {
  font-size: 85px;
  font-weight: bold;
  margin-bottom: -5px;
}

/* Main styles */

main {
  max-width: 1140px;
  margin: 0px auto;
}


/* About section styles */

.about{
  border-radius: 10px;
  padding: 130px 155px;
  text-align: center;
  margin-top: 130px;
  margin-bottom: 130px;
}

.sectione-title {
  font-size: 50px;
  font-weight: bold;
}
.section-description {
  font-size: 18px;
  font-weight: regular;
}

.about-items {
  display: flex;
  justify-content: space-between;
}

.item-title {
  font-size: 20px;
  font-weight: regular;
}

.item-description {
  font-size: 20px;
  font-weight: bold;
}

/* What I Do section styles */

.what-i-do {
  text-align: center;
}

.what-i-do-items {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 130px;
}

.what-i-do-item {
  width: 30%;
  text-align: left;
  max-width: 267px;
  max-height: 377px;
  padding: 30px;
  border: #f0f0f0 solid 1px;
  border-radius: 5px;
  margin-right: 24px;
  box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.06);
}

.item-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Resume section styles */

.resume {
  text-align: center;
  margin-bottom: 130px;
}

.resume-container {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 50px;
  column-gap: 25px;
  text-align: left;
}

.resume-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.experience-item {
  max-width: 560px;
  border-bottom: #e4e4e4 solid 1px;
}

.exp-title {
  font-size: 25px;
  font-weight: bold;
  color: #2e2e2e;
}

.exp-sub-title {
  font-size: 20px;
  font-weight: semibold;
  color: #4d4d4d;
  margin-top: -30px;
}

.exp-description {
  margin-right: 50px;
}

/* Footer styles */

.footer {
  padding: 130px 230px;
  display: flex;
  justify-content: space-between;
  gap: 100px;
}

.footer-column {
  width: 50%;
}

.sectione-description {
  font-size: 18px;
  font-weight: regular;
  margin-bottom: 30px;
}

.footer-column img {
  width: 30px;
  height: auto;
  margin-bottom: 30px;
}

footer input[type="text"], footer input[type="email"] {
  height: 64px;
  padding: 10px 30px;
  margin-bottom: 24px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  display: block;
  width: 100%;
  font-size: 18px;
}

footer textarea {
  padding: 10px 30px;
  margin-bottom: 24px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  display: block;
  width: 100%;
  font-size: 18px;
}

/* Footer styles End */


/* responsive media query */
.hide {
  display: none;
}


@media screen and (max-width: 576px) {
  .what-i-do-items, 
  .resume-container, 
  .footer, 
  .about-items, 
  .banner {
    flex-direction: column;
  }

  .what-i-do-item, .resume-container{
  width: 100%;
  margin: auto;
  margin-bottom: 20px;
}
  .header{ 
    background: none;
  }
  .banner {
    margin: 10px;
  }

  .btn-primary {
    margin-bottom: 10px;
  }

  .banner-titel{
    padding: 0;
  }
  .btn-snd{
    margin: 0;
    width: 228px;
  }

  .banner-greetings {
    margin-top: 20PX;
  }

  .banner > a {
    margin-bottom: 10px;
  }
  .banner> img {
    width: 100%;
  }

  .footer, .about {
    padding: 20px;
  }
  .footer-column {
    width: 80%;
  }

}