.wd-page-content{
            background-image: url('/wp-content/themes/woodmart/img/singlechabg.webp');
            background-repeat: no-repeat;
            background-size:100% 100%;
        }
.challenge {
    position: relative;
    width: 100%;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 0; 
    z-index: 1;
    overflow: hidden; 
    border:1px solid #ccc;
    margin-top:20px;
}

.content {
    flex: 1;
    padding: 40px; 
}
.content p{
    margin: 0px;
    font-family: 'OPPO Sans 4.0';
    font-weight: bold;
}
h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #333;
    font-family: 'OPPO Sans 4.0';
}

.rules-list {
    list-style: none;
    padding: 0;
    color: #555;
    line-height: 1.8;
}

.rules-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
}

.rules-list li::before {
    content: counter(list-item) ".";
    counter-increment: list-item;
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #333;
}

.social-icons {
    margin-top: 30px;
}

.social-icons a {
    color: #fff;
    margin-right: 10px;
    font-size: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
}

.fa-facebook-f { background-color: #3b5998; }
.fa-line { background-color: #00B900; }
.fa-twitter { background-color: #1da1f2; }
.fa-whatsapp { background-color: #25d366; }
.fa-pinterest-p { background-color: #e60023; }
.fa-tumblr { background-color: #35465c; }
.fa-linkedin-in { background-color: #0077b5; }

.image-container {
    flex: 1;
    display: flex;
    align-self: stretch; 
}

.markers-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    position: relative;
    z-index: 2;
}

.get-started-btn {
    display: block;
    width: 180px;
    margin: 40px auto 0;
    padding: 15px 30px;
    background-color: #F43B51; 
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 138, 128, 0.5);
    transition: transform 0.2s;
}

.get-started-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}
.wd-prefooter{
    display: none;
}
.pum-container {
    border-radius: 5px !important;
}
/* --- 移动端适配代码 --- */
@media (max-width: 768px) {
    .challenge {
        /* 
         * 核心改动：将 flex 的方向改为垂直排列。
         * 使用 "column-reverse" 可以直接将第二个元素（图片）放到第一个元素（文本）的上面。
        */
        flex-direction: column-reverse;
    }

    .content {
        /* 在小屏幕上，减小内边距，让内容区域更宽 */
        padding: 30px 20px;
    }
    
    .image-container {
        /* 确保图片容器宽度为100% */
        width: 100%;
        /* 在垂直布局中，它不再需要拉伸 */
        align-self: auto;
    }

    .markers-image {
        /* 为顶部的图片设置一个固定的高度，使其看起来像一个横幅 */
        height: 250px; 
        /* 确保图片的圆角与容器一致，因为现在它在最顶部 */
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    h1 {
        /* 在小屏幕上可以适当减小标题字号 */
        font-size: 2em;
    }
    .social-icons a{
        font-size: 14px;
        width:30px;
        height: 30px;
        margin-right: 0px;
    }
}