/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  html{
    font-size: 11px;
  }

}

@media (min-width: 1800px) {

  html{
    font-size: 12px;
  }

}

@media (min-width: 2200px) {

  html{
    font-size: 13px;
  }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

  html{
    font-size: 10px;
  }

  .container{
    padding: 0 3rem;
  }


  /* -----------------
     HEADER
  ----------------- */

  .nav{
    display: none;
  }

  .menu-toggle,
  .mobile-home{
    display: block;
  }

  .navbar-inner{
    justify-content: space-between;
  }

  .navbar .navbar-inner .logo{
    width: 16rem;
    padding: 1.5rem 3rem;
  }

  .header.scrolled .navbar .navbar-inner .logo{
    width: 14rem;
    padding: 1rem 3rem;
  }


  /* -----------------
     HERO
  ----------------- */

  .hero-content,
  .blend{
    padding: 0 3rem;
  }

  .hero-content{
    height: 16rem;
  }

  .blend{
    height: 16rem;
  }

  .hero-content h1{
    font-size: 2.4rem;
    line-height: 3rem;
    padding: 3rem;
  }


  /* -----------------
     INTERIOR HERO
  ----------------- */

  .interior-hero-content{
    padding: 4rem 3rem;
  }

  .interior-hero-content h1{
    font-size: 2.4rem;
    line-height: 3rem;
  }


  /* -----------------
     CONTACT HERO
  ----------------- */

  .contact-hero-content{
    width: 100%;
    padding: 4rem 3rem;
    top: 16rem;
  }


  /* -----------------
     ABOUT
  ----------------- */

  .about .wrap{
    padding: 0;
  }

  .split-section{
    flex-direction: column;
  }

  .left-box{
    padding: 3rem;
  }

  .right-box{
    width: 100%;
  }

  .right-box img{
    aspect-ratio: 16 / 9;
  }


  /* -----------------
     BENEFITS
  ----------------- */

  .benefits-container{
    flex-wrap: wrap;
    padding: 4rem 3rem;
  }

  .benefit{
    width: calc(50% - 2rem);
  }


  /* -----------------
     SOLUTIONS
  ----------------- */

  .solutions{
    padding: 0 3rem;
  }

  .solutions .wrap{
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }

  .solutions .card{
    aspect-ratio: 1 / 1;
  }


  /* -----------------
     EXPERIENCIA
  ----------------- */

  .experiencia{
    padding: 8rem 0;
  }

  .experiencia .content{
    flex-direction: column;
    align-items: flex-start;
  }

  .experiencia .info{
    width: 100%;
  }

  .map{
    position: relative;

    width: 100%;
    height: 50rem;

    right: auto;
    top: auto;
    bottom: auto;

    margin-top: 4rem;
  }


  /* -----------------
     ABOUT CONTENT
  ----------------- */

  .about-content{
    flex-direction: column;
    padding: 4rem 3rem;
    gap: 4rem;
  }


  /* -----------------
     SOLUTIONS CONTENT
  ----------------- */

  .solutions-content{
    flex-direction: column;
    align-items: flex-start;

    gap: 4rem;

    padding: 4rem 3rem;
    padding-top: 16rem;
  }


  /* -----------------
     EXPERIENCIA CONTENT
  ----------------- */

  .experiencia-content{
    flex-direction: column;
    align-items: flex-start;

    gap: 4rem;

    padding: 4rem 3rem;
    padding-top: 16rem;
  }

  .experiencia-left{
    width: 100%;
  }


  /* -----------------
     PORTAFOLIO
  ----------------- */

  .portafolio{
    padding: 3rem;
    padding-top: 0;
  }

  .portafolio .wrap{
    grid-template-columns: 1fr;
  }


  /* -----------------
     FOOTER
  ----------------- */

  .footer-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
  }

  .footer-left{
    padding-right: 0;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  html{
    font-size: 10px;
  }

  .container{
    padding: 0 2rem;
  }


  /* -----------------
     HEADER
  ----------------- */

  .navbar .navbar-inner .logo {
    width: 13rem;
    padding: 1rem 2rem;
  }

  .header.scrolled .navbar .navbar-inner .logo {
    width: 12rem;
    padding: 1rem 2rem;
  }


  /* -----------------
     HERO
  ----------------- */

  .hero{
    min-height: 100svh;
  }

  .hero-content,
  .blend{
    padding: 0 2rem;
    height: auto;
    min-height: 14rem;
  }

  .hero-content h1{
    font-size: 2rem;
    line-height: 2.6rem;
    padding: 2rem;
  }
  .hero-content  .over {
    padding: 3rem;
    text-align: center;
    }
    .hero-content  .over h1 {
    font-size: 2rem;
    }

  /* -----------------
     INTERIOR HERO
  ----------------- */

  .interior-hero-content{
    padding: 3rem 2rem;
  }

  .interior-hero-content h1{
    font-size: 2rem;
    line-height: 2.6rem;
  }


  /* -----------------
     CONTACT HERO
  ----------------- */

  .contact-hero-content{
    padding: 3rem 2rem;
    gap: 2rem;
  }

  .contact-hero-content h1{
    font-size: 2rem;
    line-height: 2.6rem;
  }


  /* -----------------
     ABOUT
  ----------------- */

  .left-box{
    padding: 3rem;
    text-align: center;
  }

  .text-content p{
    font-size: 1.6rem;
    line-height: 2.4rem;
  }


  /* -----------------
     BENEFITS
  ----------------- */

  .benefits-container{
    flex-direction: column;
    padding: 3rem 2rem;
  }

  .benefit{
    width: 100%;
  }


  /* -----------------
     SOLUTIONS
  ----------------- */

  .solutions{
    padding: 0;
  }

  .solutions h2{
    font-size: 2rem;
    line-height: 2.4rem;
  }

  .solutions .wrap{
    grid-template-columns: 1fr;
  }

  .solutions .card{
    aspect-ratio: 16 / 10;
  }

  .solutions .card span{
    font-size: 1.8rem;
  }


  /* -----------------
     EXPERIENCIA
  ----------------- */

  .experiencia{
    padding: 6rem 0;
  }

  .experiencia h2{
    font-size: 2rem;
    line-height: 2.4rem;
  }

  .stats{
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .map{
    height: 36rem;
  }


  /* -----------------
     CONTENT SECTIONS
  ----------------- */

  .about-content,
  .solutions-content,
  .experiencia-content{
    padding: 3rem 2rem;
    gap: 3rem;
  }

  .solutions-content,
  .experiencia-content{
    padding-top: 14rem;
  }

  .solutions-content h1,
  .experiencia-content h1{
    font-size: 2rem;
    line-height: 2.6rem;
  }


  /* -----------------
     PORTAFOLIO
  ----------------- */

  .portafolio{
    padding: 2rem;
    padding-top: 0;
  }

  .portafolio .filter{
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .btn-card{
    aspect-ratio: 16 / 10;
    padding: 2rem;
  }

  .btn-card .title{
    font-size: 1.8rem;
  }


  /* -----------------
     MODAL
  ----------------- */

  .modal-panel{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .modal-content{
    padding: 5rem 2rem;
  }


  /* -----------------
     LIGHTBOX
  ----------------- */

  .lightbox-prev,
  .lightbox-next{
    font-size: 4rem;
  }

  .lightbox-close{
    font-size: 3rem;
  }


  /* -----------------
     FOOTER
  ----------------- */

  .footer{
    padding: 3rem 0;
  }

  .footer-inner{
    gap: 3rem;
  }

  .footer-left h3{
    font-size: 2rem;
    line-height: 2.4rem;
  }

  .footer-text{
    font-size: 1.4rem;
    padding-left: 3rem;
    background-size: 2rem auto;
  }

/* LOGO */
.navbar .navbar-inner .logo {
  clip-path: polygon(
  0 0,
  100% 0,
  85% 100%,
  15% 100%
);
}

}




/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  html{
    font-size: 10px;
  }

  .hero-content h1,
  .interior-hero-content h1,
  .contact-hero-content h1{
    font-size: 3rem;
    line-height: 2.4rem;
  }

  .solutions .card,
  .btn-card{
    aspect-ratio: 1 / 1;
  }

  .map{
    height: 30rem;
  }

}