@media screen and (max-width: 1000px) {
   p {
       font-size: 0.9rem;
       line-height: 1.8rem;
   }

   .grid-3 {
       gap: 1rem;
   }

   .skills-right ul li {
       font-size: 0.9rem;
   }
}

@media  screen and (max-width: 825px) {
   /* Burger */
   .burger {
       display: block;
       cursor: pointer;
   }

   .toggle-burger .line-1 {
       transform: rotate(-45deg) translate(-5px, 7px);
   }

   .toggle-burger .line-2 {
       opacity: 0;
   }

   .toggle-burger .line-3 {
       transform: rotate(45deg) translate(-5px, -7px);
   }

   /* Navigation */
   nav {
       position: fixed;
       width: 50%;
       right: 0;
       top: 0;
       height: 100vh;
       flex-direction: column;
       background: var(--primaryBackgroundColor);
       border-left: 1px solid var(--borderColor);
       z-index: 9;
       transform: translateX(100%);
       transition: 0.2s ease-in-out;
   }

   nav ul {
       height: 100vh;
       align-items: center;
       flex-direction: column;
       justify-content: center;
   }

   .nav-active {
       transform: translateX(0);
   }

   /* End of Navigation */

   :root {
       --sectionPadding: 4rem 0;
   }

   /* Titles */
   .section-title {
       font-size: 1.6rem;
       margin: 0.6rem 0 2.5rem;
   }

   .pre-title {
       font-size: 0.8rem;
   }

   /* Hero section */
   #hero {
       grid-template-columns: 1fr;
       height: fit-content;
   }

   .hero-right {
       order: -1;
   }

   .hero-right img {
       width: 70%;
   }

   .hero-left {
       text-align: center;
       padding-bottom: 5rem;
   }

   .hero-left .pre-title {
       margin: 0 auto;
   }

   .hero-name {
       font-size: 2.3rem;
       margin-bottom: 0.5rem;
   }

   /* skills section */
   .skills-grid {
       gap: 1rem;
   }

 /* Footer */
 footer {
   padding: 2rem 0;
 }
}

/* Mobile Size */
@media screen and (max-width: 640px) {
   /* Titles */
   .section-title {
       font-size: 1.3rem;
   }

   .pre-title {
       font-size: 0.7rem;
}
}