/*
  Stylesheet for Rao Consulting Limited website
  -----------------------------------------------------------------------------
  This CSS defines a clean, modern look and responsive layout for the site.
  Colours are defined as custom properties at the root level for easy updates.
  The design favours generous spacing and clear typography to convey
  professionalism and trustworthiness while remaining approachable.
*/

/* CSS Reset and base variables */
:root {
  /* Colour palette */
  --primary: #003f7d; /* deep blue used for headings and accents */
  --secondary: #006bbd; /* medium blue for highlights and buttons */
  --light-blue: #e7eff9; /* very light blue for backgrounds */
  --dark: #1b2540; /* dark hue for footers and top bar */
  --grey: #6b7280; /* neutral grey for supporting text */
  --white: #ffffff;
  /* Typography */
  --font-family: 'Arial', sans-serif;
  /* Spacing */
  --section-padding: 4rem;
  --container-padding: 1rem;
  --border-radius: 6px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  color: var(--dark);
  line-height: 1.6;
  /* Subtle radial gradients provide a light texture across the page
     to help break up large white areas without distracting from content. */
  background-color: var(--white);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(circle at 85% 90%, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 70%);
  background-repeat: no-repeat;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Top bar */
.top-bar {
  background-color: var(--dark);
  color: var(--white);
  font-size: 0.875rem;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem var(--container-padding);
}

.top-bar .contact-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.top-bar .icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Navbar */
.navbar {
  background-color: var(--white);
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem var(--container-padding);
}

.logo {
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--primary);
}

/* Ensure logo images scale nicely within the navigation bar */
.logo img {
  height: 2.5rem;
  width: auto;
  display: block;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-menu li a {
  color: var(--dark);
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.nav-menu li a:hover,
.nav-menu li a:focus {
  color: var(--secondary);
}

.nav-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
}

/* Hero section */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background-color: var(--dark);
  overflow: hidden;
}

/* Hero slider */
.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Position the slider above the section background so that
     images are visible through the overlay. */
  z-index: 0;
}

.hero-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Extended the duration to accommodate additional slides. With five slides,
     each is visible for roughly five seconds before fading out. */
  animation: slideShow 25s infinite;
}

.hero-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slider .slide:nth-of-type(1) {
  animation-delay: 0s;
}
.hero-slider .slide:nth-of-type(2) {
  animation-delay: 5s;
}
.hero-slider .slide:nth-of-type(3) {
  animation-delay: 10s;
}

/* Delays for additional slides added to the slider */
.hero-slider .slide:nth-of-type(4) {
  animation-delay: 15s;
}
.hero-slider .slide:nth-of-type(5) {
  animation-delay: 20s;
}

@keyframes slideShow {
  /* Each slide is visible for 20% of the animation duration. It stays fully
     visible at the start of its segment and fades out in the last 5% before
     the next slide appears. */
  0%, 16% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Lighter gradient overlay so the underlying images remain visible while
     still ensuring sufficient contrast for text. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
  /* Place the overlay above the slider but below the text */
  z-index: 1;
}

.hero-content {
  max-width: 700px;
  padding: 0 1rem;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-primary {
  background-color: var(--secondary);
  color: var(--white);
  border: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #005b9a;
}

.btn-secondary {
  background-color: var(--white);
  color: var(--secondary);
  border: 2px solid var(--secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--secondary);
  color: var(--white);
}

/* Sections */
/* Section padding reduced slightly to minimise unnecessary white space */
.section {
  padding: calc(var(--section-padding) * 0.75) 0;
}

.section h2 {
  text-align: center;
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.section p.section-intro {
  max-width: 700px;
  margin: 0 auto 2rem auto;
  text-align: center;
  color: var(--grey);
}

/* About section */
#about p {
  margin-bottom: 1rem;
  max-width: 900px;
}

/* Benefits */
.benefits {
  background-color: var(--light-blue);
}

/* About section receives a gentle gradient to soften the transition from the hero
   and reduce stark white space */
.about {
  background: linear-gradient(180deg, var(--white) 0%, var(--light-blue) 100%);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.benefit-item {
  text-align: center;
  padding: 1.5rem;
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.benefit-icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: var(--secondary);
  margin-bottom: 1rem;
}

.benefit-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.benefit-item p {
  color: var(--grey);
  font-size: 0.95rem;
}

/* Services */
/* Services section alternates the gradient direction to provide visual interest */
.services {
  background: linear-gradient(180deg, var(--light-blue) 0%, var(--white) 100%);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background-color: var(--light-blue);
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.service-icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: var(--primary);
  margin: 0 auto 1rem auto;
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.service-card p {
  color: var(--grey);
  font-size: 0.95rem;
}

/* Statistics section */
.stats {
  background-color: var(--light-blue);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

/* Reveal animation classes */
/*
 * Scroll reveal animation
 *
 * Elements with the `.reveal` class will animate into view as they enter the
 * viewport. We combine a slight vertical translation with a subtle scale and
 * opacity change for a modern, polished feel. The animation is responsive:
 * on smaller screens, the translation distance is reduced to suit the shorter
 * viewport height. Users who prefer reduced motion will see the content
 * without animation.
 */
.reveal {
  /* Start with reduced opacity and a more dramatic transform that includes a slight
     rotation. The animation duration and easing function have been extended
     for a smoother, more expressive entrance. */
  opacity: 0;
  transform: translateY(80px) scale(0.92) rotate(-2deg);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

/* Respect user accessibility preferences: disable animations when motion is reduced */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Adjust animation for small screens */
@media (max-width: 768px) {
  .reveal {
    /* On small screens use a gentler animation with a smaller offset and rotation */
    transform: translateY(40px) scale(0.96) rotate(-1deg);
  }
}

.stat-number {
  font-size: 2rem;
  color: var(--secondary);
  font-weight: bold;
}

.stat-label {
  color: var(--grey);
  font-size: 0.95rem;
}

/* Case studies */
.cases {
  background-color: var(--white);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.case-card {
  background-color: var(--light-blue);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.case-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.case-card h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin: 1rem;
}

.case-card p {
  flex-grow: 1;
  color: var(--grey);
  font-size: 0.95rem;
  margin: 0 1rem 1rem 1rem;
}

.case-card a.link {
  color: var(--secondary);
  font-weight: 600;
  margin: 0 1rem 1rem 1rem;
  align-self: flex-start;
}

.case-card a.link:hover {
  text-decoration: underline;
}

/* Testimonials */
.testimonials {
  background-color: var(--light-blue);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial-item {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-item .quote {
  font-style: italic;
  color: var(--grey);
  margin-bottom: 1rem;
}

.testimonial-item .client-name {
  font-weight: bold;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.testimonial-item .client-role {
  color: var(--grey);
  font-weight: normal;
}

.testimonial-item .stars {
  display: flex;
  gap: 0.25rem;
  margin-top: auto;
}

.testimonial-item .stars svg {
  width: 1rem;
  height: 1rem;
  fill: #f6c244; /* gold star */
}

/* Team */
.team {
  background-color: var(--white);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.team-member {
  background-color: var(--light-blue);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.team-member img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.team-member h3 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.team-member .role {
  font-size: 0.95rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.team-member p {
  color: var(--grey);
  font-size: 0.9rem;
}

/* Blog */
.blog {
  background-color: var(--light-blue);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.blog-card {
  background-color: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.blog-card img {
  height: 150px;
  object-fit: cover;
}

.blog-card h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin: 1rem;
}

.blog-card .date {
  color: var(--secondary);
  font-size: 0.85rem;
  margin: 0 1rem;
}

.blog-card p {
  color: var(--grey);
  font-size: 0.95rem;
  flex-grow: 1;
  margin: 0.5rem 1rem 1rem 1rem;
}

.blog-card a.link {
  color: var(--secondary);
  font-weight: 600;
  margin: 0 1rem 1rem 1rem;
}

.blog-card a.link:hover {
  text-decoration: underline;
}

/* Call to action */
.cta {
  background-color: var(--secondary);
  color: var(--white);
  text-align: center;
}

.cta h2 {
  color: var(--white);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta p {
  color: #e9f1fb;
  margin-bottom: 2rem;
}

/* Contact section */
.contact {
  background-color: var(--white);
}

.contact-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.contact-details h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.contact-details p {
  color: var(--grey);
  margin-bottom: 0.5rem;
}

.contact-details .social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.contact-details .social-links img {
  width: 24px;
  height: 24px;
  filter: invert(32%) sepia(27%) saturate(558%) hue-rotate(180deg) brightness(95%) contrast(89%);
  transition: opacity 0.2s ease;
}

.contact-details .social-links a:hover img {
  opacity: 0.7;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  border: 1px solid #cbd5e0;
  border-radius: var(--border-radius);
  font-size: 0.95rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(0, 107, 189, 0.2);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form button {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Footer */
.footer {
  background-color: var(--dark);
  color: var(--white);
  padding: 3rem 0 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer h3,
.footer h4 {
  color: var(--white);
  margin-bottom: 1rem;
}

.footer p {
  color: #a0aec0;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: #cbd5e0;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--secondary);
}

.footer-newsletter form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-newsletter input[type="email"] {
  padding: 0.75rem;
  border: none;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
}

.footer-newsletter button {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--secondary);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footer-newsletter button:hover {
  background-color: #005b9a;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  font-size: 0.8rem;
  color: #a0aec0;
}

/* Chat widget */
.chat-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  font-size: 0.875rem;
  z-index: 1000;
}

.chat-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--secondary);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.6rem 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chat-toggle:hover {
  background-color: #005b9a;
}

.chat-window {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  width: 280px;
  max-height: 400px;
  display: none;
  flex-direction: column;
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.chat-window.active {
  display: flex;
}

.chat-header {
  background-color: var(--secondary);
  color: var(--white);
  padding: 0.5rem;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.chat-header .chat-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
}

.chat-messages {
  padding: 0.75rem;
  overflow-y: auto;
  flex-grow: 1;
  font-size: 0.9rem;
}

.chat-message {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.chat-message.bot {
  color: var(--dark);
  text-align: left;
}

.chat-message.user {
  color: var(--secondary);
  text-align: right;
}

.chat-input {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border-top: 1px solid #e5e7eb;
}

.chat-input input {
  flex-grow: 1;
  padding: 0.4rem;
  border: 1px solid #cbd5e0;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
}

.chat-input input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(0, 107, 189, 0.2);
}

.chat-input button {
  background-color: var(--secondary);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.chat-input button:hover {
  background-color: #005b9a;
}

/* Responsive adjustments for the chat widget on smaller devices */
@media (max-width: 600px) {
  .chat-window {
    width: 90vw;
    right: 0.5rem;
    bottom: calc(100% + 0.5rem);
  }
  .chat-toggle {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* Social links in the header top bar */
.top-bar .social-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.top-bar .social-links img {
  width: 20px;
  height: 20px;
  /* Use a filter to tint icons white for contrast on dark background */
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  transition: opacity 0.2s ease;
}
.top-bar .social-links a:hover img {
  opacity: 0.7;
}

/* Chat options for redirect question */
.chat-options {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.chat-option-btn {
  background-color: var(--secondary);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.2s ease;
}

.chat-option-btn:hover {
  background-color: #005b9a;
}

/* Floating WhatsApp button */
.whatsapp-btn {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #25D366; /* WhatsApp green */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.whatsapp-btn img {
  width: 1.4rem;
  height: 1.4rem;
  /* Make the white logo visible on the green background */
  filter: invert(1);
}

/*
  Additional section styles
  -----------------------------------------------------------------------------
  The following styles support newly introduced sections such as the enhanced
  about layout, events teaser and achievements progress bars. These classes
  complement the existing design language while providing a clear structure
  and visual hierarchy.
*/

/* About wrapper with two columns for text and image */
.about-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
}
.about-content {
  max-width: 600px;
}
.about-content h2 {
  text-align: left;
  margin-bottom: 1rem;
}
.about-content p {
  color: var(--grey);
  margin-bottom: 1rem;
}
.about-image img {
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Events teaser */
.events {
  background-color: var(--white);
}
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.event-card {
  background-color: var(--light-blue);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.event-card h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.event-card .date {
  color: var(--secondary);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.event-card p {
  flex-grow: 1;
  color: var(--grey);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.event-card a.link {
  color: var(--secondary);
  font-weight: 600;
}
.event-card a.link:hover {
  text-decoration: underline;
}

/* Bullet list within service cards on the services page */
.service-list {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  color: var(--grey);
  font-size: 0.9rem;
}
.service-list li {
  margin-bottom: 0.25rem;
}

/* Achievements progress bars */
.achievements {
  background-color: var(--light-blue);
}
.achievement {
  margin-bottom: 1.5rem;
}
.achievement-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--primary);
}
.achievement-bar {
  background-color: #f1f5f9;
  border-radius: var(--border-radius);
  height: 16px;
  overflow: hidden;
}
.achievement-fill {
  background-color: var(--secondary);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: inherit;
}

/* Page hero for secondary pages */
/*
 * Secondary page hero
 *
 * The dark header band at the top of our secondary pages (About, Services, Blog, Events,
 * Dashboard, Contact, etc.) previously contained only a solid colour and radial
 * gradients. To add more visual interest and reinforce the accounting/tax theme,
 * we overlay subtle illustrations on top of the dark background.  These images
 * (stored in cached_assets_used/hero_overlay1.png and hero_overlay2.png) are semi‑
 * transparent and muted in tone, so they do not distract from the page titles.  The
 * first image shows a presenter with a bar chart and rising arrow; the second
 * depicts a professional handshake scene.  Both convey themes of growth, trust
 * and collaboration, which align with Rao Consulting’s services.
 */
.page-hero {
  /* Base styles */
  background-color: var(--dark);
  color: var(--white);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Layer multiple background images: a subtle radial gradient and our overlays. */
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
    url('cached_assets_used/hero_overlay1.png'),
    url('cached_assets_used/hero_overlay2.png');
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  /* Position the gradient overlays centrally and the illustrations towards the bottom right. */
  background-position: center, center, right 3rem bottom -1rem, right 12rem bottom -1rem;
  /* Size the illustrations relative to the viewport to maintain subtlety; the first covers its natural aspect ratio (auto) and the others are fixed widths. */
  background-size: cover, cover, 280px, 220px;
  /* Prevent the backgrounds from scrolling with content */
  background-attachment: scroll;
}

/* Adjust illustration placement and size on smaller screens so they don’t overwhelm the heading. */
@media (max-width: 768px) {
  .page-hero {
    background-position: center, center, right 1rem bottom -0.5rem, right 6rem bottom -0.5rem;
    background-size: cover, cover, 160px, 140px;
  }
}
.page-hero::after {
  /* subtle pattern to soften the solid background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}
.page-hero h1 {
  position: relative;
  z-index: 1;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.page-hero p {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  color: #dbe4f0;
  line-height: 1.6;
}

/* Chart container on the dashboard page */
.chart-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 2rem auto;
}
.chart-container canvas {
  width: 100% !important;
  height: auto !important;
}

/* Responsive styles */
@media (max-width: 992px) {
  .nav-menu {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--white);
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    border-bottom: 1px solid #e5e7eb;
  }
  .nav-menu.open {
    max-height: 300px;
  }
  .nav-menu li {
    text-align: center;
    padding: 0.75rem 0;
    border-top: 1px solid #f3f4f6;
  }
  .nav-menu li:first-child {
    border-top: none;
  }
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .section h2 {
    font-size: 1.75rem;
  }
  .team-member img {
    width: 70px;
    height: 70px;
  }
}

/* ============================================================================
   Cookie Consent Banner

   To comply with UK Company House regulations, this site presents a cookie
   consent banner on first visit. The banner is fixed to the bottom of the
   viewport and uses colours and spacing consistent with the site’s palette. It
   disappears once the user accepts or declines cookies, storing their choice
   in localStorage so it doesn't reappear on subsequent visits.
*/
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary);
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

.cookie-banner p {
  flex: 1 1 60%;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.cookie-banner a {
  color: var(--secondary);
  text-decoration: underline;
}

.cookie-banner .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cookie-banner button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cookie-banner button.accept {
  background-color: var(--secondary);
  color: var(--white);
}

.cookie-banner button.accept:hover {
  background-color: #00559a; /* slightly darker shade of secondary */
}

.cookie-banner button.decline {
  background-color: transparent;
  border: 1px solid var(--secondary);
  color: var(--white);
}

.cookie-banner button.decline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}