@import "../styles.css";

/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 400px) {
    .container {
      margin-left: var(--mb-1);
      margin-right: var(--mb-1);
    }
    .nav__menu {
      padding: 2rem .25rem 4rem;
    }
    .nav__list {
      column-gap: 0;
    }
    .home__content {
      grid-template-columns: .25fr 3fr;
    }
    .home__blob {
      width: 180px;
    }
    .skills__title {
      font-size: var(--normal-font-size);
    }

    .qualification__tabs{
      display: flex;
      flex-direction: column;
      margin-right: 1rem;
    }

    .qualification__data {
      gap: .2rem;
    }
    .project__img {
      width: 300px;
    }
  }
  /* For medium devices */
  @media screen and (min-width: 568px) {
    .home__content {
      grid-template-columns: max-content 1fr 1fr;
    }
    .home__data {
      grid-column: initial;
    }
    .home__img {
      order: 1;
      justify-self: right;
    }
    .about__container,
    .skills__container,
    .portfolio__content,
    .project__container,
    .contact__container,
    .footer__container {
      grid-template-columns: repeat(2, 1fr);
    }
    .qualification__sections {
      display: grid;
      grid-template-columns: .6fr;
      justify-content: center;
    }
  }
  
  @media screen and (min-width: 768px) {
    .container {
      margin-left: auto;
      margin-right: auto;
    }
    body {
      margin: 0;
    }
    .section {
      padding: 6rem 0 2rem;
    }
    .section__subtitle {
      margin-bottom: 4rem;
    }
    .header {
      top: 0;
      bottom: initial;
    }
    .header,
    .main,
    .footer__container {
      padding: 0 1rem;
    }
    .nav {
      height: calc(var(--header-height) + 1.5rem);
      column-gap: 1rem;
    }
    .nav__icon, .nav__close, .nav__toggle {
      display: none;
    }
    .nav__list {
      display: flex;
      column-gap: 2rem;
    }
    .nav__menu {
      margin-left: auto;
    }
    .change-theme {
      margin: 0;
    }
    .home__container {
      row-gap: 5rem;
    }
    .home__content {
      padding-top: 5.5rem;
      column-gap: 2rem;
    }
    .home__blob {
      width: 270px;
    }
    .home__scroll {
      display: block;
    }
    .home__scroll-button {
      margin-left: 3rem;
    }
    .about__container {
      column-gap: 5rem;
    }
    .about__img {
      width: 350px;
    }
    .about__description {
      text-align: initial;
    }
    .about__info {
      justify-content: space-between;
    }
    .about__buttons {
      justify-content: initial;
    }
    .qualification__tabs {
      justify-content: center;
    }
    .qualification__button {
      margin: 0 var(--mb-1);
    }
    .qualification__sections {
      grid-template-columns: .5fr;
    }
    .portfolio__img {
      width: 320px;
    }
    .portfolio__content {
      align-items: center;
    }
    .project {
      text-align: initial;
    }
    .project__bg {
      background: none;
    }
    .project__container {
      background-color: var(--first-color-second);
      border-radius: 1rem;
      padding: 2rem 2.5rem 0;
      grid-template-columns: 1fr max-content;
      column-gap: 3rem;
    }
    .project__data {
      padding-top: .8rem;
    }
    .footer__container {
      grid-template-columns: repeat(3, 1fr);
    }
    .footer__bg {
      padding: 3rem 0 3.5rem;
    }
    .footer__links {
      flex-direction: row;
      column-gap: 2rem;
    }
    .footer__socials {
      justify-self: flex-end;
    }
    .footer__copy {
      margin-top: 1rem;
    }
  }
  
  /* For large devices */
  @media screen and (min-width: 1024px) {
    .header,
    .main,
    .footer__container {
      padding: 0;
    }
    .home__blob {
      width: 320px;
    }
    .home__social {
      transform: translateX(-6rem);
    }
    .services__container {
      grid-template-columns: repeat(3, 238px);
    }
    .portfolio__content {
      column-gap: 5rem;
    }
    .swiper-portfolio-icon {
      font-size: 3.5rem;
    }
    .swiper-button-prev {
      left: -3.5rem;
    }
    .swiper-button-next {
      right: -3.5rem;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets {
      bottom: -4.5rem;
    }
  }