/* styles.css */
:root {
    --white-color: #fff; /* White color */
    --off-white-color: #d1d1d1; /* Off-white color */
    --gradient-color: linear-gradient(352deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 0%, rgba(10, 99, 189) 13%, rgba(14,55,163,1) 35%, rgba(20,9,121,1) 68%);

}


html, body {
    height: 100%;
    margin: 0;
    color: var(--off-white-color);
}

body {
    display: flex;
    flex-direction: column;
    background: var(--gradient-color);
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}


.greeting .hello {
    color: var(--white-color);
    font-size: 5em;
    font-weight: bold;
    margin: 1rem;
}

.greeting p {
    color: var(--off-white-color);
    font-size: 1.3em;
}

.cards .card {
    background-color: rgba(255, 255, 255, 0.3); /* Slight transparency */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle box-shadow */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-body {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1rem;
    font-weight: bold;
    color: var(--off-white-color);
}

.card-body i {
    font-size: 2em;
    margin-bottom: 10px;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;

}

p {
    font-size: 1.2em;
    margin: 1rem;

}

footer {
    background-color: rgba(51, 51, 51, 0.5); 
    color: var(--white-color);
    text-align: center;
    font-size: .75em;
}

footer p {
    color: var(--off-white-color);
}

/* Hyperlinks without underlines */
a {
    color: var(--off-white-color);
    text-decoration: none;
    transition: color 0.3s ease; 
}

/* Bold white text on hover */
a:hover {
    font-weight: 500;
    color: var(--white-color);
    transition: color 0.3s ease;
}

.line-container {
    display: flex;
    align-items: center;
}

.line-container h1 {
    font-weight: bold;
    color: var(--white-color);
}

.line {
    flex-grow: 1;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.25);
    margin: 0 2rem;
}

.section-subtitle {
    color: var(--off-white-color);
    text-align: center;
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
    margin-left: 1rem;
    margin-right: 1rem;
}



.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5); 
}
.modal-content {
    /* background-color: rgba(5, 0, 100, 0.4); */
    background-color: rgba(20,9,121,.5);
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(10, 99, 189);
}
.modal-header .btn-close {
    color: var(--off-white-color);
    opacity: .5;
}
.modal-header, .modal-footer {
    border: none;
}
.modal-body {
    border-top: none; 
    border-bottom: none;
    filter: blur(20px);
}
.modal-title {
    font-size: 2.5rem;
}
.modal-content {
    font-size: 1.25rem;
}

.text-emphasis {
    color: var(--white-color);
    font-weight: bold;
}