.main-banner {
    background-image: url('../images/banner1.jpg');
    height: 552px;
}

.main-banner .content {
    max-width: 633px;
}

@media screen and (max-width: 1023px) {
    .main-banner {
        height: 195px;
    }
}

.popular {
    display: flex;
    justify-content: space-between;
    margin-top: 72px;
    background-image: url('../images/popular.png');
    background-repeat: no-repeat;
    background-position: 10px top;
}

@media screen and (max-width: 500px) {
    .popular {
        background-size: clamp(160px, 45vw, 403px);
    }
}

.popular h3 {
    padding-top: 45px;
    font-weight: 700px;
    font-size: 42px;
    margin-bottom: 12px;
}

.popular span {
    font-weight: 500px;
    font-size: 30px;
}

.popular p {
    margin-top: 25px;
    font-weight: 400;
    font-size: 20px;
}

.popular img {
    margin-left: 180px;
    width: 403px;
    height: 403px;
}

.popular .btn {
    margin-top: 25px;
    display: block;
}

@media screen and (max-width: 1023px) {
    .popular {
        margin-top: 29px;
    }

    .popular h3 {
        font-size: 18px;
    }

    .popular span {
        font-size: 16px;
    }

    .popular p {
        display: none;
    }

    .popular img {
        width: 152px;
        height: 152px;
        margin: 19px;
    }

    .popular .btn {
        margin-top: 12px;
        display: block;
    }
}


.special-offer {
    margin-top: 69px;
}

.special-offer .cate-header {
    margin-bottom: 46px;
}

@media screen and (max-width: 1023px) {
    .special-offer {
        margin-top: 30px;
    }
}


.about-banner {
    background-image: url('../images/aboutus.jpg');
    height: 600px;
}

.about-banner .content {
    max-width: 856px;
}

.about-banner p {
    font-size: 20px;
    font-weight: 600;
    line-height: 35px;
    text-align: left;
}

@media screen and (max-width: 1023px) {
    .about-banner {
        height: 340px;
    }

    .about-banner p {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
}

.recent-posts {
    margin-bottom: 42px;
}

.recent-posts .cate-header {
    margin-top: 99px;
    margin-bottom: 32px;
}

.recent-posts ul {
    list-style: none;
    font-weight: 700;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(364px, 1fr));
    gap: 36px;

    justify-content: center;
    padding: 0;
    margin: 0 auto;
}

.recent-posts li {
    width: 100%;
    max-width: 364px;
    margin: 0 auto;
}

.recent-posts ul a {
    color: var(--primary-light-gray-color);
}

.recent-posts li img {
    width: 100%;
    height: auto;
    display: block;
}

.recent-posts li h4 {
    color: black;
    font-size: 22px;
    margin-top: 22px;
    margin-bottom: 5px;
}

.recent-posts li span {
    font-size: 16px;
    line-height: 32px;
    font-weight: 600;
}

.recent-posts li p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    margin-top: 8px;
    margin-bottom: 20px;
}

.recent-posts li .btn {
    width: 168px;
    font-size: 18px;
    color: white;
}

@media screen and (max-width: 1023px) {
    .recent-posts .cate-header {
        margin-top: 44px;
        margin-bottom: 18px;
    }
}

.nevermiss-banner {
    background-image: url('../images/nevermissout.jpg');
    height: 507px;
}

.nevermiss-banner .content {
    max-width: 534px;
}

.nevermiss-banner p {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
}

@media screen and (max-width: 1023px) {
    .nevermiss-banner {
        height: 240px;
    }

    .nevermiss-banner p {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
}