/* --- RESPONSIVE MEDIA QUERIES --- */

/* 1. For Tablets (Laptops/Large Screens usually handle the default well) */
@media screen and (max-width: 1024px) {
  .title {
    font-size: 2.5rem;
  }
  .details-container {
    width: 90%;
    padding: 2rem;
  }
}

/* 2. For Mobile Phones (600px and below) */
@media screen and (max-width: 600px) {
   html, body {
    overflow-x: hidden;
    position: relative; /* This helps mobile browsers understand the boundaries */
    width: 100%;
  }
  /* Prevent horizontal scrolling */
  #experience, #IT-skills {
    padding: 1rem 1rem;
  }

  .title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .section__text__p1 {
    font-size: 1rem;
  }
  /* Adjust the grid so icons don't look cramped */
  .article-container {
    gap: 1.5rem;
  }

  article {
    width: 140px; 
    gap: 0.5rem;
  }

  article h3 {
    font-size: 1rem;
  }

  .button {
    padding: 10px 10px; 
    margin-top: 10px;    
    width: 100%;
    box-sizing: border-box; 
  }

  .btn {
    padding: 10px 15px; /* Slightly smaller buttons for mobile fingers */
    font-size: 0.85rem;
  }

 .details-container {
    width: 90%;            
    margin: 1rem auto;     
    padding: 1rem;         
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .experience-details-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  footer p {
    max-width: 90%;       
    margin: 5px auto;     
    overflow-wrap: break-word; 
    text-align: center;   
    font-size: 0.8rem;    
  }
}