@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;500&display=swap');

/* -----------------------------------------
   TABLE OF CONTENTS:
   1. General Styles
   2. Layout
   3. Header and Navigation
   4. Buttons
   5. Hero Section
   6. Features Section
   7. CTA Section
   8. Reviews Section
   9. Footer
   10. Page Headers (Shared)
   11. Security Page Specific
   12. About Page Specific
   13. Legal Pages (Terms & Privacy)
   14. Responsive Design
----------------------------------------- */

/* -----------------------------------------
   1. General Styles
----------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  color: #333;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* -----------------------------------------
   2. Layout
----------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* -----------------------------------------
   3. Header and Navigation
----------------------------------------- */
header {
  background-color: #fff;
  padding: 10px 0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: bold;
  font-size: 1.2rem;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-left: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: #333;
}
   
.nav-links a.active {
  color: #0039A6;
  font-weight: 500;
}

/* -----------------------------------------
   4. Buttons
----------------------------------------- */
.button {
  display: inline-block;
  background-color: #0039A6;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #005bb5;
}

/* -----------------------------------------
   5. Hero Section
----------------------------------------- */
.hero {
  background-color: white;
  text-align: center;
  padding: 80px 0;
}

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

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------
   6. Features Section
----------------------------------------- */
.features {
  background-color: #F5F7FA;
  padding: 80px 0;
  text-align: center;
}

.features-heading {
  margin-bottom: 60px;
}

/* Features Section - Page Specific Styling */
/* Homepage features - horizontal layout */
.home .features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.home .feature {
  width: 100%;
  margin-bottom: 60px;
  padding: 0 20px;
  text-align: center;
}

.home .feature h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.home .feature p {
  color: #555;
  max-width: 100%; /* Ensure text uses full width */
  margin: 0 auto; /* Center the text block */
  text-align: center;
}

/* About page features - card grid layout */
.about .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.about .feature {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  padding: 30px;
  text-align: center;
  transition: transform 0.3s;
}

.about .feature:hover {
  transform: translateY(-5px);
}

.about .feature p {
  color: #555;
  text-align: center;
  margin: 0 auto;
  line-height: 1.5;
}

/* Default feature styles when no page class is present */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.feature {
  width: 100%;
  margin-bottom: 40px;
  text-align: center;
}

.feature h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  text-align: center;
}

.feature p {
  color: #555;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
}

.feature-icon {
  color: #0039A6;
  margin-bottom: 20px;
}

/* -----------------------------------------
   7. CTA Section
----------------------------------------- */
.cta {
  text-align: center;
  padding: 80px 0;
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

/* -----------------------------------------
   8. Reviews Section
----------------------------------------- */
.reviews {
  padding: 80px 0;
}

.reviews h2 {
  text-align: center;
  margin-bottom: 60px;
}

.review-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.review {
  width: 100%;
  margin-bottom: 40px;
  padding: 30px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.review p {
  margin-bottom: 20px;
}

.reviewer {
  display: flex;
  align-items: center;
}

.reviewer img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.reviewer-info h4 {
  font-weight: 600;
  margin-bottom: 5px;
}

.reviewer-info p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

/* -----------------------------------------
   9. Footer
----------------------------------------- */
footer {
  background-color: #E3E8EE;
  padding: 50px 0 20px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
}

.footer-logo {
  margin-bottom: 30px;
}

.footer-links h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

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

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  text-decoration: none;
  color: #555;
}

.social-links {
  display: flex;
  margin-top: 20px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  margin-right: 10px;
}

.copyright {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}

/* -----------------------------------------
   10. Page Headers (Shared)
----------------------------------------- */
.page-header {
  margin: 0;
  padding: 80px 0;
  text-align: center;
  background-color: #F5F7FA;
}

/* -----------------------------------------
   11. Security Page Specific
----------------------------------------- */
/* Security Page Header - This was missing in the consolidated version */
.security .page-header {
  margin: 0;
  padding: 80px 0;
  text-align: center;
}

.security-intro {
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
}

.security-intro p {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.8;
}

/* Adding !important to ensure these styles take precedence */
.law-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 30px !important;
  margin-top: 40px !important;
}

.law-card {
  background-color: white !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
  width: 100% !important;
  max-width: 500px !important;
  overflow: hidden !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.law-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

.law-card-image {
  height: 200px !important;
  background-color: #E3E8EE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666 !important;
}

.law-card-content {
  padding: 30px !important;
}

.law-card-content h3 {
  margin-bottom: 15px !important;
  color: #0039A6 !important;
}

.law-card-content p {
  color: #666 !important;
  margin-bottom: 20px !important;
}

.law-card-button {
  display: inline-block !important;
  background-color: #0039A6 !important;
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: background-color 0.3s !important;
}

.law-card-button:hover {
  background-color: #005bb5 !important;
}

/* -----------------------------------------
   12. About Page Specific
----------------------------------------- */
/* About Content Section */
.about-content {
  padding: 80px 0;
}

.about-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-image {
  text-align: center;
}

.about-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.about-text h2 {
  margin-bottom: 20px;
  color: #0039A6;
}

.about-text p {
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* Platform Description */
.platform-description {
  background-color: #F5F7FA;
  padding: 80px 0;
}

.platform-description h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #0039A6;
}

.platform-description p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* Founders Section */
.founders h3 {
  text-align: center;
  margin-bottom: 40px;
}

.founders-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.founder {
  text-align: center;
  max-width: 200px;
}

.founder img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.founder h4 {
  margin-bottom: 5px;
}

.founder p {
  color: #555;
  font-size: 0.9rem;
}

/* About Features Section */
.about-features {
  padding: 80px 0;
}

.about-features h2 {
  text-align: center;
  margin-bottom: 60px;
}

/* Ethics Section */
.ethics-section {
  background-color: #F5F7FA;
  padding: 80px 0;
}

.ethics-section h2 {
  text-align: center;
  margin-bottom: 60px;
}

.ethics-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.ethics-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  padding: 30px;
  text-align: center;
  width: 100%;
  max-width: 350px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.ethics-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.ethics-icon {
  color: #0039A6;
  margin-bottom: 20px;
}

.ethics-item h3 {
  margin-bottom: 15px;
}

.ethics-item p {
  color: #555;
}

/* Newsletter Section */
.newsletter {
  text-align: center;
  padding: 80px 0;
}

.newsletter h2 {
  margin-bottom: 20px;
}

.newsletter p {
  max-width: 600px;
  margin: 0 auto 30px;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 0 auto;
  gap: 15px;
}

.newsletter-form input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.form-message {
  margin-top: 20px;
  color: #0039A6;
  font-weight: 500;
}

/* -----------------------------------------
   13. Legal Pages (Terms & Privacy)
----------------------------------------- */
.legal-section {
  padding: 60px 0;
}

.legal-container {
  max-width: 800px;
  margin: 0 auto;
}

.legal-container h2 {
  color: #0039A6;
  margin-bottom: 30px;
}

.legal-container h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

.legal-container p {
  margin-bottom: 20px;
  line-height: 1.8;
}

.legal-container ol,
.legal-container ul {
  padding-left: 20px;
  margin-bottom: 30px;
}

.legal-container li {
  margin-bottom: 15px;
  line-height: 1.6;
}

.legal-container .highlight {
  background-color: #F5F7FA;
  padding: 20px;
  border-radius: 10px;
  margin: 30px 0;
}

.legal-section-item {
  margin-bottom: 40px;
}

/* -----------------------------------------
   14. Responsive Design
----------------------------------------- */
@media (min-width: 768px) {
  /* General Responsive */
  .home .feature {
    width: 30%;
  }
  
  .review {
    width: 30%;
  }
  
  /* About Page Responsive */
  .about-grid {
    flex-direction: row;
    align-items: center;
  }
  
  .about-image {
    flex: 1;
  }
  
  .about-text {
    flex: 1;
    padding-left: 40px;
  }
  
  /* Removed redundant grid definition since it's now defined above */
  
  .newsletter-form {
    flex-direction: row;
  }
  
  .newsletter-form input {
    flex: 1;
  }
  
  /* Security Page Responsive */
  .law-card {
    max-width: 48%;
  }
}

/* This was missing in the consolidated version */
@media (max-width: 768px) {
  .law-cards {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .law-card {
    max-width: 100% !important;
  }
}