@import "bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css";
@import "global_vars.css";

/* ------ Index Css ------ */

/*--Variabelen voor kleuren--*/
:root{
    --bg-dark: #050b18;
    --bg-light: #070B17;
    --accent: #4da3ff;
    --text-main: #fff;
    --texted-muted: #9fb3c8;
    --card-bg: rgb(229 229 229 / 0.3);
}

/*--Header--*/
.navbar {
    background: linear-gradient(90deg, var(--bg-dark) 0%, var(--bg-light) 100%) !important;
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid rgba(77, 163, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;


    /* Nesting with & selector */
    &-brand {
        font-family: var(--font-heading);
        font-size: 1.5rem;
        transition: transform var(--transition-fast);
        color: var(--text-main) !important;

        &:hover {
            transform: scale(1.05);
        }

        img {
            filter: drop-shadow(0 0 8px rgba(77, 163, 255, 0.4));
        }
    }

    &-nav {
        .nav-link {
            position: relative;
            color: var(--text-muted) !important;
            transition: color var(--transition-fast);

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 0;
                height: 2px;
                background: var(--accent);
                transition: all var(--transition-normal);
                transform: translateX(-50%);
            }

            &:hover {
                color: var(--text-main) !important;

                &::after {
                    width: 80%;
                }
            }

            &.active {
                color: var(--accent) !important;
                font-weight: 600;

                &::after {
                    width: 100%;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--bg-light);
        padding: 20px;
        margin-top: 15px;
        border-radius: 12px;
        border: 1px solid rgba(77, 163, 255, 0.2);
    }

    .navbar-nav {
        text-align: center;
    }
}

.navmenu ul {
    display: flex;
    list-style: none;

}

nav ul li:hover {
    color: var(--accent);
}

.navmenu a {
    color: var(--text-main);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.3s;
    letter-spacing: 1px;
}

.navmenu a.active, .navmenu a:hover {
    color: var(--accent)
}

/* typing effect kleur */
.typed {
    color: #e7f2f7;
    font-size: inherit;
    margin-top: 15px;
}
/*--Body--*/


.home-hero {
    height: 85vh;
    background: linear-gradient(180deg, rgba(7,11,23,0.92), rgba(7,11,23,0.97)), url('../foto/Cinema.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    color: var(--font-heading);
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}

.hero-title .accent {
    color: var(--accent);
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 650px;
    margin-top: 20px;
    color: var(--accent);
}

.hero-buttons .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.hero-buttons .btn-outline-light:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}


/* Quick Access Section - Homepage */
.quick-access-section {
    background-color: var(--bg-dark);
}

.quick-access-section h2 {
    color: var(--text-main);
}

.quick-access-section .card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border-color: var(--accent) !important;
}

.quick-access-section .card:hover {
    transform: translateY(-8px);
    border-color: var(--accent) !important;
}

.quick-access-section .card-body {
    background: var(--bg-light);
}

.quick-access-section .card-title {
    color: var(--text-main);
}

.quick-access-section .card-text {
    color: var(--text-muted);
}

.quick-access-section i.display-1 {
    color: var(--accent);
}

.quick-access-section .btn {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-main);
}

.quick-access-section .btn:hover {
    background-color: var(--bg-light);
    border-color: var(--accent);
}



/*--Footer--*/

.footer {
    padding: 60px 0;
    border-top: 1px solid #ffffff0d;
    text-align: center;
    background-color: var(--bg-dark);
    color: var(--text-main);
}

.socials a {
    color: var(--texted-muted);
    font-size: 24px;
    margin: 0 15px;
    transition: 0.3s;
}

.socials a:hover {
    color: var(--accent);
}


footer p span {
    color: var(--accent);
}
/*--Thomas more copyright + link--*/
footer a {
    text-decoration: none;
    color: var(--accent);
}

footer a:hover {
    color: #8ac0f8;
}

/*--Scroll button--*/

.scroll-top{
    position: fixed;
    right: 15px;
    bottom: 0;
    background-color: var(--accent);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    color: white;
}