/********************* Font Family *****************/
@font-face {
    font-family: 'Gotham Bold';
    src: url('/wp-content/themes/understrap-child/fonts/Gotham/Gotham-Bold.otf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('/wp-content/themes/understrap-child/fonts/Gotham/Gotham-Book.otf') format('truetype');
    font-weight: 325;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('/wp-content/themes/understrap-child/fonts/Gotham/Gotham-Medium.otf') format('truetype');
    font-weight: 350;
    font-style: normal;
} 

@font-face {
    font-family: 'Microgamma Bold';
    src: url('/wp-content/themes/understrap-child/fonts/Microgramma D Extended Bold/Microgramma D Extended Bold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/********************* Body *****************/
.page-template-page-homepage #page-wrapper, .page-template-page-homepage-review #page-wrapper {
    /* background-image: 
        url('/wp-content/uploads/2025/07/gradient-bg-scaled.webp'), 
        url('/wp-content/uploads/2025/07/main-header.webp');

    background-size: cover, contain;
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat; */

    background-image: url('/wp-content/uploads/2025/07/gradient-bg-v3.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

body {
    color: #ffffff;
    font-family: 'Gotham Book', Helvetica, Arial, sans-serif;
}

.btn {
    padding: 19px 25px 19px 25px;
    font-size: 2rem;
    border-radius: 10px;
}

.btn-primary {
    background-color: #D5FF9A;
    border-color: #D5FF9A;
    color: #000000;
}

.btn-primary:hover {
    background-color: #D5FF9A;
    border-color: #D5FF9A;
    color: #176823;
    box-shadow: 0px 5px 17.9px 0px #2EFF09;
}

.btn-primary:active {
    background-color: #2EFF09 !important;
    border-color: #2EFF09 !important;
    box-shadow: 0px 5px 17.9px 0px #2EFF09;
    color: #176823 !important;
}

.text-primary {
    color: #D5FF9A !important;
}

/********************* Header *****************/
#wrapper-navbar {
    display: none;
}

/********************* Headings *****************/
h1, strong, .btn, h4 {
    font-family: 'Gotham Bold', Helvetica, Arial, sans-serif;
}

h2 {
    font-family: 'Gotham Medium', Helvetica, Arial, sans-serif;
}

h2.counter {
    font-size: 42px;
    font-family: 'Microgamma Bold', Helvetica, Arial, sans-serif;
    text-shadow: 5px 8px 2.8px rgba(0, 0, 0, 0.25);
}

/********************* Footer *****************/
#wrapper-footer {
    background-color: #000000;
    border-top: 1px solid #42C519
}

/********************* Content *****************/
#pledges-name p {
    font-size: 1.25rem;
    text-transform: capitalize;
}

#pledges-name .name-div {
    padding: 13px 52px 13px 52px;
    border-radius: 88px;
    margin: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pledges-name .name-outer-div {
    background-color: #ABF2B580;
    border: 1px solid;
    border-radius: 20px;
    box-shadow: 4px 12px 50px 0px #00000040;
}

p small {
    font-size: 0.875rem;
}

#pledgeModal .modal-content {
    background: #E8FFEBE5;
    backdrop-filter: blur(3px);
    box-shadow: 4px 12px 50px 0px #00000040;
    border: 1px solid rgba(46, 255, 9, 0.4);
    border-radius: 20px;
}

#pledgeModal button.close {
    background: none;
    text-align: right;
    border: none;
    position: absolute;
    top: 3%;
    right: 3%;
}

#pledge-form-wrapper label, .modal-footer.border-top-modal p {
    font-family: 'Gotham Medium', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    margin-bottom: 8px;
}

#pledge-form-wrapper input, #pledge-form-wrapper select {
    padding: 10px;
}

#pledge-form-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 23px; 
}

.wpcf7 input::placeholder, .wpcf7 textarea::placeholder, .wpcf7 input[type=text], .wpcf7 input[type=email] {
  color: #11111399;
}

.wpcf7 input[type=submit] {
    background-color: #111111;
    border-color: #111111;
    color: #ffffff;
}

.wpcf7 input[type=submit]:hover {
    background-color: #111111;
    border-color: #111111;
    color: #ffffff;
}

.disclaimer {
    font-size: 12px;
}

.wpcf7-not-valid-tip, .wpcf7-response-output {
    font-size: 16px;
}

.shopee-link {
    color: #00BD1C;
}

.shopee-link:hover {
    color: #00BD1C;
}

p.small-text {
    font-size: 16px;
}

.modal-footer.border-top-modal {
    border-top: 1px solid #176823;
}

.modal-footer {
    justify-content: center;
}

#st-1 {
    display: flex !important;
}

.st-btn {
    display: block !important;
}

#st-1.st-has-labels .st-btn.st-remove-label {
    min-width: 45px !important;
    height: 45px;
    border-radius: 50px !important;
}

#st-1 .st-btn > img {
    height: 20px !important;
    width: 20px !important;
    top: 11px !important;
}

.dengue-bg {
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    transition: border-radius 0.6s ease;
}

.video-bg {
    background-color: #ABABAB;
    height: 450px;
}

.hover-effect {
    transition: box-shadow 0.6s ease, border-radius 0.6s ease;
    border-radius: 20px;
}

.hover-effect p {
    transition: background-color 0.6s ease;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.hover-effect:hover {
    box-shadow: 0px 4px 25px 0px #2EFF09;
    border-radius: 20px;
}

.hover-effect:hover p {
    background-color: #00000099;
}

.hover-effect:hover .dengue-bg {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Optional: Slight movement */
    transition: opacity 1s ease-out, transform 1s ease-out;
}
  
.fade-in.visible {
    opacity: 1;
    transform: translateY(0); /* Reset movement */
}

.animated-glow {
    animation: pulse-shadow 3s ease-in-out infinite;
}

/* Big number only */
.counter .count-value{
  font-size: clamp(56px, 12vw, 160px); /* 160px max, responsive down */
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: none; /* hidden until we have a value */
}

/* Loader is always small */
.counter .loader{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 50px;
}

/* State toggles */
.counter.is-loading .count-value{ display: none; }
.counter.is-loading .loader{ display: inline-flex; }

.counter.has-value .count-value{ display: inline; }
.counter.has-value .loader{ display: none; }

/* Animated dots (reuse if you already added this) */
.loading-label { display:inline-block; }
.loading-dots { display:inline-block; margin-left:4px; }
.loading-dots span{
  display:inline-block; opacity:.2; animation: loading-blink 1.2s infinite;
}
.loading-dots span:nth-child(2){ animation-delay:.2s; }
.loading-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes loading-blink{
  0%{opacity:.2; transform:translateY(0)}
  20%{opacity:1; transform:translateY(-2px)}
  40%{opacity:.2; transform:translateY(0)}
  100%{opacity:.2; transform:translateY(0)}
}

@keyframes pulse-shadow {
    0% {
        filter: drop-shadow(0 0 0.2rem #2EFF09);
    }
    50% {
        filter: drop-shadow(0 0 1rem #2EFF09);
    }
    100% {
        filter: drop-shadow(0 0 0.2rem #2EFF09);
    }
}

@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        filter: drop-shadow(0 0 0.5rem #2EFF09);
    }
    20%, 22%, 24%, 55% {
        filter: none;
    }
}

@keyframes sweep {
    0%   { filter: drop-shadow(0 0 0.5rem #2EFF09); }
    50%  { filter: drop-shadow(6px 6px 1rem #2EFF09); }
    100% { filter: drop-shadow(0 0 0.5rem #2EFF09); }
}

#pledge-btn {
    animation: none;
    transition: all 0.3s ease-in-out;
    animation: pulse-shadow 3s ease-in-out infinite;
    animation-delay: 0.1s;
}

.hidden {
    display: none;
}

/********************* Responsive *****************/
@media only screen and (min-width: 1200px) {
    #gear .btn, #loadMoreBtn {
        font-size: 1.5rem;
    }

    h2.counter {
        font-size: 160px;
    }
}

@media only screen and (max-width: 1199px) {
    .btn {
        font-size: 1.375rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    h2.counter {
        font-size: 100px;
    }
}

@media only screen and (min-width: 768px) {
    body {
        font-size: 1.125rem;
    }
}

@media only screen and (min-width: 576px) {
    .modal-dialog {
        max-width: 590px;
    }
}

@media only screen and (max-width: 767px) {
    #main-header img {
        width: 250px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    h2.counter {
        font-size: 70px;
    }
}