/* Bellow 1344px (smaller desktop) */

@media (max-width:84em){
    .profile{
        max-width: 120em;
    }
}


/* Below 1200px (Landscape Tablet) */

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

    
}

/* Below 944px (Landscape Tablet) */

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

   .grid--3--cols{
    grid-template-columns: 1fr 1fr;
   }

    .about-biodata{
        grid-template-columns: 1fr 1fr;
        
    }

    .name-text{
        grid-column: 1/-1;
        justify-content: center;
    }
 

   .text-paragraf{
    font-size: 1.6rem;
   }
   .biodata-list span{
    font-size: 1.6rem;
   }

   .subheading{
    font-size: 2.4rem;
   }

   .instansi-pendidikan span,
   .tanggal-pendidikan span{
    font-size: 1.5rem;
   }

   .list-flex{
    margin-bottom: 2rem;
   }


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

   .bar-presentase{
    font-size: 1.4rem;
    top: 1px;
   }

   .service-text{
    font-size: 1.8rem;
    text-align:center;
    padding: 2rem;
   }
   .btn-mobile-nav{
    display: block;
    z-index: 9999;
}

    .main-nav{
        background-color: rgba(255, 255, 255, 0.97);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);

        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;  

        opacity: 0;

        pointer-events: none;

    visibility: hidden;
    }

    .nav-open .main-nav{
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-open .icon-mobile-nav[name="close-outline"]{
        display: block;
    }

    .nav-open .icon-mobile-nav[name="menu-outline"]{
        display: none;
    }


    .main-nav-list{
        flex-direction: column;
        gap: 4.8em;
    }

    .main-nav-link:link, .main-nav-link:visited{
        font-size: 3em;
    }
}



/* Below 704px (Landscape Tablet) */

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

/* Below 544px (Landscape Tablet) */

@media(max-width:34em){

    html{
        font-size:35%;
    }


    .profile{
        grid-template-columns: 1fr;
    }

    .grid--2--cols,
    .grid--3--cols,
    .grid--4--cols{
        grid-template-columns: 1fr;
  }


  .profile-img{
    width: 40%;
  }

  .profile-name{
    font-size: 4.5rem;
  }

  .profile-title{
    font-size: 3rem;
  }

  .profile-text{
    font-size: 2rem;
  }

  .btn{
    font-size: 2.8rem;
    margin-bottom: 6rem;
  }

  
  .judul-text{
    font-size: 3rem;
  }

  .heading-secondary{
    font-size: 6rem;
  }

  .text-paragraf{
    font-size: 2.6rem;
  }

  .biodata-list span{
    font-size: 2.8rem;
  }

  

  .subheading{
    font-size: 3.2rem;
  }

  .detail-pendidikan-text{
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

    .instansi-pendidikan span,
    .tanggal-pendidikan span{
     font-size: 2.4rem;
    }

    .icon-pend{
        font-size: 2.4rem;
    }

  .text-pendidikan{
    font-size: 2.6rem;
  }

  .skill{
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .portofolio-img{
    height: 30rem;
  }

  .social-profile{
    grid-template-columns: 1fr;
  }

  .list-contact{
    grid-template-columns: 1fr;
  }

  .social-profile{
    width: 100%;
  }

  .txt-small{
    font-size: 2rem;
  }

  .hp-social, .email-social{
    font-size: 1.8rem;
  }

  .btn{
    font-size: 1.8rem;
  }

  .footer-logo-nyceup{
    width: 15rem;
  }


}