/* In media queries the rem and em do not depend upon the font size percentage,
1rem = 1em = 16px */

/* For small laptops and screens which has size less than 1200px */
@media(max-width:71em){

    html{
        font-size: 50%;
    }

}

/* For large tablets, screen size less than 950px */
@media(max-width:60em){
    html{
        font-size: 50%;
    }

    .container{
        max-width: 95rem;
        padding: 5rem 0;
    }
 
 }

 /* For small tablets screen size less than 750px */
 @media(max-width:48em){
    html{
        font-size: 45%;
    }
    .section-hero{
        background-image:linear-gradient(to right, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.2)), url("../Content/img6.jpeg") ;
    }
    .container{
        max-width: 85rem;
        padding: 5rem 0;
    }
    .mob-btn{
        display: block;
    }
    .navigation{
        background-color: rgba(13, 23, 53, 0.95);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in-out;

        transform: translateX(100%);
        /*visually not available*/
        opacity: 0; 
        /* unacccessible for the user */
        pointer-events: none;
        /* Hiding from screen readers */
        visibility: hidden;
    }
    .navigation ul{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .nav-open .navigation{
        opacity: 1; 
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }
    
    .navigation ul a:link , a:visited{
        font-size: 2.4rem;
    }
    .nav-open .close-mob-nav{
        display: block;
    }
    .nav-open .open-mob-nav{
        display: none;
    }

    .slide-box{
        max-width: 80em;
        margin: 20rem auto;
    }
    .contact-inner-box{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .contact-image{
        display: none;
    }
 }

@media(max-width:30em){
    .box{
        display: flex;
    }
    html{
        font-size: 30%;
    }
    .box-inner{
        width: 90%;
        /* padding: 2rem; */
    }

    .intro{
        display: flex;
        flex-direction: column;
        padding: 5rem;
        gap: 5rem;
        align-items: center;
        
    }
    .grid-images{
        height: 100vh;
        padding: 2rem;
        gap: 1rem;
    }
    .slide{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .slide img{
        transform: none;
        width: 80%;
    }
    .contact-inner-box{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .contact-image{
        display: none;
    }
}