:root {
  --font-family: "bhasha-skool", "bhasha-ishkool", serif;
  --font-family-secondary: "bhasha-ishkool", serif;
  --bs-primary-rgb: 193, 21, 46;
  --bs-light-rgb: 249, 232, 234;
  --bs-light-text-emphasis: #e9e9ee;
  --bs-info-rgb: 39, 36, 84;
  --bs-info-text-emphasis: #525076;
  --bs-dark-rgb: 16, 15, 35;
  --bs-dark-text-emphasis: #bcbbca;
  --bs-secondary-bg-subtle: #fdf6f7;
  --bs-primary-bg-subtle: #E9E9EE;
  --bs-gradient: linear-gradient(90deg, rgba(39, 36, 84), rgba(176, 19, 42));
  --primary-gradient: linear-gradient(90deg, #b0132a, #272454);
  --secondary-gradient: linear-gradient(180deg, #272557 0%, #484ba0 100%);
  --tertiary-gradient: linear-gradient(45deg, #332f6f, #c1162e, #585cca);
  --card-gradient: linear-gradient(45deg, #c1162e, #585cca);
  --course-tab-gradient: linear-gradient(45deg, #c1162e, #585cca);
  --course-gradient: linear-gradient(
    0deg,
    #4c69b9 0%,
    rgba(250, 250, 250, 0) 100%
  );
}

@font-face {
  font-family: "bhasha-skool";
  font-style: normal;
  font-weight: 100;
  src: url("/assets/fonts/LiAdorNoirritExtraLight.ttf") format("truetype");
}

@font-face {
  font-family: "bhasha-skool";
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/LiAdorNoirritLight.ttf") format("truetype");
}

@font-face {
  font-family: "bhasha-skool";
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/LiAdorNoirritRegular.ttf") format("truetype");
}

@font-face {
  font-family: "bhasha-skool";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/LiAdorNoirritSemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "bhasha-skool";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/LiAdorNoirritBold.ttf") format("truetype");
}

/* latin */
@font-face {
  font-family: "bhasha-ishkool";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: "bhasha-ishkool";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/KFOlCnqEu92Fr1MmWUlfBBc4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: "bhasha-skool", "bhasha-ishkool", serif;
}

.top-50px {
  top: -120px !important;
}

@media screen and (max-width: 768px) {
  .top-50px {
    top: 0px !important;
  }
}

.secondary-font-family {
  font-family: var(--font-family-secondary);
}

.home-bg-gradient {
  background: url("../images/home/hero-section-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.what-you-get-gradient {
  background: url("../images/home/bg-whatyouget.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.quiz-gradient {
  background: url("../images/home/bg-quiz.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-language-club {
  background: url("../images/home/bg-language-club.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-contact {
  background: url("../images/home/bg-contact.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-success-stories {
  background: url("../images/bg-stories.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-about {
  background: url("../images/bg-about-golpo.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-teachers-card {
  background: url("../images/bg-teachers.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.course-details-gradient {
  background-image: var(--course-gradient);
}

.list-group-padding {
  --bs-list-group-item-padding-x: 0rem !important;
  --bs-list-group-bg: transparent;
}

.list-group-pad {
  --bs-list-group-item-padding-x: 0rem !important;
  --bs-list-group-bg: #fff;
}

.top-10 {
  top: 10% !important;
}

.left-80 {
  left: 84% !important;
}

.bottom-10 {
  bottom: 10% !important;
}

.left-n10 {
  left: -10% !important;
}

.btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-size: 1.3rem;
}

@media screen and (max-width: 768px) {
  .btn {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 1.25rem;
  }
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #272454;
  --bs-btn-border-color: #272454;
  --bs-btn-hover-color: #272454;
  --bs-btn-hover-bg: #f9e8ea;
  --bs-btn-hover-border-color: #f9e8ea;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #c1162e;
  --bs-btn-border-color: #c1162e;
  --bs-btn-hover-color: #c1162e;
  --bs-btn-hover-bg: #f9e8ea;
  --bs-btn-hover-border-color: #c1162e;
}

.btn-light {
  --bs-btn-color: #c1162e;
  --bs-btn-bg: #f9e8ea;
  --bs-btn-border-color: #c1162e;
  --bs-btn-hover-color: #f9e8ea;
  --bs-btn-hover-bg: #c1162e;
  --bs-btn-hover-border-color: #c1162e;
}

.list-group-item {
  display: flex;
  border: 0;
  align-items: center;
}

.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3rectangle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input[type="radio"] {
  border-radius: 0%;
}

.form-check-input:checked {
  background-color: #272454;
  border-color: #272454;
}

.top-margin {
  margin-top: 86px;
}

@media screen and (max-width: 768px) {
  .top-margin {
    margin-top: 0px;
  }
}

.navbar-scrolled {
  background: #fff !important;
  transition: 0.1s ease-in;
}

.bg-language-club .nav-link {
  color: #b0132a !important;
  background: #f9e8ea !important;
}

.bg-language-club .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff !important;
  background: var(--card-gradient) !important;
}
.nav-pills .nav-link,
.nav-pills .show > .nav-link {
  color: #b0132a !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff !important;
  background: var(--card-gradient) !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #b0132a !important;
  /* border-bottom: 2px solid #b0132a !important; */
}

.navbar-nav .nav-item.active {
  background-color: #b0132a !important;
}

.navbar-nav .nav-item.active a {
  color: #b0132a !important;
  /* border-bottom: 2px solid transparent; */
  transition: color 0.3s, border-bottom 0.3s !important;
}

.navbar-nav .nav-item.active a:hover {
  /* border-bottom: 2px solid #b0132a !important; */
  color: #b0132a !important;
}

.nav-link:focus,
.nav-link:hover {
  color: #b0132a !important;
  /* border-bottom: 2px solid #b0132a !important; */
}

.course-list {
  background: url("../images/home/bg-course-list.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.course-list .card-hover {
  transition: height 0.3s ease-in-out;
  font-size: 1.25rem;
  font-weight: 400;
  color: #c1162e;
}

.course-list .card-hover span {
  color: rgba(var(--bs-info-rgb));
}

.course-list .card-hover:hover {
  height: 210% !important;
  z-index: 10;
  transition: height 0.3s ease-in-out;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--secondary-gradient);
  color: #f9e8ea;
}

.course-list .card-hover:hover span {
  color: #f9e8ea;
}

.course-list .card-hover a {
  display: none;
}

.course-list .card-hover:hover a {
  display: block;
}
.card-hover img {
  display: none;
}
.card-hover:hover img {
  display: block;
}

.course-list .span {
  color: #fff;
}

.course-list-hover {
  top: 0px !important;
  color: #c1162e;
}

.course-list-hover span {
  color: rgba(var(--bs-info-rgb));
}

.course-list-hover:hover {
  height: 210% !important;
  top: -177px !important;
  transition: all 0.3s ease-out;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--secondary-gradient);
  color: #f9e8ea;
}

.course-list-hover:hover span {
  color: #f9e8ea;
}

.course-list-hover a {
  display: none;
}

.course-list-hover:hover a {
  display: block;
}

.course-list-hover img {
  display: none;
}

.course-list-hover:hover img {
  display: block;
}

.bottom-50px {
  bottom: 15%;
}

hr {
  margin: 0.5rem 0;
}

@media screen and (max-width: 768px) {
  .dropend .dropdown-toggle::after {
    transform: rotate(90deg);
  }
}

.footerlogo {
  width: 30% !important;
}

@media screen and (max-width: 768px) {
  .footerlogo {
    width: 25% !important;
  }
}

/* customize slick  */
.slick-dots li {
  margin: 0px 8px;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 25px !important;
  height: 0px !important;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: 0;
  background: 0 0;
}

.slick-dots li button::before {
  display: block !important;
  width: 25px !important;
  height: 0px !important;
  padding: 1px !important;
  cursor: pointer;
  color: transparent;
  padding: 0;
  border: none;
  background-color: #fff !important;
  content: "" !important;
}

.slick-dots li.slick-active button {
  /* background-color: #fff !important ; */
  content: "" !important;
}

.courses .slick-dots li button::before,
.packages .slick-dots li button::before,
.stories .slick-dots li button::before,
.testimonials .slick-dots li button::before {
  display: block !important;
  width: 25px !important;
  height: 0px !important;
  padding: 1px !important;
  cursor: pointer;
  color: transparent;
  padding: 0;
  border: none;
  background-color: #272454 !important;
  content: "" !important;
}

.courses,
.slick-next::before,
.packages .slick-next::before,
.testimonials .slick-next::before {
  color: #272454 !important;
  /* padding-right: 15px; */
}

.courses .slick-prev::before,
.packages .slick-prev::before,
.testimonials .slick-prev::before {
  color: #272454 !important;
  /* padding-left: 15px; */
}

@media screen and (min-width: 576px) {
  #navbardesktop .navbar-nav .nav-item.dropdown .dropdown-menu {
    opacity: 1 !important;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    animation: 0.5s slideup;
  }

  #navbardesktop .navbar-nav .dropdown:hover > .dropdown-menu,
  .dropend:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
  }

  #navbardesktop .navbar-nav .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
  }

  @keyframes slideup {
    from {
      transform: translateY(10%);
    }
    to {
      transform: translateY(0%);
    }
  }
}

/* Default slide */
.packages .card {
  background-color: #b32532;
  color: #fff;
  height: 100%;
  transform: scale(0.8);
  transition: all 0.4s ease-in-out;
}
.packages .card,
.packages
  .card[aria-hidden="true"]:not(.slick-cloned)
  ~ .slick-cloned[aria-hidden="true"] {
  transform: scale(0.8, 0.8);
  transition: all 0.4s ease-in-out;
}

/* Active center slide (You can change anything here for cenetr slide)*/
.packages .card,
.packages
  .card[aria-hidden="true"]:not([tabindex="-1"])
  + .slick-cloned[aria-hidden="true"] {
  background-color: #000000;
}
.packages .slick-current.slick-active {
  transform: scale(1) !important;
  color: #fdf6f7 !important;
}

.testimonial-img {
  margin-top: -3.5rem;
}

.testimonials .slick-list.draggable {
  padding-top: 3rem !important;
  padding-bottom: 1rem !important;
}

.w-30 {
  width: 30% !important;
}

@media screen and (max-width: 768px) {
  .w-30 {
    width: 80% !important;
  }
}

.nav-pills .nav-link .active::after {
  position: absolute !important;
  background: #fff;
  content: "";
  top: 9px;
  right: -20px;
  width: 16px;
  height: 16px;
  border: 1px solid #b7b7b7;
  transform: rotate(360deg);
  border-radius: 3px;
  border-left: 0px;
  border-bottom: 0px;
}

.rando .tab-content>.active {
  display: flex;
}