/* herosection */
.herosection {
    background-image: url('../images/blogherosectionpc.png');

}

/* Filter Bar*/
.filter-bar {
    text-align: center;
    padding: 30px 0;
    margin: 0 54px;
}

.filter-bar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-bar h5,
a {
    color: var(--colorwhite)
}

.filter-bar h5 {
    display: inline-block;
    margin: 0 10px;
    font-size: 24px;
}

.filter-bar a {
    text-decoration: none;
    transition: color 0.3s;
}

/* section1 */
.section-featured-article {
    margin: 0 54px;
}

.section-featured-article h1 {
    text-align: center;
    margin: 0;
}

.gradient-card-inner {
    background-color: var(--colorblack)
}

.allcontent {
    padding: 20px 0 0 0;
}

.upcontent {
    display: flex;

}

.featured {
    font-size: 40px;
    color: var(--colorwhite);
    text-align: left;
    position: absolute;
    top: 40px;
    left: 40px;
}

.category {
    margin: 0;
    opacity: 30%;
    position: absolute;
    top: 40px;
    right: 40px;
}

.boxsection1 {
    width: 100%;
    position: relative;
}

.content {
    display: flex;
    margin: 40px 0 0 0;
}

.content img {
    width: 55%;
    margin: 0 20px 0 0;
}

.rightcontent h5 {
    margin: 40px 0;
}

.rightcontent p {
    margin: 150px 0;
}

.read-more {
    text-decoration: none;
    color: var(--colorred);
    font-size: 20px;
}

/* section2 */
.tittle {
    text-align: center;
    margin: 100px 54px 20px 54px;
}

.tittle h5,
.tittle h1 {
    margin: 0;
}

.tittle h5 {
    opacity: 70%;
}

.whitecard {
    background-color: var(--colorwhite);
}

.blacktext h5,
.blacktext p {
    color: var(--colorblack);
}

.featured-section .gradient-card {
    position: relative;
    margin-top: 100px;
}

.boxsection2 {
    width: 100%;
    margin: 20px 0;
}

.right {
    margin: 0;
    opacity: 30%;
}

.gradient-card-inner {
    align-items: unset;
}

.uptittle h5 {
    margin: 0;
}

.uptittle {
    display: flex;
    justify-content: space-between;
}

.latest-articles-boxes {
    margin: 100px 54px 0;
}

.downcontent {
    margin: 40px 0 0 0;
}

p.date-latest {
    font-family: "Audiowide", sans-serif;
    margin: 0;
}

.downcontent p {
    margin: 0;
}

/* section3 */
.browse-section {
    margin: 0 54px;
}

.boxsection3 {
    width: 22.5%;
}

.text {
    margin: 0;
    width: 100%
}

.text h5 {
    margin: 0;
}

.boxgap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 100px 0;
}

/* section4 */
.emailbox {
    text-align: center;
    margin: 100px 54px;
}

.emailbox input {
    width: 40%;
    height: 50px;
    padding: 10px 20px;
    background-color: #4C4C4C;
    border-radius: 40px;
    border: 0;
    font-size: 24px;
    font-family: "Audiowide", sans-serif;
    text-align: center;
}

.emailbox p {
    opacity: 50%;
    margin: 50px 0 0 0;
}

.modal p {
    color: var(--colorblack);
    text-align: center;
}

@media screen and (max-width:1110px) {
    .boxsection3 {
        width: 44.5%;
    }

    .boxgap {
        gap: 50px;
    }
}

/* 平板响应式变化 */
@media screen and (max-width:1080px) {
    .filter-bar h5 {
        font-size: 16px;
    }

    .featured {
        font-size: 30px;
    }

    .rightcontent h5 {
        margin: 20px 0;
    }

    .rightcontent p {
        margin: 30px 0;
    }

    .content img {
        width: 100%;
    }

    .content {
        display: block;
        margin: 40px 0 0 0;
    }

    .rightcontent {
        width: 100%;
        margin: 0;
    }

    .read-more {
        font-size: 16px;
    }

    .downcontent p {
        margin: 0;
    }


}

@media screen and (max-width:800px) {
    .filter-bar h5 {
        font-size: 12px;
    }
}

@media screen and (max-width:750px) {
    .boxsection3 {
        width: 100%;
        margin: 20px 0;
    }

    .boxgap {
        gap: unset;
    }
}

/* 手机响应式变化 */
@media screen and (max-width:720px) {

    .featured {
        font-size: 20px;
    }

    .left {
        width: 70%;
    }

    .right {
        right: 10px;

    }

    .boxgap {
        margin: 50px 0;
    }

    .emailbox {
        margin: 50px 54px;
    }

    .emailbox input {
        height: 30px;
        font-size: 16px;

    }
}

@media screen and (max-width:510px) {
    .emailbox input {
        font-size: 10px;
    }
}

@media screen and (max-width:520px) {

    .downcontent p {
        margin: 10px 0 0 0;
    }
}