@media only screen and (min-width:834px) and (max-width:1200px){
   
    .main-container{
        width: 100%;
    }

    .first-container{
        width: 100%;
        height: 500px;
    }

    .menu{
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px 4%;
    }

    .nav-section{
        width: 100%;
        margin-top: 10px;
    }

    .nav-section a{
        font-size: 14px;
        margin-left: 15px;
    }
     
    #cards{
       display: block;
    }

    #orders{
        display: block;
    }

    .navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        display: inline-block;
    }

    .icons a{
        display: block;
        position: absolute;
        top: 12px;
        right: 180px;
        font-size:12px;
    }

    .logo img{
        width: 120px;
    }
    .icons i {
        font-size: 20px;
    }
    

    /* --------paragraph session---- */

    .content{
        position: relative;
        height: 400px;
        width: 90%;
        margin: auto;
    }
    
    .para{
        position: absolute;
        right: 0;
        margin: 50px auto;
    }
    
    .para h2{
        font-size:40px;
        font-family: "Monster-bold",serif;
        line-height: 30px;
        text-align: left;
    }
    .para p{
        font-size: 16px;
        line-height: 22px;
    }
    
    .para h4{
        font-size: 16px;
        line-height: 30px;
    }
    
    .btn button{
        margin-top: 5px;
        width: 120px;
        height: 35px;
    }
    
    .btn .buy-btn{
        font-size: 14px;
    }

    .btn .shop-btn{
        font-size: 14px;
    }

    /* -------Accessories------ */

    .box{
        height: 190px;    
    }
    
    .box img{
        width: 130px;
    }
    
    .box p{
       font-size: 13px;
       font-family: "Monster-medium",serif;
       padding: 0px 20px;
       text-align: center;
    }
    
    .acc{
        width: 85%;
        font-size: 16px;
        font-family: "Monster-medium",serif;
        margin: 20px auto 0 auto;
    }
        
    .ad-1{
        width: 90%;
        height: 70px;
        margin-top: 10px;
    }
    
    .ad-1 img{
        object-fit: fill;
    }

    /* -----------third container------------- */
    .items{
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin: auto;
    }
    
    .items-1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 130px;
        margin-left: 0;
    }
    
    .items-1 p{
        font-family: "Monster-medium",serif;
        font-size: 16px;
        line-height: 30px;
        width: 0;
    }
    
    .items-1 img{
        width: 200px;
        height: 95px;
    }

    /* --------fourth container------- */

    .fouth-header{
        width: 90%;
        margin: 25px auto 5px auto;
        font-size: 16px;
        font-family: "Monster-medium",serif;
    
    }

    .order-box{
        width: 100%;
        margin-left: 0;
    }
    .order-list{
        width: 90%;
    }
    
    .order-box img{
        width: 100%;
        height: 170px;
        align-content: center;
    }
    .order-box .sec-img{
        width: 40px;
        height: 30px;
    }
    .order-box h5{
        color:#000;
        text-align: center;
        font-size: 10px;
    }
    
    .order-box p{
       font-size: 12px;
    }
    .order-box i{
        font-size: 18px;
    }
    
    .order-box h6{
        margin-top: 5px;
        font-size: 12px;
    }
    
     .order-box button{
        font-size: 10px;
    } 

    /* -----fifth container--------- */

    .fifth-header{
        width: 90%;
        margin: 20px auto 5px auto;
        font-size: 16px;
        font-family: "Monster-medium",serif;
    }

    .store-box{
        width: 100%;
        margin-left: 0;
    }
    .store-list{
        width: 90%;
    }
    
    .store-box img{
        width: 170px;
        height: 170px;
    }
    .store-box .sec-img-1{
        width: 40px;
        height: 30px;
    }
    
    .store-box p{
       font-size: 12px;
    }
    .store-box i{
        font-size: 18px;
    }
    
    .store-box h6{
        margin-top: 5px;
        font-size: 12px;
    }
    
     .store-box button{
        font-size: 10px;
    } 




    /* --sixth container--- */
   
    .sixth-header{
        width: 90%;
        margin: 20px auto 5px auto;
        font-size: 16px;
        font-family: "Monster-medium",serif;
    
    }

    .latest-box{
        width: 100%;
        margin-left: 0;
    }
    .latest-list{
        width: 90%;
    }
    
    .latest-box img{
        width: 100%;
        height: 170px;
        align-content: center;
    }
    .latest-box .sec-img-2{
        width: 40px;
        height: 30px;
    }
    .latest-box h5{
        color:#000;
        width: 170px;
        text-align: center;
        font-size: 10px;
    }
    
    .latest-box p{
       font-size: 12px;
    }
    .latest-box i{
        font-size: 18px;
    }
    
    .latest-box h6{
        margin-top: 5px;
        font-size: 14px;
    }
    
     .latest-box button{
        font-size: 10px;
    } 

    /* ----------seventh container------- */

    .seventh-header{
        width: 90%;
        margin: 20px auto 5px auto;
        font-size: 16px;
        font-family: "Monster-medium",serif;
    }

    .xbox-box{
        width: 100%;
        margin-left: 0;
    }
    .xbox-list{
        width: 90%;
    }
    
    .xbox-box img{
        width: 170px;
        height: 170px;
    }
    .xbox-box .sec-img-3{
        width: 40px;
        height: 30px;
    }
    
    .xbox-box p{
       font-size: 11px;
    }
    .xbox-box i{
        font-size: 18px;
    }
    
    .xbox-box h6{
        margin-top: 5px;
        font-size: 12px;
    }
    
    .xbox-box button{
        font-size: 10px;
    } 

    /* --------footer conatiner--------- */

    .footer-item{
        flex-direction: row;
        padding: 0;
        margin-top: 10px;
    }

    .footer-box{
        margin: 20px 5px;
        padding: 0;
    }
    
    

    .footer-box h6{
        font-size: 12px;
    }
    
    .footer-box a{
        font-size: 13px;
        font-family: "Monster-light",serif;
    }
    
    .connect-box h5{
        font-size: 14px;
    }
    .connect-box img{
        width: 25px;
    }
    
    .card img{
        width: 55px;
    }
    
    
    .footer-bar p{
        font-size: 10px;    
    }

}