
/* ======= MOBILES DEVICES ======= */

@media (max-width: 480px) {
    #topbar{
        display: none;
    }

    .logo img{
        margin-left: 12px;
    }
   
    .navbar .mobile-nav-toggle{ 
        display: block !important;
       }

    #hero{
        height: 180px;
        padding: 0px 12px;
    }

    .search-bar{
        backdrop-filter: none;
    }

   
    #phones{
        padding: 50px 0px 50px 12px;
    }

    .search-bar{
        max-width: 400px;
        height: 50px;
       }

       .search-bar button {
       width: 45px;
       height: 40px;

       }

       .footer-col-3{
        width: 100% !important;
        margin-bottom: 30px;
       }

       .copyright{
        display: block;
        text-align: center;
       }

       .footer-h-primary{
        font-size: 17px;
       }
        
       .follow-icon a {
        width: 28px;
        height: 28px;
       }
       .follow-icon a i{
        width: 28px;
        height: 28px;
       }

       .footer-wrapper{
        padding: 20px 0px 0px 0px;
       }

       .payment-icon img{
        width: 35px;
       }

       .finder a img{
        width: 45px;
       }

       .content-box-h-primary{
        font-size: 15px;
       }

       .sidebar-box-h-primary{
        font-size: 11px;
       }
    
       .sidebar-social-icon a{
        display: flex;
        justify-content: center;
       }
       .sidebar-social-icon i{
        margin: 0px;
       }
    
       .sidebar-social-icon span{
        display: none;
       }


       .main-content h1{
        font-size: 20px;
       }

       .table-wrapper .tcd{
        font-size: 11px;
       }

       .table-wrapper .tch{
        font-size: 14px;
       }
       .sidebar-social-icon a{
        margin: 19px 0px;
       }
       .makers a strong{
        font-size: 12px;
       }

       .copyright-wrapper span{
        font-size: 10px;
       }

       .footer-wrapper p{
        font-size: 11px;
       }

       nav{
        z-index: 3;
    }
   
    li.fade{
        opacity: 1 !important;
    }
      
      


}  

/* ======= MOBILES DEVICES END ======= */


/* ======= IPADS AND TABLET ======= */

@media (min-width: 481px) and (max-width: 768px) {
      


    .logo img{
        margin-left: 25px;
    }

    


    #hero{
        height: 230px;
    }

    .search-bar{
        max-width: 550px;
        height: 60px;
       }


    
    .footer-col-3{
     width: 50% !important;
     margin: 0px 12px 30px 12px;
    }
 
    .search-bar{
     max-width: 500px;
    }
 
    .makers li{
     width: 127px;
    }
 
    .makers a strong{
        font-size: 12px;
    }
    .content-box-h-primary{
     font-size: 20px;
    }
 
    .sidebar-box-h-primary{
     font-size: 16px;
    }
    .finder a img{
     width: 50px;
    }
 
    .sidebar-social-icon a{
     display: flex;
     justify-content: center;
    }
    .sidebar-social-icon i{
     margin: 0px;
    }
 
    .sidebar-social-icon span{
     display: none;
    }
 
    .copyright{
     display: block;
     text-align: center;
    }

    .main-content h1{
        font-size: 22px;
    }

    .table-wrapper .tcd{
        font-size: 12px;
       }

       .table-wrapper .tch{
        font-size: 16px;

       }

       nav{
        /* position: fixed; */
        z-index: 3;
    }
   

    li.fade{
        opacity: 1 !important;
    }
      


    .nav-links .open{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     
    }
    }



 


/* ======= IPADS AND TABLET END ======= */





/* ======= LAPTOPS ======= */

@media (min-width: 769px) and (max-width: 1024px){

    #navigation-bar .navbar-brand img{
        width: 135px;
    }
    
    #hero{
        height: 270px;
    }

    .search-bar{
        max-width: 600px;
        height: 65px;
       }

       .makers li{
        width: 129px;
       }
      

}

/* ======= LAPTOPS END ======= */
