@media screen and (max-width: 63.99rem ) {
    
   body{
     width: 95%;
   }

    header{
        width: 28rem;
        margin: 0.5rem auto 2rem;
        padding: 1.25rem 0.25rem;

    }
    .header-right{
        margin-left: auto;
    }

    .hambi{
        display: block;
    }

    .hambi:hover svg path{
        fill: var(--color-orange-500);
        cursor: pointer;    
    }

    .main-navigation{
        display: none;
    }

    main{
        
        width: 38rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .section-1{

         width: 38rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        
        
    }

    .section-1 img{
       width: 38rem;
         height: 18.125rem; 
        object-fit: cover;
        object-position: center center;
      
       
   

    }

    .thumb-images-wrapper{
        display: none;
    }

    .section-1 .arrow-left-wrapper, 
    .section-1 .arrow-right-wrapper{
    display: block;

    background-color: white;

    width: 2.75rem;
    height: 2rem;
    cursor: pointer;
}

    .section-1 .arrow-left-wrapper{
        position: relative;
        left: 1.6rem
    }
    
    .section-1 .arrow-right-wrapper{
        position: relative;
        right: 1.6rem;
    }

    #main-arrow-left,
    #main-arrow-right{
        position: relative;
        top: 0.5rem;
        left: 0.6rem;
        ;
    }

    .section-2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1rem;
    }

    .section-2 h1{
        font-size: 1rem;
        line-height: 2rem;
    }

    .original-price{
       
        padding-top: 0.75rem; 
    }

     .quantity-settings-container{
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 3fr;
    grid-template-rows: 1fr;
    gap: 1.25rem;
}

  .add-to-cart-button{
        width: 100%;
        padding: 0.25rem 0.25rem;
        font-size: 1rem;
        line-height: 2rem;
    }

    .section-2 h2{
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .section-2 h3{
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .section-2 h4{
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .cart-content{
        position: absolute;
        top: 10%;
        right: 5%;

         z-index: 10;
    }

    .left-side-menu{
         display: none;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 18.75rem;
        height: 100%;
        background-color: rgb(255, 255, 255);
        color: black;
        font-family: 'Kumbh Sans', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        line-height: 1.5rem;        
        z-index: 4;

        box-shadow: 3px 3px 10px rgba( 0, 0 , 0, 0.15);

    }

    .left-side-menu div{
         display: block;
    flex-direction: row;
    /* justify-content: flex-end;
 
    align-items: center; */

    z-index: 11;
    padding: 0.5rem;
    border-radius: 50%;

    margin:0.5rem 10rem 0.5rem 16rem;


    background-color: transparent;
    border:none;
}
    

    .left-side-menu .left-menu-close-button svg{
    position: relative;
    top: 0.1rem;
    left: 0.15rem;
    fill: black;
}

.left-side-menu .left-menu-close-button svg:hover{
    position: relative;
    top: 0.1rem;
    left: 0.15rem;
    fill: red;
}

    .smaller-screen-navigation ul{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1rem 1rem;;
    }

    .smaller-screen-navigation ul li a{
        color: black;
    }
    .smaller-screen-navigation ul li a:hover{
        color: var(--color-orange-500);
    }
}