/* - SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

- FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 
- COLORs



-FONT Weights:
default:400
medium:500
semi bold:700
bold:800
*/
:root {
  --color-brand--1: #58342c;
  --color-brand--2: #b19470;
  --color-brand--3: #f8fae5;
  --color-brand--4: #25413c;
  --font-weight-1: 400;
  --font-weight-2: 500;
  --font-weight-3: 700;
  --font-weight-4: 800;
}
/* BELOW 1500 px laptop*/
@media (max-width: 93.75em) {
  html {
    font-size: 56.25%;
  }
  .collage {
    transform: scale(0.2);
  }
  .hero-section {
    height: 100vh;
    padding: 0rem 4.8rem 4.8rem 4.8rem;
  }
  .about-me p {
    font-size: 3.2rem;
  }
}

/*landscape tablet 1200px*/
@media (max-width: 75em) {
  html {
    font-size: 50%;
  }
  .projects-section {
    padding: 9.6rem 4.8rem;
  }
  .section-header {
    padding-top: 2.4rem;
  }
  .collage {
    transform: scale(0.17);
  }
  .section-header {
    padding-bottom: 1.6rem;
  }
  .Nakul img {
    transform: scale(0.99);
  }
  .about-me p {
    font-size: 3.2rem;
  }
}
/*tablet tablet 944px*/
@media (max-width: 59em) {
  .hero-section {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 3fr;
    justify-items: center;
    align-items: center;
  }
  .hero-description {
    text-align: center;
    padding: 3.2rem;
  }

  .collage {
    transform: scale(0.15);
  }
  .collage-landscape {
    row-gap: 4.8rem;
  }

  .section-header {
    text-align: center;
    margin-bottom: 3.2rem;
  }
  .projects-section {
    padding: 9.6rem 3.2rem 6.4rem 3.2rem;
  }
  .omnifood-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2.4rem 3.2rem;
    height: auto;
    margin-bottom: 30vh;
  }
  .omnifood-desc,
  .mapty-desc {
    width: 70vw;
    height: auto;
    font-size: 3.2rem;
    padding-bottom: 2.4rem;
  }
  .omnifood-carousel {
    position: absolute;
    top: 100%;
    left: 11%;
  }
  .mapty-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0rem 3.2rem;
    height: auto;
    margin-bottom: 30vh;
  }
  .swiper {
    width: 90vw;
  }

  .mapty-carousel {
    position: absolute;
    top: 100%;
    left: 11%;
  }
  .about {
    padding: 1.6rem 2.4rem;
  }
  .about-me h3 {
    font-size: 2.4rem;
  }
  .about-me {
    padding-bottom: 1.6rem;
  }
  .about-me p {
    font-size: 2rem;
  }
  /* MOBILE NAV*/
  .mobile-nav {
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* position: absolute; */
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    transform: translateX(100%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* position: fixed; */
    /* overflow: hidden; */

    /************/
    /************/
    /************/
  }
  .nav-open {
    transform: translateX(0%);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  .name {
    display: none;
  }
  .nav {
    flex-direction: column;
    height: 40vh;
    width: 100vw;
    justify-content: space-around;
    align-items: center;
  }
  .name,
  .nav a {
    text-decoration: none;
    padding: 2rem 4rem;
    font-size: 3.2rem;
    font-weight: var(--font-weight-3);
    color: var(--color-brand--4);
  }
  .progress-bar {
    position: fixed;
    top: 0;
    height: 0.4rem;
    z-index: 80;
  }
  #contact {
    color: var(--color-brand--3);
  }
  .btn-mobile-nav {
    z-index: 100;
    display: block;
    position: fixed;
    font-weight: var(--font-weight-3);
    top: 3vh;
    right: 3vh;
    color: var(--color-brand--2);
  }
}
/*832 px*/
@media (max-width: 52em) {
  .collage {
    transform: scale(0.15);
  }
  .projects-section {
    padding: 9.6rem 2.4rem;
  }
  .mapty-section,
  .omnifood-section {
    padding: 0 2.4rem;
  }

  .Nakul img {
    /* transform: scale(0.95); */
    /* transform: scaleY(1.05); */
    height: 80vh;
    object-fit: cover;
  }
  .mapty-section,
  .omnifood-section {
    font-size: 3.2rem;
  }
  .mapty-desc .about-me h3 {
    padding-bottom: 1.6rem;
  }
  .about-me p {
    font-size: 2.8rem;
  }
  .skills h2 {
    padding: 1.6rem 0;
  }
  .skill-icon {
    font-size: 3.2rem;
  }
}
/* smaller tablet*/
@media (max-width: 46.8em) {
  .skills-section {
    padding: 9.6rem 2.4rem;
  }
  .container {
    width: 95vw;
    height: auto;
  }
  .slider {
    width: 100vw;
  }
  .Nakul img {
    scale: (0.8);
  }
  .hero-section {
    padding-top: 3.6rem;
  }
  .collage {
    transform: scale(0.12);
  }
  .projects-section {
    padding: 9.6rem 1.6rem;
  }
  .mapty-section,
  .omnifood-section {
    padding: 0 1.6rem;
  }
  .mapty-carousel,
  .omnifood-carousel {
    width: 80vw;
    left: 8%;
  }
}
/*phones*/
@media (max-width: 46.8em) {
  .container {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 90vw;
  }
  .Nakul {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .Nakul img {
    transform: scale(0.7);
    object-fit: cover;
  }
  .mapty-carousel,
  .omnifood-carousel {
    width: 95vw;
    left: 2%;
  }
}
/*phones 582 px*/
@media (max-width: 36.4em) {
  .Nakul img {
    transform: scale(0.9);
    /* width: fit-content; */
  }
  .Nakul {
    display: none;
  }
  .mapty-carousel,
  .omnifood-carousel {
    width: 100vw;
    left: 0.1%;
  }
  .about-me p {
    font-size: 2rem;
  }
  .footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6.4rem 2.4rem 0rem 2.4rem;
  }
  .footer-content {
    padding: 1.6rem 0rem;
  }
  .footer-heading {
    padding-bottom: 1.6rem;
  }
  .social-link {
    padding: 0.2rem 0;
  }
}