/* Background Image */
body {
  font-family: 'Arial', sans-serif;
  background: url('bg.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

/* Main Container Box */
.container {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  text-align: center;
  width: 380px;
}

/* Titles */
.container h2 {
  text-align:center;
  font-size: 22px;
  margin-bottom: 10px;
  color: #444;
}

/* Logo */
.logo img {
  display: inline-block;
  width: 160px;
  margin: 15px 0;
}

/* Subtitles */
.container h3 {
  text-align:center;
  margin: 15px 0;
  font-size: 18px;
  color: #333;
}

/* Input Fields */
.input-box {
  margin: 15px 0;
  text-align: left;
}

.input-box label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.input-box input {
  width: 100%;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 5px;
}

/* Forgot Password Link */
.forgot {
  margin: 10px 0;
  text-align: right;
}

.forgot a {
  text-decoration: none;
  color: #007BFF;
  font-size: 14px;
}

.forgot a:hover {
  text-decoration: underline;
}

/* Buttons */
.btn {
  width: 100%;
  padding: 12px;
  background: #28a745;
  color: white;
  border: none;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background: #218838;
}

/* Dropdown Styling */
.dropdown {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  border: 1px solid #aaa;
  border-radius: 5px;
  font-size: 15px;
}

/* Custom Fonts */
h2.welcome {
  font-family: 'Georgia', serif;
  font-size: 26px;
  color: #6a1b9a;
}

h1.a {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 28px;
  color: #007BFF;
  text-transform: uppercase;
  margin-bottom: 20px;
}


body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://image-static.collegedunia.com/public/college_data/images/appImage/1594203457Cover.png?h=240&w=1000&mode=crop") no-repeat center center/cover; 
  /* replace background.jpg with your image file name */
}
.login-box {
  background: rgba(255, 255, 255, 0.9); /* semi-transparent white */
  text-align:center;
  border-radius: 12px;
  padding: 40px;
  width: 350px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Dashboard Header */
.dashboard-header {
  background: linear-gradient(135deg, #6a11cb, #2575fc); /* purple-blue gradient */
  padding: 20px;
  text-align: center;
  color: white;
  border-radius: 10px;
}


/* Clubs container */
.clubs-container {
  display: flex;
  flex-wrap: wrap;   /* allows next row if space is full */
  gap: 20px;         /* spacing between cards */
  justify-content: center;
  margin-top: 20px;
}

.club-card {
  background: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-radius: 12px;
  width: 280px;         /* fixed width so they align */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.club-card:hover {
  transform: scale(1.05);
}

/* Dark overlay for readability */
.club-card .overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
}

/* Button */
.club-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background: #FFD700;
  color: black;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}

.club-btn:hover {
  background: #FFC107;
}


.clubs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 20px;
  padding: 30px;
  width: 100%;       /* take full available space */
  max-width: 1200px; /* optional: limit width */
  margin: auto;      /* center it */
}

.club-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s;
  width: 100%;  /* allow grid to control the width */
  height: 220px; /* optional fixed height */
}

.club-card {
  background: white;              /* Solid white background */
  padding: 20px;
  border-radius: 8px;
  width: 220px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* stronger shadow */
  transition: transform 0.3s;
}

.club-card h2 {
  color: #333;        /* Dark text */
  margin-bottom: 10px;
}

.club-card p {
  color: #555;
}

.club-header {
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('music-bg.jpg');
  background-size: cover;
  color: white;          /* White text for contrast */
  padding: 20px;
}

.club-info, .comments {
  background: rgba(255,255,255,0.9); /* Light background behind text */
  margin: 20px;
  padding: 20px;
  border-radius: 8px;
}

.comments form {
  margin-bottom: 10px;
}

.comments input {
  padding: 5px;
  width: 70%;
}

.comments button {
  padding: 6px 12px;
  background: #4A90E2;
  color: white;
  border: none;
  border-radius: 4px;
}

.comments ul {
  list-style: none;
  padding: 0;
}

.content-box {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8); /* semi-transparent white */
  backdrop-filter: blur(8px); /* frosted glass effect */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  color: #000; /* black text for readability */
}
/* Override for dashboard and club pages */
body.dashboard-page, body.club-page {
  display: block;   /* Remove flexbox centering */
  padding: 20px;
}
/* Background override only for Music Club page */
body.music-club-page {
  background: url("https://www.hollywoodreporter.com/wp-content/uploads/2021/11/39bob_musicschools_MAIN.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* Background override only for Music Club page */
body.music-club-page {
  background: url("https://www.hollywoodreporter.com/wp-content/uploads/2021/11/39bob_musicschools_MAIN.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

body.stem-club-page {
  background: url("https://www.scitech.org.au/wp-content/uploads/2023/07/CR-1015-STEM-Club-1280x628-no-book-button.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

body.socialoutreach-club-page {
  background: url("https://3dfbfedc95.clvaw-cdnwnd.com/b59df3af93dc58d9194f0e9ebdf884b9/200000019-6affe6bf9a/outreach1.jpg?ph=3dfbfedc95") no-repeat center center fixed !important;
  background-size: cover !important;
}

body.sports-club-page {
  background: url("https://www.3p.net.au/wp-content/uploads/2018/05/3P__8058.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

body.drama-club-page {
  background: url("https://teachnews.gr/media/k2/items/cache/2e982f65432588c32a492f05619f3935_XL.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}
/* marquee*/
a.align{vertcle-align:text-top;}

/* Footer / Credits */
.credits {
  text-align: center;
  margin-top: 30px;
  padding: 15px;
  font-size: 14px;
  color: #fff; /* white text */
  background: rgba(0,0,0,0.6); /* dark semi-transparent background */
  border-radius: 8px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}