.bgBox{

    background: repeating-linear-gradient(-45deg, rgba(0,0,0,.05),rgba(0,0,0,.05) 150px, rgba(0,0,0,.03) 150px, rgba(0,0,0,.03) 170px );
    z-index: 1;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sec-1 h3{
    font-style: italic;
    padding: 5px;
    background: rgb(211, 151, 62);
    color: cornsilk; 

}

.sec-1 .ul-1,.ul-2,.ul-3{
    font-size: 1.2rem;
    width: 70%;
    list-style: none;
}

.sec-1 .ul-1 li, .sec-1 .ul-2 li, .sec-1 .ul-3 li{
    position: relative;
}

.ul-1 li:not(:last-child), .ul-2 li:not(:last-child), .ul-3 li:not(:last-child){
    margin-bottom: 1rem;
}


.ul-1 span, .ul-2 span, .ul-3 span{
    font-size: .7rem;
    position: absolute;
    width: 30px;
    top: 7px;
    left: -35px;
    background: darkcyan !important;
}

.table{
    counter-reset:item; 
}


.table > tbody > tr > td > a{
    counter-increment:item;
    position: relative;
}

.table > tbody > tr > td > a::before{
    position: absolute;
    display: block;
    content: counter(item);
    width: 25px;
    height: 15px;
    background: darkcyan;
    color: #fff;
    top: 4px;
    left: -30px;
    line-height: 14px;
    font-size: .6rem;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.table-responsive-md{
    width: 95% !important;
}

.table{
    width: 750px !important;
}

.table > tbody > tr > td {
    vertical-align: middle !important;
}

.table > tbody > tr > td:first-child {
    text-align: right !important;
    padding-right: 4rem; 
}

.table img{
    width: 200px;
    height: 50px;
}

.counter{
    width: 250px;
    height: 200px;
    margin: 0 auto;
    
}

#counter-img{
    width: 100%;
    height: 100%;
}

#end{
    height: 20px;
    font-size: .8rem;
}

@media only screen and (max-width: 768px) {
 
    .sec-1 .ul-1, .sec-1 .ul-2, .sec-1 .ul-3{
        width: 90%;
    }

.table{
    width: 500px !important;
}

    .table > tbody > tr > td:first-child {
        text-align: right !important;
        padding-right: 1rem !important; 
    }
    

    .table > tbody > tr > td:last-child {
        text-align: left !important;
    }
    

}
@media only screen and (max-width: 400px) {

    .table img{
        width: 150px;
        height: 40px;
    }
    .table > tbody > tr > td > a::before{
      
        top: 2px;
        left: -30px;     
    }

    .ul-1 span, .ul-2 span, .ul-3 span{
       top: 5px;
        
    }
    
    .counter{
        width: 200px;
        height: 150px;
        margin: 0 auto;
    }
    

}