#countdown.premium-countdown {
    background: linear-gradient(135deg, #f5f9ff, #fff 50%, #f3f8ff);
}

#countdown .electra-circuit-background {
    display: block;
    opacity: 0.7;
    z-index: 0;
}

#countdown .electra-circuit-background stop[stop-color="#69aaff"] {
    stop-color: #b6d4f3;
}

#countdown .electra-circuit-background g[stroke="#7ab5ff"] {
    stroke: #aecbea;
    stroke-opacity: 0.4;
}

#countdown .countdown-container {
    position: relative;
    z-index: 1;
}

@media (max-width: 575px) {
    #countdown .electra-circuit-background {
        opacity: 0.45;
    }
}


#countdown {
    --electra-yellow: #0040ff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 54px 24px 38px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(50, 105, 180, 0.28),
            transparent 65%),
        linear-gradient(135deg,
            #000b68 0%,
            #00398f 45%,
            #023189 75%,
            #000b68 100%);
    border-top: 3px solid #ffcc00;
    border-bottom: 1px solid #ffcc0040;
}

#countdown,
#countdown * {
    box-sizing: border-box;
}

#countdown::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: -1;
    pointer-events: none;
    border: 1px solid #ffcc0017;
    background: none;
    transform: none;
}

#countdown::after {
    display: none;
}

#countdown .countdown-container {
    width: 100%;
    max-width: 960px;
    margin: auto;
}

#countdown .countdown-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-bottom: 30px;
    text-align: center;
}

#countdown .countdown-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(18px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

#countdown .countdown-brand>span {
    color: #fedd21;
}

#countdown .countdown-brand svg {
    width: 23px;
    height: 28px;
    fill: #ffcc00;
}

#countdown .countdown-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #c3cede;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 3px;
}

#countdown .countdown-heading::before,
#countdown .countdown-heading::after {
    content: "";
    width: 38px;
    height: 1px;
    background: #ffcc00;
    opacity: 0.5;
}

#countdown .countdown-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    max-width: 790px;
    margin: auto;
}

#countdown .countdown-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 10px 22px;
    border: 1px solid #0058ff3d;
    border-radius: 14px;
    background: linear-gradient(150deg, #0064ff, #00054e);
    box-shadow:
        inset 0 1px 0 #ffffff14,
        0 14px 30px #00081840;
    transition:
        border-color 0.3s,
        box-shadow 0.3s;
}

#countdown .countdown-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent,
            #ffcc00 35%,
            #fff8cf 50%,
            #ffcc00 65%,
            transparent);
    box-shadow:
        0 0 8px #ffcc00cc,
        0 0 18px #ffcc0073;
    animation: electra-top-light 4.8s ease-in-out infinite;
    animation-delay: var(--effect-delay);
}

#countdown .countdown-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%,
            #ffcc002e,
            transparent 65%);
    animation: electra-top-glow 4.8s ease-in-out infinite;
    animation-delay: var(--effect-delay);
}

#countdown .countdown-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    color: #fff;
    border: 1px solid #ffcc0033;
    border-radius: 12px;
    background: #ffcc0012;
    animation: electra-icon-float 3.5s ease-in-out infinite;
    animation-delay: var(--effect-delay);
    transition:
        background 0.3s,
        border-color 0.3s,
        box-shadow 0.3s;
}

#countdown .countdown-icon::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid #ffffff80;
    border-radius: inherit;
    pointer-events: none;
    animation: electra-icon-halo 3.5s ease-out infinite;
    animation-delay: var(--effect-delay);
}

#countdown .countdown-icon svg {
    transform-origin: center;
    filter: drop-shadow(0 0 4px #ffffff59);
    animation: electra-icon-shake 5s ease-in-out infinite;
    animation-delay: var(--effect-delay);
    transition: filter 0.3s;
}

#countdown .countdown-icon svg,
#countdown .countdown-footer svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#countdown .countdown-number {
    font-family: Rajdhani, Arial, sans-serif;
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0px 4px 6px #0070ff;
}

#countdown .countdown-label {
    margin-top: 13px;
    color: #ffcb00;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 2.5px;
}

#countdown .countdown-separator {
    color: #ffcc00a6;
    font-family: Rajdhani, Arial, sans-serif;
    font-size: 34px;
    font-weight: 600;
    text-align: center;
}

#countdown .countdown-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

#countdown .countdown-date,
#countdown .countdown-tagline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.3px;
    background: none;
    border: none;
}

#countdown .countdown-date {
    color: #ffcc00;
}

#countdown .countdown-tagline {
    color: #c3cede;
}

#countdown .countdown-footer svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: #ffcc00;
}

@media (hover: hover) {
    #countdown .countdown-card:hover {
        border-color: #00abff8c;
        box-shadow:
            inset 0 1px 0 #ffffff1a,
            0 14px 30px #00081840,
            0 0 24px #ffcc001a;
    }

    #countdown .countdown-card:hover .countdown-icon {
        background: #ffcc0029;
        border-color: #ffcc00a6;
        box-shadow: 0 0 22px #ffcc0038;
    }

    #countdown .countdown-card:hover .countdown-icon svg {
        filter: drop-shadow(0 0 7px #ffcc00b3);
    }
}

@keyframes electra-top-light {
    0% {
        transform: translateX(-110%);
        opacity: 0;
    }

    15%,
    65% {
        opacity: 1;
    }

    85%,
    100% {
        transform: translateX(210%);
        opacity: 0;
    }
}

@keyframes electra-top-glow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.85;
    }
}

@keyframes electra-icon-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes electra-icon-halo {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    20% {
        opacity: 0.45;
    }

    75%,
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes electra-icon-shake {

    0%,
    18%,
    100% {
        transform: translateX(0) rotate(0);
    }

    3%,
    9%,
    15% {
        transform: translateX(-1px) rotate(-8deg);
    }

    6%,
    12% {
        transform: translateX(1px) rotate(8deg);
    }
}

@media (max-width: 575px) {
    #countdown {
        padding: 34px 16px 28px;
    }

    #countdown .countdown-top {
        gap: 14px;
        margin-bottom: 8px;
    }

    #countdown .countdown-heading {
        gap: 9px;
        font-size: 8px;
        letter-spacing: 1.7px;
    }

    #countdown .countdown-heading::before,
    #countdown .countdown-heading::after {
        width: 22px;
    }

    #countdown .countdown-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    #countdown .countdown-separator {
        display: none;
    }

    #countdown .countdown-card {
        padding: 3px 4px 3px;
        border-radius: 10px;
    }

    #countdown .countdown-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 13px;
        border-radius: 9px;
    }

    #countdown .countdown-icon svg {
        width: 17px;
        height: 17px;
    }

    #countdown .countdown-number {
        font-size: clamp(30px, 9vw, 46px);
        letter-spacing: 0;
    }

    #countdown .countdown-label {
        margin-top: 0px;
        font-size: 7px;
        letter-spacing: 0.8px;
    }

    #countdown .countdown-footer {
        flex-direction: column;
        gap: 10px;
        margin-top: 23px;
    }

    #countdown .countdown-date,
    #countdown .countdown-tagline {
        font-size: 8px;
        letter-spacing: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {

    #countdown .countdown-card,
    #countdown .countdown-card::before,
    #countdown .countdown-card::after,
    #countdown .countdown-icon,
    #countdown .countdown-icon::after,
    #countdown .countdown-icon svg {
        animation: none;
        transition: none;
    }

    #countdown .countdown-card::before {
        width: 60%;
        left: 20%;
        opacity: 1;
    }

    #countdown .countdown-card::after {
        opacity: 0.4;
    }

    #countdown .countdown-icon::after {
        display: none;
    }
}



 #countdown .countdown-label {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     margin-top: 16px;
 }

 #countdown .countdown-label .countdown-icon {
     flex-shrink: 0;
     width: 28px;
     height: 28px;
     margin: 0;
     border-radius: 8px;
 }

 #countdown .countdown-label .countdown-icon svg {
     width: 16px;
     height: 16px;
 }

 @media (max-width: 575px) {
     #countdown .countdown-label {
         gap: 4px;
         margin-top: 12px;
         letter-spacing: 0.5px;
     }

     #countdown .countdown-label .countdown-icon {
         width: 20px;
         height: 20px;
         border-radius: 6px;
     }

     #countdown .countdown-label .countdown-icon svg {
         width: 12px;
         height: 12px;
     }
 }


  #countdown .electra-circuit-background {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.65;
  }

  #countdown .countdown-container {
      position: relative;
      z-index: 1;
  }

  @media (max-width: 575px) {
      #countdown .electra-circuit-background {
          opacity: 0.35;
      }
  }


        #countdown .countdown-top {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            gap: 18px;
            white-space: nowrap;
        }
    
        #countdown .countdown-brand {
            gap: 0;
            flex-shrink: 0;
        }
    
        #countdown .countdown-brand svg {
            margin-right: 8px;
        }
    
        #countdown .countdown-heading {
            flex-shrink: 0;
            letter-spacing: 1.5px;
        }
    
        #countdown .countdown-heading::before,
        #countdown .countdown-heading::after {
            display: none;
        }
    
        @media (max-width: 575px) {
            #countdown .countdown-top {
                gap: 8px;
            }
    
            #countdown .countdown-brand {
                font-size: 13px;
            }
    
            #countdown .countdown-brand svg {
                width: 13px;
                height: 17px;
                margin-right: 4px;
            }
    
            #countdown .countdown-heading {
                font-size: 8px;
                letter-spacing: 0.3px;
            }
        }
    
        @media (max-width: 359px) {
            #countdown .countdown-top {
                gap: 6px;
            }
    
            #countdown .countdown-brand {
                font-size: 11px;
            }
    
            #countdown .countdown-heading {
                font-size: 7px;
                letter-spacing: 0.1px;
            }
        }


                #countdown.premium-countdown {
                    --electra-yellow: #ffcc00;
                    background: #fff;
                    color: #0047ba;
                    padding: 0;
                    border-top: 0;
                    border-bottom: 0;
                }
        
                #countdown::before {
                    inset: auto 12px 0;
                    height: 4px;
                    background: #e9edf2;
                    border: 0;
                    z-index: 0;
                }
        
                /*   #countdown::after,
              #countdown .electra-circuit-background {
                display: none;
              }*/
                #countdown .countdown-container {
                    max-width: 960px;
                }
        
                #countdown .countdown-top {
                    gap: 18px;
                    margin-bottom: 7px;
                }
        
                #countdown .countdown-brand {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 30px;
                    font-weight: 800;
                    color: #0047ba;
                }
        
                #countdown .countdown-heading {
                    font-size: 15px;
                    font-weight: 600;
                    letter-spacing: 1.4px;
                    color: #cc6900;
                }
        
                #countdown .countdown-grid {
                    max-width: 790px;
                    gap: 10px;
                    grid-template-columns:
                        minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
                }
        
                #countdown .countdown-card {
                    padding: 5px;
                    border: 1px solid #075be3;
                    border-radius: 14px;
                    background: linear-gradient(135deg,
                            #0750d1 0%,
                            #07329b 45%,
                            #050b66 100%);
                    box-shadow: 0 16px 28px #07172f38;
                }
        
                #countdown .countdown-number {
                    font-size: 70px;
                    font-weight: 600;
                    color: #fff;
                    line-height: 1;
                    letter-spacing: 1px;
                    text-shadow:
                        0 0 5px #000a66,
                        0 3px 12px #0300c799;
                }
        
                #countdown .countdown-label {
                    margin-top: 8px;
                    gap: 9px;
                    color: #ffcc00;
                    font-size: 13px;
                    font-weight: 700;
                    letter-spacing: 2px;
                }
        
                #countdown .countdown-label .countdown-icon {
                    width: 28px;
                    height: 28px;
                    border-radius: 8px;
                    background: #ffcc00;
                    border-color: #ffcc00;
                    color: #061b45;
                }
        
                #countdown .countdown-label .countdown-icon svg {
                    width: 18px;
                    height: 18px;
                    filter: none;
                }
        
                #countdown .countdown-icon::after {
                    border-color: #ffcc0080;
                }
        
                #countdown .countdown-separator {
                    font-size: 32px;
                    color: #7c8999;
                }
        
                #countdown .countdown-footer {
                margin-top: 14px;
                    padding-bottom: 11px;
                }
        
                #countdown .countdown-date {
                    display: none;
                }
        
                #countdown .countdown-tagline {
                    color: #e00000;
                    font-size: 11px;
                    letter-spacing: 1.3px;
                }
        
                #countdown .countdown-tagline svg {
                    color: #e00000;
                    width: 16px;
                    height: 16px;
                }
        
                @media (hover: hover) {
                    #countdown .countdown-card:hover {
                        border-color: #ffcc00;
                        box-shadow: 0 16px 28px #07172f38;
                    }
        
                    #countdown .countdown-card:hover .countdown-icon {
                        background: #ffda3d;
                        border-color: #ffda3d;
                        box-shadow: 0 0 16px #ffcc0045;
                    }
        
                    #countdown .countdown-card:hover .countdown-icon svg {
                        filter: none;
                    }
                }
        
                @media (max-width: 575px) {
                    #countdown.premium-countdown {
                        padding: 9px 14px 12px;
                    }
        
                    #countdown .countdown-top {
                        gap: 8px;
                        margin-bottom: 4px;
                    }
        
                    #countdown .countdown-brand {
                        font-size: 16px;
                    }
        
                    #countdown .countdown-heading {
                        font-size: 8px;
                        letter-spacing: 0.3px;
                    }
        
                    #countdown .countdown-grid {
                        grid-template-columns: repeat(4, minmax(0, 1fr));
                        gap: 8px;
                    }
        
                    #countdown .countdown-card {
                        padding: 7px 4px 6px;
                        border-radius: 10px;
                    }
        
                    #countdown .countdown-number {
                        font-size: clamp(32px, 10vw, 48px);
                    }
        
                    #countdown .countdown-label {
                        font-size: 7px;
                        gap: 4px;
                        letter-spacing: 0.5px;
                        margin-top: 0px;
                    }
        
                    #countdown .countdown-label .countdown-icon {
                        width: 20px;
                        height: 20px;
                        border-radius: 6px;
                    }
        
                    #countdown .countdown-label .countdown-icon svg {
                        width: 13px;
                        height: 13px;
                    }
        
                    #countdown .countdown-footer {
                        margin-top: 9px;
                    }
        
                    #countdown .countdown-tagline {
                        font-size: 8px;
                        letter-spacing: 0.8px;
                    }
                }
        
                @media (max-width: 359px) {
                    #countdown .countdown-brand {
                        font-size: 13px;
                    }
        
                    #countdown .countdown-heading {
                        font-size: 7px;
                    }
                }