/* Container */

.container {
  margin: 0 auto;
  max-width: 100%;
  width: 140rem;
}

@media screen and (max-width: 117em) {
  .container {
    width: 120rem;
  }
}

@media screen and (max-width: 101em) {
  .container {
    width: 96rem;
  }
}

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
  html {
    font-size: 56.25%;
  }

  .menu-box {
    grid-template-columns: 1fr 1fr !important;
  }
}

/**************************/
/* BELOW 1277px */
/**************************/
@media (max-width: 79em) {
  .arrow-svg {
    width: 5rem !important;
    height: 5rem !important;
  }

  .menu-btn {
    margin-right: 1rem;
  }

  .slider-arrow {
    position: absolute;
    top: 27% !important;
  }

  .slider-arrow.left {
    left: 5% !important;
  }

  .slider-arrow.right {
    left: 10% !important;
  }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  html {
    /* 8px / 16px  */
    font-size: 52%;
  }

  image.image.img-about-me {
    width: 30% !important;
  }

  .about-me {
    padding: 2.4rem !important;
  }

  .skills-description,
  .description3,
  .description4 {
    padding: 0 3.4rem !important;
  }

  .skills-row {
    gap: 1rem !important;
  }

  .four {
    padding: 2.4rem 2.4rem !important;
  }
}
/**************************/
/* BELOW 1028px (Landscape Tablets) */
/**************************/

@media (max-width: 64.25em) {
  html {
    /* 9px / 16px  */
    font-size: 50%;
  }

  /* .content {
    opacity: 1 !important;
  }

  .preloader {
    display: none !important;
  }

  .spinner {
    display: none !important;
  } */

  .full-project.mobile-project {
    display: flex;
  }

  .box.slider.mobile-project {
    display: flex;
  }

  .arrow {
    display: none;
  }

  .full-project.mobile-hidden {
    display: none;
  }

  .box.slider.mobile-hidden {
    display: none;
  }

  .box .slider {
    /* padding: 0 !important; */
    background-color: rgba(21, 21, 21, 0.06) !important;
    padding: 0.6rem 0 !important;
  }

  .main {
    padding-left: 0;
  }

  .menu-box {
    grid-template-columns: 1fr !important;
  }

  .slider-text {
    font-size: 3.6rem;
    margin-left: 0;
  }

  .hero-text {
    font-size: 1.8rem;
    margin-left: 0;
  }

  .mobile-nav {
    display: block;
  }

  .buttons-box {
    top: 0.8rem;
    right: 0.5rem;
  }

  .language-selector {
    position: absolute;
    left: 1.2rem;
    top: 1.1rem;
  }

  .btn-theme {
    top: 1.2rem;
    /* right: 1.2rem; */
  }

  .main {
    margin-left: 0;
  }

  .header {
    display: none;
  }

  .about-me {
    display: flex;
    font-size: 2rem;
    flex-direction: column;
    /* grid-template-columns: 1fr; */
    justify-content: center;
    align-items: center;
  }

  .image.img-about-me {
    width: 50%;
  }

  .skills-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
  }

  .contact-content {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    gap: 15rem;
    margin-top: 15rem;
  }

  .contact-information {
    display: grid;
    justify-content: center;
    grid-row-start: 2;
  }

  form {
    display: grid;
    justify-content: center;
  }

  .project-box {
    gap: 2rem !important;
  }

  .full-project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .project-description {
    font-size: 1.8rem;
  }

  .gallery {
    display: flex;
    justify-content: center;
    width: 100% !important;
    height: 30rem !important;
  }

  .gallery video {
    width: 50rem !important;
    height: 30rem !important;
  }

  .visit-link {
    width: 50rem !important;
    bottom: 0 !important;
    color: var(--text-color) !important;
    opacity: 1 !important;
  }

  .project-text-field {
    position: absolute;
    bottom: 3.4rem;
    width: 50rem;
    height: 24rem;
    padding: 0 10rem 0 10rem;
  }

  .arrow {
    opacity: 1 !important;
  }

  .project-tech-stack {
    display: none !important;
  }

  .box .slider {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .three {
    display: grid;
    justify-content: center;
  }

  .menu-btn-container {
    display: flex;
    justify-content: center;
  }

  .skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .description3 {
    padding: 0 10rem 0 10rem;
  }

  .slider-arrow {
    display: none;
  }
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
  .full-project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .visible {
    display: none !important;
    opacity: 0 !important;
  }

  .mob-menu-close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem !important;
    height: 4.5rem !important;
    color: #fff;
    border-radius: 8rem;
    box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.125);
    border: none;
    background-color: rgb(21, 21, 21, 0.9);
    display: block !important;
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    cursor: pointer;
    z-index: 9999999999999;
  }

  .project-modal-window {
    width: 50rem !important;
  }

  .mob-menu-close-btn {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
  }

  .info-modal-tech-stack {
    bottom: -3.4rem !important;
  }

  .menu-btn-container {
    display: flex;
    justify-content: center;
  }

  .description3 {
    padding: 0 24rem 0 24rem;
  }

  .menu-box {
    display: grid;
    /* flex-direction: column; */
    grid-template-columns: 1fr !important;
  }

  .box .slider {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  .slider-text {
    font-size: 3.2rem;
  }

  .slider-text,
  .hero-text {
    padding: 0 1.2rem;
  }

  .slider-text {
    font-size: 2.7rem;
  }

  .hero-text {
    font-size: 1.6rem;
  }

  .menu-overlay {
    overflow: scroll !important;
  }

  /* .menu-gallery {
    padding: 0 1rem !important;
  } */

  /* .menu-gallery video {
    width: 90% !important;
  } */

  .hero-text {
    font-size: 1.6rem;
  }

  .menu-btn-container {
    display: flex;
    justify-content: center;
  }

  .menu-box {
    padding: 0;
    display: grid;
    /* flex-direction: column; */
    grid-template-columns: 1fr !important;
  }

  .description3 {
    padding: 0 30rem 0 30rem !important;
  }

  .project-description {
    font-size: 1.4rem !important;
    padding: 0 2.7rem;
  }

  .project-modal-window {
    width: 44rem !important;
  }

  .project-info-btn {
    right: 2.4rem !important;
  }

  .gallery {
    width: 38rem !important;
  }
  .gallery video {
    width: 38rem !important;
  }

  .full-project {
    width: 38rem !important;
  }

  .visit-link {
    width: 38rem !important;
  }

  .skills-item img {
    width: 4.5rem;
    height: 4.5rem;
  }
  .skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .slider-arrow {
    display: none;
  }

  .form {
    align-items: center;
  }

  .form-input input {
    width: 95%;
  }

  .form-message textarea {
    width: 95%;
  }

  .image.img-about-me {
    width: 80%;
  }

  .menu-box {
    padding: 6rem 5rem 6rem 6rem;
  }

  .form {
    display: grid;
    justify-content: center;
    align-items: center;
  }

  .btn-send-message {
    width: 30rem;
  }

  /* .flags {
    left: 0.5rem !important;
  } */
}