/* Global Font */
body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #f9fafb;
  font-weight: 400; /* Adjusted for overall readability */
}

h1, h2, h3, h4, h5 {
  font-family: 'Poppins', sans-serif; /* Prioritizing Poppins for headings as seen in images */
  font-weight: 700;
  color: #111;
}

/* Transitions for smoother UX */
a, .btn, .feature-card, .difference-card, .navbar-nav .nav-link, .social-icons a {
  transition: all 0.3s ease-in-out;
}

/* Navbar */
.navbar {
  background: #fff;
  transition: box-shadow 0.3s ease;
}
.navbar.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}
.navbar-brand {
  font-weight: 700;
  color: #7a57d1 !important;
  font-size: 1.75rem; /* Make brand slightly larger */
}
.navbar-nav .nav-link {
  color: #333 !important;
  font-weight: 500;
  padding: 0.5rem 1rem; /* Add more padding for links */
}
.navbar-nav .nav-link:hover {
  color: #7a57d1 !important;
  transform: translateY(-2px);
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, #8B5CF6, #EC4899, #06B6D4);
  color: white;
  text-align: center;
  padding: 120px 20px;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: 3.8rem; /* Slightly larger for impact */
  font-weight: 700;
  color: white;
  line-height: 1.2; /* Better line spacing for heading */
}
.hero h1 span {
  color: #ffd500;
}
.hero .lead {
  font-size: 1.3rem; /* Slightly larger lead text */
  margin: 25px auto 40px auto; /* Adjusted margins */
  max-width: 700px; /* Wider text area */
  font-weight: 500; /* Slightly bolder lead text */
  opacity: 0.95; /* Keep it subtle but clear */
}
.hero .btn {
  margin: 10px;
  border-radius: 30px;
  padding: 14px 35px; /* Larger buttons */
  font-weight: 600;
  border-width: 2px;
  text-transform: uppercase; /* Make button text uppercase */
  letter-spacing: 0.5px;
}
.hero .btn-light {
    background-color: #7a57d1; /* Solid brand purple for primary action */
    border-color: #7a57d1;
    color: #fff;
}
.hero .btn-light:hover {
    background-color: #6a49b6; /* Darker purple on hover */
    border-color: #6a49b6;
    color: #fff;
}
.hero .btn-outline-light {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}
.hero .btn-outline-light:hover {
    background-color: #fff;
    color: #7a57d1;
}


.slideshow-container {
    z-index: 1;
}
.slideshow-container img {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slideFade 16s infinite ease-in-out;
}
.slideshow-container img:nth-child(1) { animation-delay: 0s; }
.slideshow-container img:nth-child(2) { animation-delay: 4s; }
.slideshow-container img:nth-child(3) { animation-delay: 8s; }

@keyframes slideFade {
  0% { opacity: 0; transform: scale(1.05); }
  5% { opacity: 1; transform: scale(1); }
  25% { opacity: 1; transform: scale(1); }
  30% { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; }
}

@media (max-width: 992px) { /* Adjusted breakpoint for larger screens */
  .slideshow-container {
    width: 100% !important;
    transform: none !important;
    opacity: 0.1;
  }
  .hero h1 {
    font-size: 2.8rem;
  }
  .hero .lead {
      font-size: 1.1rem;
  }
}

/* General Section Styles */
.section-title {
  font-size: 2.5rem; /* Larger section titles */
  margin-bottom: 20px;
  text-align: center;
  color: #111;
}
section .text-center {
  font-size: 1.15rem; /* Slightly larger description text */
  max-width: 55rem; /* Wider text area */
  margin-left: auto;
  margin-right: auto;
  color: #555; /* Darker grey for better contrast */
  margin-bottom: 50px;
}

/* Card styles */
.feature-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 30px;
  text-align: center;
  background: #fff;
  height: 100%;
}
.feature-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.feature-card h5 {
  font-weight: 600;
  font-size: 1.4rem; /* Larger feature card titles */
  margin-top: 15px; /* Space between icon and title */
}
.feature-card p {
    font-size: 1rem;
    color: #666;
}
.feature-icon {
  font-size: 2.8rem; /* Larger feature icons */
  margin-bottom: 5px; /* Adjusted margin */
  color: #7a57d1;
}

/* What's in the Kit Section */
.bg-white {
  background-color: #fff !important;
}
.kit-list li {
  font-size: 1.15rem; /* Slightly larger text in kit list */
  margin-bottom: 1.2rem;
  display: flex;
  align-items: flex-start;
  color: #333;
}
.kit-list .fa-check-circle {
  color: #7a57d1;
  font-size: 1.5rem; /* Larger icon in kit list */
  margin-right: 18px; /* More space */
  margin-top: 3px;
}
.kit-list strong {
    color: #111; /* Make strong text stand out more */
}

/* Impact Section */
.impact {
  background: #f8f9fa;
  padding: 80px 20px;
  text-align: center;
}
.impact h2 {
  margin-bottom: 20px;
}
.impact-box {
  font-size: 1.8rem; /* Larger numbers */
  font-weight: 700;
  margin: 25px 0;
  font-family: 'Poppins', sans-serif;
  color: #333;
}
.impact-box small {
    display: block; /* Ensure small text is on its own line */
    font-size: 1rem; /* Larger small text */
    font-weight: 500;
    color: #666;
    margin-top: 5px;
}
.impact-box.text-primary { color: #8B5CF6 !important; } /* Use hero colors */
.impact-box.text-info { color: #EC4899 !important; }
.impact-box.text-warning { color: #06B6D4 !important; } /* Adjusted to match hero colors */


/* Breaking Silence */
.breaking {
  background: linear-gradient(135deg, #7a57d1, #e94e77);
  color: white;
  text-align: center;
  padding: 70px 30px;
  border-radius: 14px;
  margin: 60px auto;
  max-width: 900px; /* Constrain width for better readability */
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Add subtle shadow */
}
.breaking h2 {
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 25px;
}
.breaking p {
    font-size: 1.15rem;
    margin-bottom: 35px;
    opacity: 0.95;
}
.breaking-tag {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 12px 25px; /* More padding for tags */
  border-radius: 30px; /* More rounded tags */
  margin: 8px; /* More margin between tags */
  font-weight: 500;
  display: inline-flex; /* Use flex to align icon and text */
  align-items: center;
  font-size: 1.1rem; /* Larger tag text */
}
.breaking-tag i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.3rem; /* Larger icon in tags */
}


/* Difference Section */
.difference-section {
  padding: 80px 20px;
  background: #f9fafb;
  text-align: center;
}
.difference-section h2 {
  font-weight: 700;
  font-size: 2.2rem; /* Consistent section title size */
  margin-bottom: 10px;
}
.difference-section p {
  color: #6b7280;
  font-size: 1.1rem;
  margin-bottom: 50px;
}
.difference-card {
  background: #fff;
  border-radius: 15px;
  padding: 30px; /* More padding */
  text-align: left;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  height: 100%;
}
.difference-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.difference-icon {
  font-size: 1.8rem; /* Larger icons */
  padding: 12px; /* More padding for icon background */
  border-radius: 12px; /* Slightly more rounded */
  display: inline-flex; /* Use flex to center icon */
  align-items: center;
  justify-content: center;
  margin-bottom: 20px; /* More space */
  color: white;
  width: 55px; /* Ensure square aspect ratio */
  height: 55px;
}
.difference-card h5 {
  font-weight: 600;
  font-size: 1.4rem; /* Larger card titles */
  margin-bottom: 12px;
}
.difference-card p {
  color: #666; /* Darker text for readability */
  font-size: 1rem;
}

/* Join the Movement */
.join-movement {
  background: linear-gradient(90deg, #a855f7, #ec4899, #3b82f6);
  color: white;
  text-align: center;
  padding: 70px 20px;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.1); /* Subtle shadow on top edge */
}
.join-movement h2 {
  font-weight: 700;
  font-size: 2.5rem; /* Larger heading */
  margin-bottom: 20px;
  color: #fff;
}
.join-movement p {
  font-size: 1.2rem; /* Larger text */
  margin-bottom: 35px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.95;
}
.join-movement .btn {
    border-radius: 30px;
    padding: 14px 35px; /* Larger buttons */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-width: 2px;
    margin: 10px;
}
.btn-white {
  background: #fff;
  color: #7a57d1; /* Primary brand color for text */
  border-color: #fff;
}
.btn-white:hover {
    background-color: #f0f0f0;
    color: #6a49b6;
    border-color: #f0f0f0;
}
.btn-outline-white {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn-outline-white:hover {
    background-color: #fff;
    color: #7a57d1;
}

/* Footer */
footer {
  background: #111827;
  color: #d1d5db;
  padding: 50px 20px 20px;
}
footer h5, footer h6 {
  color: #a855f7;
  font-weight: 700;
  margin-bottom: 25px; /* More space */
  font-size: 1.3rem; /* Larger footer headings */
}
footer p, footer li {
    font-size: 1rem; /* Larger footer text */
    color: #b0b0b0; /* Slightly darker grey */
}
footer a {
  color: #b0b0b0;
  text-decoration: none;
  line-height: 2.2; /* Better line spacing for links */
}
footer a:hover {
  color: #fff;
}
.social-icons a {
  font-size: 1.5rem; /* Larger social icons */
  margin-right: 18px; /* More space */
  color: #b0b0b0;
}
.social-icons a:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.1); /* Subtle lift and scale */
}
.footer-bottom {
  border-top: 1px solid #374151;
  margin-top: 30px; /* More space */
  padding-top: 20px;
  font-size: 0.95rem; /* Slightly larger bottom text */
  color: #9ca3af;
}

/* Media Queries for Responsiveness - Adjust if needed */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero .lead {
        font-size: 1rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .impact-box {
        font-size: 1.5rem;
    }
    .breaking-tag {
        font-size: 0.9rem;
        padding: 10px 18px;
    }
    .difference-card h5 {
        font-size: 1.2rem;
    }
    .join-movement h2 {
        font-size: 2rem;
    }
    .join-movement p {
        font-size: 1rem;
    }
    footer h5, footer h6 {
        font-size: 1.1rem;
    }
    footer p, footer li, .social-icons a {
        font-size: 0.9rem;
    }
}