:root {
  --primary: #091932;
  --accent: #00b5a5;
  --gold: #ffca20;
  --gradient-hero: linear-gradient(135deg, var(--primary), var(--accent));
  --gradient-button: linear-gradient(45deg, #ffb307, #ffb307);
  --gradient-card: linear-gradient(135deg, #f8f8f8, #fbfbfb);
  --gradient-footer: linear-gradient(135deg, #111, #091932);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-hover: 0 8px 25px rgba(0,0,0,0.2);
  --shadow-button: 0 4px 15px rgba(255,140,0,0.3);
}
body { font-family: 'Open Sans', sans-serif; background-color: #e3e3e3; color: #333; }
.text-primary {
    --bs-text-opacity: 1;
    color: #091932  !important;
    font-weight: 700;
}
.bg-primary {
    background: #091932  !important;
}
h1, h2, h3, h4 { font-family: 'Merriweather', serif; }
.bg-hero-gradient { background: #091932; color: #fff; }
.text-gold { color: var(--gold); }
.btn-gradient { background: var(--gradient-button); color: #fff; font-weight: bold; border: none; box-shadow: var(--shadow-button); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.btn-gradient:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); }
.card-gradient { background: var(--gradient-card); box-shadow: var(--shadow-card); border-radius: 0.75rem; }
.card-hover:hover { box-shadow: var(--shadow-hover); }
.footer-gradient { background: #000; color: #fff; padding: 2rem 0 1rem 0; }
.form-control, .form-select { border-radius: 0.5rem; border: 1px solid #ddd; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(28,43,142,0.25); }
.ripple { position: relative; overflow: hidden;font-size:25px; }
.ripple:after { content: ""; position: absolute; background: rgba(255,255,255,0.4); border-radius: 50%; transform: scale(0); width: 100px; height: 100px; opacity: 0; pointer-events: none; }
.ripple:active:after { transform: scale(4); opacity: 1; transition: transform 0.5s, opacity 1s; left: calc(50% - 50px); top: calc(50% - 50px); }
.fade-in { opacity: 0; animation: fadeIn 0.8s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.sub-main-heading{
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
}
.max-w-4xl{
      max-width: 56rem;
}
div#totalAmount {
    font-family: Merriweather, serif;
    font-weight: 700 !important;
}
.form-control,.form-select{
  color: #000;
  font-size: 13px;
  height: 50px;
}
.fa_icon_s{
  background: #00107a1a;
  padding: 10px;
  width: 45px;
  height: 45px;
  text-align: center;
  border-radius: 50%;
  line-height: 1.7;
  margin-right: 20px;
}
::placeholder {
  color: #000;
  font-size: 13px;
}
.btn-warning{
  background:linear-gradient(45deg, hsl(24 100% 50%), hsl(45 100% 60%));
  color: #fff;
  padding: 16px 34px;
  border-radius: 35px;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: monospace;
}
.list-group-item2{
  border: 1px solid #f1f1f1;
  padding: 13px;
  border-radius: 10px;
  background: #fff;
}
.list-group-item2:hover{
  border: 1px solid #f1f1f1;
  padding: 13px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 4px 8px #b5b5b5;
}
.compentation-total-blk{
  background: #ffbf001a;
  border-radius: 20px;
  padding: 0px;
}
@media (min-width: 992px) {
    .display-4.fw-bold.fade-in {
        font-size: 2.5rem;
        font-weight: 700 !important;
    }
}
@media (max-width: 992px) {
  .display-4.fw-bold.fade-in {
    font-size: 2.5rem;
    font-weight: 700 !important;
  }
}
body{
  font-family: Merriweather, serif;
}
.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: rgb(7 7 7);
    background-color: #006c92;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}
.fa-chevron-down:before {
    content: "\f078";
    font-weight: 900;
    font-size: 2rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.container.max-w-4xl.mt-5.card.card-gradient.p-4.bg-muted {
    background: #f2f2f2;
}
/* Apply animation to the chevron icon */
.fas.fa-chevron-down {
  display: inline-block;
  animation: bounceDown 1s infinite;
  -webkit-animation: bounceDown 1s infinite; /* Safari/WebKit */
}

/* Keyframes for the bounce animation */
@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}

@-webkit-keyframes bounceDown { /* Safari/WebKit */
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(10px);
  }
  60% {
    -webkit-transform: translateY(5px);
  }
}