:root {
    --font-primary: 'Poppins', sans-serif;
    --color-red: #EC2825;
    --color-yellow: #FCD702;
    --color-warning: #FFC107;
    --color-blue: #0D4079;
    --color-cyan-dark: #001D25;
    --color-primary-light: #FCD4D4;   /* Equivalent of the 20% opacity red */
    --color-secondary-light: #FFFBE5; /* Equivalent of the 20% opacity yellow */
    --color-tertiary-light: #E7ECF2;  /* Equivalent of the 10% opacity blue */
    --color-quaternary-light: #E4E8E9;  /* Equivalent of the 10% opacity white blue */
    --color-black: #061C25;
    --color-dark: #2B3037;
    --color-medium-dark: #4C5763;
    --color-medium: #6F7D8B;
    --color-medium-light: #C2C7CF;
    --color-light: #EAECEF;
    --color-ultra-light: #F5F6F9;
    --color-white: #FFFFFF;
    --color-green: #6fb231;
}

.btn:hover {
    background: var(--color-red)!important;
    border-color: var(--color-red)!important;
    color: var(--color-white)!important;
}

/* all-course-hero-section(Start) */
.all-course-hero-section {
    position: relative;
    height: 519px;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-white);
}

.all-course-hero-section .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 0;
}

.all-course-hero-section .overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.all-course-hero-section .overlay h1 {
    color: var(--color-white);
    font-size: 50px;
    text-align: center;
}

@media (max-width: 767px) {
    .all-course-hero-section .overlay h1 {
        font-size: 40px;
    }
}
/* all-course-hero-section(End) */

/* all-course-sub-hero-section(Start) */ 
.all-course-sub-hero-section { 
    width: 100%; 
    position: relative; 
    height: 942px; 
    margin-top: 50px; 
}

.all-course-sub-hero-section .back { 
    height: 942px; 
} 

.all-course-sub-hero-section .back img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

.all-course-sub-hero-section .front { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 942px; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    align-items: center; 
    background: linear-gradient(180deg,#d9d9d900 45%,var(--color-red) 75%); 
} 

.all-course-sub-hero-section .front .desc1, .all-course-sub-hero-section .front .desc2 { 
    padding: 20px 103px; 
    color: var(--color-white); 
    text-align: center; 
    font-size: 24px; 
    letter-spacing: 1px; 
    font-style: normal; 
    font-weight: 650; 
    line-height: normal; 
}

@media (max-width: 1199px) {
    .all-course-sub-hero-section .front .desc1, .all-course-sub-hero-section .front .desc2 {
        font-size: 20px; 
    }
}

@media (max-width: 991px) {
    .all-course-sub-hero-section .front .desc1, .all-course-sub-hero-section .front .desc2 {
        padding: 10px 56px;
        font-size: 18px; 
    }
    .all-course-sub-hero-section { 
        height: 650px;
        margin-top: 30px;
    }
    .all-course-sub-hero-section .back { 
        height: 650px;
    }
}

@media (max-width: 767px) {
    .all-course-sub-hero-section .front .desc1, .all-course-sub-hero-section .front .desc2 {
        padding: 0px 30px 10px 30px;
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .all-course-sub-hero-section {
        height: max-content;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
    }

    .all-course-sub-hero-section .back {
        position: relative;
        height: auto;
        width: 100%;
        background-color: var(--color-red);
        top: 0;
    }

    .all-course-sub-hero-section .back img { 
        object-fit: contain;
        background-repeat: no-repeat;
    } 

    .all-course-sub-hero-section .front {
        position: relative;
        height: max-content;
        background-color: var(--color-red);
        top: 0;
    }

    .all-course-sub-hero-section .front .desc1, .all-course-sub-hero-section .front .desc2 {
        padding: 10px 19px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}
/* all-course-sub-hero-section(End) */

/* all-courses(Start) */
.all-courses .card {
    color: var(--color-white);
}

.all-courses .card-body {
    height: 100%;
}

.all-courses .card-title {
    font-weight: bold!important;
    font-size: 24px!important;
    margin-bottom: 32px;
    flex-grow: 1;
}

.all-courses .card-video .card-img-top {
    height: 356px;
}

.all-courses .card-video .card-arrow {
    background: var(--color-yellow);
}

.all-courses .card-description {
    margin-top: auto;
}

.all-courses .card-description .btn:hover {
    background: var(--color-red)!important;
    border-color: var(--color-red)!important;
    color: var(--color-white)!important;
}

.stc-courses-carousel .owl-nav {
    width: 450px!important;
}

.card-1 {
    background: linear-gradient(15deg, #3027a0 0.86%, rgba(106, 102, 157, 0.5));
}

.card-2 {
    background: linear-gradient(15deg, #378509 4.41%, rgba(114, 191, 68, .5));
}

.card-3 {
    background: linear-gradient(15deg, #d33519 2.06%, rgba(255, 99, 71, .5));
}

.card-4 {
    background: linear-gradient(15deg, #075580 3.39%, #2a98d4 98.99%);
}

.card-5 {
    background: linear-gradient(15deg, #b30225 1.21%, rgba(220, 20, 60, .5));
}

.card-6 {
    background: linear-gradient(15deg, #1c325b 1.17%, #3b6ac1 59.08%);
}

@media(max-width: 991px) {
    .all-courses .card-video .card-img-top {
        height: 300px;
    }
}

@media(max-width: 480px) {
    .stc-courses-carousel .owl-nav {
        width: 100%!important;
    }
}

@media(max-width: 340px) {
    .stc-courses-carousel .owl-dots button.owl-dot {
        width: 5px!important;
    }
}
/* all-courses(End) */

/* all-course-benefits(Start) */
.all-course-benefits .right {
    background: var(--color-primary-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.all-course-benefits .top {
    font-size: 2.5rem; /* responsive heading size */
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 1rem;
}

.all-course-benefits .list {
    font-size: 1.125rem; /* ~18px */
    font-weight: 650;
}

.all-course-benefits .list ul {
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.all-course-benefits .left,
.all-course-benefits .left img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.all-course-benefits .btn, .all-career-options .btn {
    padding: 15px 50px;
}

/* Make row stretch equal height */
.all-course-benefits .row {
  min-height: 100%;
  
}


/* ✅ Responsive typography */
@media (max-width: 991px) {
    .all-course-benefits .col-lg-6 {
        font-size: 1.75rem;
    }
    .all-course-benefits .container-lg {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}

@media (max-width: 767px) {
    .all-course-benefits .top {
        font-size: 1.75rem;
    }
    .all-course-benefits .list {
        font-size: 1rem;
    }
    .all-course-benefits .button {
        width: 100%;
        margin-top: 1rem;
    }
}
  
/* all-course-benefits(End) */


/* all-career-options(Start) */
.all-career-options .card {
    color: var(--color-white);
}

.all-career-options .owl-nav {
    width: 340px!important;
}

.all-career-options .card-title {
    font-weight: bold!important;
    font-size: 22px!important;
    margin: 12px 0px;
}

.all-career-options .card-video .card-img-top {
    height: 265px;
    object-fit: inherit;
}

.all-career-options .card-video .card-arrow {
    background: var(--color-yellow);
}

.all-career-options .card-description .btn:hover {
    background: var(--color-red)!important;
    border-color: var(--color-red)!important;
    color: var(--color-white)!important;
}

@media(max-width: 650px) {
    .all-career-options .card-title {
        font-size: 20px!important;
    }
}

@media(max-width: 370px) {
    .all-career-options .owl-nav {
        width: 100%!important;
    }
}

@media(max-width: 350px) {
    .all-career-options .card-title {
        width: 95%!important;
    }
}
/* animation-courses(End) */