/* LG - SMALL LAPTOPS: 1024px - 1280px */

@media (max-width: 72rem) {
    /* 1150px / 16px = 72rem */
    /* 72rem x 16px = 1152px */


    /* Navbar Switch */
      .navbar-mobile-length {
    display: block; 
  }

  .navbar-full-length{
    display: none;
  }
    html {
        font-size: 56.25%;
        /* 9px / 16px = 56.25% */
    }

    #upper-contact{
        display: none;
    }


    .left-side-text{
        grid-template-columns: 1fr;
        align-items: center;
    }
    
    .right-side-text {
        grid-template-columns: 1fr;
    }

  
}

/* MD - TABLETS: 768px - 1024px */

@media (max-width: 51rem) {
    /* 815px / 16px = 51rem */
    /* 51rem x 16px = 816px */

    html {
        font-size: 50%;
        /* 8px / 16px = 50% */
    }

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

/* SM - PHONE LANDSCAPE: 576px - 768px */

@media (max-width: 43rem) {
    /* 680px / 16px = 43rem */
    /* 43rem x 16px = 688px */

    html {
        font-size: 43.75%;
        /* 7px / 16px = 43.75% */
    }

    .profile-img {
        max-width: 40rem;
    }

}

/* XS - PHONE PORTRAINT:  < 576px */

@media (max-width: 34rem) {
    /* 530px / 16px = 34rem */
    /* 34rem x 16px = 544px */

    html {
        font-size: 37.5%;
        /* 6px / 16px = 37.5% */
    }

    .profile-img {
        max-width: 30rem;
    }

    .pic-box-cover {
        max-width: 30rem;
    }

    .floatit{
    max-width: 300px;
    }

    #Ashley-pic {
        float: none;
        
        margin: 2rem;
    }

    .Ashley-pic-grid{
        display: grid;
        place-items: center;
    }

    .pic-box{
        max-width: 250px;
    }

   
}


@media (max-width: 600px) {
  table {
    width: 100%; /* Full width on small screens */
    margin: 15px auto; /* Adjusted margins */
  }
  
  th, td {
    padding: 12px 15px; /* Reduced padding for better readability on smaller screens */
  }

  th {
    font-size: 14px; /* Smaller font size for headers on small screens */
  }
}


@media (max-width: 400px) {
    .container {
        max-width: calc(100% - 40px); /* Adjust padding here if needed, e.g., 20px each side */
        margin: auto;
        padding: 10px; /* Reduced padding for smaller screens */
    }

    .hero-section img {
        width: 80%; /* Reduce image size to fit better on small screens */
        height: auto; /* Maintain aspect ratio */
    }
}




@media (max-height: 30rem){
    /* 480px / 16px = 30rem */
    .hero-title {
        display: none;
    }


}

/* Color Chips Mobile responsiveness */
@media (max-width: 768px) {
    .color-chips-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .color-chip-container {
        width: 100%;
        max-width: 200px;
    }
}