html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Background styles for specific pages */
body.index-page {
  background: 
    linear-gradient(rgba(244,246,249,0.85), rgba(232,240,255,0.85)),
    url("../img/login-page.jpg") no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.login-page,
body.register-page {
  background: 
    linear-gradient(rgba(244,246,249,0.85), rgba(232,240,255,0.85)),
    url("../img/login-page.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* Page content alignment */
main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

/* Card */
.center-box {
  max-width: 500px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85); /* glass effect */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Welcome title */
.welcome-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2563eb;
}
.welcome-title img {
  height: 45px;
  vertical-align: middle;
  margin-left: 8px;
}

/* Paragraph under card */
.welcome-text {
  text-align: center;
  color: #111;
  margin: 15px auto 30px;
  max-width: 700px;
  font-size: 1rem;
}


/* For the page with the "home-page" class */
.login-page {
    background-image: url('/assets/img/login-page.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* For the page with the "index-page" class */
.index-page {
    background-image: url('/assets/img/index-page.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* For the page with the "Registration-page" class */
.register-page {
    background-image: url('/assets/img/register-page.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* For the page with the "Registration-page2" class */
.register-page2 {
    background-image: url('/assets/img/register-page2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* For the page with the "Dashboard-page" class */
.dashboard-page {
    background-image: url('/assets/img/dashboard-page.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Make body a flex container so footer stays at bottom */
body {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

/* Main content expands and pushes footer down */
main {
    flex: 1;
}

/* Marquee styles */
.marquee {
    background: #000;
    color: #FF6347;
    padding: 0 10px; /* Remove top/bottom padding */
    height: 20px;    /* Set a specific height */
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 35s linear infinite;
}

/* Marquee2 styles */
.marquee2 {
    background: #000;
    color: #00FF00;
    padding: 0 10px; /* Remove top/bottom padding */
    height: 20px;    /* Set a specific height */
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.marquee2 span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 60s linear infinite;
}

/* Keyframes for scrolling */
@keyframes scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}


/* Footer */
footer {
    background: #222;
    color: #fff;
    padding: 12px;
    text-align: center;
    font-size: 14px;
}
/* === Dashboard-specific overrides === */
body.dashboard-page {
  background: url("../img/dashboard-page.jpg") no-repeat center center fixed;
  background-size: cover;
}

.dashboard-page main {
  display: block;   /* Stop flex centering */
  flex: 1;          /* Push footer down properly */
  padding-bottom: 2rem; /* breathing space before footer */
}

/* Optional: make dashboard cards look consistent */
.dashboard-page .card {
  border-radius: 10px;
  border: none;
}
.dashboard-page .card-title {
  font-weight: 600;
  color: #2563eb;
}

.welcome-title img {
  max-height: 35px;     /* keeps logo small on all screens */
  height: auto;
  width: auto;
  vertical-align: middle;
  margin-left: 6px;
}
@media (max-width: 576px) {
  .welcome-title img {
    max-height: 28px;   /* shrink a bit more on extra small screens */
  }
}