* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-weight: normal;
}

span {
  color: turquoise;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #161616;
  position: relative;
  bottom: 1px;

  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 75% 85%, 0% 100%, 0% 0%);
}

.brand-img {
  display: flex;
  justify-content: flex-end;
  margin-right: 5rem;
}

.brand-img img {
  width: 25rem;
}

.main-content {
  width: 80%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 15%;
}

.main-content h2 {
  color: turquoise;
  font-size: 1.5rem;
}

.main-content h1 {
  font-size: 4rem;
}

.main-content p {
  padding: 2.5rem 0;
  font-family: "Play", sans-serif;
  font-size: 1.1rem;
  line-height: 1.5rem;
}

.main-content button {
  width: 15rem;
  height: 2.75rem;

  border: 2px solid turquoise;
  outline: none;
  background-color: transparent;
  color: turquoise;
  font-family: "Play", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;

  transition: 0.35s ease-in-out;
}

.main-content button:hover {
  background-color: turquoise;
  color: #161616;
}

@media screen and (max-width: 935px) {
  .main {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 1fr;
    padding-top: 2.5rem;

    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 75% 90%, 0% 100%, 0% 0%);
  }

  .brand-img {
    justify-content: center;
    margin: 0;
  }

  .brand-img img {
    width: 20rem;
  }

  .main-content {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }

  .main-content h1 {
    text-align: center;
  }

  .main-content p {
    text-align: center;
  }
}

@media screen and (max-width: 650px) {
  .main {
    clip-path: none;
  }
}

.about {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15rem;
  align-items: center;
  padding: 6.5rem 0;
}

.about-img {
  justify-self: end;
}

.about-img img {
  width: 23rem;
}

@media screen and (max-width: 375px) {
  .about-img img {
    width: 20rem;
  }
}

.about-content {
  justify-self: start;
  width: 75%;
}

.about-content > div {
  font-family: "Play", sans-serif;
  font-weight: bold;
  padding: 0.5rem 0;
}

.about-content p {
  font-family: "Play", sans-serif;
  font-size: 1.1rem;
  line-height: 1.5rem;
  color: dimgray;
  padding: 1rem 0;
}

.icons {
  display: flex;
}

.round-icon {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  border-radius: 15px;
  background-color: black;

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.5s;
}

.square {
  width: 0.75rem;
  height: 0.75rem;
  border: 1.5px solid white;
}

.round-icon:hover {
  background-color: turquoise;
}

@media screen and (max-width: 990px) {
  .about {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 1fr;
  }

  .about-img {
    justify-self: center;
  }

  .about-content {
    justify-self: center;
  }
}

.services {
  background-color: #eeeeee;
  padding: 5rem 0;
}

.services > h1 {
  text-align: center;
}

.subheading {
  text-align: center;
  padding: 1rem 0;
  font-family: "Play", sans-serif;
  font-size: 1.1rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: dimgray;
}

.card {
  width: 25rem;
  height: 15rem;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;

  cursor: pointer;
  transition: 0.5s;
}

.card h1 {
  position: relative;
  bottom: 2rem;
  transition: 0.5s;
}

.card p {
  padding: 1rem 3.5rem;
  font-family: "Play", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: dimgray;
  position: relative;
  bottom: 2rem;
  transition: 0.5s;
}

.card-square {
  width: 6.5rem;
  height: 6.5rem;
  background-color: turquoise;
  position: relative;
  bottom: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-square {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid black;
}

.card:hover {
  background-color: black;
}

.card:hover h1 {
  color: white;
}

.card:hover p {
  color: darkgray;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 45rem;
}

@media screen and (max-width: 1300px) {
  .cards {
    margin-top: 5rem;
    height: 65rem;
  }
}

@media screen and (max-width: 885px) {
  .cards {
    height: 130rem;
  }
}

.freelancer {
  position: relative;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 0;
}

.freelancer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url("./images/camera.png") center center/cover;
  width: 100%;
  height: 65vh;
  z-index: -1;
  filter: brightness(0.35);
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 70% 80%, 0% 100%, 0% 0%);
}

.freelancer h1 {
  font-size: 2.75rem;
}

.freelancer > .subheading {
  color: white;
  font-weight: normal;
}

.freelancer button {
  width: 15rem;
  height: 2.75rem;

  border: 2px solid turquoise;
  outline: none;
  background-color: turquoise;
  color: #161616;
  font-family: "Play", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;

  transition: 0.35s ease-in-out;
}

.freelancer button:hover {
  background-color: transparent;
  color: turquoise;
}

@media screen and (max-width: 700px) {
  .freelancer::before {
    clip-path: none;
  }
  .freelancer {
    padding: 5rem 1rem;
  }
}

.client-section {
  margin-top: 7.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.clients {
  width: 75%;
  margin: 5rem auto;
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.clients::-webkit-scrollbar {
  display: none;
}

.client {
  min-width: 100%;
}

.client-logo {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
  border-radius: 2rem;
  background: url("./images/lady.png") center center/cover;
}

.client .subheading {
  font-weight: normal;
}

.dots {
  display: flex;
  justify-content: center;
}

.dot {
  width: 0.5rem;
  height: 5px;
  border-radius: 5px;
  background-color: dimgray;
  margin: 0 2.5px;
  cursor: pointer;
  transition: 0.25s;
}

.author {
  font-weight: bold;
  color: turquoise;
}

.works {
  background-color: #eeeeee;
  padding: 5rem 1rem;
  text-align: center;
}

.images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 0;
}

.image {
  position: relative;
  width: 23rem;
  height: 12.5rem;
  margin: 1rem;
  background: url("./images/ph-1.png") no-repeat center center/cover;
  cursor: pointer;
}

.overlay {
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 16, 16, 0.85);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Play", sans-serif;
  font-size: 1.1rem;
  line-height: 1.5rem;
  transition: 0.35s;
}

.image:hover .overlay {
  opacity: 1;
}

.blog {
  background-color: #161616;
  padding: 7.5rem 1rem;
  text-align: center;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 75% 90%, 0% 100%, 0% 0%);
}

.blog .subheading {
  color: darkgray;
}

.blog-card {
  width: 20rem;
  margin: 1.5rem;
  background-color: white;
  font-family: "Play", sans-serif;
  text-align: left;
}

.card-img {
  width: 100%;
  height: 15rem;
  background: url("./images/article-ph-1.png");
}

.card-content {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.title,
.read-more {
  font-size: 1.1rem;
  line-height: 1.5rem;
  font-weight: bold;
  transition: 0.35s;
  color: #009688;
}

.date {
  font-size: 0.95rem;
  color: gray;
}

.blog-card p {
  color: dimgray;
  padding: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

.read-more {
  color: #424242;
  width: fit-content;
}

.title:hover,
.read-more:hover {
  color: turquoise;
  cursor: pointer;
}

.blog-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 3.5rem;
}

@media screen and (max-width: 1140px) {
  .blog {
    clip-path: none;
  }
}

@media screen and (max-width: 410px) {
  .blog-card {
    margin: 1.5rem 0;
  }
}

.contact {
  padding: 5rem 1rem;
  text-align: center;
}

.contact-card {
  width: 20rem;
  height: 12.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 1.5rem;
  cursor: pointer;
  transition: 0.35s;
}

.contact-card:hover {
  box-shadow: 0 0 15px darkgray;
}

.contact-card h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  text-transform: none;
}

.contact-info {
  color: dimgray;
  font-family: "Play", sans-serif;
}

.contact-square {
  width: 2.5rem;
  height: 3.5rem;
  border: 2px solid dimgray;
}

.contact-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 3.5rem;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr) 3fr;
  grid-gap: 1.5rem;
  width: 65%;
  margin: 3.5rem auto;
}

.contact-field:nth-child(3) {
  grid-column: 1/3;
}

.contact-field {
  height: 2.5rem;
  border: none;
  outline: none;
  border: 2px solid darkgray;
  border-radius: 1.5rem;
  padding: 0 1rem;
  font-family: "Play", sans-serif;
  font-size: 0.95rem;
  color: dimgray;
}

.contact-field:focus {
  border-color: transparent;
  box-shadow: 0 0 10px darkgray;
}

.fields textarea {
  grid-column: 1/3;
  border: none;
  outline: none;
  border: 2px solid darkgray;
  border-radius: 1.5rem;
  padding: 1rem;
  font-family: "Play", sans-serif;
  font-size: 0.95rem;
  color: dimgray;
}

textarea:focus {
  border-color: transparent;
  box-shadow: 0 0 10px darkgray;
}

.contact button {
  width: 15rem;
  height: 2.75rem;

  border: 2px solid turquoise;
  outline: none;
  background-color: turquoise;
  color: #161616;
  font-family: "Play", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;

  transition: 0.35s ease-in-out;
}

.contact button:hover {
  color: turquoise;
  background-color: transparent;
}

@media screen and (max-width: 845px) {
  .fields {
    display: flex;
    flex-direction: column;
    width: 85%;
  }
}

footer {
  background-color: #161616;
  height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.squares {
  display: flex;
}

.footer-square {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid white;
  margin: 0 0.5rem;
}

.copy {
  color: white;
  font-family: "Play", sans-serif;
  font-size: 1.1rem;
  line-height: 1.5rem;
}