footer.footer-nav {
    /* background-color:white; */
    border-top:1px solid #ccc;
    margin-top:50px;
}
footer.footer-nav .container .row .col-back {
    border-right:1px solid #ccc;
    background-image: url("../i/back.png");
    background-position: center left 20px;
    background-repeat: no-repeat;
    background-size: auto;
    padding-left:35px;
}
footer.footer-nav .container .row .col-next {
    background-image: url("../i/next.png");
    background-position: center right 20px;
    background-repeat: no-repeat;
    background-size: auto;
    text-align:right;
    padding-right:35px;
}

footer.footer-nav a {
    display:block;
    width:100%;
    padding:25px;
    text-decoration:none;
}
footer.footer-nav a span{
    font-size:21px;
    font-weight:bold;
    color:#000000;
}
footer.footer-nav a.footernav-back::before {
    content:"BACK";
    color:#999;
    display:block;
    font-size:16px;
    font-weight:600;
}
footer.footer-nav a.footernav-next::before {
    content:"NEXT";
    color:#999;
    display:block;
    font-size:16px;
    font-weight:600;
}


footer.footer-top {
    background-color: #000000;
    /* margin-top:100px; */
}
footer.footer-top .container {
    padding-top:110px;
    background-image: url("../i/bg-sparks.png");
    background-repeat: no-repeat;
    background-position: left 0 bottom -50px;
    background-size: 236px; 
    padding-bottom:140px; /* put but 50px when we add the chinese pdf link*/
}
footer.footer-top div.footer-title {
    color:#c00;
    font-weight:600;
    font-size:38px;
    line-height: 48px;
}
footer.footer-top div.footer-title .line-text {
    position: relative;
    display: block;
    color: #fff;
    font-size: 50px;
    line-height: 48px;
    width: fit-content;
}

footer.footer-top div.footer-title .line-text::after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    right: 0;
    bottom: -10px;
    border-bottom: 1px solid #cc0000;
}

footer.footer-top ul {
    border-top:1px solid rgba(255, 255, 255, 0.6);;
    border-bottom:1px solid rgba(31, 29, 29, 0.6);;
}
footer.footer-top ul li.list-group-item {
    background:none;
    padding: 20px 0;
    background-image: url('../i/arrow.png');
    background-repeat: no-repeat;
    background-position: right center; 
    background-size: auto 20px; /* Adjusts size (width auto, height 20px) */
    padding-right: 40px;
    border-color:rgba(255, 255, 255, 0.6);
}
footer.footer-top ul li.list-group-item a {
    color:white;
    font-size:18px;
    font-weight:600;
    text-decoration:none;
}

footer.footer-top .livemore {
    font-family: 'livemore';
    color: #cc0000;
    font-weight: normal;
    font-size: 50px;
    line-height: 41px;
    letter-spacing: -2px;
}



footer.footer-bottom {
    background-color:white;
}
footer.footer-bottom a {
    color:#000000;
    text-decoration:none;
}
footer.footer-bottom a:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}



/* media max-width styles */
@media (max-width: 576px) {

    footer.footer-nav a span,
    footer.footer-nav a br{
        display:none;
    }
    
    footer.footer-top .container {
        padding-bottom:180px;
    }

    footer.footer-nav .container .row .col-back {
        background-size: 5%;
        background-position: center left 10px;
        padding-left:15px;
    }
    footer.footer-nav .container .row .col-next {
        background-size: 5%;
        background-position: center right 10px;
        padding-right:15px;
    }

}

@media (max-width: 992px) {

    footer.footer-top div.footer-title {
        font-size: 28px;
        line-height: 36px;
    }

    footer.footer-top div.footer-title .line-text {
        font-size: 40px;
        line-height: 36px;
    }

}


/* media min-width styles */

/* Small devices (sm, ≥576px) */
@media (min-width: 576px) {

}

/* Medium devices (md, ≥768px) */
@media (min-width: 768px) {

}

/* Large devices (lg, ≥992px) */
@media (min-width: 992px) {

}

/* Extra large devices (xl, ≥1200px) */
@media (min-width: 1200px) {
  
}

/* Extra extra large devices (xxl, ≥1400px) */
@media (min-width: 1400px) {

    /* override container class to have maximum width of 1140px */
    .container {
        max-width: 1140px !important;
    }

}
@media (min-width: 768px) and (max-width: 1024px) {

    footer.footer-top .container {
        padding: 110px 20px 135px;
        background-position: left 0 bottom -35px;
        background-size: 200px;
    }

}

@media (max-width: 767.9px) {
    footer.footer-top .container {
        max-width: 100%;
        padding: 110px 16px 135px;
        background-position: left 0 bottom -35px;
        background-size: 200px;
    }
}