.fs-177 {
  font-size: var(--fs-177);
}
@media (max-width: 1200px) {
  .fs-177 {
    font-size: var(--fs-150);
  }
}
@media (max-width: 992px) {
  .fs-177 {
    font-size: var(--fs-84);
  }
}
@media (max-width: 575px) {
  .fs-177 {
    font-size: var(--fs-55);
  }
}
.fs-12 {
  font-size: var(--fs-12);
}
.fs-14 {
  font-size: var(--fs-14);
}
.fs-15 {
  font-size: var(--fs-15);
}
@media (max-width: 575px) {
  .fs-15 {
    font-size: var(--fs-13);
  }
}
.fs-16 {
  font-size: var(--fs-16);
}

.fs-18 {
  font-size: var(--fs-18) !important;
}
.fs-21 {
  font-size: var(--fs-21);
}
.fs-20 {
  font-size: var(--fs-20);
}
@media (max-width: 575px) {
  .fs-20 {
    font-size: var(--fs-16);
  }
}
.fs-30 {
  font-size: var(--fs-30);
}
.fs-32 {
  font-size: var(--fs-32);
}
@media (max-width: 1200px) {
  .fs-32 {
    font-size: var(--fs-28);
  }
}
@media (max-width: 767px) {
  .fs-32 {
    font-size: var(--fs-24);
  }
}
.fs-33 {
  font-size: var(--fs-33);
}
@media (max-width: 991px) {
  .fs-33 {
    font-size: var(--fs-21);
  }
}

.fs-35 {
  font-size: var(--fs-35);
}
@media (max-width: 575px) {
  .fs-35 {
    font-size: var(--fs-28);
  }
}

.fs-37 {
  font-size: var(--fs-37);
}

.fs-38 {
  font-size: var(--fs-38);
}

.fs-43 {
  font-size: var(--fs-43);
}
@media (max-width: 1200px) {
  .fs-43 {
    font-size: var(--fs-35);
  }
}
@media (max-width: 992px) {
  .fs-43 {
    font-size: var(--fs-30);
  }
}
@media (max-width: 575px) {
  .fs-43 {
    font-size: var(--fs-21);
  }
}
.fs-22 {
  font-size: var(--fs-22);
}
@media (max-width: 575px) {
  .fs-22 {
    font-size: var(--fs-16);
  }
}
.fs-26 {
  font-size: var(--fs-26);
}
@media (max-width: 575px) {
  .fs-26 {
    font-size: var(--fs-22);
  }
}
.fs-28 {
  font-size: var(--fs-28);
}
@media (max-width: 575px) {
  .fs-28 {
    font-size: var(--fs-22);
  }
}
.fs-35 {
  font-size: var(--fs-35);
}
@media (max-width: 575px) {
  .fs-35 {
    font-size: var(--fs-30);
  }
}

.fs-50 {
  font-size: var(--fs-50);
}

@media (max-width: 767px) {
  .fs-50 {
    font-size: var(--fs-44);
  }
}
@media (max-width: 575px) {
  .fs-50 {
    font-size: var(--fs-30);
  }
  .fs-24 {
    font-size: var(--fs-20) !important;
  }
}
.fs-24 {
  font-size: var(--fs-24);
}
.fs-60 {
  font-size: var(--fs-60);
}
@media (max-width: 1199px) {
  .fs-60 {
    font-size: var(--fs-65);
  }
}
@media (max-width: 991px) {
  .fs-60 {
    font-size: var(--fs-50);
  }
}
@media (max-width: 767px) {
  .fs-60 {
    font-size: var(--fs-45);
  }
}
@media (max-width: 575px) {
  .fs-60 {
    font-size: var(--fs-24);
  }
}
.fs-65 {
  font-size: var(--fs-65);
}

.fs-75 {
  font-size: var(--fs-75);
}

.fs-78 {
  font-size: var(--fs-78);
}
@media (max-width: 991px) {
  .fs-78 {
    font-size: var(--fs-64);
  }
}

.fs-84 {
  font-size: var(--fs-84);
}
.fs-64 {
  font-size: var(--fs-64);
}
@media (max-width: 991px) {
  .fs-84 {
    font-size: var(--fs-77);
  }
  .fs-64 {
    font-size: var(--fs-50);
  }
}
@media (max-width: 767px) {
  .fs-84 {
    font-size: var(--fs-60);
  }
  .fs-64 {
    font-size: var(--fs-32);
  }
}
@media (max-width: 575px) {
  .fs-84 {
    font-size: 34px;
  }
}

.fs-77 {
  font-size: var(--fs-77);
}
@media (max-width: 1200px) {
  .fs-77 {
    font-size: var(--fs-150);
  }
}
@media (max-width: 992px) {
  .fs-77 {
    font-size: var(--fs-60);
  }
}
@media (max-width: 575px) {
  .fs-77 {
    font-size: var(--fs-45);
  }
}

.albra-bold {
  font-family: "Albra-Bold";
}

.futura-demi, .futura-web {
  font-family: "Futura-Demi";
}

.futura-medium {
  font-family: "Futura-Medium";
}

.albra-regular {
  font-family: "Albra-Regular";
}

.albra-light {
  font-family: "Albra-Light";
}

.albra-light-italic {
  font-family: "Albra-Light-Italic";
}

.albra-medium {
  font-family: "Albra-medium";
}

.futura-book {
  font-family: "Futura-Book" !important;
}

.futura-bold {
  font-family: "Futura-Bold";
}
.abeezee-italic {
  font-family: "Abeezee-italic";
}

.futura-pt {
  font-family: "Futura PT Web";
}

.futura-extra-bold {
  font-family: "Futura-ExtraBold";
}

.roboto {
  font-family: 'Roboto';
}

.font-weight-400 {
  font-weight: 400;
}

.radius-5 {
  border-radius: 5px;
}
.radius-8 {
  border-radius: 8px;
}
.radius-10 {
  border-radius: 10px;
}
.radius-15 {
  border-radius: 15px;
}

.bs-bg-primary {
  background-color: var(--bs-primary-100);
}

.bs-text-primary-200 {
  color: var(--bs-primary-200);
}
.bs-text-primary {
  color: var(--bs-primary);
}

.bs-bg-gray {
  background-color: var(--bs-gray-100);
}
.bs-text-gray {
  color: var(--bs-gray-100);
}

.border-gray {
  border-color: var(--bs-gray-300);
}
.border-gray-500 {
  border-color: var(--bs-gray-500) !important;
}

.bs-bg-primary-dark {
  background-color: var(--bs-primary);
}
.bg-gradient-primary {
  background: linear-gradient(
    0deg,
    rgba(54, 147, 161, 1) 0%,
    rgba(69, 177, 193, 1) 100%
  );
}
.text-teal-light {
  color: var(--bs-primary-200);
}

.button,
.button:hover {
  text-decoration: none;
  color: var(--bs-white);
}
.cursor-pointer {
  cursor: pointer;
}

.checkbox[type="checkbox"]:checked {
  accent-color: var(--bs-primary) !important;
}

.bg-teal-light {
  padding: 6px 24px;
  /* background-color: var(--bs-primary-400); */
  background: linear-gradient(270deg, #34919f -0.32%, #43b1c1 100%);
  color: var(--bs-white);
  border: none;
}
@media(max-width:575px) {
  .bg-teal-light{
    padding: 4px 20px;
    font-size: 18px;
  }
}
.flex-auto {
  flex: auto;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--bs-gray-200);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary);
  border-radius: 20px;
}
.truncate-4,
.truncate-3,
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 45px;
}

.truncate-3 {
  -webkit-line-clamp: 3;
}
.truncate-2 {
  -webkit-line-clamp: 2;
}
.mt-12 {
  margin-top: 120px !important;
}

.mt-10{
  margin-top: 10px;
}

.z-10 {
  z-index: 10;
}
.z-3 {
  z-index: 3;
}
input[id^="reference"]::placeholder {
  color: var(--bs-gray-100);
}
/* PAGINATION START */
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-primary-900);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-hover-color: var(--bs-primary-500);
  --bs-pagination-hover-bg: #e9ecef;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-color: var(--bs-primary-500);
  --bs-pagination-focus-bg: #e9ecef;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-primary-600);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-secondary);
  --bs-pagination-disabled-bg: var(--bs-gray-200);
  --bs-pagination-disabled-border-color: #dee2e6;
}
/* PAGINATION END */

.quiz-option {
  transition: background-color 0.3s ease;
}

input[id^="checkbox"]:checked + .quiz-label .quiz-option {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

/* start streming video */

.vjs-loading-spinner {
  display: none !important;
}

.vjs-poster {
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.vjs-big-play-button {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  margin: 0px !important
}


.poster-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.video-js {
  position: relative;
  z-index: 1;
}

/* end streming video */

.custom-offcanvas {
  height: calc(100% - 80px) !important;
  border: 1px solid #9D9D9D !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0;
  z-index: 99999;
  background: #f7f7f7 !important;
}

.custom-offcanvas .btn-close {
  opacity: 1;
}

.custom-container {
  max-width: 1464px;
  padding: 0 12px;
  margin: 0 auto;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.whitespace-nowrap{
  white-space: nowrap;
}


.hover-scale{
  transition: all 0.3s ease-in-out !important;
}

.hover-scale:hover{
  transform: scale(1.05) !important;
}

.hover-color,
.hover-color-border{
  transition: all 0.2s ease-in-out !important;
}

.hover-color:hover{
  background: linear-gradient(270deg, #34919f -0.32%, #43b1c1 100%) !important;
  color: var(--bs-white) !important;
  border: 1px solid transparent !important;
}

.hover-color-border:hover{
  background: linear-gradient(270deg, #34919f -0.32%, #43b1c1 100%) !important;
  color: var(--bs-white) !important;
  border: 2px solid transparent !important;
}

.block-ruby-text {
  display: ruby-text !important; /* default for Chrome */
}

@supports (-moz-appearance: none) {
  .block-ruby-text {
    display: block ruby !important; /* only Firefox */
  }
}