/*================================Satrt the large screens=========================*/
@media (min-width:1201px ) and (max-width: 1440px)
{
   
}
@media (min-width:1025px) and (max-width:1200px)
{

}
/*==============================Start the screen of tablet=========================*/
@media (min-width: 993px) and (max-width: 1024px)
{

}
@media (min-width: 769px) and (max-width: 992px)
{

}
/*==============================Start the screen of mobbile=========================*/
@media (min-width: 577px) and (max-width: 768px)
{

}
@media(min-width: 426px) and (max-width: 576px)
{

}
@media (min-width: 376px) and (max-width: 425px)
{

}
@media (min-width: 321px) and (max-width: 375px)
{
    nav .form-small{
        position: relative;
        top: 15px;
    }
    header .carousel-inner .carousel-item .carousel-caption h5,
    header .carousel-inner .carousel-item .carousel-caption p{
        font-size: 15px;
    }
    header .carousel-inner .carousel-item .carousel-caption h4{
        font-size: 18px;
    }
    header .carousel-inner .carousel-item .carousel-caption .shop-now {
        font-size: 10px;
    }
}
@media (max-width: 320px)
{   
    nav .form-small{
        position: relative;
        top: 15px;
    }
    .collection .item .content  .timer, 
    .collection .item .content .timer span
    {
        font-size: 10px;
    }
    header .carousel-inner .carousel-item .carousel-caption h5{
        font-size: 15px;
    }
    header .carousel-inner .carousel-item .carousel-caption h4{
        font-size: 18px;
    }
    header .carousel-inner .carousel-item .carousel-caption .shop-now {
        font-size: 10px;
    }


}
@media (max-width: 560px)
{
    nav{
        height: 120px !important;
    }
   nav .navbar-brand{
        width: 120px !important;
        height: 120px !important;
   }
    .navbar .top-nav .profile-info {
        margin: 0px 2px;
    }
    nav .top-nav .dropdown-toggle {
        padding: 5px;
        font-size: 10px;
    }
    nav .top-nav .profile-info {
        display: contents;
    }
    nav .top-nav .profile-info .image-content {
        width: 20px;
        height: 20px;
        margin: 10px;
    }
    nav .top-nav .profile-info h6 {
        display: none;
    }
}
@media(max-width:768px)
{
    nav{
        height: 150px;
    }
   nav .navbar-brand{
        width: 150px;
        height: 150px;
   }

   nav .main-nav .form-container{
       display: none !important;
   }
   nav .main-nav .col-6{
       text-align: center;
   }
   nav .main-nav .search-small{
       display: block;
       background-color: transparent;
       border: none;
       padding: 0px;
       color: #000;
   }
   header .carousel-inner .carousel-item .carousel-caption {
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
        text-align: center;
    }
}
@media(max-width:991px)
{
    nav .main-nav .item span{
        display: none;
    }
    .lenses .right-item .image-content {
        right: 0px;
    }
    .lenses .left-item .image-content {
        right: 50%;
        transform: translate(50%,-50%);
    }
    .lenses .item .text-content
    {
        background-color: #cccccc;
        opacity: .9;
    }
}