@font-face {
    font-family: Bahij Janna;
    src: url('../fonts/BahijJannaRegular.ttf');
}

:root {
    --color-primary: #396CB2;
    --color-danger: #E13B2F;
    --color-success: #219344;
    --color-warning: #FBBF17;
    --color-secondary: #4A4B43;
}


/* --- FONTS --- */

.qfont {
    font-family: Bahij Janna;
    font-size: 1.1rem;
    line-height: 1.5rem;
}

/* --- FONTS --- */
body {
    background-size: contain;
}


/* --- BACKGROUND COLORS --- */
.qbg-primary {
    background-color: var(--color-primary);
    color: white;
}

.qbg-secondary {
    background-color: var(--color-secondary);
    color: white;
}

.qbg-danger {
    background-color: var(--color-danger);
    color: white;
}

.qbg-warning {
    background-color: var(--color-warning);
}

.qbg-success {
    background-color: var(--color-success);
    color: white;
}


/* --- BUTTONS --- */
.qbtn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: all 200ms;
}

.qbtn-secondary {
    background-color: var(--color-secondary);
    color: white;
    transition: all 200ms;
}

.qbtn-danger {
    background-color: var(--color-danger);
    color: white;
    transition: all 200ms;
}

.qbtn-warning {
    background-color: var(--color-warning);
    transition: all 200ms;
}

.qbtn-success {
    background-color: var(--color-success);
    color: white;
    transition: all 200ms;
}

.qbtn-primary:hover {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
}

.qbtn-secondary:hover {
    border: 1.5px solid var(--color-secondary);
    color: var(--color-secondary);
}

.qbtn-danger:hover {
    border: 1.5px solid var(--color-danger);
    color: var(--color-danger);
}

.qbtn-warning:hover {
    border: 1.5px solid var(--color-warning);
}

.qbtn-success:hover {
    border: 1.5px solid var(--color-success);
    color: var(--color-success);
}


/* --- TEXT COLORS --- */
.qtext-primary {
    color: var(--color-primary);
}

.qtext-secondary {
    color: var(--color-secondary);
}

.qtext-danger {
    color: var(--color-danger);
}

.qtext-warning {
    color: var(--color-warning);
}

.qtext-success {
    color: var(--color-success);
}

/* --- COURSE ART ANIMATIONS --- */
.qcourse-art {
    background: transparent url('../img/loadcourses.png') no-repeat center;
    background-size: contain;
    background-position: center;
    min-height: 15rem;
    overflow: hidden;
    position: relative;
}

.qcourse-art img {
    transition: transform 500ms ease;
}

.qcourse-art:hover img {
    transform: scale(1.1);
}

.qcourse-art:hover .qbuttons-course {
    transform: translateY(0rem);
}

.qbuttons-course {
    position: absolute;
    transform: translateY(15rem);
    transition: all 500ms ease;
    left: 12.5%;
    bottom: 3rem;
    z-index: 10;
}


/* --- DEFAULT STYLES --- */

nav {
    position: relative;
    z-index: 20;
}

.qlogo {
    width: 20rem;
}

.qbg-filter {
    text-shadow: 0rem 0rem .8rem black;
    /* backdrop-filter: blur(5px); */
    border-radius: 1rem;
    padding: .5rem .5rem;
}

.qcircle-link {
    border-radius: 999px;
    border: 1px solid var(--color-secondary);
}

.qdiv-action {
    position: relative;
    z-index: 10;
}

.qdiv-action button {
    position: relative;
    border: none;
    box-shadow: 0rem 0rem .8rem black;
    z-index: 5;
    transition: all 300ms;
}

.qdiv-action button:hover {
    background-color: var(--color-secondary);
    color: white;
}

.qbg-images-transition {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
    /* opacity: 0.5; */
    filter: brightness(60%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: transImages 15s infinite alternate;
}

.qbg-video video {
    height: fit-content;
}

.qm-section-action {
    display: block;
    position: relative;
    z-index: 10;
    padding: 11rem 0rem;
}

.qm-section {
    display: block;
    padding: 7rem 0rem;
}

.qm-section-about {
    display: block;
    padding: 4rem 0rem;
}

.qlocation {
    width: 8rem;
}

.qfs-xs {
    font-size: 0.8rem;
}


/* ----- ANIMATION STYLES ----- */

@keyframes transImages {
    0% {
        background-image: url('../img/transition/trans-1.webp');
        transform: scale(1);
    }

    25% {
        background-image: url('../img/transition/trans-2.webp');
        transform: scale(1.05);
    }

    50% {
        background-image: url('../img/transition/trans-3.webp');
        transform: scale(1);
    }

    75% {
        background-image: url('../img/transition/trans-4.webp');
        transform: scale(1.05);
    }

    100% {
        background-image: url('../img/transition/trans-5.webp');
        transform: scale(1);
    }
}