@font-face {
    font-family: 'dinarbold';
    src: url('fonts/alfont_com_GE-Dinar-One-Bold-1.otf') format('opentype');
}
@font-face {
    font-family: 'dinarlight';
    src: url('fonts/dinar-light.otf') format('opentype');
}
@font-face {
    font-family: 'dinarmedium';
    src: url('fonts/dinar-medium.otf') format('opentype');
}
.font-dinarbold {
    font-family: 'dinarbold';
}

.font-dinarlight {
    font-family: 'dinarlight';
}

.font-dinarmedium {
    font-family: 'dinarmedium';
}

<!--Home -->
.bg-s4 {
    background-image: url('/images/patern-s4.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}
.bg-s6 {
    background-image: url('/images/bg-s6.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
<!-- Job-id -->
ol li::before {
    content: "";
    /*margin-right: 0.5rem;*/
    background: #808184;
    color: white;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    display: inline-grid;
    line-height: 1.2em;
}
ol ol li::before {
    background: darkorchid;
    margin: 15%;
    padding: 15%;
}


/* Style the custom button */
.custom-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #ffffff;
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.custom-button:hover {
    background-color: #fff;
}
<!-- -->
@font-face {
    font-family: 'dinarbold';
    src: url('fonts/alfont_com_GE-Dinar-One-Bold-1.otf') format('opentype');

}

@font-face {
    font-family: 'dinarlight';
    src: url('fonts/dinar-light.otf') format('opentype');

}

@font-face {
    font-family: 'dinarmedium';
    src: url('fonts/dinar-medium.otf') format('opentype');

}


.font-dinarbold {
    font-family: 'dinarbold';
}

.font-dinarlight {
    font-family: 'dinarlight';
}

.font-dinarmedium {
    font-family: 'dinarmedium';
}


/* Style for file name display */
.file-name {
    margin-top: 10px;
}
<!-- -->