.timezone .circletimearrow, .circletimecurrentlyhere {
    position: absolute;
    left: 40%;
    z-index: 5;
}

.timezone .circletimearrow {
    transform: rotate(120deg);
    top: 110px;
}

.timezone .circletimecurrentlyhere {
    transform: rotate(-20deg);
    top: 170px;
    left: 60%;
}

.timezone {
    width: 320px;
    display: inline-block;
    background: white;
    position: relative;
    padding: 10px 10px 20px 10px;
    margin: -56px 80px 40px 80px;
}

.timezone .label {
    font-size: 22px;
    margin-bottom: 10px;
}

.timezone .time {
    font-size: 66px;
    font-weight: 600;
    line-height: 40px;
    text-align: right;
    padding: 0;
}

.timezones {
    margin-top: 160px;
}

.faketraceshadow,
.faketraceshadow_short{
    box-shadow:
        0px 0.2px 0.6px rgba(0, 0, 0, 0.02),
        0px 0.5px 1.3px rgba(0, 0, 0, 0.028),
        0px 1px 2.5px rgba(0, 0, 0, 0.035),
        0px 1.8px 4.5px rgba(0, 0, 0, 0.042),
        0px 3.3px 8.4px rgba(0, 0, 0, 0.05),
        0px 8px 20px rgba(0, 0, 0, 0.07)
        ;
}

.faketraceshadow_long,
.faketraceshadow:hover,
.faketraceshadow_short:hover{
    box-shadow:
        0px 0.6px 1.1px rgba(0, 0, 0, 0.02),
        0px 1.3px 2.7px rgba(0, 0, 0, 0.028),
        0px 2.5px 5px rgba(0, 0, 0, 0.035),
        0px 4.5px 8.9px rgba(0, 0, 0, 0.042),
        0px 8.4px 16.7px rgba(0, 0, 0, 0.05),
        0px 20px 40px rgba(0, 0, 0, 0.07)
        ;
}


/* smaller desktop / tablet */
@media (max-width: 1024px) {
    .timezones { gap: 18px; margin-top: 100px; }
    .timezone { width: calc(50% - 24px); min-width: 240px; }
    .timezone .circletimearrow { top: 90px; }
    /* .timezone .circletimecurrentlyhere { top: 150px; } */
    .timezone .circletimecurrentlyhere { top: 185px; }
    .timezone.faketraceshadow {margin-top: 0;}
}

/* mobile: stack clocks vertically and tighten spacing */
@media (max-width: 768px) {
    .timezones {
        margin-top: 60px;
        gap: 12px;
    }
    .timezone {
        width: 100%;
        max-width: 620px;
        padding: 12px;
        margin: 0 auto;
    }
    .timezone .label { font-size: clamp(14px, 3.2vw, 20px); }
    .timezone .time { font-size: clamp(30px, 9.5vw, 48px); text-align: right; }
    .timezone.faketraceshadow {margin-top: 30px;}

    /* move and reduce images so they don't overlap important content on small screens */
    .timezone .circletimearrow {
        left: 50%;
        top: 70px;
        transform: translateX(-50%) rotate(120deg);
        width: clamp(28px, 8vw, 60px);
    }
    /* .timezone .circletimecurrentlyhere {
        left: 50%;
        top: 120px;
        transform: translateX(-50%) rotate(-20deg);
        width: clamp(28px, 8vw, 60px);
    } */
}

/* very small phones */
@media (max-width: 640px){
     .timezone .circletimecurrentlyhere {
    transform: rotate(-20deg);
    top: 167px !important;
    left: 50% !important;
}
}

@media (max-width: 420px) {
    .timezones { margin-top: 50px; gap: 10px; padding: 0 8px; }
    .timezone { padding: 10px; border-radius: 6px; }
    .timezone .time { font-size: clamp(24px, 12vw, 40px); }
    /* .timezone .circletimearrow, .timezone .circletimecurrentlyhere { width: clamp(22px, 10vw, 48px); } */
    .timezone.faketraceshadow {margin-top: 30px;}
    .timezone .circletimecurrentlyhere {
        transform: rotate(-20deg);
        top: 130px !important;
        left: 53% !important;
}
}

/* New */