:root {
    --blue: #0077cc;
    --light-blue: #e6f0fa;
    --white: #ffffff;
    --grey: #f7f7f7;
    --text: #333;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    color: var(--text);
    background-color: var(--grey);
    line-height: 1.6;
    background-image: 
        radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px), /* Polka dot pattern */
        linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Fading effect */
    background-size: 20px 20px, 100% 100%; /* Size of the dots and gradient */
    background-repeat: repeat, no-repeat; /* Repeat dots, no-repeat gradient */
    background-position: top center, top center; /* Align both layers */
}

.container {
    max-width: 1400px; /* Increased max-width for larger screens */
    margin: 0 auto;
    padding: 2rem;
}



.section {
    padding: 5rem 0.1rem; /* Increased padding for sections */
}

.section.light {
    background-color: var(--light-blue);
}

.card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); /* Stronger shadow for a premium look */
    padding: 2.5rem; /* Increased padding for cards */
    margin-bottom: 2rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Wider grid items */
    gap: 2rem; /* Increased gap for better spacing */
}

h2 {
    color: var(--blue);
    margin-bottom: 1.5rem; /* Increased spacing below headings */
    font-size: 2rem; /* Larger font size for headings */
}

h3 {
    margin-top: 0;
    color: #005999;
    font-size: 1.5rem; /* Slightly larger subheadings */
}

ul {
    padding-left: 1.5rem; /* Increased padding for lists */
}

.footer {
    text-align: center;
    padding: 3rem 1rem; /* Increased padding for footer */
    background-color: var(--blue);
    color: white;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.why-choose-us {
    background: linear-gradient(135deg, var(--blue), #005999); /* Premium gradient background */
    color: white;
    padding: 6rem 2rem; /* Larger padding for a spacious feel */
    text-align: center;
    border-radius: 2rem; /* Rounded corners for a modern look */
    margin: 4rem auto; /* Add spacing around the section */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); /* Floating card shadow */
    max-width: 1400px; /* Center the section and limit its width */
}

.why-choose-us h2 {
    font-size: 3rem; /* Larger heading */
    font-weight: bold;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow for text */
    color: white; /* Make the header white */
}

.why-choose-us p {
    font-size: 1.5rem; /* Larger paragraph text */
    margin-bottom: 3rem;
    line-height: 1.8; /* Improve readability */
}

.why-choose-us .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid layout */
    gap: 2rem; /* Space between cards */
}

.why-choose-us .feature-card {
    background: white;
    color: var(--text);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow for cards */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-us .feature-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.why-choose-us .feature-card h3 {
    font-size: 1.8rem; /* Larger subheading */
    color: var(--blue);
    margin-bottom: 1rem;
}

.why-choose-us .feature-card p {
    font-size: 1.2rem; /* Slightly larger text */
    line-height: 1.6;
}

.why-practice-solutions-card {
    background: linear-gradient(135deg, var(--blue), #005999); /* Premium gradient background */
    color: white;
    border-radius: 1.5rem; /* Rounded corners for a modern look */
    padding: 4rem; /* Increased padding for a spacious feel */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); /* Stronger shadow for depth */
    text-align: left; /* Align text to the left for readability */
    max-width: 1200px; /* Limit the width for better structure */
    margin: 4rem auto; /* Center the card and add spacing */
    position: relative; /* For additional design elements */
}

.why-practice-solutions-card h3 {
    font-size: 2.5rem; /* Larger heading for impact */
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
    color: white; /* Ensure the heading is white */
}

.why-practice-solutions-card p {
    font-size: 1.3rem; /* Slightly larger text for readability */
    line-height: 1.8; /* Improve readability */
    margin-bottom: 2rem;
}

.why-practice-solutions-card ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

.why-practice-solutions-card ul li {
    font-size: 1.2rem; /* Slightly larger text for bullet points */
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.why-practice-solutions-card ul li::before {
    content: "✔"; /* Add a checkmark icon */
    color: #00ffcc; /* Highlight color for the icon */
    font-size: 1.5rem;
    margin-right: 1rem;
}

.why-practice-solutions-card .btn-primary {
    background-color: white;
    color: var(--blue);
    padding: 1rem 2rem;
    border-radius: 999px; /* Fully rounded button */
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Button shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.why-practice-solutions-card .btn-primary:hover {
    transform: translateY(-3px); /* Lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}

.why-practice-solutions-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Subtle overlay for depth */
    border-radius: 1.5rem; /* Match the card's rounded corners */
    z-index: -1; /* Place behind the card */
}

#contact .container.card {
    max-width: 600px; /* Reduce the width of the card */
    margin: 0 auto; /* Center the card horizontally */
    padding: 2rem; /* Add padding for spacing inside the card */
    border-radius: 1rem; /* Rounded corners for a modern look */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    background-color: white; /* Ensure the card has a white background */
    text-align: center; /* Center-align the text */
}

.mission-statement {
    background: linear-gradient(135deg, var(--blue), var(--light-blue)); /* Match the header background */
    text-align: center; /* Center-align text */
    padding: 4rem 2rem; /* Adjust padding */
    margin: 0; /* Remove margins */
    width: 100%; /* Ensure it spans the full width of the page */
    position: relative; /* For background dots */
    color: white; /* White text for contrast */
    }

.mission-statement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 8px, transparent 8px); /* Subtle white dots */
    background-size: 50px 50px; /* Adjust dot spacing */
    background-repeat: repeat;
    z-index: -1; /* Place behind the content */
    opacity: 0.3; /* Subtle dots */
}

.mission-statement blockquote {
    font-style: italic; /* Make it look like a quote */
    margin: 0 auto;
    max-width: 900px; /* Limit the width of the content */
    line-height: 1.8; /* Improve readability */
    position: relative;
}

.mission-statement blockquote::before,
.mission-statement blockquote::after {
    display: none; /* Remove pseudo-elements that might add extra space */
}

.mission-statement p {
    font-size: 1.3rem; /* Slightly larger text for readability */
    margin: 0 auto;
    max-width: 800px; /* Limit the width of the paragraph */
}

.company-overview {
    background: radial-gradient(circle, var(--light-blue), transparent); /* Radial gradient fading to transparent */
    padding: 4rem 2rem; /* Spacious padding */
    text-align: center; /* Center-align text */
    margin: 0; /* Remove margins */
    width: 100%; /* Ensure it spans the full width of the page */
    position: relative; /* For background dots or layering */
    color: var(--text); /* Standard text color */
}

.company-overview::before {
    /* Remove the dots by making the pseudo-element invisible */
    content: '';
    display: none; /* Hides the pseudo-element entirely */
}

.company-overview blockquote {
    font-style: italic; /* Make it look like a quote */
    margin: 0 auto;
    max-width: 900px; /* Limit the width of the content */
    line-height: 1.8; /* Improve readability */
    position: relative;
    color: var(--text); /* Standard text color */
}

.company-overview blockquote::before {
    content: "“"; /* Add an opening quote */
    font-size: 4rem;
    color: var(--blue); /* Use the primary blue color */
    position: absolute;
    top: -20px;
    left: 10px;
}

.company-overview blockquote::after {
    content: "”"; /* Add a closing quote */
    font-size: 4rem;
    color: var(--blue); /* Use the primary blue color */
    position: absolute;
    bottom: -20px;
    right: 10px;
}

.company-overview h2 {
    font-size: 2rem; /* Slightly smaller heading for a quote style */
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: var(--blue); /* Use the primary blue color */
}

.company-overview p {
    font-size: 1.3rem; /* Slightly larger text for readability */
    margin: 0 auto;
    max-width: 800px; /* Limit the width of the paragraph */
    color: var(--text); /* Standard text color */
}

.logo {
    position: absolute; /* Position the logo within the header */
    top: 5%; /* Provide more space from the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the logo's width */
    height: 900px; /* Reduce the height by 5% */
    width: auto; /* Maintain aspect ratio */
    filter: brightness(0) invert(1); /* Make the logo white */
    z-index: 10; /* Ensure the logo is above all other elements */
}

/* Hero Section Styles */
.hero {
  width: 100vw;
  min-height: 60vh;
  background: linear-gradient(135deg, #0a2342 0%, #193a6a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  text-align: center;
  color: #fff;
  z-index: 2;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1rem 2rem 1rem;
  animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) both;
}

.hero-logo {
  width: 385px;
  margin-bottom: 0.75rem; /* Reduced space between logo and title */
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25));
  animation: logoPop 1.2s cubic-bezier(.23,1.01,.32,1) both;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
  font-family: 'Segoe UI', 'Montserrat', 'Arial', sans-serif;
  text-shadow: 0 2px 16px rgba(10,35,66,0.18);
  animation: fadeInUp 1.5s 0.2s both;
}

.hero-subtitle {
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 2.2rem;
  opacity: 0.85;
  font-family: 'Segoe UI', 'Montserrat', 'Arial', sans-serif;
  animation: fadeInUp 1.5s 0.4s both;
}

.hero-btn {
  padding: 0.85rem 2.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 2rem;
  background: linear-gradient(90deg, #1e4d91 0%, #2e6bc1 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 24px rgba(30,77,145,0.15);
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  display: inline-block;
  animation: fadeInUp 1.5s 0.6s both;
}

.hero-btn:hover,
.hero-btn:focus {
  background: linear-gradient(90deg, #2e6bc1 0%, #1e4d91 100%);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 32px rgba(30,77,145,0.22);
}

/* Simple fade-in-up animation */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo pop animation */
@keyframes logoPop {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  80% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .hero-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.4rem;
  }
  .hero-subtitle {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1.2rem;
  }
  .hero-logo {
    width: 180px;
    margin-bottom: 0.4rem;
  }
  h2, h3 {
    font-size: 1.2rem !important;
    text-align: center !important;
    margin-bottom: 0.7rem !important;
    margin-top: 0.7rem !important;
  }
  .section h2 {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    color: var(--blue) !important;
    text-align: center !important;
    margin-bottom: 1.2rem !important;
    margin-top: 0.7rem !important;
  }
  p, li {
    font-size: 1rem !important;
    text-align: center !important;
  }
  .container,
  .card,
  .why-practice-solutions-card {
    border-radius: 0 !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  section,
  .section,
  .section.light {
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
  }

  .company-overview blockquote::before,
  .company-overview blockquote::after {
    display: none !important;
    content: none !important;
  }

  .btn-primary,
  .hero-btn {
    display: block !important;
    margin: 1.5rem auto !important;
    text-align: center !important;
    width: fit-content !important;
    min-width: 60vw;
    max-width: 90vw;
  }

  .why-choose-us .features {
    gap: 1rem; /* Reduce space between cards */
    grid-template-columns: 1fr; /* Stack cards vertically */
  }
  .why-choose-us .feature-card {
    padding: 1rem 0.5rem; /* Make cards more compact */
    font-size: 0.95rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .why-choose-us .feature-card h3 {
    font-size: 1.05rem !important;
    margin-bottom: 0.4rem !important;
  }
  .why-choose-us .feature-card p {
    font-size: 0.95rem !important;
    margin-bottom: 0.2rem !important;
  }
}