.adj-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.adj-image-container {
    position: relative;
    width: 100%;
    height: 0;   
    padding-top: 43.5%;
    background-image: url('/Pics/os_part2.JPG');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}

.adj-line {
    position: absolute;
    top: 82%; 
    left: 50.2%;
    width: 35%;
    height: 5px;
    background-color: #ff4d4d;
    transform-origin: left center;
    transform: rotate(0deg);
    margin-top: -2.5px;
    z-index: 2;
}

/* Chrome/Safari/Edge */
#adj-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px; 
    border-radius: 4px;
    background: transparent; 
}

#adj-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px; 
    margin: 15px 0;
    cursor: pointer;
    border-radius: 4px;
    background: #e0e0e0; 
}
    #adj-slider:focus {
        outline: none;
    }

    #adj-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: var(--accent); 
        cursor: pointer;
        margin-top: -6px; 
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    #adj-slider::-moz-range-thumb {
        height: 20px;
        width: 20px;
        border: none;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

.adj-container .angle-text-label {
    position: absolute;
    top: 55%;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    z-index: 3;
}

.adj-container .label-alpha {
    left: 4%;
}

.adj-container .label-beta {
    right: 4%;
}