html,
body {
    min-height: 100%;
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
    background-attachment: fixed;
}

.custom-navbar {
    background: linear-gradient(90deg, #f5f5f5, #e3e3e3);
    box-shadow: 0 4px 10px #212121(0, 0, 0, 0.05);
}
body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}


body, p, a, li, button {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
}


.btn-primary {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #212121;
    transition: all 0.3s ease;
    color: #fff;
}

.btn-blue {
    background: linear-gradient(135deg, #4f8cff, #2563eb);
}

.btn-red {
    background: linear-gradient(135deg, #792000, #ff4500);
}

.btn-galaxy {
    background: linear-gradient(135deg, #25f5ee, #3b3738, #ff2b56);
}

.btn-blurple {
    background: linear-gradient(135deg, #02012b, #2753e3);
}

.btn-cream {
    background: linear-gradient(135deg, #fdfd63, #bebe98);
}





.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}


.btn-primary:active {
    transform: translateY(0px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

#special-img {
    border-radius: 15px;      /* rounded corners */
    border: 3px solid #212121;   /* outline color and thickness */
}

.outlined-text {
    text-shadow: 
        -1px -1px 0 #212121,  
         1px -1px 0 #212121,
        -1px  1px 0 #212121,
         1px  1px 0 #212121; /* black outline */
}

.hero-banner {
    width: 100%;
    height: 250px; /* adjust height */
    background: url("banner.jpg") center/cover no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo {
    width: 500;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}