:root {
  --platinum: #e8e8e9;
  --azure: #d6edf6;
  --sky: #87ceeb;
  --airforce: #4984a0;
  --prussian: #0b3954;
  --white: #ffffff;
  --black: #000000;
}
/*background color------*/
.bg-platinum {
  background-color: var(--platinum);
}

.bg-azure {
  background-color: var(--azure);
}

.bg-sky {
  background-color: var(--sky);
}

.bg-airforce {
  background-color: var(--airforce);
}

.bg-prussian {
  background-color: var(--prussian);
}

/*text color-------*/

.text-platinum {
  color: var(--platinum);
}

.text-azure {
  color: var(--azure);
}

.text-sky {
  color: var(--sky);
}

.text-airforce {
  color: var(--airforce);
}

.text-prussian {
  color: var(--prussian);
}

/*Button style----*/
.btn-airforce,
.btn-azure,
.btn-platinum,
.btn-prussian,
.btn-sky {
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: rgba(0, 0, 0, 0.24) 0.156vw 0.156vw 0px;
  padding: 0.4vw 1.2vw;
  font-size: 1vw;
  white-space: nowrap;
}

.shadow-white {
  box-shadow: rgba(255, 255, 255, 0.24) 0.156vw 0.156vw 0px !important;
}

/* .btn-sky,
.btn-azure {
  box-shadow: rgba(255, 255, 255, 0.24) 0.156vw 0.156vw 0px !important;
  color: var(--black) !important;
} */
.btn-platinum,
.btn-platinum:hover {
  background-color: var(--platinum);
  color: var(--black);
}

.btn-azure,
.btn-azure:hover {
  background-color: var(--azure);
  color: var(--black);
}

.btn-sky,
.btn-sky:hover {
  background-color: var(--sky);
  color: var(--white);
}

.btn-airforce,
.btn-airforce:hover {
  background-color: var(--airforce);
  color: var(--black);
}

.btn-prussian,
.btn-prussian:hover {
  background-color: var(--prussian);
  color: var(--white);
}

/*scroller css----*/
.content-scroll-wrapper::-webkit-scrollbar {
  width: 0.3vw;
}
.content-scroll-wrapper::-webkit-scrollbar-track {
  background: #d6edf6;
  border-left: 0.12vw solid transparent;
  border-right: 0.12vw solid transparent;
  background-clip: padding-box;
}
.content-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #d6edf6;
}