:root {
  --bg-in:#2a539f87;
  --bg-i:#4a5a7844;
  --color:#2488f6;
  --a-in:#0b182d;
  --p-in:#75849b;
  --white:#ffffff;
}
.hd-bg{
background: var(--bg-in);
}
.txt-cg{
  color: var(--color);
}
.ab-in{
    background: var(--a-in);
}
.p-in{
  color: var(--p-in);
}
.bt-pg{
    background: var(--color);
    border-radius: none;
}
.cv-cd{
background: var(--bg-i);
color: var(--p-in);
}
.cv-cd:hover{
  background: var(--bg-in);
  color: var(--color);
  transition: all 0.3s ease-in-out;
}
.card{
  background: var(--a-in);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 20px;
  width: 100%;
  transition: transform 0.3s ease;
}
.cl-in{
  color: var(--white);
}
.cl{
  text-align: center;
}