@media screen and (max-width: 1100px){
    .big-img, .text-white, .grey{
        width: 100% !important;
    }

    .bi-list{
        color: aqua;
    }

    .grey{
        margin: 0% !important;
    }

    .big-img{
        padding: 20px;
    }

    .main1-c1, main2-c2{
        display: grid;
        grid-template-columns: auto;
        grid-auto-flow: row;
        flex-wrap: wrap !important;
        min-width: 100% !important;
    }

    .text-wimg{
        margin-bottom: 20px;
        width: 100% !important;
    }

    .search{
        width: 50%;
    }

    .search-blog{
        width: 100% !important;
    }

    /* posts */
    .posts-text p{
        font-size: 18px !important;
    }

    /* subscribe */
    .main3{
        position: relative;
        bottom: -20px;
    }

    .sub{
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 710px){
    .main1-c1{
        width: 100% !important;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap !important;
        padding: 10px !important;
    }

    .main2-c2{
        grid-auto-flow: column;
        flex-wrap: wrap;
        margin: 0% !important;
    }

    .big-img, .text-white{
        width: 100% !important;
    }

    .big-img{
        padding: 0%;
        padding-bottom: 10px;
    }

    .search ,.icode-blog{
        width: 100% !important;
    }

    h1.cyan-blog{
        margin: 0% !important;
        font-size: 10vw !important;
        height: 100%;
        text-align: center;
    }

    .search{
        width: 100% !important;
        display: flex;
        justify-content: end !important;
    }

    .text-wimg{
        padding: 10px;
        margin: 0%;
    }

    .news-images{
        height: 100%;
    }

    .b-text h3{
        font-size: 15px !important;
    }

    /* post */
    .posts, .gray, .posts-img{
        min-width: 100% !important;
    }

    .posts{
        padding: 0% !important;
    }

    .posts-text{
        margin: 0%;
    }

    .main2-c2{
        padding: 20px !important;
        width: 100% !important;
    }

    .next-button{
        width: 100% !important;
    }

    .posts-button{
        width: 100%;
        display: flex;
        justify-content: center !important;
    }

    .posts-btn{
        height: 100% !important;
        margin: 0% !important;
    }

    .latest{
        text-align: center;
    }

    /* subscribe */
    .main3{
        height: 50vh !important;
        padding: 20px !important;
    }

    .main3-c3{
        padding: 2% !important;
        height: 30vh !important;
    }
}