@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nova+Square&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primary: #ff0066;
  --secondary: #6a00ff;
  --orange: #ff512f;
  --white: #fff;
  --dark: #222;
  --gray: #666;
  --radius: 20px;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

body {
  margin: 0px;
  margin-bottom: 80px !important;
  padding: 0px;
  font-style: italic;
  background-color: #fc9 !important;
  font-family: Helvetica, sans-serif !important;
}

body a {
  text-decoration: none !important;
}

p {
  font-size: 13px;
  font-weight: 600;
  color: #000;
  text-shadow: 1px 1px #f4e1e1;
}

[data-next-badge] {
  display: none !important;
}

.pink_heading_holder {
  font-size: 12px;
  text-align: center;
  font-weight: 900;
  color: var(--primary);
  margin-top: 10px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
}

.card-body {
  padding: 0px !important;
}

.card_style {
  border-width: 3px;
  margin: 4px 0px;
  border-style: outset;
  border-radius: 10px;
  border: 2px solid #ff182c;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  padding: 4px;
  background: #fc9;
  overflow: hidden;
}

.card_header_style {
  background: #ff00a2;
  padding: 3px 10px;
  text-shadow: 1px 1px 2px #000;
  text-align: center;
  font-size: 20px;
  color: #fff8f8;
  letter-spacing: 1px;
  font-weight: 700;
  border: 2px solid #fff;
  border-radius: 13px;
  transform-style: preserve-3d;
  transition:
    transform 150ms cubic-bezier(0, 0, 0.58, 1),
    background 150ms cubic-bezier(0, 0, 0.58, 1);
}

.yellow-title-header {
  background: #ffd902;
  padding: 1px 10px;
  text-shadow: 1px 1px 2px #fff;
  display: block;
  font-size: 25px;
  color: #000;
  margin-bottom: 5px;
  margin-top: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  border: 2px solid #000;
  border-radius: 13px;
  transform-style: preserve-3d;
  text-align: center;
  transition:
    transform 150ms cubic-bezier(0, 0, 0.58, 1),
    background 150ms cubic-bezier(0, 0, 0.58, 1);
}

.colored_header {
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
  padding: 5px;
  text-align: center;
  border-radius: 8px;
  line-height: 1.2;
  animation: headerBackgroundAnimation 4s ease-in-out infinite;
}

/* Smooth Background Color Animation */

@keyframes headerBackgroundAnimation {
  0% {
    background-color: #0000b3;
  }

  20% {
    background-color: #8e24aa;
  }

  40% {
    background-color: #e53935;
  }

  60% {
    background-color: #fb8c00;
  }

  80% {
    background-color: #00897b;
  }

  100% {
    background-color: #0000b3;
  }
}

.red_btn_call {
  border: 2px solid #ff006c !important;
  background-color: #ff006c !important;
  color: #fff !important;
  padding: 4px 8px 3px !important;
  border-radius: 8px 0 !important;
  font-size: 12px !important;
  display: inline-block !important;
  box-shadow: 0 0 10px -3px #000 !important;
  font-weight: 700 !important;
}

.red_btn_call:hover {
  background-color: #ff006c !important;
  color: #ffffff !important;
}

.btn_nav_yellow {
  background-color: #ffc107 !important;
  color: #000 !important;
  border: 1px solid #ff5722 !important;
  padding: 4px 8px 3px !important;
  border-radius: 8px 0 !important;
  font-size: 12px !important;
  display: inline-block !important;
  box-shadow: 0 0 10px -3px #000 !important;
  font-weight: 700 !important;
}

.btn_nav_yellow:hover {
  background-color: #ffc107 !important;
  color: #000000 !important;
}

.note_text {
  color: #000;
  font-weight: 600;
  font-size: 13px;
}

/* SECTION 3: NAVIGATION ACTIONS */
.nav-actions {
  width: 100%;
  text-align: center;
}

.nav-actions .btn-blue {
    background-color: #a0d5ff;
    color: #220c82;
    padding: 5px 7px;
    font-size: 14px;
    margin: 5px auto;
    border-radius: 3px;
    border: 2px solid #0000005c;
    font-weight: 800;
    text-shadow: 1px 1px #00bcd4;
    box-shadow: 0 8px 10px 0 rgb(0 0 0 / 20%),
    0 6px 8px 0 rgb(0 0 0 / 19%);
    display: inline-block;
    transition: all 0.3s;
}



.nav-actions  .btn-blue:hover {
  background-color: #0056b3;
  color: #fff;
}

@media (min-width: 0px) and (max-width: 575px) {
  .card_header_style {
    font-size: 18px;
  }
}