@media only screen and (min-width: 3840px) {
    h1 {
        font-size: 30px;
    }
    p,
    a {
        font-size: 18px;
    }
}

@media only screen and (max-width: 890px) {
    .main-section {
        height: 55vh;
        width: 100%;
        display: block;
    }
    .main-section h2 {
        font-size: 15px;
    }
    .main-section-text p {
        padding-inline: 20px;
    }
    .mod {
        height: 55vh;
        width: 100%;
        padding-top: 5em;
    }
    .feacture_books h1 {
        font-size: 20px;
        width: 40%;
        text-align: center;
    }
    .feacture_detail a {
        top: 0;
        right: 8px;
    }
    .main-section h1 {
        font-size: 2em;
    }
    .service {
        padding-top: 0;
    }
    .service .service-box {
        display: block;
    }
    .service .service-box .service-card p {
        display: none;
    }
    .service .service-box .service-card h3 {
        margin-left: 10px;
        font-size: 18px;
    }
    .service .service-box .service-card img {
        height: 30px;
        width: 30px;
    }

    .service-card {
        display: flex;
    }
    #scrollBare-right,
    #scrollBare-left {
        display: none;
    }
    .genre {
        display: none;
    }
    .grid-img img {
        height: 190px;
    }
    .img-h img {
        height: 18em;
        width: 19em;
        transform: translateX(-80px);
    }
    .img-h {
        position: relative;
        top: 12px;
        transition: all 1s;
    }
    .img-h-img-change {
        top: -12px;
    }

    .grid-edit {
        width: 100%;
    }
    .newsletter h2 {
        font-size: 15px;
    }
    .newsletter button {
        font-size: 15px;
        transform: translateY(-25px);
    }
    .footer-p > div {
        grid-template-columns: 3;
    }

    .item-modal-filter-recent {
        position: fixed;
        bottom: 0;
        transform: translateY(-35px) translateX(30px);
        background-color: rgba(0, 20, 37, 0.726);
        color: aliceblue;
        width: 45%;
        border-radius: 10px;
        padding: 5px;
        z-index: 99;
        opacity: 0;
        transition: all 1s;
    }
    .item-modal-filter-recent p {
        border-bottom: 1px solid rgb(123, 123, 123);
        cursor: pointer;
    }
    .item-modal-filter-recent p:first-child {
        padding-top: 5px;
    }
    .item-modal-filter-recent p:last-child {
        padding-top: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .item-modal-filter-recent p:hover {
        background-color: rgb(0, 4, 7);
    }
    .item-modal-filter-recent-visible {
        display: block;
        transform: translateY(-35px) translateX(30px);
        opacity: 1;
    }

    .listen {
        margin-bottom: 0;
        /* transform: translateY(5px); */
        position: relative;
        top: 50px;
    }
    /* header {
        display: none;
    } */

    .item-modal-filter {
        height: 125vh;
        width: 100%;
        position: fixed;
        top: 5%;
        z-index: 101;
        background-color: antiquewhite;
        transform: translateY(100%);
        animation: animefilter;
        transition: all 0.7s;
        opacity: 0;
    }
    .item-modal-filter p:first-child {
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }
    .item-modal-filter p:first-child:hover span {
        margin-right: 10px;
    }
    .btn-filter {
        position: relative;
        right: 14px;
    }
    .item-modal-filter-visible {
        display: block;
        transform: translateY(0);
        opacity: 1;
    }

    @keyframes animefilter {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}