/*1100px*/
@media(max-width: 1100px){
    .container{
        padding: 0 50px;
    }

    html {
        font-size: 70%;
    }

}

/*820px*/
@media(max-width: 820px){

    /*--------------showcase start-----------*/
    .container {
        padding: 0 35px;
    }


    #showcase .content {
        width: 100%;
    }
    .navbar .btn {
        display: block;
    }

    .navbar nav {
        position: fixed;
        flex-direction: column;
        min-height: 50vh;
        min-width: 100%;
        top: 0;
        right: -100%;
        background-color: hsla(0, 0%, 100%, .3);                              
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
        align-items: flex-start;
        justify-content: center;
        transition: all .5s ease-in-out;
    }

    .navbar nav li a {
        color: #000;
        font-weight: bold;
    }


    .navbar nav.active{
        right: 0;
        transition: all .5s ease-in-out;
    }

    .navbar nav li{
        margin: 1rem 2rem;
        border-bottom: 1px solid #ddd;
        padding-bottom: 1rem;
        width: 100%;
    }

    .close_btn {
        position: absolute;
        top: 0;
        left: 70%;
        margin: 25px;
        color: white;                /*added color black*/
    }

    nav li a:hover {
        color: var(--primary-color);
    }
      /*--------------showcase close-----------*/


    /*--------------services start-----------*/
    #services .services_content {
        grid-template-columns: repeat(2, 1fr); 
     }

     #services {
        margin-top: -35px;
     }
     /*--------------services close-----------*/

   

     /*--------------gallery start-----------*/
   .gallery_content {
     grid-template-columns: repeat(1, 1fr); 
     margin-bottom: -40px;                         /*I added margin bottom*/
    }

    .gal_left_side img {
        display: block;
        object-fit: cover;
        transform: translateY(0%);
    }
     /*--------------gallery close-----------*/


     /*--------------boxes with content starts-----------*/
     .normal_content {
        grid-template-columns: repeat(2, 1fr);
    }
     /*--------------boxes with content close-----------*/


     /*--------------oculus start-----------*/
     .oculus_content{
        grid-template-columns: repeat(1, 1fr);
       
    }


    #oculus .oculus_content img {
        width: 120%;                                /*i changed the width*/
    }


    .products_content {
        grid-template-columns: repeat(2, 1fr);
    }

    /*--------------oculus close-----------*/

    .ipad_content {
        grid-template-columns: repeat(1, 1fr);
    }

    .sp_boxes {
        grid-template-columns: repeat(2, 1fr);
    }


    .order .row  form .inputBox input {
        width: 100%;
    }

    .footer .container {
        grid-template-columns: repeat(2, 1fr); 
    }


}







/*569px*/
@media(max-width: 569px){

    .container{
        padding: 0 25px;
    }

    #services .services_content {
        grid-template-columns: repeat(1, 1fr);
        
     }

     #showcase h2 {
        font-size: 4rem;
        
    }

    .gal_right_side {
        grid-template-columns: repeat(1, 1fr);
       }

    .gal_right_side .gallerys:first-child{
          grid-column: 1/1;
        
     }
     .normal_content {
        grid-template-columns: repeat(1, 1fr);
    }

    .oculus_content{
        grid-template-columns: repeat(1, 1fr);       
    }

    #oculus .oculus_content h2{
        font-size: 4rem;
    }

    #oculus .oculus_content img{
        width: 200%;
        margin: 0 -50%;
    }

    #oculus .oculus_content p {
        padding: 0.5rem 0;
    }

    .products_content {
        grid-template-columns: repeat(1, 1fr);
    }

    .ipad_content {
        grid-template-columns: repeat(1, 1fr);
    }

    .ipad_content img{
        margin: 0 -5%;
    }

    .ipad_left_side h2{
        font-size: 5rem;
    }

    .sp_boxes {
        grid-template-columns: repeat(1, 1fr);
    }
    .footer .container {
        grid-template-columns: repeat(1, 1fr); 
        
    }
    .close_btn {
        position: absolute;
        top: 0;
        left: 70%;
        margin: 25px;
        color: white;                /*added color black*/
    }


    .footer {
        padding: 5rem 0;
        margin-top: 5rem;
    
    }

    .footer .logo_{
        width: 43%;
        margin: 0 28%;
    }


    .footer .share i{
        font-size: 2rem;
    }

    .footer P {
        font-size: 1rem;
    }

}