:root{
    --primary-color: #006989;
    --secondary-color: #007090;
    --tertiary-color: #A3BAC3;
    --accent-color: #01A7C2;
    --background-color: #EAEBED;
    --main-text-color: #1F2D33;
    --title-text-color: #006989;
    --subtitle-text-color: #007090;
    --links-color: #01A7C2;
    --darkbg-text-color: #FFFFFF;
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
    font-family: var(--font-family);
    background: var(--background-color);
    color: var(--main-text-color);
    margin: 0;
    padding-top: 80px; 
}

.app-container {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    gap: 10px;
}
.custom-carousel {
    position: relative;
    margin: 0;
}
.custom-carousel .carousel-item img {
    height: 65vh;
    max-height: 600px;
    object-fit: cover;
    
}
.carousel-item:after {
    content: "";
    position: absolute;
   inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    z-index: 1;
}
.custom-carousel .carousel-caption {
    position: absolute;
    text-align:  left;
    left: 8%;
    right: auto;
    bottom: 20%;
    max-width: 500px;
    z-index: 2;
}
.card {
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/*
header {
    display: flex;
    gap: 10px;
    width: 100%;
    background: var(--primary-color);
    align-items:center;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 8px;
}
header img {
    width: 20%;
    height: auto;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
nav {
    
    background: var(--primary-color);
}
    */
.school-name {
    color: var(--darkbg-text-color);
    font-size: 1.2em;
    font-weight: bold;
}
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}
footer {
    
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--tertiary-color);
    height: auto;
    width: auto;
    padding: 15px;
    color: var(--main-text-color);
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    
}
footer p {
    font-size: 0.9em;
}
.campus-img {
    width: 300px;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
}

.campus-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 5px;
}
.error-container {
    display: flexbox;
    flex-direction: column;
    background: var(--secondary-color);
    color: var(--darkbg-text-color);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.error-container h2 {
    margin: 0;
}
.error-container p {
    margin: 10px 0 0;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
table, th{
    border: 1px solid var(--secondary-color);
    font-weight: bold;
}
table, td {
    padding: 10px;
    text-align: left;
    border: 1px solid var(--secondary-color);
}
table tr:nth-child(even) {
    background-color: var(--background-color);
}
.enrolled-subjects {
    background-image: url(img/pexels-pixabay-265076.jpg);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    height: 400px;
    gap: 10px;
}
.glass-effect {
background: rgba(252, 252, 252, 0.4);
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 2px solid rgba(252, 252, 252, 0.3);
padding: 10px;
}
.login-style {
    background-image: url('img/angel3.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;

}
.login-card {
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 600px;
}