tablet.css

@media only screen and (max-width: 900px) {
    nav{
        display: none;
    }

    .mobil-tablet-nav{
        display: flex;
    }

    header{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    header .left-section{
        width: 100% !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    header .left-section h2{
        text-align: center;
    }

    header .left-section p{
        text-align: center;
    }

    header .play-shop {
        display: flex;
        margin-top: 2em;
        gap: 1.5em;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        margin-bottom: 6em;
    }

    main .web-design img{
        width: 300px;
        height: 300px;
    }

    main .top-section{
        padding: 5em 5em;
        gap: 2em;
    }

    main .features-section {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5em 6em;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-content: center;
    }

    main .features-section .features-details{
        width: 100%;
        margin-bottom: 5em;
        gap: 5em;
    }

    main .features-section .mobileIMG-section .backOfMobile-circle{
        display: none;
    }

    main .web-design {
        padding: 5em 5em;
        flex-direction: column;
    }

    main .web-design .inside-web h2{
        width: 7em;
        text-align: center;
    }

    main .web-design .inside-web p {
        text-align: center;
    }
}