@media(max-width: 768px) {
    .round-container {
        padding: 16px 20px !important;
    }
    .round-container .round-title {
        font-size: 24px;
    }
    .round-container .round-text {
        font-size: 16px;
    }
}

.ticket-parent {
    overflow: hidden;
}
.ticket {
    border: 1px solid #379AFF;
    display: flex;
    position: relative;
    color: #379AFF;
}
.ticket-text {
    padding: 12px 18px;
    width: 150px;
    font-weight: 600;
}
.ticket-number::before,
.ticket-number::after,
.ticket-text::before,
.ticket-text::after {
    content: '';
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
}
.ticket-text::before {
    top: -10px;
    left: -10px;
    border-right: 1px solid #379AFF;
    border-bottom: 1px solid #379AFF;
    border-bottom-right-radius: 10px;
}
.ticket-text::after {
    bottom: -10px;
    left: -10px;
    border-top: 1px solid #379AFF;
    border-right: 1px solid #379AFF;
    border-top-right-radius: 10px;
}
.ticket-number {
    padding: 12px 18px;
    border-left: 1px dashed #379AFF;
    font-size: 24px;
    display: flex;
    align-items: center;
    font-weight: bold;
    position: relative;
}
.ticket-number::before {
    top: -10px;
    right: -10px;
    border-bottom: 1px solid #379AFF;
    border-left: 1px solid #379AFF;
    border-bottom-left-radius: 10px;
}
.ticket-number::after {
    bottom: -10px;
    right: -10px;
    border-top: 1px solid #379AFF;
    border-left: 1px solid #379AFF;
    border-top-left-radius: 10px;
}
.top-circle,
.bottom-circle {
    content: '';
    height: 10px;
    width: 10px;
    background: white;
    position: absolute;
    border: 1px solid #379AFF;
    border-radius: 100%;
}

.top-circle {
    top: -5px;
    left: -5.5px;
}
.bottom-circle {
    bottom: -5px;
    left: -5.5px;
}