/*===== STYLE RESPONSIVE MOBILE  =====*/
@media (max-width: 1300px) {
    .home .max-width {
      margin-left: 0px;
    }
  }
  
  @media (max-width: 1104px) {
      .about .about-content .left img {
          height: 350px;
          width: 350px;
          margin-bottom: 200px;
      }
  }
  
  @media (max-width: 991px) {
      .max-width {
          padding: 0 50px;
      }
  }
  
  @media (max-width: 947px) {
      .menu-btn {
          display: block;
          z-index: 999;
      }
  
      .menu-btn i.active:before {
          content: "\f00d";
  
      }
  
      .nav-bar .menu {
          position: fixed;
          height: 100vh;
          width: 100%;
          left: -100%;
          top: 0;
          background: var(--color-black-clean);
          text-align: center;
          padding-top: 80px;
          transition: all 0.3s ease;
      }
  
      .nav-bar .menu.active {
          left: 0;
  
      }
  
      .nav-bar .menu li {
          display: block;
  
      }
  
      .nav-bar .menu li a {
          display: inline-block;
          margin: 20px 0;
          font-size: 25px;
      }
  
      .home .home-content .text2 {
          font-size: 60px;
      }
  
      .home .home-content .text3 {
          font-size: 35px;
      }
  
      .home .home-content a {
          font-size: 23px;
          padding: 10px 30px;
      }
  
      .max-width {
          max-width: 800px;
  
      }
  
      .about .about-content .column {
          width: 100%;
  
      }
  
      .about .about-content .left {
          display: flex;
          justify-content: center;
          margin: 0 auto 60px;
      }
  
      .about .about-content .right {
          flex: 100%;
          margin-bottom: 100px;
  
      }
  
      .services .serv-content .card {
          width: calc(50% - 15px);
          margin-bottom: 20px;
          z-index: 50;
          text-align: center;
  
      }
  
      .services .serv-content .card p {
          width: 100%;
      }
  
      .skills .skills-content .column,
      .contact .contact-content .column {
          width: 100%;
          margin-bottom: 35px;
      }
  }
  
  
  @media (max-width: 690px) {
      .max-width {
          padding: 0 23px;
      }
  
      .home .home-content .text2 {
          font-size: 50px;
      }
  
      .home .home-content .text3 {
          font-size: 30px;
      }
  
      .services .serv-content .card {
          width: 100%;
      }
  
      .services .serv-content .card .box p {
          max-width: 100%;
      }
  }
  
  @media (max-width: 500px) {
  
      .home .home-content .text2 {
          font-size: 50px;
      }
  
      .home .home-content .text3 {
          font-size: 26px;
      }
  
      .services .serv-content .card .box p {
          max-width: 100%;
      }
  }
  
  
  @media screen and (max-width: 1050px) {
      .home .home-icon {
          display: none;
      }
  }
  
  
  @media screen and (min-width: 200px) {
      .portfolio-img {
          width: 200px;
      }
  
      .portfolio-content {
          align-items: center;
      }
  
      .swiper-portfolio-icon {
          font-size: 3.5rem;
      }
      
      .swiper-button-prev {
          left: -3.5rem;
      }
      
      .swiper-button-next {
          right: -3.5rem;
      }
      
      .swiper-container-horizontal {
          bottom: -3.5rem;
      }
      
  }
  
  @media screen and (max-width: 350px) {
      
      .portfolio-container {
          margin-left: 1rem;
          margin-right: 1rem;
      }
  }
  
  
  @media screen and (min-width: 420px) {
      
      .portfolio-container {
          margin-left: auto;
          margin-right: auto;
      }
  
  }
  
  @media screen and (min-width: 568px) {
  
      .portfolio-content {
          grid-template-columns: repeat(2, 1fr);
      }
  }