/* ========================================================================== */
/* BELOW 1344px (Smaller desktops) */
/* ========================================================================== */

@media (max-width: 84em) {
}

/* ========================================================================== */
/* BELOW 1200px (Landscape Tablets) */
/* ========================================================================== */

@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

/* ========================================================================== */
/* BELOW 944px (Tablets) */
/* ========================================================================== */

@media (max-width: 944px) {
  .container {
    max-width: 720px;
  }
  .body-bg {
    display: none;
  }
  header {
    position: relative;
    top: auto;
  }
  .grid-col-2 {
    grid-template-columns: 1fr;
  }
  .main-content {
    padding: 40px 20px;
  }
  .box-container {
    grid-template-columns: 1fr;
  }
  .box-content ul li {
    border-bottom: none;
  }
  .box-content li span {
    border-right: none;
  }
  .box-content ul li {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .skill-container {
    flex-direction: column;
    align-items: stretch;
  }
  .skill-label {
    transform: scale(1);
    writing-mode: unset;
    direction: ltr !important;
    margin-top: unset;
    height: auto;
    box-shadow: var(--outer-shadow);
  }

  /* CONTACT US */

  .contact-content {
    box-shadow: none;
  }

  .contact-content .contact-text {
    box-shadow: none;
  }

  .contact-content .contact-text {
    padding: 0;
  }

  .contact-container .location-icon {
    transform: unset;
    position: unset;
  }

  .location-icon {
    margin: 0 auto;
  }

  .contact-item .contact-icon {
    margin-bottom: 10px;
  }

  .contact-item .contact-icon,
  .contact-item span {
    transform: unset;
    /* margin-bottom:px; */
  }

  /* PROTFILIO  */

  .protfillio-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* SINGLE PORTFILIO */

  .portifio-content {
    padding: unset;
  }

  blockquote::before {
    display: none;
  }
  blockquote p,
  blockquote cite {
    margin-left: auto;
  }

  /* SWIPER MODAL */

  .img-modal {
    padding: 20px;
  }

  .img-modal_close {
      top: 20px;
      right: 20px;
  }

  .swiper-btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    top: auto;
    transform: none;
  }

  .swiper-btn.swiper-btn-next {
      left: 90px;
      right: unset;
  }
}

/* ========================================================================== */
/* BELOW 704px (Smaller tablets) */
/* ========================================================================== */

@media (max-width: 704px) {
  .container {
    max-width: 540px;
  }
  .main-btn {
    flex-direction: column;
    justify-content: center;
    gap: 15px;
  }
  .services-container {
    grid-template-columns: 1fr;
  }
  .about-text p {
    column-count: 1;
  }

  /* CONTACT US */

  .contact-list {
    flex-direction: column;
    align-items: stretch;
  }

  .form-container {
    flex-direction: column;
    gap: unset;
  }

  .contact-text p {
    width: 100%;
  }

  .certi-container {
    grid-template-columns: 1fr;
  }

  .base-certi {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
  }

  /* MODAL IMG */

  .img-slider img {
    width: 100%;
  }
  
}

/* ========================================================================== */
/* BELOW 544px (Phones) */
/* ========================================================================== */
@media (max-width: 34em) {
  .protfillio-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ========================================================================== */
/* BELOW 400px (Phones) */
/* ========================================================================== */
@media (max-width: 25em) {
}
