/* Custom CSS for Professional Software Solutions Website *//* Custom color variables */: root{   --primary-navy: #1e293b;   --primary-navy-dark: #0f172a;   --primary-gold: #d4af37;   --primary-gold-light: #ffd700;   --secondary-gray: #6b7280;   --light-gray: #f9fafb;   --dark-gray: #111827; } /* Mobile Menu Styles */.mobile-menu{   transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;   overflow: hidden;   opacity: 0;   max-height: 0;   visibility: hidden;   position: relative;   z-index: 40; } .mobile-menu.show{   max-height: 500px !important;   opacity: 1 !important;   display: block !important;   visibility: visible !important; } .mobile-menu: not(.hidden){   max-height: 500px !important;   opacity: 1 !important;   display: block !important;   visibility: visible !important; } .mobile-menu.hidden{   max-height: 0 !important;   opacity: 0 !important;   display: none !important;   visibility: hidden !important; } /* Mobile menu button - ensure it's tappable on mobile */.mobile-menu-button{   transition: all 0.2s ease-in-out;   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);   cursor: pointer;   touch-action: manipulation;   min-width: 44px;   min-height: 44px;   display: flex;   align-items: center;   justify-content: center; } .mobile-menu-button: hover{   transform: scale(1.05); } .mobile-menu-button: active{   transform: scale(0.95); } /* Base styles */html{   scroll-behavior: smooth; } body{   line-height: 1.6; } /* Responsive Typography */.hero-title{   font-size: 2.5rem;   line-height: 1.1; } .hero-subtitle{   font-size: 1.25rem;   line-height: 1.4; } @media (min-width: 768px){   .hero-title{     font-size: 3.75rem; }     .hero-subtitle{     font-size: 1.5rem; } } @media (min-width: 1024px){   .hero-title{     font-size: 4.5rem; }     .hero-subtitle{     font-size: 1.75rem; } } /* Custom button styles */.btn-primary{   background-color: var(--primary-navy);   color: white;   padding: 0.75rem 2rem;   border-radius: 0.375rem;   font-weight: 500;   text-decoration: none;   display: inline-block;   transition: all 0.3s ease;   text-align: center;   min-width: 120px; } .btn-primary: hover{   background-color: var(--primary-navy-dark);   transform: translateY(-2px);   box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3); } .btn-secondary{   border: 2px solid var(--primary-navy);   color: var(--primary-navy);   padding: 0.75rem 2rem;   border-radius: 0.375rem;   font-weight: 500;   text-decoration: none;   display: inline-block;   transition: all 0.3s ease;   text-align: center;   min-width: 120px; } .btn-secondary: hover{   background-color: var(--primary-navy);   color: white;   transform: translateY(-2px);   box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3); } /* Responsive button adjustments */@media (max-width: 640px){   .btn-primary,   .btn-secondary{     width: 100%;     margin-bottom: 0.5rem;     padding: 1rem 2rem; } } /* Navigation enhancements */.nav-link{   position: relative;   transition: color 0.3s ease; } .nav-link: : after{   content: '';   position: absolute;   width: 0;   height: 2px;   bottom: -4px;   left: 50%;   background-color: var(--primary-gold);   transition: all 0.3s ease;   transform: translateX(-50%); } .nav-link: hover: : after, .nav-link.active: : after{   width: 100%; } /* Mobile navigation improvements */@media (max-width: 768px){   .mobile-menu{     max-height: 0;     overflow: hidden;     transition: max-height 0.3s ease; }     .mobile-menu.show{     max-height: 400px; }     .mobile-menu a{     padding: 1rem 1.5rem;     border-bottom: 1px solid #e5e7eb; }     .mobile-menu a: last-child{     border-bottom: none; } } /* Hero section enhancements */.hero-gradient{   background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-navy-dark) 100%);   position: relative;   overflow: hidden; } .hero-gradient: : before{   content: '';   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   background: url('data: image/svg+xml, <svg xmlns="http: //www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');   opacity: 0.1; } /* Responsive hero adjustments */@media (max-width: 640px){   .hero-gradient{     padding: 4rem 0; }     .hero-gradient .container{     padding: 0 1rem; } } /* Card styles */.card{   background: white;   border-radius: 0.75rem;   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);   transition: all 0.3s ease;   overflow: hidden; } .card: hover{   transform: translateY(-8px);   box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15); } /* Responsive card adjustments */@media (max-width: 768px){   .card{     margin-bottom: 1.5rem; }     .card: hover{     transform: translateY(-4px); } } /* Grid responsive improvements */.responsive-grid{   display: grid;   gap: 2rem;   grid-template-columns: 1fr; } @media (min-width: 640px){   .responsive-grid{     grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){   .responsive-grid{     grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px){   .responsive-grid{     grid-template-columns: repeat(4, 1fr); } } /* Form styles */.form-input{   width: 100%;   padding: 0.875rem 1rem;   border: 2px solid #d1d5db;   border-radius: 0.5rem;   font-size: 1rem;   transition: all 0.3s ease;   background-color: white; } .form-input: focus{   outline: none;   border-color: var(--primary-navy);   box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);   transform: translateY(-1px); } .form-label{   display: block;   font-weight: 600;   margin-bottom: 0.5rem;   color: var(--dark-gray);   font-size: 0.875rem;   text-transform: uppercase;   letter-spacing: 0.05em; } /* Responsive form adjustments */@media (max-width: 640px){   .form-input{     padding: 1rem;     font-size: 1.125rem; } } /* Animation utilities */.fade-in{   opacity: 0;   transform: translateY(30px);   transition: all 0.8s ease; } .fade-in.visible{   opacity: 1;   transform: translateY(0); } .slide-in-left{   opacity: 0;   transform: translateX(-50px);   transition: all 0.8s ease; } .slide-in-left.visible{   opacity: 1;   transform: translateX(0); } .slide-in-right{   opacity: 0;   transform: translateX(50px);   transition: all 0.8s ease; } .slide-in-right.visible{   opacity: 1;   transform: translateX(0); } /* Loading states */.loading{   opacity: 0.6;   pointer-events: none;   position: relative; } .loading: : after{   content: '';   position: absolute;   top: 50%;   left: 50%;   width: 20px;   height: 20px;   margin: -10px 0 0 -10px;   border: 2px solid #f3f3f3;   border-top: 2px solid var(--primary-navy);   border-radius: 50%;   animation: spin 1s linear infinite; } @keyframes spin{   0%{ transform: rotate(0deg); }   100%{ transform: rotate(360deg); } } /* Accessibility improvements */.sr-only{   position: absolute;   width: 1px;   height: 1px;   padding: 0;   margin: -1px;   overflow: hidden;   clip: rect(0, 0, 0, 0);   white-space: nowrap;   border: 0; } /* Focus styles for better accessibility */.focus-visible: focus, button: focus-visible, a: focus-visible, input: focus-visible, textarea: focus-visible, select: focus-visible{   outline: 2px solid var(--primary-gold);   outline-offset: 2px;   border-radius: 0.25rem; } /* High contrast mode support */@media (prefers-contrast: high){   .card{     border: 2px solid #000; }     .btn-primary{     border: 2px solid #000; }     .btn-secondary{     border: 2px solid #000; } } /* Reduced motion support */@media (prefers-reduced-motion: reduce){   *,   *: : before,   *: : after{     animation-duration: 0.01ms !important;     animation-iteration-count: 1 !important;     transition-duration: 0.01ms !important;     scroll-behavior: auto !important; } } /* Print styles */@media print{   .no-print,   nav,   footer,   .mobile-menu-button{     display: none !important; }     body{     font-size: 12pt;     line-height: 1.4; }     .card{     box-shadow: none;     border: 1px solid #ccc;     break-inside: avoid; }     a[href^="http"]: after{     content: " (" attr(href) ")";     font-size: 0.8em; } } /* Custom scrollbar */: : -webkit-scrollbar{   width: 12px; } : : -webkit-scrollbar-track{   background: #f1f1f1;   border-radius: 6px; } : : -webkit-scrollbar-thumb{   background: var(--secondary-gray);   border-radius: 6px;   border: 2px solid #f1f1f1; } : : -webkit-scrollbar-thumb: hover{   background: var(--primary-navy); } /* Firefox scrollbar */html{   scrollbar-width: thin;   scrollbar-color: var(--secondary-gray) #f1f1f1; } /* Image optimization */img{   max-width: 100%;   height: auto;   display: block; } .lazy{   opacity: 0;   transition: opacity 0.3s; } .lazy.loaded{   opacity: 1; } /* Responsive spacing utilities */.spacing-sm{   padding: 1rem; } .spacing-md{   padding: 1.5rem; } .spacing-lg{   padding: 2rem; } @media (min-width: 768px){   .spacing-sm{     padding: 1.5rem; }     .spacing-md{     padding: 2rem; }     .spacing-lg{     padding: 3rem; } } @media (min-width: 1024px){   .spacing-sm{     padding: 2rem; }     .spacing-md{     padding: 3rem; }     .spacing-lg{     padding: 4rem; } } /* Container responsive improvements */.container-responsive{   width: 100%;   max-width: 1280px;   margin: 0 auto;   padding: 0 1rem; } @media (min-width: 640px){   .container-responsive{     padding: 0 1.5rem; } } @media (min-width: 1024px){   .container-responsive{     padding: 0 2rem; } } /* Performance optimizations */.will-change-transform{   will-change: transform; } .will-change-opacity{   will-change: opacity; } /* Remove will-change after animation */.animation-complete{   will-change: auto; } /* Dark mode support (future enhancement) */@media (prefers-color-scheme: dark){ : root{     --text-primary: #f9fafb;     --text-secondary: #d1d5db;     --bg-primary: #111827;     --bg-secondary: #1f2937; } } /* Responsive text sizes */.text-responsive-sm{   font-size: 0.875rem; } .text-responsive-base{   font-size: 1rem; } .text-responsive-lg{   font-size: 1.125rem; } .text-responsive-xl{   font-size: 1.25rem; } @media (min-width: 768px){   .text-responsive-sm{     font-size: 1rem; }     .text-responsive-base{     font-size: 1.125rem; }     .text-responsive-lg{     font-size: 1.25rem; }     .text-responsive-xl{     font-size: 1.5rem; } } @media (min-width: 1024px){   .text-responsive-sm{     font-size: 1.125rem; }     .text-responsive-base{     font-size: 1.25rem; }     .text-responsive-lg{     font-size: 1.5rem; }     .text-responsive-xl{     font-size: 1.875rem; } } /* Multi-step form styles */.form-step{   transition: all 0.3s ease; } .form-step.hidden{   display: none; } .form-step h3{   border-bottom: 2px solid #e5e7eb;   padding-bottom: 0.5rem;   margin-bottom: 1rem; } /* File upload styles */.border-dashed: hover{   border-color: var(--primary-navy); } .file-item{   animation: slideIn 0.3s ease; } @keyframes slideIn{   from{     opacity: 0;     transform: translateY(-10px); }   to{     opacity: 1;     transform: translateY(0); } } /* Progress indicator */.progress-bar{   height: 4px;   background-color: var(--primary-gold);   transition: width 0.3s ease;   border-radius: 2px; } .progress-container{   width: 100%;   height: 4px;   background-color: #e5e7eb;   border-radius: 2px;   margin-bottom: 2rem; } /* Enhanced form validation styles */.form-input.border-red-500{   border-color: #ef4444;   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .form-input.border-green-500{   border-color: var(--primary-gold);   box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); } /* Contact information cards */.contact-method{   transition: all 0.3s ease; } .contact-method: hover{   transform: translateY(-2px);   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } /* Social media links */.social-link{   transition: all 0.3s ease; } .social-link: hover{   transform: scale(1.1); } /* Responsive contact form */@media (max-width: 768px){   .form-step{     padding: 1rem 0; }     .form-step h3{     font-size: 1.25rem; }     .btn-primary,   .btn-secondary{     width: 100%;     margin-bottom: 0.5rem; }     .flex.justify-between{     flex-direction: column; }     .flex.justify-end{     justify-content: stretch; } } /* File upload responsive */@media (max-width: 640px){   .border-dashed{     padding: 1rem; }     .border-dashed svg{     height: 2rem;     width: 2rem; } } /* Contact grid responsive */@media (max-width: 1024px){   .grid.grid-cols-1.lg\\: grid-cols-2{     grid-template-columns: 1fr;     gap: 2rem; } } /* Enhanced accessibility for contact form */.form-input: focus{   outline: none;   border-color: var(--primary-navy);   box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1); } .form-label{   color: var(--dark-gray);   font-weight: 600;   margin-bottom: 0.5rem;   display: block; } /* Required field indicator */.form-label: : after{   content: " *";   color: #ef4444; } .form-label: not([for$="firstName"]): not([for$="lastName"]): not([for$="email"]): not([for$="company"]): not([for$="services"]): not([for$="projectDescription"]): : after{   content: ""; } /* Step navigation improvements */.step-navigation{   display: flex;   justify-content: space-between;   align-items: center;   margin-top: 2rem;   padding-top: 1rem;   border-top: 1px solid #e5e7eb; } /* Loading state for file uploads */.file-uploading{   opacity: 0.6;   pointer-events: none; } .file-uploading: : after{   content: '';   position: absolute;   top: 50%;   left: 50%;   width: 16px;   height: 16px;   margin: -8px 0 0 -8px;   border: 2px solid #f3f3f3;   border-top: 2px solid var(--primary-navy);   border-radius: 50%;   animation: spin 1s linear infinite; } /* Contact information enhancements */.contact-info-card{   background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);   border: 1px solid #e2e8f0;   transition: all 0.3s ease; } .contact-info-card: hover{   border-color: var(--primary-navy);   box-shadow: 0 4px 12px rgba(30, 41, 59, 0.15); } /* Business hours styling */.business-hours{   background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);   border-left: 4px solid var(--primary-gold); } /* Emergency contact highlight */.emergency-contact{   background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);   border-left: 4px solid #f59e0b; }