@media screen and (min-width: 1024px) {
  header #topnav {
    display: none;
  }
  header .nav-bar .logo {
    width: 25%;
  }
  main .landing-page {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    width: 96%;
    height: 90vh;
    margin: 0 auto;
    align-items: start;
  }
  main .landing-page .textContainer {
    display: flex;
    justify-content: center;
    align-items: start;
    height: 70vh;
    text-align: start;
  }
  main .landing-page .ImgContainer {
    display: flex;
    align-items: center;
    padding: 10px;
    width: 40vw;
    height: 70vh;
  }
  main .landing-page .ImgContainer img {
    width: 450px;
    height: 450px;
  }
  .hamburger {
    display: none;
  }
  header .nav-bar .nav-links {
    display: flex;
  }

  header #topnav.open {
    display: none;
  }

  /* ABOUT CONTAINER */
  #about {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0px;
    width: 98%;
    margin: 0 auto;
    align-items: center;
  }
  #about .textContainer {
    order: 2;
    display: flex;
    justify-content: start;
    align-items: start;
    height: 70vh;
    text-align: start;
  }
  #about .textContainer .subText {
    width: 50vw;
  }
  #about .ImgContainer {
    order: 1;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    justify-content: start;
    align-items: start;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  }
  #about .ImgContainer img {
    width: 550px;
    height: 550px;
  }

  /* SERVICE SECTION */

  #service .services {
    width: 100%;
    display: grid;
    grid-column-gap: 0%;
    grid-template-columns: repeat(3, 1fr);
  }
  #service .services .service {
    width: 90%;
    min-height: 300px;
  }

  /* PROOF SECTION */
  #proof .proofContainer {
    width: 100%;
    display: grid;
    grid-gap: 20px 0px;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    /* background-color: #333333; */
    padding-top: 10%;
    padding-bottom: 10%;
  }
  #proof .proofContainer .ImgContainer {
    display: flex;
    justify-content: center;
    align-items: end;
    padding: 10px;
    width: 30vw;
    height: 60vh;
    object-fit: contain;
  }
  #proof .proofContainer .ImgContainer img {
    width: 380px;
    height: 500px;
  }
  #proof .proofContainer .textContainer {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 60vw;
    text-align: start;
  }
  #proof .proofContainer .textContainer .header {
    display: flex;
    align-items: flex-start;
    justify-content: start;
  }
  #proof .proofContainer .textContainer .points {
    display: grid;
    grid-gap: 20px 0px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 2fr;
  }
  #proof .proofContainer .textContainer .header {
    margin-top: 2%;
    margin-bottom: 2%;
    color: var(--text-color);
    font-size: var(--header-size);
  }
  #proof .proofContainer .textContainer .subText {
    margin-top: 2%;
    margin-bottom: 5%;
    color: var(--subtext-color);
    font-size: var(--small-size);
    font-family: var(--primary-font);
  }

  /* quote section */
  #quote .quoteContainer .form {
    width: 50%;
    min-height: 50vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-self: center;
    margin-bottom: 10%;
    padding: 10px;
    border-radius: 8px;
  }
  #quote .quoteContainer .form .input {
    padding: 10px;
  }
  #quote .quoteContainer .form textarea {
    grid-column: 1 / -1; /* Span across both columns */
    width: 100%;
  }
  #quote .quoteContainer .form button {
    grid-column: 1 / -1;
  }
  #quote .quoteContainer .form #quoteError {
    grid-column: span 2;
  }
  /* TESTIMONY SECTION */

  #testimony .testimonyContainer .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  #testimony .testimonyContainer .content .textContainer {
    width: 50%;
  }
  #testimony .testimonyContainer .content .ImgContainer {
    width: 50%;
    height: 60vh;
  }
  #testimony .testimonyContainer .content .ImgContainer img {
    width: 500px;
    height: 500px;
  }

  /* CONTACT SECTION */

  #contact .contactContainer .content {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  #contact .contactContainer .form {
    width: 500px;
    height: 100%;
    min-height: 400px;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* FOOTER SECTION */

  #footer .footerContainer .links {
    width: 98%;
    min-height: 30vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    place-self: center;
    margin-top: 5%;
  }
  #footer .footerContainer .links .companyInfo {
    margin-right: 30%;
    width: 100%;
    grid-column: span 2;
  }
  #footer .footerContainer .links .companyInfo .logo {
    margin-bottom: 4%;
  }
  #footer .footerContainer .links .companyInfo .logo .header {
    width: 30%;
  }
  #footer .footerContainer .links .otherlinks {
    display: flex;
    align-items: end;
  }
  #footer .footerContainer .links .quicklinks .link,
  #footer .footerContainer .links .otherlinks .link {
    display: flex;
    align-items: end;
    width: 80%;
  }
  #footer .footerContainer .links .quicklinks .subHeader {
    display: flex;
    align-items: start;
    width: 100%;
  }
  #footer .footerContainer .links .otherlinks .subHeader {
    width: 80%;
  }
  #footer .footerContainer .links .socials {
    float: right;
    width: 100%;
  }

  /* ABOUT PAGE */

  #staff .staffContainer .staffs {
    grid-template-columns: repeat(3, 1fr); /* Two columns layout */
  }
}