.draw-works {
    padding: 80px 0;
}

.container {
    /*max-width: 1200px;*/
    margin: auto;
    /*padding: 0 30px;*/
}

/* Header */
.draw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}


.treasure {
    right: -61px;
    top: -21px;
    width: 191px;
    position: absolute;
}

.process-coin {
    right: -61px;
    bottom: 350px;
    width: 127px;
    position: absolute;
}

.process-coin-bag {
    left: -35px;
    bottom: -141px;
    width: 195px;
    position: absolute;
}

@media (min-width: 1900px) {
    .treasure {
        right: -61px;
        top: -21px;
        width: 191px;
        position: absolute;
    }

    .process-coin {
        right: -61px;
        bottom: 350px;
        width: 127px;
        position: absolute;
    }

    .process-coin-bag {
        left: -35px;
        bottom: -141px;
        width: 195px;
        position: absolute;
    }
}

@media (max-width: 1900px) {
    .treasure {
        right: -61px;
        top: -21px;
        width: 191px;
        position: absolute;
    }

    .process-coin {
        right: -61px;
        bottom: 350px;
        width: 127px;
        position: absolute;
    }

    .process-coin-bag {
        left: -35px;
        bottom: -141px;
        width: 195px;
        position: absolute;
    }
}

@media (max-width: 1600px) {
    .treasure {
        right: -61px;
        top: -21px;
        width: 191px;
        position: absolute;
    }

    .process-coin {
        right: -61px;
        bottom: 350px;
        width: 127px;
        position: absolute;
    }

    .process-coin-bag {
        left: -35px;
        bottom: -141px;
        width: 195px;
        position: absolute;
    }
}

@media (max-width: 1400px) {
    .treasure {
        right: 1px;
        top: -21px;
        width: 191px;
        position: absolute;
    }

    .process-coin {
        right: -13px;
        bottom: 350px;
        width: 127px;
        position: absolute;
    }

    .process-coin-bag {
        left: -35px;
        bottom: -89px;
        width: 195px;
        position: absolute;
    }
}

@media (max-width: 1200px) {
    .treasure {
        right: 21px;
        top: -21px;
        width: 191px;
        position: absolute;
    }

    .process-coin {
        right: 9px;
        bottom: 350px;
        width: 127px;
        position: absolute;
    }

    .process-coin-bag {
        left: -9px;
        bottom: -125px;
        width: 195px;
        position: absolute;
    }
    .ribbon-img {
        max-width: 300px;
        display: block;
    }

    .draw-text li {
        font-size: 21px !important;
    }
    .ribbon-text small {
        font-size: 19px !important;
    }
    .ribbon-text strong {
        font-size: 22px !important;
    }
}

@media (max-width: 768px) {
    .treasure {
        right: 13px;
        top: -18px;
        width: 154px;
        position: absolute;
    }

    .process-coin {
        display: none;
    }

   .process-coin-bag {
        left: -13px;
        bottom: -95px;
        width: 138px;
        position: absolute;
    }
    .ribbon-img{
        max-width: 300px !important;
    }
    .draw-text li {
        font-size: 21px !important;
    }
    .ribbon-text small {
        font-size: 17px !important;
    }
    .ribbon-text strong {
        font-size: 18px !important;
    }
}
@media (max-width: 498px) {
.treasure {
        right: 13px;
        top: 48px;
        width: 83px;
        position: absolute;
    }
}

/* Rows */
.draw-row {
    display: flex;
    align-items: center;
    margin-bottom: 70px;
}

.draw-row.reverse {
    flex-direction: row-reverse;
}

/* Columns */
.draw-left,
.draw-right {
    width: 50%;
}

/* Ribbon */
.ribbon {
    max-width: 230px;
}

/* Text */
.draw-right ul,
.draw-left.text ul {
    list-style: none;
    padding-left: 0;
}

.draw-right li,
.draw-left.text li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    line-height: 1.7;
    font-size: 16px;
}

/* Gold Bullet */
.draw-right li::before,
.draw-left.text li::before {
    content: "●";
    position: absolute;
    left: 0;
    top: 2px;
    color: gold;
    font-size: 14px;
}
.draw-process {
    background: #000;
    padding: 80px 0;
    color: #fff;
}

.title-img {
    max-height: 70px;
}

.treasure-img {
    max-height: 90px;
}
.ribbon-wrap {
    position: relative;
    display: inline-block;
}

.ribbon-img {
    max-width: 340px;
    display: block;
}

.ribbon-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Rockwell", serif;
}

.ribbon-text small {
    font-size: 19px;
    margin-bottom: 4px;
    color: #FFC700;
    font-style: italic;
}

.ribbon-text strong {
    font-size: 21px;
    line-height: 1.3;
}

.draw-text {
    list-style: none;
    padding-left: 0;
}

.draw-text li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 16px;
    line-height: 1.7;
    font-size: 30px;
    color: #fff;
    font-family: "Rockwell", serif;
    text-align: justify;
}

.draw-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 28px;
    height: 28px;
    background: url("../images/process/img-5.webp") center / contain no-repeat;
}


/* ================= MOBILE CENTER ALIGN ================= */
@media (max-width: 576px) {

    .row.align-items-center {
        text-align: center;
    }

    .ribbon-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ribbon-text {
        text-align: center;
    }

    .draw-text {
        padding-left: 0;
        list-style-position: inside;
        text-align: center;
    }


    .text-end {
        text-align: center !important;
    }
    
    .red-ribbon{
        margin-bottom:15px;
    }
    
    .draw-text li::before {
        top: 6px;
    }
}