body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

.header-image {
    width: 100%;
    height: 100vh; /* Full viewport height */
    background-image: url('/Images/Home/hometop.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

.header-content {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    color: rgba(249, 161, 60, 1);
    width: 100%;
}

    .header-content h2 {
        margin: 0;
        font-size: 24px;
    }

    .header-content p {
        margin: 5px 0;
        font-size: 16px;
    }

.arrow-down {
    margin-top: 20px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.navbar-fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.top-content {
    padding: 20px;
    margin-top: 50px; /* Space for the navbar when it's not fixed */
}

.c-ju {
    color: rgba(249, 154, 43, 1);
}

.content-section {
    display: flex;
    align-items: center;
    padding: 20px 0;
    font-size: 20px;
    align-items: flex-start;
    color: #6B6B6B;
}

    .content-section > img {
        max-height: 1.5em; /* Set image height to match line height of paragraph */
        margin-right: 20px;
        vertical-align: top;
    }

    .content-section > span {
        max-height: 1.5em; /* Set image height to match line height of paragraph */
        margin-right: 20px;
        vertical-align: top;
        margin-top: -3px;
        color: #FFC810;
    }

    .content-section p {
        margin: 0;
        line-height: 1em; /* Ensure consistent line height for paragraph */
    }

.cd {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: visible;
    border: 3px #f99a2b solid;
    box-sizing: border-box;
    margin-top: 20px;
}

.cd-title {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f99a2b;
    padding: 10px 20px;
    border-radius: 30px;
    z-index: 1;
    width: 70%;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

    .cd-title h1 {
        margin: 0;
        font-size: 1.2em;
        color: #ffffff;
    }


.countdown {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5em;
    font-weight: bold;
    color: black;
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
}

    .countdown span {
        font-size: 16px;
        color: #6b6b6b;
        margin: 0 5px;
    }

#ActivityIntroduction, #mystory {
    background-color: #FBECDC;
    font-size: 20px;
}



    #ActivityIntroduction p, #mystory p, #DonationRecords p {
        padding: 0 20px 40px 20px;
    }


/*timeline*/
:root {
    --primary-color: #212121;
    --background-color: #111;
    --font: sans-serif;
}



/*====================== Timeline Container=============================== */
.timeline, #Quotations {
    width: 100%;
    overflow: hidden;
}

#DonationRecords {
    font-size: 20px;
}

    #timeline > img, #Quotations > img, #mystory > img, #DonationRecords > img {
        height: 121px;
    }

/* Card container */
.card {
    position: relative;
    width: 100%;
}

    /* setting padding based on even or odd */
    .card:nth-child(even) {
        padding: 30px 0 30px 30px;
    }

    .card:nth-child(odd) {
        padding: 30px 30px 30px 0;
    }
    /* Global ::before */
    .card::before {
        content: "";
        position: absolute;
        width: 50%;
        border: dashed #F9A13C;
    }

    /* Setting the border of top, bottom, left */
    .card:nth-child(even)::before {
        left: 0px;
        top: -4.5px;
        bottom: -4.5px;
        border-width: 5px 0 5px 5px;
        border-radius: 50px 0 0 50px;
    }

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
    .card:nth-child(even)::before {
        top: -5px;
        bottom: -5px;
    }
}

/* Setting the border of top, bottom, right */
.card:nth-child(odd)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 5px 5px 5px 0;
    border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.card:first-child::before {
    border-top: 0;
    border-top-right-radius: 0;
    margin-top: 58px;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
    display: flex;
    flex-direction: column;
    color: #6B6B6B;
    border-radius: 10px;
    padding: 10px;
    font-size: 20px;
}

.card:nth-child(even) .info {
    align-items: end;
}

/* Title of the card */
.card .title {
    color: white;
    position: relative;
    background-color: #FFC810;
    width: max-content;
    padding: 20px;
    font-size: 30px;
    font-weight: bold;
}

    /* Timeline dot  */
    .card .title::before {
        /*content: "";*/
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 999px;
        border: 3px solid orangered;
    }

.card:nth-child(odd) .title {
    margin-left: -20px;
    border-end-end-radius: 50px;
    border-start-end-radius: 50px;
}

.card:nth-child(even) .title {
    margin-right: -20px;
    border-end-start-radius: 50px;
    border-start-start-radius: 50px;
}

/* text right if the card is even  */
.card:nth-child(even) > .info > .title {
    text-align: right;
}

/* setting dot to the left if the card is odd */
.card:nth-child(odd) > .info > .title::before {
    left: -45px;
}

/* setting dot to the right if the card is odd */
.card:nth-child(even) > .info > .title::before {
    right: -45px;
}

.outer {
    padding: 5px;
}

.map-line {
    padding: 0 20px 20px;
}

    .map-line > h1 {
        margin: 30px 0;
    }

    .map-line img {
        width: 100%;
    }



/*@*=======活动发起人=======*@*/
#initiator, #About {
    background-color: #FBECDC;
    font-size: 20px;
    width: 100%;
    overflow: hidden;
    padding-bottom: 30px;
}

    #initiator > img, #About > img, #ActivityIntroduction > img {
        height: 121px;
    }

.initiator-tabBar {
    color: white;
    font-size: 40px;
    border-radius: 100px;
    height: 80px;
    width: 80px;
    line-height: 80px;
    background-color: #FFC810;
    text-align: center;
}

.initiator-title {
    display: flex;
}

.initiator-tabBar-plan {
    display: flex;
    height: 100%;
    align-items: center;
    padding-right: 15px;
    justify-self: right;
}

.bc-b3 {
    background-color: #b3b3b3;
}

.initiator-content {
    color: #6B6B6B;
    padding: 0 20px;
}

    .initiator-content .head-img {
        height: 200px;
        margin: 30px auto;
    }

.name {
    font-size: 36px;
    padding-bottom: 30px;
}

.sir {
    font-size: 20px;
    padding-bottom: 30px;
}

.marathon {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: visible;
    border: 3px #f99a2b solid;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 30px 0 0px 30px;
    background-color: white;
}

.marathon-title {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f99a2b;
    padding: 10px 20px;
    border-radius: 30px;
    z-index: 1;
    width: 70%;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.marathon-img {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 70%;
    text-align: center;
}


.marathon-title h1 {
    margin: 0;
    font-size: 20px;
    color: #ffffff;
}

.marathon-content {
    padding: 10px;
}

.carousel-About-generic .marathon-content {
    min-height: 368px;
}

.home-flex {
    display: flex;
}

.big-btn {
    font-size: 1.5em;
    color: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.big-btn-left {
    background-color: #FF3D7D;
}

.big-btn-right {
    background-color: #F9A13C;
}

.home-flex-item {
    flex: 1;
    padding: 10px;
}

.home-small-title {
    font-size: 0.7em;
}

.Quotations-img {
    width: 100%;
    padding: 20px 20px 50px;
    color: #6B6B6B;
    font-size: 20px;
}

    .Quotations-img > img {
        width: 100%;
        padding-bottom: 20px;
    }

.About-Conten {
    padding: 0 20px 0;
    color: #6B6B6B;
    font-size: 20px;
}

.pd-20 {
    padding: 20px;
}

.pl-20 {
    padding-left: 20px;
}

.about-marathon {
    border-radius: 30px;
    text-align: center;
    padding: 0;
}

    .about-marathon img {
        width: 90%;
    }

.bold-sapn {
    font-size: 30px;
    color: rgba(249, 154, 43, 1);
    font-weight: bold;
}

.Acknowledgments {
    padding: 30px 20px;
    background-color: white;
}

.flex1 {
    flex: 1;
}

.Acknowledgments img {
    height: 80px;
    color: #6B6B6B;
}

.Acknowledgments-t1 {
    font-size: 30px;
    color: #6B6B6B;
    font-weight: bold;
}

.Acknowledgments-t2 {
    font-size: 24px;
    color: #6B6B6B;
    font-weight: bold;
}

.pl-10 {
    padding-left: 10px;
}

.Acknowledgments-list {
    font-size: 20px;
    color: #6b6b6b;
    line-height: 35px;
    padding-top: 30px;
}

/*@*====================footer=============*@*/


a {
    color: black;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none; /* 鼠标悬停时可以显示下划线，根据需要设置 */
    }

    a:visited {
        text-decoration: none;
    }

    a:link {
        text-decoration: none; /* 未访问链接的下划线 */
    }

.runner-info {
    font-size: 20px;
    color: #6b6b6b;
    padding: 20px 20px 0;
}

    .runner-info .marathon-content {
        margin-top: 70px;
    }

.c-hui {
    color: #6b6b6b;
}

.proccesChatrs {
    height: 300px;
    width: 100%;
}

.d-flex {
    display: flex;
    align-items: center;
}

.pd-left10 {
    padding-left: 10px;
}
.pd-right20 {
    padding-right: 20px;
}

.scorll-row {
    padding: 20px;
    display: flex;
    align-items: start;
    border-bottom: 1px solid #6b6b6b;
}

.row-firstname {
    font-size: 30px;
    background-color: rgba(249, 154, 43, 1);
    border-radius: 50%;
    width: 63px;
    height: 63px;
    text-align: center;
    line-height: 63px;
    font-weight: 500
}

.row-bigfont {
    font-size: 30px;
    font-weight:500;
}

.scorll {
    max-height: 670px;
    overflow: auto;
}