.clock-component {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        justify-content: flex-start; /* Align items at the top */
        align-items: center; /* Center horizontally */
        width: 100%;
        height: 100%;
        position: relative;
    }

    .settings-cog-container {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

    .analogue-clock {
        position: relative;
        width: 100%;
        max-width: 400px;
        aspect-ratio: 1 / 1;
        border: 10px solid var(--bs-secondary);
        border-radius: 50%;
        background: var(--clock-bg-color, radial-gradient(circle, #f0f0f0, #e0e0e0));
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
        margin-top: 20px; /* Add spacing between the cog and clock */
    }

    .bordered-section {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 15px;
        position: relative;
        margin-bottom: 20px;
    }

    .bordered-section legend {
        font-size: 1rem;
        font-weight: bold;
        padding: 0 10px;
        position: absolute;
        top: -0.8em;
        left: 1em;
    }


    .form-label {
        white-space: nowrap;
    }

    .form-control, .form-control-color, .form-select {
        min-height: 1.8rem;
        font-size: 0.9rem;
    }

    .modal-body .row {
        align-items: center;
    }

    .clock-number {
        position: absolute;
        font-size: 1rem;
        font-weight: bold;
        color: var(--font-color, #000);
        transform: translate(-50%, -50%);
    }

    .font-serif {
        font-family: "Times New Roman", serif;
    }

    .font-sans {
        font-family: Arial, sans-serif;
    }

    .font-cursive {
        font-family: "Comic Sans MS", cursive;
    }

    .font-mono {
        font-family: "Courier New", monospace;
    }

    .hour-hand, .minute-hand, .second-hand {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 0% 50%;
        transform: rotate(0deg);
    }

    /* Hand Lengths */
    .hour-hand {
        width: 30%;
        height: 6px;
    }

    .minute-hand {
        width: 40%;
        height: 4px;
    }

    .second-hand {
        width: 45%;
        height: 2px;
    }

    /* Hand Styles by Clock Style */
    .hand-classic-hour, .hand-classic-minute, .hand-classic-second {
        background-color: var(--bs-dark);
        border-radius: 2px;
    }


    /* MODERN */
    .hand-modern-minute {
        background-color: var(--bs-dark);
        border-radius: 0px;
        height:10px;
    }
    .hand-modern-hour {
        background-color: var(--bs-warning);
        border-radius: 0px;
        height: 20px;
    }
    .hand-modern-second {
        background-color: var(--bs-primary);
        border-radius: 0px;
        height: 1px;
    }


.hand-antique-hour, .hand-antique-minute, .hand-antique-second {
    clip-path: polygon(50% 0%, 60% 20%, 100% 50%, 60% 80%, 50% 100%, 40% 80%, 0% 50%, 40% 20%);
    background-color: #6e5c3c;
}

    .hand-spooky-hour, .hand-spooky-minute, .hand-spooky-second {
        background-color: #ff6600;
        clip-path: polygon(50% 0%, 60% 20%, 70% 80%, 50% 100%, 30% 80%, 40% 20%);
    }

    .hand-barbie-hour, .hand-barbie-minute, .hand-barbie-second {
        background-color: #ff69b4;
        clip-path: polygon(50% 0%, 75% 25%, 75% 75%, 50% 100%, 25% 75%, 25% 25%);
    }

    .hand-cyber-hour, .hand-cyber-minute, .hand-cyber-second {
        background-color: #00ffff;
        clip-path: polygon(50% 0%, 70% 25%, 50% 50%, 30% 25%);
    }