/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f0f4f8;
  color: #333;
}
.container { width: 90%; max-width: 800px; margin: 0 auto; }

/* Header */
header {
  background: #ff6b6b;
  color: #fff;
  text-align: center;
  padding: 2.5rem 1rem;
}
.logo-container { margin-bottom: 1rem; }
.logo { width: 200px; }
header h1 { font-size: 2.75rem; }
header p { margin-top: 0.5rem; font-size: 1.1rem; opacity: 0.9; }

/* Navigation */
nav {
  display: flex;
  justify-content: center;
  background: #ff8787;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
nav a {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin: 0 0.25rem;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}
nav a i { margin-right: 0.5rem; }
nav a:hover,
nav a.active { background: #c0392b; transform: translateY(-2px); }

/* Parallax class base */
.parallax {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Slider Styles (Homepage) */
.slider-container {
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
}
/* Add parallax to slides container */
.slider-container.parallax {
  background-image: none; /* colors suffice */
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  min-width: 100%;
  box-sizing: border-box;
}

/* Vibrant backgrounds */
.slide-monday    { background: #FF7043; }
.slide-tuesday   { background: #29B6F6; }
.slide-wednesday { background: #FFA726; }
.slide-thursday  { background: #26A69A; }
.slide-friday    { background: #AB47BC; }

.slide-quote {
  text-align: center;
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  padding: 4rem 1rem;
}
.slide-author {
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

/* Dots */
.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.slider-dots button {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.3s;
}
.slider-dots button.active { background: #fff; }

/* About Hero with parallax */
.about-hero {
  background: url('../images/about-hero.jpg') center/cover no-repeat;
  padding: 4rem 1rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.about-hero.parallax { background-attachment: fixed; }
.about-content {
  background: #fff;
  padding: 2rem;
  margin: -3rem auto 2rem;
  border-radius: 8px;
  max-width: 800px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Cards (Feedback & Settings) */
.card {
  background: #fff;
  padding: 2rem;
  margin: 2rem auto;
  border-radius: 8px;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.card h2 { margin-bottom: 1rem; color: #ff6b6b; }
.card form { display: flex; flex-direction: column; gap: 1rem; }
.card label { font-weight: 600; }
.card textarea { resize: vertical; }

/* Settings Toggles */
.toggle { display: flex; align-items: center; gap: 0.75rem; }
.toggle input { transform: scale(1.2); }

/* Pricing */
.pricing ul { list-style: none; margin: 1rem 0; padding-left: 1rem; }
.pricing li::before { content: '✔'; color: #ff6b6b; margin-right: 0.5rem; }

/* Log In */
.login-card {
  background: #fff;
  padding: 2rem;
  margin: 2rem auto;
  border-radius: 8px;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.login-card h2 { text-align: center; margin-bottom: 1.5rem; color: #ff6b6b; }
.input-group { position: relative; margin-bottom: 1.5rem; }
.input-group i { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: #aaa; }
.input-group input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; border: 1px solid #ccc; border-radius: 4px; }

/* Buttons */
.btn { padding: 0.75rem 1.25rem; background: #ff6b6b; color: #fff; border: none; border-radius: 4px; font-weight: 600; transition: background 0.3s; }
.btn:hover { background: #c0392b; }

/* Footer */
footer { text-align: center; padding: 1.5rem 0; font-size: 0.85rem; color: #777; }

/* Responsive */
@media(max-width:600px) {
  header h1 { font-size: 2.25rem; }
  nav { flex-wrap: wrap; }
  nav a { margin: 0.25rem; }
  .about-hero { padding: 3rem 1rem; }
}