.gauge-container {
    /* margin: 50px; */
    margin-top: 50px;
    position: relative;
    width: 300px;
    height: 150px;
    overflow: visible;
    display: flex;
    justify-content: center; /* Center horizontally */
    /* align-items: center;     Center vertically */
    margin: 50px auto;   
}

.gauge {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        var(--c1) 0% 6.25%, 
        var(--c2) 6.25% 12.5%, 
        var(--c3) 12.5% 18.75%, 
        var(--c4) 18.75% 25%, 
        var(--c5) 25% 31.25%, 
        var(--c6) 31.25% 37.5%, 
        var(--c7) 37.5% 43.75%, 
        var(--c8) 43.75% 50%
    );
    z-index: 1;  /* Ensure gauge stays above the mask */
}

.pointer-background {
    position: absolute;
    bottom: 9px;
    left: 50%;
    width: 12px;
    height: 165px;
    background-color: white;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform-origin: 50% 100%;
    transform: rotate(-90deg);
    transition: transform 0.5s ease;
    z-index: 3;  /* Set above the gauge and the mask */
}

.pointer {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 8px;
    height: 160px;
    background-color: black;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform-origin: 50% 100%;
    transform: rotate(-90deg);
    transition: transform 0.5s ease;
    z-index: 3;  /* Set above the gauge and the mask */
}

.pointer-base {
    position: absolute;
    bottom: 0; 
    left: 50%;
    width: 30px;
    height: 15px;
    background-color: black;
    border-radius: 30px 30px 0 0;
    z-index: 3;  /* Set above the gauge and the mask */
    transform: translateX(-50%);
}

.semi-circle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 150px;
    height: 75px;
    background-color: black;
    border-radius: 150px 150px 0 0;
    z-index: 1;
    transform: translateX(-50%);
}

.gauge::before {
    content: "";
    position: absolute;
    top: 50%;       /* Centered vertically */
    left: 50%;      /* Centered horizontally */
    width: 180px;
    height: 180px;  /* Made it a circle by matching the height to the width */
    background-color: white;
    border-radius: 50%;
    z-index: 0;
    transform: translate(-50%, -50%); /* This centers the circle in the gauge */
}


/* The mask */
.gauge-container::after {
    content: "";
    position: absolute;
    bottom: -170px;
    left: 0;
    width: 100%;
    height: 180px;
    background-color: white;
    /* border-radius: 150px 150px 0 0; */
    z-index: 2;  /* Set to the bottom */
}




.weather-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px; /* Adjust as needed */
  }
  
  .weather-detail {
    margin-bottom: 5px; /* Adjust as needed */
  }


  #wbgt_sct {
    display: none;
}



.label {
    position: absolute;
    font-size: 12px;
    width: 30px;
    text-align: center;
    transform: translate(-50%, -50%);  /* This centers the label */
    z-index: 4; /* Placed above the gauge */
}


.wbgt-value {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    z-index: 1000;  /* just in case it's being obscured by another element */
    position: relative;  /* might help if there's any positioning issues */
}