body {
	padding-top:100px;
	padding-bottom:100px;

  min-height: 100vh;                  /* full-height */
  margin: 0;
  /* radial gradient: centre light, edges dark */
  background: radial-gradient(
      circle at center,
      #2196f3 25%,      /* bright electric blue */
      #1e88e5 45%,      /* mid blue */
      #1565c0 70%,      /* deep sapphire */
      #0d47a1 100%      /* dark indigo outline */
  );
  /* ensure the gradient stays fixed while scrolling */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;         /* optional: makes text readable on darker areas */
  font-family: system-ui, sans-serif;

}

.bg-yellow {
  background-color:#f5c715 !important;
}

.btn:focus {
  color:#000 !important;
  
}

.btn-primary {
	background-color:yellow !important;
	color: black;
	font-weight:bold;
	text-transform:uppercase;
	font-size:28px;
	border:none !important;
}


/* Pulsing and rotating image animation */
.pulse-image {
  width: 200px;                  /* Adjust size as needed */
  animation: pulse-rotate 2s infinite;
}

@keyframes pulse-rotate {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(1.05) rotate(5deg);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}




.btn.active {
      /* ----- Fallback for ancient browsers (solid yellow) ----- */
    background-color: #f5c715;

    /* ----- Modern gradient (will override the solid colour) ----- */
    /* Old WebKit/Android 4.x */
    background-image: -webkit-linear-gradient(top, #ffd94a 0%, #f5c715 100%);
    /* Everyone else ≥ 2014 */
    background-image: linear-gradient(180deg, #ffd94a 0%, #f5c715 100%);

    /* Text & sizing */
    color: #6b4b00 !important;
    border:1px solid black !important;
}


.btn-engraved {
    /* ----- Fallback for ancient browsers (solid yellow) ----- */
    background-color: #f5c715;

    /* ----- Modern gradient (will override the solid colour) ----- */
    /* Old WebKit/Android 4.x */
    background-image: -webkit-linear-gradient(top, #ffd94a 0%, #f5c715 100%);
    /* Everyone else ≥ 2014 */
    background-image: linear-gradient(180deg, #ffd94a 0%, #f5c715 100%);

    /* Text & sizing */
    color: #6b4b00;
    font: 600 2rem/1.2 "Segoe UI", Arial, sans-serif;
    padding: 0.65rem 2rem;
    border: none;
    cursor: pointer;
    position: relative;
    user-select: none;

    /* Bevelled button edges */

    /* Engraved text effect */
    text-shadow:
      1px 1px 1px rgba(0,0,0,0.45),            /* lower‑right dark edge */
     -1px -1px 1px rgba(255,255,255,0.7);      /* upper‑left light edge */

    transition: transform 0.12s ease-out;
    -webkit-tap-highlight-color: transparent;  /* nicer tap look */
  }

  /* Press‑down feedback */
  .btn-engraved:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 2px 3px rgba(0,0,0,0.35),
      inset 0 -1px 1px rgba(255,255,255,0.5),
      0 1px 2px rgba(0,0,0,0.4);
  }

  /* Keyboard focus (for accessibility) */
  .btn-engraved:focus-visible {
    outline: 3px solid #004cff;
    outline-offset: 2px;
  }












/* Modern evergreen browsers (Chrome 57+, Edge 79+, Firefox 51+, Safari 10.1+) */
input[type="text"]::placeholder {
  color: #fff;   /* pure white */
  opacity: 1;    /* Firefox lowers opacity by default — override it */
}

/* ——— LEGACY FALL‑BACKS ——— */

/* Old WebKit: Chrome 4‑56, Safari 5‑10, Opera 15‑43, Samsung 4‑6 */
input[type="text"]::-webkit-input-placeholder {
  color: #fff;
}

/* Firefox 19‑50 (double‑colon) */
input[type="text"]::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

/* Firefox 4‑18 (single‑colon) */
input[type="text"]:-moz-placeholder {
  color: #fff;
  opacity: 1;
}

/* IE 10‑11 */
input[type="text"]:-ms-input-placeholder {
  color: #fff;
}

/* Edge Legacy (EdgeHTML 12‑18) */
input[type="text"]::-ms-input-placeholder {
  color: #fff;
}







/* ------------------------------------------------------------
   Circle‑style checkbox that turns solid white when checked
   ------------------------------------------------------------ */
.form-check-input.circle-check {
  /* Size & shape */
  width: 2rem;
  height: 2rem;
  border-radius: 50%;           /* makes it a circle */

  /* Outline when unchecked */
  border: 2px solid #fff;       /* white ring */
  background-color: transparent;

  /* Remove the platform’s default tick box */
  appearance: none;
  -webkit-appearance: none;

  /* Smooth transition */
  transition: background-color .15s ease-in-out,
              border-color      .15s ease-in-out;
}

/* Keyboard focus ring */
.form-check-input.circle-check:focus {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.35);
}

/* Checked  ➜  solid white fill */
.form-check-input.circle-check:checked {
  background-color: #ffffff;
  border-color:     #ffffff;
}

/* Optional: keep Bootstrap’s red border on failed validation */
.form-check-input.circle-check.is-invalid {
  border-color: #dc3545;
}