/*
=========================================
    MobarakShahrNews Pro
    Home Responsive
=========================================
*/

/*=========================================
    TABLET
=========================================*/

@media (max-width: 992px){

    .hero-grid,
    .latest-layout,
    .mobarak-grid,
    .featured-wrapper{
        grid-template-columns:1fr;
    }

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

    .hero-image img{
        height:420px;
    }

    .featured-image img{
        height:380px;
    }

}


/*=========================================
    MOBILE
=========================================*/

@media (max-width: 768px){

    .hero-slider,
    .latest-news,
    .mobarakshahr-section,
    .photo-reports-section,
    .featured-news{
        margin:45px 0;
    }

    .section-title{
        margin-bottom:20px;
    }

    .section-title h2{
        font-size:22px;
    }


    /* HERO */

    .hero-side{
        display:flex;
        flex-direction:column;
    }

    .hero-image img{
        height:350px;
    }

    .hero-overlay{
        padding:22px;
    }

    .hero-title{
        font-size:24px;
    }


    /* LATEST NEWS */

    .featured-news-image img{
        height:340px;
    }

    .featured-news-overlay{
        padding:22px;
    }

    .featured-news-title{
        font-size:24px;
    }

    .latest-small-thumb{
        flex-basis:105px;
    }

    .latest-small-thumb img{
        width:105px;
        height:82px;
    }


    /* MOBARAKSHAHR */

    .mobarak-main img{
        height:340px;
    }

    .mobarak-overlay{
        padding:22px;
    }

    .mobarak-title{
        font-size:24px;
    }

    .mobarak-item img{
        width:105px;
        height:82px;
    }


    /* FEATURED */

    .featured-image img{
        height:340px;
    }

    .featured-content{
        padding:24px;
    }

    .featured-title{
        font-size:25px;
    }


    /* PHOTO REPORTS */

    .photo-report-play{
        width:58px;
        height:58px;
        font-size:28px;
    }

}


/*=========================================
    SMALL MOBILE
=========================================*/

@media (max-width: 576px){

    .hero-slider,
    .latest-news,
    .mobarakshahr-section,
    .photo-reports-section,
    .featured-news{
        margin:35px 0;
    }

    .section-title h2{
        font-size:20px;
    }


    /* HERO */

    .hero-swiper{
        border-radius:16px;
    }

    .hero-image img{
        height:290px;
    }

    .hero-overlay{
        padding:16px;
    }

    .hero-title{
        font-size:20px;
    }

    .hero-item a{
        padding:9px;
    }

    .hero-thumb{
        flex-basis:90px;
    }

    .hero-thumb img{
        width:90px;
        height:70px;
    }


    /* LATEST NEWS */

    .featured-news-image img{
        height:280px;
    }

    .featured-news-overlay{
        padding:16px;
    }

    .featured-news-title{
        font-size:20px;
    }

    .latest-small-link{
        padding:8px;
    }

    .latest-small-thumb{
        flex-basis:90px;
    }

    .latest-small-thumb img{
        width:90px;
        height:70px;
    }

    .latest-small-title{
        font-size:13px;
    }


    /* MOBARAKSHAHR */

    .mobarak-main img{
        height:280px;
    }

    .mobarak-overlay{
        padding:16px;
    }

    .mobarak-title{
        font-size:20px;
    }

    .mobarak-item-link{
        padding:8px;
    }

    .mobarak-item img{
        width:90px;
        height:70px;
    }

    .mobarak-item-title{
        font-size:13px;
    }


    /* FEATURED */

    .featured-image img{
        height:270px;
    }

    .featured-content{
        padding:18px;
    }

    .featured-title{
        font-size:21px;
    }


    /* PHOTO REPORTS */

    .photo-report-play{
        width:58px;
        height:58px;
        font-size:28px;
    }

}


/*=========================================
    VERY SMALL MOBILE
=========================================*/

@media (max-width: 400px){

    .hero-image img{
        height:260px;
    }

    .hero-title{
        font-size:18px;
    }

    .latest-small-thumb,
    .mobarak-item img{
        width:80px;
        height:64px;
    }

    .latest-small-thumb{
        flex-basis:80px;
    }

    .latest-small-title,
    .mobarak-item-title{
        font-size:12px;
    }

    .mobarak-main img{
        height:260px;
    }

    .featured-image img,
    .featured-news-image img{
        height:240px;
    }

}