body {
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 20px;
  padding-top: 120px; /* Adjust this value based on the header height */
  perspective: 1000px; /* iPad Styles */
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 5px rgba(255, 229, 163, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1900px;
  height: 70px;
  margin: 0 auto;
  padding: 50px;
}

header .logo img {
  width: 66px;
  height: 40px;
  flex-shrink: 0;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
  margin-left: auto;
}

nav ul li a {
  color: #676767;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

main {
  padding: 20px;
  margin: 60px;
  text-align: left;
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.6;
  color: #676767;
}

.intro {
  text-align: left;
  padding: 50px 0;
  margin-left: 160px;
}

.intro h1, .intro h2 {
  font-size: 42px;
}

.intro .highlight {
  color: #F8B731;
}

.intro .sub-text, .portfolio p {
  font-size: 16px !important; /* Use !important to override other styles */
}

.portfolio {
  margin-top: 100px;
  text-align: left;
  padding: 50px 0;
  margin-left: 160px;
}

.portfolio a {
  color: #35373B;
}

.portfolio h2, .portfolio h3 {
  font-size: 42px;
  color: #35373B;
  margin-top: 10px;
}

.images {
  display: flex;
  perspective: 1000px;
  margin-bottom: 20px;
}

.images img {
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

footer {
  background-color: #A7A7A7;
  padding: 50px;
  color: white;
  width: 100%;
  box-sizing: border-box;
  margin-top: 200px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
}

.footer-left h2 {
  font-size: 28px;
  font-weight: bold;
}

.footer-right p {
  margin: 0;
  font-size: 22px;
  text-align: center; /* Center the text */
  line-height: 40px;
}

p {
  font-size: 16px; /* Set font size to 16px for all paragraph elements */
}

@media screen and (max-width: 480px) {
  body {
    padding: 10px;
  }

  header {
    padding: 10px 20px;
    height: 60px;
    margin-top: 20px;
  }

  header .logo img {
    width: 40px;
    height: 24px;
  }

  nav ul {
    gap: 10px;
    margin-top: 10px;
  }

  nav ul li a {
    font-size: 14px;
  }

  .intro h1, .intro h2, .portfolio h2, .portfolio h3 {
    font-size: 16px;
  }

  .images img {
    max-width: 100%;
    margin-left: 0;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    padding: 20px 10px;
  }

  .footer-left h2, .footer-right p {
    font-size: 16px;
  }

  footer {
    padding: 20px;
  }
}

@media screen and (min-width: 768px) {
  .intro, .portfolio {
    text-align: left;
    padding: 100px 0;
    margin-left: 0;
  }

  .images img {
    max-width: 75%;
    margin-left: 0;
  }
}

@media screen and (min-width: 1440px) {
  .intro, .portfolio {
    text-align: left;
    padding: 100px 0;
    margin-left: 0;
  }

  .images img {
    max-width: 55%;
    margin-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .intro, .portfolio {
    text-align: left;
    padding: 50px 0;
    margin-left: 0;
  }

  .images img {
    max-width: 103%;
    margin-left: 0;
  }
}