@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  .designs .circles .circle .design-name-details {opacity: 1;}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .width{width: 100%; padding: 0 30px;}
  .home .pics {opacity: 1; left: auto; right: 5%; --wh: 60vw;}
  .home .title {font-size: 6.75rem;}
  .nav {padding: 0.9375rem;}
  .nav .left-logo {width: 100%; position: relative; left: auto; --wh: 20vw;}
  .nav .back-btn {position: relative; left: auto; bottom: auto; margin-left: auto;}
  .next-project .project-title img {width: 100px;}
  .main-links .link a, .back-btn {font-size: 3.25rem;}
  .home .logo, .home .width:hover + .logo {left: 15px; top: 15px; transform: none; --wh: 25vw; width: var(--wh); height: var(--wh); filter: brightness(0) invert(1);}
  #mouse-scroll {display: none;}
  .page .left-logo {--wh: 25vw; width: var(--wh); height: var(--wh);}
  .page.about-page {position: relative;}
  .about-page .nav .left-logo {top: 0;}
  .about-page .about-block {margin-top: 1rem;}
  .about-page .content-area {padding: 0 1rem;}
  .about-page .content-area h1 {margin-left: 150px;}
  .about-block .text-block {margin: 1.5rem 0 2rem 0;}
  .about-block .pic-wrapper {margin: 2rem 0 !important; padding-right: 0;}
  .about-block .content-block {width: 100% !important; padding-right: 0; margin-bottom: 1rem;}
  .next-project {display: flex !important; margin: 0 -16px; width: calc(100% + 32px); height: 80vh;}
  .next-project:before {display: none;}
  .designs:before {left: 5%; width: 170px; height: 170px; background-size: cover; bottom: 15%;}
  .designs.target .title {left: auto; top: 50%; transform: translateY(-50%);}
  .designs.target .circles {left: auto; transform: none; right: 2rem;}
  .designs .circles {width: auto; padding: 25vw 0;}
  .designs .circles .circle {flex-direction: column; width: 50vw; margin-bottom: 1rem;}
  .designs .circles .circle a {--wh: 50vw; margin-bottom: 0.875rem;}
  .designs .circles .circle .design-name-details {width: auto; margin-left: 0 !important; opacity: 1; text-align: center;}
  .designs .circles .circle .design-name-details h2 {font-size: 1.5rem;}
  .d-page {position: relative; min-height: auto;}
  .design-left, .design-details {width: 100%; height: auto !important; transition: none; padding: 0;}
  .design-left {padding: 10vw 5vw; display: flex !important; height: 80vh !important;}
  .design-left .dot-pattern {right: -30px;}
  .design-details .content-area {padding: 2rem 1rem 0 1rem;}
  .design-details .pic.square, .pic-wrapper .img-fluid {width: 100%;}
  .design-details .pic-wrapper {padding-right: 0 !important; width: 100%;}
  .design-details .pic-wrapper .pic, .design-details .pic-wrapper .pic1 {margin-bottom: 2.5rem;}
  .content-block {width: 100%; margin-bottom: 2rem; padding: 0;}
  .content-block p {margin-bottom: 2rem !important;}
  .pr {padding-right: 0;}
}

@media only screen and (min-width:320px) and (max-width:767px){
  .width{width: 100%; padding: 0 15px;}
  .home .logo, .home .width:hover + .logo {left: 15px; top: 15px; transform: none; --wh: 35vw; width: var(--wh); height: var(--wh); filter: brightness(0) invert(1);}
  .home .pics {opacity: 1; left: auto; right: 5%; --wh: 60vw;}
  .cursor, .cursor2, .scroll, #mouse-scroll {display: none;}
  .dot-pattern {width: 200px;}
  .nav {padding: 0.9375rem;}
  .nav .left-logo {width: 100%; position: relative; left: auto; --wh: 20vw;}
  .nav .back-btn {position: relative; left: auto; bottom: auto; margin-left: auto;}
  .page .left-logo {--wh: 35vw; width: var(--wh); height: var(--wh);}
  .page:not(.designs) .left-logo {top: 0;}
  .page.about-page {position: relative;}
  .about-page .about-block {margin-top: 1rem;}
  .about-page .content-area {padding: 0 1rem;}
  .about-block .text-block {margin: 2rem 0 2.5rem 0;}
  .about-block .pic-wrapper {margin: 2rem 0 2.5rem !important; padding-right: 0;}
  .about-block .content-block {width: 100% !important; padding-right: 0; margin-bottom: 1rem;}
  .next-project {display: flex !important; margin: 0 -16px; width: calc(100% + 32px); height: 60vh;}
  .next-project:before {display: none;}
  .next-project .project-title img {width: 60px;}
  .designs:before {left: 5%; width: 120px; height: 120px; background-size: cover; bottom: 15%;}
  .designs.target .title {left: auto; top: 50%; transform: translateY(-50%);}
  .designs.target .circles {left: auto; transform: none; right: 1rem;}
  .designs .circles {width: auto; padding: 40vw 0;}
  .designs .circles .circle {flex-direction: column; width: 50vw; margin-bottom: 1rem;}
  .designs .circles .circle a {--wh: 50vw; margin-bottom: 0.875rem;}
  .designs .circles .circle .design-name-details {width: auto; margin-left: 0 !important; opacity: 1; text-align: center;}
  .d-page {position: relative; min-height: auto;}
  .design-left, .design-details {width: 100%; height: auto !important; transition: none; padding: 0;}
  .design-left .design-title {padding: 4rem 0 4rem 1.25rem;}
  /* .design-left {padding: 10vw 5vw; display: flex !important; height: 80vh !important;} */
  .design-left .dot-pattern {right: -30px; display: none;}
  .design-details .content-area {padding: 2rem 1rem 0 1rem;}
  .design-details .pic.square, .pic-wrapper .img-fluid {width: 100%;}
  .design-details .pic-wrapper {padding-right: 0 !important; width: 100%;}
  .design-details .pic-wrapper .pic, .design-details .pic-wrapper .pic1 {margin-bottom: 2.5rem;}
  .content-block {width: 100%; margin-bottom: 2rem; padding: 0;}
  .content-block p {margin-bottom: 2rem !important;}
  .pr {padding-right: 0;}
  .max-height-636 {max-height: fit-content;}
  .rectangle-pic {max-width: 100%;}
}