/* Custom styles with improved aesthetics */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

 :root {
     --primary: #2b4b8c;
     --secondary: #4caf50;
     --light-bg: #f8f9fa;
     --dark-text: #333333;
     --light-text: #666666;
     --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --transition: all 0.3s ease;
 }

 * {
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     line-height: 1.6;
     color: var(--dark-text);
     margin: 0;
     padding: 0;
 }

 section {
     width: 100%;
     min-height: auto;
     padding: 5rem 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

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

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin-top: 0;
     line-height: 1.2;
     font-weight: 700;
     letter-spacing: -0.01em;
 }

 h1 {
     font-size: 3rem;
     margin-bottom: 1.5rem;
 }

 h2 {
     font-size: 2.25rem;
     margin-bottom: 2rem;
     position: relative;
     display: inline-block;
 }

 h2:after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background-color: var(--primary);
     border-radius: 3px;
 }

 h3 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
 }

 p {
     margin-bottom: 1.5rem;
     font-size: 1rem;
     line-height: 1.7;
 }

 .hero-section {
     background-color: #ffffff;
     padding: 8rem 0 6rem;
     min-height: 90vh;
     display: flex;
     align-items: center;
     text-align: center;
 }

 .hero-section h1 {
     color: var(--primary);
     font-weight: 800;
     margin-bottom: 1rem;
 }

 .hero-section p.text-lg {
     font-size: 1.5rem;
     font-weight: 500;
     margin-bottom: 1.5rem;
     color: var(--dark-text);
 }

 .hero-section p.text-gray-600 {
     font-size: 1.125rem;
     max-width: 800px;
     margin: 0 auto 2.5rem;
     color: var(--light-text);
 }

 .values-section {
     display: none;
     background-color: var(--light-bg);
 }

 #values,
 nav a[href="#values"] {
     display: none;
 }

 .services-section {
     background-color: #ffffff;
 }

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

 .contact-section {
     background-color: #ffffff;
 }

 .about-section {
     background-color: var(--light-bg);
     padding: 5rem 0;
 }

 .about-section .prose {
     max-width: 800px;
     margin: 0 auto;
     text-align: justify;
 }

 .about-section .prose h3 {
     color: var(--primary);
     font-weight: 600;
     margin-top: 2rem;
 }

 .about-section .prose p {
     color: var(--light-text);
     font-size: 1rem;
     line-height: 1.7;
 }

 .careers-section {
     background-color: #ffffff;
     padding: 5rem 0;
 }

 .careers-section .prose {
     max-width: 800px;
     margin: 0 auto;
 }

 .careers-section .prose h3 {
     color: var(--primary);
     font-weight: 600;
     margin-top: 2rem;
 }

 .careers-section .prose p {
     color: var(--light-text);
     font-size: 1rem;
     line-height: 1.7;
 }

 .footer .container {
     max-width: 1400px;
     /* Increased to accommodate more columns */
     padding: 0 1.5rem;
 }

 .footer .grid {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     /* Adaptive columns */
     gap: 2rem;
 }

 .footer ul li a {
     transition: var(--transition);
     font-size: 0.95rem;
 }

 .footer ul li a:hover {
     color: white;
     text-decoration: underline;
 }

 .footer {
     background-color: var(--primary);
     color: white;
     padding: 3rem 0;
 }

 .btn-primary,
 .btn-secondary {
     display: inline-block;
     padding: 0.75rem 2rem;
     border-radius: 6px;
     font-size: 1rem;
     font-weight: 600;
     text-align: center;
     cursor: pointer;
     transition: var(--transition);
     border: none;
     outline: none;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

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

 .btn-primary:hover {
     background-color: #1e3a6e;
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }

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

 .btn-secondary:hover {
     background-color: #3d9140;
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }

 .service-card {
     height: 100%;
     display: flex;
     flex-direction: column;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: var(--card-shadow);
     padding: 2rem;
     background-color: white;
     transition: var(--transition);
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .service-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }

 .service-icon {
     width: 95px;
     height: 56px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
     transition: var(--transition);
 }

 .service-card:hover .service-icon svg {
     color: white !important;
 }

 .service-btn {
     margin-top: auto;
     padding: 0.75rem 0;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 6px;
     transition: var(--transition);
     border: none;
     cursor: pointer;
 }

 .service-btn:hover {
     opacity: 0.9;
     transform: translateY(-2px);
 }

 .modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(4px);
 }

 .service-icon img {
     height: 6rem;
     /* 32px, matches h-8 */
     width: 6rem;
     /* 32px, matches w-8 */
     object-fit: contain;
     /* Ensures the image fits without distortion */
 }

 .modal-content {
     background-color: #fefefe;
     margin: 10% auto;
     padding: 2.5rem;
     border: none;
     width: 90%;
     max-width: 900px;
     border-radius: 12px;
     box-shadow: var(--card-shadow);
     position: relative;
 }

 .modal-content .prose {
     max-width: 100%;
     overflow-y: auto;
     max-height: 60vh;
     /* Prevent overflow in modals */
 }

 .modal-content .prose h3 {
     color: var(--primary);
     font-size: 1.25rem;
     margin: 1.5rem 0 1rem;
 }

 .modal-content .prose ul {
     list-style-type: disc;
     padding-left: 1.5rem;
     margin-bottom: 1.5rem;
     color: var(--light-text);
 }

 .modal-content .prose ul li {
     margin-bottom: 0.5rem;
     font-size: 1rem;
     line-height: 1.6;
 }

 .modal-content .prose a {
     color: var(--primary);
     text-decoration: underline;
     transition: var(--transition);
 }

 .modal-content .prose a:hover {
     color: #1e3a6e;
 }

 .close {
     position: absolute;
     top: 1.25rem;
     right: 1.5rem;
     color: #aaa;
     font-size: 1.75rem;
     font-weight: bold;
     transition: var(--transition);
 }

 .close:hover,
 .close:focus {
     color: var(--primary);
     text-decoration: none;
     cursor: pointer;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     h1 {
         font-size: 2.5rem;
     }

     h2 {
         font-size: 1.75rem;
     }

     h3 {
         font-size: 1.25rem;
     }

     .hero-section {
         padding: 6rem 0 4rem;
     }

     .hero-section p.text-lg {
         font-size: 1.25rem;
     }

     .hero-section p.text-gray-600 {
         font-size: 1rem;
     }

     section {
         padding: 4rem 0;
     }

     .about-section,
     .careers-section {
         padding: 3rem 0;
     }

     .about-section .prose,
     .careers-section .prose {
         padding: 0 1rem;
     }

     .footer .grid {
         grid-template-columns: 1fr;
         /* Stack columns on mobile */
         text-align: center;
     }

     .footer ul {
         margin-bottom: 1.5rem;
     }
 }

 /* Header styling */
 header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     background-color: rgba(255, 255, 255, 0.95);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
     backdrop-filter: blur(10px);
 }

 header .container {
     padding-top: 1rem;
     padding-bottom: 1rem;
 }

 header a.text-xl {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--primary);
     text-decoration: none;
 }

 nav a {
     font-size: 1rem;
     font-weight: 500;
     color: var(--dark-text);
     text-decoration: none;
     transition: var(--transition);
     position: relative;
 }

 nav a:hover {
     color: var(--primary);
 }

 nav a:after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary);
     transition: var(--transition);
 }

 nav a:hover:after {
     width: 100%;
 }