/*
  Global stylesheet for the revamped seebi.net page.
  Uses a light colour palette and semibold typography. Variables define the
  theme colours so they can be easily adjusted. All fonts rely on system
  defaults to avoid external downloads. Sections are spaced consistently with
  generous white space. Media queries ensure responsiveness. Buttons use
  subtle transitions for a modern feel.
*/

/* Root variables for easy theming */
:root {
  --primary-color: #0a3f74;        /* dark blue for headers and accents */
  --secondary-color: #117fc7;      /* bright blue for buttons */
  --tertiary-color: #f5faff;       /* very light blue background */
  --text-color: #2c3e50;           /* dark grey for body text */
  --muted-text-color: #6b7a8f;     /* muted grey for secondary text */
  --border-radius: 4px;
  --transition-speed: 0.3s;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600; /* semibold weight applied globally */
  line-height: 1.6;
  color: var(--text-color);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.site-header {
  background-color: var(--tertiary-color);
  border-bottom: 1px solid #e5eff9;
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  color: var(--primary-color);
}

.logo-icon {
  color: var(--secondary-color);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.main-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.main-nav a:hover,
.main-nav a:focus {
  background-color: var(--primary-color);
  color: #fff;
}

/* Hero section */
.hero {
  background-color: var(--tertiary-color);
  padding: 4rem 0 3rem;
  text-align: center;
}

.hero-content h1 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.hero-content .lead {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  color: var(--muted-text-color);
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
  cursor: pointer;
  text-align: center;
  border: none;
}

.primary-btn {
  background-color: var(--secondary-color);
  color: #fff;
}

.primary-btn:hover,
.primary-btn:focus {
  background-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.secondary-btn {
  background-color: #fff;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

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

.tertiary-btn {
  background-color: var(--primary-color);
  color: #fff;
}

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

/* CTA section */
.cta {
  background-color: var(--primary-color);
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}

.cta .question,
.cta .answer {
  color: #fff;
}

.cta-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.cta-form .form-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.cta-form input {
  padding: 0.6rem;
  font-size: 1rem;
  border: none;
  border-radius: var(--border-radius);
  min-width: 220px;
}

.cta-form button {
  min-width: 160px;
}

/* Sections */
.section {
  padding: 3rem 0;
}

.section .question {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.section .answer {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  max-width: 800px;
  color: var(--muted-text-color);
}

/* Process steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

.step p {
  font-size: 0.95rem;
  color: var(--text-color);
}

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

.service-item h3 {
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

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

/* Pricing tables */
.pricing-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.pricing-card {
  background-color: var(--tertiary-color);
  border: 1px solid #e5eff9;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

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

.pricing-card .price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.pricing-card ul {
  list-style: none;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.pricing-card ul li {
  margin-bottom: 0.5rem;
  padding-left: 1.2rem;
  position: relative;
}

.pricing-card ul li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--secondary-color);
}

/* Blog section */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

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

.blog-post p {
  font-size: 0.95rem;
  color: var(--text-color);
}

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

.testimonial {
  background-color: var(--tertiary-color);
  border: 1px solid #e5eff9;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  font-size: 0.95rem;
  color: var(--text-color);
  position: relative;
}

.testimonial::before {
  content: "\201C"; /* Opening quotation mark */
  font-size: 3rem;
  color: var(--secondary-color);
  position: absolute;
  top: -0.8rem;
  left: 1rem;
}

.testimonial .author {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted-text-color);
}

/* Newsletter */
.newsletter {
  background-color: var(--tertiary-color);
  padding: 3rem 0;
  text-align: center;
}

.newsletter-form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.newsletter-form input {
  width: 100%;
  max-width: 360px;
  padding: 0.6rem;
  border: 1px solid #e5eff9;
  border-radius: var(--border-radius);
  font-size: 1rem;
}

/* Contact & legal */
.contact address {
  margin-top: 1rem;
  font-style: normal;
  line-height: 1.5;
}

.contact address a {
  color: var(--primary-color);
}

.legal {
  margin-top: 2rem;
  background-color: var(--tertiary-color);
  border: 1px solid #e5eff9;
  border-radius: var(--border-radius);
  padding: 1rem;
}

.legal summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--primary-color);
}

.legal-content {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-color);
}

.legal-content h3 {
  margin-top: 1rem;
  color: var(--secondary-color);
}

.legal-content p {
  margin-top: 0.5rem;
}

/* Footer */
.site-footer {
  background-color: var(--primary-color);
  color: #fff;
  padding: 1rem 0;
}

.footer-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

@media (min-width: 600px) {
  .footer-flex {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 1.6rem;
  }
}