#home{
  display: grid;
  grid-template-rows:max-content;
  grid-template-columns: 1fr 0.6fr;
  gap: 13.6rem;
  margin-top: 10rem;
  align-items: center;
  justify-content: space-between;
}
img{
  width: 100%;
}
#about{
  margin-top: 10rem;
  display: grid;
  grid-template-columns: 1fr 2fr !important;
  gap: 5rem;
  background:  rgba(60, 44, 93, 0.2);
  border-radius: 1.6rem;
  padding: 3rem;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
#about h2{
  text-align: left;
}
#about img{
  border-radius: 30%;
  background:  rgba(97, 82, 129, 0.2);
}
#projects{
  margin-top: 10rem;
  display: grid;
  grid-template-rows:row row row;
  gap: 1.6rem;
  text-align: center;
}
#projects .collums{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.6rem;
}
#contact{
  margin-top: 10rem;
  display: grid;
  grid-template-rows:max-content;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  background:  rgba(60, 44, 93, 0.2);
  border-radius: 1.6rem;
  padding: 2rem 3rem;
  align-items: center;
  color: var(--gray);
}
#contact form input{
  height: 4rem;
  width: 100%;
  background-color: var(--purple-light);
  border: none;
  color: white;
  padding: 1rem;
  border-radius: 0.6rem;
}
#contact input:focus, #contact textarea:focus,#contact select:focus {
  outline: none;
  border: 2px solid var(--gray);
}
#contact input::placeholder,#contact textarea::placeholder {
  color: white;
  padding:1rem
}

#contact form textarea{
  height: 10rem;
  width: 100%;
  background-color: var(--purple-light);
  border: none;
  color: var(--gray);
  padding:1rem;
  border-radius: 0.6rem;
}
#contact form .wpcf7-submit{
  height: auto;
  width: 30%;
  cursor: pointer;
}
#contact .wpcf7-not-valid-tip{
  color: var(--gray);
  font-size: 1.6rem;
}
#contact .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  border: 2px solid var(--gray);
}
#contact i{
  font-size: 3.5rem;
  margin-right: 1rem;
  color: var(--green);
}
#contact i:hover{
  color: var(--purple-strong);
  cursor: pointer;
}

@media (max-width: 768px) {
  #home, #about, #contact {
    grid-template-columns: 1fr !important;
  }
  
  #projects .collums{

    grid-template-columns: 1fr;
  }
  #home, #about, #contact {
    grid-template-columns: 1fr !important;
  }
  #home #home2{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #home img{
    max-width: 70%;
  }
  #about #about1{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #about img{
    max-width: 50%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #home, #about, #contact {
    grid-template-columns: 1fr !important;
  }
  #home #home2{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #home img{
    max-width: 70%;
  }
  #about #about1{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #about img{
    max-width: 50%;
  }
  
  #projects .columns {
    grid-template-columns: 3fr;
  }

  .container {
    width: min(80rem, 100%)!important;
  }
}

@media (min-width: 1025px) {
  #about, #contact {
    grid-template-columns: 1.5fr 1fr;
  }

  #projects .columns {
    grid-template-columns: 1fr 1fr 1fr;
  }
}