@media screen and (max-width : 28rem) {

    .main-div {
        width: 100%;
    }

    /* header section start */

    /* hero section start */
    .header {
        padding: 1rem 1rem;
    }

    .header>img {
        width: 3.938rem;
    }

    .header nav ul li a {
        display: none;
    }

    .card {
        display: block;
        display: flex;
        align-items: center;
    }

    /* hero section end */

    /* Banner section start */
    .Banner {
        padding: 0;
        display: grid;
        grid-template-columns: 1;
        grid-template-rows: 2;
        grid-template-areas: "box-1"
            "box-2";
    }

    .Banner>img {
        margin-top: 3rem;
        grid-area: box-1;
        width: 100%;
    }

    .Banner>div {
        width: 100%;
        grid-area: box-2;
        margin-top: 1rem;
        padding: 0.5rem;
    }

    .Banner>div h1 {
        font-size: 7vw;
        margin-bottom: 0rem;
    }

    .Banner>div p {
        margin-top: 0.6rem;
        font-size: 3.8vw;
    }

    /* Banner section end */
    /* header section end */

    /* main section start */
    /* Plants Section start */
    .Plants {
        padding: 0;
    }

    .Our-Plants {
        margin-bottom: 1.5rem;
        margin-top: 2.58rem;
    }

    .Our-Plants>h1 {
        font-size: 9vw;
    }

    .Our-Plants>p {
        width: 90vw;
        font-size: 3.8vw;
    }

    .Our-Plants>p br {
        display: none;
    }

    .Our-Plants-card {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 45%);
        grid-template-rows: repeat(6, auto);
        grid-template-areas:
            "box-1 box-2 "
            "box-3 box-4"
            "box-5 box-6";
        gap: 1.22rem;
    }

    .box {
        gap: 0.8rem;
    }

    .box-7,
    .box-8 {
        display: none;
    }

    /* Plants Section end */

    /* Plants Lover Section start */
    .Plants-Lover-Section {
        padding: 0rem 0.8rem;
        flex-direction: column;
        justify-content: flex-start;
        gap: 1rem;
    }

    .Plants-Lover-Section>img {
        width: 100%;
    }

    .Plants-Lover-Section>div {
        width: 100%;
    }

    .Plants-Lover-Section>div img {
        display: none;
    }

    .Plants-Lover-Section>div h1 {
        font-size: x-large;
    }

    .Plants-Lover-Section>div ul {
        padding-left: 1.5rem;
    }

    .Plants-Lover-Section>div ul li p {
        font-size: 3.6vw;
    }

    .img-1{
        background: rgba(0,0,0,0.6)url(../assets/deal-ana.png);
        background-size: cover;
    }

    .img-2{
        background: rgba(0,0,0,0.6)url(../assets/deal-bloom.png);
        background-size: cover;
    }

    .img-3{
        background: rgba(0,0,0,0.6)url(../assets/deal-zabo.png);
        background-size: cover;
    }

    /* Plants Lover Section end */
    /* Latest Deals section start */
    .Latest-Deals {
        padding: 0rem 0.8rem;
    }

    .Latest-Deals-title {
        padding-top: 3rem;
    }

    .Latest-Deals-title h1 {
        font-size: 2rem;
    }

    .Latest-Deals-title p {
        font-size: 3.6vw;
        width: 85vw;
        margin-bottom: 2rem;
    }

    .Latest-Deals-image {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: repeat(3, 12rem);
        grid-template-areas:
            "img-1"
            "img-2"
            "img-3";
        gap: 1rem;
    }

    /* Latest Deals section end */
    /* Join Section start */
    .Join-Section {
        height: 17.25rem;
        background-size: cover;
        gap: 1rem;
        margin-top: 1.8rem;
    }

    .Join-Section>h1 {
        font-size: 1.2rem;
    }

    .Join-Section>div {
        display: flex;
        align-items: center;
    }

    .Join-Section>div>input {
        width: 50vw;
        height: 2.5rem;
        padding: 0.5rem 0.8rem;
    }

    .Join-Section>div>button {
        width: 29vw;
        height: 2.5rem;
        padding: 0.5rem;
    }

    /* Join Section end */

    /* main section end */

    /* footer section start */
    footer {
        padding: 3.125rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .Website-logo-div-1>p {
        width: 90vw;
        font-size: 1.2rem;
        color: #00000075;
        margin-top: 1rem;
    }

    .Website-logo-div-1>img {
        width: 8rem;
        height: auto;
    }

    .Website-logo-div-2,
    .Website-logo-div-3 {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .Website-logo-div-4 {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    /* footer section end */

}