@media only screen and (max-width:1024px) {
    .box {
        height: 410px;
    }

    .box2 img {
        width: 100%;
    }

    .box2-text h4 {
        font-size: 35px;
        margin-top: 0;
    }

    .box2-text p {
        font-size: 14px;
        padding: 5px;
    }

    .box4 h2 {
        font-size: 35px;
    }

    .circle-post h2 {
        font-size: 15px;
    }

    .explore h5 {
        font-size: 35px;
    }

}

/* ------- Responsive for 992 px Screen -------- */

@media only screen and (max-width:992px) {
    .box {
        margin-top: 20px;
    }

    .Popular {
        padding: 8px 70px;
    }

    .Popular1 {
        padding: 8px 70px;
    }

    .box2-text p {
        font-size: 13px;
    }

    .footer ion-icon {
        margin-left: 42%;
    }
}

/* ------- Responsive for 576 px Screen -------- */
@media only screen and (max-width:576px) {
    .box2 {
        margin-top: 20px;
    }

    .box2-text p {
        font-size: 16px;
        padding-block: 50px;
    }

    .gellery2 {
        top: 57%;
        left: 85%;
    }

    .gellery3 {
        top: 57%;
        left: 85%;
    }

    .heading {
        font-size: 30px;
    }

    .box2-text h4 {
        font-size: 30px;
    }

    .box4 h5 {
        font-size: 30px;
    }

    .explore h5 {
        font-size: 30px;
    }

    .positioning {
        left: 3%;
        width: 90%;
        padding: 10px;
    }

    .positioning h2 {
        font-size: 16px;
    }

    .positioning p {
        font-size: 12px;
    }

    .footer ion-icon {
        margin-left: 40%;
    }
}

/* ------- Responsive for 480px Screen -------- */
@media only screen and (max-width:480px) {
    .box {
        padding: 20px;
    }

    .gellery {
        left: 85%;
        top: 48%;
    }

    .gellery2 {
        top: 53%;
    }

    .gellery3 {
        top: 54%;
    }
}

/* ------- Responsive for 480px Screen -------- */
@media only screen and (max-width:414px) {
    .box {
        padding: 20px;
    }
    .Popular {
        padding: 8px 30px;
    }
.main2 img{
    border-radius: 20px;
}
    .Popular1 {
        padding: 8px 30px;
    }
    .gellery {
        left: 80%;
        top: 38%;
    }

    .gellery2 {
        top: 51%;
        left: 80%;
    }

    .gellery3 {
        top: 51%;
        left: 80%;
    }
}

/* ------- Responsive for 390 px Screen -------- */

@media only screen and (max-width:390px) {
    .Popular {
        padding: 8px 30px;
    }

    .Popular1 {
        padding: 8px 30px;
    }

    .box2-text p {
        padding-block: 10px;
        font-size: 12px;
    }

    .gellery2 {
        top: 40%;
        left: 80%;
    }

    .gellery3 {
        top: 40%;
        left: 80%;
    }

    .last-footer h6 {
        margin-block: 15px;
    }
}

/* ------- Responsive for 390 px Screen -------- */

@media only screen and (max-width:360px) {
    .Popular {
        padding: 7px 20px;
    }

    .Popular1 {
        padding: 7px 20px;
    }

    .box {
        padding: 15px;
    }

    .gellery {
        left: 80%;
        top: 33%;
    }

    .box2-text p {
        padding-block: 10px;
        font-size: 12px;
    }

    .gellery2 {
        top: 36%;
        left: 78%;
    }

    .gellery3 {
        top: 47%;
        left: 80%;
    }

    .last-footer h6 {
        margin-block: 15px;
    }
}