@font-face {
    font-family: GilroyBlack;
    src: url(../fonts/Gilroy-Black.ttf);
}

@font-face {
    font-family: GilroyBold;
    src: url(../fonts/Gilroy-Bold.ttf);
}

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

@font-face {
    font-family: GilroyExtraBold;
    src: url(../fonts/Gilroy-ExtraBold.ttf);
}

@font-face {
    font-family: GilroyHeavy;
    src: url(../fonts/Gilroy-Heavy.ttf);
}

@font-face {
    font-family: GilroySemibold;
    src: url(../fonts/Gilroy-SemiBold.ttf);
}

@font-face {
    font-family: GilroyRegular;
    src: url(../fonts/Gilroy-Regular.ttf);

}


.font-gilroy-bold {
    font-family: 'GilroyBold' !important;
}

.font-gilroy-regular {
    font-family: 'GilroyRegular' !important;
}

.font-gilroy-heavy {
    font-family: 'GilroyHeavy' !important;
}

.font-gilroy-black {
    font-family: 'GilroyBlack' !important;
}

.font-gilroy-semibold {
    font-family: 'GilroySemibold' !important;
}

.font-gilroy-medium {
    font-family: 'GilroyMedium' !important;
}

.font-poppins {
    font-family: 'Poppins', sans-serif !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

.cursor-move {
    cursor: move !important;
}

.border-50 {
    border-radius: 50% !important;
}

.glass-card {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.text-xs {
    font-size: 10px !important;
}

.text-sm {
    font-size: 12px !important;
}

.text-blue {
    color: #00BAFF;
}

.text-grey {
    color: #A7A6AE !important;
}

.text-base {
    font-size: 14px !important;
}

.text-lg {
    font-size: 16px !important;
}

.text-xl {
    font-size: 18px !important;
}

.text-xxl {
    font-size: 24px !important;
}

.text-3xl {
    font-size: 32px !important;
}

.text-4xl {
    font-size: 36px !important;
}

.text-5xl {
    font-size: 48px !important;
}

.text-6xl {
    font-size: 64px !important;
}

.text-7xl {
    font-size: 72px !important;
}

.text-8xl {
    font-size: 80px !important;
}

.text-9xl {
    font-size: 90px !important;
}

.text-10xl {
    font-size: 98px !important;
}

.font-light {
    font-weight: 300 !important;
}

.font-regular {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.border-blue {
    border: 1px solid #029BE9 !important;
}

.bg-darkglass {

    /* From https://css.glass */
    background: rgba(147, 147, 176, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(232, 232, 232, 0.32);
}

.bg-darkblue {
    background: #27417d !important;
}

.bg-darkerblue {
    background: #031137 !important;
}

.bg-darkgreen {
    background: #28B119 !important;
}

.bg-lightblue {
    background: #029BE9 !important;
}

.hoverable-lightblue:hover {
    background: #029BE9 !important;
}

.hoverable-lightblue.hoverable-border:hover {
    border: 1px solid #FFF !important;
}

.opacity-0 {
    opacity: 0.0;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-100 {
    opacity: 1;
}

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

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

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

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

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


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

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

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

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

.backdrop-filter-30 {
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;

}

.h-96 {
    height: 24rem;
}

.h-48 {
    height: 12rem;
}

.h-44 {
    height: 11rem;
}

.h-38 {
    height: 10rem;
}

.h-34 {
    height: 9rem;

}

.h-30 {
    height: 8rem;

}

.h-16 {
    height: 5rem;

}

.h-20 {
    height: 6rem;

}

.h-24 {
    height: 7rem;

}

.max-h-96 {
    max-height: 24rem;
    /* 384px */
}

.max-h-48 {
    max-height: 12rem;
    /* 162px */
}


.circular-blury-area {

    position: absolute;
    opacity: 0.4;
    filter: blur(50px);
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.blury-green {
    background: #6EB16C 0% 0% no-repeat padding-box;

}

.blury-yellow {
    background: #F3BF58 0% 0% no-repeat padding-box;

}

.blury-red {
    background: #F21369 0% 0% no-repeat padding-box;

}

.blury-blue {
    background: #445AF4 0% 0% no-repeat padding-box;

}

.mh-96 {
    max-height: 425px !important;
}

.rounded-lg {
    border-radius: 16px !important;
}

.gap-y-2 {
    gap: 2rem 0;
}

.gap-y-3 {
    gap: 3rem 0;
}

.gap-y-4 {
    gap: 4rem 0;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

.overflow-x-scroll {
    overflow-x: scroll !important;
}


.filter-blue {
    filter: drop-shadow(0 0 4px #029BE9);
}


.end-10{
    right: 10px;
}

.end-20{

    right: 20px;
}
.end-30{
    right: 30px;
}
.top-20{
    top: 20px;
}
.-top-20 {
    top: -20px;
}

.-start-20 {
    left: -20px;
}

.-end-20 {
    right: -20px;
}

.-bottom-20 {
    bottom: -20px;
}

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

.-start-10 {
    left: -10px;
}

.-end-10 {
    right: -10px;
}

.-bottom-10 {
    bottom: -10px;
}

.text-green {
    color: #28B119 !important;
}

.text-red {
    color: #FD4537 !important;
}

.text-pink {
    color: #FE76C2 !important;
}

.w-7px {
    width: 7px;
}

.pumpHover {
    cursor: pointer;
    transition: all 0.1s ease-in;
}


.pumpHover:hover {
    transform: scale(1.2);
}

.purple-ball {
    background: #7F14EB;

}

.grayscale-100 {
    filter: grayscale(100%) !important;
}

.hoverable-grayscale {
    filter: grayscale(100%) !important;
    transition: all .2s ease-in;
}

.hoverable-grayscale:hover {
    filter: grayscale(0%) !important;
}



.blue-ball {
    background: linear-gradient(180deg, rgba(37, 203, 192, 1) 0%, rgba(83, 133, 254, 1) 100%);
}

.orange-ball {
    background: linear-gradient(180deg, rgba(255, 160, 70, 1) 0%, rgba(242, 68, 68, 1) 100%);
}

.ball {
    filter: blur(20px);
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.z-100 {
    z-index: 100 !important;
}



@media (min-width: 992px) {
    .w-lg-80 {
        width: 80% !important;
    }
    .w-lg-10 {
        width: 10% !important;
    }
    .w-lg-20 {
        width: 20% !important;
    }
    .w-lg-30 {
        width: 30% !important;
    }
    .w-lg-40 {
        width: 40% !important;
    }
    .w-lg-50 {
        width: 50% !important;
    }
    .w-lg-60 {
        width: 60% !important;
    }
    .w-lg-70 {
        width: 70% !important;
    }
    .w-lg-90 {
        width: 90% !important;
    }
}

/* Live Lessons Styles */
.live-lessons-section {
    animation: fadeInUp 0.6s ease-out;
}

.live-lesson-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 193, 7, 0.2);
    position: relative;
    overflow: hidden;
}

.live-lesson-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
    transition: left 0.5s;
}

.live-lesson-card:hover::before {
    left: 100%;
}

.live-lesson-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
}

.live-indicator {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.z-1 {
    z-index: 1;
}

.live-active {
    border-color: rgba(220, 53, 69, 0.4) !important;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.2);
}

.live-badge {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.7;
    }
}

.no-lessons-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.no-lessons-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.live-lesson-card .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.display-inline-block {
	display: inline-block !important;
}