:root {
  --color-dark-1e: #1E1F1A;
  --color-blue-e1: #E1F2FD;
  --color-blue-f0: #F0F9FF;
  --color-blue-4a: #4AC1F4;
  --color-blue-07: #0783C2;
  --color-blue-075: #75B3F9;
  --color-blue-076: #07699D;
  --color-blue-0e: #0E4A6C;
  --color-blue-0a5: #0A5982;
  --color-blue-18: #1877F2;
  --color-blue-13: #13A5E4;
  --color-blue-50: #5092F9;
  --color-blue-bc: #BCE5FB;
  --color-blue-db: #DBE9F7;
  --color-darkblue-0a: #0A2F47;
  --color-red-fb: #FB6E6E;
  --color-red-f4: #F44A4A;
  --color-red-e1: #E12121;
  --color-red-ff: #FFE1E1;
  --color-red-fe: #FEF2F2;
  --color-pink-fc: #FCCCB7;
  --color-gray-9a: #9A9A9A;
  --color-gray-5f: #5F5F5F;
  --color-gray-b2: #B2B2B2;
  --color-gray-b6: #B6B6B6;
  --color-gray-4b: #4B4B4B;
  --color-gray-d9: #D9D9D9;
  --color-yellow-ee: #EEE8D8;
  --color-green-d2: #D2E9DE;
  --color-green-99: #99EC91;
  --color-gray-da: #DADEE3;
  --color-gray-98: #989898;
  --color-gray-9f: #9F9F9F;
  --color-gray-f5: #F5F5F5;
  --color-gray-dc: #DCDCDC;
  --color-white-faf: #FAF7F2;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Text Color */
.text-dark-1e {
  color: var(--color-dark-1e) !important;
}

.text-blue-07 {
  color: var(--color-blue-07) !important;
}

.text-blue-4a {
  color: var(--color-blue-4a) !important;
}

.text-blue-0a {
  color: var(--color-darkblue-0a) !important;
}

.text-blue-076 {
  color: var(--color-blue-076) !important;
}

.text-blue-0e {
  color: var(--color-blue-0e) !important;
}

.text-blue-075 {
  color: var(--color-blue-075) !important;
}

.text-blue-0a5 {
  color: var(--color-blue-0a5) !important;
}

.text-blue-13 {
  color: var(--color-blue-13) !important;
}

.text-blue-50 {
  color: var(--color-blue-50) !important;
}

.text-gray-9a {
  color: var(--color-gray-9a) !important;
}

.text-gray-5f {
  color: var(--color-gray-5f) !important;
}

.text-gray-98 {
  color: var(--color-gray-98) !important;
}

.text-gray-9f {
  color: var(--color-gray-9f) !important;
}

.text-gray-b2 {
  color: var(--color-gray-b2) !important;
}

.text-gray-b6 {
  color: var(--color-gray-b6) !important;
}

.text-gary-4b {
  color: var(--color-gray-4b) !important;
}

.text-red-fb {
  color: var(--color-red-fb) !important;
}

.text-red-f4 {
  color: var(--color-red-f4) !important;
}

.text-red-e1 {
  color: var(--color-red-e1) !important;
}

/* Button */
.btn-blue-4a,
.btn-blue-4a:hover,
.btn-blue-4a:active {
  background-color: var(--color-blue-4a) !important;
}

.btn-blue-f0,
.btn-blue-f0:hover,
.btn-blue-f0:active {
  background-color: var(--color-blue-f0) !important;
}

.btn-red-fb,
.btn-red-fb:hover,
.btn-red-fb:active {
  background-color: var(--color-red-fb) !important;
}

.btn-red-f4,
.btn-red-f4:hover,
.btn-red-f4:active,
.btn-red-f4:focus {
  background-color: var(--color-red-f4) !important;
  color: #fff !important;
}

.btn-red-ff,
.btn-red-ff:hover,
.btn-red-ff:active,
.btn-red-ff:focus {
  background-color: var(--color-red-ff) !important;
}

.btn-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Border Color */
.border-blue-4a {
  border-color: var(--color-blue-4a) !important;
}

.border-blue-e1 {
  border-color: var(--color-blue-e1) !important;
}

.border-gray-dc {
  border-color: var(--color-gray-dc) !important;
}

.border-gray-98 {
  border-color: var(--color-gray-98) !important;
}

.border-red-f4 {
  border-color: var(--color-red-f4) !important;
}

/* Background Color */
.bg-yellow-ee {
  background-color: var(--color-yellow-ee) !important;
}

.bg-green-d2 {
  background-color: var(--color-green-d2) !important;
}

.bg-gray-da {
  background-color: var(--color-gray-da) !important;
}

.bg-gray-f5 {
  background-color: var(--color-gray-f5) !important;
}

.bg-gray-d9 {
  background-color: var(--color-gray-d9) !important;
}

.bg-blue-4a {
  background-color: var(--color-blue-4a) !important;
}

.bg-blue-e1 {
  background-color: var(--color-blue-e1) !important;
}

.bg-blue-bc {
  background-color: var(--color-blue-bc) !important;
}

.bg-blue-db {
  background-color: var(--color-blue-db) !important;
}

.bg-red-fb {
  background-color: var(--color-red-fb) !important;
}

.bg-red-f4 {
  background-color: var(--color-red-f4) !important;
}

.bg-blue-18 {
  background-color: var(--color-blue-18) !important;
}

.bg-red-ff {
  background-color: var(--color-red-ff) !important;
}

.bg-red-fe {
  background-color: var(--color-red-fe) !important;
}

.bg-pink-fc {
  background-color: var(--color-pink-fc) !important;
}

/*Border Radius*/
.br-30 {
  border-radius: 0 0 30% 30%;
}

/* Utilities */
.w-fit {
  width: fit-content;
}

.h-455px {
  height: 455px;
}

.h-200px {
  height: 200px;
}

.h-250px {
  height: 250px;
}

.h-2px {
  height: 2px;
}

.min-vh-100 {
  min-height: 100vh;
}
.bg-none{
  background-image: none !important;
}
.img-shadow:hover{
  box-shadow: var(--bs-box-shadow) !important ;
}
.img-shadow{
	transition: 0.5s ease ;
}
.card-shadows {
  box-shadow: 0px 20px 25px -10px rgba(0, 0, 0, 0.15);
}

.report-shadows {
  box-shadow: 0px 70px 24px -45px rgba(0, 0, 0, 0.15);
}

.hover-card:hover {
  border-radius: 17px !important;
  border: 2px solid var(--color-blue-4a) !important;
  box-shadow: 0px 0px 18px 0px rgba(74, 193, 244, 0.40);
  transition: transform 0.3s ease;
  transform: translateY(-35px);
}
.form-focus:focus {
  border-color: var(--color-red-f4) !important;
  box-shadow: 0 0 0 0.25rem rgb(227 0 27 / 25%) !important;
}
.focus-div{
  border-color: var(--color-red-f4) !important;
  box-shadow: 0 0 0 0.25rem rgb(227 0 27 / 25%) !important;
}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: none !important;
}

.form-check-input:checked {
  background-color: var(--color-red-f4) !important;
  border-color: var(--color-red-f4) !important;
  box-shadow: 0 0 0 0.25rem rgb(227 0 27 / 25%) !important;
}
.absolute-img-text {
  transform: translate(10px, 10px);
  left: 25%;
  bottom: 10%;
}

.bs-none {
  box-shadow: none !important;
}

.mt-15px {
  margin-top: -15px !important;
}

.mt-150px {
  margin-top: -150px;
  /*SİL*/
}

.mt-50px {
  margin-top: -50px !important;
}

.mb-200px {
  margin-bottom: -200px;
}

.min-h-400px {
  min-height: 400px;
}

.mb-65px {
  margin-bottom: -65px;
  /*SİL*/
}

.px-2rem {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

.py-07 {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

.py-08 {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

.pe-12 {
  padding-right: 12rem !important;
}

.lt-2px {
  letter-spacing: 2.08px !important;
}

/* Font Size */
.fs-15 {
  font-size: 0.9375rem !important
}

.fs-14 {
  font-size: 0.875rem !important;
}

.fs-13 {
  font-size: 0.8125rem !important;
}

.fs-17 {
  font-size: 1.0625rem !important;
}

.fs-45 {
  font-size: 2.8125rem !important;
}

.display-3-25 {
  font-size: 3.25rem !important;
}

/* Common Css */
* {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  color: var(--color-black-12);
  font-family: "Switzer-Medium";
}

@font-face {
  font-family: "Switzer-Medium";
  src: url("../fonts/Switzer-Medium.ttf");
}

@font-face {
  font-family: "Switzer-Regular";
  src: url("../fonts/Switzer-Regular.ttf");
}

.font-regular {
  font-family: "Switzer-Regular";
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.page-bg {
  background-color: var(--color-white-faf) !important;
}
.navbar-toggler:focus {
  box-shadow: none !important;
}
/*HEADER*/
.header {
  z-index: 99;
}

.sabitheader {
  position: fixed !important;
  background-color: var(--color-white-faf) !important;
  box-shadow: var(--bs-box-shadow) !important;
  top: 0;
}

/*HOME*/
.home-slider .home-slider-img {
  background: url("../img/slider.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  height: 65vh;
}

.accordion-button::after {
  background-image: url("../img/faq-icon.svg") !important;
}

.accordion-button:focus {
  box-shadow: none !important;
}

.report .title::before {
  content: '';
  padding-left: 3rem;
  background-image: url("../img/dark-arrow.svg");
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: 0 6px;
}

/*WHY-BECOME-MEMBER*/
.why-become-member .card-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat !important;
  top: -1.3rem;
  width: 100%;
  height: 100%;
  left: -2rem;
}

.why-become-member .text1::before {
  background: url(../img/pattern1.png);
}

.why-become-member .text2::before {
  background: url(../img/pattern2.png);
}

.why-become-member .text3::before {
  background: url(../img/pattern3.png);
}

/*START-GAME*/
.start-game {
  background-image: url("../img/bg2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.start-game .game-box i {
  background: rgba(0, 0, 0, 0.38) !important;
  transform: translate(-50%, -50%);
  bottom: -2%;
  right: -1%;
}

/*HOW-TO-PLAY*/
.how-to-play ,
.game {
  background-image: url("../img/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 100%;
}

/*STATİSTİCS*/
.statistics .welcome-user-field {
  background: url("../img/istatistik-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.progress-bar {
  background-color: var(--color-green-99) !important;
}

.chart-canvas {
  width: 120px !important;
  height: 120px !important;
}

.hover-card:hover .label {
  display: block !important;
}
/*START-GAME*/
.start-game .list-group-item.active,
.game  .list-group-item.active{
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
/*GAME*/
.game-field{
  height: 650px;
  width: 450px;
}