/* ******************************
BELOW 1200px (tablet)
********************************* */

@media (max-width: 75em) {}


/* ******************************
BELOW 944px (tablet)
********************************* */

@media (max-width: 59em) {
    html {
        font-size: 20px;
    }
    .txt {
        display: none;
    }
    .banner {
        width: 100%;
        height: 50vw;
    }
    .hero-banner {
        width: 100%;
        height: 60vw;
    }
    .hrline,
    .hrLine2 {
        display: none;
    }
    .forGrid {
        grid-template-columns: 2fr;
        gap: 2rem;
    }
    .grid3 {
        grid-template-columns: 2fr;
        gap: 2rem;
    }
    .img1 {
        grid-template-columns: 2fr;
        gap: 2rem;
    }
}


/* ******************************
BELOW 704px (smaller tablet)
********************************* */

@media (max-width: 44em) {
    .electro {
        width: 5rem;
        height: 1.5rem;
    }
    .img1 {
        width: 17rem;
    }
    .eBox {
        width: 17rem;
    }
    .grid1 {
        gap: 2rem;
    }
    .txt {
        display: none;
    }
    .navBar2 {
        display: none;
    }
    .sony {
        height: 1vh;
        width: 3vw;
    }
    .samsung {
        width: 2vw;
        height: 1vh;
    }
    .dell {
        width: 1.5;
        height: 1vh;
    }
    .philips {
        width: 2vw;
        height: 1vh;
    }
    .nikon {
        height: 1vh;
        width: 2;
    }
    .lenovo {
        width: 2vw;
        height: 1vh;
    }
    .bg-c {
        height: 5vh;
    }
    h2 div {
        font-size: 1.5vw;
    }
    .hrline,
    .hrLine2 {
        display: none;
    }
    .forGrid {
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .banner {
        width: 100%;
        height: 40vw;
    }
    .hero-banner {
        width: 100%;
        height: 65vh;
    }
    .t1,
    .t2 {
        font-size: .8rem;
    }
    .t3 {
        font-size: 1.2rem;
    }
    .tBox {
        font-size: 1rem;
    }
    .popular {
        flex-direction: column;
        display: flex;
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
    }
    .Box {
        width: 4rem;
        padding: .1rem;
        font-size: .4rem;
    }
    .left-arrow {
        top: 32%;
        padding: 1rem 0.1rem;
        width: 1rem;
    }
    .right-arrow {
        top: 30%;
        right: 3%;
        width: 1.2rem;
        padding: 1rem 0.5rem;
    }
    .purchage {
        padding: .7rem 0;
    }
    .view {
        border-radius: 2rem;
        font-size: .7rem;
        color: #fff;
        width: 4rem;
        padding: 0.2rem;
    }
    html {
        font-size: 4vw;
    }
}


/* ******************************
BELOW 544px (smaller tablet)
********************************* */

@media only screen and (max-width: 34em) {
    .electro {
        width: 6rem;
        height: 2rem;
    }
    .nav {
        display: none;
    }
    .input-group {
        width: 180%;
    }
    .img1 {
        width: 17rem;
    }
    .eBox {
        width: 17rem;
    }
    .grid1 {
        gap: 2rem;
    }
    .txt {
        display: none;
    }
    .navBar2 {
        display: none;
    }
    .sony {
        height: 1vh;
        width: 3vw;
    }
    .samsung {
        width: 2vw;
        height: 1vh;
    }
    .dell {
        width: 1.5;
        height: 1vh;
    }
    .philips {
        width: 2vw;
        height: 1vh;
    }
    .nikon {
        height: 1vh;
        width: 2;
    }
    .lenovo {
        width: 2vw;
        height: 1vh;
    }
    .bg-c {
        height: 5vh;
    }
    h2 div {
        font-size: 2.7vw;
    }
    .hrline,
    .hrLine2 {
        display: none;
    }
    .forGrid {
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .banner {
        width: 100%;
        height: 40vw;
    }
    .hero-banner {
        width: 100%;
        height: 30vh;
    }
    .t1,
    .t2 {
        font-size: .9rem;
    }
    .t3 {
        font-size: 1.5rem;
    }
    .tBox {
        font-size: 1rem;
    }
    .popular {
        flex-direction: column;
        display: flex;
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
    }
    .Box {
        width: 4rem;
        padding: .1rem;
        font-size: .4rem;
    }
    .left-arrow {
        display: none;
        top: 32%;
        padding: 1rem 0.1rem;
        width: 1rem;
    }
    .right-arrow {
        display: none;
        top: 30%;
        right: 3%;
        width: 1.2rem;
        padding: 1rem 0.5rem;
    }
    .backArrow {
        display: none;
    }
    .moveArrow {
        display: none;
    }
    .purchage {
        padding: .9rem;
    }
    html {
        font-size: 5vw;
    }
}