/*================================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: 992px) and (max-width: 1200px)
{
    .navbar .navbar-nav .nav-item .nav-link {
        font-size: 13px;
    }
}
@media(min-width:992px)
{
    nav .container{
        position: relative;
    }
    nav form{
        position: absolute;
        left: 10px;
    }
}
@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)
{
    .carousel-control-prev-icon , .carousel-control-next-icon
    {
        position: relative;
        bottom: 20px;
    }
}
@media (max-width: 320px)
{

}

@media(max-width:500px)
{
    .top-nav .navbar-brand img{
        width: 100px;
    }
    .phone-num{
        display: none;
    }
    .phone-num-small{
        display: block !important;
    }
    .news .l-bottom, header .r-bottom{
        display: none;
    }
    .donation-projects .search-box input {
        width: 100%;
    }
    input{
        width: 100% !important; 
    }
}
@media(max-width: 778px)
{
    .introduction .card{
        top: 0px;
    }
    .introduction .card.middle-card {
        border-right: none;
        border-left: none;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    }
    .navbar-nav{
        padding: 0px;
        width: 100%;
    }
}
@media (max-width:991px)
{
    h3{
        font-size: 20px;
    }
    h4{
        font-size: 18px;
    }
    h5{
        font-size: 16px;
    }
    p,a,span{
        font-size: 13px;
    }
    .donation .donation-inner .form-donation .amount-donation-radios .form-check span {
        font-size: 10px;
    }
}
@media (min-width:1200px)
{
    .introduction .daily-donors {
        padding: 46px 0px;
        position: absolute;
        width: 500px;
        right: 50%;
        transform: translateX(50%);
        top: -125px;
        z-index: 99;
    }
}