* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 1212px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}
html {
  scroll-behavior: smooth;
}
header {
  position: fixed;
  width: 100%;
  backdrop-filter: blur(4px);
  background-color: rgba(3, 52, 67, 0.5);
}
.item {
  color: #a1b5bb;
}
.toggle {
  display: none;
}
#backtop {
  position: fixed;
  background-color: rgb(178, 214, 238);
  backdrop-filter: blur(5px);
  z-index: 2;
  right: 100px;
  bottom: -50px;
  padding: 10px;
  border-radius: 50px;
  cursor: pointer;
  transition: 0, 5s;
}
#backtop.backtop-show {
  bottom: 40px;
}
#navbar-responsive {
  position: fixed;
  top: 0;
  left: -100%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  backdrop-filter: blur(4px);
}
.navbar-list-things,
.navbar-list-things-con {
  list-style-type: none;
}
.navbar-item,
.navbar-ites {
  text-decoration: none;
  list-style-type: none;
  font-family: inter !important;
  width: 200px;
  padding: 10px 50px;
  background-color: #3c5058;
  display: inline-block;
  margin-bottom: 10px;
  text-align: center;
  font-size: 20px;
  color: white;
  border-radius: 10px;
}
#navbar-close {
  border: none;
  position: absolute;
  top: 20px;
  right: 0;
  background-color: transparent;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}
#navbar-close img {
  width: 50px;
}
@media (max-width: 1100px) {
  .fours {
    flex-direction: column;
    align-items: center;
  }
  .boxes4 {
    flex-direction: column;
    align-content: center;
  }
}
@media (max-width: 1000px) {
  .image-musa,
  .home {
    flex: 100%;
  }
  .home,
  .musa,
  .button {
    text-align: center;
  }
  .boxes {
    gap: 10px !important;
  }
  .about-1 {
    padding-left: 0 !important;
  }

  .list-things-btn {
    display: none;
  }
  .includer {
    flex-wrap: wrap;
    text-align: center;
  }
  .lastimg {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer {
    flex-wrap: wrap;
  }
  .things-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .log-and-p {
    text-align: center;
    justify-content: center;
    flex: 100%;
  }
}
@media (max-width: 650px) {
  .list-things {
    display: none;
  }
  .toggle {
    display: inline-block;
    background: transparent;
    border: none;
    color: whitesmoke;
  }
  .toggle img {
    color: white;
    height: 40px;
  }
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 54px;
}
a {
  text-decoration: none;
}
.list-item {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 33px;
  color: #a1b5bb;
}
.logo {
  display: flex;
}
.list-things-btn {
  margin-left: 144px;
  border-radius: 24px;
  background: #145e76;
  padding: 14px 34px;
}

.logo h1 {
  color: #fff;
  font-family: Inter;
  font-size: 30px;
}
.item:hover {
  cursor: pointer;
  color: orange;
  text-decoration: underline;
}
.ites p {
  color: #fff;
  font-family: Inter;
  font-size: 18px;
}
.list-things {
  color: #a1b5bb;
  font-family: Inter;
  font-size: 18px;
}

.home-musa {
  display: flex;
  flex-wrap: wrap;
}
.home,
.image-musa {
  flex: 50%;
  max-width: 100%;
  margin-top: 100px;
}
.musa {
  color: #fff;
  font-family: Schoolbell;
  font-size: 24px;
  padding: 16px 30px;
  background-color: #094556;
  display: inline-block;
  border-radius: 30px;
  margin-top: 150px;
  margin-bottom: 40px;
}
.home h1 {
  color: #fff;
  font-family: Inter;
  font-size: 64px;
  margin-bottom: 30px;
}
.description {
  color: #849499;
  font-family: Inter;
  font-size: 18px;
  margin-bottom: 50px;
}
.button {
  color: #fff;
  font-family: Inter;
  font-size: 18px;
  background: transparent;
}
.image-musa {
  display: flex;
  margin-bottom: 215px;
}
.image-musa img {
  width: 100%;
}
.hire-me {
  border-radius: 25px;
  padding: 16px 35px;
  margin-right: 50px;
  background-color: #ce862f;
}
#home {
  background-color: #033443;
}
.mywork {
  border: none;
}
#about h2 {
  text-align: center;
  margin-bottom: 80px;
  padding-top: 65px;
  color: #265a6a;
  font-family: Inter;
  font-size: 24px;
}
.boxes {
  text-align: center;
  display: flex;
  gap: 190px;
}
.about-1 {
  padding-left: 54px;
}
.about h3 {
  color: #08546c;
  font-family: Inter;
  font-size: 48px;
}
.aboutcontainer {
  position: relative;
  width: 1212px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}
.container-box {
  position: absolute;
  width: 1210px;
  height: 323px;
  gap: 190px;
  background-color: #ffffff;
  box-shadow: 5px 5px 10px black;
  border-radius: 30px;
  margin-top: -150px;
}

.about p {
  color: #08546c;
  font-family: Inter;
  font-size: 18px;
}
#about {
  background-color: #fefefe;
  position: relative;
}
.writing {
  text-align: center;
}
.writing p {
  margin-top: 200px;
  color: #265a6a;
  font-family: Schoolbell;
  font-size: 24px;
  margin-bottom: 30px;
}
.writing h2 {
  color: #08546c;
  font-family: Inter;
  font-size: 45px;
  margin-bottom: 70px;
}
.box {
  width: 273px;
  height: 251px;
  padding-left: 30px;
  box-shadow: 1px 1px 5px black;
}
.icon img {
  padding: 18px 13px;
  background-color: #f5fbfc;
  border-radius: 50%;
  margin-bottom: 25px;
  margin-top: 30px;
}
.p-and-h h4 {
  color: #0f1221;
  font-family: Inter;
  font-size: 24px;
  margin-bottom: 10px;
}
.p-and-h p {
  width: 215px;
  height: 73px;
  color: #696969;
  font-family: Inter;
  font-size: 16px;
  padding-right: 3px;
  padding-bottom: 34px;
}
.fours {
  display: flex;
  gap: 26px;
  margin-bottom: 232px;
}
.box2 img {
  margin-top: 32px;
  margin-bottom: 25px;
}
.box2 {
  background-color: #064458;
}
.box h4 {
  color: #0f1221;
  font-family: Inter;
  font-size: 24px;
}
.box p {
  color: #b2bbbd;
  font-family: Inter;
  font-size: 16px;
}
.box2 h4 {
  color: #fff;
  margin-bottom: 10px;
}

.portfolio h1 {
  color: #08546c;
  font-family: Inter;
  font-size: 45px;
  padding-bottom: 10px;
  text-align: center;
}
.portfolio p {
  text-align: center;
  color: #757575;
  font-family: Inter;
  font-size: 18px;
  margin-bottom: 60px;
}
.image {
  width: 515px;
  height: 385px;
}
.image img {
  width: 100%;
}
.writings p {
  width: 515px;
  text-align: left;
  margin-top: 10px;
  color: #757575;
  font-family: Inter;
  font-size: 16px;
  margin-bottom: 20px;
}

.writings h2 {
  color: #08546c;
  font-family: Inter;
  font-size: 30px;
  margin-top: 40px;
}
.btn {
  border: none;
  color: #08546c;
  font-family: Inter;
  font-size: 18px;
  padding-right: 16px;
  background: transparent;
  cursor: pointer;
}
.btn img {
  margin-left: 15px;
  width: 15px;
  height: 13px;
}
.boxes4 {
  width: 100%;
  max-width: 1172px;
  gap: 140px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 200px;
}
#blog {
  background-color: #053a4b;
}
.includer {
  display: flex;
  flex: 100%;
}
.lastimg,
.iconquote {
  flex: 50%;
}
.lastimg {
  margin-top: 102px;
  width: 100%;
}
.iconquote img {
  margin-top: 226px;
  margin-bottom: 32px;
}
.iconquote p {
  color: #fff;
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 33px;
}
.iconquote h2 {
  color: #aabfc6;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.lastimg img {
  z-index: 2;
  width: 400px;
  height: 500px;
  border: 20px solid #22505e;
  border-top-right-radius: 200px;
  border-top-left-radius: 200px;
  background-color: #85a1aa;
}
#contact {
  background-color: ORANGE;
  display: flex;
  align-content: center;
}
.main {
  display: flex;
  text-decoration: none;
  list-style-type: none;
  gap: 160px;
}
.main a {
  display: flex;
  align-content: center;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo h1 {
  color: #08546c;
  font-family: Inter;
  font-size: 30px;
}
.log-and-p {
  display: flex;
  flex-wrap: wrap;
}
.p p {
  color: #757575;
  font-family: Inter;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 50px;
}
.social-media {
  display: flex;
  text-decoration: none;
  list-style-type: none;
  gap: 12px;
}
.things-item {
  display: flex;
  gap: 140px;
  margin-bottom: 170px;
}
.things {
  text-decoration: none;
  list-style-type: none;
  margin-bottom: 10px;
}
.things-item p {
  color: #08546c;
  font-family: Inter;
  font-size: 24px;
  margin-bottom: 28px;
  margin-top: 108px;
}
.list-items {
  color: #787878;
  font-family: Inter;
  font-size: 18px;
  padding-top: 10px;
}
#contact {
  background-color: #ffffff;
}