:root {     
    --base-color: #3030ce; 
    --dark-gray: #313e3b;
    --medium-gray: #828c8a;
    --yellow: #ea672e;
    --extra-medium-gray: #e4e4e4;
}

.btn-orange-color-custom {
    background-color: var(--yellow);
}

.btn-orange-color-custom:hover {
    background-color: var(--yellow);
}


.btn-base-color-custom {
    background-color: var(--base-color);
}

.btn-base-color-custom:hover {
    background-color: var(--base-color);
}

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

.bg-custom {
background-color: #00002e;
}

.video-play-btn{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  text-decoration: none;
  z-index: 20;
}

.video-play-btn i{
  font-size: 42px;
  line-height: 1;
}

.video-play-btn::before{
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.70);
  animation: pulsePlay 1.6s infinite;
}

@keyframes pulsePlay{
  0%   { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.2); opacity: 0; }
}


/* Nice circular radio (theme-friendly) */
.theme-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 0;
}
.theme-radio:focus {
  box-shadow: none;
}
.cursor-pointer { cursor: pointer; }

@media (min-width:1200px) {

.xl-minus-150px-custom {
  margin-top: -150px;
}

}

.w-110 {
  width: 110%;
}

.overlay {
  background-color: hsla(240, 62%, 50%, .5);
  border-radius: 10px;
  padding: 10px;
}

.text-dark-gray-custom {
color: #313e3b !important;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid-loading{
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-ite {
    width: 33%;
}

@media (max-width: 991px){
    .grid-loading{
  grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 576px){
    .grid-loading{
  grid-template-columns: 1fr;
}
}

.course-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* default: 3 columns */
    gap: 20px; /* space between items */
}

/* Tablet: 2 columns */
@media (max-width: 992px) {
    .course-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
    .course-grid {
        grid-template-columns: 1fr;
    }
}